valtech-components 2.0.26 → 2.0.28

package/src/lib/components/atoms/icon/icon.component.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
+import { IconMetadata } from './types';
+
+@Component({
+  selector: 'val-icon',
+  standalone: true,
+  imports: [CommonModule, IonIcon],
+  template: ` <ion-icon [ngClass]="[props.size]" [name]="props.name" [color]="props.color"></ion-icon> `,
+  styleUrls: ['./icon.component.scss'],
+})
+export class IconComponent implements OnInit {
+  @Input()
+  props: IconMetadata;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/atoms/icon/types.ts

@@ -0,0 +1,7 @@
+import { Color } from '@ionic/core';
+
+export interface IconMetadata {
+  size: 'small' | 'medium' | 'large' | 'xlarge';
+  color: Color;
+  name: string;
+}

package/src/lib/components/atoms/image/image.component.scss

@@ -0,0 +1,70 @@
+@import '../../styles/mixins.scss';
+
+.small {
+  width: 30%;
+
+  &.limited {
+    max-width: pxToRem(100);
+  }
+}
+
+.medium {
+  width: 50%;
+
+  &.limited {
+    max-width: pxToRem(240);
+  }
+}
+
+.large {
+  width: 70%;
+
+  &.limited {
+    max-width: pxToRem(450);
+  }
+}
+
+.xlarge {
+  width: 100%;
+
+  &.limited {
+    max-width: pxToRem(700);
+  }
+}
+
+.image {
+  opacity: 0;
+  height: 0;
+  display: block;
+}
+
+.visible {
+  animation: appereance ease-in 1s forwards;
+}
+
+@keyframes appereance {
+  0% {
+    opacity: 0;
+    height: 0;
+  }
+  100% {
+    opacity: 1;
+    height: auto;
+  }
+}
+
+.rounded {
+  border-radius: pxToRem(8);
+}
+
+.circular {
+  border-radius: 50%;
+}
+
+.bordered {
+  border: pxToRem(1) solid var(--ion-color-medium);
+}
+
+.shaded {
+  @include box-shadow-medium;
+}

package/src/lib/components/atoms/image/image.component.ts

@@ -0,0 +1,40 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { ImageMetadata } from './types';
+
+@Component({
+  selector: 'val-image',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <img
+      [ngClass]="['image', props.mode, props.size]"
+      [class.bordered]="props.bordered"
+      [class.shaded]="props.shaded"
+      [class.limited]="props.limited"
+      [class.visible]="available"
+      [src]="props.src"
+      [alt]="props.alt"
+      [style.width.px]="props.width"
+      [style.max-width.px]="props.width"
+      [style.height.px]="props.height"
+    />
+  `,
+  styleUrls: ['./image.component.scss'],
+})
+export class ImageComponent implements OnInit {
+  @Input()
+  props: ImageMetadata;
+
+  available: boolean = true;
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  changeToVisible() {
+    setInterval(() => {
+      this.available = true;
+    }, 100);
+  }
+}

package/src/lib/components/atoms/image/types.ts

@@ -0,0 +1,11 @@
+export type ImageMetadata = {
+  src: string;
+  alt: string;
+  mode: 'rounded' | 'circular' | 'box';
+  shaded: boolean;
+  bordered: boolean;
+  limited?: boolean;
+  size: 'small' | 'medium' | 'large' | 'xlarge';
+  width?: number;
+  height?: number;
+};

package/src/lib/components/atoms/progress-bar/progress-bar.component.scss

@@ -0,0 +1,22 @@
+@import '../../styles/mixins.scss';
+
+ion-progress-bar {
+  &.rounded {
+    border-radius: pxToRem(8);
+  }
+}
+
+.small {
+}
+
+.medium {
+  height: pxToRem(4);
+}
+
+.large {
+  height: pxToRem(6);
+}
+
+.xlarge {
+  height: pxToRem(8);
+}

package/src/lib/components/atoms/progress-bar/progress-bar.component.ts

@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { IonProgressBar } from '@ionic/angular/standalone';
+import { ProgressBarMetadata } from './types';
+
+@Component({
+  selector: 'val-progress-bar',
+  standalone: true,
+  imports: [CommonModule, IonProgressBar],
+  template: `
+    <ion-progress-bar
+      [ngClass]="[props.size]"
+      [class.rounded]="props.rounded"
+      [value]="props.progress"
+      [color]="props.color"
+      [buffer]="props.buffer"
+      [type]="props.type"
+    ></ion-progress-bar>
+  `,
+  styleUrls: ['./progress-bar.component.scss'],
+})
+export class ProgressBarComponent implements OnInit {
+  @Input()
+  props: ProgressBarMetadata;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/atoms/progress-bar/types.ts

@@ -0,0 +1,10 @@
+import { Color } from '@ionic/core';
+
+export interface ProgressBarMetadata {
+  progress: number;
+  size: 'small' | 'medium' | 'large' | 'xlarge';
+  color: Color;
+  buffer: number;
+  type: 'determinate' | 'indeterminate';
+  rounded: boolean;
+}

package/src/lib/components/atoms/text/text.component.scss

@@ -0,0 +1,33 @@
+@import '../../styles/typography.scss';
+
+.small {
+  @include body-small;
+
+  &.bold {
+    @include body-small-bold;
+  }
+}
+
+.medium {
+  @include body-medium;
+
+  &.bold {
+    @include body-medium-bold;
+  }
+}
+
+.large {
+  @include body-large;
+
+  &.bold {
+    @include body-large-bold;
+  }
+}
+
+.xlarge {
+  @include body-xlarge;
+
+  &.bold {
+    @include body-xlarge-bold;
+  }
+}

package/src/lib/components/atoms/text/text.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { IonText } from '@ionic/angular/standalone';
+import { TextMetadata } from './types';
+
+@Component({
+  selector: 'val-text',
+  standalone: true,
+  imports: [IonText],
+  template: `
+    <ion-text [color]="props.color">
+      <p [class]="props.size" [class.bold]="props.bold">{{ props.content }}</p>
+    </ion-text>
+  `,
+  styleUrls: ['./text.component.scss'],
+})
+export class TextComponent implements OnInit {
+  @Input()
+  props: TextMetadata;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/atoms/text/types.ts

@@ -0,0 +1,8 @@
+import { Color } from '@ionic/core';
+
+export interface TextMetadata {
+  size: 'small' | 'medium' | 'large' | 'xlarge';
+  color: Color;
+  content: string;
+  bold: boolean;
+}

package/src/lib/components/atoms/title/title.component.scss

@@ -0,0 +1,17 @@
+@import '../../styles/typography.scss';
+
+.small {
+  @include title-small;
+}
+
+.medium {
+  @include title-medium;
+}
+
+.large {
+  @include title-large;
+}
+
+.xlarge {
+  @include title-large;
+}

package/src/lib/components/atoms/title/title.component.ts

@@ -0,0 +1,27 @@
+import { NgIf } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { IonText } from '@ionic/angular/standalone';
+import { TitleMetadata } from './types';
+
+@Component({
+  selector: 'val-title',
+  standalone: true,
+  imports: [NgIf, IonText],
+  template: `
+    <ion-text [color]="props.color">
+      <p *ngIf="!props.bold" [class]="props.size">{{ props.content }}</p>
+      <b *ngIf="props.bold">
+        <p [class]="props.size">{{ props.content }}</p>
+      </b>
+    </ion-text>
+  `,
+  styleUrls: ['./title.component.scss'],
+})
+export class TitleComponent implements OnInit {
+  @Input()
+  props: TitleMetadata;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/atoms/title/types.ts

@@ -0,0 +1,8 @@
+import { Color } from '@ionic/core';
+
+export interface TitleMetadata {
+  size: 'small' | 'medium' | 'large' | 'xlarge';
+  color: Color;
+  content: string;
+  bold: boolean;
+}

package/src/lib/components/molecules/alert-box/alert-box.component.scss

@@ -0,0 +1,10 @@
+@import '../../styles/mixins.scss';
+
+.text {
+  margin-left: pxToRem(4);
+}
+
+.content-container {
+  display: flex;
+  align-items: flex-start;
+}

package/src/lib/components/molecules/alert-box/alert-box.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { BoxComponent } from '../../atoms/box/box.component';
+import { IconComponent } from '../../atoms/icon/icon.component';
+import { TextComponent } from '../../atoms/text/text.component';
+import { AlertBoxMetadata } from './types';
+
+@Component({
+  selector: 'val-alert-box',
+  standalone: true,
+  imports: [BoxComponent, IconComponent, TextComponent],
+  template: `
+    <val-box [props]="props.box">
+      <div class="content-container" body>
+        <val-icon [props]="props.icon"></val-icon>
+        <val-text class="text" [props]="props.text"></val-text>
+      </div>
+    </val-box>
+  `,
+  styleUrls: ['./alert-box.component.scss'],
+})
+export class AlertBoxComponent implements OnInit {
+  @Input()
+  props: AlertBoxMetadata;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

package/{lib/components/molecules/alert-box/types.d.ts → src/lib/components/molecules/alert-box/types.ts}

@@ -1,8 +1,9 @@
 import { BoxMetadata } from '../../atoms/box/types';
 import { IconMetadata } from '../../atoms/icon/types';
 import { TextMetadata } from '../../atoms/text/types';
+
 export interface AlertBoxMetadata {
-    box: BoxMetadata;
-    icon: IconMetadata;
-    text: TextMetadata;
+  box: BoxMetadata;
+  icon: IconMetadata;
+  text: TextMetadata;
 }

package/src/lib/components/molecules/button-group/button-group.component.scss

@@ -0,0 +1,31 @@
+@import '../../styles/mixins.scss';
+
+val-button {
+  display: inline-block;
+}
+
+.group-container {
+  width: 100%;
+
+  &.left {
+    text-align: left;
+  }
+
+  &.center {
+    text-align: center;
+  }
+
+  &.right {
+    text-align: right;
+  }
+
+  &.column {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  &.spaced {
+    display: flex;
+    justify-content: space-between;
+  }
+}

package/src/lib/components/molecules/button-group/button-group.component.ts

@@ -0,0 +1,44 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ButtonGroupMetadata } from './types';
+import { ButtonComponent } from '../../atoms/button/button.component';
+
+@Component({
+  selector: 'val-button-group',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
+  template: `
+    <div [ngClass]="['group-container', Position]" [class.column]="props.columned" style="width: 100%;">
+      <val-button
+        *ngFor="let b of props.buttons"
+        [props]="b"
+        (click)="clickHandler(b?.token)"
+        [ngStyle]="{ width: props.buttons.length === 1 ? '100%' : 'auto' }"
+      ></val-button>
+    </div>
+  `,
+  styleUrls: ['./button-group.component.scss'],
+})
+export class ButtonGroupComponent implements OnInit {
+  @Input()
+  props: ButtonGroupMetadata;
+
+  @Output()
+  onClick = new EventEmitter<string>();
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  clickHandler(token?: string) {
+    this.onClick.emit(token);
+  }
+
+  get Position(): string {
+    if (this.props.buttons.length === 1 && this.props.position === 'spaced') {
+      return 'right';
+    }
+
+    return this.props.position;
+  }
+}

package/src/lib/components/molecules/button-group/types.ts

@@ -0,0 +1,7 @@
+import { ButtonMetadata } from '../../types';
+
+export interface ButtonGroupMetadata {
+  buttons: ButtonMetadata[];
+  position: 'center' | 'left' | 'right' | 'spaced';
+  columned: boolean;
+}

package/src/lib/components/molecules/card/card.component.scss

@@ -0,0 +1,46 @@
+@import '../../styles/mixins.scss';
+
+ion-card {
+  &.tapable {
+    transition:
+      transform 0.3s ease,
+      box-shadow 0.3s ease;
+
+    &:hover {
+      transform: scale(1.01);
+      @include box-shadow-medium;
+    }
+  }
+}
+
+.tapable {
+  cursor: pointer;
+}
+
+.checker {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.complex-header {
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.complex-content {
+  padding-left: 10px;
+  padding-top: 4px;
+  padding-bottom: 10px;
+  // max-height: 50px;
+  // overflow-y: scroll;
+  // margin-bottom: 8px;
+}
+
+.complex {
+  border-radius: 16px;
+}