@progressio_resources/gravity-design-system 1.0.5 → 1.0.7

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.directive.ts

@@ -0,0 +1,506 @@
+import {
+  ApplicationRef,
+  ComponentFactoryResolver,
+  Directive,
+  ElementRef,
+  EmbeddedViewRef,
+  EventEmitter,
+  HostListener,
+  Inject,
+  Injector,
+  Input,
+  OnChanges,
+  Optional,
+  Output,
+  SimpleChanges,
+  TemplateRef
+} from '@angular/core';
+import {GravityTooltipComponent} from './gravity-tooltip.component';
+import {TooltipOptionsService} from './options.service';
+import {backwardCompatibilityOptions, defaultOptions} from './options';
+import {TooltipOptions} from './options.interface';
+
+export interface AdComponent {
+  data: any;
+  show: boolean;
+  close: boolean;
+  events: any;
+}
+
+@Directive({
+  selector: '[tooltip]',
+  exportAs: 'tooltip',
+})
+
+export class GravityTooltipDirective implements OnChanges {
+
+  hideTimeoutId!: number;
+  destroyTimeoutId!: number;
+  hideAfterClickTimeoutId!: number;
+  createTimeoutId!: number;
+  showTimeoutId!: number;
+  componentRef: any;
+  elementPosition: any;
+  _id: any;
+  _options: any = {};
+  _defaultOptions: any;
+  _destroyDelay!: number;
+  componentSubscribe: any;
+  _contentType: "string" | "html" | "template" = "string";
+  _showDelay!: number;
+  _hideDelay!: number;
+  _zIndex!: number;
+  _tooltipClass!: string;
+  _animationDuration!: number;
+  _maxWidth!: string;
+
+  @Input('options') set options(value: TooltipOptions) {
+    if (value && defaultOptions) {
+      this._options = value;
+    }
+  }
+
+  get options() {
+    return this._options;
+  }
+
+  @Input('tooltip') tooltipValue!: string | TemplateRef<any>;
+  @Input('placement') placement!: string;
+  @Input('autoPlacement') autoPlacement!: boolean;
+
+  // Content type
+  @Input('content-type') set contentTypeBackwardCompatibility(value: "string" | "html" | "template") {
+    if (value) {
+      this._contentType = value;
+    }
+  }
+
+  @Input('contentType') set contentType(value: "string" | "html" | "template") {
+    if (value) {
+      this._contentType = value;
+    }
+  }
+
+  get contentType() {
+    return this._contentType;
+  }
+
+  @Input('hide-delay-mobile') hideDelayMobile!: number;
+  @Input('hideDelayTouchscreen') hideDelayTouchscreen!: number;
+
+  // z-index
+  @Input('z-index') set zIndexBackwardCompatibility(value: number) {
+    if (value) {
+      this._zIndex = value;
+    }
+  }
+
+  @Input('zIndex') set zIndex(value: number) {
+    if (value) {
+      this._zIndex = value;
+    }
+  }
+
+  get zIndex() {
+    return this._zIndex;
+  }
+
+  // Animation duration
+  @Input('animation-duration') set animationDurationBackwardCompatibility(value: number) {
+    if (value) {
+      this._animationDuration = value;
+    }
+  }
+
+  @Input('animationDuration') set animationDuration(value: number) {
+    if (value) {
+      this._animationDuration = value;
+    }
+  }
+
+  get animationDuration() {
+    return this._animationDuration;
+  }
+
+
+  @Input('trigger') trigger!: string;
+
+  // Tooltip class
+  @Input('tooltip-class') set tooltipClassBackwardCompatibility(value: string) {
+    if (value) {
+      this._tooltipClass = value;
+    }
+  }
+
+  @Input('tooltipClass') set tooltipClass(value: string) {
+    if (value) {
+      this._tooltipClass = value;
+    }
+  }
+
+  get tooltipClass() {
+    return this._tooltipClass;
+  }
+
+  @Input('display') display!: boolean;
+  @Input('display-mobile') displayMobile!: boolean;
+  @Input('displayTouchscreen') displayTouchscreen!: boolean;
+  @Input('shadow') shadow!: boolean;
+  @Input('theme') theme!: "dark" | "light";
+  @Input('offset') offset!: number;
+  @Input('width') width!: string;
+
+  // Max width
+  @Input('max-width') set maxWidthBackwardCompatibility(value: string) {
+    if (value) {
+      this._maxWidth = value;
+    }
+  }
+
+  @Input('maxWidth') set maxWidth(value: string) {
+    if (value) {
+      this._maxWidth = value;
+    }
+  }
+
+  get maxWidth() {
+    return this._maxWidth;
+  }
+
+
+  @Input('id') id: any;
+
+  // Show delay
+  @Input('show-delay') set showDelayBackwardCompatibility(value: number) {
+    if (value) {
+      this._showDelay = value;
+    }
+  }
+
+  @Input('showDelay') set showDelay(value: number) {
+    if (value) {
+      this._showDelay = value;
+    }
+  }
+
+  get showDelay() {
+    return this._showDelay;
+  }
+
+  // Hide delay
+  @Input('hide-delay') set hideDelayBackwardCompatibility(value: number) {
+    if (value) {
+      this._hideDelay = value;
+    }
+  }
+
+  @Input('hideDelay') set hideDelay(value: number) {
+    if (value) {
+      this._hideDelay = value;
+    }
+  }
+
+  get hideDelay() {
+    return this._hideDelay;
+  }
+
+  @Input('hideDelayAfterClick') hideDelayAfterClick!: number;
+  @Input('pointerEvents') pointerEvents!: 'auto' | 'none';
+  @Input('position') position!: { top: number, left: number };
+
+  get isTooltipDestroyed() {
+    return this.componentRef && this.componentRef.hostView.destroyed;
+  }
+
+  get destroyDelay() {
+    if (this._destroyDelay) {
+      return this._destroyDelay;
+    } else {
+      return Number(this.getHideDelay()) + Number(this.options['animationDuration']);
+    }
+  }
+
+  set destroyDelay(value: number) {
+    this._destroyDelay = value;
+  }
+
+  get tooltipPosition() {
+    if (this.options['position']) {
+      return this.options['position'];
+    } else {
+      return this.elementPosition;
+    }
+  }
+
+  @Output() events: EventEmitter<any> = new EventEmitter<any>();
+
+  constructor(
+    @Optional() @Inject(TooltipOptionsService) private initOptions: any,
+    private elementRef: ElementRef,
+    private componentFactoryResolver: ComponentFactoryResolver,
+    private appRef: ApplicationRef,
+    private injector: Injector) {
+  }
+
+  @HostListener('focusin')
+  @HostListener('mouseenter')
+  onMouseEnter() {
+    if (this.isDisplayOnHover == false) {
+      return;
+    }
+
+    this.show();
+  }
+
+  @HostListener('focusout')
+  @HostListener('mouseleave')
+  onMouseLeave() {
+    if (this.options['trigger'] === 'hover') {
+      this.destroyTooltip();
+    }
+  }
+
+  @HostListener('click')
+  onClick() {
+    if (this.isDisplayOnClick == false) {
+      return;
+    }
+
+    this.show();
+    this.hideAfterClickTimeoutId = window.setTimeout(() => {
+      this.destroyTooltip();
+    }, this.options['hideDelayAfterClick'])
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.initOptions = this.renameProperties(this.initOptions);
+    let changedOptions = this.getProperties(changes);
+    changedOptions = this.renameProperties(changedOptions);
+
+    this.applyOptionsDefault(defaultOptions, changedOptions);
+  }
+
+  ngOnDestroy(): void {
+    this.destroyTooltip({
+      fast: true
+    });
+
+    if (this.componentSubscribe) {
+      this.componentSubscribe.unsubscribe();
+    }
+  }
+
+  getShowDelay() {
+    return this.options['showDelay'];
+  }
+
+  getHideDelay() {
+    const hideDelay = this.options['hideDelay'];
+    const hideDelayTouchscreen = this.options['hideDelayTouchscreen'];
+
+    return this.isTouchScreen ? hideDelayTouchscreen : hideDelay;
+  }
+
+  getProperties(changes: SimpleChanges) {
+    let directiveProperties: any = {};
+    let customProperties: any = {};
+    let allProperties: any;
+
+    for (var prop in changes) {
+      if (prop !== 'options' && prop !== 'tooltipValue') {
+        directiveProperties[prop] = changes[prop].currentValue;
+      }
+      if (prop === 'options') {
+        customProperties = changes[prop].currentValue;
+      }
+    }
+
+    allProperties = Object.assign({}, customProperties, directiveProperties);
+    return allProperties;
+  }
+
+  renameProperties(options: any) {
+    for (var prop in options) {
+      if (backwardCompatibilityOptions[prop]) {
+        options[backwardCompatibilityOptions[prop]] = options[prop];
+        delete options[prop];
+      }
+    }
+
+    return options;
+  }
+
+  getElementPosition(): void {
+    this.elementPosition = this.elementRef.nativeElement.getBoundingClientRect();
+  }
+
+  createTooltip(): void {
+    this.clearTimeouts();
+    this.getElementPosition();
+
+    this.createTimeoutId = window.setTimeout(() => {
+      this.appendComponentToBody(GravityTooltipComponent);
+    }, this.getShowDelay());
+
+    this.showTimeoutId = window.setTimeout(() => {
+      this.showTooltipElem();
+    }, this.getShowDelay());
+  }
+
+  destroyTooltip(options = {
+    fast: false
+  }): void {
+    this.clearTimeouts();
+
+    if (this.isTooltipDestroyed == false) {
+      this.hideTimeoutId = window.setTimeout(() => {
+        this.hideTooltip();
+      }, options.fast ? 0 : this.getHideDelay());
+
+      this.destroyTimeoutId = window.setTimeout(() => {
+        if (!this.componentRef || this.isTooltipDestroyed) {
+          return;
+        }
+
+        this.appRef.detachView(this.componentRef.hostView);
+        this.componentRef.destroy();
+        this.events.emit({
+          type: 'hidden',
+          position: this.tooltipPosition
+        });
+      }, options.fast ? 0 : this.destroyDelay);
+    }
+  }
+
+  showTooltipElem(): void {
+    this.clearTimeouts();
+    (<AdComponent>this.componentRef.instance).show = true;
+    this.events.emit({
+      type: 'show',
+      position: this.tooltipPosition
+    });
+  }
+
+  hideTooltip(): void {
+    if (!this.componentRef || this.isTooltipDestroyed) {
+      return;
+    }
+    (<AdComponent>this.componentRef.instance).show = false;
+    this.events.emit({
+      type: 'hide',
+      position: this.tooltipPosition
+    });
+  }
+
+  appendComponentToBody(component: any): void {
+    this.componentRef = this.componentFactoryResolver
+      .resolveComponentFactory(component)
+      .create(this.injector);
+
+    (<AdComponent>this.componentRef.instance).data = {
+      value: this.tooltipValue,
+      element: this.elementRef.nativeElement,
+      elementPosition: this.tooltipPosition,
+      options: this.options
+    }
+    this.appRef.attachView(this.componentRef.hostView);
+    const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+    document.body.appendChild(domElem);
+
+    this.componentSubscribe = (<AdComponent>this.componentRef.instance).events.subscribe((event: any) => {
+      this.handleEvents(event);
+    });
+  }
+
+  clearTimeouts(): void {
+    if (this.createTimeoutId) {
+      clearTimeout(this.createTimeoutId);
+    }
+
+    if (this.showTimeoutId) {
+      clearTimeout(this.showTimeoutId);
+    }
+
+    if (this.hideTimeoutId) {
+      clearTimeout(this.hideTimeoutId);
+    }
+
+    if (this.destroyTimeoutId) {
+      clearTimeout(this.destroyTimeoutId);
+    }
+  }
+
+  get isDisplayOnHover(): boolean {
+    if (this.options['display'] == false) {
+      return false;
+    }
+
+    if (this.options['displayTouchscreen'] == false && this.isTouchScreen) {
+      return false;
+    }
+
+    return this.options['trigger'] === 'hover';
+  }
+
+  get isDisplayOnClick(): boolean {
+    if (this.options['display'] == false) {
+      return false;
+    }
+
+    if (this.options['displayTouchscreen'] == false && this.isTouchScreen) {
+      return false;
+    }
+
+    return this.options['trigger'] == 'click';
+
+
+  }
+
+  get isTouchScreen() {
+    var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
+    var mq = function (query: any) {
+      return window.matchMedia(query).matches;
+    }
+
+    if (('ontouchstart' in window)) {
+      return true;
+    }
+
+    // include the 'heartz' as a way to have a non matching MQ to help terminate the join
+    // https://git.io/vznFH
+    var query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join('');
+    return mq(query);
+  }
+
+  applyOptionsDefault(defaultOptions: any, options: any): void {
+    this.options = Object.assign({}, defaultOptions, this.initOptions || {}, this.options, options);
+  }
+
+  handleEvents(event: any) {
+    if (event.type === 'shown') {
+      this.events.emit({
+        type: 'shown',
+        position: this.tooltipPosition
+      });
+    }
+  }
+
+  public show() {
+    if (!this.tooltipValue) {
+      return;
+    }
+
+    if (!this.componentRef || this.isTooltipDestroyed) {
+      this.createTooltip();
+    } else if (!this.isTooltipDestroyed) {
+      this.showTooltipElem();
+    }
+  }
+
+  public hide() {
+    this.destroyTooltip();
+  }
+}

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.module.ts

@@ -0,0 +1,33 @@
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {GravityTooltipDirective} from './gravity-tooltip.directive';
+import {GravityTooltipComponent} from './gravity-tooltip.component';
+import {TooltipOptions} from './options.interface';
+import {TooltipOptionsService} from './options.service';
+
+@NgModule({
+  declarations: [
+    GravityTooltipDirective,
+    GravityTooltipComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    GravityTooltipDirective,
+    GravityTooltipComponent
+  ]
+})
+export class GravityTooltipModule {
+  static forRoot(initOptions: TooltipOptions): ModuleWithProviders<GravityTooltipModule> {
+    return {
+      ngModule: GravityTooltipModule,
+      providers: [
+        {
+          provide: TooltipOptionsService,
+          useValue: initOptions
+        }
+      ]
+    };
+  }
+}

package/src/lib/vendor/gravity-tooltip/index.ts

@@ -0,0 +1,3 @@
+export * from './gravity-tooltip.component';
+export * from './gravity-tooltip.directive';
+export * from './gravity-tooltip.module';

package/src/lib/vendor/gravity-tooltip/options.interface.ts

@@ -0,0 +1,37 @@
+export interface TooltipOptions {
+  'placement'?: string;
+  'autoPlacement'?: boolean;
+  'content-type'?: 'string' | 'html' | 'template';
+  'contentType'?: 'string' | 'html' | 'template';
+  'delay'?: number;
+  'show-delay'?: number;
+  'showDelay'?: number;
+  'hide-delay'?: number;
+  'hideDelay'?: number;
+  'hide-delay-mobile'?: number;
+  'hideDelayMobile'?: number;
+  'hideDelayTouchscreen'?: number;
+  'z-index'?: number;
+  'zIndex'?: number;
+  'animation-duration'?: number;
+  'animationDuration'?: number;
+  'animation-duration-default'?: number;
+  'animationDurationDefault'?: number;
+  'trigger'?: string;
+  'tooltip-class'?: string;
+  'tooltipClass'?: string;
+  'display'?: boolean;
+  'display-mobile'?: boolean;
+  'displayMobile'?: boolean;
+  'displayTouchscreen'?: boolean;
+  'shadow'?: boolean;
+  'theme'?: "dark" | "light";
+  'offset'?: number;
+  'width'?: string;
+  'max-width'?: string;
+  'maxWidth'?: string;
+  'id'?: string | number;
+  'hideDelayAfterClick'?: number;
+  'pointerEvents'?: 'auto' | 'none';
+  'position'?: { top: number, left: number };
+}

package/src/lib/vendor/gravity-tooltip/options.service.ts

@@ -0,0 +1,8 @@
+import { InjectionToken } from '@angular/core';
+import { TooltipOptions } from './options.interface';
+
+/**
+ * This is not a real service, but it looks like it from the outside.
+ * It's just an InjectionToken used to import the config (initOptions) object, provided from the outside
+ */
+export const TooltipOptionsService = new InjectionToken<TooltipOptions>('TooltipOptions');

package/src/lib/vendor/gravity-tooltip/options.ts

@@ -0,0 +1,38 @@
+export const defaultOptions = {
+  'placement': 'top',
+  'autoPlacement': true,
+  'contentType': 'string',
+  'showDelay': 0,
+  'hideDelay': 300,
+  'hideDelayMobile': 0,
+  'hideDelayTouchscreen': 0,
+  'zIndex': 0,
+  'animationDuration': 300,
+  'animationDurationDefault': 300,
+  'trigger': 'hover',
+  'tooltipClass': '',
+  'display': true,
+  'displayMobile': true,
+  'displayTouchscreen': true,
+  'shadow': true,
+  'theme': 'dark',
+  'offset': 8,
+  'maxWidth': '',
+  'id': false,
+  'hideDelayAfterClick': 2000
+}
+
+export const backwardCompatibilityOptions: any = {
+  'delay': 'showDelay',
+  'show-delay': 'showDelay',
+  'hide-delay': 'hideDelay',
+  'hide-delay-mobile': 'hideDelayTouchscreen',
+  'hideDelayMobile': 'hideDelayTouchscreen',
+  'z-index': 'zIndex',
+  'animation-duration': 'animationDuration',
+  'animation-duration-default': 'animationDurationDefault',
+  'tooltip-class': 'tooltipClass',
+  'display-mobile': 'displayTouchscreen',
+  'displayMobile': 'displayTouchscreen',
+  'max-width': 'maxWidth'
+}

package/esm2020/lib/gravity-design-system.component.mjs

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-import * as i0 from "@angular/core";
-export class GravityDesignSystemComponent {
-}
-GravityDesignSystemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GravityDesignSystemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: GravityDesignSystemComponent, selector: "lib-gravity-design-system", ngImport: i0, template: `
-    <p>
-      gravity-design-system works!
-    </p>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-gravity-design-system', template: `
-    <p>
-      gravity-design-system works!
-    </p>
-  ` }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3Jhdml0eS1kZXNpZ24tc3lzdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2dyYXZpdHktZGVzaWduLXN5c3RlbS9zcmMvbGliL2dyYXZpdHktZGVzaWduLXN5c3RlbS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFXeEMsTUFBTSxPQUFPLDRCQUE0Qjs7eUhBQTVCLDRCQUE0Qjs2R0FBNUIsNEJBQTRCLGlFQVA3Qjs7OztHQUlUOzJGQUdVLDRCQUE0QjtrQkFUeEMsU0FBUzsrQkFDRSwyQkFBMkIsWUFDM0I7Ozs7R0FJVCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50fSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLWdyYXZpdHktZGVzaWduLXN5c3RlbScsXG4gIHRlbXBsYXRlOiBgXG4gICAgPHA+XG4gICAgICBncmF2aXR5LWRlc2lnbi1zeXN0ZW0gd29ya3MhXG4gICAgPC9wPlxuICBgLFxuICBzdHlsZXM6IFtdXG59KVxuZXhwb3J0IGNsYXNzIEdyYXZpdHlEZXNpZ25TeXN0ZW1Db21wb25lbnQge1xufVxuIl19

package/esm2020/lib/gravity-design-system.service.mjs

@@ -1,11 +0,0 @@
-import { Injectable } from '@angular/core';
-import * as i0 from "@angular/core";
-export class GravityDesignSystemService {
-}
-GravityDesignSystemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-GravityDesignSystemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: GravityDesignSystemService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3Jhdml0eS1kZXNpZ24tc3lzdGVtLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0vc3JjL2xpYi9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0uc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sZUFBZSxDQUFDOztBQUd6QyxNQUFNLE9BQU8sMEJBQTBCOzt1SEFBMUIsMEJBQTBCOzJIQUExQiwwQkFBMEIsY0FEZCxNQUFNOzJGQUNsQiwwQkFBMEI7a0JBRHRDLFVBQVU7bUJBQUMsRUFBQyxVQUFVLEVBQUUsTUFBTSxFQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtJbmplY3RhYmxlfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQEluamVjdGFibGUoe3Byb3ZpZGVkSW46ICdyb290J30pXG5leHBvcnQgY2xhc3MgR3Jhdml0eURlc2lnblN5c3RlbVNlcnZpY2Uge1xufVxuIl19

package/lib/gravity-design-system.component.d.ts

@@ -1,5 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class GravityDesignSystemComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<GravityDesignSystemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GravityDesignSystemComponent, "lib-gravity-design-system", never, {}, {}, never, never, false, never>;
-}

package/lib/gravity-design-system.service.d.ts

@@ -1,5 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class GravityDesignSystemService {
-    static ɵfac: i0.ɵɵFactoryDeclaration<GravityDesignSystemService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<GravityDesignSystemService>;
-}