Merge pull request #1244 from scheduleonce/staging-app2

Merging staging-app2 in to master.

CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [8.0.28] - 2024-07-25
+
+- [ONCEHUB-85443](https://scheduleonce.atlassian.net/browse/ONCEHUB-85443) fix: Tabs stretch issue.
+
+## [8.0.27] - 2024-07-18
+
+- [ONCEHUB-83190](https://scheduleonce.atlassian.net/browse/ONCEHUB-83190) Feat: Create singleActionItem bar for singleSelect and multiSelect.
+
+## [8.0.26] - 2024-07-17
+
+- [ONCEHUB-84773](https://scheduleonce.atlassian.net/browse/ONCEHUB-84773) fix: Tabs ui design-shared oui component- fix the color of the not selected.
+
 ## [8.0.25] - 2024-07-08
 
 - [ONCEHUB-82598](https://scheduleonce.atlassian.net/browse/ONCEHUB-82598) fix: Occasionally, when hovering over elements that contain ouiToolTips, an unusual box appears.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "oncehub-ui",
-  "version": "8.0.26",
+  "version": "8.0.28",
   "scripts": {
     "ng": "ng",
     "build": "ng build ui",

ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oncehub/ui",
-  "version": "8.0.26",
+  "version": "8.0.28",
   "description": "Oncehub UI",
   "peerDependencies": {},
   "repository": {

ui/src/components/select/select.component.ts

@@ -229,6 +229,7 @@ export class OuiSelect
 
   /** Whether filling out the select is required in the form. */
   private _actionItems = false;
+  private _singleActionItems = false;
 
   /** The scroll position of the overlay panel, calculated to center the selected option. */
   private _scrollTop = 0;
@@ -242,6 +243,9 @@ export class OuiSelect
   /** The label displayed on the done button of the select in case of multi-select. */
   private _doneLabel = 'Done';
 
+  /** The label displayed on the singleSelect and multiSelect of the select as a actionItem. */
+  private _singleActionLabel = 'New action button';
+
   /** Whether the component is in multiple selection mode. */
   private _multiple = false;
 
@@ -328,6 +332,9 @@ export class OuiSelect
   /** Trigger that opens the select. */
   @ViewChild('ddDoneButton', { read: ElementRef }) ddDoneButton: ElementRef;
 
+  /** Trigger that opens the select. */
+  @ViewChild('singleButton', { read: ElementRef }) singleButton: ElementRef;
+
   /** Panel containing the select options. */
   @ViewChild('panel', { read: ElementRef }) panel: ElementRef;
 
@@ -424,6 +431,10 @@ export class OuiSelect
   readonly saveSelectionChange: EventEmitter<OuiSelectChange> =
     new EventEmitter<OuiSelectChange>();
 
+  /** Can pass any method to be triggered on singleActionItem click. */
+  @Output()
+  readonly singleSelectionChange = new EventEmitter<void>();
+
   /** All of the defined groups of options. */
   @ContentChildren(OuiOptgroup) optionGroups: QueryList<OuiOptgroup>;
 
@@ -490,6 +501,16 @@ export class OuiSelect
     this.stateChanges.next();
   }
 
+  /** In case of singleSelect and multiSelect the singleActionLabel to be shown on actionItem. */
+  @Input()
+  get singleActionLabel(): string {
+    return this._singleActionLabel;
+  }
+  set singleActionLabel(value: string) {
+    this._singleActionLabel = value;
+    this.stateChanges.next();
+  }
+
   /** Whether the component is required. */
   @Input()
   get required(): boolean {
@@ -534,6 +555,15 @@ export class OuiSelect
     }
   }
 
+  @Input()
+  get singleActionItem(): boolean {
+    return this._singleActionItems;
+  }
+  set singleActionItem(value: boolean) {
+    this._singleActionItems = coerceBooleanProperty(value);
+    this.stateChanges.next();
+  }
+
   /** Whether to center the active option over the trigger. */
   @Input()
   get disableOptionCentering(): boolean {
@@ -854,12 +884,29 @@ export class OuiSelect
     }
   }
 
+  /** On Tab key press select the buttons at the bottom if singleActionItem is enabled*/
+  singleTabKeySelection(singleButtonFocused) {
+    const singleButtonRef = this.singleButton
+      ?.nativeElement as HTMLButtonElement;
+    const searchQueryString = '.oui-select-search-input';
+    const searchInput = this._document.querySelector(searchQueryString);
+    if (!singleButtonFocused) {
+      setTimeout(() => {
+        singleButtonRef.focus();
+      });
+    } else if (this.isSearchFieldPresent && singleButtonFocused) {
+      searchInput.focus();
+    } else {
+      this.close();
+    }
+  }
+
   /** On Tab key press select the buttons at the bottom if actionItems is enabled and searchbar*/
   private tabKeySelection(focused: boolean, doneDisabled: boolean): void {
     const searchQueryString = '.oui-select-search-input';
     const searchInput = this._document.querySelector(searchQueryString);
-    const doneButtonRef = this.ddDoneButton.nativeElement;
-    const cancelButtonRef = this.ddCancelButton.nativeElement;
+    const doneButtonRef = this.ddDoneButton?.nativeElement;
+    const cancelButtonRef = this.ddCancelButton?.nativeElement;
     if (!focused) {
       if (!doneDisabled && !doneButtonRef.classList.contains('cdk-focused')) {
         doneButtonRef.focus();
@@ -895,12 +942,23 @@ export class OuiSelect
     const doneDisabled: boolean = this.ddDoneButton?.nativeElement['disabled'];
     const cancelFocused: boolean =
       this.ddCancelButton?.nativeElement.classList.contains('cdk-focused');
+    const singleButtonFocused: boolean =
+      this.singleButton?.nativeElement.classList.contains('cdk-focused');
     if (isTabKey) {
       if (this.multiple) {
         event.preventDefault();
         event.stopPropagation();
         manager.setActiveItem(-1);
-        this.tabKeySelection(cancelFocused, doneDisabled);
+        if (this.actionItems) {
+          this.tabKeySelection(cancelFocused, doneDisabled);
+        } else if (this.singleActionItem) {
+          this.singleTabKeySelection(singleButtonFocused);
+        }
+      } else if (!this.multiple && this.singleActionItem) {
+        event.preventDefault();
+        event.stopPropagation();
+        manager.setActiveItem(-1);
+        this.singleTabKeySelection(singleButtonFocused);
       } else {
         this.close();
       }
@@ -1153,8 +1211,10 @@ export class OuiSelect
     this._keyManager.tabOut.pipe(takeUntil(this._destroy)).subscribe(() => {
       // Restore focus to the trigger before closing. Ensures that the focus
       // position won't be lost if the user got focus into the overlay.
-      this.focus();
-      this.close();
+      if (!this.singleActionItem) {
+        this.focus();
+        this.close();
+      }
     });
 
     this._keyManager.change.pipe(takeUntil(this._destroy)).subscribe(() => {
@@ -1249,6 +1309,11 @@ export class OuiSelect
     this.close();
   }
 
+  handleSingleActionItemClick() {
+    this.singleSelectionChange.emit();
+    this.close();
+  }
+
   /** Determine whether the "Done" button should be enabled or disabled based on the selection state */
   private _isDoneButtonDisabled(): boolean {
     const selectedItems = (this.selected as OuiOption[]).map(

ui/src/components/select/select.html

@@ -49,12 +49,24 @@
     [class.oui-select-has-a-panel]="panelClass"
     [class.oui-select-large]="large"
     [class.action-item]="actionItems"
+    [class.single-action-item]="singleActionItem"
   >
     <div class="oui-select-options">
       <div class="oui-select-options-wrapper">
         <ng-content></ng-content>
       </div>
     </div>
+    <div *ngIf="singleActionItem" class="oui-select-action-wrapper">
+      <div class="oui-select-action-items single-action-items">
+        <button
+          #singleButton
+          oui-link-button
+          (click)="handleSingleActionItemClick()"
+        >
+          {{singleActionLabel}}
+        </button>
+      </div>
+    </div>
     <div *ngIf="actionItems" class="oui-select-action-wrapper">
       <div class="oui-select-action-items">
         <button

ui/src/components/select/select.scss

@@ -135,10 +135,11 @@ $gray-color: #eee;
   }
   &.oui-select-input-outer {
     .oui-select-options {
-      padding-top: 0;
+      padding-top: 0px;
     }
   }
-  &.action-item {
+  &.action-item,
+  &.single-action-item {
     padding-bottom: 56px;
   }
   .oui-option {
@@ -354,4 +355,22 @@ oui-select-search {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  &.single-action-items {
+    padding: 10px 0px !important;
+    button {
+      width: 100%;
+      padding: 0px 10px !important;
+      text-align: left;
+      font-size: 14px;
+      color: #333333 !important;
+      border-radius: 0px;
+      line-height: 40px;
+      &:hover,
+      &:focus {
+        background-color: #eeeeee;
+        box-shadow: none !important;
+        text-decoration: none !important;
+      }
+    }
+  }
 }

ui/src/components/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -23,3 +23,12 @@
 .oui-mdc-tab-nav-bar[oui-align-tabs='end'] {
   justify-content: flex-end;
 }
+
+.oui-mdc-tab-nav-bar[oui-stretch-tabs] {
+  .oui-mdc-tab-links {
+    display: flex;
+  }
+  .oui-mdc-tab-link-container {
+    width: 100%;
+  }
+}