@factor_ec/ui 1.0.13 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@factor_ec/ui",
-  "version": "1.0.13",
+  "version": "1.0.17",
   "license": "CC-BY-NC-ND-4.0",
   "author": "Factor",
   "private": false,
@@ -12,5 +12,25 @@
   },
   "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/public-api.ts → public-api.d.ts}

@@ -1,7 +1,3 @@
-/*
- * Public API Surface of ui
- */
-
 export * from './lib/display/avatar/avatar.component';
 export * from './lib/display/icon/icon.component';
 export * from './lib/display/image/image.component';

package/.browserslistrc

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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