sidesys-generic-ui 0.0.19 → 0.0.21

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

@@ -0,0 +1,42 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 's-avatar',
+  templateUrl: './s-avatar.component.html',
+  styleUrls: ['./s-avatar.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+
+export class SAvatarComponent implements OnInit {
+
+
+  @Input() urlProfileImage?: string ;
+  @Input() letters?: string = 'NN';
+  @Input()
+  get status(): string { return this._status}
+  set status(val: any | undefined){
+    this._status = ['approved' , 'declined' , 'blocked' , 'online' , 'offline' , 'busy'].indexOf(val) != -1 ? val : undefined;
+  };
+  @Input()
+  get display(): string { return this._display; }
+  set display(val: string | undefined){
+    this._display = val ? ['icon', 'avatar', 'letters' ].indexOf(val) != -1 ? val : 'icon' : 'icon';
+  };
+  @Input()  
+  get size(): string { return this._size; }
+  set size(val: string){
+    this._size = ['128', '96', '48' , '32' , '24' , '16'].indexOf(val) != -1 ? val : '128';
+  };
+ 
+  _display: string = 'icon';
+  _size: string = '128';
+  _status: any = undefined;
+
+  constructor(){}
+
+  ngOnInit(): void {
+    if(this.letters)
+    this.letters = this.letters.substring(0, 2);
+  
+  }
+}

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

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SAvatarComponent } from './s-avatar.component';
+import { SIconMaterialModule } from '../icon-material';
+import { SharedModule } from '../shared/shared.module';
+
+
+@NgModule({
+  declarations: [
+    SAvatarComponent
+  ],
+  imports: [
+    CommonModule,
+    SIconMaterialModule,
+    SharedModule
+  ],
+  exports: [SAvatarComponent]
+})
+export class SAvatarModule { }

package/src/lib/badge/index.ts

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

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

@@ -0,0 +1,4 @@
+<span class="s-badge {{type}} {{size ? 'size-'+size : ''}}">
+    <s-icon-mat *ngIf="new">lens</s-icon-mat>
+    <ng-content></ng-content>
+</span>

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

@@ -0,0 +1,65 @@
+
+s-badge {
+    display:inline-flex;
+    cursor:default;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: -moz-none;
+    -o-user-select: none;
+    user-select: none;
+}
+
+s-badge s-icon-mat {
+    display: inline-flex;
+    margin-left:3px;
+    margin-left: -1px;
+    margin-right: 4px;
+}
+
+.s-badge {
+    padding: 0.23rem 0.47rem;
+    line-height: normal;
+    border-radius: 18px;
+    width: max-content;
+    display: inline-flex;
+    align-items: center;
+    margin: 2px 2px;
+    font-size: 0.77rem;
+    letter-spacing: 0.02rem;
+    color: var(--neutrals-1200);
+    background-color: var(--primary-600);
+
+    &.secondary {
+        background-color: var(--secondary-600);
+    }
+    
+    &.green {
+        background-color: var(--green-600);
+    }
+    
+    &.red {
+        background-color: var(--red-600);
+    }
+    
+    &.yellow {
+        background-color: var(--yellow-600);
+    }
+    
+    &.size-xs{
+        font-size: 0.53rem;
+        padding: 0.09rem 0.26rem;
+        s-icon-mat{
+            span{
+                font-size: 0.4rem;
+            }
+        }
+    }
+    
+    &.size-sm{
+        s-icon-mat{
+            span{
+                font-size: 0.5rem;
+            }
+        }
+    }
+}

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

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

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

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 's-badge',
+  templateUrl: './s-badge.component.html',
+  styleUrls: ['./s-badge.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+
+export class SBadgeComponent implements OnInit {
+  @Input() type: 'primary' | 'secondary' | 'green' | 'yellow' | 'red' | string = 'primary';
+  @Input() size: 'xs' | 'sm' = 'sm';
+  @Input() new: boolean = false;
+
+  constructor(){}
+
+  ngOnInit(): void {
+  }
+}

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

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SIconMaterialModule } from '../icon-material';
+import { SBadgeComponent } from './s-badge.component';
+
+@NgModule({
+  declarations: [
+    SBadgeComponent
+  ],
+  imports: [
+    CommonModule,
+    SIconMaterialModule,
+  ],
+  exports: [SBadgeComponent]
+})
+export class SBadgeModule { }

package/src/lib/blockquote/index.ts

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

package/src/lib/blockquote/s-blockquote.component.css

@@ -0,0 +1,24 @@
+.quote {
+    background: var(--primary-600);
+    border-radius: 1em;
+    padding: 0.5em;
+    margin: 1rem;
+    color: var(--secondary)
+  }
+  .quote figcaption,
+  .quote blockquote {
+    margin: 1em;
+  }
+
+.succes{
+    background: var(--green-600);
+}
+.error{
+    background: var(--red-600);
+}
+.warning{
+    background: var(--yellow-600);
+}
+.info{
+    background: var(--primary-600);
+}

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

@@ -0,0 +1,5 @@
+<figure class="quote">
+    <blockquote>
+    <ng-content></ng-content>
+    </blockquote>
+  </figure>

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

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

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

@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 's-blockquote',
+  templateUrl: './s-blockquote.component.html',
+  styleUrls: ['./s-blockquote.component.css']
+})
+
+export class SBlockquoteComponent implements OnInit { 
+
+  constructor(){}
+
+  ngOnInit(): void {
+    
+  
+  }
+}

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SBlockquoteComponent } from './s-blockquote.component';
+
+
+@NgModule({
+  declarations: [
+    SBlockquoteComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [SBlockquoteComponent]
+})
+export class SBlockquoteModule { }

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

@@ -1,2 +1,3 @@
 export * from './s-breadcrum.module';
 export * from './s-breadcrum.component';
+export * from './interface';

package/src/lib/breadcrum/interface/breadcrum-nav.interface.ts

@@ -0,0 +1,6 @@
+export interface BreadcrumNav {
+    title?: string;
+    routerLink?: string;
+    iconName?: string;
+    iconPosition?: 'left' | 'right';
+}

package/src/lib/breadcrum/interface/index.ts

@@ -0,0 +1 @@
+export * from './breadcrum-nav.interface';

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

@@ -0,0 +1,11 @@
+<div class="s-breadcrum mb-3">
+    <div class="s-breadcrum__content" *ngFor="let nv of nav ; index as i">
+        <div class="s-breadcrum__texts">
+            <a routerLink="{{nv.routerLink? nv.routerLink : undefined}}" [ngClass]="[nv.routerLink ? '' : 'disabled' , nv.iconPosition == 'left' ? 'float-right' : 'float-letf']">
+                <h4 [ngClass]="[getStateClass(i, nv), size === 'sm' ? 's-body-1' : '']">{{nv.title}}</h4>
+                <s-icon-mat *ngIf="nv.iconName" [ngClass]="[getStateClass(i, nv), size == 'sm'? 'icon-small' : '']" class="icon">{{nv.iconName}}</s-icon-mat>
+            </a>
+        </div>
+        <s-icon-mat class="s-breadcrum__arrow-icon" [ngClass]="[getIconClass(i)]" *ngIf="i < nav.length -1">keyboard_arrow_right</s-icon-mat>
+    </div>
+</div>

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

@@ -0,0 +1,89 @@
+.s-breadcrum {
+    color: var(--text);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: fit-content;
+    font-weight: normal;
+
+    &__content {
+        display: flex;
+        align-items: center;
+    }
+
+    &__arrow-icon {
+        font-size: 1rem;
+        display: flex;
+        padding-top: 1px;
+        padding: 0 0.4rem 0 0.4rem;
+    }
+    
+    &__arrow-icon.icon-active {
+        color: var(--secondary-600) !important;
+    }
+
+    &__arrow-icon.icon-default {
+        color: var(--secondary-400) !important;
+    }
+
+    &__texts {
+        a {
+            display: flex;
+            align-items: center;
+            text-decoration: none;
+            color: var(--secondary-400);
+
+            .breadcrum-back-not-link {
+                color: var(--secondary-400);
+                font-weight: 400;
+            }
+
+            .breadcrum-back {
+                color: var(--secondary-600);
+                font-weight: 400;
+            }
+
+            .breadcrum-back:hover {
+                color: var(--secondary-800);
+            }
+
+            h4.breadcrum-back:hover {
+                text-decoration: underline;
+            }
+
+            .breadcrum-active {
+                font-weight: 700;
+                color: var(--secondary-600);
+            }
+
+            .icon {
+                font-size: 1rem;
+                display: flex;
+                padding: 0 0.4rem 0 0.4rem;
+            }
+        }
+    }
+
+    &__texts:hover {
+        color: var(--secondary-600);
+    }
+
+    .float-letf {
+        flex-direction: row-reverse;
+    }
+
+    .float-right {
+        flex-direction: row;
+    }
+
+    a.disabled {
+        color: var(--secondary-600);
+        pointer-events: none;
+        cursor: default;
+    }
+
+    .icon-small {
+        line-height: inherit !important;
+    }
+
+}

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

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

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

@@ -0,0 +1,27 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { BreadcrumNav } from './interface/breadcrum-nav.interface';
+
+@Component({
+  selector: 's-breadcrum',
+  templateUrl: './s-breadcrum.component.html',
+  styleUrls: ['./s-breadcrum.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+
+export class SBreadcrumComponent {
+  @Input() nav!: BreadcrumNav[];
+  @Input() size = 'lg';
+
+  getStateClass(i: number, nav: BreadcrumNav): string {
+    const isLastNavItem = i === this.nav.length - 1;
+    if (!isLastNavItem) {
+      return nav.routerLink ? 'breadcrum-back' : 'breadcrum-back-not-link';
+    }
+    return 'breadcrum-active';
+  }
+
+  getIconClass(i: number): string {
+    let next = i + 1;    
+    return next === this.nav.length - 1 ? 'icon-active' : 'icon-default';
+  }
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SBreadcrumComponent } from './s-breadcrum.component';
+import { SIconMaterialModule } from '../icon-material';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  declarations: [
+    SBreadcrumComponent
+  ],
+  imports: [
+    CommonModule,
+    SIconMaterialModule,
+    RouterModule
+  ],
+  exports: [SBreadcrumComponent, RouterModule]
+})
+export class SBreadcrumModule { }

package/src/lib/button/button.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SButtonComponent } from './components/button/s-button.component';
+
+@NgModule({
+  declarations: [
+    SButtonComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    SButtonComponent
+  ]
+})
+export class SButtonModule { }

package/src/lib/button/components/button/s-button.component.html

@@ -0,0 +1,14 @@
+<button class="button-145 {{size}} 
+{{roundedPrivate ? 'round-'+roundedPrivate : ''}} 
+{{class}} {{type}} 
+{{position ? 'position-'+position : ''}} 
+{{theme? 'theme-'+theme : ''}} 
+{{loading ? 'loading145' : ''}}
+" 
+[class.selected]="selected"
+[class.pill]="pill"
+[class.invert]="invert"
+[class.border]="!border"
+[disabled]="disabled">
+<ng-content></ng-content>
+</button>