@progressio_resources/gravity-design-system 1.0.6 → 1.0.8

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.component.sass

@@ -0,0 +1,134 @@
+\:host
+  max-width: 200px
+  background-color: var(--bg-tooltip-primary)
+  color: var(--on-bg-tooltip-primary)
+  text-align: center
+  border-radius: 6px
+  padding: 5px 8px
+  position: absolute
+  pointer-events: none
+  z-index: 1000
+  display: block
+  opacity: 0
+  -webkit-transition: opacity 300ms
+  -moz-transition: opacity 300ms
+  -o-transition: opacity 300ms
+  transition: opacity 300ms
+  top: 0
+  left: 0
+
+\:host.tooltip-show
+  opacity: 1
+
+\:host.tooltip-shadow
+  box-shadow: 0 7px 15px -5px rgba(0, 0, 0, 0.4)
+
+\:host.tooltip-light.tooltip-shadow
+  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.4)
+
+\:host.tooltip::after
+  content: ""
+  position: absolute
+  border-style: solid
+
+\:host.tooltip-top::after
+  top: 100%
+  left: 50%
+  margin-left: -5px
+  border-width: 5px
+  border-color: var(--bg-tooltip-primary) transparent transparent transparent
+
+\:host.tooltip-bottom::after
+  bottom: 100%
+  left: 50%
+  margin-left: -5px
+  border-width: 5px
+  border-color: transparent transparent var(--bg-tooltip-primary) transparent
+
+\:host.tooltip-left::after
+  top: 50%
+  left: 100%
+  margin-top: -5px
+  border-width: 5px
+  border-color: transparent transparent transparent var(--bg-tooltip-primary)
+
+\:host.tooltip-right::after
+  top: 50%
+  right: 100%
+  margin-top: -5px
+  border-width: 5px
+  border-color: transparent var(--bg-tooltip-primary) transparent transparent
+
+// Light
+\:host.tooltip-light::after
+  display: none
+
+\:host.tooltip-light
+  border: 1px solid rgba(0, 0, 0, .06)
+  background-color: #fff
+  color: black
+
+  .tooltip-arrow
+    position: absolute
+    width: 10px
+    height: 10px
+    transform: rotate(135deg)
+    background-color: rgba(0, 0, 0, .07)
+
+  .tooltip-arrow::after
+    background-color: #fff
+    content: ''
+    display: block
+    position: absolute
+    width: 10px
+    height: 10px
+
+\:host.tooltip-top.tooltip-light
+  margin-top: -2px
+
+  .tooltip-arrow
+    top: 100%
+    left: 50%
+    margin-top: -4px
+    margin-left: -5px
+    background: linear-gradient(to bottom left, rgba(0, 0, 0, .07) 50%, transparent 50%)
+
+  .tooltip-arrow::after
+    top: 1px
+    right: 1px
+
+\:host.tooltip-bottom.tooltip-light
+  .tooltip-arrow
+    bottom: 100%
+    left: 50%
+    margin-bottom: -4px
+    margin-left: -5px
+    background: linear-gradient(to top right, rgba(0, 0, 0, .1) 50%, transparent 50%)
+
+  .tooltip-arrow::after
+    top: -1px
+    right: -1px
+
+\:host.tooltip-left.tooltip-light
+  .tooltip-arrow
+    top: 50%
+    left: 100%
+    margin-top: -5px
+    margin-left: -4px
+    background: linear-gradient(to bottom right, rgba(0, 0, 0, .07) 50%, transparent 50%)
+
+  .tooltip-arrow::after
+    top: 1px
+    right: -1px
+
+\:host.tooltip-right.tooltip-light
+  .tooltip-arrow
+    top: 50%
+    right: 100%
+    margin-top: -5px
+    margin-right: -4px
+    background: linear-gradient(to top left, rgba(0, 0, 0, .07) 50%, transparent 50%)
+
+  .tooltip-arrow::after
+    top: -1px
+    right: 1px

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

@@ -0,0 +1,215 @@
+import {Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnInit, Renderer2} from '@angular/core';
+
+@Component({
+  selector: 'tooltip',
+  templateUrl: './gravity-tooltip.component.html',
+  host: {'class': 'tooltip'},
+  styleUrls: ['./gravity-tooltip.component.sass']
+})
+
+export class GravityTooltipComponent implements OnInit {
+  _show: boolean = false;
+  events = new EventEmitter();
+
+  @Input() data: any;
+
+  @HostBinding('style.top') hostStyleTop!: string;
+  @HostBinding('style.left') hostStyleLeft!: string;
+  @HostBinding('style.z-index') hostStyleZIndex!: number;
+  @HostBinding('style.transition') hostStyleTransition!: string;
+  @HostBinding('style.width') hostStyleWidth!: string;
+  @HostBinding('style.max-width') hostStyleMaxWidth!: string;
+  @HostBinding('style.pointer-events') hostStylePointerEvents!: string;
+  @HostBinding('class.tooltip-show') hostClassShow!: boolean;
+  @HostBinding('class.tooltip-shadow') hostClassShadow!: boolean;
+  @HostBinding('class.tooltip-light') hostClassLight!: boolean;
+
+  @HostListener('transitionend', ['$event'])
+  transitionEnd() {
+    if (this.show) {
+      this.events.emit({
+        type: 'shown'
+      });
+    }
+  }
+
+  @Input() set show(value: boolean) {
+    if (value) {
+      this.setPosition();
+    }
+    this._show = this.hostClassShow = value;
+  }
+
+  get show(): boolean {
+    return this._show;
+  }
+
+  get placement() {
+    return this.data.options.placement;
+  }
+
+  get autoPlacement() {
+    return this.data.options.autoPlacement;
+  }
+
+  get element() {
+    return this.data.element;
+  }
+
+  get elementPosition() {
+    return this.data.elementPosition;
+  }
+
+  get options() {
+    return this.data.options;
+  }
+
+  get value() {
+    return this.data.value;
+  }
+
+  get tooltipOffset(): number {
+    return Number(this.data.options.offset);
+  }
+
+  get isThemeLight() {
+    return this.options['theme'] === 'light';
+  }
+
+  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
+  }
+
+  ngOnInit() {
+    this.setCustomClass();
+    this.setStyles();
+  }
+
+  setPosition(): void {
+    if (this.setHostStyle(this.placement)) {
+      this.setPlacementClass(this.placement);
+      return;
+    } else {
+      /* Is tooltip outside the visible area */
+      const placements = ['top', 'right', 'bottom', 'left'];
+      let isPlacementSet;
+
+      for (const placement of placements) {
+        if (this.setHostStyle(placement)) {
+          this.setPlacementClass(placement);
+          isPlacementSet = true;
+          return;
+        }
+      }
+
+      /* Set original placement */
+      if (!isPlacementSet) {
+        this.setHostStyle(this.placement, true);
+        this.setPlacementClass(this.placement);
+      }
+    }
+  }
+
+
+  setPlacementClass(placement: string): void {
+    this.renderer.addClass(this.elementRef.nativeElement, 'tooltip-' + placement);
+  }
+
+  setHostStyle(placement: string, disableAutoPlacement: boolean = false): boolean {
+    const isSvg = this.element instanceof SVGElement;
+    const tooltip = this.elementRef.nativeElement;
+    const isCustomPosition = !this.elementPosition.right;
+
+    let elementHeight = isSvg ? this.element.getBoundingClientRect().height : this.element.offsetHeight;
+    let elementWidth = isSvg ? this.element.getBoundingClientRect().width : this.element.offsetWidth;
+    const tooltipHeight = tooltip.clientHeight;
+    const tooltipWidth = tooltip.clientWidth;
+    const scrollY = window.pageYOffset;
+
+    if (isCustomPosition) {
+      elementHeight = 0;
+      elementWidth = 0;
+    }
+
+    let topStyle;
+    let leftStyle;
+
+    if (placement === 'top') {
+      topStyle = (this.elementPosition.top + scrollY) - (tooltipHeight + this.tooltipOffset);
+    }
+
+    if (placement === 'bottom') {
+      topStyle = (this.elementPosition.top + scrollY) + elementHeight + this.tooltipOffset;
+    }
+
+    if (placement === 'top' || placement === 'bottom') {
+      leftStyle = (this.elementPosition.left + elementWidth / 2) - tooltipWidth / 2;
+    }
+
+    if (placement === 'left') {
+      leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset;
+    }
+
+    if (placement === 'right') {
+      leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset;
+    }
+
+    if (placement === 'left' || placement === 'right') {
+      topStyle = (this.elementPosition.top + scrollY) + elementHeight / 2 - tooltip.clientHeight / 2;
+    }
+
+    /* Is tooltip outside the visible area */
+    if (this.autoPlacement && !disableAutoPlacement) {
+      const topEdge = topStyle;
+      const bottomEdge = topStyle + tooltipHeight;
+      const leftEdge = leftStyle;
+      const rightEdge = leftStyle + tooltipWidth;
+      const bodyHeight = window.innerHeight + scrollY;
+      const bodyWidth = document.body.clientWidth;
+
+      if (topEdge < 0 || bottomEdge > bodyHeight || leftEdge < 0 || rightEdge > bodyWidth) {
+        return false;
+      }
+    }
+
+    this.hostStyleTop = topStyle + 'px';
+    this.hostStyleLeft = leftStyle + 'px';
+    return true;
+  }
+
+  setZIndex(): void {
+    if (this.options['zIndex'] !== 0) {
+      this.hostStyleZIndex = this.options['zIndex'];
+    }
+  }
+
+  setPointerEvents(): void {
+    if (this.options['pointerEvents']) {
+      this.hostStylePointerEvents = this.options['pointerEvents'];
+    }
+  }
+
+  setCustomClass() {
+    if (this.options['tooltipClass']) {
+      this.options['tooltipClass'].split(' ').forEach((className: any) => {
+        this.renderer.addClass(this.elementRef.nativeElement, className);
+      });
+    }
+  }
+
+  setAnimationDuration() {
+    if (Number(this.options['animationDuration']) != this.options['animationDurationDefault']) {
+      this.hostStyleTransition = 'opacity ' + this.options['animationDuration'] + 'ms';
+    }
+  }
+
+  setStyles() {
+    this.setZIndex();
+    this.setPointerEvents();
+    this.setAnimationDuration();
+
+    this.hostClassShadow = this.options['shadow'];
+    this.hostClassLight = this.isThemeLight;
+    this.hostStyleMaxWidth = this.options['maxWidth'];
+    this.hostStyleWidth = this.options['width'] ? this.options['width'] : '';
+  }
+}