Fixed #9650 Divider Component

src/app/components/divider/divider.css

@@ -0,0 +1,84 @@
+.p-divider-horizontal {
+    display: flex;
+    width: 100%;
+    position: relative;
+    align-items: center;
+}
+
+.p-divider-horizontal:before {
+    position: absolute;
+    display: block;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    content: "";
+}
+
+.p-divider-horizontal.p-divider-left {
+    justify-content: flex-start;
+}
+
+.p-divider-horizontal.p-divider-right {
+    justify-content: flex-end;
+}
+
+.p-divider-horizontal.p-divider-center {
+    justify-content: center;
+}
+
+.p-divider-content {
+    z-index: 1;
+}
+
+.p-divider-vertical {
+    min-height: 100%;
+    margin: 0 1rem;
+    display: flex;
+    position: relative;
+    justify-content: center;
+}
+
+.p-divider-vertical:before {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 50%;
+    height: 100%;
+    content: "";
+}
+
+.p-divider-vertical.p-divider-top {
+    align-items: flex-start;
+}
+
+.p-divider-vertical.p-divider-center {
+    align-items: center;
+}
+
+.p-divider-vertical.p-divider-bottom {
+    align-items: flex-end;
+}
+
+.p-divider-solid.p-divider-horizontal:before {
+    border-top-style: solid;
+}
+
+.p-divider-solid.p-divider-vertical:before {
+    border-left-style: solid;
+}
+
+.p-divider-dashed.p-divider-horizontal:before {
+    border-top-style: dashed;
+}
+
+.p-divider-dashed.p-divider-vertical:before {
+    border-left-style: dashed;
+}
+
+.p-divider-dotted.p-divider-horizontal:before {
+    border-top-style: dotted;
+}
+
+.p-divider-dotted.p-divider-horizontal:before {
+    border-left-style: dotted;
+}

src/app/components/divider/divider.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { Divider, DividerModule } from './divider';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('Divider', () => {
+
+	let divider: Divider;
+	let fixture: ComponentFixture<Divider>;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			imports: [
+				NoopAnimationsModule
+			],
+			declarations: [
+				DividerModule
+			]
+		});
+
+		fixture = TestBed.createComponent(Divider);
+		divider = fixture.componentInstance;
+	});
+});

src/app/components/divider/divider.ts

@@ -0,0 +1,53 @@
+import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input} from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'p-divider',
+    template: `
+        <div [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style" role="separator">
+            <div class="p-divider-content">
+                <ng-content></ng-content>
+            </div>
+        </div>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./divider.css']
+})
+export class Divider {
+
+    @Input() styleClass: string;
+
+    @Input() style: any;
+
+    @Input() layout: string = "horizontal";
+
+    @Input() type: string = "solid";
+
+    @Input() align: string;
+
+
+
+    containerClass() {
+        return {
+            'p-divider p-component': true,
+            'p-divider-horizontal': this.layout === "horizontal",
+            'p-divider-vertical': this.layout === "vertical",
+            'p-divider-solid': this.type === "solid",
+            'p-divider-dashed': this.type === "dashed",
+            'p-divider-dotted': this.type === "dotted",
+            'p-divider-left': this.layout === 'horizontal' && (!this.align || this.align === 'left'),
+            'p-divider-center': (this.layout === 'horizontal' && this.align === 'center') || (this.layout === 'vertical' && (!this.align || this.align === 'center')),
+            'p-divider-right': this.layout === 'horizontal' && this.align === 'right',
+            'p-divider-top': this.layout === 'vertical' && (this.align === 'top'),
+            'p-divider-bottom': this.layout === 'vertical' && this.align === 'bottom'
+        };
+    }
+}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [Divider],
+    declarations: [Divider]
+})
+export class DividerModule { }

src/app/components/divider/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public_api.ts"
+    }
+  }

src/app/components/divider/public_api.ts

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

src/app/showcase/app-routing.module.ts

@@ -32,6 +32,7 @@ import { HomeComponent } from './components/home/home.component';
             {path: 'dataview', loadChildren: () => import('./components/dataview/dataviewdemo.module').then(m => m.DataViewDemoModule)},
             {path: 'defer', loadChildren: () => import('./components/defer/deferdemo.module').then(m => m.DeferDemoModule)},
             {path: 'dialog', loadChildren: () => import('./components/dialog/dialogdemo.module').then(m => m.DialogDemoModule)},
+            {path: 'divider', loadChildren: () => import('./components/divider/dividerdemo.module').then(m => m.DividerDemoModule)},
             {path: 'dynamicdialog', loadChildren: () => import('./components/dynamicdialog/dynamicdialogdemo.module').then(m => m.DynamicDialogDemoModule)},
             {path: 'dragdrop', loadChildren: () => import('./components/dragdrop/dragdropdemo.module').then(m => m.DragDropDemoModule)},
             {path: 'dropdown', loadChildren: () => import('./components/dropdown/dropdowndemo.module').then(m => m.DropdownDemoModule)},

src/app/showcase/app.menu.component.ts

@@ -182,6 +182,7 @@ declare let gtag: Function;
                 <div class="menu-items">
                     <a [routerLink]=" ['/accordion']" routerLinkActive="router-link-exact-active">Accordion</a>
                     <a [routerLink]=" ['/card']" routerLinkActive="router-link-exact-active">Card</a>
+                    <a [routerLink]=" ['/divider']" routerLinkActive="router-link-exact-active">Divider <span class="p-tag">New</span></a>
                     <a [routerLink]=" ['/fieldset']" routerLinkActive="router-link-exact-active">Fieldset</a>
                     <a [routerLink]=" ['/panel']" routerLinkActive="router-link-exact-active">Panel</a>
                     <a [routerLink]=" ['/scrollpanel']" routerLinkActive="router-link-exact-active">ScrollPanel</a>

src/app/showcase/components/divider/dividerdemo-routing.module.ts

@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router'
+import {DividerDemo} from './dividerdemo';
+
+@NgModule({
+	imports: [
+		RouterModule.forChild([
+			{path:'',component: DividerDemo}
+		])
+	],
+	exports: [
+		RouterModule
+	]
+})
+export class TagDemoRoutingModule {}