novo-elements 13.1.0 → 13.2.0

package/elements/form/extras/file/FileInput.scss

@@ -1,7 +1,7 @@
 @import "../../../../styles/variables.scss";
 
 @mixin file-item-style() {
-  background-color: $white;
+  background-color: var(--background-body);
   box-shadow: 0 1px 4px rgba(#000, 0.15), 0 2px 10px rgba(#000, 0.09);
   padding: 4px 12px;
   display: flex;
@@ -51,7 +51,7 @@ novo-file-input {
       button:focus,
       button.active {
         background: none;
-        color: $positive;
+        color: var(--color-positive);
       }
       &.disabled {
         box-shadow: none;
@@ -79,7 +79,7 @@ novo-file-input {
     &:hover,
     &.active {
       label.boxed {
-        border: 2px dashed $positive;
+        border: 2px dashed var(--color-positive);
       }
     }
     &.disabled {
@@ -99,7 +99,7 @@ novo-file-input {
       pointer-events: none;
       /*This for FF*/
       strong {
-        color: $positive;
+        color: var(--color-positive);
       }
       small {
         margin-top: 7px;

package/elements/form/fieldset-header.scss

@@ -2,10 +2,10 @@
   background: var(--background-muted);
   box-sizing: content-box;
   padding: 1rem 1rem 1rem 0.5rem;
-  margin-bottom: 2rem;
+  margin-bottom: var(--spacing-2xl);
   display: flex;
-  margin-left: -1.5rem;
-  margin-right: -1.5rem;
+  margin-left: calc(-1 * var(--spacing-xl));
+  margin-right: calc(-1 * var(--spacing-xl));
   font-size: 1.8rem;
   ::ng-deep i,
   ::ng-deep novo-icon {

package/elements/form/index.d.ts

@@ -946,7 +946,7 @@ declare class NovoFieldsetHeaderElement {
     title: string;
     icon: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoFieldsetHeaderElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NovoFieldsetHeaderElement, "novo-fieldset-header", never, { "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoFieldsetHeaderElement, "novo-fieldset-header", never, { "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, ["*"], false, never>;
 }
 declare class NovoFieldsetElement {
     controls: Array<any>;

package/elements/header/Header.scss

@@ -29,8 +29,8 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 0 $spacing-lg;
-    gap: $spacing-sm;
+    padding: 0 var(--spacing-lg);
+    gap: var(--spacing-sm);
     box-sizing: border-box;
     // line-height: 4rem;
 
@@ -40,7 +40,7 @@
     div.header-title {
       display: flex;
       align-items: center;
-      gap: $spacing-sm;
+      gap: var(--spacing-sm);
       // making room for ellipsis
       padding-inline-end: 2em;
       // prevent pushing other flex content
@@ -51,7 +51,7 @@
       }
 
       ::ng-deep novo-icon {
-        margin-right: 1rem;
+        margin-right: var(--spacing-md);
       }
     }
     .header-titles {
@@ -83,7 +83,7 @@
       display: flex;
       align-items: center;
       justify-content: flex-start;
-      gap: $spacing-sm;
+      gap: var(--spacing-sm);
     }
 
     ::ng-deep .novo-action {
@@ -96,23 +96,23 @@
       .header-titles,
       .header-title {
         ::ng-deep .novo-icon {
-          color: $color;
+          color: getCssVarname($name);
         }
       }
       & > section:first-of-type {
-        border-bottom: 2px solid $color;
+        border-bottom: 2px solid getCssVarname($name);
       }
     }
     &.novo-theme-#{$name} {
       & > section:first-of-type {
-        background: $color;
-        color: $contrast;
+        background: getCssVarname($name);
+        color: getContrastColor($name);
         border-bottom: none;
       }
       ::ng-deep .novo-title {
         color: inherit;
         overflow: hidden;
-        padding-right: 0.5rem;
+        padding-right: var(--spacing-sm);
       }
       ::ng-deep .novo-action {
         button,
@@ -151,3 +151,10 @@
     flex-flow: row nowrap;
   }
 }
+
+// bh2026: soften the entity-accent underline
+:host-context([data-theme='bh2026']) {
+  &[class*='novo-accent-'] > section:first-of-type {
+    border-bottom: 1px solid var(--color-border-default, #f0f5f9);
+  }
+}

package/elements/icon/Icon.scss

@@ -38,7 +38,7 @@ $icon-border-radius: 0.3em;
     &[theme="#{$name}"] {
       i {
         color: $white;
-        background: $color;
+        background: getCssVarname($name);
         border-radius: $icon-border-radius;
         width: 1.6em;
         height: 1.6em;

package/elements/layout/collapsible-nav/collapsible-nav.component.scss

@@ -0,0 +1,20 @@
+.novo-collapsible-nav {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background: var(--background-bright);
+
+  .novo-collapsible-nav-header {
+    flex: 0 0 auto;
+  }
+
+  .novo-collapsible-nav-body {
+    flex: 1 1 auto;
+    overflow: hidden auto;
+  }
+
+  .novo-collapsible-nav-footer {
+    flex: 0 0 auto;
+  }
+}

package/elements/layout/index.d.ts

@@ -1,13 +1,46 @@
+import * as i0 from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, NgZone, DestroyRef, InjectionToken, AfterContentChecked, OnDestroy, EventEmitter, DoCheck, QueryList } from '@angular/core';
 import { Directionality } from '@angular/cdk/bidi';
 import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import { CdkScrollable, ScrollDispatcher, ViewportRuler } from '@angular/cdk/overlay';
-import * as i0 from '@angular/core';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, NgZone, DestroyRef, InjectionToken, AfterContentChecked, OnDestroy, EventEmitter, DoCheck, QueryList } from '@angular/core';
 import { Subject, Observable } from 'rxjs';
 import { AnimationEvent } from '@angular/animations';
 import { FocusTrapFactory, FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 import { Platform } from '@angular/cdk/platform';
-import * as i5 from '@angular/common';
+import * as i6 from '@angular/common';
+
+/**
+ * A slide-out navigation panel that expands to a full-width panel or collapses to a narrow icon rail.
+ * Generic building block: consumers project their own header, body, and footer content.
+ */
+declare class NovoCollapsibleNavComponent {
+    /** Whether the panel is collapsed to the icon rail. Two-way bindable via `[(collapsed)]`. */
+    collapsed: i0.ModelSignal<boolean>;
+    /** Width of the panel when expanded. */
+    expandedWidth: i0.InputSignal<string>;
+    /** Width of the panel when collapsed to the icon rail. */
+    collapsedWidth: i0.InputSignal<string>;
+    /** When true, hovering a collapsed panel temporarily expands it as an overlay without affecting layout. */
+    overlayOnHover: i0.InputSignal<boolean>;
+    private readonly isHovered;
+    private readonly effectiveCollapsed;
+    constructor();
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    get expandCollapseState(): {
+        value: string;
+        params: {
+            expandedWidth: string;
+            collapsedWidth: string;
+        };
+    };
+    get isCollapsed(): boolean;
+    toggle(): void;
+    expand(): void;
+    collapse(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NovoCollapsibleNavComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoCollapsibleNavComponent, "novo-collapsible-nav", ["novoCollapsibleNav"], { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "expandedWidth": { "alias": "expandedWidth"; "required": false; "isSignal": true; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; "isSignal": true; }; "overlayOnHover": { "alias": "overlayOnHover"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[novo-collapsible-nav-header]", "[novo-collapsible-nav-body]", "[novo-collapsible-nav-footer]"], false, never>;
+}
 
 declare class NovoLayoutContent extends CdkScrollable implements AfterContentInit {
     private _changeDetectorRef;
@@ -298,9 +331,9 @@ declare class NovoLayoutContainer implements AfterContentInit, DoCheck, OnDestro
 
 declare class NovoLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoLayoutModule, [typeof NovoLayoutContainer, typeof NovoLayoutContent, typeof NovoSidenavComponent, typeof NovoRailComponent], [typeof i5.CommonModule], [typeof NovoLayoutContainer, typeof NovoLayoutContent, typeof NovoSidenavComponent, typeof NovoRailComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoLayoutModule, [typeof NovoLayoutContainer, typeof NovoLayoutContent, typeof NovoSidenavComponent, typeof NovoRailComponent, typeof NovoCollapsibleNavComponent], [typeof i6.CommonModule], [typeof NovoLayoutContainer, typeof NovoLayoutContent, typeof NovoSidenavComponent, typeof NovoRailComponent, typeof NovoCollapsibleNavComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NovoLayoutModule>;
 }
 
-export { NOVO_LAYOUT_CONTAINER, NOVO_LAYOUT_DEFAULT_AUTOSIZE, NOVO_LAYOUT_DEFAULT_AUTOSIZE_FACTORY, NovoLayoutContainer, NovoLayoutContent, NovoLayoutModule, NovoRailComponent, NovoSidenavComponent, throwNovoDuplicatedSidenavError };
+export { NOVO_LAYOUT_CONTAINER, NOVO_LAYOUT_DEFAULT_AUTOSIZE, NOVO_LAYOUT_DEFAULT_AUTOSIZE_FACTORY, NovoCollapsibleNavComponent, NovoLayoutContainer, NovoLayoutContent, NovoLayoutModule, NovoRailComponent, NovoSidenavComponent, throwNovoDuplicatedSidenavError };
 export type { NovoSidenavMode, NovoSidenavToggleResult };

package/elements/list/list-item-content.scss

@@ -21,7 +21,7 @@
   &.novo-item-content ::ng-deep i {
     @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
       &.#{$name} {
-        color: $color;
+        color: getCssVarname($name);
       }
     }
   }

package/elements/list/list-item-header-avatar.scss

@@ -5,7 +5,7 @@
   ::ng-deep i {
     @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
       &.#{$name} {
-        color: $color;
+        color: getCssVarname($name);
       }
     }
   }

package/elements/list/list-item.scss

@@ -3,14 +3,14 @@
 @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
   $contrast: getContrastColor($name);
   :host-context([theme="#{$name}"]) {
-    background: $color;
-    color: $contrast;
+    background: getCssVarname($name);
+    color: getContrastColor($name);
     border: unset;
     border-bottom: 1px solid rgba(#fff, 0.1);
     outline: none;
     item-title h6,
     i {
-      color: $contrast;
+      color: getContrastColor($name);
     }
     item-content {
       > * {
@@ -19,7 +19,7 @@
     }
     &:hover,
     &:active {
-      background: lighten($color, 20%);
+      background: brightenLive('--color-#{$name}', 20);
     }
   }
 }
@@ -31,10 +31,10 @@
   flex-direction: row;
   outline: none;
   &:hover {
-    background: rgba($positive, 0.2);
+    background: rgb(from var(--color-positive) r g b / 0.2);
   }
   &.active {
-    background: rgba($positive, 0.3);
+    background: rgb(from var(--color-positive) r g b / 0.3);
   }
   &:last-child {
     border-bottom: none;

package/elements/loading/NovoSpinner.scss

@@ -62,7 +62,7 @@ $large-spinner-size: 2.1em;
   &.white,
   &[inverse] {
     .dot:before {
-      background-color: $white;
+      background-color: var(--background-body);
     }
   }
 

package/elements/menu/menu-content.component.scss

@@ -19,11 +19,11 @@
       padding-inline-start: 0px !important;
       box-shadow: $shadow-multi;
       :hover {
-        background: rgba($ocean, 0.1);
-        color: $dark;
+        background: rgb(from var(--color-positive) r g b / 0.1);
+        color: var(--font-color-base);
       }
       :active {
-        background: rgba($ocean, 0.4);
+        background: rgb(from var(--color-positive) r g b / 0.4);
       }
       .menu-item-container {
         display: flex;
@@ -31,7 +31,7 @@
         position: relative;
         .sub-menu-caret {
           position: absolute;
-          right: $spacing-sm;
+          right: var(--spacing-sm);
         }
       }
 
@@ -39,7 +39,7 @@
         @include novo-body-text();
         cursor: pointer;
         margin: 0;
-        padding: $spacing-md $spacing-md $spacing-md $spacing-lg;
+        padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-lg);
         box-sizing: border-box;
         display: flex;
         align-items: center;
@@ -49,11 +49,11 @@
       .divider {
         order: none;
         height: 1px;
-        background: $silver;
+        background: var(--background-dark);
       }
       a {
         &.disabled {
-          color: $disabled;
+          color: var(--color-disabled);
           cursor: not-allowed;
         }
       }

package/elements/modal/modal.component.scss

@@ -3,7 +3,7 @@
 :host {
   display: block;
   background-color: var(--background-bright);
-  border-radius: 4px;
+  border-radius: var(--border-radius-default, 4px);
   box-shadow: 0 1px 7px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.2);
   z-index: z(modal);
   position: relative;
@@ -12,8 +12,8 @@
 
   > .novo-button.modal-close {
     position: absolute;
-    right: $spacing-xl;
-    top: $spacing-xl;
+    right: var(--spacing-xl);
+    top: var(--spacing-xl);
   }
 
   > ::ng-deep header {
@@ -28,7 +28,7 @@
   }
 
   > ::ng-deep section {
-    padding: $spacing-md $spacing-xl;
+    padding: var(--spacing-md) var(--spacing-xl);
     max-height: 500px;
     overflow: auto;
   }
@@ -37,10 +37,20 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    padding: $spacing-md;
-    gap: $spacing-md;
+    padding: var(--spacing-md);
+    gap: var(--spacing-md);
     ::ng-deep button {
       min-width: 10rem;
     }
   }
 }
+
+// bh2026: rounded modal and header top corners.
+:host-context([data-theme='bh2026']) {
+  border-radius: var(--border-radius-md, 1.6rem);
+
+  > ::ng-deep header {
+    border-top-left-radius: var(--border-radius-md, 1.6rem);
+    border-top-right-radius: var(--border-radius-md, 1.6rem);
+  }
+}

package/elements/modal/notification.component.scss

@@ -4,7 +4,7 @@
   text-align: center;
   display: block;
   background-color: var(--background-bright);
-  border-radius: 4px;
+  border-radius: var(--border-radius-default, 4px);
   box-shadow: 0 1px 7px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.2);
   z-index: z(modal);
   position: relative;
@@ -13,55 +13,55 @@
 
   & > .novo-button.modal-close {
     position: absolute;
-    right: $spacing-xl;
-    top: $spacing-xl;
+    right: var(--spacing-xl);
+    top: var(--spacing-xl);
   }
 
   ::ng-deep .novo-notification-body {
     display: flex;
     flex-direction: column;
-    padding: 0 $spacing-xl;
-    margin: $spacing-lg 0 55px;
+    padding: 0 var(--spacing-xl);
+    margin: var(--spacing-lg) 0 55px;
 
     & > img {
       width: 100%;
     }
 
     h1 {
-      font-size: $font-size-2xl;
+      font-size: var(--font-size-2xl);
       margin: 10px auto 0;
     }
     h2 {
-      font-size: $font-size-xl;
+      font-size: var(--font-size-xl);
       color: var(--text-muted);
       margin: 0 auto;
       padding: 0;
     }
     h3 {
-      font-size: $font-size-lg;
+      font-size: var(--font-size-lg);
       margin: 0 auto;
     }
     h4 {
-      font-size: $font-size-lg;
+      font-size: var(--font-size-lg);
       color: var(--text-muted);
       margin: 0 auto;
       padding: 0;
     }
     h5 {
-      font-size: $font-size-md;
+      font-size: var(--font-size-md);
       margin: 0 auto;
     }
     h6 {
-      font-size: $font-size-md;
+      font-size: var(--font-size-md);
       margin: 0 auto;
     }
 
     i.indicator {
       color: var(--text-muted);
       border: 1px solid var(--text-muted);
-      font-size: $font-size-2xl;
+      font-size: var(--font-size-2xl);
       border-radius: 50%;
-      padding: $spacing-md;
+      padding: var(--spacing-md);
       margin: 2rem auto;
       align-self: center;
     }
@@ -70,8 +70,8 @@
   &[type="success"] {
     .novo-notification-body {
       i.indicator {
-        color: $success;
-        border-color: $success;
+        color: var(--color-success);
+        border-color: var(--color-success);
       }
     }
   }
@@ -79,8 +79,8 @@
   &[type="warning"] {
     .novo-notification-body {
       i.indicator {
-        color: $warning;
-        border-color: $warning;
+        color: var(--color-warning);
+        border-color: var(--color-warning);
       }
     }
   }
@@ -88,8 +88,8 @@
   &[type="error"] {
     .novo-notification-body {
       i.indicator {
-        color: $negative;
-        border-color: $negative;
+        color: var(--color-negative);
+        border-color: var(--color-negative);
       }
     }
   }
@@ -98,11 +98,16 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    padding: $spacing-md;
-    gap: $spacing-md;
+    padding: var(--spacing-md);
+    gap: var(--spacing-md);
 
     button {
       min-width: 10rem;
     }
   }
 }
+
+// bh2026: rounded notifications
+:host-context([data-theme='bh2026']) {
+  border-radius: var(--border-radius-md, 1.6rem);
+}

package/elements/multi-picker/_MultiPicker.scss

@@ -41,7 +41,7 @@
           i {
             &.bhi-checkbox-empty,
             &.bhi-checkbox-indeterminate {
-              color: $positive;
+              color: var(--color-positive);
             }
           }
         }
@@ -61,7 +61,7 @@
 
       &.bhi-checkbox-filled,
       &.bhi-checkbox-indeterminate {
-        color: $positive;
+        color: var(--color-positive);
       }
     }
   }

package/elements/picker/Picker.scss

@@ -12,7 +12,7 @@ novo-picker {
   &.selected,
   &.selected:hover {
     & + i {
-      color: $positive;
+      color: var(--color-positive);
     }
   }
   padding-bottom: 0;
@@ -27,7 +27,7 @@ novo-picker {
     font-size: 1em;
     background: transparent !important;
     border: none;
-    border-bottom: 1px solid lighten($dark, 45%);
+    border-bottom: 1px solid brightenLive('--color-dark', 45);
     border-radius: 0;
     outline: none;
     height: 2rem;
@@ -39,10 +39,10 @@ novo-picker {
     transition: all 300ms;
     color: #26282b;
     &:hover {
-      border-bottom: 1px solid lighten($dark, 15%);
+      border-bottom: 1px solid brightenLive('--color-dark', 15);
     }
     &:focus {
-      border-bottom: 1px solid $positive;
+      border-bottom: 1px solid var(--color-positive);
     }
     &:invalid {
       border-bottom: 1px solid #da4453;
@@ -52,19 +52,19 @@ novo-picker {
     }
     &.entity-selected {
       padding-left: 2.5em;
-      background: $off-white !important;
+      background: var(--background-main) !important;
     }
     &:disabled {
-      border-bottom: 1px dashed lighten($dark, 45%) !important;
+      border-bottom: 1px dashed brightenLive('--color-dark', 45) !important;
     }
   }
   i.bhi-more {
     position: absolute;
     left: 0;
     top: 2px;
-    background: $off-white;
+    background: var(--background-main);
     font-size: 1em;
-    border-radius: 3px;
+    border-radius: var(--border-radius-sm, 3px);
     padding: 3px;
   }
   i.entity-icon {
@@ -72,13 +72,13 @@ novo-picker {
     left: 5px;
     top: 3px;
     font-size: 1em;
-    border-radius: 3px;
+    border-radius: var(--border-radius-sm, 3px);
     padding: 3px;
     color: $white;
 
     @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
       &.#{$name} {
-        background: $color;
+        background: getCssVarname($name);
       }
     }
   }
@@ -86,18 +86,18 @@ novo-picker {
   i.bhi-times {
     position: absolute;
     right: 0;
-    color: $dark;
+    color: var(--font-color-base);
     &.entity-selected {
       right: 5px;
     }
   }
   i.bhi-search {
     top: 0px;
-    font-size: 1.2rem;
+    font-size: var(--font-size-sm);
   }
   i.bhi-times {
     top: 0px;
     cursor: pointer;
-    font-size: 1.2rem;
+    font-size: var(--font-size-sm);
   }
 }