Update to new structure

2022-07-22 13:13:50 +03:00
parent 12bc4574d2
commit af7e863f4d
422 changed files with 5238 additions and 209563 deletions
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { FloatLabelDemoComponent } from './floatlabeldemo.component';
+
+@NgModule({
+    imports: [RouterModule.forChild([
+        { path: '', component: FloatLabelDemoComponent }
+    ])],
+    exports: [RouterModule]
+})
+export class FloatlabelDemoRoutingModule { }
@@ -0,0 +1,86 @@
+<div class="card">
+    <h5>Float Label</h5>
+    <p>All input text components support floating labels by adding (<mark>.p-float-label</mark>) to wrapper class.</p>
+    <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-input-icon-left">
+                <i class="pi pi-search"></i>
+                <input type="text" id="lefticon" pInputText [(ngModel)]="value3">
+                <label for="lefticon">Left Icon</label>
+            </span>
+        </div>
+        <div class="field col-12 md:col-4">
+            <span class="p-float-label p-input-icon-right">
+                <input type="text" id="righticon" pInputText [(ngModel)]="value4">
+                <label for="righticon">Right Icon</label>
+                <i class="pi pi-spin pi-spinner"></i>
+            </span>
+        </div>
+        <div class="field col-12 md:col-4">
+            <span class="p-float-label">
+                <p-calendar inputId="calendar" [(ngModel)]="value5"></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)]="value6"></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)]="value7"></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)]="value8"></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)]="value9"> 
+                    <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)]="value10" 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)]="value11" 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)]="value12" pInputTextarea></textarea>
+                <label for="textarea">Textarea</label>
+            </span>
+        </div>
+    </div>
+</div>
@@ -0,0 +1,70 @@
+import { Component, OnInit } from '@angular/core';
+import { CountryService } from 'src/app/demo/service/country.service';
+
+@Component({
+    templateUrl: './floatlabeldemo.component.html',
+})
+export class FloatLabelDemoComponent 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: any) {
+        // 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;
+        // tslint:disable-next-line:prefer-for-of
+        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,35 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FloatLabelDemoComponent } from './floatlabeldemo.component';
+import { FloatlabelDemoRoutingModule } from './floatlabeldemo-routing.module';
+import { AutoCompleteModule } from "primeng/autocomplete";
+import { CalendarModule } from "primeng/calendar";
+import { ChipsModule } from "primeng/chips";
+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";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        FloatlabelDemoRoutingModule,
+        AutoCompleteModule,
+        CalendarModule,
+        ChipsModule,
+        DropdownModule,
+        InputMaskModule,
+        InputNumberModule,
+        CascadeSelectModule,
+        MultiSelectModule,
+        InputTextareaModule,
+        InputTextModule
+    ],
+    declarations: [FloatLabelDemoComponent]
+})
+export class FloatlabelDemoModule { }