valtech-components 2.0.27 → 2.0.28

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/valtech-components",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": ["src/lib/assets/fonts"]
+  },
+  "assets": ["src/lib/components/styles", "src/lib/assets/fonts", "./styles"],
+  "allowedNonPeerDependencies": ["ng-otp-input", "@capacitor/browser"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.27",
+  "version": "2.0.28",
   "peerDependencies": {
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
@@ -8,21 +8,19 @@
     "rxjs": "~7.8.0"
   },
   "dependencies": {
+    "@capacitor/browser": "^6.0.3",
     "ng-otp-input": "^1.9.3",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
-  "module": "fesm2022/valtech-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/valtech-components.mjs",
-      "esm": "./esm2022/valtech-components.mjs",
-      "default": "./fesm2022/valtech-components.mjs"
-    }
+  "devDependencies": {
+    "@ionic/angular": "^8.0.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-organize-imports": "^4.1.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "scripts": {
+    "prettier": "prettier --write src/**/*"
   }
-}
+}

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

@@ -0,0 +1,20 @@
+@import '../../styles/mixins.scss';
+
+.box {
+  --border-radius: pxToRem(4);
+}
+
+.small {
+  width: pxToRem(28);
+  height: pxToRem(28);
+}
+
+.medium {
+  width: pxToRem(38);
+  height: pxToRem(38);
+}
+
+.large {
+  width: pxToRem(48);
+  height: pxToRem(48);
+}

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

@@ -0,0 +1,29 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IonAvatar } from '@ionic/angular/standalone';
+import { AvatarMetadata } from './types';
+
+@Component({
+  selector: 'val-avatar',
+  standalone: true,
+  imports: [IonAvatar],
+  template: `
+    <ion-avatar [class]="props.size" [class.box]="props.box" (click)="onClickHandler()">
+      <img alt="profile image" [src]="props.image || props.default" />
+    </ion-avatar>
+  `,
+  styleUrls: ['./avatar.component.scss'],
+})
+export class AvatarComponent implements OnInit {
+  @Input() props: AvatarMetadata;
+
+  @Output()
+  onClick = new EventEmitter();
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  onClickHandler() {
+    this.onClick.emit();
+  }
+}

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

@@ -0,0 +1,6 @@
+export interface AvatarMetadata {
+  image: string;
+  default: string;
+  size: 'small' | 'medium' | 'large';
+  box?: boolean;
+}

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

@@ -0,0 +1,57 @@
+@import '../../styles/mixins.scss';
+
+.bordered {
+  border: pxToRem(1) solid var(--ion-color-medium);
+}
+
+.box {
+  width: 100%;
+  margin: pxToRem(0);
+  border-radius: pxToRem(0);
+  box-shadow: none;
+  padding: pxToRem(4);
+
+  @include media-medium {
+    padding: pxToRem(8);
+  }
+}
+
+.icon {
+  cursor: pointer;
+  margin: pxToRem(0);
+  padding: pxToRem(0);
+  position: absolute;
+  right: pxToRem(4);
+  top: pxToRem(4);
+  font-size: pxToRem(16);
+
+  @include media-medium {
+    right: pxToRem(8);
+    top: pxToRem(8);
+    font-size: pxToRem(24);
+  }
+}
+
+.left-border {
+  border-left: pxToRem(3) solid $color-default-border;
+
+  &.small {
+    border-width: pxToRem(3);
+  }
+
+  &.medium {
+    border-width: pxToRem(6);
+  }
+
+  &.large {
+    border-width: pxToRem(7);
+  }
+
+  &.xlarge {
+    border-width: pxToRem(8);
+  }
+}
+
+.transparent {
+  --background: transparent;
+}

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

@@ -0,0 +1,38 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IonCard, IonIcon } from '@ionic/angular/standalone';
+import { BoxMetadata } from './types';
+
+@Component({
+  selector: 'val-box',
+  standalone: true,
+  imports: [CommonModule, IonCard, IonIcon],
+  template: `
+    <ion-card
+      class="box"
+      [color]="props.color"
+      [class.bordered]="props.bordered"
+      [class.transparent]="!props.color"
+      [class.left-border]="props.leftBorder"
+    >
+      <ion-icon *ngIf="!!props.icon" class="icon" [name]="props.icon" (click)="clickHandler()"></ion-icon>
+      <ng-content select="[body]"></ng-content>
+    </ion-card>
+  `,
+  styleUrls: ['./box.component.scss'],
+})
+export class BoxComponent implements OnInit {
+  @Input()
+  props: BoxMetadata;
+
+  @Output()
+  onClick = new EventEmitter();
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  clickHandler() {
+    this.onClick.emit();
+  }
+}

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

@@ -0,0 +1,8 @@
+import { Color } from '@ionic/core';
+
+export interface BoxMetadata {
+  color: Color;
+  icon: string;
+  bordered?: boolean;
+  leftBorder?: boolean;
+}

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

@@ -0,0 +1,5 @@
+@import '../../styles/variables.scss';
+
+ion-button {
+  font-family: var(--ion-default-font), Arial, sans-serif;
+}

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

@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IonButton, IonIcon, IonSpinner, IonText } from '@ionic/angular/standalone';
+import { DownloadService } from '../../../services/download.service';
+import { ButtonMetadata, ComponentStates } from '../../types';
+
+@Component({
+  selector: 'val-button',
+  standalone: true,
+  imports: [CommonModule, IonButton, IonIcon, IonSpinner, IonText],
+  template: `
+    <ion-button
+      [type]="props.type"
+      [color]="props.color"
+      [expand]="props.expand"
+      [fill]="props.fill"
+      [size]="props.size"
+      [href]="props.href"
+      [target]="props.target"
+      [shape]="props.shape"
+      (click)="clickHandler()"
+      [disabled]="props.state === states.DISABLED"
+    >
+      <ion-icon *ngIf="props.icon" [slot]="props.icon.slot" [name]="props.icon.name"></ion-icon>
+      <ion-spinner *ngIf="props.state === states.WORKING" name="circular"></ion-spinner>
+      <ion-text *ngIf="props.state !== states.WORKING">{{ props.text }}</ion-text>
+    </ion-button>
+  `,
+  styleUrls: ['./button.component.scss'],
+})
+export class ButtonComponent {
+  states = ComponentStates;
+
+  @Input()
+  props!: ButtonMetadata;
+
+  @Output()
+  onClick = new EventEmitter<string>();
+
+  constructor(private download: DownloadService) {}
+
+  ngOnInit() {}
+
+  clickHandler() {
+    if (this.props.download) {
+      this.download.downloadLinkFromBrowser(this.props.download);
+    }
+    if (this.props.state === this.states.DISABLED) {
+      return;
+    }
+    this.onClick.emit(this.props.token);
+  }
+}