@progressio_resources/gravity-design-system 1.0.5 → 1.0.7

package/src/lib/styles/gravity-design-system.scss

@@ -0,0 +1,7 @@
+@import "./fundamentals/colors/tokens/hero.tokens";
+@import "./fundamentals/typography/hero.typography";
+@import "./overwrite/pretty-checkbox/pretty-checkbox.scss";
+@import "./card_highlight";
+@import "./datepicker";
+@import "./icons";
+@import "./link";

package/src/lib/styles/overwrite/pretty-checkbox/_core.scss

@@ -0,0 +1,120 @@
+@charset "utf-8";
+
+.#{$pretty--class-name} * {
+  box-sizing: border-box;
+}
+
+//Throw error on invalid input types.
+.#{$pretty--class-name} input:not([type='checkbox']):not([type='radio']) {
+  display: none;
+
+  @if $pretty--debug {
+    + *:after {
+      content: $pretty--err-message;
+      border: 1px solid #dedede;
+      border-left: 3px solid #d9534f;
+      padding: 9px;
+      font-size: 1em;
+      font-weight: 600;
+      color: #d9534f;
+      position: absolute;
+      z-index: 3;
+      background: #fbfbfb;
+      top: 0;
+      left: 0;
+    }
+  }
+}
+
+.#{$pretty--class-name} {
+  position: relative;
+  display: inline-block;
+  margin-right: 1em;
+  white-space: nowrap;
+  line-height: 1;
+
+  &:not(.p-switch){
+      input[type="checkbox"] {
+        &:not(:checked) ~ .state label:before {
+          border-color: var(--outline-checkbox-off-primary);
+        }
+
+        &:checked ~ .state {
+          label:after {
+            background-color: var(--bg-checkbox-on-primary);
+          }
+
+          svg-icon svg path {
+            fill: var(--on-bg-checkbox-on-primary);
+            stroke: var(--on-bg-checkbox-on-primary);
+          }
+        }
+        &:disabled ~ .state {
+          label:before {
+            border-color: var(--bg-button-disabled);
+          }
+        }
+        &:disabled:checked ~ .state {
+          label:after {
+            background-color: var(--bg-button-disabled);
+          }
+
+          svg-icon svg path {
+            fill: var(--on-bg-disabled);
+            stroke: var(--on-bg-disabled);
+          }
+        }
+
+      }
+  }
+
+  input {
+    position: absolute;
+    left: 0;
+    top: 0;
+    min-width: 1em;
+    width: 100%;
+    height: 100%;
+    z-index: $pretty--z-index-front;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .state {
+    label {
+      position: initial;
+      display: inline-block;
+      font-weight: normal;
+      margin: 0;
+      text-indent: $pretty--label-text-offset;
+      min-width: $pretty--box-size;
+
+      &:before,
+      &:after {
+        content: '';
+        width: $pretty--box-size;
+        height: $pretty--box-size;
+        display: block;
+        box-sizing: border-box;
+        border-radius: 0;
+        border: 1px solid transparent;
+        z-index: $pretty--z-index-back;
+        position: absolute;
+        left: 0;
+        top: $pretty-top-offset;
+        background-color: transparent;
+      }
+
+      &:before {
+        border-color: $pretty--color-default;
+      }
+    }
+
+    &.p-is-hover,
+    &.p-is-indeterminate {
+      display: none;
+    }
+  }
+}

package/src/lib/styles/overwrite/pretty-checkbox/_variables.scss

@@ -0,0 +1,39 @@
+$pretty--class-name: pretty !default;
+
+// colors
+$pretty--color-default: #bdc3c7 !default;
+$pretty--color-primary: #428bca !default;
+$pretty--color-info: #5bc0de !default;
+$pretty--color-success: #5cb85c !default;
+$pretty--color-warning: #f0ad4e !default;
+$pretty--color-danger: #d9534f !default;
+$pretty--color-dark: #5a656b !default;
+
+// z-index
+$pretty--z-index-back: 0 !default;
+$pretty--z-index-between: 1 !default;
+$pretty--z-index-front: 2 !default;
+
+// box
+$pretty--curve-radius: 20% !default;
+$pretty--box-size: calc(1em + 2px) !default;
+
+// text
+$pretty--label-text-offset: 1.5em !default;
+$pretty--label-text-offset-switch: 2.5em !default;
+
+// scale
+$pretty--2x: 1.2em !default;
+
+// color set
+$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), (success, $pretty--color-success), (warning, $pretty--color-warning), (danger, $pretty--color-danger) !default;
+
+// position
+$pretty-top: 7;
+$pretty-top-switch: ($pretty-top * 2) * 1%;
+$pretty-top-offset: calc((0% - (100% - 1em)) - #{$pretty-top * 1%});
+$pretty-top-offset-switch: calc((0% - (100% - 1em)) - #{$pretty-top-switch});
+
+// dev 
+$pretty--debug: false !default;
+$pretty--err-message: 'Error: Invalid input type!' !default;

package/src/lib/styles/overwrite/pretty-checkbox/elements/default/_outline.scss

@@ -0,0 +1,41 @@
+.#{$pretty--class-name}.p-default {
+  .state label {
+    &:after {
+      transform: scale(0.6);
+    }
+  }
+
+  input:checked ~ .state label {
+    &:after {
+      background-color: $pretty--color-default !important;
+    }
+  }
+
+  input[type='radio'] {
+    &:not(:checked) ~ .state label:before {
+      border-color: var(--radio-button-off-primary);
+    }
+
+    &:checked ~ .state label {
+      &:before {
+        border-color: var(--radio-button-on-primary);
+      }
+
+      &:after {
+        background-color: var(--radio-button-on-primary) !important;
+      }
+    }
+
+    &:disabled ~ .state {
+      label:before {
+        border-color: var(--outline-disabled);
+      }
+    }
+    &:disabled:checked ~ .state {
+      label:after {
+        background-color: var(--outline-disabled);
+      }
+    }
+
+  }
+}

package/src/lib/styles/overwrite/pretty-checkbox/elements/switch/_fill.scss

@@ -0,0 +1,7 @@
+@use 'mixin';
+
+.#{$pretty--class-name}.p-switch.p-fill {
+  input:checked:not(:disabled) ~ .state {
+      @include mixin.switchColor(bg-switch-on-primary);
+  }
+}

package/src/lib/styles/overwrite/pretty-checkbox/elements/switch/_general.scss

@@ -0,0 +1,47 @@
+@use 'mixin';
+
+.#{$pretty--class-name}.p-switch {
+  input{
+    min-width:2em;
+    &:checked ~ .state, &:disabled ~ .state {
+      @include mixin.switchColor(bg-switch-disabled-primary);
+    }
+  }
+
+  .state {
+    position: relative;
+
+    &:before {
+      content: '';
+      border: 1px solid var(--bg-switch-off-primary);
+      background-color: var(--bg-switch-off-primary);
+      border-radius: 60px;
+      width: 2em;
+      box-sizing: unset;
+      height: $pretty--box-size;
+      position: absolute;
+      top: 0;
+      top: $pretty-top-offset-switch;
+      z-index: $pretty--z-index-back;
+      transition: all 0.5s ease;
+    }
+
+    label {
+      text-indent: $pretty--label-text-offset-switch;
+
+      &:before,
+      &:after {
+        transition: all 0.5s ease;
+        border-radius: 100%;
+        left: 0;
+        border-color: transparent;
+        transform: scale(0.8);
+      }
+
+      &:before{
+        border: 1px solid var(--on-bg-switch-off-primary);
+        background-color: var(--on-bg-switch-off-primary);
+      }
+    }
+  }
+}

package/src/lib/styles/overwrite/pretty-checkbox/elements/switch/_mixin.scss

@@ -0,0 +1,15 @@
+@mixin switchColor($varColorName) {
+  &:before {
+    border-color: var(--#{$varColorName});
+    background-color: var(--#{$varColorName});
+  }
+
+  label:before {
+    opacity: 0;
+  }
+
+  label:after {
+    background-color: var(--on-#{$varColorName}) !important;
+    left: 1em;
+  }
+}

package/src/lib/styles/overwrite/pretty-checkbox/pretty-checkbox.scss

@@ -0,0 +1,29 @@
+@import './variables';
+@import './core';
+
+
+@import 'node_modules/pretty-checkbox/src/scss/essentials/keyframes';
+@import 'node_modules/pretty-checkbox/src/scss/essentials/functions';
+@import 'node_modules/pretty-checkbox/src/scss/essentials/mixins';
+@import 'node_modules/pretty-checkbox/src/scss/elements/default/fill';
+@import './elements/default/outline';
+@import 'node_modules/pretty-checkbox/src/scss/elements/default/thick';
+@import 'node_modules/pretty-checkbox/src/scss/elements/font-icon/general';
+@import 'node_modules/pretty-checkbox/src/scss/elements/svg/general';
+@import 'node_modules/pretty-checkbox/src/scss/elements/image/general';
+@import './elements/switch/general';
+@import './elements/switch/fill';
+@import 'node_modules/pretty-checkbox/src/scss/elements/switch/slim';
+@import 'node_modules/pretty-checkbox/src/scss/states/hover';
+@import 'node_modules/pretty-checkbox/src/scss/states/focus';
+@import 'node_modules/pretty-checkbox/src/scss/states/indeterminate';
+@import 'node_modules/pretty-checkbox/src/scss/extras/toggle';
+@import 'node_modules/pretty-checkbox/src/scss/extras/plain';
+@import 'node_modules/pretty-checkbox/src/scss/extras/round';
+@import 'node_modules/pretty-checkbox/src/scss/extras/curve';
+@import 'node_modules/pretty-checkbox/src/scss/extras/animation';
+@import 'node_modules/pretty-checkbox/src/scss/extras/disabled';
+@import 'node_modules/pretty-checkbox/src/scss/extras/locked';
+@import 'node_modules/pretty-checkbox/src/scss/extras/colors';
+@import 'node_modules/pretty-checkbox/src/scss/extras/bigger';
+@import 'node_modules/pretty-checkbox/src/scss/extras/print';

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

@@ -0,0 +1,9 @@
+<div *ngIf="isThemeLight" class="tooltip-arrow"></div>
+
+<div *ngIf="options['contentType'] === 'template' else htmlOrStringTemplate">
+  <ng-container *ngTemplateOutlet="value"></ng-container>
+</div>
+
+<ng-template #htmlOrStringTemplate>
+  <div [innerHTML]="value"></div>
+</ng-template>

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'] : '';
+  }
+}