@factor_ec/ui 1.0.11 → 1.0.13

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/{lib/models/action.d.ts → src/lib/models/action.ts}

@@ -12,4 +12,4 @@ export interface Action {
     metadata?: any;
     value?: any;
     color?: string;
-}
+}

package/{lib/models/content.d.ts → src/lib/models/content.ts}

@@ -1,4 +1,4 @@
 export interface Content {
     content: string;
     type: 'text' | 'html';
-}
+}

package/{lib/models/icon.d.ts → src/lib/models/icon.ts}

@@ -3,4 +3,4 @@ export interface Icon {
     collection?: string;
     class?: string;
     size?: number;
-}
+}

package/{lib/models/message-options.d.ts → src/lib/models/message-options.ts}

@@ -1,5 +1,6 @@
 import { Action } from "./action";
 import { Icon } from "./icon";
+
 export interface MessageOptions {
     type?: 'modal' | 'notification';
     actions?: Action[];
@@ -10,4 +11,4 @@ export interface MessageOptions {
     titleIcon?: Icon;
     icon?: Icon;
     width?: string;
-}
+}