novo-elements 13.1.0-next.6 → 13.1.0-next.8

package/addons/ckeditor/index.d.ts

@@ -15,6 +15,8 @@ declare class NovoCKEditorElement implements OnDestroy, AfterViewInit, ControlVa
     debounce: any;
     name: any;
     minimal: any;
+    customConfig: any;
+    customFonts: string;
     startupFocus: boolean;
     fileBrowserImageUploadUrl: string;
     disabled: boolean;
@@ -47,7 +49,7 @@ declare class NovoCKEditorElement implements OnDestroy, AfterViewInit, ControlVa
     setDisabledState(disabled: boolean): void;
     insertText(text: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoCKEditorElement, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NovoCKEditorElement, "novo-editor", never, { "config": { "alias": "config"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "name": { "alias": "name"; "required": false; }; "minimal": { "alias": "minimal"; "required": false; }; "startupFocus": { "alias": "startupFocus"; "required": false; }; "fileBrowserImageUploadUrl": { "alias": "fileBrowserImageUploadUrl"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; "ready": "ready"; "blur": "blur"; "focus": "focus"; "paste": "paste"; "loaded": "loaded"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NovoCKEditorElement, "novo-editor", never, { "config": { "alias": "config"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "name": { "alias": "name"; "required": false; }; "minimal": { "alias": "minimal"; "required": false; }; "customConfig": { "alias": "customConfig"; "required": false; }; "customFonts": { "alias": "customFonts"; "required": false; }; "startupFocus": { "alias": "startupFocus"; "required": false; }; "fileBrowserImageUploadUrl": { "alias": "fileBrowserImageUploadUrl"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; "ready": "ready"; "blur": "blur"; "focus": "focus"; "paste": "paste"; "loaded": "loaded"; }, never, never, false, never>;
 }
 
 declare class NovoNovoCKEditorModule {

package/elements/agenda/common/AgendaDateChange.scss

@@ -4,16 +4,16 @@
   display: inline-block;
 
   .cal-date-change {
-    border-radius: 3px;
+    border-radius: var(--border-radius-sm, 3px);
     border: 1px solid #e1e1e1;
-    background-color: $white;
+    background-color: var(--background-body);
     position: relative;
     padding: 10px 15px;
     text-align: center;
 
     > span {
       padding: 5px;
-      color: $black;
+      color: var(--form-text);
     }
 
     > i {

package/elements/agenda/common/AgendaHoursLayout.scss

@@ -11,10 +11,10 @@
     }
 
     .cal-hour:nth-child(even) {
-      background-color: $off-white;
+      background-color: var(--background-main);
     }
     .cal-hour:nth-child(odd) {
-      background-color: $white;
+      background-color: var(--background-body);
     }
 
     .cal-hour-segment {

package/elements/agenda/day/AgendaDayView.scss

@@ -11,13 +11,13 @@
 
       .cal-event {
         height: inherit;
-        font-size: 12px;
+        font-size: var(--font-size-sm);
         margin-left: 2px;
         margin-right: 2px;
         min-height: 30px;
         display: flex;
         flex-flow: row nowrap;
-        background-color: $off-white;
+        background-color: var(--background-main);
 
         .cal-event-ribbon {
           width: 4px;
@@ -34,7 +34,7 @@
           line-height: 26px;
         }
         .cal-event-description {
-          font-size: 10px;
+          font-size: var(--font-size-xs);
           line-height: 13px;
         }
       }

package/elements/agenda/month/AgendaMonthView.scss

@@ -2,14 +2,14 @@
 
 :host {
   ::ng-deep .agenda-month-view {
-    background-color: $white;
+    background-color: var(--background-body);
 
     .agenda-header {
       display: flex;
       flex-flow: column;
       text-align: center;
       font-weight: bolder;
-      border-bottom: 2px solid #e1e1e1;
+      border-bottom: 2px solid var(--border);
       .agenda-header-top {
         display: flex;
         flex-flow: row nowrap;
@@ -50,7 +50,7 @@
     }
 
     .agenda-days {
-      border: 1px solid #e1e1e1;
+      border: 1px solid var(--border, #e1e1e1);
       border-bottom: 0;
     }
 
@@ -92,7 +92,7 @@
       display: inline-block;
       min-width: 10px;
       padding: 3px 7px;
-      font-size: 12px;
+      font-size: var(--font-size-sm);
       font-weight: 700;
       line-height: 1;
       color: white;
@@ -112,14 +112,14 @@
     .agenda-event {
       width: 22px;
       height: 22px;
-      border-radius: 4px;
+      border-radius: var(--border-radius-default, 4px);
       display: inline-block;
       margin: 2px;
       vertical-align: middle;
       text-align: center;
       line-height: 22px;
-      font-size: 12px;
-      color: $white;
+      font-size: var(--font-size-sm);
+      color: var(--text-bg-contrast);
     }
 
     .agenda-day-cell.agenda-in-month.agenda-has-events {
@@ -140,7 +140,7 @@
     }
 
     .agenda-day-cell.agenda-today .agenda-day-number {
-      color: $dark;
+      color: var(--font-color-base);
     }
 
     .agenda-day-cell.agenda-drag-over {

package/elements/agenda/week/AgendaWeekView.scss

@@ -13,7 +13,7 @@
       flex: 1;
       text-align: center;
       padding: 5px;
-      background-color: $off-white;
+      background-color: var(--background-main);
     }
 
     .cal-day-headers .cal-header:not(:last-child) {
@@ -42,11 +42,11 @@
 
         .cal-event {
           height: inherit;
-          font-size: 12px;
+          font-size: var(--font-size-sm);
           min-height: 30px;
           display: flex;
           flex-flow: column;
-          background-color: $off-white;
+          background-color: var(--background-main);
 
           .cal-event-ribbon {
             min-height: 4px;
@@ -59,7 +59,7 @@
             text-overflow: ellipsis;
           }
           .cal-event-description {
-            font-size: 10px;
+            font-size: var(--font-size-xs);
             line-height: 13px;
             padding: 0px 0px 0px 10px;
             overflow: hidden;

package/elements/aside/aside.component.scss

@@ -3,16 +3,31 @@
 :host {
   .aside-panel {
     background-color: var(--background-bright, $color-white);
+    box-shadow: -3px 3px 15px 4px rgba(61, 70, 77, 0.2);
     height: 100vh;
     width: 50%;
     min-width: min-content;
-    max-width: 540px;
+    max-width: 560px;
     position: absolute;
     top: 0;
-    right: 0px;
+    right: 0;
     padding: 0;
     display: flex;
     justify-content: stretch;
     align-items: stretch;
+
+    &.draggable {
+      position: absolute;
+      max-width: none;
+      height: auto;
+      width: 540px;
+      left: calc(100vw - 560px);
+      overflow: hidden;
+      resize: both;
+      .drag-handle {
+        width: 100%;
+        height: calc(100% - 1rem);
+      }
+    }
   }
 }

package/elements/aside/index.d.ts

@@ -1,18 +1,23 @@
-import * as i2 from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { EventEmitter, Injector } from '@angular/core';
+import * as i5 from '@angular/cdk/overlay';
 import { OverlayRef, Overlay } from '@angular/cdk/overlay';
 import { Observable } from 'rxjs';
 import * as _angular_animations from '@angular/animations';
 import { AnimationEvent } from '@angular/animations';
-import * as i3 from '@angular/cdk/portal';
+import * as i6 from '@angular/cdk/portal';
 import { Portal } from '@angular/cdk/portal';
-import * as i0 from '@angular/core';
-import { EventEmitter, Injector } from '@angular/core';
+import * as i2 from '@angular/common';
+import * as i3 from '@angular/cdk/drag-drop';
+import * as i4 from 'novo-elements/elements/common';
 
 declare class AsideComponent {
     private injector;
-    private asideRef;
+    asideRef: NovoAsideRef;
     animationStateChanged: EventEmitter<AnimationEvent>;
     animationState: 'void' | 'enter' | 'leave';
+    draggable: i0.WritableSignal<boolean>;
+    disableDrag: i0.WritableSignal<boolean>;
     component: Portal<any>;
     constructor(injector: Injector, asideRef: NovoAsideRef);
     onAnimationStart(event: AnimationEvent): void;
@@ -25,12 +30,15 @@ declare class AsideComponent {
 declare class NovoAsideRef<T = any, R = any> {
     component: any;
     params: T;
-    private overlayRef;
+    overlayRef: OverlayRef;
     constructor(component: any, params: T, overlayRef: OverlayRef);
     private _beforeClose;
     private _afterClosed;
     isClosed: boolean;
     componentInstance: AsideComponent;
+    draggable: i0.WritableSignal<boolean>;
+    disableDrag: i0.WritableSignal<boolean>;
+    onDragStart: EventEmitter<void>;
     get onClosed(): Promise<R>;
     afterClosed(): Observable<R>;
     beforeClose(): Observable<R>;
@@ -41,7 +49,7 @@ declare const slideInOut: _angular_animations.AnimationTriggerMetadata;
 
 declare class NovoAsideModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<NovoAsideModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoAsideModule, [typeof AsideComponent], [typeof i2.OverlayModule, typeof i3.PortalModule], never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NovoAsideModule, [typeof AsideComponent], [typeof i2.CommonModule, typeof i3.DragDropModule, typeof i4.NovoCommonModule, typeof i5.OverlayModule, typeof i6.PortalModule], never>;
     static ɵinj: i0.ɵɵInjectorDeclaration<NovoAsideModule>;
 }
 
@@ -49,7 +57,7 @@ declare class NovoAsideService {
     private injector;
     private overlay;
     constructor(injector: Injector, overlay: Overlay);
-    open<R = any>(component: any, params?: {}, config?: {}): NovoAsideRef<{}, R>;
+    open<R = any>(component: any, params?: {}, config?: {}, draggable?: boolean): NovoAsideRef<{}, R>;
     private createOverlay;
     private attachAsideContainer;
     private createInjector;

package/elements/autocomplete/autocomplete.component.scss

@@ -1,6 +1,10 @@
 @import "../../styles/variables.scss";
 @import "../common/typography/text.mixins";
 
+:host {
+  border-radius: var(--border-radius-sm);
+}
+
 .novo-autocomplete-options {
   list-style: none;
   background-color: var(--background-bright);

package/elements/avatar/Avatar.scss

@@ -28,13 +28,13 @@
     border-radius: 2em;
   }
   &.avatar-shape-square {
-    border-radius: 0.4em;
+    border-radius: var(--border-radius-round);
   }
 
   @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
     &.avatar-color-#{$name} {
       color: getContrastColor($name);
-      background-color: $color;
+      background-color: var(--color-#{$name});
     }
   }
 }

package/elements/breadcrumbs/Breadcrumb.scss

@@ -8,3 +8,8 @@
     }
   }
 }
+
+// bh2026: subtle breadcrumb text.
+:host-context([data-theme='bh2026']) {
+  color: var(--color-content-subtle, #8ca1b9);
+}

package/elements/breadcrumbs/breadcrumb-item/BreadcrumbItem.scss

@@ -23,7 +23,7 @@
 
     ::ng-deep a {
       @extend .novo-breadcrumb-font-style;
-      color: $ocean;
+      color: var(--links);
       cursor: pointer;
       &:focus {
         text-decoration: none;
@@ -77,7 +77,7 @@
 
     li {
       padding: 0 15px;
-      font-size: 12px;
+      font-size: var(--font-size-sm);
       line-height: 36px;
       width: 200px;
       overflow: hidden;
@@ -86,7 +86,7 @@
       cursor: pointer;
 
       a {
-        color: $dark;
+        color: var(--font-color-base);
         line-height: 36px;
         width: 170px;
         display: inline-block;

package/elements/button/styles/button-dialogue.scss

@@ -5,16 +5,17 @@
   &[theme="dialogue"] {
     @include theme-text-colors("color");
     background: transparent;
-    color: $positive;
+    color: var(--button-color, var(--color-positive));
     i {
       line-height: 1.2;
     }
-    &:hover,
-    &:focus {
-      background: lighten($light, 7%);
+    &[color=text] {
+      color: inherit;
     }
+    &:hover,
+    &:focus,
     &:active {
-      background: lighten($light, 2%);
+      background: var(--background-muted);
     }
     &[inverse] {
       &:hover,

package/elements/button/styles/button-fab.scss

@@ -6,7 +6,7 @@
     @include theme-backgrounds("color", false);
     border-radius: 50% !important;
     padding: 0;
-    font-size: 1.2rem;
+    font-size: var(--font-size-sm);
     width: 3.2rem;
     height: 3.2rem;
     display: inline-flex;

package/elements/button/styles/button-icon.scss

@@ -4,11 +4,11 @@
   // Icon Themed Button
   &[theme="icon"] {
     @include theme-text-colors("color");
-    padding: $spacing-sm;
+    padding: var(--spacing-sm);
     font-size: 1.4rem;
     height: 2.4rem;
     &[inverse] {
-      color: #fff;
+      color: var(--color-contrast-text);
     }
     i {
       display: contents;
@@ -25,8 +25,8 @@
       display: contents;
     }
     &[size="small"] {
-      padding: $spacing-sm;
-      font-size: 1.2rem;
+      padding: var(--spacing-sm);
+      font-size: var(--font-size-sm);
       height: 2rem;
     }
     &[size="medium"] {
@@ -35,7 +35,7 @@
     &[size="large"] {
       font-size: 2rem;
       height: 2.8rem;
-      padding: $spacing-md;
+      padding: var(--spacing-md);
     }
   }
 }

package/elements/button/styles/button-other.scss

@@ -4,13 +4,13 @@
   // Field Themed Button
   &[theme="field"] {
     background: transparent;
-    color: $dark;
+    color: var(--font-color-base);
     border: none;
     border-radius: 0;
     border-bottom: 1px solid var(--border);
     margin-bottom: 4px;
-    padding: $spacing-xs $spacing-sm;
-    font-size: 1.2rem;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--font-size-sm);
     height: 1.8rem;
     text-align: left;
     &:hover,
@@ -39,7 +39,7 @@
     width: 100%;
     z-index: z("default");
     text-transform: none;
-    font-size: 1.2rem;
+    font-size: var(--font-size-sm);
     height: 1.8rem;
 
     &.empty {
@@ -50,7 +50,7 @@
       outline: none;
     }
     &:hover {
-      border-bottom: 1px solid lighten($dark, 15%);
+      border-bottom: 1px solid brightenLive('--color-dark', 15);
       i {
         opacity: 0.75;
       }

package/elements/button/styles/button-primary.scss

@@ -3,30 +3,32 @@
 :host {
   // Primary theme
   &[theme="primary"] {
-    @include theme-backgrounds("color");
-    background: $positive;
-    color: #fff;
+    @include theme-backgrounds-live();
+    background: var(--button-primary-background, var(--color-positive));
+    color: var(--button-primary-color, var(--color-contrast-positive));
+    border: var(--button-primary-border, none);
     text-align: left;
 
     &:hover,
     &:focus {
-      box-shadow: $shadow-2, $shadow-1;
+
       filter: brightness(1.15);
+      box-shadow: var(--shadow-2), var(--shadow-1);
     }
     &:active {
       filter: brightness(0.85);
-      box-shadow: $shadow-1;
+      box-shadow: var(--shadow-1);
     }
 
     &[color="white"] {
-      background: $white;
-      color: $ocean;
+      background: var(--background-main);
+      color: var(--color-positive);
       &:hover,
       &:focus {
-        background: $background;
+        background: var(--background-main);
       }
       &:active {
-        background: darken($background, 5%);
+        background: darkenLive('--theme-background-main', 5);
       }
       i {
         background: rgba(0, 0, 0, 0.05);

package/elements/button/styles/button-secondary.scss

@@ -8,31 +8,31 @@
 
     text-align: left;
     align-items: center;
-    background: $white;
-    color: $positive;
-    border: 1px solid $positive;
-    padding: 0 calc(#{$spacing-md} - 1px);
+    background: var(--color-white);
+    color: var(--button-secondary-text, var(--color-positive));
+    border: var(--button-secondary-border, 1px solid $positive);
+    padding: 0 calc(#{var(--spacing-md)} - 1px);
 
     i.loading {
       margin-left: 0.8rem;
       svg {
         .spinner {
-          fill: $positive;
+          fill: var(--color-positive);
         }
       }
     }
     &:hover,
     &:focus {
-      box-shadow: $shadow-2, $shadow-1;
+      box-shadow: var(--shadow-2), var(--shadow-1);
       background: $white;
     }
     &:active {
-      box-shadow: $shadow-1;
+      box-shadow: var(--shadow-1);
     }
     &[inverse] {
       background: rgba(0, 0, 0, 0.25);
-      color: #fff;
-      border: 1px solid #fff;
+      color: var(--color-contrast-positive);
+      border: 1px solid var(--color-contrast-positive);
       &:hover,
       &:focus {
         background: rgba(0, 0, 0, 0.35);

package/elements/button/styles/button-standard.scss

@@ -8,10 +8,10 @@
     background: var(--button-background);
     &:hover,
     &:focus {
-      box-shadow: $shadow-2, $shadow-1;
+      box-shadow: var(--shadow-2), var(--shadow-1);
     }
     &:active {
-      box-shadow: $shadow-1;
+      box-shadow: var(--shadow-1);
     }
   }
 }

package/elements/button/styles/button.scss

@@ -5,16 +5,18 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  padding: 0 $spacing-md;
+  padding: var(--button-padding-y, 0) var(--button-padding-x, var(--spacing-md));
   font-size: var(--font-size-button);
-  height: 3rem;
+  font-weight: var(--button-font-weight, inherit);
+  letter-spacing: var(--button-letter-spacing, normal);
+  height: var(--button-height, 3rem);
   border: none;
-  color: var(--text-main, $dark);
+  color: var(--button-color, var(--text-main, $dark));
   background: transparent;
-  border-radius: 3px;
-  text-transform: uppercase;
+  border-radius: var(--button-radius, 3px);
+  text-transform: var(--button-text-transform, uppercase);
   transition: all 200ms ease-in-out;
-  gap: $spacing-md;
+  gap: var(--button-gap, var(--spacing-md));
   cursor: pointer;
   user-select: none;
   text-overflow: clip;
@@ -29,7 +31,7 @@
     line-height: 1;
     font-size: inherit;
     color: inherit;
-    text-transform: uppercase;
+    text-transform: var(--button-text-transform, uppercase);
   }
 
   i {
@@ -40,10 +42,10 @@
 
   &[size="small"],
   &[size="sm"] {
-    font-size: 1rem;
-    padding: 0 $spacing-md;
+    font-size: var(--font-size-xs);
+    padding: 0 var(--spacing-md);
     height: 2.4rem;
-    gap: $spacing-sm;
+    gap: var(--spacing-sm);
     .button-contents,
     i {
       height: 1rem;
@@ -53,9 +55,9 @@
   &[size="large"],
   &[size="lg"] {
     font-size: 1.6rem;
-    padding: 0 $spacing-lg;
+    padding: 0 var(--spacing-lg);
     height: 3.6rem;
-    gap: $spacing-lg;
+    gap: var(--spacing-lg);
     .button-contents,
     i {
       height: 1.6rem;
@@ -66,6 +68,10 @@
     outline: none;
   }
 
+  &:focus-visible {
+    box-shadow: var(--button-focus-ring, none);
+  }
+
   &[disabled],
   &.novo-button-disabled {
     opacity: 0.5;