@energycap/components 0.26.10 → 0.26.11-rounded-corners-plus.20220107-1502

package/lib/controls/dropdown/dropdown.component.d.ts

@@ -60,6 +60,7 @@ export declare class DropdownComponent implements OnInit, AfterViewInit, OnDestr
     menuTemplateType: MenuTemplateType;
     /**
      * Display a header on the menu
+     * @deprecated use first menu item with display set to 'heading' instead
      */
     menuTitle?: string;
     /**

package/lib/display/app-bar/app-bar.component.d.ts

@@ -4,13 +4,14 @@ import { AvatarUser } from '../avatar/avatar.component';
 import { AvatarService } from '../avatar/avatar.service';
 export declare class AppBarComponent implements OnChanges {
     private avatarService;
-    user: AvatarUser;
+    user?: AvatarUser;
     userMenuItems: MenuItem[];
     userMenuWidth: number;
     userMenuMinWidth: number;
     userMenuTabindex: number;
     iconPath: string;
-    userMenuTitle?: string;
+    menuItems: MenuItem[];
+    private userItem;
     constructor(avatarService: AvatarService);
     ngOnChanges(): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.26.10",
+  "version": "0.26.11-rounded-corners-plus.20220107-1502",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/src/styles/_global-variables.scss

@@ -0,0 +1,7 @@
+:root {
+  --ec-border-radius: .25rem;
+  --ec-color-shadow: rgba(26,26,35,.1);
+  --ec-color-shadow-overlay: rgba(26,26,35,.2);
+  --ec-box-shadow: 0px .125rem .5rem var(--ec-color-shadow);
+  --ec-box-shadow-overlay: 0px .0625rem .5rem var(--ec-color-shadow-overlay);
+}

package/src/styles/_variables.scss

@@ -1,5 +1,6 @@
 @import 'colors';
 
+
 // Background Colors
 // TODO: convert to CSS Custom Properties
 $ec-color-bg-content: $white;
@@ -66,7 +67,6 @@ $ec-border-color: #d2d7d9;
 $ec-border-color-default: rgba($black, .18);
 $ec-border-color-dark: rgba($black, .87);
 $ec-border-width: 1px;
-$ec-border-radius: 0;
 
 $ec-shadow-color: rgba($black, .18);
 $ec-shadow: 0 0 .125rem $ec-shadow-color;

package/src/styles/components/_card.scss

@@ -3,14 +3,16 @@
 .card {
   background-color: $ec-color-bg-content;
   background-clip: padding-box;
-  border: 1px solid $ec-border-color-default;
+  border: 1px solid rgba($black, .1);
+  border-radius: calc(var(--ec-border-radius, .25rem) * 1.5);
   overflow: auto;
+  box-shadow: var(--ec-box-shadow);
 }
 
 .card-header {
   display: flex;
   align-items: center;
-  min-height: 2rem;
+  min-height: 2.5rem;
 }
 
 .card-title {
@@ -34,6 +36,7 @@
 }
 
 .card-actions {
+  padding: .25rem;
   display: flex;
   margin-left: auto;
 }

package/src/styles/index.scss

@@ -3,6 +3,7 @@
 /*!
 * EnergyCAP Components - Base Styles
 */
+@import 'global-variables';
 @import 'core';
 @import 'base';
 @import 'bootstrap/grid';

package/src/styles/mixins/_control-base.scss

@@ -2,7 +2,7 @@
 
 $control-border-color: $ec-border-color;
 $control-border-width: rem-calc($ec-border-width);
-$control-border-radius: $ec-border-radius;
+$control-border-radius: var(--ec-border-radius, .25rem);
 $control-color: $ec-color-text-primary-dark;
 $control-bg: $ec-color-bg-content;
 $control-font-family: $ec-font-family;
@@ -74,6 +74,8 @@ $control-bg-read-only: rgba($black, .12);
   } @else {
     background-color: $control-bg-focused;
   }
+  position: relative;
+  z-index: 1;
 }
 
 @mixin control-disabled($type, $borders: true) {

package/src/styles/mixins/_dialog-base.scss

@@ -12,7 +12,7 @@ $panel-close-duration: 225;
 
 $overlay-bg: $ec-color-bg-modal;
 $dialog-bg: $ec-color-bg-body;
-$dialog-borer-radius: $ec-border-radius * 2;
+$dialog-border-radius: calc(var(--ec-border-radius, .25rem) * 2);
 $dialog-min-height: 9rem;
 $dialog-max-width: 90vw;
 $dialog-max-height: 90vh;
@@ -61,7 +61,7 @@ $dialog-widths: (
   background-color: $dialog-bg;
   background-clip: padding-box;
   box-shadow: 0 0 0.625rem rgba($black, .2);
-  border-radius: $dialog-borer-radius;
+  border-radius: $dialog-border-radius;
   display: flex;
   flex: none;
   min-height: $dialog-min-height;

package/src/styles/mixins/_form-control-base.scss

@@ -86,8 +86,6 @@ $checkbox-indicator-size: $form-control-icon-size;
   /// Focus
   } @else if $state == focus {
     @include control-focus;
-    position: relative;
-    z-index: 1;
 
   /// Disabled
   } @else if $state == disabled {
@@ -324,7 +322,7 @@ $checkbox-indicator-size: $form-control-icon-size;
     }
 
   } @else {
-    border-radius: 2px;
+    border-radius: .125rem;
 
     &::before {
       font-size: .6875em;
@@ -405,6 +403,7 @@ $checkbox-indicator-size: $form-control-icon-size;
     bottom: 0;
     right: 0;
     box-shadow: 0 0 0 rem-calc(2px) $control-border-color-focused;
+    border-radius: $control-border-radius;
     display: none;
   }
 
@@ -429,7 +428,7 @@ $checkbox-indicator-size: $form-control-icon-size;
 
   a {
     border: rem-calc(3px) solid transparent;
-    border-radius: $control-border-radius;
+    border-radius: calc(#{$control-border-radius} * .75);
     display: block;
     height: 100%;
     left: 0;
@@ -441,7 +440,7 @@ $checkbox-indicator-size: $form-control-icon-size;
 
     .toggle-handle {
       background-color: $ec-color-bg-content;
-      border-radius: $control-border-radius;
+      border-radius: calc(#{$control-border-radius} * .75);
       height: 100%;
     }
   }

package/src/styles/mixins/_table-base.scss

@@ -19,7 +19,7 @@ $table-z-indexes: (
   @include truncate;
 
   @if $type == th {
-    border-bottom: 1px solid $ec-border-color-dark;
+    border-bottom: 2px solid $ec-border-color-default;
     color: $ec-color-text-secondary-dark;
     font-weight: normal;
     vertical-align: middle;
@@ -75,7 +75,7 @@ $table-z-indexes: (
 
 @mixin table-selectable {
   thead th {
-    height: 2.5rem;
+    height: 3rem;
   }
 
   tbody > tr:hover {
@@ -105,9 +105,14 @@ $table-z-indexes: (
 }
 
 @mixin table-row-heading {
-  background-color: $table-row-bg-heading;
   color: $ec-color-text-secondary-dark;
-  border-bottom-color: rgba($black, .09);
+  font-size: $ec-font-size-label;
+  font-weight: $ec-font-weight-bold;
+  line-height: 1.333333333;
+  text-transform: uppercase;
+  padding-bottom: 0;
+  vertical-align: bottom;
+  border-top: 0;
 }
 
 @mixin table-row-selected {

package/src/styles/mixins/_tabs-base.scss

@@ -27,11 +27,11 @@ $tab-pill-bg-active: #d2d7d9;
 
     @if $style == 'pills' {
         $height: rem-calc(24px);
+        border-radius: var(--ec-border-radius, .25rem);
     }
 
     align-items: center;
     border: $tab-border-width solid transparent;
-    border-radius: $ec-border-radius;
     color: $tab-color;
     cursor: pointer;
     font-size: $ec-font-size-label;
@@ -43,8 +43,11 @@ $tab-pill-bg-active: #d2d7d9;
     justify-content: center;
 
     @if $style == tabs {
-        border: $tab-border-width solid transparent;
         margin-bottom: -($tab-border-width);
+        border-top-right-radius: var(--ec-border-radius, .25rem);
+        border-top-left-radius: var(--ec-border-radius, .25rem);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
     }
 
     &:hover {

package/src/styles/mixins/_tags-base.scss

@@ -36,7 +36,7 @@ $tag-colors: (
   border: 2px solid map-get($tag-colors, info);
   display: inline-flex;
   align-items: center;
-  border-radius: .75rem;
+  border-radius: calc(var(--ec-border-radius, .25rem) * 3);
   height: 1.5rem;
   line-height: 1.25rem;
   padding: 0 0.4375rem;
@@ -86,7 +86,7 @@ $tag-colors: (
 }
 
 @mixin tag-condensed {
-  border-radius: .1875rem;
+  border-radius: var(--ec-border-radius, .25rem);
   border: 0;
   padding: 0 .25rem;
   height: 1.125rem;

package/src/styles/utilities/_common.scss

@@ -2,6 +2,34 @@
   cursor: pointer !important;
 }
 
-.scroll-y {
-  overflow-y: auto !important;
+.control-group {
+  --ec-border-radius: 0;
+
+  > :first-child {
+    --ec-border-radius: .25rem 0 0 .25rem;
+  }
+
+  > :last-child {
+    --ec-border-radius: 0 .25rem .25rem 0;
+  }
+
+  > :not(:first-child) {
+    margin-left: -1px;
+  }
+}
+
+.control-group-reverse {
+  --ec-border-radius: 0;
+
+  > :last-child {
+    --ec-border-radius: .25rem 0 0 .25rem;
+  }
+
+  > :first-child {
+    --ec-border-radius: 0 .25rem .25rem 0;
+  }
+
+  > :not(:last-child) {
+    margin-left: -1px;
+  }
 }

package/src/styles/utilities/_layout.scss

@@ -71,7 +71,7 @@
 // }
 
 // .justify-content-center {
-//   justify-content: center !important;
+//   justify-content: center !important;  
 // }
 
 // .h-100 {
@@ -90,18 +90,18 @@
 //   width: auto !important;
 // }
 
-// .scroll-y {
-//   overflow-y: auto !important;
-// }
+.scroll-y {
+  overflow-y: auto !important;
+}
 
-// .position-relative {
-//   position: relative !important;
-// }
+.position-relative {
+  position: relative !important;
+}
 
-// .position-absolute {
-//   position: absolute !important;
-// }
+.position-absolute {
+  position: absolute !important;
+}
 
-// .position-fixed {
-//   position: fixed !important;
-// }
+.position-fixed {
+  position: fixed !important;
+}