fix: message component

santoshyadavdev · santoshyadavdev · commit 5b473e1df365 · 2020-06-14T10:41:00.000+05:30
diff --git a/projects/bulma-app/src/app/message/message.component.html b/projects/bulma-app/src/app/message/message.component.html
@@ -1,5 +1,19 @@
 <markdown [src]="'assets/docs/message/message.md'"></markdown>
 <br />
+<article class="message is-dark">
+  <div class="message-header">
+    <p>Dark</p>
+    <button class="delete" aria-label="delete"></button>
+  </div>
+  <div class="message-body">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>,
+    tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
+    gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
+    <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor
+    urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget,
+    facilisis sodales sem.
+  </div>
+</article>
 <div class="parent-container">
   <div class="component-container">
     <bu-message>
@@ -30,7 +44,7 @@ <h3>Colors</h3>
 <br />
 <div class="parent-container">
   <div class="component-container">
-    <bu-message buMessage theme="primary">
+    <bu-message theme="primary">
       <bu-message-header>
         <p>Header</p>
         <button
@@ -56,7 +70,7 @@ <h3>Colors</h3>
 
 <div class="parent-container">
   <div class="component-container">
-    <bu-message buMessage theme="link">
+    <bu-message theme="link">
       <bu-message-header>
         <p>Header</p>
         <button
@@ -82,7 +96,7 @@ <h3>Colors</h3>
 
 <div class="parent-container">
   <div class="component-container">
-    <bu-message buMessage theme="info">
+    <bu-message theme="info">
       <bu-message-header>
         <p>Header</p>
         <button
@@ -108,7 +122,7 @@ <h3>Colors</h3>
 
 <div class="parent-container">
   <div class="component-container">
-    <bu-message buMessage theme="success">
+    <bu-message theme="success">
       <bu-message-header>
         <p>Header</p>
         <button
@@ -134,7 +148,7 @@ <h3>Colors</h3>
 
 <div class="parent-container">
   <div class="component-container">
-    <bu-message buMessage theme="warning">
+    <bu-message theme="warning">
       <bu-message-header>
         <p>Header</p>
         <button
@@ -160,7 +174,7 @@ <h3>Colors</h3>
 
 <div class="parent-container">
   <div class="component-container">
-    <bu-message buMessage theme="danger">
+    <bu-message theme="danger">
       <bu-message-header>
         <p>Header</p>
         <button
@@ -188,7 +202,7 @@ <h3>Sizes</h3>
 <br />
 <div class="parent-container">
   <div class="component-container">
-    <bu-message buMessage size="small">
+    <bu-message size="small">
       <bu-message-header>
         <p>Header</p>
         <button
@@ -214,7 +228,7 @@ <h3>Sizes</h3>
 
 <div class="parent-container">
   <div class="component-container">
-    <bu-message buMessage size="medium">
+    <bu-message size="medium">
       <bu-message-header>
         <p>Header</p>
         <button
@@ -240,7 +254,7 @@ <h3>Sizes</h3>
 
 <div class="parent-container">
   <div class="component-container">
-    <bu-message buMessage size="large">
+    <bu-message size="large">
       <bu-message-header>
         <p>Header</p>
         <button
diff --git a/projects/bulma-app/src/assets/docs/message/danger-message.md b/projects/bulma-app/src/assets/docs/message/danger-message.md
@@ -1,5 +1,5 @@
 ```javascript
-<bu-message buMessage theme="danger">
+<bu-message theme="danger">
   <bu-message-header>
     <p>Header</p>
     <button
diff --git a/projects/bulma-app/src/assets/docs/message/info-message.md b/projects/bulma-app/src/assets/docs/message/info-message.md
@@ -1,5 +1,5 @@
 ```javascript
-<bu-message buMessage theme="info">
+<bu-message theme="info">
   <bu-message-header>
     <p>Header</p>
     <button
diff --git a/projects/bulma-app/src/assets/docs/message/large-message.md b/projects/bulma-app/src/assets/docs/message/large-message.md
@@ -1,5 +1,5 @@
 ```javascript
-<bu-message buMessage size="large">
+<bu-message size="large">
   <bu-message-header>
     <p>Header</p>
     <button
diff --git a/projects/bulma-app/src/assets/docs/message/link-message.md b/projects/bulma-app/src/assets/docs/message/link-message.md
@@ -1,5 +1,5 @@
 ```javascript
-<bu-message buMessage theme="link">
+<bu-message theme="link">
   <bu-message-header>
     <p>Header</p>
     <button
diff --git a/projects/bulma-app/src/assets/docs/message/medium.md b/projects/bulma-app/src/assets/docs/message/medium.md
@@ -1,5 +1,5 @@
 ```javascript
-<bu-message buMessage size="medium">
+<bu-message size="medium">
   <bu-message-header>
     <p>Header</p>
     <button
diff --git a/projects/bulma-app/src/assets/docs/message/primary-message.md b/projects/bulma-app/src/assets/docs/message/primary-message.md
@@ -1,5 +1,5 @@
 ```javascript
-<bu-message buMessage theme="primary">
+<bu-message theme="primary">
   <bu-message-header>
     <p>Header</p>
     <button
diff --git a/projects/bulma-app/src/assets/docs/message/small-message.md b/projects/bulma-app/src/assets/docs/message/small-message.md
@@ -1,5 +1,5 @@
 ```javascript
-<bu-message buMessage size="small">
+<bu-message size="small">
   <bu-message-header>
     <p>Header</p>
     <button
diff --git a/projects/bulma-app/src/assets/docs/message/success-message.md b/projects/bulma-app/src/assets/docs/message/success-message.md
@@ -1,5 +1,5 @@
 ```javascript
-        <bu-message buMessage theme='success'>
+        <bu-message theme='success'>
             <bu-message-header>
                 <p>Header</p>
                   <button class="delete" aria-label="delete" (click)="showMyContainer=!showMyContainer"></button>
@@ -8,4 +8,4 @@
                 <p>Content..........</p>
             </bu-message-content>
         </bu-message>
- ```
+```
diff --git a/projects/bulma-app/src/assets/docs/message/warning-message.md b/projects/bulma-app/src/assets/docs/message/warning-message.md
@@ -1,5 +1,5 @@
 ```javascript
-        <bu-message buMessage theme='warning'>
+        <bu-message theme='warning'>
             <bu-message-header>
                 <p>Header</p>
                   <button class="delete" aria-label="delete" (click)="showMyContainer=!showMyContainer"></button>
@@ -8,4 +8,4 @@
                 <p>Content..........</p>
             </bu-message-content>
         </bu-message>
- ```
+```
diff --git a/projects/ngx-bulma/src/lib/message/index.ts b/projects/ngx-bulma/src/lib/message/index.ts
@@ -3,5 +3,3 @@ export * from './message.component';
 
 export * from './message-header/message-header.component';
 export * from './message-content/message-content.component';
-
-export * from './message.directive';
diff --git a/projects/ngx-bulma/src/lib/message/message-content/message-content.component.css b/projects/ngx-bulma/src/lib/message/message-content/message-content.component.css
@@ -0,0 +1,3 @@
+.message-body {
+  display: block;
+}
diff --git a/projects/ngx-bulma/src/lib/message/message-content/message-content.component.html b/projects/ngx-bulma/src/lib/message/message-content/message-content.component.html
@@ -1,3 +1 @@
-<div class="message-body">
-  <ng-content></ng-content>
-</div>
+<ng-content></ng-content>
diff --git a/projects/ngx-bulma/src/lib/message/message-content/message-content.component.ts b/projects/ngx-bulma/src/lib/message/message-content/message-content.component.ts
@@ -1,17 +1,21 @@
-import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  OnInit,
+  ViewEncapsulation,
+} from '@angular/core';
 
 @Component({
   selector: 'bu-message-content',
   templateUrl: './message-content.component.html',
   styleUrls: ['./message-content.component.css'],
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BulmaMessageContentComponent implements OnInit {
+  @HostBinding('class') class = 'message-body';
+  constructor() {}
 
-  constructor() { }
-
-  ngOnInit() {
-  }
-
+  ngOnInit() {}
 }
diff --git a/projects/ngx-bulma/src/lib/message/message-header/message-header.component.css b/projects/ngx-bulma/src/lib/message/message-header/message-header.component.css
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/projects/ngx-bulma/src/lib/message/message-header/message-header.component.html b/projects/ngx-bulma/src/lib/message/message-header/message-header.component.html
@@ -1,3 +1 @@
-<div class="message-header">
-    <ng-content></ng-content>
-</div>
+<ng-content></ng-content>
diff --git a/projects/ngx-bulma/src/lib/message/message-header/message-header.component.ts b/projects/ngx-bulma/src/lib/message/message-header/message-header.component.ts
@@ -1,17 +1,23 @@
-import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  OnInit,
+  ViewEncapsulation,
+} from '@angular/core';
 
 @Component({
   selector: 'bu-message-header',
   templateUrl: './message-header.component.html',
   styleUrls: ['./message-header.component.css'],
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BulmaMessageHeaderComponent implements OnInit {
-  showMyContainer = true;
-  constructor() { }
+  @HostBinding('class') class = 'message-header';
 
-  ngOnInit() {
-  }
+  showMyContainer = true;
+  constructor() {}
 
+  ngOnInit() {}
 }
diff --git a/projects/ngx-bulma/src/lib/message/message.component.css b/projects/ngx-bulma/src/lib/message/message.component.css
@@ -0,0 +1,3 @@
+.message {
+  display: block;
+}
diff --git a/projects/ngx-bulma/src/lib/message/message.component.ts b/projects/ngx-bulma/src/lib/message/message.component.ts
@@ -1,17 +1,39 @@
-import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+  OnInit,
+  ViewEncapsulation,
+} from '@angular/core';
 
 @Component({
   selector: 'bu-message',
   templateUrl: './message.component.html',
   styleUrls: ['./message.component.css'],
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  // tslint:disable-next-line:no-host-metadata-property
+  host: {
+    '[class.is-primary]': 'theme === "primary"',
+    '[class.is-dark]': 'theme === "dark"',
+    '[class.is-link]': 'theme === "link"',
+    '[class.is-info]': 'theme === "info"',
+    '[class.is-success]': 'theme === "success"',
+    '[class.is-warning]': 'theme === "warning"',
+    '[class.is-danger]': 'theme === "danger"',
+    '[class.is-black]': 'theme === "black"',
+    '[class.is-small]': 'size === "small"',
+    '[class.is-medium]': 'size === "medium"',
+    '[class.is-large]': 'size === "large"',
+  },
 })
 export class BulmaMessageComponent implements OnInit {
+  @Input() theme = '';
+  @Input() size = '';
+  @HostBinding('class') class = 'message';
 
-  constructor() { }
-
-  ngOnInit() {
-  }
+  constructor() {}
 
+  ngOnInit() {}
 }
diff --git a/projects/ngx-bulma/src/lib/message/message.directive.ts b/projects/ngx-bulma/src/lib/message/message.directive.ts
diff --git a/projects/ngx-bulma/src/lib/message/message.module.ts b/projects/ngx-bulma/src/lib/message/message.module.ts
@@ -1,21 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { THEME_SERVICE, THEME_VALUES } from '../services/theme.service';
 import { BulmaMessageContentComponent } from './message-content/message-content.component';
 import { BulmaMessageHeaderComponent } from './message-header/message-header.component';
 import { BulmaMessageComponent } from './message.component';
-import { BulmaMessageDirective } from './message.directive';
-
-
 
 @NgModule({
-  declarations: [BulmaMessageComponent, BulmaMessageHeaderComponent, BulmaMessageContentComponent, BulmaMessageDirective],
-  imports: [
-    CommonModule
-  ],
-  exports: [BulmaMessageComponent, BulmaMessageHeaderComponent, BulmaMessageContentComponent, BulmaMessageDirective],
-  providers: [{ provide: THEME_SERVICE, useValue: THEME_VALUES }]
-
-
+  declarations: [BulmaMessageComponent, BulmaMessageHeaderComponent, BulmaMessageContentComponent],
+  imports: [CommonModule],
+  exports: [BulmaMessageComponent, BulmaMessageHeaderComponent, BulmaMessageContentComponent],
 })
-export class BulmaMessageModule { }
+export class BulmaMessageModule {}
