valtech-components 2.0.28 → 2.0.29

package/src/lib/components/atoms/button/factory.ts

@@ -1,444 +0,0 @@
-import { ButtonMetadata, IconMetada } from '../../types';
-
-export const Icon = (name: string, slot: 'start' | 'end'): IconMetada => {
-  return {
-    name,
-    slot,
-  };
-};
-
-/* name convention: COLOR FILL SIZE [optionals: SHAPE EXPAND ICON HREF/DOWNLOAD] TYPE */
-
-export const BaseDefault = (text: string, type: 'button' | 'submit' | 'reset'): ButtonMetadata => {
-  return {
-    color: 'primary',
-    state: 'ENABLED',
-    text,
-    size: 'default',
-    type,
-  };
-};
-
-export const ClearDefault = (text: string, type: 'button' | 'submit' | 'reset'): ButtonMetadata => {
-  return { ...BaseDefault(text, type), fill: 'clear' };
-};
-
-export const ClearDefaultRound = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...ClearDefault(text, type), shape: 'round' };
-};
-
-export const SolidDefault = (text: string, type: 'button' | 'submit' | 'reset'): ButtonMetadata => {
-  return { ...BaseDefault(text, type), fill: 'solid' };
-};
-
-export const SolidDefaultRound = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...SolidDefault(text, type), shape: 'round' };
-};
-
-export const OutlineDefault = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...BaseDefault(text, type), fill: 'outline' };
-};
-
-export const OutlineDefaultRound = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...OutlineDefault(text, type), shape: 'round' };
-};
-
-export const ClearDefaultFull = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...ClearDefault(text, type), expand: 'full' };
-};
-
-export const ClearDefaultRoundFull = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...ClearDefaultRound(text, type), expand: 'full' };
-};
-
-export const ClearDefaultBlock = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...ClearDefault(text, type), expand: 'block' };
-};
-
-export const ClearDefaultRoundBlock = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...ClearDefaultRound(text, type), expand: 'block' };
-};
-
-export const SolidDefaultFull = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...SolidDefault(text, type), expand: 'full' };
-};
-
-export const SolidDefaultRoundFull = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...SolidDefaultRound(text, type), expand: 'full' };
-};
-
-export const SolidDefaultBlock = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...SolidDefault(text, type), expand: 'block' };
-};
-
-export const SolidDefaultRoundBlock = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...SolidDefaultRound(text, type), expand: 'block' };
-};
-
-export const OutlineDefaultFull = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...OutlineDefault(text, type), expand: 'full' };
-};
-
-export const OutlineDefaultRoundFull = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...OutlineDefaultRound(text, type), expand: 'full' };
-};
-
-export const OutlineDefaultBlock = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...OutlineDefault(text, type), expand: 'block' };
-};
-
-export const OutlineDefaultRoundBlock = (
-  text: string,
-  type: 'button' | 'submit' | 'reset'
-): ButtonMetadata => {
-  return { ...OutlineDefaultRound(text, type), expand: 'block' };
-};
-
-export const SolidDefaultButton = (text: string): ButtonMetadata => {
-  return SolidDefault(text, 'button');
-};
-
-export const SolidSmallButton = (text: string): ButtonMetadata => {
-  return { ...SolidDefault(text, 'button'), size: 'small' };
-};
-
-export const SolidLargeButton = (text: string): ButtonMetadata => {
-  return { ...SolidDefault(text, 'button'), size: 'large' };
-};
-
-export const SolidDefaultRoundButton = (text: string): ButtonMetadata => {
-  return SolidDefaultRound(text, 'button');
-};
-
-export const SolidSmallRoundButton = (text: string): ButtonMetadata => {
-  return { ...SolidDefaultRound(text, 'button'), size: 'small' };
-};
-
-export const SolidLargeRoundButton = (text: string): ButtonMetadata => {
-  return { ...SolidDefaultRound(text, 'button'), size: 'large' };
-};
-
-export const SolidFullButton = (text: string): ButtonMetadata => {
-  return SolidDefaultFull(text, 'button');
-};
-
-export const SolidBlockButton = (text: string): ButtonMetadata => {
-  return SolidDefaultBlock(text, 'button');
-};
-
-/** PRIMARY */
-
-export const PrimarySolidDefaultRoundButton = (text: string): ButtonMetadata => {
-  return { ...SolidDefaultRoundButton(text), color: 'primary' };
-};
-
-export const PrimarySolidDefaultRoundIconButton = (
-  text: string,
-  icon: IconMetada
-): ButtonMetadata => {
-  return { ...PrimarySolidDefaultRoundButton(text), icon };
-};
-
-export const PrimarySolidDefaultRoundHrefButton = (
-  text: string,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...PrimarySolidDefaultRoundButton(text), href, target };
-};
-
-export const PrimarySolidDefaultRoundIconHrefButton = (
-  text: string,
-  icon: IconMetada,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...PrimarySolidDefaultRoundIconButton(text, icon), href, target };
-};
-
-export const PrimarySolidSmallRoundButton = (text: string): ButtonMetadata => {
-  return { ...SolidSmallRoundButton(text), color: 'primary' };
-};
-
-export const PrimarySolidSmallRoundIconButton = (
-  text: string,
-  icon: IconMetada
-): ButtonMetadata => {
-  return { ...PrimarySolidSmallRoundButton(text), icon };
-};
-
-export const PrimarySolidSmallRoundHrefButton = (
-  text: string,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...PrimarySolidSmallRoundButton(text), href, target };
-};
-
-export const PrimarySolidSmallRoundIconHrefButton = (
-  text: string,
-  icon: IconMetada,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...PrimarySolidSmallRoundIconButton(text, icon), href, target };
-};
-
-export const PrimarySolidLargeRoundButton = (text: string): ButtonMetadata => {
-  return { ...SolidLargeRoundButton(text), color: 'primary' };
-};
-
-export const PrimarySolidLargeRoundIconButton = (
-  text: string,
-  icon: IconMetada
-): ButtonMetadata => {
-  return { ...PrimarySolidLargeRoundButton(text), icon };
-};
-
-export const PrimarySolidLargeRoundHrefButton = (
-  text: string,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...PrimarySolidLargeRoundButton(text), href, target };
-};
-
-export const PrimarySolidLargeRoundIconHrefButton = (
-  text: string,
-  icon: IconMetada,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...PrimarySolidLargeRoundIconButton(text, icon), href, target };
-};
-
-export const PrimarySolidBlockButton = (text: string): ButtonMetadata => {
-  return { ...SolidBlockButton(text), color: 'primary' };
-};
-
-export const PrimarySolidBlockIconButton = (text: string, icon: IconMetada): ButtonMetadata => {
-  return { ...PrimarySolidBlockButton(text), icon };
-};
-
-export const PrimarySolidBlockHrefButton = (
-  text: string,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...PrimarySolidBlockButton(text), href, target };
-};
-
-export const PrimarySolidBlockIconHrefButton = (
-  text: string,
-  icon: IconMetada,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...PrimarySolidBlockIconButton(text, icon), href, target };
-};
-
-export const PrimarySolidFullButton = (text: string): ButtonMetadata => {
-  return { ...SolidFullButton(text), color: 'primary' };
-};
-
-export const PrimarySolidFullIconButton = (text: string, icon: IconMetada): ButtonMetadata => {
-  return { ...PrimarySolidFullButton(text), icon };
-};
-
-export const PrimarySolidFullHrefButton = (
-  text: string,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...PrimarySolidFullButton(text), href, target };
-};
-
-export const PrimarySolidFullIconHrefButton = (
-  text: string,
-  icon: IconMetada,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...PrimarySolidFullIconButton(text, icon), href, target };
-};
-
-/** SECONDARY */
-
-export const SecondarySolidDefaultRoundButton = (text: string): ButtonMetadata => {
-  return { ...SolidDefaultRoundButton(text), color: 'secondary' };
-};
-
-export const SecondarySolidDefaultRoundIconButton = (
-  text: string,
-  icon: IconMetada
-): ButtonMetadata => {
-  return { ...SecondarySolidDefaultRoundButton(text), icon };
-};
-
-export const SecondarySolidDefaultRoundHrefButton = (
-  text: string,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...SecondarySolidDefaultRoundButton(text), href, target };
-};
-
-export const SecondarySolidDefaultRoundIconHrefButton = (
-  text: string,
-  icon: IconMetada,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...SecondarySolidDefaultRoundIconButton(text, icon), href, target };
-};
-
-export const SecondarySolidSmallRoundButton = (text: string): ButtonMetadata => {
-  return { ...SolidSmallRoundButton(text), color: 'secondary' };
-};
-
-export const SecondarySolidSmallRoundIconButton = (
-  text: string,
-  icon: IconMetada
-): ButtonMetadata => {
-  return { ...SecondarySolidSmallRoundButton(text), icon };
-};
-
-export const SecondarySolidSmallRoundHrefButton = (
-  text: string,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...SecondarySolidSmallRoundButton(text), href, target };
-};
-
-export const SecondarySolidSmallRoundIconHrefButton = (
-  text: string,
-  icon: IconMetada,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...SecondarySolidSmallRoundIconButton(text, icon), href, target };
-};
-
-export const SecondarySolidLargeRoundButton = (text: string): ButtonMetadata => {
-  return { ...SolidLargeRoundButton(text), color: 'secondary' };
-};
-
-export const SecondarySolidLargeRoundIconButton = (
-  text: string,
-  icon: IconMetada
-): ButtonMetadata => {
-  return { ...SecondarySolidLargeRoundButton(text), icon };
-};
-
-export const SecondarySolidLargeRoundHrefButton = (
-  text: string,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...SecondarySolidLargeRoundButton(text), href, target };
-};
-
-export const SecondarySolidLargeRoundIconHrefButton = (
-  text: string,
-  icon: IconMetada,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...SecondarySolidLargeRoundIconButton(text, icon), href, target };
-};
-
-export const SecondarySolidFullButton = (text: string): ButtonMetadata => {
-  return { ...SolidFullButton(text), color: 'secondary' };
-};
-
-export const SecondarySolidFullIconButton = (text: string, icon: IconMetada): ButtonMetadata => {
-  return { ...SecondarySolidFullButton(text), icon };
-};
-
-export const SecondarySolidFullHrefButton = (
-  text: string,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...SecondarySolidFullButton(text), href, target };
-};
-
-export const SecondarySolidFullIconHrefButton = (
-  text: string,
-  icon: IconMetada,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...SecondarySolidFullIconButton(text, icon), href, target };
-};
-
-export const SecondarySolidBlockButton = (text: string): ButtonMetadata => {
-  return { ...SolidBlockButton(text), color: 'secondary' };
-};
-
-export const SecondarySolidBlockIconButton = (text: string, icon: IconMetada): ButtonMetadata => {
-  return { ...SecondarySolidBlockButton(text), icon };
-};
-
-export const SecondarySolidBlockHrefButton = (
-  text: string,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...SecondarySolidBlockButton(text), href, target };
-};
-
-export const SecondarySolidBlockIconHrefButton = (
-  text: string,
-  icon: IconMetada,
-  href: string,
-  target: '_blank' | '_self' | '_parent' | '_top'
-): ButtonMetadata => {
-  return { ...SecondarySolidBlockIconButton(text, icon), href, target };
-};

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

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

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

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

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

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

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

@@ -1,62 +0,0 @@
-@import '../../styles/mixins.scss';
-@import '../../styles/variables.scss';
-
-.solid {
-  border-top: pxToRem(1) solid $color-default-hr;
-}
-
-.gradient {
-  height: pxToRem(2);
-
-  &.primary {
-    background: linear-gradient(to right, var(--ion-color-primary), var(--ion-color-light));
-  }
-
-  &.secondary {
-    background: linear-gradient(to right, var(--ion-color-secondary), var(--ion-color-light));
-  }
-
-  &.dark {
-    background: linear-gradient(to right, var(--ion-color-dark), var(--ion-color-light));
-  }
-
-  &.light {
-    background: linear-gradient(to right, var(--ion-color-light), $color-classic-white);
-  }
-
-  &.medium {
-    background: linear-gradient(to right, var(--ion-color-medium), $color-classic-white);
-  }
-}
-
-.small {
-  margin: pxToRem(16);
-}
-
-.medium {
-  margin: pxToRem(24) pxToRem(16);
-}
-
-.large {
-  margin: pxToRem(36) pxToRem(16);
-}
-
-.primary {
-  border-color: var(--ion-color-primary);
-}
-
-.secondary {
-  border-color: var(--ion-color-secondary);
-}
-
-.dark {
-  border-color: var(--ion-color-dark);
-}
-
-.light {
-  border-color: var(--ion-color-light);
-}
-
-.medium {
-  border-color: var(--ion-color-medium);
-}

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

@@ -1,18 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
-import { DividerMetadata } from './types';
-
-@Component({
-  selector: 'val-divider',
-  standalone: true,
-  imports: [CommonModule],
-  template: ` <div [ngClass]="['divider', props.size, props.color, props.fill]"></div> `,
-  styleUrls: ['./divider.component.scss'],
-})
-export class DividerComponent implements OnInit {
-  @Input()
-  props: DividerMetadata;
-  constructor() {}
-
-  ngOnInit() {}
-}

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

@@ -1,5 +0,0 @@
-export interface DividerMetadata {
-  size: 'small' | 'medium' | 'large';
-  color: 'primary' | 'secondary' | 'dark' | 'light' | 'medium';
-  fill: 'solid' | 'gradient';
-}

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

@@ -1,25 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.primary {
-  color: var(--ion-color-primary);
-}
-
-.secondary {
-  color: var(--ion-color-secondary);
-}
-
-.dark {
-  color: var(--ion-color-dark);
-}
-
-.medium {
-  color: var(--ion-color-medium);
-}
-
-.hoverable {
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}

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

@@ -1,43 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { DownloadService } from '../../../services/download.service';
-import { HrefMetadata } from './types';
-
-@Component({
-  selector: 'val-href',
-  standalone: true,
-  imports: [CommonModule],
-  template: `
-    <a
-      [ngClass]="[props.color]"
-      [class.hoverable]="props.hoverable"
-      [href]="props.url"
-      target="_blank"
-      (click)="onClickHandler($event)"
-      >{{ props.text }}</a
-    >
-  `,
-  styleUrls: ['./href.component.scss'],
-})
-export class HrefComponent implements OnInit {
-  @Input() props: HrefMetadata;
-
-  @Output()
-  onClick = new EventEmitter<string>();
-
-  constructor(private downloadService: DownloadService) {}
-
-  ngOnInit() {}
-
-  getFileName() {
-    return this.downloadService.getFileNameFromUrl(this.props.url);
-  }
-
-  onClickHandler(event: MouseEvent) {
-    if (this.props.download && this.props.url) {
-      event.preventDefault();
-      this.downloadService.downloadLinkFromBrowser(this.props.url);
-    }
-    this.onClick.emit(this.props.token);
-  }
-}

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

@@ -1,10 +0,0 @@
-import { Color } from '@ionic/core';
-
-export type HrefMetadata = {
-  url: string;
-  token: string;
-  text: string;
-  color: Color;
-  download: boolean;
-  hoverable: boolean;
-};

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

@@ -1,33 +0,0 @@
-@import '../../styles/mixins.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;
-  }
-}