import{a as l}from"./chunk-VGRXCTXL.js";import"./chunk-4G57JG5N.js";import"./chunk-MJMWESWV.js";import{c as A,d as W}from"./chunk-C2WGQZZS.js";import{a as N}from"./chunk-4NKYXKKW.js";import"./chunk-LNWF7VZ2.js";import{d as L}from"./chunk-T6NRFYFX.js";import"./chunk-RQCMKSAN.js";import"./chunk-JI65IOIM.js";import{O as d,j as V,l as R,s as k}from"./chunk-57DG2VC5.js";import"./chunk-NMMBNW5X.js";import"./chunk-5IDV7BCW.js";import"./chunk-CVFNZXIB.js";import"./chunk-EU5XKS65.js";import"./chunk-XALE2GEX.js";import"./chunk-GJIGZB63.js";import"./chunk-TOJME4VO.js";import"./chunk-2CD72B3Z.js";import"./chunk-4TDNJBFX.js";import"./chunk-4LZAXRJQ.js";import"./chunk-XHRSSCXW.js";import{a as G}from"./chunk-5VDVFGVW.js";import{p as T}from"./chunk-NLMVBXFK.js";import"./chunk-BUHB7MLU.js";import"./chunk-KUS3L5XF.js";import{Ba as g,Bc as i,Ca as b,Cc as y,Cd as D,Dc as w,Eb as F,Fb as C,Fd as O,Kb as f,Rc as _,Sc as E,Vb as s,Vc as I,a as u,cc as n,dc as t,ec as v,ic as S,la as h,lc as M,nc as c,rb as r,td as P}from"./chunk-J476KISY.js";function $(o,x){if(o&1&&(n(0,"li",22)(1,"span",23),i(2),t(),i(3),t()),o&2){let e=x.$implicit;r(2),y(e.name),r(),w(" by ",e.person.name," ")}}function z(o,x){if(o&1){let e=S();n(0,"div",1)(1,"div",2)(2,"div",3)(3,"span"),i(4,"Filters"),t()(),n(5,"p"),i(6," To use PAW Filters we must first import "),n(7,"code"),i(8,"FiltersModule"),t(),i(9,". "),t(),n(10,"p"),i(11,"Use in template:"),t(),n(12,"textarea",4),i(13,`<paw-filters
  [fields]="myFilterFields"
  [filterModel]="myFilter"
  (filter)="onFilter($event)"
></paw-filters>
        `),t(),n(14,"p"),i(15,"Provide filter fields, filter model and filter event:"),t(),n(16,"textarea",5),i(17,`...
myFilterFields:InputField[] = [
  {
    id: 'search',
    component: InputTextComponent,
    label: 'SearchShort',
    icon: 'far fa-search',
  },
  <InputSelectField<any>>{
    id: 'people',
    component: InputSelectComponent,
    label: 'People',
    options: this.exampleData.people,
    multiselect: true,
    labelMapper: (opt) => {
      return opt.name;
    },
    valueMapper: (opt) => {
      return opt.id;
    },
  },
  {
    id: 'date',
    component: InputDateComponent,
    label: 'Date',
  },
];
...
myFilter:MyFilterModel = {
  search: '',
  people: [],
  date: ...,
};
...
onFilter(myFilter){
  ...
  // filter data
}
        `),t(),n(18,"p"),i(19," If working with data grid async. data loading, reload data via PAW Datagrid API: "),t(),n(20,"textarea",6),i(21,`...
onFilter(myFilter:MyFilterModel){
  // when working with Web API
  this.grid?.reloadData();
}
...
        `),t(),n(22,"p"),i(23," Or filter records, for example locally, or call Web API, which filters items based on provided filter data. "),t(),n(24,"textarea",7),i(25,`...
onFilter(myFilter:MyFilterModel){
  // when working with local records
  this.records = pseudoExampleFilter((item) => {
    // match by criterias
    ...
  });
}
...
        `),t(),n(26,"p"),i(27,"Additionally we can provide predefined filters configuration:"),t(),n(28,"textarea",7),i(29,`<paw-filters
  ...
  [filtersConfig]="myFiltersConfig"
  ...
></paw-filters>
        `),t(),n(30,"textarea",8),i(31,`myFiltersConfig:PawFiltersConfig = {
  search: {
    isPinned: true,
  },
  people: {
    isPinned: true,
  },
  date: {
    isPinned: false,
  },
}
        `),t()(),n(32,"div",9)(33,"div",10)(34,"paw-filters",11),M("filter",function(p){g(e);let m=c();return b(m.example.onFilter(p))}),t()(),n(35,"div",12)(36,"div",13)(37,"div",14)(38,"span"),i(39,"Rendered as datagrid"),t()(),n(40,"div",15),v(41,"paw-datagrid",16),t()(),n(42,"div",17)(43,"div",14)(44,"span"),i(45,"Rendered as plain list"),t()(),n(46,"ul",18),f(47,$,4,2,"li",19),t()(),n(48,"div",20)(49,"div")(50,"span"),i(51,"Filter model:"),t()(),n(52,"div")(53,"textarea",21),i(54),_(55,"json"),t()()()()()()}if(o&2){let e=c();r(34),s("fields",e.example.fields)("filterModel",e.example.model)("filtersConfig",e.example.config),r(7),s("cols",e.columns)("records",e.filteredItems),r(6),s("ngForOf",e.filteredItems),r(7),w("",E(55,7,e.example.model),`
      `)}}var j=(()=>{class o{constructor(){this.exampleData={people:l.randomItems(e=>({id:e+1,name:l.randomFullName()}),5,10)},this.example={fields:[{id:"search",component:V,label:"SearchShort",icon:"far fa-search"},{id:"people",component:R,label:"People",options:this.exampleData.people,multiselect:!0,labelMapper:e=>e.name,valueMapper:e=>e.id},{id:"date",component:k,label:"Date"}],model:{search:"",people:[],date:l.randomIsoDatePast()},config:{search:{isPinned:!0},people:{isPinned:!0},date:{isPinned:!1}},onFilter:e=>{this.example.model=e,this.filteredItems=G.filter(this.items,a=>{let p=e.search.length===0||a.name.toLowerCase().indexOf(e.search.toLowerCase())>-1||a.person.name.toLowerCase().indexOf(e.search.toLowerCase())>-1,m=e.people.length===0||e.people.length>0&&e.people.indexOf(a.person.id)>-1;return p&&m})}},this.items=l.randomItems(e=>{let a=l.randomItem(this.exampleData.people);return{id:e,name:l.randomCity(),person:u({},a)}},10,15),this.filteredItems=[...this.items],this.columns=[{id:"name",label:"City"},{id:"person",label:"Visited by",transform:e=>e.name}]}static{this.\u0275fac=function(a){return new(a||o)}}static{this.\u0275cmp=F({type:o,selectors:[["paw-sb-guide-filters"]],standalone:!1,decls:3,vars:0,consts:[["contentTpl",""],[1,"paw-area-h","paw-holder","paw-nooverflow"],[1,"paw-col","paw-col-6","paw-scrollable","paw-offset-left","paw-offset-right"],[1,"paw-text-l","paw-offset-top"],["disabled","","rows","6",1,"sb-example-code"],["disabled","","rows","40",1,"sb-example-code"],["disabled","","rows","8",1,"sb-example-code"],["disabled","","rows","10",1,"sb-example-code"],["disabled","","rows","12",1,"sb-example-code"],[1,"paw-col","paw-col-6","paw-offset-top","paw-offset-right"],[1,"paw-offset-left","paw-offset-right","paw-offset-top-s","paw-offset-bottom-s","paw-color-content-bg"],[3,"filter","fields","filterModel","filtersConfig"],[1,"paw-area-h","paw-offset","paw-wrap"],[1,"paw-col","paw-col-6"],[1,"paw-offset-bottom-s"],[2,"height","400px"],[3,"cols","records"],[1,"paw-col","paw-col-6","paw-offset-left","paw-offset-right"],[1,"paw-list"],["class","paw-offset-top-s paw-offset-bottom-s",4,"ngFor","ngForOf"],[1,"paw-col","paw-col-12","paw-offset-top"],["disabled","","rows","20",1,"sb-example-code"],[1,"paw-offset-top-s","paw-offset-bottom-s"],[1,"paw-text-strong"]],template:function(a,p){a&1&&(n(0,"paw-main-view"),f(1,z,56,9,"ng-template",null,0,I),t())},dependencies:[P,L,A,d,D],styles:["[_nghost-%COMP%]   .sb-example-podium[_ngcontent-%COMP%]{padding:16px;border:1px solid var(--paw-color-divider);border-radius:6px;min-width:600px}[_nghost-%COMP%]   .sb-example-podium[_ngcontent-%COMP%]:not(.sb-example-podium-auto){height:400px}[_nghost-%COMP%]   .sb-example-code[_ngcontent-%COMP%]{width:100%;resize:none;padding:4px}[_nghost-%COMP%]   code[_ngcontent-%COMP%]{color:#8d0101;padding:4px;background:var(--paw-color-page-bg);border-radius:4px}"]})}}return o})();var pe=(()=>{class o{static{this.\u0275fac=function(a){return new(a||o)}}static{this.\u0275mod=C({type:o})}static{this.\u0275inj=h({imports:[O,N,W,d,T.forChild([{path:"",component:j}])]})}}return o})();export{pe as SbGuideFiltersModule};
