@simplysm/angular 1.0.138 → 14.0.1

package/src/controls/SdDockControl.ts

@@ -1,156 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  forwardRef,
-  HostBinding,
-  HostListener,
-  Inject,
-  Input,
-  OnDestroy,
-  OnInit
-} from "@angular/core";
-import {SdDockContainerControl} from "./SdDockContainerControl";
-import {ISdNotifyPropertyChange, SdNotifyPropertyChange} from "../commons/SdNotifyPropertyChange";
-import {SdTypeValidate} from "../commons/SdTypeValidate";
-import {SdLocalStorageProvider} from "../providers/SdLocalStorageProvider";
-import {ResizeEvent} from "../commons/ResizeEvent";
-
-@Component({
-  selector: "sd-dock",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <hr *ngIf="!!id" (mousedown)="onResizerMousedown($event)"/>
-    <ng-content></ng-content>`
-})
-export class SdDockControl implements ISdNotifyPropertyChange, OnDestroy, OnInit {
-  @Input()
-  @SdTypeValidate(String)
-  public id?: string;
-
-  @Input()
-  @SdTypeValidate({
-    type: String,
-    includes: ["top", "right", "bottom", "left"],
-    notnull: true
-  })
-
-  @SdNotifyPropertyChange()
-  @HostBinding("attr.sd-position")
-  public position: "top" | "right" | "bottom" | "left" = "top";
-
-  @HostBinding("attr.sd-resizable")
-  public get resizable(): boolean {
-    return !!this.id;
-  }
-
-  private _sizeConfig: { width?: number; height?: number } | undefined;
-  private _isOnDragging = false;
-
-  public constructor(public readonly elRef: ElementRef<HTMLElement>,
-                     @Inject(forwardRef(() => SdDockContainerControl))
-                     private readonly _containerControl: SdDockContainerControl,
-                     private readonly _localStorage: SdLocalStorageProvider) {
-  }
-
-  public ngOnInit(): void {
-    if (this.resizable) {
-      this._sizeConfig = this._localStorage.get(`sd-dock.${this.id}.size-config`);
-
-      if (this._sizeConfig) {
-        const el = this.elRef.nativeElement;
-        if (this._sizeConfig.width && (this.position === "right" || this.position === "left")) {
-          el.style.width = this._sizeConfig.width + "px";
-        }
-        else if (this._sizeConfig.height && (this.position === "top" || this.position === "bottom")) {
-          el.style.height = this._sizeConfig.height + "px";
-        }
-      }
-    }
-  }
-
-  public ngOnDestroy(): void {
-    setTimeout(() => {
-      this._containerControl.redraw();
-    });
-  }
-
-  @HostListener("resize", ["$event"])
-  public onResize(event: ResizeEvent): void {
-    if (this._isOnDragging) return;
-
-    if (event.detail.dimensions.includes("height") && ["top", "bottom"].includes(this.position)) {
-      this._containerControl.redraw();
-    }
-    else if (event.detail.dimensions.includes("width") && ["left", "right"].includes(this.position)) {
-      this._containerControl.redraw();
-    }
-  }
-
-  public onResizerMousedown(event: MouseEvent): void {
-    const el = this.elRef.nativeElement;
-    const startX = event.clientX;
-    const startY = event.clientY;
-    const startHeight = el.clientHeight;
-    const startWidth = el.clientWidth;
-
-    const doDrag = (e: MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      this._isOnDragging = true;
-
-      if (this.position === "bottom") {
-        el.style.height = `${startHeight - e.clientY + startY}px`;
-      }
-      else if (this.position === "right") {
-        el.style.width = `${startWidth - e.clientX + startX}px`;
-      }
-      else if (this.position === "top") {
-        el.style.height = `${startHeight + e.clientY - startY}px`;
-      }
-      else if (this.position === "left") {
-        el.style.width = `${startWidth + e.clientX - startX}px`;
-      }
-    };
-
-    const stopDrag = (e: MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      this._isOnDragging = false;
-
-      document.documentElement!.removeEventListener("mousemove", doDrag, false);
-      document.documentElement!.removeEventListener("mouseup", stopDrag, false);
-
-      if (this.resizable) {
-        if (this.position === "right" || this.position === "left") {
-          const currWidth = el.style.width ? Number(el.style.width.replace("px", "")) : undefined;
-          this._sizeConfig = this._sizeConfig || {};
-          this._sizeConfig.width = currWidth;
-          this._saveSizeConfig();
-        }
-        else {
-          const currHeight = el.style.height ? Number(el.style.height.replace("px", "")) : undefined;
-          this._sizeConfig = this._sizeConfig || {};
-          this._sizeConfig.height = currHeight;
-          this._saveSizeConfig();
-        }
-      }
-
-      this._containerControl.redraw();
-    };
-    document.documentElement!.addEventListener("mousemove", doDrag, false);
-    document.documentElement!.addEventListener("mouseup", stopDrag, false);
-  }
-
-  public sdOnPropertyChange(propertyName: string, oldValue: any, newValue: any): void {
-    if (propertyName === "position") {
-      this._containerControl.redraw();
-    }
-  }
-
-  private _saveSizeConfig(): void {
-    this._localStorage.set(`sd-dock.${this.id}.size-config`, this._sizeConfig);
-  }
-}

package/src/controls/SdDropdownControl.ts

@@ -1,185 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output
-} from "@angular/core";
-import {SdTypeValidate} from "../commons/SdTypeValidate";
-
-@Component({
-  selector: "sd-dropdown",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div class="_sd-dropdown-control" tabindex="0">
-      <ng-content></ng-content>
-    </div>
-    <ng-content select="sd-dropdown-popup"></ng-content>`
-})
-export class SdDropdownControl implements OnInit, OnDestroy {
-  @Input()
-  @SdTypeValidate(Boolean)
-  public set disabled(value: boolean) {
-    this._disabled = value;
-
-    if (value) {
-      this._el.setAttribute("sd-disabled", "true");
-      if (this._controlEl) this._controlEl.removeAttribute("tabindex");
-    }
-    else {
-      this._el.setAttribute("sd-disabled", "false");
-      if (this._controlEl) this._controlEl.setAttribute("tabindex", "0");
-    }
-  }
-
-  public get disabled(): boolean {
-    return this._disabled;
-  }
-
-  private _disabled = false;
-
-  @Output()
-  public readonly open = new EventEmitter();
-
-  @Output()
-  public readonly close = new EventEmitter();
-
-  private _isOpen = false;
-
-  private readonly _el: HTMLElement;
-  private _controlEl!: HTMLElement;
-  private _dropdownEl!: HTMLElement;
-
-  public constructor(private readonly _elRef: ElementRef<HTMLElement>) {
-    this._el = this._elRef.nativeElement;
-  }
-
-  public ngOnInit(): void {
-    this._controlEl = this._el.findAll("> ._sd-dropdown-control")[0] as HTMLElement;
-    this._dropdownEl = this._el.findAll("> sd-dropdown-popup")[0] as HTMLElement;
-
-    this._controlEl.addEventListener("focus", this.focusEventHandler, true);
-    this._controlEl.addEventListener("blur", this.blurEventHandler, true);
-
-    this._dropdownEl.remove();
-
-    this.disabled = this._disabled;
-  }
-
-  public ngOnDestroy(): void {
-    if (this._dropdownEl) {
-      this._dropdownEl.remove();
-      document.removeEventListener("scroll", this.scrollEventHandler, true);
-    }
-  }
-
-  public openPopup(): void {
-    if (this._isOpen) return;
-    this._isOpen = true;
-
-    document.body.appendChild(this._dropdownEl);
-    this._dropdownEl.addEventListener("blur", this.blurEventHandler, true);
-
-    if (window.innerHeight < this._controlEl.windowOffset.top * 2) {
-      Object.assign(
-        this._dropdownEl.style,
-        {
-          top: "",
-          bottom: (window.innerHeight - this._controlEl.windowOffset.top) + "px",
-          left: this._controlEl.windowOffset.left + 1 + "px",
-          minWidth: this._controlEl.clientWidth + "px",
-          opacity: "1",
-          pointerEvents: "auto",
-          transform: "none",
-          borderTopRightRadius: "4px",
-          borderTopLeftRadius: "4px"
-        }
-      );
-    }
-    else {
-      Object.assign(
-        this._dropdownEl.style,
-        {
-          top: (this._controlEl.windowOffset.top + this._controlEl.offsetHeight) + "px",
-          bottom: "",
-          left: this._controlEl.windowOffset.left + 1 + "px",
-          minWidth: this._controlEl.clientWidth + "px",
-          opacity: "1",
-          pointerEvents: "auto",
-          transform: "none",
-          borderBottomRightRadius: "4px",
-          borderBottomLeftRadius: "4px"
-        }
-      );
-    }
-
-    document.addEventListener("scroll", this.scrollEventHandler, true);
-
-    this.open.emit();
-  }
-
-  public closePopup(): void {
-    if (!this._isOpen) return;
-    this._isOpen = false;
-
-    Object.assign(
-      this._dropdownEl.style,
-      {
-        opacity: "0",
-        pointerEvents: "none",
-        transform: "translateY(-10px)"
-      }
-    );
-
-    document.removeEventListener("scroll", this.scrollEventHandler, true);
-
-    this.close.emit();
-  }
-
-  public scrollEventHandler = (event: UIEvent) => {
-    if (this._el.findParent(event.target as HTMLElement)) {
-      if (window.innerHeight < this._controlEl.windowOffset.top * 2) {
-        Object.assign(
-          this._dropdownEl.style,
-          {
-            top: "",
-            bottom: (window.innerHeight - this._controlEl.windowOffset.top) + "px",
-            left: this._controlEl.windowOffset.left + "px"
-          }
-        );
-      }
-      else {
-        Object.assign(
-          this._dropdownEl.style,
-          {
-            top: (this._controlEl.windowOffset.top + this._controlEl.offsetHeight) + "px",
-            bottom: "",
-            left: this._controlEl.windowOffset.left + "px"
-          }
-        );
-      }
-    }
-  };
-
-  public focusEventHandler = (event: FocusEvent) => {
-    this.openPopup();
-  };
-
-  public blurEventHandler = (event: FocusEvent) => {
-    const relatedTarget = event.relatedTarget as HTMLElement;
-    if (
-      relatedTarget && (
-        relatedTarget === this._controlEl ||
-        relatedTarget === this._dropdownEl ||
-        relatedTarget.findParent(this._controlEl) ||
-        relatedTarget.findParent(this._dropdownEl)
-      )
-    ) {
-      return;
-    }
-    this.closePopup();
-  };
-}

package/src/controls/SdDropdownPopupControl.ts

@@ -1,33 +0,0 @@
-import {ChangeDetectionStrategy, Component, ElementRef, OnInit} from "@angular/core";
-import {ResizeEvent} from "../commons/ResizeEvent";
-
-@Component({
-  selector: "sd-dropdown-popup",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div>
-      <ng-content></ng-content>
-    </div>`
-})
-export class SdDropdownPopupControl implements OnInit {
-  public constructor(private readonly _elRef: ElementRef<HTMLElement>) {
-  }
-
-  public ngOnInit(): void {
-    const thisEl = this._elRef.nativeElement;
-    const divEl = this._elRef.nativeElement.firstElementChild!;
-
-    divEl.addEventListener("resize", (e: Event) => {
-      const evt = e as ResizeEvent;
-
-      if (evt.detail.dimensions.includes("height")) {
-        if (divEl.clientHeight > 300) {
-          thisEl.style.height = "300px";
-        }
-        else {
-          delete thisEl.style.height;
-        }
-      }
-    });
-  }
-}

package/src/controls/SdFormControl.ts

@@ -1,26 +0,0 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output} from "@angular/core";
-import {SdTypeValidate} from "../commons/SdTypeValidate";
-
-@Component({
-  selector: "sd-form",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <form (submit)="onSubmit($event)">
-      <ng-content></ng-content>
-    </form>`
-})
-export class SdFormControl {
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-inline")
-  public inline?: boolean;
-
-  @Output()
-  public readonly submit = new EventEmitter<void>();
-
-  public onSubmit(event: Event): void {
-    event.preventDefault();
-    event.stopPropagation();
-    this.submit.emit();
-  }
-}

package/src/controls/SdFormItemControl.ts

@@ -1,26 +0,0 @@
-import {ChangeDetectionStrategy, Component, ContentChild, Input, TemplateRef} from "@angular/core";
-import {SdTypeValidate} from "../commons/SdTypeValidate";
-
-@Component({
-  selector: "sd-form-item",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <label [style.display]="label ? 'display' : 'none'">
-      <ng-container *ngIf="!labelTemplateRef">{{ label }}</ng-container>
-      <ng-container *ngIf="labelTemplateRef">
-        <ng-template [ngTemplateOutlet]="labelTemplateRef"
-                     [ngTemplateOutletContext]="{label: label}"></ng-template>
-      </ng-container>
-    </label>
-    <div>
-      <ng-content></ng-content>
-    </div>`
-})
-export class SdFormItemControl {
-  @Input()
-  @SdTypeValidate(String)
-  public label?: string;
-
-  @ContentChild("label")
-  public labelTemplateRef?: TemplateRef<any>;
-}

package/src/controls/SdGridControl.ts

@@ -1,10 +0,0 @@
-import {ChangeDetectionStrategy, Component} from "@angular/core";
-
-@Component({
-  selector: "sd-grid",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <ng-content></ng-content>`
-})
-export class SdGridControl {
-}

package/src/controls/SdGridItemControl.ts

@@ -1,13 +0,0 @@
-import {ChangeDetectionStrategy, Component, HostBinding, Input} from "@angular/core";
-
-@Component({
-  selector: "sd-grid-item",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <ng-content></ng-content>`
-})
-export class SdGridItemControl {
-  @Input()
-  @HostBinding("style.width")
-  public width = "100%";
-}

package/src/controls/SdHtmlEditorControl.ts

@@ -1,109 +0,0 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output} from "@angular/core";
-import {SdTypeValidate} from "../commons/SdTypeValidate";
-import {DomSanitizer, SafeHtml} from "@angular/platform-browser";
-
-@Component({
-  selector: "sd-html-editor",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <sd-dock-container>
-      <sd-dock class="_toolbar" *ngIf="!disabled">
-        <a (click)="viewState = 'preview'" [class._selected]="viewState === 'preview'">
-          <sd-icon [icon]="'eye'"></sd-icon>
-        </a>
-        <a (click)="viewState = 'edit'" [class._selected]="viewState === 'edit'">
-          <sd-icon [icon]="'pen'"></sd-icon>
-        </a>
-        <a (click)="viewState = 'code'" [class._selected]="viewState === 'code'">
-          <sd-icon [icon]="'code'"></sd-icon>
-        </a>
-        <ng-container *ngIf="rowsButton && !inset && viewState === 'code'">
-          |
-          <a (click)="rows = rows + 1">
-            <sd-icon [icon]="'plus'"></sd-icon>
-          </a>
-          <a (click)="rows = rows - 1" *ngIf="rows > 1">
-            <sd-icon [icon]="'minus'"></sd-icon>
-          </a>
-        </ng-container>
-      </sd-dock>
-
-      <sd-pane>
-        <div *ngIf="viewState !== 'code' || disabled"
-             [attr.contenteditable]="viewState === 'edit' && !disabled"
-             [innerHTML]="content"
-             (input)="onContentInput($event)"></div>
-        <textarea *ngIf="viewState === 'code' && !disabled"
-                  [value]="value || ''"
-                  [rows]="inset ? undefined : rows"
-                  [style.resize]="inset ? 'none' : resize"
-                  (input)="onTextareaInput($event)"></textarea>
-      </sd-pane>
-    </sd-dock-container>`
-})
-export class SdHtmlEditorControl {
-  @Input()
-  @SdTypeValidate(String)
-  public get value(): string | undefined {
-    return this._value;
-  }
-
-  public set value(value: string | undefined) {
-    if (this._value !== value) {
-      this._value = value;
-      this.content = this._sanitizer.bypassSecurityTrustHtml(value || "");
-    }
-  }
-
-  private _value?: string;
-
-  @Output()
-  public readonly valueChange = new EventEmitter<string>();
-
-  @Input()
-  @SdTypeValidate({type: String, includes: ["preview", "edit", "code"]})
-  public viewState: "preview" | "edit" | "code" = "edit";
-
-  @Input()
-  @SdTypeValidate({type: Boolean, notnull: true})
-  public rowsButton = true;
-
-  @Input()
-  @SdTypeValidate({type: Number, notnull: true})
-  public rows = 3;
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-inset")
-  public inset?: boolean;
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-disabled")
-  public disabled?: boolean;
-
-  @Input()
-  @SdTypeValidate({
-    type: String,
-    notnull: true,
-    includes: ["both", "horizontal", "vertical", "none"]
-  })
-  public resize = "vertical";
-
-  public content: SafeHtml = "";
-
-  public constructor(private readonly _sanitizer: DomSanitizer) {
-  }
-
-  public onTextareaInput(event: Event): void {
-    const textareaEl = event.target as HTMLTextAreaElement;
-    this._value = textareaEl.value;
-    this.valueChange.emit(this._value);
-  }
-
-  public onContentInput(event: Event): void {
-    const editorEl = event.target as HTMLDivElement;
-    this._value = editorEl.innerHTML;
-    this.valueChange.emit(this._value);
-  }
-}

package/src/controls/SdIconControl.ts

@@ -1,51 +0,0 @@
-import {ChangeDetectionStrategy, Component, HostBinding, Input} from "@angular/core";
-import {IconName, library, SizeProp} from "@fortawesome/fontawesome-svg-core";
-import {fas} from "@fortawesome/free-solid-svg-icons";
-import {far} from "@fortawesome/free-regular-svg-icons";
-import {fab} from "@fortawesome/free-brands-svg-icons";
-import {SdTypeValidate} from "../commons/SdTypeValidate";
-
-library.add(fas, far, fab);
-export const sdIconNames = Object.values(fas).map(item => item.iconName).distinct();
-
-@Component({
-  selector: "sd-icon",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <fa-icon [icon]="iconArr" [fixedWidth]="fw" [size]="size" *ngIf="icon"></fa-icon>`
-})
-export class SdIconControl {
-  @Input()
-  @SdTypeValidate({
-    type: String,
-    includes: sdIconNames
-  })
-  public icon?: IconName;
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-fw")
-  public fw?: boolean;
-
-  @Input()
-  @SdTypeValidate({
-    type: String,
-    includes: ["solid", "regular", "brands"],
-    notnull: true
-  })
-  public type = "solid";
-
-  @Input()
-  @SdTypeValidate({
-    type: String,
-    includes: ["xs", "lg", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"]
-  })
-  public size?: SizeProp;
-
-  public get iconArr(): string[] | undefined {
-    return this.icon ? [
-      this.type === "brands" ? "fab" : this.type === "regular" ? "far" : "fas",
-      this.icon
-    ] : undefined;
-  }
-}

package/src/controls/SdLabelControl.ts

@@ -1,31 +0,0 @@
-import {ChangeDetectionStrategy, Component, HostBinding, Input} from "@angular/core";
-import {SdTypeValidate} from "../commons/SdTypeValidate";
-
-@Component({
-  selector: "sd-label",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <ng-content></ng-content>`
-})
-export class SdLabelControl {
-  @Input()
-  @SdTypeValidate({
-    type: String,
-    includes: ["primary", "info", "success", "warning", "danger", "grey", "bluegrey"]
-  })
-  @HostBinding("attr.sd-theme")
-  public theme?: "primary" | "info" | "success" | "warning" | "danger" | "grey" | "bluegrey";
-
-  @Input()
-  @SdTypeValidate({
-    type: String,
-    validator: value => /^#[0-9a-fA-F]*$/.test(value)
-  })
-  @HostBinding("style.background")
-  public color?: string;
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-clickable")
-  public clickable?: boolean;
-}

package/src/controls/SdListControl.ts

@@ -1,10 +0,0 @@
-import {ChangeDetectionStrategy, Component} from "@angular/core";
-
-@Component({
-  selector: "sd-list",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <ng-content></ng-content>`
-})
-export class SdListControl {
-}

package/src/controls/SdListItemButtonControl.ts

@@ -1,10 +0,0 @@
-import {ChangeDetectionStrategy, Component} from "@angular/core";
-
-@Component({
-  selector: "sd-list-item-button",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <ng-content></ng-content>`
-})
-export class SdListItemButtonControl {
-}