Floatlabel

src/app/components/floatlabel/floatlabel.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { SharedModule } from '../api/shared';
+import { RouterModule } from '@angular/router';
+
+/**
+ * FloatLabel appears on top of the input field when focused.
+ * @group Components
+ */
+@Component({
+    selector: 'p-floatLabel',
+    template: `
+        <span class="p-float-label">
+            <ng-content></ng-content>
+        </span>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+})
+export class FloatLabel {}
+
+@NgModule({
+    imports: [CommonModule, SharedModule, RouterModule],
+    exports: [FloatLabel, SharedModule],
+    declarations: [FloatLabel]
+})
+export class FloatLabelModule {}

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

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

src/app/components/floatlabel/public_api.ts

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

src/app/showcase/doc/floatlabel/accessibilitydoc.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'accessibility-doc',
+    template: `
+        <app-docsectiontext>
+        <h3>Screen Reader</h3>
+        <p>FloatLabel does not require any roles and attributes.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Component does not include any interactive elements.</p>
+        </app-docsectiontext>
+    `
+})
+export class AccessibilityDoc {}

src/app/showcase/doc/floatlabel/basicdoc.ts

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { Code } from '../../domain/code';
+
+@Component({
+    selector: 'basic-doc',
+    template: `
+        <app-docsectiontext>
+            <p>FloatLabel is used by wrapping the input and its label.</p>
+        </app-docsectiontext>
+        <div class="card flex justify-content-center">
+            <p-floatLabel>
+                <input id="username" type="text" pInputText [(ngModel)]="value" />
+                <label for="username">Username</label>
+            </p-floatLabel>
+        </div>
+        <app-code [code]="code" selector="float-label-basic-demo"></app-code>
+    `
+})
+export class BasicDoc {
+    value: string | undefined;
+
+    code: Code = {
+        basic: `<p-floatLabel>
+<input id="username" type="text" pInputText [(ngModel)]="value" />
+<label for="username">Username</label>
+</p-floatLabel>`,
+
+        html: `<div class="card flex justify-content-center">
+<p-floatLabel>
+<input id="username" type="text" pInputText [(ngModel)]="value" />
+<label for="username">Username</label>
+</p-floatLabel>
+</div>`,
+
+        typescript: `
+import { Component } from '@angular/core';
+        
+@Component({
+    selector: 'float-label-basic-demo',
+    templateUrl: './float-label-basic-demo.html'
+})
+export class FloatLabelBasicDemo {
+    value: string | undefined;
+}`
+    };
+}

src/app/showcase/doc/floatlabel/floatlabeldoc.module.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { AppDocModule } from '../../layout/doc/app.doc.module';
+import { AppCodeModule } from '../../layout/doc/app.code.component';
+import { FormsModule } from '@angular/forms';
+import { BasicDoc } from './basicdoc';
+import { ImportDoc } from './importdoc';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { InputTextModule } from 'primeng/inputtext';
+import { AccessibilityDoc } from './accessibilitydoc';
+
+@NgModule({
+    imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, FloatLabelModule, InputTextModule],
+    declarations: [BasicDoc, ImportDoc, AccessibilityDoc],
+    exports: [AppDocModule]
+})
+export class FloatLabelDocModule {}

src/app/showcase/doc/floatlabel/importdoc.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { Code } from '../../domain/code';
+
+@Component({
+    selector: 'import-doc',
+    template: ` <app-code [code]="code" [hideToggleCode]="true"></app-code> `
+})
+export class ImportDoc {
+    code: Code = {
+        typescript: `import { FloatLabelModule } from 'primeng/floatlabel';`
+    };
+}
+

src/app/showcase/layout/app.routes.ts

@@ -49,6 +49,7 @@ export const routes: Routes = [
             { path: 'dropdown', loadChildren: () => import('../pages/dropdown/dropdowndemo.module').then((m) => m.DropdownDemoModule) },
             { path: 'iconfield', loadChildren: () => import('../pages/iconfield/iconfielddemo.module').then((m) => m.IconFieldDemoModule) },
             { path: 'editor', loadChildren: () => import('../pages/editor/editordemo.module').then((m) => m.EditorDemoModule) },
+            { path: 'floatlabel', loadChildren: () => import('../pages/floatlabel/floatlabeldemo.module').then((m) => m.FloatLabelDemoModule) },
             { path: 'fieldset', loadChildren: () => import('../pages/fieldset/fieldsetdemo.module').then((m) => m.FieldsetDemoModule) },
             { path: 'fileupload', loadChildren: () => import('../pages/fileupload/fileuploaddemo.module').then((m) => m.FileUploadDemoModule) },
             { path: 'filterservice', loadChildren: () => import('../pages/filterservice/filterservicedemo.module').then((m) => m.FilterServiceDemoModule) },

src/app/showcase/pages/floatlabel/floatlabeldemo-routing.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { FloatLabelDemo } from './floatlabeldemo';
+
+@NgModule({
+    imports: [RouterModule.forChild([{ path: '', component: FloatLabelDemo }])],
+    exports: [RouterModule]
+})
+export class FloatLabelDemoRoutingModule {}

src/app/showcase/pages/floatlabel/floatlabeldemo.html

@@ -0,0 +1 @@
+<app-doc docTitle="Angular Float Label Component" header="FloatLabel" description="FloatLabel appears on top of the input field when focused." [docs]="docs"></app-doc>

src/app/showcase/pages/floatlabel/floatlabeldemo.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FloatLabelDemo } from './floatlabeldemo';
+import { FloatLabelDemoRoutingModule } from './floatlabeldemo-routing.module';
+import { FloatLabelDocModule } from '../../doc/floatlabel/floatlabeldoc.module';
+
+@NgModule({
+    imports: [CommonModule, FloatLabelDemoRoutingModule, FormsModule, FloatLabelDocModule],
+    declarations: [FloatLabelDemo]
+})
+export class FloatLabelDemoModule {}

src/app/showcase/pages/floatlabel/floatlabeldemo.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { BasicDoc } from '../../doc/floatlabel/basicdoc';
+import { ImportDoc } from '../../doc/floatlabel/importdoc';
+import { AccessibilityDoc } from '../../doc/floatlabel/accessibilitydoc';
+@Component({
+    templateUrl: './floatlabeldemo.html'
+})
+export class FloatLabelDemo {
+    docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+}

src/assets/showcase/data/menu.json

@@ -57,6 +57,10 @@
                             "name": "Editor",
                             "routerLink": "/editor"
                         },
+                        {
+                            "name": "FloatLabel",
+                            "routerLink": "/floatlabel"
+                        },
                         {
                             "name": "IconField",
                             "routerLink": "/iconfield"