Update folder structure

2021-12-28 13:29:25 +03:00
parent e0762fdeb0
commit ab8f627bb3
71 changed files with 189 additions and 193 deletions
@@ -0,0 +1,71 @@
+<div class="card">
+    <h5>Float Label</h5>
+    <div class="grid p-fluid mt-3">
+        <div class="field col-12 md:col-4">
+            <span class="p-float-label">
+                <input type="text" id="inputtext" pInputText [(ngModel)]="value1">
+                <label for="inputtext">InputText</label>
+            </span>
+        </div>
+        <div class="field col-12 md:col-4">
+            <span class="p-float-label">
+                <p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries"
+                (completeMethod)="searchCountry($event)" field="name"></p-autoComplete>
+                <label for="autocomplete">AutoComplete</label>
+            </span>
+        </div>
+        <div class="field col-12 md:col-4">
+            <span class="p-float-label">
+                <p-calendar inputId="calendar" [(ngModel)]="value3"></p-calendar>
+                <label for="calendar">Calendar</label>
+            </span>
+        </div>
+        <div class="field col-12 md:col-4">
+            <span class="p-float-label">
+                <p-chips inputId="chips" [(ngModel)]="value4"></p-chips>
+                <label for="chips">Chips</label>
+            </span>
+        </div>
+        <div class="field col-12 md:col-4">
+            <span class="p-float-label">
+                <p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value5"></p-inputMask>
+                <label for="inputmask">InputMask</label>
+            </span>
+        </div>
+        <div class="field col-12 md:col-4">
+            <span class="p-float-label">
+                <p-inputNumber inputId="inputnumber" [(ngModel)]="value6"></p-inputNumber>
+                <label for="inputnumber">InputNumber</label>
+            </span>
+        </div>
+        <div class="field col-12 md:col-4">
+            <div class="p-inputgroup">
+                <span class="p-inputgroup-addon">
+                    <i class="pi pi-user"></i>
+                </span>
+                <span class="p-float-label">
+                    <input type="text" inputId="inputgroup" pInputText [(ngModel)]="value7"> 
+                    <label for="inputgroup">InputGroup</label>
+                </span>
+            </div>
+        </div>
+        <div class="field col-12 md:col-4">
+            <span class="p-float-label">
+                <p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value8" optionLabel="name"></p-dropdown>
+                <label for="dropdown">Dropdown</label>
+            </span>
+        </div>
+        <div class="field col-12 md:col-4">
+            <span class="p-float-label">
+                <p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value9" optionLabel="name" [filter]="false"></p-multiSelect>
+                <label for="multiselect">MultiSelect</label>
+            </span>
+        </div>
+        <div class="field col-12 md:col-4">
+            <span class="p-float-label">
+                <textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value10" pInputTextarea></textarea>
+                <label for="textarea">Textarea</label>
+            </span>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,69 @@
+import {Component, OnInit} from '@angular/core';
+import {CountryService} from '../../service/countryservice';
+
+@Component({
+    templateUrl: './floatlabel.component.html',
+})
+export class FloatLabelComponent implements OnInit {
+
+    countries: any[];
+
+    cities: any[];
+
+    filteredCountries: any[];
+
+    value1: any;
+
+    value2: any;
+
+    value3: any;
+
+    value4: any;
+
+    value5: any;
+
+    value6: any;
+
+    value7: any;
+
+    value8: any;
+
+    value9: any;
+
+    value10: any;
+
+    value11: any;
+
+    value12: any;
+
+    constructor(private countryService: CountryService) {
+        this.cities = [
+            {name: 'New York', code: 'NY'},
+            {name: 'Rome', code: 'RM'},
+            {name: 'London', code: 'LDN'},
+            {name: 'Istanbul', code: 'IST'},
+            {name: 'Paris', code: 'PRS'}
+        ];
+    }
+
+    ngOnInit() {
+        this.countryService.getCountries().then(countries => {
+            this.countries = countries;
+        });
+    }
+
+    searchCountry(event) {
+        // in a real application, make a request to a remote url with the query and
+        // return filtered results, for demo we filter at client side
+        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;
+    }
+}