[PM-6826] Vault filter refresh (#9365)

* add initial type filter

- use `bit-select` while the chip component is being developed

* get cipherTypes$ from service

- integrate with user settings

* initial add of folder selection

* initial add of vault selection

* initial add of collections filter

* update `VaultPopupListFilterService` to `VaultPopupListFiltersService`

* integrate hasFilterApplied$

* intermediate commit of integration to the filters component

* do not return the tree when the value is null

* return null when the updated option is null

* update vault-popup-list to conform to the chip select structure

* integration of bit-chip-select

* move "no folder" option to the end of the list

* show danger icon for deactivated organizations

* show deactivated warning when the filtered org is disabled

* update documentation

* use pascal case for constants

* store filter values as full objects rather than just id

- This allows secondary logic to be applied when filters are selected

* move filter form into service to be the source of truth

* fix tests after adding "jest-preset-angular/setup-jest"

* remove logic to have dynamic cipher type filters

* use ProductType enum

* invert conditional for less nesting

* prefer `decryptedCollections$` over getAllDecrypted

* update comments

* use a `filterFunction$` observable rather than having to pass filters back to the service

* fix children testing

* remove check for no folder

* reset filter form when filter component is destroyed

* add takeUntilDestroyed for organization valueChanges

* allow takeUntilDestroyed to use internal destroy ref

- The associated unit tests needed to be configured with TestBed rather than just `new Service()` for this to work

* use controls object for type safety

libs/components/src/chip-select/chip-select.component.ts

@@ -108,7 +108,7 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
    */
   private findOption(tree: ChipSelectOption<T>, value: T): ChipSelectOption<T> | null {
     let result = null;
-    if (tree.value === value) {
+    if (tree.value !== null && tree.value === value) {
       return tree;
     }
 
@@ -183,7 +183,7 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
       return;
     }
 
-    this.notifyOnChange(option?.value);
+    this.notifyOnChange(option?.value ?? null);
   }
 
   /** Implemented as part of NG_VALUE_ACCESSOR */

libs/components/src/icon/icons/deactivated-org.ts

@@ -0,0 +1,32 @@
+import { svgIcon } from "../icon";
+
+export const DeactivatedOrg = svgIcon`
+<svg width="138" height="118" viewBox="0 0 138 118" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_2929_17380)">
+    <path class="tw-stroke-text-headers" d="M80.0852 15.889V11.7504C80.0852 9.75243 78.6181 8.18262 76.7509 8.18262H53.1445C51.2773 8.18262 49.8102 9.75243 49.8102 11.7504V16.0317"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-stroke-text-headers" d="M73.3568 7.06126V3.568C73.3568 1.75668 71.8648 0.333496 69.9658 0.333496H59.9285C58.0295 0.333496 56.5374 1.75668 56.5374 3.568V7.06126"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-stroke-text-headers" d="M41.9611 29.8517V20.5736C41.9611 18.658 43.4441 17.1528 45.3315 17.1528H84.5637C86.4511 17.1528 87.9341 18.658 87.9341 20.5736V83.2728"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-stroke-text-headers" d="M12.8074 103.493V32.9262C12.8074 31.0004 14.3311 29.4873 16.2703 29.4873H56.4389C58.3781 29.4873 59.9018 31.0004 59.9018 32.9262V103.493"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-stroke-text-headers" d="M36.3545 39.5791V94.5225"  stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-stroke-text-headers" d="M47.5677 39.5791V94.5225"  stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-stroke-text-headers" d="M78.9634 26.1235V37.3365"  stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-stroke-text-headers" d="M78.9634 45.1851V56.398"  stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-stroke-text-headers" d="M78.9634 64.2476V75.4605"  stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-stroke-text-headers" d="M78.9634 83.3091V94.522"  stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-stroke-text-headers" d="M69.9932 26.1235V37.3365"  stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-stroke-text-headers" d="M69.9932 45.1851V56.398"  stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-stroke-text-headers" d="M69.9932 64.2476V75.4605"  stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-stroke-text-headers" d="M69.9932 83.3091V94.522"  stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-stroke-text-headers" d="M24.0202 39.5791V94.5225"  stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-stroke-text-headers" d="M0.473145 104.614H75.3408"  stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path class="tw-fill-danger-600" fill-rule="evenodd" clip-rule="evenodd" d="M121.425 111.921L99.1265 73.2989C98.3006 71.8685 96.236 71.8685 95.4101 73.2989L73.1119 111.921C72.286 113.351 73.3183 115.139 74.97 115.139H119.567C121.218 115.139 122.251 113.351 121.425 111.921ZM101.604 71.8685C99.6771 68.5308 94.8595 68.5308 92.9325 71.8685L70.6343 110.49C68.7073 113.828 71.116 118 74.97 118H119.567C123.421 118 125.829 113.828 123.902 110.49L101.604 71.8685Z"/>
+    <path class="tw-fill-danger-600" d="M98.2704 84.3848C98.8321 84.3848 99.2836 84.8473 99.2701 85.4088L98.8811 101.584C98.8681 102.127 98.4243 102.56 97.8814 102.56H96.6544C96.1118 102.56 95.6682 102.127 95.6547 101.585L95.254 85.4095C95.24 84.8477 95.6917 84.3848 96.2537 84.3848H98.2704Z" />
+    <circle class="tw-fill-danger-600" cx="97.2682" cy="106.556" r="2.14565" />
+  </g>
+  <defs>
+    <clipPath id="clip0_2929_17380">
+      <rect width="138" height="118" class="tw-fill-danger-600"/>
+    </clipPath>
+  </defs>
+</svg>
+`;

libs/components/src/icon/icons/index.ts

@@ -1,3 +1,4 @@
+export * from "./deactivated-org";
 export * from "./search";
 export * from "./no-access";
 export * from "./vault";