sidesys-generic-ui 0.0.19 → 0.0.21

package/src/lib/theme.scss

@@ -0,0 +1,662 @@
+@import './reset.scss';
+@import './fonts.scss';
+@import './variables.scss';
+/*
+*
+Estilos para todo el ecosistema.
+*
+*/
+
+.skeleton-loading {
+  background:
+    linear-gradient(0.25turn, transparent, #fff, transparent),
+    linear-gradient(#eee, #eee),
+    radial-gradient(38px circle at 19px 19px, #eee 50%, transparent 51%),
+    linear-gradient(#eee, #eee);
+  animation: skeleton-animation 1.5s infinite ease-in-out;
+}
+
+@keyframes skeleton-animation {
+  0% {
+    opacity: 0.6;
+  }
+
+  50% {
+    opacity: 0.8;
+  }
+
+  100% {
+    opacity: 0.6;
+  }
+}
+
+::selection {
+  background: var(--primary-600);
+  color: var(--neutrals-100)
+}
+
+.no-select {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.cursor {
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+//WIDTH
+.w-25 {
+  width: 25% !important;
+}
+
+.w-33 {
+  width: 33% !important;
+}
+
+.w-50 {
+  width: 50% !important;
+}
+
+.w-75 {
+  width: 75% !important;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+//SPACING PADDING
+.p-0 {
+  padding: 0 !important;
+}
+
+.p-1 {
+  padding: .25em;
+}
+
+.p-2 {
+  padding: .5em;
+}
+
+.p-3 {
+  padding: 1em;
+}
+
+.p-4 {
+  padding: 1.5em;
+}
+
+.p-5 {
+  padding: 3em;
+}
+
+.px-0 {
+  padding: 0 0;
+}
+
+.px-1 {
+  padding: .25em 0;
+}
+
+.px-2 {
+  padding: .5em 0;
+}
+
+.px-3 {
+  padding: 1em 0;
+}
+
+.px-4 {
+  padding: 1.5em 0;
+}
+
+.px-5 {
+  padding: 3em 0;
+}
+
+.py-0 {
+  padding: 0 0;
+}
+
+.py-1 {
+  padding: 0 .25em;
+}
+
+.py-2 {
+  padding: 0 .5em;
+}
+
+.py-3 {
+  padding: 0 1em;
+}
+
+.py-4 {
+  padding: 0 1.5em;
+}
+
+.py-5 {
+  padding: 0 3em;
+}
+
+.pt-0 {
+  padding-top: 0;
+}
+
+.pt-1 {
+  padding-top: .25em;
+}
+
+.pt-2 {
+  padding-top: .5em;
+}
+
+.pt-3 {
+  padding-top: 1em;
+}
+
+.pt-4 {
+  padding-top: 1.5em;
+}
+
+.pt-5 {
+  padding-top: 3em;
+}
+
+.pr-0 {
+  padding-right: 0;
+}
+
+.pr-1 {
+  padding-right: .25em;
+}
+
+.pr-2 {
+  padding-right: .5em;
+}
+
+.pr-3 {
+  padding-right: 1em;
+}
+
+.pr-4 {
+  padding-right: 1.5em;
+}
+
+.pr-5 {
+  padding-right: 3em;
+}
+
+.pb-0 {
+  padding-bottom: 0;
+}
+
+.pb-1 {
+  padding-bottom: .25em;
+}
+
+.pb-2 {
+  padding-bottom: .5em;
+}
+
+.pb-3 {
+  padding-bottom: 1em;
+}
+
+.pb-4 {
+  padding-bottom: 1.5em;
+}
+
+.pb-5 {
+  padding-bottom: 3em;
+}
+
+.pl-0 {
+  padding-left: 0;
+}
+
+.pl-1 {
+  padding-left: .25em;
+}
+
+.pl-2 {
+  padding-left: .5em;
+}
+
+.pl-3 {
+  padding-left: 1em;
+}
+
+.pl-4 {
+  padding-left: 1.5em;
+}
+
+.pl-5 {
+  padding-left: 3em;
+}
+
+//SPACCING MARGIN
+.m-auto {
+  margin: 0 auto;
+}
+
+.m-0 {
+  margin: 0;
+}
+
+.m-1 {
+  margin: .25em;
+}
+
+.m-2 {
+  margin: .5em;
+}
+
+.m-3 {
+  margin: 1em;
+}
+
+.m-4 {
+  margin: 1.5em;
+}
+
+.m-5 {
+  margin: 3em;
+}
+
+.mx-0 {
+  margin: 0 0;
+}
+
+.mx-1 {
+  margin: .25em 0;
+}
+
+.mx-2 {
+  margin: .5em 0;
+}
+
+.mx-3 {
+  margin: 1em 0;
+}
+
+.mx-4 {
+  margin: 1.5em 0;
+}
+
+.mx-5 {
+  margin: 3em 0;
+}
+
+.my-0 {
+  margin: 0 0;
+}
+
+.my-1 {
+  margin: 0 .25em;
+}
+
+.my-2 {
+  margin: 0 .5em;
+}
+
+.my-3 {
+  margin: 0 1em;
+}
+
+.my-4 {
+  margin: 0 1.5em;
+}
+
+.my-5 {
+  margin: 0 3em;
+}
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mt-1 {
+  margin-top: .25em;
+}
+
+.mt-2 {
+  margin-top: .5em;
+}
+
+.mt-3 {
+  margin-top: 1em;
+}
+
+.mt-4 {
+  margin-top: 1.5em;
+}
+
+.mt-5 {
+  margin-top: 3em;
+}
+
+.mr-0 {
+  margin-right: 0;
+}
+
+.mr-1 {
+  margin-right: .25em;
+}
+
+.mr-2 {
+  margin-right: .5em;
+}
+
+.mr-3 {
+  margin-right: 1em;
+}
+
+.mr-4 {
+  margin-right: 1.5em;
+}
+
+.mr-5 {
+  margin-right: 3em;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-1 {
+  margin-bottom: .25em;
+}
+
+.mb-2 {
+  margin-bottom: .5em;
+}
+
+.mb-3 {
+  margin-bottom: 1em;
+}
+
+.mb-4 {
+  margin-bottom: 1.5em;
+}
+
+.mb-5 {
+  margin-bottom: 3em;
+}
+
+.ml-0 {
+  margin-left: 0;
+}
+
+.ml-1 {
+  margin-left: .25em;
+}
+
+.ml-2 {
+  margin-left: .5em;
+}
+
+.ml-3 {
+  margin-left: 1em;
+}
+
+.ml-4 {
+  margin-left: 1.5em;
+}
+
+.ml-5 {
+  margin-left: 3em;
+}
+
+//FLEX
+// .d-flex,
+// .fx-right,
+// .fx-left,
+// .align-center,
+// .justify-content-center {
+//   display: flex;
+// }
+.d-flex {
+  display: flex;
+}
+
+.fx-right {
+  flex-direction: row-reverse;
+}
+
+.fx-left {
+  flex-direction: row;
+}
+
+.justify-content-start {
+  justify-content: flex-start !important;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.justify-content-end {
+  justify-content: flex-end !important;
+}
+
+.justify-content-between {
+  justify-content: space-between !important;
+}
+
+.justify-content-around {
+  justify-content: space-around !important;
+}
+
+.align-center {
+  align-items: center;
+}
+
+//TEXT
+.text-start {
+  text-align: left !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-end {
+  text-align: right !important;
+}
+
+//BORDERS
+.border,
+.border-1 {
+  border: 1px solid;
+}
+
+.border-2 {
+  border: 2px solid;
+}
+
+.border-left-1,
+.border-left {
+  border-left: 1px solid;
+}
+
+.border-left-2 {
+  border-left: 2px solid;
+}
+
+.border-right-1,
+.border-right {
+  border-right: 1px solid;
+}
+
+.border-right-2 {
+  border-right: 2px solid;
+}
+
+.border-top-1,
+.border-top {
+  border-top: 1px solid;
+}
+
+.border-top-2 {
+  border-top: 2px solid;
+}
+
+.border-bottom-1,
+.border-bottom {
+  border-bottom: 1px solid;
+}
+
+.border-bottom-2 {
+  border-bottom: 2px solid;
+}
+
+.border-y-1,
+.border-y {
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+}
+
+.border-y-2 {
+  border-top: 2px solid;
+  border-bottom: 2px solid;
+}
+
+.border-x-1,
+.border-x {
+  border-left: 1px solid;
+  border-right: 1px solid;
+}
+
+.border-x-2 {
+  border-left: 2px solid;
+  border-right: 2px solid;
+}
+
+//BORDER RADIUS
+.br-1 {
+  border-radius: 2px;
+}
+
+.br-2 {
+  border-radius: 4px;
+}
+
+.br-3 {
+  border-radius: 8px;
+}
+
+//SOMBRA INTERIOR 
+.shadow-inner-1 {
+  box-shadow: inset 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-inner-2 {
+  box-shadow: inset 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-outer-1 {
+  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
+}
+
+.shadow-outer-2 {
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+}
+
+//OPACITY
+.opacity-100 {
+  opacity: 1;
+}
+
+.opacity-90 {
+  opacity: 0.9;
+}
+
+.opacity-80 {
+  opacity: 0.8;
+}
+
+.opacity-70 {
+  opacity: 0.7;
+}
+
+.opacity-60 {
+  opacity: 0.6;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-40 {
+  opacity: 0.4;
+}
+
+.opacity-30 {
+  opacity: 0.3;
+}
+
+.opacity-20 {
+  opacity: 0.2;
+}
+
+.opacity-10 {
+  opacity: 0.1;
+}
+
+//highlighter
+.highlighter,
+.highlighter-primary {
+  color: var(--primary-600)
+}
+
+.highlighter-succes {
+  color: var(--green-500)
+}
+
+.highlighter-warning {
+  color: var(--yellow-600)
+}
+
+.highlighter-error {
+  color: var(--red-600)
+}
+
+.highlighter-info {
+  color: var(--secondary-600)
+}
+
+/* ScrollBar */
+
+.s-scroll::-webkit-scrollbar {
+  width: 1.3rem;
+}
+
+.s-scroll::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.s-scroll::-webkit-scrollbar-thumb {
+  background-color: var(--neutrals-900);
+}
+
+.s-scroll::-webkit-scrollbar-thumb {
+  background-color: var(--neutrals-900);
+  border-radius: 1.3rem;
+}
+
+.s-scroll::-webkit-scrollbar-thumb {
+  background-color: var(--neutrals-900);
+  border-radius: 1.3rem;
+  border: 0.4rem solid transparent;
+  background-clip: content-box;
+}

package/src/lib/thumbnail/index.ts

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

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

@@ -0,0 +1,5 @@
+export class SThumbnail {
+    public title?: string;
+    public url!:string;
+    public size?: number;
+}

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

@@ -0,0 +1,3 @@
+<div class="image622">
+   <img appImageLoader alt="{{title}}" width="{{size}}" height="{{size}}" src="{{url}}">
+</div>

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

@@ -0,0 +1,6 @@
+.image622{
+    img{
+        border: 1px solid #CECECE;
+        border-radius: 4px;
+    }
+}

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

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

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

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 's-thumbnail',
+  templateUrl: './s-thumbnail.component.html',
+  styleUrls: ['./s-thumbnail.component.scss']
+})
+
+export class SThumbnailComponent implements OnInit {
+  
+  
+  @Input() title?: string;
+  @Input() url!: string;
+  @Input() size: number = 40
+
+  constructor(){}
+
+  ngOnInit(): void {
+    
+  
+  }
+}

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SThumbnailComponent } from './s-thumbnail.component';
+import { SharedModule } from '../shared/shared.module';
+
+
+@NgModule({
+  declarations: [
+    SThumbnailComponent
+  ],
+  imports: [
+    CommonModule,
+    SharedModule
+  ],
+  exports: [SThumbnailComponent]
+})
+export class SThumbnailModule { }