diff --git a/lib/content-services/src/lib/search/components/search-control.component.spec.ts b/lib/content-services/src/lib/search/components/search-control.component.spec.ts index 7b0fe22190..28949937f9 100644 --- a/lib/content-services/src/lib/search/components/search-control.component.spec.ts +++ b/lib/content-services/src/lib/search/components/search-control.component.spec.ts @@ -415,13 +415,13 @@ describe('SearchControlComponent', () => { it('should have positive transform translation', () => { userPreferencesService.setWithoutStore('textOrientation', 'ltr'); fixture.detectChanges(); - expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(95%)'); + expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(85%)'); }); it('should have negative transform translation ', () => { userPreferencesService.setWithoutStore('textOrientation', 'rtl'); fixture.detectChanges(); - expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(-95%)'); + expect(component.searchTextInput.subscriptAnimationState.params.transform).toBe('translateX(-85%)'); }); }); }); diff --git a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss index 74642ea88d..9a4a266f3a 100644 --- a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss +++ b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss @@ -25,11 +25,16 @@ flex: 0 0; } - /* stylelint-disable-next-line selector-class-pattern */ #{$mat-drawer-content} { @include flex-column; position: unset; overflow: auto; } + + .adf-layout-container-sidenav { + #{$mat-icon} { + vertical-align: sub; + } + } } diff --git a/lib/core/src/lib/search-text/search-text-input.component.scss b/lib/core/src/lib/search-text/search-text-input.component.scss index 3d6444ab9a..da8727db4b 100644 --- a/lib/core/src/lib/search-text/search-text-input.component.scss +++ b/lib/core/src/lib/search-text/search-text-input.component.scss @@ -1,32 +1,31 @@ @import 'styles/mat-selectors'; -.adf-search-container:has(.adf-input-form-field-divider) { - overflow: hidden; -} - -.adf-search-button { - left: -13px; -} - -[dir='rtl'] .adf-search-button { - right: -13px; -} - -[dir='ltr'] .adf-search-button { - left: -13px; -} - -.adf { - &-search-fixed-text { - line-height: normal; +.adf-search-container { + &:has(.adf-input-form-field-divider) { + overflow: hidden; } - &-clear-search-button { - font-size: var(--theme-button-font-size); - cursor: pointer; + #{$mat-form-field-subscript-wrapper} { + display: none; + } + + .adf-search-container-transition { + display: flex; + align-items: center; + } + + .adf { + &-search-fixed-text { + line-height: normal; + } + + &-clear-search-button { + font-size: var(--theme-button-font-size); + cursor: pointer; + } + } + + .adf-highlight { + color: var(--adf-theme-primary-900); } } - -.adf-highlight { - color: var(--adf-theme-primary-900); -} diff --git a/lib/core/src/lib/search-text/search-text-input.component.spec.ts b/lib/core/src/lib/search-text/search-text-input.component.spec.ts index fba1188957..57ca2ea786 100644 --- a/lib/core/src/lib/search-text/search-text-input.component.spec.ts +++ b/lib/core/src/lib/search-text/search-text-input.component.spec.ts @@ -65,7 +65,7 @@ describe('SearchTextInputComponent', () => { component.expandable = false; }); - it('search button should be hide', () => { + it('search button should be hidden', () => { fixture.detectChanges(); const searchButton: any = element.querySelector('#adf-search-button'); expect(searchButton).toBe(null); @@ -79,12 +79,15 @@ describe('SearchTextInputComponent', () => { }); describe('search button', () => { - it('should NOT display a autocomplete list control when configured not to', fakeAsync(() => { + let searchButton: DebugElement; + beforeEach(fakeAsync(() => { fixture.detectChanges(); - tick(100); - const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button')); + searchButton = debugElement.query(By.css('#adf-search-button')); + })); + + it('should NOT display a autocomplete list control when configured not to', fakeAsync(() => { component.subscriptAnimationState.value = 'active'; fixture.detectChanges(); @@ -104,11 +107,6 @@ describe('SearchTextInputComponent', () => { })); it('click on the search button should open the input box when is close', fakeAsync(() => { - fixture.detectChanges(); - - tick(100); - - const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button')); searchButton.triggerEventHandler('click', null); tick(100); @@ -121,11 +119,6 @@ describe('SearchTextInputComponent', () => { })); it('Search button should not change the input state too often', fakeAsync(() => { - fixture.detectChanges(); - - tick(100); - - const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button')); component.subscriptAnimationState.value = 'active'; fixture.detectChanges(); @@ -150,10 +143,6 @@ describe('SearchTextInputComponent', () => { })); it('Search bar should close when user press ESC button', fakeAsync(() => { - fixture.detectChanges(); - - tick(100); - const inputDebugElement = debugElement.query(By.css('#adf-control-input')); component.subscriptAnimationState.value = 'active'; fixture.detectChanges(); @@ -179,66 +168,59 @@ describe('SearchTextInputComponent', () => { fixture.detectChanges(); }); + /** + * function which finds Search Button and clicks it + */ + function clickSearchButton(): void { + fixture.detectChanges(); + const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button')); + searchButton.triggerEventHandler('click', null); + tick(100); + fixture.detectChanges(); + tick(100); + } + + /** + * Runs a test for ltr/rtl margin values + * + * @param isLtr sets ltr or rtl value to test + */ + function testMarginValue(isLtr: boolean): void { + userPreferencesService.setWithoutStore('textOrientation', isLtr ? 'ltr' : 'rtl'); + clickSearchButton(); + const expectedResult = isLtr ? { 'margin-left': 13 } : { 'margin-right': 13 }; + expect(component.subscriptAnimationState.params).toEqual(expectedResult); + discardPeriodicTasks(); + } + it('should have margin-left set when active and direction is ltr', fakeAsync(() => { - userPreferencesService.setWithoutStore('textOrientation', 'ltr'); - fixture.detectChanges(); - - const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button')); - - searchButton.triggerEventHandler('click', null); - tick(100); - fixture.detectChanges(); - tick(100); - - expect(component.subscriptAnimationState.params).toEqual({ 'margin-left': 13 }); - discardPeriodicTasks(); - })); - - it('should have positive transform translateX set when inactive and direction is ltr', fakeAsync(() => { - userPreferencesService.setWithoutStore('textOrientation', 'ltr'); - component.subscriptAnimationState.value = 'active'; - - fixture.detectChanges(); - const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button')); - - searchButton.triggerEventHandler('click', null); - tick(100); - fixture.detectChanges(); - tick(100); - - expect(component.subscriptAnimationState.params).toEqual({ transform: 'translateX(95%)' }); - discardPeriodicTasks(); + testMarginValue(true); })); it('should have margin-right set when active and direction is rtl', fakeAsync(() => { - userPreferencesService.setWithoutStore('textOrientation', 'rtl'); - fixture.detectChanges(); + testMarginValue(false); + })); - const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button')); - - searchButton.triggerEventHandler('click', null); - tick(100); - fixture.detectChanges(); - tick(100); - - expect(component.subscriptAnimationState.params).toEqual({ 'margin-right': 13 }); + /** + * Runs a test for ltr/rtl transform values + * + * @param isLtr sets ltr or rtl value to test + */ + function testTransformValue(isLtr: boolean): void { + userPreferencesService.setWithoutStore('textOrientation', isLtr ? 'ltr' : 'rtl'); + component.subscriptAnimationState.value = 'active'; + clickSearchButton(); + const expectedValue = isLtr ? 'translateX(85%)' : 'translateX(-85%)'; + expect(component.subscriptAnimationState.params).toEqual({ transform: expectedValue }); discardPeriodicTasks(); + } + + it('should have positive transform translateX set when inactive and direction is ltr', fakeAsync(() => { + testTransformValue(true); })); it('should have negative transform translateX set when inactive and direction is rtl', fakeAsync(() => { - userPreferencesService.setWithoutStore('textOrientation', 'rtl'); - component.subscriptAnimationState.value = 'active'; - - fixture.detectChanges(); - const searchButton: DebugElement = debugElement.query(By.css('#adf-search-button')); - - searchButton.triggerEventHandler('click', null); - tick(100); - fixture.detectChanges(); - tick(100); - - expect(component.subscriptAnimationState.params).toEqual({ transform: 'translateX(-95%)' }); - discardPeriodicTasks(); + testTransformValue(false); })); it('should set browser autocomplete to on when configured', async () => { diff --git a/lib/core/src/lib/search-text/search-text-input.component.ts b/lib/core/src/lib/search-text/search-text-input.component.ts index 5ffbf82fd1..37ed141cf2 100644 --- a/lib/core/src/lib/search-text/search-text-input.component.ts +++ b/lib/core/src/lib/search-text/search-text-input.component.ts @@ -143,11 +143,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy { animationStates: SearchAnimationDirection = { ltr: { active: { value: 'active', params: { 'margin-left': 13 } }, - inactive: { value: 'inactive', params: { transform: 'translateX(95%)' } } + inactive: { value: 'inactive', params: { transform: 'translateX(85%)' } } }, rtl: { active: { value: 'active', params: { 'margin-right': 13 } }, - inactive: { value: 'inactive', params: { transform: 'translateX(-95%)' } } + inactive: { value: 'inactive', params: { transform: 'translateX(-85%)' } } } }; @@ -201,11 +201,11 @@ export class SearchTextInputComponent implements OnInit, OnDestroy { if (this.dir === 'ltr') { return this.subscriptAnimationState.value === 'inactive' ? { value: 'active', params: { 'margin-left': 13 } } - : { value: 'inactive', params: { transform: 'translateX(95%)' } }; + : { value: 'inactive', params: { transform: 'translateX(85%)' } }; } else { return this.subscriptAnimationState.value === 'inactive' ? { value: 'active', params: { 'margin-right': 13 } } - : { value: 'inactive', params: { transform: 'translateX(-95%)' } }; + : { value: 'inactive', params: { transform: 'translateX(-85%)' } }; } }