sidesys-generic-ui 0.0.19 → 0.0.21

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

@@ -0,0 +1,55 @@
+import { Component, EventEmitter, Input, OnInit, Output, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 's-radio',
+  templateUrl: './s-radio.component.html',
+  styleUrls: ['./s-radio.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SRadioComponent),
+      multi: true
+    }
+  ]
+})
+
+export class SRadioComponent implements OnInit , ControlValueAccessor {
+
+  onChange = (_: any) => { };
+  onTouch = () => { };
+
+  @Input() value: string = "default-" + Math.random();
+  @Input() model: string = "";
+  @Input() name: string = "";
+  @Input() disabled: boolean = false;
+  @Input() label: string = "";
+  @Output() emitSelection = new EventEmitter<string>();
+
+  constructor(){}
+
+  ngOnInit(): void {
+    
+  }
+
+  doCheck(event: string) {
+    this.onTouch();
+    this.onChange(event);
+    this.emitSelection.emit(event);
+  }
+
+  writeValue(value: any): void {
+    if (value == this.value) {
+      this.model = value
+      this.value = value;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+}

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SRadioComponent } from './s-radio.component';
+import { FormsModule } from '@angular/forms';
+
+
+@NgModule({
+  declarations: [
+    SRadioComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  exports: [SRadioComponent]
+})
+export class SRadioModule { }

package/src/lib/reset.scss

@@ -0,0 +1,43 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	// font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

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

@@ -2,4 +2,4 @@ export * from './s-select.module';
 export * from './select-multiple/s-select-multiple.component';
 export * from './select-simple/s-select-simple.component';
 export * from './select-normal/s-select.component';
-export * from './s-select-model';
+export * from './s-select-model';

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

@@ -0,0 +1,27 @@
+export class SSelectMultipleModel {
+    public title!: string;
+    public value!: string | number | boolean;
+    public inputType?: 'checkbox' | 'radio'; 
+    public key?: string | number;
+    public user?: SSelectUser;
+}
+export class SSelectSimpleModel {
+    public title!: string;
+    public value!: string | number | boolean;
+    public key?: string | number;
+    public user?: SSelectUser;
+}
+
+export class SSelectModel {
+    public key!: string | number;
+    public value!: string | number | boolean;
+    public user?: SSelectUser;
+}
+
+export class SSelectUser{
+    public name?: string;
+    public display?: 'avatar' | 'icon' | 'letters';
+    public letters?: string;
+    public url?:string;
+    public status?: 'approved' | 'declined' | 'blocked' | 'online' | 'offline' | 'busy';
+}

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

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SSelectComponent } from './select-normal/s-select.component';
+import { SSelectSimpleComponent } from './select-simple/s-select-simple.component';
+import { SIconMaterialModule } from '../icon-material';
+import { SAvatarModule } from '../avatar';
+import { SSelectMultipleComponent } from './select-multiple/s-select-multiple.component';
+import { SCheckboxModule } from '../checkbox';
+import { SRadioModule } from '../radio';
+import { SProfileGroupModule } from '../avatar/components/profile-group';
+
+
+@NgModule({
+  declarations: [
+    SSelectComponent,
+    SSelectSimpleComponent,
+    SSelectMultipleComponent
+  ],
+  imports: [
+    CommonModule,
+    SIconMaterialModule,
+    SAvatarModule,
+    SCheckboxModule,
+    SRadioModule,
+    SProfileGroupModule
+  ],
+  exports: [
+    SSelectComponent,
+    SSelectSimpleComponent,
+    SSelectMultipleComponent
+  ]
+})
+export class SSelectModule { }

package/src/lib/select/select-multiple/s-select-multiple.component.html

@@ -0,0 +1,44 @@
+<div id="select-container-multiple909"  class="{{disabled ? 'select-container-multiple909-'+disabledstyle : ''}}"
+>
+    <span *ngIf="selectLabel" class="select-label">{{selectLabel}}</span>
+    <div class="cursor select-main-content {{ isOpen ? 'is-open' : '' }} {{size ? size : ''}}" (click)="openDropDown()">
+    <div class="selected-option625">
+        <div class="content-selected-left625">
+            <div *ngIf="display == 'dot'" class="dot"></div>
+            <s-icon-mat  size="{{size == 'md' ? '22' : '17'}}" class="iconPerson" *ngIf="display == 'iconperson'">person_outline</s-icon-mat>
+            <div *ngIf="display == 'profile'" class="content-avatar625">
+                <s-avatar *ngIf="size == 'sm'" size="16"></s-avatar>
+                <s-avatar *ngIf="size == 'md'"size="24"></s-avatar>
+            </div>
+            <span *ngIf="countSelected >= 1">+{{countSelected}} Selecciones</span>
+            <span *ngIf="countSelected == 0">{{placeholder}}</span>    
+        </div>
+        <div class="content-selected-right625">
+            <s-icon-mat *ngIf="!readOnly"  class="{{isOpen ? 'is-open-arrow' : ''}}">{{isOpen ? 'expand_less' : 'expand_more'}}</s-icon-mat>
+        </div>
+    </div>
+    </div>
+    <div class="select-options" *ngIf="isOpen">
+    <div class="content-select-option-main {{size ? size : ''}}"
+        *ngFor="let item of options; index as i" 
+        (click)="changeItem(item)"
+        [class.active]="item.value == true"
+        >
+        <div class="content-left">
+            <ng-container *ngIf="item.inputType == 'checkbox' || item.inputType == 'radio'">
+                    <s-radio *ngIf="item.inputType == 'radio'" model="'select-multiple'"></s-radio>
+                    <s-checkbox *ngIf="item.inputType == 'checkbox'" [model]="item.value"></s-checkbox>
+            </ng-container>
+            <div *ngIf="display == 'dot'" class="dot"></div>
+            <div *ngIf="display == 'profile'" class="content-avatar625">
+                <s-avatar *ngIf="size == 'sm'" size="16" [display]="item.user.display" [status]="item.user.status" [urlProfileImage]="item.user.url" ></s-avatar>
+                <s-avatar *ngIf="size == 'md'" size="24" [display]="item.user.display" [status]="item.user.status" [urlProfileImage]="item.user.url" ></s-avatar>
+            </div>
+            <s-icon-mat size="{{size == 'md' ? '22' : '17'}}" class="iconPerson" *ngIf="display == 'iconperson'">person_outline</s-icon-mat>
+            <span class="option-value">
+                {{item.title}}
+            </span>
+        </div>
+    </div>
+    </div>
+</div>

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

@@ -0,0 +1,200 @@
+#select-container-multiple909 {
+  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-select-option-main .content-left .dot{
+  margin-left: 10px;
+  margin-right: 9px;
+}
+
+.content-left s-radio input , .content-left s-checkbox input{
+  cursor: pointer;
+}
+
+.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-container-multiple909-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-multiple/s-select-multiple.component.ts

@@ -0,0 +1,106 @@
+import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit, forwardRef, HostListener } from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+    selector: 's-select-multiple',
+    templateUrl: './s-select-multiple.component.html',
+    styleUrls: ['./s-select-multiple.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => SSelectMultipleComponent),
+            multi: true
+        }
+        ]
+})
+export class SSelectMultipleComponent implements OnInit , ControlValueAccessor {
+
+    onChange = (_: any) => { };
+    onTouch = () => { };
+
+    @Input() disabled: boolean = false;
+    @Input('placeholder') placeholder: string = 'Seleccionar miembro';  
+    @Input('options') options!: any[]; 
+    @Output() selectEvent = new EventEmitter<any>();
+    @Input('label') 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';
+    
+    clickInside: boolean = false;
+    disabledstyle: string = '';
+    isOpen: boolean = false;
+    _display:any = undefined
+    countSelected:any
+
+    ngOnInit(): void {
+        this.countSelect()
+
+        if (this.disabled) {
+            this.disabledstyle = "disabled-active"
+        }
+
+        if (this.readOnly) {
+            this.disabled = true
+        }
+    }
+
+    openDropDown() {
+        if(!this.disabled){
+            this.isOpen = !this.isOpen;
+        }
+    }
+
+    changeItem(item:any){
+        if(item.inputType == 'radio'){
+            for(let i=0; i< this.options.length; i++){
+                this.options[i].value = false;
+            }
+            item.value = true
+            this.onTouch();
+            this.onChange(this.options);
+            this.selectEvent.emit(this.options);
+        }
+        if(item.inputType == 'checkbox'){
+            item.value = !item.value
+            this.onTouch();
+            this.onChange(this.options);
+            this.selectEvent.emit(this.options);
+        }
+        this.countSelect()
+    }
+
+    countSelect(){
+        this.countSelected = this.options.filter(obj => obj.value === true).length;
+    }
+
+    writeValue(value: any): void {
+        // console.log("Valor inicial" , 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/select/select-normal/s-select.component.html

@@ -0,0 +1,3 @@
+<select class="select-component {{class}}" (change)="onSelect($event)">
+    <option *ngFor="let o of options, let i = index" [value]="o.key" [selected]="i == 0">{{o.value}}</option>
+</select>

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

@@ -0,0 +1,15 @@
+
+.select-component {
+    background: var(--secondary);
+    width: 100%;
+    color: var(--secondary-600);
+    border: 1px solid var(--secondary-100);
+    outline: none;
+    height: 32px;
+    padding: 0 10px;
+    cursor: pointer;
+}
+
+// .select-component option{
+//     height:42px;
+// }

package/src/lib/select/select-normal/s-select.component.spec.ts

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

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

@@ -0,0 +1,21 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { SSelectModel } from '../s-select-model';
+
+@Component({
+  selector: 's-select',
+  templateUrl: './s-select.component.html',
+  styleUrls: ['./s-select.component.scss']
+})
+export class SSelectComponent {
+
+  @Input() options?: SSelectModel[] = [];
+  @Input() class: string = '';
+  @Output() selectEvent = new EventEmitter<string | number>();
+
+  constructor() { }
+
+  onSelect(event: any) {
+    if (event.target.value) { this.selectEvent.next(event.target.value); }
+  }
+}
+

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

@@ -0,0 +1,57 @@
+<div id="select-container909" class="{{disabled ? 'select-container909-'+disabledstyle : ''}}">
+    <span *ngIf="selectLabel" class="select-label">{{selectLabel}}</span>
+    <div class="cursor select-main-content {{ isOpen ? 'is-open' : '' }} {{size ? size : ''}}" (click)="openDropDown()">
+    <div class="selected-option625">
+        <div class="content-selected-left625" *ngIf="selectedValue">
+            <div *ngIf="display == 'dot'" class="dot"></div>
+            <s-icon-mat size="{{size == 'md' ? '22' : '17'}}" class="iconPerson" *ngIf="display == 'iconperson'">person_outline</s-icon-mat>
+            <div *ngIf="display == 'profile' && options[activeIndex].user" class="content-avatar625">
+                <s-avatar size="24" [status]="options[activeIndex].user?.status" [display]="options[activeIndex].user?.display" [urlProfileImage]="options[activeIndex].user?.url"></s-avatar>
+            </div>
+
+            <span>
+                {{ options[activeIndex].title }}
+            </span>
+
+        </div>
+
+        <div class="content-selected-left625" *ngIf="!selectedValue">
+
+            <div *ngIf="display == 'dot'" class="dot"></div>
+            <s-icon-mat class="iconPerson" *ngIf="display == 'iconperson'">person_outline</s-icon-mat>
+            <div *ngIf="display == 'profile'" class="content-avatar625">
+                <s-avatar size="24"></s-avatar>
+            </div>
+
+            <span>
+                {{placeholder}}
+            </span>
+
+        </div>
+        <div class="content-selected-right625">
+            <s-icon-mat *ngIf="!readOnly" class="{{isOpen ? 'is-open-arrow' : ''}}">{{isOpen ? 'expand_less' : 'expand_more'}}</s-icon-mat>
+        </div>
+    </div>
+    </div>
+    <div class="select-options" *ngIf="isOpen">
+    <div class="content-select-option-main {{size ? size : ''}}"
+        *ngFor="let item of options; index as i"
+        [class.active]="i === selectedValue-1"
+        (click)="getSelectedValue(item)"
+        >
+        <div class="content-left">
+            <div *ngIf="display == 'dot'" class="dot"></div>
+            <div *ngIf="display == 'profile'" class="content-avatar625">
+                <s-avatar size="24" [display]="item.user?.display" [status]="item.user?.status" [urlProfileImage]="item.user?.url" ></s-avatar>
+            </div>
+            <s-icon-mat  size="{{size == 'md' ? '22' : '17'}}" class="iconPerson" *ngIf="display == 'iconperson'">person_outline</s-icon-mat>
+            <span class="option-value">
+                {{item.title}}
+            </span>
+        </div>
+        <div class="content-right" *ngIf="i === selectedValue-1">
+            <s-icon-mat class="icon-check">check</s-icon-mat>
+        </div>
+    </div>
+    </div>
+</div>