32562.15591958eea02644.js

(self.webpackChunkdemo=self.webpackChunkdemo||[]).push([[32562],{32562:(t,e,n)=>{n.r(e),n.d(e,{default:()=>U});var o,i=n(97270),a=n(87742),r=n(56559),c=n(19908),u=n(56366),s=n(14027),d=n(43449),l=n(69291),p=n(92959),m=n(75407),h=n(73764),F=n(30108),f=n(33082),y=n(78567),g=n(85149),b=n(48032),E=n(18331),V=n(89186),j=n(16727),w=n(68126),P=n(96692),k=n(36626),x=n(25751),C=n(90195),M=n(47268);const T=["valueTemplateContent"];function v(t,e){1&t&&(m.EFF(0," You can use "),m.j41(1,"code"),m.EFF(2,"ComboBox"),m.k0s(),m.EFF(3," with "),m.j41(4,"code"),m.EFF(5,"ScrollingModule"),m.k0s(),m.EFF(6," from "),m.j41(7,"a",13),m.EFF(8," @angular/cdk/scrolling "),m.k0s(),m.EFF(9," . "))}function D(t,e){if(1&t&&(m.j41(0,"div",2)(1,"code"),m.EFF(2,"ComboBox"),m.k0s(),m.EFF(3," is a textfield with a dropdown with items. You can choose one of available options or input a value manually. "),m.k0s(),m.j41(4,"tui-doc-example",3),m.nI1(5,"tuiComponent"),m.nI1(6,"tuiExample"),m.j41(7,"tui-notification",4),m.EFF(8," If you need to set some attributes or listen to events on native "),m.j41(9,"code"),m.EFF(10,"input"),m.k0s(),m.EFF(11," , you can put it inside with "),m.j41(12,"code"),m.EFF(13,"Textfield"),m.k0s(),m.EFF(14," directive as shown below "),m.k0s()(),m.nrm(15,"tui-doc-example",5),m.nI1(16,"tuiComponent"),m.j41(17,"tui-doc-example",6),m.nI1(18,"tuiComponent"),m.nI1(19,"tuiExample"),m.j41(20,"tui-notification",4),m.EFF(21," If you receive your id to text mapping from the server, you would need to recreate "),m.j41(22,"code"),m.EFF(23,"items"),m.k0s(),m.EFF(24," and "),m.j41(25,"code"),m.EFF(26,"stringify"),m.k0s(),m.EFF(27," when new data comes, so they will be observables and you would need async pipe in the template "),m.k0s()(),m.nrm(28,"tui-doc-example",7),m.nI1(29,"tuiComponent"),m.nI1(30,"tuiExample"),m.nrm(31,"tui-doc-example",8),m.nI1(32,"tuiComponent"),m.nI1(33,"tuiExample"),m.j41(34,"tui-doc-example",9),m.nI1(35,"tuiComponent"),m.DNE(36,v,10,0,"ng-template",null,10,m.C5r),m.j41(38,"tui-notification",2),m.EFF(39," Note that virtual scroll can imperatively remove focused option from DOM. This causes ExpressionChange errors and to solve those take a look at a tiny "),m.j41(40,"code"),m.EFF(41,"IndexChange"),m.k0s(),m.EFF(42," directive included in this example. "),m.k0s()(),m.nrm(43,"tui-doc-example",11),m.nI1(44,"tuiComponent"),m.nI1(45,"tuiExample"),m.nrm(46,"tui-doc-example",12),m.nI1(47,"tuiComponent"),m.nI1(48,"tuiExample")),2&t){const t=m.XpG();m.R7$(4),m.Y8G("component",m.bMT(5,16,1))("content",m.i5U(6,18,1,"html,ts,less")),m.R7$(11),m.Y8G("component",m.bMT(16,21,2))("content",t.example2),m.R7$(2),m.Y8G("component",m.bMT(18,23,8))("content",m.i5U(19,25,8,"html,ts")),m.R7$(11),m.Y8G("component",m.bMT(29,28,3))("content",m.i5U(30,30,3,"html,ts")),m.R7$(3),m.Y8G("component",m.bMT(32,33,4))("content",m.i5U(33,35,4,"html,ts")),m.R7$(3),m.Y8G("component",m.bMT(35,38,5))("content",t.example5),m.R7$(9),m.Y8G("component",m.bMT(44,40,6))("content",m.i5U(45,42,6,"html,ts")),m.R7$(3),m.Y8G("component",m.bMT(47,45,7))("content",m.i5U(48,47,7,"html,ts"))}}function G(t,e){if(1&t&&m.nrm(0,"tui-data-list-wrapper",27),2&t){const t=m.XpG(3);m.Y8G("items",t.filter(t.search))}}function I(t,e){if(1&t){const t=m.RV6();m.j41(0,"tui-combo-box",25),m.bIt("searchChange",(function(e){m.eBV(t);const n=m.XpG(2);return m.Njj(n.search=e)}))("tuiDropdownOpenChange",(function(e){m.eBV(t);const n=m.XpG(2);return m.Njj(n.dropdownOpen.next(e))})),m.nI1(1,"async"),m.EFF(2," Choose an account "),m.DNE(3,G,1,1,"tui-data-list-wrapper",26),m.k0s()}if(2&t){const t=m.XpG(2);m.Y8G("focusable",t.focusable)("formControl",t.control)("identityMatcher",t.identityMatcher)("pseudoActive",t.pseudoPressed)("pseudoFocus",t.pseudoFocused)("pseudoHover",t.pseudoHovered)("pseudoInvalid",t.pseudoInvalid)("readOnly",t.readOnly)("strict",t.strict)("strictMatcher",t.strictMatcher)("stringify",t.stringify)("tuiDropdownAlign",t.dropdownAlign)("tuiDropdownDirection",t.dropdownDirection)("tuiDropdownLimitWidth",t.dropdownLimitWidth)("tuiDropdownMaxHeight",t.dropdownMaxHeight)("tuiDropdownMinHeight",t.dropdownMinHeight)("tuiDropdownOffset",t.dropdownOffset)("tuiDropdownOpen",!!m.bMT(1,28,t.dropdownOpen))("tuiHintAppearance",t.hintAppearance)("tuiHintContent",t.hintContent)("tuiHintDirection",t.hintDirection)("tuiTextfieldCleaner",t.cleaner)("tuiTextfieldFiller",t.filler)("tuiTextfieldIconLeft",t.iconStart)("tuiTextfieldLabelOutside",t.labelOutside)("tuiTextfieldSize",t.size)("valueContent",t.valueContent)("search",t.search)}}function N(t,e){if(1&t&&(m.j41(0,"div",28),m.nrm(1,"tui-icon",29),m.j41(2,"span"),m.EFF(3),m.k0s()()),2&t){const t=e.$implicit;m.R7$(3),m.JRh(t)}}function R(t,e){1&t&&(m.EFF(0," Disabled state (use "),m.j41(1,"code"),m.EFF(2,"formControl.disable()"),m.k0s(),m.EFF(3," ) "))}function S(t,e){1&t&&(m.EFF(0," Textfield value to subscribe on input or setting it from the outside (emits "),m.j41(1,"code"),m.EFF(2,"null"),m.k0s(),m.EFF(3," when item from list selected) "))}function Y(t,e){1&t&&(m.EFF(0," A function that compares search and value to define a match between them. "),m.j41(1,"strong"),m.EFF(2,"Must be a pure function"),m.k0s())}function $(t,e){1&t&&(m.EFF(0," Value must only be an item of suggestions  "),m.nrm(1,"code",30),m.j41(2,"p")(3,"strong"),m.EFF(4," When "),m.j41(5,"code"),m.EFF(6,"false"),m.k0s(),m.EFF(7," , make sure your handlers, such as "),m.j41(8,"code"),m.EFF(9,"stringify"),m.k0s(),m.EFF(10," can handle "),m.j41(11,"code"),m.EFF(12,"string"),m.k0s(),m.EFF(13," value, as well as "),m.nrm(14,"code",30),m.k0s()()),2&t&&(m.R7$(1),m.Y8G("textContent","<T>"),m.R7$(13),m.Y8G("textContent","<T>"))}function H(t,e){1&t&&(m.EFF(0," A function that compares search text and item to define a match between them. Lowercase string comparison function by default. "),m.j41(1,"strong"),m.EFF(2,"Should be a pure function"),m.k0s())}function O(t,e){1&t&&(m.EFF(0," A function that transforms object into a string. "),m.j41(1,"code"),m.EFF(2,"String(value)"),m.k0s(),m.EFF(3," by default. "),m.j41(4,"strong"),m.EFF(5,"Should be a pure function"),m.k0s())}function B(t,e){1&t&&m.EFF(0," A template for custom view of selected value ")}function A(t,e){if(1&t){const t=m.RV6();m.j41(0,"tui-doc-demo",14),m.DNE(1,I,4,30,"ng-template"),m.k0s(),m.DNE(2,N,4,1,"ng-template",null,15,m.C5r),m.j41(4,"div")(5,"p"),m.EFF(6," Set a value with copied object from items to check "),m.j41(7,"code"),m.EFF(8,"identityMatcher"),m.k0s(),m.EFF(9," : "),m.k0s(),m.j41(10,"button",16),m.bIt("click",(function(){m.eBV(t);const e=m.XpG();return m.Njj(e.setValue())})),m.EFF(11," Set "),m.k0s()(),m.j41(12,"tui-doc-documentation"),m.DNE(13,R,4,0,"ng-template",17),m.bIt("documentationPropertyValueChange",(function(e){m.eBV(t);const n=m.XpG();return m.Njj(n.disabled=e)})),m.DNE(14,S,4,0,"ng-template",18),m.bIt("documentationPropertyValueChange",(function(e){m.eBV(t);const n=m.XpG();return m.Njj(n.search=e)})),m.DNE(15,Y,3,0,"ng-template",19),m.bIt("documentationPropertyValueChange",(function(e){m.eBV(t);const n=m.XpG();return m.Njj(n.identityMatcher=e)})),m.DNE(16,$,15,2,"ng-template",20),m.bIt("documentationPropertyValueChange",(function(e){m.eBV(t);const n=m.XpG();return m.Njj(n.strict=e)})),m.DNE(17,H,3,0,"ng-template",21),m.bIt("documentationPropertyValueChange",(function(e){m.eBV(t);const n=m.XpG();return m.Njj(n.strictMatcher=e)})),m.DNE(18,O,6,0,"ng-template",22),m.bIt("documentationPropertyValueChange",(function(e){m.eBV(t);const n=m.XpG();return m.Njj(n.stringify=e)})),m.DNE(19,B,1,0,"ng-template",23),m.bIt("documentationPropertyValueChange",(function(e){m.eBV(t);const n=m.XpG();return m.Njj(n.selectedValueTemplate=e)})),m.k0s(),m.nrm(20,"inherited-documentation",24)}if(2&t){const t=m.XpG();m.Y8G("control",t.control),m.R7$(13),m.Y8G("documentationPropertyValue",t.disabled),m.R7$(1),m.Y8G("documentationPropertyValue",t.search),m.R7$(1),m.Y8G("documentationPropertyValues",t.identityMatcherVariants)("documentationPropertyValue",t.identityMatcher),m.R7$(1),m.Y8G("documentationPropertyValue",t.strict),m.R7$(1),m.Y8G("documentationPropertyValues",t.strictMatcherVariants)("documentationPropertyValue",t.strictMatcher),m.R7$(1),m.Y8G("documentationPropertyValues",t.stringifyVariants)("documentationPropertyValue",t.stringify),m.R7$(1),m.Y8G("documentationPropertyValues",t.valueTemplateVariants)("documentationPropertyValue",t.selectedValueTemplate),m.R7$(1),m.Y8G("dropdown",!0)}}function L(t,e){if(1&t&&(m.j41(0,"ol",31)(1,"li",32)(2,"p"),m.EFF(3," Import an Angular module for forms and "),m.j41(4,"code"),m.EFF(5,"TuiComboBoxModule"),m.k0s(),m.EFF(6," in the same module where you want to use our component: "),m.k0s(),m.nrm(7,"tui-doc-code",33),m.j41(8,"p"),m.EFF(9," See samples to learn more about working with "),m.j41(10,"code"),m.EFF(11,"tui-data-list-wrapper"),m.k0s(),m.EFF(12," or without them "),m.k0s()(),m.j41(13,"li",32)(14,"p"),m.EFF(15," Declare a form ( "),m.j41(16,"code"),m.EFF(17,"FormGroup"),m.k0s(),m.EFF(18," ) or a control ( "),m.j41(19,"code"),m.EFF(20,"FormControl"),m.k0s(),m.EFF(21," ) in your component: "),m.k0s(),m.nrm(22,"tui-doc-code",34),m.k0s(),m.j41(23,"li",32)(24,"p"),m.EFF(25,"Add to the template:"),m.k0s(),m.nrm(26,"tui-doc-code",35),m.k0s()()),2&t){const t=m.XpG();m.R7$(7),m.Y8G("code",t.exampleModule),m.R7$(15),m.Y8G("code",t.exampleForm),m.R7$(4),m.Y8G("code",t.exampleHtml)}}class X{constructor(t,e){this.name=t,this.balance=e}toString(){return`${this.name} (${this.balance})`}}class _ extends l.E{constructor(){super(...arguments),this.exampleForm=n.e(48832).then(n.t.bind(n,48832,17)),this.exampleModule=n.e(61959).then(n.t.bind(n,61959,17)),this.exampleHtml=n.e(23172).then(n.t.bind(n,23172,17)),this.example2={HTML:n.e(10065).then(n.t.bind(n,10065,17)),TypeScript:n.e(43011).then(n.t.bind(n,43011,17)),LESS:n.e(81113).then(n.t.bind(n,81113,17)),"user.ts":n.e(17888).then(n.t.bind(n,95507,17)),"request.service.ts":n.e(80465).then(n.t.bind(n,80465,17)),"database-mock-data.ts":n.e(95630).then(n.t.bind(n,95630,17))},this.example5={HTML:n.e(81048).then(n.t.bind(n,81048,17)),TypeScript:n.e(86146).then(n.t.bind(n,86146,17)),LESS:n.e(21236).then(n.t.bind(n,21236,17)),"index-change.directive.ts":n.e(93996).then(n.t.bind(n,93996,17))},this.items=[new X("Rubles",500),new X("Dollars",237),new X("Netherlands Antillean Guilder and Falkland Islands Pound",700)],this.strict=!0,this.search="",this.valueTemplateVariants=["","Template"],this.selectedValueTemplate="",this.stringifyVariants=[String,t=>String(/\d+/.exec(String(t)))],this.stringify=this.stringifyVariants[0],this.strictMatcherVariants=[c.Oxg,(t,e,n)=>Number.parseInt(n(t).match(/\d+/g)[0],10)===Number.parseInt(e,10)],this.strictMatcher=this.strictMatcherVariants[0],this.identityMatcherVariants=[(t,e)=>t===e,(t,e)=>t.balance===e.balance],this.identityMatcher=this.identityMatcherVariants[0],this.control=new a.MJ(null,a.k0.required),this.iconVariants=["","@tui.pie-chart","@tui.credit-card"],this.iconStart=this.iconVariants[0]}get valueContent(){return this.valueTemplateRef&&this.selectedValueTemplate?this.valueTemplateRef:""}filter(t){return this.items.filter((e=>(0,c.Gb0)(e,t||"")))}setValue(){this.control.setValue(new X("Dollars",237))}}(o=_).ɵfac=function(){let t;return function(e){return(t||(t=m.xGo(o)))(e||o)}}(),o.ɵcmp=m.VBU({type:o,selectors:[["ng-component"]],viewQuery:function(t,e){if(1&t&&m.GBs(T,5),2&t){let t;m.mGM(t=m.lsd())&&(e.valueTemplateRef=t.first)}},standalone:!0,features:[m.Jv_([(0,c.QUK)(d.k,o),(0,r.wj)(["tuiTextfieldPrefix","tuiTextfieldPostfix"])]),m.Vt3,m.aNF],decls:4,vars:0,consts:[["header","ComboBox","package","LEGACY","type","components"],["pageTab",""],[1,"tui-space_bottom-3"],["id","async","heading","Async data loading",3,"component","content"],[1,"tui-space_bottom-4"],["id","datalist","heading","DataList",3,"component","content"],["id","id","heading","ID only",3,"component","content"],["id","wrapper","heading","DataListWrapper",3,"component","content"],["id","stringify","description","With filtering through tuiFilterByInput pipe","heading","Stringify",3,"component","content"],["id","virtual","heading","Virtual scroll",3,"component","content"],["cdkVirtualScrollDescription",""],["id","options-stringify","heading","Options (stringify)",3,"component","content"],["id","ignore-disabled","heading","Don't allow disabled options to be selected by typing them",3,"component","content"],["href","https://material.angular.io/cdk/scrolling/overview","rel","noreferrer","target","_blank","tuiLink",""],[3,"control"],["valueTemplateContent",""],["size","m","tuiButton","","type","button",3,"click"],["documentationPropertyName","disabled","documentationPropertyType","boolean",3,"documentationPropertyValue","documentationPropertyValueChange"],["documentationPropertyMode","input-output","documentationPropertyName","search","documentationPropertyType","string | null",3,"documentationPropertyValue","documentationPropertyValueChange"],["documentationPropertyMode","input","documentationPropertyName","identityMatcher","documentationPropertyType","TuiIdentityMatcher",3,"documentationPropertyValues","documentationPropertyValue","documentationPropertyValueChange"],["documentationPropertyMode","input","documentationPropertyName","strict","documentationPropertyType","boolean",3,"documentationPropertyValue","documentationPropertyValueChange"],["documentationPropertyMode","input","documentationPropertyName","strictMatcher","documentationPropertyType","TuiStringMatcher | null",3,"documentationPropertyValues","documentationPropertyValue","documentationPropertyValueChange"],["documentationPropertyMode","input","documentationPropertyName","stringify","documentationPropertyType","TuiStringHandler",3,"documentationPropertyValues","documentationPropertyValue","documentationPropertyValueChange"],["documentationPropertyMode","input","documentationPropertyName","valueContent","documentationPropertyType","PolymorpheusContent",3,"documentationPropertyValues","documentationPropertyValue","documentationPropertyValueChange"],[3,"dropdown"],[3,"focusable","formControl","identityMatcher","pseudoActive","pseudoFocus","pseudoHover","pseudoInvalid","readOnly","strict","strictMatcher","stringify","tuiDropdownAlign","tuiDropdownDirection","tuiDropdownLimitWidth","tuiDropdownMaxHeight","tuiDropdownMinHeight","tuiDropdownOffset","tuiDropdownOpen","tuiHintAppearance","tuiHintContent","tuiHintDirection","tuiTextfieldCleaner","tuiTextfieldFiller","tuiTextfieldIconLeft","tuiTextfieldLabelOutside","tuiTextfieldSize","valueContent","search","searchChange","tuiDropdownOpenChange"],[3,"items",4,"tuiDataList"],[3,"items"],[1,"item-template"],["icon","@tui.check",1,"item-template-icon"],[3,"textContent"],[1,"tui-list","tui-list_ordered"],[1,"tui-list__item"],["filename","my.module.ts",3,"code"],["filename","my.component.ts",3,"code"],["filename","my.component.html",3,"code"]],template:function(t,e){1&t&&(m.j41(0,"tui-doc-page",0),m.DNE(1,D,49,50,"ng-template",1),m.DNE(2,A,21,13,"ng-template",1),m.DNE(3,L,27,3,"ng-template",1),m.k0s())},dependencies:[p.J,a.X1,a.BC,a.l_,s.eTx,h.Z,F.C,f.n,y.HY,g.P,b.dfP,E.WX,V.aD,V.MN,V.FS,V.FC,V.df,V.e3,V.ic,u.Jc3,u.wSS,j.Jj,w.In,w.jt,u.bkE,u.qo5,s.CNI,P.n,k.k,x.G,C.d,M.V],styles:[".item-template[_ngcontent-%COMP%]{display:flex;align-items:center}.item-template-icon[_ngcontent-%COMP%]{margin-right:.375rem;border-width:.25rem}"],changeDetection:0}),(0,i.Cg)([c.PEb],_.prototype,"filter",null);const U=_}}]);