Merge pull request #1141 from scheduleonce/staging-app2

Merging staging-app2 in to master.

CHANGELOG.md

@@ -5,11 +5,27 @@ 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.6] - 2023-01-29
+## [8.0.10] - 2023-02-09
+
+- [ONCEHUB-77842](https://scheduleonce.atlassian.net/browse/ONCEHUB-77842) Fixed, on searching the option the focus should scroll to the focused potion.
+
+## [8.0.9] - 2023-02-09
+
+- [ONCEHUB-78061](https://scheduleonce.atlassian.net/browse/ONCEHUB-78061) Fixed the oui-scrollbar look is broken in Chrome 121
+
+## [8.0.8] - 2023-02-02
+
+- [ONCEHUB-60767](https://scheduleonce.atlassian.net/browse/ONCEHUB-77583) Add accessibility on oui-panel-icon
+
+## [8.0.7] - 2024-02-01
+
+- [ONCEHUB-77380](https://scheduleonce.atlassian.net/browse/ONCEHUB-77380) fixed vulnerability found in package vite
+
+## [8.0.6] - 2024-01-29
 
 - [ONCEHUB-60767](https://scheduleonce.atlassian.net/browse/ONCEHUB-60767) Fixed an padding issue in label in oui-tab
 
-## [8.0.5] - 2023-01-14
+## [8.0.5] - 2024-01-14
 
 - [ONCEHUB-60767](https://scheduleonce.atlassian.net/browse/ONCEHUB-60767) Fixed an issue related to the spacing in oui-tab
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "oncehub-ui",
-  "version": "8.0.6",
+  "version": "8.0.10",
   "scripts": {
     "ng": "ng",
     "build": "ng build ui",
@@ -42,7 +42,7 @@
     "zone.js": "^0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.6",
+    "@angular-devkit/build-angular": "^16.2.12",
     "@angular-eslint/builder": "15.1.0",
     "@angular-eslint/eslint-plugin": "15.1.0",
     "@angular-eslint/eslint-plugin-template": "15.1.0",

ui/package.json

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

ui/src/components/core/option/option.ts

@@ -200,6 +200,18 @@ export class OuiOption implements AfterViewChecked, OnDestroy {
   setActiveStyles(): void {
     if (!this._active) {
       this._active = true;
+      setTimeout((_) => {
+        const focusedElement = document.querySelector(
+          '.oui-active'
+        ) as HTMLElement;
+        const multiSelect = document.querySelector(
+          '.oui-option-pseudo-checkbox'
+        ) as HTMLElement;
+        const ouiSearch = document.querySelector('.oui-select-search-input');
+        if (focusedElement && !multiSelect && !ouiSearch) {
+          focusedElement?.focus();
+        }
+      });
       this._changeDetectorRef.markForCheck();
     }
   }

ui/src/components/panel/panel.ts

@@ -162,7 +162,7 @@ export class OuiPanel implements OnInit, OuiPanelOverlay {
 @Component({
   selector: 'oui-panel-icon',
   template:
-    '<oui-icon svgIcon="panel-icon" class="oui-panel-icon" [tabIndex]="tabIndex"></oui-icon>',
+    '<oui-icon svgIcon="panel-icon" class="oui-panel-icon" [tabIndex]="-1"></oui-icon>',
   styleUrls: ['panel.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -179,6 +179,7 @@ export class OuiPanelIcon implements OnDestroy {
     private _ngZone: NgZone,
     @Attribute('tabindex') tabIndex: string
   ) {
+    this._elementRef.nativeElement.setAttribute('tabindex', '0');
     this.tabIndex = parseInt(tabIndex, 10) || 0;
     this._monitorSubscription = this._focusMonitor
       .monitor(this._elementRef, true)

ui/src/components/scrollbar/scrollbar.scss

@@ -1,23 +1,30 @@
-.oui-scrollbar-container::-webkit-scrollbar {
-  width: 10px;
-}
-.oui-scrollbar-container::-webkit-scrollbar-track {
-  display: none;
-}
-.oui-scrollbar-container::-webkit-scrollbar-thumb {
-  background-color: #ccc !important;
-  border: 2px #fff solid;
-  border-radius: 15px;
-}
-.oui-scrollbar-container-large::-webkit-scrollbar {
-  width: 16px;
+.oui-scrollbar-container {
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+  &::-webkit-scrollbar-track {
+    display: none;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #ccc !important;
+    border: 2px #fff solid;
+    border-radius: 15px;
+  }
 }
-.oui-scrollbar-container-large::-webkit-scrollbar-thumb {
-  border: 4px #fff solid !important;
+.oui-scrollbar-container-large {
+  &::-webkit-scrollbar {
+    width: 16px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border: 4px #fff solid !important;
+  }
 }
 
 .oui-scrollbar-container {
-  overflow-y: auto;
-  scrollbar-color: #ccc transparent;
-  scrollbar-width: thin;
+  /* Standardized Properties */
+  @supports not selector(::-webkit-scrollbar) {
+    scrollbar-color: #ccc transparent;
+    scrollbar-width: thin;
+  }
 }