1(self.webpackChunkhhgDiscoverV1=self.webpackChunkhhgDiscoverV1||[]).push([[3658],{P59A:function(e,t,a){"use strict";a.d(t,{C:function(){return h},I:function(){return ImagePreviewPopup},P:function(){return PostSingleImageViewPopup},a:function(){return PostImagePreview},b:function(){return v}});var n=a("+OUp"),i=a.n(n),r=a("MzRI"),l=a("Xp1P"),o=a("RIW1"),s=a("h7dN"),c=a("vH4S"),d=a("E13D"),p=a("rBCA"),m=a("mup0"),g=a("iBNF"),u=a("gEnE"),h="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath stroke='%23262626' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6 6 18M6 6l12 12'/%3e%3c/svg%3e",v="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' fill='none'%3e%3cpath stroke='%23262626' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='M10.05 18.06 4 12.038l6.05-6.025M4.002 12.035h15'/%3e%3c/svg%3e";let b=p.A.div` 2 padding: 14px 16px 14px 17px; 3 background: ${e=>e.bgColor}; 4 border-left: 3px solid ${e=>e.highlight}; 5 6 ${l.M.mbUp} { 7 padding: 12px 12px 12px 17px; 8 } 9`,f=p.A.div` 10 display: flex; 11`,x=p.A.div` 12 font-size: 12px; 13 line-height: 18px; 14 15 &[data-has-icon='true'] { 16 margin-left: 10px; 17 } 18`,w=p.A.div` 19 flex-shrink: 0; 20`,y=p.A.div` 21 display: grid; 22 grid-gap: 3px; 23 grid-template-columns: 1fr 1fr; 24 grid-template-rows: auto; 25 26 .img-wrapper { 27 position: relative; 28 overflow: hidden; 29 width: 100%; 30 padding-top: 56.25%; 31 grid-column: auto; 32 33 & > img { 34 cursor: zoom-in; 35 } 36 37 .img-preview-blur { 38 position: absolute; 39 top: 50%; 40 left: 50%; 41 width: 110%; 42 height: 110%; 43 /* Add the blur effect */ 44 -webkit-filter: blur(8px); 45 filter: blur(8px); 46 object-fit: cover; 47 object-position: center; 48 opacity: 0.8; 49 transform: translate(-50%, -50%); 50 } 51 .img-preview { 52 position: absolute; 53 top: 0; 54 left: 0; 55 width: 100%; 56 height: 100%; 57 object-fit: contain; 58 object-position: center; 59 } 60 .img-more-overlay { 61 position: absolute; 62 top: 0; 63 left: 0; 64 display: flex; 65 width: 100%; 66 height: 100%; 67 align-items: center; 68 justify-content: center; 69 background: rgba(0, 0, 0, 0.5); 70 z-index: 4; 71 } 72 } 73 &[data-image-count='1'] { 74 .img-wrapper { 75 /* padding-top: 100%; */ 76 grid-column: 1/3; 77 } 78 } 79 &[data-image-count='2'] { 80 .img-wrapper { 81 /* padding-top: 100%; */ 82 } 83 } 84 &[data-image-count='3'] { 85 .img-wrapper { 86 &:first-child { 87 grid-column: 1/3; 88 } 89 } 90 } 91 &[data-image-count='4'] { 92 .img-wrapper { 93 /* padding-top: 100%; */ 94 } 95 } 96 &[data-image-count='5'] { 97 grid-template-columns: repeat(6, 1fr); 98 .img-wrapper { 99 /* padding-top: 100%; */ 100 grid-column: auto/ span 2; 101 102 &:first-child { 103 padding-top: 56.25%; 104 grid-column: 1/4; 105 } 106 &:nth-child(2) { 107 padding-top: 56.25%; 108 grid-column: 4/7; 109 } 110 } 111 } 112 113 &[data-is-marrybaby='true'] { 114 grid-gap: 8px; 115 .img-wrapper { 116 padding-top: 66.66%; 117 border-radius: 1rem; 118 .img-preview { 119 object-fit: cover; 120 } 121 } 122 &[data-image-count='3'] { 123 grid-template-columns: 1fr 1fr 1fr; 124 .img-wrapper { 125 &:first-child { 126 padding-top: 100%; 127 grid-column: 1/3; 128 grid-row: 1/3; 129 } 130 } 131 } 132 } 133`,k=p.A.div` 134 position: fixed; 135 z-index: 999; 136 top: 0; 137 left: 0; 138 display: flex; 139 overflow: hidden; 140 width: 100vw; 141 height: 100vh; 142 flex-direction: column; 143 background: white; 144 opacity: 0; 145 pointer-events: none; 146 transition: opacity 0.2s linear; 147 &[data-open='true'] { 148 opacity: 1; 149 pointer-events: auto; 150 } 151 .top-bar { 152 position: relative; 153 padding: 20px 40px; 154 .icon-arrow-left { 155 position: absolute; 156 top: 50%; 157 left: 20px; 158 height: 24px; 159 width: 24px; 160 cursor: pointer; 161 transform: translateY(-50%); 162 } 163 } 164 .container { 165 flex: 1; 166 overflow-y: auto; 167 .img-preview { 168 width: 100%; 169 min-width: 100%; 170 margin-bottom: 0.5rem; 171 cursor: pointer; 172 max-height: 100%; 173 object-fit: cover; 174 } 175 } 176`,E=(0,p.A)(e=>{var{icon:t,bgColor:a=g.w.colors.yellow50,highlightColor:n=g.w.colors.yellow800,message:r}=e,l=(0,m.a)(e,["icon","bgColor","highlightColor","message"]);return i().createElement(b,Object.assign({bgColor:a,highlight:n},l),i().createElement(f,null,t&&i().createElement(w,null,t),i().createElement(x,{"data-has-icon":!!t},r)))})` 177 margin-bottom: 16px; 178 &.noti-bottom { 179 border-left: none; 180 margin-top: 4px; 181 padding: 4px 8px; 182 margin-left: 16px; 183 margin-right: 16px; 184 border-radius: 4px; 185 } 186`,ImagePreviewPopup=({className:e,style:t,authorName:a,images:r,onClose:l,onOpenSingleView:s,alt:p})=>{let{t:m}
186=(0,o.u)(),[g,u]=(0,n.useState)(!1);return(0,n.useEffect)(()=>{setTimeout(()=>{u(!0)},0)},[]),i().createElement(c.Portal,null,i().createElement(k,{className:e,style:t,"data-open":g},i().createElement("div",{className:"top-bar"},i().createElement("img",{className:"icon-arrow-left",src:v,onClick:l,alt:"go back",loading:"lazy"}),i().createElement(d.T,{size:"p2",weight:"bold",style:{textAlign:"center"}},m("previewPhotos.title",{name:a}))),i().createElement("div",{className:"container"},r.map((e,t)=>i().createElement("img",{className:"img-preview",key:t,src:e,onClick:()=>null==s?void 0:s(t),alt:p,loading:"lazy"})))),",")},C=p.A.div` 187 position: fixed; 188 z-index: 999; 189 top: 0; 190 left: 0; 191 display: flex; 192 width: 100%; 193 height: 100%; 194 flex-direction: column; 195 background: black; 196 opacity: 0; 197 pointer-events: none; 198 transition: opacity 0.2s linear; 199 &[data-open='true'] { 200 opacity: 1; 201 pointer-events: auto; 202 } 203`,N=p.A.div` 204 padding: 1rem; 205 background: white; 206 .icon-close { 207 width: 26px; 208 height: 26px; 209 cursor: pointer; 210 } 211`,_=p.A.div` 212 position: relative; 213 flex: 1; 214 overflow: hidden; 215 > img { 216 height: 100%; 217 width: 100%; 218 object-fit: contain; 219 object-position: center; 220 } 221`,T=p.A.div` 222 --inner-padding: max(16px, 20%); 223 height: 100%; 224 position: absolute; 225 left: 0; 226 padding: 8px; 227 padding-right: var(--inner-padding); 228 display: flex; 229 align-items: center; 230 top: 0; 231 cursor: pointer; 232 &[data-right] { 233 padding-right: 8px; 234 padding-left: var(--inner-padding); 235 left: unset; 236 right: 0; 237 } 238 &[data-disabled='true'] { 239 cursor: not-allowed; 240 } 241`,z=p.A.div` 242 border-radius: 50%; 243 background: rgba(0, 0, 0, 0.3); 244 display: flex; 245 align-items: center; 246 justify-content: center; 247 padding: 4px; 248 > img { 249 width: 16px; 250 height: 16px; 251 &[data-disabled='true'] { 252 opacity: 0.5; 253 } 254 } 255 ${l.M.tdUp} { 256 padding: 8px; 257 > img { 258 width: 30px; 259 height: 30px; 260 } 261 } 262`;var S="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m6 12.813 4-4-4-4'/%3e%3c/svg%3e";let PostSingleImageViewPopup=({initialViewIndex:e,images:t,onClose:a,alt:r})=>{let[l,o]=(0,n.useState)(e),[s,d]=(0,n.useState)(!1);(0,n.useEffect)(()=>{setTimeout(()=>{d(!0)},0)},[]);let p=null==t?void 0:t[l],m=0===l,g=!(null==t?void 0:t.length)||l===(null==t?void 0:t.length)-1;return i().createElement(c.Portal,null,i().createElement(C,{"data-open":s&&!!p},i().createElement(N,null,i().createElement("img",{src:h,className:"icon-close",onClick:a,alt:"close",loading:"lazy"})),p&&l>=0&&i().createElement(i().Fragment,null,i().createElement(_,null,i().createElement("img",{className:"img-preview",src:p,alt:r,loading:"lazy"}),i().createElement(T,{"data-disabled":m,onClick:()=>!m&&o(l-1)},i().createElement(z,null,i().createElement("img",{src:S,style:{transform:"rotate(180deg)"},alt:"left arrow","data-disabled":m,loading:"lazy"}))),i().createElement(T,{"data-right":!0,"data-disabled":g,onClick:()=>!g&&o(l+1)},i().createElement(z,null,i().createElement("img",{src:S,alt:"right arrow","data-disabled":g,loading:"lazy"})))))))},M=(0,u.s)(p.A.div` 263 position: absolute; 264 top: 0; 265 right: 0; 266 left: 0; 267 bottom: 0; 268 background: rgba(0, 0, 0, 0.4); 269 color: white; 270 display: flex; 271 align-items: center; 272 justify-content: center; 273 cursor: pointer; 274 `,"hhgcomp-sensitivemask-inner"),$=p.A.div``,P=p.A.div` 275 position: absolute; 276 bottom: 0; 277 left: 0; 278 width: 100%; 279 height: 100%; 280 z-index: 3; 281 background: white; 282 cursor: pointer; 283 284 &, 285 * { 286 // transition: all 300ms; 287 transform-origin: bottom left; 288 } 289 290 img { 291 transition: none; 292 } 293 .img-preview { 294 width: 100%; 295 } 296 &[data-is-blurred='true'] { 297 .img-preview { 298 /* Add the blur effect */ 299 -webkit-filter: blur(24px); 300 filter: blur(24px); 301 } 302 } 303 304 &[data-is-blurred='false'] { 305 background: transparent; 306 cursor: zoom-in; 307 308 ${M.classSelector} { 309 top: auto; 310 right: auto; 311 left: 8px; 312 bottom: 8px; 313 background: rgba(0, 0, 0, 0); 314 align-items: flex-end; 315 justify-content: flex-start; 316 } 317 } 318`,SensitiveMask=({image:e,showIcon:t=!0})=>
318{let[a,r]=(0,n.useState)(!0);return i().createElement(P,{"data-is-blurred":a,onClick:e=>a&&e.stopPropagation()},i().createElement("img",{loading:"lazy",className:"img-preview",src:e}),i().createElement(M,{onClick:e=>{e.stopPropagation(),r(!a)}},t&&i().createElement($,null,a?i().createElement("svg",{width:"22",height:"20",viewBox:"0 0 22 20",fill:"none"},i().createElement("path",{d:"M1.71 2.54a.996.996 0 0 1 0-1.41c.39-.39 1.03-.39 1.42 0l16.31 16.33a.996.996 0 1 1-1.41 1.41l-2.72-2.72c-1.34.52-2.79.82-4.31.82-5 0-9.27-3.11-11-7.5C.77 7.5 2.06 5.8 3.68 4.51zM16 9.47c0-2.76-2.24-5-5-5-.51 0-1 .1-1.47.24L7.36 2.54c1.15-.37 2.37-.57 3.64-.57 5 0 9.27 3.11 11 7.49-.69 1.76-1.79 3.3-3.18 4.53l-3.06-3.06c.14-.46.24-.95.24-1.46m-5 5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14L8.06 8.9c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07l1.57 1.57c-.65.32-1.37.5-2.14.5m2.97-5.33a2.97 2.97 0 0 0-2.64-2.64z",fill:"#fff"})):i().createElement("svg",{width:"23",height:"16",viewBox:"0 0 23 16",fill:"none"},i().createElement("path",{d:"M12 0C5.142 0 1.886 5.879 1.096 7.557c-.132.28-.132.604 0 .884C1.886 10.121 5.142 16 12 16c6.834 0 10.092-5.837 10.896-7.54a1.08 1.08 0 0 0 0-.92C22.092 5.836 18.834 0 12 0m0 3a5 5 0 1 1-.001 10.001 5 5 0 0 1 0-10.001m0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6",fill:"#2D87F3"})))))},PostImagePreview=({className:e,images:t=[],style:a,authorName:c,isSensitive:d=!1,alt:p,positionAlert:m="top"})=>{let{data:{env:{isMarryBaby:g}}}=(0,n.useContext)(s.T),{t:u}=(0,o.u)(),h=`+ ${(t.length||0)-4}`,[v,b]=(0,n.useState)(!1),[f,x]=(0,n.useState)(-1),w=t.length>5,k=(0,n.useRef)(!1);return(0,n.useEffect)(()=>()=>{k.current&&(0,l.t)(!1)},[]),(0,n.useEffect)(()=>{v||f>=0?((0,l.t)(!0),k.current=!0):((0,l.t)(!1),k.current=!1)},[v,f]),i().createElement(i().Fragment,null,d&&"top"===m&&i().createElement(E,{message:u("sensitiveMask.contentWarningDescription"),icon:i().createElement("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none"},i().createElement("path",{d:"M9 .667A8.336 8.336 0 0 0 .667 9c0 4.6 3.733 8.333 8.333 8.333S17.333 13.6 17.333 9 13.6.667 9 .667m0 9.166A.836.836 0 0 1 8.167 9V5.667c0-.459.375-.834.833-.834s.833.375.833.834V9A.836.836 0 0 1 9 9.833M8.167 11.5v1.667h1.666V11.5z",fill:"#FE921D"}))}),i().createElement(y,{className:e,style:a,"data-image-count":w?5:t.length||0,"data-is-marrybaby":g,"data-cursor-pointer":!d},null==t?void 0:t.slice(0,5).map((e,t)=>{let a=4===t&&w;return i().createElement("div",{className:"img-wrapper",key:t,onClick:()=>{t>=4&&w?b(!0):x(t)}},d&&i().createElement(SensitiveMask,{image:e,showIcon:!a}),!g&&i().createElement("img",{loading:"lazy",className:"img-preview-blur",src:e,alt:p}),i().createElement("img",{loading:"lazy",className:"img-preview",src:e,alt:p}),a&&i().createElement("div",{className:"img-more-overlay"},i().createElement(r.H,{tag:"h1",as:"h2",color:"white"},h)))})),v&&i().createElement(ImagePreviewPopup,{authorName:c||"",images:t,onClose:()=>b(!1),onOpenSingleView:x,alt:p}),f>=0&&i().createElement(PostSingleImageViewPopup,{images:t,initialViewIndex:f,onClose:()=>x(-1),alt:p}),d&&"bottom"===m&&i().createElement(E,{message:u("sensitiveMask.contentWarningDescription.community"),className:"noti-bottom",icon:i().createElement("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none"},i().createElement("path",{d:"M9 .667A8.336 8.336 0 0 0 .667 9c0 4.6 3.733 8.333 8.333 8.333S17.333 13.6 17.333 9 13.6.667 9 .667m0 9.166A.836.836 0 0 1 8.167 9V5.667c0-.459.375-.834.833-.834s.833.375.833.834V9A.836.836 0 0 1 9 9.833M8.167 11.5v1.667h1.666V11.5z",fill:"#FE921D"}))}))}},vyDA:function(e,t,a){"use strict";a.d(t,{P:function(){return PopoverMenu},S:function(){return d}});var n=a("+OUp"),i=a.n(n),r=a("K5rT"),l=a("h7dN"),o=a("rBCA"),s=a("iBNF");let c=o.A.div` 319 position: relative; 320 display: content; 321 322 .popover-menu__btn { 323 /* position: relative; */ 324 > span { 325 width: 100%; 326 height: 100%; 327 > img { 328 width: 100%; 329 height: 100%; 330 } 331 } 332 } 333 334 .popover-menu__content { 335 position: absolute; 336 z-index: 10; 337 width: 320px; 338 padding: 8px; 339 border: none; 340 background: #fff; 341 border-radius: 8px; 342 box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.1); 343 344 &::before { 345 position: absolute; 346 width: 16px; 347 height: 8px; 348 background: #fff; 349 content: ''; 350 } 351 352 &.--position { 353 &-top { 354 bottom: calc(100% + 8px); 355 356 &.--align { 357 &-start { 358 left: 0; 359 360 &::before { 361 top: 100%; 362 left: 16px; 363 clip-path: polygon(0 0, 50% 100%, 100% 0); 364 } 365 } 366 367 &-end { 368 left: 100%; 369 transform: translateX(calc(-100% + 1rem)); 370 371 &::before { 372 top: 100%; 373 right: 16px; 374 clip-path: polygon(0 0, 50% 100%, 100% 0); 375 } 376 } 377 } 378 } 379 380 &-right { 381 left: calc(100% + 8px); 382 383 &.--align { 384 &-start { 385 top: 0; 386 387 &::before { 388 top: 16px; 389 left: 0; 390 width: 8px; 391 height: 16px; 392 clip-path: polygon(0 50%, 100% 0%, 100% 100%); 393 transform: translateX(-100%); 394 } 395 } 396 397 &-end { 398 top: 100%; 399 transform: translateX(calc(-100% + 1rem)); 400 401 &::before { 402 bottom: 16px; 403 left: 0; 404 width: 8px; 405 height: 16px; 406 clip-path: polygon(0 50%, 100% 0%, 100% 100%); 407 transform: translateX(-100%); 408 } 409 } 410 } 411 } 412 413 &-bottom { 414 top: calc(100% + 8px); 415 416 &.--align { 417 &-start { 418 left: 0; 419 420 &::before { 421 bottom: 100%; 422 left: 16px; 423 clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 424 } 425 } 426 427 &-end { 428 left: 100%; 429 transform: translateX(calc(-100% + 1rem)); 430 431 &::before { 432 right: 16px; 433 bottom: 100%; 434 clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 435 } 436 } 437 } 438 } 439 440 &-left { 441 left: -8px; 442 transform: translateX(-100%); 443 444 &.--align { 445 &-start { 446 top: 0; 447 448 &::before { 449 top: 16px; 450 left: 100%; 451 width: 8px; 452 height: 16px; 453 clip-path: polygon(0 0%, 100% 50%, 0% 100%); 454 transform: translateX(0); 455 } 456 } 457 458 &-end { 459 bottom: 0; 460 461 &::before { 462 bottom: 16px; 463 left: 100%; 464 width: 8px; 465 height: 16px; 466 clip-path: polygon(0 0%, 100% 50%, 0% 100%); 467 transform: translateX(0); 468 } 469 } 470 } 471 } 472 } 473 } 474 475 &[data-is-marrybaby='true'] { 476 .popover-menu__content { 477 padding: 0; 478 border-radius: 12px; 479 /* &::before { 480 display: none; 481 } */ 482 } 483 } 484`,d=o.A.div` 485 display: flex; 486 /* max-height: 300px; */ 487 flex-direction: column; 488 cursor: default; 489 490 .__header { 491 position: relative; 492 display: flex; 493 align-items: center; 494 justify-content: center; 495 padding: 1rem 0; 496 margin-bottom: 8px; 497 498 .__back-btn { 499 position: absolute; 500 top: 50%; 501 left: 8px; 502 width: 16px; 503 height: 16px; 504 cursor: pointer; 505 transform: translateY(-50%); 506 } 507 } 508 509 .tree-text-description { 510 padding-right: 8px; 511 padding-left: 8px; 512 margin-top: -8px; 513 margin-bottom: 8px; 514 font-size: 14px; 515 font-weight: 400; 516 line-height: 22px; 517 text-align: left; 518 } 519
520 .__content { 521 overflow: auto; 522 flex: 1; 523 } 524 525 .__list { 526 .__item { 527 position: relative; 528 &.bold-item { 529 font-weight: 700; 530 } 531 &:last-child { 532 .__btn { 533 margin-bottom: 0; 534 } 535 } 536 537 .__btn { 538 position: relative; 539 display: flex; 540 width: 100%; 541 height: 40px; 542 align-items: center; 543 padding: 0 1rem; 544 border: none; 545 margin-bottom: 8px; 546 color: ${s.w.colors.gray800}; 547 cursor: pointer; 548 text-align: left; 549 transition: background 0.3s; 550 551 /* for better gtm tracking result */ 552 * { 553 pointer-events: none; 554 } 555 &.--checked { 556 color: ${s.w.colors.gray500}; 557 pointer-events: none; 558 } 559 560 &:hover { 561 background: ${s.w.colors.gray100}; 562 } 563 564 .__icon { 565 width: 16px; 566 height: 16px; 567 margin-right: 0.4rem; 568 } 569 570 & > span { 571 position: relative; 572 573 & > img { 574 width: 16px; 575 height: 16px; 576 margin-right: 0.4rem; 577 } 578 } 579 } 580 581 .__toggle { 582 position: absolute; 583 top: 50%; 584 right: 16px; 585 width: 16px; 586 height: 16px; 587 pointer-events: none; 588 transform: translateY(-50%); 589 } 590 } 591 } 592 &[data-is-marrybaby='true'] { 593 .__header { 594 padding: 1rem; 595 } 596 .tree-text-description { 597 padding: 0 1rem; 598 } 599 .__list { 600 .__item { 601 &:first-child { 602 .__btn { 603 border-top-left-radius: 12px; 604 border-top-right-radius: 12px; 605 } 606 } 607 &:last-child { 608 .__btn { 609 border-bottom-left-radius: 12px; 610 border-bottom-right-radius: 12px; 611 } 612 } 613 .__btn { 614 height: unset; 615 padding: 1rem; 616 margin-bottom: 0; 617 &:hover { 618 background: ${s.w.mbColors.lightPink}; 619 } 620 } 621 } 622 } 623 } 624`,PopoverMenu=({className:e,style:t,toggleButtonContent:a,position:o="bottom",align:s="end",children:d,buttonProps:p})=>{let{data:{env:{isMarryBaby:m}}}=(0,n.useContext)(l.T),[g,u]=(0,n.useState)(!1),h=(0,n.useRef)(null),v=(0,n.useRef)(g);return(0,n.useEffect)(()=>{var e;v.current=g,g&&(null===(e=h.current)||void 0===e||e.focus())},[g]),(0,n.useEffect)(()=>{let clickHandler=e=>{var t;(null===(t=h.current)||void 0===t?void 0:t.contains(e.target))||!v.current||u(!1)};return window.addEventListener("click",clickHandler,{passive:!0}),()=>{window.removeEventListener("click",clickHandler)}},[]),i().createElement(c,{"data-is-marrybaby":m,className:e,style:t},i().createElement(r.B,Object.assign({theme:m?"marryBaby":"helloSites",className:"popover-menu__btn",size:"md",color:"transparent",onClick:()=>u(e=>!e)},p),a),g?i().createElement("div",{ref:h,className:`popover-menu__content --position-${o} --align-${s}`,tabIndex:0,onClick:e=>e.stopPropagation()},"function"==typeof d?d({setShow:u}):d):null)}},"DO/5":function(e,t,a){"use strict";a.d(t,{C:function(){return CardReactions},L:function(){return LabelSortPin},T:function(){return TagTopic},a:function(){return LabelPin},b:function(){return TreePopoverMenu},c:function(){return i}});var n,i,r=a("mup0"),l=a("+OUp"),o=a.n(l),s=a("RIW1"),c=a("/C9b"),d=a("vH4S"),p=a("9VLu"),m=a("E13D"),g=a("iBNF"),u=a("Xp1P"),h=a("xX6x"),v=a("h7dN"),b=a("QktA"),f=a("11Kd"),x=a("rBCA"),w=a("MzRI"),y=a("vyDA");let k=(0,l.createContext)({});var E={wrapper:"vvR-m49"};let LikeWrapper=e=>{var{children:t,className:a=""}=e,n=(0,r.a)(e,["children","className"]);let{isReplied:i,trackingCategory:s,trackingLabel:c,onLikeClick:p}=(0,l.useContext)(k);return o().createElement(d.Box,Object.assign({className:`${E.wrapper} ${a}`,"data-event-category":s,"data-event-action":i?"Like Comment Click":"Like Post Click","data-event-label":c},n,{onClick:()=>{null==p||p()}}),t)},ShareWrapper=e=>{var{children:t,className:a=""}=e,n=(0,r.a)(e,["children","className"]);let{trackingCategory:i,trackingLabel:s,onShareClick:c}=(0,l.useContext)(k);return o().createElement(d.Box,Object.assign({className:`${E.wrapper} ${a}`,"data-event-category":i,"data-event-action":"Share Icon Click","data-event-label":s},n,{onClick:()=>{null==c||c()}}),t)},CommentWrapper=e=>{var{children:t,className:a=""}=e,n=(0,r.a)(e,["children","className"]);let{isReplied:i,trackingCategory:s,trackingLabel:c,onCommentClick:p}=(0,l.useContext)(k);return o().createElement(d.Box,Object.assign({className:`${E.wrapper} ${a}`,"data-event-category":s,"data-event-action":i?"Reply Comment Click":"Comment Text Click","data-event-label":c},n,{onClick:e=>{e.preventDefault(),e.stopPropagation(),null==p||p()}}),t)},SaveWrapper=e=>{var{children:t,className:a=""}=e,n=(0,r.a)(e,["children","className"]);let{trackingCategory:i,trackingLabel:s,onSaveClick:c}=(0,l.useContext)(k);return o().createElement(d.Box,Object.assign({className:`${E.wrapper} ${a}`,"data-event-category":i,"data-event-action":"Save Post Click","data-event-label":s},n,{onClick:e=>{e.preventDefault(),e.stopPropagation(),null==c||c()}}),t)};var C={wrapper:"UhiT4m5",inner:"oEfeTkV",iconTxt:"_9GXHCn3",clickableIcon:"HCsrR0N",labelReaction:"Ierg-Fq",actions:"_674BTR4",statistical:"XlkglSM",releatedStatistical:"KyekKc3",statisticalNoAction:"TTfvZpR"};(n=i||(i={}))[n.post=1]="post",n[n.reply=2]="reply";let CardReactions=e=>
624{var{type:t,viewCount:a=0,loveCount:n=0,replyCount:d=0,replyPadding:p,liked:u,isReplied:b,isSaved:f,onCommentClick:x,onLikeClick:w,onShareClick:y,onSaveClick:E,onGoToUrl:N,className:_,style:T,showingMostEngaging:z,isMarryBaby:S,hasShare:M=!0,hasSave:$=!0,hasActionStatistical:P=!0,hasShowAction:A=!0,isReleatedPost:R=!1,isVertical:j=!1,trackingCategory:I="Together",trackingLabel:B="",children:D}=e,L=(0,r.a)(e,["type","viewCount","loveCount","replyCount","replyPadding","liked","isReplied","isSaved","onCommentClick","onLikeClick","onShareClick","onSaveClick","onGoToUrl","className","style","showingMostEngaging","isMarryBaby","hasShare","hasSave","hasActionStatistical","hasShowAction","isReleatedPost","isVertical","trackingCategory","trackingLabel","children"]);let{data:{env:{isMarryBaby:F}}}=(0,l.useContext)(v.T),W=S||F,{t:V}=(0,s.u)(),{isMobile:O}=(0,h.u)(),H=(0,l.useMemo)(()=>a>0||d>0,[a,d]),X=(0,l.useMemo)(()=>a>0||n>0||d>0,[a,n,d]),U=(0,l.useCallback)(()=>o().createElement("div",{className:`${C.releatedStatistical} ${P?"":C.statisticalNoAction} session-statistical`},o().createElement("div",{className:"releated-post-statistical"},o().createElement(m.T,{size:"p3",className:C.iconTxt,as:"div",onClick:()=>{P&&(null==N||N())}},a>0&&o().createElement(o().Fragment,null,o().createElement(c.I.Eye,{size:18,isMarryBaby:W}),o().createElement("div",{className:C.labelReaction},a))),o().createElement(m.T,{size:"p3",className:C.iconTxt,as:"div",onClick:()=>{P&&(null==N||N(d>0?"":"?action=comment"))}},o().createElement("div",{className:C.labelReaction},d>0?V("comment.count",{count:d}):V("comment.now"))))),[H,P,W,a,d]),Y=(0,l.useCallback)(()=>X?o().createElement("div",{className:`${C.statistical} ${P?"":C.statisticalNoAction} session-statistical`},o().createElement(m.T,{size:"p3",className:C.iconTxt,as:"div",onClick:()=>{P&&(null==N||N())}},a>0&&o().createElement(o().Fragment,null,o().createElement(c.I.Eye,{size:18,isMarryBaby:W}),o().createElement("div",{className:C.labelReaction},a))),O||j?o().createElement("div",{className:"wrapper-list-statistical"},n>0?o().createElement(m.T,{className:C.iconTxt,size:"p3",as:"div",onClick:()=>{P&&(null==N||N())}},o().createElement("div",{className:C.labelReaction},n," ",V("cardReactions.like"))):o().createElement("div",null),d>0&&o().createElement(m.T,{size:"p3",className:C.iconTxt,as:"div",onClick:()=>{P&&(null==N||N())}},o().createElement("div",{className:C.labelReaction},d," ",V("cardReactions.comment")))):o().createElement(o().Fragment,null,n>0?o().createElement(m.T,{className:C.iconTxt,size:"p3",as:"div",onClick:()=>{P&&(null==N||N())}},o().createElement(c.I.Heart,{isMarryBaby:W,isSolid:!1,size:18,color:"#737373"}),o().createElement("div",{className:C.labelReaction},n)):o().createElement("div",null),d>0&&o().createElement(m.T,{size:"p3",className:C.iconTxt,as:"div",onClick:()=>{P&&(null==N||N())}},o().createElement(c.I.Comment,{size:18,className:"txt-icon",isMarryBaby:W}),o().createElement("div",{className:C.labelReaction},d)))):"",[X,P,W,O,a,n,d]);return o().createElement(k.Provider,{value:{liked:u,loveCount:n,trackingCategory:I,trackingLabel:B,isReplied:b,onLikeClick:w,onShareClick:y,onCommentClick:x,onSaveClick:E}},D||o().createElement("div",Object.assign({className:`${C.wrapper} ${_}`,"data-show-most-engaging":z,"data-type":t===i.post?"post":"reply","data-reply-padding":t===i.reply&&p,"data-is-marrybaby":W,style:T},L),o().createElement("div",{className:`${C.inner} ${j?"direction-vertical":""}`},A&&o().createElement("div",{className:`${C.actions} session-action`},o().createElement(LikeWrapper,{className:`${C.clickableIcon} wrapper-action`},o().createElement(m.T,{className:C.iconTxt,size:"p3",as:"div"},o().createElement(c.I.Heart,{isMarryBaby:W,isSolid:u,size:18,color:u?W?g.w.mbColors.pink:g.w.colors.red800:"#737373"}),o().createElement("div",{className:C.labelReaction},V("cardReactions.like")))),M&&o().createElement(ShareWrapper,{className:`${C.clickableIcon} wrapper-action`},o().createElement(m.T,{size:"p3",className:C.iconTxt,as:"div"},o().createElement(c.I.Share,{size:18,isMarryBaby:W}),o().createElement("div",{className:C.labelReaction},V("share.title")))),$&&o().createElement(SaveWrapper,{className:`${C.clickableIcon} wrapper-action`},o().createElement(m.T,{size:"p3",className:C.iconTxt,as:"div"},f?o().createElement(c.I.Bookmark,{size:18,isMarryBaby:W,color:W?"#3E3F58":"#737373"}):o().createElement(c.I.Save,{size:18,isMarryBaby:W,color:W?"#3E3F58":"#737373"}),o().createElement("div",{className:C.labelReaction}
624,f?V("cardReactions.unSave"):V("cardReactions.save")))),o().createElement(CommentWrapper,{className:`${C.clickableIcon} wrapper-action`},o().createElement(m.T,{size:"p3",className:C.iconTxt,as:"div"},o().createElement(c.I.Comment,{size:18,className:"txt-icon",isMarryBaby:W}),o().createElement("div",{className:C.labelReaction},V("cardReactions.comment"))))),R?U():Y())))};CardReactions.LikeWrapper=LikeWrapper,CardReactions.ShareWrapper=ShareWrapper,CardReactions.CommentWrapper=CommentWrapper;let N=(0,d.createStyles)(e=>({wrapper:{display:"flex",flexWrap:"wrap",width:"100%",padding:"0.5rem 0",gap:"0.5rem"},item:{position:"relative",whiteSpace:"nowrap",padding:"5px 12px",background:e.colors.gray[0],borderRadius:"2rem",cursor:"pointer","-webkit-user-drag":"none",userSelect:"none",textDecoration:"none","*":{pointerEvents:"none"},"&:first-child":{marginLeft:0}},text:{}})),TagTopic=e=>{var{topics:t=[],onClick:a,className:n,style:i,trackingCategory:c="Together",locale:d="vi-VN",classNames:g,styles:u,unstyled:h,shortenedNumber:x=3,shortenedStyle:w}=e,y=(0,r.a)(e,["topics","onClick","className","style","trackingCategory","locale","classNames","styles","unstyled","shortenedNumber","shortenedStyle"]);let{t:k}=(0,s.u)(),{classes:E}=N(void 0,{name:"TagTopic",classNames:g,styles:u,unstyled:h}),{data:{env:{togetherBasePath:C}},action:{sanitizeFunction:_}}=(0,l.useContext)(v.T),[T,z]=(0,l.useState)(!w);return o().createElement("div",Object.assign({onClick:a,className:`${E.wrapper} ${n}`,style:i},y),(T?t:t.slice(0,x)).map((e,t)=>{let a=(null==e?void 0:e.dueDateMonth)&&(null==e?void 0:e.dueDateMonth)!==0&&(null==e?void 0:e.dueDateYear)&&(null==e?void 0:e.dueDateYear)!==0;return o().createElement("a",{className:E.item,key:t,"data-event-category":c,"data-event-action":"Topic in Post Click","data-event-label":`${(0,v.l)(d)}${C}${e.url}`,href:e.isActive&&!e.isHidden?`${C}${e.url}/`:void 0},o().createElement(m.T,{size:"p4"},o().createElement("span",{style:Object.assign({},a&&{textTransform:"capitalize"}),dangerouslySetInnerHTML:{__html:a?`${(0,b.A)(new Date(2020,Number(e.dueDateMonth)-1,1),"MMMM",{locale:p.j[d]})}${d===f.L.Vietnam?"/":" "}${null==e?void 0:e.dueDateYear}`:(null==_?void 0:_(e.name))||e.name}})))}),!T&&t.length>x&&o().createElement("a",{className:E.item,href:"#",onClick:e=>{e.preventDefault(),z(!0)}},o().createElement(m.T,{size:"p4"},"+",k("tagTopic.moreTopics",{number:t.length-x}))))},_=x.A.div` 625 display: flex; 626 align-items: center; 627 justify-content: space-between; 628 padding: 16px; 629 cursor: pointer; 630 &[data-color='gray'] { 631 background: ${g.w.colors.neutral50}; 632 } 633 &[data-color='white'] { 634 border-bottom: 1px solid #e4e8ec; 635 background: ${g.w.colors.white}; 636 } 637 638 .popover-menu__btn { 639 display: flex; 640 min-width: 2rem; 641 height: 2rem; 642 align-items: center; 643 padding: 8px 0 !important; 644 border: none; 645 margin-left: 0.5rem; 646 background: transparent; 647 > span { 648 display: flex; 649 align-items: center; 650 } 651 652 &:hover { 653 background: transparent !important; 654 } 655 } 656 657 &.label-pinned { 658 border-radius: ${g.w.borderRadius} 6px 0 0; 659 .label-sort-pin-icon { 660 width: 16px; 661 height: 16px; 662 vertical-align: middle; 663 } 664 } 665 666 &[data-is-marrybaby='true'] { 667 padding: 0.75rem 1rem; 668 border-radius: 16px 16px 0px 0px; 669 &[data-color='white'] { 670 border-bottom: none; 671 } 672 &[data-color='gray'] { 673 background: #f3f3f3; 674 } 675 .popover-menu__btn { 676 width: unset; 677 } 678 679 &.label-pinned { 680 border-bottom: none; 681 background: #fff9eb; 682 border-radius: 1rem 1rem 0 0; 683 .label-sort-pin-icon { 684 margin-right: 8px; 685 } 686 .label-sort-pin-heading { 687 color: #fb8c00; 688 } 689 } 690 &.label-sorting { 691 ${u.M.tdUp} { 692 padding-bottom: 1.5rem; 693 margin-bottom: -0.75rem; 694 } 695 } 696 } 697`,LabelSortPin=({label:e,rightLabel:t,onClick:a,color:n,className:i,style:r})=>{let{data:{env:{isMarryBaby:s}}}=(0,l.useContext)(v.T);return o().createElement(_,{"data-is-marrybaby":s,"data-color":n,onClick:a,className:i,style:r},o().createElement(m.T,{className:"label-sort-pin-heading",size:s?"p4":"p3",weight:"bold"},e),t)},LabelPin=({onClick:e,color:t,className:a,style:n})=>{let{data:{env:{isMarryBaby:i}}}=(0,l.useContext)(v.T),{t:r}=(0,s.u)();return o().createElement(LabelSortPin,{label:o().createElement(o().Fragment,null,i&&o().createElement("img",{className:"label-sort-pin-icon",src:"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath stroke='%23FB8C00' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m3.5 20 4.37-4.37'/%3e%3cpath stroke='%23FB8C00' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4.956 11.294a1 1 0 0 0 0 1.414l2.918 2.918 2.918 2.918a1 1 0 0 0 1.414 0l1.175-1.175a1 1 0 0 0 .293-.707v-3.936l2.9-2.9 2.3
6971.123c.282.015.56-.091.76-.291l.573-.574a1 1 0 0 0 0-1.414l-4.386-4.386a1 1 0 0 0-1.414 0l-.574.574a1 1 0 0 0-.29.76l.122 2.309-2.9 2.9H6.838a1 1 0 0 0-.707.293z' clip-rule='evenodd'/%3e%3cpath stroke='%23FB8C00' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m16.57 9.83-2.9-2.9'/%3e%3c/svg%3e",loading:"lazy"})," ",r("label.pinnedPost")),rightLabel:!i&&o().createElement("img",{className:"label-sort-pin-icon",src:"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3e%3cpath stroke='%23FEA21E' stroke-linecap='round' d='m7.186 7.682-3.504 6.132'/%3e%3cpath fill='%23FEA21E' stroke='%23FEA21E' stroke-linejoin='round' stroke-width='.5' d='M3.246 7.784a.25.25 0 0 0 .091.342l5.447 3.145a.25.25 0 0 0 .342-.092 3.39 3.39 0 0 0 .11-3.186l1.622-2.808a2.66 2.66 0 0 0 1.606-1.239.25.25 0 0 0-.092-.341l-4.19-2.42a.25.25 0 0 0-.341.092 2.66 2.66 0 0 0-.27 2.01L5.949 6.095a3.39 3.39 0 0 0-2.703 1.69Z'/%3e%3c/svg%3e",loading:"lazy"}),onClick:e,color:"white",className:`label-pinned ${a}`,style:n})},TreePopoverMenu=e=>{var{data:t}=e,a=(0,r.a)(e,["data"]);return o().createElement(y.P,Object.assign({},a),({setShow:e})=>o().createElement(Tree,{data:t,setShow:e}))},getCurrentDataFromPath=(e,t)=>{let a=t.split("."),n=e;return a.forEach(e=>{var t,a;e&&n&&(null==n?void 0:n.type)==="list"&&(n=null===(a=null===(t=null==n?void 0:n.list)||void 0===t?void 0:t[Number(e)])||void 0===a?void 0:a.subTree)}),n},Tree=({data:e,setShow:t})=>{var a;let[n,i]=(0,l.useState)(""),r=(0,l.useMemo)(()=>e&&getCurrentDataFromPath(e,n),[e,n]);if(!e||!r)return null;let handleItemClick=(e,{subTree:a,onClick:n=()=>null})=>{n&&n(),a?i(t=>t.split(".").concat(String(e)).join(".")):t&&t(!1)};return o().createElement(y.S,null,r.isShowheader?o().createElement("div",{className:"__header"},n?o().createElement("img",{className:"__back-btn",src:"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3e%3cpath stroke='%23262626' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m15 18-6-6 6-6'/%3e%3c/svg%3e",onClick:()=>i(e=>e.split(".").slice(0,-1).join(".")),loading:"lazy"}):null,r.title?o().createElement(w.H,{className:"__title",tag:"h6"},r.title):null):null,r.description?o().createElement(m.T,{className:"tree-text-description",color:g.w.colors.gray600,size:"p3",weight:"regular"},r.description):null,o().createElement("div",{className:"__content"},"jsx"===r.type?null===(a=null==r?void 0:r.jsxRenderer)||void 0===a?void 0:a.call(r,t):null,"list"===r.type?o().createElement("ul",{className:"__list"},Array.isArray(r.list)?r.list.map((e,t)=>o().createElement("li",{key:t,style:e.style,className:`__item ${e.className}`}," ",o().createElement("div",{className:`__btn ${e.selected?"--checked":""}`,onClick:()=>handleItemClick(t,e),"data-event-category":e.dataEventCategory,"data-event-action":e.dataEventAction,"data-event-label":e.dataEventLabel},e.icon&&o().createElement("img",{className:"__icon",src:e.icon,loading:"lazy"}),o().createElement("span",null,e.label)),e.subTree?o().createElement("img",{className:"__toggle",src:"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3e%3cpath stroke='%23595959' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 12 4-4-4-4'/%3e%3c/svg%3e",loading:"lazy"}):null,e.selected?o().createElement("img",{className:"__toggle",src:"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3e%3cpath stroke='%238C8C8C' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M13.333 4 6 11.333 2.667 8'/%3e%3c/svg%3e",loading:"lazy"}):null)):null):null))}},TYy9:function(e,t,a){var n=a("XGnz");e.exports=function(e){return(null==e?0:e.length)?n(e,1):[]}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.