sidesys-generic-ui 0.0.19 → 0.0.21

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

@@ -0,0 +1,237 @@
+@import './styles/s-button-themes.scss';
+ 
+s-button{
+    width: fit-content;
+}
+
+// Default
+.button-145 {
+    line-height: 30px;
+    letter-spacing: 0.01rem;
+    font-size: 1rem;
+    padding: 0.6rem 1.85rem;
+    width: auto;
+    cursor: pointer;
+    border: 0px;
+    outline: none;
+    margin: 0.1rem 0.1rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: "Roboto", Arial, sans-serif;
+    transition: 0.2s;
+
+    
+}
+
+//Sizes "xl" | "lg" | "md" | "sm"
+.button-145.xl{
+    font-size: 1.125rem;
+    padding: 0rem 2rem;
+    line-height: 58px;
+}
+.button-145.lg{
+    font-size: 1rem;
+    padding: 0rem 2rem;
+    line-height: 50px;
+}
+.button-145.md{
+    font-size: 0.875rem;
+    padding: 0rem 1.5rem;
+    line-height: 38px;
+}
+.button-145.sm{
+    font-size: 0.75rem;
+    padding: 0rem 0.75rem;
+    line-height: 24px;
+}
+
+// Primary
+.button-145.primary{
+    background: var(--primary-600);
+    color: var(--neutrals-1200);
+    border: 0px;
+}
+
+.button-145.primary:hover{
+    background: var(--primary-900);
+    color: var(--neutrals-1200);
+    border: 0px;
+}
+
+.button-145.primary:active{
+    background: var(--secondary-600);
+    color: var(--neutrals-1200);
+    border: 0px;
+}
+
+.button-145.primary:disabled{
+    background: var(--primary-200);
+    color: var(--neutrals-800);
+    border: 0px;
+}
+
+// Secondary
+.button-145.secondary{
+    background-color: var(--primary-100);
+    color: var(--primary-600);
+    border: 1px solid var(--primary-600);
+}
+
+.button-145.secondary:hover{
+    background-color: var(--primary-200);
+    color: var(--primary-600);
+    border: 1px solid var(--primary-600);
+}
+
+.button-145.secondary:active{
+    background-color: var(--primary-300);
+    color: var(--primary-1000);
+    border: 1px solid var(--primary-600);
+}
+
+.button-145.secondary:disabled{
+    background-color: var(--neutrals-1100);
+    color: var(--neutrals-700);
+    border: 1px solid var(--neutrals-800);
+}
+
+// Tertiary
+.button-145.tertiary{
+    background-color: var(--neutrals-1200);
+    color: var(--primary-600);
+}
+
+.button-145.tertiary:hover{
+    background-color: var(--neutrals-1200);
+    color: var(--primary-800);
+}
+
+.button-145.tertiary:active{
+    background-color: var(--neutrals-1200);
+    color: var(--neutral-1000);
+}
+
+.button-145.tertiary:disabled{
+    background-color: var(--neutrals-1200);
+    color: var(--neutrals-700);
+}
+
+// Button Icon Spaccing  "xl" | "lg" | "md" | "sm"
+.button-145.xl s-icon-mat{
+    display: flex;
+    padding: 0px 4px;
+    span{
+        font-size: 2rem;
+    }
+}
+.button-145.lg s-icon-mat{
+    display: flex;
+    padding: 0px 4px;
+    span{
+        font-size: 1.6rem;
+    }
+}
+.button-145.md s-icon-mat{
+    display: flex;
+    padding: 0px 4px;
+    span{
+        font-size: 1.3rem;
+    }
+}
+.button-145.sm s-icon-mat{
+    display: flex;
+    padding: 0px 5px;
+    span{
+        font-size: 1rem;
+    }
+}
+
+// Pill
+.button-145.pill{   
+    border-radius: 0.2rem;
+    padding: 0.5rem;
+    height: 3rem;
+    width:3rem;
+    margin: 0.04rem;
+    span{
+        font-size: 1.4rem;
+    }
+}
+
+// PIll Sizes  "xl" | "lg" | "md" | "sm"
+.button-145.pill.xl{
+    padding: 0.875rem;
+    height: 3.75rem;
+    width: 3.75rem;
+}
+
+.button-145.pill.lg{
+    padding: 1.063rem;
+    height: 3.25rem;
+    width: 3.25rem;
+}
+
+.button-145.pill.md{
+    padding: 0.05rem;
+    height: 2.5rem;
+    width: 2.5rem;
+}
+
+.button-145.pill.sm{
+    padding: 0.438rem;
+    height: 1.625rem;
+    width: 1.625rem;
+}
+
+// Pill con Texto
+.button-145.pill{
+    label{
+        padding: 0.7rem;
+        cursor: pointer;
+        margin: 0px;
+    }
+} 
+
+.button-145.pill.selected{
+    label{
+        cursor: default;
+    }
+}
+
+//No Border
+.button-145.border{
+    border: none !important;
+    height: auto !important;
+    background-color: inherit !important;
+    vertical-align: bottom;
+}
+
+//Rounded
+.button-145.round-sm{
+    border-radius: 3px;
+}
+
+.button-145.round-md{
+    border-radius: 4px;
+}
+
+.button-145.round-lg{
+    border-radius: 6px;
+}
+
+// Align
+.button-145.position-reverse:not(.pill){
+    flex-direction: row-reverse;
+    s-icon-mat{
+        margin: 0px -6px 0px 0px;
+    }
+}
+.button-145.position-normal:not(.pill){
+    flex-direction: row;
+    s-icon-mat{
+        margin: 0px 0px 0px -10px;
+    }
+}
+
+@import './styles/s-button-loading.scss';

package/src/lib/button/components/button/s-button.component.spec.ts

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

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

@@ -0,0 +1,45 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 's-button',
+  templateUrl: './s-button.component.html',
+  styleUrls: ['./s-button.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class SButtonComponent implements OnInit{
+
+  @Input() disabled: boolean = false;
+  @Input() class: string = '';
+  @Input() rounded: "sm" | "md" | "lg" = 'sm'; //OBSOLETO SE DEJA PARA QUE NO DE ERROR SI ALGUIEN LO ESTA IMPLEMENTANDO
+  @Input() pill: boolean = false;
+  @Input() size: "xl" | "lg" | "md" | "sm"  = 'md'; 
+  @Input() invert: boolean = false;
+  @Input() selected: boolean = false;
+  @Input() type: "primary" | "secondary" | "tertiary" | string = 'primary'; 
+  @Input() border: boolean = true;
+  @Input() loading: boolean = false;
+  @Input() position?: "normal" | "reverse" ;
+  @Input() theme?: "default" | "green" | "yellow" | "red"  ;
+  roundedPrivate: string = 'md';
+
+  constructor() {
+    
+  }
+
+  ngOnInit(): void {
+
+    //Pasa a secondary cuando se invierte
+    if(this.invert){
+      this.type = 'secondary'
+    }
+    
+    // Por decision de ICEI
+    // Cuando el size es SM el round debe ser sm , para el resto el round debe ser md
+    if(this.size == 'sm'){
+      this.roundedPrivate = 'sm';
+    }else{
+      this.roundedPrivate = 'md';
+    }
+  }
+
+}

package/src/lib/button/components/button/styles/s-button-loading.scss

@@ -0,0 +1,62 @@
+
+.button-145.loading145.primary {
+    background: linear-gradient(90deg , var(--primary-900) 50%, var(--primary-600) 50%);
+}
+
+.button-145.loading145.secondary {
+    background: linear-gradient(90deg , var(--primary-300) 50%, var(--primary-200) 50%);
+}
+
+.button-145.loading145.tertiary {
+    background: linear-gradient(90deg , var(--primary-100) 50%, var(--neutrals-1200) 50%);
+}
+
+
+[theme="red"]{
+    .button-145.loading145.primary {
+        background: linear-gradient(90deg , var(--red-900) 50%, var(--red-600) 50%);
+    }
+    .button-145.loading145.secondary {
+        background: linear-gradient(90deg , var(--red-300) 50%, var(--red-200) 50%);
+    }
+    .button-145.loading145.tertiary {
+        background: linear-gradient(90deg , var(--red-100) 50%, var(--neutrals-1200) 50%);
+    }
+}
+
+[theme="green"]{
+    .button-145.loading145.primary {
+        background: linear-gradient(90deg , var(--green-900) 50%, var(--green-600) 50%);
+    }
+    .button-145.loading145.secondary {
+        background: linear-gradient(90deg , var(--green-300) 50%, var(--green-200) 50%);
+    }
+    .button-145.loading145.tertiary {
+        background: linear-gradient(90deg , var(--green-100) 50%, var(--neutrals-1200) 50%);
+    }
+}
+
+[theme="yellow"]{
+    .button-145.loading145.primary {
+        background: linear-gradient(90deg , var(--yellow-900) 50%, var(--yellow-600) 50%);
+    }
+    .button-145.loading145.secondary {
+        background: linear-gradient(90deg , var(--yellow-300) 50%, var(--yellow-200) 50%);
+    }
+    .button-145.loading145.tertiary {
+        background: linear-gradient(90deg , var(--yellow-100) 50%, var(--neutrals-1200) 50%);
+    }
+}
+
+
+
+.button-145.loading145.primary , .button-145.loading145.secondary , .button-145.loading145.tertiary {
+    animation: 3s linear infinite animationEffect;
+    background-size: 200% !important;
+    cursor: wait;
+}
+
+@keyframes animationEffect {
+    0%   { background-position:  100%; }
+    100% { background-position: -100%; }
+}

package/src/lib/button/components/button/styles/s-button-themes.scss

@@ -0,0 +1,162 @@
+// THEME  
+
+//RED
+[theme="red"]{
+// Red - Default
+.button-145.primary{
+    background-color: var(--red-600);
+}
+.button-145.primary:hover{
+    background-color: var(--red-700);
+}
+.button-145.primary:active{
+    background-color: var(--red-800);
+}
+.button-145.primary:disabled{
+    background-color: var(--red-200);
+}
+// Red - Secondary
+.button-145.secondary{
+    background-color: var(--red-100);
+    border:1px solid var(--red-600);
+    color: var(--secondary-600);
+}
+.button-145.secondary:hover{
+    background-color: var(--red-200);
+    border:1px solid var(--red-600);
+    color: var(--secondary-600);
+}
+.button-145.secondary:active{
+    background-color: var(--red-300);
+    border:1px solid var(--red-600);
+    color: var(--secondary-600);
+}
+.button-145.secondary:disabled{
+    background-color: var(--red-100);
+    border:1px solid var(--red-300);
+    color: var(--secondary-600);
+}
+// Red - Tertiary
+.button-145.tertiary{
+    color: var(--red-600);
+}
+.button-145.tertiary:hover{
+    color: var(--red-700);
+}
+.button-145.tertiary:active{
+    color: var(--red-900);
+}
+.button-145.tertiary:disabled{
+    color: var(--neutrals-700);
+}
+}
+
+//YELLOW
+[theme="yellow"]{
+// Yellow - Default
+.button-145.primary{
+    color: var(--secondary-1000);
+    background-color: var(--yellow-600);
+}
+.button-145.primary:hover{
+    color: var(--secondary-1000);
+    background-color: var(--yellow-700);
+}
+.button-145.primary:active{
+    color: var(--neutrals-1200);
+    background-color: var(--yellow-800);
+}
+.button-145.primary:disabled{
+    color: var(--secondary-400);
+    background-color: var(--yellow-200);
+}
+// Yellow - Secondary
+.button-145.secondary{
+    background-color: var(--yellow-100);
+    border: 1px solid var(--yellow-600);
+    color: var(--secondary-1000);
+}
+.button-145.secondary:hover{
+    background-color: var(--yellow-300);
+    border:1px solid var(--yellow-600);
+    color: var(--secondary-1000);
+}
+.button-145.secondary:active{
+    background-color: var(--yellow-400);
+    border:1px solid var(--yellow-600);
+    color: var(--secondary-1000);
+}
+.button-145.secondary:disabled{
+    background-color: var(--yellow-200);
+    border:1px solid var(--yellow-300);
+    color: var(--secondary-400);
+}
+// Yellow - Tertiary
+.button-145.tertiary{
+    color: var(--yellow-600);
+}
+.button-145.tertiary:hover{
+    color: var(--yellow-500);
+}
+.button-145.tertiary:active{
+    color: var(--yellow-700);
+}
+.button-145.tertiary:disabled{
+    color: var(--neutrals-700);
+}
+}
+
+
+
+//Green
+[theme="green"]{
+
+    // Green - Default
+    .button-145.primary{
+        background-color: var(--green-600);
+    }
+    .button-145.primary:hover{
+        background-color: var(--green-700);
+    }
+    .button-145.primary:active{
+        background-color: var(--green-800);
+    }
+    .button-145.primary:disabled{
+        background-color: var(--green-200);
+    }
+    // Green - Secondary
+    .button-145.secondary{
+        background-color: var(--green-100);
+        border:1px solid var(--green-600);
+        color: var(--secondary-600);
+    }
+    .button-145.secondary:hover{
+        background-color: var(--green-200);
+        border:1px solid var(--green-600);
+        color: var(--secondary-600);
+    }
+    .button-145.secondary:active{
+        background-color: var(--green-300);
+        border:1px solid var(--green-600);
+        color: var(--secondary-600);
+    }
+    .button-145.secondary:disabled{
+        background-color: var(--green-100);
+        border:1px solid var(--green-300);
+        color: var(--secondary-600);
+    }
+    // Green - Tertiary
+    .button-145.tertiary{
+        color: var(--green-600);
+    }
+    .button-145.tertiary:hover{
+        color: var(--green-700);
+    }
+    .button-145.tertiary:active{
+        color: var(--green-900);
+    }
+    .button-145.tertiary:disabled{
+        color: var(--neutrals-700);
+    }
+    
+    }

package/src/lib/button/index.ts

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

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

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

package/src/lib/card/s-card-models.ts

@@ -0,0 +1,11 @@
+// export class SCardMenu {
+//     title?: string;
+//     key?: string;
+// }
+
+export class SCheckData {
+    value: any;
+    model: any;
+    disabled: boolean = false;
+    undefined: boolean = false;
+}

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

@@ -0,0 +1,28 @@
+<div class="s-card {{size}}" attr.style="{{style}}">
+    <div *ngIf="!showHorizontal && check" class="s-card__check">
+        <s-checkbox class="s-card__check-component" [value]="check.value" [model]="check.model" [disabled]="check.disabled"
+            [isUndefined]="check.undefined" (emitSelection)="onCheckEvent($event)"></s-checkbox>
+    </div>
+
+    <div *ngIf="!showHorizontal && image" [ngClass]="fullimage? 's-card__content-image-full': 's-card__content-image'">
+        <img [src]="localImage" alt="card-image">
+    </div>
+    <div *ngIf="!showHorizontal && !image && icon" class="s-card__content-image">
+        <s-icon-mat size="150">{{icon}}</s-icon-mat>
+    </div>
+    
+    <div class="s-card__header" [ngClass]="{'s-card__header-horizontal': showHorizontal}">
+        <div class="s-card__check-horizontal" *ngIf="showHorizontal && check">
+            <s-checkbox *ngIf="showHorizontal && check" [value]="check.value" [model]="check.model"
+                [disabled]="check.disabled" [isUndefined]="check.undefined" (emitSelection)="onCheckEvent($event)"></s-checkbox>
+        </div>
+        <h6 *ngIf="title">{{title}}</h6>
+        <span *ngIf="!showHorizontal && subtitle" class="s-caption">{{subtitle}}</span>
+        <div *ngIf="menu" class="s-card__header-menu-section">
+            <s-icon-mat class="s-card__header-menu" *ngIf="menu" (click)="showDropDown()">more_vert</s-icon-mat>
+            <s-sub-menu *ngIf="showDropDownCard" class="s-card__submenu" [menu]="menu" (changeMenuEvent)="onClickEvent($event)" (closeMenuEvent)="showDropDown()"></s-sub-menu>
+        </div>
+        <ng-content *ngIf="!showHorizontal"></ng-content>
+        <s-tag *ngIf="label" type="green">{{label}}</s-tag>
+    </div>
+</div>

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

@@ -0,0 +1,117 @@
+.s-card {
+    color: var(--secondary-700);
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: var(--neutrals-1200);
+    border-radius: 0.25rem;
+    display: inline-block;
+    margin-bottom: 0.5rem;
+    box-shadow: var(--E300);
+}
+
+//Size
+.s-card.sm {
+    width: calc(25% - 5px);
+}
+
+.s-card.sm:nth-child(4n + 1) {
+    margin-right: 5px;
+}
+
+.s-card.sm:nth-child(4n + 4) {
+    margin-right: 0;
+}
+
+.s-card.md {
+    width: calc(50% - 5px);
+}
+
+.s-card.lg {
+    width: calc(75% - 5px);
+}
+
+.s-card.full {
+    width: calc(100% - 5px);
+}
+
+.s-card__check {
+    position: relative;
+}
+
+.s-card__check-component {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+
+.s-card__check-horizontal {
+    display: inline-block;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 5px 20px 0 0;
+}
+
+.s-card__content-image {
+    line-height: 0;
+    text-align: center;
+    border-radius: 0.25rem 0.25rem 0 0;
+    display: flex;
+    justify-content: center;
+
+    img {
+        max-width: 100%;
+        height: 200px;
+        border-radius: 0.25rem 0.25rem 0 0;
+    }
+}
+
+.s-card__content-image-full {
+    line-height: 0;
+    text-align: center;
+    border-radius: 0.25rem 0.25rem 0 0;
+    height: 200px;
+    max-width: 100%;
+    display: flex;
+
+    img {
+        border-radius: 0.25rem 0.25rem 0 0;
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+        object-position: center
+    }
+}
+
+.full-image {
+    width: 100%;
+}
+
+.s-card__header {
+    padding: 16px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    background-clip: border-box;
+}
+
+.s-card__header-horizontal {
+    flex-direction: row;
+}
+
+.s-card__header-menu-section {
+    position: absolute;
+    right: 16px;
+}
+
+.s-card__header-menu {
+    cursor: pointer;
+    color: var(--primary-600);
+}
+
+.s-card__submenu {
+    position: absolute;
+    z-index: 2;
+    right: 0;
+    width: auto;
+}