valtech-components 2.0.45 → 2.0.46

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

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

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

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

@@ -0,0 +1,37 @@
+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/{lib/components/organisms/no-content/types.d.ts → src/lib/components/organisms/no-content/types.ts}

@@ -1,7 +1,8 @@
 import { ImageMetadata } from '../../atoms/image/types';
 import { BannerMetadata } from '../../organisms/banner/types';
+
 export type NoContentMetadata = {
-    image: ImageMetadata;
-    topContent?: BannerMetadata;
-    bottomContent: BannerMetadata;
+  image: ImageMetadata;
+  topContent?: BannerMetadata;
+  bottomContent: BannerMetadata;
 };

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

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

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

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

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

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

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