@factor_ec/ui 1.0.13 → 1.0.17

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

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

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

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

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

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

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

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

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

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

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

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

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