ngwr 0.0.1

package/tag/index.ts

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

package/tag/tag.component.ts

@@ -0,0 +1,92 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input, OnChanges,
+  OnDestroy,
+  OnInit,
+  Renderer2, SimpleChanges,
+  ViewEncapsulation
+} from '@angular/core';
+import { Subject } from 'rxjs';
+import { InputBoolean } from '../core/util';
+
+export type WalrusTagColor = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'dark';
+
+@Component({
+  selector: 'wr-tag',
+  exportAs: 'wrTag',
+  preserveWhitespaces: false,
+  template: '<wr-spin *ngIf="loading"></wr-spin><ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class WalrusTagComponent implements OnInit, OnDestroy, OnChanges {
+  // add color class
+  @Input() color: WalrusTagColor = 'default';
+
+  // Is tag transparent
+  @Input() @InputBoolean() transparent = false;
+
+  @Input() @InputBoolean() loading = false;
+
+  // Is tag outlined
+  @Input() @InputBoolean() outline = false;
+
+  // Is tag outlined
+  @Input() @InputBoolean() round = false;
+
+  // Is tag hoverable
+  @Input() @InputBoolean() hoverable = false;
+
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private readonly elementRef: ElementRef,
+    private readonly r2: Renderer2
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.setClasses();
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes) {
+      this.setClasses();
+    }
+  }
+
+  private setClasses(): void {
+    const baseClass = 'wr-tag';
+    const el = this.elementRef.nativeElement;
+    const add = (klass: string) => this.r2.addClass(el, `${baseClass}-${klass}`);
+    const rm = (klass: string) => this.r2.removeClass(el, `${baseClass}-${klass}`);
+
+    el.classList = [];
+
+    this.r2.addClass(el, baseClass);
+    add(this.color);
+
+    if (this.round) {
+      add(`-round`);
+    }
+
+    if (this.transparent) {
+      add(`-transparent`);
+    }
+
+    if (this.hoverable) {
+      add(`-hoverable`);
+    }
+
+    if (this.outline) {
+      add(`-outline`);
+    }
+  }
+}

package/tag/tag.module.ts

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

package/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}