ps-toolkit-ui 0.0.210 → 0.0.211

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

@@ -0,0 +1,134 @@
+#Notfound{
+  float: right;
+  width: 100%;
+  position: relative;
+  background-color: white;
+  min-height: calc(100vh - 125px);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+#Notfound .notfound-con{
+  width: 100%;
+  float: right;
+  height: 100%;
+  border-radius: 5px;
+}
+#Notfound .notfound-con .notfound{
+  float: right;
+  width: 100%;
+  text-align: center;
+  font-size: 60px;
+  height: 100px;
+  line-height: 120px;
+  font-family: VazirBold;
+  position: relative;
+  z-index: 2;
+}
+#Notfound .notfound-con .notfound-text{
+  float: right;
+  width: 100%;
+  text-align: center;
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+  font-family: VazirLight;
+  position: relative;
+  z-index: 2;
+}
+#Notfound .notfound-con .notfound-btn{
+  margin-top: 15px;
+  float: right;
+  width: 20%;
+  position: relative;
+  z-index: 2;
+  margin-right: 40%;
+}
+#Notfound .notfound-con .notfound-icon{
+  float: right;
+  width: 100%;
+  color: var(--base-33);
+  font-size: 150px;
+  text-align: center;
+}
+
+@media (max-width: 399.99px) {
+  #Notfound .notfound-con{
+    width: 90%;
+    right: 5%;
+  }
+  #Notfound .notfound-con .notfound{
+    font-size: 90px;
+  }
+  #Notfound .notfound-con .notfound-text{
+    font-size: 14px;
+  }
+  #Notfound .notfound-con .notfound-icon{
+    font-size: 300px;
+    left: -90px;
+  }
+}
+
+@media (min-width: 400px) and (max-width: 499.99px) {
+  #Notfound .notfound-con{
+    width: 90%;
+    right: 5%;
+  }
+  #Notfound .notfound-con .notfound{
+    font-size: 110px;
+  }
+  #Notfound .notfound-con .notfound-text{
+    font-size: 16px;
+  }
+  #Notfound .notfound-con .notfound-icon{
+    font-size: 380px;
+  }
+}
+
+@media (min-width: 500px) and (max-width: 599.99px) {
+  #Notfound .notfound-con{
+    width: 90%;
+    right: 5%;
+  }
+  #Notfound .notfound-con .notfound{
+    font-size: 110px;
+  }
+  #Notfound .notfound-con .notfound-text{
+    font-size: 16px;
+  }
+  #Notfound .notfound-con .notfound-icon{
+    font-size: 380px;
+  }
+}
+
+@media (min-width: 600px) and (max-width: 699.99px) {
+  #Notfound .notfound-con{
+    width: 80%;
+    right: 10%;
+  }
+  #Notfound .notfound-con .notfound{
+    font-size: 120px;
+  }
+  #Notfound .notfound-con .notfound-text{
+    font-size: 17px;
+  }
+}
+
+@media (min-width: 700px) and (max-width: 799.99px) {
+}
+
+@media (min-width: 800px) and (max-width: 899.99px) {
+}
+
+@media (min-width: 900px) and (max-width: 999.99px) {
+}
+
+@media (min-width: 1000px) and (max-width: 1099.99px) {
+}
+
+@media (min-width: 1100px) and (max-width: 1199.99px) {
+}
+
+@media (min-width: 1200px) {
+}
+

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

@@ -0,0 +1,10 @@
+<div id="Notfound">
+  <div class="notfound-con">
+    <i class="far fa-frown notfound-icon"></i>
+    <div class="notfound">404</div>
+    <div class="notfound-text">{{l("Text")}}</div>
+    <div class="notfound-btn">
+      <lib-form-button [inp]="back"></lib-form-button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+import {PsToolkitUiConfigService} from '../../services/config.service';
+import {LangClass} from '../../classes/lang.class';
+import {InputClass} from '../../classes/form.class';
+import {InputType} from '../../classes/enum.class';
+
+@Component({
+    selector: 'lib-notfound',
+    templateUrl: './notfound.component.html',
+    styleUrls: ['./notfound.component.css']
+})
+export class NotfoundComponent{
+  back: InputClass;
+  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', 'Notfound', key, v);
+    };
+    this.back = new InputClass(config.environment, this.l, 'Back', 'fa-duotone fa-arrow-right', InputType.Button, '');
+    this.back.onClick = () => {
+      window.history.back();
+    };
+  }
+}

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

@@ -0,0 +1,45 @@
+#Notifications {
+  position: fixed;
+  bottom: 20px;
+  right: 0;
+  width: 350px;
+  z-index: 9999;
+}
+::ng-deep #Notifications .con{
+  float: right;
+  width: calc(100% - 40px);
+  padding: 5px 20px;
+}
+::ng-deep #Notifications .item{
+  float: right;
+  width: 100%;
+  background-color: var(--red);
+  position: relative;
+  color: white;
+  text-align: center;
+  border-radius: 5px;
+  box-shadow: var(--box-shadow);
+}
+::ng-deep #Notifications .item.success{
+  background-color: var(--green);
+}
+::ng-deep #Notifications .item i{
+  float: right;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  cursor: pointer;
+}
+::ng-deep #Notifications .item i:hover{
+  background-color: var(--red-dark);
+}
+::ng-deep #Notifications .item.success i:hover{
+  background-color: var(--green-dark);
+}
+::ng-deep #Notifications .item div{
+  float: right;
+  width: calc(100% - 30px);
+  line-height: 20px;
+  font-size: 12px;
+  padding: 10px;
+}

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

@@ -0,0 +1,2 @@
+<div id="Notifications">
+</div>

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

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+    selector: 'lib-notification',
+    templateUrl: './notification.component.html',
+    styleUrls: ['./notification.component.css']
+})
+export class NotificationComponent {
+  constructor(){
+  }
+}

package/src/lib/components/sidebar/item/sidebar.item.component.css

@@ -0,0 +1,236 @@
+.user-sidebar-item {
+  float: left;
+  width: 100%;
+  text-align: center;
+  position: relative;
+}
+
+.user-sidebar-item .content {
+  float: right;
+  width: 260px;
+  cursor: pointer;
+  position: relative;
+  -moz-transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+
+.user-sidebar-item .dot {
+  background-color: var(--base);
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: 2px solid #eeeeee66;
+  position: absolute;
+  top: 15px;
+  right: -15px;
+  z-index: 2;
+}
+
+.user-sidebar-item .dot.active {
+  background-color: var(--base-11);
+  border: 2px solid var(--base-11);
+}
+
+.user-sidebar-item.parent-active > .dot.parent {
+  background-color: #eeeeee66;
+  border: none;
+}
+
+.user-sidebar-item .dot.back {
+  background-color: var(--base);
+  border: none;
+  z-index: 1;
+}
+
+.user-sidebar-item .children {
+  float: left;
+  width: 100%;
+  position: relative;
+  display: none;
+}
+
+.user-sidebar-item .children .items {
+  float: left;
+  width: 100%;
+}
+
+.user-sidebar-item .children .line {
+  width: 1px;
+  background-color: #eeeeee66;
+  top: 0;
+  left: calc(85% + 10px);
+  height: calc(100% - 20px);
+  position: absolute;
+}
+
+.user-sidebar-item .content .title {
+  float: right;
+  width: 0;
+  height: 45px;
+  line-height: 45px;
+  font-size: 12px;
+  color: #ffffffcc;
+  font-family: VazirLight;
+  overflow: hidden;
+  -moz-transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+
+.user-sidebar-item .content .icon {
+  float: right;
+  width: 78px;
+  height: 45px;
+  line-height: 45px;
+  font-size: 18px;
+  color: #ffffffaa;
+}
+
+.user-sidebar-item .content .arrow {
+  position: absolute;
+  width: 40px;
+  opacity: 0;
+  height: 45px;
+  left: 0;
+  top: 0;
+  line-height: 45px;
+  font-size: 13px;
+  color: #ffffffcc;
+  overflow: hidden;
+  -moz-transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+::ng-deep #Layout .panel.open-sidebar .sidebar .user-sidebar-item .content .arrow{
+  opacity: 1;
+}
+::ng-deep #Layout .panel.open-sidebar .sidebar .user-sidebar-item .content .title{
+  width: calc(100% - 110px);
+}
+::ng-deep #Layout .panel.close-sidebar .sidebar .user-sidebar-item .content{
+  padding: 0!important;
+}
+
+.user-sidebar-item.open .content .arrow {
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+
+.user-sidebar-item > .children .content .icon{
+  font-size: 11px;
+}
+.user-sidebar-item.parent-active > .content, .user-sidebar-item:hover > .content {
+  background-color: var(--base-dark);
+}
+.user-sidebar-item.parent-active > .content .title, .user-sidebar-item:hover > .content .title{
+  color: #fff;
+  font-family: VazirBold;
+}
+.user-sidebar-item.parent-active > .content .icon, .user-sidebar-item:hover > .content .icon {
+  color: var(--comp);
+}
+.user-sidebar-item.parent-active > .content .arrow, .user-sidebar-item:hover > .content .arrow {
+  color: #fff;
+}
+
+
+.user-sidebar-item.parent-active > .children {
+  display: block;
+}
+
+@media (max-width: 399.98px) {
+  .user-sidebar-item .content .title {
+    width: calc(100% - 30px);
+    font-size: 11px;
+  }
+
+  .user-sidebar-item .content .icon {
+    width: 30px;
+    font-size: 13px;
+  }
+}
+
+@media (min-width: 400px) and (max-width: 499.98px) {
+  .user-sidebar-item .content .title {
+    width: calc(100% - 30px);
+    font-size: 11px;
+  }
+
+  .user-sidebar-item .content .icon {
+    width: 30px;
+    font-size: 13px;
+  }
+}
+
+@media (min-width: 500px) and (max-width: 599.98px) {
+  .user-sidebar-item .content .title {
+    width: calc(100% - 30px);
+    font-size: 11px;
+  }
+
+  .user-sidebar-item .content .icon {
+    width: 30px;
+    font-size: 13px;
+  }
+}
+
+@media (min-width: 600px) and (max-width: 699.98px) {
+  .user-sidebar-item .content .title {
+    width: calc(100% - 30px);
+    font-size: 11px;
+  }
+
+  .user-sidebar-item .content .icon {
+    width: 30px;
+    font-size: 13px;
+  }
+}
+
+@media (min-width: 700px) and (max-width: 799.98px) {
+  .user-sidebar-item .content .title {
+    width: calc(100% - 30px);
+    font-size: 11px;
+  }
+
+  .user-sidebar-item .content .icon {
+    width: 30px;
+    font-size: 13px;
+  }
+}
+
+@media (min-width: 800px) and (max-width: 899.98px) {
+  .user-sidebar-item .content .title {
+    width: calc(100% - 30px);
+    font-size: 11px;
+  }
+
+  .user-sidebar-item .content .icon {
+    width: 30px;
+    font-size: 13px;
+  }
+}
+
+@media (min-width: 900px) and (max-width: 999.98px) {
+  .user-sidebar-item .content .title {
+    width: calc(100% - 30px);
+    font-size: 11px;
+  }
+
+  .user-sidebar-item .content .icon {
+    width: 30px;
+    font-size: 13px;
+  }
+}
+
+@media (min-width: 1000px) and (max-width: 1099.98px) {
+}
+
+@media (min-width: 1100px) and (max-width: 1199.98px) {
+}
+
+@media (min-width: 1200px) {
+}

package/src/lib/components/sidebar/item/sidebar.item.component.html

@@ -0,0 +1,16 @@
+<div [className]="(isActive(item) ? 'parent-active open ' : '') + 'user-sidebar-item'">
+  <a [style]="{paddingRight: (i * 25) + 'px'}" *ngIf="item.children.length == 0" [className]="(currentSidebar && item.name == currentSidebar.name ? 'active ' : '') + 'content'" [routerLink]="(area ? '/' + area : '') + '/' + (item.controller == 'Dashboard' ? '' : (item.controller + (item.action ? '/' + item.action : '')))">
+    <i [className]="item.icon + ' icon'"></i>
+    <div class="title">{{ l(item.name) }}</div>
+  </a>
+  <div [style]="{paddingRight: (i * 25) + 'px'}" *ngIf="item.children.length > 0" (click)="openClose($event)" class="content parent">
+    <i [className]="item.icon + ' icon'"></i>
+    <div class="title">{{ l(item.name) }}</div>
+    <i [className]="'fa-duotone fa-angle-left arrow'"></i>
+  </div>
+  <div *ngIf="item.children.length > 0" class="children">
+    <div class="items">
+      <lib-sidebar-item [i]="i + 1" [item]="child" [currentSidebar]="currentSidebar" [area]="area" *ngFor="let child of item.children"></lib-sidebar-item>
+    </div>
+  </div>
+</div>

package/src/lib/components/sidebar/item/sidebar.item.component.ts

@@ -0,0 +1,54 @@
+import {Component, Input} from '@angular/core';
+import * as $ from 'jquery';
+import {SidebarClass} from '../../../classes/sidebar.class';
+import {LangClass} from '../../../classes/lang.class';
+import {PsToolkitUiConfigService} from '../../../services/config.service';
+import {strings} from '../../../classes/string.class';
+
+@Component({
+    selector: 'lib-sidebar-item',
+    templateUrl: './sidebar.item.component.html',
+    styleUrls: ['./sidebar.item.component.css']
+})
+export class SidebarItemComponent {
+  @Input()
+  item: SidebarClass;
+  @Input()
+  i: number;
+  @Input()
+  base: boolean;
+  @Input()
+  currentSidebar;
+  @Input()
+  area: string;
+  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', 'Sidebar', key, v);
+    };
+  }
+
+  openClose(e): void{
+    const op = $(e.target).closest('.user-sidebar-item');
+    if (op.hasClass('open')){
+      op.removeClass('open');
+      op.find(' > .children').slideUp();
+    }else{
+      op.addClass('open');
+      op.find(' > .children').slideDown();
+    }
+  }
+
+  isActive(item: SidebarClass): boolean{
+    if (item.children.length === 0){
+      return this.currentSidebar && item.name === this.currentSidebar.name;
+    }
+    for (const c of item.children){
+      if (this.isActive(c)){
+        return true;
+      }
+    }
+    return false;
+  }
+}

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

@@ -0,0 +1,42 @@
+#Sidebar{
+  float: right;
+  width: 100%;
+}
+#Sidebar .sidebar-con{
+  float: right;
+  width: 100%;
+  height: calc(100vh - 85px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  direction: rtl;
+}
+#Sidebar .toggle-con{
+  float: right;
+  width: 100%;
+  height: 50px;
+  background-color: var(--base-dark);
+}
+
+#Sidebar .toggle-con .toggle{
+  float: left;
+  text-align: center;
+  width: 78px;
+  height: 50px;
+  line-height: 50px;
+  color: #ffffffcc;
+  font-size: 18px;
+  cursor: pointer;
+  -moz-transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+}
+::ng-deep #Layout .panel.close-sidebar .sidebar .toggle-con .toggle{
+  -webkit-transform: scaleX(-1);
+  -moz-transform: scaleX(-1);
+  -o-transform: scaleX(-1);
+  -ms-transform: scaleX(-1);
+  transform: scaleX(-1);
+}
+#Sidebar .toggle-con .toggle:hover{
+  color: white;
+}

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

@@ -0,0 +1,10 @@
+<div id="Sidebar">
+  <div class="toggle-con">
+    <i (click)="toggleSidebar.emit()" class="toggle fa-duotone fa-angle-double-right"></i>
+  </div>
+  <div class="sidebar-con" id="sidebar-con">
+    <span *ngFor="let item of sidebar">
+      <lib-sidebar-item [i]="0" [item]="item" [base]="true" [currentSidebar]="currentSidebar" [area]="area"></lib-sidebar-item>
+    </span>
+  </div>
+</div>

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

@@ -0,0 +1,60 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {PsToolkitUiConfigService} from '../../services/config.service';
+import {LangClass} from '../../classes/lang.class';
+import {SidebarClass} from '../../classes/sidebar.class';
+import {NavigationEnd, Router} from '@angular/router';
+import {HelperClass} from '../../classes/helper.class';
+import {PermissionTypeEnum} from '../../classes/enum.class';
+
+@Component({
+    selector: 'lib-sidebar',
+    templateUrl: './sidebar.component.html',
+    styleUrls: ['./sidebar.component.css']
+})
+export class SidebarComponent implements OnInit{
+  @Input()
+  permissions: any[] = [];
+  @Input()
+  area: string;
+  @Output()
+  toggleSidebar = new EventEmitter<string>();
+  sidebar: SidebarClass[] = [];
+  currentSidebar;
+  l: (k, v?) => string;
+  constructor(public config: PsToolkitUiConfigService, private router: Router){
+    const lang = new LangClass(config.currentLang, config.strings);
+    this.l = (key: string, v = null): string => {
+      return lang.get('Public', 'Sidebar', key, v);
+    };
+    router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        this.setActive();
+      }
+    });
+  }
+  setActive(): void{
+    const active = HelperClass.getData('active', this.router.routerState, this.router.routerState.root)[0];
+    this.currentSidebar = this.getSidebarActive(this.sidebar, active);
+  }
+  ngOnInit(): void {
+    this.sidebar = this.getSidebar();
+    this.setActive();
+  }
+  getSidebar(parentId: string = null): SidebarClass[]{
+    return this.permissions.filter(x => x.Type === PermissionTypeEnum.Item && x.ParentId === parentId).map((s) => {
+        return new SidebarClass(this.l, s.Name, s.Controller, s.Action, s.Icon, this.getSidebar(s.Id));
+      });
+  }
+  getSidebarActive(item: SidebarClass[], active): SidebarClass{
+    for (const i of item){
+      if (i.controller + (i.action ? i.action : '') === active){
+        return i;
+      }
+      const ca = this.getSidebarActive(i.children, active);
+      if (ca){
+        return ca;
+      }
+    }
+    return null;
+  }
+}