@factor_ec/ui 1.0.11 → 1.0.13

package/src/lib/models/module-configuration.ts

@@ -0,0 +1,6 @@
+export interface ModuleConfiguration {
+    icon?: {
+        path?: string,
+        collection?: string
+    }
+}

package/src/lib/models/ui-configuration.ts

@@ -0,0 +1,7 @@
+export interface UiConfiguration {
+    icon: {
+        mode: 'external' | null,
+        collection: string,
+        path: string
+    }
+}

package/src/lib/navigation/list/list.component.html

@@ -0,0 +1,52 @@
+<ng-container *ngTemplateOutlet="switch; context: { children: items }"></ng-container>
+<ng-template #switch let-children="children" let-level="level">
+  <ng-container *ngFor="let item of children" [ngSwitch]="item.type">
+    <ng-container *ngSwitchCase="'collapsible'">
+      <ng-container *ngTemplateOutlet="collapsible; context: { item: item }"></ng-container>
+    </ng-container>
+    <ng-container *ngSwitchCase="'header'">
+      <ng-container *ngTemplateOutlet="header; context: { item: item }"></ng-container>
+    </ng-container>
+    <ng-container *ngSwitchDefault>
+      <ng-container *ngTemplateOutlet="action; context: { item: item }"></ng-container>
+    </ng-container>
+  </ng-container>
+</ng-template>
+<ng-template #action let-item="item">
+  <ng-container [ngSwitch]="getComponentType(item)">
+    <button *ngSwitchCase="'button'" type="button" matRipple class="ft-list__item" [ngClass]="item.class"
+      (click)="setItem(item)">
+      <ng-container *ngTemplateOutlet="text; context: { item: item }"></ng-container>
+    </button>
+    <a *ngSwitchCase="'link'" [routerLink]="item.url" routerLinkActive="ft-active" matRipple class="ft-list__item"
+      [ngClass]="item.class" (click)="setItem(item)">
+      <ng-container *ngTemplateOutlet="text; context: { item: item }"></ng-container>
+    </a>
+  </ng-container>
+</ng-template>
+<ng-template #collapsible let-item="item">
+  <button type="button" matRipple class="ft-collapsible-header ft-list__item"
+    [ngClass]="{ 'ft-show': item.metadata?.show }" (click)="toggleCollapsible(item)">
+    <div>
+      <ft-icon class="ft-item__icon" *ngIf="item[iconNameField]" [name]="item[iconNameField]"
+        [collection]="iconCollection" [path]="iconPath"></ft-icon>
+      <div class="ft-item__label">{{ item[labelField] }}</div>
+      <ft-icon class="ft-item__toggle" name="angle-right" size="1"></ft-icon>
+    </div>
+  </button>
+  <div class="ft-collapsible" [ngClass]="{ 'ft-show': item.metadata?.show }" *ngIf="item.children">
+    <ng-container *ngTemplateOutlet="switch; context: { children: item.children }"></ng-container>
+  </div>
+</ng-template>
+<ng-template #header let-item="item">
+  <div class="header" [ngClass]="item.class">
+    {{ item[labelField] }}
+  </div>
+</ng-template>
+<ng-template #text let-item="item">
+  <div class="d-flex align-items-center">
+    <ft-icon class="item__icon" *ngIf="item[iconNameField]" [name]="item[iconNameField]" [collection]="iconCollection"
+      [path]="iconPath"></ft-icon>
+    <div class="item__label">{{ item[labelField] }}</div>
+  </div>
+</ng-template>

package/src/lib/navigation/list/list.component.scss

@@ -0,0 +1,93 @@
+:host {
+  --ft-background-color: var(--ft-background-color, #f8f9fa);
+  --ft-background-color-hover: rgba(0, 0, 0, 0.03);
+  --ft-background-color-active: rgba(var(--ft-primary-color-rgb), 0.1);
+  --ft-text-color: #333;
+  --ft-text-color-hover: var(--ft-primary-color);
+  --ft-text-color-active: var(--ft-primary-color);
+  display: block;
+  overflow: auto;
+}
+.ft-list {
+  &__item {
+    border: 0;
+    box-sizing: border-box;
+    color: var(--text-color);
+    background-color: var(--ft-background-color);
+    cursor: pointer;
+    display: flex;
+    outline: none;
+    transition: background-color 0.3s, color 0.3s;
+    text-align: left;
+    padding: 0.75rem 1.5rem;
+    width: 100%;
+    &:hover {
+      text-decoration: none;
+      &:not(.active) {
+        --ft-background-color: var(--ft-background-color-hover);
+        --text-color: var(--text-color-hover);
+      }
+    }
+    &.ft-active,
+    &:active {
+      --ft-background-color: var(--ft-background-color-active);
+      --text-color: var(--text-color-active);
+    }
+    > div {
+      max-width: 100%;
+    }
+    .ft-item {
+      &__icon {
+        font-size: 1.5rem;
+      }
+      &__icon + .ft-item__label {
+        display: block;
+        margin-left: 0.5rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      &__icon,
+      &__label {
+        transition: margin-left 0.3s;
+      }
+      &__toggle {
+        transition: transform 0.2s;
+      }
+      &__label {
+        flex-grow: 1;
+      }
+    }
+  }
+}
+.ft-collapsible {
+  overflow: hidden;
+  transition: max-height 0.2s;
+  max-height: 100vh;
+  background-color: rgba(0, 0, 0, 0.01);
+  box-shadow: inset 0 4px 9px -7px rgba(0, 0, 0, 0.4);
+  &-header {
+    font-weight: 500;
+    > div {
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+    }
+    &.ft-show {
+      .ft-item__toggle {
+        transform: rotate(90deg);
+      }
+    }
+  }
+  &:not(.ft-show) {
+    max-height: 0;
+    background-color: transparent;
+  }
+}
+.ft-header {
+  text-transform: uppercase;
+  font-weight: 700;
+  padding: 0.75rem 1.5rem 0.25rem;
+  font-size: 0.75rem;
+  opacity: 0.3;
+}

package/src/lib/navigation/list/list.component.spec.ts

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

package/src/lib/navigation/list/list.component.ts

@@ -0,0 +1,56 @@
+import { Component, EventEmitter, Output, Input, HostBinding } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Action } from '../../models/action';
+
+@Component({
+  selector: 'ft-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.scss']
+})
+export class ListComponent {
+  @Output() change = new EventEmitter<Action>();
+  @Input() iconCollection!: string;
+  @Input() iconNameField: string = 'iconName';
+  @Input() iconPath!: string;
+  @Input() labelField: string = 'label';
+  @Input() items!: Action[];
+
+  @Input() class: string = '';
+  @HostBinding('class') get hostClasses(): string {
+    return [
+      'ft-list',
+      this.class
+    ].join(' ');
+  };
+
+  constructor(
+    private router: Router
+  ) { }
+
+  getComponentType(item: Action): string {
+    let type: string = 'text';
+    if (!item.url || item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
+      type = 'button';
+    } else {
+      type = 'link';
+    }
+    return type;
+  }
+  setItem(item: Action): void {
+    if (item.url) {
+      if (item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
+        window.location.href = item.url;
+      }
+    } else if (item.click) {
+      item.click();
+    }
+  }
+  toggleCollapsible(action: Action): void {
+    action.metadata = action.metadata || {};
+    action.metadata.show = !action.metadata?.show;
+    this.change.emit(action);
+  }
+
+}
+

package/src/lib/navigation/navbar/navbar.component.html

@@ -0,0 +1,23 @@
+<ng-content select="[ftStart]"></ng-content>
+<div class="list" *ngIf="items">
+  <ng-container *ngFor="let item of items; trackBy: trackByItem">
+    <ng-container *ngTemplateOutlet="actionTemplate; context: { item: item }"></ng-container>
+  </ng-container>
+</div>
+<ng-content select="[ftEnd]"></ng-content>
+<ng-template #actionTemplate let-item="item">
+  <ng-container [ngSwitch]="getComponentType(item)">
+    <button *ngSwitchCase="'button'" type="button" matRipple class="list__item" [ngClass]="[labelPlacement, item.class || '' ]" (click)="setItem(item)">
+      <ng-container *ngTemplateOutlet="textTemplate; context: { item: item }"></ng-container>
+    </button>
+    <a *ngSwitchCase="'link'" [routerLink]="item.url" routerLinkActive="active" matRipple class="list__item" [ngClass]="[labelPlacement, item.class || '' ]" (click)="setItem(item)">
+      <ng-container *ngTemplateOutlet="textTemplate; context: { item: item }"></ng-container>
+    </a>
+  </ng-container>
+</ng-template>
+<ng-template #textTemplate let-item="item">
+  <div class="item">
+    <ft-icon class="item__icon" *ngIf="item[iconNameField]" [name]="item[iconNameField]" [collection]="iconCollection" [title]="labelPlacement === 'none' ? item[labelField] : '' "></ft-icon>
+    <div class="item__label" *ngIf="labelPlacement !== 'none'">{{ item[labelField] }}</div>
+  </div>
+</ng-template>

package/src/lib/navigation/navbar/navbar.component.scss

@@ -0,0 +1,202 @@
+@import '../../scss/variables';
+@import '../../scss/breakpoints';
+
+:host {
+    --min-width: 4rem;
+    --min-height: 3.5rem;
+    --background-color: #FFF;
+    --background-color-hover: rgba(0, 0, 0, .10);
+    --background-color-active: rgba(0, 0, 0, .10);
+    --text-color: #333;
+    --text-color-hover: #333;
+    --text-color-active: #FFF;
+    background-color: var(--background-color);
+    position: fixed;
+    transition: transform 0.3s ease-in-out, width 0.3s, color 0.3s, background-color 0.3s;
+    z-index: var(--z-index, 990);
+    font-size: 0.875rem;
+    display: flex;
+  
+    @include media-breakpoint-up(sm) {
+      --min-width: 13.75rem;
+    }
+  
+    &.left,
+    &.right {
+      top: 0;
+      bottom: 0;
+      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
+      min-width: var(--min-width);
+    }
+  
+    &.left {
+      left: 0;
+    }
+  
+    &.right {
+      right: 0;
+    }
+  
+    &.bottom,
+    &.top {
+      left: 0;
+      right: 0;
+      min-height: var(--min-height);
+  
+      .list {
+        display: flex;
+  
+        &__item {
+          flex-grow: 1;
+          justify-content: center;
+        }
+      }
+    }
+  
+    &.bottom {
+      bottom: 0;
+      box-shadow: 0 0 1px 0 rgba(0, 0, 0, .14), 0 -1px 3px 0 rgba(0, 0, 0, .12);
+    }
+  
+    &.top {
+      top: 0;
+      box-shadow: 0 0 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
+    }
+  
+    &.auto {
+      @include media-breakpoint-up(md) {
+        left: 0;
+        top: 0;
+        bottom: 0;
+        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
+        min-width: var(--min-width);
+        flex-direction: column;
+      }
+  
+      @include media-breakpoint-down(sm) {
+        bottom: 0;
+        left: 0;
+        right: 0;
+        box-shadow: 0 0 1px 0 rgba(0, 0, 0, .14), 0 -1px 3px 0 rgba(0, 0, 0, .12);
+        min-height: var(--min-height);
+  
+        .list {
+          display: flex;
+        }
+      }
+    }
+  }
+  
+  .list {
+    display: block;
+    flex-grow: 1;
+    overflow: auto;
+  
+    &__item {
+      border: 0;
+      box-sizing: border-box;
+      color: var(--text-color);
+      cursor: pointer;
+      outline: none;
+      transition: background-color 0.3s, color 0.3s;
+      display: flex;
+      align-items: center;
+      padding: 0.75rem 1rem;
+      width: 100%;
+  
+      &:hover {
+        text-decoration: none;
+  
+        &:not(.active) {
+          background: var(--hover-background-color);
+          color: var(--hover-text-color);
+        }
+      }
+  
+      &.active {
+        background: var(--active-background-color);
+        color: var(--active-text-color);
+      }
+  
+      &.left {
+        justify-content: flex-start;
+  
+        .item {
+          &__icon {
+            margin-right: 0.5rem;
+          }
+        }
+      }
+  
+      &.right {
+        justify-content: flex-end;
+  
+        .item {
+          flex-direction: row-reverse;
+  
+          &__icon {
+            margin-left: 0.5rem;
+          }
+        }
+      }
+  
+      &.top {
+        justify-content: center;
+        flex-grow: 1;
+        padding: .5rem;
+  
+        .item {
+          flex-direction: column-reverse;
+        }
+      }
+  
+      &.bottom {
+        justify-content: center;
+        flex-grow: 1;
+        padding: .5rem;
+  
+        .item {
+          flex-direction: column;
+        }
+      }
+  
+      &.auto {
+        @include media-breakpoint-up(md) {
+          .item {
+            flex-direction: row;
+  
+            &__icon {
+              margin-right: 0.5rem;
+            }
+          }
+        }
+  
+        @include media-breakpoint-down(sm) {
+          justify-content: center;
+          flex-grow: 1;
+          padding: .5rem;
+  
+          .item {
+            flex-direction: column;
+            font-size: 0.6875rem;
+          }
+        }
+      }
+  
+      .item {
+        display: flex;
+        align-items: center;
+  
+        &__icon {
+          font-size: 1.5rem;
+        }
+  
+        &__label {
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }

package/src/lib/navigation/navbar/navbar.component.spec.ts

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

package/src/lib/navigation/navbar/navbar.component.ts

@@ -0,0 +1,57 @@
+import { Component, OnInit, Input, HostBinding } from '@angular/core';
+import { Router } from '@angular/router';
+import { Action } from '../../models/action';
+
+@Component({
+  selector: 'ft-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.scss']
+})
+export class NavbarComponent implements OnInit {
+  @Input() iconCollection!: string;
+  @Input() iconNameField: string = 'iconName';
+  @Input() labelField: string = 'label';
+  @Input() labelPlacement: 'top' | 'right' | 'bottom' | 'left' | 'auto' | 'none' = 'auto';
+  @Input() items!: Action[];
+  @Input() position: 'top' | 'right' | 'bottom' | 'left' | 'auto' = 'auto';
+
+  @Input() class: string = '';
+  @HostBinding('class') get hostClasses(): string {
+    return [
+      'ft-navbar',
+      this.class,
+      this.position
+    ].join(' ');
+  };
+
+  constructor(
+    private router: Router
+  ) { }
+
+  ngOnInit() { }
+  getComponentType(item: Action): string {
+    let type: string = 'text';
+    if (!item.url || item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
+      type = 'button';
+    } else {
+      type = 'link';
+    }
+    return type;
+  }
+  setItem(item: Action): void {
+    if (item.url) {
+      if (item.url.match(/^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/)) {
+        window.location.href = item.url;
+      }
+    } else if (item.click) {
+      item.click();
+    }
+  }
+  toggleCollapsible(action: Action): void {
+    action.metadata.show = !action.metadata.show;
+  }
+  trackByItem(index: number, item: Action): string {
+    return `${item.label} ${item.url}`;
+  }
+
+}

package/src/lib/navigation/navigation.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
+
+import { ListComponent } from './list/list.component';
+import { NavbarComponent } from './navbar/navbar.component';
+import { ToolbarComponent } from './toolbar/toolbar.component';
+import { SearchboxComponent } from './searchbox/searchbox.component';
+import { DisplayModule } from '../display/display.module';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  declarations: [
+    ListComponent,
+    NavbarComponent,
+    ToolbarComponent,
+    SearchboxComponent
+  ],
+  exports: [
+    ListComponent,
+    NavbarComponent,
+    ToolbarComponent,
+    SearchboxComponent
+  ],
+  imports: [
+    CommonModule,
+    DisplayModule,
+    RouterModule,
+    MatMenuModule,
+    MatButtonModule
+  ]
+})
+export class NavigationModule { }

package/src/lib/navigation/searchbox/searchbox.component.html

@@ -0,0 +1,34 @@
+<form (submit)="onSearch($event)" class="container p-2 p-sm-3 pb-md-3 pt-md-5 px-md-3 px-lg-5">
+    <div class="d-flex align-items-center">
+      <button type="button" mat-icon-button class="p-2 mr-2" (click)="closeSearch()">
+        <ft-icon name="arrow-left" size="2"></ft-icon>
+      </button>
+      <input
+        #input
+        type="search"
+        matInput
+        class="flex-grow-1"
+        i18n-placeholder
+        placeholder="Search criteria"
+        [disabled]="disabled"
+        (change)="updateValue($event)"
+        (keyup)="updateValue($event)"
+        *ngIf="!placeholder"
+      />
+      <input
+        #inputPlaceholder
+        type="search"
+        matInput
+        class="flex-grow-1"
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        (change)="updateValue($event)"
+        (keyup)="updateValue($event)"
+        *ngIf="placeholder"
+      />
+      <button type="submit" mat-icon-button class="p-2 ml-2">
+        <ft-icon name="search" size="2"></ft-icon>
+      </button>
+    </div>
+  </form>
+  

package/src/lib/navigation/searchbox/searchbox.component.scss

@@ -0,0 +1,37 @@
+@import '../../scss/variables';
+@import '../../scss/breakpoints';
+
+:host {
+  z-index: var(--z-index, 980);
+  background-color: var(--background-color, #FFF);
+  display: block;
+  transition: background-color 0.2s, box-shadow 0.2s;
+  position: sticky;
+  top: -1px;
+  margin-top: -3.5rem;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity .3s, visibility .3s;
+  &.show {
+    opacity: 1;
+    visibility: visible;
+  }
+  @include media-breakpoint-up(sm) {
+    margin-top: -4.5rem;
+  }
+  @include media-breakpoint-up(md) {
+    top: -2rem;
+    margin-top: -6.5rem;
+  }
+  button {
+    min-width: 0;
+    line-height: inherit;
+  }
+  input {
+    border: 0;
+    background-color: transparent;
+    &:focus {
+      outline: none;
+    }
+  }
+}

package/src/lib/navigation/searchbox/searchbox.component.spec.ts

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