ps-toolkit-ui 0.0.210 → 0.0.211

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

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

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

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

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

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