@avatar-generator/angular 1.0.0

package/dist/Avatar.component.js

@@ -0,0 +1,67 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, ElementRef, Input, } from "@angular/core";
+import { createAvatar } from "@avatar-generator/core";
+let AvatarComponent = class AvatarComponent {
+    el;
+    name;
+    backgroundColor = "#ccc";
+    textColor = "#fff";
+    fontSize = "40px";
+    shape = "circle";
+    constructor(el) {
+        this.el = el;
+    }
+    ngOnChanges(changes) {
+        this.renderAvatar();
+    }
+    renderAvatar() {
+        const container = this.el.nativeElement.querySelector("#avatarContainer");
+        const avatarOptions = {
+            name: this.name,
+            backgroundColor: this.backgroundColor,
+            textColor: this.textColor,
+            fontSize: this.fontSize,
+            shape: this.shape,
+        };
+        if (container) {
+            container.innerHTML = "";
+            container.appendChild(createAvatar(avatarOptions));
+        }
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AvatarComponent.prototype, "name", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], AvatarComponent.prototype, "backgroundColor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], AvatarComponent.prototype, "textColor", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], AvatarComponent.prototype, "fontSize", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], AvatarComponent.prototype, "shape", void 0);
+AvatarComponent = __decorate([
+    Component({
+        selector: "avatar-generator",
+        template: `<div #avatarContainer></div>`,
+    }),
+    __metadata("design:paramtypes", [ElementRef])
+], AvatarComponent);
+export { AvatarComponent };

package/dist/Avatar.module.js

@@ -0,0 +1,17 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { NgModule } from "@angular/core";
+import { AvatarComponent } from "./Avatar.component";
+let AvatarModule = class AvatarModule {
+};
+AvatarModule = __decorate([
+    NgModule({
+        declarations: [AvatarComponent],
+        exports: [AvatarComponent],
+    })
+], AvatarModule);
+export { AvatarModule };

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./Avatar.component";
+export * from "./Avatar.module";

package/dist/types/Avatar.component.d.ts

@@ -0,0 +1,12 @@
+import { ElementRef, OnChanges, SimpleChanges } from "@angular/core";
+export declare class AvatarComponent implements OnChanges {
+    private el;
+    name: string;
+    backgroundColor: string;
+    textColor: string;
+    fontSize: string;
+    shape: "circle" | "square";
+    constructor(el: ElementRef);
+    ngOnChanges(changes: SimpleChanges): void;
+    private renderAvatar;
+}

package/dist/types/Avatar.module.d.ts

@@ -0,0 +1,2 @@
+export declare class AvatarModule {
+}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Avatar.component";
+export * from "./Avatar.module";

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@avatar-generator/angular",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@avatar-generator/core": "^1.0.0",
+    "@angular/core": "^13.0.0"
+  }
+}

package/src/Avatar.component.ts

@@ -0,0 +1,42 @@
+import {
+  Component,
+  ElementRef,
+  Input,
+  OnChanges,
+  SimpleChanges,
+} from "@angular/core";
+import { createAvatar, AvatarOptions } from "@avatar-generator/core";
+
+@Component({
+  selector: "avatar-generator",
+  template: `<div #avatarContainer></div>`,
+})
+export class AvatarComponent implements OnChanges {
+  @Input() name!: string;
+  @Input() backgroundColor = "#ccc";
+  @Input() textColor = "#fff";
+  @Input() fontSize = "40px";
+  @Input() shape: "circle" | "square" = "circle";
+
+  constructor(private el: ElementRef) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.renderAvatar();
+  }
+
+  private renderAvatar(): void {
+    const container = this.el.nativeElement.querySelector("#avatarContainer");
+    const avatarOptions: AvatarOptions = {
+      name: this.name,
+      backgroundColor: this.backgroundColor,
+      textColor: this.textColor,
+      fontSize: this.fontSize,
+      shape: this.shape,
+    };
+
+    if (container) {
+      container.innerHTML = "";
+      container.appendChild(createAvatar(avatarOptions));
+    }
+  }
+}

package/src/Avatar.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from "@angular/core";
+import { AvatarComponent } from "./Avatar.component";
+
+@NgModule({
+  declarations: [AvatarComponent],
+  exports: [AvatarComponent],
+})
+export class AvatarModule {}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./Avatar.component";
+export * from "./Avatar.module";

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "./dist/types",
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "target": "ESNext",
+    "rootDir": "src",
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+  },
+  "include": ["src"]
+}