renamed all disabled params to enabled, for consistency

Author: nodeful

modules/components/src/components/button/button.component.scss

@@ -16,11 +16,7 @@
   transition-property: filter;
   transition-duration: .5s;
   border-radius: 3px; // font-size: 20px;
-  cursor: pointer !important;
-
-  & * {
-    cursor: pointer !important;
-  }
+  filter: grayscale(80%) brightness(80%);
 }
 
 .transparent {
@@ -68,12 +64,11 @@
   }
 }
 
-.disabled {
-  // box-shadow: 0 0 0 1px black, 0 0 0 1px rgba(gray, .1) inset, 0 0 15px 10px rgba(black, .3) inset;
-  filter: grayscale(80%) brightness(80%);
-  cursor: default !important;
+.enabled {
+  filter: none;
+  cursor: pointer !important;
 
   & * {
-    cursor: default !important;
+    cursor: pointer !important;
   }
 }

modules/components/src/components/button/button.component.ts

@@ -13,7 +13,7 @@ export class ButtonComponent implements OnInit {
   @Input() toggle = false
   @Input() depressable = true
   @Input() hoverable = true
-  @Input() disabled = false
+  @Input() enabled = true
   @Output() pressed = new EventEmitter()
 
   ngOnInit () {
@@ -29,18 +29,18 @@ export class ButtonComponent implements OnInit {
   computeClass () {
     let className = 'button'
     className += ` ${this.type}`
-    className += ` ${this.type}`
     className += this.state ? ' on' : ' off'
-    if (this.disabled) {
-      className += ' disabled'
-    } else if (this.hoverable) {
+    if (this.enabled) {
+      className += ' enabled'
+    }
+    if (this.hoverable) {
       className += ' hoverable-' + (this.state ? 'on' : 'off')
     }
     return className
   }
 
   click () {
-    if (!this.disabled) {
+    if (this.enabled) {
       if (this.toggle) {
         if (this.state && this.depressable) {
           this.state = !this.state

modules/components/src/components/container/container.component.scss

@@ -9,8 +9,9 @@
   box-shadow: 0 0 0 1px #000,
               0 0 0 2px rgb(70, 74, 77);
   background-size: 6px 6px;
+  filter: grayscale(80%);
 }
 
-:host.disabled {
-  filter: grayscale(80%);
+:host.enabled {
+  filter: none;
 }

modules/components/src/components/container/container.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit, HostBinding, Input } from '@angular/core'
   styleUrls: [ './container.component.scss' ]
 })
 export class ContainerComponent implements OnInit {
-  @HostBinding('class.disabled') @Input() disabled = false
+  @HostBinding('class.enabled') @Input() enabled = true
 
   ngOnInit () {
   }

modules/components/src/components/dropdown/dropdown.component.html

@@ -1,4 +1,4 @@
-<eqm-container #container [disabled]="disabled" (click)="editable ? undefined : toggle($event)"
+<eqm-container #container [enabled]="enabled" (click)="editable ? undefined : toggle($event)"
   class="container">
   <div class="item">
 

modules/components/src/components/dropdown/dropdown.component.scss

@@ -5,6 +5,7 @@
   width: 100%;
   transition: filter;
   transition-duration: 0.5s;
+  filter: grayscale(80%);
 }
 
 .container {
@@ -45,8 +46,8 @@ $animation-duration: .2s;
   transform-origin: bottom center;
 }
 
-:host.disabled {
-  filter: grayscale(80%);
+:host.enabled {
+  filter: none;
 }
 
 .item {

modules/components/src/components/dropdown/dropdown.component.ts

@@ -31,7 +31,7 @@ export class DropdownComponent implements OnInit {
   }
 
   @Output() refChanged = new EventEmitter<DropdownComponent>()
-  @HostBinding('class.disabled') @Input() disabled = false
+  @HostBinding('class.enabled') @Input() enabled = true
   @Input() selectedItem = null
   @Output() selectedItemChange = new EventEmitter<any>()
   @Input() labelParam = 'text'
@@ -108,15 +108,15 @@ export class DropdownComponent implements OnInit {
   }
 
   async open () {
-    if (!this.disabled && !this.shown && this.items.length) {
+    if (this.enabled && !this.shown && this.items.length) {
       this.calculateYCoordinate()
       this.setDimensions()
       this.shown = true
     }
   }
 
   async close () {
-    if (!this.disabled && this.shown) {
+    if (this.enabled && this.shown) {
       this.shown = false
       this.searchText = undefined
     }
@@ -134,7 +134,7 @@ export class DropdownComponent implements OnInit {
   searchText?: string
   @HostListener('document:keypress', [ '$event' ])
   keypress (event: KeyboardEvent) {
-    if (!this.disabled && this.shown && this.searchable) {
+    if (this.enabled && this.shown && this.searchable) {
       switch (event.key) {
         case 'Backspace': {
           if (this.searchText?.length) {

modules/components/src/components/flat-slider/flat-slider.component.scss

@@ -2,10 +2,11 @@
 :host {
   display: block;
   padding: 2px;
+  filter: grayscale(80%);
 }
 
-:host.disabled {
-  filter: grayscale(80%);
+:host.enabled {
+  filter: none;
 }
 
 .container {

modules/components/src/components/flat-slider/flat-slider.component.ts

@@ -58,7 +58,7 @@ export class FlatSliderComponent {
   public defaultColor = '#4f8d71'
   public _enabled = true
 
-  @HostBinding('class.disabled') get disabled () { return !this.enabled }
+  @HostBinding('class.enabled')
   @Input()
   set enabled (shouldBeEnabled) {
     this._enabled = shouldBeEnabled
@@ -180,7 +180,7 @@ export class FlatSliderComponent {
     })()
     if (this.notches?.length) {
       const closest = this.notches.reduce((prev, curr) => {
-        return (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
+        return (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev)
       })
       value = closest
     }

modules/components/src/components/input-field/input-field.component.html

@@ -1,3 +1,3 @@
 <eqm-container class="container" #container>
-  <input [(ngModel)]="text" [placeholder]="placeholder" (input)="inputChanged()" (keyup.enter)="enterPressed()" class="input-field" [readonly]="disabled || !editable" [style.font-size.px]="fontSize">
+  <input [(ngModel)]="text" [placeholder]="placeholder" (input)="inputChanged()" (keyup.enter)="enterPressed()" class="input-field" [readonly]="!enabled || !editable" [style.font-size.px]="fontSize">
 </eqm-container>