Merge pull request #484 from AnkitSharma-007/main

New features added

projects/bulma-app/src/app/app-routing.module.ts

@@ -82,6 +82,10 @@ const routes: Routes = [
     path: 'elements/box',
     loadChildren: () => import('./box/box.module').then((box) => box.BoxModule),
   },
+  {
+    path: 'elements/tag',
+    loadChildren: () => import('./tag/tag.module').then((tag) => tag.TagModule),
+  },
   // Landing Components routings
   {
     path: 'components',

projects/bulma-app/src/app/button/button.component.html

@@ -161,6 +161,19 @@ <h3>Rounded buttons</h3>
   </div>
 </div>
 <hr />
+<h3>Delete buttons</h3>
+<div class="parent-container">
+  <div class="component-container">
+    <button buButton delete="true"></button>
+    <button buButton size="small" delete="true"></button>
+    <button buButton size="medium" delete="true"></button>
+    <button buButton size="large" delete="true"></button>
+  </div>
+  <div class="code-snippet-container">
+    <markdown [src]="'assets/docs/button/delete.md'" lineNumbers></markdown>
+  </div>
+</div>
+<hr />
 <h3>State: Hover</h3>
 <div class="parent-container">
   <div class="component-container">

projects/bulma-app/src/app/landingcomponents/elements/elements.home.html

@@ -31,4 +31,12 @@ <h1 class="title is-2">
       </p>
     </div>
   </a>
+  <a class="header column is-6" [routerLink]="['tag']">
+    <div class="nav-link-container">
+      <i class="fas fa-tag" aria-hidden="true"></i> Tag
+      <p class="nav-link-description subtitle is-5">
+        Small tag labels to insert anywhere.
+      </p>
+    </div>
+  </a>
 </div>

projects/bulma-app/src/app/navbar/doc-navbar/doc-navbar.component.html

@@ -60,6 +60,8 @@
           <a buNavItem [routerLink]="['elements/progress']" routerLinkActive="router-link-active"
             >Progress bar</a
           >
+          <hr class="navbar-divider" />
+          <a buNavItem [routerLink]="['elements/tag']" routerLinkActive="router-link-active">Tag</a>
         </bu-navbar-dropdown>
       </bu-navbar-link>
       <bu-navbar-link title="Form">

projects/bulma-app/src/app/tag/tag-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { TagComponent } from './tag.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TagComponent,
+  },
+];
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TagRoutingModule {}

projects/bulma-app/src/app/tag/tag.component.html

@@ -0,0 +1,116 @@
+<markdown [src]="'assets/docs/tag/tag-description.md'"></markdown>
+
+<h3>Default</h3>
+<div class="parent-container">
+  <div class="component-container">
+    <bu-tag>Tag label</bu-tag>
+  </div>
+  <div class="code-snippet-container">
+    <markdown [src]="'assets/docs/tag/default.md'"></markdown>
+  </div>
+</div>
+<hr />
+<h3>Themes</h3>
+<markdown [src]="'assets/docs/tag/tag-theme.md'"></markdown>
+<br />
+<div class="parent-container">
+  <div class="component-container">
+    <bu-tag theme="black">Black</bu-tag>
+    <bu-tag theme="dark">Dark</bu-tag>
+    <bu-tag theme="light">Light</bu-tag>
+    <bu-tag theme="white">white</bu-tag>
+    <bu-tag theme="primary">Primary</bu-tag>
+    <bu-tag theme="link">Link</bu-tag>
+    <bu-tag theme="info">Info</bu-tag>
+    <bu-tag theme="success">Success</bu-tag>
+    <bu-tag theme="warning">Warning</bu-tag>
+    <bu-tag theme="danger">Danger</bu-tag>
+  </div>
+  <div class="code-snippet-container">
+    <markdown [src]="'assets/docs/tag/theme.md'" lineNumbers></markdown>
+  </div>
+</div>
+<hr />
+<h3>Light theme version</h3>
+<markdown [src]="'assets/docs/tag/tag-light-theme.md'"></markdown>
+<br />
+<div class="parent-container">
+  <div class="component-container">
+    <bu-tag theme="primary" light="true">Primary</bu-tag>
+    <bu-tag theme="link" light="true">Link</bu-tag>
+    <bu-tag theme="info" light="true">Info</bu-tag>
+    <bu-tag theme="success" light="true">Success</bu-tag>
+    <bu-tag theme="warning" light="true">Warning</bu-tag>
+    <bu-tag theme="danger" light="true">Danger</bu-tag>
+  </div>
+  <div class="code-snippet-container">
+    <markdown [src]="'assets/docs/tag/themelight.md'" lineNumbers></markdown>
+  </div>
+</div>
+<hr />
+<h3>Sizes</h3>
+<markdown [src]="'assets/docs/tag/tag-size.md'"></markdown>
+<br />
+<div class="parent-container">
+  <div class="component-container">
+    <bu-tag theme="link" size="normal">Normal</bu-tag>
+    <bu-tag theme="primary" size="medium">Medium</bu-tag>
+    <bu-tag theme="info" size="large">Large</bu-tag>
+  </div>
+  <div class="code-snippet-container">
+    <markdown [src]="'assets/docs/tag/size.md'" lineNumbers></markdown>
+  </div>
+</div>
+<hr />
+<h3>Rounded tags</h3>
+<markdown [src]="'assets/docs/tag/tag-rounded.md'"></markdown>
+<br />
+<div class="parent-container">
+  <div class="component-container">
+    <bu-tag theme="primary" rounded="true">Primary</bu-tag>
+    <bu-tag theme="link" rounded="true">Link</bu-tag>
+    <bu-tag theme="info" rounded="true">Info</bu-tag>
+    <bu-tag theme="success" rounded="true">Success</bu-tag>
+    <bu-tag theme="warning" rounded="true">Warning</bu-tag>
+    <bu-tag theme="danger" rounded="true">Danger</bu-tag>
+  </div>
+  <div class="code-snippet-container">
+    <markdown [src]="'assets/docs/tag/rounded.md'" lineNumbers></markdown>
+  </div>
+</div>
+<hr />
+<h3>Tags as delete buttons</h3>
+<markdown [src]="'assets/docs/tag/tag-delete.md'"></markdown>
+<br />
+<div class="parent-container">
+  <div class="component-container">
+    <bu-tag delete="true"></bu-tag>
+    <bu-tag theme="primary" delete="true"></bu-tag>
+    <bu-tag theme="link" delete="true"></bu-tag>
+    <bu-tag theme="info" delete="true" rounded="true"></bu-tag>
+    <bu-tag theme="success" delete="true" rounded="true"></bu-tag>
+    <bu-tag theme="warning" delete="true" size="medium"></bu-tag>
+    <bu-tag theme="danger" delete="true" rounded="true" size="large"></bu-tag>
+  </div>
+  <div class="code-snippet-container">
+    <markdown [src]="'assets/docs/tag/delete.md'" lineNumbers></markdown>
+  </div>
+</div>
+<hr />
+<h3>Combinations</h3>
+<markdown [src]="'assets/docs/tag/tag-combination.md'"></markdown>
+<br />
+<div class="parent-container">
+  <div class="component-container">
+    <bu-tag theme="success">Bar<button buButton size="small" delete="true"></button></bu-tag>
+    <bu-tag theme="warning" size="medium"
+      >Hello<button buButton size="small" delete="true"></button
+    ></bu-tag>
+    <bu-tag theme="danger" size="large"
+      >World<button buButton size="small" delete="true"></button
+    ></bu-tag>
+  </div>
+  <div class="code-snippet-container">
+    <markdown [src]="'assets/docs/tag/combination.md'" lineNumbers></markdown>
+  </div>
+</div>

projects/bulma-app/src/app/tag/tag.component.scss

@@ -0,0 +1,3 @@
+bu-tag {
+  margin: 5px;
+}

projects/bulma-app/src/app/tag/tag.component.spec.ts

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

projects/bulma-app/src/app/tag/tag.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-tag',
+  templateUrl: './tag.component.html',
+  styleUrls: ['./tag.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TagComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

projects/bulma-app/src/app/tag/tag.module.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { BulmaButtonModule } from '@ngx-builders/ngx-bulma/button';
+import { BulmaTagModule } from '@ngx-builders/ngx-bulma/tag';
+import { MarkdownModule } from 'ngx-markdown';
+import { TagRoutingModule } from './tag-routing.module';
+import { TagComponent } from './tag.component';
+
+@NgModule({
+  declarations: [TagComponent],
+  imports: [
+    CommonModule,
+    BulmaButtonModule,
+    TagRoutingModule,
+    BulmaTagModule,
+    MarkdownModule.forRoot({ loader: HttpClient }),
+  ],
+  exports: [TagComponent],
+})
+export class TagModule {}

projects/bulma-app/src/assets/docs/button/button-text.md

@@ -30,6 +30,7 @@ To display the Button component in your Angular application, add the `buButton`
 | `outlined` | Set the outlined style of the Button, default value is false                           |     |
 | `inverted` | Set the inverted style of the Button, default value is false                           |     |
 | `rounded`  | Make the edges rounded, giving the button a capsule like shape, default value is false |     |
+| `delete`   | Render the button as a delete button, default value is false                           |     |
 | `hovered`  | Set the hover state of the Button, default value is false                              |     |
 | `focus`    | Set the focus state of the Button, default value is false                              |     |
 | `active`   | Set the active state of the Button, default value is false                             |     |

projects/bulma-app/src/assets/docs/button/delete.md

@@ -0,0 +1,6 @@
+```javascript
+<button buButton delete="true"></button>
+<button buButton size="small" delete="true"></button>
+<button buButton size="medium" delete="true"></button>
+<button buButton size="large" delete="true"></button>
+```

projects/bulma-app/src/assets/docs/tag/combination.md

@@ -0,0 +1,5 @@
+```javascript
+<bu-tag theme="success">Bar<button class="delete is-small"></button></bu-tag>
+<bu-tag theme="warning" size="medium">Hello<button class="delete is-small"></button></bu-tag>
+<bu-tag theme="danger" size="large">World<button class="delete"></button></bu-tag>
+```

projects/bulma-app/src/assets/docs/tag/default.md

@@ -0,0 +1,3 @@
+```javascript
+<bu-tag>Tag label</bu-tag>
+```

projects/bulma-app/src/assets/docs/tag/delete.md

@@ -0,0 +1,9 @@
+```javascript
+<bu-tag delete="true"></bu-tag>
+<bu-tag theme="primary" delete="true"></bu-tag>
+<bu-tag theme="link" delete="true"></bu-tag>
+<bu-tag theme="info" delete="true" rounded="true"></bu-tag>
+<bu-tag theme="success" delete="true" rounded="true"></bu-tag>
+<bu-tag theme="warning" delete="true" size="medium"></bu-tag>
+<bu-tag theme="danger" delete="true" rounded="true" size="large"></bu-tag>
+```

projects/bulma-app/src/assets/docs/tag/rounded.md

@@ -0,0 +1,8 @@
+```javascript
+<bu-tag theme="primary" rounded="true">Primary</bu-tag>
+<bu-tag theme="link" rounded="true">Link</bu-tag>
+<bu-tag theme="info" rounded="true">Info</bu-tag>
+<bu-tag theme="success" rounded="true">Success</bu-tag>
+<bu-tag theme="warning" rounded="true">Warning</bu-tag>
+<bu-tag theme="danger" rounded="true">Danger</bu-tag>
+```

projects/bulma-app/src/assets/docs/tag/size.md

@@ -0,0 +1,5 @@
+```javascript
+<bu-tag theme="link" size="normal">Normal</bu-tag>
+<bu-tag theme="primary" size="medium">Medium</bu-tag>
+<bu-tag theme="info" size="large">Large</bu-tag>
+```

projects/bulma-app/src/assets/docs/tag/tag-combination.md

@@ -0,0 +1 @@
+You can append a **delete button** to the tag.

projects/bulma-app/src/assets/docs/tag/tag-delete.md

@@ -0,0 +1 @@
+If you want to to turn the tag into a **delete button**, set the `delete` property to `true`.

projects/bulma-app/src/assets/docs/tag/tag-description.md

@@ -0,0 +1,31 @@
+# Tag
+
+#### Small tag labels to insert anywhere
+
+To use the Tag component in your application, you need to import the `BulmaTagModule` by adding the following lines to your `app.module.ts` file.
+
+```javascript
+import { BulmaTagModule } from '@ngx-builders/ngx-bulma/tag';
+
+@NgModule({
+  imports: [BulmaTagModule],
+  // ...
+})
+export class AppModule {}
+```
+
+## Basic
+
+To display the Tag component in your Angular application, use `<bu-tag>` tag.
+
+| Component | Description           |     |
+| --------- | --------------------- | --- |
+| `bu-tag`  | Parent Tag Component. |
+
+| Properties | Description                                                                         |     |
+| ---------- | ----------------------------------------------------------------------------------- | --- |
+| `theme`    | Set the theme of the Tag                                                            |     |
+| `light`    | Set the the light version of the theme, default value is false                      |     |
+| `size`     | Set the size of the Tag                                                             |     |
+| `rounded`  | Make the edges rounded, giving the tag a capsule like shape, default value is false |     |
+| `delete`   | Render the tag as delete button, default value is false                             |     |

projects/bulma-app/src/assets/docs/tag/tag-light-theme.md

@@ -0,0 +1 @@
+If you want to apply the **light version** of the theme, set the `light` property to `true`.

projects/bulma-app/src/assets/docs/tag/tag-rounded.md

@@ -0,0 +1 @@
+If you want to make a **rounded** tag, set the `rounded` property to `true`.

projects/bulma-app/src/assets/docs/tag/tag-size.md

@@ -0,0 +1,7 @@
+You can set the size of the tag using one the 3 size options:
+
+- `normal`
+- `medium`
+- `large`
+
+The default size is **normal**.

projects/bulma-app/src/assets/docs/tag/tag-theme.md

@@ -0,0 +1,12 @@
+You can change the theme of the tag using one the 10 theme options:
+
+- `black`
+- `dark`
+- `light`
+- `white`
+- `primary`
+- `link`
+- `info`
+- `success`
+- `warning`
+- `danger`

projects/bulma-app/src/assets/docs/tag/theme.md

@@ -0,0 +1,12 @@
+```javascript
+<bu-tag theme="black">Black</bu-tag>
+<bu-tag theme="dark">Dark</bu-tag>
+<bu-tag theme="light">Light</bu-tag>
+<bu-tag theme="white">white</bu-tag>
+<bu-tag theme="primary">Primary</bu-tag>
+<bu-tag theme="link">Link</bu-tag>
+<bu-tag theme="info">Info</bu-tag>
+<bu-tag theme="success">Success</bu-tag>
+<bu-tag theme="warning">Warning</bu-tag>
+<bu-tag theme="danger">Danger</bu-tag>
+```

projects/bulma-app/src/assets/docs/tag/themelight.md

@@ -0,0 +1,8 @@
+```javascript
+<bu-tag theme="primary" light="true">Primary</bu-tag>
+<bu-tag theme="link" light="true">Link</bu-tag>
+<bu-tag theme="info" light="true">Info</bu-tag>
+<bu-tag theme="success" light="true">Success</bu-tag>
+<bu-tag theme="warning" light="true">Warning</bu-tag>
+<bu-tag theme="danger" light="true">Danger</bu-tag>
+```