ps-toolkit-ui 0.0.211 → 0.0.212

package/src/lib/components/form/date/form.date.component.html

@@ -1,46 +0,0 @@
-<div #inputDiv [id]="inp.name + 'Input'" [style]="inp.style" [className]="inp.class + ' form-input-con date' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '')">
-  <div class="form-input" (click)="toggleCalendar()">
-    <div *ngIf="inp.displayLabel" class="label"><i *ngIf="inp.required" class="fas fa-star-of-life required-icon"></i>{{inp.getLabel()}}</div>
-    <div class="w-100 p-r">
-      <i *ngIf="inp.icon != null || inp.loading" #inputIcon [className]="(inp.loading ? 'fa-duotone fa-spin fa-spinner' : inp.icon) + ' icon'"></i>
-      <i *ngIf="inp.withClear && inp.value" (click)="inp.clear()" class="fa-duotone fa-eraser clear-icon"></i>
-      <input (keydown)="onKeyDown($event)" (keyup)="onKeyUp($event)" (focusout)="onFocusOut()" [disabled]="inp.disabled" [(ngModel)]="inp.search" #inputBase [name]="inp.name" [placeholder]="inp.l(inp.name)" class="control" autocomplete="off" maxlength="">
-      <div #inputCalendarDiv class="calendar">
-        <div class="header">
-          <i (click)="add(state === 'day' || state === 'month' ? -1 : -20)" class="fas fa-angle-right previous-month"></i>
-          <div class="title">
-            <div (click)="(state === 'day' || state === 'month') && changeState('year')" class="year header-item">
-              {{active.format('jYYYY')}}
-            </div>
-            <div (click)="state === 'day' && changeState('month')" class="month header-item">
-              {{getActiveMonth()}}
-            </div>
-          </div>
-          <i (click)="add(state === 'day' || state === 'month' ? 1 : 20)" class="fas fa-angle-left next-month"></i>
-        </div>
-        <div [style]="state === 'day' ? {} : {display: 'none'}" class="days-con">
-          <div class="day-names underline">
-            <div class="item">ش</div>
-            <div class="item">ی</div>
-            <div class="item">د</div>
-            <div class="item">س</div>
-            <div class="item">چ</div>
-            <div class="item">پ</div>
-            <div class="item">ج</div>
-          </div>
-          <div class="days">
-            <div [className]="'item not-in-month' + (d.today ? ' today' : '')" *ngFor="let d of previousDays">{{d.day}}</div>
-            <div (click)="selectDate(d)" [className]="'item' + (d.today ? ' today' : '') + (d.selected ? ' selected' : '')" *ngFor="let d of days">{{d.day}}</div>
-            <div [className]="'item not-in-month' + (d.today ? ' today' : '')" *ngFor="let d of nextDays">{{d.day}}</div>
-          </div>
-        </div>
-        <div [style]="state === 'month' ? {} : {display: 'none'}" class="months-con">
-          <div [className]="(i + 1 == active.format('jM') ? 'selected ' : '') + 'month'" (click)="changeMonth(i + 1)" *ngFor="let m of months; let i = index">{{m}}</div>
-        </div>
-        <div [style]="state === 'year' ? {} : {display: 'none'}" class="years-con">
-          <div [className]="(y == active.format('jYYYY') ? 'selected ' : '') + 'year'" (click)="changeYear(y)" *ngFor="let y of getYears()">{{y}}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

package/src/lib/components/form/date/form.date.component.ts

@@ -1,247 +0,0 @@
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
-import * as moment from 'jalali-moment';
-import * as $ from 'jquery';
-import {DayClass, InputClass} from '../../../classes/form.class';
-import {InputError} from '../../../classes/enum.class';
-
-@Component({
-  selector: 'lib-form-date',
-  templateUrl: './form.date.component.html',
-  styleUrls: ['./form.date.component.css']
-})
-export class FormDateComponent implements OnInit{
-  @Input()
-  inp: InputClass;
-  @Input()
-  inForm: boolean;
-  @Output()
-  changeIndex = new EventEmitter<string>();
-  previousDays: DayClass[] = [];
-  nextDays: DayClass[] = [];
-  days: DayClass[] = [];
-  todayDay: number;
-  todayMonth: number;
-  todayYear: number;
-  cSearch = '';
-  state = 'day';
-  months = ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'];
-  active: moment.Moment = moment();
-  @ViewChild('inputBase') inputBase: ElementRef;
-  @ViewChild('inputDiv') inputDiv: ElementRef;
-  @ViewChild('inputLabel') inputLabel: ElementRef;
-  @ViewChild('inputCalendarDiv') inputCalendarDiv: ElementRef;
-  constructor(){
-  }
-  ngOnInit(): void{
-    // moment.locale('fa');
-    const today = moment().locale('fa');
-    this.todayDay = parseInt(today.format('jDD'), 10);
-    this.todayMonth = parseInt(today.format('jMM'), 10);
-    this.todayYear = parseInt(today.format('jYYYY'), 10);
-    this.setInpValue(this.inp.value);
-    this.inp.setValue = (v) => {
-      this.setInpValue(v);
-    };
-    this.inp.isValid = () => {
-      this.inp.error = null;
-      if (this.inp.required && !this.inp.value) {
-        this.inp.error = InputError.Required;
-        return false;
-      }
-      if (!this.inp.required && !this.inp.value) {
-        return true;
-      }
-      if (!moment(this.inp.value, 'jYYYY/jMM/jDD').isValid()) {
-        this.inp.error = InputError.Invalid;
-        return false;
-      }
-      return true;
-    };
-    this.inp.clear = () => {
-      if (this.inp.default){
-        this.inp.setValue(this.inp.default, false);
-      }else{
-        this.inp.value = null;
-        this.inp.search = null;
-      }
-    };
-    this.inp.data = () => {
-      return this.inp.value ? moment(this.inp.value, 'jYYYY/jMM/jDD').locale('en').format('YYYY/MM/DD') : null;
-    };
-    this.inp.focus = () => {
-      this.openCalendar();
-    };
-    this.inp.focusOut = () => {
-      $(this.inputBase.nativeElement).blur();
-    };
-  }
-  setInpValue(v): void{
-    if (v === null){
-      this.inp.clear();
-      return;
-    } else if (typeof v === 'string') {
-      const d = parseInt(v.substring(6, v.length - 2), 10);
-      this.active = moment(d);
-    }else if (typeof v === 'number'){
-      this.active = moment(v);
-    }else {
-      this.active = v;
-    }
-    this.inp.value = this.active.format('jYYYY/jMM/jDD');
-    this.inp.search = this.active.format('jYYYY/jMM/jDD');
-    this.setDate();
-  }
-  setDate(): void{
-    const n = this.active.clone();
-    const countDayInMonth = n.daysInMonth();
-    const startWeek = parseInt(n.startOf('month').format('d'), 10);
-    const previousMonth = n.subtract(1, 'month');
-    const countDayInPreviousMonth = previousMonth.daysInMonth();
-    const nextMonth = n.add(2, 'month');
-    const previousDays: DayClass[] = [];
-    const nextDays = [];
-    const days = [];
-    if (startWeek !== 6){
-      for (let i = countDayInPreviousMonth - startWeek; i <= countDayInPreviousMonth; i++){
-        previousDays.push(new DayClass(i, this.isToday(previousMonth, i), false));
-      }
-    }
-    for (let i = 1; i <= countDayInMonth; i++){
-      days.push(new DayClass(i, this.isToday(this.active, i), this.isSelected(this.active, i)));
-    }
-    const end = (days.length + previousDays.length) % 7;
-    if (end !== 0){
-      for (let i = 1; i <= 7 - end; i++){
-        nextDays.push(new DayClass(i, this.isToday(nextMonth, i), false));
-      }
-    }
-    this.previousDays = previousDays;
-    this.nextDays = nextDays;
-    this.days = days;
-  }
-  isToday(m: moment.Moment, d: number): boolean{
-    const month = parseInt(m.format('jMM'), 10);
-    const year = parseInt(m.format('jYYYY'), 10);
-    return year === this.todayYear && month === this.todayMonth && d === this.todayDay;
-  }
-  isSelected(m: moment.Moment, d: number): boolean{
-    if (this.inp.value == null){
-      return false;
-    }
-    const month = parseInt(m.format('jMM'), 10);
-    const year = parseInt(m.format('jYYYY'), 10);
-    const vDay = parseInt(this.inp.value.split('/')[2], 10);
-    const vMonth = parseInt(this.inp.value.split('/')[1], 10);
-    const vYear = parseInt(this.inp.value.split('/')[0], 10);
-    return year === vYear && month === vMonth && d === vDay;
-  }
-  add(c: number): void{
-    this.active.add(c, this.state === 'day' ? 'month' : 'year');
-    this.setDate();
-  }
-  changeMonth(c: number): void{
-    this.active = moment(this.active.format('jYYYY') + '/' + ('0' + c).slice(-2) + '/' + this.active.format('jDD'), 'jYYYY/jMM/jDD');
-    this.setDate();
-    this.changeState('day');
-  }
-  changeYear(c: number): void{
-    this.active = moment(('000' + c).slice(-4) + '/' + this.active.format('jMM') + '/' + this.active.format('jDD'), 'jYYYY/jMM/jDD');
-    this.setDate();
-    this.changeState('month');
-  }
-  toggleCalendar(): void{
-    this.openCalendar();
-  }
-  openCalendar(): void {
-    this.setPosition();
-    $(this.inputBase.nativeElement).focus();
-  }
-  onKeyDown(e): void{
-    const code = e.keyCode || e.which;
-    if (code === 9 || code === 13) {
-      e.preventDefault();
-      $(this.inputDiv.nativeElement).removeClass('top');
-      this.changeIndex.emit(code === 9 ? e.shiftKey ? 'ShiftTab' : 'Tab' : e.shiftKey ? 'ShiftEnter' : 'Enter');
-      if (!this.inForm){
-        $(this.inputBase.nativeElement).blur();
-      }
-    }
-  }
-  onKeyUp(e): void{
-    this.inp.error = null;
-    this.inp.value = null;
-    if (this.cSearch !== e.target.value) {
-      this.cSearch = e.target.value;
-      if (this.inp.search !== '' && this.inp.search !== null){
-        const v = moment(this.inp.search, 'jYYYY/jMM/jDD');
-        if (v.isValid() && this.inp.search.length <= 10){
-          this.active = v;
-          this.inp.value = this.active.format('jYYYY/jMM/jDD');
-          this.setDate();
-          if (this.inp.onChange){
-            this.inp.onChange(this.inp);
-          }
-        }else{
-          this.setDate();
-        }
-      } else {
-        this.setDate();
-        if (this.inp.onChange){
-          this.inp.onChange(this.inp);
-        }
-      }
-    }
-  }
-  onFocusOut(): void{
-    $(this.inputDiv.nativeElement).removeClass('top');
-    this.inp.search = this.inp.value;
-    this.state = 'day';
-  }
-  setPosition(): void{
-    const rect = this.inputDiv.nativeElement.getBoundingClientRect();
-    const offsetOfBottom = window.innerHeight - rect.bottom;
-    const height = this.inputCalendarDiv.nativeElement.offsetHeight;
-    if (offsetOfBottom < height){
-      $(this.inputDiv.nativeElement).addClass('top');
-    }else{
-      $(this.inputDiv.nativeElement).removeClass('top');
-    }
-  }
-  selectDate(d: DayClass): void {
-    this.inp.error = null;
-    const s = this.days.find(x => x.selected);
-    if (s){
-      s.selected = false;
-    }
-    const m = parseInt(this.active.format('jMM'), 10);
-    const y = parseInt(this.active.format('jYYYY'), 10);
-    this.setValue(y, m, d.day);
-    d.selected = true;
-    this.cSearch = this.inp.search;
-    setTimeout(() => {
-      $(this.inputDiv.nativeElement).removeClass('top');
-      this.changeIndex.emit('Tab');
-      if (!this.inForm){
-        $(this.inputBase.nativeElement).blur();
-      }
-    }, 10);
-    if (this.inp.onChange){
-      this.inp.onChange(this.inp);
-    }
-  }
-  setValue(y: number, m: number, d: number): void{
-    this.inp.value = y + '/' + (m > 9 ? m : '0' + m) + '/' + (d > 9 ? d : '0' + d);
-    this.inp.search = y + '/' + (m > 9 ? m : '0' + m) + '/' + (d > 9 ? d : '0' + d);
-  }
-  changeState(s: string): void{
-    this.state = s;
-  }
-  getYears(): number[]{
-    const y = parseInt(this.active.format('jYYYY'), 10);
-    const sy = y - (y % 20);
-    return Array.from({length: 20}, (x, i) => sy + i);
-  }
-  getActiveMonth(): string{
-    return this.months[parseInt(this.active.format('jM'), 10) - 1];
-  }
-}

package/src/lib/components/form/datetime/form.datetime.component.css

@@ -1,157 +0,0 @@
-.form-input-con.datetime {
-  position: relative;
-  float: right;
-  width: 100%;
-  padding: 0 15px;
-}
-.form-input-con.datetime .form-input {
-  position: relative;
-  float: right;
-  width: 100%;
-}
-.form-input-con.datetime .form-input .label {
-  float: right;
-  width: 100%;
-  height: 20px;
-  line-height: 20px;
-  padding: 0 10px;
-  font-size: 12px;
-  margin-bottom: 3px;
-  cursor: default;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -ms-user-select: none;
-  direction: rtl;
-  text-align: right;
-}
-.form-input-con.datetime.error .form-input .label {
-  font-size: 10px;
-  color: var(--red);
-}
-.form-input-con.datetime .form-input .label .required-icon{
-  height: 20px;
-  width: 20px;
-  line-height: 20px;
-  font-size: 9px;
-  color: var(--red);
-  text-align: center;
-}
-
-.form-input-con.datetime .form-input .control {
-  display: block;
-  width: 100%;
-  height: 35px;
-  padding: 5px 35px;
-  font-family: Vazir;
-  color: var(--black);
-  background-image: none;
-  border: none;
-  border-radius: 5px;
-  text-align: center;
-  background-color: white;
-  position: relative;
-  z-index: 2;
-  font-size: 11px;
-  border: var(--border-input);
-}
-.form-input-con.datetime .form-input .control:focus{
-  border-radius: 5px 5px 5px 0;
-}
-.form-input-con.datetime.top .form-input .control:focus{
-  border-radius: 0 5px 5px 5px;
-}
-
-.form-input-con.datetime .form-input:hover .control, .form-input-con.datetime .form-input .control:focus {
-  border: var(--border-input-dark);
-  outline: none;
-}
-
-.form-input-con.datetime .form-input i.icon {
-  position: absolute;
-  font-size: 13px;
-  color: var(--comp);
-  cursor: text;
-  bottom: 0;
-  z-index: 3;
-  -webkit-transition: all .35s ease-in-out;
-  transition: all .35s ease-in-out;
-  width: 35px;
-  text-align: center;
-  height: 35px;
-  line-height: 35px;
-  left: 0;
-}
-.form-input-con.datetime .form-input i.clear-icon {
-  position: absolute;
-  font-size: 14px;
-  color: var(--red);
-  cursor: pointer;
-  bottom: 0;
-  z-index: 3;
-  -webkit-transition: all .35s ease-in-out;
-  transition: all .35s ease-in-out;
-  width: 35px;
-  text-align: center;
-  height: 35px;
-  line-height: 38px;
-  right: 0;
-}
-
-.form-input-con.datetime.disabled .form-input, .form-input-con.datetime.disabled .form-input i.icon, .form-input-con.datetime.disabled .form-input .label {
-  pointer-events: none;
-  cursor: default;
-  opacity: 0.7;
-  filter: blur(0.5px);
-}
-::ng-deep .form-input-con.datetime .form-input .form-input-con.date .form-input .control{
-  padding: 5px 15px 5px 35px!important;
-}
-::ng-deep .form-input-con.datetime .form-input .form-input-con.date .form-input .control{
-  padding: 5px 15px!important;
-}
-::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.date .form-input .control,
-::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.date .form-input i.icon,
-::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.date .form-input .label {
-  pointer-events: none;
-  cursor: default;
-  opacity: 0.7;
-  filter: blur(0.5px);
-}
-::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.time .form-input .control,
-::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.time .form-input i.icon,
-::ng-deep .form-input-con.datetime.disabled .form-input .form-input-con.time .form-input .label {
-  pointer-events: none;
-  cursor: default;
-  opacity: 0.7;
-  filter: blur(0.5px);
-}
-
-.form-input-con.datetime.error .form-input .control, .form-input-con.datetime.error .form-input i.icon {
-  color: var(--red-cc);
-}
-
-.form-input-con.datetime.error .form-input .control {
-  border: var(--border-input-red);
-}
-.form-input-con.datetime.error .form-input:hover .control, .form-input-con.datetime.error .form-input .control:focus {
-  border: var(--border-input-red-dark);
-}
-::ng-deep .form-input-con.datetime .form-input .form-input-con.date {
-  float: left;
-  width: 60%;
-  padding: 0;
-}
-::ng-deep .form-input-con.datetime .form-input .form-input-con.time {
-  float: right;
-  width: 40%;
-  padding: 0;
-}
-
-::ng-deep .form-input-con.datetime .form-input .form-input-con.date .form-input .control{
-  border-radius: 5px 0 0 5px !important;
-}
-::ng-deep .form-input-con.datetime .form-input .form-input-con.time .form-input .control {
-  border-radius: 0 5px 5px 0 !important;
-  border-left: unset !important;
-}

package/src/lib/components/form/datetime/form.datetime.component.html

@@ -1,11 +0,0 @@
-<div [id]="inp.name + 'Input'" [style]="inp.style" [className]="inp.class + ' form-input-con datetime' + (inp.error == null ? '' : ' error') + (inp.disabled ? ' disabled' : '')">
-  <div class="form-input">
-    <div *ngIf="inp.displayLabel" (click)="this.date.focus()" class="label"><i *ngIf="inp.required" class="fas fa-star-of-life required-icon"></i>{{inp.getLabel()}}</div>
-    <div class="w-100 p-r">
-      <i (click)="this.date.focus()" *ngIf="inp.icon != null || inp.loading" #inputIcon [className]="(inp.loading ? 'fa-duotone fa-spin fa-spinner' : inp.icon) + ' icon'"></i>
-      <i *ngIf="inp.withClear && (date.value || time.value)" (click)="inp.clear()" class="fa-duotone fa-eraser clear-icon"></i>
-      <lib-form-date (changeIndex)="changeFocus('Date', $event)" [inp]="date"></lib-form-date>
-      <lib-form-time (changeIndex)="changeFocus('Time', $event)" [inp]="time"></lib-form-time>
-    </div>
-  </div>
-</div>

package/src/lib/components/form/datetime/form.datetime.component.ts

@@ -1,98 +0,0 @@
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
-import * as moment from 'jalali-moment';
-import {InputClass} from '../../../classes/form.class';
-import {InputError, InputType} from '../../../classes/enum.class';
-
-@Component({
-  selector: 'lib-form-datetime',
-  templateUrl: './form.datetime.component.html',
-  styleUrls: ['./form.datetime.component.css']
-})
-export class FormDatetimeComponent implements OnInit{
-  @Input()
-  inp: InputClass;
-  @Input()
-  inForm: boolean;
-  @Output()
-  changeIndex = new EventEmitter<string>();
-  date: InputClass;
-  time: InputClass;
-  constructor(){
-  }
-  ngOnInit(): void{
-    this.date = new InputClass(this.inp.environment, this.inp.l, 'Date', null, InputType.Date);
-    this.time = new InputClass(this.inp.environment, this.inp.l, 'Time', null, InputType.Time);
-    this.date.displayLabel = this.time.displayLabel = false;
-    if (this.inp.value){
-      this.inp.setValue(this.inp.value, false);
-    }
-    this.inp.setValue = (v) => {
-      if (v === null){
-        this.inp.clear();
-        return;
-      } else if (typeof v === 'string') {
-        v = parseInt(v.substring(6, v.length - 2), 10);
-      }
-      const m = moment(v).locale('fa');
-      this.date.setValue(m, false);
-      this.time.setValue({Hours: m.hours(), Minutes: m.minutes()}, false);
-    };
-    this.inp.isValid = () => {
-      this.inp.value = this.getValue();
-      this.inp.error = null;
-      this.date.error = null;
-      this.time.error = null;
-      if (this.inp.required && !this.inp.value) {
-        this.inp.error = InputError.Required;
-        this.date.error = InputError.Required;
-        this.time.error = InputError.Required;
-        return false;
-      }
-      if (!this.inp.required && !this.inp.value) {
-        return true;
-      }
-      if (!moment(this.inp.value, 'jYYYY/jMM/jDD HH:mm').isValid()) {
-        this.inp.error = InputError.Invalid;
-        this.date.error = InputError.Invalid;
-        this.time.error = InputError.Invalid;
-        return false;
-      }
-      return true;
-    };
-    this.inp.clear = () => {
-      if (this.inp.default){
-        this.inp.setValue(this.inp.default, false);
-      }else{
-        this.date.clear();
-        this.time.clear();
-      }
-    };
-    this.inp.data = () => {
-      return moment(this.getValue(), 'jYYYY/jMM/jDD HH:mm').locale('en').format('YYYY/MM/DD HH:mm');
-    };
-    this.inp.focus = () => {
-      this.date.focus();
-    };
-    this.inp.focusOut = () => {
-      this.date.focusOut();
-    };
-  }
-  changeFocus(p, a): void{
-    if (p === 'Date'){
-      if (a === 'Tab' || a === 'Enter'){
-        this.time.focus();
-      } else if (a === 'ShiftTab' || a === 'ShiftEnter'){
-        this.changeIndex.emit('ShiftTab');
-      }
-    } else {
-      if (a === 'Tab' || a === 'Enter'){
-        this.changeIndex.emit('Tab');
-      } else if (a === 'ShiftTab' || a === 'ShiftEnter'){
-        this.date.focus();
-      }
-    }
-  }
-  getValue(): string{
-    return !this.date.value || !this.time.value ? null : `${this.date.value} ${this.time.value}`;
-  }
-}