valtech-components 2.0.46 → 2.0.47

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

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,70 +0,0 @@
-@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

@@ -1,40 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,22 +0,0 @@
-@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

@@ -1,29 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,33 +0,0 @@
-@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

@@ -1,23 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,17 +0,0 @@
-@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

@@ -1,27 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,10 +0,0 @@
-@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

@@ -1,28 +0,0 @@
-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/src/lib/components/molecules/button-group/button-group.component.scss

@@ -1,31 +0,0 @@
-@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

@@ -1,44 +0,0 @@
-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"
-        (onClick)="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

@@ -1,7 +0,0 @@
-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

@@ -1,46 +0,0 @@
-@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;
-}