docs(README): outputs

rbalet · Apr 23, 2024 · 2079ed6 · 2079ed6
1 parent 80629ef
commit 2079ed6
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -95,7 +95,7 @@ If you want to show the sample number for the country selected or errors , use m
 </form>
 ```
 
-## Options
+## Inputs
 
 | Options            | Type       | Default      | Description                                                                         |
 | ------------------ | ---------- | ------------ | ----------------------------------------------------------------------------------- |
@@ -108,6 +108,12 @@ If you want to show the sample number for the country selected or errors , use m
 | resetOnChange      | `boolean`  | `false`      | Reset input on country change                                                       |
 | searchPlaceholder  | `string`   | `Search ...` | Placeholder for the search input                                                    |
 
+
+## Outputs
+| Options        | Type                    | Default     | Description       |
+| -------------- | ----------------------- | ----------- | ----------------- |
+| countryChanged | `EventEmitter<Country>` | `undefined` | On country change |
+
 ## Css variable
 | Name                            | Default        | Explanation                                         |
 | ------------------------------- | -------------- | --------------------------------------------------- |

diff --git a/projects/ngx-mat-input-tel-tester/src/app/app.component.html b/projects/ngx-mat-input-tel-tester/src/app/app.component.html
@@ -9,10 +9,10 @@ <h3 id="phoneInput">Test International Telephone Input Form</h3>
         [preferredCountries]="['us', 'ca']"
         enablePlaceholder
         enableSearch
-        required
         [formControl]="phoneForm.controls.phone"
         placeholder="Enter Number"
         describedBy="phoneInput"
+        required
         #phone
       ></ngx-mat-input-tel>
       <mat-hint>e.g. {{ phone.selectedCountry.placeHolder }}</mat-hint>
@@ -67,7 +67,6 @@ <h2>Required & PlaceHolder</h2>
         placeholder="Enter Number"
         enablePlaceholder
         enableSearch
-        required
         #phone1
       ></ngx-mat-input-tel>
       <mat-label>Phone</mat-label>

diff --git a/projects/ngx-mat-input-tel/README.md b/projects/ngx-mat-input-tel/README.md
@@ -95,7 +95,7 @@ If you want to show the sample number for the country selected or errors , use m
 </form>
 ```
 
-## Options
+## Inputs
 
 | Options            | Type       | Default      | Description                                                                         |
 | ------------------ | ---------- | ------------ | ----------------------------------------------------------------------------------- |
@@ -108,6 +108,12 @@ If you want to show the sample number for the country selected or errors , use m
 | resetOnChange      | `boolean`  | `false`      | Reset input on country change                                                       |
 | searchPlaceholder  | `string`   | `Search ...` | Placeholder for the search input                                                    |
 
+
+## Outputs
+| Options        | Type                    | Default     | Description       |
+| -------------- | ----------------------- | ----------- | ----------------- |
+| countryChanged | `EventEmitter<Country>` | `undefined` | On country change |
+
 ## Css variable
 | Name                            | Default        | Explanation                                         |
 | ------------------------------- | -------------- | --------------------------------------------------- |

diff --git a/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.ts b/projects/ngx-mat-input-tel/src/lib/ngx-mat-input-tel.component.ts
@@ -136,6 +136,7 @@ export class NgxMatInputTelComponent
     return this._format
   }
 
+  private _placeholder?: string
   @Input()
   set placeholder(value: string) {
     this._placeholder = value
@@ -145,6 +146,7 @@ export class NgxMatInputTelComponent
     return this._placeholder || ''
   }
 
+  private _required = false
   @Input({ transform: booleanAttribute })
   set required(value: boolean) {
     this._required = coerceBooleanProperty(value)
@@ -154,6 +156,7 @@ export class NgxMatInputTelComponent
     return this._required
   }
 
+  private _disabled = false
   @Input({ alias: 'disabled', transform: booleanAttribute })
   set disabled(value: boolean) {
     this._disabled = coerceBooleanProperty(value)
@@ -170,9 +173,6 @@ export class NgxMatInputTelComponent
   @Output()
   countryChanged: EventEmitter<Country> = new EventEmitter<Country>()
 
-  private _placeholder?: string
-  private _required = false
-  private _disabled = false
   stateChanges = new Subject<void>()
   focused = false
   describedBy = ''