[PM-14345] Enabling drag and drop for cipher fields (#12067)

* enabling drag and drop for cipher fields

* adding drag and drop to totp and fido

* removing code changes to wrong file

* undoing uneeded change

* Changes suggested by Shane

* fixes

* fixes

* moving export to the correct spot

---------

Co-authored-by: --global <>

libs/angular/src/directives/text-drag.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, HostListener, Input } from "@angular/core";
+
+@Directive({
+  selector: "[appTextDrag]",
+  standalone: true,
+  host: {
+    draggable: "true",
+    class: "tw-cursor-move",
+  },
+})
+export class TextDragDirective {
+  @Input({
+    alias: "appTextDrag",
+    required: true,
+  })
+  data = "";
+
+  @HostListener("dragstart", ["$event"])
+  onDragStart(event: DragEvent) {
+    event.dataTransfer.setData("text", this.data);
+  }
+}

libs/angular/src/jslib.module.ts

@@ -43,6 +43,7 @@ import { LaunchClickDirective } from "./directives/launch-click.directive";
 import { NotPremiumDirective } from "./directives/not-premium.directive";
 import { StopClickDirective } from "./directives/stop-click.directive";
 import { StopPropDirective } from "./directives/stop-prop.directive";
+import { TextDragDirective } from "./directives/text-drag.directive";
 import { TrueFalseValueDirective } from "./directives/true-false-value.directive";
 import { CreditCardNumberPipe } from "./pipes/credit-card-number.pipe";
 import { PluralizePipe } from "./pipes/pluralize.pipe";
@@ -81,6 +82,7 @@ import { IconComponent } from "./vault/components/icon.component";
     IconModule,
     LinkModule,
     IconModule,
+    TextDragDirective,
   ],
   declarations: [
     A11yInvalidDirective,
@@ -150,6 +152,7 @@ import { IconComponent } from "./vault/components/icon.component";
     NoInvoicesComponent,
     ManageTaxInformationComponent,
     TwoFactorIconComponent,
+    TextDragDirective,
   ],
   providers: [
     CreditCardNumberPipe,