@acorex/components 6.0.0 → 6.0.1

package/switch/src/switch.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AXLoadingModule } from '@acorex/components/loading';
+import { AXSwitchComponent } from './switch.component';
+
+@NgModule({
+  declarations: [AXSwitchComponent],
+  imports: [CommonModule, FormsModule, AXLoadingModule],
+  exports: [AXSwitchComponent],
+  providers: [],
+})
+export class AXSwitchModule {}

package/tabs/index.ts

@@ -0,0 +1 @@
+export * from './public-api'

package/tabs/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/tabs/src/tab-content.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[axTabContent]',
+  exportAs: 'axTabContent',
+  inputs: ['portal: axTabContent'],
+})
+export class AXTabContentDirective {
+  constructor(private _viewContainerRef: ViewContainerRef) {}
+
+  private _portal: TemplateRef<any>;
+  public get portal(): TemplateRef<any> {
+    return this._portal;
+  }
+  public set portal(v: TemplateRef<any>) {
+    //;
+    if (v) {
+      this._portal = v;
+      this._viewContainerRef.clear();
+      const viewRef = this._viewContainerRef.createEmbeddedView(v, null, 0);
+    }
+  }
+}

package/tabs/src/tab-item.component.ts

@@ -0,0 +1,125 @@
+
+import { AXBaseComponent, AXComponentOptionChanged, _ClickableComponenetMixin } from '@acorex/components/mixin';
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ChangeDetectorRef,
+  Input,
+  ViewChild,
+  TemplateRef,
+  Output,
+  EventEmitter,
+  HostListener,
+  ContentChild,
+} from '@angular/core';
+
+export const AXBaseTabItemMixin = _ClickableComponenetMixin(AXBaseComponent);
+
+@Component({
+  selector: 'ax-tab-item',
+  template: `
+    <ng-container *ngIf="headerTemplate; else header">
+      <ng-container
+        [ngTemplateOutlet]="headerTemplate"
+        [ngTemplateOutletContext]="{
+          $implicit: {
+            text: this.text,
+            key: this.key,
+            active: this.active,
+            disabled: this.disabled
+          }
+        }"
+      ></ng-container>
+    </ng-container>
+    <!-- <ng-container *ngIf="headerTemplate;else header">
+            <ng-content select="ax-header">
+            </ng-content>
+        </ng-container> -->
+    <ng-template #header>
+      <ng-content select="ax-prefix"></ng-content>
+      <span>{{ text }}</span>
+      <ng-content select="ax-suffix"></ng-content>
+    </ng-template>
+    <ng-template #content>
+      <ng-content select="ax-content"> </ng-content>
+    </ng-template>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class AXTabItemComponent extends AXBaseTabItemMixin {
+  constructor(_elementRef: ElementRef, _cdr: ChangeDetectorRef) {
+    super(_elementRef, _cdr);
+  }
+
+  @Input()
+  text: string;
+
+  @Input()
+  key: string;
+
+  @ViewChild('content')
+  template: TemplateRef<any>;
+
+  @ContentChild('header', { static: true })
+  headerTemplate: TemplateRef<any>;
+
+  @Output()
+  activeChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+  private _active: boolean = false;
+  @Input()
+  public get active(): boolean {
+    return this._active;
+  }
+  public set active(value: boolean) {
+    this._setOption({
+      name: 'active',
+      value,
+      afterCallback: () => {
+        this._cdr.markForCheck();
+      },
+    });
+  }
+
+  @Output()
+  disabledChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+  private _disabled: boolean = false;
+  @Input()
+  public get disabled(): boolean {
+    return this._disabled;
+  }
+  public set disabled(value: boolean) {
+    this._setOption({
+      name: 'disabled',
+      value,
+    });
+  }
+
+  @HostListener('click', ['$event'])
+  private __hostClick(e: MouseEvent) {
+    if (!this.disabled) {
+      this.onClick.emit({
+        component: this,
+        htmlElement: this._getHostElement(),
+        nativeEvent: e,
+      });
+    }
+  }
+
+  _onOptionChanged(option: AXComponentOptionChanged): void {
+    const classListRef = this._getHostElement().classList;
+    if (option.name == 'disabled') {
+      option.newValue
+        ? classListRef.add('ax-state-disabled')
+        : classListRef.remove('ax-state-disabled');
+    }
+    if (option.name == 'active') {
+      option.newValue
+        ? classListRef.add('ax-state-active')
+        : classListRef.remove('ax-state-active');
+    }
+  }
+}

package/tabs/src/tabs.class.ts

@@ -0,0 +1,7 @@
+import { AXEvent } from '@acorex/components/common';
+import { AXTabItemComponent } from './tab-item.component';
+
+export class AXTabStripChangedEvent extends AXEvent {
+  tab: AXTabItemComponent;
+  index: number;
+}

package/tabs/src/tabs.component.ts

@@ -0,0 +1,108 @@
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ChangeDetectorRef,
+  ContentChildren,
+  QueryList,
+  Input,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { AXTabStripChangedEvent } from './tabs.class';
+import { AXTabItemComponent } from './tab-item.component';
+import { AXTabContentDirective } from './tab-content.directive';
+import { AXBaseComponent } from '@acorex/components/mixin';
+
+@Component({
+  selector: 'ax-tabs',
+  template: `
+    <div class="ax-items-wrapper">
+      <ng-content select="ax-tab-item"> </ng-content>
+    </div>
+  `,
+  host: { class: 'ax-tabs' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class AXTabsComponent extends AXBaseComponent {
+  @ContentChildren(AXTabItemComponent)
+  private _contentTabs: QueryList<AXTabItemComponent>;
+
+  @Input()
+  fitParent: boolean = false;
+
+  @Input()
+  minWidth: boolean = false;
+
+  @Input()
+  content: AXTabContentDirective;
+
+  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
+    super(elementRef, cdr);
+  }
+
+  private _isUserInteraction: boolean = false;
+
+  get items(): AXTabItemComponent[] {
+    return this._contentTabs.toArray();
+  }
+
+  private _selectedItem: AXTabItemComponent;
+
+  get selectedIndex(): number {
+    return this.items.indexOf(this._selectedItem);
+  }
+
+  get selectedItem(): AXTabItemComponent {
+    return this._selectedItem;
+  }
+
+  @Output()
+  onActiveTabChanged: EventEmitter<AXTabStripChangedEvent> = new EventEmitter<AXTabStripChangedEvent>();
+
+  onRenderCssClass() {
+    const classList = Array.from(this._getHostElement().classList);
+    if (!classList.some((c) => ['ax-vertical', 'ax-horizontal'].includes(c))) {
+      this._getHostElement().classList.add('ax-horizontal');
+    }
+    if (!classList.some((c) => c.startsWith('ax-look-'))) {
+      this._getHostElement().classList.add('ax-look-default');
+    }
+  }
+
+  onViewInit() {
+    const selected = this.items.find((c) => c.active) || this.items[0];
+
+    this.select(selected);
+    this.items.forEach((c) => {
+      c.onClick.subscribe((t) => {
+        this._isUserInteraction = t.nativeEvent?.isTrusted;
+        this.select(c);
+      });
+    });
+  }
+
+  select(tab: number | AXTabItemComponent) {
+    let tabItem: AXTabItemComponent =
+      typeof tab == 'number' ? this.items[tab] : tab;
+    //
+    if (!tab || this.selectedItem == tabItem) return;
+    this._selectedItem = tabItem;
+    //
+    this.items.forEach((c) => (c.active = false));
+    tabItem.active = true;
+    if (this.content) {
+      this.content.portal = tabItem.template;
+    }
+    this._cdr.markForCheck();
+    this.onActiveTabChanged.emit({
+      component: this,
+      isUserInteraction: this._isUserInteraction,
+      tab: tabItem,
+      index: this.selectedIndex,
+    });
+    this._isUserInteraction = false;
+  }
+}

package/tabs/src/tabs.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PortalModule } from '@angular/cdk/portal';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXTabContentDirective } from './tab-content.directive';
+import { AXTabsComponent } from './tabs.component';
+import { AXTabItemComponent } from './tab-item.component';
+
+const COMPONENT = [AXTabsComponent, AXTabItemComponent, AXTabContentDirective];
+const MODULES = [CommonModule, PortalModule, AXDecoratorModule];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXTabsModule { }

package/test.ts

@@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().forEach(context);

package/textarea/index.ts

@@ -0,0 +1 @@
+export * from './public-api'

package/textarea/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/textarea/src/textarea.component.html

@@ -0,0 +1,6 @@
+<ng-content select="ax-prefix"></ng-content>
+<textarea [attr.name]="name" type="text" [rows]="rows" [attr.placeholder]="placeholder" [attr.maxlength]="maxLength"
+    [class.ax-state-disabled]="disabled" [class.ax-state-readonly]="readonly" [disabled]="disabled"
+    [readonly]="readonly" [tabindex]="tabIndex" [(ngModel)]="value" (focus)="_emitOnFocusEvent($event)"
+    (blur)="_emitOnBlurEvent($event)" [attr.autocomplete]="autoComplete"></textarea>
+<ng-content select="ax-suffix"></ng-content>

package/textarea/src/textarea.component.ts

@@ -0,0 +1,32 @@
+
+import { AXBaseTextBoxMixin } from '@acorex/components/mixin';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+
+
+@Component({
+  selector: 'ax-textarea',
+  templateUrl: './textarea.component.html',
+  inputs: ['disabled', 'tabIndex', 'readonly','allowNull','value','name', 'checked', 'placeholder', 'maxLength', 'allowNull', 'debounceTime', 'type', 'autoComplete', 'readonly','allowNull','value','name', 'checked'],
+  outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'ax-textarea-container ax-textarea' },
+})
+export class AXTextareaComponent extends AXBaseTextBoxMixin {
+  @Input()
+  rows: number = 0;
+
+  /**
+   *  @ignore
+   */
+  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
+    super(elementRef, cdr);
+  }
+}

package/textarea/src/textarea.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { AXTextareaComponent } from './textarea.component';
+
+@NgModule({
+  declarations: [AXTextareaComponent],
+  imports: [CommonModule, FormsModule],
+  exports: [AXTextareaComponent],
+})
+export class AXTextareaModule {}

package/textbox/index.ts

@@ -0,0 +1 @@
+export * from './public-api'

package/textbox/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/textbox/public-api.ts

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

package/textbox/src/textbox.component.html

@@ -0,0 +1,17 @@
+<ng-content select="ax-prefix">
+</ng-content>
+<input class="ax-input" [attr.name]="name" [attr.autocomplete]="autoComplete" [attr.type]="type" [attr.placeholder]="placeholder" [attr.maxlength]="maxLength"
+    [class.ax-state-disabled]="disabled" [class.ax-state-readonly]="readonly" [disabled]="disabled" 
+    [readonly]="readonly" [tabindex]="tabIndex"
+    [ngModel]="value" (ngModelChange)="_handleModleChange($event)"
+    (keydown)="_emitOnKeydownEvent($event)" 
+    (keyup)="_emitOnKeyupEvent($event)"
+    (keypress)="_emitOnKeypressEvent($event)"
+    (focus)="_emitOnFocusEvent($event)"
+    (blur)="_emitOnBlurEvent($event)">
+<ng-content select="ax-suffix">
+</ng-content>
+<ng-content select="ax-validation-rule">
+</ng-content>
+<ng-content select="ax-input-mask">
+</ng-content>

package/textbox/src/textbox.component.ts

@@ -0,0 +1,37 @@
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  ViewEncapsulation,
+} from '@angular/core';
+import { AXComponent, AXFocusableComponent } from '@acorex/components/common';
+import { AXBaseTextBoxMixin } from '@acorex/components/mixin';
+
+/**
+ * The Textbox is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+@Component({
+  selector: 'ax-text-box',
+  templateUrl: 'textbox.component.html',
+  inputs: ['disabled', 'tabIndex', 'readonly','allowNull','value','name', 'checked', 'placeholder', 'maxLength', 'allowNull', 'debounceTime', 'type', 'autoComplete', 'readonly','allowNull','value','name', 'checked'],
+  outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'],
+  host: { class: 'ax-editor-container' },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: AXComponent, useExisting: AXTextBoxComponent },
+    { provide: AXFocusableComponent, useExisting: AXTextBoxComponent },
+  ],
+})
+export class AXTextBoxComponent extends AXBaseTextBoxMixin {
+  /**
+   *  @ignore
+   */
+  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
+    super(elementRef, cdr);
+  }
+}

package/textbox/src/textbox.module.ts

@@ -0,0 +1,22 @@
+import { AXButtonModule } from '@acorex/components/button';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { NgxMaskModule } from 'ngx-mask';
+import { AXTextBoxComponent } from './textbox.component';
+
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        AXButtonModule,
+        AXDecoratorModule,
+        NgxMaskModule.forChild()
+    ],
+    exports: [AXTextBoxComponent],
+    declarations: [AXTextBoxComponent],
+    providers: [],
+})
+export class AXTextBoxModule { }

package/time-box/index.ts

@@ -0,0 +1 @@
+export * from './public-api'

package/time-box/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/time-box/src/time-box.component.html

@@ -0,0 +1,16 @@
+<ng-content select="ax-prefix">
+</ng-content>
+<input class="ax-input" [imask]="_maskObj" [unmask]="false"  type="text" [attr.placeholder]="placeholder"
+    [class.ax-state-disabled]="disabled" [class.ax-state-readonly]="readonly" [disabled]="disabled"
+    [readonly]="readonly" [tabindex]="tabIndex" [ngModel]="displayText" 
+    (mouseup)="_handleOnInputClickEvent($event)"
+    (focus)="_emitOnFocusEvent($event)"
+    (blur)="_emitOnBlurEvent($event)"
+    (keyup)="_handleKeyUpEvent($event)" 
+    (keydown)="_handleOnKeydownEvent($event)" 
+    autocomplete="off">
+
+<ng-content select="ax-suffix">
+</ng-content>
+<ng-content select="ax-validation-rule">
+</ng-content>