@simplysm/angular 1.0.135 → 14.0.1

package/src/controls/SdListItemControl.ts

@@ -1,122 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  Component,
-  ContentChildren,
-  ElementRef,
-  HostBinding,
-  Input,
-  QueryList,
-  ViewChild
-} from "@angular/core";
-import {SdTypeValidate} from "../commons/SdTypeValidate";
-import {SdListControl} from "./SdListControl";
-import {ISdNotifyPropertyChange, SdNotifyPropertyChange} from "../commons/SdNotifyPropertyChange";
-
-@Component({
-  selector: "sd-list-item",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div class="_content">
-      <label (click)="onLabelClick()"
-             [attr.tabindex]="(header || !clickable) ? undefined : '0'">
-        <ng-content></ng-content>
-        <sd-icon class="_angle-icon" [icon]="'chevron-right'" [fw]="true" *ngIf="hasChildren"></sd-icon>
-      </label>
-      <ng-content select="sd-list-item-button"></ng-content>
-    </div>
-    <div class="_child">
-      <div #childContent class="_child-content">
-        <ng-content select="sd-list"></ng-content>
-      </div>
-    </div>`
-})
-export class SdListItemControl implements ISdNotifyPropertyChange, AfterViewInit {
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-header")
-  public header?: boolean;
-
-  @SdTypeValidate(Boolean)
-  @SdNotifyPropertyChange()
-  @HostBinding("attr.sd-open")
-  public open?: boolean;
-
-  @Input()
-  @SdTypeValidate({type: Boolean, notnull: true})
-  @HostBinding("attr.sd-clickable")
-  public clickable = true;
-
-  @ContentChildren(SdListControl)
-  public listControls?: QueryList<SdListControl>;
-
-  @ViewChild("childContent")
-  public childContentElRef?: ElementRef<HTMLDivElement>;
-
-  @Input()
-  @SdTypeValidate({
-    type: String,
-    includes: ["sm", "lg"]
-  })
-  @HostBinding("attr.sd-size")
-  public size?: "sm" | "lg";
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-selected")
-  public selected?: boolean;
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-disabled")
-  public disabled?: boolean;
-
-  @HostBinding("attr.sd-has-children")
-  public get hasChildren(): boolean {
-    return !!this.listControls && this.listControls.length > 0;
-  }
-
-  public onLabelClick(): void {
-    if (this.clickable && this.hasChildren && !this.header) {
-      this.open = !this.open;
-    }
-  }
-
-  public ngAfterViewInit(): void {
-    const childContentEl = this.childContentElRef!.nativeElement;
-
-    Object.assign(
-      childContentEl.style,
-      {
-        marginTop: (-childContentEl.offsetHeight) + "px",
-        transition: "margin-top .1s ease-in"
-      }
-    );
-  }
-
-  public sdOnPropertyChange(propertyName: string, oldValue: any, newValue: any): void {
-    if (propertyName === "open") {
-      if (!this.childContentElRef) return;
-      const childContentEl = this.childContentElRef.nativeElement;
-
-      if (newValue) {
-        Object.assign(
-          childContentEl.style,
-          {
-            marginTop: "0",
-            transition: "margin-top .1s ease-out"
-          }
-        );
-      }
-      else {
-        Object.assign(
-          childContentEl.style,
-          {
-            marginTop: (-childContentEl.offsetHeight) + "px",
-            transition: "margin-top .1s ease-in"
-          }
-        );
-      }
-    }
-  }
-}

package/src/controls/SdMarkdownEditorControl.ts

@@ -1,257 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  HostBinding,
-  Input,
-  Output
-} from "@angular/core";
-import {SdTypeValidate} from "../commons/SdTypeValidate";
-import * as marked from "marked";
-import {DomSanitizer, SafeHtml} from "@angular/platform-browser";
-import {ISdNotifyPropertyChange, SdNotifyPropertyChange} from "../commons/SdNotifyPropertyChange";
-
-@Component({
-  selector: "sd-markdown-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 = 'help'" [class._selected]="viewState === 'help'">
-          <sd-icon [icon]="'question'"></sd-icon>
-        </a>
-        <ng-container *ngIf="rowsButton && viewState === 'edit'">
-          |
-          <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 class="_editor"
-             *ngIf="viewState === 'edit' && !disabled">
-        <textarea [value]="value || ''"
-                  [rows]="rows"
-                  (input)="onTextareaInput($event)"
-                  (dragover)="onTextareaDragover($event)"
-                  (dragleave)="onTextareaDragLeave($event)"
-                  (drop)="onTextareaDrop($event)"
-                  (paste)="onTextareaPaste($event)"
-                  [style.resize]="resize"></textarea>
-          <div class="_dragover" *ngIf="viewState === 'edit' && !disabled">파일을 내려놓으세요.</div>
-        </div>
-        <div class="_preview" [innerHTML]="innerHTML" *ngIf="viewState === 'preview' || disabled"></div>
-        <div *ngIf="viewState === 'help'" class="_help sd-padding-default">
-          <div class="sd-margin-bottom-default">
-            <h4 class="sd-margin-bottom-xs">강조</h4>
-            <div class="sd-padding-default sd-background-grey-lightest"
-                 style="border-radius: 2px;">
-              <div style="font-weight: bold">**굵게**</div>
-              <div style="font-style: italic;">*기울임*</div>
-              <div style="text-decoration: line-through;">~~취소선~~</div>
-            </div>
-          </div>
-
-          <div class="sd-margin-bottom-default">
-            <h4 class="sd-margin-bottom-xs">헤더</h4>
-            <div class="sd-padding-default sd-background-grey-lightest"
-                 style="border-radius: 2px;">
-              <h1># 헤더 1</h1>
-              <h2>## 헤더 2</h2>
-              <h3>### 헤더 3</h3>
-              <h4>#### 헤더 4</h4>
-            </div>
-          </div>
-
-          <div class="sd-margin-bottom-default">
-            <h4 class="sd-margin-bottom-xs">목록</h4>
-            <div class="sd-padding-default sd-background-grey-lightest"
-                 style="border-radius: 2px;">
-              <div>* 일반목록 항목</div>
-              <div>* 일반목록 항목</div>
-              <br/>
-              <div>1. 순번목록 항목</div>
-              <div>2. 순번목록 항목</div>
-            </div>
-          </div>
-
-          <div class="sd-margin-bottom-default">
-            <h4 class="sd-margin-bottom-xs">링크</h4>
-            <div class="sd-padding-default sd-background-grey-lightest"
-                 style="border-radius: 2px;">
-              [보여줄텍스트](http://www.example.com)
-            </div>
-          </div>
-
-          <div class="sd-margin-bottom-default">
-            <h4 class="sd-margin-bottom-xs">참조</h4>
-            <div class="sd-padding-default sd-background-grey-lightest"
-                 style="border-radius: 2px;">
-              > 참조입니다.<br/>
-              > 여러줄을 적을 수 있습니다.
-            </div>
-          </div>
-
-          <div class="sd-margin-bottom-default">
-            <h4 class="sd-margin-bottom-xs">이미지</h4>
-            <div class="sd-padding-default sd-background-grey-lightest"
-                 style="border-radius: 2px;">
-              ![이미지타이틀](http://www.example.com/image.jpg)
-            </div>
-          </div>
-
-          <div class="sd-margin-bottom-default">
-            <h4 class="sd-margin-bottom-xs">표</h4>
-            <div class="sd-padding-default sd-background-grey-lightest"
-                 style="border-radius: 2px;">
-              | 컬럼 1 | 컬럼 2 | 컬럼 3 |<br/>
-              | - | - | - |<br/>
-              | 홍 | 길동 | 남성 |<br/>
-              | 김 | 영희 | 여성 |
-            </div>
-          </div>
-
-          <div class="sd-margin-bottom-default">
-            <h4 class="sd-margin-bottom-xs">코드</h4>
-            <div class="sd-padding-default sd-background-grey-lightest"
-                 style="border-radius: 2px;">
-              \`var example = "hello!";\`<br/>
-              <br/>
-              여러줄일 경우, 아래와 같이...<br/>
-              <br/>
-              \`\`\`<br/>
-              var example = "hello!";<br/>
-              alert(example);<br/>
-              \`\`\`
-            </div>
-          </div>
-        </div>
-        <div class="_invalid-indicator"></div>
-      </sd-pane>
-    </sd-dock-container>`
-})
-export class SdMarkdownEditorControl implements ISdNotifyPropertyChange {
-  @Input()
-  @SdTypeValidate(String)
-  @SdNotifyPropertyChange()
-  public value?: string;
-
-  @Output()
-  public readonly valueChange = new EventEmitter<string>();
-
-  @Input()
-  @SdTypeValidate({type: String, includes: ["preview", "edit", "help"]})
-  @SdNotifyPropertyChange()
-  public viewState: "preview" | "edit" | "help" = "edit";
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-disabled")
-  @SdNotifyPropertyChange()
-  public disabled?: boolean;
-
-  @Input()
-  @SdNotifyPropertyChange()
-  public previewRender?: (plainText: string) => string | Promise<string>;
-
-  @Output()
-  public readonly dropFiles = new EventEmitter<ISdMarkdownEditorDropFilesEvent>();
-
-  public innerHTML?: SafeHtml;
-
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-dragover")
-  public dragover?: boolean;
-
-  @Input()
-  @SdTypeValidate({
-    type: String,
-    notnull: true,
-    includes: ["both", "horizontal", "vertical", "none"]
-  })
-  public resize = "vertical";
-
-  @Input()
-  @SdTypeValidate({type: Number, notnull: true})
-  public rows = 3;
-
-  @Input()
-  @SdTypeValidate({type: Boolean, notnull: true})
-  public rowsButton = true;
-
-  public constructor(private readonly _sanitizer: DomSanitizer,
-                     private readonly _cdr: ChangeDetectorRef) {
-  }
-
-  public async sdOnPropertyChange(propertyName: string, oldValue: any, newValue: any): Promise<void> {
-    if (["value", "previewRender", "viewState", "disabled"].includes(propertyName)) {
-      if (this.value && (this.viewState === "preview" || this.disabled)) {
-        const value = this.previewRender ? await this.previewRender(this.value) : this.value;
-        const html = marked(value);
-        this.innerHTML = this._sanitizer.bypassSecurityTrustHtml(html);
-        if (this.previewRender) {
-          this._cdr.markForCheck();
-        }
-      }
-      else {
-        this.innerHTML = "";
-      }
-    }
-  }
-
-  public onTextareaInput(event: Event): void {
-    const textareaEl = event.target as HTMLTextAreaElement;
-    this.value = textareaEl.value;
-    this.valueChange.emit(textareaEl.value);
-  }
-
-  public onTextareaDragover(event: DragEvent): void {
-    event.stopPropagation();
-    event.preventDefault();
-    this.dragover = true;
-  }
-
-  public onTextareaDragLeave(event: DragEvent): void {
-    event.stopPropagation();
-    event.preventDefault();
-    this.dragover = false;
-  }
-
-  public onTextareaDrop(event: DragEvent): void {
-    event.stopPropagation();
-    event.preventDefault();
-
-    const files = Array.from(event.dataTransfer!.files);
-    const position = (event.target as HTMLTextAreaElement).selectionEnd;
-    this.dropFiles.emit({position, files});
-    this.dragover = false;
-  }
-
-  public async onTextareaPaste(event: ClipboardEvent): Promise<void> {
-    const files = Array.from(event.clipboardData.items)
-      .filter(item => item.kind === "file")
-      .map(item => item.getAsFile())
-      .filterExists();
-
-    if (files.length > 0) {
-      const position = (event.target as HTMLTextAreaElement).selectionEnd;
-      this.dropFiles.emit({position, files});
-    }
-  }
-}
-
-export interface ISdMarkdownEditorDropFilesEvent {
-  position: number;
-  files: File[];
-}

package/src/controls/SdModalControl.ts

@@ -1,128 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostBinding,
-  HostListener,
-  Input
-} from "@angular/core";
-import {SdTypeValidate} from "../commons/SdTypeValidate";
-
-@Component({
-  selector: "sd-modal",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div class="_backdrop" (click)="onBackdropClick()"></div>
-    <div class="_dialog" tabindex="0" [style.height]="height">
-      <sd-dock-container>
-        <sd-dock class="_header"
-                 (mousedown)="onHeaderMouseDown($event)">
-          <h5 class="_title">{{ title }}</h5>
-          <a class="_close-button"
-             (click)="onCloseButtonClick()"
-             *ngIf="!hideCloseButton">
-            <sd-icon [icon]="'times'" [fw]="true"></sd-icon>
-          </a>
-        </sd-dock>
-
-        <sd-pane class="_content">
-          <ng-content></ng-content>
-        </sd-pane>
-      </sd-dock-container>
-    </div>`
-})
-export class SdModalControl {
-  @Input()
-  @SdTypeValidate({type: String, notnull: true})
-  public title!: string;
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  public hideCloseButton?: boolean;
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-open")
-  public open?: boolean;
-
-  public close = new EventEmitter<any>();
-
-  @Input()
-  @SdTypeValidate(Boolean)
-  @HostBinding("attr.sd-float")
-  public float?: boolean;
-
-  @Input()
-  @SdTypeValidate(String)
-  public height?: string;
-
-  public constructor(private readonly _elRef: ElementRef<HTMLElement>) {
-  }
-
-  public onBackdropClick(): void {
-    if (this.hideCloseButton) {
-      return;
-    }
-
-    this.onCloseButtonClick();
-  }
-
-  public onCloseButtonClick(): void {
-    this.open = false;
-    this.close.emit();
-  }
-
-  public onHeaderMouseDown(event: MouseEvent): void {
-    const el = this._elRef.nativeElement.findAll("> ._dialog")[0] as HTMLElement;
-    const startX = event.clientX;
-    const startY = event.clientY;
-    const startTop = el.offsetTop;
-    const startLeft = el.offsetLeft;
-
-    const doDrag = (e: MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      el.style.position = "absolute";
-      el.style.left = `${startLeft + e.clientX - startX}px`;
-      el.style.top = `${startTop + e.clientY - startY}px`;
-      el.style.right = `auto`;
-      el.style.bottom = `auto`;
-    };
-
-    const stopDrag = (e: MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-
-      document.documentElement!.removeEventListener("mousemove", doDrag, false);
-      document.documentElement!.removeEventListener("mouseup", stopDrag, false);
-    };
-
-    document.documentElement!.addEventListener("mousemove", doDrag, false);
-    document.documentElement!.addEventListener("mouseup", stopDrag, false);
-  }
-
-  @HostListener("keydown", ["$event"])
-  public onKeydown(event: KeyboardEvent): void {
-    if (this.hideCloseButton) {
-      return;
-    }
-
-    if (event.key === "Escape") {
-      this.onCloseButtonClick();
-    }
-  }
-
-  @HostListener("document:backbutton", ["$event"])
-  public onAndroidBackButtonTouch(event: Event): void {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (this.hideCloseButton) {
-      return;
-    }
-
-    this.onCloseButtonClick();
-  }
-}

package/src/controls/SdMultiSelectControl.ts

@@ -1,172 +0,0 @@
-import {
-  AfterContentChecked,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ContentChild,
-  ContentChildren,
-  DoCheck,
-  ElementRef,
-  EventEmitter,
-  forwardRef,
-  HostBinding,
-  Input,
-  IterableDiffer,
-  IterableDiffers,
-  OnInit,
-  Output,
-  QueryList,
-  TemplateRef,
-  ViewChild
-} from "@angular/core";
-import {SdTypeValidate} from "../commons/SdTypeValidate";
-import {SdMultiSelectItemControl} from "./SdMultiSelectItemControl";
-
-@Component({
-  selector: "sd-multi-select",
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <sd-dropdown [disabled]="disabled" (open)="open.emit()" (close)="close.emit()">
-      <div #content></div>
-      <div class="_icon">
-        <sd-icon [fw]="true" [icon]="'caret-down'"></sd-icon>
-      </div>
-
-      <sd-dropdown-popup>
-        <ng-container *ngIf="!items">
-          <ng-content></ng-content>
-        </ng-container>
-        <ng-container *ngIf="items">
-          <sd-dock-container>
-            <sd-dock>
-              <ng-template [ngTemplateOutlet]="headerTemplateRef"></ng-template>
-            </sd-dock>
-            <sd-pane>
-              <ng-template #rowOfList let-items="items">
-                <ng-container *ngFor="let item of items; let i = index; trackBy: trackByItemFn">
-                  <div class="_sd-multi-select-item">
-                    <ng-template [ngTemplateOutlet]="itemTemplateRef"
-                                 [ngTemplateOutletContext]="{item: item}"></ng-template>
-
-                    <ng-container *ngIf="children && children(i, item) && children(i, item).length > 0">
-                      <div class="_children">
-                        <ng-template [ngTemplateOutlet]="rowOfList"
-                                     [ngTemplateOutletContext]="{items: children(i, item)}"></ng-template>
-                      </div>
-                    </ng-container>
-                  </div>
-                </ng-container>
-              </ng-template>
-              <ng-template [ngTemplateOutlet]="rowOfList"
-                           [ngTemplateOutletContext]="{items: items}"></ng-template>
-            </sd-pane>
-          </sd-dock-container>
-        </ng-container>
-      </sd-dropdown-popup>
-    </sd-dropdown>`
-})
-export class SdMultiSelectControl implements DoCheck, OnInit, AfterContentChecked {
-  @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(forwardRef(() => SdMultiSelectItemControl), {descendants: true})
-  public itemControls?: QueryList<SdMultiSelectItemControl>;
-
-  private readonly _iterableDiffer: IterableDiffer<any>;
-
-  @Output()
-  public readonly open = new EventEmitter();
-
-  @Output()
-  public readonly close = new EventEmitter();
-
-  @ViewChild("content")
-  public contentElRef?: ElementRef<HTMLDivElement>;
-
-  @ContentChild("item")
-  public itemTemplateRef?: TemplateRef<any>;
-
-  @ContentChild("header")
-  public headerTemplateRef?: TemplateRef<any>;
-
-  @Input()
-  @SdTypeValidate(Array)
-  public items?: any[];
-
-  @Input()
-  @SdTypeValidate(Function)
-  public trackBy?: (index: number, item: any) => any;
-
-  @Input()
-  @SdTypeValidate(Function)
-  public children?: (index: number, item: any) => any;
-
-  public trackByItemFn(index: number, item: any): any {
-    if (this.trackBy) {
-      return this.trackBy(index, item) || item;
-    }
-    else {
-      return item;
-    }
-  }
-
-  public constructor(private readonly _iterableDiffers: IterableDiffers,
-                     private readonly _cdr: ChangeDetectorRef) {
-    this._iterableDiffer = this._iterableDiffers.find([]).create((index, item) => item);
-  }
-
-  public ngOnInit(): void {
-    this._render();
-  }
-
-  public ngDoCheck(): void {
-    if (this.value && this._iterableDiffer.diff(this.value)) {
-      this._cdr.markForCheck();
-    }
-  }
-
-  public ngAfterContentChecked(): void {
-    this._render();
-  }
-
-  public getIsItemSelected(item: SdMultiSelectItemControl): boolean {
-    if (!this.keyProp) {
-      return this.value ? this.value.includes(item.value) : false;
-    }
-    else {
-      return this.value ? this.value.map(item1 => item1[this.keyProp!]).includes(item.value[this.keyProp!]) : false;
-    }
-  }
-
-  private _render(): void {
-    if (!this.itemControls || !this.value || !this.contentElRef) return;
-
-    let content = "";
-    const selectedItemControls = this.itemControls.toArray().filter(item => this.getIsItemSelected(item));
-    for (const selectedItemControl of selectedItemControls) {
-      if (selectedItemControl.labelTemplateRef) {
-        /*const embeddedView = selectedItemControl.labelTemplateRef.createEmbeddedView({});*/
-        content += selectedItemControl.elRef.nativeElement.findAll("> sd-checkbox > label > ._content > ._labelTemplate")[0].innerHTML + ",\n";
-      }
-      else {
-        content += selectedItemControl.elRef.nativeElement.findAll("> sd-checkbox > label > ._content > ._label")[0].innerHTML + ",\n";
-      }
-    }
-    content = content.slice(0, -2);
-
-    this.contentElRef.nativeElement.innerHTML = content;
-  }
-}