sidesys-generic-ui 0.0.19 → 0.0.21

package/src/lib/sidebar/s-sidebar.component.scss

@@ -0,0 +1,300 @@
+.s-sidebar{
+    position: fixed;
+    background-color: var(--neutrals-1200);
+    box-sizing: border-box;
+}
+
+.sidebar-open44{
+    width: 15rem;
+    -webkit-transition: width 0.3s ease-in-out;
+    -moz-transition: width 0.3s ease-in-out;
+    -o-transition: width 0.3s ease-in-out;
+    transition: width 0.3s ease-in-out;
+}
+
+.menu-ul44{
+    margin-bottom: 2rem;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 92%;
+}
+
+.menu-ul44 li{
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    margin-right: 8px;
+    margin-left: 8px;
+}
+.sidebar-close44 .menu-ul44 li{
+    margin-right: 4px;
+    margin-left: 4px;
+}
+
+.sidebar-close44.content-ul44 a{
+    justify-content: center;
+}
+
+.menu-ul44 > .menu-ul44{
+    margin: 0;
+}
+
+.menu-ul44 > .menu-ul44 li{
+    padding-left: 0.27rem;
+    border-left: 3px solid #e6e6e600;
+    margin-bottom: 2px;
+    margin-top: 2px;
+}
+
+.menu-ul44 > .menu-ul44 li:hover{
+    // border-left: 3px solid var(--primary-700);
+    .dot44{
+        width: 5px;
+        height: 5px;
+        background: var(--secondary-700);
+        border: 1px solid rgba(255, 0, 0, 0);
+    }
+}
+
+.content-ul44{
+    padding-top: 0.5rem;
+    box-shadow: 0px 18px 28px 0px rgba(23, 56, 97, 0.15);
+    z-index: 0;
+    flex: 1;
+    align-items: center;
+    height: calc(100vh - 5.4rem);
+}
+
+.active44{
+    .menu-title44{
+        font-weight: 500;
+    }
+    .icon-menu44{
+        color: var(--primary-700);
+    }
+    .dot44{
+        width: 5px;
+        height: 5px;
+        background: var(--primary-700);
+        // border: 1px solid var(--secondary-700);
+    }
+}
+
+.open44{
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+    height: auto;
+}
+
+.close44{
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+    height: 0;
+    overflow: hidden;
+}
+
+.arrow44{
+    color: var(--primary-600);
+    -webkit-transition: 0.2s ease-in-out;
+    -moz-transition: 0.2s ease-in-out;
+    -o-transition: 0.2s ease-in-out;
+    transition: 0.2s ease-in-out;
+}
+
+.arrow-open44{
+    display: flex;
+    transform: rotate(180deg) !important;
+}
+
+.arrow-close44{
+    display: flex;
+    transform: rotate(360deg) !important;
+}
+
+ul li{
+    line-height: 1.25rem;
+}
+
+.content-ul44 a{
+    border-color: transparent;
+    border-style: solid;
+    border-width: 0;
+    padding: 0.47rem 0.7rem;
+    line-height: 1.5rem;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.menu-title44{
+    font-family: "Roboto";
+    color: var(--secondary-700);
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+    flex: 1 0 auto;
+    font-weight: 400;
+}
+
+.icon-menu44{
+    display: flex;
+    padding-right: 0.5rem;
+    color: var(--primary-700);
+}
+
+.sidebar-close44 .icon-menu44{
+    padding-right: 0rem;
+}
+
+.menu-ul44 s-icon-mat span{
+    font-size: 1.2rem;
+}
+
+.item-open44{
+    border-left: 3px solid var(--primary-700);
+    .menu-title44{
+        color: var(--primary-700);
+    }
+}
+
+.item-close44{
+    a .menu-title44{
+        color: var(--secondary-700);
+    }
+}
+
+.arrow44{
+    color: var(--primary-600);
+}
+
+.sidebar-close44{
+    width: 3.5rem;
+    -webkit-transition: width 0.1s ease-in-out;
+    -moz-transition: width 0.1s ease-in-out;
+    -o-transition: width 0.1s ease-in-out;
+    transition: width 0.1s ease-in-out;
+}
+
+.sidebar-close44 > .menu-ul44 > .menu-ul44 , .sidebar-close44 > .menu-ul44 > li > a > span , .sidebar-close44 > .menu-ul44 > li > a > .arrow44{
+    display: none
+}
+
+.button-menu44{
+    border-radius: 50px;
+    background: var(--primary-600);
+    color:var(--neutrals-1200);
+    position: fixed;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+}
+
+.button-menu44:hover{
+    background: var(--primary-800);
+}
+
+.button-menu44:active{
+    background: var(--primary-1000);
+}
+
+.button-menu44.sidebar-open44{
+    left: 190px;
+    bottom: 57px;
+    s-icon-mat span{
+        transform: rotate(180deg) !important;
+    }
+}
+
+.button-menu44.sidebar-close44{
+    left: 14px;
+    bottom: 57px;
+    s-icon-mat span{
+        transform: rotate(0deg) !important;
+    }
+}
+
+.button-menu44{
+    -webkit-transition: width 0.1s ease-in-out;
+    -moz-transition: width 0.1s ease-in-out;
+    -o-transition: width 0.1s ease-in-out;
+    transition: width 0.1s ease-in-out;
+}
+
+.menu-ul44 .dot44{
+    border-radius: 100%;
+    width: 5px;
+    height: 5px;
+    border: 1px solid var(--primary-600);
+    margin-right: 10px;
+}
+
+.sidebar-open44{
+    .menu-ul44{
+        .content-line-separate440{
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            height: 24px;
+            margin: 5px 0;
+            .line-separate440{
+                height: 1px;
+                background: var(--primary-600);
+                width: 19%;
+                margin-right: 15px;
+            }
+            .text-separate440{
+                font-size: 1rem;
+                color: var(--primary-600);
+            }
+        }
+    }
+}
+
+.sidebar-close44{
+    .menu-ul44{
+        .content-line-separate440{
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            height: 24px;
+            .line-separate440{
+                height: 1px;
+                background: var(--primary-600);
+                width: 100%;
+                margin: 0 11px;
+            }
+            .text-separate440{
+                display: none;
+                font-size: 1rem;
+                color: var(--primary-600);
+            }
+        }
+    }
+}
+
+
+
+.s-sidebar{
+    .active44{
+        background-color: var(--blue-alpha-100);
+    }
+}
+.s-sidebar.theme-dark{
+    background: var(--primary-800);
+    .menu-ul44 .content-line-separate440 .line-separate440, .dot44{
+        background: var(--neutrals-1200);
+    }
+    .menu-ul44 .content-line-separate440 .text-separate440 , .icon-menu44 , .menu-title44{
+        color: var(--neutrals-1200);
+    }
+    .active44{
+        background-color: var(--cyan-alpha-700);
+    }
+    .item-open44 a{
+        s-icon-mat span{
+            color: var(--neutrals-1200)
+        }
+    }
+    .arrow44{
+        color: var(--neutrals-1200);
+    }
+}

package/src/lib/sidebar/s-sidebar.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SSidebarComponent } from './s-sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SSidebarComponent;
+  let fixture: ComponentFixture<SSidebarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SSidebarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SSidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/sidebar/s-sidebar.component.ts

@@ -0,0 +1,81 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { SMenuItem } from './s-sidebar-model';
+import { LocalstorageService } from '../shared/localstorage.service';
+
+@Component({
+  selector: 's-sidebar',
+  templateUrl: './s-sidebar.component.html',
+  styleUrls: ['./s-sidebar.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class SSidebarComponent implements OnInit {
+
+  /**
+ * Menu items
+ */
+  @Input() menu: SMenuItem[] = [];
+  @Input() expand: boolean = true;
+  @Input() showExpand: boolean = true;
+  @Input() theme?: string;
+
+  @Output() navegate = new EventEmitter<string>();
+  @Output() clickEventMenu = new EventEmitter<Event>();
+
+  constructor(public localStorage:LocalstorageService) {
+
+    if(this.localStorage.getItem("s-sidebar:expand") == null || this.localStorage.getItem("s-sidebar:expand") == undefined){
+      this.localStorage.saveItem("s-sidebar:expand" , true)
+    }
+    
+  }
+
+  ngOnInit(): void {
+    this.loadDataFromLocalStorage()
+  }
+
+  clickParent(item: SMenuItem){
+    this.actionExpandItem(item);
+    this.actionExpandMenu();
+  }
+
+  actionExpandItem(item: SMenuItem){
+        const itemExpanedTemp = item.expanded
+        this.restartSelectedItems();
+        item.expanded = !itemExpanedTemp 
+  }
+
+  actionExpandMenu(){
+    this.expand = true;
+    this.refreshExpand()
+  }
+
+  restartSelectedItems(): void {
+    this.menu.forEach((itemToReset: SMenuItem) => {
+      itemToReset.expanded = false;
+    })
+  }
+  
+  toogleMenu(event: Event){
+    this.expand = !this.expand
+    this.onClickEventMenu(event)
+    this.refreshExpand()
+  }
+
+  onClickEventMenu(event: Event) {
+    this.clickEventMenu.next(event);
+  }
+
+  loadDataFromLocalStorage(){
+    if(this.localStorage.getItem("s-sidebar:expand") == false){
+      this.expand = this.localStorage.getItem("s-sidebar:expand")
+    }else{
+      this.localStorage.saveItem("s-sidebar:expand" , this.expand)
+    }
+  }
+
+  refreshExpand(){
+    this.localStorage.saveItem("s-sidebar:expand" , this.expand) 
+  }
+
+}
+

package/src/lib/sidebar/s-sidebar.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SSidebarComponent } from './s-sidebar.component';
+import { SIconModule } from '../icon/s-icon.module';
+import { SIconMaterialModule } from '../icon-material/s-icon-material.module';
+import { RouterModule } from '@angular/router';
+import { SBadgeModule } from '../badge/s-badge.module';
+import { LocalstorageService } from '../shared/localstorage.service';
+
+@NgModule({
+  declarations: [
+    SSidebarComponent
+  ],
+  imports: [
+    CommonModule,
+    SIconModule,
+    RouterModule,
+    SIconMaterialModule,
+    SBadgeModule,
+  ],
+  providers:[LocalstorageService],
+  exports: [SSidebarComponent , RouterModule]
+})
+export class SSidebarModule { }

package/src/lib/spinner/index.ts

@@ -0,0 +1,2 @@
+export * from './s-spinner.module';
+export * from './s-spinner.component';

package/src/lib/spinner/s-spinner.component.html

@@ -0,0 +1 @@
+<div class="type-{{type}} {{invert ? 'invert-true' : ''}}"></div>

package/src/lib/spinner/s-spinner.component.scss

@@ -0,0 +1,265 @@
+// ONE
+.type-one {
+  width: 48px;
+  height: 48px;
+  border: 5px solid var(--primary-300);
+  border-bottom-color: var(--primary-600);
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+  }
+  @keyframes rotation {
+  0% {
+      transform: rotate(0deg);
+  }
+  100% {
+      transform: rotate(360deg);
+  }
+  }
+// TWO
+  .type-two {
+    width: 48px;
+    height: 48px;
+    border: 5px solid var(--primary-600);
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+    }
+
+    @keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+    }
+    // TREE
+    .type-tree {
+      width: 48px;
+      height: 48px;
+      border: 3px solid var(--primary-600);
+      border-radius: 50%;
+      display: inline-block;
+      position: relative;
+      box-sizing: border-box;
+      animation: rotation 1s linear infinite;
+    }
+    .type-tree::after {
+      content: '';  
+      box-sizing: border-box;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      border: 3px solid;
+      border-color: var(--primary-300) transparent;
+    }
+    
+    @keyframes rotation {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    //Four
+    s-spinner[type="four"]{
+      width: 48px;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .type-four {
+      color: var(--primary-600);
+      font-size: 10px;
+      width: 1em;
+      height: 1em;
+      border-radius: 50%;
+      position: relative;
+      text-indent: -9999em;
+      animation: mulShdSpin 1.3s infinite linear;
+      transform: translateZ(0);
+      font-size: 0.4rem;
+    }
+    
+    @keyframes mulShdSpin {
+      0%,
+      100% {
+        box-shadow: 0 -3em 0 0.2em, 
+        2em -2em 0 0em, 3em 0 0 -1em, 
+        2em 2em 0 -1em, 0 3em 0 -1em, 
+        -2em 2em 0 -1em, -3em 0 0 -1em, 
+        -2em -2em 0 0;
+      }
+      12.5% {
+        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 
+        3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, 
+        -2em 2em 0 -1em, -3em 0 0 -1em, 
+        -2em -2em 0 -1em;
+      }
+      25% {
+        box-shadow: 0 -3em 0 -0.5em, 
+        2em -2em 0 0, 3em 0 0 0.2em, 
+        2em 2em 0 0, 0 3em 0 -1em, 
+        -2em 2em 0 -1em, -3em 0 0 -1em, 
+        -2em -2em 0 -1em;
+      }
+      37.5% {
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+         3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, 
+         -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+      }
+      50% {
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+         3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, 
+         -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+      }
+      62.5% {
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em,
+         3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, 
+         -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+      }
+      75% {
+        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 
+        3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
+        -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+      }
+      87.5% {
+        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 
+        3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, 
+        -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+      }
+    }
+    //Five
+    .type-five {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      display: inline-block;
+      border-top: 3px solid var(--primary-600);
+      border-right: 3px solid transparent;
+      box-sizing: border-box;
+      animation: rotation 1s linear infinite;
+    }
+    
+    @keyframes rotation {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    //Six
+    .type-six {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      display: inline-block;
+      border-top: 4px solid var(--primary-300);
+      border-right: 4px solid transparent;
+      box-sizing: border-box;
+      animation: rotation 1s linear infinite;
+    }
+    .type-six::after {
+      content: '';  
+      box-sizing: border-box;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      border-bottom: 4px solid var(--primary-600);
+      border-left: 4px solid transparent;
+    }
+    @keyframes rotation {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    // Seven
+    .type-seven {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      display: inline-block;
+      position: relative;
+      border: 10px solid;
+      border-color: rgba(0, 153, 255, 0.15) rgba(0, 68, 255, 0.25) rgba(10, 43, 189, 0.35) rgba(54, 166, 211, 0.5);
+      box-sizing: border-box;
+      animation: rotation 1s linear infinite;
+    }
+    
+    @keyframes rotation {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    } 
+
+
+    // SIZES
+    [size="xl"]{
+      .type-one , .type-two , .type-tree , s-spinner[type="four"] , .type-five, .type-six, .type-six::after , .type-seven{
+        width: 96px;
+        height: 96px
+      }
+      .type-tree::after {
+        width: 86px;
+        height: 86px;
+      }
+      .type-four{
+        font-size: 13px;
+        width: 1.3em;
+        height: 1.3em;
+      }
+    }
+
+    [size="md"]{
+      .type-one , .type-two , .type-tree , s-spinner[type="four"] , .type-five, .type-six, .type-six::after , .type-seven{
+        width: 24px;
+        height: 24px
+      }
+      .type-tree::after {
+        width: 14px;
+        height: 14px;
+      }
+      .type-four{
+        font-size: 3px;
+        width: 0.5em;
+        height: 0.5em;
+      }
+      .type-six{
+        border-top: 2px solid var(--primary-300);
+        border-right: 2px solid transparent;
+      }
+      .type-six::after{
+        border-bottom: 2px solid var(--primary-600);
+        border-left: 2px solid transparent;
+      }
+      .type-seven{
+        border: 5px solid;
+        border-color: rgba(0, 153, 255, 0.15) rgba(0, 68, 255, 0.25) rgba(10, 43, 189, 0.35) rgba(54, 166, 211, 0.5);
+      }
+    }
+
+    //INVERT
+    .type-seven.invert-true{
+      border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
+    }
+