@acorex/components 5.8.0 → 6.0.1

package/select-box/src/selectbox.component.ts

@@ -0,0 +1,410 @@
+import { AXPlatform } from '@acorex/core/platform';
+import { AXTranslator } from '@acorex/core/translation';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  ElementRef,
+  HostListener,
+  Input,
+  NgZone,
+  TemplateRef,
+  ViewChild,
+  ViewEncapsulation,
+} from '@angular/core';
+import {findLast, findLastIndex, first, last, nth} from 'lodash-es';
+import {
+  
+  AXClickEvent,
+  AXClosbaleComponent,
+  AXSearchableComponent,
+} from '@acorex/components/common';
+
+
+import { AXPopoverComponent } from '@acorex/components/popover';
+import { AXSearchBoxComponent } from '@acorex/components/search-box';
+import { AXBaseSelectionDropdownMixin } from '@acorex/components/mixin';
+
+
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+@Component({
+  selector: 'ax-select-box',
+  templateUrl: 'selectbox.component.html',
+  inputs: [
+    'isOpen','fitParent', 'dropdownWidth','position',
+    'disabled', 'tabIndex',
+    'readonly','allowNull','value','name', 'checked',
+    'placeholder', 'maxLength', 'allowNull', 'debounceTime', 'type', 'autoComplete', 'readonly','allowNull','value','name', 'checked',
+    'pageSize', 'valueField', 'textField', 'items',
+    'valueField',
+    'textField',
+    'disabledField',
+    'disabledCallback',
+    'multiple',
+    'selectionMode',
+  ],
+  outputs: [
+    'onOpened', 'onClosed',
+    'onBlur', 'onFocus',
+    'valueChange', 'onValueChanged',
+    'valueChange', 'onValueChanged',
+    'onValueChanged', 'valueChanged',
+  ],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: AXClosbaleComponent, useExisting: AXSelectBoxComponent },
+    { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent },
+  ],
+  host: { class: 'ax-select-box ax-editor-container ax-drop-down' },
+})
+export class AXSelectBoxComponent extends AXBaseSelectionDropdownMixin {
+  @ViewChild(AXPopoverComponent, { static: true })
+  popover: AXPopoverComponent;
+
+  @ContentChild(AXSearchBoxComponent, { static: true })
+  _searchBox: AXSearchBoxComponent;
+
+  _target: HTMLDivElement;
+  _popoverTitle: string;
+  _popoverWidth: number;
+
+  /**
+   *  Defines the clearButton.
+   */
+  @Input()
+  clearButton: boolean = false;
+
+  /**
+   *  Defines the checkbox.
+   */
+  @Input()
+  checkbox: boolean = false;
+
+  @ViewChild('listContainer', { static: true })
+  private listContainer: ElementRef<HTMLDivElement>;
+
+  @ContentChild('emptyTemplate')
+  private _contentEmptyTemplate: TemplateRef<any>;
+
+  get emptyTemplate(): TemplateRef<any> {
+    return this._contentEmptyTemplate;
+  }
+
+  _isMobile: boolean = false;
+  _forceFocus: boolean = false;
+  /**
+   *  @ignore
+   */
+  constructor(
+    private _elementRef: ElementRef<HTMLDivElement>,
+    private _cdr: ChangeDetectorRef,
+    private _zone: NgZone,
+    private _platform: AXPlatform
+  ) {
+    super(_elementRef, _cdr);
+    this._isMobile = this._platform.is('Mobile');
+    this._platform.resize.subscribe(() => {
+      this._isMobile = this._platform.is('Mobile');
+      this.popover.dispose();
+      this._popoverWidth = this._isMobile ? 0 : this._target.offsetWidth;
+    });
+  }
+
+  _handleArrowClickEvent(e: AXClickEvent) {
+    e.nativeEvent.stopPropagation();
+    this.toggle();
+  }
+
+  _handleInputClickEvent(e: MouseEvent) {
+    e.stopPropagation();
+    this.toggle();
+  }
+
+  onInit() {
+    super.onInit();
+    this._target = this._elementRef.nativeElement;
+
+    this._updatePopupTitle();
+  }
+
+  onViewInit() {
+    super.onViewInit();
+    this._popoverWidth = this._isMobile ? 0 : this._target.offsetWidth;
+  }
+
+  refresh() {
+    this.value = null;
+    super.refresh();
+  }
+
+  private _updatePopupTitle() {
+    // const count =this.selectedItems?.length;
+    // this._popoverTitle =  count > 1 ?  `(${count}) items selected`:  this.placeholder || AXTranslator.get('selectbox.popover.title')
+    this._popoverTitle =
+      this.placeholder || AXTranslator.get('selectbox.popover.title');
+  }
+
+  _handleOnItemClick(e: MouseEvent, item: any) {
+    if (this.isItemDisabled(item)) {
+      return;
+    }
+    if (!this.multiple) this.close();
+    this.toggleSelect(item);
+    this._cdr.detectChanges();
+  }
+
+  _handleListScroll(e: Event) {
+    const list = e.target as HTMLDivElement;
+    if (list.scrollTop < list.scrollHeight - list.clientHeight) {
+      return;
+    }
+    this._fetchData();
+  }
+
+  private _checkForLoadData() {
+    const list: any = this.listContainer.nativeElement;
+    if (
+      this.loadedCount < this.totalCount &&
+      list.scrollHeight < list.parentElement.clientHeight * 1.5
+    ) {
+      this._fetchData();
+    }
+  }
+
+  _onDataLoaded() {
+    if (this.popover.isOpen) {
+      setTimeout(() => {
+        this._checkForLoadData();
+        this.popover.updatePosition();
+        if (this._forceFocus) {
+          this._focusSelectedItem();
+          this._forceFocus = false;
+        }
+        this._focusSearchBox();
+      }, 100);
+    }
+  }
+
+  _onValueChanged(oldValue: any, newValue: any) {
+    super._onValueChanged(oldValue, newValue);
+  }
+
+  _handleOnRemoveItemClick(e: MouseEvent, item: any) {
+    this.unselectItems(item);
+    e.stopPropagation();
+  }
+
+  _handleBadgeRemove(e: MouseEvent, item) {
+    this.unselectItems(item);
+    e.stopPropagation();
+    this.close();
+  }
+
+  @HostListener('keydown', ['$event'])
+  _handleKeydown(e: KeyboardEvent) {
+    const isLetter = new RegExp(/[a-zA-Z0-9\-]/).test(
+      String.fromCharCode(e.keyCode)
+    );
+    if (
+      e.code === 'Backspace' &&
+      e.type === 'keydown' &&
+      ((this.allowNull === true && this.selectedItems.length > 0) ||
+        (this.allowNull !== true && this.selectedItems.length > 1))
+    ) {
+      this.isUserInput = true;
+      this.unselectItems(this.selectedItems.pop());
+      e.preventDefault();
+      return;
+    } else if (
+      (e.code === 'ArrowDown' || e.code === 'ArrowUp' || e.code === 'Space') &&
+      !this.popover.isOpen &&
+      e.type === 'keydown'
+    ) {
+      if (this.multiple) {
+        this.open();
+      } else {
+        this.isUserInput = true;
+        if (e.ctrlKey || e.code === 'Space') {
+          this.open();
+        } else {
+          this._selectedItemByNav(e.key === 'ArrowDown' ? 1 : -1);
+        }
+      }
+      e.preventDefault();
+      return;
+    } else if (isLetter) {
+      this.text = e.key;
+      this.open();
+      e.preventDefault();
+      return;
+    }
+  }
+
+  _handlePopoverKeydown(e: KeyboardEvent) {
+    if (
+      (e.target as HTMLElement).tagName == 'INPUT' &&
+      ['Space', 'Backspace'].includes(e.code)
+    )
+      return;
+    if (
+      (e.key === 'ArrowDown' || e.key === 'ArrowUp') &&
+      this.displayItems.length > 0
+    ) {
+      this.isUserInput = true;
+      this._focusItemByNav(e.key === 'ArrowDown' ? 1 : -1);
+      e.preventDefault();
+    } else if (
+      e.code === 'Backspace' &&
+      ((this.allowNull === true && this.selectedItems.length > 0) ||
+        (this.allowNull !== true && this.selectedItems.length > 1))
+    ) {
+      this.isUserInput = true;
+      this.unselectItems(this.selectedItems.pop());
+      e.preventDefault();
+    } else if (e.code === 'Space' || e.code === 'Enter') {
+      e.preventDefault();
+      const focusedItemId =
+        this.listContainer.nativeElement.querySelector<HTMLElement>(
+          '.ax-state-focus'
+        )?.dataset?.id;
+      const focusedItem = findLast(this.flatItems, [
+        this.valueField,
+        focusedItemId,
+      ]);
+      if (focusedItem) {
+        if (this.isItemDisabled(focusedItem)) {
+          return;
+        }
+        if (this.multiple) {
+          this.isUserInput = true;
+          this.toggleSelect(focusedItem);
+        } else {
+          this.isUserInput = true;
+          this.selectItems(focusedItem);
+          this.close();
+        }
+      }
+    } else if (e.code === 'Tab') {
+      this.close();
+      e.preventDefault();
+      e.stopPropagation();
+    } else if (e.key === 'Escape') {
+      this.close();
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+
+  async _handlePopupOnOpened(e) {
+    this.popover.focus();
+    if (this.displayItems.length == 0) {
+      this._forceFocus = true;
+      this._fetchData();
+    } else {
+      this._focusSelectedItem();
+    }
+    this._focusSearchBox();
+  }
+
+  _handlePopupOnClosed(e) {
+    this.focus();
+  }
+
+  private _focusSearchBox() {
+    if (this._searchBox && (!this._isMobile || this._searchBox.searchExp)) {
+      this._searchBox.focus();
+    }
+  }
+
+  private _focusItemByNav(sign: -1 | 1): void {
+    const list = this.listContainer.nativeElement;
+    const fn = (s) => list.querySelector<HTMLElement>(s);
+    const itemDiv: any =
+      fn(`.ax-list-item.ax-state-focus`) ||
+      fn(`.ax-list-item.ax-state-selected`) ||
+      fn(`.ax-list-item`);
+    let next = (
+      sign == 1 ? itemDiv.nextElementSibling : itemDiv.previousElementSibling
+    ) as HTMLElement;
+    if (next) {
+      this._focusItemElement(next);
+    } else {
+      const parent = itemDiv.closest('.ax-list-item-group');
+      if (parent) {
+        const lis = (
+          sign == 1 ? parent.nextElementSibling : parent.previousElementSibling
+        )?.querySelectorAll('li');
+        const a = sign == 1 ? first(lis) : last(lis);
+        if (a) {
+          this._focusItemElement(a as any);
+        }
+      }
+    }
+  }
+
+  private _focusSelectedItem() {
+    this._zone.runOutsideAngular(() => {
+      const list = this.listContainer.nativeElement;
+      const fn = (s) => list.querySelector<HTMLElement>(s);
+      const itemDiv =
+        fn(`.ax-list-item.ax-state-selected`) || fn(`.ax-list-item`);
+      if (itemDiv) {
+        this._focusItemElement(itemDiv);
+      }
+    });
+  }
+
+  private _focusItemElement(el: HTMLElement) {
+    this._zone.runOutsideAngular(() => {
+      const list = this.listContainer.nativeElement;
+      list.querySelectorAll('.ax-list-item').forEach((c) => {
+        if (c == el) {
+          c.classList.add('ax-state-focus');
+          el.scrollIntoView({ behavior: 'auto' });
+        } else {
+          c.classList.remove('ax-state-focus');
+        }
+      });
+      if (!this._isMobile && this._searchBox) this._searchBox.focus();
+      else el.focus();
+    });
+  }
+
+  private _selectedItemByNav(sign: -1 | 1): void {
+    const _last:any = last(this.selectedItems);
+    let i = 0;
+    if (_last) {
+      i = findLastIndex(this.flatItems, [
+        this.valueField,
+        _last[this.valueField],
+      ]);
+    }
+    i += sign;
+    let next = nth<any>(this.flatItems, i);
+    while (next?.children && next?.children.length) {
+      i += sign;
+      next = nth<any>(this.flatItems, i);
+    }
+    if (next) {
+      this.selectItems(next);
+    } else if (next == null && sign == 1) {
+      this._fetchData();
+    }
+  }
+
+  search(exp: string) {
+    this.empty();
+    this._forceFocus = true;
+    this._fetchData();
+  }
+
+  _fetchData() {
+    super._fetchData({ searchQuery: this._searchBox?.searchExp });
+  }
+}

package/select-box/src/selectbox.module.ts

@@ -0,0 +1,35 @@
+import { AXTranslationModule } from '@acorex/core/translation';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { AXBadgeModule } from '@acorex/components/badge';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXCheckBoxModule } from '@acorex/components/checkbox';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXLoadingModule } from '@acorex/components/loading';
+import { AXPopoverModule } from '@acorex/components/popover';
+import { A11yModule } from '@angular/cdk/a11y';
+
+import { AXSelectBoxComponent } from './selectbox.component';
+import { AXTextBoxModule } from '@acorex/components/textbox';
+import { AXCommonModule } from '@acorex/components/common';
+
+@NgModule({
+    imports: [CommonModule,
+        AXCommonModule,
+        FormsModule,
+        AXCheckBoxModule,
+        AXBadgeModule,
+        AXDecoratorModule,
+        AXTranslationModule,
+        AXPopoverModule,
+        AXButtonModule,
+        AXLoadingModule,
+        A11yModule,
+        AXTextBoxModule
+    ],
+    exports: [AXSelectBoxComponent],
+    declarations: [AXSelectBoxComponent],
+    providers: [],
+})
+export class AXSelectBoxModule { }

package/selection-list/index.ts

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

package/selection-list/ng-package.json

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

package/selection-list/public-api.ts

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

package/selection-list/src/selection-list.component.html

@@ -0,0 +1,62 @@
+<div class="ax-selection-list ax-{{direction}}">
+    <ng-container *ngIf="multiple; then checkboxList; else radioButtonList"></ng-container>
+    <ng-template #checkboxList>
+        <ng-container *ngFor="let item of displayItems;let i = index">
+            <div class="ax-flex ax-items-start ax-checkbox-container" [class.ax-state-selected]="isItemSelected(item)" (click)="ic.click()">
+                <div class="ax-flex ax-items-center ax-h-5 ax-check-box">
+                    <input #ic [id]="id+'-'+i" class="ax-checkbox" type="checkbox" (change)="_handleOnItemValueChange(item, $event)" [checked]="isItemSelected(item)" [disabled]="disabled || item.disabled" [readonly]="readonly || item.readonly">
+                </div>
+                <div class="ax-ms-3 ax-text-sm">
+                    <label [for]="id+'-'+i" class="ax-text-light-700 dark:ax-text-light-100"> {{item[textField]}}</label>
+                    <p class="ax-text-light-500"> {{item.hint ? item.hint : item[hintField]}}</p>
+                </div>
+            </div>
+        </ng-container>
+    </ng-template>
+    <ng-template #radioButtonList>
+        <ng-container *ngFor="let item of displayItems;let i = index">
+            <div class="ax-flex ax-items-start ax-radio-container" [class.ax-state-selected]="isItemSelected(item)" (click)="ir.click()">
+                <div class="ax-flex ax-items-center ax-h-5 ax-radio">
+                    <input #ir [id]="id+'-'+i" class="ax-radio" type="radio" [attr.name]="id" (change)="_handleOnItemValueChange(item, $event)" [checked]="isItemSelected(item)" [disabled]="disabled || item.disabled" [readonly]="readonly || item.readonly">
+                </div>
+                <div class="ax-ms-3 ax-text-sm">
+                    <label [for]="id+'-'+i" class="ax-text-light-700 dark:ax-text-light-100"> {{item[textField]}}</label>
+                    <p class="ax-text-light-500"> {{item.hint ? item.hint : item[hintField]}}</p>
+                </div>
+            </div>
+        </ng-container>
+    </ng-template>
+    <ng-content select="ax-validation-rule">
+    </ng-content>
+</div>
+
+<!-- <div class="ax-selection-list ax-{{direction}}">
+    <ng-container *ngIf="multiple; then checkboxList; else radioButtonList"></ng-container>
+    <ng-template #checkboxList>
+        <ng-container *ngFor="let item of displayItems;let i = index">
+            <div class="ax-flex ax-items-start ax-checkbox-container ax-mb-2">
+                <div class="ax-flex ax-items-center ax-h-5">
+                    <ax-check-box [checked]="isItemSelected(item)" [disabled]="disabled || item.disabled" [readonly]="readonly || item.readonly">
+                       
+                        <ax-label> {{item[textField]}} |  {{isItemSelected(item)}}</ax-label>
+                        <ax-form-hint *ngIf="item[hintField]"> {{item[hintField]}} </ax-form-hint>
+                    </ax-check-box>
+                </div>
+            </div>
+        </ng-container>
+    </ng-template>
+    <ng-template #radioButtonList>
+        <ng-container *ngFor="let item of displayItems;let i = index">
+            <div class="ax-flex ax-items-start ax-radio-container ax-mb-2">
+                <div class="ax-flex ax-items-center ax-h-5">
+                    <ax-radio [id]="id+'-'+i" [checked]="isItemSelected(item)" [disabled]="disabled || item.disabled" [readonly]="readonly || item.readonly">
+                        <ax-label>{{item[textField]}} |  {{isItemSelected(item)}}</ax-label>
+                        <ax-form-hint *ngIf="item[hintField]"> {{item[hintField]}} </ax-form-hint>
+                    </ax-radio>
+                </div>
+            </div>
+        </ng-container>
+    </ng-template>
+    <ng-content select="ax-validation-rule">
+    </ng-content>
+</div>  -->

package/selection-list/src/selection-list.component.ts

@@ -0,0 +1,69 @@
+import { AXDirection } from '@acorex/components/common';
+import { AXBaseSelectionValueMixin } from '@acorex/components/mixin';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  ElementRef,
+  ChangeDetectorRef,
+  Input,
+} from '@angular/core';
+
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+@Component({
+  selector: 'ax-selection-list',
+  templateUrl: './selection-list.component.html',
+  inputs: [
+    'disabled',
+    'readonly',
+    'tabIndex',
+    'size',
+    'value',
+    'valueField',
+    'textField',
+    'multiple',
+    'items',
+    'selectionMode',
+  ],
+  outputs: ['valueChange', 'onValueChanged', 'onBlur', 'onFocus'],
+  host: { class: 'ax-selection-list' },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AXSelectionListComponent extends AXBaseSelectionValueMixin {
+
+  /**
+  *  @ignore
+  */
+  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
+    super(elementRef, cdr);
+  }
+
+
+  /**
+  *  Defines the direction.
+  */
+  @Input()
+  direction: AXDirection = 'horizontal';
+
+  _handleOnItemValueChange(item: any, e: Event) {
+    if (this.readonly || this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+    } else {
+      (e.target as any).checked ? this.selectItems(item) : this.unselectItems(item);
+    }
+  }
+
+  // _handleOnClickEvent(e: MouseEvent) {
+  //
+  //   if (this.readonly || this.disabled) {
+  //     e.preventDefault();
+  //     e.stopPropagation();
+  //   }
+  // }
+}

package/selection-list/src/selection-list.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXSelectionListComponent } from './selection-list.component';
+import { FormsModule } from '@angular/forms';
+
+import { AXCheckBoxModule } from '@acorex/components/checkbox';
+import { AXRadioModule } from '@acorex/components/radio';
+import { AXLabelModule } from '@acorex/components/label';
+import { AXFormModule } from '@acorex/components/form';
+
+@NgModule({
+  declarations: [AXSelectionListComponent],
+  imports: [CommonModule, FormsModule, AXCheckBoxModule,AXRadioModule,AXLabelModule,AXFormModule],
+  exports: [AXSelectionListComponent],
+  providers: []
+})
+export class AXSelectionListModule { }

package/switch/index.ts

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

package/switch/ng-package.json

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

package/switch/public-api.ts

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

package/switch/src/switch.component.html

@@ -0,0 +1,14 @@
+<button type="button" role="switch" [class.ax-state-disabled]="disabled" [class.ax-state-readonly]="readonly"
+    [class.ax-switch-checked]="value" (click)="_handleOnClickEvent($event)">
+    <div class="ax-switch-handle">
+        <ax-loading *ngIf="loading"></ax-loading>
+    </div>
+    <span class="ax-switch-inner" *ngIf="!value">
+        <ng-content select="ax-prefix"></ng-content>
+
+    </span>
+    <span class="ax-switch-inner" *ngIf="value">
+        <ng-content select="ax-suffix"></ng-content>
+    </span>
+
+</button>

package/switch/src/switch.component.ts

@@ -0,0 +1,52 @@
+
+import { VALUE_INPUTS, VALUE_OUTPUT, AXBaseValueComponentMixin } from '@acorex/components/mixin';
+import {
+  Component,
+  ChangeDetectorRef,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  ElementRef,
+  Input,
+} from '@angular/core';
+
+
+@Component({
+  selector: 'ax-switch',
+  templateUrl: './switch.component.html',
+  inputs: [
+    'disabled',
+    'readonly',
+    'tabIndex',
+    'size',
+    'cssClass',
+    'cssStyle',
+    'readonly','allowNull','value','name', 'checked',
+  ],
+  outputs: ['onBlur', 'onFocus', 'valueChange', 'onValueChanged'],
+  host: { class: 'ax-switch' },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AXSwitchComponent extends AXBaseValueComponentMixin {
+  @Input()
+  uncheckedText: string;
+
+  @Input()
+  checkedText: string;
+
+  @Input()
+  loading: boolean;
+
+  constructor(elementRef: ElementRef, cdr: ChangeDetectorRef) {
+    super(elementRef, cdr);
+  }
+
+  _handleOnClickEvent(e: MouseEvent) {
+    if (this.readonly || this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+    } else {
+      this.value = !this.value;
+    }
+  }
+}