sidesys-generic-ui 0.0.19 → 0.0.21

package/src/lib/navbar/components/icon-menu/s-icon-menu-model.ts

@@ -0,0 +1,21 @@
+export class SIconMenuModel {
+    icon?: string; //mat icon name
+    title?: string ; //Titulo
+    link?: string; //URL del link
+    target?: string; //Por si es un link externo
+    children?: SIconMenuModel[]; //Hijos
+    //Se agrega lo que vi que notification devuelve en carteleria
+    date?:string;
+    description?:string;
+    entityId?:string;
+    entityType?:string;
+    id?:number;
+    notificationType?:number
+    parameters?:string;
+    seen?:boolean;
+    subtitle?:string;
+    userId?:string;
+    hideme?:boolean;
+    unread?:number;
+    notification?: boolean;
+}

package/src/lib/navbar/components/icon-menu/s-icon-menu.component.html

@@ -0,0 +1,43 @@
+<div id="icon-menu512">
+    <ul class="icon-menu-main-ul">
+        <ng-container *ngFor="let item of iconMenu">
+            <li class="icon-menu-li">
+                <ng-container *ngIf="item.notification">
+                    <a (click)="clickSubMenu(item)" class="icon-menu-master cursor">
+                        <div *ngIf="item.unread" style="position: relative;">
+                            <div  class="content-badge">
+                                <s-badge size="xs" type="red" *ngIf="item.unread > 99">+99</s-badge>
+                                <s-badge size="xs" type="red" *ngIf="item.unread < 99">{{item.unread}}</s-badge>
+                            </div>
+                        </div>
+                        <s-icon-mat class="icon-menu-icon cursor">{{item.icon}}</s-icon-mat>
+                    </a>
+                </ng-container>
+                <ng-container *ngIf="!item.notification && item.link">
+                    <a routerLink="{{item.link}}" (click)="closeSubMenu()" routerLinkActive="active" class="icon-menu-master">
+                        <s-icon-mat class="icon-menu-icon cursor">{{item.icon}}</s-icon-mat>
+                    </a>
+                </ng-container>
+
+                <div style="position: relative;">
+                    <div *ngIf="item.hideme" class="icon-menu-main-dropdown">
+                            <div class="content-notification">
+                                <div class="content-notification-header">
+                                    <div class="header-left">Notificaciones</div>
+                                    <div class="header-right">
+                                        <s-icon-mat>mark_email_read</s-icon-mat>
+                                    </div>
+                                </div>
+                                <ng-container *ngFor="let itemChildren of item.children">
+                                    <s-notification (clickTitle)="_clickTitle($event)" (clickDelete)="_clickDelete($event)" (clickUnread)="_clickUnread($event)" [item]="itemChildren"></s-notification>
+                                </ng-container>
+                                <div class="content-notification-footer">
+                                        <s-button (click)="closeSubMenu()" routerLink="{{item.link? item.link : null}}"  size="sm">Ver todas las notificaciones</s-button>
+                                </div>
+                            </div>
+                    </div>
+                </div>
+            </li>
+        </ng-container>
+    </ul>
+</div>

package/src/lib/navbar/components/icon-menu/s-icon-menu.component.scss

@@ -0,0 +1,95 @@
+#icon-menu512 {
+    text-align: center;
+    margin-right: auto;
+
+    .icon-menu-li{
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+    }
+
+    .content-badge{
+        position: absolute;
+        top: -9px;
+        left: 9px;
+        s-badge{
+            -webkit-user-select: auto; 
+            -o-user-select: auto;
+            user-select: auto ;
+            cursor:pointer;
+        }
+    }
+
+    .icon-menu-main-ul {
+        height: 56px;
+        display: flex;
+        align-items: center;
+        position: relative;
+        margin-right: 0.3rem;
+    }
+
+    .icon-menu-main-dropdown {
+        // display: none;
+        position: absolute;
+        right: 0;
+        z-index: 1;
+        min-width: 120px;
+        width: max-content;
+    }
+
+    .content-notification{
+        width: 380px;
+        background-color: var(--neutrals-1100);
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
+        border-bottom-left-radius: 6px;
+        border-bottom-right-radius: 6px;
+        box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+        .content-notification-header{
+            padding: 7px 22px 8px 12px;
+            height: 27px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .header-left{
+                font-size: 16px;
+                font-weight: 700;
+                color:var(--secondary-600)
+            }
+            .header-right{
+                s-icon-mat{
+                    span{
+                        color:var(--primary-600);
+                        font-size: 1rem;
+                    }
+                }
+            }
+        }
+        .content-notification-footer{
+            text-align: center;
+            height: 40px;
+            padding-top: 6px;
+            border-top: 0.5px solid var(--neutrals-700);
+            s-button{
+                button{
+                    width: calc(100% - 18px);
+                }
+            }
+        }
+    }
+
+    .icon-menu-icon span , .icon-menu-li a{
+        color: var(--secondary-600);
+        text-decoration: none;
+    }
+}
+
+.theme-dark{
+    #icon-menu512{
+        .icon-menu-icon span {
+            color: var(--neutrals-1200);
+            text-decoration: none;
+        }
+
+    }
+}
+

package/src/lib/navbar/components/icon-menu/s-icon-menu.component.ts

@@ -0,0 +1,65 @@
+import { Component, EventEmitter, HostListener, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { SIconMenuModel } from './s-icon-menu-model';
+
+@Component({
+  selector: 's-icon-menu',
+  templateUrl: './s-icon-menu.component.html',
+  styleUrls: ['./s-icon-menu.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SIconMenuComponent implements OnInit  {
+  
+  iconMenuVisible:boolean = false;
+    
+  @Input() iconMenu: SIconMenuModel[] = [];
+
+  @Output() clickUnread = new EventEmitter<Event>();
+  @Output() clickDelete = new EventEmitter<Event>();
+  @Output() clickTitle = new EventEmitter<Event>();
+  private clickInside: boolean = false;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  _clickTitle(id:any){
+    this.clickTitle.emit(id); 
+    this.closeSubMenu()
+  }
+
+  _clickUnread(id:any){
+    this.clickUnread.emit(id);
+  }
+
+  _clickDelete(id:any){
+    this.clickDelete.emit(id); 
+  }
+
+  clickSubMenu(item:any){
+    item.hideme = !item.hideme;
+  }
+
+  showSubMenu(item:any){
+    item.hideme = true;
+  }
+
+  closeSubMenu(){
+    this.iconMenu.forEach(function(obj:any) {
+      obj.hideme = false;
+    });
+  }
+
+  @HostListener("click")
+  clicked() {
+    this.clickInside = true;
+  }
+
+  @HostListener("document:click")
+  clickedOut() {
+    if(!this.clickInside)
+    this.closeSubMenu(); 
+    this.clickInside = false;
+  }
+
+}

package/src/lib/navbar/components/icon-menu/s-icon-menu.module.ts

@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SIconMenuComponent } from './s-icon-menu.component';
+import { SIconMaterialModule } from '../../../icon-material';
+import { RouterModule } from '@angular/router';
+import { SNotificationComponent } from './components/s-notificaction.component';
+import { SButtonModule } from '../../../button';
+import { STagModule } from '../../../tag';
+import { STooltipModule } from '../../../tooltip';
+import { SBadgeModule } from '../../../badge';
+
+
+@NgModule({
+  declarations: [
+    SIconMenuComponent,
+    SNotificationComponent
+  ],
+  imports: [
+    CommonModule,
+    SIconMaterialModule,
+    RouterModule,
+    SButtonModule,
+    STagModule,
+    STooltipModule,
+    SBadgeModule
+  ],
+  exports: [
+    SIconMenuComponent,
+    SNotificationComponent
+  ]
+})
+export class SIconMenuModule { }

package/{lib/navbar/components/menu-config/index.d.ts → src/lib/navbar/components/menu-config/index.ts}

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

package/src/lib/navbar/components/menu-config/s-menu-config-model.ts

@@ -0,0 +1,5 @@
+export class SMenuConfig {
+    user: string = '';
+    role: string = '';
+    logo: string = '';
+}

package/src/lib/navbar/components/menu-config/s-menu-config.component.html

@@ -0,0 +1 @@
+<div>Menu Config</div>

package/src/lib/navbar/components/menu-config/s-menu-config.component.ts

@@ -0,0 +1,34 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { SMenuConfig } from './s-menu-config-model';
+
+@Component({
+  selector: 's-menu-config',
+  templateUrl: './s-menu-config.component.html',
+  styleUrls: ['./s-menu-config.component.scss']
+})
+export class SMenuConfigComponent implements OnInit {
+
+  /**
+   * Usuario
+   */
+  @Input() user: SMenuConfig | null = null;
+  @Input() showProfile: boolean = true;
+  @Input() company: string = '';
+
+  @Output() clickEvent = new EventEmitter<string>();
+  @Output() clickEventMenu = new EventEmitter<Event>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onClickEvent(event: string) {
+    this.clickEvent.next(event);
+  }
+
+  onClickEventMenu(event: Event) {
+    this.clickEventMenu.next(event);
+  }
+
+}

package/src/lib/navbar/components/menu-config/s-menu-config.module.ts

@@ -0,0 +1,21 @@
+import { NgModule , CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SMenuConfigComponent } from './s-menu-config.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'
+
+@NgModule({
+  declarations: [
+    SMenuConfigComponent,
+  ],
+  imports: [
+    CommonModule,
+    SIconModule,
+    SCompanyLogoModule,
+    SIconMaterialModule
+  ],
+  exports: [SMenuConfigComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class SMenuConfigModule { }

package/{lib/navbar/components/menu-main/index.d.ts → src/lib/navbar/components/menu-main/index.ts}

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

package/src/lib/navbar/components/menu-main/s-menu-main-model.ts

@@ -0,0 +1,7 @@
+export class SMenuMain {
+    title?: string ; //Titulo
+    link?: string; //URL del link
+    target?: string; //Por si es un link externo
+    children?: SMenuMain[]; //Hijos
+    hidden?:boolean;
+}

package/src/lib/navbar/components/menu-main/s-menu-main.component.html

@@ -0,0 +1,34 @@
+<div id="menu-main512">
+    <ul class="menu-main-ul">
+        <ng-container *ngFor="let item of menuMain">
+            <li *ngIf="!item.hidden" title="{{item.title}}" class="menu-main-li">
+                
+                    <ng-container *ngIf="item.link != undefined;">
+                        <a routerLink="{{item.link? item.link : null}}" routerLinkActive="active" class="menu-main-master">
+                            <span class="menu-main-title">{{item.title}}
+                                <s-icon-mat *ngIf="item.children" class="s-mat-icon-chevron d-flex">chevron_right</s-icon-mat>
+                            </span>
+                        </a>
+                    </ng-container>
+                    <ng-container *ngIf="item.link == undefined;">
+                        <a routerLinkActive="active" class="menu-main-master">
+                            <span class="menu-main-title cursor">{{item.title}} 
+                                <s-icon-mat *ngIf="item.children" class="s-mat-icon-chevron d-flex">chevron_right</s-icon-mat>
+                            </span>
+                        </a>
+                    </ng-container>
+                
+                    <ul *ngIf="item.children && !item.hidden" class="menu-main-dropdown">
+                        <ng-container *ngFor="let itemChildren of item.children">
+                            <li *ngIf="!itemChildren.hidden">
+                                    <a routerLink="{{itemChildren.link ? itemChildren.link : null}}" routerLinkActive="active">
+                                        <span class="menu-main-title">{{itemChildren.title}}</span>
+                                    </a>
+                                </li>
+                        </ng-container>
+                    </ul>
+            </li>
+            
+        </ng-container>
+    </ul>
+</div>

package/src/lib/navbar/components/menu-main/s-menu-main.component.scss

@@ -0,0 +1,129 @@
+#menu-main512{
+    text-align: center;
+    margin-right: auto;
+    margin-left:20px;
+
+
+.menu-main-ul{
+    height: 56px;
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.menu-main-ul a{
+    height: 100%;
+    text-decoration: none;
+}
+
+.menu-main-ul li{
+    height: 100%;
+}
+
+.menu-main-ul li a{
+    display: flex;
+    height: 100%;
+    align-items: center;
+    margin: 0px 15px;
+    font-weight: 700;
+    font-size: 0.91rem;
+    letter-spacing: 0.1px;
+}
+
+.menu-main-title{
+    color: var(--secondary-600);
+    font-weight: 700;
+    padding: 0 5px;
+    display:flex;
+}
+
+.menu-main-ul li a.active{
+    border-bottom: 4px solid var(--primary-600);
+}
+
+.menu-main-dropdown{
+    display: none;
+    background-color: var(--neutrals-1100);
+    position: absolute;
+    top: 56px;
+    z-index: 1;
+    min-width: 120px;
+    width: max-content;
+}
+
+.menu-main-dropdown a {
+    padding: 13px 8px;
+}
+
+.menu-main-dropdown li{
+    margin: 0 !important;
+    font-size: 0.91rem;
+}
+
+.menu-main-dropdown li span{
+    font-size: 0.91rem;
+}
+
+.menu-main-dropdown li:hover{
+    background-color: var(--neutrals-1000);
+}
+
+.menu-main-li:hover{
+    .menu-main-dropdown{
+            display: block;
+    }
+}
+
+.s-mat-icon-chevron span{
+    color: var(--primary-600) !important;
+    font-size: 1.2rem !important;
+    font-weight: 500 !important;
+    transform:rotate(90deg);
+}
+
+.menu-main-title s-icon-mat{
+    padding-left: 2px;
+}
+
+}
+
+
+@media (max-width: 700px) {
+    
+    #menu-main512{
+        margin-left:0px;
+        .menu-main-ul .menu-main-li a{
+            margin: 0px 0px;
+        }
+    }
+}
+
+@media (max-width: 800px) {
+    #menu-main512{
+        margin-left:0px;
+        .menu-main-ul .menu-main-li a{
+            margin: 0px 4px;
+        }
+    }
+}
+
+@media (max-width: 700px) {
+    #menu-main512{
+        display: none;
+    }
+}
+
+
+.theme-dark{
+    #menu-main512{
+        .menu-main-title{
+            color: var(--neutrals-1200);
+        }
+        .menu-main-dropdown{
+            background: var(--primary-900)
+        }
+        .menu-main-dropdown li:hover{
+            background: var(--primary-500)
+        }
+    }
+}

package/src/lib/navbar/components/menu-main/s-menu-main.component.ts

@@ -0,0 +1,35 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { SMenuMain } from './s-menu-main-model';
+
+@Component({
+  selector: 's-menu-main',
+  templateUrl: './s-menu-main.component.html',
+  styleUrls: ['./s-menu-main.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SMenuMainComponent implements OnInit {
+
+  /**
+   * Usuario
+   */
+  @Input() menuMain: SMenuMain[] = [];
+  // @Input() showProfile: boolean = true;
+  // @Input() company: string = '';
+
+  // @Output() clickEvent = new EventEmitter<string>();
+  // @Output() clickEventMenu = new EventEmitter<Event>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  // onClickEvent(event: string) {
+  //   this.clickEvent.next(event);
+  // }
+
+  // onClickEventMenu(event: Event) {
+  //   this.clickEventMenu.next(event);
+  // }
+
+}

package/src/lib/navbar/components/menu-main/s-menu-main.module.ts

@@ -0,0 +1,23 @@
+import { NgModule , CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SMenuMainComponent } from './s-menu-main.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 { RouterModule } from '@angular/router';
+
+@NgModule({
+  declarations: [
+    SMenuMainComponent,
+  ],
+  imports: [
+    CommonModule,
+    SIconModule,
+    SCompanyLogoModule,
+    SIconMaterialModule,
+    RouterModule
+  ],
+  exports: [SMenuMainComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class SMenuMainModule { }

package/{lib/navbar/components/search-menu/index.d.ts → src/lib/navbar/components/search-menu/index.ts}

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

package/src/lib/navbar/components/search-menu/s-search-menu.component.html

@@ -0,0 +1 @@
+<div>Search menu</div>

package/src/lib/navbar/components/search-menu/s-search-menu.component.ts

@@ -0,0 +1,34 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+// import { SUserNavbar } from './s-search-menu-model';
+
+@Component({
+  selector: 's-search-menu',
+  templateUrl: './s-search-menu.component.html',
+  styleUrls: ['./s-search-menu.component.scss']
+})
+export class SSearchMenuComponent implements OnInit {
+
+  /**
+   * Usuario
+   */
+  // @Input() user: SUserNavbar | null = null;
+  @Input() showProfile: boolean = true;
+  @Input() company: string = '';
+
+  @Output() clickEvent = new EventEmitter<string>();
+  @Output() clickEventMenu = new EventEmitter<Event>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onClickEvent(event: string) {
+    this.clickEvent.next(event);
+  }
+
+  onClickEventMenu(event: Event) {
+    this.clickEventMenu.next(event);
+  }
+
+}

package/src/lib/navbar/components/search-menu/s-search-menu.module.ts

@@ -0,0 +1,19 @@
+import { NgModule , CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SSearchMenuComponent } from './s-search-menu.component';
+import { SIconModule } from '../../../icon/s-icon.module';
+import { SIconMaterialModule } from '../../../icon-material/s-icon-material.module';
+
+@NgModule({
+  declarations: [
+    SSearchMenuComponent,
+  ],
+  imports: [
+    CommonModule,
+    SIconModule,
+    SIconMaterialModule
+  ],
+  exports: [SSearchMenuComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class SSearchMenuModule { }

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

@@ -1,5 +1,8 @@
+// navbar
 export * from './s-navbar.component';
 export * from './s-navbar.module';
+
+// componentes hijos
 export * from './components/search-menu/index';
 export * from './components/menu-main/index';
 export * from './components/menu-config/index';