sidesys-generic-ui 0.0.19 → 0.0.21

package/src/lib/input/components/input-textarea/s-input-textarea.component.scss

@@ -0,0 +1,62 @@
+.text-area1325{
+
+textarea {
+    width: calc(100% - 30px); // Calculo el 100% del with menos el padding total que sigue en la sieuigte linea
+    padding:10px 14px 10px 14px;
+    border: 1px solid var(--primary-500);
+    border-radius: 4px;
+    color: var(--secondary-600);
+    writing-mode: unset;
+    height: 34px;
+    font-size: 1rem;
+    max-width: 100%;
+}
+
+textarea:focus-visible {
+    outline: none;
+    border: none;
+    border: 1px solid var(--primary-600);
+    box-shadow: 0px 0px 0px 4px rgba(0, 145, 254, 0.15) , 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+
+textarea.theme-red{
+    border: 1px solid var(--red-600);
+}
+
+textarea.theme-red:focus-visible {
+    border: 1px solid var(--red-600);
+    box-shadow: 0px 0px 0px 4px rgba(255, 86, 48, 0.15), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+
+textarea.theme-green{
+    border: 1px solid var(--green-600);
+}
+
+textarea.theme-green:focus-visible {
+    border: 1px solid var(--green-500);
+    box-shadow: 0px 0px 0px 4px rgba(54, 179, 126, 0.15), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+
+textarea.theme-yellow{
+    border: 1px solid var(--yellow-500);
+}
+
+textarea.theme-yellow:focus-visible {
+    border: 1px solid var(--yellow-500);
+    box-shadow: 0px 0px 0px 4px rgba(255, 171, 0, 0.15), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+
+.resize{
+    resize: none;
+}
+
+}
+
+.text-area1325.disabled-active {
+    textarea{
+        border-color: var(--neutrals-900);
+        background-color: var(--neutrals-1100);
+        color: var(--neutrals-800);
+        resize: none;
+    }
+}

package/src/lib/input/components/input-textarea/s-input-textarea.component.spec.ts

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

package/src/lib/input/components/input-textarea/s-input-textarea.component.ts

@@ -0,0 +1,82 @@
+import { Component, EventEmitter, Input, OnInit, Output, forwardRef } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 's-input-textarea',
+  templateUrl: './s-input-textarea.component.html',
+  styleUrls: ['./s-input-textarea.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SInputTextAreaComponent),
+      multi: true
+    }
+  ]
+})
+export class SInputTextAreaComponent implements OnInit , ControlValueAccessor{
+
+  onChange = (_: any) => { };
+  onTouch = () => { };
+
+  @Input() id: any =  Math.floor(Math.random() * 1000);
+  @Input() text: string = '';
+  @Input() name: string = '';
+  @Input() placeholder?: string = '';
+  @Input() disabled: boolean = false;
+  @Input() resize: boolean = true;
+  @Input() class: string = '';
+  @Input() height?: string;
+  @Input() width?: string;
+  @Input() readOnly: boolean = false;
+  @Input()
+  get theme(): string { return this._theme; }
+  set theme(val: string){
+    this._theme = ['default', 'green', 'yellow' , 'red' ].indexOf(val) != -1 ? val : 'default';
+  };
+  _theme: string = 'default';
+  inputTimeout?: any;
+  inputText: string = '';
+  visibility = false;
+  disabledstyle: string = '';
+
+  @Output() textChangeEvent = new EventEmitter<string>();
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.inputText = this.text;
+
+    if (this.disabled) {
+      this.disabledstyle = "disabled-active"
+    }
+  }
+
+  onTextChange() {
+
+    this.onTouch();
+    this.onChange(this.inputText);
+
+    if (this.inputTimeout) {
+      clearTimeout(this.inputTimeout);
+    }
+
+    this.inputTimeout = setTimeout(() => {
+      this.textChangeEvent.next(this.inputText);
+    }, 1000, null);
+  }
+
+  writeValue(value: any): void {
+    if (value) {
+      this.inputText = value;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+}

package/src/lib/input/input.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SInputTextComponent } from './components/input-text/s-input-text.component';
+import { SErrorControl } from './components/error-control/s-error-control.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { SIconMaterialModule } from '../icon-material/s-icon-material.module'
+import { SInputTextAreaComponent } from './components/input-textarea/s-input-textarea.component';
+import { SButtonModule } from '../button/button.module';
+
+
+@NgModule({
+  declarations: [
+    SInputTextComponent,
+    SInputTextAreaComponent,
+    SErrorControl
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    SIconMaterialModule,
+    SButtonModule
+  ],
+  exports: [
+    SInputTextComponent,
+    SInputTextAreaComponent,
+    SErrorControl
+  ]
+})
+export class SInputModule { }

package/src/lib/link/index.ts

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

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

@@ -0,0 +1,8 @@
+<a id="link317" class="{{size}}" 
+[target]="target" 
+[href]="href" 
+[class.disabled]="disabled" 
+[class.invert]="invert" 
+[class.not-visited]="!visited">
+    <ng-content></ng-content>
+</a>

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

@@ -0,0 +1,69 @@
+
+#link317 {
+    color: var(--primary-600);
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+}
+#link317 s-icon-mat{
+    span{
+        color: var(--primary-600);
+        font-size: 1rem;
+    }
+}
+
+#link317:hover , #link317.not-visited:hover {
+    color: var(--primary-900) !important;
+    text-decoration: underline;
+    s-icon-mat{
+        span{
+            color: var(--primary-900);
+        }
+    }
+}
+
+#link317:visited {
+    color: var(--primary-600);
+}
+
+#link317.not-visited:visited {
+    color: var(--primary-600);
+}
+
+#link317.disabled {
+    color: var(--neutrals-800);
+    cursor: default;
+    pointer-events: none;
+}
+
+//Size
+#link317.sm {
+    font-size: 0.875rem;
+}
+#link317.md {
+    font-size: 1rem;
+}
+#link317.lg {
+    font-size: 1.125rem;
+}
+
+//Invert
+#link317.invert {
+    color: var(--neutrals-1100);
+}
+
+#link317.invert:hover {
+    color: var(--neutrals-1100) !important;
+}
+
+#link317.invert:visited {
+    color: var(--neutrals-1100);
+}
+
+#link317.invert.not-visited:visited {
+    color: var(--neutrals-1100);
+}
+
+#link317.invert.disabled {
+    color: var(--neutrals-1100);
+}

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

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

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

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 's-link',
+  templateUrl: './s-link.component.html',
+  styleUrls: ['./s-link.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+
+export class SLinkComponent implements OnInit {
+  @Input() disabled: boolean = false;
+  @Input() size: 'sm' | 'md' | 'lg' = 'sm';
+  @Input() invert: boolean = false;
+  @Input() target?: '_blank' | '_parent' | '_self' | '_top' = '_parent';
+  @Input() href?: string = '';
+  @Input() visited: boolean = true;  
+
+  constructor(){}
+
+  ngOnInit(): void {
+    
+  
+  }
+}

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

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

package/src/lib/list/index.ts

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

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

@@ -0,0 +1,10 @@
+    <div class="content-gral-23767 {{disabled ? 'disabled' : ''}} {{selected ? 'selected' : ''}} ">
+        <div class="content-border">
+            <div class="content-drag no-select cursor-drag {{size}}" >
+                <s-icon-mat class="drag-indicator">drag_indicator</s-icon-mat>
+            </div>
+            <div class="content-gral">
+                <ng-content></ng-content>
+            </div>
+        </div>
+    </div>

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

@@ -0,0 +1,85 @@
+.content-gral-23767{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border:1px solid var(--neutrals-800);
+    border-radius: 4px;
+    margin-bottom: 2px;
+    background-color: var(--neutrals-1200);
+    .content-border{
+        display: flex;
+        align-items: center;
+        width:100%;
+        border-top-left-radius: 2px;
+        border-bottom-left-radius: 2px;
+        padding: 14px;
+        border-left: 4px solid var(--neutrals-1200);
+    }
+    .cursor-drag{
+        cursor:grab;
+    }
+    .content-drag{
+        background-color: var(--primary-100);
+        color: var(--primary-600);
+        border: 1px solid var(--primary-600);
+        display: flex;
+        align-items: center;
+        border-radius: 4px;
+        .drag-indicator{
+            span{
+                font-size: 1rem;
+                padding: 3px;
+            }
+        }
+    }
+    .content-drag.md{
+        height: 60px;
+    }
+    .content-drag.sm{
+        height: 38px;
+    }
+    .content-drag.xs{
+        height: 20px;
+    }
+    .content-gral{
+        width: 100%;
+        margin-left: 10px;
+    }
+}
+.content-gral-23767:hover:not(.disabled){
+    border:1px solid var(--primary-300);
+    background-color: var(--primary-100);
+    .content-border{
+        border-top-left-radius: 2px;
+        border-bottom-left-radius: 2px;
+        border-left: 4px solid var(--primary-600);
+    }
+}
+
+//SELECTED
+.content-gral-23767.selected{
+    border:1px solid var(--primary-300);
+    background-color: var(--primary-100);
+    box-shadow: 0px 0px 0px 4px rgba(0, 145, 254, 0.15), 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    .content-border{
+        border-top-left-radius: 2px;
+        border-bottom-left-radius: 2px;
+        border-left: 4px solid var(--primary-600);
+    }
+}
+
+//DISABLED
+.content-gral-23767.disabled{
+    opacity: 50%;
+    border:1px solid var(--neutrals-1000);
+    background-color: var(--neutrals-1200);
+    .content-border{
+        border-left: 4px solid var(--neutrals-1200);
+    }
+    .content-drag{
+        background-color: var(--neutrals-1100);
+        color: var(--neutrals-800);
+        border: 1px solid var(--neutrals-800);
+        cursor:no-drop
+    }
+}

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

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

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

@@ -0,0 +1,21 @@
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 's-list',
+  templateUrl: './s-list.component.html',
+  styleUrls: ['./s-list.component.scss'],
+  encapsulation: ViewEncapsulation.None
+
+})
+
+export class SListComponent implements OnInit {
+  @Input() disabled:boolean = false
+  @Input() selected:boolean = false
+  @Input() size: 'md' | 'sm' | 'xs' = 'md'
+   
+  constructor(){}
+
+  ngOnInit(): void {}
+  
+  
+}

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

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

package/src/lib/list-simple/index.ts

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

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

@@ -0,0 +1,3 @@
+<div class="list-simple-content-general-24173 style-{{listStyle}}">
+    <ng-content></ng-content>
+</div>

package/src/lib/list-simple/s-list-simple.component.scss

@@ -0,0 +1,146 @@
+@import '../fonts-material.scss';
+
+.list-simple-content-general-24173{
+    ul{
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1.25rem;
+        letter-spacing: 0.01563rem;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+    }
+    ul , ol{
+        margin-left: 10px;
+        ul , ol{
+            margin-left: 17px;
+            ul , ol{
+                margin-left: 24px;
+                ul , ol{
+                    margin-left: 31px;
+                }
+            }
+        }
+    }
+}
+
+// STYLING
+
+.list-simple-content-general-24173.style-default{
+    ul{
+        list-style: disc;
+    }
+}
+
+.list-simple-content-general-24173.style-check , .list-simple-content-general-24173.style-chevron , .list-simple-content-general-24173.style-folder{
+    li {
+        list-style-type: none;
+    }
+    li::before {
+        font-family: "Material Icons";
+        display: inline-block;
+        margin-right: 0.5em;
+    }
+}
+
+.list-simple-content-general-24173.style-check{
+    ul{
+        ul{
+            ul{
+                li::before {
+                    color: var(--green-700)
+                }
+                .mark-invert::before , .mark-invert::marker{
+                    color: var(--green-600) !important
+                }
+            }
+        }
+    }
+    li::before {
+        content: "\e5ca";
+        color: var(--green-600)
+    }
+    .mark-invert::before , .mark-invert::marker{
+        color: var(--green-700)
+    }
+}
+
+.list-simple-content-general-24173.style-chevron{
+    li::before {
+        content: "\e5cc";
+        color: var(--secondary-600)
+    }
+}
+
+.list-simple-content-general-24173.style-dot{
+    ul{
+        list-style: disc;
+        ul{
+            list-style: disc; 
+            ul{
+                list-style: circle;
+            }
+        }
+    }
+    li::marker{
+        font-size: 17px;
+        color: var(--secondary-600)
+    }
+}
+
+.list-simple-content-general-24173.style-folder{
+    ul{
+        ul{
+            ul{
+                li::before {
+                    font-family: "Material Symbols Outlined";
+                }
+                .mark-invert::before , .mark-invert::marker{
+                    font-family: "Material Icons" !important;
+                }
+            }
+        }
+    }
+    li::before {
+        content: "\e2c7";
+        color: var(--secondary-600)
+    }
+    .mark-invert::before , .mark-invert::marker{
+        font-family: "Material Symbols Outlined";
+    }
+}
+
+.list-simple-content-general-24173.style-a1{
+
+    ul > li::before {
+        color: var(--primary-600);
+        font-weight: 700;
+        content: counter(level1) ". ";
+        counter-increment: level1;
+    }
+    
+    ul ul > li::before {
+        color: var(--secondary-600);
+        font-weight: 700;
+        content: counter(level2, lower-alpha) ". ";
+        counter-increment: level2;
+    }
+    
+    ul ul ul > li::before {
+        font-weight: 400;
+        content: counter(level2, lower-alpha) "." counter(level3) " ";
+        counter-increment: level3;
+    }
+
+    ul {
+    counter-reset: level1;
+    }
+    ul ul {
+    counter-reset: level2;
+    }
+    ul ul ul {
+    counter-reset: level3;
+    }
+
+}