valtech-components 1.3.0 → 1.6.0

package/.nvmrc

@@ -0,0 +1 @@
+v20.11.1

package/.releaserc

@@ -0,0 +1,12 @@
+{
+  "branches": [
+    "main"
+  ],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/npm"
+  ],
+  "pkgRoot": ".",
+  "npmPublish": false
+}

package/ng-package.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/valtech-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    "src/lib/components/styles",
+    "./styles"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "1.3.0",
+  "version": "1.6.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/solucionesvaltech/valtech-workspace/"
@@ -14,21 +14,18 @@
     "@ionic/angular": "^7.8.0"
   },
   "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "build": "ng build",
+    "build-prod": "ng build --configuration production",
+    "release": "npx semantic-release --no-ci && npm run build-prod && npm publish && git add package.json package-lock.json && git commit --amend --no-edit --noverify && git push"
+  },
   "dependencies": {
     "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": "^7.8.0",
+    "@semantic-release/npm": "^12.0.0"
   }
 }

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

@@ -0,0 +1,3 @@
+<ion-avatar [class]="size" [class.box]="box" (click)="onClickHandler()">
+  <img alt="profile image" [src]="image || default" />
+</ion-avatar>

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(24);
+  height: pxToRem(24);
+}
+
+.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,28 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'val-avatar',
+  templateUrl: './avatar.component.html',
+  styleUrls: ['./avatar.component.scss'],
+})
+export class AvatarComponent implements OnInit {
+  @Input()
+  image: string;
+  @Input()
+  default: string;
+  @Input()
+  size: 'small' | 'medium' | 'large' = 'medium';
+  @Input()
+  box: boolean = false;
+
+  @Output()
+  onClick = new EventEmitter();
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  onClickHandler() {
+    this.onClick.emit();
+  }
+}

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

@@ -0,0 +1,17 @@
+<ion-button
+  [type]="props.type"
+  [color]="props.color"
+  [expand]="props.expand"
+  [fill]="props.fill"
+  [size]="props.size"
+  [href]="props.href"
+  [target]="props.target"
+  [download]="props.download"
+  [shape]="props.shape"
+  [href]="props.href"
+  (click)="clickHandler()"
+>
+  <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>

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,26 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ButtonMetadata } from './types';
+import { ComponentStates } from '../../types';
+
+@Component({
+  selector: 'val-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss'],
+})
+export class ButtonComponent implements OnInit {
+  states = ComponentStates;
+
+  @Input()
+  props!: ButtonMetadata;
+
+  @Output()
+  onClick = new EventEmitter();
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  clickHandler() {
+    this.onClick.emit();
+  }
+}

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

@@ -0,0 +1,378 @@
+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/button/types.ts

@@ -0,0 +1,22 @@
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+
+export interface IconMetada {
+  name: string;
+  slot: 'start' | 'end';
+}
+
+export interface ButtonMetadata {
+  expand?: 'full' | 'block';
+  href?: string;
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  download?: string;
+  color: Color;
+  state: ComponentState;
+  text: string;
+  icon?: IconMetada;
+  shape?: 'round';
+  size?: 'small' | 'default' | 'large';
+  fill?: 'clear' | 'outline' | 'solid' | 'default';
+  type: 'button' | 'submit' | 'reset';
+}

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

@@ -0,0 +1,5 @@
+<ion-text [color]="color">
+  <p [class]="size">
+    {{ content }}
+  </p>
+</ion-text>

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,20 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Color } from '@ionic/core';
+
+@Component({
+  selector: 'val-display',
+  templateUrl: './display.component.html',
+  styleUrls: ['./display.component.scss'],
+})
+export class DisplayComponent implements OnInit {
+  @Input()
+  size: 'small' | 'medium' | 'large' | 'xlarge';
+  @Input()
+  color: Color;
+  @Input()
+  content: string;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

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

@@ -0,0 +1 @@
+<div [ngClass]="['divider', size, color, fill]"></div>

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

@@ -0,0 +1,54 @@
+@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);
+  }
+}
+
+.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);
+}