valtech-components 0.0.11 → 1.0.0

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

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'val-divider',
+  templateUrl: './divider.component.html',
+  styleUrls: ['./divider.component.scss'],
+})
+export class DividerComponent implements OnInit {
+  @Input()
+  size: 'small' | 'medium' | 'large';
+  @Input()
+  color: 'primary' | 'secondary' | 'dark' | 'light';
+  @Input()
+  fill: 'solid' | 'gradient';
+
+  constructor() {}
+
+  ngOnInit() {}
+}

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

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

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

@@ -0,0 +1,33 @@
+@import '../../styles/typography.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;
+  }
+}

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

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Color } from '@ionic/core';
+
+@Component({
+  selector: 'val-text',
+  templateUrl: './text.component.html',
+  styleUrls: ['./text.component.scss'],
+})
+export class TextComponent implements OnInit {
+  @Input()
+  size: 'small' | 'medium' | 'large' | 'xlarge';
+  @Input()
+  color: Color;
+  @Input()
+  content: string;
+  @Input()
+  bold: boolean = false;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

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

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

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

@@ -0,0 +1,13 @@
+@import '../../styles/typography.scss';
+
+.small {
+  @include title-small;
+}
+
+.medium {
+  @include title-medium;
+}
+
+.large {
+  @include title-large;
+}

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

@@ -0,0 +1,20 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Color } from '@ionic/core';
+
+@Component({
+  selector: 'val-title',
+  templateUrl: './title.component.html',
+  styleUrls: ['./title.component.scss'],
+})
+export class TitleComponent implements OnInit {
+  @Input()
+  size: 'small' | 'medium' | 'large' | 'xlarge';
+  @Input()
+  color: Color;
+  @Input()
+  content: string;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/molecules/content-loader/content-loader.component.html

@@ -0,0 +1,6 @@
+<div [ngClass]="['spinner-wrapper', size]">
+  <ion-spinner [ngClass]="[size]" [name]="name" [color]="color"></ion-spinner>
+  <ion-text [color]="color"
+    ><p>{{ text }}</p></ion-text
+  >
+</div>

package/src/lib/components/molecules/content-loader/content-loader.component.scss

@@ -0,0 +1,42 @@
+@import "../../styles/mixins.scss";
+
+.small {
+  width: pxToRem(24);
+  height: pxToRem(24);
+}
+
+.medium {
+  width: pxToRem(38);
+  height: pxToRem(38);
+}
+
+.large {
+  width: pxToRem(48);
+  height: pxToRem(48);
+}
+
+.spinner-wrapper {
+  width: 100%;
+  text-align: center;
+
+  &.small {
+    height: pxToRem(72);
+    padding-top: pxToRem(24);
+
+    @include body-small;
+  }
+
+  &.medium {
+    height: pxToRem(98);
+    padding-top: pxToRem(32);
+
+    @include body-medium;
+  }
+
+  &.large {
+    height: pxToRem(108);
+    padding-top: pxToRem(42);
+
+    @include body-large;
+  }
+}

package/src/lib/components/molecules/content-loader/content-loader.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Color } from '@ionic/core';
+
+@Component({
+  selector: 'val-content-loader',
+  templateUrl: './content-loader.component.html',
+  styleUrls: ['./content-loader.component.scss'],
+})
+export class ContentLoaderComponent implements OnInit {
+  @Input()
+  color: Color = 'primary';
+  @Input()
+  size: 'small' | 'medium' | 'large' = 'small';
+  @Input()
+  name: 'circular' | 'crescent' | 'dots' | 'lines-sharp' = 'circular';
+  @Input()
+  text: string;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

package/src/lib/components/molecules/link/link.component.html

@@ -0,0 +1,12 @@
+<div>
+  <ion-button
+    type="button"
+    [color]="color"
+    fill="clear"
+    [size]="size"
+    (click)="onClickHandler()"
+  >
+    <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
+    <ion-text>{{ text }}</ion-text>
+  </ion-button>
+</div>

package/src/lib/components/molecules/link/link.component.scss

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

package/src/lib/components/molecules/link/link.component.ts

@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Color } from '@ionic/core';
+
+@Component({
+  selector: 'val-link',
+  templateUrl: './link.component.html',
+  styleUrls: ['./link.component.scss'],
+})
+export class LinkComponent implements OnInit {
+  @Input()
+  text: string;
+  @Input()
+  size: 'small' | 'default' | 'large';
+  @Input()
+  color: Color;
+
+  @Output()
+  onClick = new EventEmitter();
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  onClickHandler() {
+    this.onClick.emit();
+  }
+}

package/src/lib/components/styles/mixins.scss

@@ -1,36 +1,30 @@
-@import "./media-queries.scss";
-@import "./variables.scss";
-@import "./functions.scss";
-@import "./typography.scss";
+@import './media-queries.scss';
+@import './variables.scss';
+@import './functions.scss';
+@import './typography.scss';
 
 @mixin box-shadow-small {
-  box-shadow: 0 pxToRem(4) pxToRem(12)
-    addColorOpacity($color-default-shadow, 0.07);
+  box-shadow: 0 pxToRem(4) pxToRem(12) addColorOpacity($color-default-shadow, 0.07);
 }
 
 @mixin box-shadow-small-top {
-  box-shadow: 0 pxToRem(-4) pxToRem(12)
-    addColorOpacity($color-default-shadow, 0.07);
+  box-shadow: 0 pxToRem(-4) pxToRem(12) addColorOpacity($color-default-shadow, 0.07);
 }
 
 @mixin box-shadow-medium {
-  box-shadow: pxToRem(3) pxToRem(10) pxToRem(8)
-    addColorOpacity($color-default-shadow, 0.1);
+  box-shadow: pxToRem(3) pxToRem(10) pxToRem(8) addColorOpacity($color-default-shadow, 0.1);
 }
 
 @mixin box-shadow-medium-bottom {
-  box-shadow: pxToRem(-3) pxToRem(10) pxToRem(8)
-    addColorOpacity($color-default-shadow, 0.1);
+  box-shadow: pxToRem(-3) pxToRem(10) pxToRem(8) addColorOpacity($color-default-shadow, 0.1);
 }
 
 @mixin box-shadow-large {
-  box-shadow: 0 pxToRem(10) pxToRem(16)
-    addColorOpacity($color-default-shadow, 0.08);
+  box-shadow: 0 pxToRem(10) pxToRem(16) addColorOpacity($color-default-shadow, 0.08);
 }
 
 @mixin box-shadow-large-top {
-  box-shadow: 0 pxToRem(-10) pxToRem(16)
-    addColorOpacity($color-default-shadow, 0.07);
+  box-shadow: 0 pxToRem(-10) pxToRem(16) addColorOpacity($color-default-shadow, 0.07);
 }
 
 @mixin transform-translateY($value) {

package/src/lib/components/styles/overrides.scss

@@ -9,143 +9,147 @@ h4,
 h5,
 h6,
 p {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 form {
-    width: 100%;
+  width: 100%;
 }
 
 /** ionic components **/
 
 ion-grid,
 ion-col {
-    padding: 0;
+  padding: 0;
 }
 
 ion-button {
-    font-weight: $font-weight-semi-bold;
+  font-weight: $font-weight-semi-bold;
 }
 
 ion-card {
-    border-radius: pxToRem(8);
-    margin: pxToRem(16) auto;
+  border-radius: pxToRem(8);
+  margin: pxToRem(16) auto;
 }
 
 input {
-    border: pxToRem(1) solid var(--ion-color-medium) !important;
-    border-radius: pxToRem($border-radius-small) !important;
+  border: pxToRem(1) solid var(--ion-color-medium) !important;
+  border-radius: pxToRem($border-radius-small) !important;
 
-    &:focus {
-        border: pxToRem(2) solid var(--ion-color-primary) !important;
-    }
+  &:focus {
+    border: pxToRem(2) solid var(--ion-color-primary) !important;
+  }
 
-    padding: 10px !important;
+  padding: 10px !important;
 }
 
 input,
 ion-datetime,
 ion-select {
-    margin-top: pxToRem(8);
-    padding-left: pxToRem(10) !important;
-    border: pxToRem(1) solid var(--ion-color-medium) !important;
-    border-radius: pxToRem($border-radius-small) !important;
+  margin-top: pxToRem(8);
+  padding-left: pxToRem(10) !important;
+  border: pxToRem(1) solid var(--ion-color-medium) !important;
+  border-radius: pxToRem($border-radius-small) !important;
 
-    &:focus {
-        border: pxToRem(2) solid var(--ion-color-primary) !important;
-    }
+  &:focus {
+    border: pxToRem(2) solid var(--ion-color-primary) !important;
+  }
 }
 
 ion-label {
-    text-align: start;
-    font-weight: $font-weight-bold;
+  text-align: start;
+  font-weight: $font-weight-bold;
 }
 
 ion-toolbar {
-    --background: transparent;
+  --background: transparent;
 }
 
 ion-input {
-    margin-top: 0px;
+  margin-top: 0px;
 }
 
 ion-select {
-    padding-right: pxToRem(10) !important;
+  padding-right: pxToRem(10) !important;
 
-    &.select-expanded {
-        border: pxToRem(2) solid var(--ion-color-primary) !important;
-    }
+  &.select-expanded {
+    border: pxToRem(2) solid var(--ion-color-primary) !important;
+  }
 }
 
 ion-select {
-    padding-right: pxToRem(10) !important;
+  padding-right: pxToRem(10) !important;
 
-    &.select-expanded {
-        border: pxToRem(2) solid var(--ion-color-primary) !important;
-    }
+  &.select-expanded {
+    border: pxToRem(2) solid var(--ion-color-primary) !important;
+  }
 }
 
 ion-alert {
-    --min-width: 80% !important;
+  --min-width: 80% !important;
 
-    @include media-medium {
-        --min-width: 400px !important;
-    }
+  @include media-medium {
+    --min-width: 400px !important;
+  }
 
-    .alert-radio-label {
-        font-weight: $font-weight-bold;
-    }
+  .alert-radio-label {
+    font-weight: $font-weight-bold;
+  }
 
-    ::-webkit-scrollbar {
-        -webkit-appearance: none;
-        width: 7px;
-    }
+  ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 7px;
+  }
 
-    ::-webkit-scrollbar-thumb {
-        border-radius: 4px;
-        background-color: rgba(0, 0, 0, 0.5);
-        box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
-        -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
-    }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+  }
 }
 
 ion-label {
-    text-align: start;
+  text-align: start;
 }
 
 ion-note {
-    text-align: end !important;
+  text-align: end !important;
 }
 
 ion-toolbar {
-    --background: transparent;
-    padding: pxToRem(4) pxToRem(8);
+  --background: transparent;
+  padding: pxToRem(4) pxToRem(8);
 }
 
 ion-searchbar {
-    --cancel-button-color: var(--ion-color-dark);
-    --background: var(--ion-color-light);
-    padding: 0 6px !important;
+  --cancel-button-color: var(--ion-color-dark);
+  --background: var(--ion-color-light);
+  padding: 0 6px !important;
 
-    input {
-        border: none !important;
-    }
+  input {
+    border: none !important;
+  }
+}
+
+ion-back-button {
+  font-family: var(--ion-default-font), Arial, sans-serif;
 }
 
 ion-modal .date-picker-custom {
-    max-width: 340px;
-    max-height: 390px;
+  max-width: 340px;
+  max-height: 390px;
 
-    .ion-page {
-        justify-content: flex-start !important;
-    }
+  .ion-page {
+    justify-content: flex-start !important;
+  }
 }
 
 .img-black {
-    filter: invert(0);
+  filter: invert(0);
 
-    @media (prefers-color-scheme: dark) {
-        filter: invert(1);
-    }
-}
+  @media (prefers-color-scheme: dark) {
+    filter: invert(1);
+  }
+}

package/src/lib/components/styles/typography.scss

@@ -1,14 +1,8 @@
-@import "./variables.scss";
-@import "./functions.scss";
-@import "./media-queries.scss";
-
-@mixin text(
-  $fontSize,
-  $lineHeight,
-  $fontSizeMobile,
-  $lineHeightMobile,
-  $fontWeight
-) {
+@import './variables.scss';
+@import './functions.scss';
+@import './media-queries.scss';
+
+@mixin text($fontSize, $lineHeight, $fontSizeMobile, $lineHeightMobile, $fontWeight) {
   font-size: pxToRem($fontSizeMobile);
   line-height: pxToRem($lineHeightMobile);
   font-weight: $fontWeight;

package/src/lib/components/styles/variables.scss

@@ -56,7 +56,7 @@ $line-height-body-large: 24;
 $line-height-body-large-responsive: 24;
 $line-height-body-medium: 24;
 $line-height-body-medium-responsive: 24;
-$line-height-body-small: 16;
+$line-height-body-small: 20;
 
 /* SIZES */
 
@@ -74,9 +74,9 @@ $border-radius-small: 8;
 $border-radius: 12;
 
 /* COLORS */
-$color-classic-bg: #ffffff;
-$color-alternative-bg: #f5f7fa;
+$color-classic-white: #ffffff;
+$color-alternative-white: #f5f7fa;
 $color-default-hr: #878ca0;
 $color-default-border: #dde3ed;
 $color-default-shadow: #121954;
-$color-default-placeholder: #afbacc;
+$color-default-placeholder: #afbacc;

package/src/lib/components/types.ts

@@ -0,0 +1,5 @@
+export type ComponentState = 'ENABLED' | 'DISABLED' | 'WORKING';
+const ENABLED: ComponentState = 'ENABLED';
+const DISABLED: ComponentState = 'DISABLED';
+const WORKING: ComponentState = 'WORKING';
+export const ComponentStates = { ENABLED, DISABLED, WORKING };

package/src/lib/valtech-components.module.ts

@@ -0,0 +1,37 @@
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import { ButtonComponent } from './components/atoms/button/button.component';
+import { DisplayComponent } from './components/atoms/display/display.component';
+import { TextComponent } from './components/atoms/text/text.component';
+import { TitleComponent } from './components/atoms/title/title.component';
+import { AvatarComponent } from './components/atoms/avatar/avatar.component';
+import { DividerComponent } from './components/atoms/divider/divider.component';
+import { ContentLoaderComponent } from './components/molecules/content-loader/content-loader.component';
+import { LinkComponent } from './components/molecules/link/link.component';
+
+@NgModule({
+  declarations: [
+    ButtonComponent,
+    DisplayComponent,
+    TextComponent,
+    TitleComponent,
+    AvatarComponent,
+    DividerComponent,
+    ContentLoaderComponent,
+    LinkComponent,
+  ],
+  imports: [CommonModule, HttpClientModule, IonicModule],
+  exports: [
+    ButtonComponent,
+    DisplayComponent,
+    TextComponent,
+    TitleComponent,
+    AvatarComponent,
+    DividerComponent,
+    ContentLoaderComponent,
+    LinkComponent,
+  ],
+})
+export class ValtechComponentsModule {}

package/{public-api.d.ts → src/public-api.ts}

@@ -1,9 +1,20 @@
-export * from './lib/custom-card/custom-card.component';
+/*
+ * Public API Surface of valtech-components
+ */
+
 export * from './lib/components/atoms/button/button.component';
 export * from './lib/components/atoms/button/types';
 export * from './lib/components/atoms/button/factory';
 export * from './lib/components/atoms/text/text.component';
 export * from './lib/components/atoms/title/title.component';
 export * from './lib/components/atoms/display/display.component';
+export * from './lib/components/atoms/avatar/avatar.component';
+export * from './lib/components/atoms/divider/divider.component';
+
+export * from './lib/components/molecules/content-loader/content-loader.component';
+export * from './lib/components/molecules/link/link.component';
+
 export * from './lib/components/types';
 export * from './lib/valtech-components.module';
+
+

package/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}