@acorex/components 6.0.1 → 6.0.7

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

@@ -1,410 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

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

package/selection-list/ng-package.json

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

package/selection-list/public-api.ts

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

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

@@ -1,62 +0,0 @@
-<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

@@ -1,69 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

package/switch/ng-package.json

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

package/switch/public-api.ts

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

package/switch/src/switch.component.html

@@ -1,14 +0,0 @@
-<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

@@ -1,52 +0,0 @@
-
-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;
-    }
-  }
-}