25629.25f5c38b25ad1dfc.js

(self.webpackChunkdemo=self.webpackChunkdemo||[]).push([[25629],{25629:(t,e,n)=>{n.r(e),n.d(e,{default:()=>k});var a=n(16727),i=n(87742),o=n(42719),c=n(14027),r=n(75407),s=n(56366),u=n(48032),l=n(68114),m=n(17888),d=n(36626);function f(t,e){if(1&t&&r.nrm(0,"tui-data-list-wrapper",7),2&t){const t=r.XpG(),e=r.sdS(11);r.Y8G("itemContent",e)("items",t.cards)}}function p(t,e){if(1&t&&r.nrm(0,"tui-data-list-wrapper",7),2&t){const t=r.XpG(),e=r.sdS(11);r.Y8G("itemContent",e)("items",t.cards)}}function C(t,e){if(1&t&&r.nrm(0,"tui-data-list-wrapper",7),2&t){const t=r.XpG(),e=r.sdS(13);r.Y8G("itemContent",e)("items",t.accounts)}}function g(t,e){if(1&t&&(r.j41(0,"div",8)(1,"tui-thumbnail-card",9),r.EFF(2),r.k0s(),r.j41(3,"span",10),r.EFF(4),r.k0s(),r.j41(5,"span",11),r.EFF(6),r.k0s()()),2&t){const t=e.$implicit;r.R7$(2),r.SpI(" ",t.cardNumber.slice(1)," "),r.R7$(2),r.JRh(t.cardName),r.R7$(2),r.JRh(t.cardNumber)}}function h(t,e){if(1&t&&(r.j41(0,"div",12),r.EFF(1),r.j41(2,"span"),r.EFF(3),r.nI1(4,"async"),r.nI1(5,"tuiAmount"),r.k0s()()),2&t){const t=e.$implicit;r.R7$(1),r.SpI(" ",t.name," "),r.R7$(2),r.JRh(r.bMT(4,2,r.i5U(5,4,t.amount,"RUB")))}}class w{constructor(t,e){this.cardName=t,this.cardNumber=e}}class b{constructor(t,e,n,a){this.id=t,this.name=e,this.amount=n,this.currency=a}}const k=(()=>{var t;class e{constructor(){this.cards=[new w("Bitcoin","*6713"),new w("Money","*4562"),new w("Charity","*6788"),new w("Subscriptions","*1231")],this.accounts=[new b("1","RUB",24876.55,o.o.Ruble),new b("2","USD",335,o.o.Dollar),new b("3","EUR",1e4,o.o.Euro),new b("4","PND",100,o.o.Pound)],this.testForm=new i.gE({testValue:new i.MJ(this.cards[0]),accounts:new i.MJ(this.accounts[0])})}}return(t=e).ɵfac=function(e){return new(e||t)},t.ɵcmp=r.VBU({type:t,selectors:[["ng-component"]],standalone:!0,exportAs:"Example2",features:[r.aNF],decls:14,vars:6,consts:[[1,"form",3,"formGroup"],["formControlName","testValue",3,"valueContent"],[3,"itemContent","items",4,"tuiDataList"],["formControlName","testValue",1,"tui-space_vertical-5",3,"tuiTextfieldLabelOutside","valueContent"],["formControlName","accounts",3,"tuiTextfieldLabelOutside","valueContent"],["cardContent",""],["accountContent",""],[3,"itemContent","items"],[1,"card-item"],["paymentSystem","mastercard","size","s",1,"card"],[1,"card-name"],[1,"card-number"],[1,"account"]],template:function(t,e){if(1&t&&(r.j41(0,"form",0)(1,"tui-select",1),r.EFF(2," Choose a card "),r.DNE(3,f,1,2,"tui-data-list-wrapper",2),r.k0s(),r.j41(4,"tui-select",3),r.EFF(5," Choose a card "),r.DNE(6,p,1,2,"tui-data-list-wrapper",2),r.k0s(),r.j41(7,"tui-select",4),r.EFF(8," Choose an account "),r.DNE(9,C,1,2,"tui-data-list-wrapper",2),r.k0s(),r.DNE(10,g,7,3,"ng-template",null,5,r.C5r),r.DNE(12,h,6,7,"ng-template",null,6,r.C5r),r.k0s()),2&t){const t=r.sdS(11),n=r.sdS(13);r.Y8G("formGroup",e.testForm),r.R7$(1),r.Y8G("valueContent",t),r.R7$(3),r.Y8G("tuiTextfieldLabelOutside",!0)("valueContent",t),r.R7$(3),r.Y8G("tuiTextfieldLabelOutside",!0)("valueContent",n)}},dependencies:[a.Jj,i.X1,i.qT,i.BC,i.cb,i.j4,i.JD,o.fT,s.WX9,u.dfP,c.pgk,l.E,m.w,c.CNI,d.k,o.x0],styles:[".form[_ngcontent-%COMP%]{max-inline-size:25rem}.account-item[_ngcontent-%COMP%], .card-item[_ngcontent-%COMP%]{display:flex;flex:1;align-items:center;min-inline-size:0}.account-item[_ngcontent-%COMP%]{block-size:4rem}.account[_ngcontent-%COMP%]{display:flex;flex:1;justify-content:space-between}.card[_ngcontent-%COMP%]{background-color:var(--tui-chart-categorical-05)}.card-name[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 .5rem;min-inline-size:0;flex:1 1 0}.card-number[_ngcontent-%COMP%]{margin-left:auto;color:var(--tui-text-secondary)}.icon[_ngcontent-%COMP%]{inline-size:1.5rem}.account-currency[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:.5rem;inline-size:2.25rem;block-size:2.25rem;border-radius:100%;background-color:var(--tui-background-base);font-weight:700}.account-card[_ngcontent-%COMP%]{margin-left:auto;flex-shrink:0}.account-name[_ngcontent-%COMP%]{font:var(--tui-font-text-s);color:var(--tui-text-tertiary)}.account-value[_ngcontent-%COMP%]{font:var(--tui-font-text-m)}"],changeDetection:0}),e})()}}]);