@dropi/ui-components 1.0.0

package/src/components-source/storybook-doc-components/story-page/story-page.component.ts

@@ -0,0 +1,424 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TillteTableDocumentationComponent } from '@app/ui/storybook-doc-components/tillte-table-documentation/tillte-table-documentation.component';
+
+@Component({
+  selector: 'app-story-page',
+  standalone: true,
+  imports: [CommonModule,TillteTableDocumentationComponent],
+  templateUrl: './story-page.component.html',
+  styleUrls: ['./story-page.component.scss'],
+})
+export class StoryPageComponent implements OnInit {
+  heading = []
+  label = []
+  fontLineheight = []
+  
+  @Input() tittle: string ;
+  fontSize: { preview: string; nameStyleSize: string; desktop: string; mobile: string; className: string; }[];
+  fontWeight: { preview: string; nameStyleWeight: string; value: string; numericValue: number; className: string; }[];
+  fontFamily: { preview: string; nameStyle: string; value: string; className: string; }[];
+  body: { preview: string; nameStyle: string; fontSize: string; fontSizeValue: string; lineHeight: string; lineHeightValue: string; fontWeight: string; fontWeightValue: number; className: string; }[];
+  caption: { preview: string; nameStyle: string; fontSize: string; fontSizeValue: string; lineHeight: string; lineHeightValue: string; fontWeight: string; fontWeightValue: number; className:string}[];
+  descriptionHeading: string;
+  descriptionLabel: string;
+  descriptionBody: string;
+  descriptionCaption: string;
+  descriptionFontSize: string;
+  descriptionFontWeight: string;
+  descriptionFontLineHeight: string;
+  descriptionFontFamily: string;
+  
+
+  
+
+  ngOnInit(): void {
+
+    this.heading = [    
+      {
+        preview: 'H1',
+        nameStyle: 'H1',
+        fontSize: 'font-size-xxxxl',
+        valueFontSize: '36px',
+        lineHeight: 'lineheight-simple',
+        valueLineHeight: '110%',
+        fontWeight: 'font-weight-bold',
+        valueFontWeight: '700',
+        className: 'h1'
+      },
+      {
+        preview: 'H1 mobile',
+        nameStyle: 'H1',
+        fontSize: 'font-size-xxxxl',
+        valueFontSize: '32px',
+        lineHeight: 'lineheight-simple',
+        valueLineHeight: '110%',
+        fontWeight: 'font-weight-bold',
+        valueFontWeight: '700',
+        className: 'h1Mobile'
+      },
+      {
+        preview: 'H2',
+        nameStyle: 'H2',
+        fontSize: 'font-size-xxxl',
+        valueFontSize: '30px',
+        lineHeight: 'lineheight-simple',
+        valueLineHeight: '110%',
+        fontWeight: 'font-weight-bold',
+        valueFontWeight: '700',
+        className: 'h2'
+      },
+      {
+        preview: 'H2 mobile',
+        nameStyle: 'H2',
+        fontSize: 'font-size-xxxl',
+        valueFontSize: '26px',
+        lineHeight: 'lineheight-simple',
+        valueLineHeight: '110%',
+        fontWeight: 'font-weight-bold',
+        valueFontWeight: '700',
+        className: 'h2Mobile'
+      },
+      {
+        preview: 'H3',
+        nameStyle: 'H3',
+        fontSize: 'font-size-xxl',
+        valueFontSize: '24px',
+        lineHeight: 'lineheight-simple',
+        valueLineHeight: '110%',
+        fontWeight: 'font-weight-bold',
+        valueFontWeight: '700',
+        className: 'h3'
+      },
+      {
+        preview: 'H3 mobile',
+        nameStyle: 'H3',
+        fontSize: 'font-size-xxl',
+        valueFontSize: '20px',
+        lineHeight: 'lineheight-simple',
+        valueLineHeight: '110%',
+        fontWeight: 'font-weight-bold',
+        valueFontWeight: '700',
+        className: 'h3Mobile'
+      },
+      {
+        preview: 'H4',
+        nameStyle: 'H4',
+        fontSize: 'font-size-xl',
+        valueFontSize: '20px',
+        lineHeight: 'lineheight-simple',
+        valueLineHeight: '110%',
+        fontWeight: 'font-weight-bold',
+        valueFontWeight: '700',
+        className: 'h4'
+      },
+      {
+        preview: 'H4 mobile',
+        nameStyle: 'H4',
+        fontSize: 'font-size-xl',
+        valueFontSize: '18px',
+        lineHeight: 'lineheight-simple',
+        valueLineHeight: '110%',
+        fontWeight: 'font-weight-bold',
+        valueFontWeight: '700',
+        className: 'h4Mobile'
+      },
+      {
+        preview: 'H5',
+        nameStyle: 'H5',
+        fontSize: 'font-size-l',
+        valueFontSize: '18px',
+        lineHeight: 'lineheight-simple',
+        valueLineHeight: '110%',
+        fontWeight: 'font-weight-bold',
+        valueFontWeight: '700',
+        className: 'h5'
+      },
+      {
+        preview: 'H5 mobile',
+        nameStyle: 'H5',
+        fontSize: 'font-size-l',
+        valueFontSize: '16px',
+        lineHeight: 'lineheight-simple',
+        valueLineHeight: '110%',
+        fontWeight: 'font-weight-bold',
+        valueFontWeight: '700',
+        className: 'h5Mobile'
+      }
+    ]
+
+    this.label=[
+      {
+        preview: 'Label-L',
+        nameStyle: 'Label-L',
+        fontSize: 'font-size-m',
+        valueFontSize: '16px',
+        lineHeight: 'lineheight-simple',
+        valueLineHeight: '110%',
+        fontWeight: 'font-weight-bold',
+        valueFontWeight: '700',
+        className: 'labelL'
+      },
+      {
+        preview: 'Label-M',
+        nameStyle: 'Label-M',
+        fontSize: 'font-size-s',
+        valueFontSize: '14px',
+        lineHeight: 'lineheight-simple',
+        valueLineHeight: '110%',
+        fontWeight: 'font-weight-bold',
+        valueFontWeight: '700',
+        className: 'labelM'
+      },
+      {
+        preview: 'Label-S',
+        nameStyle: 'Label-S',
+        fontSize: 'font-size-xs',
+        valueFontSize: '12px',
+        lineHeight: 'lineheight-simple',
+        valueLineHeight: '110%',
+        fontWeight: 'font-weight-bold',
+        valueFontWeight: '700',
+        className: 'labelS'
+      }
+
+    ]
+
+    this.fontSize = [
+      {
+        preview: 'xxxxl',
+        nameStyleSize: 'font-size-xxxxl',
+        desktop: '36px',
+        mobile: '32px',
+        className: 'xxxxl'
+      },
+      {
+        preview: 'xxxl',
+        nameStyleSize: 'font-size-xxxl',
+        desktop: '30px',
+        mobile: '26px',
+        className: 'xxxl'
+      },
+      {
+        preview: 'xxl',
+        nameStyleSize: 'font-size-xxl',
+        desktop: '24px',
+        mobile: '20px',
+        className: 'xxl'
+      },
+      {
+        preview: 'xl',
+        nameStyleSize: 'font-size-xl',
+        desktop: '20px',
+        mobile: '18px',
+        className: 'xl'
+      },
+      {
+        preview: 'l',
+        nameStyleSize: 'font-size-l',
+        desktop: '18px',
+        mobile: '16px',
+        className: 'l'
+      },
+      {
+        preview: 'm',
+        nameStyleSize: 'font-size-m',
+        desktop: '16px',
+        mobile: '16px',
+        className: 'm'
+      },
+      {
+        preview: 's',
+        nameStyleSize: 'font-size-s',
+        desktop: '14px',
+        mobile: '14px',
+        className: 's'
+      },
+      {
+        preview: 'xs',
+        nameStyleSize: 'font-size-xs',
+        desktop: '12px',
+        mobile: '12px',
+        className: 'xs'
+      },
+      {
+        preview: 'xxs',
+        nameStyleSize: 'font-size-xxs',
+        desktop: '10px',
+        mobile: '10px',
+        className: 'xxs'
+      }
+    ];
+    
+    this.fontWeight = [
+      {
+        preview: 'Bold',
+        nameStyleWeight: 'font-weight-bold',
+        value: 'Bold',
+        numericValue: 700,
+        className: 'bold'
+      },
+      {
+        preview: 'Semibold',
+        nameStyleWeight: 'font-weight-semibold',
+        value: 'Semibold',
+        numericValue: 600,
+        className: 'semibold'
+      },
+      {
+        preview: 'Medium',
+        nameStyleWeight: 'font-weight-medium',
+        value: 'Medium',
+        numericValue: 500,
+        className: 'medium'
+      },
+      {
+        preview: 'Regular',
+        nameStyleWeight: 'font-weight-regular',
+        value: 'Regular',
+        numericValue: 400,
+        className: 'regular'
+      },
+      {
+        preview: 'Light',
+        nameStyleWeight: 'font-weight-light',
+        value: 'Light',
+        numericValue: 300,
+        className: 'light'
+      }
+    ];
+    
+    this.fontLineheight = [
+      {
+        preview: 'Simple',
+        nameStyleFontlineHeight: 'lineheight-simple',
+        value: '110%',
+        className: 'simple'
+      },
+      {
+        preview: 'Large',
+        nameStyleFontlineHeight: 'lineheight-large',
+        value: '150%',
+        className: 'large'
+      }
+    ];
+    
+    this.fontFamily = [
+      {
+        preview: 'Inter',
+        nameStyle: 'font-family-01',
+        value: 'Inter',
+        className: 'inter'
+      }
+    ];
+    
+    this.body = [
+      {
+        preview: 'Body-L-Medium',
+        nameStyle: 'Body-L-Medium',
+        fontSize: 'font-size-m',
+        fontSizeValue: '16px',
+        lineHeight: 'lineheight-large',
+        lineHeightValue: '150%',
+        fontWeight: 'font-weight-medium',
+        fontWeightValue: 500,
+        className: 'body-l-medium'
+      },
+      {
+        preview: 'Body-L-Regular',
+        nameStyle: 'Body-L-Regular',
+        fontSize: 'font-size-m',
+        fontSizeValue: '16px',
+        lineHeight: 'lineheight-large',
+        lineHeightValue: '150%',
+        fontWeight: 'font-weight-regular',
+        fontWeightValue: 400,
+        className: 'body-l-regular'
+      },
+      {
+        preview: 'Body-M-Medium',
+        nameStyle: 'Body-M-Medium',
+        fontSize: 'font-size-s',
+        fontSizeValue: '14px',
+        lineHeight: 'lineheight-large',
+        lineHeightValue: '150%',
+        fontWeight: 'font-weight-medium',
+        fontWeightValue: 500,
+        className: 'body-m-medium'
+      },
+      {
+        preview: 'Body-M-Regular',
+        nameStyle: 'Body-M-Regular',
+        fontSize: 'font-size-s',
+        fontSizeValue: '14px',
+        lineHeight: 'lineheight-large',
+        lineHeightValue: '150%',
+        fontWeight: 'font-weight-regular',
+        fontWeightValue: 400,
+        className: 'body-m-regular'
+      },
+      {
+        preview: 'Body-S-Medium',
+        nameStyle: 'Body-S-Medium',
+        fontSize: 'font-size-xs',
+        fontSizeValue: '12px',
+        lineHeight: 'lineheight-large',
+        lineHeightValue: '150%',
+        fontWeight: 'font-weight-medium',
+        fontWeightValue: 500,
+        className: 'body-s-medium'
+      },
+      {
+        preview: 'Body-S-Regular',
+        nameStyle: 'Body-S-Regular',
+        fontSize: 'font-size-xs',
+        fontSizeValue: '12px',
+        lineHeight: 'lineheight-large',
+        lineHeightValue: '150%',
+        fontWeight: 'font-weight-regular',
+        fontWeightValue: 400,
+        className: 'body-s-regular'
+      }
+    ];
+
+    this.caption = [
+      {
+        preview: 'Caption-M',
+        nameStyle: 'Caption-M',
+        fontSize: 'font-size-xs',
+        fontSizeValue: '12px',
+        lineHeight: 'lineheight-simple',
+        lineHeightValue: '110%',
+        fontWeight: 'font-weight-bold',
+        fontWeightValue: 700,
+        className: 'caption-m'
+      },
+      {
+        preview: 'Caption-S',
+        nameStyle: 'Caption-S',
+        fontSize: 'font-size-xxs',
+        fontSizeValue: '10px',
+        lineHeight: 'lineheight-simple',
+        lineHeightValue: '110%',
+        fontWeight: 'font-weight-bold',
+        fontWeightValue: 700,
+        className: 'caption-s'
+      }
+    ];
+
+    this.descriptionHeading = "Los encabezados están diseñados para establecer una jerarquía clara en el contenido. A continuación, se detallan los estilos definidos:"
+    this.descriptionLabel = "Las etiquetas se utilizan para textos breves y descriptivos:"
+    this.descriptionBody = "Para el contenido principal, se definen los siguientes estilos:"
+    this.descriptionCaption = "Para anotaciones o textos secundarios:"
+    this.descriptionFontSize= "Los tamaños de fuente están estandarizados para mantener la coherencia:"
+    this.descriptionFontWeight =  "Los pesos de fuente disponibles son:"
+    this.descriptionFontLineHeight= "Se definen dos alturas de línea principales:"
+    this.descriptionFontFamily= "En el proyecto Dropi, la coherencia visual y la accesibilidad son pilares fundamentales de nuestro diseño. Para garantizar una experiencia de usuario óptima y una identidad visual consistente, hemos seleccionado la familia tipográfica 'Inter' como nuestra fuente principal.'Inter' es una tipografía sans-serif diseñada específicamente para mejorar la legibilidad en pantallas digitales. Sus características incluyen una altura de x generosa y formas de letras claras, lo que facilita la lectura en diferentes tamaños y resoluciones. La implementación de 'Inter' en nuestros estilos CSS se realiza de la siguiente manera:"
+    
+  }
+
+
+
+}
+
+

package/src/components-source/storybook-doc-components/template-breakpoint-storybook/template-breakpoint-storybook.component.html

@@ -0,0 +1,35 @@
+<div class="container" [style]="'width: '+breakpoint+';'+(breakpoint == '250px' || breakpoint == '600px' ? 'border-radius: 10px;':'border-radius: 3px')">
+  <div class="display" [style]="(breakpoint == '250px' || breakpoint == '600px' ? 'border-radius: 10px;':'border-radius: 3px')">
+    <div class="nothc" *ngIf="breakpoint == '250px' || breakpoint == '600px'"></div>
+    <div class="all-display">
+
+      <div class="container-sidebar" *ngIf="breakpoint !== '250px' && breakpoint !== '600px'"  [ngStyle]="{
+        'width': containerTotal,
+        'background-image': container === '70px' 
+          ? 'url(assets/img/sideBar2.png)' 
+          : 'url(assets/img/sideBar.png)'
+      }">
+      </div>
+      <div class="boddy">
+        
+        <div class="navBar" [style]="breakpoint !== '250px' && breakpoint !== '600px' ? 'height: 70px;':'height: 20px;'">
+        </div>
+  
+        <div class="display-elements">
+          <div [style]="'width: '+margins+'px;background-color: gray;'"></div>
+          <div [style]="'width: 100%;display: grid;grid-template-columns: repeat('+columns+', 1fr);gap:'+gutters+'px;'+(container == '70px' && breakpoint !='1000px' ?'padding:0px 5rem;':'') ">
+            <div style="background-color: rgb(254, 180, 111);" *ngFor="let col of numberArray">
+              
+            </div>
+          </div>
+          <div [style]="'width: '+margins+'px;background-color: gray;'"></div>
+        </div>
+          
+       
+      </div>
+
+    </div>
+
+  </div>
+
+</div>

package/src/components-source/storybook-doc-components/template-breakpoint-storybook/template-breakpoint-storybook.component.scss

@@ -0,0 +1,64 @@
+.navBar{
+    width: 100%;
+   
+    // border: 0.5px;
+    // border-style: solid;
+}
+
+.container{
+    background-color: black;
+    padding: 0.3rem;
+    margin-top: 4rem;
+    height: 450px;
+    border: 0.5px;
+    border-style: solid;
+    border-color: rgb(93, 93, 93);
+}
+
+.boddy{
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+}
+
+.display{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: white;
+    border: 0.5px;
+    border-style: solid;
+    border-radius: 10px;
+    width: 100%;
+    height: 100%;
+}
+
+.nothc{
+    margin-top: 1px;
+    width: 1rem;
+    height: 1rem;
+    background-color: black;
+    border-radius: 50%;
+
+}
+
+.container-sidebar{
+
+   background-image: url('../../../../assets/img/sideBar.png');
+   background-repeat:no-repeat;
+   background-size:cover;
+   position: relative;
+}
+
+.display-elements{
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+.all-display{
+    display: flex;
+    width: 100%;
+    height: 100%;
+}

package/src/components-source/storybook-doc-components/template-breakpoint-storybook/template-breakpoint-storybook.component.ts

@@ -0,0 +1,71 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-template-breakpoint-storybook',
+  templateUrl: './template-breakpoint-storybook.component.html',
+  styleUrls: ['./template-breakpoint-storybook.component.scss'],
+  standalone:true,
+  imports:[CommonModule]
+})
+export class TemplateBreakpointStorybookComponent implements OnInit {
+  @Input() breakpoint:string  = '0PX'
+  @Input() columns:number  = 0
+  @Input() margins:number  = 0
+  @Input() gutters:number  = 0
+  @Input() container:string  = ""
+
+
+
+  numberArray: number[] = []; 
+  containerTotal = ''
+
+  constructor() { }
+
+  ngOnInit() {
+    this.changeSizewidth()
+    this.asingArray()
+    this.changeSizeContainer()
+    
+  }
+
+  changeSizewidth(){
+    
+    switch (this.breakpoint) {
+      case  '0PX':
+      this.breakpoint = "250px" 
+      break;
+
+      case  '600PX':
+        this.breakpoint = "600px" 
+        break;
+    
+      default:
+        break;
+    }
+  }
+
+  changeSizeContainer(){
+
+    switch (this.container) {
+      case  '686px Rigth':
+      this.containerTotal = '314px'
+      break;
+      case  '70px':
+        this.containerTotal = '70px'
+        break;
+        case  'max 1330px centered':
+          this.containerTotal = '314px'
+          break;
+      default:
+         this.containerTotal =''
+        break;
+    }
+
+  }
+
+  asingArray(){
+    this.numberArray = Array.from({ length: this.columns }, (_, i) => i)
+  }
+
+}

package/src/components-source/storybook-doc-components/tillte-table-documentation/tillte-table-documentation.component.html

@@ -0,0 +1,44 @@
+<h2 class="tittle-h2">{{tittle}}</h2>
+<hr>
+<p>
+  {{description}}
+</p>
+<br>
+<table class="table-heading">
+  <thead>
+    <tr>
+      <th *ngFor="let column of columns |slice:0:columns.length-1;let x = index"
+        [class]="x == 1 && type=='color' ? 'darkMode':''" scope="col">{{column}}</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let row of rows">
+      <td *ngFor="let prop of getPropertiesExceptLast(row);let i = index"
+        [class]="i == 1  && type=='color'? 'darkModeColumn':''">
+        <div [class]="'cell-content ' + (type=='color' ? 'content-color-teble' : '')">
+          <div *ngIf="(i==0 || i==1) && type=='color'" class="background-color-preview"
+            [style]="'background-color: '+prop.value+';'"></div>
+          <div *ngIf="(i==0 ) && type=='spacing'"
+            [style]="'background-color: orange;width:'+prop.value+';margin-right:1rem;height:1rem;border-radius:5px'">
+          </div>
+
+          <div *ngIf="(i==0 ) && type=='shadow'"
+          [style]="'background-color:white;width:4rem;margin-right:1rem;height:2rem;border-radius:5px;border:none;box-shadow:'+prop.value+';'">
+        </div>
+        
+        <div *ngIf="(i==0 ) && type=='borderRadius'"
+        [style]="'background-color:#C3C9D9;width:6rem;height:2rem;border-radius:'+prop.value+';border:none;'">
+      </div>
+
+          <div
+          *ngIf="(i!= 0 || (type !== 'shadow' && type !== 'borderRadius' ))"
+            (click)="(type == 'color' || type== 'spacing' || type== 'shadow' || type== 'borderRadius' ) && (prop.key == 'nombreDeToken' ) ? copyNameColor(prop.value):(prop.key == 'nameStyle' ? copyNameTex(prop.value): prop.key == 'name' || prop.key == 'nombreToken' || prop.key == 'nameStyleSize'  || prop.key == 'nameStyleWeight' || prop.key == 'nameStyleFontlineHeight'|| prop.key == 'token'? copyNameSimple(prop.value):'')"
+            [class]="i==0? getLastPropertyKey(row):null"
+            [style]="prop.key == 'nombreDeToken' || prop.key == 'name' || prop.key == 'nameStyle' || prop.key == 'nombreToken' || prop.key|| prop.key == 'nameStyleSize	'|| prop.key == 'nameStyleWeight'|| prop.key == 'nameStyleFontlineHeight' || prop.key == 'token' ?'cursor:pointer;':''">{{ prop.value }}</div>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<p-toast></p-toast>