@factor_ec/ui 1.0.12 → 1.0.13

package/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ui'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ui",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@factor_ec/ui",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "license": "CC-BY-NC-ND-4.0",
   "author": "Factor",
   "private": false,
@@ -12,25 +12,5 @@
   },
   "dependencies": {
     "tslib": "^2.3.0"
-  },
-  "module": "fesm2015/factor_ec-ui.mjs",
-  "es2020": "fesm2020/factor_ec-ui.mjs",
-  "esm2020": "esm2020/factor_ec-ui.mjs",
-  "fesm2020": "fesm2020/factor_ec-ui.mjs",
-  "fesm2015": "fesm2015/factor_ec-ui.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/factor_ec-ui.mjs",
-      "es2020": "./fesm2020/factor_ec-ui.mjs",
-      "es2015": "./fesm2015/factor_ec-ui.mjs",
-      "node": "./fesm2015/factor_ec-ui.mjs",
-      "default": "./fesm2020/factor_ec-ui.mjs"
-    }
-  },
-  "sideEffects": false
-}
+  }
+}

package/src/lib/display/avatar/avatar.component.html

@@ -0,0 +1 @@
+<div *ngIf="!loaded">{{ initials }}</div>

package/src/lib/display/avatar/avatar.component.scss

@@ -0,0 +1,20 @@
+:host {
+    --default-size: var(--size, 3rem);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    background-size: cover;
+    background-repeat: no-repeat;
+    border-radius: calc(var(--default-size) / 2);
+    font-size: calc(var(--default-size) - (var(--default-size) * 0.6));
+    min-width: var(--default-size);
+    min-height: var(--default-size);
+    cursor: default;
+    user-select: none;
+}
+
+div {
+    font-size: 1em;
+    line-height: 1em;
+}

package/src/lib/display/avatar/avatar.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AvatarComponent } from './avatar.component';
+
+describe('AvatarComponent', () => {
+  let component: AvatarComponent;
+  let fixture: ComponentFixture<AvatarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AvatarComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AvatarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/display/avatar/avatar.component.ts

@@ -0,0 +1,69 @@
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
+import { ColorService } from '@factor_ec/utils';
+
+@Component({
+  selector: 'ft-avatar',
+  templateUrl: './avatar.component.html',
+  styleUrls: ['./avatar.component.scss']
+})
+export class AvatarComponent implements OnInit {
+  _label!: string;
+  _src!: string;
+  @Input()
+  color!: string;
+  initials!: string;
+  loaded!: boolean;
+  @Input()
+  class: string = '';
+  @Input()
+  set src(value: string | undefined) {
+    if (value && value.trim()!='') {
+      this._src = value;
+      let image = new Image();
+      image.src = value;
+      image.onload = () => {
+        if ("decode" in image) {
+          image.decode().then(() => {
+            this.loaded = true;
+          });
+        } else {
+          console.error('Image.decode not available.');
+        }
+      };
+    }
+  }
+  @Input()
+  set label(value: string) {
+    this._label = value;
+    this.initials = this.getInitials(value);
+  }
+  @HostBinding('style.background-color')
+  get backgroundColor(): string {
+    return this.color || this.colorService.hex(this._label);
+  }
+  @HostBinding('style.background-image')
+  get backgroundImage(): string {
+    return this._src ? `url(${this._src})` : '';
+  }
+  @HostBinding('class')
+  get hostClasses(): string {
+    return [
+      'ft-avatar',
+      this.class
+    ].join(' ');
+  }
+
+  constructor(
+    private colorService: ColorService
+  ) { }
+
+  ngOnInit() {
+
+  }
+  getInitials(value: string): string {
+    let allInitials: string[] = value.match(/\b\w/g) || [];
+    let initials: string = ((allInitials.shift() || '') + (allInitials.pop() || '')).toUpperCase();
+    return initials;
+  }
+
+}

package/src/lib/display/content/content.component.html

@@ -0,0 +1,4 @@
+<ng-container [ngSwitch]="data.message?.type">
+    <div *ngSwitchCase="'html'" [innerHTML]="data.message?.content"></div>
+    <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>
+</ng-container>

package/src/lib/display/content/content.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContentComponent } from './content.component';
+
+describe('ContentComponent', () => {
+  let component: ContentComponent;
+  let fixture: ComponentFixture<ContentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ContentComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ContentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/display/content/content.component.ts

@@ -0,0 +1,15 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
+
+@Component({
+  selector: 'lib-content',
+  templateUrl: './content.component.html',
+  styleUrls: ['./content.component.scss']
+})
+export class ContentComponent {
+
+  constructor(
+    @Inject(MAT_SNACK_BAR_DATA) public data: any
+  ) { }
+
+}

package/src/lib/display/display.module.ts

@@ -0,0 +1,41 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+
+import { AvatarComponent } from './avatar/avatar.component';
+import { IconComponent } from './icon/icon.component';
+import { ImageComponent } from './image/image.component';
+import { ProgressComponent } from './progress/progress.component';
+import { ObserveIntersectingDirective } from './observe-intersecting.directive';
+import { MessageComponent } from './message/message.component';
+import { ContentComponent } from './content/content.component';
+
+@NgModule({
+  declarations: [
+    AvatarComponent,
+    IconComponent,
+    ImageComponent,
+    ProgressComponent,
+    ObserveIntersectingDirective,
+    MessageComponent,
+    ContentComponent
+  ],
+  exports: [
+    AvatarComponent,
+    IconComponent,
+    ImageComponent,
+    ProgressComponent,
+    ObserveIntersectingDirective,
+    MessageComponent,
+    ContentComponent
+  ],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatSnackBarModule
+  ]
+})
+export class DisplayModule { }

package/src/lib/display/icon/icon.component.html

@@ -0,0 +1,4 @@
+<svg *ngIf="!src; else imageTemplate"><use attr.xlink:href="{{ url }}" attr.href="{{ url }}" /></svg>
+<ng-template #imageTemplate>
+  <img [src]="src" />
+</ng-template>

package/src/lib/display/icon/icon.component.scss

@@ -0,0 +1,47 @@
+:host {
+    line-height: 0;
+    display: inline-block;
+    &[size="1"],
+    &.ft-icon--1 {
+      font-size: 1rem;
+    }
+    &[size="2"],
+    &.ft-icon--2 {
+      font-size: 1.5rem;
+    }
+    &[size="3"],
+    &.ft-icon--3 {
+      font-size: 2rem;
+    }
+    &[size="4"],
+    &.ft-icon--4 {
+      font-size: 3rem;
+    }
+    &[size="5"],
+    &.ft-icon--5 {
+      font-size: 4.5rem;
+    }
+    &[size="6"],
+    &.ft-icon--6 {
+      font-size: 8rem;
+    }
+    &[size="7"],
+    &.ft-icon--7 {
+      font-size: 16rem;
+    }
+    &[size="8"],
+    &.ft-icon--8 {
+      font-size: 32rem;
+    }
+  }
+  svg {
+    width: 1em;
+    height: 1em;
+    vertical-align: middle;
+    fill: currentColor;
+  }
+  img {
+    height: 1em;
+    vertical-align: middle;
+  }
+  

package/src/lib/display/icon/icon.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconComponent } from './icon.component';
+
+describe('IconComponent', () => {
+  let component: IconComponent;
+  let fixture: ComponentFixture<IconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ IconComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(IconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/display/icon/icon.component.ts

@@ -0,0 +1,88 @@
+import { Component, OnInit, Input, Inject, HostBinding } from '@angular/core';
+import { UiConfiguration } from '../../models/ui-configuration';
+
+@Component({
+  selector: 'ft-icon',
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss']
+})
+export class IconComponent implements OnInit {
+  _collection!: string;
+  _name!: string;
+  _mode!: 'inline' | 'external';
+  _path!: string;
+  @Input()
+  class: string = '';
+  @Input()
+  set collection(collection: string) {
+    this._collection = collection;
+    this.update();
+  }
+  @Input()
+  set mode(mode: 'inline' | 'external') {
+    this._mode = mode;
+    this.update();
+  }
+  @Input()
+  set name(name: string) {
+    this._name = name;
+    this.update();
+  } 
+  @Input()
+  set path(path: string) {
+    this._path = path;
+    this.update();
+  }
+  @Input()
+  size!: string;
+  @Input()
+  src!: string;
+  url!: string;
+  @HostBinding('class')
+  get hostClasses(): string {
+    return [
+      'ft-icon',
+      this.class
+    ].join(' ');
+  }
+
+  constructor(
+    @Inject('FactorUiConfiguration') private configuration: UiConfiguration
+  ) { }
+
+  ngOnInit() {
+    this.update();
+  }
+  private update() {
+    // Set the default collection if the mode is external
+    if (!this._collection) {
+      if (this.configuration.icon && this.configuration.icon.collection) {
+        this._collection = this.configuration.icon.collection;
+      } else if (this._mode === 'external') {
+        this._collection = 'icons';
+      }
+    }
+    if (!this._mode) {
+      if (this.configuration.icon && this.configuration.icon.mode) {
+        this._mode = this.configuration.icon.mode;
+      } else {
+        this._mode = 'external';
+      }
+    }
+    if (this._mode === 'external') {
+      // If the icon mode is external
+      if (!this._path) {
+        if (this.configuration.icon && this.configuration.icon.path) {
+          this._path = this.configuration.icon.path;
+        } else {
+          this._path = 'assets';
+        }
+      }
+      this.url = `${ this._path }/${ this._collection }.svg#${this._name}`;
+    } else {
+      // If the icon mode is inline
+      const name = this._collection && this._collection !== 'unset' ? `${this._collection}--${this._name}` : this._name;
+      this.url = `#${name}`;
+    }
+  }
+}

package/src/lib/display/image/image.component.html

@@ -0,0 +1,2 @@
+<img *ngIf="shown" [src]="src" />
+<ft-icon name="warning" size="2" *ngIf="error"></ft-icon>

package/src/lib/display/image/image.component.scss

@@ -0,0 +1,53 @@
+:host {
+    display: inline-block;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &.ft-image--loading {
+        background-color: rgba(0, 0, 0, 0.03);
+        position: relative;
+        overflow: hidden;
+        &::after {
+            content: "";
+            display: block;
+            background-color: rgba(0, 0, 0, 0.02);
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            transform: translateX(0);
+            animation: 1.5s placeholder-loading ease-in-out infinite;
+        }
+    }
+    &.ft-image--error {
+        background-color: rgba(255, 0, 0, 0.03);
+        ft-icon {
+            color: var(--danger);
+        }
+    }
+}
+img {
+    position: relative;
+    z-index: 1;
+    max-width: 100%;
+    max-height: 100%;
+    animation: fade-in 0.3s;
+}
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes placeholder-loading {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
+    }
+}

package/src/lib/display/image/image.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImageComponent } from './image.component';
+
+describe('ImageComponent', () => {
+  let component: ImageComponent;
+  let fixture: ComponentFixture<ImageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ImageComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ImageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/display/image/image.component.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit, Input, HostBinding, ElementRef } from '@angular/core';
+
+@Component({
+  selector: 'ft-image',
+  templateUrl: './image.component.html',
+  styleUrls: ['./image.component.scss']
+})
+export class ImageComponent implements OnInit {
+  @Input()
+  class: string = '';
+  @HostBinding('class.ft-image--error')
+  error!: boolean;
+  @HostBinding('class.ft-image--loading')
+  loading: boolean = false;
+  @Input()
+  src!: string;
+  shown: boolean = false;
+
+  constructor(
+    private element: ElementRef
+  ) { }
+
+  ngOnInit() {
+    if ("IntersectionObserver" in window) {
+      let elementObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            let image = new Image();
+            image.src = this.src;
+            setTimeout(() => {
+              if (!this.shown && !this.error) {
+                this.loading = true;
+              }
+            }, 100);
+            image.onerror = () => {
+              this.error = true;
+              this.loading = false;
+            };
+            image.onload = () => {
+              if ("decode" in image) {
+                image.decode().then(() => {
+                  this.loading = false;
+                  this.shown = true;
+                });
+              } else {
+                this.loading = false;
+                this.shown = true;
+              }
+            };
+            elementObserver.unobserve(this.element.nativeElement);
+          }
+        });
+      }, {
+        rootMargin: "0px 0px 200px 0px"
+      });
+      elementObserver.observe(this.element.nativeElement);
+    } else {
+      console.error('IntersectionObserver not available.');
+      this.loading = false;
+      this.shown = true;
+    }
+  }
+  @HostBinding('class')
+  get hostClasses(): string {
+    return [
+      'ft-image',
+      this.class
+    ].join(' ');
+  }
+
+}

package/src/lib/display/message/message.component.html

@@ -0,0 +1,33 @@
+<h1 mat-dialog-title class="ft-message__title" *ngIf="data.options?.title">
+    <ft-icon *ngIf="data.options?.titleIcon" [name]="data.options?.titleIcon?.name"
+      [collection]="data.options?.titleIcon?.collection" [ngClass]="data.options?.titleIcon?.class"
+      [size]="data.options?.titleIcon?.size || 2"></ft-icon>
+    <div>{{ data.options?.title }}</div>
+  </h1>
+  <div mat-dialog-content class="ft-message__content" [ngClass]="data.options?.class">
+    <ft-icon *ngIf="data.options?.icon" [name]="data.options?.icon?.name" [collection]="data.options?.icon?.collection"
+      [ngClass]="data.options?.icon?.class" [size]="data.options?.icon?.size || 2"></ft-icon>
+    <ng-container [ngSwitch]="data.message?.type">
+      <div *ngSwitchCase="'html'" [innerHTML]="data.message?.content"></div>
+      <ng-container *ngSwitchDefault>{{ data.message?.content }}</ng-container>
+    </ng-container>
+  </div>
+  <div mat-dialog-actions class="ft-message__actions" *ngIf="data.options.actionsVisible">
+    <ng-container *ngIf="data.options?.actions?.length > 0; else acceptTemplate">
+      <ng-container *ngFor="let action of data.options?.actions; let i = index">
+        <ng-container [ngSwitch]="action.type">
+          <button type="button" *ngSwitchCase="'raised'" mat-raised-button [color]="action.metadata?.color"
+            (click)="select(action.value)" autofocus>{{ action.label }}</button>
+          <button type="button" *ngSwitchCase="'flat'" mat-flat-button [color]="action.metadata?.color"
+            (click)="select(action.value)" autofocus>{{ action.label }}</button>
+          <button type="button" *ngSwitchCase="'stroked'" mat-stroked-button [color]="action.metadata?.color"
+            (click)="select(action.value)" autofocus>{{ action.label }}</button>
+          <button type="button" *ngSwitchDefault mat-button [color]="action.metadata?.color"
+            (click)="select(action.value)">{{ action.label }}</button>
+        </ng-container>
+      </ng-container>
+    </ng-container>
+  </div>
+  <ng-template #acceptTemplate>
+    <button type="button" mat-stroked-button color="primary" autofocus (click)="select('-1')" i18n>Accept</button>
+  </ng-template>