@covalent/core 8.1.0-beta.6 → 8.1.0-beta.7

package/fesm2022/covalent-core-user-profile.mjs

@@ -20,10 +20,10 @@ class TdUserProfileMenuComponent {
         event.preventDefault();
         event.stopPropagation();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TdUserProfileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: TdUserProfileMenuComponent, selector: "td-user-profile-menu", inputs: { email: "email", name: "name" }, ngImport: i0, template: "<td-menu class=\"user-profile-menu\">\n  <!--header-->\n  <mat-list td-menu-header>\n    <mat-list-item *ngIf=\"name || email\" (click)=\"_blockEvent($event)\">\n      <mat-icon matListItemAvatar>person</mat-icon>\n      <span matListItemLine *ngIf=\"name\" class=\"mat-body-1\">{{ name }}</span>\n      <span matListItemLine *ngIf=\"email\">{{ email }}</span>\n    </mat-list-item>\n    <ng-content select=\"[td-user-info-list]\"></ng-content>\n  </mat-list>\n  <!--content-->\n  <mat-action-list>\n    <ng-content select=\"[td-user-action-list]\"></ng-content>\n  </mat-action-list>\n</td-menu>\n", styles: [".user-profile-menu [td-menu-header]{text-align:left;padding-bottom:0}::ng-deep mat-list-item:not(:first-child) .mat-list-item-content .mat-icon[matListItemAvatar],::ng-deep [mat-list-item] .mat-list-item-content .mat-icon[matListItemAvatar]{background:none}.mat-action-list{padding-top:0}:host ::ng-deep .mat-action-list .mat-divider,:host ::ng-deep .mat-divider{margin:8px 0}:host ::ng-deep mat-divider:last-child{display:none}:host ::ng-deep mat-list .mat-list-item.mat-2-line .mat-list-item-content{height:inherit}:host ::ng-deep mat-list .mat-list-item .mat-list-item-content{padding:8px}td-menu{margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i3.MatListItemLine, selector: "[matListItemLine]" }, { kind: "component", type: i4.TdMenuComponent, selector: "td-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdUserProfileMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdUserProfileMenuComponent, selector: "td-user-profile-menu", inputs: { email: "email", name: "name" }, ngImport: i0, template: "<td-menu class=\"user-profile-menu\">\n  <!--header-->\n  <mat-list td-menu-header>\n    <mat-list-item *ngIf=\"name || email\" (click)=\"_blockEvent($event)\">\n      <mat-icon matListItemAvatar>person</mat-icon>\n      <span matListItemLine *ngIf=\"name\" class=\"mat-body-1\">{{ name }}</span>\n      <span matListItemLine *ngIf=\"email\">{{ email }}</span>\n    </mat-list-item>\n    <ng-content select=\"[td-user-info-list]\"></ng-content>\n  </mat-list>\n  <!--content-->\n  <mat-action-list>\n    <ng-content select=\"[td-user-action-list]\"></ng-content>\n  </mat-action-list>\n</td-menu>\n", styles: [".user-profile-menu [td-menu-header]{text-align:left;padding-bottom:0}::ng-deep mat-list-item:not(:first-child) .mat-list-item-content .mat-icon[matListItemAvatar],::ng-deep [mat-list-item] .mat-list-item-content .mat-icon[matListItemAvatar]{background:none}.mat-action-list{padding-top:0}:host ::ng-deep .mat-action-list .mat-divider,:host ::ng-deep .mat-divider{margin:8px 0}:host ::ng-deep mat-divider:last-child{display:none}:host ::ng-deep mat-list .mat-list-item.mat-2-line .mat-list-item-content{height:inherit}:host ::ng-deep mat-list .mat-list-item .mat-list-item-content{padding:8px}td-menu{margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatActionList, selector: "mat-action-list", exportAs: ["matActionList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i3.MatListItemLine, selector: "[matListItemLine]" }, { kind: "component", type: i4.TdMenuComponent, selector: "td-menu" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TdUserProfileMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdUserProfileMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'td-user-profile-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<td-menu class=\"user-profile-menu\">\n  <!--header-->\n  <mat-list td-menu-header>\n    <mat-list-item *ngIf=\"name || email\" (click)=\"_blockEvent($event)\">\n      <mat-icon matListItemAvatar>person</mat-icon>\n      <span matListItemLine *ngIf=\"name\" class=\"mat-body-1\">{{ name }}</span>\n      <span matListItemLine *ngIf=\"email\">{{ email }}</span>\n    </mat-list-item>\n    <ng-content select=\"[td-user-info-list]\"></ng-content>\n  </mat-list>\n  <!--content-->\n  <mat-action-list>\n    <ng-content select=\"[td-user-action-list]\"></ng-content>\n  </mat-action-list>\n</td-menu>\n", styles: [".user-profile-menu [td-menu-header]{text-align:left;padding-bottom:0}::ng-deep mat-list-item:not(:first-child) .mat-list-item-content .mat-icon[matListItemAvatar],::ng-deep [mat-list-item] .mat-list-item-content .mat-icon[matListItemAvatar]{background:none}.mat-action-list{padding-top:0}:host ::ng-deep .mat-action-list .mat-divider,:host ::ng-deep .mat-divider{margin:8px 0}:host ::ng-deep mat-divider:last-child{display:none}:host ::ng-deep mat-list .mat-list-item.mat-2-line .mat-list-item-content{height:inherit}:host ::ng-deep mat-list .mat-list-item .mat-list-item-content{padding:8px}td-menu{margin-bottom:0}\n"] }]
         }], propDecorators: { email: [{
@@ -35,10 +35,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
 class TdUserProfileComponent {
     name;
     email;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TdUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: TdUserProfileComponent, selector: "td-user-profile", inputs: { name: "name", email: "email" }, ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"accountMenu\">\n  <mat-icon>person</mat-icon>\n</button>\n\n<mat-menu #accountMenu=\"matMenu\" [overlapTrigger]=\"false\">\n  <td-user-profile-menu [name]=\"name\" [email]=\"email\">\n    <ng-content select=\"[td-user-info-list]\" td-user-info-list></ng-content>\n    <ng-content select=\"[td-user-action-list]\" td-user-action-list></ng-content>\n  </td-user-profile-menu>\n</mat-menu>\n", dependencies: [{ kind: "component", type: i1$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: TdUserProfileMenuComponent, selector: "td-user-profile-menu", inputs: ["email", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdUserProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: TdUserProfileComponent, selector: "td-user-profile", inputs: { name: "name", email: "email" }, ngImport: i0, template: "<button mat-icon-button [matMenuTriggerFor]=\"accountMenu\">\n  <mat-icon>person</mat-icon>\n</button>\n\n<mat-menu #accountMenu=\"matMenu\" [overlapTrigger]=\"false\">\n  <td-user-profile-menu [name]=\"name\" [email]=\"email\">\n    <ng-content select=\"[td-user-info-list]\" td-user-info-list></ng-content>\n    <ng-content select=\"[td-user-action-list]\" td-user-action-list></ng-content>\n  </td-user-profile-menu>\n</mat-menu>\n", dependencies: [{ kind: "component", type: i1$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: TdUserProfileMenuComponent, selector: "td-user-profile-menu", inputs: ["email", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TdUserProfileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdUserProfileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'td-user-profile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button mat-icon-button [matMenuTriggerFor]=\"accountMenu\">\n  <mat-icon>person</mat-icon>\n</button>\n\n<mat-menu #accountMenu=\"matMenu\" [overlapTrigger]=\"false\">\n  <td-user-profile-menu [name]=\"name\" [email]=\"email\">\n    <ng-content select=\"[td-user-info-list]\" td-user-info-list></ng-content>\n    <ng-content select=\"[td-user-action-list]\" td-user-action-list></ng-content>\n  </td-user-profile-menu>\n</mat-menu>\n" }]
         }], propDecorators: { name: [{
@@ -48,21 +48,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
             }] } });
 
 class CovalentUserProfileModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: CovalentUserProfileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.4", ngImport: i0, type: CovalentUserProfileModule, declarations: [TdUserProfileComponent, TdUserProfileMenuComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentUserProfileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: CovalentUserProfileModule, declarations: [TdUserProfileComponent, TdUserProfileMenuComponent], imports: [CommonModule,
             MatMenuModule,
             MatIconModule,
             MatButtonModule,
             MatListModule,
             CovalentMenuModule], exports: [TdUserProfileComponent, TdUserProfileMenuComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: CovalentUserProfileModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentUserProfileModule, imports: [CommonModule,
             MatMenuModule,
             MatIconModule,
             MatButtonModule,
             MatListModule,
             CovalentMenuModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: CovalentUserProfileModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentUserProfileModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TdUserProfileComponent, TdUserProfileMenuComponent],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@covalent/core",
-  "version": "8.1.0-beta.6",
+  "version": "8.1.0-beta.7",
   "exports": {
     ".": {
       "sass": "./theming/_all-theme.scss",
@@ -107,7 +107,7 @@
     "@angular/router": "17.x.x",
     "@angular/cdk": "17.x.x",
     "@angular/material": "17.x.x",
-    "@covalent/core": "8.1.0-beta.6"
+    "@covalent/core": "8.1.0-beta.7"
   },
   "dependencies": {
     "tslib": "^2.0.0"

package/theming/_teradata-theme.scss

@@ -18,49 +18,65 @@ $td-light-colors: map-get($td-theme-light, 'colors');
 // Add contrast for angular palette
 $td-digital-blue-light: map-merge(
   (
+    '200': map-get($td-light-palettes, 'digital blue 20'),
     '30': map-get($td-light-palettes, 'digital blue 30'),
+    '300': map-get($td-light-palettes, 'digital blue 30'),
     '40': map-get($td-light-palettes, 'digital blue 40'),
     '50': map-get($td-light-palettes, 'digital blue 50'),
     '500': map-get($td-light-palettes, 'digital blue 50'),
     '60': map-get($td-light-palettes, 'digital blue 60'),
+    '600': map-get($td-light-palettes, 'digital blue 60'),
     '70': map-get($td-light-palettes, 'digital blue 70'),
     '80': map-get($td-light-palettes, 'digital blue 80'),
     '90': map-get($td-light-palettes, 'digital blue 90'),
+    '900': map-get($td-light-palettes, 'digital blue 90'),
   ),
   (
     contrast: (
+      '20': $light-on-primary,
       '30': $light-on-primary,
+      '300': $light-on-primary,
       '40': $light-on-primary,
       '50': $light-on-primary,
       '500': $light-on-primary,
       '60': $light-on-primary,
+      '600': $light-on-primary,
       '70': $light-on-primary,
       '80': $light-on-primary,
       '90': $light-on-primary,
+      '900': $light-on-primary,
     ),
   )
 );
 $td-digital-blue-dark: map-merge(
   (
+    '200': map-get($td-dark-palettes, 'digital blue 20'),
     '30': map-get($td-dark-palettes, 'digital blue 30'),
+    '300': map-get($td-dark-palettes, 'digital blue 30'),
     '40': map-get($td-dark-palettes, 'digital blue 40'),
     '50': map-get($td-dark-palettes, 'digital blue 50'),
     '500': map-get($td-dark-palettes, 'digital blue 50'),
     '60': map-get($td-dark-palettes, 'digital blue 60'),
+    '600': map-get($td-dark-palettes, 'digital blue 60'),
     '70': map-get($td-dark-palettes, 'digital blue 70'),
     '80': map-get($td-dark-palettes, 'digital blue 80'),
     '90': map-get($td-dark-palettes, 'digital blue 90'),
+    '900': map-get($td-dark-palettes, 'digital blue 90'),
   ),
   (
     contrast: (
+      '200': $dark-on-primary,
       '30': $dark-on-primary,
+      '300': $dark-on-primary,
       '40': $dark-on-primary,
       '50': $dark-on-primary,
       '500': $dark-on-primary,
       '60': $dark-on-primary,
+      '600': $dark-on-primary,
       '70': $dark-on-primary,
       '80': $dark-on-primary,
       '90': $dark-on-primary,
+      '900': $dark-on-primary,
     ),
   )
 );
@@ -183,8 +199,8 @@ $td-warn-dark: $td-warn-dark;
 // Background palette for light themes.
 // todo: need to re-catalog used variables
 $td-light-theme-background: (
-  status-bar: $theme-light-colors-surface-container,
-  app-bar: $light-surface,
+  status-bar: $theme-light-colors-surface-container-lowest,
+  app-bar: $theme-light-colors-surface-container-low,
   background: $theme-light-colors-surface,
   canvas: $light-surface-canvas,
   card: $theme-light-colors-surface-container
@@ -383,7 +399,7 @@ $td-dark-theme: mat.private-deep-merge-all(
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
+  $background: map-get(map-get($theme, color), background);
   $foreground: map-get($theme, foreground);
   $is-dark-theme: map-get($theme, is-dark);
   $accent-highlight: map-get($background, accent-highlight);
@@ -395,6 +411,13 @@ $td-dark-theme: mat.private-deep-merge-all(
     --mat-toolbar-container-text-color: #{$on-primary};
   }
 
+  :root {
+    --mdc-list-list-item-leading-avatar-color: #{map-get(
+        $background,
+        disabled-button
+      )};
+  }
+
   // Logo alignment
   .mat-icon.mat-icon-logo {
     fill: $teradata-orange-500;
@@ -404,18 +427,6 @@ $td-dark-theme: mat.private-deep-merge-all(
     @if $is-dark-theme {
       fill: #ffffff;
     }
-
-    // Logo + title alignment
-    & + .mat-title,
-    & + span {
-      position: relative;
-      top: 1px;
-      text-transform: uppercase;
-    }
-
-    & + .td-navigation-drawer-title {
-      top: 2px;
-    }
   }
   // Spacing before logo in main toolbar
   .mat-toolbar {
@@ -489,44 +500,14 @@ $td-dark-theme: mat.private-deep-merge-all(
     }
   }
 
-  td-layout-nav {
-    mat-toolbar {
-      z-index: 2;
-      @include mat-elevation(3);
-    }
-  }
-
-  // Active top nav
-  nav.docs-nav {
-    a {
-      line-height: 4;
-      display: block;
-      font-size: 1.1428em;
-      letter-spacing: 0.0764em;
-      position: relative;
-
-      &.active {
-        &::after {
-          content: '';
-          position: absolute;
-          height: 3px;
-          bottom: 0;
-          width: 100%;
-          background-color: mat-color($accent);
-          left: 0;
-        }
-      }
-    }
-  }
-
   // Active side nav
   .doc-nav a.doc-nav-link {
     &.active::before {
-      background-color: $accent-highlight;
+      background-color: mat-color($accent);
     }
     &:hover {
       &::before {
-        background-color: $accent-highlight-hover;
+        background-color: mat-color($accent);
       }
     }
   }