Move to libs

libs/angular/src/directives/a11y-invalid.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, ElementRef, OnDestroy, OnInit } from "@angular/core";
+import { NgControl } from "@angular/forms";
+import { Subscription } from "rxjs";
+
+@Directive({
+  selector: "[appA11yInvalid]",
+})
+export class A11yInvalidDirective implements OnDestroy, OnInit {
+  private sub: Subscription;
+
+  constructor(private el: ElementRef<HTMLInputElement>, private formControlDirective: NgControl) {}
+
+  ngOnInit() {
+    this.sub = this.formControlDirective.control.statusChanges.subscribe((status) => {
+      if (status === "INVALID") {
+        this.el.nativeElement.setAttribute("aria-invalid", "true");
+      } else if (status === "VALID") {
+        this.el.nativeElement.setAttribute("aria-invalid", "false");
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.sub?.unsubscribe();
+  }
+}

libs/angular/src/directives/a11y-title.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, ElementRef, Input, Renderer2 } from "@angular/core";
+
+@Directive({
+  selector: "[appA11yTitle]",
+})
+export class A11yTitleDirective {
+  @Input() set appA11yTitle(title: string) {
+    this.title = title;
+  }
+
+  private title: string;
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  ngOnInit() {
+    if (!this.el.nativeElement.hasAttribute("title")) {
+      this.renderer.setAttribute(this.el.nativeElement, "title", this.title);
+    }
+    if (!this.el.nativeElement.hasAttribute("aria-label")) {
+      this.renderer.setAttribute(this.el.nativeElement, "aria-label", this.title);
+    }
+  }
+}

libs/angular/src/directives/api-action.directive.ts

@@ -0,0 +1,49 @@
+import { Directive, ElementRef, Input, OnChanges } from "@angular/core";
+
+import { LogService } from "jslib-common/abstractions/log.service";
+import { ErrorResponse } from "jslib-common/models/response/errorResponse";
+
+import { ValidationService } from "../services/validation.service";
+
+/**
+ * Provides error handling, in particular for any error returned by the server in an api call.
+ * Attach it to a <form> element and provide the name of the class property that will hold the api call promise.
+ * e.g. <form [appApiAction]="this.formPromise">
+ * Any errors/rejections that occur will be intercepted and displayed as error toasts.
+ */
+@Directive({
+  selector: "[appApiAction]",
+})
+export class ApiActionDirective implements OnChanges {
+  @Input() appApiAction: Promise<any>;
+
+  constructor(
+    private el: ElementRef,
+    private validationService: ValidationService,
+    private logService: LogService
+  ) {}
+
+  ngOnChanges(changes: any) {
+    if (this.appApiAction == null || this.appApiAction.then == null) {
+      return;
+    }
+
+    this.el.nativeElement.loading = true;
+
+    this.appApiAction.then(
+      (response: any) => {
+        this.el.nativeElement.loading = false;
+      },
+      (e: any) => {
+        this.el.nativeElement.loading = false;
+
+        if ((e as ErrorResponse).captchaRequired) {
+          this.logService.error("Captcha required error response: " + e.getSingleMessage());
+          return;
+        }
+        this.logService?.error(`Received API exception: ${e}`);
+        this.validationService.showError(e);
+      }
+    );
+  }
+}

libs/angular/src/directives/autofocus.directive.ts

@@ -0,0 +1,27 @@
+import { Directive, ElementRef, Input, NgZone } from "@angular/core";
+import { take } from "rxjs/operators";
+
+import { Utils } from "jslib-common/misc/utils";
+
+@Directive({
+  selector: "[appAutofocus]",
+})
+export class AutofocusDirective {
+  @Input() set appAutofocus(condition: boolean | string) {
+    this.autofocus = condition === "" || condition === true;
+  }
+
+  private autofocus: boolean;
+
+  constructor(private el: ElementRef, private ngZone: NgZone) {}
+
+  ngOnInit() {
+    if (!Utils.isMobileBrowser && this.autofocus) {
+      if (this.ngZone.isStable) {
+        this.el.nativeElement.focus();
+      } else {
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => this.el.nativeElement.focus());
+      }
+    }
+  }
+}

libs/angular/src/directives/blur-click.directive.ts

@@ -0,0 +1,12 @@
+import { Directive, ElementRef, HostListener } from "@angular/core";
+
+@Directive({
+  selector: "[appBlurClick]",
+})
+export class BlurClickDirective {
+  constructor(private el: ElementRef) {}
+
+  @HostListener("click") onClick() {
+    this.el.nativeElement.blur();
+  }
+}

libs/angular/src/directives/box-row.directive.ts

@@ -0,0 +1,59 @@
+import { Directive, ElementRef, HostListener, OnInit } from "@angular/core";
+
+@Directive({
+  selector: "[appBoxRow]",
+})
+export class BoxRowDirective implements OnInit {
+  el: HTMLElement = null;
+  formEls: Element[];
+
+  constructor(elRef: ElementRef) {
+    this.el = elRef.nativeElement;
+  }
+
+  ngOnInit(): void {
+    this.formEls = Array.from(
+      this.el.querySelectorAll('input:not([type="hidden"]), select, textarea')
+    );
+    this.formEls.forEach((formEl) => {
+      formEl.addEventListener(
+        "focus",
+        () => {
+          this.el.classList.add("active");
+        },
+        false
+      );
+
+      formEl.addEventListener(
+        "blur",
+        () => {
+          this.el.classList.remove("active");
+        },
+        false
+      );
+    });
+  }
+
+  @HostListener("click", ["$event"]) onClick(event: Event) {
+    const target = event.target as HTMLElement;
+    if (
+      target !== this.el &&
+      !target.classList.contains("progress") &&
+      !target.classList.contains("progress-bar")
+    ) {
+      return;
+    }
+
+    if (this.formEls.length > 0) {
+      const formEl = this.formEls[0] as HTMLElement;
+      if (formEl.tagName.toLowerCase() === "input") {
+        const inputEl = formEl as HTMLInputElement;
+        if (inputEl.type != null && inputEl.type.toLowerCase() === "checkbox") {
+          inputEl.click();
+          return;
+        }
+      }
+      formEl.focus();
+    }
+  }
+}

libs/angular/src/directives/cipherListVirtualScroll.directive.ts

@@ -0,0 +1,76 @@
+import {
+  CdkFixedSizeVirtualScroll,
+  FixedSizeVirtualScrollStrategy,
+  VIRTUAL_SCROLL_STRATEGY,
+} from "@angular/cdk/scrolling";
+import { Directive, forwardRef } from "@angular/core";
+
+// Custom virtual scroll strategy for cdk-virtual-scroll
+// Uses a sample list item to set the itemSize for FixedSizeVirtualScrollStrategy
+// The use case is the same as FixedSizeVirtualScrollStrategy, but it avoids locking in pixel sizes in the template.
+export class CipherListVirtualScrollStrategy extends FixedSizeVirtualScrollStrategy {
+  private checkItemSizeCallback: any;
+  private timeout: any;
+
+  constructor(
+    itemSize: number,
+    minBufferPx: number,
+    maxBufferPx: number,
+    checkItemSizeCallback: any
+  ) {
+    super(itemSize, minBufferPx, maxBufferPx);
+    this.checkItemSizeCallback = checkItemSizeCallback;
+  }
+
+  onContentRendered() {
+    if (this.timeout != null) {
+      clearTimeout(this.timeout);
+    }
+
+    this.timeout = setTimeout(this.checkItemSizeCallback, 500);
+  }
+}
+
+export function _cipherListVirtualScrollStrategyFactory(cipherListDir: CipherListVirtualScroll) {
+  return cipherListDir._scrollStrategy;
+}
+
+@Directive({
+  selector: "cdk-virtual-scroll-viewport[itemSize]",
+  providers: [
+    {
+      provide: VIRTUAL_SCROLL_STRATEGY,
+      useFactory: _cipherListVirtualScrollStrategyFactory,
+      deps: [forwardRef(() => CipherListVirtualScroll)],
+    },
+  ],
+})
+export class CipherListVirtualScroll extends CdkFixedSizeVirtualScroll {
+  _scrollStrategy: CipherListVirtualScrollStrategy;
+
+  constructor() {
+    super();
+    this._scrollStrategy = new CipherListVirtualScrollStrategy(
+      this.itemSize,
+      this.minBufferPx,
+      this.maxBufferPx,
+      this.checkAndUpdateItemSize
+    );
+  }
+
+  checkAndUpdateItemSize = () => {
+    const sampleItem = document.querySelector(
+      "cdk-virtual-scroll-viewport .virtual-scroll-item"
+    ) as HTMLElement;
+    const newItemSize = sampleItem?.offsetHeight;
+
+    if (newItemSize != null && newItemSize !== this.itemSize) {
+      this.itemSize = newItemSize;
+      this._scrollStrategy.updateItemAndBufferSize(
+        this.itemSize,
+        this.minBufferPx,
+        this.maxBufferPx
+      );
+    }
+  };
+}

libs/angular/src/directives/fallback-src.directive.ts

@@ -0,0 +1,14 @@
+import { Directive, ElementRef, HostListener, Input } from "@angular/core";
+
+@Directive({
+  selector: "[appFallbackSrc]",
+})
+export class FallbackSrcDirective {
+  @Input("appFallbackSrc") appFallbackSrc: string;
+
+  constructor(private el: ElementRef) {}
+
+  @HostListener("error") onError() {
+    this.el.nativeElement.src = this.appFallbackSrc;
+  }
+}

libs/angular/src/directives/input-strip-spaces.directive.ts

@@ -0,0 +1,12 @@
+import { Directive, ElementRef, HostListener } from "@angular/core";
+
+@Directive({
+  selector: "input[appInputStripSpaces]",
+})
+export class InputStripSpacesDirective {
+  constructor(private el: ElementRef<HTMLInputElement>) {}
+
+  @HostListener("input") onInput() {
+    this.el.nativeElement.value = this.el.nativeElement.value.replace(/ /g, "");
+  }
+}

libs/angular/src/directives/input-verbatim.directive.ts

@@ -0,0 +1,32 @@
+import { Directive, ElementRef, Input, Renderer2 } from "@angular/core";
+
+@Directive({
+  selector: "[appInputVerbatim]",
+})
+export class InputVerbatimDirective {
+  @Input() set appInputVerbatim(condition: boolean | string) {
+    this.disableComplete = condition === "" || condition === true;
+  }
+
+  private disableComplete: boolean;
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  ngOnInit() {
+    if (this.disableComplete && !this.el.nativeElement.hasAttribute("autocomplete")) {
+      this.renderer.setAttribute(this.el.nativeElement, "autocomplete", "off");
+    }
+    if (!this.el.nativeElement.hasAttribute("autocapitalize")) {
+      this.renderer.setAttribute(this.el.nativeElement, "autocapitalize", "none");
+    }
+    if (!this.el.nativeElement.hasAttribute("autocorrect")) {
+      this.renderer.setAttribute(this.el.nativeElement, "autocorrect", "none");
+    }
+    if (!this.el.nativeElement.hasAttribute("spellcheck")) {
+      this.renderer.setAttribute(this.el.nativeElement, "spellcheck", "false");
+    }
+    if (!this.el.nativeElement.hasAttribute("inputmode")) {
+      this.renderer.setAttribute(this.el.nativeElement, "inputmode", "verbatim");
+    }
+  }
+}

libs/angular/src/directives/not-premium.directive.ts

@@ -0,0 +1,27 @@
+import { Directive, OnInit, TemplateRef, ViewContainerRef } from "@angular/core";
+
+import { StateService } from "jslib-common/abstractions/state.service";
+
+/**
+ * Hides the element if the user has premium.
+ */
+@Directive({
+  selector: "[appNotPremium]",
+})
+export class NotPremiumDirective implements OnInit {
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef,
+    private stateService: StateService
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    const premium = await this.stateService.getCanAccessPremium();
+
+    if (premium) {
+      this.viewContainer.clear();
+    } else {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+    }
+  }
+}

libs/angular/src/directives/premium.directive.ts

@@ -0,0 +1,27 @@
+import { Directive, OnInit, TemplateRef, ViewContainerRef } from "@angular/core";
+
+import { StateService } from "jslib-common/abstractions/state.service";
+
+/**
+ * Only shows the element if the user has premium.
+ */
+@Directive({
+  selector: "[appPremium]",
+})
+export class PremiumDirective implements OnInit {
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private viewContainer: ViewContainerRef,
+    private stateService: StateService
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    const premium = await this.stateService.getCanAccessPremium();
+
+    if (premium) {
+      this.viewContainer.createEmbeddedView(this.templateRef);
+    } else {
+      this.viewContainer.clear();
+    }
+  }
+}

libs/angular/src/directives/select-copy.directive.ts

@@ -0,0 +1,37 @@
+import { Directive, ElementRef, HostListener } from "@angular/core";
+
+import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
+
+@Directive({
+  selector: "[appSelectCopy]",
+})
+export class SelectCopyDirective {
+  constructor(private el: ElementRef, private platformUtilsService: PlatformUtilsService) {}
+
+  @HostListener("copy") onCopy() {
+    if (window == null) {
+      return;
+    }
+    let copyText = "";
+    const selection = window.getSelection();
+    for (let i = 0; i < selection.rangeCount; i++) {
+      const range = selection.getRangeAt(i);
+      const text = range.toString();
+
+      // The selection should only contain one line of text. In some cases however, the
+      // selection contains newlines and space characters from the indentation of following
+      // sibling nodes. To avoid copying passwords containing trailing newlines and spaces
+      // that aren't part of the password, the selection has to be trimmed.
+      let stringEndPos = text.length;
+      const newLinePos = text.search(/(?:\r\n|\r|\n)/);
+      if (newLinePos > -1) {
+        const otherPart = text.substr(newLinePos).trim();
+        if (otherPart === "") {
+          stringEndPos = newLinePos;
+        }
+      }
+      copyText += text.substring(0, stringEndPos);
+    }
+    this.platformUtilsService.copyToClipboard(copyText, { window: window });
+  }
+}

libs/angular/src/directives/stop-click.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, HostListener } from "@angular/core";
+
+@Directive({
+  selector: "[appStopClick]",
+})
+export class StopClickDirective {
+  @HostListener("click", ["$event"]) onClick($event: MouseEvent) {
+    $event.preventDefault();
+  }
+}

libs/angular/src/directives/stop-prop.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, HostListener } from "@angular/core";
+
+@Directive({
+  selector: "[appStopProp]",
+})
+export class StopPropDirective {
+  @HostListener("click", ["$event"]) onClick($event: MouseEvent) {
+    $event.stopPropagation();
+  }
+}

libs/angular/src/directives/true-false-value.directive.ts

@@ -0,0 +1,49 @@
+import { Directive, ElementRef, forwardRef, HostListener, Input, Renderer2 } from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+
+// ref: https://juristr.com/blog/2018/02/ng-true-value-directive/
+@Directive({
+  selector: "input[type=checkbox][appTrueFalseValue]",
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TrueFalseValueDirective),
+      multi: true,
+    },
+  ],
+})
+export class TrueFalseValueDirective implements ControlValueAccessor {
+  @Input() trueValue = true;
+  @Input() falseValue = false;
+
+  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
+
+  @HostListener("change", ["$event"])
+  onHostChange(ev: any) {
+    this.propagateChange(ev.target.checked ? this.trueValue : this.falseValue);
+  }
+
+  writeValue(obj: any): void {
+    if (obj === this.trueValue) {
+      this.renderer.setProperty(this.elementRef.nativeElement, "checked", true);
+    } else {
+      this.renderer.setProperty(this.elementRef.nativeElement, "checked", false);
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    /* nothing */
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    /* nothing */
+  }
+
+  private propagateChange = (_: any) => {
+    /* nothing */
+  };
+}