All files / src/lib/tl-dropdown tl-dropdown.component.ts

100% Statements 20/20
100% Branches 0/0
100% Functions 15/15
100% Lines 19/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147                  1x                                                                       28x     28x     28x       2x         84x         2x         84x         84x         84x         2x                   2x         82x         2x                                 82x         82x         82x         2x         28x        
import { ChangeDetectionStrategy, Component, HostBinding, Injector, Input } from '@angular/core';
import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
 
@Component({
  selector: 'tl-dropdown-component',
  templateUrl: './tl-dropdown.component.html',
  styleUrls: ['./tl-dropdown.component.scss'],
  changeDetection: ChangeDetectionStrategy.Default
})
export class TlDropDownComponent extends TamuAbstractBaseComponent {
 
  /** Used to convert the dropdown menu button into a link. */
  @Input() btnHref;
 
  /** Used to define the drop down menu background. */
  @HostBinding('style.--tl-dropdown-menu-background') @Input() menuBackground;
 
  /** Used to define the drop down menu border. */
  @HostBinding('style.--tl-dropdown-menu-border') @Input() menuBorder;
 
  /** Used to define the drop-down menu border display */
  @HostBinding('style.--tl-dropdown-menu-border-display') @Input() menuBorderDisplay;
 
  /** Used to define the drop down menu-border-radius. */
  @HostBinding('style.--tl-dropdown-menu-border-radius') @Input() menuBorderRadius;
 
  /** Used to define the drop down menu box shadow. */
  @HostBinding('style.--tl-dropdown-menu-box-shadow') @Input() menuBoxShadow;
 
  /** Used to define the drop-down `menu-border-flexDirection` */
  @HostBinding('style.--tl-dropdown-menu-flex-direction') @Input() menuFlexDirection;
 
  /** Used to define the item margin in drop-down menu. */
  @HostBinding('style.--tl-dropdown-menu-item-margin') @Input() menuItemMargin;
 
  /** Used to define the drop-down menu padding */
  @HostBinding('style.--tl-dropdown-menu-padding') @Input() menuPadding;
 
  /** Used to define the drop-down menu width */
  @HostBinding('style.--tl-dropdown-menu-width') @Input() menuWidth;
 
  /** Used to define the drop-down menu x offset. */
  @HostBinding('style.--tl-dropdown-menu-x-offset') @Input() menuXOffset;
 
  /** Used to define the drop-down menu x offset. */
  @HostBinding('style.--tl-dropdown-menu-y-offset') @Input() menuYOffset = '-6px';
 
  /** Used to define the event type which will display the dropdown menu. */
  @Input() toggleOn = 'click';
 
  /** Used to define the boolean value for the drop down */
  isOpen = false;
 
  /** Used to override the button background in a drop down */
  get btnBackground(): string {
    return `var(--tl-btn-${this.themeVariant}-background)`;
  }
 
  /** Used to override the button background active state in a drop down */
  get btnBackgroundActive(): string {
    return `var(--tl-btn-${this.themeVariant}-active-background)`;
  }
 
  /** Used to override the button background hover state in a drop down */
  get btnBackgroundHover(): string {
    return `var(--tl-btn-${this.themeVariant}-hover-background)`;
  }
 
  /** Used to override the button border in a drop down */
  get btnBorderColor(): string {
    return `var(--tl-btn-${this.themeVariant}-border)`;
  }
 
  /** Used to override the button active state border in a drop down */
  get btnBorderActive(): string {
    return `var(--tl-btn-${this.themeVariant}-active-border)`;
  }
 
  /** Used to override the button focus state border in a drop down */
  get btnBorderFocus(): string {
    return `var(--tl-btn-${this.themeVariant}-focus-border)`;
  }
 
  /** Used to override the button active state border in a drop down */
  get btnBorderHover(): string {
    return `var(--tl-btn-${this.themeVariant}-hover-border)`;
  }
 
  /** Used to override the border radius of button in a dropdown */
  @HostBinding('style.--tl-btn-border-radius') @Input() btnBorderRadius;
 
  @HostBinding('style.--tl-btn-focus-box-shadow') @Input() btnBoxShadowFocus;
 
  /** Used to override the button color in a drop down */
  get btnColor(): string {
    return `var(--tl-btn-${this.themeVariant}-color)`;
  }
 
  /** Used to override the button color active state in a drop down */
  get btnColorActive(): string {
    return `var(--tl-btn-${this.themeVariant}-active-color)`;
  }
 
  /** Used to override the button color hover state in a drop down */
  get btnColorHover(): string {
    return `var(--tl-btn-${this.themeVariant}-hover-color)`;
  }
 
  /** Used to override the button font family in a drop down */
  @HostBinding('style.--tl-font-family-sans-serif') @Input() btnFontFamily;
 
  /** Used to override the button font size in a drop down */
  @HostBinding('style.--tl-btn-font-size') @Input() btnFontSize;
 
  /** Used to override the line height of button in a drop down */
  @HostBinding('style.--tl-btn-line-height') @Input() btnLineHeight;
 
  /** Used to override the text alignment of button in a drop down */
  @HostBinding('style.--tl-btn-text-align') @Input() btnTextAlign;
 
  /** Used to override the text decoration property of button in a drop down */
  get btnTextDecoration(): string {
    return `var(--tl-btn-${this.themeVariant}-hover-color)`;
  }
 
  /** Used to override the active state of button text decoration property in a drop down */
  get btnTextDecorationActive(): string {
    return `var(--tl-btn-${this.themeVariant}-hover-color)`;
  }
 
  /** Used to override the focus state of button text decoration property in a drop down */
  get btnTextDecorationFocus(): string {
    return `var(--tl-btn-${this.themeVariant}-hover-color)`;
  }
 
  /** Used to override the hover state of button text decoration property in a drop down */
  get btnTextDecorationHover(): string {
    return `var(--tl-btn-${this.themeVariant}-hover-color)`;
  }
 
  // tslint:disable-next-line:unnecessary-constructor
  constructor(injector: Injector) {
    super(injector);
  }
 
}