sidesys-generic-ui 0.0.19 → 0.0.21

package/src/lib/select/select-simple/s-select-simple.component.scss

@@ -0,0 +1,189 @@
+#select-container909 {
+  width: 100%;
+  position: relative;
+  
+.select-main-content {
+  color: var(--secondary-600);
+  border: 1px solid var(--primary-500);
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  border-radius: 4px;
+  display: flex;
+  padding: 0px 10px;
+  span{
+    font-weight: 500;
+  }
+}
+
+.select-main-content.md{
+  height: 38px;
+  font-size: 1rem;
+
+}
+.select-main-content.sm{
+  height: 24px;
+  font-size: 0.9rem;
+}
+
+.select-label{
+  font-size: 0.813rem;
+  font-weight: 700;
+  color: var(--secondary-600);
+}
+
+.is-open{
+  border:1px solid var(--primary-600);
+  box-shadow: 0px 0px 0px 4px rgba(244, 235, 255, 1), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+  
+.selected-option625 {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .content-right s-icon-mat.icon-check span{
+    color: var(--primary-600);
+  }
+}
+
+.selected-option625 span {
+  flex: 1;
+}
+
+.select-options {
+  max-height: 200px;
+  overflow-y: auto;
+  position: absolute;
+  width: calc(100% - 33px);
+  z-index: 1;
+  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+  background-color: var(--neutrals-1200);
+}
+
+.select-options .content-select-option-main.active .option-value{
+  font-weight: 500;
+  margin-left: 4px
+}
+
+.select-options .content-select-option-main:hover {
+  background-color: var(--neutrals-1000);
+  cursor: pointer;
+}
+
+.is-open-arrow {
+  color: var(--primary-600)
+}
+
+.content-left .dot , .content-selected-left625 .dot{
+  border-radius: 100%;
+  width: 5px;
+  height: 5px;
+  border: 1px solid var(--green-600);
+  background-color: var(--green-600);
+  margin-left: 5px;
+  margin-right: 12px;
+}
+
+.content-left s-icon-mat.iconPerson , .content-selected-left625 s-icon-mat.iconPerson{
+  margin: 0 6px;
+  color: var(--primary-600);
+}
+
+.content-left .content-avatar625 , .content-selected-left625 .content-avatar625{
+  margin: 0 6px;
+}
+
+.select-options .content-select-option-main {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 14px;
+  color: var(--secondary-600);
+}
+
+.select-options .content-select-option-main.sm {
+  height: 26px;
+  font-size: 0.9rem;
+}
+
+.select-options .content-select-option-main.md {
+  height: 40px;
+  font-size: 1rem;
+}
+
+.content-select-option-main .content-left{
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  margin-right: 8px;
+}
+
+.content-select-option-main .content-center {
+  width: 100%;
+}
+
+.content-right {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  margin-left: 8px;
+  color: var(--primary-600);
+}
+
+.content-right s-icon-mat span{
+  font-size: 1.2rem;
+}
+
+.content-left s-icon-mat span{
+  font-size: 1.3rem;
+}
+
+.content-left s-icon-mat.iconPerson {
+  height: 20px;
+}
+
+.content-selected-left625{
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-right: 8px;
+}
+
+.content-selected-right625{
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-left: 8px;
+    color: var(--primary-600);
+}
+}
+
+//DISABLED
+.select-container909-disabled-active{
+  .select-main-content{
+    background-color: var(--neutrals-1100);
+    border: 1px solid var(--neutrals-900) !important;
+    color: var(--neutrals-700) !important;
+    .dot{
+      background-color: var(--neutrals-700)!important;
+      border: 1px solid var(--neutrals-700)!important;
+      s-icon-mat{
+        span{
+          color: var(--neutrals-1200)
+        }
+      }
+    }
+    .dot-content{
+      background-color: var(--neutrals-700)!important;
+      border: var(--neutrals-700)!important;
+      s-icon-mat{
+        span{
+          color: var(--neutrals-1200)!important;
+        }
+      }
+    }
+    s-icon-mat{
+      span{
+        color: var(--neutrals-700) !important;
+      }
+    }
+  }
+}

package/src/lib/select/select-simple/s-select-simple.component.ts

@@ -0,0 +1,118 @@
+import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit, forwardRef, HostListener } from "@angular/core";
+import { SSelectSimpleModel } from "../s-select-model"
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+    selector: 's-select-simple',
+    templateUrl: './s-select-simple.component.html',
+    styleUrls: ['./s-select-simple.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    providers: [
+    {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: forwardRef(() => SSelectSimpleComponent),
+        multi: true
+    }
+    ]
+})
+export class SSelectSimpleComponent implements OnInit , ControlValueAccessor{
+
+    onChange = (_: any) => { };
+    onTouch = () => { };
+
+    @Input() disabled: boolean = false;
+    @Input() placeholder: string = '';
+    @Input() options!: SSelectSimpleModel[];
+    @Input() selectedValue?: any;
+    @Input() selectLabel: string = '';
+    @Input() readOnly: boolean = false;
+    @Input()
+    get display(): string { return this._display; }
+    set display(val: string) {
+        this._display = ['dot', 'iconperson', 'profile'].indexOf(val) != -1 ? val : undefined;
+    };
+    @Input() size: 'sm' | 'md' = 'md';
+    
+    @Output() selectEvent = new EventEmitter<SSelectSimpleModel>();
+    
+    disabledstyle: string = '';
+    isOpen: boolean = false;
+    activeIndex: number = 0;
+    _display: any = undefined
+    value: any = undefined
+    clickInside: boolean = false;
+
+    constructor() {}
+    
+    ngOnInit(): void {
+        
+        this.selectIndex();
+
+        if (this.disabled && !this.readOnly) {
+            this.disabledstyle = "disabled-active"
+        }
+
+        if (this.readOnly) {
+            this.disabled = true
+        }
+    }
+
+    async selectIndex(){
+        if (this.selectedValue) {
+            for (let index = 0; index < this.options.length; index++) {
+                if (this.options[index].value == this.selectedValue) {
+                    this.activeIndex = index;
+                    this.value = this.options[index]
+                    break;
+                }
+            }
+        } else {
+            this.activeIndex = 1;
+        }
+    }
+
+    openDropDown() {
+        if(!this.disabled){
+            this.selectIndex();
+            this.isOpen = !this.isOpen;
+        }
+    }
+
+    getSelectedValue(e: SSelectSimpleModel) {
+        this.isOpen = !this.isOpen;
+        this.activeIndex = this.options?.indexOf(e);
+        this.selectedValue = e.value;
+        this.value = e;
+        this.onTouch();
+        this.onChange(this.value);
+        this.selectEvent.emit(this.value);
+    }
+
+    async writeValue(value: any): Promise<void> {
+        this.selectedValue = value;
+        await this.selectIndex()
+        this.onTouch();
+        this.onChange(this.value);
+    }
+    
+    registerOnChange(fn: any): void {
+        this.onChange = fn;
+    }
+    
+    registerOnTouched(fn: any): void {
+        this.onTouch = fn;
+    }
+
+    //EVENTOS PARA DETECTAR CLICK FUERA Y CERRAR EL SELECT
+    @HostListener("click")
+    clicked() {
+        this.clickInside = true;
+    }
+    @HostListener("document:click")
+    clickedOut() {
+        if(this.isOpen && !this.clickInside){
+            this.isOpen = false
+        }
+        this.clickInside = false;
+    }
+}

package/src/lib/shared/image-loader.directive.ts

@@ -0,0 +1,28 @@
+import { Directive, ElementRef, Renderer2, OnInit } from '@angular/core';
+
+@Directive({
+    selector: 'img[appImageLoader]'
+})
+export class ImageLoaderDirective implements OnInit {
+    private readonly loadingClass = 'skeleton-loading';
+
+    constructor(private el: ElementRef, private renderer: Renderer2) { }
+
+    ngOnInit(): void {
+        this.showLoadingSkeleton();
+
+        const imgElement: HTMLImageElement = this.el.nativeElement;
+        imgElement.addEventListener('load', () => {
+        this.hideLoadingSkeleton();
+        });
+    }
+
+    private showLoadingSkeleton(): void {
+        this.renderer.addClass(this.el.nativeElement, this.loadingClass);
+    }
+
+    private hideLoadingSkeleton(): void {
+        this.renderer.removeClass(this.el.nativeElement, this.loadingClass);
+    }
+}
+

package/src/lib/shared/localstorage.service.ts

@@ -0,0 +1,64 @@
+import { EventEmitter, Injectable, Output } from '@angular/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class LocalstorageService {
+
+    @Output() refreshLocalStorage = new EventEmitter<any>();
+
+constructor() {}
+
+    //GUARDA UN ITEM
+    saveItem( key: string , data: any) {
+        if (typeof data === 'string'){
+            localStorage.setItem(key, data);
+        } else {
+            localStorage.setItem(key, JSON.stringify(data));
+        }
+        this.refreshLocalStorage.emit()
+    }
+
+    //OBTIENE UN ITEM JSON
+    getItem( key: string ) {
+        const data = localStorage.getItem(key);
+        if (data && data !== 'undefined') {
+            return JSON.parse(data);
+        } else {
+            return null;
+        }
+    }
+
+    //OBTIENE UN STRING ITEM
+    getStringItem( key: string ): any  {
+        const data = localStorage.getItem(key);
+        if (data && data !== 'undefined') {
+            if (typeof data === 'string') {
+                return data;
+            }
+        } else {
+            return null;
+        }
+    }
+
+    //ELIMINA UN ITEM
+    deleteItem(key: string){
+        localStorage.removeItem(key);
+    }
+
+    //ELIMINA UN ARRAY [] DE ITEMS
+    deleteItems(keys: any[]){
+        keys.forEach((key:any) => {
+        localStorage.removeItem(key);
+        });
+    }
+
+    //RESET LOCAL STORAGE
+    clearAll() {
+        localStorage.clear();
+    }
+}
+
+
+
+

package/src/lib/shared/shared.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ImageLoaderDirective } from './image-loader.directive';
+
+
+@NgModule({
+  declarations: [
+    ImageLoaderDirective
+  ],
+  imports: [
+    CommonModule,
+  ],
+  exports: [
+    ImageLoaderDirective,
+  ]
+})
+export class SharedModule { }

package/{lib/sidebar/index.d.ts → src/lib/sidebar/index.ts}

@@ -1,3 +1,3 @@
 export * from './s-sidebar.module';
 export * from './s-sidebar.component';
-export * from './s-sidebar-model';
+export * from './s-sidebar-model';

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

@@ -0,0 +1,19 @@
+export declare class SMenuItem {
+    title?: string; //Titulo del Item que mostrara el menu.
+    link?: string; //Link a donde debe dirigir el item al ser clickeado.
+    icon?: string; //Icono que muestra al lado derecho del title.
+    expanded?: boolean; //Muestra expandida la opcion por defecto.
+    children?: SMenuItem[]; //Array con Items hijos del menu.
+    hidden?: boolean; //Oculta el Item del menu.
+    badge?: string; //Componente Badge que se agrega al menu.
+    badgeType?:string //Estilo del componente Badge.
+    dot?: boolean; //Adorno con forma de circulo.
+    separate?: boolean; //Define si va un espacio para separar.
+    separateText?: string; //Define el label del espacio separador.
+    // url?: string;
+    // target?: string;
+    // group?: boolean;
+    // skipLocationChange?: boolean;
+    // selected?: boolean;
+    // navigate?: boolean;
+}

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

@@ -0,0 +1,63 @@
+<div class="s-sidebar content-ul44" [ngClass]="[
+    theme ? 'theme-' + theme : '',
+    expand ? 'sidebar-open44' : 'sidebar-close44']">
+
+    <ul class="menu-ul44 s-scroll">
+        <ng-container *ngFor="let item of menu; index as i">
+            <!-- Cuando es separate -->
+            <div *ngIf="item.separate && item.separateText" class="content-line-separate440">
+                <div class="line-separate440"></div>
+                <div class="text-separate440">
+                    {{item.separateText}}
+                </div>
+            </div>
+            <!-- Cuando NO tiene hijos esta visible y no es separate -->
+            <li *ngIf="!item.hidden && !item.separate && !item.children" title="{{item.title}}">
+                <a *ngIf="item.link" [routerLink]="item.link" routerLinkActive="active44">
+                    <div *ngIf="item.dot == null || item.dot == true" class="dot44"></div>
+                    <s-icon-mat size="22" *ngIf="item.icon" class="icon-menu44">{{item.icon}}</s-icon-mat>
+                    <span class="menu-title44">{{item.title}}</span>
+                </a>
+                <a *ngIf="!item.link">
+                    <s-icon-mat size="22" *ngIf="item.icon" class="icon-menu44">{{item.icon}}</s-icon-mat>
+                    <span class="menu-title44">{{item.title}}</span>
+                </a>
+            </li>
+            <!-- Cuando SI tiene hijos esta visible y no es separate -->
+            <li *ngIf="!item.hidden && !item.separate && item.children" title="{{item.title}}" (click)="clickParent(item)"
+                class="{{item.expanded ? 'item-open44' : 'item-close44'}}">
+                <a *ngIf="item.link" [routerLink]="item.link" routerLinkActive="active44">
+                    <s-icon-mat size="22" *ngIf="item.icon" class="icon-menu44">{{item.icon}}</s-icon-mat>
+                    <span class="menu-title44">{{item.title}}</span>
+                    <s-icon-mat *ngIf="item.children && item.children.length > 0"
+                        class="arrow44 {{item.expanded ? 'arrow-open44' : 'arrow-close44'}}">keyboard_arrow_down</s-icon-mat>
+                </a>
+                <a *ngIf="!item.link">
+                    <s-icon-mat size="22" *ngIf="item.icon" class="icon-menu44">{{item.icon}}</s-icon-mat>
+                    <span class="menu-title44">{{item.title}}</span>
+                    <s-icon-mat *ngIf="item.children && item.children.length > 0"
+                        class="arrow44 {{item.expanded ? 'arrow-open44' : 'arrow-close44'}}">keyboard_arrow_down</s-icon-mat>
+                </a>
+            </li>
+            <ul *ngIf="item.children && !item.hidden && !item.separate"
+                class="menu-ul44 {{item.expanded ? 'open44' : 'close44'}}">
+                <ng-container *ngFor="let itemChildren of item.children">
+                    <li *ngIf="!itemChildren.hidden">
+                        <a routerLink="{{itemChildren.link ? itemChildren.link : undefined}}"
+                            routerLinkActive="active44">
+                            <div *ngIf="itemChildren.dot == null || itemChildren.dot == true" class="dot44"></div>
+                            <s-icon-mat *ngIf="itemChildren.icon" class="icon-menu44">{{itemChildren.icon}}</s-icon-mat>
+                            <span class="menu-title44">{{itemChildren.title}}</span>
+                            <s-badge *ngIf="itemChildren.badge"
+                                type="{{itemChildren.badgeType ? itemChildren.badgeType : 'secondary'}}">{{itemChildren.badge}}</s-badge>
+                        </a>
+                    </li>
+                </ng-container>
+            </ul>
+        </ng-container>
+    </ul>
+</div>
+
+<div class="no-select button-menu44 {{expand ? 'sidebar-open44' : 'sidebar-close44'}}" (click)="toogleMenu($event)">
+    <s-icon-mat>chevron_right</s-icon-mat>
+</div>