chunk-7R5ESCP6.js

import{$ as r,Ga as e,Od as E,T as c,U as d,Wb as x,Xd as h,Yb as b,Yd as g,Zb as f,_ as m,ha as s,na as o,oa as t,pa as u,re as S,se as M,y as p}from"./chunk-TZ5FQAUY.js";var D=(()=>{class i{static \u0275fac=function(n){return new(n||i)};static \u0275cmp=m({type:i,selectors:[["sample-po-multiselect-option-template-doc"]],standalone:!1,decls:61,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"],[1,"docs-api-directive-selectors"],[1,"docs-api-class-selector-label"],["appCodeHighlight",""]],template:function(n,l){n&1&&(o(0,"div",0)(1,"p",1)(2,"code"),e(3,"import { PoFieldModule } from '@po-ui/ng-components';"),t()(),o(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(),o(7,"blockquote")(8,"p"),e(9,"N\xE3o esque\xE7a de importar o m\xF3dulo "),o(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 `),o(13,"code"),e(14,"ReactiveFormsModule"),t(),e(15,", ambos nativos do Angular."),t()()(),o(16,"h3",3),e(17,"Componente"),t(),o(18,"h4",4)(19,"code",5),e(20,"PoMultiselectOptionTemplateDirective"),t()(),o(21,"div",2)(22,"p"),e(23,"Esta diretiva permite personalizar o conte\xFAdo dos itens exibidos na lista de op\xE7\xF5es do componente."),t(),o(24,"p"),e(25,"Para personalizar o conte\xFAdo de cada item da lista deve-se utilizar a diretiva "),o(26,"code"),e(27,"p-multiselect-option-template"),t(),e(28," com "),o(29,"code"),e(30,"ng-template"),t(),e(31,`
dentro da `),o(32,"em"),e(33,"tag"),t(),o(34,"code"),e(35,"po-multiselect"),t(),e(36,", o seu array de "),o(37,"code"),e(38,"p-options"),t(),e(39," repassado para com componente deve conter a propriedade "),o(40,"code"),e(41,"value"),t(),e(42," e "),o(43,"code"),e(44,"label"),t(),e(45,"."),t(),o(46,"p"),e(47,"Para obter a refer\xEAncia do item atual utilize "),o(48,"code"),e(49,"let-option"),t(),e(50,", com isso voc\xEA ter\xE1 acesso aos valores e poder\xE1 personalizar sua exibi\xE7\xE3o."),t(),o(51,"p"),e(52,"Exemplo de uso:"),t(),o(53,"pre")(54,"code"),e(55,`...
<po-multiselect
  name="multiselect"
  [(ngModel)]="multiselect"
  [p-options]="options"
  [p-hide-select-all]="true">
    <ng-template p-multiselect-option-template let-option>
       <!-- template customizado -->
      <div class="po-font-text-large-bold" [innerHtml]="option.label"></div>
      <!-- template customizado -->
    </ng-template>
</po-multiselect>
...`),t()()(),o(56,"div",6)(57,"h4",7),e(58,"Seletor"),t(),o(59,"pre",8),e(60,`<[p-multiselect-option-template] >
</[p-multiselect-option-template]>
`),t()()())},dependencies:[S],encapsulation:2})}return i})();var P=(()=>{class i{route;router;sub;hidePoWebSample=!0;samplesLength=0;activeTab="doc";actions=[{label:"Documenta\xE7\xE3o",action:this.goBack.bind(this),icon:"ph ph-file-text"},{label:"Colabore",action:this.improveDocs.bind(this)}];constructor(a,n){this.route=a,this.router=n}goBack(){this.router.navigate(["documentation"])}improveDocs(){this.router.navigate(["guides/development-flow"])}ngOnInit(){this.sub=this.route.queryParams.subscribe(a=>{let n=a.view;this.activeTab=n||"doc",this.hidePoWebSample=this.samplesLength===0})}ngOnDestroy(){this.sub.unsubscribe()}static \u0275fac=function(n){return new(n||i)(d(x),d(b))};static \u0275cmp=m({type:i,selectors:[["ng-component"]],standalone:!1,decls:5,vars:4,consts:[["p-title"," Multiselect Option Template",3,"p-actions"],["p-size","1"],["p-label","Documenta\xE7\xE3o",3,"p-active"],["p-label","Exemplos",3,"p-hide","p-active"]],template:function(n,l){n&1&&(o(0,"po-page-default",0)(1,"po-tabs",1)(2,"po-tab",2),u(3,"sample-po-multiselect-option-template-doc"),t(),u(4,"po-tab",3),t()()),n&2&&(s("p-actions",l.actions),c(2),s("p-active",l.activeTab.includes("doc")),c(2),s("p-hide",l.hidePoWebSample)("p-active",l.activeTab.includes("web")))},dependencies:[E,h,g,D],encapsulation:2})}return i})();var y=[{path:"",component:P}],T=(()=>{class i{static \u0275fac=function(n){return new(n||i)};static \u0275mod=r({type:i});static \u0275inj=p({imports:[f.forChild(y),f]})}return i})();var B=(()=>{class i{static \u0275fac=function(n){return new(n||i)};static \u0275mod=r({type:i});static \u0275inj=p({imports:[M,T]})}return i})();export{B as DocPoMultiselectOptionTemplateModule};