mirror of
https://github.com/bitwarden/browser
synced 2025-12-15 07:43:35 +00:00
[PM-14019] Toggle Vault Filters (#11929)
* move vault headings to their own component * update aria-label to bind to the data attribute * move vault headings to the vault-v2 folder * integrate disclosure trigger to hide vault filters * remove built in margin on search component - spacing will be managed by the parent component * add event emitter so consuming components can know when disclosure status has changed * add filter badge when filters are selected and the filters are hidden * persist filter visibility state to disk * add supporting text for the filter button * remove extra file * only read from stored state on component launch. - I noticed delays when trying to use stored state as the source of truth * use two-way data binding for change event * update vault headers to use two way data binds from disclosure component - also adjust consuming changes * add border thickness * add ticket to the FIXME * move number of filters observable into service * move state coordination into filter service * only expose state and update methods from filter service * simplify observables to avoid needed state lifecycle methods * remove comment * fix test imports * update badge colors --------- Co-authored-by: Matt Bishop <mbishop@bitwarden.com>
This commit is contained in:
@@ -1,4 +1,11 @@
|
||||
import { Component, HostBinding, Input, booleanAttribute } from "@angular/core";
|
||||
import {
|
||||
Component,
|
||||
EventEmitter,
|
||||
HostBinding,
|
||||
Input,
|
||||
Output,
|
||||
booleanAttribute,
|
||||
} from "@angular/core";
|
||||
|
||||
let nextId = 0;
|
||||
|
||||
@@ -8,14 +15,26 @@ let nextId = 0;
|
||||
template: `<ng-content></ng-content>`,
|
||||
})
|
||||
export class DisclosureComponent {
|
||||
private _open: boolean;
|
||||
|
||||
/** Emits the visibility of the disclosure content */
|
||||
@Output() openChange = new EventEmitter<boolean>();
|
||||
|
||||
/**
|
||||
* Optionally init the disclosure in its opened state
|
||||
*/
|
||||
@Input({ transform: booleanAttribute }) open?: boolean = false;
|
||||
@Input({ transform: booleanAttribute }) set open(isOpen: boolean) {
|
||||
this._open = isOpen;
|
||||
this.openChange.emit(isOpen);
|
||||
}
|
||||
|
||||
@HostBinding("class") get classList() {
|
||||
return this.open ? "" : "tw-hidden";
|
||||
}
|
||||
|
||||
@HostBinding("id") id = `bit-disclosure-${nextId++}`;
|
||||
|
||||
get open(): boolean {
|
||||
return this._open;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user