v1.12.0

README.md

@@ -1,22 +1,27 @@
 # Goponents
 
-###### Currently `v1.11.0`
+###### Currently `v1.12.0`
 
 This project houses a set of UI components for Angular 7+ and designed around the 'Go' design system.
 
 # Getting Started
+
 1. Take a look at our [code of conduct](https://github.com/mobi/goponents/blob/master/CODE_OF_CONDUCT.md)
 2. Read through our [contribution guidelines](https://github.com/mobi/goponents/blob/master/CONTRIBUTING.md)
 3. Install the latest version of npm
 
    ```bash
    npm install -g npm@latest
    ```
+
    or if you are using `nvm` you can alternatively run:
+
    ```bash
    nvm install-latest-npm
    ```
+
    _We try to stay as up to date a possible._
+
 4. Install all of the node modules
    ```bash
    npm install
@@ -38,46 +43,54 @@ This project houses a set of UI components for Angular 7+ and designed around th
    _Test will continue to run anytime a file is saved. This will help ensure that breaking changes aren't introduced when changes are introduced._
 
 # Directory structure
+
 The project is separated up into four project directories.
 
 ### go-lib
+
 [projects/go-lib](https://github.com/mobi/goponents/tree/master/projects/go-lib) is where all of our production components, services, and other items are built out. If you are adding that you would like to distribute, this is where you will do that work.
 
 The components are located [here](https://github.com/mobi/goponents/tree/master/projects/go-lib/src/lib/components):
+
 ```bash
 projects/go-lib/src/lib/components
 ```
 
 The styles are located [here](https://github.com/mobi/goponents/tree/master/projects/go-lib/src/lib/styles):
+
 ```bash
 projects/go-lib/src/lib/styles
 ```
 
 You can build this project by running `npm run build_lib`
 
 ### go-style-guide
+
 [projects/go-style-guide](https://github.com/mobi/goponents/tree/master/projects/go-style-guide) is separate app contains all of the documentation for the styles and usage of all the components and available styles in the `go-lib` project.
 
 The base style guide app is located [here](https://github.com/mobi/goponents/tree/master/projects/go-style-guide/src/app);
+
 ```bash
 projects/go-style-guide/src/app
 ```
 
 You can start this project by running `npm run style_guide`
 
 ### go-tester
+
 [projects/go-tester](https://github.com/mobi/goponents/tree/master/projects/go-tester) is separate app that allows us to test the implementation of our components as we build them out. If you want to test to make sure your go-lib components work as expected in a more real world setting, this is where you will do that work.
 
 The base tester app is located [here](https://github.com/mobi/goponents/tree/master/projects/go-tester/src/app);
+
 ```bash
 projects/go-tester/src/app
 ```
 
 You can start this project by running `npm run tester`
 
 ### go-tester-e2e
-[projects/go-tester-e2e](https://github.com/mobi/goponents/tree/master/projects/go-tester-e2e) will eventually be where we will write all of our end to end testing for our go-tester app. We have not yet done this, but we would welcome any [contributions](https://github.com/mobi/goponents/blob/master/CONTRIBUTING.md).
 
+[projects/go-tester-e2e](https://github.com/mobi/goponents/tree/master/projects/go-tester-e2e) will eventually be where we will write all of our end to end testing for our go-tester app. We have not yet done this, but we would welcome any [contributions](https://github.com/mobi/goponents/blob/master/CONTRIBUTING.md).
 
 # Other Useful Things
 
@@ -86,12 +99,15 @@ You can start this project by running `npm run tester`
 Run `ng generate lib/components/component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ### Publishing to npm
+
 To build and pack the library **locally** run:
+
 ```
 npm run package
 ```
 
 To build and pack the library locally and publish that package to npm run:
+
 ```
 npm run publish
 ```
@@ -106,49 +122,48 @@ To do this properly, you must export each individual file within the `public_api
 
 ### Components Available
 
-| Component      | Notes                                  |
-|----------------|----------------------------------------|
-| accordion      | Available                              |
-| action sheet   | Available                              |
-| app drawer     | Available                              |
-| badge          | Available                              |
-| button         | Available                              |
-| button group   | Available                              |
-| card           | Available                              |
-| checkbox       | Available                              |
-| checkbox group | Available                              |
-| copy button    | Available                              |
-| copy docs link | Available                              |
-| datepicker     | Available                              |
-| file upload    | Available                              |
-| footer         | Available                              |
-| header         | Available                              |
-| header bar     | Available                              |
-| hint           | Available                              |
-| icon           | Available                              |
-| icon button    | Available                              |
-| input          | Available                              |
-| layout         | Available                              |
-| loader         | Available                              |
-| modal          | Available                              |
-| off-canvas     | Available                              |
-| pill           | Available                              |
-| portal         | Available                              |
-| radio          | Available                              |
-| radio group    | Available                              |
-| select         | Available                              |
-| search         | Available                              |
-| side nav       | Available                              |
-| switch toggle  | Available                              |
-| table          | Available                              |
-| tabs           | Available                              |
-| timepicker     | Available                              |
-| textarea       | Available                              |
-| toaster        | Available                              |
-| toasts         | Available                              |
-| tree           | Available                              |
-| virtual scroll | Available via Material CDK             |
-| wysiwyg        | Available via TinyMCE                  |
-|----------------|----------------------------------------|
-| tooltip        | Idea                                   |
-
+| Component        | Notes                                    |
+| ---------------- | ---------------------------------------- |
+| accordion        | Available                                |
+| action sheet     | Available                                |
+| app drawer       | Available                                |
+| badge            | Available                                |
+| button           | Available                                |
+| button group     | Available                                |
+| card             | Available                                |
+| checkbox         | Available                                |
+| checkbox group   | Available                                |
+| copy button      | Available                                |
+| copy docs link   | Available                                |
+| datepicker       | Available                                |
+| file upload      | Available                                |
+| footer           | Available                                |
+| header           | Available                                |
+| header bar       | Available                                |
+| hint             | Available                                |
+| icon             | Available                                |
+| icon button      | Available                                |
+| input            | Available                                |
+| layout           | Available                                |
+| loader           | Available                                |
+| modal            | Available                                |
+| off-canvas       | Available                                |
+| pill             | Available                                |
+| portal           | Available                                |
+| radio            | Available                                |
+| radio group      | Available                                |
+| select           | Available                                |
+| search           | Available                                |
+| side nav         | Available                                |
+| switch toggle    | Available                                |
+| table            | Available                                |
+| tabs             | Available                                |
+| timepicker       | Available                                |
+| textarea         | Available                                |
+| toaster          | Available                                |
+| toasts           | Available                                |
+| tree             | Available                                |
+| virtual scroll   | Available via Material CDK               |
+| wysiwyg          | Available via TinyMCE                    |
+| ---------------- | ---------------------------------------- |
+| tooltip          | Idea                                     |

projects/go-lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangoe/goponents",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mobi/goponents.git"

projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.html

@@ -17,6 +17,7 @@
 <ng-template #noLink>
   <button
     class="go-panel"
+    [disabled]="disablePanel"
     [ngClass]="panelClasses()"
     (click)="handleAction()">
     <span class="go-panel__title">

projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.scss

@@ -2,6 +2,7 @@
 @import '../../../../../styles/mixins';
 
 $base-medium: #767676 !default;
+$theme-light-transparentized: rgba($theme-light-color, .5);
 
 .go-panel {
   @include transition;
@@ -72,6 +73,11 @@ $base-medium: #767676 !default;
   &--header {
     color: $base-medium;
   }
+
+  &--disabled {
+    color: $theme-light-transparentized;
+    pointer-events: none;
+ }
 }
 
 .go-action-sheet {
@@ -116,4 +122,8 @@ button {
   &:focus {
     outline: none;
   }
+
+  &:disabled {
+    color: $theme-light-transparentized;
+  }
 }

projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.ts

@@ -15,6 +15,7 @@ export class GoPanelComponent {
   @Input() panelContent: string;
   @Input() target: string;
   @Input() closeOnClick: boolean = true;
+  @Input() disablePanel: boolean = false;
 
   @Output() action: EventEmitter<void> = new EventEmitter<void>();
 
@@ -23,7 +24,8 @@ export class GoPanelComponent {
   panelClasses(): object {
     return {
       'go-panel--danger': this.danger,
-      'go-panel--header': this.showHeader
+      'go-panel--header': this.showHeader,
+      'go-panel--disabled': this.disablePanel
     };
   }
 

projects/go-lib/src/lib/components/go-button/go-button.component.scss

@@ -2,7 +2,8 @@
 @import '../../../../styles/mixins';
 
 $transparent-color: rgba(0, 0, 0, 0);
-$button-shadow-secondary: 0 0 0 3px transparentize($base-light-tertiary, .75);
+$button-shadow-secondary-hover: 0 0 0 3px transparentize($theme-light-bg-hover, .5);
+$button-shadow-secondary-active: 0 0 0 3px transparentize($theme-light-bg-hover, .5);
 
 @mixin disabled-states($bg, $color, $color-opacity: .7) {
   // scss-lint:disable VariableForProperty
@@ -119,13 +120,15 @@ $button-shadow-secondary: 0 0 0 3px transparentize($base-light-tertiary, .75);
   }
 
   &--secondary {
-    border: 1px solid lighten($base-light-secondary, 10%);
+    border: 1px solid $base-light-tertiary;
+
+    &:hover {
+      box-shadow: $button-shadow-secondary-hover;
+    }
 
-    &:hover,
     &:focus,
     &:active {
-      border: 1px solid lighten($base-light-secondary, 10%);
-      box-shadow: $button-shadow-secondary;
+      box-shadow: $button-shadow-secondary-active;
     }
 
     &.go-button-group {
@@ -160,12 +163,12 @@ $button-shadow-secondary: 0 0 0 3px transparentize($base-light-tertiary, .75);
     &:hover,
     &:focus {
       background: $theme-light-bg-hover;
-      border: 1px solid $theme-light-bg-hover;
+      border: 1px solid $base-light-tertiary;
     }
 
     &:active {
       background: $theme-light-bg-active;
-      border: 1px solid $theme-light-bg-active;
+      border: 1px solid $base-light-tertiary;
     }
 
     &:disabled:not(.go-button--loading) {
@@ -421,21 +424,21 @@ $button-shadow-secondary: 0 0 0 3px transparentize($base-light-tertiary, .75);
 
   &--secondary {
     background: $theme-light-bg-hover;
-    border: 1px solid lighten($base-light-secondary, 10%);
+    border: 1px solid $base-light-tertiary;
     border-left: 0;
     color: $theme-light-color;
 
     &:hover,
     &:focus {
       background: $theme-light-bg-active;
       border-left: 0;
-      box-shadow: $button-shadow-secondary;
+      box-shadow: $button-shadow-secondary-hover;
     }
 
     &:active {
       background: darken($theme-light-bg, 10%);
       border-left: 0;
-      box-shadow: $button-shadow-secondary;
+      box-shadow: $button-shadow-secondary-active;
     }
 
     &:disabled:not(.go-button--loading) {

projects/go-lib/src/lib/components/go-radio/go-radio-button.component.scss

@@ -6,7 +6,7 @@
 
     &:enabled:hover + .go-radio {
       &__custom-radio {
-        box-shadow: 0 0 2px 1.5px lighten($base-light-secondary, 13.5%);
+        box-shadow: $form-shadow-hover;
       }
     }
 
@@ -19,7 +19,7 @@
 
     &:enabled:checked:hover + .go-radio {
       &__custom-radio {
-        box-shadow: 0 0 2px 1.5px $ui-color-primary-hover;
+        box-shadow: $form-shadow-active;
       }
     }
 
@@ -35,11 +35,17 @@
         border: 4px solid lighten($base-light-secondary, 13.5%);
       }
     }
+
+    &:disabled:hover + .go-radio {
+      &__custom-radio {
+        box-shadow: none;
+      }
+    }
   }
 
   &__custom-radio {
     background-color: $base-light;
-    border: 1px solid lighten($base-light-secondary, 13.5%);
+    border: 1px solid $base-light-tertiary;
     border-radius: 100%;
     cursor: pointer;
     display: inline-block;

projects/go-lib/src/lib/components/go-select/go-select.component.html

@@ -41,6 +41,16 @@
       </button>
     </ng-template>
   </ng-container>
+  <ng-container *ngIf="multiple && items?.length && control.value">
+    <ng-template ng-header-tmp>
+      <button
+      (click)="onRemoveAll()"
+      class="go-select__select-all-button"
+      [ngClass]="{ 'go-select__select-all-button--dark' : theme === 'dark' }">
+      Remove  All
+    </button>
+    </ng-template>
+  </ng-container>
   <ng-container *ngIf="goSelectSelectedOption">
     <ng-template ng-label-tmp let-item="item">
       <ng-container *ngTemplateOutlet="goSelectSelectedOption; context: { $implicit: item }"></ng-container>