[PM-1512] Upgrade prettier (#5028)

* Upgrade prettier

* Lock prettier version

apps/browser/src/alarms/alarm-state.ts

@@ -2,7 +2,7 @@ import { clearClipboardAlarmName } from "../autofill/clipboard";
 import { BrowserApi } from "../browser/browserApi";
 
 export const alarmKeys = [clearClipboardAlarmName] as const;
-export type AlarmKeys = typeof alarmKeys[number];
+export type AlarmKeys = (typeof alarmKeys)[number];
 
 type AlarmState = { [T in AlarmKeys]: number | undefined };
 

apps/browser/src/auth/popup/home.component.html

@@ -10,7 +10,7 @@
             <input id="email" type="email" formControlName="email" appInputVerbatim="false" />
           </div>
           <div class="box-footer no-margin" *ngIf="selfHostedDomain">
-            {{ "loggingInTo" | i18n: selfHostedDomain }}
+            {{ "loggingInTo" | i18n : selfHostedDomain }}
           </div>
           <div class="remember-email-check">
             <input

apps/browser/src/auth/popup/lock.component.html

@@ -57,7 +57,7 @@
       </div>
       <div id="masterPasswordHelp" class="box-footer">
         <p>{{ "yourVaultIsLocked" | i18n }}</p>
-        {{ "loggedInAsOn" | i18n: email:webVaultHostname }}
+        {{ "loggedInAsOn" | i18n : email : webVaultHostname }}
       </div>
     </div>
     <div class="box" *ngIf="biometricLock">

apps/browser/src/auth/popup/remove-password.component.html

@@ -10,7 +10,7 @@
   <div class="box">
     <div class="box-content">
       <div class="box-content-row" appBoxRow>
-        <p>{{ "convertOrganizationEncryptionDesc" | i18n: organization.name }}</p>
+        <p>{{ "convertOrganizationEncryptionDesc" | i18n : organization.name }}</p>
       </div>
       <div class="box-content-row">
         <button

apps/browser/src/auth/popup/two-factor.component.html

@@ -34,7 +34,7 @@
           {{ "enterVerificationCodeApp" | i18n }}
         </span>
         <span *ngIf="selectedProviderType === providerType.Email">
-          {{ "enterVerificationCodeEmail" | i18n: twoFactorEmail }}
+          {{ "enterVerificationCodeEmail" | i18n : twoFactorEmail }}
         </span>
       </div>
       <div class="box first">

apps/browser/src/popup/components/send-list.component.html

@@ -57,7 +57,7 @@
           <span class="sr-only">{{ "pendingDeletion" | i18n }}</span>
         </ng-container>
       </span>
-      <span class="detail">{{ s.deletionDate | date: "medium" }}</span>
+      <span class="detail">{{ s.deletionDate | date : "medium" }}</span>
     </div>
   </button>
   <div class="action-buttons">

apps/browser/src/popup/settings/about.component.html

@@ -14,7 +14,7 @@
           <p class="text-center" *ngIf="isCloud">
             {{ "serverVersion" | i18n }}: {{ this.serverConfig?.version }}
             <span *ngIf="!serverConfig.isValid()">
-              ({{ "lastSeenOn" | i18n: (serverConfig.utcDate | date: "mediumDate") }})
+              ({{ "lastSeenOn" | i18n : (serverConfig.utcDate | date : "mediumDate") }})
             </span>
           </p>
 
@@ -24,11 +24,11 @@
                 {{ "serverVersion" | i18n }} <small>({{ "thirdParty" | i18n }})</small>:
                 {{ this.serverConfig?.version }}
                 <span *ngIf="!serverConfig.isValid()">
-                  ({{ "lastSeenOn" | i18n: (serverConfig.utcDate | date: "mediumDate") }})
+                  ({{ "lastSeenOn" | i18n : (serverConfig.utcDate | date : "mediumDate") }})
                 </span>
               </p>
               <div class="text-center">
-                <small>{{ "thirdPartyServerMessage" | i18n: serverConfig.server?.name }}</small>
+                <small>{{ "thirdPartyServerMessage" | i18n : serverConfig.server?.name }}</small>
               </div>
             </ng-container>
 
@@ -36,7 +36,7 @@
               {{ "serverVersion" | i18n }} <small>({{ "selfHosted" | i18n }})</small>:
               {{ this.serverConfig?.version }}
               <span *ngIf="!serverConfig.isValid()">
-                ({{ "lastSeenOn" | i18n: (serverConfig.utcDate | date: "mediumDate") }})
+                ({{ "lastSeenOn" | i18n : (serverConfig.utcDate | date : "mediumDate") }})
               </span>
             </p>
           </ng-container>

apps/browser/src/popup/settings/excluded-domains.component.html

@@ -31,7 +31,7 @@
               <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
             </button>
             <div class="row-main">
-              <label for="excludedDomain{{ i }}">{{ "uriPosition" | i18n: i + 1 }}</label>
+              <label for="excludedDomain{{ i }}">{{ "uriPosition" | i18n : i + 1 }}</label>
               <input
                 id="excludedDomain{{ i }}"
                 name="excludedDomain{{ i }}"

apps/browser/src/popup/settings/vault-timeout-input.component.html

@@ -1,5 +1,5 @@
 <app-callout type="info" *ngIf="vaultTimeoutPolicy">
-  {{ "vaultTimeoutPolicyInEffect" | i18n: vaultTimeoutPolicyHours:vaultTimeoutPolicyMinutes }}
+  {{ "vaultTimeoutPolicyInEffect" | i18n : vaultTimeoutPolicyHours : vaultTimeoutPolicyMinutes }}
 </app-callout>
 
 <div [formGroup]="form">

apps/browser/src/tools/popup/generator/password-generator-history.component.html

@@ -25,7 +25,7 @@
               appSelectCopy
               [innerHTML]="h.password | colorPassword"
             ></div>
-            <span class="detail">{{ h.date | date: "medium" }}</span>
+            <span class="detail">{{ h.date | date : "medium" }}</span>
           </div>
         </div>
         <div class="action-buttons">

apps/browser/src/vault/popup/components/vault/add-edit.component.html

@@ -228,7 +228,7 @@
               type="text"
               name="Card.ExpYear"
               [(ngModel)]="cipher.card.expYear"
-              placeholder="{{ 'ex' | i18n }} {{ currentDate | date: 'yyyy' }}"
+              placeholder="{{ 'ex' | i18n }} {{ currentDate | date : 'yyyy' }}"
               [readonly]="!cipher.edit && editMode"
             />
           </div>
@@ -470,7 +470,7 @@
             class="box-content-row box-content-row-multi"
             appBoxRow
             *ngFor="let u of cipher.login.uris; let i = index; trackBy: trackByFunction"
-            attr.aria-label="{{ 'uriPosition' | i18n: i + 1 }}"
+            attr.aria-label="{{ 'uriPosition' | i18n : i + 1 }}"
           >
             <button
               type="button"
@@ -481,7 +481,7 @@
               <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
             </button>
             <div class="row-main">
-              <label for="loginUri{{ i }}">{{ "uriPosition" | i18n: i + 1 }}</label>
+              <label for="loginUri{{ i }}">{{ "uriPosition" | i18n : i + 1 }}</label>
               <input
                 id="loginUri{{ i }}"
                 type="text"

apps/browser/src/vault/popup/components/vault/password-history.component.html

@@ -17,7 +17,7 @@
               class="text monospaced no-ellipsis"
               [innerHTML]="h.password | colorPassword"
             ></span>
-            <span class="detail">{{ h.lastUsedDate | date: "medium" }}</span>
+            <span class="detail">{{ h.lastUsedDate | date : "medium" }}</span>
           </div>
         </div>
         <div class="action-buttons">

apps/browser/src/vault/popup/components/vault/view.component.html

@@ -224,10 +224,10 @@
               >{{ "number" | i18n }}</span
             >
             <span [hidden]="showCardNumber" class="monospaced">{{
-              cipher.card.maskedNumber | creditCardNumber: cipher.card.brand
+              cipher.card.maskedNumber | creditCardNumber : cipher.card.brand
             }}</span>
             <span [hidden]="!showCardNumber" class="monospaced">{{
-              cipher.card.number | creditCardNumber: cipher.card.brand
+              cipher.card.number | creditCardNumber : cipher.card.brand
             }}</span>
           </div>
           <div class="action-buttons">
@@ -642,15 +642,15 @@
     <div class="box-footer">
       <div>
         <b class="font-weight-semibold">{{ "dateUpdated" | i18n }}:</b>
-        {{ cipher.revisionDate | date: "medium" }}
+        {{ cipher.revisionDate | date : "medium" }}
       </div>
       <div *ngIf="cipher.creationDate">
         <b class="font-weight-semibold">{{ "dateCreated" | i18n }}:</b>
-        {{ cipher.creationDate | date: "medium" }}
+        {{ cipher.creationDate | date : "medium" }}
       </div>
       <div *ngIf="cipher.passwordRevisionDisplayDate">
         <b class="font-weight-semibold">{{ "datePasswordUpdated" | i18n }}:</b>
-        {{ cipher.passwordRevisionDisplayDate | date: "medium" }}
+        {{ cipher.passwordRevisionDisplayDate | date : "medium" }}
       </div>
       <div *ngIf="cipher.hasPasswordHistory">
         <b class="font-weight-semibold">{{ "passwordHistory" | i18n }}:</b>

apps/cli/src/commands/completion.command.ts

@@ -20,7 +20,7 @@ const validShells = ["zsh"];
 
 export class CompletionCommand {
   async run(options: program.OptionValues) {
-    const shell: typeof validShells[number] = options.shell;
+    const shell: (typeof validShells)[number] = options.shell;
 
     if (!shell) {
       return Response.badRequest("`shell` option was not provided.");

apps/desktop/src/app/accounts/settings.component.html

@@ -4,7 +4,7 @@
       <div class="modal-body form">
         <div class="box">
           <h1 class="box-header" id="settingsTitle">
-            {{ "settingsTitle" | i18n: currentUserEmail }}
+            {{ "settingsTitle" | i18n : currentUserEmail }}
           </h1>
           <div class="box-content box-content-padded">
             <h2>

apps/desktop/src/app/accounts/vault-timeout-input.component.html

@@ -1,5 +1,5 @@
 <app-callout type="info" *ngIf="vaultTimeoutPolicy">
-  {{ "vaultTimeoutPolicyInEffect" | i18n: vaultTimeoutPolicyHours:vaultTimeoutPolicyMinutes }}
+  {{ "vaultTimeoutPolicyInEffect" | i18n : vaultTimeoutPolicyHours : vaultTimeoutPolicyMinutes }}
 </app-callout>
 
 <div [formGroup]="form">

apps/desktop/src/app/layout/account-switcher.component.html

@@ -58,7 +58,7 @@
         *ngFor="let a of accounts | keyvalue"
         class="account"
         (click)="switch(a.key)"
-        appA11yTitle="{{ 'loggedInAsOn' | i18n: a.value.profile.email:a.value.serverUrl }}"
+        appA11yTitle="{{ 'loggedInAsOn' | i18n : a.value.profile.email : a.value.serverUrl }}"
         attr.aria-label="{{ 'switchAccount' | i18n }}"
       >
         <app-avatar

apps/desktop/src/app/tools/password-generator-history.component.html

@@ -14,7 +14,7 @@
                   appSelectCopy
                   [innerHTML]="h.password | colorPassword"
                 ></div>
-                <span class="detail">{{ h.date | date: "medium" }}</span>
+                <span class="detail">{{ h.date | date : "medium" }}</span>
               </div>
               <div class="action-buttons">
                 <button

apps/desktop/src/auth/lock.component.html

@@ -49,7 +49,7 @@
         </div>
       </div>
       <div id="masterPasswordHelp" class="box-footer">
-        {{ "loggedInAsOn" | i18n: email:webVaultHostname }}
+        {{ "loggedInAsOn" | i18n : email : webVaultHostname }}
       </div>
     </div>
     <div class="buttons with-rows">

apps/desktop/src/auth/login/login-approval.component.html

@@ -6,7 +6,7 @@
       </div>
       <div class="content">
         <div class="section">
-          <h4>{{ "logInAttemptBy" | i18n: email }}</h4>
+          <h4>{{ "logInAttemptBy" | i18n : email }}</h4>
         </div>
 
         <div class="section">

apps/desktop/src/auth/login/login.component.html

@@ -38,7 +38,7 @@
             </div>
           </div>
           <div class="box-footer" *ngIf="selfHostedDomain">
-            {{ "loggingInTo" | i18n: selfHostedDomain }}
+            {{ "loggingInTo" | i18n : selfHostedDomain }}
           </div>
         </div>
         <div class="checkbox remember-email">

apps/desktop/src/auth/remove-password.component.html

@@ -1,7 +1,7 @@
 <div id="remove-password-page" *ngIf="!loading">
   <div class="content">
     <h1>{{ "removeMasterPassword" | i18n }}</h1>
-    <p>{{ "convertOrganizationEncryptionDesc" | i18n: organization.name }}</p>
+    <p>{{ "convertOrganizationEncryptionDesc" | i18n : organization.name }}</p>
     <div class="buttons">
       <button
         type="submit"

apps/desktop/src/auth/two-factor.component.html

@@ -11,7 +11,7 @@
       {{ "enterVerificationCodeApp" | i18n }}
     </p>
     <p *ngIf="selectedProviderType === providerType.Email">
-      {{ "enterVerificationCodeEmail" | i18n: twoFactorEmail }}
+      {{ "enterVerificationCodeEmail" | i18n : twoFactorEmail }}
     </p>
     <div
       class="box last"

apps/desktop/src/vault/app/accounts/premium.component.html

@@ -37,7 +37,7 @@
                 </li>
               </ul>
               <p class="text-center lead no-margin">
-                {{ "premiumPrice" | i18n: (price | currency: "$") }}
+                {{ "premiumPrice" | i18n : (price | currency : "$") }}
               </p>
             </div>
             <div *ngIf="isPremium">

apps/desktop/src/vault/app/vault/add-edit.component.html

@@ -215,7 +215,7 @@
                 type="text"
                 name="Card.ExpYear"
                 [(ngModel)]="cipher.card.expYear"
-                placeholder="{{ 'ex' | i18n }} {{ currentDate | date: 'yyyy' }}"
+                placeholder="{{ 'ex' | i18n }} {{ currentDate | date : 'yyyy' }}"
                 [readonly]="!cipher.edit && editMode"
               />
             </div>
@@ -457,7 +457,7 @@
               class="box-content-row box-content-row-multi"
               appBoxRow
               *ngFor="let u of cipher.login.uris; let i = index; trackBy: trackByFunction"
-              attr.aria-label="{{ 'uriPosition' | i18n: i + 1 }}"
+              attr.aria-label="{{ 'uriPosition' | i18n : i + 1 }}"
             >
               <button
                 type="button"
@@ -469,7 +469,7 @@
                 <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
               </button>
               <div class="row-main">
-                <label for="loginUri{{ i }}">{{ "uriPosition" | i18n: i + 1 }}</label>
+                <label for="loginUri{{ i }}">{{ "uriPosition" | i18n : i + 1 }}</label>
                 <input
                   id="loginUri{{ i }}"
                   type="text"

apps/desktop/src/vault/app/vault/password-history.component.html

@@ -10,7 +10,7 @@
             <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
               <div class="row-main">
                 <span class="text monospaced" [innerHTML]="h.password | colorPassword"></span>
-                <span class="detail">{{ h.lastUsedDate | date: "medium" }}</span>
+                <span class="detail">{{ h.lastUsedDate | date : "medium" }}</span>
               </div>
               <div class="action-buttons">
                 <button

apps/desktop/src/vault/app/vault/view.component.html

@@ -199,10 +199,10 @@
                 >{{ "number" | i18n }}</span
               >
               <span *ngIf="!showCardNumber" class="monospaced">{{
-                cipher.card.maskedNumber | creditCardNumber: cipher.card.brand
+                cipher.card.maskedNumber | creditCardNumber : cipher.card.brand
               }}</span>
               <span *ngIf="showCardNumber" class="monospaced">{{
-                cipher.card.number | creditCardNumber: cipher.card.brand
+                cipher.card.number | creditCardNumber : cipher.card.brand
               }}</span>
             </div>
             <div class="action-buttons">
@@ -505,15 +505,15 @@
       <div class="box-footer">
         <div>
           <b class="font-weight-semibold">{{ "dateUpdated" | i18n }}:</b>
-          {{ cipher.revisionDate | date: "medium" }}
+          {{ cipher.revisionDate | date : "medium" }}
         </div>
         <div *ngIf="cipher.creationDate">
           <b class="font-weight-semibold">{{ "dateCreated" | i18n }}:</b>
-          {{ cipher.creationDate | date: "medium" }}
+          {{ cipher.creationDate | date : "medium" }}
         </div>
         <div *ngIf="cipher.passwordRevisionDisplayDate">
           <b class="font-weight-semibold">{{ "datePasswordUpdated" | i18n }}:</b>
-          {{ cipher.passwordRevisionDisplayDate | date: "medium" }}
+          {{ cipher.passwordRevisionDisplayDate | date : "medium" }}
         </div>
         <div *ngIf="cipher.hasPasswordHistory">
           <b class="font-weight-semibold">{{ "passwordHistory" | i18n }}:</b>

apps/web/src/app/accounts/trial-initiation/billing.component.html

@@ -17,7 +17,7 @@
             {{ "annual" | i18n }} -
             {{
               (selectablePlan.basePrice === 0 ? selectablePlan.seatPrice : selectablePlan.basePrice)
-                | currency: "$"
+                | currency : "$"
             }}
             /{{ "yr" | i18n }}
           </ng-container>
@@ -25,7 +25,7 @@
             {{ "monthly" | i18n }} -
             {{
               (selectablePlan.basePrice === 0 ? selectablePlan.seatPrice : selectablePlan.basePrice)
-                | currency: "$"
+                | currency : "$"
             }}
             /{{ "monthAbbr" | i18n }}
           </ng-container>

apps/web/src/app/accounts/trial-initiation/confirmation-details.component.html

@@ -1,5 +1,5 @@
 <div class="tw-pl-6 tw-pb-6">
-  <p class="tw-text-xl">{{ "trialThankYou" | i18n: orgLabel }}</p>
+  <p class="tw-text-xl">{{ "trialThankYou" | i18n : orgLabel }}</p>
   <ul class="tw-list-disc">
     <li>
       <p>
@@ -10,7 +10,7 @@
     </li>
     <li>
       <p>
-        {{ "trialPaidInfoMessage" | i18n: orgLabel }}
+        {{ "trialPaidInfoMessage" | i18n : orgLabel }}
       </p>
     </li>
   </ul>

apps/web/src/app/components/organization-switcher.component.html

@@ -33,7 +33,7 @@
     >
       <div class="tw-py-2 tw-px-5">
         <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
-        {{ "accessingUsingProvider" | i18n: activeOrganization.providerName }}
+        {{ "accessingUsingProvider" | i18n : activeOrganization.providerName }}
       </div>
     </div>
   </div>

apps/web/src/app/layouts/footer.component.html

@@ -3,7 +3,7 @@
     <div class="col">&copy; {{ year }} Bitwarden Inc.</div>
     <div class="col text-center"></div>
     <div class="col text-right">
-      {{ "versionNumber" | i18n: version }}
+      {{ "versionNumber" | i18n : version }}
     </div>
   </div>
 </div>

apps/web/src/app/layouts/frontend-layout.component.html

@@ -1,5 +1,5 @@
 <router-outlet></router-outlet>
 <div class="container my-5 text-muted text-center">
   &copy; {{ year }} Bitwarden Inc. <br />
-  {{ "versionNumber" | i18n: version }}
+  {{ "versionNumber" | i18n : version }}
 </div>

apps/web/src/app/layouts/navbar.component.html

@@ -2,7 +2,7 @@
 <!-- eslint-disable @angular-eslint/template/button-has-type -->
 <nav class="navbar navbar-expand navbar-dark" [ngClass]="{ 'nav-background-alt': selfHosted }">
   <div class="container">
-    <a class="navbar-brand" routerLink="/" appA11yTitle="{{ 'pageTitle' | i18n: 'Bitwarden' }}">
+    <a class="navbar-brand" routerLink="/" appA11yTitle="{{ 'pageTitle' | i18n : 'Bitwarden' }}">
       <i class="bwi bwi-shield" aria-hidden="true"></i>
     </a>
     <div class="collapse navbar-collapse">

apps/web/src/app/organizations/billing/adjust-subscription.component.html

@@ -15,7 +15,7 @@
         />
         <small class="d-block text-muted mb-4">
           <strong>{{ "total" | i18n }}:</strong> {{ newSeatCount || 0 }} &times;
-          {{ seatPrice | currency: "$" }} = {{ adjustedSeatTotal | currency: "$" }} /
+          {{ seatPrice | currency : "$" }} = {{ adjustedSeatTotal | currency : "$" }} /
           {{ interval | i18n }}
         </small>
       </div>
@@ -51,7 +51,7 @@
         />
         <small class="d-block text-muted">
           <strong>{{ "maxSeatCost" | i18n }}:</strong> {{ newMaxSeats || 0 }} &times;
-          {{ seatPrice | currency: "$" }} = {{ maxSeatTotal | currency: "$" }} /
+          {{ seatPrice | currency : "$" }} = {{ maxSeatTotal | currency : "$" }} /
           {{ interval | i18n }}
         </small>
       </div>

apps/web/src/app/organizations/billing/billing-sync-api-key.component.html

@@ -60,13 +60,13 @@
           </div>
           <div class="small text-muted mt-2" *ngIf="showLastSyncText">
             <b class="font-weight-semibold">{{ "lastSync" | i18n }}:</b>
-            {{ lastSyncDate | date: "medium" }}
+            {{ lastSyncDate | date : "medium" }}
           </div>
           <div class="small text-danger mt-2" *ngIf="showAwaitingSyncText">
             <i class="bwi bwi-error"></i>
             {{
               (daysBetween === 1 ? "awaitingSyncSingular" : "awaitingSyncPlural")
-                | i18n: daysBetween
+                | i18n : daysBetween
             }}
           </div>
         </div>

apps/web/src/app/organizations/billing/organization-subscription-cloud.component.html

@@ -59,9 +59,9 @@
           <dd>
             {{
               nextInvoice
-                ? (nextInvoice.date | date: "mediumDate") +
+                ? (nextInvoice.date | date : "mediumDate") +
                   ", " +
-                  (nextInvoice.amount | currency: "$")
+                  (nextInvoice.amount | currency : "$")
                 : "-"
             }}
           </dd>
@@ -75,9 +75,9 @@
           <tr *ngFor="let i of subscription.items">
             <td>
               {{ i.name }} {{ i.quantity > 1 ? "&times;" + i.quantity : "" }} @
-              {{ i.amount | currency: "$" }}
+              {{ i.amount | currency : "$" }}
             </td>
-            <td>{{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }}</td>
+            <td>{{ i.quantity * i.amount | currency : "$" }} /{{ i.interval | i18n }}</td>
           </tr>
         </tbody>
       </table>
@@ -86,7 +86,7 @@
       <div class="col-sm">
         <dl>
           <dt>{{ "provider" | i18n }}</dt>
-          <dd>{{ "yourProviderIs" | i18n: userOrg.providerName }}</dd>
+          <dd>{{ "yourProviderIs" | i18n : userOrg.providerName }}</dd>
         </dl>
       </div>
     </ng-container>
@@ -144,7 +144,7 @@
     {{ "removeSponsorship" | i18n }}
   </button>
   <h2 class="spaced-header">{{ "storage" | i18n }}</h2>
-  <p>{{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0:sub.storageName || "0 MB" }}</p>
+  <p>{{ "subscriptionStorage" | i18n : sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}</p>
   <div class="progress">
     <div
       class="progress-bar bg-success"

apps/web/src/app/organizations/billing/organization-subscription-selfhost.component.html

@@ -28,7 +28,7 @@
     <dd>{{ sub.plan.name }}</dd>
     <dt>{{ "expiration" | i18n }}</dt>
     <dd *ngIf="sub.expiration">
-      {{ sub.expiration | date: "mediumDate" }}
+      {{ sub.expiration | date : "mediumDate" }}
       <span *ngIf="isExpired" class="text-danger ml-2">
         <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
         {{ "licenseIsExpired" | i18n }}
@@ -38,7 +38,7 @@
     <ng-container *ngIf="billingSyncSetUp">
       <dt>{{ "lastLicenseSync" | i18n }}</dt>
       <dd>
-        {{ lastLicenseSync != null ? (lastLicenseSync | date: "medium") : ("never" | i18n) }}
+        {{ lastLicenseSync != null ? (lastLicenseSync | date : "medium") : ("never" | i18n) }}
       </dd>
     </ng-container>
   </dl>

apps/web/src/app/organizations/billing/subscription-hidden.component.ts

@@ -29,7 +29,7 @@ const SubscriptionHiddenIcon = svgIcon`
   selector: "app-org-subscription-hidden",
   template: `<div class="tw-flex tw-flex-col tw-items-center tw-text-info">
     <bit-icon [icon]="subscriptionHiddenIcon"></bit-icon>
-    <p class="tw-font-bold">{{ "billingManagedByProvider" | i18n: providerName }}</p>
+    <p class="tw-font-bold">{{ "billingManagedByProvider" | i18n : providerName }}</p>
     <p>{{ "billingContactProviderForAssistance" | i18n }}</p>
   </div>`,
 })

apps/web/src/app/organizations/manage/collections.component.html

@@ -35,7 +35,7 @@
     !loading &&
     (isPaging()
       ? pagedCollections
-      : (collections | search: searchText:'name':'id')) as searchedCollections
+      : (collections | search : searchText : 'name' : 'id')) as searchedCollections
   "
 >
   <p *ngIf="!searchedCollections.length">{{ "noCollectionsInList" | i18n }}</p>

apps/web/src/app/organizations/manage/entity-events.component.html

@@ -79,7 +79,7 @@
           </thead>
           <tbody>
             <tr *ngFor="let e of events">
-              <td>{{ e.date | date: "medium" }}</td>
+              <td>{{ e.date | date : "medium" }}</td>
               <td>
                 <i
                   class="text-muted bwi bwi-lg {{ e.appIcon }}"

apps/web/src/app/organizations/manage/events.component.html

@@ -77,7 +77,7 @@
     </ng-container>
     <ng-template body>
       <tr bitRow *ngFor="let e of events" alignContent="top">
-        <td bitCell class="tw-whitespace-nowrap">{{ e.date | date: "medium" }}</td>
+        <td bitCell class="tw-whitespace-nowrap">{{ e.date | date : "medium" }}</td>
         <td bitCell>
           <span title="{{ e.appName }}, {{ e.ip }}">{{ e.appName }}</span>
         </td>

apps/web/src/app/organizations/manage/group-add-edit.component.html

@@ -21,7 +21,7 @@
           <bit-form-field>
             <bit-label>{{ "name" | i18n }}</bit-label>
             <input bitInput appAutofocus type="text" formControlName="name" />
-            <bit-hint>{{ "characterMaximum" | i18n: 100 }}</bit-hint>
+            <bit-hint>{{ "characterMaximum" | i18n : 100 }}</bit-hint>
           </bit-form-field>
           <bit-form-field>
             <bit-label>{{ "externalId" | i18n }}</bit-label>

apps/web/src/app/organizations/members/components/member-dialog/member-dialog.component.html

@@ -23,7 +23,7 @@
             <bit-form-field>
               <bit-label>{{ "email" | i18n }}</bit-label>
               <input id="emails" type="text" appAutoFocus bitInput formControlName="emails" />
-              <bit-hint>{{ "inviteMultipleEmailDesc" | i18n: "20" }}</bit-hint>
+              <bit-hint>{{ "inviteMultipleEmailDesc" | i18n : "20" }}</bit-hint>
             </bit-form-field>
           </ng-container>
           <fieldset role="radiogroup" aria-labelledby="roleGroupLabel" class="tw-mb-6">

apps/web/src/app/organizations/members/components/reset-password.component.html

@@ -17,7 +17,7 @@
       </div>
       <div class="modal-body">
         <app-callout type="warning"
-          >{{ "resetPasswordLoggedOutWarning" | i18n: loggedOutWarningName }}
+          >{{ "resetPasswordLoggedOutWarning" | i18n : loggedOutWarningName }}
         </app-callout>
         <app-callout
           type="info"

apps/web/src/app/organizations/members/people.component.html

@@ -53,7 +53,9 @@
   <ng-container
     *ngIf="
       !loading &&
-      (isPaging() ? pagedUsers : (users | search: searchText:'name':'email':'id')) as searchedUsers
+      (isPaging()
+        ? pagedUsers
+        : (users | search : searchText : 'name' : 'email' : 'id')) as searchedUsers
     "
   >
     <p *ngIf="!searchedUsers.length">{{ "noMembersInList" | i18n }}</p>

apps/web/src/app/organizations/settings/delete-organization.component.html

@@ -21,7 +21,7 @@
       </div>
       <div class="modal-body">
         <app-callout type="warning">{{
-          "deletingOrganizationIsPermanentWarning" | i18n: organizationName
+          "deletingOrganizationIsPermanentWarning" | i18n : organizationName
         }}</app-callout>
         <p id="organizationDeleteDescription">
           <ng-container
@@ -34,7 +34,7 @@
           </ng-container>
           <ng-template #regularDelete>
             <ng-container *ngIf="organizationContentSummary.totalItemCount > 0">
-              {{ "deletingOrganizationContentWarning" | i18n: organizationName }}
+              {{ "deletingOrganizationContentWarning" | i18n : organizationName }}
               <ul>
                 <li *ngFor="let type of organizationContentSummary.itemCountByType">
                   {{ type.count }} {{ type.localizationKey | i18n }}

apps/web/src/app/organizations/shared/components/access-selector/access-selector.component.html

@@ -130,7 +130,7 @@
       </td>
 
       <td bitCell *ngIf="showMemberRoles">
-        {{ $any(item).role | userType: "-" }}
+        {{ $any(item).role | userType : "-" }}
       </td>
 
       <td bitCell *ngIf="showGroupColumn">

apps/web/src/app/reports/pages/breach-report.component.html

@@ -25,10 +25,10 @@
   <p *ngIf="error">{{ "reportError" | i18n }}...</p>
   <ng-container *ngIf="!error">
     <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!breachedAccounts.length">
-      {{ "breachUsernameNotFound" | i18n: checkedUsername }}
+      {{ "breachUsernameNotFound" | i18n : checkedUsername }}
     </app-callout>
     <app-callout type="danger" title="{{ 'breachFound' | i18n }}" *ngIf="breachedAccounts.length">
-      {{ "breachUsernameFound" | i18n: checkedUsername:breachedAccounts.length }}
+      {{ "breachUsernameFound" | i18n : checkedUsername : breachedAccounts.length }}
     </app-callout>
     <ul class="list-group list-group-breach" *ngIf="breachedAccounts.length">
       <li *ngFor="let a of breachedAccounts" class="list-group-item min-height-fix">
@@ -51,9 +51,9 @@
               <dt>{{ "affectedUsers" | i18n }}</dt>
               <dd>{{ a.pwnCount | number }}</dd>
               <dt>{{ "breachOccurred" | i18n }}</dt>
-              <dd>{{ a.breachDate | date: "mediumDate" }}</dd>
+              <dd>{{ a.breachDate | date : "mediumDate" }}</dd>
               <dt>{{ "breachReported" | i18n }}</dt>
-              <dd>{{ a.addedDate | date: "mediumDate" }}</dd>
+              <dd>{{ a.addedDate | date : "mediumDate" }}</dd>
             </dl>
           </div>
         </div>

apps/web/src/app/reports/pages/exposed-passwords-report.component.html

@@ -11,7 +11,7 @@
   </app-callout>
   <ng-container *ngIf="ciphers.length">
     <app-callout type="danger" title="{{ 'exposedPasswordsFound' | i18n }}" [useAlertRole]="true">
-      {{ "exposedPasswordsFoundDesc" | i18n: (ciphers.length | number) }}
+      {{ "exposedPasswordsFoundDesc" | i18n : (ciphers.length | number) }}
     </app-callout>
     <table class="table table-hover table-list table-ciphers">
       <tbody>
@@ -51,7 +51,7 @@
           </td>
           <td class="text-right">
             <span bitBadge badgeType="warning">
-              {{ "exposedXTimes" | i18n: (exposedPasswordMap.get(c.id) | number) }}
+              {{ "exposedXTimes" | i18n : (exposedPasswordMap.get(c.id) | number) }}
             </span>
           </td>
         </tr>

apps/web/src/app/reports/pages/inactive-two-factor-report.component.html

@@ -26,7 +26,7 @@
   </app-callout>
   <ng-container *ngIf="ciphers.length">
     <app-callout type="danger" title="{{ 'inactive2faFound' | i18n }}">
-      {{ "inactive2faFoundDesc" | i18n: (ciphers.length | number) }}
+      {{ "inactive2faFoundDesc" | i18n : (ciphers.length | number) }}
     </app-callout>
     <table class="table table-hover table-list table-ciphers">
       <tbody>

apps/web/src/app/reports/pages/reused-passwords-report.component.html

@@ -26,7 +26,7 @@
   </app-callout>
   <ng-container *ngIf="ciphers.length">
     <app-callout type="danger" title="{{ 'reusedPasswordsFound' | i18n }}">
-      {{ "reusedPasswordsFoundDesc" | i18n: (ciphers.length | number) }}
+      {{ "reusedPasswordsFoundDesc" | i18n : (ciphers.length | number) }}
     </app-callout>
     <table class="table table-hover table-list table-ciphers">
       <tbody>
@@ -66,7 +66,7 @@
           </td>
           <td class="text-right">
             <span bitBadge badgeType="warning">
-              {{ "reusedXTimes" | i18n: passwordUseMap.get(c.login.password) }}
+              {{ "reusedXTimes" | i18n : passwordUseMap.get(c.login.password) }}
             </span>
           </td>
         </tr>

apps/web/src/app/reports/pages/unsecured-websites-report.component.html

@@ -26,7 +26,7 @@
   </app-callout>
   <ng-container *ngIf="ciphers.length">
     <app-callout type="danger" title="{{ 'unsecuredWebsitesFound' | i18n }}">
-      {{ "unsecuredWebsitesFoundDesc" | i18n: (ciphers.length | number) }}
+      {{ "unsecuredWebsitesFoundDesc" | i18n : (ciphers.length | number) }}
     </app-callout>
     <table class="table table-hover table-list table-ciphers">
       <tbody>

apps/web/src/app/reports/pages/weak-passwords-report.component.html

@@ -26,7 +26,7 @@
   </app-callout>
   <ng-container *ngIf="ciphers.length">
     <app-callout type="danger" title="{{ 'weakPasswordsFound' | i18n }}">
-      {{ "weakPasswordsFoundDesc" | i18n: (ciphers.length | number) }}
+      {{ "weakPasswordsFoundDesc" | i18n : (ciphers.length | number) }}
     </app-callout>
     <table class="table table-hover table-list table-ciphers">
       <tbody>

apps/web/src/app/send/access.component.html

@@ -4,7 +4,7 @@
       <h1 class="lead text-center mb-4">Bitwarden Send</h1>
     </div>
     <div class="col-12 text-center" *ngIf="creatorIdentifier != null">
-      <p>{{ "sendCreatorIdentifier" | i18n: creatorIdentifier }}</p>
+      <p>{{ "sendCreatorIdentifier" | i18n : creatorIdentifier }}</p>
     </div>
     <div class="col-8" *ngIf="hideEmail">
       <app-callout type="warning" title="{{ 'warning' | i18n }}">
@@ -129,7 +129,7 @@
             </button>
           </ng-container>
           <p *ngIf="expirationDate" class="text-center text-muted">
-            Expires: {{ expirationDate | date: "medium" }}
+            Expires: {{ expirationDate | date : "medium" }}
           </p>
         </div>
       </div>

apps/web/src/app/send/send.component.html

@@ -140,7 +140,7 @@
                 <span class="sr-only">{{ "pendingDeletion" | i18n }}</span>
               </ng-container>
               <br />
-              <small appStopProp>{{ s.deletionDate | date: "medium" }}</small>
+              <small appStopProp>{{ s.deletionDate | date : "medium" }}</small>
             </td>
             <td class="table-list-options">
               <button

apps/web/src/app/settings/adjust-storage.component.html

@@ -24,7 +24,7 @@
     </div>
     <div *ngIf="add" class="mb-3">
       <strong>{{ "total" | i18n }}:</strong> {{ storageAdjustment || 0 }} GB &times;
-      {{ storageGbPrice | currency: "$" }} = {{ adjustedStorageTotal | currency: "$" }} /{{
+      {{ storageGbPrice | currency : "$" }} = {{ adjustedStorageTotal | currency : "$" }} /{{
         interval | i18n
       }}
     </div>

apps/web/src/app/settings/billing-history.component.html

@@ -3,7 +3,7 @@
 <table class="table mb-2" *ngIf="invoices && invoices.length">
   <tbody>
     <tr *ngFor="let i of invoices">
-      <td>{{ i.date | date: "mediumDate" }}</td>
+      <td>{{ i.date | date : "mediumDate" }}</td>
       <td>
         <a
           href="{{ i.pdfUrl }}"
@@ -15,10 +15,10 @@
           <i class="bwi bwi-file-pdf" aria-hidden="true"></i
         ></a>
         <a href="{{ i.url }}" target="_blank" rel="noopener" title="{{ 'viewInvoice' | i18n }}">
-          {{ "invoiceNumber" | i18n: i.number }}</a
+          {{ "invoiceNumber" | i18n : i.number }}</a
         >
       </td>
-      <td>{{ i.amount | currency: "$" }}</td>
+      <td>{{ i.amount | currency : "$" }}</td>
       <td>
         <span *ngIf="i.paid">
           <i class="bwi bwi-check text-success" aria-hidden="true"></i>
@@ -37,7 +37,7 @@
 <table class="table mb-2" *ngIf="transactions && transactions.length">
   <tbody>
     <tr *ngFor="let t of transactions">
-      <td>{{ t.createdDate | date: "mediumDate" }}</td>
+      <td>{{ t.createdDate | date : "mediumDate" }}</td>
       <td>
         <span *ngIf="t.type === transactionType.Charge || t.type === transactionType.Credit">
           {{ "chargeNoun" | i18n }}
@@ -57,9 +57,9 @@
         [ngClass]="{ 'text-strike': t.refunded }"
         title="{{ (t.refunded ? 'refunded' : '') | i18n }}"
       >
-        {{ t.amount | currency: "$" }}
+        {{ t.amount | currency : "$" }}
       </td>
     </tr>
   </tbody>
 </table>
-<small class="text-muted">* {{ "chargesStatement" | i18n: "BITWARDEN" }}</small>
+<small class="text-muted">* {{ "chargesStatement" | i18n : "BITWARDEN" }}</small>

apps/web/src/app/settings/change-email.component.html

@@ -35,7 +35,7 @@
   </div>
   <ng-container *ngIf="tokenSent">
     <hr />
-    <p>{{ "changeEmailDesc" | i18n: newEmail }}</p>
+    <p>{{ "changeEmailDesc" | i18n : newEmail }}</p>
     <app-callout type="warning">{{ "loggedOutWarning" | i18n }}</app-callout>
     <div class="row">
       <div class="col-6">

apps/web/src/app/settings/change-kdf/change-kdf.component.html

@@ -94,10 +94,10 @@
     <div class="col-12">
       <ng-container *ngIf="kdf == kdfType.PBKDF2_SHA256">
         <p class="small form-text text-muted">
-          {{ "kdfIterationsDesc" | i18n: (recommendedPbkdf2Iterations | number) }}
+          {{ "kdfIterationsDesc" | i18n : (recommendedPbkdf2Iterations | number) }}
         </p>
         <bit-callout type="warning">
-          {{ "kdfIterationsWarning" | i18n: (100000 | number) }}
+          {{ "kdfIterationsWarning" | i18n : (100000 | number) }}
         </bit-callout>
       </ng-container>
       <ng-container *ngIf="kdf == kdfType.Argon2id">

apps/web/src/app/settings/domain-rules.component.html

@@ -16,7 +16,7 @@
     <div class="form-group d-flex" *ngFor="let d of custom; let i = index; trackBy: indexTrackBy">
       <div class="flex-fill">
         <label for="customDomain_{{ i }}" class="sr-only">{{
-          "customDomainX" | i18n: i + 1
+          "customDomainX" | i18n : i + 1
         }}</label>
         <textarea
           class="form-control"

apps/web/src/app/settings/organization-plans.component.html

@@ -13,7 +13,7 @@
       <label for="file">{{ "licenseFile" | i18n }}</label>
       <input type="file" id="file" class="form-control-file" name="file" required />
       <small class="form-text text-muted">{{
-        "licenseFileDesc" | i18n: "bitwarden_organization_license.json"
+        "licenseFileDesc" | i18n : "bitwarden_organization_license.json"
       }}</small>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
@@ -51,7 +51,7 @@
     />
     <label class="form-check-label" for="product{{ selectableProduct.product }}">
       {{ selectableProduct.nameLocalizationKey | i18n }}
-      <small class="mb-1">{{ selectableProduct.descriptionLocalizationKey | i18n: "1" }}</small>
+      <small class="mb-1">{{ selectableProduct.descriptionLocalizationKey | i18n : "1" }}</small>
       <ng-container
         *ngIf="selectableProduct.product === productTypes.Enterprise; else fullFeatureList"
       >
@@ -63,28 +63,28 @@
         >
         <small *ngIf="selectableProduct.trialPeriodDays && createOrganization"
           >•
-          {{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }}
+          {{ "xDayFreeTrial" | i18n : selectableProduct.trialPeriodDays }}
         </small>
       </ng-container>
       <ng-template #fullFeatureList>
         <small *ngIf="selectableProduct.product == productTypes.Free"
-          >• {{ "limitedUsers" | i18n: selectableProduct.maxUsers }}</small
+          >• {{ "limitedUsers" | i18n : selectableProduct.maxUsers }}</small
         >
         <small *ngIf="selectableProduct.product != productTypes.Free && selectableProduct.maxUsers"
-          >• {{ "addShareLimitedUsers" | i18n: selectableProduct.maxUsers }}</small
+          >• {{ "addShareLimitedUsers" | i18n : selectableProduct.maxUsers }}</small
         >
         <small *ngIf="!selectableProduct.maxUsers">• {{ "addShareUnlimitedUsers" | i18n }}</small>
         <small *ngIf="selectableProduct.maxCollections"
-          >• {{ "limitedCollections" | i18n: selectableProduct.maxCollections }}</small
+          >• {{ "limitedCollections" | i18n : selectableProduct.maxCollections }}</small
         >
         <small *ngIf="selectableProduct.maxAdditionalSeats"
-          >• {{ "addShareLimitedUsers" | i18n: selectableProduct.maxAdditionalSeats }}</small
+          >• {{ "addShareLimitedUsers" | i18n : selectableProduct.maxAdditionalSeats }}</small
         >
         <small *ngIf="!selectableProduct.maxCollections"
           >• {{ "createUnlimitedCollections" | i18n }}</small
         >
         <small *ngIf="selectableProduct.baseStorageGb"
-          >• {{ "gbEncryptedFileStorage" | i18n: selectableProduct.baseStorageGb + "GB" }}</small
+          >• {{ "gbEncryptedFileStorage" | i18n : selectableProduct.baseStorageGb + "GB" }}</small
         >
         <small *ngIf="selectableProduct.hasGroups">• {{ "controlAccessWithGroups" | i18n }}</small>
         <small *ngIf="selectableProduct.hasApi">• {{ "trackAuditLogs" | i18n }}</small>
@@ -98,21 +98,21 @@
         >
         <small *ngIf="selectableProduct.trialPeriodDays && createOrganization"
           >•
-          {{ "xDayFreeTrial" | i18n: selectableProduct.trialPeriodDays }}
+          {{ "xDayFreeTrial" | i18n : selectableProduct.trialPeriodDays }}
         </small>
       </ng-template>
       <span *ngIf="selectableProduct.product != productTypes.Free">
         <ng-container *ngIf="selectableProduct.basePrice && !acceptingSponsorship">
-          {{ selectableProduct.basePrice / 12 | currency: "$" }} /{{ "month" | i18n }},
+          {{ selectableProduct.basePrice / 12 | currency : "$" }} /{{ "month" | i18n }},
-          {{ "includesXUsers" | i18n: selectableProduct.baseSeats }}
+          {{ "includesXUsers" | i18n : selectableProduct.baseSeats }}
           <ng-container *ngIf="selectableProduct.hasAdditionalSeatsOption">
             {{ ("additionalUsers" | i18n).toLowerCase() }}
-            {{ selectableProduct.seatPrice / 12 | currency: "$" }} /{{ "month" | i18n }}
+            {{ selectableProduct.seatPrice / 12 | currency : "$" }} /{{ "month" | i18n }}
           </ng-container>
         </ng-container>
       </span>
       <span *ngIf="!selectableProduct.basePrice && selectableProduct.hasAdditionalSeatsOption">
-        {{ "costPerUser" | i18n: (selectableProduct.seatPrice / 12 | currency: "$") }} /{{
+        {{ "costPerUser" | i18n : (selectableProduct.seatPrice / 12 | currency : "$") }} /{{
           "month" | i18n
         }}
       </span>
@@ -152,7 +152,7 @@
         />
         <small class="text-muted form-text">{{
           "userSeatsAdditionalDesc"
-            | i18n: selectedPlan.baseSeats:(seatPriceMonthly(selectedPlan) | currency: "$")
+            | i18n : selectedPlan.baseSeats : (seatPriceMonthly(selectedPlan) | currency : "$")
         }}</small>
       </div>
     </div>
@@ -172,7 +172,7 @@
           "additionalStorageIntervalDesc"
             | i18n
               : "1 GB"
-              : (additionalStoragePriceMonthly(selectedPlan) | currency: "$")
+              : (additionalStoragePriceMonthly(selectedPlan) | currency : "$")
               : ("month" | i18n)
         }}</small>
       </div>
@@ -192,7 +192,7 @@
           }}</label>
         </div>
         <small class="text-muted form-text">{{
-          "premiumAccessDesc" | i18n: (3.33 | currency: "$"):("month" | i18n)
+          "premiumAccessDesc" | i18n : (3.33 | currency : "$") : ("month" | i18n)
         }}</small>
       </div>
     </div>
@@ -210,17 +210,18 @@
         <ng-container *ngIf="selectablePlan.isAnnual">
           {{ "annually" | i18n }}
           <small *ngIf="selectablePlan.basePrice">
-            {{ "basePrice" | i18n }}: {{ selectablePlan.basePrice / 12 | currency: "$" }} &times; 12
+            {{ "basePrice" | i18n }}: {{ selectablePlan.basePrice / 12 | currency : "$" }} &times;
+            12
             {{ "monthAbbr" | i18n }}
             =
             <ng-container *ngIf="acceptingSponsorship; else notAcceptingSponsorship">
               <span style="text-decoration: line-through">{{
-                selectablePlan.basePrice | currency: "$"
+                selectablePlan.basePrice | currency : "$"
               }}</span>
               {{ "freeWithSponsorship" | i18n }}
             </ng-container>
             <ng-template #notAcceptingSponsorship>
-              {{ selectablePlan.basePrice | currency: "$" }}
+              {{ selectablePlan.basePrice | currency : "$" }}
               /{{ "year" | i18n }}
             </ng-template>
           </small>
@@ -228,41 +229,41 @@
             <span *ngIf="selectablePlan.baseSeats">{{ "additionalUsers" | i18n }}:</span>
             <span *ngIf="!selectablePlan.baseSeats">{{ "users" | i18n }}:</span>
             {{ formGroup.controls["additionalSeats"].value || 0 }} &times;
-            {{ selectablePlan.seatPrice / 12 | currency: "$" }} &times; 12
+            {{ selectablePlan.seatPrice / 12 | currency : "$" }} &times; 12
-            {{ "monthAbbr" | i18n }} = {{ seatTotal(selectablePlan) | currency: "$" }} /{{
+            {{ "monthAbbr" | i18n }} = {{ seatTotal(selectablePlan) | currency : "$" }} /{{
               "year" | i18n
             }}
           </small>
           <small *ngIf="selectablePlan.hasAdditionalStorageOption">
             {{ "additionalStorageGb" | i18n }}:
             {{ formGroup.controls["additionalStorage"].value || 0 }} &times;
-            {{ selectablePlan.additionalStoragePricePerGb / 12 | currency: "$" }} &times; 12
+            {{ selectablePlan.additionalStoragePricePerGb / 12 | currency : "$" }} &times; 12
             {{ "monthAbbr" | i18n }} =
-            {{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "year" | i18n }}
+            {{ additionalStorageTotal(selectablePlan) | currency : "$" }} /{{ "year" | i18n }}
           </small>
         </ng-container>
         <ng-container *ngIf="!selectablePlan.isAnnual">
           {{ "monthly" | i18n }}
           <small *ngIf="selectablePlan.basePrice">
-            {{ "basePrice" | i18n }}: {{ selectablePlan.basePrice | currency: "$" }}
+            {{ "basePrice" | i18n }}: {{ selectablePlan.basePrice | currency : "$" }}
             {{ "monthAbbr" | i18n }}
             =
-            {{ selectablePlan.basePrice | currency: "$" }}
+            {{ selectablePlan.basePrice | currency : "$" }}
             /{{ "month" | i18n }}
           </small>
           <small *ngIf="selectablePlan.hasAdditionalSeatsOption">
             <span *ngIf="selectablePlan.baseSeats">{{ "additionalUsers" | i18n }}:</span>
             <span *ngIf="!selectablePlan.baseSeats">{{ "users" | i18n }}:</span>
             {{ formGroup.controls["additionalSeats"].value || 0 }} &times;
-            {{ selectablePlan.seatPrice | currency: "$" }} {{ "monthAbbr" | i18n }} =
+            {{ selectablePlan.seatPrice | currency : "$" }} {{ "monthAbbr" | i18n }} =
-            {{ seatTotal(selectablePlan) | currency: "$" }} /{{ "month" | i18n }}
+            {{ seatTotal(selectablePlan) | currency : "$" }} /{{ "month" | i18n }}
           </small>
           <small *ngIf="selectablePlan.hasAdditionalStorageOption">
             {{ "additionalStorageGb" | i18n }}:
             {{ formGroup.controls["additionalStorage"].value || 0 }} &times;
-            {{ selectablePlan.additionalStoragePricePerGb | currency: "$" }}
+            {{ selectablePlan.additionalStoragePricePerGb | currency : "$" }}
             {{ "monthAbbr" | i18n }} =
-            {{ additionalStorageTotal(selectablePlan) | currency: "$" }} /{{ "month" | i18n }}
+            {{ additionalStorageTotal(selectablePlan) | currency : "$" }} /{{ "month" | i18n }}
           </small>
         </ng-container>
       </label>
@@ -278,15 +279,15 @@
     <app-tax-info (onCountryChanged)="changedCountry()"></app-tax-info>
     <div id="price" class="my-4">
       <div class="text-muted text-sm">
-        {{ "planPrice" | i18n }}: {{ subtotal | currency: "USD $" }}
+        {{ "planPrice" | i18n }}: {{ subtotal | currency : "USD $" }}
         <br />
         <ng-container>
-          {{ "estimatedTax" | i18n }}: {{ taxCharges | currency: "USD $" }}
+          {{ "estimatedTax" | i18n }}: {{ taxCharges | currency : "USD $" }}
         </ng-container>
       </div>
       <hr class="my-1 col-3 ml-0" />
       <p class="text-lg">
-        <strong>{{ "total" | i18n }}:</strong> {{ total | currency: "USD $" }}/{{
+        <strong>{{ "total" | i18n }}:</strong> {{ total | currency : "USD $" }}/{{
           selectedPlanInterval | i18n
         }}
       </p>

apps/web/src/app/settings/payment-method.component.html

@@ -27,7 +27,7 @@
 <ng-container *ngIf="billing">
   <h2>{{ (isCreditBalance ? "accountCredit" : "accountBalance") | i18n }}</h2>
   <p class="text-lg">
-    <strong>{{ creditOrBalance | currency: "$" }}</strong>
+    <strong>{{ creditOrBalance | currency : "$" }}</strong>
   </p>
   <p>{{ "creditAppliedDesc" | i18n }}</p>
   <button bitButton buttonType="secondary" (click)="addCredit()" *ngIf="!showAddCredit">
@@ -62,12 +62,12 @@
         ngNativeValidate
       >
         <bit-form-field class="tw-mr-2 tw-w-40">
-          <bit-label>{{ "amountX" | i18n: "1" }}</bit-label>
+          <bit-label>{{ "amountX" | i18n : "1" }}</bit-label>
           <input bitInput type="number" step="1" placeholder="xx" formControlName="amount1" />
           <span bitPrefix>$0.</span>
         </bit-form-field>
         <bit-form-field class="tw-mr-2 tw-w-40">
-          <bit-label>{{ "amountX" | i18n: "2" }}</bit-label>
+          <bit-label>{{ "amountX" | i18n : "2" }}</bit-label>
           <input bitInput type="number" step="1" placeholder="xx" formControlName="amount2" />
           <span bitPrefix>$0.</span>
         </bit-form-field>

apps/web/src/app/settings/premium.component.html

@@ -45,7 +45,9 @@
     </li>
   </ul>
   <p class="text-lg" [ngClass]="{ 'mb-0': !selfHosted }">
-    {{ "premiumPriceWithFamilyPlan" | i18n: (premiumPrice | currency: "$"):familyPlanMaxUserCount }}
+    {{
+      "premiumPriceWithFamilyPlan" | i18n : (premiumPrice | currency : "$") : familyPlanMaxUserCount
+    }}
     <a routerLink="/create-organization" [queryParams]="{ plan: 'families' }">{{
       "bitwardenFamiliesPlan" | i18n
     }}</a>
@@ -68,7 +70,7 @@
       <label for="file">{{ "licenseFile" | i18n }}</label>
       <input type="file" id="file" class="form-control-file" name="file" required />
       <small class="form-text text-muted">{{
-        "licenseFileDesc" | i18n: "bitwarden_premium_license.json"
+        "licenseFileDesc" | i18n : "bitwarden_premium_license.json"
       }}</small>
     </div>
     <button type="submit" buttonType="primary" bitButton [loading]="form.loading">
@@ -94,30 +96,30 @@
       />
       <small class="text-muted form-text">{{
         "additionalStorageIntervalDesc"
-          | i18n: "1 GB":(storageGbPrice | currency: "$"):("year" | i18n)
+          | i18n : "1 GB" : (storageGbPrice | currency : "$") : ("year" | i18n)
       }}</small>
     </div>
   </div>
   <h2 class="spaced-header">{{ "summary" | i18n }}</h2>
-  {{ "premiumMembership" | i18n }}: {{ premiumPrice | currency: "$" }} <br />
+  {{ "premiumMembership" | i18n }}: {{ premiumPrice | currency : "$" }} <br />
   {{ "additionalStorageGb" | i18n }}: {{ additionalStorage || 0 }} GB &times;
-  {{ storageGbPrice | currency: "$" }} =
+  {{ storageGbPrice | currency : "$" }} =
-  {{ additionalStorageTotal | currency: "$" }}
+  {{ additionalStorageTotal | currency : "$" }}
   <hr class="my-3" />
   <h2 class="spaced-header mb-4">{{ "paymentInformation" | i18n }}</h2>
   <app-payment [hideBank]="true"></app-payment>
   <app-tax-info></app-tax-info>
   <div id="price" class="my-4">
     <div class="text-muted text-sm">
-      {{ "planPrice" | i18n }}: {{ subtotal | currency: "USD $" }}
+      {{ "planPrice" | i18n }}: {{ subtotal | currency : "USD $" }}
       <br />
       <ng-container>
-        {{ "estimatedTax" | i18n }}: {{ taxCharges | currency: "USD $" }}
+        {{ "estimatedTax" | i18n }}: {{ taxCharges | currency : "USD $" }}
       </ng-container>
     </div>
     <hr class="my-1 col-3 ml-0" />
     <p class="text-lg">
-      <strong>{{ "total" | i18n }}:</strong> {{ total | currency: "USD $" }}/{{ "year" | i18n }}
+      <strong>{{ "total" | i18n }}:</strong> {{ total | currency : "USD $" }}/{{ "year" | i18n }}
     </p>
   </div>
   <small class="text-muted font-italic">{{ "paymentChargedAnnually" | i18n }}</small>

apps/web/src/app/settings/sponsoring-org-row.component.html

@@ -29,7 +29,7 @@
         class="dropdown-item btn-submit"
         [disabled]="$any(resendEmailBtn).loading"
         (click)="resendEmail()"
-        [attr.aria-label]="'resendEmailLabel' | i18n: sponsoringOrg.familySponsorshipFriendlyName"
+        [attr.aria-label]="'resendEmailLabel' | i18n : sponsoringOrg.familySponsorshipFriendlyName"
       >
         <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
         <span>{{ "resendEmail" | i18n }}</span>
@@ -40,7 +40,7 @@
         class="dropdown-item text-danger btn-submit"
         [disabled]="$any(revokeSponsorshipBtn).loading"
         (click)="revokeSponsorship()"
-        [attr.aria-label]="'revokeAccount' | i18n: sponsoringOrg.familySponsorshipFriendlyName"
+        [attr.aria-label]="'revokeAccount' | i18n : sponsoringOrg.familySponsorshipFriendlyName"
       >
         <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
         <span>{{ "remove" | i18n }}</span>

apps/web/src/app/settings/user-subscription.component.html

@@ -54,7 +54,7 @@
   </bit-callout>
   <dl *ngIf="selfHosted">
     <dt>{{ "expiration" | i18n }}</dt>
-    <dd *ngIf="sub.expiration">{{ sub.expiration | date: "mediumDate" }}</dd>
+    <dd *ngIf="sub.expiration">{{ sub.expiration | date : "mediumDate" }}</dd>
     <dd *ngIf="!sub.expiration">{{ "neverExpires" | i18n }}</dd>
   </dl>
   <div class="row" *ngIf="!selfHosted">
@@ -71,9 +71,9 @@
         <dd>
           {{
             nextInvoice
-              ? (nextInvoice.date | date: "mediumDate") +
+              ? (nextInvoice.date | date : "mediumDate") +
                 ", " +
-                (nextInvoice.amount | currency: "$")
+                (nextInvoice.amount | currency : "$")
               : "-"
           }}
         </dd>
@@ -86,9 +86,9 @@
           <tr *ngFor="let i of subscription.items">
             <td>
               {{ i.name }} {{ i.quantity > 1 ? "&times;" + i.quantity : "" }} @
-              {{ i.amount | currency: "$" }}
+              {{ i.amount | currency : "$" }}
             </td>
-            <td>{{ i.quantity * i.amount | currency: "$" }} /{{ i.interval | i18n }}</td>
+            <td>{{ i.quantity * i.amount | currency : "$" }} /{{ i.interval | i18n }}</td>
           </tr>
         </tbody>
       </table>
@@ -155,7 +155,7 @@
       </button>
     </div>
     <h2 class="spaced-header">{{ "storage" | i18n }}</h2>
-    <p>{{ "subscriptionStorage" | i18n: sub.maxStorageGb || 0:sub.storageName || "0 MB" }}</p>
+    <p>{{ "subscriptionStorage" | i18n : sub.maxStorageGb || 0 : sub.storageName || "0 MB" }}</p>
     <div class="progress">
       <div
         class="progress-bar bg-success"

apps/web/src/app/settings/vault-timeout-input.component.html

@@ -1,5 +1,5 @@
 <app-callout type="info" *ngIf="vaultTimeoutPolicy">
-  {{ "vaultTimeoutPolicyInEffect" | i18n: vaultTimeoutPolicyHours:vaultTimeoutPolicyMinutes }}
+  {{ "vaultTimeoutPolicyInEffect" | i18n : vaultTimeoutPolicyHours : vaultTimeoutPolicyMinutes }}
 </app-callout>
 
 <div [formGroup]="form">

apps/web/src/app/tools/password-generator-history.component.html

@@ -23,7 +23,7 @@
                 class="tw-block tw-font-mono"
                 appSelectCopy
               ></bit-color-password>
-              <small class="text-muted">{{ h.date | date: "medium" }}</small>
+              <small class="text-muted">{{ h.date | date : "medium" }}</small>
             </div>
             <div class="ml-auto">
               <button

apps/web/src/app/vault/individual-vault/add-edit.component.html

@@ -302,10 +302,10 @@
               role="group"
               class="row"
               *ngFor="let u of cipher.login.uris; let i = index; trackBy: trackByFunction"
-              attr.aria-label="{{ 'uriPosition' | i18n: i + 1 }}"
+              attr.aria-label="{{ 'uriPosition' | i18n : i + 1 }}"
             >
               <div class="col-7 form-group">
-                <label for="loginUri{{ i }}">{{ "uriPosition" | i18n: i + 1 }}</label>
+                <label for="loginUri{{ i }}">{{ "uriPosition" | i18n : i + 1 }}</label>
                 <div class="input-group">
                   <input
                     class="form-control"
@@ -873,15 +873,15 @@
           <div class="small text-muted mt-4">
             <div>
               <b class="font-weight-semibold">{{ "dateUpdated" | i18n }}:</b>
-              {{ cipher.revisionDate | date: "medium" }}
+              {{ cipher.revisionDate | date : "medium" }}
             </div>
             <div *ngIf="cipher.creationDate">
               <b class="font-weight-semibold">{{ "dateCreated" | i18n }}:</b>
-              {{ cipher.creationDate | date: "medium" }}
+              {{ cipher.creationDate | date : "medium" }}
             </div>
             <div *ngIf="showRevisionDate">
               <b class="font-weight-semibold">{{ "datePasswordUpdated" | i18n }}:</b>
-              {{ cipher.passwordRevisionDisplayDate | date: "medium" }}
+              {{ cipher.passwordRevisionDisplayDate | date : "medium" }}
             </div>
             <div *ngIf="hasPasswordHistory">
               <b class="font-weight-semibold">{{ "passwordHistory" | i18n }}:</b>
@@ -891,7 +891,7 @@
             </div>
             <div class="ml-3" *ngIf="viewingPasswordHistory">
               <div *ngFor="let ph of cipher.passwordHistory">
-                {{ ph.lastUsedDate | date: "short" }} -
+                {{ ph.lastUsedDate | date : "short" }} -
                 <bit-color-password [password]="ph.password"></bit-color-password>
               </div>
             </div>

apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-delete-dialog/bulk-delete-dialog.component.html

@@ -5,15 +5,15 @@
   <span bitDialogContent>
     <ng-container *ngIf="!permanent">
       <span *ngIf="cipherIds?.length">
-        {{ "deleteSelectedItemsDesc" | i18n: cipherIds.length }}
+        {{ "deleteSelectedItemsDesc" | i18n : cipherIds.length }}
       </span>
       <span *ngIf="collectionIds?.length">
-        {{ "deleteSelectedCollectionsDesc" | i18n: collectionIds.length }}
+        {{ "deleteSelectedCollectionsDesc" | i18n : collectionIds.length }}
       </span>
       {{ "deleteSelectedConfirmation" | i18n }}
     </ng-container>
     <ng-container *ngIf="permanent">
-      {{ "permanentlyDeleteSelectedItemsDesc" | i18n: cipherIds.length }}
+      {{ "permanentlyDeleteSelectedItemsDesc" | i18n : cipherIds.length }}
     </ng-container>
   </span>
   <div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">

apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-move-dialog/bulk-move-dialog.component.html

@@ -4,7 +4,7 @@
       {{ "moveSelected" | i18n }}
     </span>
     <span bitDialogContent>
-      <p>{{ "moveSelectedItemsDesc" | i18n: cipherIds.length }}</p>
+      <p>{{ "moveSelectedItemsDesc" | i18n : cipherIds.length }}</p>
       <bit-form-field>
         <bit-label for="folder">{{ "folder" | i18n }}</bit-label>
         <select bitInput formControlName="folderId">

apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-restore-dialog/bulk-restore-dialog.component.html

@@ -3,7 +3,7 @@
     {{ "restoreSelected" | i18n }}
   </span>
   <span bitDialogContent>
-    {{ "restoreSelectedItemsDesc" | i18n: cipherIds.length }}
+    {{ "restoreSelectedItemsDesc" | i18n : cipherIds.length }}
   </span>
   <div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
     <button bitButton type="submit" buttonType="primary" [bitAction]="submit">

apps/web/src/app/vault/individual-vault/bulk-action-dialogs/bulk-share-dialog/bulk-share-dialog.component.html

@@ -7,7 +7,7 @@
     <p>
       {{
         "moveSelectedItemsCountDesc"
-          | i18n: this.ciphers.length:shareableCiphers.length:nonShareableCount
+          | i18n : this.ciphers.length : shareableCiphers.length : nonShareableCount
       }}
     </p>
     <bit-form-field>

apps/web/src/app/vault/individual-vault/organization-badge/organization-name-badge.component.html

@@ -7,5 +7,5 @@
   appA11yTitle="{{ organizationName }}"
   (click)="emitOnOrganizationClicked()"
 >
-  {{ organizationName | ellipsis: 13 }}
+  {{ organizationName | ellipsis : 13 }}
 </button>

apps/web/src/app/vault/individual-vault/vault-filter/shared/models/routed-vault-filter.model.ts

@@ -5,7 +5,7 @@ export const All = "all";
 // TODO: Remove `All` when moving to vertical navigation.
 const itemTypes = ["favorites", "login", "card", "identity", "note", "trash", All] as const;
 
-export type RoutedVaultFilterItemType = typeof itemTypes[number];
+export type RoutedVaultFilterItemType = (typeof itemTypes)[number];
 
 export function isRoutedVaultFilterItemType(value: unknown): value is RoutedVaultFilterItemType {
   return itemTypes.includes(value as any);

apps/web/src/app/vault/individual-vault/vault-header/vault-header.component.html

@@ -8,7 +8,7 @@
       >
         <!-- First node in the tree is the "Org Name Vault" item. The rest come from user input. -->
         <ng-container *ngIf="first">
-          {{ activeOrganizationId | orgNameFromId: (organizations$ | async) }}
+          {{ activeOrganizationId | orgNameFromId : (organizations$ | async) }}
           {{ "vault" | i18n | lowercase }}
         </ng-container>
         <ng-container *ngIf="!first">{{ collection.node.name }}</ng-container>

apps/web/src/app/vault/individual-vault/vault-items.component.html

@@ -113,7 +113,7 @@
         <td bitCell>
           <ng-container *ngIf="!organization">
             <app-org-badge
-              organizationName="{{ col.node.organizationId | orgNameFromId: organizations }}"
+              organizationName="{{ col.node.organizationId | orgNameFromId : organizations }}"
               [profileName]="profileName"
               (onOrganizationClicked)="onOrganizationClicked(col.node.organizationId)"
               appStopProp
@@ -224,7 +224,7 @@
         <td bitCell>
           <ng-container *ngIf="!organization">
             <app-org-badge
-              organizationName="{{ c.organizationId | orgNameFromId: organizations }}"
+              organizationName="{{ c.organizationId | orgNameFromId : organizations }}"
               profileName="{{ profileName }}"
               (onOrganizationClicked)="onOrganizationClicked(c.organizationId)"
               appStopProp

apps/web/src/app/vault/org-vault/collection-badge/collection-name-badge.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngFor="let c of shownCollections">
-  <span bitBadge badgeType="secondary">{{ c | collectionNameFromId: collections }}</span>
+  <span bitBadge badgeType="secondary">{{ c | collectionNameFromId : collections }}</span>
 </ng-container>
 <ng-container *ngIf="showXMore">
   <span bitBadge badgeType="secondary">+ {{ xMoreCount }} more</span>

apps/web/src/app/vault/org-vault/vault-header/vault-header.component.html

@@ -8,7 +8,7 @@
       >
         <!-- First node in the tree is the "Org Name Vault" item. The rest come from user input. -->
         <ng-container *ngIf="first">
-          {{ activeOrganizationId | orgNameFromId: (organizations$ | async) }}
+          {{ activeOrganizationId | orgNameFromId : (organizations$ | async) }}
           {{ "vault" | i18n | lowercase }}
         </ng-container>
         <ng-container *ngIf="!first">{{ collection.node.name }}</ng-container>

apps/web/src/auth/lock.component.html

@@ -34,7 +34,7 @@
               </button>
             </div>
             <small class="text-muted form-text">
-              {{ "loggedInAsEmailOn" | i18n: email:webVaultHostname }}
+              {{ "loggedInAsEmailOn" | i18n : email : webVaultHostname }}
             </small>
           </div>
           <hr />

apps/web/src/auth/remove-password.component.html

@@ -18,7 +18,7 @@
       <hr />
       <div class="card d-block">
         <div class="card-body">
-          <p>{{ "convertOrganizationEncryptionDesc" | i18n: organization.name }}</p>
+          <p>{{ "convertOrganizationEncryptionDesc" | i18n : organization.name }}</p>
 
           <button
             type="button"

apps/web/src/auth/settings/two-factor-email.component.html

@@ -71,7 +71,7 @@
                 <span>{{ "sendEmail" | i18n }}</span>
               </button>
               <span class="text-success ml-3" *ngIf="sentEmail">
-                {{ "verificationCodeEmailSent" | i18n: sentEmail }}
+                {{ "verificationCodeEmailSent" | i18n : sentEmail }}
               </span>
             </div>
             <div class="form-group">

apps/web/src/auth/settings/two-factor-webauthn.component.html

@@ -52,7 +52,7 @@
               [appApiAction]="k.removePromise"
             >
               <i class="bwi bwi-li bwi-key"></i>
-              <strong *ngIf="!k.configured || !k.name">{{ "webAuthnkeyX" | i18n: i + 1 }}</strong>
+              <strong *ngIf="!k.configured || !k.name">{{ "webAuthnkeyX" | i18n : i + 1 }}</strong>
               <strong *ngIf="k.configured && k.name">{{ k.name }}</strong>
               <ng-container *ngIf="k.configured && !$any(removeKeyBtn).loading">
                 <ng-container *ngIf="k.migrated">

apps/web/src/auth/settings/two-factor-yubikey.component.html

@@ -57,7 +57,7 @@
           <hr />
           <div class="row">
             <div class="form-group col-6" *ngFor="let k of keys; let i = index">
-              <label for="key{{ i + 1 }}">{{ "yubikeyX" | i18n: i + 1 }}</label>
+              <label for="key{{ i + 1 }}">{{ "yubikeyX" | i18n : i + 1 }}</label>
               <input
                 id="key{{ i + 1 }}"
                 type="password"

apps/web/src/auth/two-factor.component.html

@@ -28,7 +28,7 @@
               {{ "enterVerificationCodeApp" | i18n }}
             </p>
             <p *ngIf="selectedProviderType === providerType.Email">
-              {{ "enterVerificationCodeEmail" | i18n: twoFactorEmail }}
+              {{ "enterVerificationCodeEmail" | i18n : twoFactorEmail }}
             </p>
             <div class="form-group">
               <label for="code" class="sr-only">{{ "verificationCode" | i18n }}</label>

apps/web/src/scss/variables.scss

@@ -350,4 +350,4 @@ $themes: (
 
 @function themed($key) {
   @return map-get($theme-map, $key);
-} ;
+}

bitwarden_license/bit-web/src/app/organizations/manage/domain-verification/domain-verification.component.html

@@ -49,7 +49,7 @@
               }}</span>
             </td>
             <td bitCell class="tw-text-muted">
-              {{ orgDomain.lastCheckedDate | date: "medium" }}
+              {{ orgDomain.lastCheckedDate | date : "medium" }}
             </td>
 
             <td bitCell class="table-list-options tw-text-right">

bitwarden_license/bit-web/src/app/providers/clients/clients.component.html

@@ -39,7 +39,7 @@
 </ng-container>
 
 <ng-container
-  *ngIf="!loading && (clients | search: searchText:'organizationName':'id') as searchedClients"
+  *ngIf="!loading && (clients | search : searchText : 'organizationName' : 'id') as searchedClients"
 >
   <p *ngIf="!searchedClients.length">{{ "noClientsInList" | i18n }}</p>
   <ng-container *ngIf="searchedClients.length">

bitwarden_license/bit-web/src/app/providers/manage/events.component.html

@@ -76,7 +76,7 @@
     </thead>
     <tbody>
       <tr *ngFor="let e of events">
-        <td>{{ e.date | date: "medium" }}</td>
+        <td>{{ e.date | date : "medium" }}</td>
         <td>
           <i
             class="text-muted bwi bwi-lg {{ e.appIcon }}"

bitwarden_license/bit-web/src/app/providers/manage/people.component.html

@@ -100,7 +100,9 @@
 <ng-container
   *ngIf="
     !loading &&
-    (isPaging() ? pagedUsers : (users | search: searchText:'name':'email':'id')) as searchedUsers
+    (isPaging()
+      ? pagedUsers
+      : (users | search : searchText : 'name' : 'email' : 'id')) as searchedUsers
   "
 >
   <p *ngIf="!searchedUsers.length">{{ "noUsersInList" | i18n }}</p>

bitwarden_license/bit-web/src/app/providers/manage/user-add-edit.component.html

@@ -43,7 +43,7 @@
               required
               appAutoFocus
             />
-            <small class="text-muted">{{ "inviteMultipleEmailDesc" | i18n: "20" }}</small>
+            <small class="text-muted">{{ "inviteMultipleEmailDesc" | i18n : "20" }}</small>
           </div>
         </ng-container>
         <h3>

bitwarden_license/bit-web/src/app/secrets-manager/overview/onboarding.component.html

@@ -5,7 +5,7 @@
       <div class="tw-text-lg">{{ title }}</div>
       <bit-progress class="tw-flex-1" [showText]="false" [barWidth]="barWidth"></bit-progress>
       <span *ngIf="tasks.length > 0; else spinner">
-        {{ "complete" | i18n: amountCompleted:tasks.length }}
+        {{ "complete" | i18n : amountCompleted : tasks.length }}
       </span>
       <i
         class="bwi tw-my-auto"

bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.html

@@ -50,7 +50,7 @@
         [projects]="view.latestProjects"
       ></sm-projects-list>
       <div *ngIf="view.allProjects.length > 0" class="tw-ml-auto tw-mt-4 tw-max-w-max">
-        {{ "showingPortionOfTotal" | i18n: view.latestProjects.length:view.allProjects.length }}
+        {{ "showingPortionOfTotal" | i18n : view.latestProjects.length : view.allProjects.length }}
         <a bitLink routerLink="projects" class="tw-ml-2">{{ "viewAll" | i18n }}</a>
       </div>
     </sm-section>
@@ -66,7 +66,7 @@
         [secrets]="view.latestSecrets"
       ></sm-secrets-list>
       <div *ngIf="view.allSecrets.length > 0" class="tw-ml-auto tw-mt-4 tw-max-w-max">
-        {{ "showingPortionOfTotal" | i18n: view.latestSecrets.length:view.allSecrets.length }}
+        {{ "showingPortionOfTotal" | i18n : view.latestSecrets.length : view.allSecrets.length }}
         <a bitLink routerLink="secrets" class="tw-ml-2">{{ "viewAll" | i18n }}</a>
       </div>
     </sm-section>

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/access-list.component.html

@@ -59,9 +59,9 @@
       <td bitCell>{{ token.name }}</td>
       <td bitCell>{{ permission(token) | i18n }}</td>
       <td bitCell>
-        {{ token.expireAt === null ? ("never" | i18n) : (token.expireAt | date: "medium") }}
+        {{ token.expireAt === null ? ("never" | i18n) : (token.expireAt | date : "medium") }}
       </td>
-      <td bitCell>{{ token.revisionDate | date: "medium" }}</td>
+      <td bitCell>{{ token.revisionDate | date : "medium" }}</td>
       <td bitCell>
         <button
           type="button"

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/dialogs/access-token-dialog.component.html

@@ -10,7 +10,9 @@
     <bit-callout type="info" [title]="'accessTokenCallOutTitle' | i18n">
       {{ "downloadAccessToken" | i18n }}<br />
       {{ "expiresOnAccessToken" | i18n }}
-      {{ data.expirationDate === null ? ("never" | i18n) : (data.expirationDate | date: "medium") }}
+      {{
+        data.expirationDate === null ? ("never" | i18n) : (data.expirationDate | date : "medium")
+      }}
     </bit-callout>
 
     <bit-form-field class="tw-mb-0">
@@ -18,7 +20,7 @@
       <textarea bitInput disabled rows="4">{{ data.accessToken }}</textarea>
     </bit-form-field>
     {{ "expiresOnAccessToken" | i18n }}
-    {{ data.expirationDate === null ? ("never" | i18n) : (data.expirationDate | date: "medium") }}
+    {{ data.expirationDate === null ? ("never" | i18n) : (data.expirationDate | date : "medium") }}
   </div>
 
   <div bitDialogFooter class="tw-flex tw-gap-2">

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/access/dialogs/expiration-options.component.html

@@ -4,7 +4,7 @@
     <select bitInput formControlName="expires">
       <option ngValue="never">{{ "never" | i18n }}</option>
       <option *ngFor="let day of expirationDayOptions" [ngValue]="day">
-        {{ "days" | i18n: day }}
+        {{ "days" | i18n : day }}
       </option>
       <option ngValue="custom">{{ "custom" | i18n }}</option>
     </select>
@@ -14,7 +14,7 @@
     <input
       bitInput
       type="datetime-local"
-      [min]="currentDate | date: 'YYYY-MM-ddThh:mm'"
+      [min]="currentDate | date : 'YYYY-MM-ddThh:mm'"
       formControlName="expireDateTime"
     />
   </bit-form-field>

bitwarden_license/bit-web/src/app/secrets-manager/service-accounts/service-accounts-list.component.html

@@ -67,7 +67,7 @@
         <!-- TODO add number of secrets once mapping is implemented-->
         <span> 0 </span>
       </td>
-      <td bitCell>{{ serviceAccount.revisionDate | date: "medium" }}</td>
+      <td bitCell>{{ serviceAccount.revisionDate | date : "medium" }}</td>
       <td bitCell>
         <button
           type="button"

bitwarden_license/bit-web/src/app/secrets-manager/settings/porting/sm-export.component.html

@@ -3,7 +3,7 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit">
   <div class="tw-my-4 tw-max-w-xl">
     <app-callout type="info" title="{{ 'exportingOrganizationSecretDataTitle' | i18n }}">
-      {{ "exportingOrganizationSecretDataDescription" | i18n: orgName }}
+      {{ "exportingOrganizationSecretDataDescription" | i18n : orgName }}
     </app-callout>
   </div>
 

bitwarden_license/bit-web/src/app/secrets-manager/shared/projects-list.component.html

@@ -62,7 +62,7 @@
           }}</a>
         </div>
       </td>
-      <td bitCell class="tw-whitespace-nowrap">{{ project.revisionDate | date: "medium" }}</td>
+      <td bitCell class="tw-whitespace-nowrap">{{ project.revisionDate | date : "medium" }}</td>
       <td bitCell>
         <button
           type="button"

bitwarden_license/bit-web/src/app/secrets-manager/shared/secrets-list.component.html

@@ -78,14 +78,14 @@
           class="tw-ml-1"
           [title]="project.name"
         >
-          {{ project.name | ellipsis: 32 }}
+          {{ project.name | ellipsis : 32 }}
         </span>
         <span *ngIf="secret.projects.length === 0" bitBadge badgeType="warning" class="tw-ml-1"
           ><i class="bwi bwi-fw bwi-exclamation-triangle tw-mr-1" aria-hidden="true"></i
           >{{ "unassigned" | i18n }}</span
         >
       </td>
-      <td bitCell class="tw-whitespace-nowrap">{{ secret.revisionDate | date: "medium" }}</td>
+      <td bitCell class="tw-whitespace-nowrap">{{ secret.revisionDate | date : "medium" }}</td>
       <td bitCell>
         <button
           type="button"

libs/angular/src/components/callout.component.html

@@ -12,10 +12,10 @@
     {{ enforcedPolicyMessage }}
     <ul>
       <li *ngIf="enforcedPolicyOptions?.minComplexity > 0">
-        {{ "policyInEffectMinComplexity" | i18n: getPasswordScoreAlertDisplay() }}
+        {{ "policyInEffectMinComplexity" | i18n : getPasswordScoreAlertDisplay() }}
       </li>
       <li *ngIf="enforcedPolicyOptions?.minLength > 0">
-        {{ "policyInEffectMinLength" | i18n: enforcedPolicyOptions?.minLength.toString() }}
+        {{ "policyInEffectMinLength" | i18n : enforcedPolicyOptions?.minLength.toString() }}
       </li>
       <li *ngIf="enforcedPolicyOptions?.requireUpper">
         {{ "policyInEffectUppercase" | i18n }}
@@ -27,7 +27,7 @@
         {{ "policyInEffectNumbers" | i18n }}
       </li>
       <li *ngIf="enforcedPolicyOptions?.requireSpecial">
-        {{ "policyInEffectSpecial" | i18n: "!@#$%^&*" }}
+        {{ "policyInEffectSpecial" | i18n : "!@#$%^&*" }}
       </li>
     </ul>
   </div>