valtech-components 2.0.46 → 2.0.47

package/src/lib/components/organisms/item-list/item-list.component.ts

@@ -1,223 +0,0 @@
-import { NgClass, NgStyle } from '@angular/common';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { RouterLink } from '@angular/router';
-import {
-  IonAvatar,
-  IonButton,
-  IonIcon,
-  IonItem,
-  IonLabel,
-  IonList,
-  IonListHeader,
-  IonNote,
-  IonSpinner,
-} from '@ionic/angular/standalone';
-import { IconService } from '../../../services/icons.service';
-import { resolveColor } from '../../../shared/utils/styles';
-import { ComponentStates } from '../../types';
-import { ListMetadata } from './types';
-
-@Component({
-  selector: 'val-item-list',
-  standalone: true,
-  imports: [
-    RouterLink,
-    NgStyle,
-    NgClass,
-    IonList,
-    IonListHeader,
-    IonLabel,
-    IonNote,
-    IonItem,
-    IonAvatar,
-    IonIcon,
-    IonButton,
-    IonSpinner,
-  ],
-  template: `
-    <div>
-      <ion-list
-        [inset]="props.rounded"
-        [class.shadowed]="props.shadowed"
-        [class.bordered]="props.bordered"
-        [ngStyle]="{
-          'border-color': props.bordered ? this.color : '',
-        }"
-      >
-        <ion-list-header>
-          <ion-label>{{ props.title }}</ion-label>
-        </ion-list-header>
-        @for (item of props.items; track item.text) {
-          @if (item.mode == 'justext') {
-            <ion-item
-              [lines]="item.lines"
-              [button]="item.clickable"
-              [disabled]="item.disabled"
-              (click)="clickHandler(item.token)"
-            >
-              @if (item.unreadIndicator) {
-                <div class="unread-indicator-wrapper" slot="start">
-                  <div class="unread-indicator"></div>
-                </div>
-              }
-
-              <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
-                <h2>{{ item.text }}</h2>
-
-                @if (item.comments) {
-                  <ion-note color="medium"> {{ item.comments }} </ion-note>
-                }
-              </ion-label>
-
-              @if (item.endNote) {
-                <ion-note slot="end">{{ item.endNote }}</ion-note>
-              }
-            </ion-item>
-          }
-
-          @if (item.mode == 'actionable') {
-            <ion-item [lines]="item.lines" [button]="item.clickable" [disabled]="item.disabled">
-              @if (item.unreadIndicator) {
-                <div class="unread-indicator-wrapper" slot="start">
-                  <div class="unread-indicator"></div>
-                </div>
-              }
-
-              <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
-                <h2>{{ item.text }}</h2>
-
-                @if (item.comments) {
-                  <ion-note color="medium"> {{ item.comments }} </ion-note>
-                }
-              </ion-label>
-
-              @if (item.actions) {
-                @for (action of item.actions; track action.token) {
-                  <ion-button
-                    fill="outline"
-                    color="dark"
-                    slot="end"
-                    [disabled]="action.state === states.WORKING"
-                    (click)="onActionClickHandler(action.token)"
-                  >
-                    @if (action.state !== states.WORKING) {
-                      @if (action.icon) {
-                        <ion-icon aria-hidden="true" [name]="action.icon" size="medium" slot="start"></ion-icon>
-                      }
-
-                      {{ action.description }}
-                    }
-
-                    @if (action.state === states.WORKING) {
-                      <ion-spinner class="action-spinner" name="circular"></ion-spinner>
-                    }
-                  </ion-button>
-                }
-              }
-            </ion-item>
-          }
-
-          @if (item.mode == 'route') {
-            <ion-item
-              [lines]="item.lines"
-              [button]="item.clickable"
-              [disabled]="item.disabled"
-              (click)="clickHandler(item.token)"
-              [routerLink]="item.routerLink"
-            >
-              @if (item.unreadIndicator) {
-                <div class="unread-indicator-wrapper" slot="start">
-                  <div class="unread-indicator"></div>
-                </div>
-              }
-
-              <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
-                <h2>{{ item.text }}</h2>
-
-                @if (item.comments) {
-                  <ion-note color="medium"> {{ item.comments }} </ion-note>
-                }
-              </ion-label>
-            </ion-item>
-          }
-
-          @if (item.mode == 'subtitule') {
-            <ion-item
-              [lines]="item.lines"
-              [button]="item.clickable"
-              [disabled]="item.disabled"
-              (click)="clickHandler(item.token)"
-            >
-              @if (item.unreadIndicator) {
-                <div class="unread-indicator-wrapper" slot="start">
-                  <div class="unread-indicator"></div>
-                </div>
-              }
-
-              <ion-label [ngClass]="{ 'ion-text-nowrap': item.ellipsis }">
-                <h1>{{ item.text }}</h1>
-                <p>{{ item.subtitle }}</p>
-              </ion-label>
-            </ion-item>
-          }
-
-          @if (item.mode == 'avatar') {
-            <ion-item
-              [lines]="item.lines"
-              [button]="item.clickable"
-              [disabled]="item.disabled"
-              (click)="clickHandler(item.token)"
-            >
-              <ion-avatar aria-hidden="true" slot="start">
-                <img alt="" [src]="item.image" />
-              </ion-avatar>
-              <ion-label>{{ item.text }}</ion-label>
-            </ion-item>
-          }
-
-          @if (item.mode == 'icon') {
-            <ion-item
-              [lines]="item.lines"
-              [button]="item.clickable"
-              [disabled]="item.disabled"
-              (click)="clickHandler(item.token)"
-            >
-              <ion-icon aria-hidden="true" [name]="item.icon" size="medium" slot="start"></ion-icon>
-              <ion-label>{{ item.text }}</ion-label>
-            </ion-item>
-          }
-        }
-      </ion-list>
-    </div>
-  `,
-  styleUrls: ['./item-list.component.scss'],
-})
-export class ItemListComponent implements OnInit {
-  states = ComponentStates;
-  defaultColor = 'primary';
-
-  @Input()
-  props: ListMetadata;
-
-  @Output()
-  onClick = new EventEmitter<string>();
-
-  @Output()
-  onActionClick = new EventEmitter<string>();
-
-  constructor(icon: IconService) {}
-
-  ngOnInit() {}
-
-  clickHandler(token?: string) {
-    this.onClick.emit(token);
-  }
-
-  onActionClickHandler(token?: string) {
-    this.onActionClick.emit(token);
-  }
-
-  color() {
-    return resolveColor(this.props.color || this.defaultColor);
-  }
-}

package/src/lib/components/organisms/item-list/types.ts

@@ -1,42 +0,0 @@
-import { Color } from '@ionic/core';
-import { ComponentState } from '../../types';
-
-export type ItemAction = {
-  token: string;
-  icon?: string;
-  description: string;
-  state: ComponentState;
-};
-
-export interface ItemMetadata {
-  token?: string;
-  mode: 'justext' | 'subtitule' | 'avatar' | 'icon' | 'route' | 'actionable';
-  text: string;
-  image?: string;
-  icon?: string;
-  comments?: string;
-  subtitle?: string;
-  endNote?: string;
-  actions?: ItemAction[];
-
-  color?: string;
-  lines?: 'full' | 'inset' | 'none';
-  button?: boolean;
-  detail?: boolean;
-  clickable?: boolean;
-  detailIcon?: string;
-  disabled?: boolean;
-  ellipsis?: boolean;
-  href?: string;
-  routerLink?: string | any[];
-  unreadIndicator?: boolean;
-}
-
-export interface ListMetadata {
-  color: Color;
-  bordered: boolean;
-  rounded: boolean;
-  shadowed: boolean;
-  title: string;
-  items: ItemMetadata[];
-}

package/src/lib/components/organisms/no-content/no-content.component.scss

@@ -1,11 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.image-container {
-  display: flex;
-  justify-content: center;
-  margin-bottom: pxToRem(16);
-}
-
-val-image .image {
-  margin: 0 auto;
-}

package/src/lib/components/organisms/no-content/no-content.component.ts

@@ -1,37 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { ImageComponent } from '../../atoms/image/image.component';
-import { BannerComponent } from '../banner/banner.component';
-import { NoContentMetadata } from './types';
-
-@Component({
-  selector: 'val-no-content',
-  standalone: true,
-  imports: [ImageComponent, BannerComponent],
-  template: `
-    @if (props.topContent) {
-      <div>
-        <val-banner [props]="props.topContent" (onClick)="onClickHandler($event)"></val-banner>
-      </div>
-    }
-    <val-image class="image-container" [props]="props.image"></val-image>
-    <div>
-      <val-banner [props]="props.bottomContent" (onClick)="onClickHandler($event)"></val-banner>
-    </div>
-  `,
-  styleUrls: ['./no-content.component.scss'],
-})
-export class NoContentComponent implements OnInit {
-  @Input()
-  props: NoContentMetadata;
-
-  @Output()
-  onClick = new EventEmitter<string>();
-
-  constructor() {}
-
-  ngOnInit() {}
-
-  onClickHandler(token: string) {
-    this.onClick.emit(token);
-  }
-}

package/src/lib/components/organisms/toolbar/toolbar.component.scss

@@ -1,13 +0,0 @@
-@import '../../styles/mixins.scss';
-
-ion-button {
-  font-family: var(--ion-default-font), Arial, sans-serif;
-}
-
-.left-buttons {
-  margin-left: pxToRem(-16);
-}
-
-.background {
-  background: var(--ion-background-color);
-}

package/src/lib/components/organisms/toolbar/toolbar.component.ts

@@ -1,123 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { NavController } from '@ionic/angular';
-import { IonButton, IonButtons, IonIcon, IonText, IonTitle, IonToolbar } from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
-import { chevronBackOutline } from 'ionicons/icons';
-import { AvatarComponent } from '../../atoms/avatar/avatar.component';
-import { ImageComponent } from '../../atoms/image/image.component';
-import { ToolbarAction, ToolbarActionType } from '../../types';
-import { ToolbarMetadata } from './types';
-
-@Component({
-  selector: 'val-toolbar',
-  standalone: true,
-  imports: [
-    CommonModule,
-    IonToolbar,
-    IonButtons,
-    IonButton,
-    IonIcon,
-    IonText,
-    IonTitle,
-    AvatarComponent,
-    ImageComponent,
-  ],
-  template: `
-    <ion-toolbar [color]="props.color" [class.background]="props.color === 'background'">
-      <ng-container *ngIf="props.withBack">
-        <ion-buttons class="left-buttons" slot="start" *ngIf="props.withBack">
-          <ion-button fill="clear" (click)="goBack()" [color]="props.textColor">
-            <ion-icon name="chevron-back-outline" [slot]="props.backText ? 'start' : 'icon-only'"></ion-icon>
-            <ion-text *ngIf="props.backText">{{ props.backText }}</ion-text>
-          </ion-button>
-        </ion-buttons>
-      </ng-container>
-      <ng-container *ngIf="props.withActions">
-        <ion-buttons slot="end" *ngIf="someInRight()">
-          <ng-container *ngFor="let action of rightActions()">
-            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
-              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
-            </ion-button>
-            <val-avatar
-              *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{ size: 'small', image: action.description, default: '' }"
-              (onClick)="clickHandler(action.token)"
-            ></val-avatar>
-            <val-image
-              *ngIf="action.type === actionTypes.IMAGE"
-              [props]="action.image"
-              (click)="clickHandler(action.token)"
-            ></val-image>
-            <ion-button *ngIf="action.type === actionTypes.BUTTON" (click)="clickHandler(action.token)">{{
-              action.description
-            }}</ion-button>
-          </ng-container>
-        </ion-buttons>
-        <ion-buttons slot="start" *ngIf="someInLeft()">
-          <ng-container *ngFor="let action of leftActions()">
-            <ion-button *ngIf="action.type === actionTypes.ICON" (click)="clickHandler(action.token)">
-              <ion-icon slot="icon-only" [name]="action.description" color="dark"></ion-icon>
-            </ion-button>
-            <val-avatar
-              *ngIf="action.type === actionTypes.AVATAR"
-              [props]="{ size: 'small', image: action.description, default: '' }"
-              (onClick)="clickHandler(action.token)"
-            ></val-avatar>
-            <val-image
-              *ngIf="action.type === actionTypes.IMAGE"
-              [props]="action.image"
-              (click)="clickHandler(action.token)"
-            ></val-image>
-            <ion-button *ngIf="action.type === actionTypes.BUTTON" (click)="clickHandler(action.token)">{{
-              action.description
-            }}</ion-button>
-          </ng-container>
-        </ion-buttons>
-      </ng-container>
-      <ion-title *ngIf="props.title" [color]="props.textColor">{{ props.title }}</ion-title>
-      <!-- experimental -->
-      <ng-content select="[toolbar-bottom]"></ng-content>
-    </ion-toolbar>
-  `,
-  styleUrls: ['./toolbar.component.scss'],
-})
-export class ToolbarComponent implements OnInit {
-  @Input()
-  props: ToolbarMetadata;
-
-  @Output()
-  onClick = new EventEmitter<string>();
-
-  actionTypes = ToolbarActionType;
-
-  constructor(private navCtrl: NavController) {
-    addIcons({ chevronBackOutline });
-  }
-
-  ngOnInit() {}
-
-  goBack(): void {
-    this.navCtrl.back();
-  }
-
-  rightActions(): ToolbarAction[] {
-    return this.props.actions.filter(x => x.position === 'right');
-  }
-
-  leftActions(): ToolbarAction[] {
-    return this.props.actions.filter(x => x.position === 'left');
-  }
-
-  someInRight(): boolean {
-    return !!this.props.actions.find(x => x.position === 'right');
-  }
-
-  someInLeft(): boolean {
-    return !!this.props.actions.find(x => x.position === 'left');
-  }
-
-  clickHandler(token?: string) {
-    this.onClick.emit(token);
-  }
-}

package/src/lib/components/organisms/toolbar/types.ts

@@ -1,12 +0,0 @@
-import { Color } from '@ionic/core';
-import { ToolbarAction } from '../../types';
-
-export type ToolbarMetadata = {
-  withBack: boolean;
-  backText?: string;
-  withActions: boolean;
-  color?: Color;
-  textColor?: Color;
-  title: string;
-  actions: ToolbarAction[];
-};

package/src/lib/components/organisms/wizard/types.ts

@@ -1,24 +0,0 @@
-import { ButtonMetadata, ComponentState } from '../../types';
-import { NoContentMetadata } from '../no-content/types';
-
-export type WizardMetadata = {
-  state: ComponentState;
-  current: number;
-  steps: Steps;
-  error: Step;
-};
-
-export type Step = {
-  titles: NoContentMetadata;
-  buttons: ButtonMetadata[];
-};
-
-export type Steps = {
-  [step: number]: Step;
-};
-
-export enum MOTION {
-  BACKWARD,
-  FORWARD,
-  RETRY,
-}

package/src/lib/components/organisms/wizard/wizard-footer/wizard-footer.component.ts

@@ -1,90 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { ProgressBarComponent } from '../../../atoms/progress-bar/progress-bar.component';
-import { ButtonGroupComponent } from '../../../molecules/button-group/button-group.component';
-import { ButtonMetadata, ComponentStates } from '../../../types';
-import { FooterComponent } from '../../footer/footer.component';
-import { MOTION, Step, WizardMetadata } from '../types';
-
-@Component({
-  selector: 'val-wizard-footer',
-  standalone: true,
-  imports: [FooterComponent, ProgressBarComponent, ButtonGroupComponent],
-  template: `
-    <val-footer
-      [props]="{
-        bordered: false,
-        translucent: false,
-        toolbar: {
-          title: '',
-          actions: [],
-          color: 'background',
-          withBack: false,
-          withActions: false,
-        },
-      }"
-    >
-      <val-progress-bar
-        extra
-        [props]="{ progress: Progress, color: '', type: 'determinate', buffer: 1, size: 'small', rounded: false }"
-      ></val-progress-bar>
-      <val-button-group
-        extra
-        [props]="{ buttons: actions, position: 'left', columned: false }"
-        position="spaced"
-        (onClick)="clickHandler($event)"
-      ></val-button-group>
-    </val-footer>
-  `,
-  styleUrls: ['./wizard-footer.component.scss'],
-})
-export class WizardFooterComponent implements OnInit {
-  @Input()
-  props: WizardMetadata;
-
-  @Output()
-  onClick = new EventEmitter<{ current: number; motion: MOTION }>();
-
-  wrapperId = 'wizard-wrapper';
-
-  constructor() {}
-
-  ngOnInit() {}
-
-  clickHandler(token?: string) {
-    if (!token) {
-      return;
-    }
-    if (token.includes('right')) {
-      this.tryToStep(MOTION.FORWARD);
-    }
-    if (token.includes('left')) {
-      this.tryToStep(MOTION.BACKWARD);
-    }
-  }
-
-  get Current(): Step {
-    return this.props.steps[this.props.current];
-  }
-
-  get Progress(): number {
-    if (this.props.steps && this.props.current) {
-      return this.props.current / Object.keys(this.props.steps).length;
-    }
-    return 0;
-  }
-
-  get actions(): ButtonMetadata[] {
-    if (this.props.state === ComponentStates.ERROR && this.Current.buttons.length > 1) {
-      this.Current.buttons[1].state = ComponentStates.DISABLED;
-    }
-
-    if (this.props.current === 1 && this.Current.buttons.length > 1) {
-      return [this.Current.buttons[1]];
-    }
-    return this.Current.buttons;
-  }
-
-  tryToStep(motion: MOTION): void {
-    this.onClick.emit({ current: this.props.current, motion });
-  }
-}

package/src/lib/components/organisms/wizard/wizard.component.scss

@@ -1,15 +0,0 @@
-@import '../../styles/mixins.scss';
-
-.wrapper {
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  position: relative;
-}
-
-.step {
-  min-height: pxToRem(150);
-  margin: 16px 0;
-  text-align: center;
-}