feat(badge): initial commit for badge

.package.conf.yml

@@ -21,3 +21,4 @@ components:
   '@alyle/ui/tabs': tabs
   '@alyle/ui/toolbar': toolbar
   '@alyle/ui/drawer': drawer
+  '@alyle/ui/badge': badge

.prerender.conf.json

@@ -22,6 +22,7 @@
     "components/ripple",
     "components/shadow",
     "components/card",
-    "components/typography"
+    "components/typography",
+    "components/badge"
   ]
 }

src/app/components/routes-app.service.ts

@@ -36,6 +36,7 @@ export class RoutesAppService {
         name: 'Components',
         route: 'components',
         routes: [
+          { route: 'badge', name: 'Badge' },
           { route: 'button', name: 'Button' },
           { route: 'card', name: 'Card' },
           { route: 'carousel', name: 'Carousel' },

src/app/docs/components/badge-demo/badge-demo.component.html

@@ -0,0 +1,9 @@
+<p>
+  badge-demo works!
+</p>
+<h2 lyTyp="display1" gutter>Basic badge</h2>
+<demo-view path="docs/components/basic-badge/basic-badge">
+  <aui-basic-badge></aui-basic-badge>
+</demo-view>
+
+

src/app/docs/components/badge-demo/badge-demo.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BadgeDemoComponent } from './badge-demo.component';
+
+describe('BadgeDemoComponent', () => {
+  let component: BadgeDemoComponent;
+  let fixture: ComponentFixture<BadgeDemoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BadgeDemoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BadgeDemoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/docs/components/badge-demo/badge-demo.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'aui-badge-demo',
+  templateUrl: './badge-demo.component.html',
+  styleUrls: ['./badge-demo.component.scss']
+})
+export class BadgeDemoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/docs/components/badge-demo/basic-badge/basic-badge.component.html

@@ -0,0 +1,11 @@
+<p>
+  demo 1:
+</p>
+<button ly-button LyBadge="9">button</button>
+<p>
+  demo 2:
+</p>
+<button ly-button>
+  button
+  <ly-badge bg="primary">9</ly-badge>
+</button>

src/app/docs/components/badge-demo/basic-badge/basic-badge.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BasicBadgeComponent } from './basic-badge.component';
+
+describe('BasicBadgeComponent', () => {
+  let component: BasicBadgeComponent;
+  let fixture: ComponentFixture<BasicBadgeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BasicBadgeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BasicBadgeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/docs/components/badge-demo/basic-badge/basic-badge.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'aui-basic-badge',
+  templateUrl: './basic-badge.component.html'
+})
+export class BasicBadgeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/docs/components/badge-demo/basic-badge/basic-badge.module.spec.ts

@@ -0,0 +1,13 @@
+import { BasicBadgeModule } from './basic-badge.module';
+
+describe('BasicBadgeModule', () => {
+  let basicBadgeModule: BasicBadgeModule;
+
+  beforeEach(() => {
+    basicBadgeModule = new BasicBadgeModule();
+  });
+
+  it('should create an instance', () => {
+    expect(basicBadgeModule).toBeTruthy();
+  });
+});

src/app/docs/components/badge-demo/basic-badge/basic-badge.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BasicBadgeComponent } from './basic-badge.component';
+import { LyBadgeModule } from '@alyle/ui/badge';
+import { LyButtonModule } from '@alyle/ui/button';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    LyButtonModule,
+    LyBadgeModule
+  ],
+  exports: [BasicBadgeComponent],
+  declarations: [BasicBadgeComponent]
+})
+export class BasicBadgeModule { }

src/app/docs/docs.module.ts

@@ -42,6 +42,8 @@ import { ResizingCroppingImagesExample02Module } from '@docs/components/resizing
 // tslint:disable-next-line:max-line-length
 import { ResizingCroppingImagesExample03Module } from '@docs/components/resizing-cropping-images-demo/resizing-cropping-images-example-03/resizing-cropping-images-example-03.module';
 import { ResizingCroppingImagesDemoComponent } from '@docs/components/resizing-cropping-images-demo/resizing-cropping-images-demo.component';
+import { BadgeDemoComponent } from './components/badge-demo/badge-demo.component';
+import { BasicBadgeModule } from '@docs/components/badge-demo/basic-badge/basic-badge.module';
 
 @NgModule({
   imports: [
@@ -69,7 +71,9 @@ import { ResizingCroppingImagesDemoComponent } from '@docs/components/resizing-c
     /** Image cropper */
     ResizingCroppingImagesExample01Module,
     ResizingCroppingImagesExample02Module,
-    ResizingCroppingImagesExample03Module
+    ResizingCroppingImagesExample03Module,
+    /** Badge */
+    BasicBadgeModule
   ],
   declarations: [
     ThemingComponent,
@@ -84,7 +88,10 @@ import { ResizingCroppingImagesDemoComponent } from '@docs/components/resizing-c
     /** Toolbar */
     ToolbarDemoComponent,
     /** Image cropper */
-    ResizingCroppingImagesDemoComponent
+    ResizingCroppingImagesDemoComponent,
+    /** Badge */
+    BadgeDemoComponent
+
   ]
 })
 export class DocsModule { }

src/app/docs/docs.routing.ts

@@ -7,6 +7,7 @@ import { GridDemoComponent } from '@docs/layout/grid-demo/grid-demo.component';
 import { ButtonDemoComponent } from '@docs/components/button-demo/button-demo.component';
 import { ToolbarDemoComponent } from '@docs/components/toolbar-demo/toolbar-demo.component';
 import { ResizingCroppingImagesDemoComponent } from '@docs/components/resizing-cropping-images-demo/resizing-cropping-images-demo.component';
+import { BadgeDemoComponent } from '@docs/components/badge-demo/badge-demo.component';
 
 const routes: Routes = [
   /** layout */
@@ -35,6 +36,7 @@ const routes: Routes = [
       { path: 'button', component: ButtonDemoComponent },
       { path: 'toolbar', component: ToolbarDemoComponent },
       { path: 'resizing-cropping-images', component: ResizingCroppingImagesDemoComponent },
+      { path: 'badge', component: BadgeDemoComponent }
     ]
   }
 ];

src/lib/badge/badge.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LyCommonModule } from '@alyle/ui';
+import { LyBadge } from './badge';
+
+@NgModule({
+  imports: [CommonModule, LyCommonModule],
+  exports: [LyBadge, LyCommonModule],
+  declarations: [LyBadge]
+})
+export class LyBadgeModule { }

src/lib/badge/badge.ts

@@ -0,0 +1,103 @@
+import { Directive, Input, ElementRef, Optional, Renderer2, OnInit } from '@angular/core';
+import { ThemeVariables, LyCommon, LyTheme2 } from '@alyle/ui';
+
+const DEFAULT_POSITION = 'end top';
+
+const styles = (theme: ThemeVariables) => {
+  return {
+    root: {
+      position: 'absolute',
+      width: '22px',
+      height: '22px',
+      borderRadius: '100%',
+      lineHeight: '22px',
+      textAlign: 'center'
+    },
+    sdasdasd: {
+      color: 'red'
+    }
+  };
+};
+@Directive({
+  selector: 'ly-badge, [LyBadge]'
+})
+export class LyBadge implements OnInit {
+  classes = this._theme.addStyleSheet(styles, 'lyBadge');
+  private _badge: string | number;
+  private _position: string | number;
+  private _positionClass: string;
+
+  /** The content for the badge */
+  @Input()
+  set LyBadge(val: string | number) {
+    if (val !== this.content) {
+      this._badge = val;
+      this._el.nativeElement.innerText = val;
+    }
+  }
+  get content() {
+    return this._badge;
+  }
+
+  /** The position for the badge */
+  @Input()
+  set LyBadgePosition(val: 'start top' | 'start bottom' | 'end top' | 'end bottom') {
+    if (val !== this.position) {
+      this._positionClass = this._theme.addStyle(`ly-badge.position:${val}`, (theme: ThemeVariables) => {
+        const positionStyles: {
+          top?: number
+          left?: number
+          right?: number
+          bottom?: number
+        } = {};
+        if (val === 'start top') {
+          positionStyles.left = 0;
+          positionStyles.top = 0;
+        } else if (val === 'start bottom') {
+          positionStyles.left = 0;
+          positionStyles.bottom = 0;
+        } else if (val === 'end top') {
+          positionStyles.right = 0;
+          positionStyles.top = 0;
+        }
+        return positionStyles;
+      },
+      this._el.nativeElement, this._positionClass);
+    }
+
+  }
+  get position() {
+    return this._position;
+  }
+
+  /** The color of the badge  */
+  @Input() LyBadgeBg: string;
+
+  constructor(
+    private _el: ElementRef,
+    private _theme: LyTheme2,
+    private _renderer: Renderer2,
+    @Optional() _common: LyCommon
+  ) {
+    if (_common) {
+      _common.setAutoContrast();
+    }
+    this._renderer.addClass(this._el.nativeElement, this.classes.root);
+  }
+
+  ngOnInit() {
+    if (!this.LyBadgePosition) {
+      this.LyBadgePosition = DEFAULT_POSITION;
+    }
+  }
+
+}
+
+/**
+ * demo 1:
+ * <button badgeRef="badge">button</button>
+ * <ly-badge class="hhjk" #badge bg="background:primary" color="primary">8</ly-badge>
+ *
+ * demo 2:
+ * <button LyBadge="8" LyBadgePosition="start top" LyBadgeBg="primary">button</button>
+ */

src/lib/badge/index.ts

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

src/lib/badge/public_api.ts

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

src/lib/ng-package.json

@@ -23,6 +23,7 @@
       "@alyle/ui/card": "ly.card",
       "@alyle/ui/typography": "ly.typography",
       "@alyle/ui/grid": "ly.grid",
+      "@alyle/ui/badge": "ly.badge",
       "chroma-js": "chroma"
     }
   }

tsconfig.json

@@ -37,6 +37,7 @@
       "@alyle/ui/card": ["lib/card"],
       "@alyle/ui/typography": ["lib/typography"],
       "@alyle/ui/grid": ["lib/grid"],
+      "@alyle/ui/badge": ["lib/badge"],
       "@env/*": ["environments/*"],
       "@docs/*": ["app/docs/*"]
     }