novo-elements 13.1.0 → 13.2.0

package/elements/common/index.d.ts

@@ -230,6 +230,13 @@ declare class BorderDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<BorderDirective, "[border], [bb], [borderBottom], [bt], [borderTop], [bl], [borderLeft], [br], [borderRight], [bx], [borderX], [by], [borderY]", never, { "borderStyle": { "alias": "borderStyle"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; "borderWidth": { "alias": "borderWidth"; "required": false; }; "border": { "alias": "border"; "required": false; }; "borderLeft": { "alias": "borderLeft"; "required": false; }; "bl": { "alias": "bl"; "required": false; }; "borderRight": { "alias": "borderRight"; "required": false; }; "br": { "alias": "br"; "required": false; }; "borderTop": { "alias": "borderTop"; "required": false; }; "bt": { "alias": "bt"; "required": false; }; "borderBottom": { "alias": "borderBottom"; "required": false; }; "bb": { "alias": "bb"; "required": false; }; "borderX": { "alias": "borderX"; "required": false; }; "bx": { "alias": "bx"; "required": false; }; "borderY": { "alias": "borderY"; "required": false; }; "by": { "alias": "by"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+/**
+ * Novo theme generations named `bh<year>-<mode>`
+ */
+type ThemeName = 'bh2022-light' | 'bh2022-dark' | 'bh2026-light' | 'bh2026-dark';
+declare const DEFAULT_THEME: ThemeName;
+/** Map any stored/legacy themeName onto a canonical current name. */
+declare function normalizeThemeName(stored?: string): ThemeName;
 declare class NovoThemeOptions {
     themeName: string;
 }
@@ -241,7 +248,7 @@ declare class NovoTheme {
     private _defaultTheme;
     private _currentTheme;
     onThemeChange: EventEmitter<ThemeChangeEvent>;
-    /** Name of the theme being used. defaults to `modern-light` */
+    /** Name of the theme being used. defaults to `bh2022-light`. */
     get themeName(): string;
     set themeName(value: string);
     use(options: NovoThemeOptions): Observable<any>;
@@ -249,6 +256,7 @@ declare class NovoTheme {
      * Changes the current theme
      */
     private changeTheme;
+    private applyThemeToDom;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoTheme, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NovoTheme>;
 }
@@ -741,5 +749,5 @@ type HasTabIndexCtor = Constructor<HasTabIndex>;
 /** Mixin to augment a directive with a `tabIndex` property. */
 declare function mixinTabIndex<T extends AbstractConstructor<CanDisable>>(base: T, defaultTabIndex?: number): HasTabIndexCtor & T;
 
-export { AccentColorDirective, BackgroundColorDirective, BorderDirective, ErrorStateMatcher, FillColorDirective, FlexDirective, GapDirective, MarginDirective, NOVO_OPTGROUP, NOVO_OPTION_PARENT_COMPONENT, NOVO_OVERLAY_CONTAINER, NovoBaseTextElement, NovoCaption, NovoCommonModule, NovoLabel, NovoLink, NovoOptgroup, NovoOptgroupBase, NovoOptgroupMixinBase, NovoOption, NovoOptionBase, NovoOptionModule, NovoOptionSelectionChange, NovoOverlayModule, NovoOverlayTemplateComponent, NovoPseudoCheckbox, NovoPseudoCheckboxModule, NovoTemplate, NovoText, NovoTheme, NovoThemeOptions, NovoTitle, PaddingDirective, ShowOnDirtyErrorStateMatcher, SwitchCasesDirective, TextColorDirective, ThemeColorDirective, VisibleDirective, _countGroupLabelsBeforeOption, _getOptionScrollPosition, getSpacingToken, mixinColor, mixinDisabled, mixinErrorState, mixinOverlay, mixinRequired, mixinSize, mixinTabIndex };
-export type { AbstractConstructor, CanColor, CanColorCtor, CanDisable, CanDisableCtor, CanRequire, CanRequireCtor, CanSize, CanSizeCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, Constructor, ElementSize, HasElementRef, HasErrorState, HasOverlay, HasOverlayCtor, HasTabIndex, HasTabIndexCtor, NovoOptionParentComponent, NovoPseudoCheckboxShape, NovoPseudoCheckboxState, ThemeChangeEvent, ThemePalette, TypographyLength, TypographySize, TypographyWeight };
+export { AccentColorDirective, BackgroundColorDirective, BorderDirective, DEFAULT_THEME, ErrorStateMatcher, FillColorDirective, FlexDirective, GapDirective, MarginDirective, NOVO_OPTGROUP, NOVO_OPTION_PARENT_COMPONENT, NOVO_OVERLAY_CONTAINER, NovoBaseTextElement, NovoCaption, NovoCommonModule, NovoLabel, NovoLink, NovoOptgroup, NovoOptgroupBase, NovoOptgroupMixinBase, NovoOption, NovoOptionBase, NovoOptionModule, NovoOptionSelectionChange, NovoOverlayModule, NovoOverlayTemplateComponent, NovoPseudoCheckbox, NovoPseudoCheckboxModule, NovoTemplate, NovoText, NovoTheme, NovoThemeOptions, NovoTitle, PaddingDirective, ShowOnDirtyErrorStateMatcher, SwitchCasesDirective, TextColorDirective, ThemeColorDirective, VisibleDirective, _countGroupLabelsBeforeOption, _getOptionScrollPosition, getSpacingToken, mixinColor, mixinDisabled, mixinErrorState, mixinOverlay, mixinRequired, mixinSize, mixinTabIndex, normalizeThemeName };
+export type { AbstractConstructor, CanColor, CanColorCtor, CanDisable, CanDisableCtor, CanRequire, CanRequireCtor, CanSize, CanSizeCtor, CanUpdateErrorState, CanUpdateErrorStateCtor, Constructor, ElementSize, HasElementRef, HasErrorState, HasOverlay, HasOverlayCtor, HasTabIndex, HasTabIndexCtor, NovoOptionParentComponent, NovoPseudoCheckboxShape, NovoPseudoCheckboxState, ThemeChangeEvent, ThemeName, ThemePalette, TypographyLength, TypographySize, TypographyWeight };

package/elements/common/option/option.component.scss

@@ -1,7 +1,8 @@
 @import "../../../styles/variables.scss";
 @import "../typography/text.mixins.scss";
-
-$novo-menu-side-padding: 0.5rem;
+:root {
+  --menu-side-padding: var(--spacing-sm);
+}
 
 .novo-option {
   @include novo-body-text();
@@ -20,43 +21,43 @@ $novo-menu-side-padding: 0.5rem;
   -webkit-tap-highlight-color: transparent;
 
   &:hover:not(.novo-option-inert) {
-    background: var(--background-main, rgba($ocean, 0.1));
+    background: var(--background-main, rgb(from var(--color-positive) r g b / 0.1));
   }
 
   &:active:not(.novo-option-inert),
   &.novo-active:not(.novo-option-inert) {
-    background: rgba($ocean, 0.3);
+    background: rgb(from var(--color-positive) r g b / 0.3);
   }
 
   &.novo-selected, .add-icon {
-    color: $positive;
+    color: var(--color-positive);
   }
 
   &.disabled,
   &[aria-disabled="true"] {
     cursor: not-allowed;
-    color: $disabled;
+    color: var(--color-disabled);
     &:hover {
-      background: rgba($negative, 10%);
+      background: rgba(var(--color-negative), 10%);
     }
   }
 
   .novo-optgroup &:not(.novo-option-multiple) {
-    padding-left: $novo-menu-side-padding * 2;
+    padding-left: calc(var(--menu-side-padding) * 2);
 
     [dir="rtl"] & {
-      padding-left: $novo-menu-side-padding;
-      padding-right: $novo-menu-side-padding * 2;
+      padding-left: var(--menu-side-padding);
+      padding-right: calc(var(--menu-side-padding) * 2);
     }
   }
 
   @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
     &.novo-accent-#{$name} {
-      border-left: 4px solid $color;
+      border-left: 4px solid getCssVarname($name);
     }
     &.novo-fill-#{$name}:not(.novo-option-inert) {
       color: getContrastColor($name);
-      background: $color;
+      background-color: getCssVarname($name);
       &:hover,
       &:focus {
         background: getTintColor($name);
@@ -80,11 +81,5 @@ $novo-menu-side-padding: 0.5rem;
 }
 
 .novo-option-pseudo-checkbox {
-  $margin: calc($novo-menu-side-padding / 2);
-  margin-right: $margin;
-
-  [dir="rtl"] & {
-    margin-left: $margin;
-    margin-right: 0;
-  }
+  margin-inline-end: calc(var(--menu-side-padding) / 2);
 }

package/elements/common/selection/pseudo-checkbox/pseudo-checkbox.component.scss

@@ -23,12 +23,12 @@ $_novo-pseudo-checkmark-size: $novo-checkbox-size - (2 * $_novo-pseudo-checkbox-
 
   &.novo-pseudo-checkbox-checked,
   &.novo-pseudo-checkbox-indeterminate {
-    color: $ocean;
+    color: var(--color-positive);
     animation: iconEnter 160ms ease-in-out;
   }
 
   i {
-    font-size: 1.4rem;
+    font-size: var(--font-size-novo-default);
     line-height: 1rem;
   }
 }

package/elements/common/typography/text.mixins.scss

@@ -2,7 +2,7 @@
 
 @mixin text-disabled($property) {
   pointer-events: none;
-  color: $disabled;
+  color: var(--color-disabled);
 }
 
 @mixin base-text-rules() {
@@ -37,28 +37,28 @@
     font-size: inherit;
   }
   &.text-size-body {
-    font-size: $font-size-body;
+    font-size: var(--font-size-body);
   }
   &.text-size-xs {
-    font-size: $font-size-xs;
+    font-size: var(--font-size-xs);
   }
   &.text-size-sm {
-    font-size: $font-size-sm;
+    font-size: var(--font-size-sm);
   }
   &.text-size-md {
-    font-size: $font-size-md;
+    font-size: var(--font-size-md);
   }
   &.text-size-lg {
-    font-size: $font-size-lg;
+    font-size: var(--font-size-lg);
   }
   &.text-size-xl {
-    font-size: $font-size-xl;
+    font-size: var(--font-size-xl);
   }
   &.text-size-2xl {
-    font-size: $font-size-2xl;
+    font-size: var(--font-size-2xl);
   }
   &.text-size-3xl {
-    font-size: $font-size-3xl;
+    font-size: var(--font-size-3xl);
   }
   &.text-size-smaller {
     font-size: 0.8em;
@@ -71,31 +71,31 @@
 @mixin text-weights() {
   // Font Weight Utils
   &.text-weight-hairline {
-    font-weight: 100;
+    font-weight: var(--font-weight-hairline);
   }
   &.text-weight-thin {
-    font-weight: 200;
+    font-weight: var(--font-weight-thin);
   }
   &.text-weight-light {
-    font-weight: 300;
+    font-weight: var(--font-weight-light);
   }
   &.text-weight-normal {
-    font-weight: 400;
+    font-weight: var(--font-weight-normal);
   }
   &.text-weight-medium {
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
   }
   &.text-weight-semibold {
-    font-weight: 600;
+    font-weight: var(--font-weight-semibold);
   }
   &.text-weight-bold {
-    font-weight: 700;
+    font-weight: var(--font-weight-bold);
   }
   &.text-weight-extrabold {
-    font-weight: 800;
+    font-weight: var(--font-weight-extrabold);
   }
   &.text-weight-heavy {
-    font-weight: 900;
+    font-weight: var(--font-weight-heavy);
   }
   &.text-weight-lighter {
     font-weight: lighter;
@@ -120,7 +120,7 @@
 @mixin text-colors() {
   @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
     &.text-color-#{$name} {
-      color: $color;
+      color: getCssVarname($name)
     }
   }
 }

package/elements/data-table/data-table.component.scss

@@ -1,7 +1,7 @@
 @import "../../styles/variables.scss";
 @import "../../styles/reset";
 
-$table-bg-accent: var(--background-bright, $off-white);
+$table-bg-accent: var(--background-bright, $color-off-white);
 $novo-row-horizontal-padding: 20px;
 $table-header-font-weight: 400;
 $breakpoint: 1000px;
@@ -31,10 +31,10 @@ cdk-table {
       .novo-data-table-dropdown-cell,
       .novo-data-table-expand-cell,
       .novo-data-table-checkbox-cell {
-        background-color: rgba($ocean, 0.15);
+        background-color: rgb(from var(--color-positive) r g b / 0.15);
       }
       + .novo-data-table-detail-row {
-        background-color: rgba($ocean, 0.15);
+        background-color: rgb(from var(--color-positive) r g b / 0.15);
       }
     }
     + .novo-data-table-detail-row {
@@ -55,10 +55,10 @@ cdk-table {
       .novo-data-table-dropdown-cell,
       .novo-data-table-expand-cell,
       .novo-data-table-checkbox-cell {
-        background-color: rgba($ocean, 0.15);
+        background-color: rgb(from var(--color-positive) r g b / 0.15);
       }
       + .novo-data-table-detail-row {
-        background-color: rgba($ocean, 0.15);
+        background-color: rgb(from var(--color-positive) r g b / 0.15);
       }
     }
     + .novo-data-table-detail-row {
@@ -111,14 +111,14 @@ cdk-table {
   &.resizable {
     padding-right: 0;
     &:hover {
-      background-color: var(--background-muted, $neutral);
+      background-color: var(--background-muted, --color-neutral);
     }
     .data-table-header-resizable {
       height: 100%;
 
       span {
         cursor: ew-resize;
-        background-color: var(--border, $neutral);
+        background-color: var(--border, --color-neutral);
         width: 1px;
         margin: 0 4px;
         display: block;
@@ -169,7 +169,7 @@ cdk-table {
     color: var(--text-muted);
     background: transparent;
     pointer-events: all;
-    margin-left: 0.5rem;
+    margin-left: var(--spacing-sm);
     line-height: 1em;
     outline: none;
     &:hover {
@@ -181,18 +181,18 @@ cdk-table {
   }
 
   button.active {
-    color: $white;
-    background: $positive;
+    color: var(--color-contrast-positive);
+    background: var(--color-positive);
     &:hover,
     &:active,
     &:focus,
     &:visited {
-      background: $positive !important;
+      background: var(--color-positive) !important;
     }
   }
   &.clickable {
     cursor: pointer;
-    color: $company;
+    color: var(--color-company);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -238,7 +238,7 @@ cdk-table {
     cursor: pointer;
     font-size: 1.2em;
     padding: 0.5em;
-    border-radius: 3px;
+    border-radius: var(--border-radius-sm, 3px);
     &.disabled {
       pointer-events: none;
       opacity: 0.7;
@@ -333,7 +333,7 @@ cdk-table {
       }
       &.bhi-box-yes,
       &.bhi-checkbox-filled {
-        color: $positive;
+        color: var(--color-positive);
       }
     }
   }
@@ -358,7 +358,7 @@ novo-data-table {
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    border-bottom: 1px solid var(--border, $off-white);
+    border-bottom: 1px solid var(--border, $color-off-white);
     &.pagination-footer {
       justify-content: space-between;
     }
@@ -465,7 +465,7 @@ novo-data-table {
     display: flex;
     flex: 1;
     .novo-data-table-custom-filter {
-      border-right: 1px solid var(--border, $off-white);
+      border-right: 1px solid var(--border, $color-off-white);
       novo-date-picker {
         .calendar {
           box-shadow: none;
@@ -515,7 +515,7 @@ novo-data-table {
     align-items: center;
     > div,
     div.novo-data-table-footer-cell {
-      border-top: 1px solid var(--border, $off-white);
+      border-top: 1px solid var(--border, $color-off-white);
       flex: 1;
       min-width: 200px;
       display: flex;
@@ -553,7 +553,7 @@ novo-data-table {
     overflow-x: hidden;
   }
   .footer {
-    border-top: 1px solid var(--border, $off-white);
+    border-top: 1px solid var(--border, $color-off-white);
     padding: 5px 10px;
     display: flex;
     justify-content: flex-end;
@@ -581,10 +581,10 @@ novo-data-table {
     height: 100%;
     min-height: 200px;
     width: 100%;
-    background: #fff;
+    background: var(--background-bright);
     padding: 0 !important;
     .back-link {
-      color: $positive;
+      color: var(--color-positive);
       line-height: 3em;
       font-size: 0.9em;
       padding-left: 5px;
@@ -603,17 +603,26 @@ novo-data-table {
     }
   }
   span.error-text {
-    color: $negative;
+    color: var(--color-negative);
     position: relative;
     left: 10px;
     top: -17px;
     font-size: x-small;
   }
   .filter-null-results {
-    background-color: $white;
+    background-color: var(--background-body);
     text-align: center;
-    color: darken($light, 15%);
+    color: darkenLive('--color-light', 15);
     background: transparent;
     font-weight: 500;
   }
 }
+
+// bh2026: stronger, subtler column headers
+[data-theme='bh2026'] {
+  .novo-data-table-header-cell,
+  .novo-data-table-header-cell > label {
+    font-weight: 600;
+    color: var(--color-content-subtle, #8ca1b9);
+  }
+}

package/elements/data-table/index.d.ts

@@ -47,6 +47,7 @@ interface IDataTablePreferences {
     hasUnsavedChanges?: boolean;
     unsavedChanges?: any;
     useBooleanKeywords?: boolean;
+    cardView?: boolean;
 }
 interface AutobuildEntityData {
     id: number;
@@ -662,7 +663,7 @@ type ListInteractionDictionary = {
     [key: string]: ListInteraction[];
 };
 
-type DataTablePreferenceUpdateSrc = 'columndrag' | 'input' | 'statesortchange' | 'pagination';
+type DataTablePreferenceUpdateSrc = 'columndrag' | 'input' | 'statesortchange' | 'pagination' | 'other';
 interface IDataTablePreferencesChangeEvent extends IDataTablePreferences {
     eventSrc: DataTablePreferenceUpdateSrc;
 }

package/elements/data-table/pagination/data-table-pagination.component.scss

@@ -67,7 +67,7 @@ $breakpoint: 1000px;
     }
     h5.rows {
       padding: 0;
-      font-size: 12px;
+      font-size: var(--font-size-sm);
       opacity: 0.75;
       letter-spacing: 0.1px;
     }
@@ -105,24 +105,24 @@ $breakpoint: 1000px;
         width: 2.4rem;
         height: 2.4rem;
         font-size: var(--font-size-text);
-        border-radius: 2px;
+        border-radius: var(--border-radius-xsm, 2px);
         list-style-type: none;
         cursor: pointer;
-        color: $company;
+        color: var(--color-company);
         &.disabled {
           opacity: 0.3;
           pointer-events: none;
         }
       }
       .page.active {
-        color: $company;
+        color: var(--color-company);
         background-color: rgba($black, 0.1);
         opacity: 1;
       }
     }
     .novo-data-table-of-total-amount {
-      color: $slate;
-      font-size: 12px;
+      color: var(--color-slate);
+      font-size: var(--font-size-sm);
     }
   }
 }

package/elements/date-picker/DatePicker.scss

@@ -3,7 +3,7 @@
 :host {
   display: block;
   .date-picker-container {
-    border-radius: 4px;
+    border-radius: var(--border-radius-default, 4px);
     width: min-content;
     text-align: center;
     background: var(--background-main);
@@ -15,23 +15,23 @@
 
     .month-view + .month-view {
       border-collapse: unset;
-      border-left: 1px solid $light;
-      margin-left: 0.5rem;
-      padding-left: 0.5rem;
+      border-left: 1px solid var(--border);
+      margin-left: var(--spacing-sm);
+      padding-left: var(--spacing-sm);
     }
 
     .calendar-top {
       display: flex;
       flex-flow: column;
-      background: $positive;
-      color: #fff;
+      background: var(--color-positive);
+      color: var(--color-contrast-positive);
       font-size: 14px;
       border-top-right-radius: 4px;
       border-top-left-radius: 4px;
       h1 {
         font-weight: 600;
         font-size: 4.2em;
-        color: #fff;
+        color: var(--color-contrast-positive);
         margin: 0;
         padding: 0;
       }
@@ -55,7 +55,7 @@
       }
     }
     .date-range-tabs {
-      border-bottom: 1px solid $off-white;
+      border-bottom: 1px solid var(--border-2);
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -73,7 +73,7 @@
         }
       }
       & > span {
-        color: $positive;
+        color: var(--color-positive);
         text-align: center;
         flex: 1;
         cursor: pointer;
@@ -90,7 +90,7 @@
         height: 2px;
         bottom: 0;
         left: 0;
-        background: $positive;
+        background: var(--color-positive);
         transition: transform 200ms ease-in-out;
       }
     }
@@ -103,7 +103,7 @@
       -webkit-user-select: none;
       justify-content: space-between;
       cursor: default;
-      border-bottom: 1px solid $off-white;
+      border-bottom: 1px solid var(--border-2);
       .previous {
         width: 30px;
         height: 15px;
@@ -120,7 +120,7 @@
           width: 0;
         }
         &:hover:after {
-          border-right: 4px solid $positive;
+          border-right: 4px solid var(--color-positive);
           cursor: pointer;
         }
       }
@@ -128,22 +128,22 @@
         flex: 1;
         display: inline-block;
         vertical-align: middle;
-        color: $positive;
+        color: var(--color-positive);
         font-weight: 600;
         .month {
-          border-radius: 2px;
+          border-radius: var(--border-radius-xsm, 2px);
           padding: 3px 8px;
           &:hover {
-            background: $positive;
+            background: var(--color-positive);
             color: #fff;
             cursor: pointer;
           }
         }
         .year {
-          border-radius: 2px;
+          border-radius: var(--border-radius-xsm, 2px);
           padding: 3px 8px;
           &:hover {
-            background: $positive;
+            background: var(--color-positive);
             color: #fff;
             cursor: pointer;
           }
@@ -166,7 +166,7 @@
         }
         &:hover:before {
           opacity: 1;
-          border-left: 4px solid $positive;
+          border-left: 4px solid var(--color-positive);
           cursor: pointer;
         }
       }
@@ -219,3 +219,8 @@
     display: block;
   }
 }
+
+// bh2026: rounder calendar
+:host-context([data-theme='bh2026']) .date-picker-container {
+  border-radius: var(--calendar-radius, 0.8rem);
+}

package/elements/date-picker/DatePickerInput.scss

@@ -11,7 +11,7 @@
   input {
     font-size: 1em;
     border: none;
-    border-bottom: 1px solid $light;
+    border-bottom: 1px solid var(--color-border);
     background: transparent !important;
     border-radius: 0;
     outline: none;
@@ -22,13 +22,13 @@
     box-shadow: none;
     box-sizing: content-box;
     transition: all 300ms;
-    color: $dark;
+    color: var(--font-color-base);
     &:focus {
-      border-bottom: 1px solid $ocean;
+      border-bottom: 1px solid var(--color-positive);
     }
   }
   span.error-text {
-    color: $negative;
+    color: var(--color-negative);
     padding-top: 10px;
     flex: 1;
     display: flex;
@@ -40,7 +40,7 @@
     position: absolute;
     right: 0;
     top: 0px;
-    font-size: 1.2rem;
+    font-size: var(--font-size-sm);
     cursor: pointer;
   }
 }

package/elements/date-picker/DateRangeInput.scss

@@ -38,7 +38,7 @@
     transition: all 300ms;
     color: var(--text-main);
     &:focus {
-      border-bottom: 1px solid $ocean;
+      border-bottom: 1px solid var(--color-positive);
     }
   }
   novo-icon {

package/elements/date-picker/MultiDateInput.scss

@@ -14,7 +14,7 @@
       margin: 0px;
     }
     &.selected {
-      background: $light;
+      background: var(--background-main, $light);
       border-radius: 50%;
     }
   }
@@ -44,4 +44,4 @@
       text-transform: capitalize;
     }
   }
-}
+}