valtech-components 2.0.26 → 2.0.28

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

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

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

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

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

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

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

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

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

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

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

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