<commit_before><div class="content-section introduction">
    <div>
        <span class="feature-title">Dropdown</span>
        <span>Dropdown is used to select an item from a collection of options. Custom content support and filtering are the notable features.</span>
    </div>
</div>

<div class="content-section implementation">
    <h3 class="first">Single</h3>
    <p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name" [showClear]="true"></p-dropdown>
    <p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>
    
    <h3>Editable</h3>
    <p-dropdown [options]="cars" [(ngModel)]="selectedCar1" [style]="{'width':'150px'}" editable="true" placeholder="Select a Brand"></p-dropdown>
    <p>Selected Car: {{selectedCar1 || 'none'}}</p>
    
    <h3>Content with Filters</h3>
    <p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'150px'}" filter="true" [showClear]="true">
        <ng-template let-item pTemplate="selectedItem">
            <img src="assets/showcase/images/demo/car/{{item.label}}.png" style="width:16px;vertical-align:middle" />
            <span style="vertical-align:middle">{{item.label}}</span>
        </ng-template>
        <ng-template let-car pTemplate="item">
            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                <img src="assets/showcase/images/demo/car/{{car.label}}.png" style="width:24px;position:absolute;top:1px;left:5px"/>
                <div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div>
            </div>
        </ng-template>
    </p-dropdown>
    <p>Selected Car: {{selectedCar2||'none'}}</p>

    <h3>Group</h3>
    <p-dropdown [options]="groupedCars" [(ngModel)]="selectedCar3" [style]="{'width':'150px'}" placeholder="Select a Car" [group]="true">
        <ng-template let-group pTemplate="group">
            <img src="assets/showcase/images/demo/flag/{{group.value}}" style="width:20px;vertical-align:middle" />
            <span style="vertical-align:middle">{{group.label}}</span>
        </ng-template>
    </p-dropdown>
    <p>Selected Car: {{selectedCar3 || 'none'}}</p>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade"><commit_msg>Demo update<commit_after><div class="content-section introduction">
    <div>
        <span class="feature-title">Dropdown</span>
        <span>Dropdown is used to select an item from a collection of options. Custom content support and filtering are the notable features.</span>
    </div>
</div>

<div class="content-section implementation">
    <h3 class="first">Single</h3>
    <p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name" [showClear]="true"></p-dropdown>
    <p>Selected City: {{selectedCity ? selectedCity.name : 'none'}}</p>
    
    <h3>Editable</h3>
    <p-dropdown [options]="cars" [(ngModel)]="selectedCar1" [style]="{'width':'150px'}" editable="true" placeholder="Select a Brand"></p-dropdown>
    <p>Selected Car: {{selectedCar1 || 'none'}}</p>
    
    <h3>Content with Filters</h3>
    <p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'150px'}" filter="true">
        <ng-template let-item pTemplate="selectedItem">
            <img src="assets/showcase/images/demo/car/{{item.label}}.png" style="width:16px;vertical-align:middle" />
            <span style="vertical-align:middle">{{item.label}}</span>
        </ng-template>
        <ng-template let-car pTemplate="item">
            <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                <img src="assets/showcase/images/demo/car/{{car.label}}.png" style="width:24px;position:absolute;top:1px;left:5px"/>
                <div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div>
            </div>
        </ng-template>
    </p-dropdown>
    <p>Selected Car: {{selectedCar2||'none'}}</p>

    <h3>Group</h3>
    <p-dropdown [options]="groupedCars" [(ngModel)]="selectedCar3" [style]="{'width':'150px'}" placeholder="Select a Car" [group]="true">
        <ng-template let-group pTemplate="group">
            <img src="assets/showcase/images/demo/flag/{{group.value}}" style="width:20px;vertical-align:middle" />
            <span style="vertical-align:middle">{{group.label}}</span>
        </ng-template>
    </p-dropdown>
    <p>Selected Car: {{selectedCar3 || 'none'}}</p>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
{'fraction_non_alphanumeric': 0.19823982398239823, 'fraction_numerical': 0.015841584158415842, 'mean_word_length': 3.9039913700107873, 'pattern_counts': {'":': 0, '<': 109, '<?xml version=': 0, '>': 109, 'https://': 0, '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': '132619', 'n_tokens_mistral': 1515, 'n_tokens_neox': 1441, 'n_words': 251}