Merge pull request #1168 from scheduleonce/staging-app2

Merging staging-app2 in to master.
scheduleonce · Apr 12, 2024 · b162a9d · b162a9d
2 parents da203e7 + 99a1a4e
commit b162a9d
Show file tree

Hide file tree

Showing 14 changed files with 150 additions and 66 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "oncehub-ui",
-  "version": "8.0.13",
+  "version": "8.0.14",
   "scripts": {
     "ng": "ng",
     "build": "ng build ui",

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oncehub/ui",
-  "version": "8.0.13",
+  "version": "8.0.14",
   "description": "Oncehub UI",
   "peerDependencies": {},
   "repository": {

diff --git a/ui/src/components/tabs/_tabs-common.scss b/ui/src/components/tabs/_tabs-common.scss
@@ -16,15 +16,17 @@ $oui-tab-animation-duration: 500ms !default;
 }
 .oui-tab {
   &.oui-primary {
-    .mdc-tab-indicator--active .mdc-tab-indicator__content {
+    .mdc-tab-indicator--active .mdc-tab-indicator__content,
+    .oui-mdc-focus-indicator .mdc-tab-indicator__content {
       border-color: #006bb1;
     }
   }
 }
 .chatonce {
   .oui-tab {
     &.oui-primary {
-      .mdc-tab-indicator--active .mdc-tab-indicator__content {
+      .mdc-tab-indicator--active .mdc-tab-indicator__content,
+      .oui-mdc-focus-indicator .mdc-tab-indicator__content {
         border-color: #b731a9;
       }
     }
@@ -33,7 +35,8 @@ $oui-tab-animation-duration: 500ms !default;
 .inviteonce {
   .oui-tab {
     &.oui-primary {
-      .mdc-tab-indicator--active .mdc-tab-indicator__content {
+      .mdc-tab-indicator--active .mdc-tab-indicator__content,
+      .oui-mdc-focus-indicator .mdc-tab-indicator__content {
         border-color: #197439;
       }
     }
@@ -155,6 +158,7 @@ $oui-tab-animation-duration: 500ms !default;
     min-height: 48px;
     padding-top: 0;
     border-bottom: 1px solid #c8c8c8;
+    justify-content: center;
   }
 
   .mdc-tab-indicator .mdc-tab-indicator__content {
@@ -253,7 +257,8 @@ $oui-tab-animation-duration: 500ms !default;
     transition: 250ms transform cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-  .mdc-tab-indicator--active .mdc-tab-indicator__content {
+  .mdc-tab-indicator--active .mdc-tab-indicator__content,
+  .oui-mdc-tab-link.active .mdc-tab-indicator__content {
     opacity: 1;
   }
 
@@ -265,6 +270,19 @@ $oui-tab-animation-duration: 500ms !default;
       transition: none;
     }
   }
+  .oui-mdc-tab-group-stretch-tabs {
+    .oui-mdc-tab-list {
+      width: 100%;
+    }
+    .oui-mdc-tab.mdc-tab {
+      &:first-child {
+        margin-left: 0;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
 
   // The `span` is in the selector in order to increase the specificity, ensuring
   // that it's always higher than the selector that declares the transition.
@@ -295,13 +313,23 @@ $oui-tab-animation-duration: 500ms !default;
 
 .oui-tab
   .oui-tab-labels-container
-  .cdk-focused:not(.mdc-tab--active)
+  .cdk-keyboard-focused:not(.mdc-tab--active)
   .mdc-tab-indicator
   .mdc-tab-indicator__content,
 .oui-tab
   .oui-tab-labels-container
   .oui-mdc-tab:hover:not(.mdc-tab--active)
   .mdc-tab-indicator
+  .mdc-tab-indicator__content,
+.oui-tab
+  .oui-mdc-tab-link-container
+  .oui-mdc-tab-link:hover:not(.active)
+  .mdc-tab-indicator
+  .mdc-tab-indicator__content,
+.oui-tab
+  .oui-mdc-tab-link-container
+  .cdk-keyboard-focused:not(.active)
+  .mdc-tab-indicator
   .mdc-tab-indicator__content {
   border-color: #666;
   opacity: 1;

diff --git a/ui/src/components/tabs/_tabs-theme.scss b/ui/src/components/tabs/_tabs-theme.scss
@@ -15,17 +15,13 @@
   $warn: map-get($theme, warn);
   $border-color: map-get($theme, background);
   &.oui-primary {
-    .mdc-tab-indicator--active {
+    .mdc-tab-indicator--active,
+    .oui-mdc-tab-link.active {
       border-color: map-get($primary, default);
       .mdc-tab-indicator__content--underline {
         border-color: map-get($primary, default);
       }
     }
-    &:hover,
-    &[class^='cdk'],
-    &.cdk-keyboard-focused {
-      border-color: map-get($primary, darker);
-    }
   }
   &.oui-accent {
     border-color: map-get($accent, default);

diff --git a/ui/src/components/tabs/tab-group.html b/ui/src/components/tabs/tab-group.html
@@ -63,7 +63,7 @@
     [attr.aria-labelledby]="_getTabLabelId(i)"
     [class.oui-mdc-tab-body-active]="selectedIndex === i"
     [ngClass]="tab.bodyClass"
-    [content]="tab.givenText"
+    [content]="tab.contentWithin"
     [position]="tab.position!"
     [origin]="tab.origin"
     [animationDuration]="animationDuration"

diff --git a/ui/src/components/tabs/tab-group.ts b/ui/src/components/tabs/tab-group.ts
@@ -318,7 +318,7 @@ export class ouiTabGroup
     this.stretchTabs =
       defaultConfig && defaultConfig.stretchTabs != null
         ? defaultConfig.stretchTabs
-        : true;
+        : false;
   }
 
   /**
@@ -428,7 +428,7 @@ export class ouiTabGroup
     // Since we use a query with `descendants: true` to pick up the tabs, we may end up catching
     // some that are inside of nested tab groups. We filter them out manually by checking that
     // the closest group to the tab is the current one.
-    this.getHTMLText = this._allTabs['_results'][0].givenText;
+    this.getHTMLText = this._allTabs['_results'][0].contentWithin;
     this.updatedTabHTML = this.getHTMLText;
     this._allTabs.changes
       .pipe(startWith(this._allTabs))
@@ -490,7 +490,7 @@ export class ouiTabGroup
     event.index = index;
     if (this._tabs && this._tabs.length) {
       event.tab = this._tabs.toArray()[index];
-      this.updatedTabHTML = event.tab.givenText;
+      this.updatedTabHTML = event.tab.contentWithin;
     }
     return event;
   }

diff --git a/ui/src/components/tabs/tab-nav-bar/tab-link.scss b/ui/src/components/tabs/tab-nav-bar/tab-link.scss
@@ -16,9 +16,67 @@
     margin: 5px;
   }
 }
-
-// @media (variables.$xsmall) {
-//   .oui-mdc-tab-link {
-//     min-width: 72px;
-//   }
-// }
+.oui-mdc-tab-nav-bar {
+  display: flex;
+  a.oui-mdc-tab-link {
+    min-width: 90px;
+    justify-content: center;
+    box-sizing: border-box;
+    outline: none;
+    text-align: center;
+    white-space: nowrap;
+    margin: 0 5px;
+    cursor: pointer;
+    -webkit-appearance: none;
+    z-index: 1;
+    flex-grow: 0;
+    border: 1px solid transparent !important;
+    border-bottom: 0 !important;
+    padding: 19px 20px 10px;
+    display: inline-flex;
+    position: relative;
+    &.cdk-keyboard-focused {
+      border: 1px solid #006bb1 !important;
+      border-bottom: 0 !important;
+    }
+  }
+  .mdc-tab-indicator {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+    .mdc-tab-indicator__content--underline {
+      align-self: flex-end;
+      box-sizing: border-box;
+      width: 100%;
+      border-top-style: solid;
+    }
+  }
+  .mdc-tab__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: inherit;
+    pointer-events: none;
+    .mdc-tab__text-label {
+      transition: 0.15s color linear;
+      display: inline-block;
+      line-height: 1;
+      z-index: 2;
+      font-size: 16px;
+      line-height: 22px;
+      font-weight: 600;
+      color: #333;
+      display: inline-flex;
+      align-items: center;
+    }
+  }
+  .oui-mdc-tab-header-pagination {
+    display: none;
+  }
+}
diff --git a/ui/src/components/tabs/tab-nav-bar/tab-nav-bar.scss b/ui/src/components/tabs/tab-nav-bar/tab-nav-bar.scss
@@ -1,17 +1,18 @@
-// @use '../tabs-common';
+.oui-mdc-tab-header {
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 0;
+  min-height: 48px;
+  padding-top: 0;
+  border-bottom: 1px solid #c8c8c8;
+  justify-content: center;
+}
+.mdc-tab-indicator__content {
+  transform-origin: left;
+  opacity: 0;
+}
 
-// @include tabs-common.structural-styles;
-// @include tabs-common.paginated-tab-header;
-
-// .oui-mdc-tab-links {
-//   @include tabs-common.paginated-tab-header-item-wrapper('.oui-mdc-tab-link-container');
-// }
-
-// .oui-mdc-tab-link-container {
-//   @include tabs-common.paginated-tab-header-container;
-// }
-
-// .oui-mdc-tab-nav-bar {
-//   @include tabs-common.paginated-tab-header-with-background('.oui-mdc-tab-link-container',
-//     '.oui-mdc-tab-link');
-// }
+.oui-mdc-tab-link.active .mdc-tab-indicator__content {
+  opacity: 1;
+}
diff --git a/ui/src/components/tabs/tab-nav-bar/tab-nav-bar.ts b/ui/src/components/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -50,7 +50,7 @@ import { startWith, takeUntil } from 'rxjs/operators';
 import { ENTER, SPACE } from '@angular/cdk/keycodes';
 import { OUI_TABS_CONFIG, OuiTabsConfig } from '../tab-config';
 import { OuiPaginatedTabHeader } from '../paginated-tab-header';
-import { isDevMode } from '@angular/core';
+// import { isDevMode } from '@angular/core';
 
 // Increasing integer for generating unique ids for tab nav components.
 let nextUniqueId = 0;
@@ -70,14 +70,14 @@ let nextUniqueId = 0;
   // eslint-disable-next-line @angular-eslint/no-host-metadata-property
   host: {
     '[attr.role]': '_getRole()',
-    class: 'oui-mdc-tab-nav-bar oui-mdc-tab-header',
+    class: 'oui-mdc-tab-nav-bar oui-mdc-tab-header oui-tab',
     '[class.oui-mdc-tab-header-pagination-controls-enabled]':
       '_showPaginationControls',
     '[class.oui-mdc-tab-header-rtl]': "_getLayoutDirection() == 'rtl'",
     '[class.oui-mdc-tab-nav-bar-stretch-tabs]': 'stretchTabs',
-    '[class.mat-primary]': 'color !== "warn" && color !== "accent"',
-    '[class.mat-accent]': 'color === "accent"',
-    '[class.mat-warn]': 'color === "warn"',
+    '[class.oui-primary]': 'color !== "warn" && color !== "accent"',
+    '[class.oui-accent]': 'color === "accent"',
+    '[class.oui-warn]': 'color === "warn"',
     '[class._oui-animation-noopable]': '_animationMode === "NoopAnimations"',
     '[style.--oui-tab-animation-duration]': 'animationDuration',
   },
@@ -163,7 +163,7 @@ export class OuiTabNav
   private _disableRipple = false;
 
   /** Theme color of the nav bar. */
-  @Input() color: ThemePalette = 'accent';
+  @Input() color: ThemePalette = 'primary';
 
   /**
    * Associated tab panel controlled by the nav bar. If not provided, then the nav bar
@@ -231,13 +231,6 @@ export class OuiTabNav
     super.ngAfterContentInit();
   }
 
-  override ngAfterViewInit() {
-    if (!this.tabPanel && (typeof isDevMode === 'undefined' || isDevMode)) {
-      throw new Error('A oui-tab-nav-panel must be specified via [tabPanel].');
-    }
-    super.ngAfterViewInit();
-  }
-
   /** Notifies the component that the active link has been changed. */
   updateActiveLink() {
     if (!this._items) {
@@ -292,7 +285,14 @@ const _OuiTabLinkMixinBase = mixinInkBarItem(
   selector: '[oui-tab-link], [OuiTabLink]',
   exportAs: 'OuiTabLink',
   // eslint-disable-next-line
-  inputs: ['disabled', 'disableRipple', 'tabIndex', 'active', 'id'],
+  inputs: [
+    'disabled',
+    'disableRipple',
+    'tabIndex',
+    'active',
+    'id',
+    'routerLink',
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   templateUrl: 'tab-link.html',

diff --git a/ui/src/components/tabs/tab.html b/ui/src/components/tabs/tab.html
@@ -1,4 +1,4 @@
 <!-- Create a template for the content of the <oui-tab> so that we can grab a reference to this
     TemplateRef and use it in a Portal to render the tab content in the appropriate place in the
     tab-group. -->
-<ng-template><ng-content></ng-content></ng-template>
+<ng-content></ng-content>