ps-toolkit-ui 0.0.210 → 0.0.211

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

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

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

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

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

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

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

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

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

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

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

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