@acorex/components 4.1.4 → 4.2.0

package/src/lib/tab-view/dynamic-tabs.directive.ts

@@ -0,0 +1,17 @@
+/**
+ * This directive is used as an anchor to get access
+ * to the ViewContainerRef which here is exposed via
+ * the public member `viewContainer`
+ *
+ * Theres an ALTERNATIVE to explicitly using the anchor directive.
+ * Read in the blog post
+ */
+
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[dynamic-tabs]'
+})
+export class DynamicTabsDirective {
+  constructor(public viewContainer: ViewContainerRef) {}
+}

package/src/lib/tab-view/tab-view.component.html

@@ -0,0 +1,33 @@
+<ul class="ax nav-tabs">
+  <li
+    *ngFor="let tab of tabs"
+    (click)="selectTab(tab)"
+    [class.active]="tab.active"
+    [class.flex-sm-fill]="fullWidth"
+  >
+    <i class="{{ tab.icon }}"></i>
+    <span>{{ tab.caption }}</span>
+  </li>
+  <!-- dynamic tabs -->
+  <li
+    *ngFor="let tab of dynamicTabs"
+    (click)="selectTab(tab)"
+    [class.active]="tab.active"
+    [class.flex-sm-fill]="fullWidth"
+  >
+    <i class="{{ tab.icon }}"></i>
+    <span>
+      {{ tab.caption }}
+      <i
+        *ngIf="tab.isCloseable"
+        (click)="closeTab(tab)"
+        class="far fa-times"
+      >
+      </i>
+    </span>
+  </li>
+</ul>
+<div class="ax-tab-container">
+  <ng-content></ng-content>
+<ng-template dynamic-tabs #container></ng-template>
+</div>

package/src/lib/tab-view/tab-view.component.ts

@@ -0,0 +1,129 @@
+/**
+ * The main component that renders single TabComponent
+ * instances.
+ */
+
+import {
+  Component,
+  ContentChildren,
+  QueryList,
+  AfterContentInit,
+  ViewChild,
+  ComponentFactoryResolver,
+  ViewEncapsulation,
+  Attribute,
+  Output,
+  EventEmitter,
+  ElementRef
+} from '@angular/core';
+
+import { AXTabComponent } from './tab.component';
+import { DynamicTabsDirective } from './dynamic-tabs.directive';
+import { AXDataEvent } from '../base/events.class';
+
+@Component({
+  selector: 'ax-tab-view',
+  templateUrl: './tab-view.component.html',
+  styleUrls: ['./tab-view.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class AXTabViewComponent implements AfterContentInit {
+  dynamicTabs: AXTabComponent[] = [];
+
+  @ContentChildren(AXTabComponent) tabs: QueryList<AXTabComponent>;
+
+  @ViewChild(DynamicTabsDirective) dynamicTabPlaceholder: DynamicTabsDirective;
+
+  @Output()
+  onActiveTab: EventEmitter<AXDataEvent<any>> = new EventEmitter<AXDataEvent<any>>();
+  /*
+    Alternative approach of using an anchor directive
+    would be to simply get hold of a template variable
+    as follows
+  */
+  // @ViewChild('container', {read: ViewContainerRef}) dynamicTabPlaceholder;
+
+  constructor(
+    private ref: ElementRef,
+    private _componentFactoryResolver: ComponentFactoryResolver,
+    @Attribute('fullWidth') public fullWidth: boolean = false
+  ) {}
+
+  // contentChildren are set
+  ngAfterContentInit() {
+    // get all active tabs
+    const activeTabs = this.tabs.filter((tab) => tab.active);
+
+    // if there is no active tab set, activate the first
+    if (activeTabs.length === 0 && this.tabs.first) {
+      this.selectTab(this.tabs.first);
+    }
+  }
+
+  openTab(title: string, template, isCloseable = false, icon = null, data = null) {
+    // get a component factory for our AXTabComponent
+    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(AXTabComponent);
+
+    // fetch the view container reference from our anchor directive
+    const viewContainerRef = this.dynamicTabPlaceholder.viewContainer;
+
+    // alternatively...
+    // let viewContainerRef = this.dynamicTabPlaceholder;
+
+    // create a component instance
+    const componentRef = viewContainerRef.createComponent(componentFactory);
+
+    // set the according properties on our component instance
+    const instance: AXTabComponent = componentRef.instance as AXTabComponent;
+    instance.caption = title;
+    instance.template = template;
+    instance.dataContext = data;
+    instance.isCloseable = isCloseable;
+    instance.icon = icon;
+
+    // remember the dynamic component for rendering the
+    // tab navigation headers
+    this.dynamicTabs.push(componentRef.instance as AXTabComponent);
+
+    //componentRef.changeDetectorRef.detectChanges();
+
+    // set it active
+    this.selectTab(this.dynamicTabs[this.dynamicTabs.length - 1]);
+  }
+
+  selectTab(tab: AXTabComponent) {
+    // deactivate all tabs
+    this.tabs.toArray().forEach((tab) => (tab.active = false));
+    this.dynamicTabs.forEach((tab) => (tab.active = false));
+
+    // activate the tab the user has clicked on.
+    tab.active = true;
+    this.onActiveTab.emit({ component: this, data: tab, htmlElement: this.ref.nativeElement });
+  }
+
+  closeTab(tab: AXTabComponent) {
+    for (let i = 0; i < this.dynamicTabs.length; i++) {
+      if (this.dynamicTabs[i] === tab) {
+        // remove the tab from our array
+        this.dynamicTabs.splice(i, 1);
+
+        // destroy our dynamically created component again
+        const viewContainerRef = this.dynamicTabPlaceholder.viewContainer;
+        // let viewContainerRef = this.dynamicTabPlaceholder;
+        viewContainerRef.remove(i);
+
+        // set tab index to 1st one
+        this.selectTab(this.tabs.first);
+        break;
+      }
+    }
+  }
+
+  closeActiveTab() {
+    const activeTabs = this.dynamicTabs.filter((tab) => tab.active);
+    if (activeTabs.length > 0) {
+      // close the 1st active tab (should only be one at a time)
+      this.closeTab(activeTabs[0]);
+    }
+  }
+}

package/src/lib/tab-view/tab-view.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXTabComponent } from './tab.component';
+import { AXTabViewComponent } from './tab-view.component';
+import { DynamicTabsDirective } from './dynamic-tabs.directive';
+@NgModule({
+  declarations: [AXTabComponent, AXTabViewComponent, DynamicTabsDirective],
+  imports: [CommonModule],
+  exports: [AXTabComponent, AXTabViewComponent, DynamicTabsDirective],
+  providers: []
+})
+export class AXTabViewModule {}

package/src/lib/tab-view/tab.component.html

@@ -0,0 +1,8 @@
+<div [hidden]="!active" class="ax tab-pane">
+    <ng-content></ng-content>
+    <ng-container *ngIf="template"
+      [ngTemplateOutlet]="template"
+      [ngTemplateOutletContext]="dataContext"
+    >
+    </ng-container>
+</div>

package/src/lib/tab-view/tab.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+@Component({
+  selector: 'ax-tab',
+  templateUrl: './tab.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class AXTabComponent {
+  @Input() caption: string;
+  @Input() name: string;
+  @Input() active = false;
+  @Input() isCloseable = false;
+  @Input() template: any;
+  @Input() dataContext: any;
+  @Input() icon: string;
+}

package/src/lib/textarea/textarea.component.html

@@ -0,0 +1,13 @@
+<div class="ax form-item {{size}}" [class.disabled]="disabled" [attr.id]="uid">
+    <div class="content">
+        <div class="ax input {{size}}" [class.disabled]="disabled" [class.readonly]="readonly">
+            <textarea [name]="name" [attr.maxlength]="maxLength" rows="{{rows}}" cols="{{cols}}" #input type="text"
+                class="ax icon {{size}}" [ngClass]="setTextAlign()" placeholder="{{placeholder}}" [readonly]="readonly"
+                [disabled]="disabled" value="{{value}}"></textarea>
+        </div>
+    </div>
+    <div class="ax buttons">
+        <ng-content select="ax-button">
+        </ng-content>
+    </div>
+</div>

package/src/lib/textarea/textarea.component.ts

@@ -0,0 +1,24 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ViewChild, ElementRef, Input } from '@angular/core';
+import { AXBaseTextComponent, AXValidatableComponent } from '../base/element.class';
+
+@Component({
+  selector: 'ax-text-area',
+  templateUrl: './textarea.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style:'width: 100%' },
+  providers: [{ provide: AXValidatableComponent, useExisting: AXTextAreaComponent }]
+})
+export class AXTextAreaComponent extends AXBaseTextComponent {
+  constructor(protected cdr: ChangeDetectorRef, ref: ElementRef) {
+    super(cdr, ref);
+  }
+
+  @Input()
+  rows: number = 0;
+  @Input()
+  cols: number = 0;
+
+  @Input()
+  maxLength: number = null;
+}

package/src/lib/textarea/textarea.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXTextAreaComponent } from './textarea.component';
+
+const COMPONENT = [AXTextAreaComponent];
+const MODULES = [CommonModule];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXTextAreaModule { }

package/src/lib/textbox/textbox.component.html

@@ -0,0 +1,22 @@
+<div class="ax form-item" [class.disabled]="disabled" [attr.id]="uid" #fc>
+    <div class="ax items-wrapper">
+        <ng-content select="[start]">
+        </ng-content>
+    </div>
+    <div class="content" #content>
+        <div class="ax form-control input {{size}}" [class.disabled]="disabled" [class.readonly]="readonly"
+            [class.icon]="icon">
+            <input #input [autocomplete]="autocomplete" [name]="name" class="ax {{size}}" [attr.type]="type" [attr.maxlength]="maxLength"
+                [textMask]="{mask: mask || false, showMask : showMask, keepCharPositions:maskKeepCharPositions,guide:maskGuid,placeholderChar:maskPlaceholder}"
+                [(ngModel)]="value" placeholder="{{placeholder}}" [readonly]="readonly" [disabled]="disabled"
+                [ngClass]="setTextAlign()" [class.clear]="value && allowClear" (focus)="handleInputFocus($event)"
+                (blur)="handleInputBlur($event)">
+            <i class="{{icon}}" *ngIf="icon"></i>
+        </div>
+    </div>
+    <div class="ax items-wrapper">
+        <ax-button *ngIf="value && allowClear" icon="far fa-times" type="danger blank" (click)="clear()"></ax-button>
+        <ng-content select="[end]">
+        </ng-content>
+    </div>
+</div>

package/src/lib/textbox/textbox.component.ts

@@ -0,0 +1,38 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, ViewChild, ElementRef, Input } from '@angular/core';
+import { AXBaseTextComponent, AXValidatableComponent } from '../base/element.class';
+
+@Component({
+  selector: 'ax-text-box',
+  templateUrl: './textbox.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { style:'width: 100%' },
+  providers: [{ provide: AXValidatableComponent, useExisting: AXTextBoxComponent }]
+})
+export class AXTextBoxComponent extends AXBaseTextComponent {
+
+  @Input()
+  mask: any;
+
+  @Input()
+  type: 'text' | 'number' | 'tel' | 'url' | 'password' | 'search' = 'text';
+
+  @Input()
+  showMask: boolean = true;
+
+  @Input()
+  maxLength: number;
+
+  @Input()
+  maskGuid: boolean = false;
+
+  @Input()
+  maskPlaceholder: string = '_';
+
+  @Input()
+  maskKeepCharPositions: boolean = false;
+
+  constructor(protected cdr: ChangeDetectorRef, ref: ElementRef) {
+    super(cdr, ref);
+  }
+}

package/src/lib/textbox/textbox.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXTextBoxComponent } from './textbox.component';
+import { AXButtonModule } from '../button/button.module';
+import { TextMaskModule } from 'angular2-text-mask';
+import { FormsModule } from '@angular/forms';
+const COMPONENT = [AXTextBoxComponent];
+const MODULES = [CommonModule, AXButtonModule, TextMaskModule, FormsModule];
+
+@NgModule({
+  declarations: [...COMPONENT],
+  imports: [...MODULES],
+  exports: [...COMPONENT],
+  providers: []
+})
+export class AXTextBoxModule { }

package/src/lib/time-picker/time-picker.component.html

@@ -0,0 +1,21 @@
+<div class="ax form-item" [class.disabled]="disabled" [attr.id]="uid" #fc>
+    <div class="ax items-wrapper">
+        <ng-content select="[start]">
+        </ng-content>
+    </div>
+    <div class="content" #content>
+        <div class="ax form-control input {{size}}" [class.disabled]="disabled" [class.readonly]="readonly" [class.icon]="icon">
+            <input #input type="text" class="ax {{size}}" [textMask]="timeType" [(ngModel)]="textValue" placeholder="{{placeholder}}" [readonly]="readonly" [disabled]="disabled" [ngClass]="setTextAlign()" [class.clear]="value && allowClear" (focus)="handleInputFocus()"
+                (blur)="handleInputBlur($event)" (keypress)='handleKeyPress($event)' (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)" (click)="handleClick($event)">
+            <i class="{{icon}}" *ngIf="icon"></i>
+        </div>
+    </div>
+    <div class="ax items-wrapper">
+        <ax-button *ngIf="value && allowClear" icon="far fa-times" type="danger blank" (click)="clear()" [disabled]="disabled" [tabIndex]="-1"></ax-button>
+        <ng-content select="[end]">
+        </ng-content>
+    </div>
+</div>
+<!-- [textMask]="{mask: mask , showMask:showMask , guid: maskGuid , keepCharPositions: maskKeepCharPositions}" -->
+<!-- <input #input id="timePickerValue" [textMask]="timeType" type="text" [(ngModel)]="value" (keypress)='handleKeyPress($event)'
+    (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)" (click)="handleClick($event)"> -->