sidesys-generic-ui 0.0.19 → 0.0.21

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

@@ -0,0 +1,117 @@
+s-tag{
+    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-tag{
+    width: max-content;
+    display: inline-flex;
+    align-items: center;
+    margin: 2px 2px;
+
+    &.md{
+        border-radius: 4px;
+        font-size: 0.75rem;
+        letter-spacing: 0;
+        line-height: normal;
+        padding: 0.35rem 0.4rem;
+        display: flex;
+        align-items: flex-end;
+        s-icon-mat{
+            span{
+                font-size: 1rem;
+                padding-right: 3px;
+            }
+        }
+    }
+
+    &.sm{
+        border-radius: 2px;
+        font-size: 0.75rem;
+        letter-spacing: 0;
+        line-height: 1rem;
+        padding: 0.17rem 0.47rem;
+    }
+
+    &.xs{
+        border-radius: 2px;
+        font-size: 0.625rem;
+        letter-spacing: 0;
+        line-height: 0.90rem;
+        padding: 0.05rem 0.30rem;
+    }
+
+    &.primary{
+        background: var(--primary-600);
+        color: var(--secondary-100);
+    }
+    
+    &.disabled.primary{
+        background: var(--primary-200) !important;
+        color: var(--primary-400) !important;
+    }
+    
+    &.disabled.secondary{
+        background: var(--secondary-200) !important;
+        color: var(--secondary-300) !important;
+    }
+
+    &.disabled.red{
+        background: var(--red-300) !important;
+        color: var(--red-600) !important;
+    }
+
+    &.disabled.green{
+        background: var(--green-400) !important;
+        color: var(--green-600) !important;
+    }
+    
+    &.disabled.yellow{
+        background: var(--yellow-400) !important;
+        color: var(--yellow-600) !important;
+    }
+    
+    &.red{
+        color: var(--neutrals-1200);
+        background: var(--red-600);
+    }
+    
+    &.yellow{
+        color: var(--neutrals-1200);
+        background: var(--yellow-600);
+    }
+    
+    &.green{
+        color: var(--neutrals-1200);
+        background:var(--green-600);
+    }
+    
+    
+    &.secondary{
+        color: var(--neutrals-1200);
+        background:var(--secondary-600);
+    }
+
+    &.xs{
+        s-icon-mat{
+            span{
+                font-size: 0.66rem;
+                padding-right: 3px;
+            }
+        }
+    }
+
+    &.sm{
+        s-icon-mat{
+            span{
+                font-size: 0.84rem;
+                padding-right: 3px;
+            }
+        }
+    }
+}

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

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

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

@@ -0,0 +1,17 @@
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 's-tag',
+  templateUrl: './s-tag.component.html',
+  styleUrls: ['./s-tag.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+
+})
+
+export class STagComponent {
+
+  @Input() type: 'primary' | 'secondary' | 'red' | 'yellow' | 'green' = 'primary';
+  @Input() size: 'xs' |'sm' | 'md'  = 'sm';
+  @Input() disabled: boolean = false;
+
+}

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

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

package/{lib/text-search/index.d.ts → src/lib/text-search/index.ts}

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

package/src/lib/text-search/s-text-search.component.html

@@ -0,0 +1,4 @@
+<div class="div-search-input">
+    <input class="search-input" type="text" [(ngModel)]="search" (ngModelChange)="onSearch()">
+    <img class="search-icon" [src]="searchIcon" alt="search">
+</div>

package/src/lib/text-search/s-text-search.component.scss

@@ -0,0 +1,23 @@
+
+.div-search-input {
+    position: relative;
+}
+
+.search-input {
+    width: calc(100% - 22px);
+    border-radius: 100px;
+    height: 40px;
+    padding: 0 10px;
+    border: none;
+    margin: 10px 0;
+    background: var(--secondary);
+    border: solid 1px var(--secondary-text);
+}
+
+.search-icon {
+    position: absolute;
+    width: 20px;
+    vertical-align: text-top;
+    right: 20px;
+    top: 21px;
+}

package/src/lib/text-search/s-text-search.component.spec.ts

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

package/src/lib/text-search/s-text-search.component.ts

@@ -0,0 +1,30 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 's-text-search',
+  templateUrl: './s-text-search.component.html',
+  styleUrls: ['./s-text-search.component.scss']
+})
+export class STextSearchComponent implements OnInit {
+
+  search: string = '';
+  searchIcon: string = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAABgAAAAYADwa0LPAAABxElEQVRYw+3Wv2pUQRTH8U+WRFeD3TZCTJWUWgYMWIh/SsE6T5DCNzBgp1Vq0QfwAURDYmNhZyFuoYWmCgEXCan8Q1Q2xezFyfXu5t67k43F/cFlD8Ocme+ec2bO0KjReJqqOL+Da5jDOfTwEW/RnyT4Mrbwe7Bx/tvFGmZPGmQGj4dAFH07WBpnw1Epm8EL3IrG/uANuviBi7g5+M30E3fwKnV08pF5hvmCeS2sCPWUzd3HYkqY5RzM/RI+89iOfF6mBNrKRaasruAg8r2aAqbj72n6pThNo/QkAlpPAXQ3WvB1Df/rkf+7qs6tgrFLkf2+BlA3sudSAJ2P7O81gL5F9oUUQF/G+Yc5n14KoA+RfWPInFGKL9JuRd9CTQm9KSvMlQq+00KzzXxXUwARGmW2aE/5o/8w8ttTo4aGaVZolNni27h8TGQeOXq730sFk2lJaKDZBgd4KtwzHZzFgpCWOE19fFK99krpttAoyz4/+vgc2Rtop4ZaFBrlcSB7QppaufETgSI0ynWhHXwV3j07eC6kLS7gjUlBldWZAWgMtSm8wxuoBqqO2v4t9AenCcTRSG065VOXqS1E5r+AadRoIjoEg3uq+JKOpAkAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMDUtMDZUMTk6MDE6MTcrMDA6MDCzgvWcAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTA1LTA2VDE5OjAxOjE3KzAwOjAwwt9NIAAAAABJRU5ErkJggg==';
+  inputTimeout?: any;
+
+  @Output() searchEvent = new EventEmitter<string>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  onSearch() {
+    if(this.inputTimeout){
+      clearTimeout(this.inputTimeout);
+    }
+
+    this.inputTimeout = setTimeout(() => {
+      this.searchEvent.next(this.search);
+    }, 1000, null);
+  }
+}

package/src/lib/text-search/s-text-search.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { STextSearchComponent } from './s-text-search.component';
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [
+    STextSearchComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  exports: [STextSearchComponent]
+})
+export class STextSearchModule { }

package/src/lib/theme/index.ts

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

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

@@ -0,0 +1 @@
+@import "../theme.scss";

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

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

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

@@ -0,0 +1,12 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 's-theme',
+  template: '',
+  styleUrls: ['./s-theme.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+
+export class SThemeComponent {
+
+}

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

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