changes from pro repo

modules/components/src/animations/from-top.ts

@@ -3,11 +3,13 @@ import { trigger, style, animate, transition } from '@angular/animations'
 const DURATION = 100
 
 const INITIAL_STATE = {
-  transform: 'translateY(-100%)'
+  transform: 'translateY(-100%)',
+  '-webkit-transform': 'translateY(-100%)'
 }
 
 const END_FRAME_STATE = {
-  transform: 'translateY(0%)'
+  transform: 'translateY(0%)',
+  '-webkit-transform': 'translateY(0%)'
 }
 
 export const FromTopAnimation = trigger('FromTop', [

modules/components/src/components/button/button.component.html

@@ -1,3 +1,3 @@
-<div (click)="click()" [class]="computeClass()" [ngStyle]="style">
+<div (click)="click($event)" [class]="computeClass()" [ngStyle]="style">
     <ng-content></ng-content>
 </div>

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

@@ -12,7 +12,7 @@
   justify-content: center;
   align-items: center;
   text-align: center;
-  background-color: rgb(62, 65, 70);
+  background-color: #3e4146;
   transition-property: filter;
   transition-duration: .5s;
   border-radius: 3px; // font-size: 20px;

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

@@ -1,4 +1,5 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
+import { ColorsService } from '../../services/colors.service'
 
 @Component({
   selector: 'eqm-button',
@@ -13,8 +14,14 @@ export class ButtonComponent implements OnInit {
   @Input() toggle = false
   @Input() depressable = true
   @Input() hoverable = true
+  @Input() backgroundColor = '#3e4146'
+  @Input() color = this.colors.light
+  @Output() pressed = new EventEmitter<MouseEvent>()
   @Input() enabled = true
-  @Output() pressed = new EventEmitter()
+
+  constructor (
+    public colors: ColorsService
+  ) {}
 
   ngOnInit () {
   }
@@ -22,7 +29,9 @@ export class ButtonComponent implements OnInit {
   get style () {
     return {
       width: `${this.width}px`,
-      height: `${this.height}px`
+      height: `${this.height}px`,
+      backgroundColor: this.type === 'transparent' ? 'transparent' : this.backgroundColor,
+      color: this.color
     }
   }
 
@@ -39,7 +48,8 @@ export class ButtonComponent implements OnInit {
     return className
   }
 
-  click () {
+  click (event: MouseEvent) {
+    event.stopPropagation()
     if (this.enabled) {
       if (this.toggle) {
         if (this.state && this.depressable) {
@@ -51,7 +61,7 @@ export class ButtonComponent implements OnInit {
           this.state = false
         }, 100)
       }
-      this.pressed.emit()
+      this.pressed.emit(event)
     }
   }
 }

modules/components/src/components/checkbox/checkbox.component.html

@@ -1,3 +1,9 @@
-<eqm-container (click)="toggle()">
+<eqm-label [clickable]="enabled" *ngIf="contentSide === 'left'">
+  <ng-content></ng-content>
+</eqm-label>
+<eqm-container>
   <eqm-icon name="checkbox" [size]="10" [color]="checked ? '#4f8d71' : 'transparent'"></eqm-icon>
 </eqm-container>
+<eqm-label [clickable]="enabled" *ngIf="contentSide === 'right'">
+  <ng-content></ng-content>
+</eqm-label>

modules/components/src/components/checkbox/checkbox.component.scss

@@ -3,7 +3,11 @@
   justify-content: center;
   align-items: center;
   cursor: default;
-  filter: grayscale(80%)
+  filter: grayscale(80%);
+
+  eqm-label {
+    margin: 0 5px;
+  }
 }
 
 :host.enabled {

modules/components/src/components/checkbox/checkbox.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core'
+import { Component, Input, Output, EventEmitter, HostBinding, HostListener } from '@angular/core'
 
 @Component({
   selector: 'eqm-checkbox',
@@ -6,11 +6,13 @@ import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/co
   styleUrls: [ './checkbox.component.scss' ]
 })
 export class CheckboxComponent {
+  @Input() contentSide: 'left' | 'right' = 'right'
   @Input() interactive: boolean = true
   @Input() checked: boolean = false
   @Output() checkedChanged = new EventEmitter<boolean>()
   @HostBinding('class.enabled') @Input() enabled = true
 
+  @HostListener('click')
   toggle () {
     if (this.interactive && this.enabled) {
       this.checked = !this.checked

modules/components/src/components/divider/divider.component.ts

@@ -14,12 +14,12 @@ export class DividerComponent {
 
   @HostBinding('style.width')
   get width () {
-    return this.orientation === 'vertical' ? '1px' : `${this.elem.nativeElement.parentElement.offsetWidth}`
+    return this.orientation === 'vertical' ? '1px' : '100%'
   }
 
   @HostBinding('style.height')
   get height () {
-    return this.orientation === 'vertical' ? `${this.elem.nativeElement.parentElement.offsetHeight}` : '1px'
+    return this.orientation === 'vertical' ? 'initial' : '1px'
   }
 
   @HostBinding('style.border-left')

modules/components/src/components/icon/icon.component.html

@@ -1 +1 @@
-<div class="container" [ngStyle]="style" [innerHtml]="svg"></div>
+<div class="icon-container" [ngStyle]="style" [innerHtml]="svg"></div>

modules/components/src/components/icon/icon.component.scss

@@ -1,5 +1,5 @@
 
-.container {
+.icon-container {
   position: relative;
   svg {
     width: 100%;
@@ -8,5 +8,6 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
   }
 }

modules/components/src/components/icon/icon.component.ts

@@ -11,7 +11,7 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
   selector: 'eqm-icon',
   templateUrl: './icon.component.html',
   styleUrls: [ './icon.component.scss' ],
-  encapsulation: ViewEncapsulation.ShadowDom
+  encapsulation: ViewEncapsulation.None
 })
 export class IconComponent implements OnInit {
   @Input() width = 20
@@ -82,6 +82,7 @@ export class IconComponent implements OnInit {
       style.width = `${this.width}px`
     }
     style.transform = `rotate(${this.rotate}deg)`
+    style['-webkit-transform'] = `rotate(${this.rotate}deg)`
 
     if (this.stroke) {
       style['stroke-width'] = `${this.stroke}px`

modules/components/src/components/knob/knob.component.scss

@@ -13,6 +13,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
 }
 
 @mixin size ($size) {
@@ -101,6 +102,7 @@
           top: -4%;
           left: 50%;
           transform: translate(-50%, 0);
+          -webkit-transform: translate(-50%, 0);
           background-color: $accent;
         }
       }

modules/components/src/components/knob/knob.component.ts

@@ -180,15 +180,21 @@ export class KnobComponent implements OnInit {
 
   largeCapMaxAngle = 135
   get largeCapClipPathStyle () {
+    const transform = `rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.largeCapMaxAngle, this.largeCapMaxAngle)}deg)`
+    const transformOrigin = '50% 50%'
     return {
-      transform: `rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.largeCapMaxAngle, this.largeCapMaxAngle)}deg)`,
-      'transform-origin': '50% 50%'
+      transform,
+      '-webkit-transform': transform,
+      'transform-origin': transformOrigin,
+      '-webkit-transform-origin': transformOrigin
     }
   }
 
   get largeCapIndicatorStyle () {
+    const transform = `translate(-50%, -50%) rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.largeCapMaxAngle, this.largeCapMaxAngle)}deg)`
     return {
-      transform: `translate(-50%, -50%) rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.largeCapMaxAngle, this.largeCapMaxAngle)}deg)`
+      transform,
+      '-webkit-transform': transform
     }
   }
 
@@ -201,15 +207,19 @@ export class KnobComponent implements OnInit {
 
   mediumCapMaxAngle = 135
   get mediumCapIndicatorStyle () {
+    const transform = `translate(-50%, -50%) rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.mediumCapMaxAngle, this.mediumCapMaxAngle)}deg)`
     return {
-      transform: `translate(-50%, -50%) rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.mediumCapMaxAngle, this.mediumCapMaxAngle)}deg)`
+      transform,
+      '-webkit-transform': transform
     }
   }
 
   smallCapMaxAngle = 135
   get smallCapIndicatorStyle () {
+    const transform = `translate(-50%, -50%) rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.smallCapMaxAngle, this.smallCapMaxAngle)}deg)`
     return {
-      transform: `translate(-50%, -50%) rotate(${this.utils.mapValue(this.value, this.min, this.max, -this.smallCapMaxAngle, this.smallCapMaxAngle)}deg)`
+      transform,
+      '-webkit-transform': transform
     }
   }
 

modules/components/src/components/label/label.component.scss

@@ -6,7 +6,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-
+  text-align: center;
   cursor: default;
   & * {
     cursor: default;

modules/components/src/components/pro/pro.component.ts

@@ -4,8 +4,8 @@ import { ColorsService } from '../../services/colors.service'
 @Component({
   selector: 'eqm-pro',
   template: `
-    <div [style]="style">
-      <eqm-label [fontSize]="fontSize">Pro</eqm-label>
+    <div [ngStyle]="style">
+      <eqm-label [fontSize]="fontSize" [color]="color">Pro</eqm-label>
     </div>
   `
 })
@@ -14,7 +14,8 @@ export class ProComponent {
   @Input() backgroundColor = this.colors.dark
   @Input() fontSize = 14
   constructor (public colors: ColorsService) {}
-  style: { [name: string]: any } = {
+  get style () {
+    return {
       display: 'inline-block',
       backgroundColor: this.backgroundColor,
       color: this.color,
@@ -22,3 +23,4 @@ export class ProComponent {
       padding: '2px 4px'
     }
   }
+}

modules/components/src/directives/clicked-outside.directive.ts

@@ -2,7 +2,7 @@ import { Directive, EventEmitter, HostListener, Output } from '@angular/core'
 
 @Directive({ selector: '[clickedOutside]' })
 export class ClickedOutsideDirective {
-  @Output() clickedOutside = new EventEmitter()
+  @Output() clickedOutside = new EventEmitter<MouseEvent>()
 
   private inside = false
   @HostListener('click')
@@ -10,10 +10,10 @@ export class ClickedOutsideDirective {
     this.inside = true
   }
 
-  @HostListener('document:click')
-  outsideClick () {
+  @HostListener('document:click', [ '$event' ])
+  outsideClick (event: MouseEvent) {
     if (!this.inside) {
-      this.clickedOutside.emit()
+      this.clickedOutside.emit(event)
     }
     this.inside = false
   }

modules/components/src/index.ts

@@ -21,6 +21,7 @@ export * from './components/tooltip/tooltip-container.component'
 export * from './components/tooltip/tooltip.component'
 export * from './components/skeuomorph-slider/skeuomorph-slider.component'
 export * from './services/utilities.service'
+export * from './services/colors.service'
 export * from './components/label/label.component'
 export * from './components/loading/loading.component'
 export * from './components/checkbox/checkbox.component'

ui/src/index.html

@@ -15,7 +15,7 @@
     <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data:; img-src 'self' data:; font-src 'self' data:; script-src 'self' 'unsafe-eval' 'sha256-bXrLdI2KMMIc9ZIiuVrqGgA2juhoNIXC3iylOFn9Z/c='"> -->
 
     <title>eqMac</title>
-    <script>document.write(`<base href="${document.location}" />`);</script>
+    <script>document.write('<base href="' + document.location + '" />');</script>
     <meta name="theme-color" content="#000">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <style>
@@ -46,10 +46,11 @@
         0% { 
           stroke-dashoffset: 0; 
           transform: translate3d(0, 0, 0);
+          -webkit-transform: translate3d(0, 0, 0);
         }
         100% { 
           stroke-dashoffset: -133;
-          transform: translate3d(-90px, 0, 0);
+          -webkit-transform: translate3d(-90px, 0, 0);
         }
       }
     </style>