@acorex/components 6.0.0 → 6.0.1

package/result/src/result.component.ts

@@ -0,0 +1,29 @@
+import { AXBaseComponent } from '@acorex/components/mixin';
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ax-result',
+  templateUrl: './result.component.html',
+  host: { class: 'ax-reuslt' },
+})
+export class AXResultComponent extends AXBaseComponent implements OnInit {
+  @Input() type:
+    | 'success'
+    | 'warning'
+    | 'info'
+    | 'danger'
+    | 'empty'
+    | '400'
+    | '403'
+    | '500'
+    | 'custom-icon'
+    | 'custom-image';
+  @Input() caption = '';
+  @Input() description = '';
+
+  constructor() {
+    super();
+  }
+
+  ngOnInit(): void {}
+}

package/result/src/result.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXResultComponent } from './result.component';
+
+@NgModule({
+    declarations: [AXResultComponent],
+    imports: [ CommonModule ],
+    exports: [AXResultComponent],
+    providers: [],
+})
+export class AXResultModule {}

package/search-box/index.ts

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

package/search-box/ng-package.json

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

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

@@ -0,0 +1,13 @@
+<ax-text-box  placeholder="{{ placeholder | trans }}" [debounceTime]="debounceTime" 
+    [(value)]="searchExp" (onValueChanged)="_onSearchExprChanged($event)">
+    <ax-prefix>
+        <ax-icon class="ax-ic ax-ic-magnify" >
+        </ax-icon>
+    </ax-prefix>
+    <ax-suffix>
+        <ax-button look="blank" color="danger" *ngIf="searchExp" (onClick)="clear()">
+            <ax-icon class="ax-ic ax-ic-close">
+            </ax-icon>
+        </ax-button>
+    </ax-suffix>
+</ax-text-box>

package/search-box/src/search-box.component.ts

@@ -0,0 +1,62 @@
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  ElementRef,
+  ChangeDetectorRef,
+  Optional,
+  Inject,
+  Input,
+  ViewChild,
+} from '@angular/core';
+import {
+  AXSearchableComponent,
+  AXValueChangedEvent,
+} from '@acorex/components/common';
+import { AXTextBoxComponent } from '@acorex/components/textbox';
+import { AXBaseComponentMixin } from '@acorex/components/mixin';
+
+@Component({
+  selector: 'ax-search-box',
+  templateUrl: './search-box.component.html',
+  host: { class: 'ax-editor-container' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class AXSearchBoxComponent extends AXBaseComponentMixin {
+  @ViewChild(AXTextBoxComponent)
+  _textbox: AXTextBoxComponent;
+
+  constructor(
+    _elementRef: ElementRef,
+    _cdr: ChangeDetectorRef,
+    @Optional()
+    @Inject(AXSearchableComponent)
+    private _parent: AXSearchableComponent
+  ) {
+    super(_elementRef, _cdr);
+  }
+
+  @Input()
+  placeholder: string = 'common.search';
+
+  @Input()
+  debounceTime: number = 500;
+
+  @Input()
+  searchExp: string = '';
+
+  _onSearchExprChanged(e: AXValueChangedEvent<string>) {
+    if (this._parent && this._parent.search) {
+      this._parent.search(e.value as any);
+    }
+  }
+
+  focus() {
+    this._textbox?.focus();
+  }
+
+  clear() {
+    this._textbox._setValue(null);
+  }
+}

package/search-box/src/search-box.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXTranslationModule } from '@acorex/core/translation';
+import { AXSearchBoxComponent } from './search-box.component';
+import { AXTextBoxModule } from '@acorex/components/textbox';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXButtonModule } from '@acorex/components/button';
+
+const COMPONENT = [AXSearchBoxComponent];
+const MODULES = [CommonModule, AXTranslationModule, AXDecoratorModule, AXTextBoxModule, AXButtonModule];
+
+@NgModule({
+    declarations: [...COMPONENT],
+    imports: [...MODULES],
+    exports: [...COMPONENT],
+    providers: [],
+})
+export class AXSearchBoxModule { }

package/select-box/index.ts

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

package/select-box/ng-package.json

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

package/select-box/public-api.ts

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

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

@@ -0,0 +1,147 @@
+<ng-content select="ax-prefix">
+</ng-content>
+<div class="ax-dropdown-content" [class.ax-state-disabled]="disabled" (click)="_handleInputClickEvent($event)">
+    <div class="ax-select-box-selection" [tabindex]="tabIndex" (focus)="_emitOnFocusEvent($event)"
+        (blur)="_emitOnBlurEvent($event)">
+        <ng-container *ngIf="selectedItems && selectedItems.length; else showPlaceholder">
+            <ng-container *ngIf="!multiple; then singleSelectedTemplate; else multipleSelectedTemplate"></ng-container>
+            <ng-template #singleSelectedTemplate>
+                <ng-container *ngFor="let item of selectedItems">
+                    <span class="ax-mx-4"> {{ _getItemDisplayTextTemplte(item) }}</span>
+                </ng-container>
+            </ng-template>
+            <ng-template #multipleSelectedTemplate>
+                <div class="ax-flex ax-mx-2">
+                    <ng-container *ngFor="let item of selectedItems">
+                        <ax-badge [text]="_getItemDisplayTextTemplte(item)" color="light" class="ax-me-2">
+                            <ax-suffix>
+                                <ax-icon icon="ax-ic ax-ic-close ax-cursor-pointer"
+                                    (click)="_handleBadgeRemove($event,item)"></ax-icon>
+                            </ax-suffix>
+                        </ax-badge>
+                    </ng-container>
+                </div>
+            </ng-template>
+        </ng-container>
+        <ng-template #showPlaceholder>
+            <div class="ax-placeholder" role="textbox" area-readonly="true"> {{placeholder}}</div>
+        </ng-template>
+    </div>
+</div>
+<ax-button color="light" look="blank" (onClick)="clear()" [tabIndex]="-1"
+    *ngIf="value && clearButton &&  !(disabled || readonly)">
+    <ax-icon icon="ax-ic ax-ic-close"></ax-icon>
+</ax-button>
+<ax-button [disabled]="disabled" [tabIndex]="-1" color="light" look="blank" (onClick)="_handleArrowClickEvent($event)">
+    <ax-prefix *ngIf="(isLoading && !this.popover.isOpen);else icon">
+        <ax-loading type="spinner"></ax-loading>
+    </ax-prefix>
+    <ng-template #icon>
+        <ax-icon #icon icon="ax-ic ax-ic-chevron ax-transform ax--rotate-90"></ax-icon>
+    </ng-template>
+</ax-button>
+<ng-content select="ax-validation-rule">
+</ng-content>
+<ng-content select="ax-suffix">
+</ng-content>
+<ax-popover [target]="_target" [position]="position" [openTrigger]="'manual'" [closeTrigger]="'clickout'"
+    [adaptivityEnabled]="true" (onOpened)="_handlePopupOnOpened($event)" (onClosed)="_handlePopupOnClosed($event)">
+    <div class="ax-overlay-pane " (keydown)="_handlePopoverKeydown($event)" tabindex="0" aria-modal="true" cdkTrapFocus
+        [class.ax-overlay-actionsheet]="_isMobile" [class.ax-full]="_searchBox ||  isLazy"
+        [style.min-width.px]="_popoverWidth">
+        <div class="ax-list">
+            <ax-header *ngIf="_isMobile">
+                <ax-title [text]="_popoverTitle"></ax-title>
+                <ax-close-button [icon]="multiple?'ax-ic-check !ax-text-primary-500':'ax-ic-close'"></ax-close-button>
+            </ax-header>
+            <div class="ax-p-2" [class.ax-hidden]="!_searchBox" [cdkTrapFocus]="_searchBox!=null">
+                <ng-content select="ax-search-box"></ng-content>
+            </div>
+            <div class="ax-content ax-list-items-container ax-default" (scroll)="_handleListScroll($event)"
+                #listContainer>
+                <ng-container *ngIf="displayItems.length; else tmpEmpty">
+                    <ul>
+                        <ng-container *ngTemplateOutlet="tmpTree; context:{ list: displayItems }">
+                        </ng-container>
+                        <ng-template #tmpTree let-list="list">
+                            <ng-container *ngFor="let item of list;let i = index;trackBy : _trackByFunction">
+                                <ng-container *ngIf="itemTemplate; else defualtTemplate">
+                                    <li class="ax-list-item" (click)="_handleOnItemClick($event,item)"
+                                        [attr.data-id]="item[this.valueField]">
+                                        <ng-container
+                                            *ngTemplateOutlet="itemTemplate; context: { $implicit: item,direction:direction}">
+                                        </ng-container>
+                                    </li>
+                                </ng-container>
+                                <ng-template #defualtTemplate>
+                                    <ng-container *ngIf="item.children?.length > 0;else tmpItem">
+                                        <li class="ax-list-item-group" [attr.data-id]="item[this.valueField]">
+                                            <span> {{ _getItemDisplayTextTemplte(item) }}</span>
+                                            <ul *ngIf="item.children?.length > 0">
+                                                <ng-container
+                                                    *ngTemplateOutlet="tmpTree; context:{ list:  item.children }">
+                                                </ng-container>
+                                            </ul>
+                                        </li>
+                                    </ng-container>
+                                    <ng-template #tmpItem>
+                                        <ng-container *ngIf="!multiple;  else multipleTemplate">
+                                            <li class="ax-list-item" [class.ax-state-selected]="isItemSelected(item)"
+                                                [class.ax-state-disabled]="isItemDisabled(item)" [attr.tabindex]="i"
+                                                (click)="_handleOnItemClick($event,item)"
+                                                [attr.data-id]="item[this.valueField]">
+                                                <span> {{ _getItemDisplayTextTemplte(item) }}</span>
+                                            </li>
+                                        </ng-container>
+                                        <ng-template #multipleTemplate>
+                                            <li class="ax-list-item" [class.ax-state-selected]="isItemSelected(item)"
+                                                [class.ax-state-disabled]="isItemDisabled(item)"
+                                                [class.ax-check-box]="checkbox" [attr.tabindex]="i"
+                                                (click)="_handleOnItemClick($event,item)"
+                                                [attr.data-id]="item[this.valueField]">
+                                                <input type="checkbox" [class.ax-state-disabled]="isItemDisabled(item)"
+                                                    *ngIf="checkbox" [checked]="isItemSelected(item)"
+                                                    [disabled]="isItemDisabled(item)">
+                                                <span class="ax-ms-2"> {{ _getItemDisplayTextTemplte(item) }}</span>
+                                            </li>
+                                        </ng-template>
+                                    </ng-template>
+                                </ng-template>
+                            </ng-container>
+                        </ng-template>
+                    </ul>
+                </ng-container>
+                <ng-container *ngIf="isLoading">
+                    <ng-container *ngIf="loadingTemplate; else elseLoadingTemplate">
+                        <ng-container *ngTemplateOutlet="loadingTemplate">
+                        </ng-container>
+                    </ng-container>
+                    <ng-template #elseLoadingTemplate>
+                        <div class="ax-flex ax-items-center ax-justify-center ax-p-4">
+                            <ax-loading text="{{ 'layout.loading.text' | trans }}"></ax-loading>
+                        </div>
+                    </ng-template>
+                </ng-container>
+                <ng-template #tmpEmpty>
+                    <ng-container *ngIf="!isLoading">
+                        <ng-container *ngIf="emptyTemplate; else elseEmptyTemplate">
+                            <ng-container *ngTemplateOutlet="emptyTemplate">
+                            </ng-container>
+                        </ng-container>
+                        <ng-template #elseEmptyTemplate>
+                            <div class="ax-flex ax-items-center ax-justify-center ax-p-4"
+                                [innerHTML]="'common.no-result-for' | trans:{exp:this._searchBox?  this._searchBox.searchExp :''}">
+                            </div>
+                        </ng-template>
+                    </ng-container>
+                </ng-template>
+
+            </div>
+            <!-- <div class="ax-list-items-container ax-vertical ax-default" [class.ax-full]="_isMobile"
+                >
+               
+            </div> -->
+            <!-- <div class="ax-footer">footer</div> -->
+        </div>
+    </div>
+</ax-popover>