-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchunk-6NVBS52E.js
1054 lines (925 loc) · 170 KB
/
chunk-6NVBS52E.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
import{$,$a as w,A as V,Bc as Y,Cd as B,F as E,Fa as ce,G as S,Ga as e,Ia as L,Ka as b,Kb as ae,La as v,Lb as _,Ma as g,Mb as j,Na as D,Nb as X,Oa as U,Ob as I,Od as Le,Pa as F,Pb as N,Sb as be,T as d,Tb as ve,U as f,Ua as ue,Va as Ee,Vb as ge,Wb as he,Xd as C,Yb as fe,Yd as k,Zb as le,_ as u,a as G,ad as Z,bb as Se,c as me,dd as ke,ea as pe,gd as ee,h as ie,ha as c,hb as xe,ka as P,md as ye,na as n,oa as t,oc as H,pa as i,pb as A,pd as M,q as de,re as y,se as Fe,ta as J,ua as x,va as se,vc as K,x as O,y as Q,yd as z,za as oe,zc as Ce,zd as Pe}from"./chunk-ODUOVNEW.js";var we=(()=>{class a{static \u0275fac=function(l){return new(l||a)};static \u0275cmp=u({type:a,selectors:[["sample-po-lookup-basic"]],standalone:!1,decls:1,vars:0,consts:[["name","lookup","p-field-label","label","p-field-value","value","p-filter-service","https://po-sample-api.onrender.com/v1/heroes","p-label","PO Lookup"]],template:function(l,o){l&1&&i(0,"po-lookup",0)},dependencies:[M],encapsulation:2})}return a})();var Ge=a=>({"docs-sample-code-tabs":a}),Me=(()=>{class a{hideSampleCodeTabs=!0;sampleCodeButtonLabel="Talk is cheap, show me the code!";sampleCodeButtonIcon="an an-plus";toggleSampleCodeTabs(){this.hideSampleCodeTabs=!this.hideSampleCodeTabs,this.sampleCodeButtonLabel=this.hideSampleCodeTabs?"Talk is cheap, show me the code!":"Okay, hide the code",this.sampleCodeButtonIcon=this.hideSampleCodeTabs?"an an-plus":"an an-minus"}static \u0275fac=function(l){return new(l||a)};static \u0275cmp=u({type:a,selectors:[["sample-po-lookup-basic-view"]],standalone:!1,decls:24,vars:6,consts:[[1,"sample-blockquote"],[1,"sample-title","po-font-text-large-bold"],[1,"show-me-the-code",3,"click"],[3,"ngClass"],["p-size","2"],["p-label","HTML","p-active",""],[1,"doc-label-path"],["appCodeHighlight","",1,"html"],["p-label","TS"],["appCodeHighlight","",1,"typescript"],[1,"docs-sample-container"]],template:function(l,o){l&1&&(i(0,"br"),n(1,"blockquote",0)(2,"label",1),e(3,"PO Lookup Basic"),t(),n(4,"a",2),x("click",function(){return o.toggleSampleCodeTabs()}),i(5,"span"),e(6),t()(),n(7,"div",3)(8,"po-tabs",4)(9,"po-tab",5)(10,"div")(11,"label",6),e(12,"sample-po-lookup-basic/sample-po-lookup-basic.component.html"),t(),n(13,"pre",7),e(14,`<po-lookup
name="lookup"
p-field-label="label"
p-field-value="value"
p-filter-service="https://po-sample-api.onrender.com/v1/heroes"
p-label="PO Lookup"
>
</po-lookup>
`),t()()(),n(15,"po-tab",8)(16,"div")(17,"label",6),e(18,"sample-po-lookup-basic/sample-po-lookup-basic.component.ts"),t(),n(19,"pre",9),e(20,`import { Component } from '@angular/core';
@Component({
selector: 'sample-po-lookup-basic',
templateUrl: './sample-po-lookup-basic.component.html',
standalone: false
})
export class SamplePoLookupBasicComponent {}
`),t()()()()(),n(21,"div",10),i(22,"sample-po-lookup-basic"),t(),i(23,"hr")),l&2&&(d(5),P("po-icon "+o.sampleCodeButtonIcon),d(),L(" ",o.sampleCodeButtonLabel,""),d(),c("ngClass",F(4,Ge,o.hideSampleCodeTabs)))},dependencies:[w,y,C,k,we],encapsulation:2})}return a})();var T=(()=>{class a{httpClient;url="https://po-sample-api.onrender.com/v1/heroes";constructor(r){this.httpClient=r}getFilteredItems(r){let m=r,{filterParams:l,advancedFilters:o}=m,p=me(m,["filterParams","advancedFilters"]),s=G(G(G({},p),l),o);return this.httpClient.get(this.url,{params:s})}getObjectByValue(r){return this.httpClient.get(`${this.url}/${r}`)}static \u0275fac=function(l){return new(l||a)(V(A))};static \u0275prov=O({token:a,factory:a.\u0275fac,providedIn:"root"})}return a})();var Te=(()=>{class a{sampleFilterService;columns;columnsName;customLiterals;event;fieldFormat;formatField;fieldLabel;fieldValue;filterService;help;label;literals;lookup;placeholder;properties;fieldErrorMessage;advancedFilters;customAdvancedFilters;spacing=ke.Medium;columnsOptions=[{value:"id",label:"Id"},{value:"name",label:"Name"},{value:"email",label:"Email"}];fieldLabelOptions=[{value:"label",label:"Label"},...this.columnsOptions];fieldValueOptions=[{value:"value",label:"Value"},...this.columnsOptions];propertiesOptions=[{value:"clean",label:"Clean"},{value:"disabled",label:"Disabled"},{value:"noAutocomplete",label:"No Autocomplete"},{value:"optional",label:"Optional"},{value:"required",label:"Required"},{value:"showRequired",label:"Show Required"},{value:"infiniteScroll",label:"Infinite Scroll"},{value:"multiple",label:"Multiple"},{value:"autoHeight",label:"Auto Height"},{value:"hideColumnsManager",label:"Hide Columns Manager"},{value:"textWrap",label:"Text Wrap"},{value:"virtualScroll",label:"Virtual Sroll"}];columnsDefinition={id:{property:"id",label:"Id"},name:{property:"name",label:"Name"},email:{property:"email",label:"Email"}};typeSpacing=[{label:"Small",value:"small"},{label:"Medium",value:"medium"},{label:"Large",value:"large"}];constructor(r){this.sampleFilterService=r}ngOnInit(){this.restore()}changeEvent(r){this.event=r}changeLiterals(){try{this.customLiterals=JSON.parse(this.literals)}catch{this.customLiterals=void 0}}onFieldFormatChange(r){try{this.fieldFormat=JSON.parse(r)}catch{this.fieldFormat=void 0}}changeAdvancedFilters(){try{this.customAdvancedFilters=JSON.parse(this.advancedFilters)}catch{this.customAdvancedFilters=void 0}}restore(){this.columnsName=["id","name"],this.customLiterals=void 0,this.updateColumns(),this.fieldLabel="name",this.fieldValue="id",this.fieldFormat=void 0,this.formatField=void 0,this.event=void 0,this.filterService=void 0,this.label=void 0,this.literals=void 0,this.help=void 0,this.lookup=void 0,this.placeholder="",this.properties=[],this.fieldErrorMessage="",this.customAdvancedFilters=[]}updateColumns(){this.columns=[],this.columnsName.forEach(r=>this.columns.push(this.columnsDefinition[r]))}static \u0275fac=function(l){return new(l||a)(f(T))};static \u0275cmp=u({type:a,selectors:[["sample-po-lookup-labs"]],standalone:!1,features:[D([T])],decls:31,vars:45,consts:[["f","ngForm"],["name","lookup",3,"ngModelChange","p-change","p-error","p-selected","ngModel","p-advanced-filters","p-auto-height","p-clean","p-columns","p-disabled","p-field-format","p-field-label","p-filter-service","p-field-value","p-help","p-hide-columns-manager","p-infinite-scroll","p-label","p-literals","p-multiple","p-no-autocomplete","p-optional","p-placeholder","p-required","p-field-error-message","p-show-required","p-spacing","p-text-wrap","p-virtual-scroll"],["p-no-border","true","p-no-padding","true"],[1,"po-row"],["p-label","Model",1,"po-md-12",3,"p-value"],["p-label","Event",1,"po-md-6",3,"p-value"],["name","label","p-clean","","p-label","Label",1,"po-md-6",3,"ngModelChange","ngModel"],["name","columnsName","p-columns","4","p-label","Columns",1,"po-md-6",3,"ngModelChange","p-change","ngModel","p-options"],["name","fieldLabel","p-label","Field Label","p-required","",1,"po-md-6",3,"ngModelChange","ngModel","p-options"],["name","fieldValue","p-label","Field Value","p-required","",1,"po-md-6",3,"ngModelChange","ngModel","p-options"],["name","filterService","p-clean","","p-help","https://po-sample-api.onrender.com/v1/people","p-label","Filter Service",1,"po-md-6",3,"ngModelChange","ngModel"],["name","fieldErrorMessage","p-clean","","p-label","Field Error Message",1,"po-md-6",3,"ngModelChange","ngModel"],["name","help","p-clean","","p-label","Help",1,"po-lg-6",3,"ngModelChange","ngModel"],["name","placeholder","p-clean","","p-label","Placeholder",1,"po-lg-6",3,"ngModelChange","ngModel"],["name","literals","p-help",'Ex.: { "modalTitle": "Select a register", "modalPrimaryActionLabel": "Select", "modalPlaceholder": "Search Value" }',"p-label","Literals",1,"po-lg-6",3,"ngModelChange","p-change","ngModel"],["name","formatField","p-label","Field Format","p-help",'Ex.: ["id", "name"]',1,"po-lg-6",3,"ngModelChange","p-change","ngModel"],["name","properties","p-columns","2","p-label","Properties",1,"po-lg-6",3,"ngModelChange","ngModel","p-options"],["name","spacing","p-label","Spacing",1,"po-lg-6",3,"ngModelChange","ngModel","p-options"],["name","advancedFilters","p-help",'Ex.: [{"property":"name","divider":"PERSONAL DATA","required":true,"gridColumns":6},{"property":"id","optional":true,"gridColumns":6}]',"p-label","Advanced Filters","p-rows","4",1,"po-md-6",3,"ngModelChange","p-change","ngModel"],["p-label","Sample Restore",1,"po-md-3",3,"p-click"]],template:function(l,o){if(l&1){let p=J();n(0,"po-lookup",1),g("ngModelChange",function(m){return E(p),v(o.lookup,m)||(o.lookup=m),S(m)}),x("p-change",function(){return E(p),S(o.changeEvent("p-change"))})("p-error",function(){return E(p),S(o.changeEvent("p-error"))})("p-selected",function(){return E(p),S(o.changeEvent("p-selected"))}),t(),i(1,"hr"),n(2,"po-container",2)(3,"div",3),i(4,"po-info",4)(5,"po-info",5),t()(),i(6,"hr"),n(7,"form",null,0)(9,"div",3)(10,"po-input",6),g("ngModelChange",function(m){return E(p),v(o.label,m)||(o.label=m),S(m)}),t(),n(11,"po-checkbox-group",7),g("ngModelChange",function(m){return E(p),v(o.columnsName,m)||(o.columnsName=m),S(m)}),x("p-change",function(){return E(p),S(o.updateColumns())}),t()(),n(12,"div",3)(13,"po-select",8),g("ngModelChange",function(m){return E(p),v(o.fieldLabel,m)||(o.fieldLabel=m),S(m)}),t(),n(14,"po-select",9),g("ngModelChange",function(m){return E(p),v(o.fieldValue,m)||(o.fieldValue=m),S(m)}),t()(),n(15,"div",3)(16,"po-input",10),g("ngModelChange",function(m){return E(p),v(o.filterService,m)||(o.filterService=m),S(m)}),t(),n(17,"po-input",11),g("ngModelChange",function(m){return E(p),v(o.fieldErrorMessage,m)||(o.fieldErrorMessage=m),S(m)}),t()(),n(18,"div",3)(19,"po-input",12),g("ngModelChange",function(m){return E(p),v(o.help,m)||(o.help=m),S(m)}),t(),n(20,"po-input",13),g("ngModelChange",function(m){return E(p),v(o.placeholder,m)||(o.placeholder=m),S(m)}),t()(),n(21,"div",3)(22,"po-input",14),g("ngModelChange",function(m){return E(p),v(o.literals,m)||(o.literals=m),S(m)}),x("p-change",function(){return E(p),S(o.changeLiterals())}),t(),n(23,"po-input",15),g("ngModelChange",function(m){return E(p),v(o.formatField,m)||(o.formatField=m),S(m)}),x("p-change",function(m){return E(p),S(o.onFieldFormatChange(m))}),t()(),n(24,"div",3)(25,"po-checkbox-group",16),g("ngModelChange",function(m){return E(p),v(o.properties,m)||(o.properties=m),S(m)}),t(),n(26,"po-radio-group",17),g("ngModelChange",function(m){return E(p),v(o.spacing,m)||(o.spacing=m),S(m)}),t()(),n(27,"div",3)(28,"po-textarea",18),g("ngModelChange",function(m){return E(p),v(o.advancedFilters,m)||(o.advancedFilters=m),S(m)}),x("p-change",function(){return E(p),S(o.changeAdvancedFilters())}),t()(),n(29,"div",3)(30,"po-button",19),x("p-click",function(){return E(p),S(o.restore())}),t()()()}l&2&&(b("ngModel",o.lookup),c("p-advanced-filters",o.customAdvancedFilters)("p-auto-height",o.properties.includes("autoHeight"))("p-clean",o.properties.includes("clean"))("p-columns",o.columns)("p-disabled",o.properties.includes("disabled"))("p-field-format",o.fieldFormat)("p-field-label",o.fieldLabel)("p-filter-service",o.filterService||o.sampleFilterService)("p-field-value",o.fieldValue)("p-help",o.help)("p-hide-columns-manager",o.properties.includes("hideColumnsManager"))("p-infinite-scroll",o.properties.includes("infiniteScroll"))("p-label",o.label)("p-literals",o.customLiterals)("p-multiple",o.properties.includes("multiple"))("p-no-autocomplete",o.properties.includes("noAutocomplete"))("p-optional",o.properties.includes("optional"))("p-placeholder",o.placeholder)("p-required",o.properties.includes("required"))("p-field-error-message",o.fieldErrorMessage)("p-show-required",o.properties.includes("showRequired"))("p-spacing",o.spacing)("p-text-wrap",o.properties.includes("textWrap"))("p-virtual-scroll",o.properties.includes("virtualScroll")),d(4),c("p-value",o.lookup),d(),c("p-value",o.event),d(5),b("ngModel",o.label),d(),b("ngModel",o.columnsName),c("p-options",o.columnsOptions),d(2),b("ngModel",o.fieldLabel),c("p-options",o.fieldLabelOptions),d(),b("ngModel",o.fieldValue),c("p-options",o.fieldValueOptions),d(2),b("ngModel",o.filterService),d(),b("ngModel",o.fieldErrorMessage),d(2),b("ngModel",o.help),d(),b("ngModel",o.placeholder),d(2),b("ngModel",o.literals),d(),b("ngModel",o.formatField),d(2),b("ngModel",o.properties),c("p-options",o.propertiesOptions),d(),b("ngModel",o.spacing),c("p-options",o.typeSpacing),d(2),b("ngModel",o.advancedFilters))},dependencies:[N,_,j,I,X,H,K,Ce,Y,ye,M,z,Pe,B],encapsulation:2})}return a})();var Je=a=>({"docs-sample-code-tabs":a}),_e=(()=>{class a{hideSampleCodeTabs=!0;sampleCodeButtonLabel="Talk is cheap, show me the code!";sampleCodeButtonIcon="an an-plus";toggleSampleCodeTabs(){this.hideSampleCodeTabs=!this.hideSampleCodeTabs,this.sampleCodeButtonLabel=this.hideSampleCodeTabs?"Talk is cheap, show me the code!":"Okay, hide the code",this.sampleCodeButtonIcon=this.hideSampleCodeTabs?"an an-plus":"an an-minus"}static \u0275fac=function(l){return new(l||a)};static \u0275cmp=u({type:a,selectors:[["sample-po-lookup-labs-view"]],standalone:!1,decls:28,vars:6,consts:[[1,"sample-blockquote"],[1,"sample-title","po-font-text-large-bold"],[1,"show-me-the-code",3,"click"],[3,"ngClass"],["p-size","2"],["p-label","HTML","p-active",""],[1,"doc-label-path"],["appCodeHighlight","",1,"html"],["p-label","TS"],["appCodeHighlight","",1,"typescript"],[1,"docs-sample-container"]],template:function(l,o){l&1&&(i(0,"br"),n(1,"blockquote",0)(2,"label",1),e(3,"PO Lookup Labs"),t(),n(4,"a",2),x("click",function(){return o.toggleSampleCodeTabs()}),i(5,"span"),e(6),t()(),n(7,"div",3)(8,"po-tabs",4)(9,"po-tab",5)(10,"div")(11,"label",6),e(12,"sample-po-lookup-labs/sample-po-lookup-labs.component.html"),t(),n(13,"pre",7),e(14,`<po-lookup
name="lookup"
[(ngModel)]="lookup"
[p-advanced-filters]="customAdvancedFilters"
[p-auto-height]="properties.includes('autoHeight')"
[p-clean]="properties.includes('clean')"
[p-columns]="columns"
[p-disabled]="properties.includes('disabled')"
[p-field-format]="fieldFormat"
[p-field-label]="fieldLabel"
[p-filter-service]="filterService || sampleFilterService"
[p-field-value]="fieldValue"
[p-help]="help"
[p-hide-columns-manager]="properties.includes('hideColumnsManager')"
[p-infinite-scroll]="properties.includes('infiniteScroll')"
[p-label]="label"
[p-literals]="customLiterals"
[p-multiple]="properties.includes('multiple')"
[p-no-autocomplete]="properties.includes('noAutocomplete')"
[p-optional]="properties.includes('optional')"
[p-placeholder]="placeholder"
[p-required]="properties.includes('required')"
[p-field-error-message]="fieldErrorMessage"
[p-show-required]="properties.includes('showRequired')"
[p-spacing]="spacing"
[p-text-wrap]="properties.includes('textWrap')"
[p-virtual-scroll]="properties.includes('virtualScroll')"
(p-change)="changeEvent('p-change')"
(p-error)="changeEvent('p-error')"
(p-selected)="changeEvent('p-selected')"
>
</po-lookup>
<hr />
<po-container p-no-border="true" p-no-padding="true">
<div class="po-row">
<po-info class="po-md-12" p-label="Model" [p-value]="lookup"> </po-info>
<po-info class="po-md-6" p-label="Event" [p-value]="event"> </po-info>
</div>
</po-container>
<hr />
<form #f="ngForm">
<div class="po-row">
<po-input class="po-md-6" name="label" [(ngModel)]="label" p-clean p-label="Label"> </po-input>
<po-checkbox-group
class="po-md-6"
name="columnsName"
[(ngModel)]="columnsName"
p-columns="4"
p-label="Columns"
[p-options]="columnsOptions"
(p-change)="updateColumns()"
>
</po-checkbox-group>
</div>
<div class="po-row">
<po-select
class="po-md-6"
name="fieldLabel"
[(ngModel)]="fieldLabel"
p-label="Field Label"
p-required
[p-options]="fieldLabelOptions"
>
</po-select>
<po-select
class="po-md-6"
name="fieldValue"
[(ngModel)]="fieldValue"
p-label="Field Value"
p-required
[p-options]="fieldValueOptions"
>
</po-select>
</div>
<div class="po-row">
<po-input
class="po-md-6"
name="filterService"
[(ngModel)]="filterService"
p-clean
p-help="https://po-sample-api.onrender.com/v1/people"
p-label="Filter Service"
>
</po-input>
<po-input
class="po-md-6"
name="fieldErrorMessage"
[(ngModel)]="fieldErrorMessage"
p-clean
p-label="Field Error Message"
>
</po-input>
</div>
<div class="po-row">
<po-input class="po-lg-6" name="help" [(ngModel)]="help" p-clean p-label="Help"> </po-input>
<po-input class="po-lg-6" name="placeholder" [(ngModel)]="placeholder" p-clean p-label="Placeholder"> </po-input>
</div>
<div class="po-row">
<po-input
class="po-lg-6"
name="literals"
[(ngModel)]="literals"
p-help='Ex.: { "modalTitle": "Select a register", "modalPrimaryActionLabel": "Select", "modalPlaceholder": "Search Value" }'
p-label="Literals"
(p-change)="changeLiterals()"
>
</po-input>
<po-input
name="formatField"
[(ngModel)]="formatField"
class="po-lg-6"
p-label="Field Format"
p-help='Ex.: ["id", "name"]'
(p-change)="onFieldFormatChange($event)"
>
</po-input>
</div>
<div class="po-row">
<po-checkbox-group
class="po-lg-6"
name="properties"
[(ngModel)]="properties"
p-columns="2"
p-label="Properties"
[p-options]="propertiesOptions"
>
</po-checkbox-group>
<po-radio-group class="po-lg-6" name="spacing" [(ngModel)]="spacing" p-label="Spacing" [p-options]="typeSpacing">
</po-radio-group>
</div>
<div class="po-row">
<po-textarea
class="po-md-6"
name="advancedFilters"
[(ngModel)]="advancedFilters"
(p-change)="changeAdvancedFilters()"
p-help='Ex.: [{"property":"name","divider":"PERSONAL DATA","required":true,"gridColumns":6},{"property":"id","optional":true,"gridColumns":6}]'
p-label="Advanced Filters"
p-rows="4"
>
</po-textarea>
</div>
<div class="po-row">
<po-button class="po-md-3" p-label="Sample Restore" (p-click)="restore()"> </po-button>
</div>
</form>
`),t()()(),n(15,"po-tab",8)(16,"div")(17,"label",6),e(18,"sample-po-lookup-labs/sample-po-lookup-labs.component.ts"),t(),n(19,"pre",9),e(20,`import { Component, OnInit } from '@angular/core';
import {
PoCheckboxGroupOption,
PoLookupColumn,
PoLookupFilter,
PoLookupLiterals,
PoDynamicFormField,
PoSelectOption,
PoTableColumnSpacing,
PoRadioGroupOption
} from '@po-ui/ng-components';
import { SamplePoLookupService } from '../sample-po-lookup.service';
@Component({
selector: 'sample-po-lookup-labs',
templateUrl: './sample-po-lookup-labs.component.html',
providers: [SamplePoLookupService],
standalone: false
})
export class SamplePoLookupLabsComponent implements OnInit {
columns: Array<PoLookupColumn>;
columnsName: Array<string>;
customLiterals: PoLookupLiterals;
event: string;
fieldFormat: Array<string>;
formatField: string;
fieldLabel: string;
fieldValue: string;
filterService: PoLookupFilter | string;
help: string;
label: string;
literals: string;
lookup: any;
placeholder: string;
properties: Array<string>;
fieldErrorMessage: string;
advancedFilters: string;
customAdvancedFilters: Array<PoDynamicFormField>;
spacing: PoTableColumnSpacing = PoTableColumnSpacing.Medium;
public readonly columnsOptions: Array<PoCheckboxGroupOption> = [
{ value: 'id', label: 'Id' },
{ value: 'name', label: 'Name' },
{ value: 'email', label: 'Email' }
];
public readonly fieldLabelOptions: Array<PoSelectOption> = [
{ value: 'label', label: 'Label' },
...this.columnsOptions
];
public readonly fieldValueOptions: Array<PoSelectOption> = [
{ value: 'value', label: 'Value' },
...this.columnsOptions
];
public readonly propertiesOptions: Array<PoCheckboxGroupOption> = [
{ value: 'clean', label: 'Clean' },
{ value: 'disabled', label: 'Disabled' },
{ value: 'noAutocomplete', label: 'No Autocomplete' },
{ value: 'optional', label: 'Optional' },
{ value: 'required', label: 'Required' },
{ value: 'showRequired', label: 'Show Required' },
{ value: 'infiniteScroll', label: 'Infinite Scroll' },
{ value: 'multiple', label: 'Multiple' },
{ value: 'autoHeight', label: 'Auto Height' },
{ value: 'hideColumnsManager', label: 'Hide Columns Manager' },
{ value: 'textWrap', label: 'Text Wrap' },
{ value: 'virtualScroll', label: 'Virtual Sroll' }
];
private readonly columnsDefinition = {
id: <PoLookupColumn>{ property: 'id', label: 'Id' },
name: <PoLookupColumn>{ property: 'name', label: 'Name' },
email: <PoLookupColumn>{ property: 'email', label: 'Email' }
};
public readonly typeSpacing: Array<PoRadioGroupOption> = [
{ label: 'Small', value: 'small' },
{ label: 'Medium', value: 'medium' },
{ label: 'Large', value: 'large' }
];
constructor(public sampleFilterService: SamplePoLookupService) {}
ngOnInit(): void {
this.restore();
}
changeEvent(event: string) {
this.event = event;
}
changeLiterals() {
try {
this.customLiterals = JSON.parse(this.literals);
} catch {
this.customLiterals = undefined;
}
}
onFieldFormatChange(event) {
try {
this.fieldFormat = JSON.parse(event);
} catch {
this.fieldFormat = undefined;
}
}
changeAdvancedFilters() {
try {
this.customAdvancedFilters = JSON.parse(this.advancedFilters);
} catch {
this.customAdvancedFilters = undefined;
}
}
restore() {
this.columnsName = ['id', 'name'];
this.customLiterals = undefined;
this.updateColumns();
this.fieldLabel = 'name';
this.fieldValue = 'id';
this.fieldFormat = undefined;
this.formatField = undefined;
this.event = undefined;
this.filterService = undefined;
this.label = undefined;
this.literals = undefined;
this.help = undefined;
this.lookup = undefined;
this.placeholder = '';
this.properties = [];
this.fieldErrorMessage = '';
this.customAdvancedFilters = [];
}
updateColumns() {
this.columns = [];
this.columnsName.forEach(column => this.columns.push(this.columnsDefinition[column]));
}
}
`),t(),n(21,"label",6),e(22,"sample-po-lookup.service.ts"),t(),n(23,"pre",9),e(24,`import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { PoLookupFilter, PoLookupFilteredItemsParams } from '@po-ui/ng-components';
@Injectable({
providedIn: 'root'
})
export class SamplePoLookupService implements PoLookupFilter {
private url = 'https://po-sample-api.onrender.com/v1/heroes';
constructor(private httpClient: HttpClient) {}
getFilteredItems(filteredParams: PoLookupFilteredItemsParams): Observable<any> {
const { filterParams, advancedFilters, ...restFilteredItemsParams } = filteredParams;
const params = { ...restFilteredItemsParams, ...filterParams, ...advancedFilters };
return this.httpClient.get(this.url, { params });
}
getObjectByValue(value: string): Observable<any> {
return this.httpClient.get(\`\${this.url}/\${value}\`);
}
}
`),t()()()()(),n(25,"div",10),i(26,"sample-po-lookup-labs"),t(),i(27,"hr")),l&2&&(d(5),P("po-icon "+o.sampleCodeButtonIcon),d(),L(" ",o.sampleCodeButtonLabel,""),d(),c("ngClass",F(4,Je,o.hideSampleCodeTabs)))},dependencies:[w,y,C,k,Te],encapsulation:2})}return a})();var Ke=()=>({modalTitle:"Heroes available for mission"}),De=(()=>{class a{service;notification;hero;vehicle;columns=[{property:"nickname",label:"Hero"},{property:"name",label:"Name"}];vehicles=[{label:"Airplane",value:"airplane"},{label:"Boat",value:"boat"},{label:"Car",value:"car"},{label:"Helicopter",value:"helicopter"},{label:"Motorcycle",value:"motorcycle"},{label:"Rocket",value:"rocket"},{label:"Spaceship",value:"spaceship"},{label:"Submarine",value:"submarine"},{label:"Truck",value:"truck"}];advancedFilters=[{property:"nickname",divider:"Hero Informations",optional:!0,gridColumns:6,label:"Hero"},{property:"name",optional:!0,gridColumns:6}];constructor(r,l){this.service=r,this.notification=l}fieldFormat(r){return`${r.nickname} - ${r.label}`}startMission(){this.hero.length%2===0?this.notification.success(`Mission started with hero ${this.hero} ${this.vehicle?"with vehicle: "+this.vehicle:""}.`):this.notification.error(`Choose another hero because ${this.hero} is in other mission.`),this.hero=void 0,this.vehicle=void 0}static \u0275fac=function(l){return new(l||a)(f(T),f(Z))};static \u0275cmp=u({type:a,selectors:[["sample-po-lookup-hero"]],standalone:!1,features:[D([T])],decls:10,vars:11,consts:[["f","ngForm"],[1,"po-row"],["p-label","New mission found","p-value","Objective: Stop an asteroid collision on Earth",1,"po-lg-6"],["name","hero","p-field-label","label","p-field-value","label","p-help","Select hero for mission","p-label","Hero","p-required","",1,"po-md-6",3,"ngModelChange","ngModel","p-columns","p-field-format","p-filter-service","p-hide-columns-manager","p-advanced-filters","p-literals"],["name","vehicle","p-help","Select a vehicle for the hero","p-label","Vehicle","p-placeholder","None",1,"po-md-6",3,"ngModelChange","ngModel","p-options"],["p-label","Start Mission",1,"po-md-6",3,"p-click","p-disabled"]],template:function(l,o){if(l&1){let p=J();n(0,"div",1),i(1,"po-info",2),t(),i(2,"hr"),n(3,"form",null,0)(5,"div",1)(6,"po-lookup",3),g("ngModelChange",function(m){return E(p),v(o.hero,m)||(o.hero=m),S(m)}),t(),n(7,"po-select",4),g("ngModelChange",function(m){return E(p),v(o.vehicle,m)||(o.vehicle=m),S(m)}),t()(),n(8,"div",1)(9,"po-button",5),x("p-click",function(){return E(p),S(o.startMission())}),t()()()}if(l&2){let p=ce(4);d(6),b("ngModel",o.hero),c("p-columns",o.columns)("p-field-format",o.fieldFormat)("p-filter-service",o.service)("p-hide-columns-manager",!0)("p-advanced-filters",o.advancedFilters)("p-literals",U(10,Ke)),d(),b("ngModel",o.vehicle),c("p-options",o.vehicles),d(2),c("p-disabled",p.form.invalid||p.form.pending)}},dependencies:[N,_,j,I,X,H,M,z,B],encapsulation:2})}return a})();var Ze=a=>({"docs-sample-code-tabs":a}),Ie=(()=>{class a{hideSampleCodeTabs=!0;sampleCodeButtonLabel="Talk is cheap, show me the code!";sampleCodeButtonIcon="an an-plus";toggleSampleCodeTabs(){this.hideSampleCodeTabs=!this.hideSampleCodeTabs,this.sampleCodeButtonLabel=this.hideSampleCodeTabs?"Talk is cheap, show me the code!":"Okay, hide the code",this.sampleCodeButtonIcon=this.hideSampleCodeTabs?"an an-plus":"an an-minus"}static \u0275fac=function(l){return new(l||a)};static \u0275cmp=u({type:a,selectors:[["sample-po-lookup-hero-view"]],standalone:!1,decls:28,vars:6,consts:[[1,"sample-blockquote"],[1,"sample-title","po-font-text-large-bold"],[1,"show-me-the-code",3,"click"],[3,"ngClass"],["p-size","2"],["p-label","HTML","p-active",""],[1,"doc-label-path"],["appCodeHighlight","",1,"html"],["p-label","TS"],["appCodeHighlight","",1,"typescript"],[1,"docs-sample-container"]],template:function(l,o){l&1&&(i(0,"br"),n(1,"blockquote",0)(2,"label",1),e(3,"PO Lookup - Hero"),t(),n(4,"a",2),x("click",function(){return o.toggleSampleCodeTabs()}),i(5,"span"),e(6),t()(),n(7,"div",3)(8,"po-tabs",4)(9,"po-tab",5)(10,"div")(11,"label",6),e(12,"sample-po-lookup-hero/sample-po-lookup-hero.component.html"),t(),n(13,"pre",7),e(14,`<div class="po-row">
<po-info class="po-lg-6" p-label="New mission found" p-value="Objective: Stop an asteroid collision on Earth">
</po-info>
</div>
<hr />
<form #f="ngForm">
<div class="po-row">
<po-lookup
class="po-md-6"
name="hero"
[(ngModel)]="hero"
p-field-label="label"
p-field-value="label"
p-help="Select hero for mission"
p-label="Hero"
p-required
[p-columns]="columns"
[p-field-format]="fieldFormat"
[p-filter-service]="service"
[p-hide-columns-manager]="true"
[p-advanced-filters]="advancedFilters"
[p-literals]="{ 'modalTitle': 'Heroes available for mission' }"
>
</po-lookup>
<po-select
class="po-md-6"
name="vehicle"
[(ngModel)]="vehicle"
p-help="Select a vehicle for the hero"
p-label="Vehicle"
p-placeholder="None"
[p-options]="vehicles"
>
</po-select>
</div>
<div class="po-row">
<po-button
class="po-md-6"
p-label="Start Mission"
[p-disabled]="f.form.invalid || f.form.pending"
(p-click)="startMission()"
>
</po-button>
</div>
</form>
`),t()()(),n(15,"po-tab",8)(16,"div")(17,"label",6),e(18,"sample-po-lookup-hero/sample-po-lookup-hero.component.ts"),t(),n(19,"pre",9),e(20,`import { Component } from '@angular/core';
import { PoLookupColumn, PoSelectOption } from '@po-ui/ng-components';
import { PoNotificationService, PoDynamicFormField } from '@po-ui/ng-components';
import { SamplePoLookupService } from '../sample-po-lookup.service';
@Component({
selector: 'sample-po-lookup-hero',
templateUrl: './sample-po-lookup-hero.component.html',
providers: [SamplePoLookupService],
standalone: false
})
export class SamplePoLookupHeroComponent {
hero: string;
vehicle: string;
public readonly columns: Array<PoLookupColumn> = [
{ property: 'nickname', label: 'Hero' },
{ property: 'name', label: 'Name' }
];
public readonly vehicles: Array<PoSelectOption> = [
{ label: 'Airplane', value: 'airplane' },
{ label: 'Boat', value: 'boat' },
{ label: 'Car', value: 'car' },
{ label: 'Helicopter', value: 'helicopter' },
{ label: 'Motorcycle', value: 'motorcycle' },
{ label: 'Rocket', value: 'rocket' },
{ label: 'Spaceship', value: 'spaceship' },
{ label: 'Submarine', value: 'submarine' },
{ label: 'Truck', value: 'truck' }
];
advancedFilters: Array<PoDynamicFormField> = [
{ property: 'nickname', divider: 'Hero Informations', optional: true, gridColumns: 6, label: 'Hero' },
{ property: 'name', optional: true, gridColumns: 6 }
];
constructor(
public service: SamplePoLookupService,
public notification: PoNotificationService
) {}
fieldFormat(value) {
return \`\${value.nickname} - \${value.label}\`;
}
startMission() {
if (this.hero.length % 2 === 0) {
this.notification.success(
\`Mission started with hero \${this.hero} \${this.vehicle ? 'with vehicle: ' + this.vehicle : ''}.\`
);
} else {
this.notification.error(\`Choose another hero because \${this.hero} is in other mission.\`);
}
this.hero = undefined;
this.vehicle = undefined;
}
}
`),t(),n(21,"label",6),e(22,"sample-po-lookup.service.ts"),t(),n(23,"pre",9),e(24,`import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { PoLookupFilter, PoLookupFilteredItemsParams } from '@po-ui/ng-components';
@Injectable({
providedIn: 'root'
})
export class SamplePoLookupService implements PoLookupFilter {
private url = 'https://po-sample-api.onrender.com/v1/heroes';
constructor(private httpClient: HttpClient) {}
getFilteredItems(filteredParams: PoLookupFilteredItemsParams): Observable<any> {
const { filterParams, advancedFilters, ...restFilteredItemsParams } = filteredParams;
const params = { ...restFilteredItemsParams, ...filterParams, ...advancedFilters };
return this.httpClient.get(this.url, { params });
}
getObjectByValue(value: string): Observable<any> {
return this.httpClient.get(\`\${this.url}/\${value}\`);
}
}
`),t()()()()(),n(25,"div",10),i(26,"sample-po-lookup-hero"),t(),i(27,"hr")),l&2&&(d(5),P("po-icon "+o.sampleCodeButtonIcon),d(),L(" ",o.sampleCodeButtonLabel,""),d(),c("ngClass",F(4,Ze,o.hideSampleCodeTabs)))},dependencies:[w,y,C,k,De],encapsulation:2})}return a})();var tt=()=>["nickname","label"],nt=()=>({modalTitle:"Heroes available for mission"}),Oe=(()=>{class a{service;notification;formBuilder;formMission;columns=[{property:"nickname",label:"Hero"},{property:"name",label:"Name"}];vehicles=[{label:"Airplane",value:"airplane"},{label:"Boat",value:"boat"},{label:"Car",value:"car"},{label:"Helicopter",value:"helicopter"},{label:"Motorcycle",value:"motorcycle"},{label:"Rocket",value:"rocket"},{label:"Spaceship",value:"spaceship"},{label:"Submarine",value:"submarine"},{label:"Truck",value:"truck"}];constructor(r,l,o){this.service=r,this.notification=l,this.formBuilder=o}ngOnInit(){this.formMission=this.formBuilder.group({hero:[null,ae.required],vehicle:[null,ae.required]})}fieldFormat(r){return`${r.nickname} - ${r.label}`}startMission(){let r=this.formMission.get("hero").value,l=this.formMission.get("vehicle").value;r.length%2===0?this.notification.success(`Mission started with hero ${r} ${l?"with vehicle: "+l:""}.`):this.notification.error(`Choose another hero because ${r} is in other mission.`),this.formMission.reset()}static \u0275fac=function(l){return new(l||a)(f(T),f(Z),f(ge))};static \u0275cmp=u({type:a,selectors:[["sample-po-lookup-hero-reactive-form"]],standalone:!1,features:[D([T])],decls:9,vars:9,consts:[[1,"po-row"],["p-label","New mission found","p-value","Objective: Stop an asteroid collision on Earth",1,"po-lg-6"],[3,"formGroup"],["name","hero","formControlName","hero","p-field-label","label","p-field-value","label","p-help","Select hero for mission","p-label","Hero","p-required","",1,"po-md-6",3,"p-columns","p-field-format","p-filter-service","p-literals"],["name","vehicle","formControlName","vehicle","p-help","Select a vehicle for the hero","p-label","Vehicle","p-placeholder","None",1,"po-md-6",3,"p-options"],["p-label","Start Mission",1,"po-md-6",3,"p-click","p-disabled"]],template:function(l,o){l&1&&(n(0,"div",0),i(1,"po-info",1),t(),i(2,"hr"),n(3,"form",2)(4,"div",0),i(5,"po-lookup",3)(6,"po-select",4),t(),n(7,"div",0)(8,"po-button",5),x("p-click",function(){return o.startMission()}),t()()()),l&2&&(d(3),c("formGroup",o.formMission),d(2),c("p-columns",o.columns)("p-field-format",U(7,tt))("p-filter-service",o.service)("p-literals",U(8,nt)),d(),c("p-options",o.vehicles),d(2),c("p-disabled",o.formMission.invalid||o.formMission.pending))},dependencies:[N,_,j,be,ve,H,M,z,B],encapsulation:2})}return a})();var ot=a=>({"docs-sample-code-tabs":a}),Ve=(()=>{class a{hideSampleCodeTabs=!0;sampleCodeButtonLabel="Talk is cheap, show me the code!";sampleCodeButtonIcon="an an-plus";toggleSampleCodeTabs(){this.hideSampleCodeTabs=!this.hideSampleCodeTabs,this.sampleCodeButtonLabel=this.hideSampleCodeTabs?"Talk is cheap, show me the code!":"Okay, hide the code",this.sampleCodeButtonIcon=this.hideSampleCodeTabs?"an an-plus":"an an-minus"}static \u0275fac=function(l){return new(l||a)};static \u0275cmp=u({type:a,selectors:[["sample-po-lookup-hero-reactive-form-view"]],standalone:!1,decls:28,vars:6,consts:[[1,"sample-blockquote"],[1,"sample-title","po-font-text-large-bold"],[1,"show-me-the-code",3,"click"],[3,"ngClass"],["p-size","2"],["p-label","HTML","p-active",""],[1,"doc-label-path"],["appCodeHighlight","",1,"html"],["p-label","TS"],["appCodeHighlight","",1,"typescript"],[1,"docs-sample-container"]],template:function(l,o){l&1&&(i(0,"br"),n(1,"blockquote",0)(2,"label",1),e(3,"PO Lookup - Hero Reactive Form"),t(),n(4,"a",2),x("click",function(){return o.toggleSampleCodeTabs()}),i(5,"span"),e(6),t()(),n(7,"div",3)(8,"po-tabs",4)(9,"po-tab",5)(10,"div")(11,"label",6),e(12,"sample-po-lookup-hero-reactive-form/sample-po-lookup-hero-reactive-form.component.html"),t(),n(13,"pre",7),e(14,`<div class="po-row">
<po-info class="po-lg-6" p-label="New mission found" p-value="Objective: Stop an asteroid collision on Earth">
</po-info>
</div>
<hr />
<form [formGroup]="formMission">
<div class="po-row">
<po-lookup
class="po-md-6"
name="hero"
formControlName="hero"
p-field-label="label"
p-field-value="label"
p-help="Select hero for mission"
p-label="Hero"
p-required
[p-columns]="columns"
[p-field-format]="['nickname', 'label']"
[p-filter-service]="service"
[p-literals]="{ 'modalTitle': 'Heroes available for mission' }"
>
</po-lookup>
<po-select
class="po-md-6"
name="vehicle"
formControlName="vehicle"
p-help="Select a vehicle for the hero"
p-label="Vehicle"
p-placeholder="None"
[p-options]="vehicles"
>
</po-select>
</div>
<div class="po-row">
<po-button
class="po-md-6"
p-label="Start Mission"
[p-disabled]="formMission.invalid || formMission.pending"
(p-click)="startMission()"
>
</po-button>
</div>
</form>
`),t()()(),n(15,"po-tab",8)(16,"div")(17,"label",6),e(18,"sample-po-lookup-hero-reactive-form/sample-po-lookup-hero-reactive-form.component.ts"),t(),n(19,"pre",9),e(20,`import { Component, OnInit } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { PoLookupColumn, PoSelectOption } from '@po-ui/ng-components';
import { PoNotificationService } from '@po-ui/ng-components';
import { SamplePoLookupService } from '../sample-po-lookup.service';
@Component({
selector: 'sample-po-lookup-hero-reactive-form',
templateUrl: './sample-po-lookup-hero-reactive-form.component.html',
providers: [SamplePoLookupService],
standalone: false
})
export class SamplePoLookupHeroReactiveFormComponent implements OnInit {
formMission: UntypedFormGroup;
public readonly columns: Array<PoLookupColumn> = [
{ property: 'nickname', label: 'Hero' },
{ property: 'name', label: 'Name' }
];
public readonly vehicles: Array<PoSelectOption> = [
{ label: 'Airplane', value: 'airplane' },
{ label: 'Boat', value: 'boat' },
{ label: 'Car', value: 'car' },
{ label: 'Helicopter', value: 'helicopter' },
{ label: 'Motorcycle', value: 'motorcycle' },
{ label: 'Rocket', value: 'rocket' },
{ label: 'Spaceship', value: 'spaceship' },
{ label: 'Submarine', value: 'submarine' },
{ label: 'Truck', value: 'truck' }
];
constructor(
public service: SamplePoLookupService,
public notification: PoNotificationService,
private formBuilder: UntypedFormBuilder
) {}
ngOnInit(): void {
this.formMission = this.formBuilder.group({
hero: [null, Validators.required],
vehicle: [null, Validators.required]
});
}
fieldFormat(value) {
return \`\${value.nickname} - \${value.label}\`;
}
startMission() {
const heroName = this.formMission.get('hero').value;
const heroVehicle = this.formMission.get('vehicle').value;
if (heroName.length % 2 === 0) {
this.notification.success(
\`Mission started with hero \${heroName} \${heroVehicle ? 'with vehicle: ' + heroVehicle : ''}.\`
);
} else {
this.notification.error(\`Choose another hero because \${heroName} is in other mission.\`);
}
this.formMission.reset();
}
}
`),t(),n(21,"label",6),e(22,"sample-po-lookup.service.ts"),t(),n(23,"pre",9),e(24,`import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { PoLookupFilter, PoLookupFilteredItemsParams } from '@po-ui/ng-components';
@Injectable({
providedIn: 'root'
})
export class SamplePoLookupService implements PoLookupFilter {
private url = 'https://po-sample-api.onrender.com/v1/heroes';
constructor(private httpClient: HttpClient) {}
getFilteredItems(filteredParams: PoLookupFilteredItemsParams): Observable<any> {
const { filterParams, advancedFilters, ...restFilteredItemsParams } = filteredParams;
const params = { ...restFilteredItemsParams, ...filterParams, ...advancedFilters };
return this.httpClient.get(this.url, { params });
}
getObjectByValue(value: string): Observable<any> {
return this.httpClient.get(\`\${this.url}/\${value}\`);
}
}
`),t()()()()(),n(25,"div",10),i(26,"sample-po-lookup-hero-reactive-form"),t(),i(27,"hr")),l&2&&(d(5),P("po-icon "+o.sampleCodeButtonIcon),d(),L(" ",o.sampleCodeButtonLabel,""),d(),c("ngClass",F(4,ot,o.hideSampleCodeTabs)))},dependencies:[w,y,C,k,Oe],encapsulation:2})}return a})();var ne=(()=>{class a{http;baseUrl="https://swapi.dev/api";filmsUrl="https://swapi.dev/api/films/";constructor(r){this.http=r}getFilms(){return this.http.get(this.filmsUrl)}getFilteredItems({filter:r,page:l,filterParams:o}){let p={page:l.toString()};return r&&(p.search=r),this.http.get(`${this.baseUrl}/${o}`,{params:p}).pipe(ie(s=>({items:s.results,hasNext:!!s.next})))}getObjectByValue(r,l){return this.http.get(`${this.baseUrl}/${l}/?search=${r}`).pipe(ie(o=>o.results[0]))}static \u0275fac=function(l){return new(l||a)(V(A))};static \u0275prov=O({token:a,factory:a.\u0275fac,providedIn:"root"})}return a})();function rt(a,bt){if(a&1&&(n(0,"div",0),i(1,"po-table",4),t()),a&2){let r=se();d(),c("p-columns",r.filmColumns)("p-items",r.filmItemsFiltered)("p-sort",!0)("p-hide-table-search",!1)}}var Ae=(()=>{class a{filterService;entity;filmItemsFiltered;filterParams="people";characterColumns=[{property:"name",label:"Name"},{property:"gender",label:"Gender"},{property:"height",label:"Height"},{property:"mass",label:"Mass"}];entities=[{label:"Character",value:"people"},{label:"Planet",value:"planets"},{label:"Starship",value:"starships"}];filmColumns=[{property:"episode_id",label:"Episode id"},{property:"title",label:"Title"},{property:"director",label:"Director"},{property:"producer",label:"Producer"},{property:"release_date",label:"Release date",type:"date"}];planetsColumns=[{property:"name",label:"Name"},{property:"diameter",label:"Diameter"},{property:"population",label:"Population"},{property:"climate",label:"Climate"}];starshipsColumns=[{property:"name",label:"Name"},{property:"passengers",label:"Passengers"},{property:"max_atmosphering_speed",label:"Max Speed"},{property:"consumables",label:"Consumables"}];filmItems;constructor(r){this.filterService=r}get entityColumns(){return this.getEntityColumns(this.filterParams)}get entityLabel(){return this.getLabelOfEntity(this.filterParams)}ngOnInit(){this.filterService.getFilms().subscribe(r=>{this.filmItems=r.results})}onSelected(r){this.filterService.getObjectByValue(r.name,this.filterParams).subscribe(l=>{this.filmItemsFiltered=this.filmItems.filter(o=>l?.films.includes(o.url))},l=>console.error(l))}getEntityColumns(r){switch(r){case"people":return this.characterColumns;case"planets":return this.planetsColumns;case"starships":return this.starshipsColumns}}getLabelOfEntity(r){switch(r){case"people":return"character";case"planets":return"planet";case"starships":return"starship"}}static \u0275fac=function(l){return new(l||a)(f(ne))};static \u0275cmp=u({type:a,selectors:[["sample-po-lookup-sw-films"]],standalone:!1,features:[D([ne])],decls:7,vars:14,consts:[[1,"po-row"],["name","filterParams","p-label","Choose the entity of SW to search",1,"po-md-12",3,"ngModelChange","ngModel","p-options"],["name","entity","p-field-label","name","p-field-value","name",1,"po-md-12",3,"ngModelChange","p-selected","ngModel","p-help","p-label","p-columns","p-filter-params","p-filter-service","p-infinite-scroll"],["class","po-row",4,"ngIf"],[1,"po-sm-12",3,"p-columns","p-items","p-sort","p-hide-table-search"]],template:function(l,o){l&1&&(n(0,"div",0)(1,"po-radio-group",1),g("ngModelChange",function(s){return v(o.filterParams,s)||(o.filterParams=s),s}),t()(),i(2,"hr"),n(3,"div",0)(4,"po-lookup",2),ue(5,"titlecase"),g("ngModelChange",function(s){return v(o.entity,s)||(o.entity=s),s}),x("p-selected",function(s){return o.onSelected(s)}),t()(),pe(6,rt,2,4,"div",3)),l&2&&(d(),b("ngModel",o.filterParams),c("p-options",o.entities),d(3),oe("p-help","Select a ",o.entityLabel," to see the list of movies in which it participated"),oe("p-label","",Ee(5,12,o.entityLabel)," of Star Wars"),b("ngModel",o.entity),c("p-columns",o.entityColumns)("p-filter-params",o.filterParams)("p-filter-service",o.filterService)("p-infinite-scroll",!0),d(2),c("ngIf",o.filmItemsFiltered&&o.entity))},dependencies:[Se,_,I,Y,M,ee,xe],encapsulation:2})}return a})();var dt=a=>({"docs-sample-code-tabs":a}),je=(()=>{class a{hideSampleCodeTabs=!0;sampleCodeButtonLabel="Talk is cheap, show me the code!";sampleCodeButtonIcon="an an-plus";toggleSampleCodeTabs(){this.hideSampleCodeTabs=!this.hideSampleCodeTabs,this.sampleCodeButtonLabel=this.hideSampleCodeTabs?"Talk is cheap, show me the code!":"Okay, hide the code",this.sampleCodeButtonIcon=this.hideSampleCodeTabs?"an an-plus":"an an-minus"}static \u0275fac=function(l){return new(l||a)};static \u0275cmp=u({type:a,selectors:[["sample-po-lookup-sw-films-view"]],standalone:!1,decls:28,vars:6,consts:[[1,"sample-blockquote"],[1,"sample-title","po-font-text-large-bold"],[1,"show-me-the-code",3,"click"],[3,"ngClass"],["p-size","2"],["p-label","HTML","p-active",""],[1,"doc-label-path"],["appCodeHighlight","",1,"html"],["p-label","TS"],["appCodeHighlight","",1,"typescript"],[1,"docs-sample-container"]],template:function(l,o){l&1&&(i(0,"br"),n(1,"blockquote",0)(2,"label",1),e(3,"PO Lookup - Star Wars films"),t(),n(4,"a",2),x("click",function(){return o.toggleSampleCodeTabs()}),i(5,"span"),e(6),t()(),n(7,"div",3)(8,"po-tabs",4)(9,"po-tab",5)(10,"div")(11,"label",6),e(12,"sample-po-lookup-sw-films/sample-po-lookup-sw-films.component.html"),t(),n(13,"pre",7),e(14,`<div class="po-row">
<po-radio-group
class="po-md-12"
name="filterParams"
[(ngModel)]="filterParams"
p-label="Choose the entity of SW to search"
[p-options]="entities"
>
</po-radio-group>
</div>
<hr />
<div class="po-row">
<po-lookup
class="po-md-12"
name="entity"
[(ngModel)]="entity"
p-field-label="name"
p-field-value="name"
p-help="Select a { { entityLabel }} to see the list of movies in which it participated"
p-label="{ { entityLabel | titlecase }} of Star Wars"
[p-columns]="entityColumns"
[p-filter-params]="filterParams"
[p-filter-service]="filterService"
[p-infinite-scroll]="true"
(p-selected)="onSelected($event)"
>
</po-lookup>
</div>
<div class="po-row" *ngIf="filmItemsFiltered && entity">
<po-table
class="po-sm-12"
[p-columns]="filmColumns"
[p-items]="filmItemsFiltered"
[p-sort]="true"
[p-hide-table-search]="false"
>
</po-table>
</div>
`),t()()(),n(15,"po-tab",8)(16,"div")(17,"label",6),e(18,"sample-po-lookup-sw-films/sample-po-lookup-sw-films.component.ts"),t(),n(19,"pre",9),e(20,`import { Component, OnInit } from '@angular/core';
import { PoRadioGroupOption } from '@po-ui/ng-components';
import { SamplePoLookupSwFilmsService } from './sample-po-lookup-sw-films.service';
@Component({
selector: 'sample-po-lookup-sw-films',
templateUrl: './sample-po-lookup-sw-films.component.html',
providers: [SamplePoLookupSwFilmsService],
standalone: false
})
export class SamplePoLookupSwFilmsComponent implements OnInit {
entity;
filmItemsFiltered;
filterParams = 'people';
readonly characterColumns = [
{ property: 'name', label: 'Name' },
{ property: 'gender', label: 'Gender' },
{ property: 'height', label: 'Height' },
{ property: 'mass', label: 'Mass' }
];
readonly entities: Array<PoRadioGroupOption> = [
{ label: 'Character', value: 'people' },
{ label: 'Planet', value: 'planets' },
{ label: 'Starship', value: 'starships' }
];
readonly filmColumns = [
{ property: 'episode_id', label: 'Episode id' },
{ property: 'title', label: 'Title' },
{ property: 'director', label: 'Director' },
{ property: 'producer', label: 'Producer' },
{ property: 'release_date', label: 'Release date', type: 'date' }
];
readonly planetsColumns = [
{ property: 'name', label: 'Name' },
{ property: 'diameter', label: 'Diameter' },
{ property: 'population', label: 'Population' },
{ property: 'climate', label: 'Climate' }
];
readonly starshipsColumns = [
{ property: 'name', label: 'Name' },
{ property: 'passengers', label: 'Passengers' },
{ property: 'max_atmosphering_speed', label: 'Max Speed' },
{ property: 'consumables', label: 'Consumables' }
];
private filmItems;
constructor(public filterService: SamplePoLookupSwFilmsService) {}
get entityColumns() {
return this.getEntityColumns(this.filterParams);
}
get entityLabel() {
return this.getLabelOfEntity(this.filterParams);
}
ngOnInit() {
this.filterService.getFilms().subscribe((films: { results: Array<any> }) => {
this.filmItems = films.results;
});
}
onSelected(entity) {
this.filterService.getObjectByValue(entity.name, this.filterParams).subscribe(
result => {
this.filmItemsFiltered = this.filmItems.filter(film => result?.films.includes(film.url));
},
err => console.error(err)
);
}
private getEntityColumns(entity) {
switch (entity) {
case 'people':
return this.characterColumns;
case 'planets':
return this.planetsColumns;
case 'starships':
return this.starshipsColumns;
}
}
private getLabelOfEntity(entity): string {
switch (entity) {
case 'people':
return 'character';
case 'planets':
return 'planet';
case 'starships':
return 'starship';
}
}
}
`),t(),n(21,"label",6),e(22,"sample-po-lookup-sw-films/sample-po-lookup-sw-films.service.ts"),t(),n(23,"pre",9),e(24,`import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { PoLookupFilter, PoLookupResponseApi, PoLookupFilteredItemsParams } from '@po-ui/ng-components';
@Injectable({
providedIn: 'root'
})
export class SamplePoLookupSwFilmsService implements PoLookupFilter {
private baseUrl = 'https://swapi.dev/api';
private filmsUrl = 'https://swapi.dev/api/films/';
constructor(private http: HttpClient) {}
getFilms() {
return this.http.get(this.filmsUrl);
}
getFilteredItems({ filter, page, filterParams }: PoLookupFilteredItemsParams): Observable<PoLookupResponseApi> {
const params = { page: page.toString() };
if (filter) {
params['search'] = filter;
}
return this.http.get(\`\${this.baseUrl}/\${filterParams}\`, { params }).pipe(
map((response: { results: Array<any>; next: string }) => ({
items: response.results,
hasNext: !!response.next
}))
);
}
getObjectByValue(value: string, filterParams: any): Observable<any> {
return this.http
.get(\`\${this.baseUrl}/\${filterParams}/?search=\${value}\`)
.pipe(map((response: { results: Array<any> }) => response.results[0]));
}
}
`),t()()()()(),n(25,"div",10),i(26,"sample-po-lookup-sw-films"),t(),i(27,"hr")),l&2&&(d(5),P("po-icon "+o.sampleCodeButtonIcon),d(),L(" ",o.sampleCodeButtonLabel,""),d(),c("ngClass",F(4,dt,o.hideSampleCodeTabs)))},dependencies:[w,y,C,k,Ae],encapsulation:2})}return a})();var Ne=(()=>{class a{http;constructor(r){this.http=r}getHeroes(r){let l=r?.length?r.toString():r;return this.http.get(`https://po-sample-api.onrender.com/v1/heroes?value=${l}`).pipe(de("items"))}static \u0275fac=function(l){return new(l||a)(V(A))};static \u0275prov=O({token:a,factory:a.\u0275fac,providedIn:"root"})}return a})();var He=(()=>{class a{service;loading=!1;heroes;multiLookup=[1495831666871,1405833068599];columns=[{property:"value",label:"id"},{property:"label",label:"Name"}];constructor(r){this.service=r}changeOptions(r){this.loading=!0,this.service.getHeroes(r).subscribe(l=>{this.heroes=l},l=>console.error(l),()=>this.loading=!1)}openLink(r){window.open(`http://google.com/search?q=${r}`,"_blank")}static \u0275fac=function(l){return new(l||a)(f(Ne))};static \u0275cmp=u({type:a,selectors:[["sample-po-lookup-multiple"]],standalone:!1,decls:4,vars:8,consts:[[1,"po-row"],["name","lookup","p-field-label","label","p-field-value","value","p-filter-service","https://po-sample-api.onrender.com/v1/heroes","p-label","Search a Hero",1,"po-md-6",3,"ngModelChange","p-change","ngModel","p-multiple"],[1,"po-md-6","po-mt-4"],[3,"p-columns","p-items","p-height","p-striped","p-hide-columns-manager","p-loading"]],template:function(l,o){l&1&&(n(0,"div",0)(1,"po-lookup",1),g("ngModelChange",function(s){return v(o.multiLookup,s)||(o.multiLookup=s),s}),x("p-change",function(s){return o.changeOptions(s)}),t(),n(2,"po-container",2),i(3,"po-table",3),t()()),l&2&&(d(),b("ngModel",o.multiLookup),c("p-multiple",!0),d(2),c("p-columns",o.columns)("p-items",o.heroes)("p-height",220)("p-striped",!0)("p-hide-columns-manager",!0)("p-loading",o.loading))},dependencies:[_,I,K,M,ee],encapsulation:2})}return a})();var ut=a=>({"docs-sample-code-tabs":a}),ze=(()=>{class a{hideSampleCodeTabs=!0;sampleCodeButtonLabel="Talk is cheap, show me the code!";sampleCodeButtonIcon="an an-plus";toggleSampleCodeTabs(){this.hideSampleCodeTabs=!this.hideSampleCodeTabs,this.sampleCodeButtonLabel=this.hideSampleCodeTabs?"Talk is cheap, show me the code!":"Okay, hide the code",this.sampleCodeButtonIcon=this.hideSampleCodeTabs?"an an-plus":"an an-minus"}static \u0275fac=function(l){return new(l||a)};static \u0275cmp=u({type:a,selectors:[["sample-po-lookup-multiple-view"]],standalone:!1,decls:28,vars:6,consts:[[1,"sample-blockquote"],[1,"sample-title","po-font-text-large-bold"],[1,"show-me-the-code",3,"click"],[3,"ngClass"],["p-size","2"],["p-label","HTML","p-active",""],[1,"doc-label-path"],["appCodeHighlight","",1,"html"],["p-label","TS"],["appCodeHighlight","",1,"typescript"],[1,"docs-sample-container"]],template:function(l,o){l&1&&(i(0,"br"),n(1,"blockquote",0)(2,"label",1),e(3,"PO Lookup - Multiple"),t(),n(4,"a",2),x("click",function(){return o.toggleSampleCodeTabs()}),i(5,"span"),e(6),t()(),n(7,"div",3)(8,"po-tabs",4)(9,"po-tab",5)(10,"div")(11,"label",6),e(12,"sample-po-lookup-multiple/sample-po-lookup-multiple.component.html"),t(),n(13,"pre",7),e(14,`<div class="po-row">
<po-lookup
class="po-md-6"
name="lookup"
[(ngModel)]="multiLookup"
p-field-label="label"
p-field-value="value"
p-filter-service="https://po-sample-api.onrender.com/v1/heroes"
p-label="Search a Hero"
[p-multiple]="true"
(p-change)="changeOptions($event)"
></po-lookup>
<po-container class="po-md-6 po-mt-4">
<po-table
[p-columns]="columns"
[p-items]="heroes"
[p-height]="220"
[p-striped]="true"
[p-hide-columns-manager]="true"
[p-loading]="loading"
></po-table>
</po-container>
</div>
`),t()()(),n(15,"po-tab",8)(16,"div")(17,"label",6),e(18,"sample-po-lookup-multiple/sample-po-lookup-multiple.component.ts"),t(),n(19,"pre",9),e(20,`import { Component } from '@angular/core';
import { PoTableColumn } from '@po-ui/ng-components';
import { SamplePoLookupMultipleService } from './sample-po-lookup-multiple.service';
@Component({
selector: 'sample-po-lookup-multiple',
templateUrl: './sample-po-lookup-multiple.component.html',
styles: [],
standalone: false
})
export class SamplePoLookupMultipleComponent {
loading: boolean = false;
heroes: Array<any>;
multiLookup: Array<any> = [1495831666871, 1405833068599];
columns: Array<PoTableColumn> = [
{ property: 'value', label: 'id' },
{
property: 'label',
label: 'Name'
}
];
constructor(public service: SamplePoLookupMultipleService) {}
changeOptions(event): void {
this.loading = true;
this.service.getHeroes(event).subscribe(
result => {
this.heroes = result;
},
err => console.error(err),
() => (this.loading = false)
);
}
openLink(value) {
window.open(\`http://google.com/search?q=\${value}\`, '_blank');
}
}
`),t(),n(21,"label",6),e(22,"sample-po-lookup-multiple/sample-po-lookup-multiple.service.ts"),t(),n(23,"pre",9),e(24,`import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { pluck } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class SamplePoLookupMultipleService {
constructor(public http: HttpClient) {}
getHeroes(data): Observable<any> {
const values = data?.length ? data.toString() : data;
return this.http.get(\`https://po-sample-api.onrender.com/v1/heroes?value=\${values}\`).pipe(pluck('items'));
}
}
`),t()()()()(),n(25,"div",10),i(26,"sample-po-lookup-multiple"),t(),i(27,"hr")),l&2&&(d(5),P("po-icon "+o.sampleCodeButtonIcon),d(),L(" ",o.sampleCodeButtonLabel,""),d(),c("ngClass",F(4,ut,o.hideSampleCodeTabs)))},dependencies:[w,y,C,k,He],encapsulation:2})}return a})();var Be=(()=>{class a{static \u0275fac=function(l){return new(l||a)};static \u0275cmp=u({type:a,selectors:[["sample-po-lookup-doc"]],standalone:!1,decls:4619,vars:0,consts:[[1,"docs-api"],[1,"docs-api-module-import"],[1,"docs-api-class-description"],[1,"docs-api-h3"],[1,"docs-api-class-name"],[1,"doc-code"],["href","https://angular.io/guide/form-validation#creating-asynchronous-validators"],["href","https://po-ui.io/guides/api"],["id","tokens-customiz\xE1veis"],["href","https://po-ui.io/guides/theme-customization"],[1,"docs-api-directive-selectors"],[1,"docs-api-class-selector-label"],["appCodeHighlight",""],[1,"docs-api-h5","docs-api-method-header"],[1,"docs-api-properties-table"],[1,"docs-api-properties-header-row"],[1,"docs-api-properties-th"],[1,"docs-api-properties-row"],[1,"docs-api-properties-name-cell"],[1,"docs-api-input-marker"],[1,"docs-api-input-alias"],[1,"docs-api-properties-type-cell"],["pan","",1,"docs-api-property-type","Array<PoLookupAdvancedFilter>"],[1,"docs-api-property-default"],[1,"docs-api-property-description"],["pan","",1,"docs-api-property-type","boolean"],[1,"docs-api-output-marker"],[1,"docs-api-output-alias"],["pan","",1,"docs-api-property-type","EventEmitter"],["pan","",1,"docs-api-property-type","Array<PoLookupColumn>"],["pan","",1,"docs-api-property-type","string"],["pan","",1,"docs-api-property-type","((value)","=>","string)"],["pan","",1,"docs-api-property-type","Array<string>"],["pan","",1,"docs-api-property-type","any"],["pan","",1,"docs-api-property-type","PoLookupFilter"],["href","https://tc39.es/ecma262/#sec-encodeuricomponent-uricomponent"],["pan","",1,"docs-api-property-type","PoLookupLiterals"],["href","/documentation/po-i18n"],["pan","",1,"docs-api-property-type","PoTableColumnSpacing"],[1,"docs-api-method-table"],["colspan","2",1,"docs-api-properties-name-cell"],[1,"docs-api-h4","docs-api-class-name"],["pan","",1,"docs-api-property-type","Function"],["pan","",1,"docs-api-property-type","number"],["href","/documentation/po-lookup"],["pan","",1,"docs-api-property-type","(value)","=>","Observable<boolean>"],["pan","",1,"docs-api-property-type","ErrorAsyncProperties"],["pan","",1,"docs-api-property-type","PoMultiselectFilterMode"],["pan","",1,"docs-api-property-type","ForceBooleanComponentEnum"],["pan","",1,"docs-api-property-type","ForceOptionComponentEnum"],["pan","",1,"docs-api-property-type","{","[name:","string]:","string"],["pan","",1,"docs-api-property-type","Array<string>;","}"],["pan","",1,"docs-api-property-type","TemplateRef<void>"],["href","https://po-ui.io/icons"],["pan","",1,"docs-api-property-type","PoDatepickerIsoFormat"],["pan","",1,"docs-api-property-type","PoSwitchLabelPosition"],["pan","",1,"docs-api-property-type","PoMultiselectLiterals"],["pan","",1,"docs-api-property-type","PoComboLiterals"],["pan","",1,"docs-api-property-type","PoDatepickerRangeLiterals"],["pan","",1,"docs-api-property-type","PoUploadLiterals"],["href","documentation/po-i18n"],["pan","",1,"docs-api-property-type","Array<PoSelectOption>"],["pan","",1,"docs-api-property-type","Array<PoMultiselectOption>"],["pan","",1,"docs-api-property-type","Array<PoCheckboxGroupOption>"],["pan","",1,"docs-api-property-type","Array<any>"],["pan","",1,"docs-api-property-type","PoComboFilter"],["pan","",1,"docs-api-property-type","PoMultiselectFilter"],["pan","",1,"docs-api-property-type","PoUploadFileRestrictions"],["pan","",1,"docs-api-property-type","PoDynamicFieldType"],["href","documentation/po-dynamic-form#po-dynamic-form-field-validation"],["pan","",1,"docs-api-property-type"],["pan","",1,"docs-api-property-type","{","[key:","string]:","any;","}"],["pan","",1,"docs-api-property-type","Array<object>"]],template:function(l,o){l&1&&(n(0,"div",0)(1,"p",1)(2,"code"),e(3,"import { PoFieldModule } from '@po-ui/ng-components';"),t()(),n(4,"div",2)(5,"p"),e(6,`M\xF3dulo dos componentes: po-checkbox, po-checkbox-group, po-combo, po-datepicker, po-datepicker-range, po-email, po-input,
po-lookup, po-number, po-multiselect, po-password, po-radio-group, po-select, po-switch, po-textarea, po-upload
e po-url.`),t(),n(7,"blockquote")(8,"p"),e(9,"N\xE3o esque\xE7a de importar o m\xF3dulo "),n(10,"code"),e(11,"FormsModule"),t(),e(12,` para usar os componentes de formul\xE1rios e caso esteja trabalhando com
formul\xE1rios reativos, importe o m\xF3dulo `),n(13,"code"),e(14,"ReactiveFormsModule"),t(),e(15,", ambos nativos do Angular."),t()()(),n(16,"h3",3),e(17,"Componente"),t(),n(18,"h4",4)(19,"code",5),e(20,"PoLookupComponent"),t()(),n(21,"div",2)(22,"p"),e(23,`Componente utilizado para abrir uma janela de busca com uma tabela que lista dados de um servi\xE7o. Nesta janela \xE9 poss\xEDvel buscar e
selecionar um ou mais registros que ser\xE3o enviados para o campo. O `),n(24,"code"),e(25,"po-lookup"),t(),e(26," permite que o usu\xE1rio digite um valor e pressione a tecla "),n(27,"em"),e(28,"TAB"),t(),e(29,` para
buscar um registro.`),t(),n(30,"blockquote")(31,"p"),e(32,`Caso o campo seja iniciado ou preenchido com um valor inexistente na busca, o mesmo ser\xE1 limpado.
No segundo caso ocorrer\xE1 ap\xF3s este perder o foco; ambos os casos o campo ficar\xE1 inv\xE1lido quando requerido.`),t()(),n(33,"blockquote")(34,"p"),e(35,`Enquanto o componente realiza a requisi\xE7\xE3o ao servidor, o componente ficar\xE1 desabilitado e com o status interno do
`),n(36,"a",6),e(37,"modelo"),t(),e(38," como "),n(39,"code"),e(40,"pending"),t(),e(41,"."),t()(),n(42,"p"),e(43,`Este componente n\xE3o \xE9 recomendado quando a busca dos dados possuir poucas informa\xE7\xF5es, para isso utilize outros componentes como o
`),n(44,"code"),e(45,"po-select"),t(),e(46," ou o "),n(47,"code"),e(48,"po-combo"),t(),e(49,`. Quando existe muitos dados o po-lookup por padr\xE3o traz apenas 10 itens na tabela e os demais s\xE3o carregados por demanda atrav\xE9s do
bot\xE3o 'Carregar mais resultados'. Para que funcione corretamente, \xE9 importante que o servi\xE7o siga o
`),n(50,"a",7),e(51,"Guia de implementa\xE7\xE3o das APIs TOTVS"),t(),e(52,"."),t(),n(53,"p"),e(54,"Importante:"),t(),n(55,"ul")(56,"li"),e(57,`Caso o po-lookup contenha o [(ngModel)] sem o atributo name, ocorrer\xE1 um erro de angular.
Ent\xE3o ser\xE1 necess\xE1rio informar o atributo name ou o atributo [ngModelOptions]="{standalone: true}".`),n(58,"pre")(59,"code"),e(60,`<po-lookup
[(ngModel)]="pessoa.nome"
[ngModelOptions]="{standalone: true}">
</po-lookup>`),t()()()(),n(61,"h4",8),e(62,"Tokens customiz\xE1veis"),t(),n(63,"p"),e(64,"\xC9 poss\xEDvel alterar o estilo do componente usando os seguintes tokens (CSS):"),t(),n(65,"blockquote")(66,"p"),e(67,"Para maiores informa\xE7\xF5es, acesse o guia "),n(68,"a",9),e(69,"Personalizando o Tema Padr\xE3o com Tokens CSS"),t(),e(70,"."),t()(),n(71,"table")(72,"thead")(73,"tr")(74,"th"),e(75,"Propriedade"),t(),n(76,"th"),e(77,"Descri\xE7\xE3o"),t(),n(78,"th"),e(79,"Valor Padr\xE3o"),t()()(),n(80,"tbody")(81,"tr")(82,"td")(83,"strong"),e(84,"Default Values"),t()(),i(85,"td")(86,"td"),t(),n(87,"tr")(88,"td")(89,"code"),e(90,"--font-family"),t()(),n(91,"td"),e(92,"Fam\xEDlia tipogr\xE1fica usada"),t(),n(93,"td")(94,"code"),e(95,"var(--font-family-theme)"),t()()(),n(96,"tr")(97,"td")(98,"code"),e(99,"--font-size"),t()(),n(100,"td"),e(101,"Tamanho da fonte"),t(),n(102,"td")(103,"code"),e(104,"var(--font-size-default)"),t()()(),n(105,"tr")(106,"td")(107,"code"),e(108,"--text-color-placeholder"),t()(),n(109,"td"),e(110,"Cor do texto no placeholder"),t(),n(111,"td")(112,"code"),e(113,"var(--color-neutral-light-30)"),t()()(),n(114,"tr")(115,"td")(116,"code"),e(117,"--color"),t()(),n(118,"td"),e(119,"Cor principal do lookup"),t(),n(120,"td")(121,"code"),e(122,"var(--color-neutral-dark-70)"),t()()(),n(123,"tr")(124,"td")(125,"code"),e(126,"--border-radius"),t()(),n(127,"td"),e(128,"Cont\xE9m o valor do raio dos cantos do elemento\xA0"),t(),n(129,"td")(130,"code"),e(131,"var(--border-radius-md)"),t()()(),n(132,"tr")(133,"td")(134,"code"),e(135,"--background"),t()(),n(136,"td"),e(137,"Cor de background"),t(),n(138,"td")(139,"code"),e(140,"var(--color-neutral-light-05)"),t()()(),n(141,"tr")(142,"td")(143,"code"),e(144,"--text-color"),t()(),n(145,"td"),e(146,"Cor do texto"),t(),n(147,"td")(148,"code"),e(149,"var(--color-neutral-dark-90)"),t()()(),n(150,"tr")(151,"td")(152,"code"),e(153,"--color-clear"),t()(),n(154,"td"),e(155,"Cor principal do icone clear"),t(),n(156,"td")(157,"code"),e(158,"var(--color-action-default)"),t()()(),n(159,"tr")(160,"td")(161,"strong"),e(162,"Icon"),t()(),i(163,"td")(164,"td"),t(),n(165,"tr")(166,"td")(167,"code"),e(168,"--color-icon"),t()(),n(169,"td"),e(170,"Cor principal do icone pesquisar"),t(),n(171,"td")(172,"code"),e(173,"var(--color-action-default)"),t()()(),n(174,"tr")(175,"td")(176,"strong"),e(177,"Hover"),t()(),i(178,"td")(179,"td"),t(),n(180,"tr")(181,"td")(182,"code"),e(183,"--color-hover"),t()(),n(184,"td"),e(185,"Cor principal no estado hover"),t(),n(186,"td")(187,"code"),e(188,"var(--color-action-hover)"),t()()(),n(189,"tr")(190,"td")(191,"code"),e(192,"--background-hover"),t()(),n(193,"td"),e(194,"Cor de background no estado hover"),t(),n(195,"td")(196,"code"),e(197,"var(--color-brand-01-lightest)"),t()()(),n(198,"tr")(199,"td")(200,"strong"),e(201,"Focused"),t()(),i(202,"td")(203,"td"),t(),n(204,"tr")(205,"td")(206,"code"),e(207,"--color-focused"),t()(),n(208,"td"),e(209,"Cor principal no estado de focus"),t(),n(210,"td")(211,"code"),e(212,"var(--color-action-default)"),t()()(),n(213,"tr")(214,"td")(215,"code"),e(216,"--outline-color-focused"),t()(),n(217,"td"),e(218,"Cor do outline do estado de focus"),t(),n(219,"td")(220,"code"),e(221,"var(--color-action-focus)"),t()()(),n(222,"tr")(223,"td")(224,"strong"),e(225,"Disabled"),t()(),i(226,"td")(227,"td"),t(),n(228,"tr")(229,"td")(230,"code"),e(231,"--color-disabled"),t()(),n(232,"td"),e(233,"Cor principal no estado disabled"),t(),n(234,"td")(235,"code"),e(236,"var(--color-action-disabled)"),t()()(),n(237,"tr")(238,"td")(239,"code"),e(240,"--background-disabled"),t()(),n(241,"td"),e(242,"Cor de background no estado disabled"),t(),n(243,"td")(244,"code"),e(245,"var(--color-neutral-light-20)"),t()()(),n(246,"tr")(247,"td")(248,"code"),e(249,"--text-color-disabled"),t()(),n(250,"td"),e(251,"Cor do texto quando campo est\xE1 desabilitado"),t(),n(252,"td")(253,"code"),e(254,"var(--color-action-disabled)"),t()()(),n(255,"tr")(256,"td")(257,"strong"),e(258,"Error"),t()(),i(259,"td")(260,"td"),t(),n(261,"tr")(262,"td")(263,"code"),e(264,"--color-error"),t()(),n(265,"td"),e(266,"Cor de background no estado de requerido"),t(),n(267,"td")(268,"code"),e(269,"var(--color-feedback-negative-base)"),t()()()()()(),n(270,"div",10)(271,"h4",11),e(272,"Seletor"),t(),n(273,"pre",12),e(274,`<po-lookup
p-advanced-filters="Array<PoLookupAdvancedFilter>"
p-auto-focus="boolean"
p-auto-height="boolean"
(p-change)="EventEmitter"
(p-change-visible-columns)="EventEmitter"
p-clean="boolean"
(p-restore-column-manager)="EventEmitter"
p-columns="Array<PoLookupColumn>"
p-disabled="boolean"
p-field-error-message="string"
p-field-format="((value) => string) | Array<string>"
p-field-label="string"
p-field-value="string"
p-filter-params="any"
p-filter-service="string | PoLookupFilter"
p-help="string"
p-hide-columns-manager="boolean"
p-infinite-scroll="boolean"
p-label="string"
p-literals="PoLookupLiterals"
p-multiple="boolean"
name="string"
p-no-autocomplete="boolean"
(p-error)="EventEmitter"
p-optional="boolean"
p-placeholder="string"
p-required="boolean"
(p-selected)="EventEmitter"
p-show-required="boolean"
p-spacing="PoTableColumnSpacing"
p-text-wrap="boolean"
p-virtual-scroll="boolean" >
</po-lookup>
`),t()(),n(275,"h4",13),e(276,"Propriedades"),t(),n(277,"table",14)(278,"tr",15)(279,"th",16),e(280,"Nome"),t(),n(281,"th",16),e(282,"Tipo"),t(),n(283,"th",16),e(284,"Padr\xE3o"),t(),n(285,"th",16),e(286,"Descri\xE7\xE3o"),t()(),n(287,"tr",17)(288,"td",18)(289,"div",19)(290,"span",20),e(291," p-advanced-filters"),i(292,"br"),t()()(),n(293,"td",21)(294,"code",22),e(295,"Array<PoLookupAdvancedFilter>"),t()(),n(296,"td",23),e(297,"-"),t(),n(298,"td",24)(299,"em")(300,"strong"),e(301,"(opcional)"),t()(),n(302,"p"),e(303,"Lista de objetos dos campos que ser\xE3o criados na busca avan\xE7ada."),t(),n(304,"blockquote")(305,"p"),e(306,"Caso n\xE3o seja passado um objeto ou ent\xE3o ele esteja em branco o link de busca avan\xE7ada ficar\xE1 escondido."),t()(),n(307,"p"),e(308,"Exemplo de URL com busca avan\xE7ada:"),t(),n(309,"pre")(310,"code"),e(311,"url + ?page=1&pageSize=20&name=Tony%20Stark&nickname=Homem%20de%20Ferro"),t()(),n(312,"p"),e(313,`Caso algum par\xE2metro seja uma lista, a concatena\xE7\xE3o \xE9 feita utilizando v\xEDrgula.
Exemplo:`),t(),n(314,"pre")(315,"code"),e(316,"url + ?page=1&pageSize=20&name=Tony%20Stark,Peter%20Parker,Gohan"),t()()()(),n(317,"tr",17)(318,"td",18)(319,"div",19)(320,"span",20),e(321," p-auto-focus"),i(322,"br"),t()()(),n(323,"td",21)(324,"code",25),e(325,"boolean"),t()(),n(326,"td",23)(327,"p")(328,"code"),e(329,"false"),t()()(),n(330,"td",24)(331,"em")(332,"strong"),e(333,"(opcional)"),t()(),n(334,"p"),e(335,"Aplica foco no elemento ao ser iniciado."),t(),n(336,"blockquote")(337,"p"),e(338,"Caso mais de um elemento seja configurado com essa propriedade, apenas o \xFAltimo elemento declarado com ela ter\xE1 o foco."),t()()()(),n(339,"tr",17)(340,"td",18)(341,"div",19)(342,"span",20),e(343," p-auto-height"),i(344,"br"),t()()(),n(345,"td",21)(346,"code",25),e(347,"boolean"),t()(),n(348,"td",23)(349,"p")(350,"code"),e(351,"false"),t()()(),n(352,"td",24)(353,"em")(354,"strong"),e(355,"(opcional)"),t()(),n(356,"p"),e(357,`Define que a altura do componente ser\xE1 auto ajust\xE1vel, possuindo uma altura minima por\xE9m a altura m\xE1xima ser\xE1 de acordo
com o n\xFAmero de itens selecionados e a extens\xE3o dos mesmos, mantendo-os sempre vis\xEDveis.`),t()()(),n(358,"tr",17)(359,"td",18)(360,"div",26)(361,"span",27),e(362," (p-change)"),i(363,"br"),t()()(),n(364,"td",21)(365,"code",28),e(366,"EventEmitter"),t()(),n(367,"td",23),e(368,"-"),t(),n(369,"td",24)(370,"em")(371,"strong"),e(372,"(opcional)"),t()(),n(373,"p"),e(374,"Evento que ser\xE1 disparado ao alterar o model. Por par\xE2metro ser\xE1 passado o novo valor."),t()()(),n(375,"tr",17)(376,"td",18)(377,"div",26)(378,"span",27),e(379," (p-change-visible-columns)"),i(380,"br"),t()()(),n(381,"td",21)(382,"code",28),e(383,"EventEmitter"),t()(),n(384,"td",23),e(385,"-"),t(),n(386,"td",24)(387,"em")(388,"strong"),e(389,"(opcional)"),t()(),n(390,"p"),e(391,"Evento disparado ao fechar o popover do gerenciador de colunas ap\xF3s alterar as colunas vis\xEDveis."),t(),n(392,"p"),e(393,`O componente envia como par\xE2metro um array de string com as colunas vis\xEDveis atualizadas.
Por exemplo: ["idCard", "name", "hireStatus", "age"].`),t()()(),n(394,"tr",17)(395,"td",18)(396,"div",19)(397,"span",20),e(398," p-clean"),i(399,"br"),t()()(),n(400,"td",21)(401,"code",25),e(402,"boolean"),t()(),n(403,"td",23),e(404,"-"),t(),n(405,"td",24)(406,"p"),e(407,"Exibe um \xEDcone que permite limpar o campo."),t()()(),n(408,"tr",17)(409,"td",18)(410,"div",26)(411,"span",27),e(412," (p-restore-column-manager)"),i(413,"br"),t()()(),n(414,"td",21)(415,"code",28),e(416,"EventEmitter"),t()(),n(417,"td",23),e(418,"-"),t(),n(419,"td",24)(420,"em")(421,"strong"),e(422,"(opcional)"),t()(),n(423,"p"),e(424,"Evento disparado ao clicar no bot\xE3o de restaurar padr\xE3o no gerenciador de colunas."),t(),n(425,"p"),e(426,`O componente envia como par\xE2metro um array de string com as colunas configuradas inicialmente.
Por exemplo: ["idCard", "name", "hireStatus", "age"].`),t()()(),n(427,"tr",17)(428,"td",18)(429,"div",19)(430,"span",20),e(431," p-columns"),i(432,"br"),t()()(),n(433,"td",21)(434,"code",29),e(435,"Array<PoLookupColumn>"),t()(),n(436,"td",23),e(437,"-"),t(),n(438,"td",24)(439,"em")(440,"strong"),e(441,"(opcional)"),t()(),n(442,"p"),e(443,`Lista das colunas da tabela.
Essa propriedade deve receber um array de objetos que implementam a interface PoLookupColumn.`),t()()(),n(444,"tr",17)(445,"td",18)(446,"div",19)(447,"span",20),e(448," p-disabled"),i(449,"br"),t()()(),n(450,"td",21)(451,"code",25),e(452,"boolean"),t()(),n(453,"td",23)(454,"p"),e(455,"false"),t()(),n(456,"td",24)(457,"em")(458,"strong"),e(459,"(opcional)"),t()(),n(460,"p"),e(461,"Indica que o campo ser\xE1 desabilitado."),t()()(),n(462,"tr",17)(463,"td",18)(464,"div",19)(465,"span",20),e(466," p-field-error-message"),i(467,"br"),t()()(),n(468,"td",21)(469,"code",30),e(470,"string"),t()(),n(471,"td",23),e(472,"-"),t(),n(473,"td",24)(474,"em")(475,"strong"),e(476,"(opcional)"),t()(),n(477,"p"),e(478,"Exibe a mensagem setada se o campo estiver vazio e for requerido."),t(),n(479,"blockquote")(480,"p"),e(481,"Necess\xE1rio que a propriedade "),n(482,"code"),e(483,"p-required"),t(),e(484," esteja habilitada."),t()()()(),n(485,"tr",17)(486,"td",18)(487,"div",19)(488,"span",20),e(489," p-field-format"),i(490,"br"),t()()(),n(491,"td",21)(492,"code",31),e(493,"((value) => string) "),t(),n(494,"code",32),e(495," Array<string>"),t()(),n(496,"td",23),e(497,"-"),t(),n(498,"td",24)(499,"em")(500,"strong"),e(501,"(opcional)"),t()(),n(502,"p"),e(503,"Formato de exibi\xE7\xE3o do campo."),t(),n(504,"p"),e(505,"Recebe uma fun\xE7\xE3o que deve retornar uma "),n(506,"em"),e(507,"string"),t(),e(508," com o/os valores do objeto formatados para exibi\xE7\xE3o, por exemplo:"),t(),n(509,"pre")(510,"code"),e(511,"fieldFormat(obj) {\n return `${obj.id} - ${obj.name}`;\n}"),t()(),n(512,"blockquote")(513,"p"),e(514,"Esta propriedade sobrep\xF5e o valor da propriedade "),n(515,"code"),e(516,"p-field-label"),t(),e(517," na descri\xE7\xE3o do campo."),t()(),n(518,"p"),e(519,"Pode-se informar uma lista de propriedades que deseja exibir como descri\xE7\xE3o do campo, Por exemplo:"),t(),n(520,"pre")(521,"code"),e(522,`<po-lookup
...
[p-field-format]="['id','nickname']"
...
>
Objeto retornado:
{
id:123,
name: 'Kakaroto',
nickname: 'Goku',
}
Apresenta\xE7\xE3o no campo: 123 - Goku`),t()(),n(523,"blockquote")(524,"p"),e(525,"Ser\xE1 utilizado "),n(526,"code"),e(527,"-"),t(),e(528," como separador."),t()()()(),n(529,"tr",17)(530,"td",18)(531,"div",19)(532,"span",20),e(533," p-field-label"),i(534,"br"),t()()(),n(535,"td",21)(536,"code",30),e(537,"string"),t()(),n(538,"td",23),e(539,"-"),t(),n(540,"td",24)(541,"p"),e(542,"Indica a coluna que ser\xE1 utilizada como descri\xE7\xE3o do campo e como filtro dentro da janela."),t()()(),n(543,"tr",17)(544,"td",18)(545,"div",19)(546,"span",20),e(547," p-field-value"),i(548,"br"),t()()(),n(549,"td",21)(550,"code",30),e(551,"string"),t()(),n(552,"td",23),e(553,"-"),t(),n(554,"td",24)(555,"p"),e(556,"Indica a coluna que ser\xE1 utilizada como valor do campo."),t(),n(557,"blockquote")(558,"p"),e(559,"Aten\xE7\xE3o: Caso n\xE3o seja passada ou tenha o conte\xFAdo incorreto, n\xE3o ir\xE1 atualizar o model do formul\xE1rio."),t()()()(),n(560,"tr",17)(561,"td",18)(562,"div",19)(563,"span",20),e(564," p-filter-params"),i(565,"br"),t()()(),n(566,"td",21)(567,"code",33),e(568,"any"),t()(),n(569,"td",23),e(570,"-"),t(),n(571,"td",24)(572,"em")(573,"strong"),e(574,"(opcional)"),t()(),n(575,"p"),e(576,"Valor que ser\xE1 repassado como par\xE2metro para a URL ou aos m\xE9todos do servi\xE7o que implementam a interface "),n(577,"code"),e(578,"PoLookupFilter"),t(),e(579,"."),t()()(),n(580,"tr",17)(581,"td",18)(582,"div",19)(583,"span",20),e(584," p-filter-service"),i(585,"br"),t()()(),n(586,"td",21)(587,"code",30),e(588,"string "),t(),n(589,"code",34),e(590," PoLookupFilter"),t()(),n(591,"td",23),e(592,"-"),t(),n(593,"td",24)(594,"p"),e(595,`Servi\xE7o respons\xE1vel por buscar os dados da tabela na janela. Pode ser informado um servi\xE7o que implemente a interface
`),n(596,"code"),e(597,"PoLookupFilter"),t(),e(598," ou uma URL."),t(),n(599,"p"),e(600,"Quando utilizada uma URL de um servi\xE7o, ser\xE1 concatenada nesta URL o valor que deseja-se filtrar, por exemplo:"),t(),n(601,"pre")(602,"code"),e(603,"url + ?page=1&pageSize=20&filter=Peter"),t()(),n(604,"p"),e(605,"Caso utilizar ordena\xE7\xE3o, a coluna ordenada ser\xE1 enviada atrav\xE9s do par\xE2metro "),n(606,"code"),e(607,"order"),t(),e(608,", por exemplo:"),t(),n(609,"ul")(610,"li")(611,"p"),e(612,"Coluna decrescente:"),t(),n(613,"pre")(614,"code"),e(615,"url + ?page=1&pageSize=20&filter=Peter&order=-name"),t()()(),n(616,"li")(617,"p"),e(618,"Coluna ascendente:"),t(),n(619,"pre")(620,"code"),e(621,"url + ?page=1&pageSize=20&filter=Peter&order=name"),t()()()(),n(622,"p"),e(623,"Se for definido a propriedade "),n(624,"code"),e(625,"p-filter-params"),t(),e(626,`, o mesmo tamb\xE9m ser\xE1 concatenado. Por exemplo, para o
par\xE2metro `),n(627,"code"),e(628,"{ age: 23 }"),t(),e(629," a URL ficaria:"),t(),n(630,"pre")(631,"code"),e(632,"url + ?page=1&pageSize=20&age=23&filter=Peter"),t()(),n(633,"p"),e(634,"Ao iniciar o campo com valor, os registros ser\xE3o buscados da seguinte forma:"),t(),n(635,"pre")(636,"code"),e(637,`model = 1234;
GET url/1234`),t()(),n(638,"p"),e(639,"Caso estiver com m\xFAltipla sele\xE7\xE3o habilitada:"),t(),n(640,"pre")(641,"code"),e(642,`model = [1234, 5678]
GET url?\${fieldValue}=1234,5678`),t()(),n(643,"blockquote")(644,"p"),e(645,"Esta URL deve retornar e receber os dados no padr\xE3o de "),n(646,"a",7),e(647,"API do PO UI"),t(),e(648,` e utiliza os valores
definidos nas propriedades `),n(649,"code"),e(650,"p-field-label"),t(),e(651," e "),n(652,"code"),e(653,"p-field-value"),t(),e(654," para a constru\xE7\xE3o do "),n(655,"code"),e(656,"po-lookup"),t(),e(657,"."),t()(),n(658,"p"),e(659,"Caso o usu\xE1rio digite um valor e pressione a tecla "),n(660,"em"),e(661,"TAB"),t(),e(662,` para realizar a busca de um registro espec\xEDfico, o valor que se
deseja filtrar ser\xE1 codificado utilizando a fun\xE7\xE3o `),n(663,"a",35),e(664,"encodeURIComponent"),t(),e(665,`
e concatenado na URL da seguinte forma:`),t(),n(666,"pre")(667,"code"),e(668,"url/valor%20que%20se%20deseja%20filtrar"),t()(),n(669,"blockquote")(670,"p"),e(671,"Quando informado um servi\xE7o que implemente a interface "),n(672,"code"),e(673,"PoLookupFilter"),t(),e(674," o tratamento de encoding do valor a ser filtrado ficar\xE1 a cargo do desenvolvedor."),t()()()(),n(675,"tr",17)(676,"td",18)(677,"div",19)(678,"span",20),e(679," p-help"),i(680,"br"),t()()(),n(681,"td",21)(682,"code",30),e(683,"string"),t()(),n(684,"td",23),e(685,"-"),t(),n(686,"td",24)(687,"em")(688,"strong"),e(689,"(opcional)"),t()(),n(690,"p"),e(691,"Texto de apoio do campo."),t()()(),n(692,"tr",17)(693,"td",18)(694,"div",19)(695,"span",20),e(696," p-hide-columns-manager"),i(697,"br"),t()()(),n(698,"td",21)(699,"code",25),e(700,"boolean"),t()(),n(701,"td",23)(702,"p")(703,"code"),e(704,"false"),t()()(),n(705,"td",24)(706,"em")(707,"strong"),e(708,"(opcional)"),t()(),n(709,"p"),e(710,"Permite que o gerenciador de colunas, respons\xE1vel pela defini\xE7\xE3o de quais colunas ser\xE3o exibidas, seja escondido."),t()()(),n(711,"tr",17)(712,"td",18)(713,"div",19)(714,"span",20),e(715," p-infinite-scroll"),i(716,"br"),t()()(),n(717,"td",21)(718,"code",25),e(719,"boolean"),t()(),n(720,"td",23)(721,"p")(722,"code"),e(723,"false"),t()()(),n(724,"td",24)(725,"em")(726,"strong"),e(727,"(opcional)"),t()(),n(728,"p"),e(729,"Ativa a funcionalidade de scroll infinito para a tabela exibida no retorno da consulta."),t()()(),n(730,"tr",17)(731,"td",18)(732,"div",19)(733,"span",20),e(734," p-label"),i(735,"br"),t()()(),n(736,"td",21)(737,"code",30),e(738,"string"),t()(),n(739,"td",23),e(740,"-"),t(),n(741,"td",24)(742,"em")(743,"strong"),e(744,"(opcional)"),t()(),n(745,"p"),e(746,"Label do campo."),t(),n(747,"blockquote")(748,"p"),e(749,`Quando utilizar esta propriedade o seu valor ser\xE1 utilizado como t\xEDtulo da modal do componente caso n\xE3o tenha
sido definido um `),n(750,"code"),e(751,"modalTitle"),t(),e(752," na propriedade "),n(753,"code"),e(754,"p-literals"),t(),e(755,"."),t()()()(),n(756,"tr",17)(757,"td",18)(758,"div",19)(759,"span",20),e(760," p-literals"),i(761,"br"),t()()(),n(762,"td",21)(763,"code",36),e(764,"PoLookupLiterals"),t()(),n(765,"td",23),e(766,"-"),t(),n(767,"td",24)(768,"p"),e(769,"Objeto com as literais usadas no "),n(770,"code"),e(771,"po-lookup"),t(),e(772,"."),t(),n(773,"p"),e(774,"Existem duas maneiras de customizar o componente, passando um objeto com todas as literais dispon\xEDveis:"),t(),n(775,"pre")(776,"code"),e(777,`const customLiterals: PoLookupLiterals = {
modalPrimaryActionLabel: 'Select',
modalSecondaryActionLabel: 'Cancel',
modalPlaceholder: 'Search Value',
modalTableNoColumns: 'No columns',
modalTableNoData: 'No data',
modalTableLoadingData: 'Loading data',
modalTableLoadMoreData: 'Load more',
modalTitle: 'Select a user',
modalAdvancedSearch: 'Advanced search',
modalAdvancedSearchTitle: 'Advanced search',
modalAdvancedSearchPrimaryActionLabel: 'Filter',
modalAdvancedSearchSecondaryActionLabel: 'Return',
modalDisclaimerGroupTitle: 'Presenting results filtered by:'
};`),t()(),n(778,"p"),e(779,"Ou passando apenas as literais que deseja customizar:"),t(),n(780,"pre")(781,"code"),e(782,`const customLiterals: PoLookupLiterals = {
modalPrimaryActionLabel: 'Select'
};`),t()(),n(783,"p"),e(784,"E para carregar as literais customizadas, basta apenas passar o objeto para o componente."),t(),n(785,"pre")(786,"code"),e(787,`<po-lookup
[p-literals]="customLiterals">
</po-lookup>`),t()(),n(788,"blockquote")(789,"p"),e(790,`O objeto padr\xE3o de literais ser\xE1 traduzido de acordo com o idioma do
`),n(791,"a",37)(792,"code"),e(793,"PoI18nService"),t()(),e(794," ou do browser."),t()()()(),n(795,"tr",17)(796,"td",18)(797,"div",19)(798,"span",20),e(799," p-multiple"),i(800,"br"),t()()(),n(801,"td",21)(802,"code",25),e(803,"boolean"),t()(),n(804,"td",23)(805,"p")(806,"code"),e(807,"false"),t()()(),n(808,"td",24)(809,"em")(810,"strong"),e(811,"(opcional)"),t()(),n(812,"p"),e(813,"Permite a sele\xE7\xE3o de m\xFAltiplos itens."),t(),n(814,"blockquote")(815,"p"),e(816,"Quando habilitado o valor do campo passar\xE1 a ser uma lista de valores, por exemplo: "),n(817,"code"),e(818,"[ 12345, 67890 ]"),t()()()()(),n(819,"tr",17)(820,"td",18)(821,"div",19)(822,"span",20),e(823," name"),i(824,"br"),t()()(),n(825,"td",21)(826,"code",30),e(827,"string"),t()(),n(828,"td",23),e(829,"-"),t(),n(830,"td",24)(831,"p"),e(832,"Nome e Id do componente."),t()()(),n(833,"tr",17)(834,"td",18)(835,"div",19)(836,"span",20),e(837," p-no-autocomplete"),i(838,"br"),t()()(),n(839,"td",21)(840,"code",25),e(841,"boolean"),t()(),n(842,"td",23)(843,"p")(844,"code"),e(845,"false"),t()()(),n(846,"td",24)(847,"em")(848,"strong"),e(849,"(opcional)"),t()(),n(850,"p"),e(851,"Define a propriedade nativa "),n(852,"code"),e(853,"autocomplete"),t(),e(854," do campo como "),n(855,"code"),e(856,"off"),t(),e(857,"."),t()()(),n(858,"tr",17)(859,"td",18)(860,"div",26)(861,"span",27),e(862," (p-error)"),i(863,"br"),t()()(),n(864,"td",21)(865,"code",28),e(866,"EventEmitter"),t()(),n(867,"td",23),e(868,"-"),t(),n(869,"td",24)(870,"p"),e(871,`Evento ser\xE1 disparado quando ocorrer algum erro na requisi\xE7\xE3o de busca do item.
Ser\xE1 passado por par\xE2metro o objeto de erro retornado.`),t()()(),n(872,"tr",17)(873,"td",18)(874,"div",19)(875,"span",20),e(876," p-optional"),i(877,"br"),t()()(),n(878,"td",21)(879,"code",25),e(880,"boolean"),t()(),n(881,"td",23)(882,"p")(883,"code"),e(884,"false"),t()()(),n(885,"td",24)(886,"em")(887,"strong"),e(888,"(opcional)"),t()(),n(889,"p"),e(890,"Define se a indica\xE7\xE3o de campo opcional ser\xE1 exibida."),t(),n(891,"blockquote")(892,"p"),e(893,"N\xE3o ser\xE1 exibida a indica\xE7\xE3o se:"),t()(),n(894,"ul")(895,"li"),e(896,"O campo conter "),n(897,"code"),e(898,"p-required"),t(),e(899,";"),t(),n(900,"li"),e(901,"N\xE3o possuir "),n(902,"code"),e(903,"p-help"),t(),e(904," e/ou "),n(905,"code"),e(906,"p-label"),t(),e(907,"."),t()()()(),n(908,"tr",17)(909,"td",18)(910,"div",19)(911,"span",20),e(912," p-placeholder"),i(913,"br"),t()()(),n(914,"td",21)(915,"code",30),e(916,"string"),t()(),n(917,"td",23),e(918,"-"),t(),n(919,"td",24)(920,"p"),e(921,"Mensagem que aparecer\xE1 enquanto o campo n\xE3o estiver preenchido."),t()()(),n(922,"tr",17)(923,"td",18)(924,"div",19)(925,"span",20),e(926," p-required"),i(927,"br"),t()()(),n(928,"td",21)(929,"code",25),e(930,"boolean"),t()(),n(931,"td",23)(932,"p")(933,"code"),e(934,"false"),t()()(),n(935,"td",24)(936,"em")(937,"strong"),e(938,"(opcional)"),t()(),n(939,"p"),e(940,"Define que o campo ser\xE1 obrigat\xF3rio."),t(),n(941,"blockquote")(942,"p"),e(943,"Esta propriedade \xE9 desconsiderada quando o input est\xE1 desabilitado "),n(944,"code"),e(945,"(p-disabled)"),t(),e(946,"."),t()()()(),n(947,"tr",17)(948,"td",18)(949,"div",26)(950,"span",27),e(951," (p-selected)"),i(952,"br"),t()()(),n(953,"td",21)(954,"code",28),e(955,"EventEmitter"),t()(),n(956,"td",23),e(957,"-"),t(),n(958,"td",24)(959,"em")(960,"strong"),e(961,"(opcional)"),t()(),n(962,"p"),e(963,`Evento ser\xE1 disparado quando ocorrer alguma sele\xE7\xE3o.
Ser\xE1 passado por par\xE2metro o objeto com o valor selecionado.`),t()()(),n(964,"tr",17)(965,"td",18)(966,"div",19)(967,"span",20),e(968," p-show-required"),i(969,"br"),t()()(),n(970,"td",21)(971,"code",25),e(972,"boolean"),t()(),n(973,"td",23),e(974,"-"),t(),n(975,"td",24)(976,"p"),e(977,"Define se a indica\xE7\xE3o de campo obrigat\xF3rio ser\xE9 exibida."),t(),n(978,"blockquote")(979,"p"),e(980,"N\xE3o ser\xE1 exibida a indica\xE7\xE3o se:"),t()(),n(981,"ul")(982,"li"),e(983,"N\xE3o possuir "),n(984,"code"),e(985,"p-help"),t(),e(986," e/ou "),n(987,"code"),e(988,"p-label"),t(),e(989,"."),t()()()(),n(990,"tr",17)(991,"td",18)(992,"div",19)(993,"span",20),e(994," p-spacing"),i(995,"br"),t()()(),n(996,"td",21)(997,"code",38),e(998,"PoTableColumnSpacing"),t()(),n(999,"td",23)(1e3,"p")(1001,"code"),e(1002,"medium"),t()()(),n(1003,"td",24)(1004,"em")(1005,"strong"),e(1006,"(opcional)"),t()(),n(1007,"p"),e(1008,"Respons\xE1vel por aplicar espa\xE7amento nas colunas da tabela contida no lookup."),t(),n(1009,"p"),e(1010,"Deve receber um dos valores do enum "),n(1011,"code"),e(1012,"PoTableColumnSpacing"),t(),e(1013,"."),t()()(),n(1014,"tr",17)(1015,"td",18)(1016,"div",19)(1017,"span",20),e(1018," p-text-wrap"),i(1019,"br"),t()()(),n(1020,"td",21)(1021,"code",25),e(1022,"boolean"),t()(),n(1023,"td",23)(1024,"p")(1025,"code"),e(1026,"false"),t()()(),n(1027,"td",24)(1028,"em")(1029,"strong"),e(1030,"(opcional)"),t()(),n(1031,"p"),e(1032,`Habilita ou desabilita a quebra autom\xE1tica de texto. Quando ativada, o texto que excede
o espa\xE7o dispon\xEDvel \xE9 transferido para a pr\xF3xima linha em pontos apropriados para uma
leitura clara.`),t(),n(1033,"p"),e(1034,"Esta propriedade aplica-se ao texto contido nas c\xE9lulas da tabela."),t(),n(1035,"blockquote")(1036,"p"),e(1037,"Incompat\xEDvel com "),n(1038,"code"),e(1039,"virtual-scroll"),t(),e(1040,", que requer altura fixa nas linhas."),t()()()(),n(1041,"tr",17)(1042,"td",18)(1043,"div",19)(1044,"span",20),e(1045," p-virtual-scroll"),i(1046,"br"),t()()(),n(1047,"td",21)(1048,"code",25),e(1049,"boolean"),t()(),n(1050,"td",23)(1051,"p")(1052,"code"),e(1053,"true"),t()()(),n(1054,"td",24)(1055,"em")(1056,"strong"),e(1057,"(opcional)"),t()(),n(1058,"p"),e(1059,"Habilita o "),n(1060,"code"),e(1061,"virtual-scroll"),t(),e(1062,` na tabela para melhorar a performance com grandes volumes de dados.
A altura da tabela j\xE1 \xE9 pr\xE9-definida, portanto o `),n(1063,"code"),e(1064,"virtual-scroll"),t(),e(1065," ser\xE1 ativado automaticamente."),t(),n(1066,"blockquote")(1067,"p"),e(1068,"Incompat\xEDvel com "),n(1069,"code"),e(1070,"p-text-wrap"),t(),e(1071," e "),n(1072,"code"),e(1073,"master-detail"),t(),e(1074,", pois o "),n(1075,"code"),e(1076,"virtual-scroll"),t(),e(1077," exige altura fixa nas linhas."),t()()()()(),n(1078,"h3",13),e(1079,"M\xE9todos"),t(),n(1080,"table",39)(1081,"tr",17)(1082,"th",40)(1083,"div",19)(1084,"h4")(1085,"span",20),e(1086," focus "),t()()()()(),n(1087,"tr",24)(1088,"td",24)(1089,"p"),e(1090,"Fun\xE7\xE3o que atribui foco ao componente."),t(),n(1091,"p"),e(1092,"Para utiliz\xE1-la \xE9 necess\xE1rio ter a inst\xE2ncia do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:"),t(),n(1093,"pre")(1094,"code"),e(1095,`import { PoLookupComponent } from '@po-ui/ng-components';
...
@ViewChild(PoLookupComponent, { static: true }) lookup: PoLookupComponent;
focusLookup() {
this.lookup.focus();
}`),t()()()()(),i(1096,"br"),n(1097,"h3"),e(1098,"Interfaces"),t(),n(1099,"h4",41)(1100,"code",5),e(1101,"PoLookupAdvancedFilter"),t()(),n(1102,"div",2)(1103,"p"),e(1104," Interface para defini\xE7\xE3o das propriedades dos campos de entrada que ser\xE3o criados dinamicamente. "),t()(),n(1105,"h4",13),e(1106,"Propriedades"),t(),n(1107,"table",14)(1108,"tr",15)(1109,"th",16),e(1110,"Nome"),t(),n(1111,"th",16),e(1112,"Tipo"),t(),n(1113,"th",16),e(1114,"Descri\xE7\xE3o"),t()(),n(1115,"tr",17)(1116,"td",18)(1117,"div",19)(1118,"span",20),e(1119," advancedFilters"),i(1120,"br"),t()()(),n(1121,"td",21)(1122,"code",22),e(1123,"Array<PoLookupAdvancedFilter>"),t()(),n(1124,"td",24)(1125,"em")(1126,"strong"),e(1127,"(opcional)"),t()(),n(1128,"p"),e(1129,"Lista de objetos dos campos que ser\xE3o criados na busca avan\xE7ada."),t(),n(1130,"blockquote")(1131,"p"),e(1132,"Caso n\xE3o seja passado um objeto ou ent\xE3o ele esteja em branco o link de busca avan\xE7ada ficar\xE1 escondido."),t()(),n(1133,"p"),e(1134,"Exemplo de URL com busca avan\xE7ada:"),t(),n(1135,"p")(1136,"code"),e(1137,"url + ?page=1&pageSize=20&name=Tony%20Stark&nickname=Homem%20de%20Ferro"),t()(),n(1138,"p"),e(1139,"Caso algum par\xE2metro seja uma lista, a concatena\xE7\xE3o \xE9 feita utilizando v\xEDrgula. Exemplo:"),t(),n(1140,"p")(1141,"code"),e(1142,"url + ?page=1&pageSize=20&name=Tony%20Stark,Peter%20Parker,Gohan"),t()()()(),n(1143,"tr",17)(1144,"td",18)(1145,"div",19)(1146,"span",20),e(1147," autoHeight"),i(1148,"br"),t()()(),n(1149,"td",21)(1150,"code",25),e(1151,"boolean"),t()(),n(1152,"td",24)(1153,"em")(1154,"strong"),e(1155,"(opcional)"),t()(),n(1156,"p"),e(1157,"Define que a altura do componente ser\xE1 auto ajust\xE1vel, possuindo uma altura minima por\xE9m a altura m\xE1xima ser\xE1 de acordo com o n\xFAmero de itens selecionados e a extens\xE3o dos mesmos, mantendo-os sempre vis\xEDveis."),t(),n(1158,"p")(1159,"strong"),e(1160,"Componentes compat\xEDveis:"),t(),n(1161,"code"),e(1162,"po-multiselect"),t(),e(1163,", "),n(1164,"code"),e(1165,"po-lookup"),t(),e(1166,"."),t()()(),n(1167,"tr",17)(1168,"td",18)(1169,"div",19)(1170,"span",20),e(1171," autoUpload"),i(1172,"br"),t()()(),n(1173,"td",21)(1174,"code",25),e(1175,"boolean"),t()(),n(1176,"td",24)(1177,"em")(1178,"strong"),e(1179,"(opcional)"),t()(),n(1180,"p"),e(1181,"Define se o envio do arquivo ser\xE1 autom\xE1tico ao selecionar o mesmo."),t(),n(1182,"p")(1183,"strong"),e(1184,"Componente compat\xEDvel"),t(),e(1185,": "),n(1186,"code"),e(1187,"po-upload"),t()()()(),n(1188,"tr",17)(1189,"td",18)(1190,"div",19)(1191,"span",20),e(1192," booleanFalse"),i(1193,"br"),t()()(),n(1194,"td",21)(1195,"code",30),e(1196,"string"),t()(),n(1197,"td",24)(1198,"em")(1199,"strong"),e(1200,"(opcional)"),t()(),n(1201,"p"),e(1202,"Texto exibido quando o valor do componente for "),n(1203,"em"),e(1204,"false"),t(),e(1205,"."),t()()(),n(1206,"tr",17)(1207,"td",18)(1208,"div",19)(1209,"span",20),e(1210," booleanTrue"),i(1211,"br"),t()()(),n(1212,"td",21)(1213,"code",30),e(1214,"string"),t()(),n(1215,"td",24)(1216,"em")(1217,"strong"),e(1218,"(opcional)"),t()(),n(1219,"p"),e(1220,"Texto exibido quando o valor do componente for "),n(1221,"em"),e(1222,"true"),t(),e(1223,"."),t()()(),n(1224,"tr",17)(1225,"td",18)(1226,"div",19)(1227,"span",20),e(1228," changeOnEnter"),i(1229,"br"),t()()(),n(1230,"td",21)(1231,"code",25),e(1232,"boolean"),t()(),n(1233,"td",24)(1234,"em")(1235,"strong"),e(1236,"(opcional)"),t()(),n(1237,"p"),e(1238,"Indica que o evento "),n(1239,"code"),e(1240,"p-change"),t(),e(1241,' s\xF3 ser\xE1 disparado ao clicar ou pressionar a tecla "Enter" sobre uma op\xE7\xE3o selecionada no '),n(1242,"code"),e(1243,"po-combo"),t(),e(1244,"."),t()()(),n(1245,"tr",17)(1246,"td",18)(1247,"div",19)(1248,"span",20),e(1249," changeVisibleColumns"),i(1250,"br"),t()()(),n(1251,"td",21)(1252,"code",42),e(1253,"Function"),t()(),n(1254,"td",24)(1255,"em")(1256,"strong"),e(1257,"(opcional)"),t()(),n(1258,"p"),e(1259,"Evento disparado ao fechar o popover do gerenciador de colunas ap\xF3s alterar as colunas vis\xEDveis."),t(),n(1260,"p"),e(1261,`O componente envia como par\xE2metro um array de string com as colunas vis\xEDveis atualizadas.
Por exemplo: ["idCard", "name", "hireStatus", "age"].`),t(),n(1262,"p")(1263,"strong"),e(1264,"Componentes compat\xEDveis"),t(),e(1265,": "),n(1266,"code"),e(1267,"po-lookup"),t()()()(),n(1268,"tr",17)(1269,"td",18)(1270,"div",19)(1271,"span",20),e(1272," clean"),i(1273,"br"),t()()(),n(1274,"td",21)(1275,"code",25),e(1276,"boolean"),t()(),n(1277,"td",24)(1278,"em")(1279,"strong"),e(1280,"(opcional)"),t()(),n(1281,"p"),e(1282,"Se verdadeiro, o campo receber\xE1 um bot\xE3o para ser limpo."),t(),n(1283,"p")(1284,"strong"),e(1285,"Componentes compat\xEDveis:"),t(),n(1286,"code"),e(1287,"po-datepicker"),t(),e(1288,", "),n(1289,"code"),e(1290,"po-datepicker-range"),t(),e(1291,", "),n(1292,"code"),e(1293,"po-input"),t(),e(1294,", "),n(1295,"code"),e(1296,"po-number"),t(),e(1297,", "),n(1298,"code"),e(1299,"po-decimal"),t(),e(1300,", "),n(1301,"code"),e(1302,"po-combo"),t(),e(1303,", "),n(1304,"code"),e(1305,"po-lookup"),t(),e(1306,", "),n(1307,"code"),e(1308,"po-password"),t()()()(),n(1309,"tr",17)(1310,"td",18)(1311,"div",19)(1312,"span",20),e(1313," columnRestoreManager"),i(1314,"br"),t()()(),n(1315,"td",21)(1316,"code",42),e(1317,"Function"),t()(),n(1318,"td",24)(1319,"em")(1320,"strong"),e(1321,"(opcional)"),t()(),n(1322,"p"),e(1323,"Evento disparado ao clicar no bot\xE3o de restaurar padr\xE3o no gerenciador de colunas."),t(),n(1324,"p"),e(1325,`O componente envia como par\xE2metro um array de string com as colunas configuradas inicialmente.
Por exemplo: ["idCard", "name", "hireStatus", "age"].`),t(),n(1326,"p")(1327,"strong"),e(1328,"Componentes compat\xEDveis"),t(),e(1329,": "),n(1330,"code"),e(1331,"po-lookup"),t()()()(),n(1332,"tr",17)(1333,"td",18)(1334,"div",19)(1335,"span",20),e(1336," columns"),i(1337,"br"),t()()(),n(1338,"td",21)(1339,"code",29),e(1340,"Array<PoLookupColumn> "),t(),n(1341,"code",43),e(1342," number"),t()(),n(1343,"td",24)(1344,"em")(1345,"strong"),e(1346,"(opcional)"),t()(),n(1347,"p"),e(1348,"Define as colunas para utiliza\xE7\xE3o da busca avan\xE7ada. Usada somente em conjunto com a propriedade "),n(1349,"code"),e(1350,"searchService"),t(),e(1351,`,
essa propriedade deve receber um array de objetos que implementam a interface `),n(1352,"a",44)(1353,"code"),e(1354,"PoLookupColumn"),t()(),e(1355,"."),t(),n(1356,"blockquote")(1357,"p"),e(1358,"Caso sejam informadas colunas, deve-se obrigatoriamente conter colunas definidas como "),n(1359,"em"),e(1360,"label"),t(),e(1361," e "),n(1362,"em"),e(1363,"value"),t(),e(1364,` para valores