From e15d91ccfcadc145351b400c81cd24e7d6428545 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Thu, 23 Nov 2023 20:01:32 +0300
Subject: [PATCH] Refactor typo

---
 .../showcase/doc/chips/commaseparator.doc.ts  | 38 +++++++++++++++++
 .../showcase/doc/chips/regexpseparator.doc.ts | 42 +++++++++++++++++++
 2 files changed, 80 insertions(+)

diff --git a/src/app/showcase/doc/chips/commaseparator.doc.ts b/src/app/showcase/doc/chips/commaseparator.doc.ts
index e69de29bb2d..3f820d72b22 100644
--- a/src/app/showcase/doc/chips/commaseparator.doc.ts
+++ b/src/app/showcase/doc/chips/commaseparator.doc.ts
@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { Code } from '../../domain/code';
+
+@Component({
+    selector: 'chips-comma-separator-demo',
+    template: `
+        <app-docsectiontext>
+            <p>A new chip is added when <i>enter</i> key is pressed, <i>separator</i> property allows definining an additional key. Currently only valid value is <i>,</i> to create a new item when comma key is pressed.</p>
+        </app-docsectiontext>
+        <div class="card p-fluid">
+            <p-chips [(ngModel)]="values" separator="," placeholder="Hint: a, b, c"></p-chips>
+        </div>
+        <app-code [code]="code" selector="chips-comma-separator-demo"></app-code>`
+})
+export class CommaSeparatorDoc {
+    values: string[] | undefined;
+
+    code: Code = {
+        basic: `
+<p-chips [(ngModel)]="values" separator="," placeholder="Hint: a, b, c"></p-chips>`,
+
+        html: `
+<div class="card p-fluid">
+    <p-chips [(ngModel)]="values" separator="," placeholder="Hint: a, b, c"></p-chips>
+</div>`,
+
+        typescript: `
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'chips-comma-separator-demo',
+    templateUrl: './chips-comma-separator-demo.html',
+})
+export class ChipsCommaseparatorDemo {
+    values: string[] | undefined;
+}`
+    };
+}
diff --git a/src/app/showcase/doc/chips/regexpseparator.doc.ts b/src/app/showcase/doc/chips/regexpseparator.doc.ts
index e69de29bb2d..30a636631ce 100644
--- a/src/app/showcase/doc/chips/regexpseparator.doc.ts
+++ b/src/app/showcase/doc/chips/regexpseparator.doc.ts
@@ -0,0 +1,42 @@
+import { Component, Input } from '@angular/core';
+import { Code } from '../../domain/code';
+
+@Component({
+    selector: 'chips-reg-exp-separator-demo',
+    template: `
+        <app-docsectiontext>
+            <p>A new chip is added when <i>enter</i> key is pressed, <i>separator</i> property allows definining an additional key. Currently only valid value is , to create a new item when comma key is pressed.</p>
+        </app-docsectiontext>
+        <div class="card p-fluid">
+            <p-chips [(ngModel)]="values" [separator]="separatorExp" placeholder="Hint: a, b c"></p-chips>
+        </div>
+        <app-code [code]="code" selector="chips-reg-exp-separator-demo"></app-code>`
+})
+export class RegexpSeparatorDoc {
+    separatorExp: RegExp = /,| /;
+
+    values: string[] | undefined;
+
+    code: Code = {
+        basic: `
+<p-chips [(ngModel)]="values" [separator]="separatorExp" placeholder="Hint: a, b c"></p-chips>`,
+
+        html: `
+<div class="card p-fluid">
+    <p-chips [(ngModel)]="values" [separator]="separatorExp" placeholder="Hint: a, b c"></p-chips>
+</div>`,
+
+        typescript: `
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'chips-reg-exp-separator-demo',
+    templateUrl: './chips-reg-exp-separator-demo.html'
+})
+export class ChipsRegExpSeparatorDemo {
+    values: string[] | undefined;
+
+    separatorExp: RegExp = /,| /;
+}`
+    };
+}