Merge branch 'main' into PM-26250-Explore-options-to-enable-direct-importer-for-mac-app-store-build

libs/angular/src/billing/components/premium-badge/premium-badge.component.ts

@@ -14,10 +14,11 @@ import { BadgeModule } from "@bitwarden/components";
       type="button"
       *appNotPremium
       bitBadge
-      variant="success"
+      [variant]="'primary'"
+      class="!tw-text-primary-600 !tw-border-primary-600"
       (click)="promptForPremium($event)"
     >
-      {{ "premium" | i18n }}
+      <i class="bwi bwi-premium tw-pe-1"></i>{{ "upgrade" | i18n }}
     </button>
   `,
   imports: [BadgeModule, JslibModule],

libs/angular/src/billing/components/premium-badge/premium-badge.stories.ts

@@ -29,7 +29,7 @@ export default {
           provide: I18nService,
           useFactory: () => {
             return new I18nMockService({
-              premium: "Premium",
+              upgrade: "Upgrade",
             });
           },
         },

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

@@ -451,6 +451,24 @@ describe("ChipSelectComponent", () => {
 
       expect(disabledMenuItem?.disabled).toBe(true);
     });
+
+    it("should handle writeValue called before options are initialized", async () => {
+      const testApp = fixture.componentInstance;
+
+      component["rootTree"] = null;
+
+      component.writeValue("opt1");
+
+      expect(component["pendingValue"]).toBe("opt1");
+      expect(component["selectedOption"]).toBeUndefined();
+
+      testApp.options.set(testOptions);
+      fixture.detectChanges();
+      await fixture.whenStable();
+
+      expect(component["selectedOption"]?.value).toBe("opt1");
+      expect(component["pendingValue"]).toBeUndefined();
+    });
   });
 });
 

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

@@ -100,10 +100,21 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
   /** Tree constructed from `this.options` */
   private rootTree?: ChipSelectOption<T> | null;
 
+  /** Store the pending value when writeValue is called before options are initialized */
+  private pendingValue?: T;
+
   constructor() {
     // Initialize the root tree whenever options change
     effect(() => {
       this.initializeRootTree(this.options());
+
+      // If there's a pending value, apply it now that options are available
+      if (this.pendingValue !== undefined) {
+        this.selectedOption = this.findOption(this.rootTree, this.pendingValue);
+        this.setOrResetRenderedOptions();
+        this.pendingValue = undefined;
+        this.cdr.markForCheck();
+      }
     });
 
     // Focus the first menu item when menuItems change (e.g., navigating submenus)
@@ -255,6 +266,12 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor {
 
   /** Implemented as part of NG_VALUE_ACCESSOR */
   writeValue(obj: T): void {
+    // If rootTree is not yet initialized, store the value to apply it later
+    if (!this.rootTree) {
+      this.pendingValue = obj;
+      return;
+    }
+
     this.selectedOption = this.findOption(this.rootTree, obj);
     this.setOrResetRenderedOptions();
     // OnPush components require manual change detection when writeValue() is called

libs/tools/send/send-ui/src/new-send-dropdown/new-send-dropdown.component.html

@@ -1,5 +1,5 @@
 <button bitButton [bitMenuTriggerFor]="itemOptions" [buttonType]="buttonType" type="button">
-  <i *ngIf="!hideIcon" class="bwi bwi-plus" aria-hidden="true"></i>
+  <i *ngIf="!hideIcon" class="bwi bwi-plus tw-me-2" aria-hidden="true"></i>
   {{ (hideIcon ? "createSend" : "new") | i18n }}
 </button>
 <bit-menu #itemOptions>

libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html

@@ -122,7 +122,7 @@
     </bit-form-field>
     <bit-form-field *ngIf="cipher.login.totp">
       <bit-label [appTextDrag]="totpCodeCopyObj?.totpCode">
-        <div class="tw-flex tw-items-center tw-gap-3">
+        <div class="tw-flex tw-items-center tw-gap-2">
           {{ "verificationCodeTotp" | i18n }}
           <app-premium-badge [organizationId]="cipher.organizationId"></app-premium-badge>
         </div>