@acorex/components 6.5.26 → 6.5.28

package/src/lib/time-picker/time-picker.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXTimePickerComponent } from './time-picker.component';
+import { AXButtonModule } from '../button/button.module';
+import { FormsModule } from '@angular/forms';
+import { TextMaskModule } from 'angular2-text-mask';
+
+
+@NgModule({
+    declarations: [AXTimePickerComponent],
+    imports: [ CommonModule, FormsModule, AXButtonModule, TextMaskModule ],
+    exports: [AXTimePickerComponent],
+    providers: [],
+})
+export class AXTimePickerModule {}

package/src/lib/toast/toast-message/toast-message.component.html

@@ -0,0 +1,17 @@
+<div class="toast-container">
+    <header *ngIf="title" class="ax toast {{ style }}">
+        <div>
+            <i class="{{icon}}"></i>&nbsp; {{ title }}
+        </div>
+        <div *ngIf="closeable" (click)="close()" class="toast-close">
+            <i class="far fa-times"></i>
+        </div>
+    </header>
+    <div class="content ax toast {{ style }}">
+        {{ message }}
+        <div *ngIf="!title && closeable" (click)="close()" class="toast-close">
+            <i class="far fa-times"></i>
+        </div>
+        <div class="toast-progress" [style.animation-duration.ms]="timeOut"></div>
+    </div>
+</div>

package/src/lib/toast/toast-message/toast-message.component.scss

@@ -0,0 +1,75 @@
+.rtl {
+    .toast-progress {
+        right: 0;
+        left: inherit !important;
+    }
+}
+
+.toast-container {
+    overflow: hidden;
+    margin: 0.8rem 0;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+    animation: slide-in-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    -webkit-animation: slide-in-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    border-radius: var(--ax-size-border-radius);
+    header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 0.8rem;
+        font-weight: 500;
+    }
+    .content {
+        padding: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    .toast-close {
+        cursor: pointer;
+        font-size: 1rem;
+    }
+    .toast-progress {
+        position: absolute;
+        background: rgba(0, 0, 0, 0.5);
+        width: 100%;
+        bottom: 0;
+        left: 0;
+        height: 6px;
+        animation-duration: 4s;
+        animation-timing-function: linear;
+        animation-name: progressBar;
+      
+    }
+}
+
+@keyframes progressBar {
+    0% {
+        width: 100%;
+    }
+    100% {
+        width: 0%;
+    }
+}
+
+@keyframes slide-in-top {
+    0% {
+        transform: translateY(-1000px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slide-in-bottom {
+    0% {
+        transform: translateY(1000px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}

package/src/lib/toast/toast-message/toast-message.component.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit, Input, ElementRef, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  templateUrl: './toast-message.component.html',
+  styleUrls: ['./toast-message.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class AXToastMessageComponent implements OnInit {
+  constructor(private elRef: ElementRef) { }
+
+  @Input() title: string = '';
+  @Input() message: string;
+  @Input() timeOut: number = 6000;
+  @Input() closeable: boolean = false;
+
+  @Input() type: 'info' | 'success' | 'warning' | 'error' = 'info';
+
+  style: string = 'info';
+  icon: string = '';
+  toastWidth: number = 100;
+
+  ngOnInit(): void {
+    if (this.timeOut) {
+      const interval = setInterval(() => {
+        --this.toastWidth;
+        if (this.toastWidth === 0) {
+          clearInterval(interval);
+          this.close();
+        }
+      }, this.timeOut / 100);
+    }
+    switch (this.type) {
+      case 'success':
+        this.style = 'success';
+        break;
+      case 'warning':
+        this.style = 'warning';
+        break;
+      case 'error':
+        this.style = 'error';
+        break;
+      default:
+        this.style = 'info';
+        break;
+    }
+    switch (this.type) {
+      case 'success':
+        this.icon = 'fas fa-check-circle';
+        break;
+      case 'warning':
+        this.icon = 'fas fa-exclamation-triangle';
+        break;
+      case 'error':
+        this.icon = 'fas fa-exclamation-circle';
+        break;
+      default:
+        this.icon = 'fas fa-info-circle';
+        break;
+    }
+  }
+  close() {
+    this.elRef.nativeElement.parentElement.removeChild(this.elRef.nativeElement);
+  }
+}

package/src/lib/toast/toast-wrapper/toast-wrapper.component.scss

@@ -0,0 +1,15 @@
+ax-toast-wrapper {
+  min-width: 300px;
+  max-width: 360px;
+  height: auto;
+  position: fixed;
+  bottom: 0;
+  right: 50%;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+  margin-left: -150px;
+  z-index: 10003;
+  flex-wrap: wrap;
+}

package/src/lib/toast/toast-wrapper/toast-wrapper.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'ax-toast-wrapper',
+  template: '',
+  styleUrls: ['./toast-wrapper.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class AXToastWrapperComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/lib/toast/toast.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXToastService } from './toast.service';
+import { AXToastWrapperComponent } from './toast-wrapper/toast-wrapper.component';
+import { AXToastMessageComponent } from './toast-message/toast-message.component';
+@NgModule({
+    declarations: [AXToastWrapperComponent, AXToastMessageComponent],
+    imports: [CommonModule],
+    exports: [AXToastWrapperComponent],
+    providers: [AXToastService]
+})
+export class AXToastModule { }

package/src/lib/toast/toast.service.ts

@@ -0,0 +1,64 @@
+import { Injectable } from '@angular/core';
+import { AXRenderService } from '@acorex/core';
+import { AXToastWrapperComponent } from './toast-wrapper/toast-wrapper.component';
+import { AXToastMessageComponent } from './toast-message/toast-message.component';
+
+export interface IToastOptions {
+  timeOut?: number;
+  title?: string;
+  closeable?: boolean;
+}
+
+@Injectable({ providedIn: 'root' })
+export class AXToastService {
+
+  constructor(private injectionService: AXRenderService) { }
+
+  info(message: string, options?: IToastOptions) {
+    this.show(message, 'info', options);
+  }
+
+  success(message: string, options?: IToastOptions) {
+    this.show(message, 'success', options);
+  }
+
+  warning(message: string, options?: IToastOptions) {
+    this.show(message, 'warning', options);
+  }
+
+  error(message: string, options?: IToastOptions) {
+    this.show(message, 'error', options);
+  }
+
+  private show(
+    message: string,
+    type: 'success' | 'info' | 'error' | 'warning',
+    options?: IToastOptions
+  ) {
+    const opt = Object.assign(
+      {
+        message,
+        type
+      },
+      options
+    );
+
+    const wrapper = document.querySelector('ax-toast-wrapper');
+    if (!wrapper) {
+      const toastWrapper = this.injectionService.appendComponent(
+        AXToastWrapperComponent
+      );
+      this.injectionService.appendComponent(
+        AXToastMessageComponent,
+        opt,
+        toastWrapper.location.nativeElement
+      );
+    } else {
+      this.injectionService.appendComponent(
+        AXToastMessageComponent,
+        opt,
+        wrapper
+      );
+    }
+  }
+}

package/src/lib/toolbar/group-button/toolbar-group-button.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
+import { AXToolbarItem } from "../toolbar-item";
+import { AXBaseMenuItem } from '@acorex/core';
+
+@Component({
+  selector: "ax-toolbar-group-button",
+  template: `
+    <div class="btn-group" role="group">
+      <button
+        type="button"
+        *ngFor="let item of items"
+        class="btn btn-sm {{ item.style }}"
+        [class.active]="item.selected"
+        (click)="onClick(item)"
+        [title]="item.tooltip"
+      >
+        <i class="{{ item.icon }}"></i>
+        {{ item.text }}
+      </button>
+    </div>
+  `,
+  providers: [
+    { provide: AXToolbarItem, useExisting: AXToolbarButtonGroupComponent }
+  ]
+})
+export class AXToolbarButtonGroupComponent {
+  constructor() { }
+
+  @Input()
+  items: AXBaseMenuItem[] = [];
+
+  @Output()
+  itemClick: EventEmitter<AXBaseMenuItem> = new EventEmitter<AXBaseMenuItem>();
+
+  @Input()
+  mode: "single" | "multiple" = "single";
+
+  onClick(item: AXBaseMenuItem) {
+    if (this.mode == "single") {
+      this.items.forEach(c => {
+        c.selected = false;
+      });
+      item.selected = true;
+      this.itemClick.emit(item);
+    } else {
+      if (item.selected) {
+        item.selected = false;
+      } else {
+        item.selected = true;
+        this.itemClick.emit(item);
+      }
+    }
+  }
+}

package/src/lib/toolbar/menu/toolbar-menu.component.html

@@ -0,0 +1,4 @@
+<div class="ax-toolbar-menu-container">
+    <ax-menu #menu [items]="items" [selection]="selection" (onItemClick)="handleItemClick($event)" [menuTemplate]="menuTemplate">
+    </ax-menu>
+</div>

package/src/lib/toolbar/menu/toolbar-menu.component.ts

@@ -0,0 +1,81 @@
+import {
+  Component,
+  Input,
+  EventEmitter,
+  Output,
+  ElementRef,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  NgZone,
+  ViewChild,
+  ChangeDetectorRef,
+  ContentChild,
+  TemplateRef
+} from '@angular/core';
+import { AXToolbarItem } from '../toolbar-item';
+import { AXMenuComponent, AXMenuItemClickEvent } from '../../menu/menu.component';
+import { AXMenuItem } from '@acorex/core';
+
+@Component({
+  selector: 'ax-toolbar-menu',
+  templateUrl: './toolbar-menu.component.html',
+  providers: [{ provide: AXToolbarItem, useExisting: AXToolbarMenuComponent }],
+  encapsulation: ViewEncapsulation.None,
+})
+export class AXToolbarMenuComponent extends AXToolbarItem {
+  
+  constructor(
+    private cdr: ChangeDetectorRef
+  ) {
+    super();
+  }
+
+  @ViewChild('menu', { static: true }) menu: AXMenuComponent
+
+  @Output()
+  onItemClick: EventEmitter<AXMenuItemClickEvent> = new EventEmitter<AXMenuItemClickEvent>();
+
+  @ContentChild(TemplateRef, { static: true })
+  _contentMenuTemplate: TemplateRef<any>;
+
+
+  private _menuTemplate: TemplateRef<any>;
+  @Input()
+  public get menuTemplate(): TemplateRef<any> {
+    return this._menuTemplate ? this._menuTemplate : this._contentMenuTemplate;
+  }
+  public set menuTemplate(v: TemplateRef<any>) {
+    this._menuTemplate = v;
+  }
+
+
+  @Input()
+  public selection: 'none' | 'single' | 'multiple' = 'none';
+
+  private _items: AXMenuItem[];
+  @Input()
+  public get items(): AXMenuItem[] {
+    return this._items;
+  }
+  public set items(v: AXMenuItem[]) {
+    this._items = v;
+    this.update();
+  }
+
+
+  handleItemClick(item?: AXMenuItemClickEvent) {
+    this.onItemClick.emit(item);
+  }
+
+
+  public close(): void {
+    // this.menu.close();
+  }
+
+  update() {
+    //this.menu.update();
+    this.cdr.detectChanges();
+  }
+
+
+}

package/src/lib/toolbar/search/toolbar-search.component.html

@@ -0,0 +1,4 @@
+<div class="search-bar">
+  <input #input type="text" placeholder="جستجو ..." (input)="onSearchChanged($event.target.value)" />
+  <i class="far fa-search text-secondary"></i>
+</div>

package/src/lib/toolbar/search/toolbar-search.component.scss

@@ -0,0 +1,24 @@
+.search-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid var(--ax-border-color);
+  border-radius: var(--ax-size-border-radius);
+  padding: 0.3em .6em;
+  background: var(--ax-white-color);
+  input {
+    border: none !important;
+    background-color: transparent;
+    outline-color: transparent !important;
+    flex: 1;
+    font-family: inherit;
+    font-size: inherit;
+    &::placeholder {
+      color: var(--ax-gray-color);
+    }
+  }
+
+  i {
+    color: var(--ax-gray-color);
+  }
+}

package/src/lib/toolbar/search/toolbar-search.component.ts

@@ -0,0 +1,61 @@
+import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
+import { Observable } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { AXToolbarItem } from '../toolbar-item';
+import { AXValueEvent } from '../../base/events.class';
+import { AXBaseInputComponent } from '../../base/element.class';
+
+
+@Component({
+    selector: 'ax-toolbar-search',
+    templateUrl: './toolbar-search.component.html',
+    styleUrls: ['./toolbar-search.component.scss'],
+    providers: [{ provide: AXToolbarItem, useExisting: AXToolbarSearchComponent }]
+})
+
+export class AXToolbarSearchComponent {
+    constructor() { }
+
+    private searchChangeObserver: any;
+
+    @ViewChild('input', { static: true }) inputSearch: ElementRef;
+
+    @Output()
+    onValueChanged: EventEmitter<AXValueEvent<string>> = new EventEmitter<AXValueEvent<string>>();
+
+    private _text: string;
+    @Input()
+    public get text(): string {
+        return this._text;
+    }
+    public set text(v: string) {
+        if (v !== this._text) {
+            const old = this._text;
+            this._text = v;
+            this.onValueChanged.emit({
+                component: this,
+                value: v,
+                oldValue: old
+            });
+        }
+    }
+
+    public focus() {
+        this.inputSearch.nativeElement.focus();
+    }
+
+    onSearchChanged(text: string) {
+        if (!this.searchChangeObserver) {
+            Observable.create(observer => {
+
+                this.searchChangeObserver = observer;
+            })
+                .pipe(debounceTime(500))
+                .pipe(distinctUntilChanged())
+                .subscribe(c => {
+                    this.text = c;
+                });
+        }
+        this.searchChangeObserver.next(text);
+    }
+}

package/src/lib/toolbar/title/toolbar-title.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { AXToolbarItem } from '../toolbar-item';
+
+@Component({
+    selector: 'ax-toolbar-title',
+    template: `
+        <ng-container *ngIf="text; else elseTemplate">
+        <div class="title">{{text}}</div>
+        </ng-container>
+        <ng-template #elseTemplate>
+            <ng-content></ng-content>
+        </ng-template>`,
+    styles: [`
+        .title{
+            height: 100%;
+            display: flex;
+            align-items: center;
+        }
+    `],
+    providers: [{ provide: AXToolbarItem, useExisting: AXToolbarTitleComponent }]
+})
+export class AXToolbarTitleComponent {
+    constructor() { }
+
+    private _text: string;
+    @Input()
+    public get text(): string {
+        return this._text;
+    }
+    public set text(v: string) {
+        if (v !== this._text) {
+            this._text = v;
+        }
+    }
+}

package/src/lib/toolbar/toolbar-item.ts

@@ -0,0 +1,4 @@
+export abstract class AXToolbarItem
+{
+    alignment:"start"|"end"|"center"="center";
+}

package/src/lib/toolbar/toolbar.component.html

@@ -0,0 +1,4 @@
+<div class="ax-toolbar">
+    <ng-content>
+    </ng-content>
+</div>

package/src/lib/toolbar/toolbar.component.scss

@@ -0,0 +1,9 @@
+ax-toolbar {
+  width: 100%;
+  .ax-toolbar {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+  }
+}

package/src/lib/toolbar/toolbar.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+
+@Component({
+    selector: 'ax-toolbar',
+    templateUrl: './toolbar.component.html',
+    styleUrls: ['./toolbar.component.scss'],
+    encapsulation:ViewEncapsulation.None
+})
+export class AXToolbarComponent implements OnInit {
+
+    constructor() { }
+
+    ngOnInit(): void { }
+    
+}

package/src/lib/toolbar/toolbar.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AXToolbarComponent } from './toolbar.component';
+import { AXToolbarMenuComponent } from './menu/toolbar-menu.component';
+import { AXToolbarSearchComponent } from './search/toolbar-search.component';
+import { AXToolbarTitleComponent } from './title/toolbar-title.component';
+import { AXToolbarButtonGroupComponent } from './group-button/toolbar-group-button.component';
+import { AXPopoverModule } from '../popover/popover.module';
+import { AXMenuModule } from '../menu/menu.module';
+
+const COMPONENTS = [
+    AXToolbarComponent,
+    AXToolbarMenuComponent,
+    AXToolbarSearchComponent,
+    AXToolbarTitleComponent,
+    AXToolbarButtonGroupComponent
+]
+
+@NgModule({
+    declarations: [COMPONENTS],
+    imports: [CommonModule, AXPopoverModule, AXMenuModule],
+    exports: [COMPONENTS],
+    providers: [],
+})
+export class AXToolbarModule { }