ps-toolkit-ui 0.0.210 → 0.0.211

package/src/lib/components/header/sub/sub.header.component.css

@@ -0,0 +1,62 @@
+#SubHeader{
+  float: right;
+  width: 100%;
+  height: 40px;
+  background-color: white;
+  box-shadow: var(--box-shadow-header);
+  position: relative;
+  z-index: 10;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+}
+#SubHeader .breadcrumb{
+  float: right;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 40px;
+}
+#SubHeader .breadcrumb .item{
+  float: right;
+}
+#SubHeader .breadcrumb .item .name{
+  float: right;
+  height: 40px;
+  line-height: 40px;
+  font-size: 12px;
+  color: var(--black-55) !important;
+  cursor: pointer;
+  font-family: VazirLight;
+  position: relative;
+  padding: 0 20px;
+}
+#SubHeader .breadcrumb .item i{
+  float: right;
+  height: 40px;
+  line-height: 40px;
+  width: 20px;
+  text-align: center;
+  font-size: 15px;
+  cursor: default;
+  color: var(--black-55) !important;
+}
+#SubHeader .breadcrumb .item:not(:first-of-type) .name:hover{
+  color: var(--comp) !important;
+}
+
+#SubHeader .breadcrumb .item:first-of-type .name{
+  margin-left: 30px;
+  font-size: 16px;
+  color: var(--black) !important;
+  cursor: default;
+  pointer-events: none;
+  font-family: VazirBold;
+  padding: 0;
+}
+
+#SubHeader .breadcrumb .item:last-of-type i{
+  display: none;
+}
+

package/src/lib/components/header/sub/sub.header.component.html

@@ -0,0 +1,8 @@
+<!--<div id="SubHeader">-->
+<!--  <div class="breadcrumb" *ngIf="app.breadcrumb != null">-->
+<!--    <a class="item"><div class="name">{{app.breadcrumb[app.breadcrumb.length - 1].Name}}</div></a>-->
+<!--    <a class="item" [routerLink]="b.Url" *ngFor="let b of (app.breadcrumb.length == 1 ? [] : app.breadcrumb)"><div class="name">{{b.Name}}</div><i class="fa-duotone fa-angle-left"></i></a>-->
+<!--  </div>-->
+<!--  <div class="breadcrumb" *ngIf="app.breadcrumb == null" [innerHTML]="this.l('LoadingDot')">-->
+<!--  </div>-->
+<!--</div>-->

package/src/lib/components/header/sub/sub.header.component.ts

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

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

@@ -0,0 +1,300 @@
+#Layout{
+  float: right;
+  width: 100%;
+}
+#Layout .layout-con{
+  float: right;
+  width: 100%;
+}
+#Layout .panel{
+  float: right;
+  width: 100%;
+  position: relative;
+}
+#Layout .panel .sidebar{
+  position: absolute;
+  float: right;
+  width: 78px;
+  background-color: var(--base);
+  min-height: calc(100vh - 35px);
+  overflow: hidden;
+  height: calc(100vh - 35px);
+  direction: ltr;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+  -moz-transition: width 0.3s;
+  -webkit-transition: width 0.3s;
+  transition: width 0.3s;
+  z-index: 9;
+}
+#Layout .panel .sidebar-shadow{
+  position: absolute;
+  float: right;
+  width: 100%;
+  left: 0;
+  visibility: hidden;
+  background-color: var(--black);
+  opacity: 0;
+  min-height: calc(100vh - 85px);
+  overflow: hidden;
+  height: calc(100vh - 85px);
+  direction: ltr;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+  -moz-transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  z-index: 9;
+}
+
+#Layout .panel.open-sidebar .sidebar{
+  width: 260px;
+}
+#Layout .panel .sidebar .sidebar-scroll{
+  width: 100%;
+  height: 100%;
+}
+
+#Layout .panel .content{
+  float: left;
+  width: calc(100% - 78px);
+  overflow: hidden;
+  direction: rtl;
+  position: relative;
+  -moz-transition: width 0.3s;
+  -webkit-transition: width 0.3s;
+  transition: width 0.3s;
+  background-color: var(--base-11);
+}
+#Layout .panel.open-sidebar .content{
+  width: calc(100% - 260px);
+}
+#Layout .panel .content .content-scroll-con{
+  width: 100%;
+  height: calc(100vh - 85px);
+  min-height: calc(100vh - 85px);
+}
+#Layout .panel .content .content-scroll-con .content-scroll{
+  float: right;
+  width: 100%;
+  padding: 20px;
+}
+
+@media (max-width: 399.98px) {
+  #Layout .panel .sidebar{
+    width: 200px;
+    right: 0;
+    min-height: calc(100vh - 110px);
+    height: calc(100vh - 110px);
+  }
+  #Layout .panel.open-sidebar .sidebar{
+    right: -200px;
+  }
+  #Layout .panel.open-sidebar .content{
+    width: 100%;
+  }
+  #Layout .panel .content{
+    width: 100%;
+    min-height: calc(100vh - 110px);
+    height: calc(100vh - 110px);
+  }
+  #Layout .panel .sidebar-shadow{
+    opacity: 0.7;
+    width: calc(100% - 200px);
+    visibility: visible;
+    min-height: calc(100vh - 110px);
+    height: calc(100vh - 110px);
+  }
+  #Layout .panel.open-sidebar .sidebar-shadow{
+    opacity: 0;
+    width: 100%;
+    visibility: hidden;
+  }
+}
+
+@media (min-width: 400px) and (max-width: 499.98px) {
+  #Layout .panel .sidebar{
+    width: 200px;
+    right: 0;
+    min-height: calc(100vh - 110px);
+    height: calc(100vh - 110px);
+  }
+  #Layout .panel.open-sidebar .sidebar{
+    right: -200px;
+  }
+  #Layout .panel.open-sidebar .content{
+    width: 100%;
+  }
+  #Layout .panel .content{
+    width: 100%;
+    min-height: calc(100vh - 110px);
+    height: calc(100vh - 110px);
+  }
+  #Layout .panel .sidebar-shadow{
+    opacity: 0.7;
+    width: calc(100% - 200px);
+    visibility: visible;
+    min-height: calc(100vh - 110px);
+    height: calc(100vh - 110px);
+  }
+  #Layout .panel.open-sidebar .sidebar-shadow{
+    opacity: 0;
+    width: 100%;
+    visibility: hidden;
+  }
+}
+
+@media (min-width: 500px) and (max-width: 599.98px) {
+  #Layout .panel .sidebar{
+    width: 200px;
+    right: 0;
+    min-height: calc(100vh - 110px);
+    height: calc(100vh - 110px);
+  }
+  #Layout .panel.open-sidebar .sidebar{
+    right: -200px;
+  }
+  #Layout .panel.open-sidebar .content{
+    width: 100%;
+  }
+  #Layout .panel .content{
+    width: 100%;
+    min-height: calc(100vh - 110px);
+    height: calc(100vh - 110px);
+  }
+  #Layout .panel .sidebar-shadow{
+    opacity: 0.7;
+    width: calc(100% - 200px);
+    visibility: visible;
+    min-height: calc(100vh - 110px);
+    height: calc(100vh - 110px);
+  }
+  #Layout .panel.open-sidebar .sidebar-shadow{
+    opacity: 0;
+    width: 100%;
+    visibility: hidden;
+  }
+}
+
+@media (min-width: 600px) and (max-width: 699.98px) {
+  #Layout .panel .sidebar{
+    width: 200px;
+    right: 0;
+  }
+  #Layout .panel.open-sidebar .sidebar{
+    right: -200px;
+  }
+  #Layout .panel.open-sidebar .content{
+    width: 100%;
+  }
+  #Layout .panel .content{
+    width: 100%;
+  }
+  #Layout .panel .sidebar-shadow{
+    opacity: 0.7;
+    width: calc(100% - 200px);
+    visibility: visible;
+  }
+  #Layout .panel.open-sidebar .sidebar-shadow{
+    opacity: 0;
+    width: 100%;
+    visibility: hidden;
+  }
+}
+
+@media (min-width: 700px) and (max-width: 799.98px) {
+  #Layout .panel .sidebar{
+    width: 200px;
+    right: 0;
+  }
+  #Layout .panel.open-sidebar .sidebar{
+    right: -200px;
+  }
+  #Layout .panel.open-sidebar .content{
+    width: 100%;
+  }
+  #Layout .panel .content{
+    width: 100%;
+  }
+  #Layout .panel .sidebar-shadow{
+    opacity: 0.7;
+    width: calc(100% - 200px);
+    visibility: visible;
+  }
+  #Layout .panel.open-sidebar .sidebar-shadow{
+    opacity: 0;
+    width: 100%;
+    visibility: hidden;
+  }
+}
+
+@media (min-width: 800px) and (max-width: 899.98px) {
+  #Layout .panel .sidebar{
+    width: 200px;
+    right: -200px;
+  }
+  #Layout .panel .content{
+    width: 100%;
+  }
+  #Layout .panel.open-sidebar .sidebar{
+    right: 0;
+  }
+  #Layout .panel.open-sidebar .content{
+    width: calc(100% - 200px);
+  }
+}
+
+@media (min-width: 900px) and (max-width: 999.98px) {
+  #Layout .panel .sidebar{
+    width: 200px;
+    right: -200px;
+  }
+  #Layout .panel .content{
+    width: 100%;
+  }
+  #Layout .panel.open-sidebar .sidebar{
+    right: 0;
+  }
+  #Layout .panel.open-sidebar .content{
+    width: calc(100% - 200px);
+  }
+}
+
+@media (min-width: 1000px) and (max-width: 1099.98px) {
+  #Layout .panel .sidebar{
+    width: 200px;
+    right: -200px;
+  }
+  #Layout .panel .content{
+    width: 100%;
+  }
+  #Layout .panel.open-sidebar .sidebar{
+    right: 0;
+  }
+  #Layout .panel.open-sidebar .content{
+    width: calc(100% - 200px);
+  }
+}
+
+@media (min-width: 1100px) and (max-width: 1199.98px) {
+  #Layout .panel .sidebar{
+    width: 200px;
+    right: -200px;
+  }
+  #Layout .panel .content{
+    width: 100%;
+  }
+  #Layout .panel.open-sidebar .sidebar{
+    right: 0;
+  }
+  #Layout .panel.open-sidebar .content{
+    width: calc(100% - 200px);
+  }
+}
+
+@media (min-width: 1200px) {
+}

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

@@ -0,0 +1,20 @@
+<div id="Layout">
+  <div class="layout-con">
+    <div class="panel open-sidebar">
+      <div class="sidebar-shadow" (click)="toggleSidebar()"></div>
+      <div class="sidebar">
+        <div class="sidebar-scroll" style="overflow-y: auto">
+          <lib-sidebar [permissions]="permissions" (toggleSidebar)="toggleSidebar()" [area]="area"></lib-sidebar>
+        </div>
+      </div>
+      <div class="content">
+        <lib-header (logout)="logout.emit()"></lib-header>
+        <div class="content-scroll-con" style="overflow-y: auto">
+          <div class="content-scroll">
+            <router-outlet></router-outlet>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import * as $ from 'jquery';
+
+@Component({
+  selector: 'lib-layout',
+  templateUrl: './layout.component.html',
+  styleUrls: ['./layout.component.css']
+})
+export class LayoutComponent {
+  @Input()
+  permissions: any[] = [];
+  @Input()
+  area: string;
+  @Output()
+  logout = new EventEmitter();
+  constructor() {
+  }
+  toggleSidebar(): void{
+    $('#Layout .panel').toggleClass('open-sidebar').toggleClass('close-sidebar');
+  }
+}

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

@@ -0,0 +1,39 @@
+#Loading{
+  position: fixed;
+  width: 100%;
+  height: 100vh;
+  background-color: var(--black);
+  z-index: 102;
+  overflow-y: auto;
+  top: 0;
+  right: 0;
+  display: table;
+}
+#Loading .content{
+  width: 100%;
+  height: 100%;
+  display: table-cell;
+  vertical-align: middle;
+}
+#Loading .content .loading-cell{
+  width: 100%;
+  float: right;
+}
+#Loading .content .loading-cell .icon{
+  width: 100%;
+  float: right;
+  height: 70px;
+  line-height: 70px;
+  text-align: center;
+  font-size: 40px;
+  color: white;
+}
+#Loading .content .loading-cell .title{
+  width: 100%;
+  float: right;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  font-size: 20px;
+  color: white;
+}

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

@@ -0,0 +1,8 @@
+<div id="Loading">
+  <div class="content">
+    <div class="loading-cell">
+      <div class="icon"><i class="fas fa-spin fa-spinner"></i></div>
+      <div class="title" [innerHTML]="l('Loading', 'Process')"></div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {LangClass} from '../../classes/lang.class';
+import {PsToolkitUiConfigService} from '../../services/config.service';
+
+@Component({
+  selector: 'lib-loading',
+  templateUrl: './loading.component.html',
+  styleUrls: ['./loading.component.css']
+})
+export class LoadingComponent {
+  l: (k, v?) => string;
+  constructor(config: PsToolkitUiConfigService){
+    const lang = new LangClass(config.currentLang, config.strings);
+    this.l = (key: string, v = null): string => {
+      return lang.get('Public', null, key, v);
+    };
+  }
+}