From a67a2ebe03e244edf239cfb593e6b877b6badcc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 30 Dec 2024 17:14:23 +0300 Subject: [PATCH] Add inputdoc --- src/views/uikit/inputdoc.ts | 337 ++++++++++++++++++++++++++++++++++++ 1 file changed, 337 insertions(+) create mode 100644 src/views/uikit/inputdoc.ts diff --git a/src/views/uikit/inputdoc.ts b/src/views/uikit/inputdoc.ts new file mode 100644 index 0000000..87df946 --- /dev/null +++ b/src/views/uikit/inputdoc.ts @@ -0,0 +1,337 @@ +import {Component, inject, OnInit} from '@angular/core'; +import {InputTextModule} from "primeng/inputtext"; +import {ButtonModule} from "primeng/button"; +import {CommonModule} from "@angular/common"; +import {FormsModule} from "@angular/forms"; +import {CheckboxModule} from "primeng/checkbox"; +import {RadioButtonModule} from "primeng/radiobutton"; +import {SelectButtonModule} from "primeng/selectbutton"; +import {InputGroupModule} from "primeng/inputgroup"; +import {FluidModule} from "primeng/fluid"; +import {IconFieldModule} from "primeng/iconfield"; +import {InputIconModule} from "primeng/inputicon"; +import {FloatLabelModule} from "primeng/floatlabel"; +import {AutoCompleteModule} from "primeng/autocomplete"; +import {InputNumberModule} from "primeng/inputnumber"; +import {SliderModule} from "primeng/slider"; +import {RatingModule} from "primeng/rating"; +import {ColorPickerModule} from "primeng/colorpicker"; +import {KnobModule} from "primeng/knob"; +import {SelectModule} from "primeng/select"; +import {DatePickerModule} from "primeng/datepicker"; +import {ToggleSwitchModule} from "primeng/toggleswitch"; +import {TreeSelectModule} from "primeng/treeselect"; +import {MultiSelectModule} from "primeng/multiselect"; +import {ListboxModule} from "primeng/listbox"; +import {InputGroupAddonModule} from "primeng/inputgroupaddon"; +import {TextareaModule} from "primeng/textarea"; +import {CountryService} from "../../app/demo/service/country.service"; +import {NodeService} from "../../app/demo/service/node.service"; + +@Component({ + standalone: true, + imports: [ + CommonModule, + FormsModule, + InputTextModule, + ButtonModule, + CheckboxModule, + RadioButtonModule, + SelectButtonModule, + InputGroupModule, + FluidModule, + IconFieldModule, + InputIconModule, + FloatLabelModule, + AutoCompleteModule, + InputNumberModule, + SliderModule, + RatingModule, + ColorPickerModule, + KnobModule, + SelectModule, + DatePickerModule, + ToggleSwitchModule, + TreeSelectModule, + MultiSelectModule, + ListboxModule, + InputGroupAddonModule, + TextareaModule + ], + template: ` + +
+
+
InputText
+
+ + + +
+ +
Icons
+ + + + + + + + + +
Float Label
+ + + + + +
Textarea
+ + +
AutoComplete
+ + +
DatePicker
+ + +
InputNumber
+ +
+ +
+
Slider
+ + + +
+
+
Rating
+ +
+
+
ColorPicker
+ +
+
+ +
Knob
+ +
+
+
+
+
RadioButton
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
Checkbox
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
ToggleSwitch
+ +
+ +
+
Listbox
+ + +
Select
+ + +
MultiSelect
+ + + + + +
TreeSelect
+ +
+ +
+
ToggleButton
+ + +
SelectButton
+ +
+
+ + + +
+
InputGroup
+
+ + + + + + + + + + + + + + + $ + .00 + +
+
+ + + + + + + + + + +
+
+ ` +}) +export class InputDoc implements OnInit { + floatValue: any = null; + + autoValue: any = null; + + selectedAutoValue: any = null; + + autoFilteredValue: any[] = []; + + calendarValue: any = null; + + inputNumberValue: any = null; + + sliderValue: number = 50; + + ratingValue: any = null; + + colorValue: string = '#1976D2'; + + radioValue: any = null; + + checkboxValue: any[] = []; + + switchValue: boolean = false; + + listboxValues: any[] = [ + { name: 'New York', code: 'NY' }, + { name: 'Rome', code: 'RM' }, + { name: 'London', code: 'LDN' }, + { name: 'Istanbul', code: 'IST' }, + { name: 'Paris', code: 'PRS' } + ]; + + listboxValue: any = null; + + dropdownValues = [ + { name: 'New York', code: 'NY' }, + { name: 'Rome', code: 'RM' }, + { name: 'London', code: 'LDN' }, + { name: 'Istanbul', code: 'IST' }, + { name: 'Paris', code: 'PRS' } + ]; + + dropdownValue: any = null; + + multiselectValues = [ + { name: 'Australia', code: 'AU' }, + { name: 'Brazil', code: 'BR' }, + { name: 'China', code: 'CN' }, + { name: 'Egypt', code: 'EG' }, + { name: 'France', code: 'FR' }, + { name: 'Germany', code: 'DE' }, + { name: 'India', code: 'IN' }, + { name: 'Japan', code: 'JP' }, + { name: 'Spain', code: 'ES' }, + { name: 'United States', code: 'US' } + ]; + + multiselectValue: any = null; + + toggleValue: boolean = false; + + selectButtonValue: any = null + + selectButtonValues: any = [{ name: 'Option 1' }, { name: 'Option 2' }, { name: 'Option 3' }]; + + knobValue: number = 50; + + inputGroupValue: boolean = false; + + treeSelectNodes: any[] = null; + + selectedNode: any = null; + + countryService = inject(CountryService); + + nodeService = inject(NodeService); + + ngOnInit() { + this.countryService.getCountries().then(countries => { + this.autoValue = countries; + }); + + this.nodeService.getFiles().then((data) => (this.treeSelectNodes = data)); + } + + searchCountry(event: any) { + const filtered: any[] = []; + const query = event.query; + for (let i = 0; i < this.autoFilteredValue.length; i++) { + const country = this.autoFilteredValue[i]; + if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) { + filtered.push(country); + } + } + + this.autoFilteredValue = filtered; + } +}