<commit_before><div class="content-section introduction">
    <div>
        <span class="feature-title">Spinner</span>
        <span>Spinner is an input component to provide a numerical input.</span>
    </div>
</div>

<div class="content-section implementation">
    <h3 class="first">Basic</h3>
    <p-spinner size="30" [(ngModel)]="val1"></p-spinner>

    <h3>Min/Max</h3>
    <p-spinner size="30" [(ngModel)]="val2" [min]="0" [max]="100"></p-spinner>

    <h3>Step</h3>
    <p-spinner size="30" [(ngModel)]="val3" [step]="0.25"></p-spinner>

    <h3>Format Input</h3>
    <p-spinner size="30" [(ngModel)]="val4" [step]="0.25" [formatInput]="true"></p-spinner>
    
    <h3>Disabled</h3>
    <p-spinner size="30" [(ngModel)]="val5" [disabled]="true"></p-spinner>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;SpinnerModule&#125; from 'primeng/spinner';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>Two-way value binding is defined using standard ngModel directive.</p>     
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-spinner [(ngModel)]="val"&gt;&lt;/p-spinner&gt;
</code>
</pre>

            <h3>Model Driven Forms</h3>
            <p>Spinner can be used in a model driven form as well.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-spinner formControlName="age"&gt;&lt;/p-spinner&gt;
</code>
</pre>

            <h3>Min-Max</h3>
            <p>Boundaries are specified with min and max attributes.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-spinner [(ngModel)]="val" [min]="0" [max]="100"&gt;&lt;/p-spinner&gt;
</code>
</pre>

            <h3>Step</h3>
            <p>Step factor is 1 by default and can be customized with step option.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-spinner [(ngModel)]="val" [step]="0.25"&gt;&lt;/p-spinner&gt;
</code>
</pre>

            <h3>Formatting Input</h3>
            <p>Enable formatInput property so that value entered is formatted at onblur event using thosandSeparator and decimalSeparator properties which retrieve their values from the user locale automatically. If you'd like to apply
                certain separators, define the separators manually.
            </p>

<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-spinner [(ngModel)]="val" [step]="0.25" [formatInput]="true" thosandSeparator="," decimalSeparator="."&gt;&lt;/p-spinner&gt;
</code>
</pre>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>step</td>
                            <td>number</td>
                            <td>1</td>
                            <td>Step factor to increment/decrement the value.</td>
                        </tr>
                        <tr>
                            <td>min</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Mininum boundary value.</td>
                        </tr>
                        <tr>
                            <td>max</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Maximum boundary value.</td>
                        </tr>
                        <tr>
                            <td>placeholder</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Hint text for the input field.</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>undefined</td>
                            <td>When present, it specifies that the element should be disabled.</td>
                        </tr>
                        <tr>
                            <td>readonly</td>
                            <td>boolean</td>
                            <td>undefined</td>
                            <td>When present, it specifies that the element should be read-only.</td>
                        </tr>
                        <tr>
                            <td>maxlength</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Maximum number of character allows in the input field.</td>
                        </tr>
                        <tr>
                            <td>size</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Size of the input field.</td>
                        </tr>
                        <tr>
                            <td>tabindex</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Index of the element in tabbing order.</td>
                        </tr>
                        <tr>
                            <td>inputId</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Identifier of the focus input to match a label defined for the component.</td>
                        </tr>
                        <tr>
                            <td>required</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that an input field must be filled out before submitting the form.</td>
                        </tr>
                        <tr>
                            <td>name</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Name of the input field.</td>
                        </tr>
                        <tr>
                            <td>inputStyle</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the input field.</td>
                        </tr>
                        <tr>
                            <td>inputStyleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the input field.</td>
                        </tr>
                        <tr>
                            <td>decimalSeparator</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Separator character for decimals, defaults to settings at user locale.</td>
                        </tr>
                        <tr>
                            <td>thousandSeparator</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Separator character for thousands, defaults to settings at user locale.</td>
                        </tr>
                        <tr>
                            <td>formatInput</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, formats the user input at blur event.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3>Events</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onBlur</td>
                            <td>event: Blur event</td>
                            <td>Callback to invoke when input loses focus.</td>
                        </tr>       
                        <tr>
                            <td>onFocus</td>
                            <td>event: Browser event</td>
                            <td>Callback to invoke when input gets focus.</td>
                        </tr>                 
                        <tr>
                            <td>onChange</td>
                            <td>event: Change event</td>
                            <td>Callback to invoke on value change.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Styling</h3>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ui-spinner</td>
                            <td>Container element</td>
                        </tr>
                        <tr>
                            <td>ui-spinner-up</td>
                            <td>Up element</td>
                        </tr>
                        <tr>
                            <td>ui-spinner-down</td>
                            <td>Down button</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Dependencies</h3>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/spinner" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;p-spinner size="30" [(ngModel)]="val1"&gt;&lt;/p-spinner&gt;

&lt;h3&gt;Min/Max&lt;/h3&gt;
&lt;p-spinner size="30" [(ngModel)]="val2" [min]="0" [max]="100"&gt;&lt;/p-spinner&gt;

&lt;h3&gt;Step&lt;/h3&gt;
&lt;p-spinner size="30" [(ngModel)]="val3" [step]="0.25"&gt;&lt;/p-spinner&gt;

&lt;h3&gt;Format Input&lt;/h3&gt;
&lt;p-spinner size="30" [(ngModel)]="val4" [step]="0.25" [formatInput]="true"&gt;&lt;/p-spinner&gt;

&lt;h3&gt;Disabled&lt;/h3&gt;
&lt;p-spinner size="30" [(ngModel)]="val5" [disabled]="true"&gt;&lt;/p-spinner&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class SpinnerDemo &#123;

    val1: number;

    val2: number;

    val3: number;

    val4: number = 1000000.50;

    val5: number = 100;
    
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div><commit_msg>Fix typo #8354<commit_after><div class="content-section introduction">
    <div>
        <span class="feature-title">Spinner</span>
        <span>Spinner is an input component to provide a numerical input.</span>
    </div>
</div>

<div class="content-section implementation">
    <h3 class="first">Basic</h3>
    <p-spinner size="30" [(ngModel)]="val1"></p-spinner>

    <h3>Min/Max</h3>
    <p-spinner size="30" [(ngModel)]="val2" [min]="0" [max]="100"></p-spinner>

    <h3>Step</h3>
    <p-spinner size="30" [(ngModel)]="val3" [step]="0.25"></p-spinner>

    <h3>Format Input</h3>
    <p-spinner size="30" [(ngModel)]="val4" [step]="0.25" [formatInput]="true"></p-spinner>
    
    <h3>Disabled</h3>
    <p-spinner size="30" [(ngModel)]="val5" [disabled]="true"></p-spinner>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;SpinnerModule&#125; from 'primeng/spinner';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>Two-way value binding is defined using standard ngModel directive.</p>     
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-spinner [(ngModel)]="val"&gt;&lt;/p-spinner&gt;
</code>
</pre>

            <h3>Model Driven Forms</h3>
            <p>Spinner can be used in a model driven form as well.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-spinner formControlName="age"&gt;&lt;/p-spinner&gt;
</code>
</pre>

            <h3>Min-Max</h3>
            <p>Boundaries are specified with min and max attributes.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-spinner [(ngModel)]="val" [min]="0" [max]="100"&gt;&lt;/p-spinner&gt;
</code>
</pre>

            <h3>Step</h3>
            <p>Step factor is 1 by default and can be customized with step option.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-spinner [(ngModel)]="val" [step]="0.25"&gt;&lt;/p-spinner&gt;
</code>
</pre>

            <h3>Formatting Input</h3>
            <p>Enable formatInput property so that value entered is formatted at onblur event using thousandSeparator and decimalSeparator properties which retrieve their values from the user locale automatically. If you'd like to apply
                certain separators, define the separators manually.
            </p>

<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-spinner [(ngModel)]="val" [step]="0.25" [formatInput]="true" thousandSeparator="," decimalSeparator="."&gt;&lt;/p-spinner&gt;
</code>
</pre>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>step</td>
                            <td>number</td>
                            <td>1</td>
                            <td>Step factor to increment/decrement the value.</td>
                        </tr>
                        <tr>
                            <td>min</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Mininum boundary value.</td>
                        </tr>
                        <tr>
                            <td>max</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Maximum boundary value.</td>
                        </tr>
                        <tr>
                            <td>placeholder</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Hint text for the input field.</td>
                        </tr>
                        <tr>
                            <td>disabled</td>
                            <td>boolean</td>
                            <td>undefined</td>
                            <td>When present, it specifies that the element should be disabled.</td>
                        </tr>
                        <tr>
                            <td>readonly</td>
                            <td>boolean</td>
                            <td>undefined</td>
                            <td>When present, it specifies that the element should be read-only.</td>
                        </tr>
                        <tr>
                            <td>maxlength</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Maximum number of character allows in the input field.</td>
                        </tr>
                        <tr>
                            <td>size</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Size of the input field.</td>
                        </tr>
                        <tr>
                            <td>tabindex</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Index of the element in tabbing order.</td>
                        </tr>
                        <tr>
                            <td>inputId</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Identifier of the focus input to match a label defined for the component.</td>
                        </tr>
                        <tr>
                            <td>required</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, it specifies that an input field must be filled out before submitting the form.</td>
                        </tr>
                        <tr>
                            <td>name</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Name of the input field.</td>
                        </tr>
                        <tr>
                            <td>inputStyle</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the input field.</td>
                        </tr>
                        <tr>
                            <td>inputStyleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the input field.</td>
                        </tr>
                        <tr>
                            <td>decimalSeparator</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Separator character for decimals, defaults to settings at user locale.</td>
                        </tr>
                        <tr>
                            <td>thousandSeparator</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Separator character for thousands, defaults to settings at user locale.</td>
                        </tr>
                        <tr>
                            <td>formatInput</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When present, formats the user input at blur event.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h3>Events</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onBlur</td>
                            <td>event: Blur event</td>
                            <td>Callback to invoke when input loses focus.</td>
                        </tr>       
                        <tr>
                            <td>onFocus</td>
                            <td>event: Browser event</td>
                            <td>Callback to invoke when input gets focus.</td>
                        </tr>                 
                        <tr>
                            <td>onChange</td>
                            <td>event: Change event</td>
                            <td>Callback to invoke on value change.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Styling</h3>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ui-spinner</td>
                            <td>Container element</td>
                        </tr>
                        <tr>
                            <td>ui-spinner-up</td>
                            <td>Up element</td>
                        </tr>
                        <tr>
                            <td>ui-spinner-down</td>
                            <td>Down button</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Dependencies</h3>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/spinner" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;p-spinner size="30" [(ngModel)]="val1"&gt;&lt;/p-spinner&gt;

&lt;h3&gt;Min/Max&lt;/h3&gt;
&lt;p-spinner size="30" [(ngModel)]="val2" [min]="0" [max]="100"&gt;&lt;/p-spinner&gt;

&lt;h3&gt;Step&lt;/h3&gt;
&lt;p-spinner size="30" [(ngModel)]="val3" [step]="0.25"&gt;&lt;/p-spinner&gt;

&lt;h3&gt;Format Input&lt;/h3&gt;
&lt;p-spinner size="30" [(ngModel)]="val4" [step]="0.25" [formatInput]="true"&gt;&lt;/p-spinner&gt;

&lt;h3&gt;Disabled&lt;/h3&gt;
&lt;p-spinner size="30" [(ngModel)]="val5" [disabled]="true"&gt;&lt;/p-spinner&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class SpinnerDemo &#123;

    val1: number;

    val2: number;

    val3: number;

    val4: number = 1000000.50;

    val5: number = 100;
    
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>
{'fraction_non_alphanumeric': 0.13482115560990524, 'fraction_numerical': 0.011617242433506572, 'mean_word_length': 1.0208278174918366, 'pattern_counts': {'":': 0, '<': 747, '<?xml version=': 0, '>': 747, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6642090', 'n_tokens_mistral': 6517, 'n_tokens_neox': 6180, 'n_words': 1247}