@simplysm/angular 1.0.138 → 14.0.4

package/src/controls/SdButtonControl.ts

@@ -1,71 +0,0 @@
-import {AfterContentChecked, ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input} from "@angular/core";
-import {SdTypeValidate} from "../commons/SdTypeValidate";
-
-@Component({
-  selector: "sd-button",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <button [type]="type" [disabled]="disabled">
-      <ng-content></ng-content>
-    </button>
-    <div class="_invalid-indicator"></div>`
-})
-export class SdButtonControl implements AfterContentChecked {
-  @Input()
-  @SdTypeValidate({
-    type: String,
-    includes: ["primary", "secondary", "info", "success", "warning", "danger"]
-  })
-  @HostBinding("attr.sd-theme")
-  public theme?: "primary" | "secondary" | "info" | "success" | "warning" | "danger";
-
-  @Input()
-  @SdTypeValidate({
-    type: String,
-    includes: ["sm", "lg"]
-  })
-  @HostBinding("attr.sd-size")
-  public size?: "sm" | "lg";
-
-  @Input()
-  @SdTypeValidate({
-    type: String,
-    includes: ["button", "submit"],
-    notnull: true
-  })
-  public type: "button" | "submit" = "button";
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-inline")
-  public inline?: boolean;
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  public required?: boolean;
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  public disabled?: boolean;
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-inset")
-  public inset?: boolean;
-
-  @HostBinding("attr.sd-invalid")
-  public isInvalid = false;
-
-  public constructor(private readonly _elRef: ElementRef<HTMLElement>) {
-  }
-
-  public ngAfterContentChecked(): void {
-    this.isInvalid = false;
-
-    if (this.required) {
-      if (!(this._elRef.nativeElement.findAll("> button")[0] as HTMLElement).innerText.trim()) {
-        this.isInvalid = true;
-      }
-    }
-  }
-}

package/src/controls/SdCardControl.ts

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

package/src/controls/SdCheckboxControl.ts

@@ -1,83 +0,0 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output} from "@angular/core";
-import {SdTypeValidate} from "../commons/SdTypeValidate";
-import {sdIconNames} from "./SdIconControl";
-import {IconName} from "@fortawesome/fontawesome-svg-core";
-
-@Component({
-  selector: "sd-checkbox",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <label tabindex="0" (keydown)="onKeydown($event)">
-      <input [checked]="value" (change)="onValueChange($event)" type="checkbox" hidden [disabled]="disabled">
-      <div class="_indicator_rect"></div>
-      <sd-icon class="_indicator" [icon]="icon" [fw]="true" *ngIf="!radio"></sd-icon>
-      <div class="_indicator" *ngIf="radio">
-        <div></div>
-      </div>
-      <div class="_content">
-        <ng-content></ng-content>
-      </div>
-    </label>`
-})
-export class SdCheckboxControl {
-  @Input()
-  @SdTypeValidate({type: Boolean, notnull: true})
-  @HostBinding("attr.sd-checked")
-  public value = false;
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  public disabled?: boolean;
-
-  @Output()
-  public readonly valueChange = new EventEmitter<boolean>();
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-inline")
-  public inline?: boolean;
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-radio")
-  public radio?: boolean;
-
-  @Input()
-  @SdTypeValidate({
-    type: String,
-    includes: ["sm", "lg"]
-  })
-  @HostBinding("attr.sd-size")
-  public size?: "sm" | "lg";
-
-  @Input()
-  @SdTypeValidate({
-    type: String,
-    includes: ["primary", "secondary", "info", "success", "warning", "danger"]
-  })
-  @HostBinding("attr.sd-theme")
-  public theme?: "primary" | "secondary" | "info" | "success" | "warning" | "danger";
-
-  @Input()
-  @SdTypeValidate({
-    type: String,
-    notnull: true,
-    includes: sdIconNames
-  })
-  public icon: IconName = "check";
-
-  public onValueChange(event: Event): void {
-    const el = event.target as HTMLInputElement;
-    this.value = el.checked;
-    this.valueChange.emit(this.value);
-  }
-
-  public onKeydown(event: KeyboardEvent): void {
-    if (this.disabled) return;
-
-    if (event.key === " ") {
-      this.value = !this.value;
-      this.valueChange.emit(this.value);
-    }
-  }
-}

package/src/controls/SdCheckboxGroupControl.ts

@@ -1,73 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChildren,
-  DoCheck,
-  EventEmitter,
-  HostBinding,
-  Input,
-  IterableDiffer,
-  IterableDiffers,
-  Output,
-  QueryList
-} from "@angular/core";
-import {SdTypeValidate} from "../commons/SdTypeValidate";
-
-@Component({
-  selector: "sd-checkbox-group",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <ng-content></ng-content>`
-})
-export class SdCheckboxGroupControl implements DoCheck {
-  @Input()
-  @SdTypeValidate(Array)
-  public value?: any[];
-
-  @Output()
-  public readonly valueChange = new EventEmitter<any[]>();
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-disabled")
-  public disabled?: boolean;
-
-  @Input()
-  @SdTypeValidate(String)
-  public keyProp?: string;
-
-  @ContentChildren(SdCheckboxGroupControl, {descendants: true})
-  public itemControls?: QueryList<SdCheckboxGroupControl>;
-
-  private readonly _iterableDiffer: IterableDiffer<any>;
-
-  public constructor(private readonly _iterableDiffers: IterableDiffers,
-                     private readonly _cdr: ChangeDetectorRef) {
-    this._iterableDiffer = this._iterableDiffers.find([]).create((index, item) => item);
-  }
-
-  public ngDoCheck(): void {
-    if (this.value && this._iterableDiffer.diff(this.value)) {
-      this._cdr.markForCheck();
-    }
-  }
-
-  public getIsItemSelected(value: any): boolean {
-    const thisKeyValue = (this.keyProp && this.value) ? this.value.map(item => item[this.keyProp!]) : this.value;
-    const itemKeyValue = (this.keyProp && value) ? value[this.keyProp] : value;
-    return !!thisKeyValue && thisKeyValue.includes(itemKeyValue);
-  }
-
-  public toggleValueItem(item: any): void {
-    if (!this.value) this.value = [];
-
-    const isSelected = this.getIsItemSelected(item);
-    if (isSelected) {
-      this.value.remove(item);
-    } else {
-      this.value.push(item);
-    }
-    this.valueChange.emit(this.value);
-  }
-}

package/src/controls/SdCheckboxGroupItemControl.ts

@@ -1,27 +0,0 @@
-import {ChangeDetectionStrategy, Component, forwardRef, Inject, Input} from "@angular/core";
-import {SdCheckboxGroupControl} from "./SdCheckboxGroupControl";
-
-@Component({
-  selector: "sd-checkbox-group-item",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <sd-checkbox [value]="isSelected" (valueChange)="onValueChange($event)" [inline]="true">
-      <ng-content></ng-content>
-    </sd-checkbox>`
-})
-export class SdCheckboxGroupItemControl {
-  @Input()
-  public value?: any;
-
-  public get isSelected(): boolean {
-    return this._parentControl.getIsItemSelected(this.value);
-  }
-
-  public constructor(@Inject(forwardRef(() => SdCheckboxGroupControl))
-                     private readonly _parentControl: SdCheckboxGroupControl) {
-  }
-
-  public onValueChange(): void {
-    this._parentControl.toggleValueItem(this.value);
-  }
-}

package/src/controls/SdComboboxControl.ts

@@ -1,268 +0,0 @@
-import {
-  AfterContentChecked,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChildren,
-  ElementRef,
-  EventEmitter,
-  Input,
-  IterableDiffer,
-  IterableDiffers,
-  OnDestroy,
-  OnInit,
-  Output,
-  QueryList,
-  ViewChild
-} from "@angular/core";
-import {SdComboboxItemControl} from "./SdComboboxItemControl";
-import {SdTypeValidate} from "../commons/SdTypeValidate";
-
-@Component({
-  selector: "sd-combobox",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <sd-textfield #textfield
-                  [value]="text"
-                  (valueChange)="onTextChange($event)"
-                  [required]="required"
-                  [disabled]="disabled"
-                  (focusedChange)="textfieldFocusedChange.emit($event)">
-    </sd-textfield>
-    <div class="_icon" *ngIf="!disabled">
-      <sd-icon [fw]="true" [icon]="'caret-down'"></sd-icon>
-    </div>
-    <div #dropdown class="_sd-combobox-dropdown" tabindex="0">
-      <ng-content></ng-content>
-    </div>`
-})
-export class SdComboboxControl implements OnInit, OnDestroy, AfterContentChecked {
-  @Input()
-  public value?: any;
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  public required?: boolean;
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  public disabled?: boolean;
-
-  @Output()
-  public readonly valueChange = new EventEmitter<any | undefined>();
-
-  @Input()
-  @SdTypeValidate(String)
-  public text?: string;
-
-  @Output()
-  public readonly textChange = new EventEmitter<string | undefined>();
-
-  @Output()
-  public readonly textChangeByInput = new EventEmitter<string | undefined>();
-
-  @ContentChildren(SdComboboxItemControl, {descendants: true})
-  public itemControls?: QueryList<SdComboboxItemControl>;
-
-  @ViewChild("textfield", {read: ElementRef})
-  public textfieldElRef?: ElementRef<HTMLElement>;
-
-  @ViewChild("dropdown")
-  public dropdownElRef?: ElementRef<HTMLDivElement>;
-
-  @Output()
-  public readonly textfieldFocusedChange = new EventEmitter<boolean>();
-
-  @Output()
-  public readonly open = new EventEmitter();
-
-  @Output()
-  public readonly close = new EventEmitter();
-
-  private readonly _iterableDiffer: IterableDiffer<SdComboboxItemControl>;
-
-  public constructor(private readonly _iterableDiffers: IterableDiffers,
-                     private readonly _elRef: ElementRef<HTMLElement>,
-                     private readonly _cdr: ChangeDetectorRef) {
-    this._iterableDiffer = this._iterableDiffers.find([]).create((i, itemControl) => itemControl.value);
-  }
-
-  public ngAfterContentChecked(): void {
-    if (this.itemControls && this._iterableDiffer.diff(this.itemControls.toArray())) {
-      this._refreshText();
-      this._cdr.markForCheck();
-    }
-  }
-
-  public ngOnInit(): void {
-    const textfieldEl = this.textfieldElRef!.nativeElement;
-    const dropdownEl = this.dropdownElRef!.nativeElement;
-
-    textfieldEl.addEventListener("focus", this.focusEventHandler, true);
-    textfieldEl.addEventListener("blur", this.blurEventHandler, true);
-    dropdownEl.addEventListener("blur", this.blurEventHandler, true);
-  }
-
-  public ngOnDestroy(): void {
-    this.dropdownElRef!.nativeElement.remove();
-  }
-
-  public onTextChange(text: string): void {
-    this.text = text;
-    this.textChange.emit(this.text);
-    this.textChangeByInput.emit(this.text);
-
-    if (this.value !== undefined) {
-      this.value = undefined;
-      this.valueChange.emit(this.value);
-    }
-  }
-
-  public setValueFromItemControl(value: any, itemControl: SdComboboxItemControl): void {
-    if (this.value !== value) {
-      this.value = value;
-      this.valueChange.emit(this.value);
-      this.closePopup();
-    }
-
-    if (this.text !== itemControl.content) {
-      this.text = itemControl.content;
-      this.textChange.emit(this.text);
-    }
-  }
-
-  public openPopup(): void {
-    const textfieldEl = this.textfieldElRef!.nativeElement;
-    const dropdownEl = this.dropdownElRef!.nativeElement;
-    document.body.appendChild(dropdownEl);
-
-    if (window.innerHeight < textfieldEl.windowOffset.top * 2) {
-      Object.assign(
-        dropdownEl.style,
-        {
-          top: "",
-          bottom: (window.innerHeight - textfieldEl.windowOffset.top) + "px",
-          left: textfieldEl.windowOffset.left + "px",
-          opacity: "1",
-          pointerEvents: "auto",
-          transform: "none"
-        }
-      );
-    }
-    else {
-      Object.assign(
-        dropdownEl.style,
-        {
-          top: (textfieldEl.windowOffset.top + textfieldEl.offsetHeight) + "px",
-          bottom: "",
-          left: textfieldEl.windowOffset.left + "px",
-          opacity: "1",
-          pointerEvents: "auto",
-          transform: "none"
-        }
-      );
-    }
-
-    document.addEventListener("scroll", this.scrollEventHandler, true);
-    this.open.emit();
-  }
-
-  public closePopup(): void {
-    const dropdownEl = this.dropdownElRef!.nativeElement;
-    try {
-      dropdownEl.remove();
-    }
-    catch (err) {
-      if (!err.message.includes("no longer a child of this node")) {
-        throw err;
-      }
-    }
-
-    Object.assign(
-      dropdownEl.style,
-      {
-        opacity: "0",
-        pointerEvents: "none",
-        transform: "translateY(-10px)"
-      }
-    );
-
-    if (!this.value && this.text) {
-      this.text = undefined;
-      this.textChange.emit(this.text);
-      return;
-    }
-
-    this._refreshText();
-    this.close.emit();
-  }
-
-  public scrollEventHandler = (event: UIEvent) => {
-    const textfieldEl = this.textfieldElRef!.nativeElement;
-    const dropdownEl = this.dropdownElRef!.nativeElement;
-
-    if (this._elRef.nativeElement.findParent(event.target as HTMLElement)) {
-
-      if (window.innerHeight < textfieldEl.windowOffset.top * 2) {
-        Object.assign(
-          dropdownEl.style,
-          {
-            top: "",
-            bottom: (window.innerHeight - textfieldEl.windowOffset.top) + "px",
-            left: textfieldEl.windowOffset.left + "px"
-          }
-        );
-      }
-      else {
-        Object.assign(
-          dropdownEl.style,
-          {
-            top: (textfieldEl.windowOffset.top + textfieldEl.offsetHeight) + "px",
-            bottom: "",
-            left: textfieldEl.windowOffset.left + "px"
-          }
-        );
-      }
-    }
-  };
-
-  public focusEventHandler = (event: FocusEvent) => {
-    this.openPopup();
-  };
-
-  public blurEventHandler = (event: FocusEvent) => {
-    document.removeEventListener("scroll", this.scrollEventHandler, true);
-
-    const textfieldEl = this.textfieldElRef!.nativeElement;
-    const dropdownEl = this.dropdownElRef!.nativeElement;
-
-    const relatedTarget = event.relatedTarget as HTMLElement;
-    if (
-      relatedTarget &&
-      (
-        relatedTarget === textfieldEl ||
-        relatedTarget === dropdownEl ||
-        relatedTarget.findParent(textfieldEl) ||
-        relatedTarget.findParent(dropdownEl)
-      )
-    ) {
-      return;
-    }
-
-    this.closePopup();
-  };
-
-  private _refreshText(): void {
-    if (this.value) {
-      const selectedItemControl = this.itemControls!.find(item => item.value === this.value);
-
-      if (selectedItemControl) {
-        const text = selectedItemControl.content;
-        if (text !== this.text) {
-          this.text = text || "";
-          this.textChange.emit(this.text);
-        }
-      }
-    }
-  }
-}

package/src/controls/SdComboboxItemControl.ts

@@ -1,27 +0,0 @@
-import {ChangeDetectionStrategy, Component, ElementRef, forwardRef, HostListener, Inject, Input} from "@angular/core";
-import {SdComboboxControl} from "./SdComboboxControl";
-
-@Component({
-  selector: "sd-combobox-item",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <ng-content></ng-content>`
-})
-export class SdComboboxItemControl {
-  @Input()
-  public value?: any;
-
-  public get content(): string {
-    return this._elRef.nativeElement.innerText.trim();
-  }
-
-  public constructor(@Inject(forwardRef(() => SdComboboxControl))
-                     private readonly _comboboxControl: SdComboboxControl,
-                     private readonly _elRef: ElementRef<HTMLElement>) {
-  }
-
-  @HostListener("click", ["$event"])
-  public onClick(): void {
-    this._comboboxControl.setValueFromItemControl(this.value, this);
-  }
-}

package/src/controls/SdDockContainerControl.ts

@@ -1,97 +0,0 @@
-import {
-  AfterContentInit,
-  ChangeDetectionStrategy,
-  Component,
-  ContentChildren,
-  ElementRef,
-  forwardRef,
-  QueryList
-} from "@angular/core";
-import {SdDockControl} from "./SdDockControl";
-
-@Component({
-  selector: "sd-dock-container",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <ng-content></ng-content>`
-})
-export class SdDockContainerControl implements AfterContentInit {
-  @ContentChildren(forwardRef(() => SdDockControl))
-  public dockControls?: QueryList<SdDockControl>;
-
-  public constructor(private readonly _elRef: ElementRef<HTMLElement>) {
-  }
-
-  public ngAfterContentInit(): void {
-    this.redraw();
-  }
-
-  public redraw(): void {
-    if (!this.dockControls) return;
-
-    let top = 0;
-    let left = 0;
-    let bottom = 0;
-    let right = 0;
-    for (const dockControl of this.dockControls.toArray()) {
-      const dockEl = dockControl.elRef.nativeElement;
-      const position = dockControl.position;
-
-      if (position === "top") {
-        Object.assign(
-          dockEl.style,
-          {
-            top: top + "px",
-            bottom: "",
-            left: left + "px",
-            right: right + "px"
-          }
-        );
-        top += dockEl.offsetHeight;
-      } else if (position === "bottom") {
-        Object.assign(
-          dockEl.style,
-          {
-            top: "",
-            bottom: bottom + "px",
-            left: left + "px",
-            right: right + "px"
-          }
-        );
-        bottom += dockEl.offsetHeight;
-      } else if (position === "left") {
-        Object.assign(
-          dockEl.style,
-          {
-            top: top + "px",
-            bottom: bottom + "px",
-            left: left + "px",
-            right: ""
-          }
-        );
-        left += dockEl.offsetWidth;
-      } else if (position === "right") {
-        Object.assign(
-          dockEl.style,
-          {
-            top: top + "px",
-            bottom: bottom + "px",
-            left: "",
-            right: right + "px"
-          }
-        );
-        right += dockEl.offsetWidth;
-      }
-    }
-
-    Object.assign(
-      this._elRef.nativeElement.style,
-      {
-        paddingTop: top + "px",
-        paddingBottom: bottom + "px",
-        paddingRight: right + "px",
-        paddingLeft: left + "px"
-      }
-    );
-  }
-}