Update to new structure
This commit is contained in:
Çetin
@@ -0,0 +1,11 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { InputDemoComponent } from './inputdemo.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild([
|
||||
{ path: '', component: InputDemoComponent }
|
||||
])],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class InputDemoRoutingModule { }
|
||||
@@ -0,0 +1,214 @@
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>InputText</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<input type="text" pInputText placeholder="Default">
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<input type="text" pInputText placeholder="Disabled" [disabled]="true"/>
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<input type="text" pInputText placeholder="Invalid" class="ng-dirty ng-invalid"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Icons</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-user"></i>
|
||||
<input type="text" pInputText placeholder="Username"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span class="p-input-icon-right">
|
||||
<input type="text" pInputText placeholder="Search"/>
|
||||
<i class="pi pi-search"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
|
||||
<span class="p-input-icon-left p-input-icon-right">
|
||||
<i class="pi pi-user"></i>
|
||||
<input type="text" pInputText placeholder="Search"/>
|
||||
<i class="pi pi-search"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Float Label</h5>
|
||||
<span class="p-float-label">
|
||||
<input id="float-input" type="text" pInputText>
|
||||
<label for="float-input">Username</label>
|
||||
</span>
|
||||
|
||||
<h5>Textarea</h5>
|
||||
<textarea rows="5" cols="30" placeholder="Your Message" pInputTextarea></textarea>
|
||||
|
||||
<h5>AutoComplete</h5>
|
||||
<p-autoComplete [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries" (completeMethod)="filterCountry($event)" field="name" [dropdown]="true">
|
||||
</p-autoComplete>
|
||||
|
||||
<h5>Calendar</h5>
|
||||
<p-calendar [showIcon]="true" inputId="icon"></p-calendar>
|
||||
|
||||
<h5>InputNumber</h5>
|
||||
<p-inputNumber mode="decimal" [showButtons]="true" [min]="0" [max]="100">
|
||||
</p-inputNumber>
|
||||
|
||||
<h5>Chips</h5>
|
||||
<p-chips></p-chips>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<h5>Slider</h5>
|
||||
<input type="text" pInputText [(ngModel)]="valSlider" readonly/>
|
||||
<p-slider [(ngModel)]="valSlider"></p-slider>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<h5>Rating</h5>
|
||||
<p-rating></p-rating>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<h5>ColorPicker</h5>
|
||||
<p-colorPicker [(ngModel)]="valColor"></p-colorPicker>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<h5>Knob</h5>
|
||||
<p-knob [(ngModel)]="valueKnob" valueTemplate="{value}%" [step]="10" [min]="-50" [max]="50"></p-knob>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h5>RadioButton</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="city" value="Chicago" [(ngModel)]="valRadio" id="city1"></p-radioButton>
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="city" value="Los Angeles" [(ngModel)]="valRadio"
|
||||
id="city2"></p-radioButton>
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-radiobutton">
|
||||
<p-radioButton name="city" value="New York" [(ngModel)]="valRadio" id="city3"></p-radioButton>
|
||||
<label for="city3">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Checkbox</h5>
|
||||
<div class="grid formgrid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox name="group1" value="New York" [(ngModel)]="valCheck" id="ny"></p-checkbox>
|
||||
<label for="ny">New York</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox name="group1" value="San Francisco" [(ngModel)]="valCheck" id="sf"></p-checkbox>
|
||||
<label for="sf">San Francisco</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox name="group1" value="Los Angeles" [(ngModel)]="valCheck" id="la"></p-checkbox>
|
||||
<label for="la">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Input Switch</h5>
|
||||
<p-inputSwitch [(ngModel)]="valSwitch"></p-inputSwitch>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Listbox</h5>
|
||||
<p-listbox [options]="cities" [(ngModel)]="selectedList" [filter]="true"></p-listbox>
|
||||
|
||||
<h5>Dropdown</h5>
|
||||
<p-dropdown [options]="cities" [(ngModel)]="selectedDrop" placeholder="Select a City" [showClear]="true"></p-dropdown>
|
||||
|
||||
|
||||
<h5>Multiselect</h5>
|
||||
<p-multiSelect [options]="countries" [(ngModel)]="selectedMulti" defaultLabel="Select a Country" optionLabel="name" class="multiselect-custom">
|
||||
<ng-template let-value pTemplate="selectedItems">
|
||||
<div class="country-item country-item-value" *ngFor="let option of selectedMulti">
|
||||
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + option.code.toLowerCase()" />
|
||||
<div>{{option.name}}</div>
|
||||
</div>
|
||||
<div *ngIf="!selectedMulti || selectedMulti.length === 0" class="country-placeholder">
|
||||
Select Countries
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template let-country pTemplate="item">
|
||||
<div class="country-item">
|
||||
<img src="assets/demo/images/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" />
|
||||
<div>{{country.name}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-multiSelect>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>ToggleButton</h5>
|
||||
<p-toggleButton [(ngModel)]="valToggle" onLabel="Yes" offLabel="No" [style]="{'width': '10em'}"></p-toggleButton>
|
||||
|
||||
<h5>SelectOneButton</h5>
|
||||
<p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect1" optionLabel="name"></p-selectButton>
|
||||
|
||||
<h5>SelectManyButton</h5>
|
||||
<p-selectButton [options]="paymentOptions" [(ngModel)]="valSelect2" [multiple]="true" optionLabel="name"></p-selectButton>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>InputGroup</h5>
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
|
||||
<input type="text" pInputText placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon"><i class="pi pi-tags" style="line-height: 1.25;"></i></span>
|
||||
<span class="p-inputgroup-addon"><i class="pi pi-shopping-cart" style="line-height: 1.25;"></i></span>
|
||||
<input type="text" pInputText placeholder="Price">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<span class="p-inputgroup-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<button type="button" pButton pRipple label="Search"></button>
|
||||
<input type="text" pInputText placeholder="Keyword">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon"><p-checkbox></p-checkbox></span>
|
||||
<input type="text" pInputText placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,124 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { SelectItem } from 'primeng/api';
|
||||
import { CountryService } from 'src/app/demo/service/country.service';
|
||||
|
||||
@Component({
|
||||
templateUrl: './inputdemo.component.html',
|
||||
styles: [`
|
||||
:host ::ng-deep .p-multiselect {
|
||||
min-width: 15rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom-virtual-scroll .p-multiselect {
|
||||
min-width: 20rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .p-multiselect-label {
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item.country-item-value {
|
||||
padding: .25rem .5rem;
|
||||
border-radius: 3px;
|
||||
display: inline-flex;
|
||||
margin-right: .5rem;
|
||||
background-color: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item.country-item-value img.flag {
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-item img.flag {
|
||||
width: 18px;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .multiselect-custom .country-placeholder {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
:host ::ng-deep .p-colorpicker {
|
||||
width: 2.5em
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class InputDemoComponent implements OnInit {
|
||||
countries: any[] = [];
|
||||
|
||||
filteredCountries: any[] = [];
|
||||
|
||||
selectedCountryAdvanced: any[] = [];
|
||||
|
||||
valSlider = 50;
|
||||
|
||||
valColor = '#424242';
|
||||
|
||||
valRadio: string = '';
|
||||
|
||||
valCheck: string[] = [];
|
||||
|
||||
valSwitch: boolean = false;
|
||||
|
||||
cities: SelectItem[] = [];
|
||||
|
||||
selectedList: SelectItem = { value: '' };
|
||||
|
||||
selectedDrop: SelectItem = { value: '' };
|
||||
|
||||
selectedMulti: any[] = [];
|
||||
|
||||
valToggle = false;
|
||||
|
||||
paymentOptions: any[] = [];
|
||||
|
||||
valSelect1: string = "";
|
||||
|
||||
valSelect2: string = "";
|
||||
|
||||
valueKnob = 20;
|
||||
|
||||
constructor(private countryService: CountryService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.countryService.getCountries().then(countries => {
|
||||
this.countries = countries;
|
||||
});
|
||||
|
||||
this.cities = [
|
||||
{ label: 'New York', value: { id: 1, name: 'New York', code: 'NY' } },
|
||||
{ label: 'Rome', value: { id: 2, name: 'Rome', code: 'RM' } },
|
||||
{ label: 'London', value: { id: 3, name: 'London', code: 'LDN' } },
|
||||
{ label: 'Istanbul', value: { id: 4, name: 'Istanbul', code: 'IST' } },
|
||||
{ label: 'Paris', value: { id: 5, name: 'Paris', code: 'PRS' } }
|
||||
];
|
||||
|
||||
this.paymentOptions = [
|
||||
{ name: 'Option 1', value: 1 },
|
||||
{ name: 'Option 2', value: 2 },
|
||||
{ name: 'Option 3', value: 3 }
|
||||
];
|
||||
}
|
||||
|
||||
filterCountry(event: any) {
|
||||
const filtered: any[] = [];
|
||||
const query = event.query;
|
||||
for (let i = 0; i < this.countries.length; i++) {
|
||||
const country = this.countries[i];
|
||||
if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
|
||||
filtered.push(country);
|
||||
}
|
||||
}
|
||||
|
||||
this.filteredCountries = filtered;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { InputDemoComponent } from './inputdemo.component';
|
||||
import { InputDemoRoutingModule } from './inputdemo-routing.module';
|
||||
import { AutoCompleteModule } from "primeng/autocomplete";
|
||||
import { CalendarModule } from "primeng/calendar";
|
||||
import { ChipsModule } from "primeng/chips";
|
||||
import { ChipModule } from "primeng/chip";
|
||||
import { DropdownModule } from "primeng/dropdown";
|
||||
import { InputMaskModule } from "primeng/inputmask";
|
||||
import { InputNumberModule } from "primeng/inputnumber";
|
||||
import { CascadeSelectModule } from "primeng/cascadeselect";
|
||||
import { MultiSelectModule } from "primeng/multiselect";
|
||||
import { InputTextareaModule } from "primeng/inputtextarea";
|
||||
import { InputTextModule } from "primeng/inputtext";
|
||||
import { RatingModule } from 'primeng/rating';
|
||||
import { KnobModule } from 'primeng/knob';
|
||||
import { ListboxModule } from 'primeng/listbox';
|
||||
import { SelectButtonModule } from 'primeng/selectbutton';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { InputSwitchModule } from 'primeng/inputswitch';
|
||||
import { RadioButtonModule } from 'primeng/radiobutton';
|
||||
import { ColorPickerModule } from 'primeng/colorpicker';
|
||||
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||
import { SliderModule } from 'primeng/slider';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
InputDemoRoutingModule,
|
||||
AutoCompleteModule,
|
||||
CalendarModule,
|
||||
ChipsModule,
|
||||
DropdownModule,
|
||||
InputMaskModule,
|
||||
InputNumberModule,
|
||||
ColorPickerModule,
|
||||
CascadeSelectModule,
|
||||
MultiSelectModule,
|
||||
ToggleButtonModule,
|
||||
SliderModule,
|
||||
InputTextareaModule,
|
||||
RadioButtonModule,
|
||||
InputTextModule,
|
||||
RatingModule,
|
||||
ChipModule,
|
||||
KnobModule,
|
||||
InputSwitchModule,
|
||||
ListboxModule,
|
||||
SelectButtonModule,
|
||||
CheckboxModule,
|
||||
ButtonModule
|
||||
],
|
||||
declarations: [InputDemoComponent]
|
||||
})
|
||||
export class InputDemoModule { }
|
||||
Reference in New Issue
Block a user