Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified packages/components/autocomplete/__screenshots__/01-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/components/autocomplete/__screenshots__/01-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 4 additions & 17 deletions packages/components/core/option/_option-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,35 +25,25 @@
@include kbq-option(states-hover);
}

&.kbq-active:not(.kbq-disabled),
&:active:not(.kbq-disabled) {
@include kbq-option(states-active);
}

&.kbq-selected:not(.kbq-disabled) {
@include kbq-option(states-selected);

&.kbq-hovered,
&:hover {
@include kbq-option(states-selected-hover);
}

&.kbq-active,
&:active {
@include kbq-option(states-selected-active);
}
}

&.kbq-disabled {
@include kbq-option(states-disabled);
}

&:is(.kbq-selected, .kbq-focused, .kbq-active):has(+ :is(.kbq-selected, .kbq-focused, .kbq-active)) {
&:is(.kbq-selected, .kbq-focused):has(+ :is(.kbq-selected, .kbq-focused)) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

&:is(.kbq-selected, .kbq-focused, .kbq-active) + :is(.kbq-selected, .kbq-focused, .kbq-active) {
&:is(.kbq-selected, .kbq-focused) + :is(.kbq-selected, .kbq-focused) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
Expand All @@ -63,18 +53,15 @@
&.kbq-selected:not(.kbq-disabled) {
@include kbq-option(multiple-states-selected);

&.kbq-hovered,
&:hover {
@include kbq-option(multiple-states-selected-hover);
}

&:active {
@include kbq-option(multiple-states-selected-active);
}
}
}

.cdk-keyboard-focused {
.kbq-option.kbq-focused {
.kbq-option.kbq-active {
border-color: var(--kbq-list-states-focused-focus-outline-color);
}
}
Expand Down
12 changes: 11 additions & 1 deletion packages/components/core/option/option.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
ViewChild,
ViewEncapsulation
} from '@angular/core';
import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
import { ENTER, hasModifierKey, SPACE } from '@koobiq/cdk/keycodes';
import { Subject } from 'rxjs';
import { KbqPseudoCheckboxModule } from '../selection';
Expand Down Expand Up @@ -46,6 +47,7 @@ export interface KbqOptionParentComponent {
multiple?: boolean;
multiSelection?: boolean;
withVirtualScroll?: boolean;
keyManager?: ActiveDescendantKeyManager<KbqOption>;
setSelectedOptionsByClick: (option: KbqOption) => void;
}

Expand Down Expand Up @@ -148,6 +150,7 @@ export class KbqVirtualOption extends KbqOptionBase {
'[id]': 'id',

'(click)': 'handleClick($event)',
'(mouseenter)': 'onMouseenter()',
'(keydown)': 'handleKeydown($event)'
},
providers: [
Expand Down Expand Up @@ -247,7 +250,7 @@ export class KbqOption extends KbqOptionBase implements AfterViewChecked, OnDest
constructor(
private readonly elementRef: ElementRef<HTMLElement>,
private readonly changeDetectorRef: ChangeDetectorRef,
@Optional() @Inject(KBQ_OPTION_PARENT_COMPONENT) private readonly parent: KbqOptionParentComponent,
@Optional() @Inject(KBQ_OPTION_PARENT_COMPONENT) protected readonly parent: KbqOptionParentComponent,
@Optional() readonly group: KbqOptgroup
) {
super();
Expand Down Expand Up @@ -380,6 +383,13 @@ export class KbqOption extends KbqOptionBase implements AfterViewChecked, OnDest
getHostElement(): HTMLElement {
return this.elementRef.nativeElement;
}

/** @docs-private */
protected onMouseenter() {
if (this.disabled) return;

this.parent?.keyManager?.setActiveItem(this);
}
}

/**
Expand Down
Binary file modified packages/components/dropdown/__screenshots__/01-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/components/dropdown/__screenshots__/01-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/components/dropdown/dropdown-item.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,8 @@ export class KbqDropdownItem implements KbqTitleTextRef, IFocusableOption, After

/** Focuses the dropdown item. */
focus(origin?: FocusOrigin, options?: FocusOptions): void {
if (this.disabled) return;

if (this.focusMonitor && origin) {
this.focusMonitor.focusVia(this.getHostElement(), origin, options);
} else {
Expand Down Expand Up @@ -148,6 +150,7 @@ export class KbqDropdownItem implements KbqTitleTextRef, IFocusableOption, After
// TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
@HostListener('mouseenter') handleMouseEnter() {
this.hovered.next(this);
this.focus('mouse');
}

/** Gets the label to be used when determining whether the option should be focused. */
Expand Down
Binary file modified packages/components/select/__screenshots__/01-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/components/select/__screenshots__/01-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/components/select/__screenshots__/02-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/components/select/__screenshots__/02-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/components/select/__screenshots__/03-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/components/select/__screenshots__/03-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/components/select/__screenshots__/04-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/components/select/__screenshots__/04-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 4 additions & 8 deletions packages/components/select/e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,8 @@ import { KbqSelectModule } from './select.module';
<kbq-optgroup class="cdk-keyboard-focused" [label]="'group'">
<kbq-option [value]="'default'">default</kbq-option>
<kbq-option class="kbq-hovered" [value]="'hovered'">hover</kbq-option>
<kbq-option class="kbq-active" [value]="'active'">active</kbq-option>
<kbq-option [value]="'selected'">selected</kbq-option>
<kbq-option class="kbq-focused" [value]="'focused'">focused</kbq-option>
<kbq-option class="kbq-active" [value]="'focused'">focused</kbq-option>
<kbq-option [disabled]="true" [value]="'disabled'">disabled</kbq-option>
</kbq-optgroup>
</kbq-select>
Expand Down Expand Up @@ -55,9 +54,8 @@ export class E2eSelectStates {}
<kbq-option [value]="'default'">default</kbq-option>
<kbq-option [value]="'default1'">default1 long name long name long name</kbq-option>
<kbq-option class="kbq-hovered" [value]="'hovered'">hover</kbq-option>
<kbq-option class="kbq-active" [value]="'active'">active</kbq-option>
<kbq-option [value]="'selected'">selected</kbq-option>
<kbq-option class="kbq-focused" [value]="'focused'">focused</kbq-option>
<kbq-option class="kbq-active" [value]="'focused'">focused</kbq-option>
<kbq-option [disabled]="true" [value]="'disabled'">disabled</kbq-option>
</kbq-optgroup>
</kbq-select>
Expand Down Expand Up @@ -99,9 +97,8 @@ export class E2eMultiSelectStates {}
<kbq-option [value]="'default'">default</kbq-option>
<kbq-option [value]="'default1'">default1 long name long name long name</kbq-option>
<kbq-option class="kbq-hovered" [value]="'hovered'">hover</kbq-option>
<kbq-option class="kbq-active" [value]="'active'">active</kbq-option>
<kbq-option [value]="'selected'">selected</kbq-option>
<kbq-option class="kbq-focused" [value]="'focused'">focused</kbq-option>
<kbq-option class="kbq-active" [value]="'focused'">focused</kbq-option>
<kbq-option [disabled]="true" [value]="'disabled'">disabled</kbq-option>
</kbq-optgroup>
</kbq-select>
Expand Down Expand Up @@ -148,9 +145,8 @@ export class E2eMultilineSelectStates {}
<kbq-option [value]="'default'">default</kbq-option>
<kbq-option [value]="'default1'">default1 long name long name long name</kbq-option>
<kbq-option class="kbq-hovered" [value]="'hovered'">hover</kbq-option>
<kbq-option class="kbq-active" [value]="'active'">active</kbq-option>
<kbq-option [value]="'selected'">selected</kbq-option>
<kbq-option class="kbq-focused" [value]="'focused'">focused</kbq-option>
<kbq-option class="kbq-active" [value]="'focused'">focused</kbq-option>
<kbq-option [disabled]="true" [value]="'disabled'">disabled</kbq-option>
</kbq-optgroup>

Expand Down
3 changes: 2 additions & 1 deletion packages/components/select/select.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,8 @@ export class KbqSelect
* Automatically enables search hiding if value provided, even if `defaultOptions.minOptionsThreshold` is provided.
* @default undefined
*/
@Input() set searchMinOptionsThreshold(value: 'auto' | number | undefined) {
@Input()
set searchMinOptionsThreshold(value: 'auto' | number | undefined) {
this._searchMinOptionsThreshold =
this.resolveSearchMinOptionsThreshold(value) ??
this.resolveSearchMinOptionsThreshold(this.defaultOptions?.searchMinOptionsThreshold);
Expand Down
Binary file modified packages/components/tags/__screenshots__/03-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/components/tags/__screenshots__/03-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/components/timezone/__screenshots__/01-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/components/timezone/__screenshots__/01-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/components/timezone/__screenshots__/02-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/components/timezone/e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ class CustomErrorStateMatcher implements ErrorStateMatcher {
<kbq-form-field>
<kbq-timezone-select data-testid="e2eTimezoneSelect" [panelClass]="'custom-select-panel'">
@for (group of data; track group) {
<kbq-optgroup [label]="group.countryName">
<kbq-optgroup class="cdk-keyboard-focused" [label]="group.countryName">
<kbq-timezone-option [timezone]="group.zones[0]" />

<kbq-timezone-option class="kbq-hovered" [timezone]="group.zones[1]" />
Expand Down
Binary file modified packages/components/tree/__screenshots__/01-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/components/tree/__screenshots__/01-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 0 additions & 19 deletions packages/components/tree/_tree-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -42,27 +42,13 @@
@include kbq-tree-option(states-hover);
}

&:active,
&.kbq-active {
--kbq-option-background: var(--kbq-tree-states-active-container-background);

background: var(--kbq-tree-states-active-container-background);
}

&.kbq-selected {
@include kbq-tree-option(states-selected);

&:hover,
&.kbq-hovered {
@include kbq-tree-option(states-selected-hover);
}

&:active,
&.kbq-active {
--kbq-option-background: var(--kbq-tree-states-selected-active-container-background);

background: var(--kbq-tree-states-selected-active-container-background);
}
}

&.kbq-checked:not(.kbq-selected),
Expand All @@ -73,11 +59,6 @@
&.kbq-hovered {
background: var(--kbq-tree-multiple-states-selected-hover-container-background);
}

&:active,
&.kbq-active {
background: var(--kbq-tree-multiple-states-selected-active-container-background);
}
}
}

Expand Down
3 changes: 0 additions & 3 deletions packages/components/tree/e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ const DATA_OBJECT = {
States: {
Normal: '',
Hovered: '',
Active: '',
Selected: '',
SelectedHovered: '',
Focused: '',
Expand Down Expand Up @@ -93,7 +92,6 @@ function buildFileTree(value: any, level: number): FileNode[] {
*kbqTreeNodeDef="let node"
kbqTreeNodePadding
[class.kbq-hovered]="node.name === 'Hovered' || node.name === 'SelectedHovered'"
[class.kbq-active]="node.name === 'Active'"
[class.kbq-selected]="node.name === 'Selected' || node.name === 'SelectedHovered'"
[class.kbq-focused]="node.name === 'Focused'"
>
Expand All @@ -119,7 +117,6 @@ function buildFileTree(value: any, level: number): FileNode[] {
*kbqTreeNodeDef="let node"
kbqTreeNodePadding
[class.kbq-hovered]="node.name === 'Hovered' || node.name === 'SelectedHovered'"
[class.kbq-active]="node.name === 'Active'"
[class.kbq-selected]="node.name === 'Selected' || node.name === 'SelectedHovered'"
[class.kbq-focused]="node.name === 'Focused'"
>
Expand Down
8 changes: 8 additions & 0 deletions packages/components/tree/tree-option.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ let uniqueIdCounter: number = 0;
'[attr.tabindex]': '-1',
'[attr.disabled]': 'disabled || null',
'(focusin)': 'focus()',
'(mouseenter)': 'onMouseenter()',
'(blur)': 'blur()',
'(click)': 'selectViaInteraction($event)',
'(keydown)': 'onKeydown($event)'
Expand Down Expand Up @@ -393,4 +394,11 @@ export class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements AfterCo
this.updateCheckboxState();
}
}

/** @docs-private */
protected onMouseenter() {
if (this.disabled || !this.tree.inSelect) return;

this.focus('mouse');
}
}
7 changes: 2 additions & 5 deletions packages/components/tree/tree-option.scss
Original file line number Diff line number Diff line change
Expand Up @@ -66,15 +66,12 @@
}
}

&:is(.kbq-checked, .kbq-selected, .kbq-focused, .kbq-active):has(
+ :is(.kbq-checked, .kbq-selected, .kbq-focused, .kbq-active)
) {
&:is(.kbq-checked, .kbq-selected, .kbq-focused):has(+ :is(.kbq-checked, .kbq-selected, .kbq-focused)) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

&:is(.kbq-checked, .kbq-selected, .kbq-focused, .kbq-active)
+ :is(.kbq-checked, .kbq-selected, .kbq-focused, .kbq-active) {
&:is(.kbq-checked, .kbq-selected, .kbq-focused) + :is(.kbq-checked, .kbq-selected, .kbq-focused) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
Expand Down
5 changes: 4 additions & 1 deletion packages/components/tree/tree-selection.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ import {
TAB,
UP_ARROW
} from '@koobiq/cdk/keycodes';
import { getKbqSelectNonArrayValueError, MultipleMode } from '@koobiq/components/core';
import { getKbqSelectNonArrayValueError, KBQ_FORM_FIELD_REF, MultipleMode } from '@koobiq/components/core';
import { merge, Observable, Subscription } from 'rxjs';
import { AsyncScheduler } from 'rxjs/internal/scheduler/AsyncScheduler';
import { delay } from 'rxjs/operators';
Expand Down Expand Up @@ -133,6 +133,9 @@ export class KbqTreeSelection
{
protected readonly focusMonitor = inject(FocusMonitor);

/** Indicates whether this component is placed inside a KbqFormField component. */
protected readonly inSelect = !!inject(KBQ_FORM_FIELD_REF, { optional: true, host: true });

renderedOptions = new QueryList<KbqTreeOption>();

keyManager: FocusKeyManager<KbqTreeOption>;
Expand Down
6 changes: 6 additions & 0 deletions tools/public_api_guard/components/core.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
```ts

import { AbstractControl } from '@angular/forms';
import { ActiveDescendantKeyManager } from '@koobiq/cdk/a11y';
import { AfterContentInit } from '@angular/core';
import { AfterViewChecked } from '@angular/core';
import { AfterViewInit } from '@angular/core';
Expand Down Expand Up @@ -2444,8 +2445,11 @@ export class KbqOption extends KbqOptionBase implements AfterViewChecked, OnDest
ngAfterViewChecked(): void;
// (undocumented)
ngOnDestroy(): void;
protected onMouseenter(): void;
readonly onSelectionChange: EventEmitter<KbqOptionSelectionChange<KbqOption>>;
// (undocumented)
protected readonly parent: KbqOptionParentComponent;
// (undocumented)
select(emitEvent?: boolean): void;
// (undocumented)
selectable: boolean;
Expand Down Expand Up @@ -2552,6 +2556,8 @@ export class KbqOptionModule {

// @public
export interface KbqOptionParentComponent {
// (undocumented)
keyManager?: ActiveDescendantKeyManager<KbqOption>;
// (undocumented)
multiple?: boolean;
// (undocumented)
Expand Down
2 changes: 2 additions & 0 deletions tools/public_api_guard/components/tree.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -477,6 +477,7 @@ export class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements AfterCo
readonly onFocus: Subject<KbqTreeOptionEvent>;
// (undocumented)
onKeydown($event: any): void;
protected onMouseenter(): void;
// (undocumented)
readonly onSelectionChange: EventEmitter<KbqTreeOptionChange>;
// (undocumented)
Expand Down Expand Up @@ -582,6 +583,7 @@ export class KbqTreeSelection extends KbqTreeBase<any> implements ControlValueAc
getSelectedValues(): any[];
// (undocumented)
highlightSelectedOption(): void;
protected readonly inSelect: boolean;
// (undocumented)
get isEmpty(): boolean;
// (undocumented)
Expand Down
Loading