@factor_ec/ui 1.0.13 → 1.0.15

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

@@ -1,25 +0,0 @@
-.mat-dialog-title {
-    display: flex;
-    align-items: center;
-
-    ft-icon {
-        margin-right: 0.5rem;
-    }
-}
-
-.mat-dialog-content {
-    display: flex;
-    align-items: center;
-    margin-bottom: 0.5rem;
-
-    ft-icon {
-        margin-right: 0.5rem;
-    }
-}
-
-.mat-dialog-actions {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding-bottom: 1.5rem;
-}

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

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

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

@@ -1,24 +0,0 @@
-import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-
-@Component({
-  selector: 'ft-message',
-  templateUrl: './message.component.html',
-  styleUrls: ['./message.component.scss']
-})
-export class MessageComponent implements OnInit {
-  @Output()
-  beforeSelect: EventEmitter<any> = new EventEmitter();
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: any
-  ) { }
-
-  ngOnInit() {
-  }
-  select(value: string) {
-    this.beforeSelect.emit(value);
-  }
-
-
-}

package/src/lib/display/message.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { MessageService } from './message.service';
-
-describe('MessageService', () => {
-  let service: MessageService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(MessageService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

package/src/lib/display/message.service.ts

@@ -1,58 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ReplaySubject, Observable } from "rxjs";
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatDialog } from '@angular/material/dialog';
-
-import { MessageComponent } from './message/message.component';
-import { Content } from '../models/content';
-import { ContentComponent } from './content/content.component';
-import { MessageOptions } from '../models/message-options';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class MessageService {
-  element: any;
-
-  constructor(
-    private snackBar: MatSnackBar,
-    private dialog: MatDialog
-  ) { }
-
-  show(message: string | Content, options?: MessageOptions): Observable<any> {
-    let selectionSource: ReplaySubject<string> = new ReplaySubject<string>(undefined);
-    let selection: Observable<string> = selectionSource.asObservable();
-    const defaults: MessageOptions = {
-      type: 'notification',
-      duration: 2000,
-      actionsVisible: true
-    };
-    options = Object.assign(defaults, options);
-    const data = { message: typeof message === 'string' ? { content: message, type: 'text' } : message, options };
-    switch (options.type) {
-      default:
-      case 'notification':
-        this.snackBar.openFromComponent(ContentComponent, {
-          data,
-          panelClass: ['ft-message', 'ft-message--notification'],
-          duration: options.duration || 2000,
-        });
-        break;
-      case 'modal':
-        const dialogRef = this.dialog.open(MessageComponent, {
-          width: options.width || '350px',
-          data,
-          panelClass: ['ft-message', 'ft-message--modal'],
-          autoFocus: false,
-          disableClose: true
-        });
-        dialogRef.componentInstance.beforeSelect.subscribe(response => {
-          selectionSource.next(response);
-          dialogRef.close();
-        });
-        this.snackBar.dismiss();
-        break;
-    }
-    return selection;
-  }
-}

package/src/lib/display/observe-intersecting.directive.spec.ts

@@ -1,8 +0,0 @@
-import { ObserveIntersectingDirective } from './observe-intersecting.directive';
-
-describe('ObserveIntersectingDirective', () => {
-  it('should create an instance', () => {
-    const directive = new ObserveIntersectingDirective();
-    expect(directive).toBeTruthy();
-  });
-});

package/src/lib/display/observe-intersecting.directive.ts

@@ -1,34 +0,0 @@
-import { Directive, EventEmitter, OnInit, Output, Input, ElementRef, Inject, PLATFORM_ID } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-
-declare var window: any;
-@Directive({
-  selector: '[ftObserveIntersecting]'
-})
-export class ObserveIntersectingDirective implements OnInit {
-  @Input('ftObserveIntersectingOptions')
-  options!: { root: any, rootMargin: any, threshold: any };
-  @Output('ftObserveIntersecting')
-  event: EventEmitter<boolean> = new EventEmitter();
-
-  constructor(
-    private element: ElementRef,
-    @Inject(PLATFORM_ID) private platformId: Object
-  ) { }
-
-  ngOnInit() {
-    if (isPlatformBrowser(this.platformId)) {
-      if ("IntersectionObserver" in window) {
-        const elementObserver = new IntersectionObserver((entries, observer) => {
-          entries.forEach((entry) => {
-            this.event.emit(entry.isIntersecting);
-          });
-        }, this.options);
-        elementObserver.observe(this.element.nativeElement);
-      } else {
-        console.error('ftObserveIntersecting not available in this browser.');
-      }
-    }
-  }
-
-}

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

@@ -1,6 +0,0 @@
-<svg [ngStyle]="{'--bar-color': color}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
-    <circle class="track" cx="50" cy="50" r="40" />
-    <circle class="bar" [ngClass]="mode" cx="50" cy="50" r="40"
-        [ngStyle]="{'stroke-dashoffset': mode=='determinate'? 'calc((3.14159265 * 40 * 2 * (100 - '+value+')) / 100)' : null}">
-    </circle>
-</svg>

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

@@ -1,121 +0,0 @@
-:host {
-  --track-color: rgba(0, 0, 0, 0.08);
-  --bar-color: var(--primary);
-  line-height: 0;
-  display: inline-block;
-
-  &.ft-progress--1 {
-    font-size: 1rem;
-  }
-
-  &.ft-progress--2 {
-    font-size: 1.5rem;
-  }
-
-  &.ft-progress--3 {
-    font-size: 2rem;
-  }
-
-  &.ft-progress--4 {
-    font-size: 3rem;
-  }
-
-  &.ft-progress--5 {
-    font-size: 4.5rem;
-  }
-
-  &.ft-progress--6 {
-    font-size: 8rem;
-  }
-
-  &.ft-progress--7 {
-    font-size: 16rem;
-  }
-
-  &.ft-progress--8 {
-    font-size: 32rem;
-  }
-
-  &.ft-progress--overlay {
-    position: fixed;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    z-index: var(--z-index-modal, 1000);
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    font-size: 42px;
-
-    svg {
-      background: rgba(255, 255, 255, 0.6);
-      backdrop-filter: saturate(50%) blur(3px);
-      box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
-      border-radius: 100vh;
-      padding: 0.3125rem;
-      animation: progress-reveal 0.2s;
-      animation-fill-mode: forwards;
-
-      .track {
-        display: none;
-      }
-    }
-  }
-}
-
-svg {
-  width: 1em;
-  height: 1em;
-  vertical-align: middle;
-
-  .track {
-    fill: none;
-    stroke-width: 10;
-    stroke: var(--track-color);
-  }
-
-  .bar {
-    fill: none;
-    stroke-opacity: 0.9;
-    stroke-width: 6;
-    stroke: var(--bar-color);
-
-    &.indeterminate {
-      animation: progress-rotation 2s infinite linear;
-    }
-
-    &.determinate {
-      stroke-dasharray: calc(2 * 3.1415926536 * 40);
-    }
-  }
-}
-
-@keyframes progress-reveal {
-  0% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes progress-rotation {
-  0% {
-    stroke-dashoffset: 0;
-    stroke-dasharray: 150.6 100.4;
-  }
-
-  50% {
-    stroke-dasharray: 1 250;
-  }
-
-  100% {
-    stroke-dashoffset: 502;
-    stroke-dasharray: 150.6 100.4;
-  }
-}

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

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

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

@@ -1,36 +0,0 @@
-import { Component, OnInit, Input, HostBinding } from '@angular/core';
-
-@Component({
-  selector: 'ft-progress',
-  templateUrl: './progress.component.html',
-  styleUrls: ['./progress.component.scss']
-})
-export class ProgressComponent implements OnInit {
-  @Input()
-  class: string = '';
-  @Input()
-  color!: string;
-  @Input()
-  mode: 'determinate' | 'indeterminate' = 'indeterminate';
-  @Input()
-  overlay: boolean = false;
-  @Input()
-  size!: number;
-  @Input()
-  value!: number;
-
-  constructor() { }
-
-  ngOnInit() {
-    this.value = 0;
-  }
-  @HostBinding('class')
-  get hostClasses(): string {
-    return [
-      'ft-progress',
-      this.overlay ? 'ft-progress--overlay' : '',
-      this.class
-    ].join(' ');
-  }
-
-}

package/src/lib/display/progress.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { ProgressService } from './progress.service';
-
-describe('ProgressService', () => {
-  let service: ProgressService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(ProgressService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

package/src/lib/display/progress.service.ts

@@ -1,51 +0,0 @@
-import { ComponentFactoryResolver, EmbeddedViewRef, Injector, Injectable, ComponentRef, ApplicationRef } from '@angular/core';
-
-import { ProgressComponent } from './progress/progress.component';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ProgressService {
-  appRef!: ApplicationRef;
-  componentRef!: ComponentRef<ProgressComponent> | null;
-  domElem!: HTMLElement;
-
-  constructor(
-    private componentFactoryResolver: ComponentFactoryResolver,
-    private injector: Injector
-  ) { }
-
-  show(): boolean {
-    if (!this.componentRef) {
-      this.appRef = this.injector.get(ApplicationRef);
-      // 1. Create a component reference from the component 
-      this.componentRef = this.componentFactoryResolver
-        .resolveComponentFactory(ProgressComponent)
-        .create(this.injector);
-
-      // 2. Attach component to the appRef so that it's inside the ng component tree
-      this.appRef.attachView(this.componentRef.hostView);
-      this.componentRef.instance.overlay = true;
-
-      // 3. Get DOM element from component
-      const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>)
-        .rootNodes[0] as HTMLElement;
-
-      // 4. Append DOM element to the body
-      document.body.appendChild(domElem);
-      return true;
-    } else {
-      return false;
-    }
-  }
-  hide(): boolean {
-    if (this.componentRef) {
-      this.appRef.detachView(this.componentRef.hostView);
-      this.componentRef.destroy();
-      this.componentRef = null;
-      return true;
-    } else {
-      return false;
-    }
-  }
-}

package/src/lib/inputs/inputs.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { RatingComponent } from './rating/rating.component';
-
-@NgModule({
-  declarations: [
-    RatingComponent
-  ],
-  exports: [
-    RatingComponent
-  ],
-  imports: [
-    CommonModule
-  ]
-})
-export class InputsModule { }

package/src/lib/inputs/rating/rating.component.html

@@ -1,13 +0,0 @@
-<ng-container *ngFor="let star of stars">
-  <ng-container *ngTemplateOutlet="!readOnly? buttonTemplate : starTemplate; context:{star:star}"></ng-container>
-</ng-container>
-<ng-template #buttonTemplate let-star="star">
-  <button type="button" *ngIf="!readOnly; else starTemplate" [disabled]="disabled" (mouseover)="setRate(star.value, true)" (focus)="setRate(star.value, true)" (blur)="setRate(0, true)" (mouseout)="setRate(0, true)" (click)="setRate(star.value)">
-    <ng-container *ngTemplateOutlet="starTemplate; context:{star:star}"></ng-container>
-  </button>
-</ng-template>
-<ng-template #starTemplate let-star="star">
-  <svg [ngClass]="{hover: hoverValue >= star.value, active: value >= star.value}" viewBox="0 0 24 24">
-    <path d="M17.93 21.315c-.534.408-5.22-3.186-5.881-3.181-.663 0-5.307 3.656-5.846 3.254-.537-.403 1.29-6.165 1.081-6.822-.209-.656-4.972-4.138-4.772-4.796.201-.658 6.015-.627 6.55-1.036.533-.41 2.233-6.215 2.895-6.219.663 0 2.43 5.779 2.968 6.182.539.403 6.352.297 6.56.953.21.656-4.513 4.197-4.714 4.856-.2.658 1.692 6.398 1.159 6.808z" />
-  </svg>
-</ng-template>

package/src/lib/inputs/rating/rating.component.scss

@@ -1,61 +0,0 @@
-:host {
-  line-height: 0;
-  display: inline-flex;
-  &:hover {
-    button {
-      color: var(--primary);
-      & svg:not(.hover) {
-        color: var(--gray);
-      }
-    }
-  }
-  &[size="1"] {
-    font-size: 1rem;
-  }
-  &[size="2"] {
-    font-size: 1.5rem;
-  }
-  &[size="3"] {
-    font-size: 2rem;
-  }
-  &[size="4"] {
-    font-size: 3rem;
-  }
-  &[size="5"] {
-    font-size: 4.5rem;
-  }
-  &[size="6"] {
-    font-size: 8rem;
-  }
-  &[size="7"] {
-    font-size: 16rem;
-  }
-  &[size="8"] {
-    font-size: 32rem;
-  }
-}
-svg {
-  width: 1em;
-  height: 1em;
-  display: block;
-  path {
-    fill: none;
-    stroke-width: 1;
-    stroke: currentColor;
-  }
-  &.hover,
-  &.active {
-    path {
-      fill: currentColor;
-    }
-  }
-}
-button {
-  border: 0;
-  background: transparent;
-  padding: 0;
-  &:focus,
-  &:active {
-    outline: none;
-  }
-}

package/src/lib/inputs/rating/rating.component.spec.ts

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

package/src/lib/inputs/rating/rating.component.ts

@@ -1,66 +0,0 @@
-import { Component, OnInit, forwardRef, Input } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-@Component({
-  selector: 'ft-rating',
-  templateUrl: './rating.component.html',
-  styleUrls: ['./rating.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => RatingComponent),
-      multi: true
-    }
-  ]
-})
-export class RatingComponent implements OnInit, ControlValueAccessor {
-  disabled: boolean = false;
-  hoverValue!: number;
-  propagateChange = (_: any) => { };
-  @Input()
-  readOnly: boolean = false;
-  stars: any[] = [
-    { value: 1 },
-    { value: 2 },
-    { value: 3 },
-    { value: 4 },
-    { value: 5 }
-  ];
-  _value!: number;
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-  get value() {
-    return this._value;
-  }
-  @Input()
-  set value(value: any) {
-    this._value = value;
-    this.propagateChange(this._value);
-  }
-  registerOnChange(fn: (_: any) => void) {
-    this.propagateChange = fn;
-  }
-  registerOnTouched(fn:  (_: any) => void) {
-    //this.propagateChange = fn;
-  }
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-  setRate(value: number, isHover?: boolean) {
-    if (isHover) {
-      this.hoverValue = value;
-    } else {
-      this.value = value;
-    }
-  }
-  updateValue(event: any) {
-    this.value = event.target.value;
-  }
-  writeValue(value: string) {
-    this.value = value;
-  }
-
-}

package/src/lib/models/action-group.ts

@@ -1,9 +0,0 @@
-import { Action } from './action';
-
-export interface ActionGroup {
-  children?: Action[];
-  iconNameField?: string;
-  iconCollection?: string;
-  labelField?: string;
-  type?: string;
-}

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

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

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

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