@acorex/components 6.5.28 → 6.5.30

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,25 +0,0 @@
-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 { }