sidesys-generic-ui 0.0.19 → 0.0.21

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/sidesys-generic-ui'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/sidesys-generic-ui",
+  "assets": ["./src/assets"],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,34 +1,16 @@
-{
-  "name": "sidesys-generic-ui",
-  "version": "0.0.19",
-  "exports": {
-    "./theme": {
-      "sass": "./src/lib/theme.scss"
-    },
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/sidesys-generic-ui.mjs",
-      "es2020": "./fesm2020/sidesys-generic-ui.mjs",
-      "es2015": "./fesm2015/sidesys-generic-ui.mjs",
-      "node": "./fesm2015/sidesys-generic-ui.mjs",
-      "default": "./fesm2020/sidesys-generic-ui.mjs"
-    }
-  },
-  "peerDependencies": {
-    "@angular/common": "~14.1.2",
-    "@angular/core": "~14.1.2"
-  },
-  "dependencies": {
-    "tslib": "^2.4.0"
-  },
-  "module": "fesm2015/sidesys-generic-ui.mjs",
-  "es2020": "fesm2020/sidesys-generic-ui.mjs",
-  "esm2020": "esm2020/sidesys-generic-ui.mjs",
-  "fesm2020": "fesm2020/sidesys-generic-ui.mjs",
-  "fesm2015": "fesm2015/sidesys-generic-ui.mjs",
-  "typings": "index.d.ts",
-  "sideEffects": false
+{
+  "name": "sidesys-generic-ui",
+  "version": "0.0.21", 
+  "exports": {
+    "./theme": {
+      "sass": "./src/lib/theme.scss"
+    }
+  },
+  "peerDependencies": {
+    "@angular/common": ">=13.0.0 <=17.0.0",
+    "@angular/core": ">=13.0.0 <=17.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.4.0"
+  }
 }

package/src/lib/alert/index.ts

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

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

@@ -0,0 +1,3 @@
+<div>
+   AlertComponent
+</div>

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

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

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

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 's-alert',
+  templateUrl: './s-alert.component.html',
+  styleUrls: ['./s-alert.component.css']
+})
+
+export class SAlertComponent implements OnInit {
+  // @Input() icon!: string;
+ 
+
+  constructor(){}
+
+  ngOnInit(): void {
+    
+  
+  }
+}

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

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

package/src/lib/avatar/components/profile-group/index.ts

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

package/src/lib/avatar/components/profile-group/s-profile-group.component.html

@@ -0,0 +1,9 @@
+<div class="content-profile-group976">
+    <div class="content-right976">
+        <s-avatar letters="{{user?.letters}}" display="{{user?.display}}" [size]="_size" [urlProfileImage]="user?.url" [status]="user?.status"></s-avatar>
+    </div>
+    <div class="content-left976">
+        <p class="name976">{{user?.name}}</p>
+        <span class="email976">{{user?.email}}</span>
+    </div>
+</div>

package/src/lib/avatar/components/profile-group/s-profile-group.component.scss

@@ -0,0 +1,40 @@
+:root {
+    --s-profile-size-title: 0.875rem;
+    --s-profile-size-email: 0.875rem;
+    --s-profile-size-line-height-title: 22px;
+}
+
+.content-profile-group976{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    
+    .content-left976{
+        display: flex;
+        flex-direction: column;
+        .name976{
+            font-weight: 700;
+            color: var(--secondary-600);
+            font-size: var(--s-profile-size-title);
+            line-height: var(--s-profile-size-line-height-title);
+            cursor:default;
+        }
+        .email976{
+            color: var(--secondary-500);
+            font-size: var(--s-profile-size-email);
+            line-height: 16px;
+            cursor:default;
+        }
+        p {
+            margin: 0;
+        }
+    }
+
+    .content-right976{
+        margin-right: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: space-evenly;
+    }
+}

package/src/lib/avatar/components/profile-group/s-profile-group.component.spec.ts

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

package/src/lib/avatar/components/profile-group/s-profile-group.component.ts

@@ -0,0 +1,59 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { SUser } from '../../../sub-menu/s-sub-menu-model';
+
+@Component({
+  selector: 's-profile-group',
+  templateUrl: './s-profile-group.component.html',
+  styleUrls: ['./s-profile-group.component.scss']
+})
+
+export class SProfileGroupComponent implements OnInit {
+
+
+  @Input() size: string = 'm'; //s , m , l , xl
+  @Input() user!: SUser | undefined
+  _size:string = 'm'
+
+
+  constructor(){}
+
+  ngOnInit(): void {
+    //TAMANOS DE AVATAR REFERIDO AL TALLE '128', '96', '48' , '32' , '24' , '16'
+
+    switch (this.size) {
+      case "s":
+          this._size = "24"
+          document.documentElement.style.setProperty('--s-profile-size-title', `0.875rem`);
+          document.documentElement.style.setProperty('--s-profile-size-email', `0.75rem`);
+          document.documentElement.style.setProperty('--s-profile-size-line-height-title', `14px`);
+      break;
+      case "m":
+          this._size = "32"
+          document.documentElement.style.setProperty('--s-profile-size-title', `0.875rem`);
+          document.documentElement.style.setProperty('--s-profile-size-email', `0.875rem`);
+          document.documentElement.style.setProperty('--s-profile-size-line-height-title', `20px`);
+      break;
+      case "l":
+          this._size = "48"
+          document.documentElement.style.setProperty('--s-profile-size-title', `1rem`);
+          document.documentElement.style.setProperty('--s-profile-size-email', `1rem`);
+          document.documentElement.style.setProperty('--s-profile-size-line-height-title', `20px`);
+      break;
+      case "xl":
+        this._size = "96"
+        document.documentElement.style.setProperty('--s-profile-size-title', `1.125rem`);
+        document.documentElement.style.setProperty('--s-profile-size-email', `1rem`);
+        document.documentElement.style.setProperty('--s-profile-size-line-height-title', `24px`);
+      break;
+    
+      default:
+        this._size = "32"
+        document.documentElement.style.setProperty('--s-profile-size-title', `0.875rem`);
+        document.documentElement.style.setProperty('--s-profile-size-email', `0.875rem`);
+        document.documentElement.style.setProperty('--s-profile-size-line-height-title', `20px`);
+      break;
+    }
+    
+  
+  }
+}

package/src/lib/avatar/components/profile-group/s-profile-group.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SProfileGroupComponent } from './s-profile-group.component';
+import { SAvatarModule } from '../../s-avatar.module';
+
+
+@NgModule({
+  declarations: [
+    SProfileGroupComponent
+  ],
+  imports: [
+    CommonModule,
+    SAvatarModule
+  ],
+  exports: [SProfileGroupComponent]
+})
+export class SProfileGroupModule { }

package/src/lib/avatar/index.ts

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

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

@@ -0,0 +1,50 @@
+<div class="no-select content-avatar size-{{size}}">
+   <ng-container [ngSwitch]="status">
+
+      <!--  Type of status approved , declined , blocked , online , offline , busy -->
+      <ng-container *ngSwitchCase="'approved'">
+         <div class="dot-state">
+            <s-icon-mat class="state-{{status}}">check_circle</s-icon-mat>
+         </div>
+      </ng-container>
+      <ng-container *ngSwitchCase="'declined'">
+         <div class="dot-state">
+            <s-icon-mat class="state-{{status}}">cancel</s-icon-mat>
+         </div>
+      </ng-container>
+      <ng-container *ngSwitchCase="'blocked'">
+         <div class="dot-state">
+            <s-icon-mat class="state-{{status}}">lock</s-icon-mat>
+         </div>
+      </ng-container>
+      <ng-container *ngSwitchCase="'online'">
+         <div class="dot-state state-{{status}}"></div>
+      </ng-container>
+      <ng-container *ngSwitchCase="'offline'">
+         <div class="dot-state state-{{status}}"></div>
+      </ng-container>
+      <ng-container *ngSwitchCase="'busy'">
+         <div class="dot-state">
+            <s-icon-mat class="state-{{status}}">remove</s-icon-mat>
+         </div>
+      </ng-container>
+
+   </ng-container>
+   <ng-container [ngSwitch]="display">
+      <ng-container *ngSwitchCase="'icon'">
+         <div class="content-icon dot-content size-{{size}}">
+            <s-icon-mat>person</s-icon-mat>
+         </div>
+      </ng-container>
+      <ng-container *ngSwitchCase="'avatar'">
+         <ng-container *ngIf="urlProfileImage">
+            <img appImageLoader src="{{urlProfileImage}}" alt="">
+         </ng-container>
+      </ng-container>
+      <ng-container *ngSwitchCase="'letters'">
+         <div class="content-icon dot-content size-{{size}} content-letters">
+            <s-icon-mat>{{letters}}</s-icon-mat>
+         </div>
+      </ng-container>
+   </ng-container>
+</div>

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

@@ -0,0 +1,239 @@
+s-avatar{
+    position: relative;
+}
+
+.content-avatar{
+    border-radius: 100%;
+}
+
+.content-avatar s-icon-mat{
+    line-height: 0;
+}
+
+.content-avatar .dot-state{
+    z-index: 3;
+    border-radius: 100%;
+    position:absolute;
+    background: white;
+    display: flex;
+    justify-content: center;
+}
+
+// Tipos Estados
+
+.content-avatar s-icon-mat.state-approved span{
+    color: var(--green-600);
+}
+.content-avatar s-icon-mat.state-declined span{
+    color: var(--red-600);
+}
+.content-avatar .dot-state:has(.state-blocked){
+    background: var(--primary-600);
+    align-items: center;
+}
+.content-avatar .dot-state:has(.state-busy){
+    background: var(--red-600);
+    color: var(--neutrals-1100);
+    border: 2px solid var(--neutrals-1100);
+}
+.content-avatar .dot-state.state-online , .content-avatar .dot-state.state-offline{
+    border: 2px solid var(--neutrals-1100);
+}
+.content-avatar s-icon-mat.state-blocked span{
+    color: var(--neutrals-1100);
+}
+.content-avatar .dot-state.state-online{
+    background-color: var(--green-600);
+}
+
+.content-avatar .dot-state.state-offline{
+    background-color: var(--neutrals-600);
+}
+
+.content-avatar.size-128, .dot-content.size-128{
+    height: 128px;
+    width: 128px;
+    .content-letters.content-icon s-icon-mat span{
+        font-size: 4.1rem;
+    }
+    .content-icon s-icon-mat span{
+        font-size: 6.6rem;
+    }
+    .dot-state{
+        width: 26px;
+        height: 26px;
+        left: 85px;
+    }
+    s-icon-mat span{
+        font-size: 1.66rem;
+    }
+    s-icon-mat.state-blocked span{
+        font-size: 1.3rem;
+    }
+    .dot-state:has(.state-blocked){
+        border: 2px solid var(--neutrals-1100);
+    }
+}
+
+.content-avatar.size-96, .dot-content.size-96{
+    height: 96px;
+    width: 96px;
+    .content-letters.content-icon s-icon-mat span{
+        font-size: 3.1rem;
+    }
+    .content-icon s-icon-mat span{
+        font-size: 4.6rem;
+    }
+    .dot-state{
+        width: 24px;
+        height: 24px;
+        left: 65px;
+    }
+    s-icon-mat span:has(.state-approved , .state-declined , .state-blocked){
+        font-size: 1.3rem;
+    }
+    s-icon-mat.state-blocked span{
+        font-size: 1.3rem;
+    }
+    .dot-state:has(.state-blocked){
+        border: 2px solid var(--neutrals-1100);
+    }
+}
+
+.content-avatar.size-48, .dot-content.size-48{
+    height: 48px;
+    width: 48px;
+    .content-letters.content-icon s-icon-mat span{
+        font-size: 1.5rem;
+    }
+    .content-icon s-icon-mat span{
+        font-size: 2rem;
+    }
+    .dot-state{
+        width: 10px;
+        height: 10px;
+        left: 33px;
+    }
+    s-icon-mat span{
+        font-size: 0.6rem;
+    }
+    s-icon-mat.state-busy span{
+        font-size: 0.66rem;
+    }    
+    .dot-state:has(.state-blocked){
+        border: 1px solid var(--neutrals-1100);
+        s-icon-mat span{
+            font-size: 0.5rem;
+        }
+    }
+    .dot-state.state-online , .dot-state.state-offline, .dot-state:has(.state-busy){
+        border: 1px solid var(--neutrals-1100);
+    }
+}
+
+.content-avatar.size-32, .dot-content.size-32{
+    height: 32px;
+    width: 32px;
+    .content-letters.content-icon s-icon-mat span{
+        font-size: 1rem;
+    }
+    .content-icon s-icon-mat span{
+        font-size: 1.3rem;
+    }
+    .dot-state{
+        width: 8px;
+        height: 8px;
+        left: 23px;
+    }
+    s-icon-mat span{
+        font-size: 0.58rem;
+    }
+    .dot-state:has(.state-blocked){
+        border: 1px solid var(--neutrals-1100);
+        s-icon-mat span{
+            font-size: 0.4rem;
+        }
+    }
+    .dot-state.state-online , .dot-state.state-offline, .dot-state:has(.state-busy){
+        border: 1px solid var(--neutrals-1100);
+    }
+}
+
+.content-avatar.size-24, .dot-content.size-24{
+    height: 24px;
+    width: 24px;
+    .content-letters.content-icon s-icon-mat span{
+        font-size: 0.7rem;
+    }
+    .content-icon s-icon-mat span{
+        font-size: 1rem;
+    }
+    .dot-state{
+        width: 6px;
+        height: 6px;
+        left: 17px;
+    }
+    s-icon-mat span{
+        font-size: 0.50rem;
+    }
+    .dot-state:has(.state-blocked){
+        border: 1px solid var(--neutrals-1100);
+        s-icon-mat span{
+            font-size: 0.3rem;
+        }
+    }
+    .dot-state.state-online , .dot-state.state-offline, .dot-state:has(.state-busy){
+        border: 1px solid var(--neutrals-1100);
+    }
+}
+
+.content-avatar.size-16, .dot-content.size-16{
+    height: 16px;
+    width: 16px;
+    .content-icon s-icon-mat span{
+        font-size: 0.5rem;
+    }
+    .dot-state{
+        width: 5px;
+        height: 5px;
+        left: 10px;
+    }
+    s-icon-mat span{
+        font-size: 0.4rem;
+    }
+    .dot-state:has(.state-blocked){
+        border: 1px solid var(--neutrals-1100);
+        s-icon-mat span{
+            font-size: 0.271rem;
+        }
+    }
+    .dot-state.state-online , .dot-state.state-offline, .dot-state:has(.state-busy){
+        border: 1px solid var(--neutrals-1100);
+    }
+}
+
+.dot-content{
+    background-color: var(--primary-600);
+    border-radius: 100%;
+    color: var(--neutrals-1100);
+}
+
+.content-avatar .content-icon{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.content-avatar .content-letters s-icon-mat span{
+    line-height: initial;
+    font-family: 'Roboto';
+    font-weight: 700;
+}
+
+// Custom del icono de person cuando no es imagen
+
+.content-avatar img {
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+}

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

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