ps-toolkit-ui 0.0.211 → 0.0.212

package/src/lib/components/calendar/calendar.component.css

@@ -1,206 +0,0 @@
-#Calendar {
-  float: right;
-  width: 100%;
-  background-color: white;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
-  border-radius: 5px;
-  z-index: 4;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -ms-user-select: none;
-  position: relative;
-}
-#Calendar > .title {
-  float: right;
-  width: 100%;
-  text-align: center;
-  line-height: 30px;
-  font-family: VazirBold;
-}
-
-#Calendar .days-con {
-  float: right;
-  width: 100%;
-}
-
-#Calendar .header {
-  float: right;
-  width: 100%;
-  background: var(--black-33);
-}
-
-#Calendar .header .previous-month, #Calendar .header .next-month {
-  float: right;
-  width: 30px;
-  height: 30px;
-  line-height: 30px;
-  cursor: pointer;
-  font-size: 15px;
-  text-align: center;
-}
-
-#Calendar .header .previous-month:hover, #Calendar .header .next-month:hover {
-  background: var(--black-33);
-}
-
-#Calendar .header .title {
-  float: right;
-  width: calc(100% - 60px);
-  height: 30px;
-  font-size: 12px;
-  text-align: center;
-  font-family: VazirBold;
-}
-
-#Calendar .header .header-item {
-  float: right;
-  height: 20px;
-  line-height: 20px;
-  margin-top: 5px;
-  margin-right: 5px;
-  text-align: center;
-  background-color: white;
-  box-shadow: var(--box-shadow);
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-#Calendar .header .header-item:hover {
-  background-color: var(--base-11);
-}
-
-#Calendar .header .header-item.year {
-  width: calc(40% - 10px);
-}
-
-#Calendar .header .header-item.month {
-  width: calc(60% - 10px);
-}
-
-#Calendar .days-con .day-names {
-  float: right;
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  font-family: VazirLight;
-  position: relative;
-}
-
-#Calendar .days-con .day-names .item-con {
-  float: right;
-  width: calc(100% / 7);
-  padding-top: calc(100% / 7);
-  position: relative;
-}
-
-#Calendar .days-con .day-names .item-con .item {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  font-size: 11px;
-}
-
-#Calendar .days-con .days {
-  float: right;
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  overflow: hidden;
-  border-radius: 5px;
-}
-
-#Calendar .days-con .days .item-con {
-  float: right;
-  width: calc(100% / 7);
-  padding-top: calc(100% / 7);
-  position: relative;
-  cursor: pointer;
-}
-
-#Calendar .days-con .days .item-con.not-in-month {
-  cursor: default;
-  opacity: 0.5;
-}
-
-#Calendar .days-con .days .item-con:hover {
-  background-color: var(--black-33);
-}
-
-#Calendar .days-con .days .item-con.not-in-month:hover {
-  background-color: unset;
-}
-
-#Calendar .days-con .days .item-con.today {
-  background-color: var(--comp);
-  color: white;
-}
-
-#Calendar .days-con .days .item-con.today.not-in-month:hover {
-  background-color: var(--black-33);
-}
-
-
-#Calendar .days-con .days .item-con .item{
-  width: 100%;
-  height: 100%;
-  top: 0;
-  right: 0;
-  position: absolute;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  font-size: 11px;
-}
-#Calendar .months-con {
-  float: right;
-  width: 100%;
-  height: 325px;
-}
-
-#Calendar .months-con .month {
-  float: right;
-  width: calc(100% / 3);
-  height: calc(325px / 4);
-  line-height: calc(325px / 4);
-  font-size: 13px;
-  text-align: center;
-  cursor: pointer;
-}
-
-#Calendar .months-con .month:hover {
-  background-color: var(--black-33);
-}
-
-#Calendar .months-con .month.selected {
-  background-color: var(--black-33);
-}
-
-
-#Calendar .years-con {
-  float: right;
-  width: 100%;
-}
-
-#Calendar .years-con .year {
-  float: right;
-  width: calc(100% / 4);
-  height: calc(325px / 5);
-  line-height: calc(325px / 5);
-  font-size: 13px;
-  text-align: center;
-  cursor: pointer;
-}
-
-#Calendar .years-con .year:hover {
-  background-color: var(--black-33);
-}
-
-#Calendar .years-con .year.selected {
-  background-color: var(--black-33);
-}

package/src/lib/components/calendar/calendar.component.html

@@ -1,36 +0,0 @@
-<div id="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' && changeState('month')" class="month header-item">
-        {{getActiveMonth()}}
-      </div>
-      <div (click)="(state === 'day' || state === 'month') && changeState('year')" class="year header-item">
-        {{active.format('jYYYY')}}
-      </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-con"><div class="item">ش</div></div>
-      <div class="item-con"><div class="item">ی</div></div>
-      <div class="item-con"><div class="item">د</div></div>
-      <div class="item-con"><div class="item">س</div></div>
-      <div class="item-con"><div class="item">چ</div></div>
-      <div class="item-con"><div class="item">پ</div></div>
-      <div class="item-con"><div class="item">ج</div></div>
-    </div>
-    <div class="days">
-      <div [className]="'item-con not-in-month' + (d.today ? ' today' : '')" *ngFor="let d of previousDays"><div class="item">{{d.day}}</div></div>
-      <div [className]="'item-con' + (d.today ? ' today' : '') + (d.selected ? ' selected' : '')" *ngFor="let d of days"><div class="item">{{d.day}}</div></div>
-      <div [className]="'item-con not-in-month' + (d.today ? ' today' : '')" *ngFor="let d of nextDays"><div class="item">{{d.day}}</div></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>

package/src/lib/components/calendar/calendar.component.ts

@@ -1,99 +0,0 @@
-import {Component} from '@angular/core';
-import {DayClass} from '../../classes/form.class';
-import * as moment from 'jalali-moment';
-import {PsToolkitUiConfigService} from '../../services/config.service';
-import {LangClass} from '../../classes/lang.class';
-
-@Component({
-  selector: 'lib-calendar',
-  templateUrl: './calendar.component.html',
-  styleUrls: ['./calendar.component.css']
-})
-export class CalendarComponent {
-  state = 'day';
-  months = [];
-  active: moment.Moment;
-  previousDays: DayClass[] = [];
-  nextDays: DayClass[] = [];
-  days: DayClass[] = [];
-  todayDay: number;
-  todayMonth: number;
-  todayYear: number;
-  l: (k, v?) => string;
-  constructor(public config: PsToolkitUiConfigService){
-    const lang = new LangClass(config.currentLang, config.strings);
-    this.l = (key: string, v = null): string => {
-      return lang.get('Public', null, key, v);
-    };
-    this.months = [this.l('Month1'), this.l('Month2'), this.l('Month3'), this.l('Month4'), this.l('Month5'), this.l('Month6'), this.l('Month7'), this.l('Month8'), this.l('Month9'), this.l('Month10'), this.l('Month11'), this.l('Month12')];
-    this.setActive(moment());
-  }
-
-  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];
-  }
-  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 HH:mm:ss'), 'jYYYY/jMM/jDD HH:mm:ss');
-    this.setDate();
-    this.changeState('day');
-  }
-  changeYear(c: number): void{
-    this.active = moment(('000' + c).slice(-4) + '/' + this.active.format('jMM/jDD HH:mm:ss'), 'jYYYY/jMM/jDD HH:mm:ss');
-    this.setDate();
-    this.changeState('month');
-  }
-
-  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), false));
-    }
-    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;
-  }
-  setActive(m): void{
-    this.active = m;
-    this.todayDay = parseInt(this.active.format('jDD'), 10);
-    this.todayMonth = parseInt(this.active.format('jMM'), 10);
-    this.todayYear = parseInt(this.active.format('jYYYY'), 10);
-    this.setDate();
-  }
-}

package/src/lib/components/chart/chart.component.css

@@ -1,24 +0,0 @@
-.chart-con{
-  float: right;
-  width: 100%;
-  direction: ltr;
-  position: relative;
-}
-.chart-con .loading{
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 9;
-  background-color: white;
-}
-.chart-con .loading .text {
-  position: absolute;
-  height: 40px;
-  line-height: 40px;
-  width: 100%;
-  text-align: center;
-  font-family: VazirBold;
-  top: calc(50% - 20px);
-}

package/src/lib/components/chart/chart.component.html

@@ -1,6 +0,0 @@
-<div class="chart-con" [style]="chart.style">
-  <div *ngIf="chart.loading" class="loading">
-    <div class="text" [innerHTML]="chart.l('LoadingTable', 'Processing')"></div>
-  </div>
-  <div style="height: 100%" [id]="this.chart.name + 'Chart'"></div>
-</div>

package/src/lib/components/chart/chart.component.ts

@@ -1,14 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {ChartClass} from '../../classes/chart.class';
-
-@Component({
-  selector: 'lib-chart',
-  templateUrl: './chart.component.html',
-  styleUrls: ['./chart.component.css']
-})
-export class ChartComponent {
-  @Input()
-  chart: ChartClass;
-  constructor(){
-  }
-}

package/src/lib/components/clock/clock.component.css

@@ -1,141 +0,0 @@
-#ClockCon {
-  width: 10em;
-  height: 10em;
-  float: right;
-  position: relative;
-}
-
-#ClockCon #clock {
-  position: relative;
-  width: 10em;
-  height: 10em;
-  line-height: 1.5em;
-  border: 0.0625em solid var(--black-33);
-  border-radius: 50%;
-  box-shadow: inset 0.125em 0.25em 0.5em var(--black-33), -0.25em -0.5em 0.5em var(--black-33), 0 0 0.0625em 0.5em var(--black-33), 0 0 0.0625em 0.5625em var(--black-33), 0.125em 0.25em 0.5em 0.5em var(--black-33);
-  transform: scale(0.9);
-  background-color: white;
-}
-
-#ClockCon #clock *,
-#ClockCon #clock *:before,
-#ClockCon #clock *:after {
-  box-sizing: border-box;
-  background-clip: padding-box;
-}
-
-#ClockCon #clock:before,
-#ClockCon #clock:after,
-#ClockCon #clock b:before,
-#ClockCon #clock b:after {
-  position: absolute;
-  width: 1.5em;
-  text-align: center;
-}
-
-#ClockCon #clock b {
-  position: absolute;
-  top: 4.25em;
-  width: 100%;
-}
-
-#ClockCon #clock:before,
-#ClockCon #clock:after {
-  left: 4.25em;
-}
-
-#ClockCon #clock:before {
-  content: "12";
-  top: 0;
-}
-
-#ClockCon #clock:after {
-  content: "6";
-  bottom: 0;
-}
-
-#ClockCon #clock b:before {
-  left: 0;
-  content: "9";
-}
-
-#ClockCon #clock b:after {
-  right: 0;
-  content: "3";
-}
-
-#ClockCon #clock span {
-  position: absolute;
-  top: 0;
-  left: 4.9375em;
-  width: 0.125em;
-  height: 100%;
-}
-
-#ClockCon #clock span + span {
-  transform: rotate(90deg);
-}
-
-#ClockCon #clock i,
-#ClockCon #clock span:before,
-#ClockCon #clock span:after {
-  position: absolute;
-  top: 0.5em;
-  left: 0;
-  width: 100%;
-  height: 9em;
-}
-
-#ClockCon #clock span:before,
-#ClockCon #clock span:after {
-  content: "";
-  border-style: solid;
-  border-color: #000;
-  border-width: 0.5em 0;
-  transform: rotate(30deg);
-}
-
-#ClockCon #clock span:after {
-  transform: rotate(60deg);
-}
-
-#ClockCon #clock i {
-  z-index: 2;
-  left: 4.85em;
-  width: 0.3em;
-  background-color: #000;
-  border: solid transparent;
-  border-width: 0 0 3em;
-  border-radius: 40%;
-}
-
-#ClockCon #clock i:first-of-type {
-  border-width: 1.5em 0 3em;
-}
-
-#ClockCon #clock i:last-of-type {
-  background-color: var(--comp);
-}
-
-#ClockCon #clock i:last-of-type:before,
-#ClockCon #clock i:last-of-type:after {
-  content: "";
-  position: absolute;
-  border-radius: 50%;
-}
-
-#ClockCon #clock i:last-of-type:before {
-  top: 4em;
-  left: -0.375em;
-  width: 1em;
-  height: 1em;
-  background: #000;
-}
-
-#ClockCon #clock i:last-of-type:after {
-  top: 4.25em;
-  left: -0.125em;
-  width: 0.5em;
-  height: 0.5em;
-  background: #ABC;
-}

package/src/lib/components/clock/clock.component.html

@@ -1,10 +0,0 @@
-<div id="ClockCon">
-  <div id="clock">
-    <b></b>
-    <span></span>
-    <span></span>
-    <i id="hour"></i>
-    <i id="minute"></i>
-    <i id="second"></i>
-  </div>
-</div>

package/src/lib/components/clock/clock.component.ts

@@ -1,37 +0,0 @@
-import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import * as moment from 'jalali-moment';
-
-@Component({
-  selector: 'lib-clock',
-  templateUrl: './clock.component.html',
-  styleUrls: ['./clock.component.css']
-})
-export class ClockComponent implements OnInit, OnDestroy{
-  clockInterval;
-  @ViewChild('clock') clock: ElementRef;
-  active: moment.Moment;
-  constructor(){
-    this.active = moment();
-  }
-  ngOnInit(): void{
-    this.clockInterval = setInterval(() => {
-      this.clockUpdate();
-    }, 1000);
-  }
-  ngOnDestroy(): void{
-    clearInterval(this.clockInterval);
-  }
-
-  clockUpdate(): void{
-    this.active = this.active.add(1, 'second');
-    document.getElementById('hour').style.transform = 'rotate(' + (
-      this.active.get('hour') * 30 + (Math.floor(this.active.get('minute') / 12) * 6)
-    ) + 'deg)';
-    document.getElementById('minute').style.transform = 'rotate(' + (
-      this.active.get('minute') * 6
-    ) + 'deg)';
-    document.getElementById('second').style.transform = 'rotate(' + (
-      this.active.get('second') * 6
-    ) + 'deg)';
-  }
-}

package/src/lib/components/confirm/confirm.component.css

@@ -1,112 +0,0 @@
-.accordion {
-  float: right;
-  width: 100%;
-  padding: 20px;
-  background-color: white;
-  border-radius: 5px;
-  position: relative;
-  min-height: 300px !important;
-}
-
-.accordion > .loading{
-  position: absolute;
-  background-color: white;
-  top: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  border-radius: 5px;
-  z-index: 4;
-}
-
-.accordion > .loading .text {
-  position: absolute;
-  height: 35px;
-  line-height: 35px;
-  width: 100%;
-  text-align: center;
-  font-family: VazirBold;
-  top: calc(50% - 20px);
-}
-::ng-deep .accordion > .loading .icon {
-  font-size: 20px !important;
-  line-height: 30px;
-  position: relative;
-  top: 5px;
-  margin-left: 5px;
-}
-.accordion > .title{
-  float: right;
-  width: 100%;
-  height: 30px;
-  line-height: 30px;
-  font-family: VazirBold;
-  font-size: 16px;
-  text-align: center;
-  margin-bottom: 10px;
-  position: relative;
-}
-.accordion .accordion-item{
-  float: right;
-  width: 100%;
-  margin-bottom: 10px;
-  position: relative;
-}
-.accordion .accordion-item .header{
-  float: right;
-  width: 100%;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -khtml-user-select: none;
-  -ms-user-select: none;
-  position: relative;
-}
-.accordion .accordion-item .title{
-  float: right;
-  width: 100%;
-  height: 30px;
-  line-height: 30px;
-  background-color: var(--base);
-  border-radius: 5px;
-  text-align: center;
-  font-size: 12px;
-  cursor: pointer;
-  color: white;
-}
-.accordion .accordion-item .title:hover{
-  background-color: var(--base-dark);
-}
-.accordion .accordion-item .header .icon{
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 30px;
-  height: 30px;
-  line-height: 29px;
-  text-align: center;
-  color: white;
-  cursor: pointer;
-  font-size: 18px;
-}
-.accordion .accordion-item .header .delete-icon{
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 30px;
-  height: 30px;
-  line-height: 29px;
-  text-align: center;
-  color: white;
-  cursor: pointer;
-  font-size: 18px;
-}
-.accordion .accordion-item .content{
-  display: none;
-  float: right;
-  width: 100%;
-  padding: 10px;
-}
-.accordion .accordion-item-con:first-of-type .content{
-  display: block;
-}

package/src/lib/components/confirm/confirm.component.html

@@ -1 +0,0 @@
-<lib-modal *ngIf="confirm" [modal]="confirm"></lib-modal>