Fixed #14133 - InputGroup | New component created

src/app/components/inputgroup/inputgroup.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { Component, NgModule } from '@angular/core';
+import { SharedModule } from 'primeng/api';
+/**
+ * InputGroup displays text, icon, buttons and other content can be grouped next to an input.
+ * @group Components
+ */
+@Component({
+    selector: 'p-inputGroup',
+    template: `
+        <div class="p-inputgroup" [attr.data-pc-name]="'inputgroup'">
+            <ng-content></ng-content>
+        </div>
+    `,
+    host: {
+        class: 'p-element p-inputgroup'
+    }
+})
+export class InputGroup {}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [InputGroup, SharedModule],
+    declarations: [InputGroup]
+})
+export class InputGroupModule {}

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

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

src/app/components/inputgroup/public_api.ts

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

src/app/components/inputgroupaddon/inputgroupaddon.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { Component, NgModule } from '@angular/core';
+import { SharedModule } from 'primeng/api';
+/**
+ * InputGroupAddon displays text, icon, buttons and other content can be grouped next to an input.
+ * @group Components
+ */
+@Component({
+    selector: 'p-inputGroupAddon',
+    template: `
+        <div [attr.data-pc-name]="'inputgroupaddon'">
+            <ng-content></ng-content>
+        </div>
+    `,
+    host: {
+        class: 'p-element p-inputgroup-addon'
+    }
+})
+export class InputGroupAddon {}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [InputGroupAddon, SharedModule],
+    declarations: [InputGroupAddon]
+})
+export class InputGroupAddonModule {}

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

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

src/app/components/inputgroupaddon/public_api.ts

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

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

@@ -5,75 +5,71 @@ import { Code } from '../../domain/code';
     selector: 'basic-doc',
     template: `
         <app-docsectiontext>
-            <p>An InputGroup is created by wrapping the input and add-ons inside an element with a <i>p-inputgroup</i> class where add-ons also should be inside an element with <i>.p-inputgroup-addon</i> class</p>
+            <p>An InputGroup is created by wrapping the add-ons inside the <i>p-inputGroup</i> element.</p>
         </app-docsectiontext>
         <div class="card flex flex-column md:flex-row gap-3">
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon">
+            <p-inputGroup>
+                <p-inputGroupAddon>
                     <i class="pi pi-user"></i>
-                </span>
+                </p-inputGroupAddon>
                 <input pInputText placeholder="Username" />
-            </div>
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon">$</span>
+            </p-inputGroup>
+            <p-inputGroup>
+                <p-inputGroupAddon>$</p-inputGroupAddon>
                 <input type="text" pInputText placeholder="Price" />
-                <span class="p-inputgroup-addon">.00</span>
-            </div>
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon">www</span>
+                <p-inputGroupAddon>.00</p-inputGroupAddon>
+            </p-inputGroup>
+            <p-inputGroup>
+                <p-inputGroupAddon>www</p-inputGroupAddon>
                 <input type="text" pInputText placeholder="Website" />
-            </div>
+            </p-inputGroup>
         </div>
-        <app-code [code]="code" selector="inputgroup-basic-demo"></app-code>
+        <app-code [code]="code" selector="input-group-basic-demo"></app-code>
     `
 })
 export class BasicDoc {
     code: Code = {
-        basic: `<div class="p-inputgroup">
-    <span class="p-inputgroup-addon">
+        basic: `<p-inputGroup>
+    <p-inputGroupAddon>
         <i class="pi pi-user"></i>
-    </span>
+    </p-inputGroupAddon>
     <input pInputText placeholder="Username" />
-</div>
-<div class="p-inputgroup">
-    <span class="p-inputgroup-addon">$</span>
+</p-inputGroup>
+<p-inputGroup>
+    <p-inputGroupAddon>$</p-inputGroupAddon>
     <input type="text" pInputText placeholder="Price" />
-    <span class="p-inputgroup-addon">.00</span>
-</div>
-<div class="p-inputgroup">
-    <span class="p-inputgroup-addon">www</span>
+    <p-inputGroupAddon>.00</p-inputGroupAddon>
+</p-inputGroup>
+<p-inputGroup>
+    <p-inputGroupAddon>www</p-inputGroupAddon>
     <input type="text" pInputText placeholder="Website" />
-</div>`,
+</p-inputGroup>`,
 
-        html: `
-<div class="card flex flex-column md:flex-row gap-3">
-    <div class="p-inputgroup">
-        <span class="p-inputgroup-addon">
+        html: `<div class="card flex flex-column md:flex-row gap-3">
+    <p-inputGroup>
+        <p-inputGroupAddon>
             <i class="pi pi-user"></i>
-        </span>
+        </p-inputGroupAddon>
         <input pInputText placeholder="Username" />
-    </div>
-
-    <div class="p-inputgroup">
-        <span class="p-inputgroup-addon">$</span>
+    </p-inputGroup>
+    <p-inputGroup>
+        <p-inputGroupAddon>$</p-inputGroupAddon>
         <input type="text" pInputText placeholder="Price" />
-        <span class="p-inputgroup-addon">.00</span>
-    </div>
-
-    <div class="p-inputgroup">
-        <span class="p-inputgroup-addon">www</span>
+        <p-inputGroupAddon>.00</p-inputGroupAddon>
+    </p-inputGroup>
+    <p-inputGroup>
+        <p-inputGroupAddon>www</p-inputGroupAddon>
         <input type="text" pInputText placeholder="Website" />
-    </div>
+    </p-inputGroup>
 </div>`,
 
         typescript: `
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'inputgroup-basic-demo',
-    templateUrl: './inputgroup-basic-demo.html'
+    selector: 'input-group-basic-demo',
+    templateUrl: './input-group-basic-demo.html'
 })
-export class InputgroupBasicDemo {
-}`
+export class InputGroupBasicDemo { }`
     };
 }

src/app/showcase/doc/inputgroup/buttondoc.ts

@@ -8,70 +8,68 @@ import { Code } from '../../domain/code';
             <p>Buttons can be placed at either side of an input element.</p>
         </app-docsectiontext>
         <div class="card flex flex-column md:flex-row gap-3">
-            <div class="p-inputgroup">
+            <p-inputGroup>
                 <button type="button" pButton label="Search"></button>
                 <input type="text" pInputText placeholder="Keyword" />
-            </div>
+            </p-inputGroup>
 
-            <div class="p-inputgroup">
+            <p-inputGroup>
                 <input type="text" pInputText placeholder="Keyword" />
                 <button type="button" pButton icon="pi pi-refresh" styleClass="p-button-warn"></button>
-            </div>
+            </p-inputGroup>
 
-            <div class="p-inputgroup">
+            <p-inputGroup>
                 <button type="button" pButton icon="pi pi-check" styleClass="p-button-success"></button>
                 <input type="text" pInputText placeholder="Vote" />
                 <button type="button" pButton icon="pi pi-times" styleClass="p-button-danger"></button>
-            </div>
+            </p-inputGroup>
         </div>
         <app-code [code]="code" selector="inputgroup-button-demo"></app-code>
     `
 })
 export class ButtonDoc {
     code: Code = {
-        basic: `<div class="p-inputgroup">
+        basic: `<p-inputGroup>
     <button type="button" pButton label="Search"></button>
     <input type="text" pInputText placeholder="Keyword" />
-</div>
+</p-inputGroup>
 
-<div class="p-inputgroup">
+<p-inputGroup>
     <input type="text" pInputText placeholder="Keyword" />
     <button type="button" pButton icon="pi pi-refresh" styleClass="p-button-warn"></button>
-</div>
+</p-inputGroup>
 
-<div class="p-inputgroup">
+<p-inputGroup>
     <button type="button" pButton icon="pi pi-check" styleClass="p-button-success"></button>
     <input type="text" pInputText placeholder="Vote" />
     <button type="button" pButton icon="pi pi-times" styleClass="p-button-danger"></button>
-</div>`,
-
-        html: `
-<div class="card flex flex-column md:flex-row gap-3">
-    <div class="p-inputgroup">
+</p-inputGroup>`,
+        html: `<div class="card flex flex-column md:flex-row gap-3">
+    <p-inputGroup>
         <button type="button" pButton label="Search"></button>
         <input type="text" pInputText placeholder="Keyword" />
-    </div>
-    
-    <div class="p-inputgroup">
+    </p-inputGroup>
+
+    <p-inputGroup>
         <input type="text" pInputText placeholder="Keyword" />
         <button type="button" pButton icon="pi pi-refresh" styleClass="p-button-warn"></button>
-    </div>
+    </p-inputGroup>
 
-    <div class="p-inputgroup">
+    <p-inputGroup>
         <button type="button" pButton icon="pi pi-check" styleClass="p-button-success"></button>
         <input type="text" pInputText placeholder="Vote" />
         <button type="button" pButton icon="pi pi-times" styleClass="p-button-danger"></button>
-    </div>
+    </p-inputGroup>
 </div>`,
 
         typescript: `
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'inputgroup-button-demo',
-    templateUrl: './inputgroup-button-demo.html'
+    selector: 'input-group-button-demo',
+    templateUrl: './input-group-button-demo.html'
 })
-export class InputgroupButtonDemo {
+export class InputGroupButtonDemo {
 }`
     };
 }

src/app/showcase/doc/inputgroup/checkboxdoc.ts

@@ -8,23 +8,23 @@ import { Code } from '../../domain/code';
             <p>Checkbox and RadioButton components can be combined with an input element under the same group.</p>
         </app-docsectiontext>
         <div class="card flex flex-column md:flex-row gap-3">
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></span>
+            <p-inputGroup>
+                <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></p-inputGroupAddon>
                 <input type="text" pInputText placeholder="Username" />
-            </div>
+            </p-inputGroup>
 
-            <div class="p-inputgroup">
+            <p-inputGroup>
                 <input type="text" pInputText placeholder="Price" />
-                <span class="p-inputgroup-addon"><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></span>
-            </div>
+                <p-inputGroupAddon><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></p-inputGroupAddon>
+            </p-inputGroup>
 
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></span>
+            <p-inputGroup>
+                <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></p-inputGroupAddon>
                 <input type="text" pInputText placeholder="Website" />
-                <span class="p-inputgroup-addon"><p-radioButton name="category" value="site" [(ngModel)]="category"></p-radioButton></span>
-            </div>
+                <p-inputGroupAddon><p-radioButton name="category" value="site" [(ngModel)]="category"></p-radioButton></p-inputGroupAddon>
+            </p-inputGroup>
         </div>
-        <app-code [code]="code" selector="inputgroup-checkbox-demo"></app-code>
+        <app-code [code]="code" selector="input-group-checkbox-demo"></app-code>
     `
 })
 export class CheckboxDoc {
@@ -35,49 +35,48 @@ export class CheckboxDoc {
     category: string | undefined;
 
     code: Code = {
-        basic: `<div class="p-inputgroup">
-    <span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></span>
+        basic: `<p-inputGroup>
+    <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></p-inputGroupAddon>
     <input type="text" pInputText placeholder="Username" />
-</div>
+</p-inputGroup>
 
-<div class="p-inputgroup">
+<p-inputGroup>
     <input type="text" pInputText placeholder="Price" />
-    <span class="p-inputgroup-addon"><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></span>
-</div>
+    <p-inputGroupAddon><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></p-inputGroupAddon>
+</p-inputGroup>
 
-<div class="p-inputgroup">
-    <span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></span>
+<p-inputGroup>
+    <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></p-inputGroupAddon>
     <input type="text" pInputText placeholder="Website" />
-    <span class="p-inputgroup-addon"><p-radioButton name="category" value="site" [(ngModel)]="category"></p-radioButton></span>
-</div>`,
+    <p-inputGroupAddon><p-radioButton name="category" value="site" [(ngModel)]="category"></p-radioButton></p-inputGroupAddon>
+</p-inputGroup>`,
 
-        html: `
-<div class="card flex flex-column md:flex-row gap-3">
-    <div class="p-inputgroup">
-        <span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></span>
+        html: `<div class="card flex flex-column md:flex-row gap-3">
+    <p-inputGroup>
+        <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox1" [binary]="true"></p-checkbox></p-inputGroupAddon>
         <input type="text" pInputText placeholder="Username" />
-    </div>
+    </p-inputGroup>
 
-    <div class="p-inputgroup">
+    <p-inputGroup>
         <input type="text" pInputText placeholder="Price" />
-        <span class="p-inputgroup-addon"><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></span>
-    </div>
+        <p-inputGroupAddon><p-radioButton name="category" value="price" [(ngModel)]="category"></p-radioButton></p-inputGroupAddon>
+    </p-inputGroup>
 
-    <div class="p-inputgroup">
-        <span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></span>
+    <p-inputGroup>
+        <p-inputGroupAddon><p-checkbox [(ngModel)]="checkbox2" [binary]="true"></p-checkbox></p-inputGroupAddon>
         <input type="text" pInputText placeholder="Website" />
-        <span class="p-inputgroup-addon"><p-radioButton name="category" value="site" [(ngModel)]="category"></p-radioButton></span>
-    </div>
+        <p-inputGroupAddon><p-radioButton name="category" value="site" [(ngModel)]="category"></p-radioButton></p-inputGroupAddon>
+    </p-inputGroup>
 </div>`,
 
         typescript: `
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'inputgroup-checkbox-demo',
-    templateUrl: './inputgroup-checkbox-demo.html'
+    selector: 'input-group-checkbox-demo',
+    templateUrl: './input-group-checkbox-demo.html'
 })
-export class InputgroupCheckboxDemo {
+export class InputGroupCheckboxDemo {
     checkbox1: boolean = false;
 
     checkbox2: boolean = false;