ngwr 0.0.1

package/button/button.component.ts

@@ -0,0 +1,132 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  NgZone, OnChanges,
+  OnDestroy,
+  OnInit,
+  Renderer2, SimpleChanges,
+  ViewEncapsulation
+} from '@angular/core';
+import { fromEvent, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { InputBoolean } from '../core/util';
+
+export type WalrusButtonColor = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+export type WalrusButtonSize = 'default' | 'small';
+
+@Component({
+  selector: 'wr-btn, [wr-btn]',
+  exportAs: 'wrButton',
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  template: `<ng-content></ng-content><wr-spin *ngIf="loading"></wr-spin>`
+})
+export class WalrusButtonComponent implements OnInit, OnDestroy, AfterViewInit, OnChanges {
+  @Input() color: WalrusButtonColor = 'primary';
+  @Input() size: WalrusButtonSize = 'default';
+
+  @Input() @InputBoolean() disabled: boolean | string = false;
+  @Input() @InputBoolean() outlined: boolean | string = false;
+  @Input() @InputBoolean() rounded: boolean | string = false;
+  @Input() @InputBoolean() loading: boolean | string = false;
+  @Input() @InputBoolean() block: boolean | string = false;
+
+  private readonly baseClass: string = 'wr-btn';
+  private destroy$: Subject<void> = new Subject<void>();
+
+  constructor(
+    private readonly cdr: ChangeDetectorRef,
+    private readonly elRef: ElementRef,
+    private readonly ngZone: NgZone,
+    private readonly r2: Renderer2,
+  ) {}
+
+  ngOnInit(): void {
+    this.setClasses();
+
+    this.ngZone.runOutsideAngular(() => {
+      /**
+       * Caretaker note: this event listener could've been added through `host.click` or `HostListener`.
+       * The compiler generates the `ɵɵlistener` instruction which wraps the actual listener internally into the
+       * function, which runs `markDirty()` before running the actual listener (the decorated class method).
+       * Since we're preventing the default behavior and stopping event propagation
+       * this doesn't require Angular to run the change detection.
+       */
+      fromEvent<MouseEvent>(this.elRef.nativeElement, 'click')
+        .pipe(takeUntil(this.destroy$))
+        .subscribe(event => {
+          if (this.disabled && (event.target as HTMLElement)?.tagName === 'A') {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+          }
+        });
+    });
+  }
+
+  ngAfterViewInit(): void {
+    this.insertSpan(this.elRef.nativeElement.childNodes, this.r2);
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (!changes['disabled']?.currentValue) {
+      this.r2.removeClass(this.elRef.nativeElement, `${this.baseClass}--disabled`);
+    }
+    if (!changes['disabled']?.currentValue) {
+      this.r2.removeClass(this.elRef.nativeElement, `${this.baseClass}--loading`);
+    }
+    this.setClasses();
+    this.cdr.detectChanges();
+  }
+
+  private insertSpan(nodes: NodeList, renderer: Renderer2): void {
+    nodes.forEach(node => {
+      if (node.nodeName === '#text') {
+        const span = renderer.createElement('span');
+        renderer.addClass(span, 'wr-btn__text');
+        const parent = renderer.parentNode(node);
+        renderer.insertBefore(parent, span, node);
+        renderer.appendChild(span, node);
+      }
+    });
+  }
+
+  private setClasses() {
+    const el = this.elRef.nativeElement;
+    const add = (klass: string) => this.r2.addClass(el, `${this.baseClass}-${klass}`);
+
+    this.r2.addClass(el, this.baseClass);
+    add(this.color);
+
+    if (this.rounded) {
+      add(`-rounded`);
+    }
+
+    if (this.loading) {
+      add(`-loading`);
+    }
+
+    if (this.block) {
+      add(`-block`);
+    }
+
+    add(`-${this.size}`);
+
+    if (this.outlined) {
+      add(`-outlined`);
+    }
+
+    if (this.disabled) {
+      add('-disabled');
+    }
+  }
+}

package/button/button.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { WalrusSpinnerModule } from '../spinner';
+import { WalrusButtonComponent } from './button.component';
+
+@NgModule({
+  imports: [CommonModule, WalrusSpinnerModule],
+  declarations: [WalrusButtonComponent],
+  exports: [WalrusButtonComponent],
+})
+export class WalrusButtonModule {}

package/button/index.ts

@@ -0,0 +1,2 @@
+export * from './button.module';
+export * from './button.component';

package/core/types/convert-input.ts

@@ -0,0 +1,2 @@
+export type BooleanInput = boolean | string | undefined | null;
+export type NumberInput = number | string | undefined | null;

package/core/types/index.ts

@@ -0,0 +1,3 @@
+export * from './convert-input';
+export * from './indexable';
+export * from './ng-class';

package/core/types/indexable.ts

@@ -0,0 +1,3 @@
+export interface IndexableObject {
+  [key: string]: any;
+}

package/core/types/ng-class.ts

@@ -0,0 +1,11 @@
+export type NgClassType = string | string[] | Set<string> | NgClassInterface;
+
+// use klass vs class
+export interface NgClassInterface {
+  [klass: string]: any;
+}
+
+// use klass vs class
+export interface NgStyleInterface {
+  [klass: string]: any;
+}

package/core/util/convert.ts

@@ -0,0 +1,63 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+
+export function toBoolean(value: boolean | string): boolean {
+  return coerceBooleanProperty(value);
+}
+
+function propDecoratorFactory<T, D>(
+  name: string,
+  fallback: (v: T) => D
+): (target: any, propName: string) => void {
+  function propDecorator(
+    target: any,
+    propName: string,
+    originalDescriptor?: TypedPropertyDescriptor<any>
+  ): any {
+    const privatePropName = `$$__walrusPropDecorator__${propName}`;
+
+    if (Object.prototype.hasOwnProperty.call(target, privatePropName)) {
+      console.warn(`The prop "${privatePropName}" is already exist, it will be overrided by ${name} decorator.`);
+    }
+
+    Object.defineProperty(target, privatePropName, {
+      configurable: true,
+      writable: true
+    });
+
+    return {
+      get(): string {
+        return originalDescriptor && originalDescriptor.get
+          ? originalDescriptor.get.bind(this)()
+          : this[privatePropName];
+      },
+      set(value: T): void {
+        if (originalDescriptor && originalDescriptor.set) {
+          originalDescriptor.set.bind(this)(fallback(value));
+        }
+        this[privatePropName] = fallback(value);
+      }
+    };
+  }
+
+  return propDecorator;
+}
+
+/**
+ * Input decorator that handle a prop to do get/set automatically with toBoolean
+ *
+ * Why not using @InputBoolean alone without @Input? AOT needs @Input to be visible
+ *
+ * @howToUse
+ * ```
+ * @Input() @InputBoolean() visible: boolean = false;
+ *
+ * // Act as below:
+ * // @Input()
+ * // get visible() { return this.__visible; }
+ * // set visible(value) { this.__visible = value; }
+ * // __visible = false;
+ * ```
+ */
+export function InputBoolean(): any {
+  return propDecoratorFactory('InputBoolean', toBoolean);
+}

package/core/util/index.ts

@@ -0,0 +1 @@
+export * from './convert';

package/divider/divider.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, HostBinding, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'wr-divider',
+  exportAs: 'wrDivider',
+  preserveWhitespaces: false,
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class WalrusDividerComponent {
+  @HostBinding('class') classes = `wr-divider`;
+}

package/divider/divider.module.ts

@@ -0,0 +1,10 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { WalrusDividerComponent } from './divider.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [WalrusDividerComponent],
+  exports: [WalrusDividerComponent]
+})
+export class WalrusDividerModule {}

package/divider/index.ts

@@ -0,0 +1,2 @@
+export * from './divider.module';
+export * from './divider.component';

package/extended-input/extended-input.component.html

@@ -0,0 +1,13 @@
+<div class="wr-extended-input-prefix" *ngIf="prefix">
+  <span class="wr-extended-input-prefix__text" >{{ prefix }}</span>
+</div>
+<input
+  wr-input
+  [disabled]="disabled"
+  [value]="value"
+  (focusout)="onFocusOut()"
+  (input)="onInput($event)"
+>
+<div class="wr-extended-input-suffix" *ngIf="suffix">
+  <span class="wr-extended-input-suffix__text" >{{ suffix }}</span>
+</div>

package/extended-input/extended-input.component.ts

@@ -0,0 +1,77 @@
+import {
+  Component,
+  ElementRef,
+  HostBinding,
+  Input,
+  OnInit,
+  Optional,
+  Renderer2,
+  Self,
+  ViewEncapsulation
+} from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+
+@Component({
+  selector: 'wr-extended-input',
+  templateUrl: './extended-input.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class WalrusExtendedInputComponent implements ControlValueAccessor, OnInit {
+  @HostBinding('class') class = 'wr-extended-input';
+  @Input() suffix?: string;
+  @Input() prefix?: string;
+
+  public disabled: boolean = false;
+  public value: string | undefined = undefined;
+  public touched = false;
+
+  constructor(
+    @Optional() @Self() public ngControl: NgControl,
+    private readonly elRef: ElementRef,
+    private readonly r2: Renderer2
+  ) {
+    if (ngControl !== null) {
+      ngControl.valueAccessor = this;
+    }
+  }
+
+  public ngOnInit(): void {
+    const el = this.elRef.nativeElement;
+    const add = (klass: string) => this.r2.addClass(el, `${this.class}-${klass}`);
+
+    if (this.suffix) {
+      add('-has-suffix')
+    }
+
+    if (this.prefix) {
+      add('-has-prefix')
+    }
+  }
+
+  onInput($event: any): void {
+    this.value = $event.currentTarget.value;
+    this.touched = true;
+    this.onChange(this.value);
+  }
+
+  onChange = (value: any) => {};
+
+  onTouched = () => {};
+
+  onFocusOut(): void {
+    this.touched = true;
+    this.onTouched();
+  }
+
+  registerOnChange(fn: any) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any) {
+    this.onTouched = fn;
+  }
+
+  writeValue(obj: any): void {
+    this.value = obj;
+  }
+}

package/extended-input/extended-input.module.ts

@@ -0,0 +1,17 @@
+import { PlatformModule } from '@angular/cdk/platform';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { WalrusInputModule } from '../input';
+import { WalrusExtendedInputComponent } from './extended-input.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    PlatformModule,
+    WalrusInputModule,
+  ],
+  declarations: [WalrusExtendedInputComponent],
+  exports: [WalrusExtendedInputComponent]
+})
+export class WalrusExtendedInputModule {}

package/extended-input/index.ts

@@ -0,0 +1,2 @@
+export * from './extended-input.module';
+export * from './extended-input.component';

package/form/form-error.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component, HostBinding, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'wr-form-error',
+  exportAs: 'wrFormError',
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  template: `<ng-content></ng-content>`
+})
+export class WalrusFormErrorComponent implements OnDestroy {
+  @HostBinding() class = 'wr-form-error';
+  private destroy$ = new Subject();
+
+  ngOnDestroy(): void {
+    this.destroy$.next(null);
+    this.destroy$.complete();
+  }
+}

package/form/form-item.component.ts

@@ -0,0 +1,60 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef, Input, OnChanges,
+  OnDestroy, OnInit, Renderer2, SimpleChanges,
+  ViewEncapsulation
+} from '@angular/core';
+import { Subject } from 'rxjs';
+import { InputBoolean } from '../core/util';
+
+@Component({
+  selector: 'wr-form-item',
+  exportAs: 'wrFormItem',
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  template: `<ng-content></ng-content>`
+})
+export class WalrusFormItemComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() @InputBoolean() hasError: boolean = false;
+
+  private readonly destroy$ = new Subject();
+
+  constructor(
+    private readonly cdr: ChangeDetectorRef,
+    private readonly el: ElementRef,
+    private readonly r2: Renderer2,
+  ) {}
+
+  public ngOnInit(): void {
+    this.setClasses();
+  }
+
+  public ngOnDestroy(): void {
+    this.destroy$.next(null);
+    this.destroy$.complete();
+  }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    const baseClass = 'wr-form-item';
+    if (!changes['hasError']?.currentValue) {
+      this.r2.removeClass(this.el.nativeElement, `${baseClass}--has-error`);
+    }
+    this.setClasses();
+    this.cdr.detectChanges();
+  }
+
+  private setClasses(): void {
+    const baseClass = 'wr-form-item';
+    const el = this.el.nativeElement;
+    const add = (klass: string) => this.r2.addClass(el, `${baseClass}-${klass}`);
+
+    this.r2.addClass(el, baseClass);
+
+    if (this.hasError) {
+      add('-has-error');
+    }
+  }
+}

package/form/form.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { WalrusFormItemComponent } from './form-item.component';
+import { WalrusFormErrorComponent } from './form-error.component';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [
+    WalrusFormItemComponent,
+    WalrusFormErrorComponent
+  ],
+  exports: [
+    WalrusFormItemComponent,
+    WalrusFormErrorComponent
+  ]
+})
+export class WalrusFormModule {}

package/form/index.ts

@@ -0,0 +1,3 @@
+export * from './form.module';
+export * from './form-error.component';
+export * from './form-item.component';

package/icon/icon.component.ts

@@ -0,0 +1,45 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef, HostBinding,
+  Inject,
+  Input,
+  Optional,
+  ViewEncapsulation
+} from '@angular/core';
+import { WalrusIconsRegistry } from './walrus-icons-registry.service';
+import { DOCUMENT } from '@angular/common';
+import { walrusIcon } from './icons';
+
+@Component({
+  selector: 'wr-icon[name]',
+  template: '<ng-content></ng-content>',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class WalrusIconComponent {
+  @HostBinding('class') class = 'wr-icon';
+  private svgIcon: SVGElement | undefined;
+
+  @Input()
+  set name(iconName: walrusIcon) {
+    if (this.svgIcon) {
+      this.elRef.nativeElement.removeChild(this.svgIcon);
+    }
+    const svgData = this.r.getIcon(iconName) || '';
+    this.svgIcon = this.svgElementFromString(svgData);
+    this.elRef.nativeElement.appendChild(this.svgIcon);
+  }
+
+  constructor(
+    private readonly elRef: ElementRef,
+    private readonly r: WalrusIconsRegistry,
+    @Optional() @Inject(DOCUMENT) private readonly doc: any
+  ) {}
+
+  private svgElementFromString(svgContent: string): SVGElement {
+    const div = this.doc.createElement('div');
+    div.innerHTML = svgContent;
+    return div.querySelector('svg') || this.doc.createElementNS('http://www.w3.org/2000/svg', 'path');
+  }
+}