From e924f5ecc6273c78377d375fb05d43fb3a1b7290 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Thu, 16 Nov 2023 15:12:05 +0300 Subject: [PATCH 1/2] Fixed #14133 - InputGroup | New component created --- src/app/components/inputgroup/inputgroup.ts | 26 +++++ src/app/components/inputgroup/ng-package.json | 6 ++ src/app/components/inputgroup/public_api.ts | 1 + .../inputgroupaddon/inputgroupaddon.ts | 26 +++++ .../inputgroupaddon/ng-package.json | 6 ++ .../components/inputgroupaddon/public_api.ts | 1 + src/app/showcase/doc/inputgroup/basicdoc.ts | 96 ++++++++++--------- src/app/showcase/doc/inputgroup/buttondoc.ts | 71 +++++++------- .../showcase/doc/inputgroup/checkboxdoc.ts | 79 ++++++++------- src/app/showcase/doc/inputgroup/importdoc.ts | 5 +- .../doc/inputgroup/inputgroupddoc.module.ts | 4 +- .../showcase/doc/inputgroup/multipledoc.ts | 64 +++++++------ 12 files changed, 228 insertions(+), 157 deletions(-) create mode 100755 src/app/components/inputgroup/inputgroup.ts create mode 100644 src/app/components/inputgroup/ng-package.json create mode 100644 src/app/components/inputgroup/public_api.ts create mode 100755 src/app/components/inputgroupaddon/inputgroupaddon.ts create mode 100644 src/app/components/inputgroupaddon/ng-package.json create mode 100644 src/app/components/inputgroupaddon/public_api.ts diff --git a/src/app/components/inputgroup/inputgroup.ts b/src/app/components/inputgroup/inputgroup.ts new file mode 100755 index 00000000000..5e16fe8150c --- /dev/null +++ b/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: ` +
+ +
+ `, + host: { + class: 'p-element p-inputgroup' + } +}) +export class InputGroup {} + +@NgModule({ + imports: [CommonModule], + exports: [InputGroup, SharedModule], + declarations: [InputGroup] +}) +export class InputGroupModule {} diff --git a/src/app/components/inputgroup/ng-package.json b/src/app/components/inputgroup/ng-package.json new file mode 100644 index 00000000000..ab5467eb7e4 --- /dev/null +++ b/src/app/components/inputgroup/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/inputgroup/public_api.ts b/src/app/components/inputgroup/public_api.ts new file mode 100644 index 00000000000..d806323197d --- /dev/null +++ b/src/app/components/inputgroup/public_api.ts @@ -0,0 +1 @@ +export * from './inputgroup'; diff --git a/src/app/components/inputgroupaddon/inputgroupaddon.ts b/src/app/components/inputgroupaddon/inputgroupaddon.ts new file mode 100755 index 00000000000..082d3ae5344 --- /dev/null +++ b/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: ` +
+ +
+ `, + host: { + class: 'p-element p-inputgroup-addon' + } +}) +export class InputGroupAddon {} + +@NgModule({ + imports: [CommonModule], + exports: [InputGroupAddon, SharedModule], + declarations: [InputGroupAddon] +}) +export class InputGroupAddonModule {} diff --git a/src/app/components/inputgroupaddon/ng-package.json b/src/app/components/inputgroupaddon/ng-package.json new file mode 100644 index 00000000000..ab5467eb7e4 --- /dev/null +++ b/src/app/components/inputgroupaddon/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/inputgroupaddon/public_api.ts b/src/app/components/inputgroupaddon/public_api.ts new file mode 100644 index 00000000000..41e11c64546 --- /dev/null +++ b/src/app/components/inputgroupaddon/public_api.ts @@ -0,0 +1 @@ +export * from './inputgroupaddon'; diff --git a/src/app/showcase/doc/inputgroup/basicdoc.ts b/src/app/showcase/doc/inputgroup/basicdoc.ts index 384a1cc4773..8ee6b0e8a58 100644 --- a/src/app/showcase/doc/inputgroup/basicdoc.ts +++ b/src/app/showcase/doc/inputgroup/basicdoc.ts @@ -5,24 +5,30 @@ import { Code } from '../../domain/code'; selector: 'basic-doc', template: `
-

An InputGroup is created by wrapping the input and add-ons inside an element with a p-inputgroup class where add-ons also should be inside an element with .p-inputgroup-addon class

+

A group is created by wrapping the input and add-ons with the InputGroup component. Each add-on element is defined as a child of InputGroupAddon component.
-
- + + + - + -
-
- $ + + + + + $ - .00 -
-
- www + .00 + + + + + www -
+ +
` @@ -34,42 +40,40 @@ export class BasicDoc { code: Code = { basic: ` -
- - - - -
-
- $ - - .00 -
-
- www - -
`, - - html: ` -
-
- - - - -
- -
- $ + + + + + + + + $ - .00 -
- -
- www + .00 + + + www -
-
`, + `, + + html: ` +
+ + + + + + + + $ + + .00 + + + www + + +
`, typescript: ` import { Component } from '@angular/core'; diff --git a/src/app/showcase/doc/inputgroup/buttondoc.ts b/src/app/showcase/doc/inputgroup/buttondoc.ts index 840447b5f21..090587ca141 100644 --- a/src/app/showcase/doc/inputgroup/buttondoc.ts +++ b/src/app/showcase/doc/inputgroup/buttondoc.ts @@ -8,21 +8,21 @@ import { Code } from '../../domain/code';

Buttons can be placed at either side of an input element.

-
+ -
+ -
+ -
+ -
+ -
+
` @@ -34,39 +34,38 @@ export class ButtonDoc { code: Code = { basic: ` -
- - -
- -
- - -
- -
- - - -
`, + + + + + + + + + + + + + + `, html: `
-
- - -
- -
- - -
- -
- - - -
+ + + + + + + + + + + + + + +
`, typescript: ` diff --git a/src/app/showcase/doc/inputgroup/checkboxdoc.ts b/src/app/showcase/doc/inputgroup/checkboxdoc.ts index cf86159f6d2..ee99bdbfc24 100644 --- a/src/app/showcase/doc/inputgroup/checkboxdoc.ts +++ b/src/app/showcase/doc/inputgroup/checkboxdoc.ts @@ -8,21 +8,23 @@ import { Code } from '../../domain/code';

Checkbox and RadioButton components can be combined with an input element under the same group.

-
- + + + -
+ -
+ - -
+ + -
- + + - -
+ + +
` @@ -40,40 +42,35 @@ export class CheckboxDoc { code: Code = { basic: ` -
- - -
- -
- - -
- -
- - - -
`, + + + + + + + + + + + + +`, html: `
-
- - -
- -
- - -
- -
- - - -
-
`, + + + + + + + + + + + + +`, typescript: ` import { Component } from '@angular/core'; diff --git a/src/app/showcase/doc/inputgroup/importdoc.ts b/src/app/showcase/doc/inputgroup/importdoc.ts index 23ff1774738..61dfefc5d1c 100644 --- a/src/app/showcase/doc/inputgroup/importdoc.ts +++ b/src/app/showcase/doc/inputgroup/importdoc.ts @@ -14,8 +14,7 @@ export class ImportDoc { @Input() title: string; code: Code = { - typescript: `import { InputTextModule } from 'primeng/inputtext'; -import { CheckboxModule } from 'primeng/checkbox'; -import { RadioButtonModule } from 'primeng/radiobutton';` + typescript: `import { InputGroup } from 'primeng/inputgroup'; +import { InputGroupAddon } from 'primeng/inputgroupaddon';` }; } diff --git a/src/app/showcase/doc/inputgroup/inputgroupddoc.module.ts b/src/app/showcase/doc/inputgroup/inputgroupddoc.module.ts index 242a964b8cd..df5a854c310 100644 --- a/src/app/showcase/doc/inputgroup/inputgroupddoc.module.ts +++ b/src/app/showcase/doc/inputgroup/inputgroupddoc.module.ts @@ -13,9 +13,11 @@ import { ButtonDoc } from './buttondoc'; import { CheckboxDoc } from './checkboxdoc'; import { ImportDoc } from './importdoc'; import { MultipleDoc } from './multipledoc'; +import { InputGroupModule } from 'primeng/inputgroup'; +import { InputGroupAddonModule } from 'primeng/inputgroupaddon'; @NgModule({ - imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, InputTextModule, ButtonModule, CheckboxModule, RadioButtonModule], + imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, InputTextModule, ButtonModule, CheckboxModule, RadioButtonModule,InputGroupModule,InputGroupAddonModule], exports: [AppDocModule], declarations: [ImportDoc, BasicDoc, MultipleDoc, ButtonDoc, CheckboxDoc] }) diff --git a/src/app/showcase/doc/inputgroup/multipledoc.ts b/src/app/showcase/doc/inputgroup/multipledoc.ts index f20c7e1441a..e3676e83f5d 100644 --- a/src/app/showcase/doc/inputgroup/multipledoc.ts +++ b/src/app/showcase/doc/inputgroup/multipledoc.ts @@ -8,17 +8,21 @@ import { Code } from '../../domain/code';

Multiple add-ons can be placed inside the same group.

-
- + + + - - + + + - + + - $ - .00 -
+ $ + .00 + +
` @@ -30,31 +34,31 @@ export class MultipleDoc { code: Code = { basic: ` -
- - - - - - - - $ - .00 -
`, + + + + + + + + + $ + .00 + `, html: `
-
- - - - - - - - $ - .00 -
+ + + + + + + + + $ + .00 +
`, typescript: ` From 76d92aeefc6c603d059746ba5ba5c52444f53f81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 29 Nov 2023 10:51:47 +0300 Subject: [PATCH 2/2] Merge master --- src/app/showcase/doc/inputgroup/basicdoc.ts | 65 +++++++++--------- src/app/showcase/doc/inputgroup/buttondoc.ts | 68 +++++++++---------- .../showcase/doc/inputgroup/checkboxdoc.ts | 59 ++++++++-------- .../showcase/doc/inputgroup/multipledoc.ts | 60 ++++++++-------- 4 files changed, 126 insertions(+), 126 deletions(-) diff --git a/src/app/showcase/doc/inputgroup/basicdoc.ts b/src/app/showcase/doc/inputgroup/basicdoc.ts index cd3ede701fd..1eb5f409b07 100644 --- a/src/app/showcase/doc/inputgroup/basicdoc.ts +++ b/src/app/showcase/doc/inputgroup/basicdoc.ts @@ -24,55 +24,52 @@ import { Code } from '../../domain/code'; - + ` }) export class BasicDoc { code: Code = { - basic: ` - - - - - - - - $ - - .00 - - - www - - `, - - html: ` -
- + basic: ` - + - - - + + + $ - + .00 - - + + www - + +`, + + html: `
+ + + + + + + + $ + + .00 + + + www + -
`, +
`, 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 { }` }; } diff --git a/src/app/showcase/doc/inputgroup/buttondoc.ts b/src/app/showcase/doc/inputgroup/buttondoc.ts index f21a341f676..cc7aa2ece23 100644 --- a/src/app/showcase/doc/inputgroup/buttondoc.ts +++ b/src/app/showcase/doc/inputgroup/buttondoc.ts @@ -29,49 +29,47 @@ import { Code } from '../../domain/code'; }) export class ButtonDoc { code: Code = { - basic: ` - - - - + basic: ` + + + - - - - - - - - - - `, - html: ` -
- - - - - - - - - - - - - - - + + + + + + + + + +`, + html: `
+ + + + + + + + + + + + + + +
`, 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 { }` }; } diff --git a/src/app/showcase/doc/inputgroup/checkboxdoc.ts b/src/app/showcase/doc/inputgroup/checkboxdoc.ts index 3ae878a74bf..01179558c45 100644 --- a/src/app/showcase/doc/inputgroup/checkboxdoc.ts +++ b/src/app/showcase/doc/inputgroup/checkboxdoc.ts @@ -24,7 +24,7 @@ import { Code } from '../../domain/code';
- + ` }) export class CheckboxDoc { @@ -35,45 +35,48 @@ export class CheckboxDoc { category: string | undefined; code: Code = { - basic: ` - - - - - - - + basic: ` + + - - - - -`, - html: ` -
- - - - - - + + + - - - + + + `, + html: `
+ + + + + + + + + + + + + + + +
`, + 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; diff --git a/src/app/showcase/doc/inputgroup/multipledoc.ts b/src/app/showcase/doc/inputgroup/multipledoc.ts index b9c11675670..11206cc0f9d 100644 --- a/src/app/showcase/doc/inputgroup/multipledoc.ts +++ b/src/app/showcase/doc/inputgroup/multipledoc.ts @@ -22,47 +22,49 @@ import { Code } from '../../domain/code'; .00
- + ` }) export class MultipleDoc { code: Code = { - basic: ` - - - - - - - - - $ - .00 - `, + basic: ` + + + - html: ` -
- - - - - - - - - $ - .00 - + + + + + + $ + .00 +`, + + html: `
+ + + + + + + + + + + $ + .00 +
`, typescript: ` import { Component } from '@angular/core'; @Component({ - selector: 'inputgroup-multiple-demo', - templateUrl: './inputgroup-multiple-demo.html' + selector: 'input-group-multiple-demo', + templateUrl: './input-group-multiple-demo.html' }) -export class InputgroupMultipleDemo { +export class InputGroupMultipleDemo { }` }; }