sidesys-generic-ui 0.0.19 → 0.0.21

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

@@ -0,0 +1,34 @@
+<nav class="s-navbar" [ngClass]="theme ? 'theme-'+theme : ''">
+    <div class="s-navbar__content-left">
+        <ng-container *ngIf="link">
+            <a [href]="linkHref">
+                <s-company-logo [height]="height" [width]="width" [customImage]="customImage" class="s-navbar__company-box"></s-company-logo>
+            </a>
+        </ng-container>
+        <ng-container *ngIf="!link">
+            <s-company-logo [height]="height" [width]="width" [customImage]="customImage" class="s-navbar__company-box"></s-company-logo>
+        </ng-container>
+        
+    </div>
+    <div class="s-navbar__content-right">
+        <s-menu-main [menuMain]="menu"></s-menu-main>
+        <div class="s-navbar__right-menu-content">
+            <div class="s-navbar__icon-menu-list">
+                <s-icon-menu (clickTitle)="_clickTitle($event)" (clickDelete)="_clickDelete($event)" (clickUnread)="_clickUnread($event)" [iconMenu]="iconMenu"></s-icon-menu>
+            </div>
+            <div class="s-navbar__content-user" [ngClass]="theme ? 'theme-'+theme : ''">
+                <s-profile-group class="cursor" *ngIf="user && userFull" [user]="user" (click)="toogleMenuProfile($event)"></s-profile-group>
+                <s-avatar class="cursor"
+                    *ngIf="user && !userFull" 
+                    urlProfileImage="{{user.url}}" 
+                    letters="{{user.letters}}"
+                    display="{{user.display}}" 
+                    size="32" status="{{user.status}}"
+                    (click)="toogleMenuProfile($event)"></s-avatar>
+                </div>
+                <div class="s-navbar__content-submenu-profile" *ngIf="controlMenuProfile">
+                    <s-sub-menu [menu]="menuProfile" (click)="clickMenuProfile($event)" (closeMenuEvent)="closeMenuProfile($event)"></s-sub-menu>
+                </div>
+        </div>
+    </div>
+</nav>

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

@@ -0,0 +1,92 @@
+.s-navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    background: var(--neutrals-1100);
+    color: var(--text);
+    border-bottom: 1px solid rgb(9 30 66 / 25%);
+
+    &__company-box {
+        display: flex;
+        line-height: 0;
+        min-width: 240px;
+        justify-content: center;
+    }
+
+    &__menu-icon {
+        display: flex;
+        margin: 0 10px 0 10px;
+        color: var(--text);
+    }
+
+    &__right-menu-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__content-user {
+        display: flex;
+        justify-content: center;
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+
+    &__icon-menu-list {
+        display: flex;
+        justify-content: center;
+    }
+
+    &__content-submenu-profile {
+        z-index: 1;
+        position: absolute;
+        top: 58px;
+        width: auto;
+        min-width: 190px;
+        right: 4px;
+    }
+
+    &__content-right {
+        display: flex;
+        align-items: center;
+        flex-grow: 9;
+        justify-content: space-between;
+        flex-direction: row;
+    }
+
+    &__content-left {
+        display: flex;
+        justify-content: center;
+    }
+
+    &__content-user {
+        margin-right: 2rem;
+        s-profile-group {
+            .content-profile-group976 {
+
+                .content-left976 p,
+                .content-left976 span {
+                    cursor: pointer;
+                }
+            }
+        }
+        &.theme-dark {
+            s-profile-group {
+                .content-profile-group976 {
+                    .content-left976 {
+
+                        .name976,
+                        .email976 {
+                            color: var(--neutrals-1200) !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &.theme-dark {
+        background: var(--primary-900);
+    }
+}

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

@@ -0,0 +1,72 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { SMenuMain } from './components/menu-main';
+import { SSubMenu, SUser } from '../sub-menu/s-sub-menu-model';
+import { SIconMenuModel } from './components/icon-menu';
+
+
+@Component({
+  selector: 's-navbar',
+  templateUrl: './s-navbar.component.html',
+  styleUrls: ['./s-navbar.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SNavbarComponent implements OnInit {
+
+  @Input() user: SUser = {};
+  @Input() userFull: boolean = false;
+  @Input() menuProfile!: SSubMenu;
+  @Input() menu: SMenuMain[] = [];
+  @Input() showProfile: boolean = true;
+  @Input() company: string = '';
+  @Input() theme?: string;
+  @Input() customImage?: string;
+  @Input() link?: boolean = false;
+  @Input() linkHref?: string;
+  @Input() height?: number;
+  @Input() width: number = 100;
+  @Input() iconMenu: SIconMenuModel[] = [];
+
+  @Output() clickEvent = new EventEmitter<string>();
+  @Output() clickEventMenu = new EventEmitter<Event>();
+
+  @Output() clickUnread = new EventEmitter<Event>();
+  @Output() clickDelete = new EventEmitter<Event>();
+  @Output() clickTitle = new EventEmitter<Event>();
+
+  controlMenuProfile: boolean = false;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  toogleMenuProfile(event: Event) {
+    this.controlMenuProfile = !this.controlMenuProfile
+    this.clickEventMenu.next(event);
+  }
+
+  closeMenuProfile(event: Event){
+    this.controlMenuProfile = false
+    this.clickEventMenu.next(event);
+  }
+
+  clickMenuProfile(event: any) {
+    if (event.target.type !== 'checkbox' && event.target.type !== 'radio') {
+      this.controlMenuProfile = !this.controlMenuProfile
+    }
+    this.clickEvent.next(event);
+  }
+
+  _clickUnread(id:any){
+    this.clickUnread.emit(id);
+  }
+
+  _clickDelete(id:any){
+    this.clickDelete.emit(id);
+  }
+
+  _clickTitle(id:any){
+    this.clickTitle.emit(id);
+  }
+
+}

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

@@ -0,0 +1,35 @@
+import { NgModule , CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SNavbarComponent } from './s-navbar.component';
+import { SIconModule } from '../icon/s-icon.module';
+import { SIconMaterialModule } from '../icon-material/s-icon-material.module';
+import { SCompanyLogoModule } from '../company-logo/s-company-logo.module'
+import { SMenuMainModule } from './components/menu-main';
+import { SMenuConfigModule } from './components/menu-config';
+import { SSearchMenuModule } from './components/search-menu';
+import { SAvatarModule } from '../avatar';
+import { SSubMenuModule } from '../sub-menu';
+import { SIconMenuModule } from './components/icon-menu';
+import { SProfileGroupModule } from '../avatar/components/profile-group';
+
+@NgModule({
+  declarations: [
+    SNavbarComponent
+  ],
+  imports: [
+    CommonModule,
+    SIconModule,
+    SCompanyLogoModule,
+    SIconMaterialModule,
+    SMenuMainModule,
+    SMenuConfigModule,
+    SSearchMenuModule,
+    SAvatarModule,
+    SSubMenuModule,
+    SIconMenuModule,
+    SProfileGroupModule
+  ],
+  exports: [SNavbarComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class SNavbarModule { }

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

@@ -1,3 +1,3 @@
 export * from './s-pagination.component';
 export * from './s-pagination.module';
-export * from './new/s-pag.component';
+export * from './new/s-pag.component';

package/src/lib/pagination/new/s-pag-model.ts

@@ -0,0 +1,4 @@
+export class SPaginationModel {
+    pageSize: number = 0;
+    startIndex: number = 0;
+}

package/src/lib/pagination/new/s-pag.component.html

@@ -0,0 +1,27 @@
+<div [ngClass]="pageSizes? 'pagination-bar-select' : 'pagination-bar'">
+    <div class="items">
+        <select *ngIf="pageSizes" (change)="selectPagination($event)" class="select-pagination">
+            <option *ngFor="let o of pageSizes, let i = index" [value]="o.key" [selected]="i == 0">{{o.value}}</option>
+        </select>
+        <p class="s-body-2 text" *ngIf="totalItems > pageSize">Mostrando {{startResults}} a {{endResults}} de
+            {{totalItems}} ítems.</p>
+        <p class="s-body-2 text" *ngIf="totalItems <= pageSize">Mostrando {{totalItems}} ítems.</p>
+    </div>
+    <div class="pageSize > 1">
+        <s-icon-mat class="cursor" *ngIf="pageNumber > 1" (click)="previous()"
+            style="display: flex;">keyboard_arrow_left</s-icon-mat>
+        <p *ngIf="pageNumber > 1" class="page" (click)="pageSelection(1)">1</p>
+        <p *ngIf="previousPage > 2 && totalPages > 2" class="page points">...</p>
+        <p *ngIf="previousPage >= 2" class="page" (click)="pageSelection(previousPage)">{{previousPage}}</p>
+        <s-button [pill]="true">
+            <label>{{pageNumber}}</label>
+        </s-button>
+        <p *ngIf="nextPage > 1 && pageNumber !== totalPages" class="page" (click)="pageSelection(nextPage)">{{nextPage}}
+        </p>
+        <p *ngIf="totalPages !== nextPage +1 && pageNumber !== totalPages && totalPages > 2" class="page points">...</p>
+        <p *ngIf="totalPages !== nextPage && pageNumber !== totalPages" class="page"
+            (click)="pageSelection(totalPages)">{{totalPages}}</p>
+        <s-icon-mat class="cursor" *ngIf="pageNumber < totalPages" (click)="next()"
+            style="display: flex;">keyboard_arrow_right</s-icon-mat>
+    </div>
+</div>

package/src/lib/pagination/new/s-pag.component.scss

@@ -0,0 +1,63 @@
+.pagination-bar {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.pagination-bar-select {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.items {
+    display: flex;
+    .select-pagination {
+        margin-right: 2rem;
+    }
+    .text {
+        color: var(--secondary-500);
+        margin: 0;
+        margin-right: 2rem;
+        display: flex;
+        align-items: center;
+    }
+}
+
+select {
+    background: var(--neutrals-1100) !important;
+    font-size: 0.875rem !important;
+    font-weight: 700;
+    border-radius: none;
+    width: auto;
+    color: var(--secondary-600);
+    border: none;
+    outline: none;
+    height: 2rem;
+    padding: 0 10px;
+    cursor: pointer;
+}
+
+.pagination {
+    display: flex;
+}
+
+button {
+    height: 2rem;
+}
+
+.pageSize {
+    display: flex;
+    align-items: center;
+    .page {
+        margin: 0 0.8rem 0 0.8rem;
+        color: var(--secondary-600);
+        font-weight: 700;
+        font-size: 0.875rem !important;
+        cursor: pointer;
+    }
+    .points {
+        margin-top: -0.5rem;
+        font-size: 1rem !important;
+    }
+}

package/src/lib/pagination/new/s-pag.component.ts

@@ -0,0 +1,99 @@
+import { Component, Input, OnInit, Output } from "@angular/core";
+import { EventEmitter } from "@angular/core";
+import { SSelectModel } from "../../select";
+import { SPaginationModel } from "./s-pag-model";
+
+@Component({
+  selector: 's-pag',
+  templateUrl: './s-pag.component.html',
+  styleUrls: ['./s-pag.component.scss']
+})
+export class SPagComponent implements OnInit {
+
+  pageSizesDefault: SSelectModel[] = [
+    { key: '10', value: '10 ítems' },
+    { key: '15', value: '15 ítems' },
+    { key: '20', value: '20 ítems' },
+    { key: '25', value: '25 ítems' },
+  ]
+
+  @Input() pageNumber: number = 0;
+  @Input() totalItems: number = 1; //Resultados totales
+  @Input() pageSize: number = 10;
+  @Input() pageSizes?: SSelectModel[];
+  @Output() pageEmitter: EventEmitter<number> = new EventEmitter();
+  @Output() paginationEmitter: EventEmitter<SPaginationModel> = new EventEmitter();
+
+  startIndex: number = 0;
+  totalPages: number = 0;
+  startResults: number = 0;
+  endResults: number = 0;
+
+  previousPage: number = 0;
+  nextPage: number = 0;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    if (this.pageSizes) {
+      this.pageSize = Number(this.pageSizes[0].key);
+    }
+    this.setPagination();
+  }
+
+  setPagination() {
+    if (this.pageSizes && this.pageSizes.length > 0) {
+      this.pageSize = parseInt(this.pageSizes[0].key as string) ?? 10;
+    }
+    //Calcula el total de páginas
+    this.totalPages = Math.ceil(this.totalItems / this.pageSize);
+    this.startIndex = (this.pageNumber - 1) * this.pageSize;
+    this.setResultsRange();
+    this.setPages();
+  }
+
+  setResultsRange() {
+    this.startResults = (this.pageNumber - 1) * this.pageSize + 1;
+    const results = this.startResults + this.pageSize - 1;
+    this.endResults = (results > this.totalItems) ? this.totalItems : results;
+  }
+
+  next() {
+    this.pageNumber++;
+    this.setPage();
+  }
+
+  previous() {
+    this.pageNumber--;
+    this.setPage();
+  }
+
+  setPage() {
+    this.pageSelection(this.pageNumber);
+    this.setPages();
+  }
+
+  setPages(){
+    this.previousPage = this.pageNumber - 1;
+    this.nextPage = this.pageNumber + 1;
+  }
+
+  pageSelection(page: number) {
+    this.pageNumber = page;
+    this.pageEmitter.emit(this.pageNumber);
+    this.setPagination();
+  }
+
+  selectPagination(event: any) {
+    this.pageSize = Number(event.target.value);
+    this.pageNumber = 1; // reset page
+    this.setPagination();
+    let pagination: SPaginationModel = {
+      pageSize: this.pageSize,
+      startIndex: this.startIndex
+    }
+    this.paginationEmitter.emit(pagination)
+  }
+
+}
+

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

@@ -0,0 +1,6 @@
+
+<ul *ngIf="pagination.pages && pagination.pages.length > 0" class="pagination-list">
+  <li *ngFor="let page of pagination.pages">
+    <div [class.is-current]="pagination.currentPage === page" aria-label="Goto page 1" (click)="setPage(page)">{{ page }}</div>
+  </li>
+</ul>

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

@@ -0,0 +1,15 @@
+ul {
+  display: flex;
+  text-align: center;
+}
+ul li {
+  display: inline;
+  padding: 0.2rem;
+  cursor: default;
+  width: 30px;
+}
+
+.is-current {
+  background: var(--primary-600);
+  color: var(--neutrals-500);
+}

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

@@ -0,0 +1,79 @@
+import { Component, Input, OnInit, Output } from "@angular/core";
+import { EventEmitter } from "@angular/core";
+
+@Component({
+  selector: 's-pagination',
+  templateUrl: './s-pagination.component.html',
+  styleUrls: ['./s-pagination.component.scss']
+})
+export class SPaginationComponent implements OnInit {
+  @Input() totalCount: number = 10;
+  @Input() pageSize: number = 10;
+  @Input() pageNumber: number = 1;
+  @Output() getEntries = new EventEmitter<any>();
+  pagination: any = {};
+  pagedItems: any[] = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.setPage(this.pageNumber, false);
+  }
+
+  setPage(page: number, emit: boolean = true) {
+    if (page < 1 || page > this.pagination.totalPages) {
+      return;
+    }
+
+    this.pagination = this.getPagination(this.totalCount, page, this.pageSize);
+    if (emit) {
+      this.getEntries.emit(this.pagination);
+    }
+  }
+
+  getPagination(totalItems: number, currentPage: number = 1, pageSize: number = 10) {
+    // Se calcula el total de páginas
+    let totalPages = Math.ceil(totalItems / pageSize);
+    let pages = [];
+
+    let startPage: number, endPage: number;
+
+    if (totalPages <= 10) {
+      startPage = 1;
+      endPage = totalPages;
+    } else {
+      if (currentPage <= 6) {
+        startPage = 1;
+        endPage = 10;
+      } else if (currentPage + 4 >= totalPages) {
+        startPage = totalPages - 9;
+        endPage = totalPages;
+      } else {
+        startPage = currentPage - 5;
+        endPage = currentPage + 4;
+      }
+    }
+
+    // Se calculan los índices
+    let startIndex = (currentPage - 1) * pageSize;
+    let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
+
+    // Se arma la cantidad de páginas para mostrar en el paginador
+    for (let index = startPage; index < endPage + 1; index++) {
+      pages.push(index);
+    }
+
+    // Se retorna un objeto con la configuración del paginador
+    return {
+      totalItems: totalItems,
+      currentPage: currentPage,
+      pageSize: pageSize,
+      totalPages: totalPages,
+      startPage: startPage,
+      endPage: endPage,
+      startIndex: startIndex,
+      endIndex: endIndex,
+      pages: pages
+    };
+  }
+}

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

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SPaginationComponent } from './s-pagination.component';
+import { SPagComponent } from './new/s-pag.component';
+import { SButtonModule } from '../button';
+import { SIconMaterialModule } from '../icon-material';
+import { SSelectModule } from '../select';
+
+
+@NgModule({
+  declarations: [
+    SPaginationComponent,
+    SPagComponent
+  ],
+  imports: [
+    CommonModule,
+    SButtonModule,
+    SIconMaterialModule,
+    SSelectModule
+  ],
+  exports: [
+    SPaginationComponent,
+    SPagComponent]
+})
+export class SPaginationModule { }

package/src/lib/popup/index.ts

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

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

@@ -0,0 +1,24 @@
+<div *ngIf="showPopup" class="popup324">
+    <div class="popup-card" [ngClass]="show70 ? 'show70' : ''" [ngStyle]="{'width' : this.width + 'px', 'height' : this.height + 'px' , 'left' : getCalcPopUp(this.width) , 'top' : getCalcPopUp(this.height)}">
+        <div class="popup-title {{type}}">
+            <div class="divisor">
+                <s-icon-mat *ngIf="iconCustom" class="icon-title mr-2 d-flex">{{iconCustomName}}</s-icon-mat>
+                <s-icon-mat *ngIf="iconType && !iconCustom" class="icon-title mr-2 d-flex">{{iconType}}</s-icon-mat>
+                <h4>{{title}}</h4>
+            </div>
+            <s-icon-mat class="popup-close" alt="close" (click)="close()">close</s-icon-mat>
+        </div>
+        <div>
+            <div class="popup-body {{borderBody? 'border-body': ''}}" [ngStyle]="{'height' : getCalcBody(this.height)  }">
+                <div class="padding-body">
+                    <ng-container *ngTemplateOutlet="body"></ng-container>
+                </div>
+            </div>
+            <div class="content-footer">
+                <div class="popup-footer">
+                    <ng-container *ngTemplateOutlet="footer"></ng-container>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>