From bfd4bd818e9ca092a1e447753dedd58bd713423c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= Date: Fri, 11 Dec 2020 14:25:13 +0300 Subject: [PATCH] Fixed #9641 - Chip Component --- src/app/components/chip/chip.css | 21 ++ src/app/components/chip/chip.spec.ts | 23 ++ src/app/components/chip/chip.ts | 57 +++++ src/app/components/chip/ng-package.json | 6 + src/app/components/chip/public_api.ts | 1 + src/app/showcase/app-routing.module.ts | 1 + src/app/showcase/app.menu.component.ts | 3 +- .../chip/chipdemo-routing.module.ts | 15 ++ .../showcase/components/chip/chipdemo.html | 210 ++++++++++++++++++ .../components/chip/chipdemo.module.ts | 25 +++ .../showcase/components/chip/chipdemo.scss | 4 + src/app/showcase/components/chip/chipdemo.ts | 8 + 12 files changed, 373 insertions(+), 1 deletion(-) create mode 100755 src/app/components/chip/chip.css create mode 100755 src/app/components/chip/chip.spec.ts create mode 100755 src/app/components/chip/chip.ts create mode 100644 src/app/components/chip/ng-package.json create mode 100644 src/app/components/chip/public_api.ts create mode 100644 src/app/showcase/components/chip/chipdemo-routing.module.ts create mode 100644 src/app/showcase/components/chip/chipdemo.html create mode 100644 src/app/showcase/components/chip/chipdemo.module.ts create mode 100644 src/app/showcase/components/chip/chipdemo.scss create mode 100644 src/app/showcase/components/chip/chipdemo.ts diff --git a/src/app/components/chip/chip.css b/src/app/components/chip/chip.css new file mode 100755 index 00000000000..40d2f56b5b4 --- /dev/null +++ b/src/app/components/chip/chip.css @@ -0,0 +1,21 @@ +.p-chip { + display: inline-flex; + align-items: center; +} + +.p-chip-text { + line-height: 1.5; +} + +.p-chip-icon.pi { + line-height: 1.5; +} + +.pi-chip-remove-icon { + line-height: 1.5; + cursor: pointer; +} + +.p-chip img { + border-radius: 50%; +} \ No newline at end of file diff --git a/src/app/components/chip/chip.spec.ts b/src/app/components/chip/chip.spec.ts new file mode 100755 index 00000000000..de201f235dd --- /dev/null +++ b/src/app/components/chip/chip.spec.ts @@ -0,0 +1,23 @@ +import { TestBed, ComponentFixture } from '@angular/core/testing'; +import { Chip, ChipModule } from './chip'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; + +describe('Chip', () => { + + let button: Chip; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [ + NoopAnimationsModule + ], + declarations: [ + ChipModule + ] + }); + + fixture = TestBed.createComponent(Chip); + button = fixture.componentInstance; + }); +}); diff --git a/src/app/components/chip/chip.ts b/src/app/components/chip/chip.ts new file mode 100755 index 00000000000..96d799e970b --- /dev/null +++ b/src/app/components/chip/chip.ts @@ -0,0 +1,57 @@ +import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'p-chip', + template: ` +
+ + + +
{{label}}
+ +
+ `, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + styleUrls: ['./chip.css'] +}) +export class Chip { + + @Input() label: string; + + @Input() icon: string; + + @Input() image: string; + + @Input() style: any; + + @Input() styleClass: string; + + @Input() removable: boolean; + + @Input() removeIcon: string = "pi pi-times-circle"; + + @Output() remove: EventEmitter = new EventEmitter(); + + visible: boolean = true; + + containerClass() { + return { + 'p-chip p-component': true, + 'p-chip-image': this.image != null + }; + } + + close(event) { + this.visible = false; + this.remove.emit(event) + } +} + +@NgModule({ + imports: [CommonModule], + exports: [Chip], + declarations: [Chip] +}) +export class ChipModule { } diff --git a/src/app/components/chip/ng-package.json b/src/app/components/chip/ng-package.json new file mode 100644 index 00000000000..ab5467eb7e4 --- /dev/null +++ b/src/app/components/chip/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public_api.ts" + } + } \ No newline at end of file diff --git a/src/app/components/chip/public_api.ts b/src/app/components/chip/public_api.ts new file mode 100644 index 00000000000..8a86d21169f --- /dev/null +++ b/src/app/components/chip/public_api.ts @@ -0,0 +1 @@ +export * from './chip'; \ No newline at end of file diff --git a/src/app/showcase/app-routing.module.ts b/src/app/showcase/app-routing.module.ts index 4f40cc0a1ba..b70b8d74e8a 100755 --- a/src/app/showcase/app-routing.module.ts +++ b/src/app/showcase/app-routing.module.ts @@ -22,6 +22,7 @@ import { HomeComponent } from './components/home/home.component'; {path: 'carousel', loadChildren: () => import('./components/carousel/carouseldemo.module').then(m => m.CarouselDemoModule)}, {path: 'chart', loadChildren: () => import('./components/chart/chartdemo.module').then(m => m.ChartDemoModule)}, {path: 'checkbox', loadChildren: () => import('./components/checkbox/checkboxdemo.module').then(m => m.CheckboxDemoModule)}, + {path: 'chip', loadChildren: () => import('./components/chip/chipdemo.module').then(m => m.ChipDemoModule)}, {path: 'chips', loadChildren: () => import('./components/chips/chipsdemo.module').then(m => m.ChipsDemoModule)}, {path: 'codehighlighter', loadChildren: () => import('./components/codehighlighter/codehighlighterdemo.module').then(m => m.CodeHighlighterDemoModule)}, {path: 'colorpicker', loadChildren: () => import('./components/colorpicker/colorpickerdemo.module').then(m => m.ColorPickerDemoModule)}, diff --git a/src/app/showcase/app.menu.component.ts b/src/app/showcase/app.menu.component.ts index d146a19e5a5..802e73241c3 100644 --- a/src/app/showcase/app.menu.component.ts +++ b/src/app/showcase/app.menu.component.ts @@ -266,9 +266,10 @@ declare let gtag: Function;
Misc
Avatar New - BlockUI Badge New + BlockUI Captcha + Chip New Inplace ProgressBar ProgressSpinner diff --git a/src/app/showcase/components/chip/chipdemo-routing.module.ts b/src/app/showcase/components/chip/chipdemo-routing.module.ts new file mode 100644 index 00000000000..32fb143c997 --- /dev/null +++ b/src/app/showcase/components/chip/chipdemo-routing.module.ts @@ -0,0 +1,15 @@ +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router' +import {ChipDemo} from './chipdemo'; + +@NgModule({ + imports: [ + RouterModule.forChild([ + {path:'',component: ChipDemo} + ]) + ], + exports: [ + RouterModule + ] +}) +export class ChipDemoRoutingModule {} diff --git a/src/app/showcase/components/chip/chipdemo.html b/src/app/showcase/components/chip/chipdemo.html new file mode 100644 index 00000000000..93d968d5f2d --- /dev/null +++ b/src/app/showcase/components/chip/chipdemo.html @@ -0,0 +1,210 @@ +
+
+

Chip

+

Chip represents entities using icons, labels and images.

+
+
+ +
+
+
Basic
+
+ + + + +
+ +
Icon
+
+ + + + +
+ +
Image
+
+ + + + +
+ +
Styling
+
+ + + + +
+
+
+ +
+ + +
Getting Started
+

Content of the badge is specified using the value property.

+ +
Positioning
+

A badge can easily be positioned relative to another element by wrapping it.

+ +<p-badge [value]="2"></p-badge> + + +
Tags
+

Tags are optimized for text rather than number and used with the .p-tag class. For more rounded styling like pills, add the .p-tag-rounded class

+ +<span class="p-tag">New</span> +<span class="p-tag p-tag-rounded">New</span> + + +
Severities
+

Different options are available as severity levels with.

+ +
    +
  • .p-badge-secondary
    • +
  • .p-badge-success
    • +
  • .p-badge-info
    • +
  • .p-badge-warning
    • +
  • .p-badge-danger
    • +
+ +
Positoning
+

A badge can easily be positioned relative to another element when both are wrapped inside an element with p-overlay-badge class.

+ +<span class="p-overlay-badge"> + <i class="pi pi-bell" style="font-size: 2em"></i> + <span class="p-badge">2</span> +</span> + +<span class="p-overlay-badge"> + <p-button label="New"></p-button> + <span class="p-badge p-badge-warning">5</span> +</span> + + +
Inline Button Badges
+

Buttons provide integrated badge support with the badge and badgeClass properties.

+ + +<p-button label="Emails" badge="8"></p-button> +<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button> + + +
Sizes
+

Badge sizes are adjusted with additional classes.

+ +<span class="p-badge">2</span> +<span class="p-badge p-badge-l p-badge-sucess">4</span> +<span class="p-badge p-badge-xl p-badge-warning">6</span> + + +

In addition, when placed inside another element, badge sizes can also derive their size from their parent.

+ +<h1>Heading 1 <span class="p-tag p-tag-success">New</span></h1> +<h2>Heading 2 <span class="p-tag p-tag-success">New</span></h2> + + +
Styling
+

Following is the list of structural style classes, for theming classes visit theming page.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameElement
p-badgeBadge element
p-tagTag element
p-tag-roundedRounded tag element
p-overlay-badgeWrapper of a badge and its target.
p-badge-lgLarge badge element
p-badge-xlExtra large badge element
+
+ +
Dependencies
+

None.

+ + + + + View on GitHub + + + +<h5>Numbers</h5> +<div class="badges"> + <span class="p-badge">2</span> + <span class="p-badge p-badge-success">8</span> + <span class="p-badge p-badge-info">4</span> + <span class="p-badge p-badge-warning">12</span> + <span class="p-badge p-badge-danger">3</span> +</div> + +<h5>Tags</h5> +<div class="badges"> + <span class="p-tag">Primary</span> + <span class="p-tag p-tag-success">Success</span> + <span class="p-tag p-tag-info">Info</span> + <span class="p-tag p-tag-warning">Warning</span> + <span class="p-tag p-tag-danger">Danger</span> +</div> + +<h5>Pills</h5> +<div class="badges"> + <span class="p-tag p-tag-rounded">Primary</span> + <span class="p-tag p-tag-rounded p-tag-success">Success</span> + <span class="p-tag p-tag-rounded p-tag-info">Info</span> + <span class="p-tag p-tag-rounded p-tag-warning">Warning</span> + <span class="p-tag p-tag-rounded p-tag-danger">Danger</span> +</div> + +<h5>Positioned Badge</h5> +<span class="p-overlay-badge p-mr-5"> + <i class="pi pi-bell" style="font-size: 2em"></i> + <span class="p-badge">2</span> +</span> + +<span class="p-overlay-badge"> + <p-button label="New"></p-button> + <span class="p-badge p-badge-warning">5</span> +</span> + +<h5>Inline Button Badge</h5> +<p-button label="Emails" badge="8" styleClass="p-mr-2" ></p-button> +<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger" ></p-button> + +<h5>Sizes</h5> +<div class="badges"> + <span class="p-badge">2</span> + <span class="p-badge p-badge-lg p-badge-sucess">4</span> + <span class="p-badge p-badge-xl p-badge-warning">6</span> +</div> + + + +
\ No newline at end of file diff --git a/src/app/showcase/components/chip/chipdemo.module.ts b/src/app/showcase/components/chip/chipdemo.module.ts new file mode 100644 index 00000000000..d6637da3ff8 --- /dev/null +++ b/src/app/showcase/components/chip/chipdemo.module.ts @@ -0,0 +1,25 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {ChipDemo} from './chipdemo'; +import {ChipDemoRoutingModule} from './chipdemo-routing.module'; +import {ButtonModule} from 'primeng/button'; +import {PanelModule} from 'primeng/panel'; +import {TabViewModule} from 'primeng/tabview'; +import {AppCodeModule} from '../../app.code.component'; +import { ChipModule } from 'primeng/chip'; + +@NgModule({ + imports: [ + CommonModule, + ChipDemoRoutingModule, + ButtonModule, + PanelModule, + TabViewModule, + ChipModule, + AppCodeModule + ], + declarations: [ + ChipDemo + ] +}) +export class ChipDemoModule {} diff --git a/src/app/showcase/components/chip/chipdemo.scss b/src/app/showcase/components/chip/chipdemo.scss new file mode 100644 index 00000000000..49e0577855c --- /dev/null +++ b/src/app/showcase/components/chip/chipdemo.scss @@ -0,0 +1,4 @@ +:host ::ng-deep .p-chip.custom-chip { + background: var(--primary-color); + color: var(--primary-color-text); +} \ No newline at end of file diff --git a/src/app/showcase/components/chip/chipdemo.ts b/src/app/showcase/components/chip/chipdemo.ts new file mode 100644 index 00000000000..86aa6ee6f5f --- /dev/null +++ b/src/app/showcase/components/chip/chipdemo.ts @@ -0,0 +1,8 @@ +import {Component} from '@angular/core'; + +@Component({ + templateUrl: './chipdemo.html', + styleUrls: ['chipdemo.scss'] +}) +export class ChipDemo { +} \ No newline at end of file