@indice/ng-components 0.2.139 → 0.2.141

package/src/lib/controls/side-pane/side-pane.component.ts

@@ -1,59 +0,0 @@
-import { SidePaneOverlayType, SidePaneSize } from './../../types';
-import { Router } from '@angular/router';
-import { Component, Input, OnInit, OnDestroy, Inject, EventEmitter, Output } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-
-@Component({
-  selector: 'lib-side-pane',
-  templateUrl: './side-pane.component.html'
-})
-export class SidePaneComponent implements OnInit, OnDestroy {
-  // tslint:disable-next-line:no-input-rename
-  @Input('visible') showPane = false;
-  public sizeContainerStyle = 'side-pane-box-size';
-  public overlayStyle = 'side-pane-overlay';
-  @Output() onComplete: EventEmitter<boolean> = new EventEmitter<boolean>();
-  
-  constructor(private router: Router, @Inject(DOCUMENT) private document: any,) { }
-
-  ngOnDestroy(): void {
-  }
-
-  ngOnInit(): void  {
-  }
-
-  public onSidePaneActivated(component: any): void  {
-    this.document.body.classList.add('modal-active');
-    let sizeStyleSuffix = '';
-    const state = this.router.getCurrentNavigation()?.extras.state;
-    if (state) {
-      if (state.paneSize) {
-        if (state.paneSize === SidePaneSize.Small25) {
-          sizeStyleSuffix = '-25';
-        } else if (state.paneSize === SidePaneSize.Medium50) {
-          sizeStyleSuffix = '-50';
-        } else if (state.paneSize === SidePaneSize.Large75) {
-          sizeStyleSuffix = '-75';
-        }
-      }
-      if (state.paneOverlay) {
-        if (state.paneOverlay === SidePaneOverlayType.None)  {
-          this.overlayStyle = 'side-pane-overlay-opacity-0';
-        } else if (state.paneOverlay === SidePaneOverlayType.Dark) {
-          this.overlayStyle = 'side-pane-overlay-opacity-50';
-        } else {
-          this.overlayStyle = 'side-pane-overlay';
-        }
-      }
-    }
-    this.sizeContainerStyle = `side-pane-box-size${sizeStyleSuffix}`;
-    this.showPane = true;
-  }
-
-  public onSidePaneDeactivated($event: any): void  {  
-    this.document.body.classList.remove('modal-active');
-    this.showPane = false;
-    this.onComplete.emit(true);
-  }
-
-}

package/src/lib/controls/skeleton-loader/skeleton-loader.component.html

@@ -1,112 +0,0 @@
-<!-- <h1>SKELETON LOADER!</h1> -->
-<ng-container *ngSwitch="type">
-  <div class="cards-deck-4" *ngSwitchCase="'tiles'">
-    <ng-container *ngFor="let i of counter(count)">
-      <div class="relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg">
-        <div class="animate-pulse flex flex-col">
-          <div class="rounded w-full h-32 bg-gray-200"></div>
-          <div class="flex flex-col mt-5">
-            <div class="w-full h-5 bg-gray-200 rounded"></div>
-            <div class="mt-2 w-10/12 h-3 bg-gray-200 rounded"></div>
-            <div class="mt-2 w-8/12 h-3 bg-gray-200 rounded"></div>
-          </div>
-
-          <div class="grid grid-cols-2 mt-5 gap-x-2 gap-y-1">
-            <div class="mt-2 w-full h-3 bg-gray-200 rounded"></div>
-            <div class="mt-2 w-full h-3 bg-gray-200 rounded"></div>
-            <div class="mt-2 w-full h-3 bg-gray-200 rounded"></div>
-            <div class="mt-2 w-full h-3 bg-gray-200 rounded"></div>
-          </div>
-
-          <div class="flex items-center mt-5">
-            <div>
-              <div class="rounded-full bg-gray-200 w-10 h-10"></div>
-            </div>
-            <div class="flex justify-between w-full ml-3">
-              <div class="w-5/12 h-3 bg-gray-200 rounded"></div>
-              <div class="w-2/12 h-3 bg-gray-200 rounded"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </ng-container>
-  </div>
-  <div class="cards-deck-3" *ngSwitchCase="'large-tiles'">
-    <ng-container *ngFor="let i of counter(count)">
-      <div class="relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg">
-        <div class="animate-pulse flex flex-col">
-          <div class="rounded w-full h-52 bg-gray-200"></div>
-          <div class="flex flex-col mt-5">
-            <div class="w-full h-5 bg-gray-200 rounded"></div>
-            <div class="mt-2 w-10/12 h-3 bg-gray-200 rounded"></div>
-            <div class="mt-2 w-8/12 h-3 bg-gray-200 rounded"></div>
-          </div>
-
-          <div class="grid grid-cols-2 mt-5 gap-x-2 gap-y-1">
-            <div class="mt-2 w-full h-3 bg-gray-200 rounded"></div>
-            <div class="mt-2 w-full h-3 bg-gray-200 rounded"></div>
-            <div class="mt-2 w-full h-3 bg-gray-200 rounded"></div>
-            <div class="mt-2 w-full h-3 bg-gray-200 rounded"></div>
-          </div>
-
-          <div class="flex items-center mt-5">
-            <div>
-              <div class="rounded-full bg-gray-200 w-10 h-10"></div>
-            </div>
-            <div class="flex justify-between w-full ml-3">
-              <div class="w-5/12 h-3 bg-gray-200 rounded"></div>
-              <div class="w-2/12 h-3 bg-gray-200 rounded"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </ng-container>
-  </div>
-  <div class="cards-deck-1" *ngSwitchCase="'table'">
-    <ng-container *ngFor="let i of counter(count)">
-      <div class="border border-light-blue-300 shadow rounded-sm p-4 max-w-sm w-full mx-auto mb-4">
-        <div class="animate-pulse flex space-x-4">
-          <div class="rounded-full bg-light-blue-400 h-12 w-12">&nbsp;</div>
-          <div class="flex-1 space-y-4 py-1">
-            <div class="h-4 bg-light-blue-400 rounded w-3/4">&nbsp;</div>
-            <div class="space-y-2">
-              <div class="h-4 bg-light-blue-400 rounded">&nbsp;</div>
-              <div class="h-4 bg-light-blue-400 rounded w-5/6">&nbsp;</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </ng-container>
-  </div>
-  <div class="cards-deck-3" *ngSwitchDefault>
-    <ng-container *ngFor="let i of counter(count)">
-      <div class="relative p-4 w-full bg-white rounded-lg overflow-hidden shadow hover:shadow-md rounded-lg">
-        <div class="animate-pulse flex flex-col">
-          <div class="rounded w-full h-52 bg-gray-200"></div>
-          <div class="flex flex-col mt-5">
-            <div class="w-full h-5 bg-gray-200 rounded"></div>
-            <div class="mt-2 w-10/12 h-3 bg-gray-200 rounded"></div>
-            <div class="mt-2 w-8/12 h-3 bg-gray-200 rounded"></div>
-          </div>
-
-          <div class="grid grid-cols-2 mt-5 gap-x-2 gap-y-1">
-            <div class="mt-2 w-full h-3 bg-gray-200 rounded"></div>
-            <div class="mt-2 w-full h-3 bg-gray-200 rounded"></div>
-            <div class="mt-2 w-full h-3 bg-gray-200 rounded"></div>
-            <div class="mt-2 w-full h-3 bg-gray-200 rounded"></div>
-          </div>
-
-          <div class="flex items-center mt-5">
-            <div>
-              <div class="rounded-full bg-gray-200 w-10 h-10"></div>
-            </div>
-            <div class="flex justify-between w-full ml-3">
-              <div class="w-5/12 h-3 bg-gray-200 rounded"></div>
-              <div class="w-2/12 h-3 bg-gray-200 rounded"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </ng-container>
-  </div>
-</ng-container>

package/src/lib/controls/skeleton-loader/skeleton-loader.component.ts

@@ -1,20 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
-  // tslint:disable-next-line:component-selector
-  selector: 'lib-skeleton-loader',
-  templateUrl: './skeleton-loader.component.html'
-})
-export class SkeletonLoaderComponent implements OnInit {
-  @Input() count = 5;
-  @Input() type = 'tiles'; // 'large-tile', 'table'
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-  public counter(i: number): number[] {
-    return new Array(i);
-  }
-
-}

package/src/lib/controls/toaster/toaster-container.component.html

@@ -1 +0,0 @@
-<lib-toaster *ngFor="let toast of toasts; let i=index" [toast]="toast" [i]="i" (remove)="remove($event)"></lib-toaster>

package/src/lib/controls/toaster/toaster-container.component.ts

@@ -1,27 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ToasterService } from '../../services/toaster.service';
-import { Toast } from '../../types';
-
-@Component({
-  selector: 'lib-toaster-container',
-  templateUrl: './toaster-container.component.html'
-})
-export class ToasterContainerComponent implements OnInit {
-
-  toasts: Toast[] = [];
-
-  constructor(private toaster: ToasterService) { }
-
-  ngOnInit(): void {
-    this.toaster.toast$
-      .subscribe(toast => {
-        this.toasts = [toast, ...this.toasts];
-        setTimeout(() => this.toasts.pop(), toast.delay || 6000);
-      });
-  }
-
-  remove(index: number): void {
-    this.toasts = this.toasts.slice(0, index).concat(this.toasts.slice(index + 1));
-  }
-
-}

package/src/lib/controls/toaster/toaster.component.html

@@ -1,103 +0,0 @@
-<div aria-live="assertive"
-     [ngClass]="closed ? 'toast-closed': 'toast z-50'"
-     [ngStyle]="isMobile ? { 'margin-bottom.px': i * 85 } : {'margin-top.px': i * 85 }">
-  <div class="toast-container">
-    <div class="toast-pill">
-      <div class="toast-context-padding">
-        <div class="toast-context"
-             [ngSwitch]="toast?.type">
-          <div class="toast-icon"
-               *ngSwitchCase="'info'">
-            <svg class="h-5 w-5 text-blue-400"
-                 xmlns="http://www.w3.org/2000/svg"
-                 viewBox="0 0 20 20"
-                 fill="currentColor"
-                 aria-hidden="true">
-              <path fill-rule="evenodd"
-                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
-                    clip-rule="evenodd" />
-            </svg>
-          </div>
-          <div class="toast-icon"
-               *ngSwitchCase="'success'">
-            <svg class="h-5 w-5 text-green-400"
-                 xmlns="http://www.w3.org/2000/svg"
-                 fill="none"
-                 viewBox="0 0 24 24"
-                 stroke="currentColor"
-                 aria-hidden="true">
-              <path stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          </div>
-          <div class="toast-icon"
-               *ngSwitchCase="'error'">
-            <svg class="h-5 w-5 text-red-400"
-                 xmlns="http://www.w3.org/2000/svg"
-                 viewBox="0 0 20 20"
-                 fill="currentColor"
-                 aria-hidden="true">
-              <path fill-rule="evenodd"
-                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                    clip-rule="evenodd" />
-            </svg>
-          </div>
-          <div class="toast-icon"
-               *ngSwitchCase="'warning'">
-            <svg class="h-5 w-5 text-yellow-400"
-                 xmlns="http://www.w3.org/2000/svg"
-                 viewBox="0 0 20 20"
-                 fill="currentColor"
-                 aria-hidden="true">
-              <path fill-rule="evenodd"
-                    d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-                    clip-rule="evenodd" />
-            </svg>
-          </div>
-          <div class="toast-icon"
-               *ngSwitchDefault>
-            <svg class="h-5 w-5 text-green-400"
-                 xmlns="http://www.w3.org/2000/svg"
-                 fill="none"
-                 viewBox="0 0 24 24"
-                 stroke="currentColor"
-                 aria-hidden="true">
-              <path stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          </div>
-
-          <div class="ml-3 w-0 flex-1">
-            <p class="toast-title"
-               *ngIf="toast?.title">
-              {{toast?.title}}
-            </p>
-            <p class="toast-body">
-              {{toast?.body}}
-            </p>
-          </div>
-          <div class="toast-close-icon">
-            <button class="toast-close-button"
-                    (click)="closeToast(i)">
-              <span class="sr-only">Close</span>
-              <!-- Heroicon name: solid/x -->
-              <svg class="h-5 w-5"
-                   xmlns="http://www.w3.org/2000/svg"
-                   viewBox="0 0 20 20"
-                   fill="currentColor"
-                   aria-hidden="true">
-                <path fill-rule="evenodd"
-                      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                      clip-rule="evenodd" />
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

package/src/lib/controls/toaster/toaster.component.ts

@@ -1,26 +0,0 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Toast } from '../../types';
-
-@Component({
-  selector: 'lib-toaster',
-  templateUrl: './toaster.component.html'
-})
-export class ToasterComponent implements OnInit {
-
-  @Input() toast: Toast | undefined;
-  @Input() i = 0;
-  @Output() remove = new EventEmitter<number>();
-  public isMobile = false;
-  public closed = false;
-
-  constructor() { }
-
-  ngOnInit(): void {
-    window.screen.width > 640 ? this.isMobile = false : this.isMobile = true;
-  }
-
-  public closeToast(index: number): void {
-    this.closed = true;
-    setTimeout(() => this.remove.emit(index), 100);
-  }
-}

package/src/lib/controls/toggle/toggle.component.html

@@ -1,15 +0,0 @@
-<button type="button"
-        [ngClass]="value ? (disabled ? 'on disabled' : 'on') : 'off'"
-        class="toggle-button"
-        role="switch"
-        aria-checked="false"
-        aria-labelledby="isPrivate"
-        (click)="changeValue()"
-        (blur)="onBlur($event)"
-        value="{{value}}"
-        [disabled]="disabled"
-        [title]="disabled ? 'Το αρχείο πρέπει να είναι ιδωτικό' : 'Ιδιωτικό'">
-    <span aria-hidden="true"
-          [ngClass]="value ? 'enabled-anim' : 'disabled-anim'"
-          class="toggle-span"></span>
-</button>

package/src/lib/controls/toggle/toggle.component.ts

@@ -1,58 +0,0 @@
-import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
-import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
-
-@Component({
-  selector: 'lib-toggle',
-  templateUrl: './toggle.component.html',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ToggleComponent),
-      multi: true
-    }
-  ]
-})
-export class ToggleComponent implements OnInit, ControlValueAccessor {
-  @Input()
-  public value: boolean | null | undefined;
-  @Input()
-  public disabled:boolean | null | undefined;
-  @Output() valueChange: EventEmitter<Boolean> = new EventEmitter<Boolean>();
-
-  private onChange$: any | undefined = undefined;
-  private onTouched$: any | undefined = undefined;
-
-  constructor() { }
-  
-  writeValue(obj: any): void {
-    if(obj) {
-      this.value = obj || false;
-    }
-  }
-  registerOnChange(fn: any): void {
-    this.onChange$ = fn;
-  }
-  registerOnTouched(fn: any): void {
-    this.onTouched$ = fn;
-  }
-
-  public onBlur(event: any): void {
-    if(this.onTouched$) {
-      this.onTouched$();
-    }
-  }
-
-  ngOnInit(): void {
-  }
-
-  public changeValue(){
-    this.value = !this.value;
-    this.valueChange.emit(this.value);
-    if(this.onChange$) {
-      this.onChange$(this.value);
-    }
-    if(this.onTouched$) {
-      this.onTouched$();
-    }
-  }
-}

package/src/lib/directives/click-outside.directive.ts

@@ -1,196 +0,0 @@
-//
-// https://github.com/arkon/ng-click-outside
-// the project is inactive - so imoved the directive code in our project
-//
-import {
-  Directive,
-  ElementRef,
-  EventEmitter,
-  Inject,
-  Input,
-  OnChanges,
-  OnDestroy,
-  OnInit,
-  Output,
-  PLATFORM_ID,
-  SimpleChanges,
-  NgZone,
-} from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-
-// tslint:disable-next-line:directive-selector
-@Directive({ selector: '[clickOutside]' })
-export class ClickOutsideDirective implements OnInit, OnChanges, OnDestroy {
-
-  @Input() clickOutsideEnabled = true;
-
-  @Input() attachOutsideOnClick = false;
-  @Input() delayClickOutsideInit = false;
-  @Input() emitOnBlur = false;
-
-  @Input() exclude = '';
-  @Input() excludeBeforeClick = false;
-
-  @Input() clickOutsideEvents = '';
-
-  @Output() clickOutside: EventEmitter<Event> = new EventEmitter<Event>();
-
-  // tslint:disable-next-line:variable-name
-  private _nodesExcluded: Array<HTMLElement> = [];
-  // tslint:disable-next-line:variable-name
-  private _events: Array<string> = ['click'];
-
-  constructor(
-    // tslint:disable-next-line:variable-name
-    private _el: ElementRef,
-    // tslint:disable-next-line:variable-name
-    private _ngZone: NgZone,
-    @Inject(PLATFORM_ID) private platformId: any) {
-    this._initOnClickBody = this._initOnClickBody.bind(this);
-    this._onClickBody = this._onClickBody.bind(this);
-    this._onWindowBlur = this._onWindowBlur.bind(this);
-  }
-
-  ngOnInit(): void {
-    if (!isPlatformBrowser(this.platformId)) { return; }
-
-    this._init();
-  }
-
-  ngOnDestroy(): void {
-    if (!isPlatformBrowser(this.platformId)) { return; }
-
-    this._removeClickOutsideListener();
-    this._removeAttachOutsideOnClickListener();
-    this._removeWindowBlurListener();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (!isPlatformBrowser(this.platformId)) { return; }
-
-    // tslint:disable-next-line:no-string-literal
-    if (changes['attachOutsideOnClick'] || changes['exclude'] || changes['emitOnBlur']) {
-      this._init();
-    }
-  }
-
-  private _init(): void {
-    if (this.clickOutsideEvents !== '') {
-      this._events = this.clickOutsideEvents.split(',').map(e => e.trim());
-    }
-
-    this._excludeCheck();
-
-    if (this.attachOutsideOnClick) {
-      this._initAttachOutsideOnClickListener();
-    } else {
-      this._initOnClickBody();
-    }
-
-    if (this.emitOnBlur) {
-      this._initWindowBlurListener();
-    }
-  }
-
-  private _initOnClickBody(): void {
-    if (this.delayClickOutsideInit) {
-      setTimeout(this._initClickOutsideListener.bind(this));
-    } else {
-      this._initClickOutsideListener();
-    }
-  }
-
-  private _excludeCheck(): void {
-    if (this.exclude) {
-      try {
-        const nodes = Array.from(document.querySelectorAll(this.exclude)) as Array<HTMLElement>;
-        if (nodes) {
-          this._nodesExcluded = nodes;
-        }
-      } catch (err) {
-        console.error('[ng-click-outside] Check your exclude selector syntax.', err);
-      }
-    }
-  }
-
-  private _onClickBody(ev: Event): void {
-    if (!this.clickOutsideEnabled) { return; }
-
-    if (this.excludeBeforeClick) {
-      this._excludeCheck();
-    }
-
-    if (!this._el.nativeElement.contains(ev.target) && !this._shouldExclude(ev.target)) {
-      this._emit(ev);
-
-      if (this.attachOutsideOnClick) {
-        this._removeClickOutsideListener();
-      }
-    }
-  }
-
-  /**
-   * Resolves problem with outside click on iframe
-   * @see https://github.com/arkon/ng-click-outside/issues/32
-   */
-  private _onWindowBlur(ev: Event): void {
-    setTimeout(() => {
-      if (!document.hidden) {
-        this._emit(ev);
-      }
-    });
-  }
-
-  private _emit(ev: Event): void {
-    if (!this.clickOutsideEnabled) { return; }
-
-    this._ngZone.run(() => this.clickOutside.emit(ev));
-  }
-
-  private _shouldExclude(target: any): boolean {
-    // tslint:disable-next-line:prefer-const
-    for (let excludedNode of this._nodesExcluded) {
-      if (excludedNode.contains(target)) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  private _initClickOutsideListener(): void {
-    this._ngZone.runOutsideAngular(() => {
-      this._events.forEach(e => document.addEventListener(e, this._onClickBody));
-    });
-  }
-
-  private _removeClickOutsideListener(): void {
-    this._ngZone.runOutsideAngular(() => {
-      this._events.forEach(e => document.removeEventListener(e, this._onClickBody));
-    });
-  }
-
-  private _initAttachOutsideOnClickListener(): void {
-    this._ngZone.runOutsideAngular(() => {
-      this._events.forEach(e => this._el.nativeElement.addEventListener(e, this._initOnClickBody));
-    });
-  }
-
-  private _removeAttachOutsideOnClickListener(): void {
-    this._ngZone.runOutsideAngular(() => {
-      this._events.forEach(e => this._el.nativeElement.removeEventListener(e, this._initOnClickBody));
-    });
-  }
-
-  private _initWindowBlurListener(): void {
-    this._ngZone.runOutsideAngular(() => {
-      window.addEventListener('blur', this._onWindowBlur);
-    });
-  }
-
-  private _removeWindowBlurListener(): void {
-    this._ngZone.runOutsideAngular(() => {
-      window.removeEventListener('blur', this._onWindowBlur);
-    });
-  }
-}

package/src/lib/directives/dynamic-component-host.directive.ts

@@ -1,7 +0,0 @@
-import { Directive, ViewContainerRef, Input } from '@angular/core';
-
-@Directive({ selector: '[appDynamicComponentHost]' })
-export class DynamicComponentHostDirective {
-  @Input() hostName: string = '';
-  constructor(public viewContainerRef: ViewContainerRef) {}
-}