diff --git a/CHANGELOG.md b/CHANGELOG.md index 73847c65a..ecee8c33c 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/package-lock.json b/package-lock.json index d7eb2b9e5..96aabc9d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "oncehub-ui", - "version": "8.0.26", + "version": "8.0.28", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "oncehub-ui", - "version": "8.0.26", + "version": "8.0.28", "dependencies": { "@angular-devkit/architect": "0.1601.6", "@angular-devkit/core": "16.1.6", diff --git a/package.json b/package.json index 9de084dbe..9d0ae8fea 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "oncehub-ui", - "version": "8.0.26", + "version": "8.0.28", "scripts": { "ng": "ng", "build": "ng build ui", diff --git a/ui/package-lock.json b/ui/package-lock.json index 9153a8965..f074b15e2 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -1,12 +1,12 @@ { "name": "@oncehub/ui", - "version": "8.0.26", + "version": "8.0.28", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@oncehub/ui", - "version": "8.0.26", + "version": "8.0.28", "dependencies": { "tslib": "^2.4.0" } diff --git a/ui/package.json b/ui/package.json index 3b27eec6b..aa48dcd39 100644 --- a/ui/package.json +++ b/ui/package.json @@ -1,6 +1,6 @@ { "name": "@oncehub/ui", - "version": "8.0.26", + "version": "8.0.28", "description": "Oncehub UI", "peerDependencies": {}, "repository": { diff --git a/ui/src/components/select/select.component.ts b/ui/src/components/select/select.component.ts index 7aa4dd3aa..1daa1f6b5 100644 --- a/ui/src/components/select/select.component.ts +++ b/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 = new EventEmitter(); + /** Can pass any method to be triggered on singleActionItem click. */ + @Output() + readonly singleSelectionChange = new EventEmitter(); + /** All of the defined groups of options. */ @ContentChildren(OuiOptgroup) optionGroups: QueryList; @@ -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( diff --git a/ui/src/components/select/select.html b/ui/src/components/select/select.html index 65875fe3e..3ec82e0c7 100644 --- a/ui/src/components/select/select.html +++ b/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" >
+
+
+ +
+