@acorex/components 6.5.26 → 6.5.27

package/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../../coverage/acorex/component'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/acorex/components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "."
+  ]
+}

package/package.json

@@ -1,33 +1,13 @@
-{
-  "name": "@acorex/components",
-  "version": "6.5.26",
-  "peerDependencies": {
-    "@angular/common": "^13.3.8",
-    "@angular/core": "^13.3.8"
-  },
-  "dependencies": {
-    "@angular/cdk": "^13.3.8",
-    "angular2-text-mask": "^9.0.0",
-    "tslib": "^2.0.0"
-  },
-  "module": "fesm2015/acorex-components.mjs",
-  "es2020": "fesm2020/acorex-components.mjs",
-  "esm2020": "esm2020/acorex-components.mjs",
-  "fesm2020": "fesm2020/acorex-components.mjs",
-  "fesm2015": "fesm2015/acorex-components.mjs",
-  "typings": "acorex-components.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./acorex-components.d.ts",
-      "esm2020": "./esm2020/acorex-components.mjs",
-      "es2020": "./fesm2020/acorex-components.mjs",
-      "es2015": "./fesm2015/acorex-components.mjs",
-      "node": "./fesm2015/acorex-components.mjs",
-      "default": "./fesm2020/acorex-components.mjs"
-    }
-  },
-  "sideEffects": false
+{
+  "name": "@acorex/components",
+  "version": "6.5.27",
+  "peerDependencies": {
+    "@angular/common": "^13.3.8",
+    "@angular/core": "^13.3.8"
+  },
+  "dependencies": {
+    "@angular/cdk": "^13.3.8",
+    "angular2-text-mask": "^9.0.0",
+    "tslib": "^2.0.0"
+  }
 }

package/src/lib/accordion/accordion.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input, Output, EventEmitter, ContentChild, TemplateRef, ContentChildren, QueryList } from "@angular/core";
+import { AXPanelBoxComponent } from "../panel-box/panel-box.component";
+import { AXBaseComponent } from '../base/element.class';
+
+@Component({
+  selector: "ax-accordion",
+  template: "<ng-content></ng-content>",
+})
+export class AXAccordionComponent extends AXBaseComponent {
+
+  @ContentChildren(AXPanelBoxComponent)
+  panels: QueryList<AXPanelBoxComponent>;
+
+  @Input()
+  multiple: boolean = false;
+
+  constructor() {
+    super()
+  }
+
+  ngAfterContentInit() {
+    this.panels.forEach(p => {
+      if (this.multiple == false)
+        p.collapsed = true;
+      p.collapsedChange.subscribe((v: boolean) => {
+        this.handleCollapsedChanged(p, v);
+      });
+    });
+    if (this.multiple == false)
+      this.panels.first.collapsed = false;
+  }
+
+  private handleCollapsedChanged(panel: AXPanelBoxComponent, value: boolean) {
+    if (value == false && this.multiple == false) {
+      this.panels.forEach(p => {
+        if (p != panel)
+          p.collapsed = true;
+      });
+    }
+  }
+
+
+}

package/src/lib/accordion/accordion.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { AXAccordionComponent } from "./accordion.component";
+import { AXPanelBoxModule } from "../panel-box/panel-box.module";
+@NgModule({
+    declarations: [AXAccordionComponent],
+    imports: [CommonModule, AXPanelBoxModule],
+    exports: [AXAccordionComponent],
+    providers: []
+})
+export class AXAccordionModule { }

package/src/lib/accordion/api.ts

@@ -0,0 +1,2 @@
+export * from './accordion.component';
+export * from './accordion.module';

package/src/lib/base/base-page.class.ts

@@ -0,0 +1,116 @@
+import { EventEmitter, ViewChild, Directive } from '@angular/core';
+import { AXDataEvent } from './events.class';
+import { AXMenuItemClickEvent } from '../menu/menu.component';
+import { AXButtonItem } from '@acorex/core';
+import { AXPageComponent } from '../page/page.component';
+import { Subject } from 'rxjs';
+
+export const TAB_META_KEY = '__meta__';
+
+export class AXPageCloseEvent extends AXDataEvent<any> {
+}
+export class AXPageClosing {
+    cancel: boolean = false;
+    data?: any;
+}
+
+export class AXPageResult {
+    sender: any;
+    data?: any;
+}
+
+export class AXPageClosedPromise extends Promise<AXPageResult> {
+
+    private closeMethod: () => void;
+    constructor(
+        executor: (resolve: (value?: AXPageResult | PromiseLike<AXPageResult>) => void,
+            reject: (reason?: any) => void) => void
+    ) {
+        super(executor);
+    }
+
+    public close() {
+        if (this.closeMethod) {
+            this.closeMethod();
+        }
+    }
+}
+
+@Directive()
+export abstract class AXBasePageComponent {
+
+    @ViewChild(AXPageComponent, { static: true })
+    private pageContainer: AXPageComponent;
+
+    private _isLoading: boolean = false;
+    public get isLoading(): boolean {
+        return this._isLoading;
+    }
+    public set isLoading(v: boolean) {
+        this._isLoading = v;
+        if (this.pageContainer) {
+            this.pageContainer.isLoading = this.isLoading;
+        }
+    }
+
+
+    onClosed: EventEmitter<AXPageCloseEvent> = new EventEmitter<AXPageCloseEvent>();
+
+    close(data?: any) {
+        this.onClosed.emit({
+            component: this,
+            data: data
+        });
+    }
+
+    onClosing(e: AXPageClosing): void | Promise<void> {
+    }
+
+    onActivated()
+    {
+      
+    }
+
+    ngOnDestroy() {
+        this.onClosed.unsubscribe();
+    }
+}
+
+@Directive()
+export abstract class AXBasePopupPageComponent extends AXBasePageComponent {
+
+
+    constructor() {
+        super();
+        setTimeout(() => {
+            this.configFooterButtons(this.getFooterButtons());
+        });
+    }
+
+
+    private _footerButtons: AXButtonItem[] = [];
+    onFooterButtonsChanged = new Subject<AXButtonItem[]>();
+
+    protected get footerButtons(): AXButtonItem[] {
+        return this._footerButtons || [];
+    }
+
+    protected configFooterButtons(buttons?: AXButtonItem[]) {
+        if (buttons) {
+            this._footerButtons = buttons;
+            this.onFooterButtonsChanged.next(buttons);
+        }
+        else {
+            this.onFooterButtonsChanged.next(this.footerButtons);
+        }
+    }
+
+    onFooterButtonClick(e: AXMenuItemClickEvent) {
+    }
+
+    getFooterButtons(): AXButtonItem[] {
+        return [];
+    }
+}
+
+

package/src/lib/base/components.class.ts

@@ -0,0 +1,9 @@
+import { Injectable } from "@angular/core";
+
+@Injectable()
+export abstract class AXComponent {}
+
+@Injectable()
+export abstract class AXClosbaleComponent extends AXComponent {
+  abstract close(): void;
+}

package/src/lib/base/element.class.ts

@@ -0,0 +1,344 @@
+import { Input, Output, EventEmitter, ChangeDetectorRef, ViewChild, ElementRef, ContentChild, Directive } from '@angular/core';
+import { AXValidationComponent, AXValidation } from '../validation/validation.component';
+import { AXValidationRuleResult } from '../validation/validation.class';
+import { AXHtmlUtil } from '@acorex/core';
+import { AXEvent, AXHtmlEvent, AXValueEvent } from './events.class';
+
+export type AXElementSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+@Directive()
+export abstract class AXBaseComponent {
+  @Input() cssClass: string;
+  uid: string = AXHtmlUtil.getUID();
+  constructor() {
+  }
+}
+
+
+export class AXBaseInputChangeEvent extends AXValueEvent<any> {
+  isUserChange?: boolean;
+}
+
+export interface AXBaseSizableComponent {
+  size: AXElementSize;
+}
+
+export interface AXBaseInteractiveComponent {
+  disabled: boolean;
+  tabIndex: number;
+}
+
+export interface AXBaseInputComponent extends AXBaseInteractiveComponent {
+  readonly: boolean;
+  focus(): void;
+}
+
+
+export interface AXBaseValueComponent<T> extends AXBaseInputComponent {
+  onValueChanged?: EventEmitter<AXValueEvent<T>>;
+  valueChange?: EventEmitter<T>;
+  value: T;
+}
+
+export interface AXBaseClickableComponent extends AXBaseInteractiveComponent {
+  click: EventEmitter<AXHtmlEvent<MouseEvent>>;
+}
+
+@Directive()
+export abstract class AXValidatableComponent extends AXBaseComponent {
+
+  private __valueField: string = 'value';
+  private __nativeElement: HTMLElement;
+  private __validation: AXValidation;
+
+
+  @Input()
+  tabIndex: number = 0;
+
+  protected initValidation(
+    elementRef: ElementRef,
+    valueField: string,
+    validation: AXValidation
+  ) {
+    this.__nativeElement = elementRef.nativeElement;
+    this.__valueField = valueField;
+    this.__validation = validation;
+    const value = this[this.__valueField]
+    if ((!Array.isArray(value) && value) || (Array.isArray(value) && value.length > 0))
+      this.validate();
+  }
+
+  get validation() {
+    return this.__validation;
+  }
+
+  validate(): Promise<AXValidationRuleResult> {
+    if (this.__validation !== undefined && (this.__validation.rules || []).length > 0) {
+      const result = this.__validation.validate(this[this.__valueField]);
+      result.then(c => {
+        if (c.result) {
+          this.clearValidationStyle(this.__nativeElement);
+        }
+        else {
+          this.applyValidationStyle(this.__nativeElement, c);
+        }
+      });
+      return result;
+    }
+    else {
+      return Promise.resolve({ result: true });
+    }
+  }
+
+
+  protected clearValidationStyle(element: HTMLElement, clear: boolean = false) {
+    if (this.__validation !== undefined && (this.__validation.rules || []).length > 0) {
+      const formGroup = element.closest('.form-group');
+      const formItem = formGroup?.querySelector('.form-item') || element.closest('.form-item') || element.querySelector('.form-item');;
+      const label = formGroup?.querySelector('.form-group-label');
+      const parent = formItem?.parentElement || element.parentElement;
+
+      formItem?.classList.remove('success-state');
+      formItem?.classList.remove('error-state');
+      //formItem?.classList.remove('required-state');
+      if (!clear) {
+        formItem?.classList.add('success-state');
+      }
+      // label?.classList.remove('error-text');
+      if (parent.querySelector('span.error-text')) {
+        parent.removeChild(parent.querySelector('span.error-text'));
+      }
+    }
+  }
+
+  protected applyValidationStyle(element: HTMLElement, v: AXValidationRuleResult): void {
+    if (this.__validation !== undefined && (this.__validation.rules || []).length > 0) {
+      const formGroup = element.closest('.form-group');
+      const formItem = formGroup?.querySelector('.form-item') || element.closest('.form-item') || element.querySelector('.form-item');
+      const label = formGroup?.querySelector('.form-group-label');
+      const parent = formItem?.parentElement || element.parentElement;
+      formItem?.classList.add('error-state');
+      formItem?.classList.remove('success-state');
+      if (parent.querySelector('span.error-text')) {
+        parent.removeChild(parent.querySelector('span.error-text'));
+      }
+      if (this.__validation.showMessage) {
+        const span = document.createElement('span');
+        span.innerText = v.message;
+        span.classList.add('ax', 'error-text');
+        parent.appendChild(span);
+      }
+      // label?.classList.add('error-text');
+    }
+  }
+}
+
+
+
+
+@Directive()
+export abstract class AXBaseTextComponent extends AXValidatableComponent implements AXBaseSizableComponent, AXBaseValueComponent<string> {
+
+  ngAfterViewInit() {
+    if (this.input) {
+      this.input.nativeElement.onkeyup = (e) => {
+        this.userChange = true;
+        this.value = (e.target as any).value;
+        this.onkey.emit(e);
+      };
+      this.input.nativeElement.onkeydown = (e) => {
+        this.userChange = true;
+
+        this.value = (e.target as any).value;
+        this.onkey.emit(e);
+      };
+      this.input.nativeElement.onkeypress = (e) => {
+        this.userChange = true;
+
+        this.value = (e.target as any).value;
+        this.onkey.emit(e);
+      };
+    }
+  }
+
+
+  ngAfterContentInit(): void {
+    this.initValidation(this.ref, 'value', this.validation);
+  }
+
+
+  @Input()
+  tabIndex: number = 0;
+
+  @ViewChild('input', { static: true })
+  @ContentChild('input', { static: true })
+  input: ElementRef<HTMLInputElement>;
+
+  @ContentChild(AXValidation, { static: true })
+  private _contentValidation: AXValidation;
+
+  private _validation: AXValidation;
+
+  @Input()
+  public get validation(): AXValidation {
+    return this._validation ? this._validation : this._contentValidation;
+  }
+
+  public set validation(v: AXValidation) {
+    this._validation = v;
+    this.initValidation(this.ref, 'value', v);
+  }
+
+
+  @Input()
+  disabled: boolean = false;
+
+  @Input()
+  readonly: boolean = false;
+
+  @Input()
+  textAlign: 'right' | 'left' | null = null;
+
+  @Input()
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
+
+  @Input()
+  placeholder: string;
+
+
+  @Input()
+  autocomplete: "on" | "off";
+
+  @Input()
+  name: string;
+
+  userChange: boolean = false;
+
+  constructor(protected cdr: ChangeDetectorRef, protected ref: ElementRef) {
+    super();
+  }
+
+  @Output()
+  public onkey: EventEmitter<KeyboardEvent> = new EventEmitter<KeyboardEvent>();
+
+  @Output()
+  public onBlur: EventEmitter<AXHtmlEvent<Event>> = new EventEmitter<AXHtmlEvent<Event>>();
+
+  @Output()
+  public onFocus: EventEmitter<AXHtmlEvent<Event>> = new EventEmitter<AXHtmlEvent<Event>>();
+
+  @Output()
+  public onValueChanged: EventEmitter<AXBaseInputChangeEvent> = new EventEmitter<AXBaseInputChangeEvent>();
+
+  @Output()
+  valueChange: EventEmitter<any> = new EventEmitter<any>();
+
+
+  @Input()
+  icon: string = '';
+
+  @Input()
+  allowClear: boolean = false;
+
+  private _value: string;
+  @Input()
+  public get value(): string {
+    return this._value;
+  }
+  public set value(v: string) {
+    if (v !== this._value) {
+      const old = this._value;
+      this._value = v;
+
+      this.valueChange.emit(v);
+      this.onValueChanged.emit({
+        component: this,
+        value: v,
+        oldValue: old,
+        isUserChange: this.userChange
+      });
+      this.userChange = false;
+      this.clearValidationStyle(this.input.nativeElement, v ? false : true);
+      this.cdr.detectChanges();
+    }
+  }
+
+  focus() {
+    this.input.nativeElement.focus();
+  }
+
+  clear() {
+    this.userChange = true;
+
+    this.value = null;
+    this.input.nativeElement.value = null;
+  }
+
+  isFocused(): boolean {
+    return this.input.nativeElement === document.activeElement;
+  }
+
+  setTextAlign() {
+    if (this.textAlign === 'left') {
+      return 'text-left';
+    }
+    if (this.textAlign === 'right') {
+      return 'text-right';
+    }
+  }
+
+  handleInputBlur(e: Event) {
+    this.onBlur.emit({
+      component: this,
+      htmlElement: this.ref.nativeElement,
+      htmlEvent: e
+    });
+  }
+
+  handleInputFocus(e: Event) {
+    this.onFocus.emit({
+      component: this,
+      htmlElement: this.ref.nativeElement,
+      htmlEvent: e
+    });
+  }
+}
+
+@Directive()
+export abstract class AXBaseButtonComponent extends AXBaseComponent implements AXBaseClickableComponent, AXBaseSizableComponent {
+
+  @Input()
+  disabled: boolean;
+
+  @Output()
+  click: EventEmitter<AXHtmlEvent<MouseEvent>> = new EventEmitter<AXHtmlEvent<MouseEvent>>();
+
+  @Input()
+  size: AXElementSize = "md";
+
+  @Input()
+  tabIndex: number = 0;
+
+}
+
+@Directive()
+export abstract class AXBaseDropdownComponent extends AXBaseComponent implements AXBaseInteractiveComponent, AXBaseSizableComponent {
+
+  @Input()
+  disabled: boolean;
+
+  @Input()
+  size: AXElementSize;
+
+  @Input()
+  fitParent: boolean = true;
+
+  @Input()
+  tabIndex: number = 0;
+
+  @Input()
+  showDropDownButton: boolean = true;
+
+  abstract close();
+  abstract open();
+}

package/src/lib/base/events.class.ts

@@ -0,0 +1,32 @@
+export class AXBaseEvent {
+    component: any;
+    htmlElement?: HTMLElement;
+}
+
+export class AXHtmlEvent<E extends Event> extends AXBaseEvent {
+
+    htmlEvent?: E;
+}
+
+export class AXValueEvent<T> extends AXBaseEvent {
+    value?: T;
+    oldValue?: T;
+}
+
+export class AXDataEvent<T> extends AXBaseEvent {
+    data?: T;
+}
+
+export class AXEvent<T, E extends Event>
+{
+
+}
+export interface AXEvent<T, E extends Event> extends AXDataEvent<T>, AXHtmlEvent<E> {
+
+}
+
+
+
+
+
+

package/src/lib/button/button.component.html

@@ -0,0 +1,17 @@
+<button #container class="ax button form-control {{type}} {{size}} {{cssClass}}" [class.ax-button-icon]="refContent.innerText.length==0 && refContent.children.length == 0" [class.selected]="selected" [class.icon]="icon"
+    [class.icon]="loading" [class.disabled]="disabled || loading" (click)="handleClick($event)" [disabled]="disabled"
+    [ngStyle]="{'width.%': block ? 100 : 'auto'}" [attr.tabindex]="tabIndex">
+    <div class="button-inner-content">
+        <ng-container *ngIf="icon && !loading">
+            <i class="{{icon}} icon"></i>
+            <ng-container *ngIf="refContent.innerText.length==0 && refContent.children.length == 0"></ng-container>
+        </ng-container>
+        <ng-container *ngIf="loading">
+            <i class="far fa-circle-notch fa-spin icon"></i>
+            <ng-container *ngIf="refContent.innerText.length==0 && refContent.children.length == 0"></ng-container>
+        </ng-container>
+        <div class="ax-wrapper" #refContent>
+            <ng-content></ng-content>
+        </div>
+    </div>
+</button>