@energycap/components 0.27.10 → 0.28.0

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.27.10",
+  "version": "0.28.0",
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/src/styles/_global-variables.scss

@@ -0,0 +1,11 @@
+// Global CSS variables (custom properties). 
+// TODO: convert all SCSS variables to CSS variables
+:root {
+  --ec-border-radius: .25rem;
+  --ec-border-radius-card: .375rem;
+  --ec-border-radius-dialog: .5rem;
+  --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,10 +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;
 
 $ec-focus-ring-width: .125rem;
 $ec-focus-ring-color: $blue-4;

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: var(--ec-border-radius-card);
   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/_button-base.scss

@@ -12,7 +12,7 @@
   line-height: 1.25rem;
   justify-content: center;
   border: $control-border-width solid transparent;
-  border-radius: $control-border-radius;
+  border-radius: var(--ec-border-radius);
 
   .label {
     white-space: nowrap;

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

@@ -2,7 +2,6 @@
 
 $control-border-color: $ec-border-color;
 $control-border-width: rem-calc($ec-border-width);
-$control-border-radius: $ec-border-radius;
 $control-color: $ec-color-text-primary-dark;
 $control-bg: $ec-color-bg-content;
 $control-font-family: $ec-font-family;
@@ -74,6 +73,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) {
@@ -120,3 +121,12 @@ $control-bg-read-only: rgba($black, .12);
 @mixin control-active {
   background-color: $ec-color-bg-hover;
 }
+
+@mixin control-popup {
+  background-color: $ec-color-bg-content;
+  border-radius: var(--ec-border-radius-card);
+  box-shadow: var(--ec-box-shadow-overlay);
+  margin-top: .25rem;
+  overflow: hidden;
+  z-index: map-get($ec-z-indexes, popup);
+}

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

@@ -12,7 +12,6 @@ $panel-close-duration: 225;
 
 $overlay-bg: $ec-color-bg-modal;
 $dialog-bg: $ec-color-bg-body;
-$dialog-borer-radius: $ec-border-radius * 2;
 $dialog-min-height: 9rem;
 $dialog-max-width: 90vw;
 $dialog-max-height: 90vh;
@@ -61,7 +60,8 @@ $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: var(--ec-border-radius-dialog);
+  overflow: hidden;
   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 {
@@ -113,7 +111,7 @@ $checkbox-indicator-size: $form-control-icon-size;
   background-clip: padding-box;
   border-width: $control-border-width;
   border-style: solid;
-  border-radius: $control-border-radius;
+  border-radius: var(--ec-border-radius);
   width: 100%;
 
   @if $selector == input {
@@ -324,7 +322,7 @@ $checkbox-indicator-size: $form-control-icon-size;
     }
 
   } @else {
-    border-radius: 2px;
+    border-radius: .125rem;
 
     &::before {
       font-size: .6875em;
@@ -367,7 +365,7 @@ $checkbox-indicator-size: $form-control-icon-size;
 @mixin toggle() {
   font-size: $control-font-size;
   background-color: $ec-border-color;
-  border-radius: $control-border-radius;
+  border-radius: var(--ec-border-radius);
   border: $control-border-width solid $control-border-color;
   min-height: 2em;
   position: relative;
@@ -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: var(--ec-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(var(--ec-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(var(--ec-border-radius) * .75);
       height: 100%;
     }
   }

package/src/styles/mixins/_login.scss

@@ -28,6 +28,7 @@
   
   #{$card-selector} {
     background-color: $ec-color-bg-body;
+    border-radius: var(--ec-border-radius-dialog);
     box-shadow: 0 0 12px rgba($black, .66);
   }
   

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

@@ -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);
     }
 
     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);
+        border-top-left-radius: var(--ec-border-radius);
+        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);
   border: 0;
   padding: 0 .25rem;
   height: 1.125rem;

package/src/styles/utilities/_borders.scss

@@ -25,4 +25,8 @@ $sides: (top, bottom, right, left);
   .border-#{$side}-dark {
     border-#{$side}: $ec-border-width solid $ec-border-color-dark !important;
   }
+}
+
+.border-radius-0 {
+  --ec-border-radius: 0;
 }

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

@@ -76,7 +76,7 @@
 // }
 
 // .justify-content-center {
-//   justify-content: center !important;
+//   justify-content: center !important;  
 // }
 
 // .h-100 {
@@ -95,18 +95,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;
+}