fw-webbuilder 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/fw-webbuilder.mjs +1 -1
- package/index.d.ts +2056 -3
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import*as e from"@angular/common/http";import{HttpParams as t}from"@angular/common/http";import*as i from"@angular/core";import{InjectionToken as n,inject as o,Injectable as r,HostListener as s,Input as a,Component as l}from"@angular/core";import{Subject as d,firstValueFrom as c,catchError as h,throwError as p}from"rxjs";import{io as g}from"socket.io-client";import*as b from"@angular/common";import{CommonModule as u}from"@angular/common";const f=[{label:"Sắp xếp lớp",icon:"layout"},{label:"Lấy thuộc tính từ màn",icon:"sliders"},{label:"Xóa",icon:"delete"}],_=[{label:"Thêm khung",icon:"plus-square"},{label:"Thêm vật thể",icon:"plus-circle"},{label:"Sắp xếp lớp",icon:"layout"},{label:"Lên trên",icon:"arrow-up"},{label:"Xuống dưới",icon:"arrow-down"},{label:"Lấy thuộc tính từ màn",icon:"sliders"},{label:"Xóa",icon:"delete"}],m=[{tool_tip:"Máy tính",icon:"desktop",value:"desktop"},{tool_tip:"Máy tính bảng ngang",icon:"tablet",value:"tablet_landscape"},{tool_tip:"Máy tính bảng dọc",icon:"tablet",value:"tablet_portrait"},{tool_tip:"Điện thoại ngang",icon:"mobile",value:"mobile_landscape"},{tool_tip:"Điện thoại dọc",icon:"mobile",value:"mobile_portrait"}],v={name:"",link:"",component_config:"WbPageConfig",desktop_class:{page:{"--bg-color":"#ffffff"}},desktop_config:{id_header:"",id_footer:""},tablet_landscape_class:{page:{"--bg-color":"#ffffff"}},tablet_landscape_config:{id_header:"",id_footer:""},tablet_portrait_class:{page:{"--bg-color":"#ffffff"}},tablet_portrait_config:{id_header:"",id_footer:""},mobile_landscape_class:{page:{"--bg-color":"#ffffff"}},mobile_landscape_config:{id_header:"",id_footer:""},mobile_portrait_class:{page:{"--bg-color":"#ffffff"}},mobile_portrait_config:{id_header:"",id_footer:""},seo:{title:"",description:"",keywords:"",og_title:"",og_description:"",og_type:""},type:""},y=[{desc:{vi:'<p>Sữa HiPP 3 Combiotic Organic 2482 800gr<br>Trẻ từ 1 tuổi trở lên vẫn cần bổ sung dinh dưỡng thiết yếu, mẹ cần bổ sung hàm lượng Canxi cho bé mỗi ngày. Tuy nhiên hàm lượng Sắt, kẽm, I-ốt và các khoáng chất trong sữa bò tự nhiên thường không cao. Sữa bột Hipp 3 Combiotic chứa đầy đủ dưỡng chất thiết yếu cho sự tăng trưởng và phát triển của bé trong giai đoạn tăng trưởng từ 1 tuổi trở lên cho con yêu thông minh, mau lớn và khỏe mạnh.</p><p>Đặc điểm nổi bật của sản phẩm</p><p>Sữa Hipp 3 với nguồn nguyên liệu hoàn toàn hữu cơ và siêu sạch Organic đạt tiêu chuẩn của Liên Minh Châu Âu</p><p>Sữa bổ sung hàm lượng Probitik phân lập gốc từ sữa mẹ, Praebitik và vitamin A, C, D giúp tăng cường miễn dịch, hỗ trợ tiêu hóa.</p><p>Hàm lượng Protein phù hợp với sự phát triển của cơ thể bé, có tác dụng tăng cường miễn dịch, ức chế sự phát triển của các vi khuẩn, virut gây bệnh</p><p>Chất xơ thực phẩm quan trọng GOS chiết tách từ lactose trong sữa tạo môi trường thuận lợi cho lợi khuẩn Probiotic phát triển, tăng cường đường ruột, hỗ trợ hệ tiêu hóa của trẻ.</p><p>Sữa bổ sung ARA và DHA ( axit béo Omega 3 và Omega 6) có vai trò đặc biệt quan trọng giúp kích thích não bộ và các tế bào thần kinh, thị lực của bé phát triển</p><p>Bổ sung sắt có tác dụng trong quá trình tạo máu.</p><p>Bổ sung vitamin D và kháng thể tự nhiên IgG tăng cường hệ miễn dịch, giúp phát triển hoàn thiện chức năng nhìn của mắt, hệ thần kinh, giảm cholesterol toàn phần, và triglyceride máu, LDL-cholesterol (cholesterol xấu), giúp dự phòng các bệnh tim mạch.</p><p>Không chứa tinh bột, sữa bột Hipp 3 Combiotic chỉ chứa đường tự nhiên Lactose giúp bé dễ hấp thu và tiêu hóa tốt.</p><p>Đặc biệt sữa không chứa Gluten</p><p>Sữa bột Hipp3 dạng tơi xốp, dễ tan, không bị vón cục, có mùi thơm nhẹ, dễ uống giúp bé ăn ngon miệng và thích thú</p><p>KM</p><ul><li data-list-item-id="ed2ee73c6cba22f96af6f97cb988c3912">"Tưng bừng khai trương" - giảm giá 50% tất cả sản phẩm</li><li data-list-item-id="ed62a9ac50f6ee192e6a2cabeebff9b1b">Giảm thêm 500.000đ khi thanh toán bằng thẻ tín dụng tại TTMS</li><li data-list-item-id="e10a21617d914add51ebad5203874b999">Giảm ngay 100.000đ khi quét QR Code cùng Mastercard với đơn hàng 1.000.000đ</li></ul>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Hipp 3 Combiotic Organic 2482 800gr"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Hipp",id_categorys:[],product_attributes:[{id:"8662d676-c1ac-4854-b956-3593583d174b",name:"Kích thước",values:["To","Nhỏ"]}],variations:[{id:"11881207-b902-4559-9a6c-9f5eb609f0f0",sku:"CDEQNL7L",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656340302-812022711.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656342596-883421575.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656343612-416135702.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656344724-531521917.png"],import_price:0,original_price:6e5,retail_price:58e4,fields:[{value:"To",name:"Kích thước"}],weight:0,stock:10,hidden:!1},{id:"5ecf23b5-2c35-4db3-a66f-b70be938b051",sku:"LAE2SHJ4",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656405318-593063767.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656407777-653200713.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656409981-32559064.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656411713-182955683.png"],import_price:0,original_price:6e5,retail_price:55e4,fields:[{value:"Nhỏ",name:"Kích thước"}],weight:0,stock:0,hidden:!1}],link:"sua-hipp-3-combiotic-organic-2482-800gr"},{desc:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa Hipp 4 Combiotic Organic 800g cho bé phát triển toàn diện</span><br><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa Hipp 4 Combiotic Organic 800g dành cho bé trên 3 tuổi. Với công thức đặc biệt bổ sung lợi khuẩn cùng chất xơ rất tốt cho hệ tiêu hóa, tăng cường hệ miễn dịch, dễ dàng hấp thụ. Không những vậy, sữa bột trẻ em Hipp còn tăng cường hàm lượng DHA, Omega 3 và Omega 6 giúp trẻ phát triển trí não, thông minh vượt trội.</span></p>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Hipp 4 Combiotic Organic 800g"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Hipp",id_categorys:[],product_attributes:[],variations:[{id:"1bb8747f-980c-47fa-8bbd-1ea2adb1a968",sku:"2JUDEY1T",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656502723-760473000.png"],import_price:0,original_price:4e5,retail_price:38e4,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-hipp-4-combiotic-organic-800g"},{desc:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Giai đoạn đầu là giai đoạn giúp bé nhà bạn có thể hấp thụ chất dinh dưỡng tốt nhất, tăng cường khả năng miễn dịch cho bé lớn lên được an toàn và khỏe mạnh nhất. Vào giai đoạn này, hầu hết các mẹ đều cho con bú sữa mẹ hoàn toàn. Tuy nhiên nhiều mẹ do một số lý do mà không đủ sữa cho con bú nên việc cung cấp dinh dưỡng cho bé thông qua các sản phẩm sữa bột chất lượng là điều cần thiết và quan trọng. Sữa bột công thức Physiolac số 1 400g với những công thức tính toán cẩn trọng về thành phần, giúp trẻ dễ dàng hấp thu các chất dinh dưỡng, nâng cao sức đề kháng và tăng cường hệ miễn dịch trong giai đoạn từ 0-6 tháng tuổi.</span></p>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Physiolac số 2 400g"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Physiolac",id_categorys:[],product_attributes:[],variations:[{id:"ed2eb369-8a67-4c38-bf65-dbd882bd1ae1",sku:"6QCPL5LN",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656593161-876866227.png"],import_price:0,original_price:35e4,retail_price:34e4,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-physiolac-so-2-400g"},{desc:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Giai đoạn đầu là giai đoạn giúp bé nhà bạn có thể hấp thụ chất dinh dưỡng tốt nhất, tăng cường khả năng miễn dịch cho bé lớn lên được an toàn và khỏe mạnh nhất. Vào giai đoạn này, hầu hết các mẹ đều cho con bú sữa mẹ hoàn toàn. Tuy nhiên nhiều mẹ do một số lý do mà không đủ sữa cho con bú nên việc cung cấp dinh dưỡng cho bé thông qua các sản phẩm sữa bột chất lượng là điều cần thiết và quan trọng. Sữa bột công thức Physiolac số 1 400g với những công thức tính toán cẩn trọng về thành phần, giúp trẻ dễ dàng hấp thu các chất dinh dưỡng, nâng cao sức đề kháng và tăng cường hệ miễn dịch trong giai đoạn từ 0-6 tháng tuổi.</span></p>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Physiolac số 1 - 400g"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Physiolac",id_categorys:[],product_attributes:[],variations:[{id:"2650f2c9-7531-4d8a-9f8e-a980542e091f",sku:"BH3N4JT7",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656677198-366596996.png"],import_price:0,original_price:35e4,retail_price:32e4,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-physiolac-so-1---400g"},{desc:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa Similac HMO số 3 IQ (1.7kg) công thức cải tiến mới vượt trội</span><br><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa bột cho bé Similac HMO số 3 IQ với công thức cải tiến hệ dưỡng chất IQ và 2\'-FL HMO đáp ứng đầy đủ nhu cầu dinh dưỡng giúp trẻ từ 1-2 tuổi phát triển tối ưu. Không những vậy thành phần 2\'-FL HMO là Prebiotic tự nhiên tìm thấy trong sữa mẹ hỗ trợ tăng cường sức khỏe hệ miễn dịch giúp phòng tránh các mầm bệnh nguy hiểm và tạo nền tảng cho trẻ phát triển mạnh mẽ cả về trí não và thể chất.</span></p>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Similac IQ HMO số 4 900g"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Similac",id_categorys:[],product_attributes:[],variations:[{id:"aaa789ec-b240-4eaf-9bc8-82ed153b1540",sku:"3EIACQ2G",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656758760-168052267.png"],import_price:0,original_price:0,retail_price:7e5,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-similac-iq-hmo-so-4-900g"},{desc:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa Similac HMO số 3 IQ (1.7kg) công thức cải tiến mới vượt trội</span><br><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa bột cho bé Similac HMO số 3 IQ với công thức cải tiến hệ dưỡng chất IQ và 2\'-FL HMO đáp ứng đầy đủ nhu cầu dinh dưỡng giúp trẻ từ 1-2 tuổi phát triển tối ưu. Không những vậy thành phần 2\'-FL HMO là Prebiotic tự nhiên tìm thấy trong sữa mẹ hỗ trợ tăng cường sức khỏe hệ miễn dịch giúp phòng tránh các mầm bệnh nguy hiểm và tạo nền tảng cho trẻ phát triển mạnh mẽ cả về trí não và thể chất.</span></p>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Similac Newborn IQ HMO 400g"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Similac",id_categorys:[],product_attributes:[],variations:[{id:"5e6217fc-72df-4919-a342-2a034adf2362",sku:"08D0OFMU",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656831526-957803788.png"],import_price:0,original_price:3e5,retail_price:279e3,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-similac-newborn-iq-hmo-400g"},{desc:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa Similac HMO số 3 IQ (1.7kg) công thức cải tiến mới vượt trội</span><br><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa bột cho bé Similac HMO số 3 IQ với công thức cải tiến hệ dưỡng chất IQ và 2\'-FL HMO đáp ứng đầy đủ nhu cầu dinh dưỡng giúp trẻ từ 1-2 tuổi phát triển tối ưu. Không những vậy thành phần 2\'-FL HMO là Prebiotic tự nhiên tìm thấy trong sữa mẹ hỗ trợ tăng cường sức khỏe hệ miễn dịch giúp phòng tránh các mầm bệnh nguy hiểm và tạo nền tảng cho trẻ phát triển mạnh mẽ cả về trí não và thể chất.</span></p>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Similac HMO số 3 IQ 1,7kg"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Similac",id_categorys:[],product_attributes:[],variations:[{id:"12898e54-8624-4a86-8b31-e0ce262253b4",sku:"UOZVCVHA",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657025615-587614689.png"],import_price:0,original_price:0,retail_price:84e4,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-similac-hmo-so-3-iq-1,7kg"},{desc:{vi:"<p>Sữa Frisolac Gold 3 1.5kg nguồn dinh dưỡng tối ưu dành cho bé từ 0 tới 6 tháng tuổi <br>Ngoài những dưỡng chất thiết yếu cho chế độ dinh dưỡng cân bằng, sữa bột cho bé Frisolac Gold 1 Mới, hộp thiếc 900gr, dành cho trẻ từ 0 – 6 tháng tuổi, nay với công thức cải tiến mới gồm sự kết hợp tối ưu giữa Synbiotics (Probiotics BB-12 & L.casei 431& Prebiotics GOS & FOS) giúp hỗ trợ hệ tiêu hóa, đồng thời Frisolac Gold 1 còn cung cấp các dưỡng chất quan trọng để hỗ trợ cho sự phát triển trí não và thể chất của trẻ.</p><p>Công thức LockNutri đảm bảo dưỡng chất nguyên vẹn từ thiên nhiên trong quá trình chế biến .Giúp hấp thụ tối đa và dễ tiêu hoá - khoẻ mạnh từ bên trong</p>"},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Frisolac Gold 3 1.5kg"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Frisolac",id_categorys:[],product_attributes:[],variations:[{id:"b6d2421c-eb5b-420e-9cfb-2e46c89e3bf3",sku:"KROBYEFT",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657084217-482398164.png"],import_price:0,original_price:41e4,retail_price:4e5,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-frisolac-gold-3-1.5kg"},{desc:{vi:"<p>Sữa Frisolac Gold 2 (900g) nguồn dinh dưỡng tối ưu dành cho bé từ 0 tới 6 tháng tuổi <br>Ngoài những dưỡng chất thiết yếu cho chế độ dinh dưỡng cân bằng, sữa bột cho bé Frisolac Gold 1 Mới, hộp thiếc 900gr, dành cho trẻ từ 0 – 6 tháng tuổi, nay với công thức cải tiến mới gồm sự kết hợp tối ưu giữa Synbiotics (Probiotics BB-12 & L.casei 431& Prebiotics GOS & FOS) giúp hỗ trợ hệ tiêu hóa, đồng thời Frisolac Gold 1 còn cung cấp các dưỡng chất quan trọng để hỗ trợ cho sự phát triển trí não và thể chất của trẻ.</p><p>Công thức LockNutri đảm bảo dưỡng chất nguyên vẹn từ thiên nhiên trong quá trình chế biến .Giúp hấp thụ tối đa và dễ tiêu hoá - khoẻ mạnh từ bên trong</p>"},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Frisolac Gold 2 (900g)"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Frisolac",id_categorys:[],product_attributes:[],variations:[{id:"8a71794f-b629-4d72-aa9a-306b73cba763",sku:"9217ZAS8",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657146460-964400781.png"],import_price:0,original_price:0,retail_price:3e5,fields:[],weight:0,stock:0,hidden:!1}],link:"sua-frisolac-gold-2-(900g)"},{desc:{vi:"<p>Sữa Frisolac gold 1 (400gr) nguồn dinh dưỡng tối ưu dành cho bé từ 0 tới 6 tháng tuổi <br>Ngoài những dưỡng chất thiết yếu cho chế độ dinh dưỡng cân bằng, sữa bột cho bé Frisolac Gold 1 Mới, hộp thiếc 900gr, dành cho trẻ từ 0 – 6 tháng tuổi, nay với công thức cải tiến mới gồm sự kết hợp tối ưu giữa Synbiotics (Probiotics BB-12 & L.casei 431& Prebiotics GOS & FOS) giúp hỗ trợ hệ tiêu hóa, đồng thời Frisolac Gold 1 còn cung cấp các dưỡng chất quan trọng để hỗ trợ cho sự phát triển trí não và thể chất của trẻ.</p><p>Công thức LockNutri đảm bảo dưỡng chất nguyên vẹn từ thiên nhiên trong quá trình chế biến .Giúp hấp thụ tối đa và dễ tiêu hoá - khoẻ mạnh từ bên trong</p>"},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Frisolac gold 1 (400gr)"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Frisolac ",id_categorys:[],product_attributes:[],variations:[{id:"098f92ea-2d55-4d1f-98aa-fc7aa503e700",sku:"47MUEQUZ",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657196987-928137824.png"],import_price:0,original_price:27e4,retail_price:262e3,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-frisolac-gold-1-(400gr)"},{desc:{vi:"<p>Bỉm dán Pampers cao cấp JB NB68, khô thoáng và sạch sẽ cho trẻ<br>Để giữ vệ sinh an toàn sẽ giúp bé có sức khỏe và phát triển một cách mạnh mẽ nhất, việc lựa chọn một chiếc tã giấy hoặc bỉm cho bé nhà mình là một điều vô cùng cần thiết. Nhưng để chọn được một loại bỉm có chất lượng tốt cũng như nguồn gốc và xuất xứ rõ ràng lại là một điều không hề dễ dàng.</p><p>Bỉm dán Pampers Newborn 68 miếng là một trong số các loại bỉm cao cấp nhất tới từ Nhật Bản, được các chuyên gia kiểm thử nghiệm đảm bảo an toàn tuyệt đối cho sức khỏe của bé.</p>"},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Bỉm - Tã dán Pampers size L - 32 miếng"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Pampers",id_categorys:[],product_attributes:[],variations:[{id:"183e4619-4d37-466b-9156-dc679a1509d0",sku:"AGYW1ML1",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657276154-673160400.png"],import_price:0,original_price:21e4,retail_price:2e5,fields:[],weight:0,stock:10,hidden:!1}],link:"bim---ta-dan-pampers-size-l---32-mieng"},{desc:{vi:"<p>Bỉm dán Pampers cao cấp JB NB68, khô thoáng và sạch sẽ cho trẻ<br>Để giữ vệ sinh an toàn sẽ giúp bé có sức khỏe và phát triển một cách mạnh mẽ nhất, việc lựa chọn một chiếc tã giấy hoặc bỉm cho bé nhà mình là một điều vô cùng cần thiết. Nhưng để chọn được một loại bỉm có chất lượng tốt cũng như nguồn gốc và xuất xứ rõ ràng lại là một điều không hề dễ dàng.</p><p>Bỉm dán Pampers Newborn 68 miếng là một trong số các loại bỉm cao cấp nhất tới từ Nhật Bản, được các chuyên gia kiểm thử nghiệm đảm bảo an toàn tuyệt đối cho sức khỏe của bé.</p>"},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Bỉm - Tã dán Pampers size M - 50 miếng"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Pampers",id_categorys:[],product_attributes:[],variations:[{id:"55e416e5-84c4-418b-b103-00f3fed3d8a3",sku:"GH63H9J7",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657385743-490573315.png"],import_price:0,original_price:23e4,retail_price:2e5,fields:[],weight:0,stock:10,hidden:!1}],link:"bim---ta-dan-pampers-size-m---50-mieng"},{desc:{vi:"<p>Bỉm dán Pampers cao cấp JB NB68, khô thoáng và sạch sẽ cho trẻ<br>Để giữ vệ sinh an toàn sẽ giúp bé có sức khỏe và phát triển một cách mạnh mẽ nhất, việc lựa chọn một chiếc tã giấy hoặc bỉm cho bé nhà mình là một điều vô cùng cần thiết. Nhưng để chọn được một loại bỉm có chất lượng tốt cũng như nguồn gốc và xuất xứ rõ ràng lại là một điều không hề dễ dàng.</p><p>Bỉm dán Pampers Newborn 68 miếng là một trong số các loại bỉm cao cấp nhất tới từ Nhật Bản, được các chuyên gia kiểm thử nghiệm đảm bảo an toàn tuyệt đối cho sức khỏe của bé.</p>"},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Bỉm - Tã dán Pampers Nhật Newborn - 68 miếng"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Pampers",id_categorys:[],product_attributes:[],variations:[{id:"52cc9977-ed0d-47be-b7da-7b14d34e1a7c",sku:"2VEU6ZRY",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657452271-841964486.png"],import_price:0,original_price:3e5,retail_price:295e3,fields:[],weight:0,stock:10,hidden:!1}],link:"bim---ta-dan-pampers-nhat-newborn---68-mieng"},{desc:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Đến từ thương hiệu Unicharm nổi tiếng Nhật Bản, tã quần Moony size XL bé gái sẽ đem đến cho cô công chúa nhỏ nhà bạn những trải nghiệm đầy thích thú. Thiết kế dành riêng cho bé gái với màu hồng dễ thương cùng với những họa tiết ngộ nghĩnh, đáng yêu, chất liệu cao cấp, mềm mại, chỉ thị ướt báo thời gian thay tã thuận tiện, từng chiếc tã Moony không những đem đến cho bé cảm giác thoải mái, dễ chịu tối đa mà còn giúp mẹ dễ dàng và tiện lợi hơn trong công việc chăm sóc bé yêu hàng ngày.</span></p>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Bỉm - Tã dán Moony size M - 64 miếng"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Moony ",id_categorys:[],product_attributes:[],variations:[{id:"98a53409-e67d-4e5f-a717-7e530d97112b",sku:"6ECWS54D",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657517149-265443315.png"],import_price:0,original_price:3e5,retail_price:297e3,fields:[],weight:0,stock:0,hidden:!1}],link:"bim---ta-dan-moony-size-m---64-mieng"}],k=new n("WEBBUILDER_API_URL");class w{apiUrl=o(k);socket=null;connect(){this.socket||(this.socket=g(this.apiUrl),console.log("Socket connected"))}sendMessage(e,t){this.socket&&this.socket.emit(e,t)}onMessage(e,t){this.socket&&this.socket.on(e,t)}disconnect(){this.socket&&(this.socket.disconnect(),this.socket=null,console.log("Socket disconnected"))}static"ɵfac"=i.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:i,type:w,deps:[],target:i.ɵɵFactoryTarget.Injectable});static"ɵprov"=i.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"20.3.15",ngImport:i,type:w,providedIn:"root"})}i.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:i,type:w,decorators:[{type:r,args:[{providedIn:"root"}]}]});class P{http;socketService;apiUrl=o(k);urlBE=`${this.apiUrl}/api/v1`;group;projectWorking=null;parentChoosing=null;itemChoosing=null;elementChoosingRef=null;isShiftPressed=!1;arrayChoosing=[];currentPage=null;pages=[];blocks=[];objects=[];freeblocks=[];chatboxs=[];device=localStorage.getItem("device")?JSON.parse(localStorage.getItem("device")||""):"desktop";type="design";loading=!1;group_frames=[];group_objects=[];toolsBox=[];toolsBoxPosition={x:0};isFreeBlock=!1;header=null;footer=null;chatbox=null;blockPicking=null;heightMainDesign=0;resizeGroup={image:{width:"--width",height:"--height"},block:{width:"--width",height:"--min-height"}};clientId=Math.random().toString(36).slice(2)+Date.now();infoVirtualSelected={left:0,top:0,width:0,height:0};currentTool=null;EventBus=new d;zoom=1;allowCopy=!1;constructor(e,t){this.http=e,this.socketService=t}realTimeUpdate(){this.socketService.onMessage("add_doc",e=>{if(e.client_id!==this.clientId&&e.db==this.projectWorking._id&&("wb_pages"==e.col_name&&(this.pages=[...this.pages,e.data]),"wb_blocks"==e.col_name&&(this.blocks=[...this.blocks,e.data],"block_blank"==e.data.type?e.data.id_page==this.currentPage._id&&(this.currentPage.blocks=[...this.currentPage.blocks,e.data]):this.freeblocks=[...this.freeblocks,e.data]),"wb_objects"==e.col_name)){this.objects=[...this.objects,e.data];const t=e.data.id_object||e.data.id_block;if(t){const i=this.findItemById(t);i&&(i.objects||(i.objects=[]),i.objects.push(e.data))}}}),this.socketService.onMessage("update_doc",e=>{if(e.client_id!==this.clientId&&e.db==this.projectWorking._id){if("wb_pages"==e.col_name){const t=this.pages.findIndex(t=>t._id===e.docKey);if(-1==t)return;if(this.pages[t]={...this.pages[t],...e.data},this.currentPage&&this.currentPage._id===e.docKey){if(e.data.hasOwnProperty("id_clone_blocks"))if(this.currentPage.hasOwnProperty("id_clone_blocks")||(this.currentPage.id_clone_blocks=[]),e.data.id_clone_blocks?.length>this.currentPage.id_clone_blocks?.length){e.data.id_clone_blocks.filter(e=>!this.currentPage.id_clone_blocks.includes(e)).forEach(t=>{let i=this.blocks.find(e=>e._id==t);i&&(i=JSON.parse(JSON.stringify(i)),i.id_page=e.docKey,i.is_clone=!0,i.objects=this.getFullObjectsForBlock(i),this.currentPage.blocks.push(i))})}else this.currentPage.blocks=this.currentPage.blocks.filter(t=>e.data.id_clone_blocks.includes(t._id));this.currentPage={...this.currentPage,...e.data},e.data[this.device+"_config"]?.id_header?this.header=this.freeblocks.find(t=>t._id==e.data[this.device+"_config"].id_header):this.header=null,e.data[this.device+"_config"]?.id_footer?this.footer=this.freeblocks.find(t=>t._id==e.data[this.device+"_config"].id_footer):this.footer=null}}if("wb_blocks"==e.col_name){const t=this.blocks.findIndex(t=>t._id===e.docKey),i=this.freeblocks.findIndex(t=>t._id===e.docKey);if(-1!=t){let t=this.blocks.findIndex(t=>t._id===e.docKey);this.blocks[t]={...this.blocks[t],...e.data};const i=this.currentPage.blocks.findIndex(t=>t._id===e.docKey);if(-1!==i){if(e.data.hasOwnProperty("id_clone_objects"))if(this.currentPage.blocks[i].hasOwnProperty("id_clone_objects")||(this.currentPage.blocks[i].id_clone_objects=[]),e.data.id_clone_objects?.length>this.currentPage.blocks[i].id_clone_objects?.length){e.data.id_clone_objects.filter(e=>!this.currentPage.blocks[i].id_clone_objects.includes(e)).forEach(t=>{let n=this.objects.find(e=>e._id==t);n&&(n=JSON.parse(JSON.stringify(n)),n.id_block=e.docKey,n.is_clone=!0,delete n.id_object,n.objects=this.getFullObjectsForObject(n),this.currentPage.blocks[i].objects.push(n))})}else this.currentPage.blocks[i].objects=this.currentPage.blocks[i].objects.filter(t=>e.data.id_clone_objects.includes(t._id));this.currentPage.blocks[i]={...this.currentPage.blocks[i],...e.data}}}if(-1!=i){const t=this.freeblocks.findIndex(t=>t._id===e.docKey);if(-1!==t){if(e.data.hasOwnProperty("id_clone_objects"))if(this.freeblocks[t].hasOwnProperty("id_clone_objects")||(this.freeblocks[t].id_clone_objects=[]),e.data.id_clone_objects?.length>this.freeblocks[t].id_clone_objects?.length){e.data.id_clone_objects.filter(e=>!this.freeblocks[t].id_clone_objects.includes(e)).forEach(i=>{let n=this.objects.find(e=>e._id==i);n&&(n=JSON.parse(JSON.stringify(n)),n.id_block=e.docKey,n.is_clone=!0,delete n.id_object,n.objects=this.getFullObjectsForObject(n),this.freeblocks[t].objects.push(n))})}else this.freeblocks[t].objects=this.freeblocks[t].objects.filter(t=>e.data.id_clone_objects.includes(t._id));this.freeblocks[t]={...this.freeblocks[t],...e.data}}}}if("wb_objects"==e.col_name){const t=this.objects.findIndex(t=>t._id===e.docKey);if(-1==t)return;this.objects[t]={...this.objects[t],...e.data};let i=this.objects[t].id_object||this.objects[t].id_block;for(const t in e.data)t.includes("_position_")&&(i=t.split("_position_")[1]);if(i){const t=this.findItemById(i);if(t){const i=t.objects.findIndex(t=>t._id===e.docKey);if(-1!==i){if(e.data.hasOwnProperty("id_clone_objects")){const n=t.objects[i];if(n.hasOwnProperty("id_clone_objects")||(n.id_clone_objects=[]),e.data.id_clone_objects?.length>n.id_clone_objects?.length){e.data.id_clone_objects.filter(e=>!n.id_clone_objects.includes(e)).forEach(n=>{let o=this.objects.find(e=>e._id==n);o&&(o=JSON.parse(JSON.stringify(o)),o.id_object=e.docKey,o.is_clone=!0,delete o.id_block,o.objects=this.getFullObjectsForObject(o),t.objects[i].objects.push(o))})}else t.objects[i].objects=t.objects[i].objects.filter(t=>!t.is_clone||e.data.id_clone_objects.includes(t._id))}t.objects[i]={...t.objects[i],...e.data}}}}}}}),this.socketService.onMessage("delete_doc",e=>{if(e.client_id!==this.clientId&&e.db==this.projectWorking._id&&("wb_pages"==e.col_name&&(this.pages=this.pages.filter(t=>t._id!==e.docKey),this.currentPage&&this.currentPage._id===e.docKey&&(this.currentPage=null)),"wb_blocks"==e.col_name&&(this.blocks=this.blocks.filter(t=>t._id!==e.docKey),this.currentPage.blocks=this.currentPage.blocks.filter(t=>t._id!==e.docKey),this.freeblocks=this.freeblocks.filter(t=>t._id!==e.docKey)),"wb_objects"==e.col_name)){const t=this.objects.findIndex(t=>t._id===e.docKey);if(-1!==t){const i=this.objects[t];this.objects.splice(t,1);const n=i.id_object||i.id_block;if(n){const t=this.findItemById(n);t&&t.objects&&(t.objects=t.objects.filter(t=>t._id!==e.docKey))}}}})}closeConnection(){this.socketService.disconnect()}onNotifyChange(e){return this.EventBus.asObservable().subscribe(e)}notifyChange(e){this.EventBus.next(e)}findItemById(e){let t=null;const{currentPage:i,freeblocks:n}=this;for(const n of i.blocks)if(t=this.findItemInTree(n,e),t)break;if(!t)for(const i of n)if(t=this.findItemInTree(i,e),t)break;return t}findItemInTree(e,t){if(e._id===t)return e;if(e.objects)for(const i of e.objects){const e=this.findItemInTree(i,t);if(e)return e}return null}wrapApiCall(e){return c(e.pipe(h(e=>p(()=>{const t=e.error;return console.error("API Error:",e),t}))))}addProject(e){return new Promise((t,i)=>{this.wrapApiCall(this.http.post(`${this.urlBE}/projects`,{data:e})).then(e=>{let i=[];i.push(this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/add`,{col_name:"wb_pages",data:{...v,name:{vi:"Trang chủ"},type:"page_home"},db:e.data._id}))),y.forEach(t=>{i.push(this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/add`,{col_name:"products",data:t,db:e.data._id})))}),Promise.all(i).then(()=>{t(e)})})})}updateProject(e,t){return new Promise((i,n)=>{this.wrapApiCall(this.http.put(`${this.urlBE}/projects/${e}`,{value:t})).then(e=>{i(e)})})}deleteProject(e){return this.wrapApiCall(this.http.delete(`${this.urlBE}/projects/${e}`))}getProjects_byFields(e,i,n,o){const r=new t({fromObject:{page:String(n),limit:String(o),query:JSON.stringify(e??{}),sort:JSON.stringify(i??{})}});return this.wrapApiCall(this.http.get(`${this.urlBE}/projects`,{params:r})).then(e=>e)}sortVietnamese(e){const t=new Intl.Collator("vi",{sensitivity:"base"}),i=this.projectWorking.language.defaule;return[...e].sort((e,n)=>t.compare(e.name[i],n.name[i]))}getHeaderFooter(){const{currentPage:e,device:t,freeblocks:i}=this,{id_header:n,id_footer:o,id_chatboxs:r}=e[t+"_config"];if(n){const e=i.find(e=>e._id==n);this.header=e||null}else this.header=null;if(o){const e=i.find(e=>e._id==o);this.footer=e||null}else this.footer=null;this.chatboxs=this.freeblocks.filter(e=>r?.includes(e._id))}connectProject(e){return new Promise((t,i)=>{this.projectWorking?t():(this.socketService.connect(),this.socketService.sendMessage("get_project_data",{id_project:e}),this.socketService.onMessage("project_data",e=>{const i=JSON.parse(e);this.setProjectWorking(i),t()}))})}setProjectWorking(e){this.projectWorking=e.project,this.pages=this.sortVietnamese(e.pages),this.blocks=e.blocks.filter(e=>"block_blank"==e.type),this.freeblocks=e.blocks.filter(e=>"block_blank"!=e.type),this.objects=e.objects;let t=localStorage.getItem("page")?JSON.parse(localStorage.getItem("page")||""):null;t&&this.pages.find(e=>e._id==t)||(t=this.pages.find(e=>"page_home"==e.type)._id),this.freeblocks.forEach(e=>(e.objects=this.getFullObjectsForBlock(e),e)),this.currentPage=this.getDetailPage(t),this.getHeaderFooter(),this.updateHeightDesign()}getDetailPage(e){const t=structuredClone(this.pages.find(t=>t._id===e));if(t){const i=structuredClone(this.blocks.filter(t=>t.id_page===e));t.blocks=i.map(e=>(e.objects=this.getFullObjectsForBlock(e),e)),t.id_clone_blocks?.length&&t.id_clone_blocks.forEach(e=>{let i=this.blocks.find(t=>t._id==e);i&&(i=JSON.parse(JSON.stringify(i)),i.id_page=t._id,i.is_clone=!0,i.objects=this.getFullObjectsForBlock(i),t.blocks.push(i))})}return t.blocks.sort((e,t)=>e[this.device+"_position_"+e.id_page].index<t[this.device+"_position_"+t.id_page].index?-1:e[this.device+"_position_"+e.id_page].index>t[this.device+"_position_"+t.id_page].index?1:0),t}getFullObjectsForBlock(e){const t=[];e.id_clone_objects?.length&&e.id_clone_objects.forEach(i=>{let n=this.objects.find(e=>e._id==i);n&&(n=JSON.parse(JSON.stringify(n)),n.id_block=e._id,n.is_clone=!0,delete n.id_object,n.objects=this.getFullObjectsForObject(n),t.push(n))});return structuredClone(this.objects.filter(t=>t.id_block===e._id)).forEach(e=>{e.objects=this.getFullObjectsForObject(e),t.push(e)}),t}getFullObjectsForObject(e){let t=[];e.id_clone_objects?.length&&e.id_clone_objects.forEach(i=>{let n=this.objects.find(e=>e._id==i);n&&(n=JSON.parse(JSON.stringify(n)),n.id_object=e._id,n.is_clone=!0,delete n.id_block,n.objects=this.getFullObjectsForObject(n),t=[...t,n])});return structuredClone(this.objects.filter(t=>t.id_object===e._id)).forEach(e=>{e.objects=this.getFullObjectsForObject(e),t=[...t,e]}),t}addPage(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/add`,{col_name:"wb_pages",data:e,client_id:this.clientId,db:this.projectWorking._id})).then(e=>(this.pages=[...this.pages,e.data],this.sortVietnamese(this.pages),e))}deletePage(e){const t=this.getDetailPage(e);let i=this.flatNodes(t.blocks).map(e=>e.type.includes("block")?e.is_clone?this.deleteBlockClone(e):this.deleteBlockDbAndLocal(e._id):e.is_clone?this.deleteObject(e):this.deleteObjectDbAndLocal(e._id));return i.push(this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/delete`,{col_name:"wb_pages",docKey:e,client_id:this.clientId,db:this.projectWorking._id}))),Promise.all(i).then(t=>(this.pages=this.pages.filter(t=>t._id!==e),t))}getPage(e){return new Promise((t,i)=>{const n=this.pages.find(t=>t._id==e);n&&t({vcode:0,data:n})})}deleteBlockDbAndLocal(e){this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/delete`,{col_name:"wb_blocks",docKey:e,client_id:this.clientId,db:this.projectWorking._id})).then(t=>{this.blocks=this.blocks.filter(t=>t._id!=e)})}deleteObjectDbAndLocal(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/delete`,{col_name:"wb_objects",docKey:e,client_id:this.clientId,db:this.projectWorking._id})).then(t=>{this.objects=this.objects.filter(t=>t._id!=e)})}flatNodes(e){const t=[];for(const i of e)t.push(i),i.objects&&i.objects.length>0&&!i.is_clone&&t.push(...this.flatNodes(i.objects));return t}updatePage(e,t){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/update`,{col_name:"wb_pages",docKey:e,value:t,client_id:this.clientId,db:this.projectWorking._id})).then(i=>{this.pages=this.pages.map(i=>i._id==e?{...i,...t}:i)})}getPages(){return Promise.resolve({vcode:0,data:this.pages,msg:""})}addBlock(e){if("block_blank"==e.type){const t=this.getDetailPage(e.id_page);if(t){const i=t.blocks.reduce((t,i)=>Math.max(i[this.device+"_position_"+e.id_page].index,t),-1);e[this.device+"_position_"+e.id_page]={...e[this.device+"_position_"+e.id_page],index:i+1}}}return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/add`,{col_name:"wb_blocks",data:e,client_id:this.clientId,db:this.projectWorking._id})).then(t=>("block_blank"==e.type?(this.blocks=[...this.blocks,t.data],t.data.id_page==this.currentPage._id&&(this.currentPage.blocks=[...this.currentPage.blocks,t.data]),this.updateHeightDesign()):this.freeblocks=[...this.freeblocks,t.data],t))}updateBlock(e,t){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/update`,{col_name:"wb_blocks",docKey:e,value:t,client_id:this.clientId,db:this.projectWorking._id})).then(i=>{this.blocks=this.blocks.map(i=>i._id==e?{...i,...t}:i)})}deleteBlock(e){const t=structuredClone([...this.blocks,...this.freeblocks].find(t=>t._id===e)),i=this.getFullObjectsForBlock(t);let n=this.flatNodes(i).map(e=>e.type.includes("block")?e.is_clone?this.deleteBlockClone(e):this.deleteBlockDbAndLocal(e._id):e.is_clone?this.deleteObjectClone(e):this.deleteObjectDbAndLocal(e._id));return n.push(this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/delete`,{col_name:"wb_blocks",docKey:e,client_id:this.clientId,db:this.projectWorking._id}))),Promise.all(n).then(i=>{this.blocks=this.blocks.filter(t=>t._id!=e),this.freeblocks=this.freeblocks.filter(t=>t._id!=e),this.currentPage.blocks=this.currentPage.blocks.filter(t=>t._id!==e),"block_blank"==t.type&&this.currentPage.blocks.forEach((e,t)=>{e[`${this.device}_position_${this.currentPage._id}`]={...e[`${this.device}_position_${this.currentPage._id}`],index:t},this.updateBlock(e._id,{[`${this.device}_position_${this.currentPage._id}`]:e[`${this.device}_position_${this.currentPage._id}`]})})})}deleteBlockClone(e){return new Promise((t,i)=>{this.currentPage.id_clone_blocks.includes(e._id)&&(this.currentPage.id_clone_blocks=this.currentPage.id_clone_blocks.filter(t=>t!==e._id),this.updatePage(this.currentPage._id,{id_clone_blocks:this.currentPage.id_clone_blocks}).then(i=>{this.currentPage.blocks=this.currentPage.blocks.filter(t=>t._id!=e._id),t(i)}))})}addObject(e){return["object_text_repeat","object_button_repeat","object_image_repeat","object_video_repeat","object_youtube_repeat"].includes(e.type)&&!e.code&&(e.code=this.generateObjectId()),this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/add`,{col_name:"wb_objects",data:e,client_id:this.clientId,db:this.projectWorking._id})).then(t=>{this.objects.push(structuredClone(t.data));const i=e.id_object??e.id_block;if(i){const e=this.findItemById(i);e&&(e.objects||(e.objects=[]),e.objects.push(t.data))}return t})}updateObject(e,t){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/update`,{col_name:"wb_objects",docKey:e,value:t,client_id:this.clientId,db:this.projectWorking._id})).then(i=>{this.objects=this.objects.map(i=>i._id==e?{...i,...t}:i)})}deleteObject(e){const t=this.objects.find(t=>t._id==e),i=this.getFullObjectsForObject(t);let n=this.flatNodes(i).map(e=>e.is_clone?this.deleteObjectClone(e):this.deleteObjectDbAndLocal(e._id));return n.push(this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/delete`,{col_name:"wb_objects",docKey:e,client_id:this.clientId,db:this.projectWorking._id}))),Promise.all(n).then(i=>{const n=this.findItemById(t.id_object||t.id_block);n&&(n.objects=n.objects.filter(t=>t._id!==e)),this.objects=this.objects.filter(t=>t._id!=e)})}deleteObjectClone(e){return new Promise((t,i)=>{const n=this.findItemById(e.id_object||e.id_block);if(n){n.id_clone_objects=n.id_clone_objects.filter(t=>t!==e._id);let i=[];n.type.includes("block")?i.push(this.updateBlock(n._id,{id_clone_objects:n.id_clone_objects})):i.push(this.updateObject(n._id,{id_clone_objects:n.id_clone_objects})),Promise.all(i).then(i=>{n.objects=n.objects.filter(t=>t._id!==e._id),t(i)})}})}upLoadImage(e,t,i,n){const o=new FormData;return o.append("db",this.projectWorking._id),o.append("newPath",i),t&&o.append("oldPath",t),o.append("options",JSON.stringify(n)),o.append("file",e),this.wrapApiCall(this.http.post(`${this.urlBE}/upload`,o))}addCategory(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/add`,{col_name:"categories",data:e,db:this.projectWorking._id})).then(e=>e)}updateCategory(e,t){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/update`,{col_name:"categories",docKey:e,value:t,db:this.projectWorking._id})).then(e=>e)}deleteCategory(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/delete`,{col_name:"categories",docKey:e,db:this.projectWorking._id})).then(e=>e)}getCategories_byFields(e,t,i,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/get`,{col_name:"categories",db:this.projectWorking._id,query:e,sort:t,page:i,limit:n})).then(e=>{const t=(e=>{if(!e||0===e.length)return[];const t=[],i=(n,o=0)=>{e.filter(e=>e.id_parent==n).forEach(e=>{const n={...e,level:o};t.push(n),i(e._id,o+1)})};return i("",0),t})(e.data);return{...e,data:t}})}searchList_likeSearch(e,t,i){return(e=e.trim())&&""!==e?this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/searchList_likeSearch`,{value:e,col_name:t,field:i,lang:this.projectWorking.language.default,db:this.projectWorking._id})).then(e=>e):Promise.resolve({vcode:0,data:[]})}addProduct(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/add`,{col_name:"products",data:e,db:this.projectWorking._id})).then(e=>e)}updateProduct(e,t){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/update`,{col_name:"products",docKey:e,value:t,db:this.projectWorking._id})).then(e=>e)}deleteProduct(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/delete`,{col_name:"products",docKey:e,db:this.projectWorking._id})).then(e=>e)}getProducts_byFields(e,t,i,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/get`,{col_name:"products",db:this.projectWorking._id,query:e,sort:t,page:i,limit:n}))}getProducts_byCategoryLink(e,t,i,n,o){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/getdetail_bycategory`,{col_name:"products",db:this.projectWorking._id,link_category:e,query:t,sort:i,page:n,limit:o}))}getDetailProduct_byLink(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/getdetail_bylink`,{col_name:"products",db:this.projectWorking._id,link:e}))}addNews(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/add`,{col_name:"news",data:e,db:this.projectWorking._id})).then(e=>e)}updateNews(e,t){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/update`,{col_name:"news",docKey:e,value:t,db:this.projectWorking._id})).then(e=>e)}deleteNews(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/delete`,{col_name:"news",docKey:e,db:this.projectWorking._id})).then(e=>e)}getNews_byFields(e,t,i,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/get`,{col_name:"news",db:this.projectWorking._id,query:e,sort:t,page:i,limit:n}))}addNewField(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/add`,{col_name:"wb_newfields",data:e,db:this.projectWorking._id})).then(e=>e)}updateNewField(e,t){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/update`,{col_name:"wb_newfields",docKey:e,value:t,db:this.projectWorking._id})).then(e=>e)}deleteNewField(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/delete`,{col_name:"wb_newfields",docKey:e,db:this.projectWorking._id})).then(e=>e)}getNewField_byFields(e,t,i,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/get`,{col_name:"wb_newfields",db:this.projectWorking._id,query:e,sort:t,page:i,limit:n}))}displayBocksOfPage_byScroll(e){e.blocks.forEach(e=>{})}setItemChoosing(e,t,i){if("design"!=this.type)return;if(null==e||null==e){if(this.isFreeBlock)return;return this.itemChoosing=null,this.arrayChoosing=[],this.isFreeBlock=!1,this.blockPicking=null,this.elementChoosingRef=null,this.group_frames=[],this.group_objects=[],this.toolsBox=[],this.currentTool=null,void(this.allowCopy=!0)}this.itemChoosing=null,this.arrayChoosing=[e],this.parentChoosing=i||null,this.itemChoosing=e,e.type.includes("block")&&"block_blank"!=e.type&&(this.isFreeBlock=!0,this.blockPicking=e),this.itemChoosing[this.device+"_config"].drag_mode||(this.itemChoosing[this.device+"_config"].drag_mode="absolute"),e.type.includes("block")?(this.group_frames=this.group.blocks[e.type].group_frames,this.group_objects=this.group.blocks[e.type].group_objects):e.type.includes("frame")&&(this.group_frames=this.group.frames[e.type].group_frames,this.group_objects=this.group.frames[e.type].group_objects),this.toolsBox=e.type.includes("block")||e.type.includes("frame")?JSON.parse(JSON.stringify(_)):JSON.parse(JSON.stringify(f)),e.type.includes("frame")&&(this.toolsBox=this.toolsBox.filter(e=>!["Xuống dưới","Lên trên"].includes(e.label))),e.is_clone&&(this.toolsBox=this.toolsBox.filter(e=>["Sắp xếp lớp","Xóa"].includes(e.label)),"block_blank"==e.type&&(this.toolsBox=[...JSON.parse(JSON.stringify(_)).filter(e=>["Xuống dưới","Lên trên"].includes(e.label)),...this.toolsBox]),this.toolsBox=[{label:"Di chuyển đến đối tượng gốc",icon:"check-circle"},...this.toolsBox]),this.currentTool=null,["object_button_dialog","object_product_input_search"].includes(e.type)&&this.toolsBox.splice(1,0,{label:"Thiết kế khối hộp thoại",icon:"box-plot"}),e.type.includes("block")&&"block_blank"!=e.type&&(this.toolsBox=this.toolsBox.filter(e=>!["Lên trên","Xuống dưới"].includes(e.label)));const n=document.querySelector(`.${this.device}`),o=n&&n.parentNode?n.parentNode.getBoundingClientRect():null;this.toolsBoxPosition.x=n.getBoundingClientRect().left>o.left?n.getBoundingClientRect().left-150:o.left-150,console.log("data",e),setTimeout(()=>{this.allowCopy=!0,this.elementChoosingRef=t},0)}getCart(){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/carts/get`,{db:this.projectWorking._id}))}addToCart(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/carts/add`,{itemToAdd:e,db:this.projectWorking._id}))}deleteCartItem(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/carts/delete`,{id_variation:e,db:this.projectWorking._id}))}updateCartItem(e,t){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/carts/update`,{id_variation:e,quantity:t,db:this.projectWorking._id}))}addAddress(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/address/add`,{data:e,col_name:"address",db:this.projectWorking._id}))}updateAddress(e,t){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/address/update`,{docKey:e,col_name:"address",value:t,db:this.projectWorking._id}))}deleteAddress(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/address/delete`,{docKey:e,col_name:"address",db:this.projectWorking._id}))}getProvinces(){return c(this.http.get("assets/data/website-builder.provinces.json")).then(e=>({vcode:0,data:e.sort((e,t)=>e.name.localeCompare(t.name,"vi",{sensitivity:"base"}))}))}getDistricts(e){return c(this.http.get("assets/data/website-builder.districts.json")).then(t=>({vcode:0,data:t.filter(t=>t.province_code==e).sort((e,t)=>e.name.localeCompare(t.name,"vi",{sensitivity:"base"}))}))}getWards(e){return c(this.http.get("assets/data/website-builder.wards.json")).then(t=>({vcode:0,data:t.filter(t=>t.district_code==e).sort((e,t)=>e.name.localeCompare(t.name,"vi",{sensitivity:"base"}))}))}getCountries(){return this.wrapApiCall(this.http.get("https://restcountries.com/v3.1/all?fields=name,flags"))}updateHeightDesign(){setTimeout(()=>{this.heightMainDesign=this.currentPage.blocks.reduce((e,t)=>e+ +t[this.device+"_class"][t.resize_field][this.resizeGroup[t.resize_group].height].replace("px",""),0),this.heightMainDesign+=200},0)}getObject(e){return new Promise((t,i)=>{const n=this.objects.find(t=>t._id===e);n&&t({vcode:0,data:n})})}getBlock(e){return new Promise((t,i)=>{const n=this.blocks.find(t=>t._id===e);n?t({vcode:0,data:n}):i(new Error("Block not found"))})}handleCtrl_C(){return new Promise((e,t)=>{if(!this.allowCopy||0==this.arrayChoosing.length)return;let i={type:"ctrl_c",data:this.arrayChoosing};return navigator.clipboard.writeText(JSON.stringify(i)),e({vcode:0,msg:`Đã sao chép ${this.arrayChoosing.length} đối tượng`})})}handleCtrl_D(){return new Promise((e,t)=>{const{itemChoosing:i,arrayChoosing:n}=this;if(!this.allowCopy||0===n.length)return e({vcode:1,msg:"Không có gì để nhân bản"});if(i?.type.includes("block")&&"block_blank"!==i?.type)return t({vcode:1,msg:"Không thể nhân bản khối này, chỉ có thể nhân bản khối trống"});const o={type:"ctrl_d",data:n};return navigator.clipboard.writeText(JSON.stringify(o)),e({vcode:0,msg:"Nhân bản thành công"})})}handleCtrl_V(){navigator.clipboard.readText().then(async e=>{let t=e;try{if(t=JSON.parse(e),"ctrl_c"!=t.type||t.copy_page){if("ctrl_d"==t.type){let e=t.data;for(const t of e)if(t.type.includes("object")||t.type.includes("frame"))await this.handleCloneObject(this.itemChoosing,t,!0);else{if(this.currentPage.id_clone_blocks&&this.currentPage.id_clone_blocks.some(e=>e==t._id)||this.currentPage.blocks.some(e=>e._id==t._id))return console.error("Khối này đã tồn tại");await this.handleCloneBlock(this.currentPage,t)}}}else{const e=t.data;if(e[0].type.includes("object")||e[0].type.includes("frame")){if(0==this.arrayChoosing.length)return;if(this.itemChoosing?.type.includes("object")||["AtwFrameTabs","AtwFrameBanner","AtwFrameCollapse"].includes(this.itemChoosing?.component)||this.itemChoosing?.is_clone)return console.error("Không thể dán vào đối tượng này");if("AtwFrameRepeat"==this.itemChoosing?.component&&e.some(e=>!["AtwTextRepeat","AtwImageRepeat","AtwShape","AtwButtonRepeat"].includes(e.component)))return console.error("Không thể dán vào đối tượng này");this.loading=!0;for(const t of e)await this.handleCopyObject(this.itemChoosing,t,!0);this.loading=!1}else{this.loading=!0;for(const t of e)await this.handleCopyBlock(this.currentPage,t);this.loading=!1}}}catch{}})}applyFontLinks(e){(new DOMParser).parseFromString(e,"text/html").querySelectorAll("link").forEach(e=>{document.head.appendChild(e.cloneNode(!0))})}getFontNames(e){const t=(new DOMParser).parseFromString(e,"text/html"),i=t.querySelector("link[href*='fonts.googleapis.com/css2']")?.getAttribute("href");return i?[...i.matchAll(/family=([^:&]+)/g)].map(e=>decodeURIComponent(e[1]).replace(/\+/g," ")):[]}async handleCopyBlock(e,t){try{if(t.is_clone&&this.blocks.find(e=>e._id==t._id))await this.handleCloneBlock(e,t);else{let i={...t};delete i._id,delete i.is_clone,delete i.id_page,i.objects=[],i.id_clone_objects=[],i.name=t.name+"- Copy","block_blank"==i.type&&(i.id_page=e._id,m.forEach(n=>{const o=n.value;i[o+"_position_"+e._id]={...t[o+"_position_"+t.id_page]}}));const n=await this.addBlock(i);if(t.objects&&t.objects.length>0)for(const e of t.objects)await this.handleCopyObject(n.data,e)}}catch(e){console.error("error",e)}}async handleCopyObject(e,t,i=!1){if(t.is_clone&&this.objects.find(e=>e._id==t._id))this.handleCloneObject(e,t,i);else{delete t.is_clone;let n={...t};delete n._id,delete n.province,delete n.district,delete n.ward,n.objects=[],n.id_clone_objects=[],e.type.includes("block")?(n.id_block=e._id,delete n.id_object):(n.id_object=e._id,delete n.id_block),n.name=t.name+"- Copy",m.forEach(o=>{const r=o.value;n[r+"_position_"+e._id]={...t[r+"_position_"+(t.id_block||t.id_object)]},e._id==(t.id_block||t.id_object)?(n[r+"_position_"+e._id].top+=10,n[r+"_position_"+e._id].left+=10):i&&(n[r+"_position_"+e._id].top=0,n[r+"_position_"+e._id].left=0)});const o=await this.addObject(n);if(t.objects&&t.objects.length>0)for(const e of t.objects)await this.handleCopyObject(o.data,e)}}async handleCopyPage(e){const t=structuredClone(e),i=this.projectWorking.language.available;for(const e of i)t.name[e]=t.name[e]+"-Copy";t.link=t.link+"-copy",delete t._id,delete t.blocks,t.id_clone_blocks=[];const n=await this.addPage(t);if(e.blocks&&e.blocks.length>0)for(const t of e.blocks)try{await this.handleCopyBlock(n.data,t)}catch(e){console.error("error",e)}return n}async handleCloneBlock(e,t){const i=this.blocks.find(e=>e._id==t._id);if(!e||!i)return;e.id_clone_blocks||(e.id_clone_blocks=[]),e.blocks||(e.blocks=[]);const n={top:0,left:0,index:e.blocks.reduce((t,i)=>Math.max(t,i[this.device+"_position_"+e._id].index),-1)+1,z_index:1};await this.updateBlock(t._id,{["desktop_position_"+e._id]:n,["tablet_landscape_position_"+e._id]:n,["tablet_portrait_position_"+e._id]:n,["mobile_landscape_position_"+e._id]:n,["mobile_portrait_position_"+e._id]:n}),e.id_clone_blocks.some(e=>e==t._id)||(e.id_clone_blocks=[...e.id_clone_blocks,t._id],await this.updatePage(e._id,{id_clone_blocks:e.id_clone_blocks}));const o={...t,["desktop_position_"+e._id]:n,["tablet_landscape_position_"+e._id]:n,["tablet_portrait_position_"+e._id]:n,["mobile_landscape_position_"+e._id]:n,["mobile_portrait_position_"+e._id]:n};o.is_clone=!0,o.id_page=e._id,e.blocks=[...e.blocks,o]}async handleCloneObject(e,t,i=!1){if(!this.objects.some(e=>e._id==t._id))return;if(i){const{itemChoosing:e}=this;if(t._id===e?._id)return void console.error("Không thể clone chính đối tượng đang chọn");if(e?.objects.some(e=>e._id===t._id))return void console.error("Không thể clone đối tượng đã clone");if(this.findItemInTree(t,e._id))return void console.error("Không thể clone đối tượng là cha của đối tượng đang chọn")}const n={...t};m.forEach(o=>{const r=o.value;n[r+"_position_"+e._id]={...t[r+"_position_"+(t.id_block||t.id_object)]},i&&(n[r+"_position_"+e._id]={top:0,left:0,z_index:1})}),e.hasOwnProperty("id_clone_objects")||(e.id_clone_objects=[]),await this.updateObject(n._id,{["desktop_position_"+e._id]:n["desktop_position_"+e._id],["tablet_landscape_position_"+e._id]:n["tablet_landscape_position_"+e._id],["tablet_portrait_position_"+e._id]:n["tablet_portrait_position_"+e._id],["mobile_landscape_position_"+e._id]:n["mobile_landscape_position_"+e._id],["mobile_portrait_position_"+e._id]:n["mobile_portrait_position_"+e._id]}),e.id_clone_objects.some(e=>e==n._id)||(e.id_clone_objects.push(n._id),e.type.includes("block")?await this.updateBlock(e._id,{id_clone_objects:e.id_clone_objects}):await this.updateObject(e._id,{id_clone_objects:e.id_clone_objects})),n.is_clone=!0,e.type.includes("block")?(delete n.id_object,n.id_block=e._id):(delete n.id_block,n.id_object=e._id),e.objects=[...e.objects,n]}handleOrder(e,t,i){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/order`,{customer_info:e,note:t,payment_method:i,db:this.projectWorking._id}))}getOrders_byFields(e,t,i,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/get`,{col_name:"orders",db:this.projectWorking._id,query:e,sort:t,page:i,limit:n}))}updateOrder(e,t){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/update`,{col_name:"orders",docKey:e,value:t,db:this.projectWorking._id})).then(e=>e)}deleteOrder(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/delete`,{col_name:"orders",docKey:e,db:this.projectWorking._id})).then(e=>e)}generateObjectId(){return(Math.floor(Date.now()/1e3).toString(16)+"xxxxxxxxxxxxxxxx".replace(/[x]/g,()=>(16*Math.random()|0).toString(16))).slice(0,24)}static"ɵfac"=i.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:i,type:P,deps:[{token:e.HttpClient},{token:w}],target:i.ɵɵFactoryTarget.Injectable});static"ɵprov"=i.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"20.3.15",ngImport:i,type:P,providedIn:"root"})}i.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:i,type:P,decorators:[{type:r,args:[{providedIn:"root"}]}],ctorParameters:()=>[{type:e.HttpClient},{type:w}]});class S{webBuilderService;el;renderer;mode="absolute";boundaryEle;parent;data;device;top=0;left=0;type="preview";dragOffset={x:0,y:0};idParent="";direction="";initData={top:0,left:0,bottom:0,right:0};currPos={x:0,y:0};changed=!1;parentEleRect;parentData;keyPosition="";isDragging=!1;mouseMoveListener=null;mouseUpListener=null;constructor(e,t,i){this.webBuilderService=e,this.el=t,this.renderer=i}ngOnInit(){this.idParent=this.data.id_page||this.data.id_block||this.data.id_object,this.parentEleRect=this.boundaryEle?.getBoundingClientRect(),this.keyPosition=this.data[this.device+"_position_"+this.idParent]?this.device+"_position_"+this.idParent:this.device+"_position",this.updateUIPosition()}ngAfterViewInit(){this.updateInitBottomAndRight()}ngOnChanges(e){(e.top||e.left)&&this.updateUIPosition()}updateUIPosition(){const e=this.data.id_page||this.data.id_block||this.data.id_object,t=this.data[this.device+"_position_"+e]?`${this.device}_position_${e}`:`${this.device}_position`,{left:i,top:n,z_index:o}=this.data[t];"absolute"!==this.data[this.device+"_config"].drag_mode&&this.data[this.device+"_config"].drag_mode?(this.renderer.setStyle(this.el.nativeElement,"position","relative"),this.renderer.setStyle(this.el.nativeElement,"left","0"),this.renderer.setStyle(this.el.nativeElement,"top","0"),this.renderer.setStyle(this.el.nativeElement,"margin-left",`${i}px`),this.renderer.setStyle(this.el.nativeElement,"margin-top",`${n}px`),this.renderer.setStyle(this.el.nativeElement,"z-index",`${o}`)):(this.renderer.setStyle(this.el.nativeElement,"position","absolute"),this.renderer.setStyle(this.el.nativeElement,"left",`${i}px`),this.renderer.setStyle(this.el.nativeElement,"top",`${n}px`),this.renderer.setStyle(this.el.nativeElement,"margin-left","0"),this.renderer.setStyle(this.el.nativeElement,"margin-top","0"),this.renderer.setStyle(this.el.nativeElement,"z-index",`${o}`))}updateInitBottomAndRight(){const e=this.data[this.device+"_position_"+this.idParent]?this.device+"_position_"+this.idParent:this.device+"_position";this.data.type.includes("block")&&["block_blank","block_header","block_footer"].includes(this.data.type)?this.initData={top:0,left:0,bottom:+window.getComputedStyle(this.el.nativeElement).marginTop.replace("px","")+this.el.nativeElement.offsetHeight||0,right:this.el.nativeElement.offsetLeft+this.el.nativeElement.offsetWidth||0}:this.initData={top:this.data[e]?.top,left:this.data[e]?.left,bottom:this.data[e]?.top+this.el.nativeElement.offsetHeight||0,right:this.data[e]?.left+this.el.nativeElement.offsetWidth||0}}onPointerDown(e){if("design"==this.type&&(e.stopPropagation(),this.webBuilderService.isShiftPressed?this.handleChooseItems():this.handleChooseItem(),!["block_blank","block_header","block_footer"].includes(this.data.type)&&!this.data.is_child)){this.isDragging=!0;const{zoom:t}=this.webBuilderService;this.dragOffset.x=e.clientX/t,this.dragOffset.y=e.clientY/t,this.initData.left=this.data[this.keyPosition].left,this.initData.top=this.data[this.keyPosition].top,this.mouseMoveListener=this.renderer.listen("document","mousemove",e=>this.onMouseMove(e)),this.mouseUpListener=this.renderer.listen("document","mouseup",()=>this.onMouseUp())}}onMouseMove(e){if(!this.isDragging)return;const{zoom:t}=this.webBuilderService,i=e.clientX/t-this.dragOffset.x,n=e.clientY/t-this.dragOffset.y,o=Math.max(0,Math.min(Math.round(this.initData.left+i),this.boundaryEle.offsetWidth-this.el.nativeElement.offsetWidth)),r=Math.max(0,Math.min(Math.round(this.initData.top+n),this.boundaryEle.offsetHeight-this.el.nativeElement.offsetHeight));this.data[this.keyPosition].left==o&&this.data[this.keyPosition].top==r||(this.changed=!0),this.data[this.keyPosition].left=o,this.data[this.keyPosition].top=r}onMouseUp(){this.cleanupListeners(),this.isDragging=!1,this.updateInitBottomAndRight(),this.updatePosition()}ngOnDestroy(){this.cleanupListeners()}cleanupListeners(){this.mouseMoveListener&&(this.mouseMoveListener(),this.mouseMoveListener=null),this.mouseUpListener&&(this.mouseUpListener(),this.mouseUpListener=null)}handleChooseItems(){const{device:e}=this.webBuilderService;if((this.webBuilderService.arrayChoosing[0]?.id_page||this.webBuilderService.arrayChoosing[0].id_block||this.webBuilderService.arrayChoosing[0].id_object)!=(this.data.id_page||this.data.id_block||this.data.id_object))return;this.webBuilderService.itemChoosing=null,this.webBuilderService.arrayChoosing.find(e=>e._id==this.data._id)?this.webBuilderService.arrayChoosing=this.webBuilderService.arrayChoosing.filter(e=>e._id!=this.data._id):this.webBuilderService.arrayChoosing=[...this.webBuilderService.arrayChoosing,this.data];let t=Math.min(...this.webBuilderService.arrayChoosing.map(e=>e[this.device+"_position_"+(e.id_page||e.id_block||e.id_object)].left)),i=Math.min(...this.webBuilderService.arrayChoosing.map(e=>e[this.device+"_position_"+(e.id_page||e.id_block||e.id_object)].top??0)),n=Math.max(...this.webBuilderService.arrayChoosing.map(e=>e[this.device+"_position_"+(e.id_page||e.id_block||e.id_object)].left+ +e[this.device+"_class"][e.resize_field][this.webBuilderService.resizeGroup[e.resize_group].width].replace("px",""))),o=Math.max(...this.webBuilderService.arrayChoosing.map(e=>e[this.device+"_position_"+(e.id_page||e.id_block||e.id_object)].top+ +e[this.device+"_class"][e.resize_field][this.webBuilderService.resizeGroup[e.resize_group].height].replace("px","")));if(this.webBuilderService.arrayChoosing[0]?.type.includes("block")){t=0;const r=this.webBuilderService.arrayChoosing.reduce((t,i)=>Math.min(t,i[e+"_position_"+i.id_page].index),999999),s=this.webBuilderService.arrayChoosing.findIndex(t=>t[e+"_position_"+t.id_page].index==r),a=document.querySelector(`[id="${this.webBuilderService.arrayChoosing[s]._id}_root"]`);i=a.offsetTop,n=a.offsetWidth;const l=this.webBuilderService.arrayChoosing.reduce((t,i)=>Math.max(t,i[e+"_position_"+i.id_page].index),0),d=this.webBuilderService.arrayChoosing.findIndex(t=>t[e+"_position_"+t.id_page].index==l),c=this.webBuilderService.arrayChoosing[d];o=document.querySelector(`[id="${c._id}_root"]`).offsetTop+ +c[this.device+"_class"][c.resize_field][this.webBuilderService.resizeGroup[c.resize_group].height].replace("px","")}this.webBuilderService.infoVirtualSelected.left=t,this.webBuilderService.infoVirtualSelected.top=i,this.webBuilderService.infoVirtualSelected.width=n-t,this.webBuilderService.infoVirtualSelected.height=o-i}handleChooseItem(){this.webBuilderService.setItemChoosing(this.data,this.el.nativeElement,this.parent)}getLeftDrag(){return this.el.nativeElement.offsetLeft>24?-24:0}handleResizePointerDown(e,t){e.stopPropagation(),e.preventDefault(),this.direction=t,e.target.setPointerCapture(e.pointerId),this.currPos.x=this.el.nativeElement.getBoundingClientRect().left,this.currPos.y=this.el.nativeElement.getBoundingClientRect().top}handleResizePointerMove(e){"top"==this.direction&&(this.changed=!0,this.onResizeTop(e)),"bottom"==this.direction&&(this.changed=!0,this.onResizeBottom(e)),"left"==this.direction&&(this.changed=!0,this.onResizeLeft(e)),"right"==this.direction&&(this.changed=!0,this.onResizeRight(e)),"top-left"==this.direction&&(this.changed=!0,this.onResizeTop(e),this.onResizeLeft(e)),"top-right"==this.direction&&(this.changed=!0,this.onResizeTop(e),this.onResizeRight(e)),"bottom-left"==this.direction&&(this.changed=!0,this.onResizeBottom(e),this.onResizeLeft(e)),"bottom-right"==this.direction&&(this.changed=!0,this.onResizeBottom(e),this.onResizeRight(e))}handleResizePointerUp(e){e.target.releasePointerCapture(e.pointerId);const t=this.direction;if(this.direction="",this.changed){if(this.changed=!1,this.data.type.includes("block"))["block_blank"].includes(this.data.type)?(this.webBuilderService.currentPage.blocks.forEach((e,t)=>{e[this.keyPosition].top=0}),this.webBuilderService.updateHeightDesign()):["block_header","block_footer"].includes(this.data.type)&&(this.data[this.device+"_position"].top=0);else if(this.data.is_clone){let e=this.webBuilderService.objects.find(e=>e._id==this.data._id);e[this.keyPosition].top=this.data[this.keyPosition].top,e[this.keyPosition].left=this.data[this.keyPosition].left,e[this.keyPosition].z_index=this.data[this.keyPosition].z_index}["right","bottom","bottom-right"].includes(t)&&this.updateClass(),["top","left","top-left","top-right","bottom-left"].includes(t)&&this.updatePositionAndClass(),["top","left","top-left","top-right","bottom-left"].includes(t)&&this.data.objects?.length>0&&this.data.objects.forEach(e=>{this.webBuilderService.updateObject(e._id,{[this.device+"_position_"+this.data._id]:e[this.device+"_position_"+this.data._id]})}),this.updateInitBottomAndRight(),this.minTop=null,this.minLeft=null}}minTop=null;onResizeTop(e){this.currPos.y=this.el.nativeElement.getBoundingClientRect().top;let t=Math.round(e.clientY-this.currPos.y);this.currPos.y=e.clientY;let i=this.data[this.keyPosition].top+t;i=["block_blank","block_header","block_footer"].includes(this.data.type)?Math.min(i,this.initData.bottom):Math.max(0,Math.min(i,this.initData.bottom));let n=this.initData.bottom-i;if(this.data.objects.filter(e=>!e[this.device+"_hidden"])?.length>0&&!["frame_tab","frame_banner"].includes(this.data.type)){null==this.minTop&&(this.minTop=this.data.objects.filter(e=>!e[this.device+"_hidden"]).reduce((e,t)=>Math.min(e,t[`${this.device}_position_${this.data._id}`].top),99999)),i=Math.min(i,this.initData.top+this.minTop),n=this.initData.bottom-i;let e=i-this.data[this.keyPosition].top;this.data.objects.filter(e=>!e[this.device+"_hidden"]).forEach(t=>{t[`${this.device}_position_${this.data._id}`].top-=e})}this.data[this.device+"_class"][this.data.resize_field][this.webBuilderService.resizeGroup[this.data.resize_group].height]=n+"px",this.data[this.keyPosition].top=i}onResizeBottom(e){const t=this.el.nativeElement.getBoundingClientRect(),{zoom:i}=this.webBuilderService;let n=Math.max(0,Math.round((e.clientY-t.top)/i));if(this.data.type.includes("frame")||this.data.type.includes("object")){let o=this.boundaryEle.offsetHeight-this.data[this.keyPosition].top;n=Math.max(0,Math.min(Math.round((e.clientY-t.top)/i),o))}if(this.data.objects?.length>0&&!["frame_tab","frame_banner"].includes(this.data.type)){const e=this.data.objects.filter(e=>!e[this.device+"_hidden"]).reduce((e,t)=>{const i=t[`${this.device}_position_${this.data._id}`].top+ +t[this.device+"_class"][t.resize_field][this.webBuilderService.resizeGroup[t.resize_group].height].replace("px","");return Math.max(e,i)},0);n=Math.max(e,n)}this.data[this.device+"_class"][this.data.resize_field][this.webBuilderService.resizeGroup[this.data.resize_group].height]=n+"px"}minLeft=null;onResizeLeft(e){this.currPos.x=this.el.nativeElement.getBoundingClientRect().left;let t=Math.round(e.clientX-this.currPos.x);this.currPos.x=e.clientX;let i=this.data[this.keyPosition].left+t;i=Math.max(0,Math.min(i,this.initData.right));let n=this.initData.right-i;if(this.data.objects?.length>0&&!["frame_tab","frame_banner"].includes(this.data.type)){null==this.minLeft&&(this.minLeft=this.data.objects.filter(e=>!e[this.device+"_hidden"]).reduce((e,t)=>Math.min(e,t[`${this.device}_position_${this.data._id}`].left),99999)),i=Math.max(0,Math.min(i,this.initData.left+this.minLeft)),n=this.initData.right-i;const e=i-this.data[this.keyPosition].left;this.data.objects.filter(e=>!e[this.device+"_hidden"]).forEach(t=>{t[`${this.device}_position_${this.data._id}`].left-=e})}this.data[this.device+"_class"][this.data.resize_field][this.webBuilderService.resizeGroup[this.data.resize_group].width]=n+"px",this.data[this.keyPosition].left=i}onResizeRight(e){const{zoom:t}=this.webBuilderService,i=this.idParent?"position_"+this.idParent:"position",n=this.el.nativeElement.getBoundingClientRect();this.parentEleRect=this.boundaryEle.getBoundingClientRect();let o=this.parentEleRect.width/t-this.data[this.device+"_"+i].left,r=Math.max(0,Math.min(Math.round(e.clientX-n.left)/t,o));if(this.data.objects?.length>0&&!["frame_tab","frame_banner"].includes(this.data.type)){const e=this.data.objects.filter(e=>!e[this.device+"_hidden"]).reduce((e,t)=>{const i=t[`${this.device}_position_${this.data._id}`].left+ +t[this.device+"_class"][t.resize_field][this.webBuilderService.resizeGroup[t.resize_group].width].replace("px","");return Math.max(e,i)},0);r=Math.max(e,r)}this.data[this.device+"_class"][this.data.resize_field][this.webBuilderService.resizeGroup[this.data.resize_group].width]=r+"px"}updatePosition(){"design"==this.type&&this.changed&&(this.changed=!1,this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.keyPosition]:this.data[this.keyPosition]}):this.webBuilderService.updateObject(this.data._id,{[this.keyPosition]:this.data[this.keyPosition]}))}updateClass(){"design"==this.type&&(this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}))}updatePositionAndClass(){"design"==this.type&&(this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.keyPosition]:this.data[this.keyPosition],[this.device+"_class"]:this.data[this.device+"_class"]}):this.webBuilderService.updateObject(this.data._id,{[this.keyPosition]:this.data[this.keyPosition],[this.device+"_class"]:this.data[this.device+"_class"]}))}conditionShowActive(){const{itemChoosing:e,arrayChoosing:t,elementChoosingRef:i}=this.webBuilderService;return e&&!e.is_child&&e._id==this.data._id&&i==this.el.nativeElement||t?.some(e=>e._id==this.data._id)}conditionShowResize(){const{itemChoosing:e,arrayChoosing:t,elementChoosingRef:i}=this.webBuilderService;return e&&!e.is_clone&&!e.is_child&&e._id==this.data._id&&i==this.el.nativeElement||t.length>1&&t?.some(e=>e._id==this.data._id)}static"ɵfac"=i.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:i,type:S,deps:[{token:P},{token:i.ElementRef},{token:i.Renderer2}],target:i.ɵɵFactoryTarget.Component});static"ɵcmp"=i.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:S,isStandalone:!0,selector:"[wbdragdrop]",inputs:{mode:"mode",boundaryEle:"boundaryEle",parent:"parent",data:"data",device:"device",top:"top",left:"left",type:"type"},host:{listeners:{pointerdown:"onPointerDown($event)"}},usesOnChanges:!0,ngImport:i,template:'<ng-content></ng-content>\r\n\r\n\x3c!-- Lá cờ nắm kéo --\x3e\r\n@if (type == \'design\' && [\'frame_banner\'].includes(data.type)) {\r\n <div\r\n id="flag-drag"\r\n class="move relative"\r\n [ngStyle]="{ left: getLeftDrag() + \'px\' }"\r\n (pointerdown)="onPointerDown($event)"\r\n >\r\n <svg\r\n xmlns="http://www.w3.org/2000/svg"\r\n width="16"\r\n height="16"\r\n fill="currentColor"\r\n class="bi bi-arrows-move"\r\n viewBox="0 0 16 16"\r\n style="color: #fff"\r\n >\r\n <path\r\n fill-rule="evenodd"\r\n d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10M.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8"\r\n />\r\n </svg>\r\n\r\n <div class="absolute w-full h-full left-0 top-0" style="z-index: 9999"></div>\r\n </div>\r\n}\r\n\r\n\x3c!-- @if (conditionShowActive()) {\r\n <div class="border-active"></div>\r\n} --\x3e\r\n\r\n@if (conditionShowResize()) {\r\n @if ([\'block_blank\', \'block_header\', \'block_footer\'].includes(data.type)) {\r\n <div\r\n id="resize-top-block-blank"\r\n [ngStyle]="{ left: \'50%\', top: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'top\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom-block-blank"\r\n [ngStyle]="{ left: \'50%\', bottom: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n } @else if ([\'object_line\'].includes(data.type)) {\r\n @if (data[device + \'_config\'][\'direction\'] == \'vertical\') {\r\n <div\r\n id="resize-top"\r\n class="resize resize-t"\r\n [ngStyle]="{ left: \'50%\', top: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'top\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom"\r\n class="resize resize-b"\r\n [ngStyle]="{ left: \'50%\', bottom: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n } @else {\r\n <div\r\n id="resize-left"\r\n class="resize resize-ew"\r\n [ngStyle]="{ left: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-right"\r\n class="resize resize-ew"\r\n [ngStyle]="{ right: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n }\r\n } @else if ([\'WbText\'].includes(data.component)) {\r\n <div\r\n id="resize-left"\r\n class="resize resize-ew"\r\n [ngStyle]="{ left: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-right"\r\n class="resize resize-ew"\r\n [ngStyle]="{ right: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n } @else {\r\n <div\r\n id="resize-left"\r\n class="resize resize-ew"\r\n [ngStyle]="{ left: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-right"\r\n class="resize resize-ew"\r\n [ngStyle]="{ right: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-top"\r\n class="resize resize-t"\r\n [ngStyle]="{ left: \'50%\', top: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'top\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom"\r\n class="resize resize-b"\r\n [ngStyle]="{ left: \'50%\', bottom: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-top-left"\r\n class="resize resize-tl"\r\n [ngStyle]="{ left: 0, top: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'top-left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-top-right"\r\n class="resize resize-tr"\r\n [ngStyle]="{ right: 0, top: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'top-right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom-left"\r\n class="resize resize-bl"\r\n [ngStyle]="{ left: 0, bottom: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom-left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom-right"\r\n class="resize resize-br"\r\n [ngStyle]="{ right: 0, bottom: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom-right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n }\r\n}\r\n\x3c!-- is_child là con của các frame đặc biệt như frame-tab, collapse, banner --\x3e\r\n@if (\r\n !webBuilderService.itemChoosing?.type.includes(\'block\') &&\r\n webBuilderService.itemChoosing?._id == data._id &&\r\n webBuilderService.elementChoosingRef == el.nativeElement &&\r\n !data.is_child\r\n) {\r\n @if (data[keyPosition].top < 150) {\r\n <div\r\n class="ruler-line ruler-top"\r\n [ngStyle]="{\r\n height: data[keyPosition].top + \'px\',\r\n top: -data[keyPosition].top + \'px\'\r\n }"\r\n >\r\n @if (data[keyPosition].top > 8) {\r\n <span class="text-[14px] absolute top-1/2 -translate-1/2">\r\n {{ data[keyPosition].top }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (data[keyPosition].left < 150) {\r\n <div\r\n class="ruler-line ruler-left"\r\n [ngStyle]="{\r\n width: data[keyPosition].left + \'px\',\r\n left: -data[keyPosition].left + \'px\'\r\n }"\r\n >\r\n @if (data[keyPosition].left > 8) {\r\n <span class="text-[14px] absolute left-1/2 -translate-1/2">\r\n {{ data[keyPosition].left }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight) < 150) {\r\n <div\r\n class="ruler-line ruler-bottom"\r\n [ngStyle]="{\r\n height:\r\n boundaryEle.offsetHeight -\r\n (data[keyPosition].top + el.nativeElement?.offsetHeight) +\r\n \'px\',\r\n bottom:\r\n -(boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight)) +\r\n \'px\'\r\n }"\r\n >\r\n @if (\r\n boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight) > 8\r\n ) {\r\n <span class="text-[14px] absolute top-1/2 -translate-1/2">\r\n {{ boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight) }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) < 150) {\r\n <div\r\n class="ruler-line ruler-right"\r\n [ngStyle]="{\r\n width:\r\n boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) + \'px\',\r\n right:\r\n -(boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth)) +\r\n \'px\'\r\n }"\r\n >\r\n @if (boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) > 8) {\r\n <span class="text-[14px] absolute right-1/2 -translate-y-1/2 translate-x-1/2">\r\n {{ boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n}\r\n',styles:[".move{position:absolute;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;cursor:move;top:0;z-index:1000;background-color:#4399fa}.border-active{position:absolute;inset:0;border:1px solid #4399fa;pointer-events:none}.resize{z-index:9999;position:absolute;select-event:none;background-color:#3b82f6;width:.5rem;height:.5rem}.resize-ew{cursor:ew-resize}.resize-tl{cursor:nw-resize}.resize-tr{cursor:ne-resize}.resize-bl{cursor:sw-resize}.resize-br{cursor:se-resize}.resize-t,.resize-b{cursor:n-resize}#resize-top-block-blank{z-index:9999;position:absolute;select-event:none;background-color:#3b82f6;width:.5rem;height:.5rem;width:7rem;height:.75rem;border-radius:0 0 1rem 1rem;cursor:n-resize;border:2px solid #3b82f6;background-color:#fff}#resize-top-block-blank:hover{background-color:#3b82f6}#resize-bottom-block-blank{z-index:9999;position:absolute;select-event:none;background-color:#3b82f6;width:.5rem;height:.5rem;width:7rem;height:.75rem;border-radius:1rem 1rem 0 0;cursor:s-resize;border:2px solid #3b82f6;background-color:#fff}#resize-bottom-block-blank:hover{background-color:#3b82f6}.ruler-line{position:absolute;background-color:#ef4444;font-size:14px}.ruler-line.ruler-top,.ruler-line.ruler-bottom{width:.1px;left:50%;transform:translate(-50%)}.ruler-line.ruler-top span,.ruler-line.ruler-bottom span{top:50%}.ruler-line.ruler-left,.ruler-line.ruler-right{height:.1px;top:50%;transform:translateY(-50%)}.ruler-line.ruler-left span,.ruler-line.ruler-right span{left:50%}.ruler-line span{position:absolute;transform:translate(-50%,-50%)}\n"],dependencies:[{kind:"ngmodule",type:u},{kind:"directive",type:b.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]})}i.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:i,type:S,decorators:[{type:l,args:[{selector:"[wbdragdrop]",imports:[u],template:'<ng-content></ng-content>\r\n\r\n\x3c!-- Lá cờ nắm kéo --\x3e\r\n@if (type == \'design\' && [\'frame_banner\'].includes(data.type)) {\r\n <div\r\n id="flag-drag"\r\n class="move relative"\r\n [ngStyle]="{ left: getLeftDrag() + \'px\' }"\r\n (pointerdown)="onPointerDown($event)"\r\n >\r\n <svg\r\n xmlns="http://www.w3.org/2000/svg"\r\n width="16"\r\n height="16"\r\n fill="currentColor"\r\n class="bi bi-arrows-move"\r\n viewBox="0 0 16 16"\r\n style="color: #fff"\r\n >\r\n <path\r\n fill-rule="evenodd"\r\n d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10M.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8"\r\n />\r\n </svg>\r\n\r\n <div class="absolute w-full h-full left-0 top-0" style="z-index: 9999"></div>\r\n </div>\r\n}\r\n\r\n\x3c!-- @if (conditionShowActive()) {\r\n <div class="border-active"></div>\r\n} --\x3e\r\n\r\n@if (conditionShowResize()) {\r\n @if ([\'block_blank\', \'block_header\', \'block_footer\'].includes(data.type)) {\r\n <div\r\n id="resize-top-block-blank"\r\n [ngStyle]="{ left: \'50%\', top: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'top\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom-block-blank"\r\n [ngStyle]="{ left: \'50%\', bottom: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n } @else if ([\'object_line\'].includes(data.type)) {\r\n @if (data[device + \'_config\'][\'direction\'] == \'vertical\') {\r\n <div\r\n id="resize-top"\r\n class="resize resize-t"\r\n [ngStyle]="{ left: \'50%\', top: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'top\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom"\r\n class="resize resize-b"\r\n [ngStyle]="{ left: \'50%\', bottom: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n } @else {\r\n <div\r\n id="resize-left"\r\n class="resize resize-ew"\r\n [ngStyle]="{ left: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-right"\r\n class="resize resize-ew"\r\n [ngStyle]="{ right: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n }\r\n } @else if ([\'WbText\'].includes(data.component)) {\r\n <div\r\n id="resize-left"\r\n class="resize resize-ew"\r\n [ngStyle]="{ left: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-right"\r\n class="resize resize-ew"\r\n [ngStyle]="{ right: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n } @else {\r\n <div\r\n id="resize-left"\r\n class="resize resize-ew"\r\n [ngStyle]="{ left: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-right"\r\n class="resize resize-ew"\r\n [ngStyle]="{ right: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-top"\r\n class="resize resize-t"\r\n [ngStyle]="{ left: \'50%\', top: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'top\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom"\r\n class="resize resize-b"\r\n [ngStyle]="{ left: \'50%\', bottom: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-top-left"\r\n class="resize resize-tl"\r\n [ngStyle]="{ left: 0, top: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'top-left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-top-right"\r\n class="resize resize-tr"\r\n [ngStyle]="{ right: 0, top: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'top-right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom-left"\r\n class="resize resize-bl"\r\n [ngStyle]="{ left: 0, bottom: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom-left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom-right"\r\n class="resize resize-br"\r\n [ngStyle]="{ right: 0, bottom: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom-right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n }\r\n}\r\n\x3c!-- is_child là con của các frame đặc biệt như frame-tab, collapse, banner --\x3e\r\n@if (\r\n !webBuilderService.itemChoosing?.type.includes(\'block\') &&\r\n webBuilderService.itemChoosing?._id == data._id &&\r\n webBuilderService.elementChoosingRef == el.nativeElement &&\r\n !data.is_child\r\n) {\r\n @if (data[keyPosition].top < 150) {\r\n <div\r\n class="ruler-line ruler-top"\r\n [ngStyle]="{\r\n height: data[keyPosition].top + \'px\',\r\n top: -data[keyPosition].top + \'px\'\r\n }"\r\n >\r\n @if (data[keyPosition].top > 8) {\r\n <span class="text-[14px] absolute top-1/2 -translate-1/2">\r\n {{ data[keyPosition].top }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (data[keyPosition].left < 150) {\r\n <div\r\n class="ruler-line ruler-left"\r\n [ngStyle]="{\r\n width: data[keyPosition].left + \'px\',\r\n left: -data[keyPosition].left + \'px\'\r\n }"\r\n >\r\n @if (data[keyPosition].left > 8) {\r\n <span class="text-[14px] absolute left-1/2 -translate-1/2">\r\n {{ data[keyPosition].left }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight) < 150) {\r\n <div\r\n class="ruler-line ruler-bottom"\r\n [ngStyle]="{\r\n height:\r\n boundaryEle.offsetHeight -\r\n (data[keyPosition].top + el.nativeElement?.offsetHeight) +\r\n \'px\',\r\n bottom:\r\n -(boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight)) +\r\n \'px\'\r\n }"\r\n >\r\n @if (\r\n boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight) > 8\r\n ) {\r\n <span class="text-[14px] absolute top-1/2 -translate-1/2">\r\n {{ boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight) }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) < 150) {\r\n <div\r\n class="ruler-line ruler-right"\r\n [ngStyle]="{\r\n width:\r\n boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) + \'px\',\r\n right:\r\n -(boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth)) +\r\n \'px\'\r\n }"\r\n >\r\n @if (boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) > 8) {\r\n <span class="text-[14px] absolute right-1/2 -translate-y-1/2 translate-x-1/2">\r\n {{ boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n}\r\n',styles:[".move{position:absolute;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;cursor:move;top:0;z-index:1000;background-color:#4399fa}.border-active{position:absolute;inset:0;border:1px solid #4399fa;pointer-events:none}.resize{z-index:9999;position:absolute;select-event:none;background-color:#3b82f6;width:.5rem;height:.5rem}.resize-ew{cursor:ew-resize}.resize-tl{cursor:nw-resize}.resize-tr{cursor:ne-resize}.resize-bl{cursor:sw-resize}.resize-br{cursor:se-resize}.resize-t,.resize-b{cursor:n-resize}#resize-top-block-blank{z-index:9999;position:absolute;select-event:none;background-color:#3b82f6;width:.5rem;height:.5rem;width:7rem;height:.75rem;border-radius:0 0 1rem 1rem;cursor:n-resize;border:2px solid #3b82f6;background-color:#fff}#resize-top-block-blank:hover{background-color:#3b82f6}#resize-bottom-block-blank{z-index:9999;position:absolute;select-event:none;background-color:#3b82f6;width:.5rem;height:.5rem;width:7rem;height:.75rem;border-radius:1rem 1rem 0 0;cursor:s-resize;border:2px solid #3b82f6;background-color:#fff}#resize-bottom-block-blank:hover{background-color:#3b82f6}.ruler-line{position:absolute;background-color:#ef4444;font-size:14px}.ruler-line.ruler-top,.ruler-line.ruler-bottom{width:.1px;left:50%;transform:translate(-50%)}.ruler-line.ruler-top span,.ruler-line.ruler-bottom span{top:50%}.ruler-line.ruler-left,.ruler-line.ruler-right{height:.1px;top:50%;transform:translateY(-50%)}.ruler-line.ruler-left span,.ruler-line.ruler-right span{left:50%}.ruler-line span{position:absolute;transform:translate(-50%,-50%)}\n"]}]}],ctorParameters:()=>[{type:P},{type:i.ElementRef},{type:i.Renderer2}],propDecorators:{mode:[{type:a}],boundaryEle:[{type:a}],parent:[{type:a}],data:[{type:a}],device:[{type:a}],top:[{type:a}],left:[{type:a}],type:[{type:a}],onPointerDown:[{type:s,args:["pointerdown",["$event"]]}]}});class z{webBuilderService;el;boundaryEle;isDragging=!1;parentEleRect;dragOffset={x:0,y:0};currPos={x:0,y:0};idParent="";changed=!1;keyPosition;constructor(e,t){this.webBuilderService=e,this.el=t}ngOnInit(){this.idParent=this.webBuilderService.arrayChoosing[0].id_block??this.webBuilderService.arrayChoosing[0].id_object,this.keyPosition=`${this.webBuilderService.device}_position_${this.idParent}`}onHostMouseDown(e){if(e.stopPropagation(),"block_blank"==this.webBuilderService.arrayChoosing[0].type)return;this.el.nativeElement.setPointerCapture(e.pointerId);const{zoom:t,device:i}=this.webBuilderService;this.isDragging=!0,this.dragOffset.x=e.clientX/t,this.dragOffset.y=e.clientY/t,this.currPos.left=this.webBuilderService.infoVirtualSelected.left,this.currPos.top=this.webBuilderService.infoVirtualSelected.top}onPointerMove(e){if(!this.isDragging)return;const{zoom:t}=this.webBuilderService,i=e.clientX/t-this.dragOffset.x,n=e.clientY/t-this.dragOffset.y,o=Math.max(0,Math.min(Math.round(this.currPos.left+i),this.boundaryEle.offsetWidth-this.el.nativeElement.offsetWidth)),r=Math.max(0,Math.min(Math.round(this.currPos.top+n),this.boundaryEle.offsetHeight-this.el.nativeElement.offsetHeight)),s=o-this.webBuilderService.infoVirtualSelected.left,a=r-this.webBuilderService.infoVirtualSelected.top;this.webBuilderService.arrayChoosing.forEach(e=>{e[this.keyPosition].left=Math.round(e[this.keyPosition].left+s),e[this.keyPosition].top=Math.round(e[this.keyPosition].top+a)}),this.webBuilderService.infoVirtualSelected.left=o,this.webBuilderService.infoVirtualSelected.top=r,this.changed=!0}onPointerUp(e){this.isDragging&&(this.isDragging=!1,this.changed&&(this.changed=!1,this.webBuilderService.arrayChoosing.forEach(e=>{this.webBuilderService.updateObject(e._id,{[this.keyPosition]:e[this.keyPosition]})})))}static"ɵfac"=i.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:i,type:z,deps:[{token:P},{token:i.ElementRef}],target:i.ɵɵFactoryTarget.Component});static"ɵcmp"=i.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:z,isStandalone:!0,selector:"[wbVirtualSelected]",inputs:{boundaryEle:"boundaryEle"},host:{listeners:{pointerdown:"onHostMouseDown($event)",pointermove:"onPointerMove($event)",pointerup:"onPointerUp($event)"}},ngImport:i,template:"@if (webBuilderService.arrayChoosing[0].type != 'block_blank') {\r\n \x3c!-- top --\x3e\r\n @if (webBuilderService.infoVirtualSelected.top < 150) {\r\n <div\r\n class=\"ruler-line ruler-top\"\r\n [ngStyle]=\"{\r\n height: webBuilderService.infoVirtualSelected.top + 'px',\r\n top: -webBuilderService.infoVirtualSelected.top + 'px',\r\n width: '0.1px'\r\n }\"\r\n >\r\n @if (webBuilderService.infoVirtualSelected.top > 8) {\r\n <span class=\"text-[14px] absolute top-1/2 -translate-1/2\">\r\n {{ webBuilderService.infoVirtualSelected.top }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n \x3c!-- left --\x3e\r\n @if (webBuilderService.infoVirtualSelected.left < 150) {\r\n <div\r\n class=\"ruler-line ruler-left\"\r\n [ngStyle]=\"{\r\n width: webBuilderService.infoVirtualSelected.left + 'px',\r\n left: -webBuilderService.infoVirtualSelected.left + 'px',\r\n height: '0.1px'\r\n }\"\r\n >\r\n @if (webBuilderService.infoVirtualSelected.left > 8) {\r\n <span class=\"text-[14px] absolute left-1/2 -translate-1/2\">\r\n {{ webBuilderService.infoVirtualSelected.left }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n \x3c!-- bottom --\x3e\r\n @if (\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight) <\r\n 150\r\n ) {\r\n <div\r\n class=\"ruler-line ruler-bottom\"\r\n [ngStyle]=\"{\r\n height:\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight) +\r\n 'px',\r\n bottom:\r\n -(\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight)\r\n ) + 'px',\r\n width: '0.1px'\r\n }\"\r\n >\r\n @if (\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight) >\r\n 8\r\n ) {\r\n <span class=\"text-[14px] absolute top-1/2 -translate-1/2\">\r\n {{\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight)\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n \x3c!-- right --\x3e\r\n @if (\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth) <\r\n 150\r\n ) {\r\n <div\r\n class=\"ruler-line ruler-right\"\r\n [ngStyle]=\"{\r\n width:\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth) +\r\n 'px',\r\n right:\r\n -(\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth)\r\n ) + 'px',\r\n height: '0.1px'\r\n }\"\r\n >\r\n @if (\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth) >\r\n 8\r\n ) {\r\n <span class=\"text-[14px] absolute right-1/2 -translate-y-1/2 translate-x-1/2\">\r\n {{\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth)\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n}\r\n",styles:[".move{position:absolute;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;cursor:move;top:0;z-index:1000;background-color:#4399fa}.border-active{position:absolute;inset:0;border:1px solid #4399fa;pointer-events:none}.ruler-line{position:absolute;background-color:#ef4444;font-size:14px}.ruler-line.ruler-top,.ruler-line.ruler-bottom{width:.1px;left:50%;transform:translate(-50%)}.ruler-line.ruler-top span,.ruler-line.ruler-bottom span{top:50%}.ruler-line.ruler-left,.ruler-line.ruler-right{height:.1px;top:50%;transform:translateY(-50%)}.ruler-line.ruler-left span,.ruler-line.ruler-right span{left:50%}.ruler-line span{position:absolute;transform:translate(-50%,-50%)}\n"],dependencies:[{kind:"ngmodule",type:u},{kind:"directive",type:b.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]})}i.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:i,type:z,decorators:[{type:l,args:[{selector:"[wbVirtualSelected]",imports:[u],template:"@if (webBuilderService.arrayChoosing[0].type != 'block_blank') {\r\n \x3c!-- top --\x3e\r\n @if (webBuilderService.infoVirtualSelected.top < 150) {\r\n <div\r\n class=\"ruler-line ruler-top\"\r\n [ngStyle]=\"{\r\n height: webBuilderService.infoVirtualSelected.top + 'px',\r\n top: -webBuilderService.infoVirtualSelected.top + 'px',\r\n width: '0.1px'\r\n }\"\r\n >\r\n @if (webBuilderService.infoVirtualSelected.top > 8) {\r\n <span class=\"text-[14px] absolute top-1/2 -translate-1/2\">\r\n {{ webBuilderService.infoVirtualSelected.top }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n \x3c!-- left --\x3e\r\n @if (webBuilderService.infoVirtualSelected.left < 150) {\r\n <div\r\n class=\"ruler-line ruler-left\"\r\n [ngStyle]=\"{\r\n width: webBuilderService.infoVirtualSelected.left + 'px',\r\n left: -webBuilderService.infoVirtualSelected.left + 'px',\r\n height: '0.1px'\r\n }\"\r\n >\r\n @if (webBuilderService.infoVirtualSelected.left > 8) {\r\n <span class=\"text-[14px] absolute left-1/2 -translate-1/2\">\r\n {{ webBuilderService.infoVirtualSelected.left }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n \x3c!-- bottom --\x3e\r\n @if (\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight) <\r\n 150\r\n ) {\r\n <div\r\n class=\"ruler-line ruler-bottom\"\r\n [ngStyle]=\"{\r\n height:\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight) +\r\n 'px',\r\n bottom:\r\n -(\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight)\r\n ) + 'px',\r\n width: '0.1px'\r\n }\"\r\n >\r\n @if (\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight) >\r\n 8\r\n ) {\r\n <span class=\"text-[14px] absolute top-1/2 -translate-1/2\">\r\n {{\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight)\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n \x3c!-- right --\x3e\r\n @if (\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth) <\r\n 150\r\n ) {\r\n <div\r\n class=\"ruler-line ruler-right\"\r\n [ngStyle]=\"{\r\n width:\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth) +\r\n 'px',\r\n right:\r\n -(\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth)\r\n ) + 'px',\r\n height: '0.1px'\r\n }\"\r\n >\r\n @if (\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth) >\r\n 8\r\n ) {\r\n <span class=\"text-[14px] absolute right-1/2 -translate-y-1/2 translate-x-1/2\">\r\n {{\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth)\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n}\r\n",styles:[".move{position:absolute;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;cursor:move;top:0;z-index:1000;background-color:#4399fa}.border-active{position:absolute;inset:0;border:1px solid #4399fa;pointer-events:none}.ruler-line{position:absolute;background-color:#ef4444;font-size:14px}.ruler-line.ruler-top,.ruler-line.ruler-bottom{width:.1px;left:50%;transform:translate(-50%)}.ruler-line.ruler-top span,.ruler-line.ruler-bottom span{top:50%}.ruler-line.ruler-left,.ruler-line.ruler-right{height:.1px;top:50%;transform:translateY(-50%)}.ruler-line.ruler-left span,.ruler-line.ruler-right span{left:50%}.ruler-line span{position:absolute;transform:translate(-50%,-50%)}\n"]}]}],ctorParameters:()=>[{type:P},{type:i.ElementRef}],propDecorators:{boundaryEle:[{type:a}],onHostMouseDown:[{type:s,args:["pointerdown",["$event"]]}],onPointerMove:[{type:s,args:["pointermove",["$event"]]}],onPointerUp:[{type:s,args:["pointerup",["$event"]]}]}});export{k as WEBBUILDER_API_URL,S as WbDragDrop,z as WbVirtualSelected,P as webBuilderService};
|
|
1
|
+
import*as e from"@angular/common/http";import{HttpParams as n}from"@angular/common/http";import*as t from"@angular/core";import{InjectionToken as i,inject as o,Injectable as a,HostListener as r,Input as s,Component as l,Optional as c,signal as d,ViewChild as p,PLATFORM_ID as g,Inject as u,Pipe as h,ViewEncapsulation as m,ElementRef as b}from"@angular/core";import{Subject as f,firstValueFrom as v,catchError as z,throwError as y,map as _,of as x}from"rxjs";import{io as w}from"socket.io-client";import*as C from"@angular/common";import{CommonModule as k,isPlatformBrowser as S}from"@angular/common";import*as M from"@angular/forms";import{FormsModule as B}from"@angular/forms";import*as O from"ng-zorro-antd/modal";import{NZ_MODAL_DATA as I,NzModalModule as T}from"ng-zorro-antd/modal";import*as D from"ng-zorro-antd/icon";import{NzIconModule as j}from"ng-zorro-antd/icon";import*as P from"@angular/router";import*as A from"ng-zorro-antd/message";import{ComponentPortal as F}from"@angular/cdk/portal";import*as N from"@angular/cdk/overlay";import V from"dayjs";import*as $ from"ng-zorro-antd/tooltip";import{NzTooltipModule as W}from"ng-zorro-antd/tooltip";import*as L from"@angular/platform-browser";import*as E from"ng-zorro-antd/menu";import{NzMenuModule as R}from"ng-zorro-antd/menu";import*as H from"ng-zorro-antd/input";import{NzInputModule as G}from"ng-zorro-antd/input";import*as K from"ng-zorro-antd/button";import{NzButtonModule as X}from"ng-zorro-antd/button";import*as q from"ng-zorro-antd/tabs";import{NzTabsModule as U}from"ng-zorro-antd/tabs";import*as Y from"ng-zorro-antd/color-picker";import{NzColorPickerModule as J}from"ng-zorro-antd/color-picker";import*as Q from"ng-zorro-antd/input-number";import{NzInputNumberModule as Z}from"ng-zorro-antd/input-number";import*as ee from"ng-zorro-antd/slider";import{NzSliderModule as ne}from"ng-zorro-antd/slider";import*as te from"ng-zorro-antd/select";import{NzSelectModule as ie}from"ng-zorro-antd/select";import*as oe from"ng-zorro-antd/core/transition-patch";import*as ae from"ng-zorro-antd/core/wave";import*as re from"ng-zorro-antd/switch";import{NzSwitchModule as se}from"ng-zorro-antd/switch";import{NzUploadModule as le}from"ng-zorro-antd/upload";import*as ce from"@ckeditor/ckeditor5-angular";import{CKEditorModule as de}from"@ckeditor/ckeditor5-angular";import{ClassicEditor as pe,Essentials as ge,Paragraph as ue,Heading as he,Bold as me,Italic as be,Underline as fe,Strikethrough as ve,Autoformat as ze,BlockQuote as ye,Link as _e,List as xe,TodoList as we,RemoveFormat as Ce,FindAndReplace as ke,SelectAll as Se,Table as Me,TableToolbar as Be,TableProperties as Oe,TableCellProperties as Ie,Image as Te,ImageToolbar as De,ImageCaption as je,ImageStyle as Pe,ImageResize as Ae,AutoImage as Fe,Base64UploadAdapter as Ne,MediaEmbed as Ve,Code as $e,CodeBlock as We,Highlight as Le,HorizontalLine as Ee,Indent as Re,Alignment as He,PasteFromOffice as Ge,WordCount as Ke,Font as Xe,SpecialCharacters as qe,SpecialCharactersEssentials as Ue,Subscript as Ye,Superscript as Je}from"ckeditor5";import{moveItemInArray as Qe,CdkDrag as Ze,CdkDropList as en}from"@angular/cdk/drag-drop";import*as nn from"ng-zorro-antd/segmented";import{NzSegmentedModule as tn}from"ng-zorro-antd/segmented";import*as on from"ng-zorro-antd/dropdown";import{NzDropDownModule as an}from"ng-zorro-antd/dropdown";import*as rn from"ng-zorro-antd/table";import{NzTableModule as sn}from"ng-zorro-antd/table";import*as ln from"ng-zorro-antd/image";import{NzImageModule as cn}from"ng-zorro-antd/image";import*as dn from"ng-zorro-antd/popconfirm";import{NzPopconfirmModule as pn}from"ng-zorro-antd/popconfirm";import*as gn from"ng-zorro-antd/radio";import{NzRadioModule as un}from"ng-zorro-antd/radio";const hn=[{code:"VN",name:"Vietnam",language:"vi",flag:"https://flagcdn.com/w160/vn.png"},{code:"US",name:"United States",language:"en",flag:"https://flagcdn.com/w160/us.png"},{code:"FR",name:"France",language:"fr",flag:"https://flagcdn.com/w160/fr.png"},{code:"IN",name:"India",language:"hi",flag:"https://flagcdn.com/w160/in.png"},{code:"DE",name:"Germany",language:"de",flag:"https://flagcdn.com/w160/de.png"},{code:"JP",name:"Japan",language:"ja",flag:"https://flagcdn.com/w160/jp.png"}],mn=[{label:"Sắp xếp lớp",icon:"layout"},{label:"Lấy thuộc tính từ màn",icon:"sliders"},{label:"Xóa",icon:"delete"}],bn=[{label:"Thêm khung",icon:"plus-square"},{label:"Thêm vật thể",icon:"plus-circle"},{label:"Sắp xếp lớp",icon:"layout"},{label:"Lên trên",icon:"arrow-up"},{label:"Xuống dưới",icon:"arrow-down"},{label:"Lấy thuộc tính từ màn",icon:"sliders"},{label:"Xóa",icon:"delete"}],fn=[{tool_tip:"Máy tính",icon:"desktop",value:"desktop"},{tool_tip:"Máy tính bảng ngang",icon:"tablet",value:"tablet_landscape"},{tool_tip:"Máy tính bảng dọc",icon:"tablet",value:"tablet_portrait"},{tool_tip:"Điện thoại ngang",icon:"mobile",value:"mobile_landscape"},{tool_tip:"Điện thoại dọc",icon:"mobile",value:"mobile_portrait"}],vn={name:"",link:"",component_config:"WbPageConfig",desktop_class:{page:{"--bg-color":"#ffffff"}},desktop_config:{id_header:"",id_footer:""},tablet_landscape_class:{page:{"--bg-color":"#ffffff"}},tablet_landscape_config:{id_header:"",id_footer:""},tablet_portrait_class:{page:{"--bg-color":"#ffffff"}},tablet_portrait_config:{id_header:"",id_footer:""},mobile_landscape_class:{page:{"--bg-color":"#ffffff"}},mobile_landscape_config:{id_header:"",id_footer:""},mobile_portrait_class:{page:{"--bg-color":"#ffffff"}},mobile_portrait_config:{id_header:"",id_footer:""},seo:{title:"",description:"",keywords:"",og_title:"",og_description:"",og_type:""},type:""},zn=[{desc:{vi:'<p>Sữa HiPP 3 Combiotic Organic 2482 800gr<br>Trẻ từ 1 tuổi trở lên vẫn cần bổ sung dinh dưỡng thiết yếu, mẹ cần bổ sung hàm lượng Canxi cho bé mỗi ngày. Tuy nhiên hàm lượng Sắt, kẽm, I-ốt và các khoáng chất trong sữa bò tự nhiên thường không cao. Sữa bột Hipp 3 Combiotic chứa đầy đủ dưỡng chất thiết yếu cho sự tăng trưởng và phát triển của bé trong giai đoạn tăng trưởng từ 1 tuổi trở lên cho con yêu thông minh, mau lớn và khỏe mạnh.</p><p>Đặc điểm nổi bật của sản phẩm</p><p>Sữa Hipp 3 với nguồn nguyên liệu hoàn toàn hữu cơ và siêu sạch Organic đạt tiêu chuẩn của Liên Minh Châu Âu</p><p>Sữa bổ sung hàm lượng Probitik phân lập gốc từ sữa mẹ, Praebitik và vitamin A, C, D giúp tăng cường miễn dịch, hỗ trợ tiêu hóa.</p><p>Hàm lượng Protein phù hợp với sự phát triển của cơ thể bé, có tác dụng tăng cường miễn dịch, ức chế sự phát triển của các vi khuẩn, virut gây bệnh</p><p>Chất xơ thực phẩm quan trọng GOS chiết tách từ lactose trong sữa tạo môi trường thuận lợi cho lợi khuẩn Probiotic phát triển, tăng cường đường ruột, hỗ trợ hệ tiêu hóa của trẻ.</p><p>Sữa bổ sung ARA và DHA ( axit béo Omega 3 và Omega 6) có vai trò đặc biệt quan trọng giúp kích thích não bộ và các tế bào thần kinh, thị lực của bé phát triển</p><p>Bổ sung sắt có tác dụng trong quá trình tạo máu.</p><p>Bổ sung vitamin D và kháng thể tự nhiên IgG tăng cường hệ miễn dịch, giúp phát triển hoàn thiện chức năng nhìn của mắt, hệ thần kinh, giảm cholesterol toàn phần, và triglyceride máu, LDL-cholesterol (cholesterol xấu), giúp dự phòng các bệnh tim mạch.</p><p>Không chứa tinh bột, sữa bột Hipp 3 Combiotic chỉ chứa đường tự nhiên Lactose giúp bé dễ hấp thu và tiêu hóa tốt.</p><p>Đặc biệt sữa không chứa Gluten</p><p>Sữa bột Hipp3 dạng tơi xốp, dễ tan, không bị vón cục, có mùi thơm nhẹ, dễ uống giúp bé ăn ngon miệng và thích thú</p><p>KM</p><ul><li data-list-item-id="ed2ee73c6cba22f96af6f97cb988c3912">"Tưng bừng khai trương" - giảm giá 50% tất cả sản phẩm</li><li data-list-item-id="ed62a9ac50f6ee192e6a2cabeebff9b1b">Giảm thêm 500.000đ khi thanh toán bằng thẻ tín dụng tại TTMS</li><li data-list-item-id="e10a21617d914add51ebad5203874b999">Giảm ngay 100.000đ khi quét QR Code cùng Mastercard với đơn hàng 1.000.000đ</li></ul>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Hipp 3 Combiotic Organic 2482 800gr"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Hipp",id_categorys:[],product_attributes:[{id:"8662d676-c1ac-4854-b956-3593583d174b",name:"Kích thước",values:["To","Nhỏ"]}],variations:[{id:"11881207-b902-4559-9a6c-9f5eb609f0f0",sku:"CDEQNL7L",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656340302-812022711.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656342596-883421575.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656343612-416135702.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656344724-531521917.png"],import_price:0,original_price:6e5,retail_price:58e4,fields:[{value:"To",name:"Kích thước"}],weight:0,stock:10,hidden:!1},{id:"5ecf23b5-2c35-4db3-a66f-b70be938b051",sku:"LAE2SHJ4",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656405318-593063767.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656407777-653200713.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656409981-32559064.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656411713-182955683.png"],import_price:0,original_price:6e5,retail_price:55e4,fields:[{value:"Nhỏ",name:"Kích thước"}],weight:0,stock:0,hidden:!1}],link:"sua-hipp-3-combiotic-organic-2482-800gr"},{desc:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa Hipp 4 Combiotic Organic 800g cho bé phát triển toàn diện</span><br><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa Hipp 4 Combiotic Organic 800g dành cho bé trên 3 tuổi. Với công thức đặc biệt bổ sung lợi khuẩn cùng chất xơ rất tốt cho hệ tiêu hóa, tăng cường hệ miễn dịch, dễ dàng hấp thụ. Không những vậy, sữa bột trẻ em Hipp còn tăng cường hàm lượng DHA, Omega 3 và Omega 6 giúp trẻ phát triển trí não, thông minh vượt trội.</span></p>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Hipp 4 Combiotic Organic 800g"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Hipp",id_categorys:[],product_attributes:[],variations:[{id:"1bb8747f-980c-47fa-8bbd-1ea2adb1a968",sku:"2JUDEY1T",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656502723-760473000.png"],import_price:0,original_price:4e5,retail_price:38e4,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-hipp-4-combiotic-organic-800g"},{desc:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Giai đoạn đầu là giai đoạn giúp bé nhà bạn có thể hấp thụ chất dinh dưỡng tốt nhất, tăng cường khả năng miễn dịch cho bé lớn lên được an toàn và khỏe mạnh nhất. Vào giai đoạn này, hầu hết các mẹ đều cho con bú sữa mẹ hoàn toàn. Tuy nhiên nhiều mẹ do một số lý do mà không đủ sữa cho con bú nên việc cung cấp dinh dưỡng cho bé thông qua các sản phẩm sữa bột chất lượng là điều cần thiết và quan trọng. Sữa bột công thức Physiolac số 1 400g với những công thức tính toán cẩn trọng về thành phần, giúp trẻ dễ dàng hấp thu các chất dinh dưỡng, nâng cao sức đề kháng và tăng cường hệ miễn dịch trong giai đoạn từ 0-6 tháng tuổi.</span></p>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Physiolac số 2 400g"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Physiolac",id_categorys:[],product_attributes:[],variations:[{id:"ed2eb369-8a67-4c38-bf65-dbd882bd1ae1",sku:"6QCPL5LN",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656593161-876866227.png"],import_price:0,original_price:35e4,retail_price:34e4,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-physiolac-so-2-400g"},{desc:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Giai đoạn đầu là giai đoạn giúp bé nhà bạn có thể hấp thụ chất dinh dưỡng tốt nhất, tăng cường khả năng miễn dịch cho bé lớn lên được an toàn và khỏe mạnh nhất. Vào giai đoạn này, hầu hết các mẹ đều cho con bú sữa mẹ hoàn toàn. Tuy nhiên nhiều mẹ do một số lý do mà không đủ sữa cho con bú nên việc cung cấp dinh dưỡng cho bé thông qua các sản phẩm sữa bột chất lượng là điều cần thiết và quan trọng. Sữa bột công thức Physiolac số 1 400g với những công thức tính toán cẩn trọng về thành phần, giúp trẻ dễ dàng hấp thu các chất dinh dưỡng, nâng cao sức đề kháng và tăng cường hệ miễn dịch trong giai đoạn từ 0-6 tháng tuổi.</span></p>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Physiolac số 1 - 400g"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Physiolac",id_categorys:[],product_attributes:[],variations:[{id:"2650f2c9-7531-4d8a-9f8e-a980542e091f",sku:"BH3N4JT7",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656677198-366596996.png"],import_price:0,original_price:35e4,retail_price:32e4,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-physiolac-so-1---400g"},{desc:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa Similac HMO số 3 IQ (1.7kg) công thức cải tiến mới vượt trội</span><br><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa bột cho bé Similac HMO số 3 IQ với công thức cải tiến hệ dưỡng chất IQ và 2\'-FL HMO đáp ứng đầy đủ nhu cầu dinh dưỡng giúp trẻ từ 1-2 tuổi phát triển tối ưu. Không những vậy thành phần 2\'-FL HMO là Prebiotic tự nhiên tìm thấy trong sữa mẹ hỗ trợ tăng cường sức khỏe hệ miễn dịch giúp phòng tránh các mầm bệnh nguy hiểm và tạo nền tảng cho trẻ phát triển mạnh mẽ cả về trí não và thể chất.</span></p>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Similac IQ HMO số 4 900g"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Similac",id_categorys:[],product_attributes:[],variations:[{id:"aaa789ec-b240-4eaf-9bc8-82ed153b1540",sku:"3EIACQ2G",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656758760-168052267.png"],import_price:0,original_price:0,retail_price:7e5,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-similac-iq-hmo-so-4-900g"},{desc:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa Similac HMO số 3 IQ (1.7kg) công thức cải tiến mới vượt trội</span><br><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa bột cho bé Similac HMO số 3 IQ với công thức cải tiến hệ dưỡng chất IQ và 2\'-FL HMO đáp ứng đầy đủ nhu cầu dinh dưỡng giúp trẻ từ 1-2 tuổi phát triển tối ưu. Không những vậy thành phần 2\'-FL HMO là Prebiotic tự nhiên tìm thấy trong sữa mẹ hỗ trợ tăng cường sức khỏe hệ miễn dịch giúp phòng tránh các mầm bệnh nguy hiểm và tạo nền tảng cho trẻ phát triển mạnh mẽ cả về trí não và thể chất.</span></p>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Similac Newborn IQ HMO 400g"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Similac",id_categorys:[],product_attributes:[],variations:[{id:"5e6217fc-72df-4919-a342-2a034adf2362",sku:"08D0OFMU",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656831526-957803788.png"],import_price:0,original_price:3e5,retail_price:279e3,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-similac-newborn-iq-hmo-400g"},{desc:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa Similac HMO số 3 IQ (1.7kg) công thức cải tiến mới vượt trội</span><br><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Sữa bột cho bé Similac HMO số 3 IQ với công thức cải tiến hệ dưỡng chất IQ và 2\'-FL HMO đáp ứng đầy đủ nhu cầu dinh dưỡng giúp trẻ từ 1-2 tuổi phát triển tối ưu. Không những vậy thành phần 2\'-FL HMO là Prebiotic tự nhiên tìm thấy trong sữa mẹ hỗ trợ tăng cường sức khỏe hệ miễn dịch giúp phòng tránh các mầm bệnh nguy hiểm và tạo nền tảng cho trẻ phát triển mạnh mẽ cả về trí não và thể chất.</span></p>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Similac HMO số 3 IQ 1,7kg"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Similac",id_categorys:[],product_attributes:[],variations:[{id:"12898e54-8624-4a86-8b31-e0ce262253b4",sku:"UOZVCVHA",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657025615-587614689.png"],import_price:0,original_price:0,retail_price:84e4,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-similac-hmo-so-3-iq-1,7kg"},{desc:{vi:"<p>Sữa Frisolac Gold 3 1.5kg nguồn dinh dưỡng tối ưu dành cho bé từ 0 tới 6 tháng tuổi <br>Ngoài những dưỡng chất thiết yếu cho chế độ dinh dưỡng cân bằng, sữa bột cho bé Frisolac Gold 1 Mới, hộp thiếc 900gr, dành cho trẻ từ 0 – 6 tháng tuổi, nay với công thức cải tiến mới gồm sự kết hợp tối ưu giữa Synbiotics (Probiotics BB-12 & L.casei 431& Prebiotics GOS & FOS) giúp hỗ trợ hệ tiêu hóa, đồng thời Frisolac Gold 1 còn cung cấp các dưỡng chất quan trọng để hỗ trợ cho sự phát triển trí não và thể chất của trẻ.</p><p>Công thức LockNutri đảm bảo dưỡng chất nguyên vẹn từ thiên nhiên trong quá trình chế biến .Giúp hấp thụ tối đa và dễ tiêu hoá - khoẻ mạnh từ bên trong</p>"},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Frisolac Gold 3 1.5kg"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Frisolac",id_categorys:[],product_attributes:[],variations:[{id:"b6d2421c-eb5b-420e-9cfb-2e46c89e3bf3",sku:"KROBYEFT",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657084217-482398164.png"],import_price:0,original_price:41e4,retail_price:4e5,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-frisolac-gold-3-1.5kg"},{desc:{vi:"<p>Sữa Frisolac Gold 2 (900g) nguồn dinh dưỡng tối ưu dành cho bé từ 0 tới 6 tháng tuổi <br>Ngoài những dưỡng chất thiết yếu cho chế độ dinh dưỡng cân bằng, sữa bột cho bé Frisolac Gold 1 Mới, hộp thiếc 900gr, dành cho trẻ từ 0 – 6 tháng tuổi, nay với công thức cải tiến mới gồm sự kết hợp tối ưu giữa Synbiotics (Probiotics BB-12 & L.casei 431& Prebiotics GOS & FOS) giúp hỗ trợ hệ tiêu hóa, đồng thời Frisolac Gold 1 còn cung cấp các dưỡng chất quan trọng để hỗ trợ cho sự phát triển trí não và thể chất của trẻ.</p><p>Công thức LockNutri đảm bảo dưỡng chất nguyên vẹn từ thiên nhiên trong quá trình chế biến .Giúp hấp thụ tối đa và dễ tiêu hoá - khoẻ mạnh từ bên trong</p>"},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Frisolac Gold 2 (900g)"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Frisolac",id_categorys:[],product_attributes:[],variations:[{id:"8a71794f-b629-4d72-aa9a-306b73cba763",sku:"9217ZAS8",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657146460-964400781.png"],import_price:0,original_price:0,retail_price:3e5,fields:[],weight:0,stock:0,hidden:!1}],link:"sua-frisolac-gold-2-(900g)"},{desc:{vi:"<p>Sữa Frisolac gold 1 (400gr) nguồn dinh dưỡng tối ưu dành cho bé từ 0 tới 6 tháng tuổi <br>Ngoài những dưỡng chất thiết yếu cho chế độ dinh dưỡng cân bằng, sữa bột cho bé Frisolac Gold 1 Mới, hộp thiếc 900gr, dành cho trẻ từ 0 – 6 tháng tuổi, nay với công thức cải tiến mới gồm sự kết hợp tối ưu giữa Synbiotics (Probiotics BB-12 & L.casei 431& Prebiotics GOS & FOS) giúp hỗ trợ hệ tiêu hóa, đồng thời Frisolac Gold 1 còn cung cấp các dưỡng chất quan trọng để hỗ trợ cho sự phát triển trí não và thể chất của trẻ.</p><p>Công thức LockNutri đảm bảo dưỡng chất nguyên vẹn từ thiên nhiên trong quá trình chế biến .Giúp hấp thụ tối đa và dễ tiêu hoá - khoẻ mạnh từ bên trong</p>"},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Frisolac gold 1 (400gr)"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Frisolac ",id_categorys:[],product_attributes:[],variations:[{id:"098f92ea-2d55-4d1f-98aa-fc7aa503e700",sku:"47MUEQUZ",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657196987-928137824.png"],import_price:0,original_price:27e4,retail_price:262e3,fields:[],weight:0,stock:10,hidden:!1}],link:"sua-frisolac-gold-1-(400gr)"},{desc:{vi:"<p>Bỉm dán Pampers cao cấp JB NB68, khô thoáng và sạch sẽ cho trẻ<br>Để giữ vệ sinh an toàn sẽ giúp bé có sức khỏe và phát triển một cách mạnh mẽ nhất, việc lựa chọn một chiếc tã giấy hoặc bỉm cho bé nhà mình là một điều vô cùng cần thiết. Nhưng để chọn được một loại bỉm có chất lượng tốt cũng như nguồn gốc và xuất xứ rõ ràng lại là một điều không hề dễ dàng.</p><p>Bỉm dán Pampers Newborn 68 miếng là một trong số các loại bỉm cao cấp nhất tới từ Nhật Bản, được các chuyên gia kiểm thử nghiệm đảm bảo an toàn tuyệt đối cho sức khỏe của bé.</p>"},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Bỉm - Tã dán Pampers size L - 32 miếng"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Pampers",id_categorys:[],product_attributes:[],variations:[{id:"183e4619-4d37-466b-9156-dc679a1509d0",sku:"AGYW1ML1",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657276154-673160400.png"],import_price:0,original_price:21e4,retail_price:2e5,fields:[],weight:0,stock:10,hidden:!1}],link:"bim---ta-dan-pampers-size-l---32-mieng"},{desc:{vi:"<p>Bỉm dán Pampers cao cấp JB NB68, khô thoáng và sạch sẽ cho trẻ<br>Để giữ vệ sinh an toàn sẽ giúp bé có sức khỏe và phát triển một cách mạnh mẽ nhất, việc lựa chọn một chiếc tã giấy hoặc bỉm cho bé nhà mình là một điều vô cùng cần thiết. Nhưng để chọn được một loại bỉm có chất lượng tốt cũng như nguồn gốc và xuất xứ rõ ràng lại là một điều không hề dễ dàng.</p><p>Bỉm dán Pampers Newborn 68 miếng là một trong số các loại bỉm cao cấp nhất tới từ Nhật Bản, được các chuyên gia kiểm thử nghiệm đảm bảo an toàn tuyệt đối cho sức khỏe của bé.</p>"},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Bỉm - Tã dán Pampers size M - 50 miếng"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Pampers",id_categorys:[],product_attributes:[],variations:[{id:"55e416e5-84c4-418b-b103-00f3fed3d8a3",sku:"GH63H9J7",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657385743-490573315.png"],import_price:0,original_price:23e4,retail_price:2e5,fields:[],weight:0,stock:10,hidden:!1}],link:"bim---ta-dan-pampers-size-m---50-mieng"},{desc:{vi:"<p>Bỉm dán Pampers cao cấp JB NB68, khô thoáng và sạch sẽ cho trẻ<br>Để giữ vệ sinh an toàn sẽ giúp bé có sức khỏe và phát triển một cách mạnh mẽ nhất, việc lựa chọn một chiếc tã giấy hoặc bỉm cho bé nhà mình là một điều vô cùng cần thiết. Nhưng để chọn được một loại bỉm có chất lượng tốt cũng như nguồn gốc và xuất xứ rõ ràng lại là một điều không hề dễ dàng.</p><p>Bỉm dán Pampers Newborn 68 miếng là một trong số các loại bỉm cao cấp nhất tới từ Nhật Bản, được các chuyên gia kiểm thử nghiệm đảm bảo an toàn tuyệt đối cho sức khỏe của bé.</p>"},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Bỉm - Tã dán Pampers Nhật Newborn - 68 miếng"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Pampers",id_categorys:[],product_attributes:[],variations:[{id:"52cc9977-ed0d-47be-b7da-7b14d34e1a7c",sku:"2VEU6ZRY",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657452271-841964486.png"],import_price:0,original_price:3e5,retail_price:295e3,fields:[],weight:0,stock:10,hidden:!1}],link:"bim---ta-dan-pampers-nhat-newborn---68-mieng"},{desc:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Đến từ thương hiệu Unicharm nổi tiếng Nhật Bản, tã quần Moony size XL bé gái sẽ đem đến cho cô công chúa nhỏ nhà bạn những trải nghiệm đầy thích thú. Thiết kế dành riêng cho bé gái với màu hồng dễ thương cùng với những họa tiết ngộ nghĩnh, đáng yêu, chất liệu cao cấp, mềm mại, chỉ thị ướt báo thời gian thay tã thuận tiện, từng chiếc tã Moony không những đem đến cho bé cảm giác thoải mái, dễ chịu tối đa mà còn giúp mẹ dễ dàng và tiện lợi hơn trong công việc chăm sóc bé yêu hàng ngày.</span></p>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Bỉm - Tã dán Moony size M - 64 miếng"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Moony ",id_categorys:[],product_attributes:[],variations:[{id:"98a53409-e67d-4e5f-a717-7e530d97112b",sku:"6ECWS54D",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761657517149-265443315.png"],import_price:0,original_price:3e5,retail_price:297e3,fields:[],weight:0,stock:0,hidden:!1}],link:"bim---ta-dan-moony-size-m---64-mieng"}],yn=new i("WEBBUILDER_API_URL");class _n{apiUrl=o(yn);socket=null;connect(){this.socket||(this.socket=w(this.apiUrl),console.log("Socket connected"))}sendMessage(e,n){this.socket&&this.socket.emit(e,n)}onMessage(e,n){this.socket&&this.socket.on(e,n)}disconnect(){this.socket&&(this.socket.disconnect(),this.socket=null,console.log("Socket disconnected"))}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:_n,deps:[],target:t.ɵɵFactoryTarget.Injectable});static"ɵprov"=t.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:_n,providedIn:"root"})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:_n,decorators:[{type:a,args:[{providedIn:"root"}]}]});class xn{http;socketService;apiUrl=o(yn);urlBE=`${this.apiUrl}/api/v1`;group;projectWorking=null;parentChoosing=null;itemChoosing=null;elementChoosingRef=null;isShiftPressed=!1;arrayChoosing=[];currentPage=null;pages=[];blocks=[];objects=[];freeblocks=[];chatboxs=[];device=localStorage.getItem("device")?JSON.parse(localStorage.getItem("device")||""):"desktop";type="design";loading=!1;group_frames=[];group_objects=[];toolsBox=[];toolsBoxPosition={x:0};isFreeBlock=!1;header=null;footer=null;chatbox=null;blockPicking=null;heightMainDesign=0;resizeGroup={image:{width:"--width",height:"--height"},block:{width:"--width",height:"--min-height"}};clientId=Math.random().toString(36).slice(2)+Date.now();infoVirtualSelected={left:0,top:0,width:0,height:0};currentTool=null;EventBus=new f;zoom=1;allowCopy=!1;constructor(e,n){this.http=e,this.socketService=n}realTimeUpdate(){this.socketService.onMessage("add_doc",e=>{if(e.client_id!==this.clientId&&e.db==this.projectWorking._id&&("wb_pages"==e.col_name&&(this.pages=[...this.pages,e.data]),"wb_blocks"==e.col_name&&(this.blocks=[...this.blocks,e.data],"block_blank"==e.data.type?e.data.id_page==this.currentPage._id&&(this.currentPage.blocks=[...this.currentPage.blocks,e.data]):this.freeblocks=[...this.freeblocks,e.data]),"wb_objects"==e.col_name)){this.objects=[...this.objects,e.data];const n=e.data.id_object||e.data.id_block;if(n){const t=this.findItemById(n);t&&(t.objects||(t.objects=[]),t.objects.push(e.data))}}}),this.socketService.onMessage("update_doc",e=>{if(e.client_id!==this.clientId&&e.db==this.projectWorking._id){if("wb_pages"==e.col_name){const n=this.pages.findIndex(n=>n._id===e.docKey);if(-1==n)return;if(this.pages[n]={...this.pages[n],...e.data},this.currentPage&&this.currentPage._id===e.docKey){if(e.data.hasOwnProperty("id_clone_blocks"))if(this.currentPage.hasOwnProperty("id_clone_blocks")||(this.currentPage.id_clone_blocks=[]),e.data.id_clone_blocks?.length>this.currentPage.id_clone_blocks?.length){e.data.id_clone_blocks.filter(e=>!this.currentPage.id_clone_blocks.includes(e)).forEach(n=>{let t=this.blocks.find(e=>e._id==n);t&&(t=JSON.parse(JSON.stringify(t)),t.id_page=e.docKey,t.is_clone=!0,t.objects=this.getFullObjectsForBlock(t),this.currentPage.blocks.push(t))})}else this.currentPage.blocks=this.currentPage.blocks.filter(n=>e.data.id_clone_blocks.includes(n._id));this.currentPage={...this.currentPage,...e.data},e.data[this.device+"_config"]?.id_header?this.header=this.freeblocks.find(n=>n._id==e.data[this.device+"_config"].id_header):this.header=null,e.data[this.device+"_config"]?.id_footer?this.footer=this.freeblocks.find(n=>n._id==e.data[this.device+"_config"].id_footer):this.footer=null}}if("wb_blocks"==e.col_name){const n=this.blocks.findIndex(n=>n._id===e.docKey),t=this.freeblocks.findIndex(n=>n._id===e.docKey);if(-1!=n){let n=this.blocks.findIndex(n=>n._id===e.docKey);this.blocks[n]={...this.blocks[n],...e.data};const t=this.currentPage.blocks.findIndex(n=>n._id===e.docKey);if(-1!==t){if(e.data.hasOwnProperty("id_clone_objects"))if(this.currentPage.blocks[t].hasOwnProperty("id_clone_objects")||(this.currentPage.blocks[t].id_clone_objects=[]),e.data.id_clone_objects?.length>this.currentPage.blocks[t].id_clone_objects?.length){e.data.id_clone_objects.filter(e=>!this.currentPage.blocks[t].id_clone_objects.includes(e)).forEach(n=>{let i=this.objects.find(e=>e._id==n);i&&(i=JSON.parse(JSON.stringify(i)),i.id_block=e.docKey,i.is_clone=!0,delete i.id_object,i.objects=this.getFullObjectsForObject(i),this.currentPage.blocks[t].objects.push(i))})}else this.currentPage.blocks[t].objects=this.currentPage.blocks[t].objects.filter(n=>e.data.id_clone_objects.includes(n._id));this.currentPage.blocks[t]={...this.currentPage.blocks[t],...e.data}}}if(-1!=t){const n=this.freeblocks.findIndex(n=>n._id===e.docKey);if(-1!==n){if(e.data.hasOwnProperty("id_clone_objects"))if(this.freeblocks[n].hasOwnProperty("id_clone_objects")||(this.freeblocks[n].id_clone_objects=[]),e.data.id_clone_objects?.length>this.freeblocks[n].id_clone_objects?.length){e.data.id_clone_objects.filter(e=>!this.freeblocks[n].id_clone_objects.includes(e)).forEach(t=>{let i=this.objects.find(e=>e._id==t);i&&(i=JSON.parse(JSON.stringify(i)),i.id_block=e.docKey,i.is_clone=!0,delete i.id_object,i.objects=this.getFullObjectsForObject(i),this.freeblocks[n].objects.push(i))})}else this.freeblocks[n].objects=this.freeblocks[n].objects.filter(n=>e.data.id_clone_objects.includes(n._id));this.freeblocks[n]={...this.freeblocks[n],...e.data}}}}if("wb_objects"==e.col_name){const n=this.objects.findIndex(n=>n._id===e.docKey);if(-1==n)return;this.objects[n]={...this.objects[n],...e.data};let t=this.objects[n].id_object||this.objects[n].id_block;for(const n in e.data)n.includes("_position_")&&(t=n.split("_position_")[1]);if(t){const n=this.findItemById(t);if(n){const t=n.objects.findIndex(n=>n._id===e.docKey);if(-1!==t){if(e.data.hasOwnProperty("id_clone_objects")){const i=n.objects[t];if(i.hasOwnProperty("id_clone_objects")||(i.id_clone_objects=[]),e.data.id_clone_objects?.length>i.id_clone_objects?.length){e.data.id_clone_objects.filter(e=>!i.id_clone_objects.includes(e)).forEach(i=>{let o=this.objects.find(e=>e._id==i);o&&(o=JSON.parse(JSON.stringify(o)),o.id_object=e.docKey,o.is_clone=!0,delete o.id_block,o.objects=this.getFullObjectsForObject(o),n.objects[t].objects.push(o))})}else n.objects[t].objects=n.objects[t].objects.filter(n=>!n.is_clone||e.data.id_clone_objects.includes(n._id))}n.objects[t]={...n.objects[t],...e.data}}}}}}}),this.socketService.onMessage("delete_doc",e=>{if(e.client_id!==this.clientId&&e.db==this.projectWorking._id&&("wb_pages"==e.col_name&&(this.pages=this.pages.filter(n=>n._id!==e.docKey),this.currentPage&&this.currentPage._id===e.docKey&&(this.currentPage=null)),"wb_blocks"==e.col_name&&(this.blocks=this.blocks.filter(n=>n._id!==e.docKey),this.currentPage.blocks=this.currentPage.blocks.filter(n=>n._id!==e.docKey),this.freeblocks=this.freeblocks.filter(n=>n._id!==e.docKey)),"wb_objects"==e.col_name)){const n=this.objects.findIndex(n=>n._id===e.docKey);if(-1!==n){const t=this.objects[n];this.objects.splice(n,1);const i=t.id_object||t.id_block;if(i){const n=this.findItemById(i);n&&n.objects&&(n.objects=n.objects.filter(n=>n._id!==e.docKey))}}}})}closeConnection(){this.socketService.disconnect()}onNotifyChange(e){return this.EventBus.asObservable().subscribe(e)}notifyChange(e){this.EventBus.next(e)}findItemById(e){let n=null;const{currentPage:t,freeblocks:i}=this;for(const i of t.blocks)if(n=this.findItemInTree(i,e),n)break;if(!n)for(const t of i)if(n=this.findItemInTree(t,e),n)break;return n}findItemInTree(e,n){if(e._id===n)return e;if(e.objects)for(const t of e.objects){const e=this.findItemInTree(t,n);if(e)return e}return null}wrapApiCall(e){return v(e.pipe(z(e=>y(()=>{const n=e.error;return console.error("API Error:",e),n}))))}addProject(e){return new Promise((n,t)=>{this.wrapApiCall(this.http.post(`${this.urlBE}/projects`,{data:e})).then(e=>{let t=[];t.push(this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/add`,{col_name:"wb_pages",data:{...vn,name:{vi:"Trang chủ"},type:"page_home"},db:e.data._id}))),zn.forEach(n=>{t.push(this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/add`,{col_name:"products",data:n,db:e.data._id})))}),Promise.all(t).then(()=>{n(e)})})})}updateProject(e,n){return new Promise((t,i)=>{this.wrapApiCall(this.http.put(`${this.urlBE}/projects/${e}`,{value:n})).then(e=>{t(e)})})}deleteProject(e){return this.wrapApiCall(this.http.delete(`${this.urlBE}/projects/${e}`))}getProjects_byFields(e,t,i,o){const a=new n({fromObject:{page:String(i),limit:String(o),query:JSON.stringify(e??{}),sort:JSON.stringify(t??{})}});return this.wrapApiCall(this.http.get(`${this.urlBE}/projects`,{params:a})).then(e=>e)}sortVietnamese(e){const n=new Intl.Collator("vi",{sensitivity:"base"}),t=this.projectWorking.language.defaule;return[...e].sort((e,i)=>n.compare(e.name[t],i.name[t]))}getHeaderFooter(){const{currentPage:e,device:n,freeblocks:t}=this,{id_header:i,id_footer:o,id_chatboxs:a}=e[n+"_config"];if(i){const e=t.find(e=>e._id==i);this.header=e||null}else this.header=null;if(o){const e=t.find(e=>e._id==o);this.footer=e||null}else this.footer=null;this.chatboxs=this.freeblocks.filter(e=>a?.includes(e._id))}connectProject(e){return new Promise((n,t)=>{this.projectWorking?n():(this.socketService.connect(),this.socketService.sendMessage("get_project_data",{id_project:e}),this.socketService.onMessage("project_data",e=>{const t=JSON.parse(e);this.setProjectWorking(t),n()}))})}setProjectWorking(e){this.projectWorking=e.project,this.pages=this.sortVietnamese(e.pages),this.blocks=e.blocks.filter(e=>"block_blank"==e.type),this.freeblocks=e.blocks.filter(e=>"block_blank"!=e.type),this.objects=e.objects;let n=localStorage.getItem("page")?JSON.parse(localStorage.getItem("page")||""):null;n&&this.pages.find(e=>e._id==n)||(n=this.pages.find(e=>"page_home"==e.type)._id),this.freeblocks.forEach(e=>(e.objects=this.getFullObjectsForBlock(e),e)),this.currentPage=this.getDetailPage(n),this.getHeaderFooter(),this.updateHeightDesign()}getDetailPage(e){const n=structuredClone(this.pages.find(n=>n._id===e));if(n){const t=structuredClone(this.blocks.filter(n=>n.id_page===e));n.blocks=t.map(e=>(e.objects=this.getFullObjectsForBlock(e),e)),n.id_clone_blocks?.length&&n.id_clone_blocks.forEach(e=>{let t=this.blocks.find(n=>n._id==e);t&&(t=JSON.parse(JSON.stringify(t)),t.id_page=n._id,t.is_clone=!0,t.objects=this.getFullObjectsForBlock(t),n.blocks.push(t))})}return n.blocks.sort((e,n)=>e[this.device+"_position_"+e.id_page].index<n[this.device+"_position_"+n.id_page].index?-1:e[this.device+"_position_"+e.id_page].index>n[this.device+"_position_"+n.id_page].index?1:0),n}getFullObjectsForBlock(e){const n=[];e.id_clone_objects?.length&&e.id_clone_objects.forEach(t=>{let i=this.objects.find(e=>e._id==t);i&&(i=JSON.parse(JSON.stringify(i)),i.id_block=e._id,i.is_clone=!0,delete i.id_object,i.objects=this.getFullObjectsForObject(i),n.push(i))});return structuredClone(this.objects.filter(n=>n.id_block===e._id)).forEach(e=>{e.objects=this.getFullObjectsForObject(e),n.push(e)}),n}getFullObjectsForObject(e){let n=[];e.id_clone_objects?.length&&e.id_clone_objects.forEach(t=>{let i=this.objects.find(e=>e._id==t);i&&(i=JSON.parse(JSON.stringify(i)),i.id_object=e._id,i.is_clone=!0,delete i.id_block,i.objects=this.getFullObjectsForObject(i),n=[...n,i])});return structuredClone(this.objects.filter(n=>n.id_object===e._id)).forEach(e=>{e.objects=this.getFullObjectsForObject(e),n=[...n,e]}),n}addPage(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/add`,{col_name:"wb_pages",data:e,client_id:this.clientId,db:this.projectWorking._id})).then(e=>(this.pages=[...this.pages,e.data],this.sortVietnamese(this.pages),e))}deletePage(e){const n=this.getDetailPage(e);let t=this.flatNodes(n.blocks).map(e=>e.type.includes("block")?e.is_clone?this.deleteBlockClone(e):this.deleteBlockDbAndLocal(e._id):e.is_clone?this.deleteObject(e):this.deleteObjectDbAndLocal(e._id));return t.push(this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/delete`,{col_name:"wb_pages",docKey:e,client_id:this.clientId,db:this.projectWorking._id}))),Promise.all(t).then(n=>(this.pages=this.pages.filter(n=>n._id!==e),n))}getPage(e){return new Promise((n,t)=>{const i=this.pages.find(n=>n._id==e);i&&n({vcode:0,data:i})})}deleteBlockDbAndLocal(e){this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/delete`,{col_name:"wb_blocks",docKey:e,client_id:this.clientId,db:this.projectWorking._id})).then(n=>{this.blocks=this.blocks.filter(n=>n._id!=e)})}deleteObjectDbAndLocal(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/delete`,{col_name:"wb_objects",docKey:e,client_id:this.clientId,db:this.projectWorking._id})).then(n=>{this.objects=this.objects.filter(n=>n._id!=e)})}flatNodes(e){const n=[];for(const t of e)n.push(t),t.objects&&t.objects.length>0&&!t.is_clone&&n.push(...this.flatNodes(t.objects));return n}updatePage(e,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/update`,{col_name:"wb_pages",docKey:e,value:n,client_id:this.clientId,db:this.projectWorking._id})).then(t=>{this.pages=this.pages.map(t=>t._id==e?{...t,...n}:t)})}getPages(){return Promise.resolve({vcode:0,data:this.pages,msg:""})}addBlock(e){if("block_blank"==e.type){const n=this.getDetailPage(e.id_page);if(n){const t=n.blocks.reduce((n,t)=>Math.max(t[this.device+"_position_"+e.id_page].index,n),-1);e[this.device+"_position_"+e.id_page]={...e[this.device+"_position_"+e.id_page],index:t+1}}}return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/add`,{col_name:"wb_blocks",data:e,client_id:this.clientId,db:this.projectWorking._id})).then(n=>("block_blank"==e.type?(this.blocks=[...this.blocks,n.data],n.data.id_page==this.currentPage._id&&(this.currentPage.blocks=[...this.currentPage.blocks,n.data]),this.updateHeightDesign()):this.freeblocks=[...this.freeblocks,n.data],n))}updateBlock(e,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/update`,{col_name:"wb_blocks",docKey:e,value:n,client_id:this.clientId,db:this.projectWorking._id})).then(t=>{this.blocks=this.blocks.map(t=>t._id==e?{...t,...n}:t)})}deleteBlock(e){const n=structuredClone([...this.blocks,...this.freeblocks].find(n=>n._id===e)),t=this.getFullObjectsForBlock(n);let i=this.flatNodes(t).map(e=>e.type.includes("block")?e.is_clone?this.deleteBlockClone(e):this.deleteBlockDbAndLocal(e._id):e.is_clone?this.deleteObjectClone(e):this.deleteObjectDbAndLocal(e._id));return i.push(this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/delete`,{col_name:"wb_blocks",docKey:e,client_id:this.clientId,db:this.projectWorking._id}))),Promise.all(i).then(t=>{this.blocks=this.blocks.filter(n=>n._id!=e),this.freeblocks=this.freeblocks.filter(n=>n._id!=e),this.currentPage.blocks=this.currentPage.blocks.filter(n=>n._id!==e),"block_blank"==n.type&&this.currentPage.blocks.forEach((e,n)=>{e[`${this.device}_position_${this.currentPage._id}`]={...e[`${this.device}_position_${this.currentPage._id}`],index:n},this.updateBlock(e._id,{[`${this.device}_position_${this.currentPage._id}`]:e[`${this.device}_position_${this.currentPage._id}`]})})})}deleteBlockClone(e){return new Promise((n,t)=>{this.currentPage.id_clone_blocks.includes(e._id)&&(this.currentPage.id_clone_blocks=this.currentPage.id_clone_blocks.filter(n=>n!==e._id),this.updatePage(this.currentPage._id,{id_clone_blocks:this.currentPage.id_clone_blocks}).then(t=>{this.currentPage.blocks=this.currentPage.blocks.filter(n=>n._id!=e._id),n(t)}))})}addObject(e){return["object_text_repeat","object_button_repeat","object_image_repeat","object_video_repeat","object_youtube_repeat"].includes(e.type)&&!e.code&&(e.code=this.generateObjectId()),this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/add`,{col_name:"wb_objects",data:e,client_id:this.clientId,db:this.projectWorking._id})).then(n=>{this.objects.push(structuredClone(n.data));const t=e.id_object??e.id_block;if(t){const e=this.findItemById(t);e&&(e.objects||(e.objects=[]),e.objects.push(n.data))}return n})}updateObject(e,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/update`,{col_name:"wb_objects",docKey:e,value:n,client_id:this.clientId,db:this.projectWorking._id})).then(t=>{this.objects=this.objects.map(t=>t._id==e?{...t,...n}:t)})}deleteObject(e){const n=this.objects.find(n=>n._id==e),t=this.getFullObjectsForObject(n);let i=this.flatNodes(t).map(e=>e.is_clone?this.deleteObjectClone(e):this.deleteObjectDbAndLocal(e._id));return i.push(this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/delete`,{col_name:"wb_objects",docKey:e,client_id:this.clientId,db:this.projectWorking._id}))),Promise.all(i).then(t=>{const i=this.findItemById(n.id_object||n.id_block);i&&(i.objects=i.objects.filter(n=>n._id!==e)),this.objects=this.objects.filter(n=>n._id!=e)})}deleteObjectClone(e){return new Promise((n,t)=>{const i=this.findItemById(e.id_object||e.id_block);if(i){i.id_clone_objects=i.id_clone_objects.filter(n=>n!==e._id);let t=[];i.type.includes("block")?t.push(this.updateBlock(i._id,{id_clone_objects:i.id_clone_objects})):t.push(this.updateObject(i._id,{id_clone_objects:i.id_clone_objects})),Promise.all(t).then(t=>{i.objects=i.objects.filter(n=>n._id!==e._id),n(t)})}})}upLoadImage(e,n,t,i){const o=new FormData;return o.append("db",this.projectWorking._id),o.append("newPath",t),n&&o.append("oldPath",n),o.append("options",JSON.stringify(i)),o.append("file",e),this.wrapApiCall(this.http.post(`${this.urlBE}/upload`,o))}addCategory(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/add`,{col_name:"categories",data:e,db:this.projectWorking._id})).then(e=>e)}updateCategory(e,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/update`,{col_name:"categories",docKey:e,value:n,db:this.projectWorking._id})).then(e=>e)}deleteCategory(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/delete`,{col_name:"categories",docKey:e,db:this.projectWorking._id})).then(e=>e)}getCategories_byFields(e,n,t,i){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/get`,{col_name:"categories",db:this.projectWorking._id,query:e,sort:n,page:t,limit:i})).then(e=>{const n=(e=>{if(!e||0===e.length)return[];const n=[],t=(i,o=0)=>{e.filter(e=>e.id_parent==i).forEach(e=>{const i={...e,level:o};n.push(i),t(e._id,o+1)})};return t("",0),n})(e.data);return{...e,data:n}})}searchList_likeSearch(e,n,t){return(e=e.trim())&&""!==e?this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/searchList_likeSearch`,{value:e,col_name:n,field:t,lang:this.projectWorking.language.default,db:this.projectWorking._id})).then(e=>e):Promise.resolve({vcode:0,data:[]})}addProduct(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/add`,{col_name:"products",data:e,db:this.projectWorking._id})).then(e=>e)}updateProduct(e,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/update`,{col_name:"products",docKey:e,value:n,db:this.projectWorking._id})).then(e=>e)}deleteProduct(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/delete`,{col_name:"products",docKey:e,db:this.projectWorking._id})).then(e=>e)}getProducts_byFields(e,n,t,i){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/get`,{col_name:"products",db:this.projectWorking._id,query:e,sort:n,page:t,limit:i}))}getProducts_byCategoryLink(e,n,t,i,o){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/getdetail_bycategory`,{col_name:"products",db:this.projectWorking._id,link_category:e,query:n,sort:t,page:i,limit:o}))}getDetailProduct_byLink(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/getdetail_bylink`,{col_name:"products",db:this.projectWorking._id,link:e}))}addNews(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/add`,{col_name:"news",data:e,db:this.projectWorking._id})).then(e=>e)}updateNews(e,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/update`,{col_name:"news",docKey:e,value:n,db:this.projectWorking._id})).then(e=>e)}deleteNews(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/delete`,{col_name:"news",docKey:e,db:this.projectWorking._id})).then(e=>e)}getNews_byFields(e,n,t,i){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/get`,{col_name:"news",db:this.projectWorking._id,query:e,sort:n,page:t,limit:i}))}addNewField(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/add`,{col_name:"wb_newfields",data:e,db:this.projectWorking._id})).then(e=>e)}updateNewField(e,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/update`,{col_name:"wb_newfields",docKey:e,value:n,db:this.projectWorking._id})).then(e=>e)}deleteNewField(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/delete`,{col_name:"wb_newfields",docKey:e,db:this.projectWorking._id})).then(e=>e)}getNewField_byFields(e,n,t,i){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_template/get`,{col_name:"wb_newfields",db:this.projectWorking._id,query:e,sort:n,page:t,limit:i}))}displayBocksOfPage_byScroll(e){e.blocks.forEach(e=>{})}setItemChoosing(e,n,t){if("design"!=this.type)return;if(null==e||null==e){if(this.isFreeBlock)return;return this.itemChoosing=null,this.arrayChoosing=[],this.isFreeBlock=!1,this.blockPicking=null,this.elementChoosingRef=null,this.group_frames=[],this.group_objects=[],this.toolsBox=[],this.currentTool=null,void(this.allowCopy=!0)}this.itemChoosing=null,this.arrayChoosing=[e],this.parentChoosing=t||null,this.itemChoosing=e,e.type.includes("block")&&"block_blank"!=e.type&&(this.isFreeBlock=!0,this.blockPicking=e),this.itemChoosing[this.device+"_config"].drag_mode||(this.itemChoosing[this.device+"_config"].drag_mode="absolute"),e.type.includes("block")?(this.group_frames=this.group.blocks[e.type].group_frames,this.group_objects=this.group.blocks[e.type].group_objects):e.type.includes("frame")&&(this.group_frames=this.group.frames[e.type].group_frames,this.group_objects=this.group.frames[e.type].group_objects),this.toolsBox=e.type.includes("block")||e.type.includes("frame")?JSON.parse(JSON.stringify(bn)):JSON.parse(JSON.stringify(mn)),e.type.includes("frame")&&(this.toolsBox=this.toolsBox.filter(e=>!["Xuống dưới","Lên trên"].includes(e.label))),e.is_clone&&(this.toolsBox=this.toolsBox.filter(e=>["Sắp xếp lớp","Xóa"].includes(e.label)),"block_blank"==e.type&&(this.toolsBox=[...JSON.parse(JSON.stringify(bn)).filter(e=>["Xuống dưới","Lên trên"].includes(e.label)),...this.toolsBox]),this.toolsBox=[{label:"Di chuyển đến đối tượng gốc",icon:"check-circle"},...this.toolsBox]),this.currentTool=null,["object_button_dialog","object_product_input_search"].includes(e.type)&&this.toolsBox.splice(1,0,{label:"Thiết kế khối hộp thoại",icon:"box-plot"}),e.type.includes("block")&&"block_blank"!=e.type&&(this.toolsBox=this.toolsBox.filter(e=>!["Lên trên","Xuống dưới"].includes(e.label)));const i=document.querySelector(`.${this.device}`),o=i&&i.parentNode?i.parentNode.getBoundingClientRect():null;this.toolsBoxPosition.x=i.getBoundingClientRect().left>o.left?i.getBoundingClientRect().left-150:o.left-150,console.log("data",e),setTimeout(()=>{this.allowCopy=!0,this.elementChoosingRef=n},0)}getCart(){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/carts/get`,{db:this.projectWorking._id}))}addToCart(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/carts/add`,{itemToAdd:e,db:this.projectWorking._id}))}deleteCartItem(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/carts/delete`,{id_variation:e,db:this.projectWorking._id}))}updateCartItem(e,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/carts/update`,{id_variation:e,quantity:n,db:this.projectWorking._id}))}addAddress(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/address/add`,{data:e,col_name:"address",db:this.projectWorking._id}))}updateAddress(e,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/address/update`,{docKey:e,col_name:"address",value:n,db:this.projectWorking._id}))}deleteAddress(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/address/delete`,{docKey:e,col_name:"address",db:this.projectWorking._id}))}getProvinces(){return v(this.http.get("assets/data/website-builder.provinces.json")).then(e=>({vcode:0,data:e.sort((e,n)=>e.name.localeCompare(n.name,"vi",{sensitivity:"base"}))}))}getDistricts(e){return v(this.http.get("assets/data/website-builder.districts.json")).then(n=>({vcode:0,data:n.filter(n=>n.province_code==e).sort((e,n)=>e.name.localeCompare(n.name,"vi",{sensitivity:"base"}))}))}getWards(e){return v(this.http.get("assets/data/website-builder.wards.json")).then(n=>({vcode:0,data:n.filter(n=>n.district_code==e).sort((e,n)=>e.name.localeCompare(n.name,"vi",{sensitivity:"base"}))}))}getCountries(){return this.wrapApiCall(this.http.get("https://restcountries.com/v3.1/all?fields=name,flags"))}updateHeightDesign(){setTimeout(()=>{this.heightMainDesign=this.currentPage.blocks.reduce((e,n)=>e+ +n[this.device+"_class"][n.resize_field][this.resizeGroup[n.resize_group].height].replace("px",""),0),this.heightMainDesign+=200},0)}getObject(e){return new Promise((n,t)=>{const i=this.objects.find(n=>n._id===e);i&&n({vcode:0,data:i})})}getBlock(e){return new Promise((n,t)=>{const i=this.blocks.find(n=>n._id===e);i?n({vcode:0,data:i}):t(new Error("Block not found"))})}handleCtrl_C(){return new Promise((e,n)=>{if(!this.allowCopy||0==this.arrayChoosing.length)return;let t={type:"ctrl_c",data:this.arrayChoosing};return navigator.clipboard.writeText(JSON.stringify(t)),e({vcode:0,msg:`Đã sao chép ${this.arrayChoosing.length} đối tượng`})})}handleCtrl_D(){return new Promise((e,n)=>{const{itemChoosing:t,arrayChoosing:i}=this;if(!this.allowCopy||0===i.length)return e({vcode:1,msg:"Không có gì để nhân bản"});if(t?.type.includes("block")&&"block_blank"!==t?.type)return n({vcode:1,msg:"Không thể nhân bản khối này, chỉ có thể nhân bản khối trống"});const o={type:"ctrl_d",data:i};return navigator.clipboard.writeText(JSON.stringify(o)),e({vcode:0,msg:"Nhân bản thành công"})})}handleCtrl_V(){navigator.clipboard.readText().then(async e=>{let n=e;try{if(n=JSON.parse(e),"ctrl_c"!=n.type||n.copy_page){if("ctrl_d"==n.type){let e=n.data;for(const n of e)if(n.type.includes("object")||n.type.includes("frame"))await this.handleCloneObject(this.itemChoosing,n,!0);else{if(this.currentPage.id_clone_blocks&&this.currentPage.id_clone_blocks.some(e=>e==n._id)||this.currentPage.blocks.some(e=>e._id==n._id))return console.error("Khối này đã tồn tại");await this.handleCloneBlock(this.currentPage,n)}}}else{const e=n.data;if(e[0].type.includes("object")||e[0].type.includes("frame")){if(0==this.arrayChoosing.length)return;if(this.itemChoosing?.type.includes("object")||["AtwFrameTabs","AtwFrameBanner","AtwFrameCollapse"].includes(this.itemChoosing?.component)||this.itemChoosing?.is_clone)return console.error("Không thể dán vào đối tượng này");if("AtwFrameRepeat"==this.itemChoosing?.component&&e.some(e=>!["AtwTextRepeat","AtwImageRepeat","AtwShape","AtwButtonRepeat"].includes(e.component)))return console.error("Không thể dán vào đối tượng này");this.loading=!0;for(const n of e)await this.handleCopyObject(this.itemChoosing,n,!0);this.loading=!1}else{this.loading=!0;for(const n of e)await this.handleCopyBlock(this.currentPage,n);this.loading=!1}}}catch{}})}applyFontLinks(e){(new DOMParser).parseFromString(e,"text/html").querySelectorAll("link").forEach(e=>{document.head.appendChild(e.cloneNode(!0))})}getFontNames(e){const n=(new DOMParser).parseFromString(e,"text/html"),t=n.querySelector("link[href*='fonts.googleapis.com/css2']")?.getAttribute("href");return t?[...t.matchAll(/family=([^:&]+)/g)].map(e=>decodeURIComponent(e[1]).replace(/\+/g," ")):[]}async handleCopyBlock(e,n){try{if(n.is_clone&&this.blocks.find(e=>e._id==n._id))await this.handleCloneBlock(e,n);else{let t={...n};delete t._id,delete t.is_clone,delete t.id_page,t.objects=[],t.id_clone_objects=[],t.name=n.name+"- Copy","block_blank"==t.type&&(t.id_page=e._id,fn.forEach(i=>{const o=i.value;t[o+"_position_"+e._id]={...n[o+"_position_"+n.id_page]}}));const i=await this.addBlock(t);if(n.objects&&n.objects.length>0)for(const e of n.objects)await this.handleCopyObject(i.data,e)}}catch(e){console.error("error",e)}}async handleCopyObject(e,n,t=!1){if(n.is_clone&&this.objects.find(e=>e._id==n._id))this.handleCloneObject(e,n,t);else{delete n.is_clone;let i={...n};delete i._id,delete i.province,delete i.district,delete i.ward,i.objects=[],i.id_clone_objects=[],e.type.includes("block")?(i.id_block=e._id,delete i.id_object):(i.id_object=e._id,delete i.id_block),i.name=n.name+"- Copy",fn.forEach(o=>{const a=o.value;i[a+"_position_"+e._id]={...n[a+"_position_"+(n.id_block||n.id_object)]},e._id==(n.id_block||n.id_object)?(i[a+"_position_"+e._id].top+=10,i[a+"_position_"+e._id].left+=10):t&&(i[a+"_position_"+e._id].top=0,i[a+"_position_"+e._id].left=0)});const o=await this.addObject(i);if(n.objects&&n.objects.length>0)for(const e of n.objects)await this.handleCopyObject(o.data,e)}}async handleCopyPage(e){const n=structuredClone(e),t=this.projectWorking.language.available;for(const e of t)n.name[e]=n.name[e]+"-Copy";n.link=n.link+"-copy",delete n._id,delete n.blocks,n.id_clone_blocks=[];const i=await this.addPage(n);if(e.blocks&&e.blocks.length>0)for(const n of e.blocks)try{await this.handleCopyBlock(i.data,n)}catch(e){console.error("error",e)}return i}async handleCloneBlock(e,n){const t=this.blocks.find(e=>e._id==n._id);if(!e||!t)return;e.id_clone_blocks||(e.id_clone_blocks=[]),e.blocks||(e.blocks=[]);const i={top:0,left:0,index:e.blocks.reduce((n,t)=>Math.max(n,t[this.device+"_position_"+e._id].index),-1)+1,z_index:1};await this.updateBlock(n._id,{["desktop_position_"+e._id]:i,["tablet_landscape_position_"+e._id]:i,["tablet_portrait_position_"+e._id]:i,["mobile_landscape_position_"+e._id]:i,["mobile_portrait_position_"+e._id]:i}),e.id_clone_blocks.some(e=>e==n._id)||(e.id_clone_blocks=[...e.id_clone_blocks,n._id],await this.updatePage(e._id,{id_clone_blocks:e.id_clone_blocks}));const o={...n,["desktop_position_"+e._id]:i,["tablet_landscape_position_"+e._id]:i,["tablet_portrait_position_"+e._id]:i,["mobile_landscape_position_"+e._id]:i,["mobile_portrait_position_"+e._id]:i};o.is_clone=!0,o.id_page=e._id,e.blocks=[...e.blocks,o]}async handleCloneObject(e,n,t=!1){if(!this.objects.some(e=>e._id==n._id))return;if(t){const{itemChoosing:e}=this;if(n._id===e?._id)return void console.error("Không thể clone chính đối tượng đang chọn");if(e?.objects.some(e=>e._id===n._id))return void console.error("Không thể clone đối tượng đã clone");if(this.findItemInTree(n,e._id))return void console.error("Không thể clone đối tượng là cha của đối tượng đang chọn")}const i={...n};fn.forEach(o=>{const a=o.value;i[a+"_position_"+e._id]={...n[a+"_position_"+(n.id_block||n.id_object)]},t&&(i[a+"_position_"+e._id]={top:0,left:0,z_index:1})}),e.hasOwnProperty("id_clone_objects")||(e.id_clone_objects=[]),await this.updateObject(i._id,{["desktop_position_"+e._id]:i["desktop_position_"+e._id],["tablet_landscape_position_"+e._id]:i["tablet_landscape_position_"+e._id],["tablet_portrait_position_"+e._id]:i["tablet_portrait_position_"+e._id],["mobile_landscape_position_"+e._id]:i["mobile_landscape_position_"+e._id],["mobile_portrait_position_"+e._id]:i["mobile_portrait_position_"+e._id]}),e.id_clone_objects.some(e=>e==i._id)||(e.id_clone_objects.push(i._id),e.type.includes("block")?await this.updateBlock(e._id,{id_clone_objects:e.id_clone_objects}):await this.updateObject(e._id,{id_clone_objects:e.id_clone_objects})),i.is_clone=!0,e.type.includes("block")?(delete i.id_object,i.id_block=e._id):(delete i.id_block,i.id_object=e._id),e.objects=[...e.objects,i]}handleOrder(e,n,t){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/order`,{customer_info:e,note:n,payment_method:t,db:this.projectWorking._id}))}getOrders_byFields(e,n,t,i){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/get`,{col_name:"orders",db:this.projectWorking._id,query:e,sort:n,page:t,limit:i}))}updateOrder(e,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/update`,{col_name:"orders",docKey:e,value:n,db:this.projectWorking._id})).then(e=>e)}deleteOrder(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/doc_database/delete`,{col_name:"orders",docKey:e,db:this.projectWorking._id})).then(e=>e)}generateObjectId(){return(Math.floor(Date.now()/1e3).toString(16)+"xxxxxxxxxxxxxxxx".replace(/[x]/g,()=>(16*Math.random()|0).toString(16))).slice(0,24)}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:xn,deps:[{token:e.HttpClient},{token:_n}],target:t.ɵɵFactoryTarget.Injectable});static"ɵprov"=t.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:xn,providedIn:"root"})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:xn,decorators:[{type:a,args:[{providedIn:"root"}]}],ctorParameters:()=>[{type:e.HttpClient},{type:_n}]});class wn{webBuilderService;el;boundaryEle;isDragging=!1;parentEleRect;dragOffset={x:0,y:0};currPos={x:0,y:0};idParent="";changed=!1;keyPosition;constructor(e,n){this.webBuilderService=e,this.el=n}ngOnInit(){this.idParent=this.webBuilderService.arrayChoosing[0].id_block??this.webBuilderService.arrayChoosing[0].id_object,this.keyPosition=`${this.webBuilderService.device}_position_${this.idParent}`}onHostMouseDown(e){if(e.stopPropagation(),"block_blank"==this.webBuilderService.arrayChoosing[0].type)return;this.el.nativeElement.setPointerCapture(e.pointerId);const{zoom:n,device:t}=this.webBuilderService;this.isDragging=!0,this.dragOffset.x=e.clientX/n,this.dragOffset.y=e.clientY/n,this.currPos.left=this.webBuilderService.infoVirtualSelected.left,this.currPos.top=this.webBuilderService.infoVirtualSelected.top}onPointerMove(e){if(!this.isDragging)return;const{zoom:n}=this.webBuilderService,t=e.clientX/n-this.dragOffset.x,i=e.clientY/n-this.dragOffset.y,o=Math.max(0,Math.min(Math.round(this.currPos.left+t),this.boundaryEle.offsetWidth-this.el.nativeElement.offsetWidth)),a=Math.max(0,Math.min(Math.round(this.currPos.top+i),this.boundaryEle.offsetHeight-this.el.nativeElement.offsetHeight)),r=o-this.webBuilderService.infoVirtualSelected.left,s=a-this.webBuilderService.infoVirtualSelected.top;this.webBuilderService.arrayChoosing.forEach(e=>{e[this.keyPosition].left=Math.round(e[this.keyPosition].left+r),e[this.keyPosition].top=Math.round(e[this.keyPosition].top+s)}),this.webBuilderService.infoVirtualSelected.left=o,this.webBuilderService.infoVirtualSelected.top=a,this.changed=!0}onPointerUp(e){this.isDragging&&(this.isDragging=!1,this.changed&&(this.changed=!1,this.webBuilderService.arrayChoosing.forEach(e=>{this.webBuilderService.updateObject(e._id,{[this.keyPosition]:e[this.keyPosition]})})))}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:wn,deps:[{token:xn},{token:t.ElementRef}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:wn,isStandalone:!0,selector:"[wbVirtualSelected]",inputs:{boundaryEle:"boundaryEle"},host:{listeners:{pointerdown:"onHostMouseDown($event)",pointermove:"onPointerMove($event)",pointerup:"onPointerUp($event)"}},ngImport:t,template:"@if (webBuilderService.arrayChoosing[0].type != 'block_blank') {\r\n \x3c!-- top --\x3e\r\n @if (webBuilderService.infoVirtualSelected.top < 150) {\r\n <div\r\n class=\"ruler-line ruler-top\"\r\n [ngStyle]=\"{\r\n height: webBuilderService.infoVirtualSelected.top + 'px',\r\n top: -webBuilderService.infoVirtualSelected.top + 'px',\r\n width: '0.1px'\r\n }\"\r\n >\r\n @if (webBuilderService.infoVirtualSelected.top > 8) {\r\n <span class=\"text-[14px] absolute top-1/2 -translate-1/2\">\r\n {{ webBuilderService.infoVirtualSelected.top }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n \x3c!-- left --\x3e\r\n @if (webBuilderService.infoVirtualSelected.left < 150) {\r\n <div\r\n class=\"ruler-line ruler-left\"\r\n [ngStyle]=\"{\r\n width: webBuilderService.infoVirtualSelected.left + 'px',\r\n left: -webBuilderService.infoVirtualSelected.left + 'px',\r\n height: '0.1px'\r\n }\"\r\n >\r\n @if (webBuilderService.infoVirtualSelected.left > 8) {\r\n <span class=\"text-[14px] absolute left-1/2 -translate-1/2\">\r\n {{ webBuilderService.infoVirtualSelected.left }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n \x3c!-- bottom --\x3e\r\n @if (\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight) <\r\n 150\r\n ) {\r\n <div\r\n class=\"ruler-line ruler-bottom\"\r\n [ngStyle]=\"{\r\n height:\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight) +\r\n 'px',\r\n bottom:\r\n -(\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight)\r\n ) + 'px',\r\n width: '0.1px'\r\n }\"\r\n >\r\n @if (\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight) >\r\n 8\r\n ) {\r\n <span class=\"text-[14px] absolute top-1/2 -translate-1/2\">\r\n {{\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight)\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n \x3c!-- right --\x3e\r\n @if (\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth) <\r\n 150\r\n ) {\r\n <div\r\n class=\"ruler-line ruler-right\"\r\n [ngStyle]=\"{\r\n width:\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth) +\r\n 'px',\r\n right:\r\n -(\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth)\r\n ) + 'px',\r\n height: '0.1px'\r\n }\"\r\n >\r\n @if (\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth) >\r\n 8\r\n ) {\r\n <span class=\"text-[14px] absolute right-1/2 -translate-y-1/2 translate-x-1/2\">\r\n {{\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth)\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n}\r\n",styles:[".move{position:absolute;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;cursor:move;top:0;z-index:1000;background-color:#4399fa}.border-active{position:absolute;inset:0;border:1px solid #4399fa;pointer-events:none}.ruler-line{position:absolute;background-color:#ef4444;font-size:14px}.ruler-line.ruler-top,.ruler-line.ruler-bottom{width:.1px;left:50%;transform:translate(-50%)}.ruler-line.ruler-top span,.ruler-line.ruler-bottom span{top:50%}.ruler-line.ruler-left,.ruler-line.ruler-right{height:.1px;top:50%;transform:translateY(-50%)}.ruler-line.ruler-left span,.ruler-line.ruler-right span{left:50%}.ruler-line span{position:absolute;transform:translate(-50%,-50%)}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:wn,decorators:[{type:l,args:[{selector:"[wbVirtualSelected]",imports:[k],template:"@if (webBuilderService.arrayChoosing[0].type != 'block_blank') {\r\n \x3c!-- top --\x3e\r\n @if (webBuilderService.infoVirtualSelected.top < 150) {\r\n <div\r\n class=\"ruler-line ruler-top\"\r\n [ngStyle]=\"{\r\n height: webBuilderService.infoVirtualSelected.top + 'px',\r\n top: -webBuilderService.infoVirtualSelected.top + 'px',\r\n width: '0.1px'\r\n }\"\r\n >\r\n @if (webBuilderService.infoVirtualSelected.top > 8) {\r\n <span class=\"text-[14px] absolute top-1/2 -translate-1/2\">\r\n {{ webBuilderService.infoVirtualSelected.top }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n \x3c!-- left --\x3e\r\n @if (webBuilderService.infoVirtualSelected.left < 150) {\r\n <div\r\n class=\"ruler-line ruler-left\"\r\n [ngStyle]=\"{\r\n width: webBuilderService.infoVirtualSelected.left + 'px',\r\n left: -webBuilderService.infoVirtualSelected.left + 'px',\r\n height: '0.1px'\r\n }\"\r\n >\r\n @if (webBuilderService.infoVirtualSelected.left > 8) {\r\n <span class=\"text-[14px] absolute left-1/2 -translate-1/2\">\r\n {{ webBuilderService.infoVirtualSelected.left }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n \x3c!-- bottom --\x3e\r\n @if (\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight) <\r\n 150\r\n ) {\r\n <div\r\n class=\"ruler-line ruler-bottom\"\r\n [ngStyle]=\"{\r\n height:\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight) +\r\n 'px',\r\n bottom:\r\n -(\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight)\r\n ) + 'px',\r\n width: '0.1px'\r\n }\"\r\n >\r\n @if (\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight) >\r\n 8\r\n ) {\r\n <span class=\"text-[14px] absolute top-1/2 -translate-1/2\">\r\n {{\r\n boundaryEle.offsetHeight -\r\n (webBuilderService.infoVirtualSelected.top + el.nativeElement?.offsetHeight)\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n \x3c!-- right --\x3e\r\n @if (\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth) <\r\n 150\r\n ) {\r\n <div\r\n class=\"ruler-line ruler-right\"\r\n [ngStyle]=\"{\r\n width:\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth) +\r\n 'px',\r\n right:\r\n -(\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth)\r\n ) + 'px',\r\n height: '0.1px'\r\n }\"\r\n >\r\n @if (\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth) >\r\n 8\r\n ) {\r\n <span class=\"text-[14px] absolute right-1/2 -translate-y-1/2 translate-x-1/2\">\r\n {{\r\n boundaryEle.offsetWidth -\r\n (webBuilderService.infoVirtualSelected.left + el.nativeElement?.offsetWidth)\r\n }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n}\r\n",styles:[".move{position:absolute;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;cursor:move;top:0;z-index:1000;background-color:#4399fa}.border-active{position:absolute;inset:0;border:1px solid #4399fa;pointer-events:none}.ruler-line{position:absolute;background-color:#ef4444;font-size:14px}.ruler-line.ruler-top,.ruler-line.ruler-bottom{width:.1px;left:50%;transform:translate(-50%)}.ruler-line.ruler-top span,.ruler-line.ruler-bottom span{top:50%}.ruler-line.ruler-left,.ruler-line.ruler-right{height:.1px;top:50%;transform:translateY(-50%)}.ruler-line.ruler-left span,.ruler-line.ruler-right span{left:50%}.ruler-line span{position:absolute;transform:translate(-50%,-50%)}\n"]}]}],ctorParameters:()=>[{type:xn},{type:t.ElementRef}],propDecorators:{boundaryEle:[{type:s}],onHostMouseDown:[{type:r,args:["pointerdown",["$event"]]}],onPointerMove:[{type:r,args:["pointermove",["$event"]]}],onPointerUp:[{type:r,args:["pointerup",["$event"]]}]}});class Cn{webBuilderService;el;renderer;mode="absolute";boundaryEle;parent;data;device;top=0;left=0;type="preview";dragOffset={x:0,y:0};idParent="";direction="";initData={top:0,left:0,bottom:0,right:0};currPos={x:0,y:0};changed=!1;parentEleRect;parentData;keyPosition="";isDragging=!1;mouseMoveListener=null;mouseUpListener=null;constructor(e,n,t){this.webBuilderService=e,this.el=n,this.renderer=t}ngOnInit(){this.idParent=this.data.id_page||this.data.id_block||this.data.id_object,this.parentEleRect=this.boundaryEle?.getBoundingClientRect(),this.keyPosition=this.data[this.device+"_position_"+this.idParent]?this.device+"_position_"+this.idParent:this.device+"_position",this.updateUIPosition()}ngAfterViewInit(){this.updateInitBottomAndRight()}ngOnChanges(e){(e.top||e.left)&&this.updateUIPosition()}updateUIPosition(){const e=this.data.id_page||this.data.id_block||this.data.id_object,n=this.data[this.device+"_position_"+e]?`${this.device}_position_${e}`:`${this.device}_position`,{left:t,top:i,z_index:o}=this.data[n];"absolute"!==this.data[this.device+"_config"].drag_mode&&this.data[this.device+"_config"].drag_mode?(this.renderer.setStyle(this.el.nativeElement,"position","relative"),this.renderer.setStyle(this.el.nativeElement,"left","0"),this.renderer.setStyle(this.el.nativeElement,"top","0"),this.renderer.setStyle(this.el.nativeElement,"margin-left",`${t}px`),this.renderer.setStyle(this.el.nativeElement,"margin-top",`${i}px`),this.renderer.setStyle(this.el.nativeElement,"z-index",`${o}`)):(this.renderer.setStyle(this.el.nativeElement,"position","absolute"),this.renderer.setStyle(this.el.nativeElement,"left",`${t}px`),this.renderer.setStyle(this.el.nativeElement,"top",`${i}px`),this.renderer.setStyle(this.el.nativeElement,"margin-left","0"),this.renderer.setStyle(this.el.nativeElement,"margin-top","0"),this.renderer.setStyle(this.el.nativeElement,"z-index",`${o}`))}updateInitBottomAndRight(){const e=this.data[this.device+"_position_"+this.idParent]?this.device+"_position_"+this.idParent:this.device+"_position";this.data.type.includes("block")&&["block_blank","block_header","block_footer"].includes(this.data.type)?this.initData={top:0,left:0,bottom:+window.getComputedStyle(this.el.nativeElement).marginTop.replace("px","")+this.el.nativeElement.offsetHeight||0,right:this.el.nativeElement.offsetLeft+this.el.nativeElement.offsetWidth||0}:this.initData={top:this.data[e]?.top,left:this.data[e]?.left,bottom:this.data[e]?.top+this.el.nativeElement.offsetHeight||0,right:this.data[e]?.left+this.el.nativeElement.offsetWidth||0}}onPointerDown(e){if("design"==this.type&&(e.stopPropagation(),this.webBuilderService.isShiftPressed?this.handleChooseItems():this.handleChooseItem(),!["block_blank","block_header","block_footer"].includes(this.data.type)&&!this.data.is_child)){this.isDragging=!0;const{zoom:n}=this.webBuilderService;this.dragOffset.x=e.clientX/n,this.dragOffset.y=e.clientY/n,this.initData.left=this.data[this.keyPosition].left,this.initData.top=this.data[this.keyPosition].top,this.mouseMoveListener=this.renderer.listen("document","mousemove",e=>this.onMouseMove(e)),this.mouseUpListener=this.renderer.listen("document","mouseup",()=>this.onMouseUp())}}onMouseMove(e){if(!this.isDragging)return;const{zoom:n}=this.webBuilderService,t=e.clientX/n-this.dragOffset.x,i=e.clientY/n-this.dragOffset.y,o=Math.max(0,Math.min(Math.round(this.initData.left+t),this.boundaryEle.offsetWidth-this.el.nativeElement.offsetWidth)),a=Math.max(0,Math.min(Math.round(this.initData.top+i),this.boundaryEle.offsetHeight-this.el.nativeElement.offsetHeight));this.data[this.keyPosition].left==o&&this.data[this.keyPosition].top==a||(this.changed=!0),this.data[this.keyPosition].left=o,this.data[this.keyPosition].top=a}onMouseUp(){this.cleanupListeners(),this.isDragging=!1,this.updateInitBottomAndRight(),this.updatePosition()}ngOnDestroy(){this.cleanupListeners()}cleanupListeners(){this.mouseMoveListener&&(this.mouseMoveListener(),this.mouseMoveListener=null),this.mouseUpListener&&(this.mouseUpListener(),this.mouseUpListener=null)}handleChooseItems(){const{device:e}=this.webBuilderService;if((this.webBuilderService.arrayChoosing[0]?.id_page||this.webBuilderService.arrayChoosing[0].id_block||this.webBuilderService.arrayChoosing[0].id_object)!=(this.data.id_page||this.data.id_block||this.data.id_object))return;this.webBuilderService.itemChoosing=null,this.webBuilderService.arrayChoosing.find(e=>e._id==this.data._id)?this.webBuilderService.arrayChoosing=this.webBuilderService.arrayChoosing.filter(e=>e._id!=this.data._id):this.webBuilderService.arrayChoosing=[...this.webBuilderService.arrayChoosing,this.data];let n=Math.min(...this.webBuilderService.arrayChoosing.map(e=>e[this.device+"_position_"+(e.id_page||e.id_block||e.id_object)].left)),t=Math.min(...this.webBuilderService.arrayChoosing.map(e=>e[this.device+"_position_"+(e.id_page||e.id_block||e.id_object)].top??0)),i=Math.max(...this.webBuilderService.arrayChoosing.map(e=>e[this.device+"_position_"+(e.id_page||e.id_block||e.id_object)].left+ +e[this.device+"_class"][e.resize_field][this.webBuilderService.resizeGroup[e.resize_group].width].replace("px",""))),o=Math.max(...this.webBuilderService.arrayChoosing.map(e=>e[this.device+"_position_"+(e.id_page||e.id_block||e.id_object)].top+ +e[this.device+"_class"][e.resize_field][this.webBuilderService.resizeGroup[e.resize_group].height].replace("px","")));if(this.webBuilderService.arrayChoosing[0]?.type.includes("block")){n=0;const a=this.webBuilderService.arrayChoosing.reduce((n,t)=>Math.min(n,t[e+"_position_"+t.id_page].index),999999),r=this.webBuilderService.arrayChoosing.findIndex(n=>n[e+"_position_"+n.id_page].index==a),s=document.querySelector(`[id="${this.webBuilderService.arrayChoosing[r]._id}_root"]`);t=s.offsetTop,i=s.offsetWidth;const l=this.webBuilderService.arrayChoosing.reduce((n,t)=>Math.max(n,t[e+"_position_"+t.id_page].index),0),c=this.webBuilderService.arrayChoosing.findIndex(n=>n[e+"_position_"+n.id_page].index==l),d=this.webBuilderService.arrayChoosing[c];o=document.querySelector(`[id="${d._id}_root"]`).offsetTop+ +d[this.device+"_class"][d.resize_field][this.webBuilderService.resizeGroup[d.resize_group].height].replace("px","")}this.webBuilderService.infoVirtualSelected.left=n,this.webBuilderService.infoVirtualSelected.top=t,this.webBuilderService.infoVirtualSelected.width=i-n,this.webBuilderService.infoVirtualSelected.height=o-t}handleChooseItem(){this.webBuilderService.setItemChoosing(this.data,this.el.nativeElement,this.parent)}getLeftDrag(){return this.el.nativeElement.offsetLeft>24?-24:0}handleResizePointerDown(e,n){e.stopPropagation(),e.preventDefault(),this.direction=n,e.target.setPointerCapture(e.pointerId),this.currPos.x=this.el.nativeElement.getBoundingClientRect().left,this.currPos.y=this.el.nativeElement.getBoundingClientRect().top}handleResizePointerMove(e){"top"==this.direction&&(this.changed=!0,this.onResizeTop(e)),"bottom"==this.direction&&(this.changed=!0,this.onResizeBottom(e)),"left"==this.direction&&(this.changed=!0,this.onResizeLeft(e)),"right"==this.direction&&(this.changed=!0,this.onResizeRight(e)),"top-left"==this.direction&&(this.changed=!0,this.onResizeTop(e),this.onResizeLeft(e)),"top-right"==this.direction&&(this.changed=!0,this.onResizeTop(e),this.onResizeRight(e)),"bottom-left"==this.direction&&(this.changed=!0,this.onResizeBottom(e),this.onResizeLeft(e)),"bottom-right"==this.direction&&(this.changed=!0,this.onResizeBottom(e),this.onResizeRight(e))}handleResizePointerUp(e){e.target.releasePointerCapture(e.pointerId);const n=this.direction;if(this.direction="",this.changed){if(this.changed=!1,this.data.type.includes("block"))["block_blank"].includes(this.data.type)?(this.webBuilderService.currentPage.blocks.forEach((e,n)=>{e[this.keyPosition].top=0}),this.webBuilderService.updateHeightDesign()):["block_header","block_footer"].includes(this.data.type)&&(this.data[this.device+"_position"].top=0);else if(this.data.is_clone){let e=this.webBuilderService.objects.find(e=>e._id==this.data._id);e[this.keyPosition].top=this.data[this.keyPosition].top,e[this.keyPosition].left=this.data[this.keyPosition].left,e[this.keyPosition].z_index=this.data[this.keyPosition].z_index}["right","bottom","bottom-right"].includes(n)&&this.updateClass(),["top","left","top-left","top-right","bottom-left"].includes(n)&&this.updatePositionAndClass(),["top","left","top-left","top-right","bottom-left"].includes(n)&&this.data.objects?.length>0&&this.data.objects.forEach(e=>{this.webBuilderService.updateObject(e._id,{[this.device+"_position_"+this.data._id]:e[this.device+"_position_"+this.data._id]})}),this.updateInitBottomAndRight(),this.minTop=null,this.minLeft=null}}minTop=null;onResizeTop(e){this.currPos.y=this.el.nativeElement.getBoundingClientRect().top;let n=Math.round(e.clientY-this.currPos.y);this.currPos.y=e.clientY;let t=this.data[this.keyPosition].top+n;t=["block_blank","block_header","block_footer"].includes(this.data.type)?Math.min(t,this.initData.bottom):Math.max(0,Math.min(t,this.initData.bottom));let i=this.initData.bottom-t;if(this.data.objects.filter(e=>!e[this.device+"_hidden"])?.length>0&&!["frame_tab","frame_banner"].includes(this.data.type)){null==this.minTop&&(this.minTop=this.data.objects.filter(e=>!e[this.device+"_hidden"]).reduce((e,n)=>Math.min(e,n[`${this.device}_position_${this.data._id}`].top),99999)),t=Math.min(t,this.initData.top+this.minTop),i=this.initData.bottom-t;let e=t-this.data[this.keyPosition].top;this.data.objects.filter(e=>!e[this.device+"_hidden"]).forEach(n=>{n[`${this.device}_position_${this.data._id}`].top-=e})}this.data[this.device+"_class"][this.data.resize_field][this.webBuilderService.resizeGroup[this.data.resize_group].height]=i+"px",this.data[this.keyPosition].top=t}onResizeBottom(e){const n=this.el.nativeElement.getBoundingClientRect(),{zoom:t}=this.webBuilderService;let i=Math.max(0,Math.round((e.clientY-n.top)/t));if(this.data.type.includes("frame")||this.data.type.includes("object")){let o=this.boundaryEle.offsetHeight-this.data[this.keyPosition].top;i=Math.max(0,Math.min(Math.round((e.clientY-n.top)/t),o))}if(this.data.objects?.length>0&&!["frame_tab","frame_banner"].includes(this.data.type)){const e=this.data.objects.filter(e=>!e[this.device+"_hidden"]).reduce((e,n)=>{const t=n[`${this.device}_position_${this.data._id}`].top+ +n[this.device+"_class"][n.resize_field][this.webBuilderService.resizeGroup[n.resize_group].height].replace("px","");return Math.max(e,t)},0);i=Math.max(e,i)}this.data[this.device+"_class"][this.data.resize_field][this.webBuilderService.resizeGroup[this.data.resize_group].height]=i+"px"}minLeft=null;onResizeLeft(e){this.currPos.x=this.el.nativeElement.getBoundingClientRect().left;let n=Math.round(e.clientX-this.currPos.x);this.currPos.x=e.clientX;let t=this.data[this.keyPosition].left+n;t=Math.max(0,Math.min(t,this.initData.right));let i=this.initData.right-t;if(this.data.objects?.length>0&&!["frame_tab","frame_banner"].includes(this.data.type)){null==this.minLeft&&(this.minLeft=this.data.objects.filter(e=>!e[this.device+"_hidden"]).reduce((e,n)=>Math.min(e,n[`${this.device}_position_${this.data._id}`].left),99999)),t=Math.max(0,Math.min(t,this.initData.left+this.minLeft)),i=this.initData.right-t;const e=t-this.data[this.keyPosition].left;this.data.objects.filter(e=>!e[this.device+"_hidden"]).forEach(n=>{n[`${this.device}_position_${this.data._id}`].left-=e})}this.data[this.device+"_class"][this.data.resize_field][this.webBuilderService.resizeGroup[this.data.resize_group].width]=i+"px",this.data[this.keyPosition].left=t}onResizeRight(e){const{zoom:n}=this.webBuilderService,t=this.idParent?"position_"+this.idParent:"position",i=this.el.nativeElement.getBoundingClientRect();this.parentEleRect=this.boundaryEle.getBoundingClientRect();let o=this.parentEleRect.width/n-this.data[this.device+"_"+t].left,a=Math.max(0,Math.min(Math.round(e.clientX-i.left)/n,o));if(this.data.objects?.length>0&&!["frame_tab","frame_banner"].includes(this.data.type)){const e=this.data.objects.filter(e=>!e[this.device+"_hidden"]).reduce((e,n)=>{const t=n[`${this.device}_position_${this.data._id}`].left+ +n[this.device+"_class"][n.resize_field][this.webBuilderService.resizeGroup[n.resize_group].width].replace("px","");return Math.max(e,t)},0);a=Math.max(e,a)}this.data[this.device+"_class"][this.data.resize_field][this.webBuilderService.resizeGroup[this.data.resize_group].width]=a+"px"}updatePosition(){"design"==this.type&&this.changed&&(this.changed=!1,this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.keyPosition]:this.data[this.keyPosition]}):this.webBuilderService.updateObject(this.data._id,{[this.keyPosition]:this.data[this.keyPosition]}))}updateClass(){"design"==this.type&&(this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}))}updatePositionAndClass(){"design"==this.type&&(this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.keyPosition]:this.data[this.keyPosition],[this.device+"_class"]:this.data[this.device+"_class"]}):this.webBuilderService.updateObject(this.data._id,{[this.keyPosition]:this.data[this.keyPosition],[this.device+"_class"]:this.data[this.device+"_class"]}))}conditionShowActive(){const{itemChoosing:e,arrayChoosing:n,elementChoosingRef:t}=this.webBuilderService;return e&&!e.is_child&&e._id==this.data._id&&t==this.el.nativeElement||n?.some(e=>e._id==this.data._id)}conditionShowResize(){const{itemChoosing:e,arrayChoosing:n,elementChoosingRef:t}=this.webBuilderService;return e&&!e.is_clone&&!e.is_child&&e._id==this.data._id&&t==this.el.nativeElement||n.length>1&&n?.some(e=>e._id==this.data._id)}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Cn,deps:[{token:xn},{token:t.ElementRef},{token:t.Renderer2}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Cn,isStandalone:!0,selector:"[wbdragdrop]",inputs:{mode:"mode",boundaryEle:"boundaryEle",parent:"parent",data:"data",device:"device",top:"top",left:"left",type:"type"},host:{listeners:{pointerdown:"onPointerDown($event)"}},usesOnChanges:!0,ngImport:t,template:'<ng-content></ng-content>\r\n\r\n\x3c!-- Lá cờ nắm kéo --\x3e\r\n@if (type == \'design\' && [\'frame_banner\'].includes(data.type)) {\r\n <div\r\n id="flag-drag"\r\n class="move relative"\r\n [ngStyle]="{ left: getLeftDrag() + \'px\' }"\r\n (pointerdown)="onPointerDown($event)"\r\n >\r\n <svg\r\n xmlns="http://www.w3.org/2000/svg"\r\n width="16"\r\n height="16"\r\n fill="currentColor"\r\n class="bi bi-arrows-move"\r\n viewBox="0 0 16 16"\r\n style="color: #fff"\r\n >\r\n <path\r\n fill-rule="evenodd"\r\n d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10M.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8"\r\n />\r\n </svg>\r\n\r\n <div class="absolute w-full h-full left-0 top-0" style="z-index: 9999"></div>\r\n </div>\r\n}\r\n\r\n\x3c!-- @if (conditionShowActive()) {\r\n <div class="border-active"></div>\r\n} --\x3e\r\n\r\n@if (conditionShowResize()) {\r\n @if ([\'block_blank\', \'block_header\', \'block_footer\'].includes(data.type)) {\r\n <div\r\n id="resize-top-block-blank"\r\n [ngStyle]="{ left: \'50%\', top: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'top\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom-block-blank"\r\n [ngStyle]="{ left: \'50%\', bottom: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n } @else if ([\'object_line\'].includes(data.type)) {\r\n @if (data[device + \'_config\'][\'direction\'] == \'vertical\') {\r\n <div\r\n id="resize-top"\r\n class="resize resize-t"\r\n [ngStyle]="{ left: \'50%\', top: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'top\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom"\r\n class="resize resize-b"\r\n [ngStyle]="{ left: \'50%\', bottom: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n } @else {\r\n <div\r\n id="resize-left"\r\n class="resize resize-ew"\r\n [ngStyle]="{ left: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-right"\r\n class="resize resize-ew"\r\n [ngStyle]="{ right: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n }\r\n } @else if ([\'WbText\'].includes(data.component)) {\r\n <div\r\n id="resize-left"\r\n class="resize resize-ew"\r\n [ngStyle]="{ left: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-right"\r\n class="resize resize-ew"\r\n [ngStyle]="{ right: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n } @else {\r\n <div\r\n id="resize-left"\r\n class="resize resize-ew"\r\n [ngStyle]="{ left: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-right"\r\n class="resize resize-ew"\r\n [ngStyle]="{ right: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-top"\r\n class="resize resize-t"\r\n [ngStyle]="{ left: \'50%\', top: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'top\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom"\r\n class="resize resize-b"\r\n [ngStyle]="{ left: \'50%\', bottom: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-top-left"\r\n class="resize resize-tl"\r\n [ngStyle]="{ left: 0, top: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'top-left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-top-right"\r\n class="resize resize-tr"\r\n [ngStyle]="{ right: 0, top: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'top-right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom-left"\r\n class="resize resize-bl"\r\n [ngStyle]="{ left: 0, bottom: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom-left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom-right"\r\n class="resize resize-br"\r\n [ngStyle]="{ right: 0, bottom: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom-right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n }\r\n}\r\n\x3c!-- is_child là con của các frame đặc biệt như frame-tab, collapse, banner --\x3e\r\n@if (\r\n !webBuilderService.itemChoosing?.type.includes(\'block\') &&\r\n webBuilderService.itemChoosing?._id == data._id &&\r\n webBuilderService.elementChoosingRef == el.nativeElement &&\r\n !data.is_child\r\n) {\r\n @if (data[keyPosition].top < 150) {\r\n <div\r\n class="ruler-line ruler-top"\r\n [ngStyle]="{\r\n height: data[keyPosition].top + \'px\',\r\n top: -data[keyPosition].top + \'px\'\r\n }"\r\n >\r\n @if (data[keyPosition].top > 8) {\r\n <span class="text-[14px] absolute top-1/2 -translate-1/2">\r\n {{ data[keyPosition].top }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (data[keyPosition].left < 150) {\r\n <div\r\n class="ruler-line ruler-left"\r\n [ngStyle]="{\r\n width: data[keyPosition].left + \'px\',\r\n left: -data[keyPosition].left + \'px\'\r\n }"\r\n >\r\n @if (data[keyPosition].left > 8) {\r\n <span class="text-[14px] absolute left-1/2 -translate-1/2">\r\n {{ data[keyPosition].left }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight) < 150) {\r\n <div\r\n class="ruler-line ruler-bottom"\r\n [ngStyle]="{\r\n height:\r\n boundaryEle.offsetHeight -\r\n (data[keyPosition].top + el.nativeElement?.offsetHeight) +\r\n \'px\',\r\n bottom:\r\n -(boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight)) +\r\n \'px\'\r\n }"\r\n >\r\n @if (\r\n boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight) > 8\r\n ) {\r\n <span class="text-[14px] absolute top-1/2 -translate-1/2">\r\n {{ boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight) }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) < 150) {\r\n <div\r\n class="ruler-line ruler-right"\r\n [ngStyle]="{\r\n width:\r\n boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) + \'px\',\r\n right:\r\n -(boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth)) +\r\n \'px\'\r\n }"\r\n >\r\n @if (boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) > 8) {\r\n <span class="text-[14px] absolute right-1/2 -translate-y-1/2 translate-x-1/2">\r\n {{ boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n}\r\n',styles:[".move{position:absolute;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;cursor:move;top:0;z-index:1000;background-color:#4399fa}.border-active{position:absolute;inset:0;border:1px solid #4399fa;pointer-events:none}.resize{z-index:9999;position:absolute;select-event:none;background-color:#3b82f6;width:.5rem;height:.5rem}.resize-ew{cursor:ew-resize}.resize-tl{cursor:nw-resize}.resize-tr{cursor:ne-resize}.resize-bl{cursor:sw-resize}.resize-br{cursor:se-resize}.resize-t,.resize-b{cursor:n-resize}#resize-top-block-blank{z-index:9999;position:absolute;select-event:none;background-color:#3b82f6;width:.5rem;height:.5rem;width:7rem;height:.75rem;border-radius:0 0 1rem 1rem;cursor:n-resize;border:2px solid #3b82f6;background-color:#fff}#resize-top-block-blank:hover{background-color:#3b82f6}#resize-bottom-block-blank{z-index:9999;position:absolute;select-event:none;background-color:#3b82f6;width:.5rem;height:.5rem;width:7rem;height:.75rem;border-radius:1rem 1rem 0 0;cursor:s-resize;border:2px solid #3b82f6;background-color:#fff}#resize-bottom-block-blank:hover{background-color:#3b82f6}.ruler-line{position:absolute;background-color:#ef4444;font-size:14px}.ruler-line.ruler-top,.ruler-line.ruler-bottom{width:.1px;left:50%;transform:translate(-50%)}.ruler-line.ruler-top span,.ruler-line.ruler-bottom span{top:50%}.ruler-line.ruler-left,.ruler-line.ruler-right{height:.1px;top:50%;transform:translateY(-50%)}.ruler-line.ruler-left span,.ruler-line.ruler-right span{left:50%}.ruler-line span{position:absolute;transform:translate(-50%,-50%)}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Cn,decorators:[{type:l,args:[{selector:"[wbdragdrop]",imports:[k],template:'<ng-content></ng-content>\r\n\r\n\x3c!-- Lá cờ nắm kéo --\x3e\r\n@if (type == \'design\' && [\'frame_banner\'].includes(data.type)) {\r\n <div\r\n id="flag-drag"\r\n class="move relative"\r\n [ngStyle]="{ left: getLeftDrag() + \'px\' }"\r\n (pointerdown)="onPointerDown($event)"\r\n >\r\n <svg\r\n xmlns="http://www.w3.org/2000/svg"\r\n width="16"\r\n height="16"\r\n fill="currentColor"\r\n class="bi bi-arrows-move"\r\n viewBox="0 0 16 16"\r\n style="color: #fff"\r\n >\r\n <path\r\n fill-rule="evenodd"\r\n d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10M.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8"\r\n />\r\n </svg>\r\n\r\n <div class="absolute w-full h-full left-0 top-0" style="z-index: 9999"></div>\r\n </div>\r\n}\r\n\r\n\x3c!-- @if (conditionShowActive()) {\r\n <div class="border-active"></div>\r\n} --\x3e\r\n\r\n@if (conditionShowResize()) {\r\n @if ([\'block_blank\', \'block_header\', \'block_footer\'].includes(data.type)) {\r\n <div\r\n id="resize-top-block-blank"\r\n [ngStyle]="{ left: \'50%\', top: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'top\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom-block-blank"\r\n [ngStyle]="{ left: \'50%\', bottom: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n } @else if ([\'object_line\'].includes(data.type)) {\r\n @if (data[device + \'_config\'][\'direction\'] == \'vertical\') {\r\n <div\r\n id="resize-top"\r\n class="resize resize-t"\r\n [ngStyle]="{ left: \'50%\', top: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'top\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom"\r\n class="resize resize-b"\r\n [ngStyle]="{ left: \'50%\', bottom: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n } @else {\r\n <div\r\n id="resize-left"\r\n class="resize resize-ew"\r\n [ngStyle]="{ left: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-right"\r\n class="resize resize-ew"\r\n [ngStyle]="{ right: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n }\r\n } @else if ([\'WbText\'].includes(data.component)) {\r\n <div\r\n id="resize-left"\r\n class="resize resize-ew"\r\n [ngStyle]="{ left: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-right"\r\n class="resize resize-ew"\r\n [ngStyle]="{ right: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n } @else {\r\n <div\r\n id="resize-left"\r\n class="resize resize-ew"\r\n [ngStyle]="{ left: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-right"\r\n class="resize resize-ew"\r\n [ngStyle]="{ right: 0, top: \'50%\', transform: \'translateY(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-top"\r\n class="resize resize-t"\r\n [ngStyle]="{ left: \'50%\', top: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'top\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom"\r\n class="resize resize-b"\r\n [ngStyle]="{ left: \'50%\', bottom: 0, transform: \'translateX(-50%)\' }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-top-left"\r\n class="resize resize-tl"\r\n [ngStyle]="{ left: 0, top: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'top-left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-top-right"\r\n class="resize resize-tr"\r\n [ngStyle]="{ right: 0, top: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'top-right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom-left"\r\n class="resize resize-bl"\r\n [ngStyle]="{ left: 0, bottom: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom-left\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n\r\n <div\r\n id="resize-bottom-right"\r\n class="resize resize-br"\r\n [ngStyle]="{ right: 0, bottom: 0 }"\r\n (pointerdown)="handleResizePointerDown($event, \'bottom-right\')"\r\n (pointermove)="handleResizePointerMove($event)"\r\n (pointerup)="handleResizePointerUp($event)"\r\n ></div>\r\n }\r\n}\r\n\x3c!-- is_child là con của các frame đặc biệt như frame-tab, collapse, banner --\x3e\r\n@if (\r\n !webBuilderService.itemChoosing?.type.includes(\'block\') &&\r\n webBuilderService.itemChoosing?._id == data._id &&\r\n webBuilderService.elementChoosingRef == el.nativeElement &&\r\n !data.is_child\r\n) {\r\n @if (data[keyPosition].top < 150) {\r\n <div\r\n class="ruler-line ruler-top"\r\n [ngStyle]="{\r\n height: data[keyPosition].top + \'px\',\r\n top: -data[keyPosition].top + \'px\'\r\n }"\r\n >\r\n @if (data[keyPosition].top > 8) {\r\n <span class="text-[14px] absolute top-1/2 -translate-1/2">\r\n {{ data[keyPosition].top }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (data[keyPosition].left < 150) {\r\n <div\r\n class="ruler-line ruler-left"\r\n [ngStyle]="{\r\n width: data[keyPosition].left + \'px\',\r\n left: -data[keyPosition].left + \'px\'\r\n }"\r\n >\r\n @if (data[keyPosition].left > 8) {\r\n <span class="text-[14px] absolute left-1/2 -translate-1/2">\r\n {{ data[keyPosition].left }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight) < 150) {\r\n <div\r\n class="ruler-line ruler-bottom"\r\n [ngStyle]="{\r\n height:\r\n boundaryEle.offsetHeight -\r\n (data[keyPosition].top + el.nativeElement?.offsetHeight) +\r\n \'px\',\r\n bottom:\r\n -(boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight)) +\r\n \'px\'\r\n }"\r\n >\r\n @if (\r\n boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight) > 8\r\n ) {\r\n <span class="text-[14px] absolute top-1/2 -translate-1/2">\r\n {{ boundaryEle.offsetHeight - (data[keyPosition].top + el.nativeElement?.offsetHeight) }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) < 150) {\r\n <div\r\n class="ruler-line ruler-right"\r\n [ngStyle]="{\r\n width:\r\n boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) + \'px\',\r\n right:\r\n -(boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth)) +\r\n \'px\'\r\n }"\r\n >\r\n @if (boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) > 8) {\r\n <span class="text-[14px] absolute right-1/2 -translate-y-1/2 translate-x-1/2">\r\n {{ boundaryEle.offsetWidth - (data[keyPosition].left + el.nativeElement?.offsetWidth) }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n}\r\n',styles:[".move{position:absolute;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;cursor:move;top:0;z-index:1000;background-color:#4399fa}.border-active{position:absolute;inset:0;border:1px solid #4399fa;pointer-events:none}.resize{z-index:9999;position:absolute;select-event:none;background-color:#3b82f6;width:.5rem;height:.5rem}.resize-ew{cursor:ew-resize}.resize-tl{cursor:nw-resize}.resize-tr{cursor:ne-resize}.resize-bl{cursor:sw-resize}.resize-br{cursor:se-resize}.resize-t,.resize-b{cursor:n-resize}#resize-top-block-blank{z-index:9999;position:absolute;select-event:none;background-color:#3b82f6;width:.5rem;height:.5rem;width:7rem;height:.75rem;border-radius:0 0 1rem 1rem;cursor:n-resize;border:2px solid #3b82f6;background-color:#fff}#resize-top-block-blank:hover{background-color:#3b82f6}#resize-bottom-block-blank{z-index:9999;position:absolute;select-event:none;background-color:#3b82f6;width:.5rem;height:.5rem;width:7rem;height:.75rem;border-radius:1rem 1rem 0 0;cursor:s-resize;border:2px solid #3b82f6;background-color:#fff}#resize-bottom-block-blank:hover{background-color:#3b82f6}.ruler-line{position:absolute;background-color:#ef4444;font-size:14px}.ruler-line.ruler-top,.ruler-line.ruler-bottom{width:.1px;left:50%;transform:translate(-50%)}.ruler-line.ruler-top span,.ruler-line.ruler-bottom span{top:50%}.ruler-line.ruler-left,.ruler-line.ruler-right{height:.1px;top:50%;transform:translateY(-50%)}.ruler-line.ruler-left span,.ruler-line.ruler-right span{left:50%}.ruler-line span{position:absolute;transform:translate(-50%,-50%)}\n"]}]}],ctorParameters:()=>[{type:xn},{type:t.ElementRef},{type:t.Renderer2}],propDecorators:{mode:[{type:s}],boundaryEle:[{type:s}],parent:[{type:s}],data:[{type:s}],device:[{type:s}],top:[{type:s}],left:[{type:s}],type:[{type:s}],onPointerDown:[{type:r,args:["pointerdown",["$event"]]}]}});class kn{webBuilderService;map;modalRef;data;device;class;config;animation;type;product;nzModalData=o(I,{optional:!0});constructor(e,n,t){this.webBuilderService=e,this.map=n,this.modalRef=t}ngOnInit(){if(!this.data&&this.nzModalData.data){const{data:e,device:n,class:t,config:i,animation:o,type:a,product:r}=this.nzModalData;this.data=e,this.device=n,this.class=t,this.config=i,this.animation=o,this.type=a,this.product=r}"block_blank"!=this.data.type||this.config.drag_mode||(this.config.drag_mode="margin",this.webBuilderService.updateBlock(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]}))}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:kn,deps:[{token:xn},{token:tt},{token:O.NzModalRef,optional:!0}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:kn,isStandalone:!0,selector:"wb-block-blank",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",product:"product"},ngImport:t,template:"<div\n [id]=\"data._id\"\n class=\"block-blank\"\n [ngStyle]=\"class['block-blank']\"\n [style.--position]=\"\n data.type == 'block_chatbox' && type != 'design' && type != 'admin' ? 'fixed' : 'static'\n \"\n [style.--z-index]=\"\n data.type == 'block_chatbox' && type != 'design' && type != 'admin' ? '999999' : 'auto'\n \"\n #dragBoundary\n>\n @for (object of data.objects; track object._id) {\n @if (!object[device + '_hidden']) {\n <div\n class=\"w-fit inline-block\"\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [boundaryEle]=\"dragBoundary\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [top]=\"object[device + '_position_' + data._id].top\"\n [left]=\"object[device + '_position_' + data._id].left\"\n [ngStyle]=\"{\n 'pointer-events': ['design', 'admin'].includes(type) && data.is_clone ? 'none' : 'auto'\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n device: device,\n type: type,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n isClone: ['design', 'admin'].includes(type) && data.is_clone,\n product: product\n }\n \"\n >\n </ng-container>\n </div>\n }\n }\n\n \x3c!-- Vùng kéo nhiều object --\x3e\n @if (\n webBuilderService.arrayChoosing[0]?.id_block == data._id &&\n webBuilderService.arrayChoosing.length > 1\n ) {\n <div\n wbVirtualSelected\n [boundaryEle]=\"dragBoundary\"\n id=\"choosing-box\"\n [ngStyle]=\"{\n position: 'absolute',\n border: '2px solid red',\n cursor: 'pointer',\n 'z-index': 9999999,\n 'pointer-events': 'none',\n left: webBuilderService.infoVirtualSelected.left + 'px',\n top: webBuilderService.infoVirtualSelected.top + 'px',\n width: webBuilderService.infoVirtualSelected.width + 'px',\n height: webBuilderService.infoVirtualSelected.height + 'px'\n }\"\n ></div>\n }\n</div>\n",styles:[".block-blank{position:var(--position);z-index:var(--z-index);top:var(--top);left:var(--left);right:var(--right);bottom:var(--bottom);background-color:var(--bg-color);width:var(--width);min-height:var(--min-height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);box-shadow:var(--box-shadow);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);background-attachment:var(--bg-attachment);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);display:flow-root}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"ngmodule",type:B},{kind:"component",type:Cn,selector:"[wbdragdrop]",inputs:["mode","boundaryEle","parent","data","device","top","left","type"]},{kind:"component",type:wn,selector:"[wbVirtualSelected]",inputs:["boundaryEle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:kn,decorators:[{type:l,args:[{selector:"wb-block-blank",imports:[k,B,Cn,wn],template:"<div\n [id]=\"data._id\"\n class=\"block-blank\"\n [ngStyle]=\"class['block-blank']\"\n [style.--position]=\"\n data.type == 'block_chatbox' && type != 'design' && type != 'admin' ? 'fixed' : 'static'\n \"\n [style.--z-index]=\"\n data.type == 'block_chatbox' && type != 'design' && type != 'admin' ? '999999' : 'auto'\n \"\n #dragBoundary\n>\n @for (object of data.objects; track object._id) {\n @if (!object[device + '_hidden']) {\n <div\n class=\"w-fit inline-block\"\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [boundaryEle]=\"dragBoundary\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [top]=\"object[device + '_position_' + data._id].top\"\n [left]=\"object[device + '_position_' + data._id].left\"\n [ngStyle]=\"{\n 'pointer-events': ['design', 'admin'].includes(type) && data.is_clone ? 'none' : 'auto'\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n device: device,\n type: type,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n isClone: ['design', 'admin'].includes(type) && data.is_clone,\n product: product\n }\n \"\n >\n </ng-container>\n </div>\n }\n }\n\n \x3c!-- Vùng kéo nhiều object --\x3e\n @if (\n webBuilderService.arrayChoosing[0]?.id_block == data._id &&\n webBuilderService.arrayChoosing.length > 1\n ) {\n <div\n wbVirtualSelected\n [boundaryEle]=\"dragBoundary\"\n id=\"choosing-box\"\n [ngStyle]=\"{\n position: 'absolute',\n border: '2px solid red',\n cursor: 'pointer',\n 'z-index': 9999999,\n 'pointer-events': 'none',\n left: webBuilderService.infoVirtualSelected.left + 'px',\n top: webBuilderService.infoVirtualSelected.top + 'px',\n width: webBuilderService.infoVirtualSelected.width + 'px',\n height: webBuilderService.infoVirtualSelected.height + 'px'\n }\"\n ></div>\n }\n</div>\n",styles:[".block-blank{position:var(--position);z-index:var(--z-index);top:var(--top);left:var(--left);right:var(--right);bottom:var(--bottom);background-color:var(--bg-color);width:var(--width);min-height:var(--min-height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);box-shadow:var(--box-shadow);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);background-attachment:var(--bg-attachment);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);display:flow-root}\n"]}]}],ctorParameters:()=>[{type:xn},{type:tt},{type:O.NzModalRef,decorators:[{type:c}]}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],product:[{type:s}]}});class Sn{http;toast;webBuilderService;router;apiUrl=o(yn);urlBE=`${this.apiUrl}/api/v1`;user=null;endUser=null;constructor(e,n,t,i){this.http=e,this.toast=n,this.webBuilderService=t,this.router=i}wrapApiCall(e){return v(e.pipe(z(e=>y(()=>{const n=e.error;return 1==n.vcode&&"Token không hợp lệ"==n.msg?(localStorage.removeItem("token"),this.router.navigate(["/login"])):1==n.vcode&&"Token người dùng cuối không hợp lệ"==n.msg?localStorage.removeItem("token_end_user"):this.toast.error(n?.msg||"Đã có lỗi xảy ra"),n}))))}handleLogin(e,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/auth/login`,{email:e,password:n})).then(e=>(this.user=e.data,e))}handleRegister(e,n,t){return this.wrapApiCall(this.http.post(`${this.urlBE}/auth/register`,{name:e,email:n,password:t}))}handleLogout(){return this.wrapApiCall(this.http.post(`${this.urlBE}/auth/logout`,{})).then(e=>(this.user=null,e))}checkAuthUser(){return this.http.get(`${this.urlBE}/auth/me`).pipe(_(e=>0===e.vcode&&(this.user=e.data,!0)),z(()=>x(!1)))}isAuthenticated(){return this.checkAuthUser()}handleRegisterEndUser(e,n,t,i){return this.wrapApiCall(this.http.post(`${this.urlBE}/auth/enduser/register`,{name:e,email:n,phone:t,password:i,col_name:"users",db:this.webBuilderService.projectWorking._id}))}handleLoginEndUser(e,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/auth/enduser/login`,{email:e,password:n,col_name:"users",db:this.webBuilderService.projectWorking._id})).then(e=>(this.endUser=e.data,localStorage.setItem("login_status","1"),e))}handleLogoutEndUser(){return new Promise((e,n)=>{this.wrapApiCall(this.http.post(`${this.urlBE}/auth/enduser/logout`,{col_name:"users",db:this.webBuilderService.projectWorking._id})).then(n=>{localStorage.setItem("login_status","0"),this.endUser=null,e(n)})})}checkAuthEndUser(){return"1"==localStorage.getItem("login_status")}fetchEndUser(){return new Promise((e,n)=>{this.wrapApiCall(this.http.post(`${this.urlBE}/auth/enduser/me`,{col_name:"users",db:this.webBuilderService.projectWorking._id})).then(n=>{0==n.vcode&&(this.endUser=n.data,e(n))}).catch(e=>{n(e),localStorage.setItem("login_status","0")})})}getEndUser(){return this.endUser}getUser(){return this.user}sendActivationEmail(e){return this.wrapApiCall(this.http.get(`${this.urlBE}/auth/verify?token=${e}`))}forgotPassword(e){return this.wrapApiCall(this.http.post(`${this.urlBE}/auth/forgot-password`,{email:e}))}resetPassword(e,n){return this.wrapApiCall(this.http.post(`${this.urlBE}/auth/reset-password`,{token:e,newPassword:n}))}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Sn,deps:[{token:e.HttpClient},{token:A.NzMessageService},{token:xn},{token:P.Router}],target:t.ɵɵFactoryTarget.Injectable});static"ɵprov"=t.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Sn,providedIn:"root"})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Sn,decorators:[{type:a,args:[{providedIn:"root"}]}],ctorParameters:()=>[{type:e.HttpClient},{type:A.NzMessageService},{type:xn},{type:P.Router}]});const Mn={component:"WbBlockBlank",component_config:"WbBlockBlankConfig",name:"Khối hộp thoại",desktop_class:{"block-blank":{"--bg-color":"#FFFFFF","--bg-image":"none","--width":"1366px","--min-height":"400px","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--border-style":"solid","--border-top-width":"0px","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px","--border-color":"#000000","--box-shadow":"none"}},desktop_config:{bg_color:{type:"color",gradient_arr:["#FF5733","#33FF57","#3357FF"],deg:0},shadow:{is_shadow:!1,type:"",x:0,y:0,blur:0,color:"#000000"}},desktop_animation:{},resize_field:"block-blank",resize_group:"block",objects:[],type:"block_dialog"},Bn={component:"WbFrameBlank",component_config:"WbFrameBlankConfig",name:"Khung trống",desktop_class:{"frame-blank":{"--bg-color":"#FFFFFF","--width":"1366px","--min-height":"400px","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--border-style":"solid","--border-top-width":"0px","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px","--border-color":"#000000","--bg-image":"none","--box-shadow":"none"}},desktop_config:{sticky:{type:"none",top:0},bg_color:{type:"color",gradient_arr:["#FF5733","#33FF57","#3357FF"],deg:0},shadow:{is_shadow:!1,type:"",x:0,y:0,blur:0,color:"#000000"}},desktop_animation:{},resize_field:"frame-blank",resize_group:"block",objects:[],type:"frame_blank"};class On{webBuilderService;toast;constructor(e,n){this.webBuilderService=e,this.toast=n}convertNameToSlug(e){e=e.toLowerCase();const n="àáạảãâầấậẩẫăằắặẳẵèéẹẻẽêềếệểễìíịỉĩòóọỏõôồốộổỗơờớợởỡùúụủũưừứựửữỳýỵỷỹđ";for(let t=0;t<67;t++){const i=new RegExp(`\\${n[t]}`,"g");e=e.replace(i,"aaaaaaaaaaaaaaaaaeeeeeeeeeeeiiiiiooooooooooooooooouuuuuuuuuuuyyyyyd"[t])}return(e=e.normalize("NFD").replace(/[\u0300-\u036f]/g,"")).split(" ").join("-")}removeVietnamese(e){return e?e=(e=(e=(e=e.replace(/Đ/g,"D").replace(/đ/g,"d")).normalize("NFD").replace(/[\u0300-\u036f]/g,"")).replace(/[^\w\s-]/g,"")).trim().replace(/\s+/g," "):""}async addObject(e){const{itemChoosing:n,device:t}=this.webBuilderService;let i=n._id,o={id_object:i};n.type.includes("block")&&(o={id_block:i});let a={...e,...o};if(fn.forEach(e=>{const n=e.value;a[n+"_position_"+i]={top:0,left:0,z_index:1};const t=a[n+"_class"]?n+"_class":"desktop_class",o=a[n+"_config"]?n+"_config":"desktop_config",r=a[n+"_animation"]?n+"_animation":"desktop_animation";switch(a[n+"_class"]={...a[t]},a[n+"_config"]={...a[o]},a[n+"_animation"]={...a[r]},a.component){case"WbButton":a[n+"_class"].button__content["--font-family"]=this.webBuilderService.getFontNames(this.webBuilderService.projectWorking.setups.font)[0]||"Arial";break;case"WbText":a[n+"_class"].text__content["--font-family"]=this.webBuilderService.getFontNames(this.webBuilderService.projectWorking.setups.font)[0]||"Arial";break;case"WbCheckboxFilter":a[n+"_class"]["checkbox-filter__label"]["--font-family"]=this.webBuilderService.getFontNames(this.webBuilderService.projectWorking.setups.font)[0]||"Arial"}}),["object_button_dialog","object_product_input_search"].includes(e.type)){const{projectWorking:e}=this.webBuilderService;let n={...Mn};fn.forEach(t=>{const i=t.value;n[i+"_position"]={top:0,left:0,z_index:1};const o=n[i+"_class"]?i+"_class":"desktop_class";n[i+"_class"]={...n[o],[Mn.resize_field]:{...n[o][Mn.resize_field],"--width":e.resolution[i+"_width"]+"px"}};const a=n[i+"_config"]?i+"_config":"desktop_config",r=n[i+"_animation"]?i+"_animation":"desktop_animation";n[i+"_config"]={...n[a]},n[i+"_animation"]={...n[r]}});const t=await this.webBuilderService.addBlock(n);0==t.vcode&&(a.desktop_config.id_freeblock=t.data._id,a.tablet_portrait_config.id_freeblock=t.data._id,a.tablet_landscape_config.id_freeblock=t.data._id,a.mobile_portrait_config.id_freeblock=t.data._id,a.mobile_landscape_config.id_freeblock=t.data._id)}this.webBuilderService.addObject(a).then(n=>{this.toast.success(`Thêm ${e.name} thành công!`)})}addFrame(e){const{itemChoosing:n,projectWorking:t}=this.webBuilderService;(e.id_object||e.id_block)&&(this.webBuilderService.itemChoosing=this.webBuilderService.findItemById(e.id_object||e.id_block));let i=n?._id,o={...e};!n.type.includes("block")||o.hasOwnProperty("id_block")||o.hasOwnProperty("id_object")||(o.id_block=n._id),!n.type.includes("frame")&&!n.type.includes("object")||o.hasOwnProperty("id_object")||o.hasOwnProperty("id_block")||(o.id_object=n._id),fn.forEach(a=>{const r=a.value;o[r+"_position_"+i]={top:0,left:0,z_index:1};let s=0,l=0;["block_blank","block_header","block_footer"].includes(n?.type)?(s=.8*+t.resolution[r+"_width"],l=.4*+n[r+"_class"][n.resize_field][this.webBuilderService.resizeGroup[n.resize_group].height].replace("px","")):n?.is_child?(s=.8*this.webBuilderService.elementChoosingRef.offsetWidth,l=.8*this.webBuilderService.elementChoosingRef.offsetHeight):(s=.8*+n[r+"_class"][n.resize_field][this.webBuilderService.resizeGroup[n.resize_group].width].replace("px",""),l=.4*+n[r+"_class"][n.resize_field][this.webBuilderService.resizeGroup[n.resize_group].height].replace("px",""));const c=o[r+"_class"]?r+"_class":"desktop_class";o[r+"_class"]={...o[c],[e.resize_field]:{...o[c][e.resize_field],[this.webBuilderService.resizeGroup[e.resize_group].width]:s+"px",[this.webBuilderService.resizeGroup[e.resize_group].height]:l+"px"}};const d=o[r+"_config"]?r+"_config":"desktop_config",p=o[r+"_animation"]?r+"_animation":"desktop_animation";o[r+"_config"]={...o[d]},o[r+"_animation"]={...o[p]}}),this.webBuilderService.addObject(o).then(n=>{if("frame_tab"==n.data.type){let e=[];for(let t=0;t<3;t++){const i=JSON.parse(JSON.stringify(Bn));i.id_object=n.data._id,i.desktop_class["frame-blank"]["--bg-color"]=this.randomColor(),i.desktop_config.content={},i.desktop_config.content.vi=`Tab ${t+1}`,i.index=t,i.is_child=!0,delete i.id_block,fn.forEach(e=>{const t=e.value;i[t+"_position_"+n.data._id]={top:0,left:0,z_index:1};const o=i[t+"_class"]?t+"_class":"desktop_class";i[t+"_class"]={...i[o],[Bn.resize_field]:{...i[o][Bn.resize_field],"--width":"100%","--min-height":"100%"}};const a=i[t+"_config"]?t+"_config":"desktop_config",r=i[t+"_animation"]?t+"_animation":"desktop_animation";i[t+"_config"]={...i[a]},i[t+"_animation"]={...i[r]},i[t+"_config"].drag_mode="margin"}),e.push(this.webBuilderService.addObject(i))}Promise.all(e).then(e=>{n.data.objects.sort((e,n)=>e.index-n.index)}).catch(e=>{console.error("Error adding frames:",e)})}else if("frame_banner"==n.data.type){let e=[];for(let t=0;t<3;t++){const i=JSON.parse(JSON.stringify(Bn));i.id_object=n.data._id,i.desktop_class["frame-blank"]["--bg-color"]=this.randomColor(),i.index=t,i.is_child=!0,delete i.id_block,fn.forEach(e=>{const t=e.value;i[t+"_position_"+n.data._id]={top:0,left:0,z_index:1};const o=i[t+"_class"]?t+"_class":"desktop_class";i[t+"_class"]={...i[o],[Bn.resize_field]:{...i[o][Bn.resize_field],"--width":"100%","--min-height":"100%"}};const a=i[t+"_config"]?t+"_config":"desktop_config",r=i[t+"_animation"]?t+"_animation":"desktop_animation";i[t+"_config"]={...i[a]},i[t+"_animation"]={...i[r]},i[t+"_config"].drag_mode="margin"}),e.push(this.webBuilderService.addObject(i))}Promise.all(e).then(e=>{n.data.objects.sort((e,n)=>e.index-n.index)}).catch(e=>{console.error("Error adding frames:",e)})}this.toast.success(`Thêm ${e.name} thành công!`)})}addBlock(e){let n=this.webBuilderService.currentPage._id;const{projectWorking:t}=this.webBuilderService;let i={...e,id_page:n};"block_blank"!=e.type&&delete i.id_page,fn.forEach(o=>{const a=o.value;if("block_blank"==e.type){const e=this.webBuilderService.currentPage.blocks.reduce((e,t)=>t[a+"_position_"+n].index>e?t[a+"_position_"+n].index:e,-1);i[a+"_position_"+n]={top:0,left:0,index:e+1,z_index:1}}else["block_header","block_footer"].includes(e.type),i[a+"_position"]={top:0,left:0};const r=i[a+"_class"]?a+"_class":"desktop_class";i[a+"_class"]={...i[r],[e.resize_field]:{...i[r][e.resize_field],"--width":["block_blank","block_header","block_footer"].includes(i.type)?"100%":t.resolution[a+"_width"]+"px"}};const s=i[a+"_config"]?a+"_config":"desktop_config",l=i[a+"_animation"]?a+"_animation":"desktop_animation";i[a+"_config"]={...i[s]},i[a+"_animation"]={...i[l]}}),this.webBuilderService.addBlock(i).then(n=>{this.toast.success(`Thêm ${e.name} thành công!`)})}createMessage(e,n){switch(e){case"error":return this.toast.error(n);case"warn":return this.toast.warning(n);case"success":return this.toast.success(n);default:return this.toast.info(n)}}sortVietnameseString(e,n,t,i=1){const o=[...e];return Array.isArray(o)?n&&"string"==typeof n?o.sort((e,o)=>{let a=e[n],r=o[n];return t&&"object"==typeof a&&"object"==typeof r&&(a=a[t]||"",r=r[t]||""),i*a?.localeCompare(r,"vi",{sensitivity:"base"})}):o:[]}generateObjectId(){return(Math.floor(Date.now()/1e3).toString(16)+"xxxxxxxxxxxxxxxx".replace(/[x]/g,()=>(16*Math.random()|0).toString(16))).slice(0,24)}randomColor(){let e="#";for(let n=0;n<6;n++)e+="0123456789ABCDEF"[Math.floor(16*Math.random())];return e}handleNextPrevFrame(e,n,t){const i=+e.class["frame-products"]["--width"].replace("px","")+ +e.class["frame-products__grid"]["--gap"].replace("px",""),{rows:o,cols:a}=e.config.grid,{loop_method:r}=e.config.slide,s="none"!=r;if(e.isSliding||"design"==e.type||"admin"==e.type||!e.type||!e.products2D?.length||e.products.length<o*a)return;e.isSliding=!0;const l=e.products2D[e.groupNumber-1]?.length;if(!l)return;const c=i/a,d=l<a?l:a;switch(n){case"next":if(e.currentIndex<e.groupNumber)e.currentIndex++,e.translateX=e.oldTranslateX-=e.currentIndex==e.groupNumber?c*d:i,e.isSliding=!1,e.isLastLeft=!1,e.currentIndex!=e.groupNumber||s||(e.isLastRight=!0);else{if(!s)return void(e.isSliding=!1);switch(r){case"back_to_start":e.currentIndex=1,e.translateX=e.oldTranslateX=0,e.isSliding=!1;break;case"infinity":e.currentIndex++,e.currentIndex==e.groupNumber+1?(e.translateX=e.oldTranslateX-=i+(a-d)*c,e.isSliding=!1):(e.class[t]["--transition"]="none",e.translateX=e.oldTranslateX=0,e.currentIndex=2,setTimeout(()=>{e.class[t]["--transition"]=e.transition||"0.4s",e.translateX=e.oldTranslateX-=e.currentIndex==e.groupNumber?c*d:i,e.isSliding=!1},0))}}break;case"prev":if(e.currentIndex>1)e.currentIndex--,e.currentIndex==e.groupNumber-1?e.translateX=e.oldTranslateX+=c*d:e.currentIndex==e.groupNumber?e.translateX=e.oldTranslateX+=i+(a-d)*c:e.translateX=e.oldTranslateX+=i,1!=e.currentIndex||s||(e.isLastLeft=!0),e.isLastRight=!1,e.isSliding=!1;else{if(!s)return void(e.isSliding=!1);switch(r){case"back_to_start":e.currentIndex=e.groupNumber,e.translateX=e.oldTranslateX-=(e.groupNumber-2)*i+d*c,e.isSliding=!1;break;case"infinity":e.currentIndex=e.groupNumber,e.class[t]["--transition"]="none",e.translateX=e.oldTranslateX-=e.groupNumber*i,setTimeout(()=>{e.class[t]["--transition"]=e.transition||"0.4s",e.translateX=e.oldTranslateX+=i+(a-d)*c,e.isSliding=!1},0)}}}}handleNextPrevCol(e,n,t){const i=+e.class["frame-products"]["--width"].replace("px","")+ +e.class["frame-products__grid"]["--gap"].replace("px",""),{rows:o,cols:a}=e.config.grid,{loop_method:r}=e.config.slide,s="none"!=r;if(e.isSliding||"design"==e.type||"admin"==e.type||!e.type||!e.products2D?.length||e.products.length<o*a)return;e.isSliding=!0;let l=e.products2D[e.groupNumber-1].length<a?e.products2D[e.groupNumber-1].length:a;const c=e.elementRef.nativeElement.querySelector(".frame-products__item").offsetWidth+Number(e.class[t]["--gap"].replace("px","")),d=e.products2D[e.groupNumber-1].length,p=d<a?d:a;let g="infinity"==r?p<a?1:a:0,u=(e.groupNumber-2)*a+l+1+g;switch(n){case"next":if(e.currentIndex<u)e.currentIndex++,e.currentIndex==u&&1==g?e.translateX=e.oldTranslateX-=i+(a-p)*c:e.translateX=e.oldTranslateX-=c,e.currentIndex!=u-g||s||(e.isLastRight=!0),e.isLastLeft=!1,e.isSliding=!1;else{if(!s)return;switch(r){case"back_to_start":e.currentIndex=1,e.translateX=e.oldTranslateX=0,e.isSliding=!1;break;case"infinity":e.currentIndex++,e.currentIndex==u+1&&(e.class[t]["--transition"]="none",e.translateX=e.oldTranslateX=0,e.currentIndex=2,setTimeout(()=>{e.class[t]["--transition"]=e.transition||"0.4s",e.translateX=e.oldTranslateX-=c,e.isSliding=!1},0))}}break;case"prev":if(e.currentIndex>1)e.currentIndex--,e.translateX=e.oldTranslateX+=e.currentIndex==u-1&&p!=a&&"infinity"==r?i+(a-p)*c:c,1!=e.currentIndex||s||(e.isLastLeft=!0),e.isLastRight=!1,e.isSliding=!1;else{if(!s)return;switch(r){case"back_to_start":e.currentIndex=u,e.translateX=e.oldTranslateX-=(u-1)*c,e.isSliding=!1;break;case"infinity":e.currentIndex=u-1,e.class[t]["--transition"]="none",e.translateX=e.oldTranslateX-=e.groupNumber*i,setTimeout(()=>{e.class[t]["--transition"]=e.transition||"0.4s",e.translateX=e.oldTranslateX+=e.currentIndex==u-1&&p!=a?i+(a-p)*c:c,e.isSliding=!1},0)}}}}onMouseDown(e,n,t,i){const{is_swipe:o}=e.config.slide;"design"==e.type||"admin"==e.type||!e.type||e.products.length<=e.groupNumber||!o||(e.initialMouseX="mouse"==t?n.clientX:n.touches[0].clientX,e.isDragging=!0,e.class[i]["--transition"]="0s")}onMouseMove(e,n,t){if("design"!=e.type&&"admin"!=e.type&&e.type&&e.isDragging){const i="mouse"==t?n.movementX:n.touches[0].clientX-e.currentMouseX;if("touch"==t&&(e.currentMouseX=n.touches[0].clientX),e.isLastLeft&&i>0||e.isLastRight&&i<0||e.isSliding)return;e.translateX+=i,e.isSwiping=!0}}onMouseUp(e,n,t,i){const{is_swipe:o}=e.config.slide;if("design"==e.type||"admin"==e.type||!e.type||e.products.length<=e.groupNumber||!o||!e.isDragging)return;const a=("mouse"==t?n.clientX:n.changedTouches[0].clientX)-e.initialMouseX;a>0&&!e.isLastLeft?e.handlePrev():a<0&&!e.isLastRight&&e.handleNext(),e.class[i]["--transition"]=e.transition||"0.4s",e.isDragging=!1,e.isSwiping=!1}onMouseLeave(e,n){"design"!=e.type&&"admin"!=e.type&&e.type&&e.isDragging&&e.onMouseUp(n,"mouse")}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:On,deps:[{token:xn},{token:A.NzMessageService}],target:t.ɵɵFactoryTarget.Injectable});static"ɵprov"=t.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:On,providedIn:"root"})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:On,decorators:[{type:a,args:[{providedIn:"root"}]}],ctorParameters:()=>[{type:xn},{type:A.NzMessageService}]});class In{overlay;overlayRef;constructor(e){this.overlay=e}open(e){this.overlayRef&&(this.overlayRef.dispose(),this.overlayRef=void 0),this.overlayRef=this.overlay.create({hasBackdrop:!0,panelClass:`custom-drawer-${e.direction}`,positionStrategy:this.overlay.position().global()}),this.overlayRef.backdropClick().subscribe(()=>this.close());const n=new F(kn),t=this.overlayRef.attach(n),{data:i,device:o,type:a,class:r,config:s,animation:l,dataButton:c}=e.data;t.instance.data=i,t.instance.device=o,t.instance.type=a,t.instance.class=r,t.instance.config=s,t.instance.animation=l,"left"===e.direction||"right"===e.direction?(e.data.data[o+"_class"][i.resize_field]["--min-height"]=e.deviceHeight+"px",e.data.data[o+"_class"][i.resize_field]["--width"]=i.width):(e.data.data[o+"_class"][i.resize_field]["--min-height"]=i.height,e.data.data[o+"_class"][i.resize_field]["--width"]=e.deviceWidth+"px"),setTimeout(()=>{if(!this.overlayRef)return;const n=this.overlayRef.overlayElement,t=n.parentElement;t&&(t.style.left=e.left+"px",t.style.right="right"===e.direction?e.left+"px":"unset",t.style.top=e.top+"px",t.style.height=e.deviceHeight+"px",t.style.width=e.deviceWidth+"px",t.style.overflow="hidden"),n.classList.add("open")},0)}close(){if(!this.overlayRef)return;const e=this.overlayRef.overlayElement;e.classList.remove("open");const n=()=>{this.overlayRef?.dispose(),this.overlayRef=void 0,e.removeEventListener("transitionend",n)};e.addEventListener("transitionend",n,{once:!0}),setTimeout(()=>{this.overlayRef&&(this.overlayRef.dispose(),this.overlayRef=void 0)},500)}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:In,deps:[{token:N.Overlay}],target:t.ɵɵFactoryTarget.Injectable});static"ɵprov"=t.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:In,providedIn:"root"})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:In,decorators:[{type:a,args:[{providedIn:"root"}]}],ctorParameters:()=>[{type:N.Overlay}]});class Tn{webbuilderService=o(xn);cartState=d({items:[],currency:"VND",item_count:2,total_price:66e4,total_weight:0},...ngDevMode?[{debugName:"cartState"}]:[]);cart=this.cartState.asReadonly();loadInitialCart(){this.webbuilderService.getCart().then(e=>{console.log("res",e),this.cartState.set(e.data||{items:[]})}).catch(e=>{console.error("Lỗi load giỏ hàng:",e),this.cartState.set({items:[]})})}addItem(e){return new Promise((n,t)=>{const i={id_product:e._id,id_variation:e.id,sku:e.sku,quantity:e.quantity,retail_price:e.retail_price,original_price:e.original_price,name:e.name,img:e.imgs?.[0]||"",link:e.link,fields:e.fields||{},checked:!0};this.webbuilderService.addToCart(i).then(e=>{this.cartState.set(e.data),n()})})}removeItem(e){this.webbuilderService.deleteCartItem(e).then(e=>{this.cartState.set(e.data)})}updateItemQuantity(e,n){this.webbuilderService.updateCartItem(e,n).then(e=>{this.cartState.set(e.data)})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Tn,deps:[],target:t.ɵɵFactoryTarget.Injectable});static"ɵprov"=t.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Tn,providedIn:"root"})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Tn,decorators:[{type:a,args:[{providedIn:"root"}]}]});class Dn{router;webBuilderService;authService;functionService;elementRef;modal;modalRef;drawerService;cart;data;device;class;config;animation;type;isClone;product;findBlock;positionDialog={top:0,left:0,right:0,bottom:0};wbBlockBlank;isOpen=!1;closeDialogSub=null;btnModalPopup;isOpenDialog=!1;_scrollHandler;routerSubscription;previousUrl="";constructor(e,n,t,i,o,a,r,s,l){this.router=e,this.webBuilderService=n,this.authService=t,this.functionService=i,this.elementRef=o,this.modal=a,this.modalRef=r,this.drawerService=s,this.cart=l}ngOnInit(){"object_button_dialog"!=this.data.type||"drawer"!=this.config.dialog.type&&"modal"!=this.config.dialog.type||"click"!=this.config.dialog.trigger||(this.closeDialogSub=this.webBuilderService.onNotifyChange(e=>{"close-dialog"==e.name&&this.closeModal(),"open-drawer"==e.name&&e._id==this.data._id&&this.openDrawer(),"change-freeblock"==e.name&&e._id==this.data._id&&this.getDetailFreeblock()}),this.config.dialog.open=!1)}ngOnChanges(e){if(this.getDetailFreeblock(),"object_button_scroll_to_top"==this.data.type&&"design"!=this.type&&"admin"!=this.type){const e=this.elementRef.nativeElement;e.style.visibility="hidden",e.style.opacity="0",e.style.transition="opacity 0.3s ease-in-out, visibility 0.3s ease-in-out"}}ngAfterViewInit(){"object_button_scroll_to_top"==this.data.type&&"design"!=this.type&&"admin"!=this.type&&setTimeout(()=>{const e=document.querySelector(".scrollbar"),n=this.elementRef.nativeElement;e&&(this._scrollHandler=()=>{const t=e.scrollTop;n&&(t>150?(n.style.visibility="visible",n.style.opacity="1"):(n.style.visibility="hidden",n.style.opacity="0"))},e.addEventListener("scroll",this._scrollHandler))},0)}ngOnDestroy(){const e=document.querySelector(".scrollbar");e&&this._scrollHandler&&e.removeEventListener("scroll",this._scrollHandler),this.closeDialogSub?.unsubscribe(),this.routerSubscription?.unsubscribe(),"object_button_dialog"==this.data.type&&this.closeModal()}getDetailFreeblock(){if(this.config.id_freeblock){if(this.findBlock=this.webBuilderService.freeblocks.find(e=>e._id===this.config.id_freeblock),!this.findBlock)return console.error("Không tìm thấy freeblock id:",this.config.id_freeblock);this.findBlock="design"==this.type?structuredClone(this.findBlock):this.findBlock,this.findBlock.width=this.findBlock[this.device+"_class"][this.findBlock.resize_field][this.webBuilderService.resizeGroup[this.findBlock.resize_group].width],this.findBlock.height=this.findBlock[this.device+"_class"][this.findBlock.resize_field][this.webBuilderService.resizeGroup[this.findBlock.resize_group].height]}}onClick(e){if(e.preventDefault(),"design"!=this.type&&"admin"!=this.type)switch(this.data.type){case"object_button_repeat":case"object_button":case"object_button_before_login":case"object_button_after_login":case"object_product_button_view_detail":this.navigate();break;case"object_button_dialog":this.handleOpen();break;case"object_button_login":this.handleLogin();break;case"object_button_register":this.handleRegister();break;case"object_button_logout":this.handleLogout();break;case"object_button_close_dialog":this.onCloseDialog();break;case"object_product_button_add_to_cart":this.handleAddToCart();break;case"object_product_button_delete_cart_item":this.handleDeleteCartItem();break;case"object_button_add_address":this.handleAddAddress();break;case"object_button_delete_address":this.handleDeleteAddress();break;case"object_button_update_address":this.handleUpdateAddress();break;case"object_button_scroll_to_top":this.handleScrollToTop();break;case"object_product_button_payment":this.handlePayment()}}handlePayment(){const e=this.webBuilderService.findItemById(this.data.id_object||this.data.id_block);if(!e)return console.error("Lỗi khi tạo đơn hàng!");const n={name:"",phone:"",address:"",address_status:"old",province:{name:"",code:null},district:{name:"",code:null},ward:{name:"",code:null},country:"Vietnam"};e.objects.forEach(e=>{switch(e.type){case"object_input_name_cart":n.name=e.value;break;case"object_input_phone_cart":n.phone=e.value;break;case"object_input_address_cart":n.address=e.value;break;case"object_select_province_district_ward_cart":n.province=e.province,n.district=e.district,n.ward=e.ward}});const t=e.objects.find(e=>"object_textarea_note_bill"==e.type)?.value||"";return n.name?n.phone?n.address?n.province?n.district?n.ward?void this.webBuilderService.handleOrder(n,t,"cod").then(e=>{0==e.vcode&&(this.functionService.createMessage("success","Đặt hàng thành công!"),this.router.navigate([`${this.webBuilderService.projectWorking._id}`,"preview-web"]))}):this.functionService.createMessage("error","Vui lòng nhập phường/xã"):this.functionService.createMessage("error","Vui lòng nhập quận/huyện"):this.functionService.createMessage("error","Vui lòng nhập tỉnh/thành"):this.functionService.createMessage("error","Vui lòng nhập địa chỉ"):this.functionService.createMessage("error","Vui lòng nhập số điện thoại"):this.functionService.createMessage("error","Vui lòng nhập tên")}handleLogin(){const e=this.webBuilderService.findItemById(this.data.id_object||this.data.id_block);if(e){const n={email:"",password:""};if(e.objects.forEach(e=>{switch(e.type){case"object_input_email":n.email=e.value,console.log("obj",e.value);break;case"object_input_password":n.password=e.value,console.log("obj",e.value)}}),!n.email||!n.password)return void this.functionService.createMessage("error","Vui lòng điền đầy đủ thông tin đăng nhập");this.authService.handleLoginEndUser(n.email,n.password).then(n=>{0==n.vcode&&(this.functionService.createMessage("success","Đăng nhập thành công"),e.objects.forEach(e=>{"object_input_email"!==e.type&&"object_input_password"!==e.type||(e.value="")}))})}}handleLogout(){this.authService.handleLogoutEndUser().then(e=>{this.functionService.createMessage("success","Đẵng xuất thành công!"),this.router.navigate([`${this.webBuilderService.projectWorking._id}`,"preview-web"])})}handleRegister(){const e=this.webBuilderService.findItemById(this.data.id_object||this.data.id_block);if(e){const n={name:"",email:"",phone:"",password:""};if(e.objects.forEach(e=>{switch(e.type){case"object_input_name":n.name=e.value;break;case"object_input_email":n.email=e.value;break;case"object_input_phone":n.phone=e.value;break;case"object_input_password":n.password=e.value}}),!n.name)return void this.functionService.createMessage("error","Vui lòng nhập tên đăng ký!");if(!n.email)return void this.functionService.createMessage("error","Vui lòng nhập Email!");if(!n.password)return void this.functionService.createMessage("error","Vui lòng nhập mật khẩu!");this.authService.handleRegisterEndUser(n.name,n.email,n.phone,n.password).then(n=>{0==n.vcode&&(this.functionService.createMessage("success","Đăng ký thành công"),e.objects.forEach(e=>{"object_input_name"!==e.type&&"object_input_email"!==e.type&&"object_input_phone"!==e.type&&"object_input_password"!==e.type||(e.value="")}))})}}handleOpen(){this.navigate(),"modal"==this.config.dialog.type?this.openModal(this.findBlock):"drawer"==this.config.dialog.type?this.openDrawer():"dialog"==this.config.dialog.type&&"click"==this.config.dialog.trigger&&(this.isOpenDialog=!this.isOpenDialog)}openModal(e){this.modalRef=this.modal.create({nzContent:kn,nzWidth:"fit-content",nzFooter:null,nzClosable:!1,nzMaskClosable:this.config.dialog.dismissableMask,nzData:{data:e,device:this.device,class:e[this.device+"_class"],config:e[this.device+"_config"],animation:e[this.device+"_animation"],type:this.type,product:this.product},nzWrapClassName:"block-dialog"}),this.modalRef.afterClose.subscribe(e=>{})}closeModal(){this.modalRef?.close()}openDrawer(){const e=document.querySelector(`.${this.device}`);e&&this.drawerService.open({data:{data:this.findBlock,device:this.device,type:this.type,class:this.findBlock[this.device+"_class"],config:this.findBlock[this.device+"_config"],animation:this.findBlock[this.device+"_animation"]},left:e.getBoundingClientRect().left,top:e.getBoundingClientRect().top,deviceHeight:e.offsetHeight*this.webBuilderService.zoom,deviceWidth:e.offsetWidth*this.webBuilderService.zoom,direction:this.config.dialog.position,dataButton:this.data})}navigate(){if("design"==this.type)return;const{projectWorking:e}=this.webBuilderService,{link:n,type:t,click_type:i,id_block:o,scroll_distance:a}="object_button_repeat"==this.data.type?this.product[this.data.code]?.router:this.config.router;"none"!=t&&("url"==t?window.open(this.config.url,"_blank"):t.includes("link")?this.product?"preview"===this.type?this.router.navigate([`${e._id}/preview-web`,...n.replace(/^\/+/,"").split("/"),this.product.link]):this.router.navigate(["",...n.replace(/^\/+/,"").split("/"),this.product.link]):"preview"===this.type?(this.router.navigate([`${e._id}/preview-web`,...n.replace(/^\/+/,"").split("/")]),"scroll_to_top"==i&&window.scrollTo({top:0,behavior:"smooth"}),"scroll_to_block"==i&&this.scrollToBlockWhenAvailable(o,a||0)):this.router.navigate(["",...n.replace(/^\/+/,"").split("/")]):"mailto:"!=t&&"tel:"!=t||(window.location.href=`${t}${n}`))}scrollToBlockWhenAvailable(e,n=0){let t;const i=setInterval(()=>{const o=document.getElementById(e),a=document.querySelector(".scrollbar");if(o){const e=(o.getBoundingClientRect().top-n)/this.webBuilderService.zoom+a.scrollTop;a.scrollTo({top:e,behavior:"smooth",block:"start"}),clearInterval(i),clearTimeout(t)}},100);t=setTimeout(()=>{clearInterval(i)},500)}positionModal(){return"left"==this.config.dialog.position?{...this.class["wb-dialog-hover"],left:"0px"}:"right"==this.config.dialog.position?{...this.class["wb-dialog-hover"],right:"0px"}:"center"==this.config.dialog.position?{...this.class["wb-dialog-hover"],left:"50%",transform:"translateX(-50%)"}:{...this.class["wb-dialog-hover"],left:"0px"}}conditionDisplay(){return"design"==this.type||"admin"==this.type||("object_button_delete_address"==this.data.type?!this.product.is_default:"object_button_before_login"==this.data.type?!this.authService.checkAuthEndUser():!["object_button_after_login","object_button_logout"].includes(this.data.type)||this.authService.checkAuthEndUser())}onCloseDialog(){this.webBuilderService.notifyChange({name:"close-dialog"})}handleAddToCart(){!this.data[this.device+"_config"].need_to_login||this.authService.checkAuthEndUser()?this.cart.addItem(this.product).then(()=>{this.functionService.createMessage("success","Thêm sản phẩm vào giỏ hàng thành công!")}):this.functionService.createMessage("error","Vui lòng đăng nhập để thêm sản phẩm vào giỏ hàng")}handleAddAddress(){const e=this.webBuilderService.findItemById(this.data.id_object||this.data.id_block);if(e){const n={name:"",phone:"",address:"",country:"Vietnam",province:{name:"",code:null},district:{name:"",code:null},ward:{name:"",code:null},is_default:!1};if(e.objects.forEach(e=>{switch(e.type){case"object_input_name":n.name=e.value;break;case"object_input_phone":n.phone=e.value;break;case"object_input_address":n.address=e.value;break;case"object_select_country":n.country=e.value;break;case"object_select_province_district_ward":n.province=e.province,n.district=e.district,n.ward=e.ward;break;case"object_button_set_default_address":n.is_default=e.value}}),!n.name||!n.phone)return void this.functionService.createMessage("error","Vui lòng điền đầy đủ thông tin đăng ký");if(!("Vietnam"!=n.country||n.province&&n.district&&n.ward&&n.address))return void this.functionService.createMessage("error","Vui lòng điền đầy đủ thông tin địa chỉ");0==this.authService.getEndUser().addresses.length&&(n.is_default=!0),this.webBuilderService.addAddress({...n}).then(n=>{0==n.vcode&&(this.functionService.createMessage("success","Thêm địa chỉ thành công!"),n.data.is_default&&this.authService.getEndUser().addresses.forEach(e=>{e.is_default&&e._id!==n.data._id&&(e.is_default=!1)}),this.authService.getEndUser().addresses=[...this.authService.getEndUser().addresses,n.data],this.webBuilderService.notifyChange({name:"close-dialog"}),e.objects.forEach(e=>{["object_input_name","object_input_phone","object_select_country","object_input_address","object_button_set_default_address"].includes(e.type)&&(e.value=""),"object_select_province_district_ward"===e.type&&(e.province={name:"",code:null},e.district={name:"",code:null},e.ward={name:"",code:null})}))})}}handleDeleteAddress(){this.modal.confirm({nzTitle:"Bạn có chắc chắn muốn xóa địa chỉ này?",nzOkText:"Xác nhận",nzOkType:"primary",nzOkDanger:!0,nzOnOk:()=>{this.webBuilderService.deleteAddress(this.product._id).then(e=>{this.authService.getEndUser().addresses=this.authService.getEndUser().addresses.filter(e=>e._id!==this.product._id),this.functionService.createMessage("success","Xóa địa chỉ thành công!")})},nzCancelText:"Hủy"})}handleUpdateAddress(){const e=this.webBuilderService.findItemById(this.data.id_object||this.data.id_block);if(e){const n={name:"",phone:"",address:"",country:"Vietnam",province:{name:"",code:null},district:{name:"",code:null},ward:{name:"",code:null},is_default:!1};if(e.objects.forEach(e=>{switch(e.type){case"object_input_name":n.name=e.value;break;case"object_input_phone":n.phone=e.value;break;case"object_input_address":n.address=e.value;break;case"object_select_country":n.country=e.value;break;case"object_select_province_district_ward":n.province=e.province,n.district=e.district,n.ward=e.ward;break;case"object_button_set_default_address":n.is_default=e.value}}),!n.name||!n.phone)return void this.functionService.createMessage("error","Vui lòng điền đầy đủ thông tin đăng ký");if(!("Vietnam"!=n.country||n.province&&n.district&&n.ward&&n.address))return void this.functionService.createMessage("error","Vui lòng điền đầy đủ thông tin địa chỉ");this.webBuilderService.updateAddress(this.product._id,{...n}).then(t=>{0==t.vcode&&(this.functionService.createMessage("success","Cập nhật địa chỉ thành công!"),n.is_default&&this.authService.getEndUser().addresses.forEach(e=>{e.is_default&&e._id!==this.product._id&&(e.is_default=!1)}),this.authService.getEndUser().addresses=this.authService.getEndUser().addresses.map(e=>e._id===this.product._id?{_id:this.product._id,...n}:e),this.webBuilderService.notifyChange({name:"close-dialog"}),e.objects.forEach(e=>{["object_input_name","object_input_phone","object_select_country","object_input_address","object_button_set_default_address"].includes(e.type)&&(e.value=""),"object_select_province_district_ward"===e.type&&(e.province={name:"",code:null},e.district={name:"",code:null},e.ward={name:"",code:null})}))})}}handleDeleteCartItem(){this.modal.confirm({nzTitle:`Bạn có chắc chắn muốn xóa '${this.product.name[this.webBuilderService.projectWorking.language.default]}' không?`,nzOkText:"Xác nhận",nzOkType:"primary",nzOkDanger:!0,nzOnOk:()=>Promise.all([this.cart.removeItem(this.product.id_variation)]).then(()=>{this.functionService.createMessage("success","Xóa sản phẩm thành công!")}),nzCancelText:"Hủy"})}handleScrollToTop(){const e=document.querySelector(".scrollbar");e?.scrollTo({top:0,behavior:"smooth"})}getContent(){return"design"==this.type?this.config.content[this.webBuilderService.projectWorking.language.default]:"object_button_repeat"==this.data.type?this.product?.[this.data?.code]?.content?.[this.webBuilderService.projectWorking.language.default]||this.config.content[this.webBuilderService.projectWorking.language.default]:"object_button_total_quantity_cart"==this.data.type?this.cart.cart().item_count.toString()||"0":this.config.content[this.webBuilderService.projectWorking.language.default]}getIcon(){return"object_button_repeat"==this.data.type&&this.product?.[this.data?.code]?.icon||this.config.icon}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Dn,deps:[{token:P.Router},{token:xn},{token:Sn},{token:On},{token:t.ElementRef},{token:O.NzModalService},{token:O.NzModalRef,optional:!0},{token:In},{token:Tn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Dn,isStandalone:!0,selector:"wb-button",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},viewQueries:[{propertyName:"btnModalPopup",first:!0,predicate:["btnModalPopup"],descendants:!0}],usesOnChanges:!0,ngImport:t,template:'@if (conditionDisplay()) {\n \x3c!-- dùng thẻ a để bot đọc DOM -> tăng SEO --\x3e\n \x3c!-- kéo thả thẻ a bị \'dính\', draggable="false" khắc phục điều đó --\x3e\n <a\n [id]="data._id"\n class="button"\n [ngStyle]="class[\'button\']"\n [style]="animation[\'button\']"\n (click)="onClick($event)"\n [href]="\n ([\'mailto:\', \'tel:\'].includes(config.router?.type) ? config.router.type : \'\') +\n config.router?.link\n "\n draggable="false"\n >\n @if (getContent()) {\n <span class="button__content" [ngStyle]="class[\'button__content\']">\n {{ getContent() }}\n </span>\n }\n @if (getIcon().is_icon) {\n <nz-icon\n [nzType]="getIcon().icon_name"\n [ngStyle]="class[\'button__icon\']"\n class="button__icon"\n nzTheme="outline"\n />\n }\n </a>\n}\n\n@if (findBlock && config.dialog?.type != \'drawer\' && config.dialog?.type != \'modal\') {\n \x3c!-- đặt wb-dialog-hover và wb-dialog-click vì khi chọn click thì hover vào ko xuất hiện --\x3e\n <div\n #btnModalPopup\n [ngClass]="{\n \'wb-dialog-hover\': config.dialog?.trigger == \'hover\' && config.dialog?.type == \'dialog\',\n \'wb-dialog-click\': config.dialog?.trigger == \'click\' && config.dialog?.type == \'dialog\',\n open: isOpenDialog || config.dialog?.open\n }"\n [ngStyle]="positionModal()"\n [style.transform]="`translateX(${config.dialog.translate_x || 0}px)`"\n >\n <wb-block-blank\n [data]="findBlock"\n [device]="device"\n [class]="findBlock[device + \'_class\']"\n [config]="findBlock[device + \'_config\']"\n [animation]="findBlock[device + \'_animation\']"\n [type]="type"\n [product]="product"\n >\n </wb-block-blank>\n \x3c!-- overlay che lại khi ở design/admin --\x3e\n @if (type == \'design\' || type == \'admin\') {\n <div\n class="absolute top-0 left-0 w-full h-full"\n style="z-index: 999999999"\n (mousedown)="$event.stopPropagation()"\n ></div>\n }\n </div>\n}\n',styles:[".button{background-color:var(--bg-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);width:var(--width);height:var(--height);text-align:var(--text-align);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-image:var(--border-image);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);flex-direction:var(--flex-direction);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform);cursor:var(--cursor);box-shadow:var(--box-shadow);animation-name:wb-ripple;animation-duration:var(--animation-duration);animation-delay:var(--animation-delay);animation-iteration-count:var(--animation-iteration-count);animation-direction:var(--animation-direction);animation-timing-function:var(--animation-timing-function);animation-fill-mode:var(--animation-fill-mode)}.button__content{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);word-break:break-word;white-space:pre-wrap;-webkit-line-clamp:var(--webkit-line-clamp);text-overflow:var(--text-overflow);-webkit-box-orient:var(--webkit-box-orient);overflow:var(--overflow)}.button__icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.button:hover{background-color:var(--h-bg-color, var(--bg-color));background-image:var(--h-bg-image, var(--bg-image));transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform)}.button:hover .button__content{color:var(--h-color-content, var(--color))}.button:hover .button__icon{color:var(--h-color-icon, var(--color))}:host:hover .wb-dialog-hover{display:block}.wb-dialog-click,.wb-dialog-hover{top:var(--top);position:var(--position);display:var(--display)}.open{display:block}@keyframes wb-ripple{0%{-webkit-box-shadow:0 0 0 0 var(--a-bg-color),0 0 0 5px var(--a-bg-color),0 0 0 10px var(--a-bg-color);box-shadow:0 0 0 0 var(--a-bg-color),0 0 0 5px var(--a-bg-color),0 0 0 10px var(--a-bg-color)}to{-webkit-box-shadow:0 0 0 10px var(--a-bg-color),0 0 0 10px var(--a-bg-color),0 0 0 20px rgba(29,192,113,0);box-shadow:0 0 0 10px var(--a-bg-color),0 0 0 10px var(--a-bg-color),0 0 0 20px #1dc07100}}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"ngmodule",type:B},{kind:"component",type:kn,selector:"wb-block-blank",inputs:["data","device","class","config","animation","type","product"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"ngmodule",type:T}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Dn,decorators:[{type:l,args:[{selector:"wb-button",imports:[k,B,kn,j,T],template:'@if (conditionDisplay()) {\n \x3c!-- dùng thẻ a để bot đọc DOM -> tăng SEO --\x3e\n \x3c!-- kéo thả thẻ a bị \'dính\', draggable="false" khắc phục điều đó --\x3e\n <a\n [id]="data._id"\n class="button"\n [ngStyle]="class[\'button\']"\n [style]="animation[\'button\']"\n (click)="onClick($event)"\n [href]="\n ([\'mailto:\', \'tel:\'].includes(config.router?.type) ? config.router.type : \'\') +\n config.router?.link\n "\n draggable="false"\n >\n @if (getContent()) {\n <span class="button__content" [ngStyle]="class[\'button__content\']">\n {{ getContent() }}\n </span>\n }\n @if (getIcon().is_icon) {\n <nz-icon\n [nzType]="getIcon().icon_name"\n [ngStyle]="class[\'button__icon\']"\n class="button__icon"\n nzTheme="outline"\n />\n }\n </a>\n}\n\n@if (findBlock && config.dialog?.type != \'drawer\' && config.dialog?.type != \'modal\') {\n \x3c!-- đặt wb-dialog-hover và wb-dialog-click vì khi chọn click thì hover vào ko xuất hiện --\x3e\n <div\n #btnModalPopup\n [ngClass]="{\n \'wb-dialog-hover\': config.dialog?.trigger == \'hover\' && config.dialog?.type == \'dialog\',\n \'wb-dialog-click\': config.dialog?.trigger == \'click\' && config.dialog?.type == \'dialog\',\n open: isOpenDialog || config.dialog?.open\n }"\n [ngStyle]="positionModal()"\n [style.transform]="`translateX(${config.dialog.translate_x || 0}px)`"\n >\n <wb-block-blank\n [data]="findBlock"\n [device]="device"\n [class]="findBlock[device + \'_class\']"\n [config]="findBlock[device + \'_config\']"\n [animation]="findBlock[device + \'_animation\']"\n [type]="type"\n [product]="product"\n >\n </wb-block-blank>\n \x3c!-- overlay che lại khi ở design/admin --\x3e\n @if (type == \'design\' || type == \'admin\') {\n <div\n class="absolute top-0 left-0 w-full h-full"\n style="z-index: 999999999"\n (mousedown)="$event.stopPropagation()"\n ></div>\n }\n </div>\n}\n',styles:[".button{background-color:var(--bg-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);width:var(--width);height:var(--height);text-align:var(--text-align);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-image:var(--border-image);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);flex-direction:var(--flex-direction);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform);cursor:var(--cursor);box-shadow:var(--box-shadow);animation-name:wb-ripple;animation-duration:var(--animation-duration);animation-delay:var(--animation-delay);animation-iteration-count:var(--animation-iteration-count);animation-direction:var(--animation-direction);animation-timing-function:var(--animation-timing-function);animation-fill-mode:var(--animation-fill-mode)}.button__content{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);word-break:break-word;white-space:pre-wrap;-webkit-line-clamp:var(--webkit-line-clamp);text-overflow:var(--text-overflow);-webkit-box-orient:var(--webkit-box-orient);overflow:var(--overflow)}.button__icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.button:hover{background-color:var(--h-bg-color, var(--bg-color));background-image:var(--h-bg-image, var(--bg-image));transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform)}.button:hover .button__content{color:var(--h-color-content, var(--color))}.button:hover .button__icon{color:var(--h-color-icon, var(--color))}:host:hover .wb-dialog-hover{display:block}.wb-dialog-click,.wb-dialog-hover{top:var(--top);position:var(--position);display:var(--display)}.open{display:block}@keyframes wb-ripple{0%{-webkit-box-shadow:0 0 0 0 var(--a-bg-color),0 0 0 5px var(--a-bg-color),0 0 0 10px var(--a-bg-color);box-shadow:0 0 0 0 var(--a-bg-color),0 0 0 5px var(--a-bg-color),0 0 0 10px var(--a-bg-color)}to{-webkit-box-shadow:0 0 0 10px var(--a-bg-color),0 0 0 10px var(--a-bg-color),0 0 0 20px rgba(29,192,113,0);box-shadow:0 0 0 10px var(--a-bg-color),0 0 0 10px var(--a-bg-color),0 0 0 20px #1dc07100}}\n"]}]}],ctorParameters:()=>[{type:P.Router},{type:xn},{type:Sn},{type:On},{type:t.ElementRef},{type:O.NzModalService},{type:O.NzModalRef,decorators:[{type:c}]},{type:In},{type:Tn}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}],btnModalPopup:[{type:p,args:["btnModalPopup"]}]}});class jn{webBuilderService;map;el;data;device;class;config;animation;type;product;isClone;rectTop=0;height=0;bottomParent=0;constructor(e,n,t){this.webBuilderService=e,this.map=n,this.el=t}ngOnInit(){}ngAfterViewInit(){if("design"!=this.type&&this.config.sticky.type&&"none"!=this.config.sticky.type){const e=document.querySelector(".scrollbar");e&&e.addEventListener("scroll",this.handleScroll);const n=this.el.nativeElement.parentElement;if(!n)return;this.rectTop=n.getBoundingClientRect().top,this.height=+this.class[this.data.resize_field][this.webBuilderService.resizeGroup[this.data.resize_group].height].replace("px",""),this.bottomParent=n.parentElement.getBoundingClientRect().bottom}}ngOnDestroy(){const e=document.querySelector(".scrollbar");e&&e.removeEventListener("scroll",this.handleScroll)}handleScroll=e=>{const n=e.target.scrollTop,t=this.el.nativeElement.parentElement;if(!t)return;const i=this.data[this.device+"_position_"+(this.data.id_block||this.data.id_object)];if(!i)return;const o=this.config.sticky.top,a=this.rectTop-o;n>a&&"absolute"===t.style.position?(t.style.position="fixed",t.style.top=o+"px"):n<=a&&"fixed"===t.style.position&&(t.style.position="absolute",t.style.top=i.top+"px"),"sticky"==this.config.sticky.type&&n>this.bottomParent-this.height-o&&(t.style.position="absolute",t.style.top=(t.parentElement?.offsetHeight??0)-this.height+"px")};static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:jn,deps:[{token:xn},{token:tt},{token:t.ElementRef}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:jn,isStandalone:!0,selector:"wb-frame-blank",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",product:"product",isClone:"isClone"},ngImport:t,template:"<div [id]=\"data._id\" class=\"frame-blank\" [ngStyle]=\"class['frame-blank']\" #dragBoundary>\n @for (object of data.objects; track object._id) {\n @if (!object[device + '_hidden']) {\n <div\n class=\"w-fit inline-block\"\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [boundaryEle]=\"dragBoundary\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [top]=\"object[device + '_position_' + data._id].top\"\n [left]=\"object[device + '_position_' + data._id].left\"\n [ngStyle]=\"{\n 'pointer-events':\n ['design', 'admin'].includes(type) && (isClone || data.is_clone) ? 'none' : 'auto'\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n isClone:\n ['design', 'admin'].includes(type) && (isClone || data.is_clone) ? true : false,\n product: product\n }\n \"\n >\n </ng-container>\n </div>\n }\n }\n\n \x3c!-- Vùng kéo nhiều object --\x3e\n @if (\n webBuilderService.arrayChoosing[0]?.id_object == data._id &&\n webBuilderService.arrayChoosing.length > 1\n ) {\n <div\n wbVirtualSelected\n [boundaryEle]=\"dragBoundary\"\n id=\"choosing-box\"\n [ngStyle]=\"{\n position: 'absolute',\n border: '2px solid red',\n cursor: 'pointer',\n 'z-index': 9999999,\n 'pointer-events': 'none',\n left: webBuilderService.infoVirtualSelected.left + 'px',\n top: webBuilderService.infoVirtualSelected.top + 'px',\n width: webBuilderService.infoVirtualSelected.width + 'px',\n height: webBuilderService.infoVirtualSelected.height + 'px'\n }\"\n ></div>\n }\n</div>\n",styles:[".frame-blank{background-color:var(--bg-color);width:var(--width);min-height:var(--min-height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);box-shadow:var(--box-shadow);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);backdrop-filter:var(--backdrop-filter);-webkit-backdrop-filter:var(--backdrop-filter)}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"component",type:Cn,selector:"[wbdragdrop]",inputs:["mode","boundaryEle","parent","data","device","top","left","type"]},{kind:"component",type:wn,selector:"[wbVirtualSelected]",inputs:["boundaryEle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:jn,decorators:[{type:l,args:[{selector:"wb-frame-blank",imports:[k,Cn,wn],template:"<div [id]=\"data._id\" class=\"frame-blank\" [ngStyle]=\"class['frame-blank']\" #dragBoundary>\n @for (object of data.objects; track object._id) {\n @if (!object[device + '_hidden']) {\n <div\n class=\"w-fit inline-block\"\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [boundaryEle]=\"dragBoundary\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [top]=\"object[device + '_position_' + data._id].top\"\n [left]=\"object[device + '_position_' + data._id].left\"\n [ngStyle]=\"{\n 'pointer-events':\n ['design', 'admin'].includes(type) && (isClone || data.is_clone) ? 'none' : 'auto'\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n isClone:\n ['design', 'admin'].includes(type) && (isClone || data.is_clone) ? true : false,\n product: product\n }\n \"\n >\n </ng-container>\n </div>\n }\n }\n\n \x3c!-- Vùng kéo nhiều object --\x3e\n @if (\n webBuilderService.arrayChoosing[0]?.id_object == data._id &&\n webBuilderService.arrayChoosing.length > 1\n ) {\n <div\n wbVirtualSelected\n [boundaryEle]=\"dragBoundary\"\n id=\"choosing-box\"\n [ngStyle]=\"{\n position: 'absolute',\n border: '2px solid red',\n cursor: 'pointer',\n 'z-index': 9999999,\n 'pointer-events': 'none',\n left: webBuilderService.infoVirtualSelected.left + 'px',\n top: webBuilderService.infoVirtualSelected.top + 'px',\n width: webBuilderService.infoVirtualSelected.width + 'px',\n height: webBuilderService.infoVirtualSelected.height + 'px'\n }\"\n ></div>\n }\n</div>\n",styles:[".frame-blank{background-color:var(--bg-color);width:var(--width);min-height:var(--min-height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);box-shadow:var(--box-shadow);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);backdrop-filter:var(--backdrop-filter);-webkit-backdrop-filter:var(--backdrop-filter)}\n"]}]}],ctorParameters:()=>[{type:xn},{type:tt},{type:t.ElementRef}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],product:[{type:s}],isClone:[{type:s}]}});class Pn{webBuilderService;router;authService;cart;data;device;class;config;animation;type;isClone;product;constructor(e,n,t,i){this.webBuilderService=e,this.router=n,this.authService=t,this.cart=i}ngOnInit(){}onClick(e){if(e.preventDefault(),"design"==this.type)return;const{projectWorking:n}=this.webBuilderService,{link:t,type:i,click_type:o,id_block:a,scroll_distance:r}="object_text_repeat"==this.data.type?this.product[this.data.code]?.router:this.config.router;"none"!=i&&("url"==i?window.open(this.config.url,"_blank"):i.includes("link")?this.product?"preview"===this.type?this.router.navigate([`${n._id}/preview-web`,...t.replace(/^\/+/,"").split("/"),this.product.link]):this.router.navigate(["",...t.replace(/^\/+/,"").split("/"),this.product.link]):"preview"===this.type?(this.router.navigate([`${n._id}/preview-web`,...t.replace(/^\/+/,"").split("/")]),"scroll_to_top"==o&&window.scrollTo({top:0,behavior:"smooth"}),"scroll_to_block"==o&&this.scrollToBlockWhenAvailable(a,r||0)):this.router.navigate(["",...t.replace(/^\/+/,"").split("/")]):"mailto:"!=i&&"tel:"!=i||(window.location.href=`${i}${t}`))}getContent(){const e=this.config.content[this.webBuilderService.projectWorking.language.default];if("design"==this.type||"admin"==this.type){if("object_news_publish"==this.data.type){const n=this.product?.created_at||e,t=this.config.format_date||"DD/MM/YYYY";return n?V(n).format(t):e}return this.config.content[this.webBuilderService.projectWorking.language.default]}switch(this.data.type){case"object_text":return e;case"object_news_title":return this.product?.title?.[this.webBuilderService.projectWorking.language.default]||e;case"object_news_author":return this.product?.author||e;case"object_news_publish":{const n=this.product?.created_at||e,t=this.config.format_date||"DD/MM/YYYY";return n?V(n).format(t):e}case"object_text_default_address":return this.config.content[this.webBuilderService.projectWorking.language.default]||e;case"object_product_name":case"object_category_name":return this.product?.name?.[this.webBuilderService.projectWorking.language.default]||e;case"object_product_brand":return this.product?.brand;case"object_text_name":return this.authService.getEndUser()?.name;case"object_text_email":return this.authService.getEndUser()?.email;case"object_text_phone":return this.authService.getEndUser()?.phone;case"object_text_name_address":return this.product.name;case"object_text_phone_address":return this.product.phone;case"object_product_total_price":return(this.product.quantity*this.product.retail_price).toLocaleString("vi-VN",{style:"currency",currency:"VND",maximumFractionDigits:0});case"object_total_price_cart":return this.cart.cart().total_price.toLocaleString("vi-VN",{style:"currency",currency:"VND",maximumFractionDigits:0});case"object_text_province_district_ward":return this.product.address+", "+this.product.province.name+", "+this.product.district.name+", "+this.product.ward.name;case"object_product_price":return this.product?.retail_price&&(this.product?.retail_price).toLocaleString("vi-VN",{style:"currency",currency:"VND",maximumFractionDigits:0});case"object_product_price_original":return 0!=this.product?.original_price?this.product?.original_price?.toLocaleString("vi-VN",{style:"currency",currency:"VND",maximumFractionDigits:0}):null;case"object_text_repeat":return this.product[this.data.code]?.content[this.webBuilderService.projectWorking.language.default]}}conditionDisplay(){return"design"==this.type||"admin"==this.type||("object_text_default_address"!=this.data.type||this.product.is_default)}scrollToBlockWhenAvailable(e,n=0){let t;const i=setInterval(()=>{const o=document.getElementById(e),a=document.querySelector(".scrollbar");if(o){const e=(o.getBoundingClientRect().top-n)/this.webBuilderService.zoom+a.scrollTop;a.scrollTo({top:e,behavior:"smooth",block:"start"}),clearInterval(i),clearTimeout(t)}},100);t=setTimeout(()=>{clearInterval(i)},500)}getIcon(){return"object_button_repeat"==this.data.type&&this.product[this.data._id]?.icon||this.config.icon}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Pn,deps:[{token:xn},{token:P.Router},{token:Sn},{token:Tn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Pn,isStandalone:!0,selector:"wb-text",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:'@if (conditionDisplay()) {\n \x3c!-- dùng thẻ a để bot đọc DOM -> tăng SEO --\x3e\n \x3c!-- kéo thả thẻ a bị \'dính\', draggable="false" khắc phục điều đó --\x3e\n <a\n [id]="data._id"\n (click)="onClick($event)"\n class="text"\n [ngStyle]="class[\'text\']"\n [style]="animation[\'text\']"\n [href]="\n ([\'mailto:\', \'tel:\'].includes(config.router.type) ? config.router.type : \'\') +\n config.router.link\n "\n draggable="false"\n nz-tooltip\n [nzTooltipTitle]="config.tool_tip?.value?.[webBuilderService.projectWorking.language.default]"\n [nzTooltipPlacement]="config.tool_tip?.position"\n >\n @if (getContent()) {\n @switch (config.tag) {\n @case (\'h1\') {\n <h1 class="text__content" [ngStyle]="class[\'text__content\']">{{ getContent() }}</h1>\n }\n @case (\'h2\') {\n <h2 class="text__content" [ngStyle]="class[\'text__content\']">{{ getContent() }}</h2>\n }\n @case (\'h3\') {\n <h3 class="text__content" [ngStyle]="class[\'text__content\']">{{ getContent() }}</h3>\n }\n @case (\'h4\') {\n <h4 class="text__content" [ngStyle]="class[\'text__content\']">{{ getContent() }}</h4>\n }\n @case (\'h5\') {\n <h5 class="text__content" [ngStyle]="class[\'text__content\']">{{ getContent() }}</h5>\n }\n @case (\'p\') {\n <p class="text__content" [ngStyle]="class[\'text__content\']">{{ getContent() }}</p>\n }\n @default {\n <p class="text__content" [ngStyle]="class[\'text__content\']">{{ getContent() }}</p>\n }\n }\n }\n\n @if (getIcon().is_icon) {\n <nz-icon\n [nzType]="getIcon().icon_name"\n [ngStyle]="class[\'text__icon\']"\n class="text__icon"\n nzTheme="outline"\n />\n }\n </a>\n}\n',styles:[".text{background-color:var(--bg-color);width:var(--width);min-height:var(--min-height);text-align:var(--text-align);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);flex-direction:var(--flex-direction);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform);cursor:var(--cursor);box-shadow:var(--box-shadow);animation-name:wb-ripple;animation-duration:var(--animation-duration);animation-delay:var(--animation-delay);animation-iteration-count:var(--animation-iteration-count);animation-direction:var(--animation-direction);animation-timing-function:var(--animation-timing-function);animation-fill-mode:var(--animation-fill-mode)}.text__content{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);text-align:var(--text-align);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left, 0);margin-right:var(--margin-right, 0);margin-bottom:var(--margin-bottom, 0);margin-top:var(--margin-top, 0);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);word-break:break-word;white-space:pre-wrap;-webkit-line-clamp:var(--webkit-line-clamp);text-overflow:var(--text-overflow);-webkit-box-orient:var(--webkit-box-orient);overflow:var(--overflow)}.text__icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.text:hover{transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform)}.text:hover .text__content{color:var(--h-color-content, var(--color))}@keyframes wb-ripple{0%{-webkit-box-shadow:0 0 0 0 var(--a-bg-color),0 0 0 5px var(--a-bg-color),0 0 0 10px var(--a-bg-color);box-shadow:0 0 0 0 var(--a-bg-color),0 0 0 5px var(--a-bg-color),0 0 0 10px var(--a-bg-color)}to{-webkit-box-shadow:0 0 0 10px var(--a-bg-color),0 0 0 10px var(--a-bg-color),0 0 0 20px rgba(29,192,113,0);box-shadow:0 0 0 10px var(--a-bg-color),0 0 0 10px var(--a-bg-color),0 0 0 20px #1dc07100}}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"ngmodule",type:W},{kind:"directive",type:$.NzTooltipDirective,selector:"[nz-tooltip]",inputs:["nzTooltipTitle","nzTooltipTitleContext","nz-tooltip","nzTooltipTrigger","nzTooltipPlacement","nzTooltipOrigin","nzTooltipVisible","nzTooltipMouseEnterDelay","nzTooltipMouseLeaveDelay","nzTooltipOverlayClassName","nzTooltipOverlayStyle","nzTooltipArrowPointAtCenter","cdkConnectedOverlayPush","nzTooltipColor"],outputs:["nzTooltipVisibleChange"],exportAs:["nzTooltip"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Pn,decorators:[{type:l,args:[{selector:"wb-text",imports:[k,j,W],template:'@if (conditionDisplay()) {\n \x3c!-- dùng thẻ a để bot đọc DOM -> tăng SEO --\x3e\n \x3c!-- kéo thả thẻ a bị \'dính\', draggable="false" khắc phục điều đó --\x3e\n <a\n [id]="data._id"\n (click)="onClick($event)"\n class="text"\n [ngStyle]="class[\'text\']"\n [style]="animation[\'text\']"\n [href]="\n ([\'mailto:\', \'tel:\'].includes(config.router.type) ? config.router.type : \'\') +\n config.router.link\n "\n draggable="false"\n nz-tooltip\n [nzTooltipTitle]="config.tool_tip?.value?.[webBuilderService.projectWorking.language.default]"\n [nzTooltipPlacement]="config.tool_tip?.position"\n >\n @if (getContent()) {\n @switch (config.tag) {\n @case (\'h1\') {\n <h1 class="text__content" [ngStyle]="class[\'text__content\']">{{ getContent() }}</h1>\n }\n @case (\'h2\') {\n <h2 class="text__content" [ngStyle]="class[\'text__content\']">{{ getContent() }}</h2>\n }\n @case (\'h3\') {\n <h3 class="text__content" [ngStyle]="class[\'text__content\']">{{ getContent() }}</h3>\n }\n @case (\'h4\') {\n <h4 class="text__content" [ngStyle]="class[\'text__content\']">{{ getContent() }}</h4>\n }\n @case (\'h5\') {\n <h5 class="text__content" [ngStyle]="class[\'text__content\']">{{ getContent() }}</h5>\n }\n @case (\'p\') {\n <p class="text__content" [ngStyle]="class[\'text__content\']">{{ getContent() }}</p>\n }\n @default {\n <p class="text__content" [ngStyle]="class[\'text__content\']">{{ getContent() }}</p>\n }\n }\n }\n\n @if (getIcon().is_icon) {\n <nz-icon\n [nzType]="getIcon().icon_name"\n [ngStyle]="class[\'text__icon\']"\n class="text__icon"\n nzTheme="outline"\n />\n }\n </a>\n}\n',styles:[".text{background-color:var(--bg-color);width:var(--width);min-height:var(--min-height);text-align:var(--text-align);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);flex-direction:var(--flex-direction);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform);cursor:var(--cursor);box-shadow:var(--box-shadow);animation-name:wb-ripple;animation-duration:var(--animation-duration);animation-delay:var(--animation-delay);animation-iteration-count:var(--animation-iteration-count);animation-direction:var(--animation-direction);animation-timing-function:var(--animation-timing-function);animation-fill-mode:var(--animation-fill-mode)}.text__content{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);text-align:var(--text-align);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left, 0);margin-right:var(--margin-right, 0);margin-bottom:var(--margin-bottom, 0);margin-top:var(--margin-top, 0);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);word-break:break-word;white-space:pre-wrap;-webkit-line-clamp:var(--webkit-line-clamp);text-overflow:var(--text-overflow);-webkit-box-orient:var(--webkit-box-orient);overflow:var(--overflow)}.text__icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.text:hover{transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform)}.text:hover .text__content{color:var(--h-color-content, var(--color))}@keyframes wb-ripple{0%{-webkit-box-shadow:0 0 0 0 var(--a-bg-color),0 0 0 5px var(--a-bg-color),0 0 0 10px var(--a-bg-color);box-shadow:0 0 0 0 var(--a-bg-color),0 0 0 5px var(--a-bg-color),0 0 0 10px var(--a-bg-color)}to{-webkit-box-shadow:0 0 0 10px var(--a-bg-color),0 0 0 10px var(--a-bg-color),0 0 0 20px rgba(29,192,113,0);box-shadow:0 0 0 10px var(--a-bg-color),0 0 0 10px var(--a-bg-color),0 0 0 20px #1dc07100}}\n"]}]}],ctorParameters:()=>[{type:xn},{type:P.Router},{type:Sn},{type:Tn}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class An{router;webBuilderService;data;device;class;config;animation;type;isClone;product;enableZoom=!1;mainImgRef;lensRef;resultRef;constructor(e,n){this.router=e,this.webBuilderService=n}ngOnInit(){}move(e){if(e.preventDefault(),"object_product_image"!==this.data.type||!this.config.enable_zoom)return;const n=this.mainImgRef?.nativeElement,t=this.lensRef?.nativeElement,i=this.resultRef?.nativeElement;if(!n||!t||!i)return;const o=i.offsetWidth/t.offsetWidth,a=i.offsetHeight/t.offsetHeight;i.style.backgroundImage=`url('${n.src}')`,i.style.backgroundSize=`${n.width*o}px ${n.height*a}px`;const r=this.getCursorPos(e,n);let s=r.x-t.offsetWidth/2,l=r.y-t.offsetHeight/2;s=Math.max(0,Math.min(s,n.width-t.offsetWidth)),l=Math.max(0,Math.min(l,n.height-t.offsetHeight)),t.style.left=s+"px",t.style.top=l+"px",i.style.backgroundPosition=`-${s*o}px -${l*a}px`}getCursorPos(e,n){const{zoom:t}=this.webBuilderService;e=e||window.event;const i=n.getBoundingClientRect(),o=e instanceof TouchEvent?e.touches[0].pageX:e.pageX,a=e instanceof TouchEvent?e.touches[0].pageY:e.pageY;return{x:(o-i.left-window.pageXOffset)/t,y:(a-i.top-window.pageYOffset)/t}}onClick(e){if(e.preventDefault(),"design"==this.type)return;const{projectWorking:n}=this.webBuilderService,{link:t,type:i,click_type:o,id_block:a,scroll_distance:r}="object_image_repeat"==this.data.type?this.product[this.data.code]?.router:this.config.router;"none"!=i&&("url"==i?window.open(this.config.url,"_blank"):i.includes("link")?this.product?"preview"===this.type?this.router.navigate([`${n._id}/preview-web`,...t.replace(/^\/+/,"").split("/"),this.product.link]):this.router.navigate(["",...t.replace(/^\/+/,"").split("/"),this.product.link]):"preview"===this.type?(this.router.navigate([`${n._id}/preview-web`,...t.replace(/^\/+/,"").split("/")]),"scroll_to_top"==o&&window.scrollTo({top:0,behavior:"smooth"}),"scroll_to_block"==o&&this.scrollToBlockWhenAvailable(a,r||0)):this.router.navigate(["",...t.replace(/^\/+/,"").split("/")]):"mailto:"!=i&&"tel:"!=i||(window.location.href=`${i}${t}`))}scrollToBlockWhenAvailable(e,n=0){let t;const i=setInterval(()=>{const o=document.getElementById(e),a=document.querySelector(".scrollbar");if(o){const e=(o.getBoundingClientRect().top-n)/this.webBuilderService.zoom+a.scrollTop;a.scrollTo({top:e,behavior:"smooth",block:"start"}),clearInterval(i),clearTimeout(t)}},100);t=setTimeout(()=>{clearInterval(i)},500)}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:An,deps:[{token:P.Router},{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:An,isStandalone:!0,selector:"wb-image",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},viewQueries:[{propertyName:"mainImgRef",first:!0,predicate:["mainImg"],descendants:!0},{propertyName:"lensRef",first:!0,predicate:["lens"],descendants:!0},{propertyName:"resultRef",first:!0,predicate:["result"],descendants:!0}],ngImport:t,template:'<a\n [id]="data._id"\n class="image"\n [ngStyle]="class[\'image\']"\n [style]="animation[\'image\']"\n (click)="onClick($event)"\n [href]="\n ([\'mailto:\', \'tel:\'].includes(config.router.type) ? config.router.type : \'\') +\n config.router.link\n "\n draggable="false"\n>\n <img\n #mainImg\n draggable="false"\n class="image__img"\n [ngStyle]="class[\'image__img\']"\n [style]="animation[\'image__img\']"\n [src]="\n product?.imgs?.[product?.index_img] ||\n product?.[data.code]?.img?.src ||\n product?.img ||\n config.img.src\n "\n [alt]="config.img.alt"\n (mouseenter)="data.type == \'object_product_image\' && config.enable_zoom && (enableZoom = true)"\n (mouseleave)="enableZoom = false"\n (mousemove)="move($event)"\n />\n\n <div\n #lens\n (mousemove)="move($event)"\n class="img-zoom-lens"\n [ngStyle]="{ display: enableZoom ? \'block\' : \'none\' }"\n ></div>\n</a>\n\n<div #result class="img-zoom-result" [ngStyle]="{ display: enableZoom ? \'block\' : \'none\' }"></div>\n',styles:[".image{width:var(--width);height:var(--height);display:var(--display);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-style:var(--border-style);border-top-width:var(--border-top-width);border-right-width:var(--border-right-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-color:var(--border-color);border-image:var(--border-image);overflow:hidden;box-shadow:var(--box-shadow, none);cursor:var(--cursor);position:var(--position)}.image__img{width:var(--width);height:var(--height);object-fit:var(--object-fit);object-position:var(--object-position);transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function)}.image:hover,.image:hover .image__img{transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform)}.img-zoom-container{position:relative}.img-zoom-lens{position:absolute;border:1px solid #d4d4d4;width:40px;height:40px;pointer-events:none;z-index:999}.img-zoom-result{border:1px solid #d4d4d4;width:300px;height:300px;position:absolute;top:0;left:100%;background-repeat:no-repeat;background-size:contain;z-index:999}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:An,decorators:[{type:l,args:[{selector:"wb-image",imports:[k],template:'<a\n [id]="data._id"\n class="image"\n [ngStyle]="class[\'image\']"\n [style]="animation[\'image\']"\n (click)="onClick($event)"\n [href]="\n ([\'mailto:\', \'tel:\'].includes(config.router.type) ? config.router.type : \'\') +\n config.router.link\n "\n draggable="false"\n>\n <img\n #mainImg\n draggable="false"\n class="image__img"\n [ngStyle]="class[\'image__img\']"\n [style]="animation[\'image__img\']"\n [src]="\n product?.imgs?.[product?.index_img] ||\n product?.[data.code]?.img?.src ||\n product?.img ||\n config.img.src\n "\n [alt]="config.img.alt"\n (mouseenter)="data.type == \'object_product_image\' && config.enable_zoom && (enableZoom = true)"\n (mouseleave)="enableZoom = false"\n (mousemove)="move($event)"\n />\n\n <div\n #lens\n (mousemove)="move($event)"\n class="img-zoom-lens"\n [ngStyle]="{ display: enableZoom ? \'block\' : \'none\' }"\n ></div>\n</a>\n\n<div #result class="img-zoom-result" [ngStyle]="{ display: enableZoom ? \'block\' : \'none\' }"></div>\n',styles:[".image{width:var(--width);height:var(--height);display:var(--display);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-style:var(--border-style);border-top-width:var(--border-top-width);border-right-width:var(--border-right-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-color:var(--border-color);border-image:var(--border-image);overflow:hidden;box-shadow:var(--box-shadow, none);cursor:var(--cursor);position:var(--position)}.image__img{width:var(--width);height:var(--height);object-fit:var(--object-fit);object-position:var(--object-position);transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function)}.image:hover,.image:hover .image__img{transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform)}.img-zoom-container{position:relative}.img-zoom-lens{position:absolute;border:1px solid #d4d4d4;width:40px;height:40px;pointer-events:none;z-index:999}.img-zoom-result{border:1px solid #d4d4d4;width:300px;height:300px;position:absolute;top:0;left:100%;background-repeat:no-repeat;background-size:contain;z-index:999}\n"]}]}],ctorParameters:()=>[{type:P.Router},{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}],mainImgRef:[{type:p,args:["mainImg"]}],lensRef:[{type:p,args:["lens"]}],resultRef:[{type:p,args:["result"]}]}});class Fn{webBuilderService;router;route;data;device;class;config;animation;type;isClone;product;linkPage;constructor(e,n,t){this.webBuilderService=e,this.router=n,this.route=t}ngOnInit(){this.route.params.subscribe(e=>{this.linkPage=[e.link,e.slug].filter(Boolean).join("/")});const e=n=>{n.forEach(n=>{n.expanded=!1,n.children&&n.children.length>0&&e(n.children)})};this.config&&this.config.data_list&&e(this.config.data_list)}handleChooseItem(e,n,t){e.stopPropagation(),"design"==this.type||"admin"==this.type?this.data.key!=n.key?this.data.key=n.key:this.data.key="":this.onClick(n)}onClick(e){const{projectWorking:n}=this.webBuilderService,{link:t,type:i}=e.router;"none"!=i&&"design"!=this.type&&"admin"!=this.type&&("url"==i?window.open(this.config.url,"_blank"):i.includes("link")&&("preview"===this.type?this.router.navigate([`${n._id}/preview-web`,...t.split("/")]):this.router.navigate(["",...t.split("/")])))}handleOpenMenuMobile(e,n){n.expanded=!n.expanded}checkActive(e){return"design"==this.type?this.data.key==e.key:"none"!=e.router.type&&this.linkPage==e.router.link}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Fn,deps:[{token:xn},{token:P.Router},{token:P.ActivatedRoute}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Fn,isStandalone:!0,selector:"wb-menu-horizontal",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:"<div class=\"menu-horizontal\" [ngStyle]=\"class['menu-horizontal']\">\n @for (item of config.data_list; track item.key) {\n <ng-container\n *ngTemplateOutlet=\"renderMenu; context: { $implicit: item, depth: 0 }\"\n ></ng-container>\n }\n</div>\n\n<ng-template #renderMenu let-item let-depth=\"depth\">\n <a\n [ngClass]=\"{\n '-menu-horizontal__item': depth == 0 && !checkActive(item),\n '+menu-horizontal__item': depth == 0 && checkActive(item),\n '-menu-horizontal__item--child': depth > 0 && !checkActive(item),\n '+menu-horizontal__item--child': depth > 0 && checkActive(item)\n }\"\n [class.hover]=\"data.hover && data.hover == item.key\"\n [ngStyle]=\"\n class[\n (checkActive(item) ? '+' : '-') + 'menu-horizontal__item' + (depth > 0 ? '--child' : '')\n ]\n \"\n [style]=\"animation['-menu-horizontal__item' + (depth > 0 ? '--child' : '')]\"\n (click)=\"handleChooseItem($event, item, depth)\"\n >\n @if (item.icon_before) {\n <nz-icon\n [nzType]=\"item.icon_before\"\n [ngClass]=\"{\n '-menu-horizontal__item-icon-before': depth == 0 && !checkActive(item),\n '+menu-horizontal__item-icon-before': depth == 0 && checkActive(item),\n '-menu-horizontal__item-icon-before--child': depth > 0 && !checkActive(item),\n '+menu-horizontal__item-icon-before--child': depth > 0 && checkActive(item)\n }\"\n [ngStyle]=\"\n class[\n (checkActive(item) ? '+' : '-') +\n 'menu-horizontal__item-icon-before' +\n (depth > 0 ? '--child' : '')\n ]\n \"\n nzTheme=\"outline\"\n />\n }\n <div\n [ngClass]=\"{\n '-menu-horizontal__item-content': depth == 0 && !checkActive(item),\n '+menu-horizontal__item-content': depth == 0 && checkActive(item),\n '-menu-horizontal__item-content--child': depth > 0 && !checkActive(item),\n '+menu-horizontal__item-content--child': depth > 0 && checkActive(item)\n }\"\n [ngStyle]=\"\n class[\n (checkActive(item) ? '+' : '-') +\n 'menu-horizontal__item-content' +\n (depth > 0 ? '--child' : '')\n ]\n \"\n >\n {{ item.label[webBuilderService.projectWorking.language.default] }}\n </div>\n\n @if (item.icon_after) {\n <nz-icon\n [nzType]=\"item.icon_after\"\n [ngClass]=\"{\n '-menu-horizontal__item-icon-after': depth == 0 && !checkActive(item),\n '+menu-horizontal__item-icon-after': depth == 0 && checkActive(item),\n '-menu-horizontal__item-icon-after--child': depth > 0 && !checkActive(item),\n '+menu-horizontal__item-icon-after--child': depth > 0 && checkActive(item)\n }\"\n [ngStyle]=\"\n class[\n (checkActive(item) ? '+' : '-') +\n 'menu-horizontal__item-icon-after' +\n (depth > 0 ? '--child' : '')\n ]\n \"\n nzTheme=\"outline\"\n />\n }\n\n @if (item.children?.length) {\n <div class=\"menu-horizontal__children\" [ngStyle]=\"class['menu-horizontal__children']\">\n @for (child of item.children; track child.key) {\n <ng-container\n *ngTemplateOutlet=\"renderMenu; context: { $implicit: child, depth: (depth || 0) + 1 }\"\n ></ng-container>\n }\n </div>\n }\n </a>\n</ng-template>\n",styles:[".menu-horizontal{display:var(--display);align-items:var(--align-items);width:var(--width);height:var(--height);box-shadow:var(--box-shadow);flex-direction:var(--flex-direction);gap:var(--gap)}.menu-horizontal .hover{cursor:pointer}.menu-horizontal .hover>.menu-horizontal__children{display:flex}.menu-horizontal .\\+menu-horizontal__item,.menu-horizontal .-menu-horizontal__item{position:var(--position);width:var(--width);height:var(--height);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);background-color:var(--bg-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);white-space:nowrap;transform:var(--transform)}.menu-horizontal .\\+menu-horizontal__item:hover,.menu-horizontal .-menu-horizontal__item:hover{cursor:pointer}.menu-horizontal .\\+menu-horizontal__item:hover>.menu-horizontal__children,.menu-horizontal .-menu-horizontal__item:hover>.menu-horizontal__children{display:flex}.menu-horizontal .\\+menu-horizontal__item .\\+menu-horizontal__item-icon-before,.menu-horizontal .-menu-horizontal__item .\\+menu-horizontal__item-icon-before,.menu-horizontal .\\+menu-horizontal__item .-menu-horizontal__item-icon-before,.menu-horizontal .-menu-horizontal__item .-menu-horizontal__item-icon-before{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform)}.menu-horizontal .\\+menu-horizontal__item .\\+menu-horizontal__item-content,.menu-horizontal .-menu-horizontal__item .\\+menu-horizontal__item-content,.menu-horizontal .\\+menu-horizontal__item .-menu-horizontal__item-content,.menu-horizontal .-menu-horizontal__item .-menu-horizontal__item-content{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);text-underline-offset:var(--text-underline-offset);text-decoration-color:var(--text-decoration-color);text-decoration-thickness:var(--text-decoration-thickness);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform)}.menu-horizontal .\\+menu-horizontal__item .\\+menu-horizontal__item-icon-after,.menu-horizontal .-menu-horizontal__item .\\+menu-horizontal__item-icon-after,.menu-horizontal .\\+menu-horizontal__item .-menu-horizontal__item-icon-after,.menu-horizontal .-menu-horizontal__item .-menu-horizontal__item-icon-after{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform)}.menu-horizontal .-menu-horizontal__item:hover{background-color:var(--h-bg-color, var(--bg-color));transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform, var(--transform));border-top-left-radius:var(--h-border-top-left-radius, var(--border-top-left-radius));border-top-right-radius:var(--h-border-top-right-radius, var(--border-top-right-radius));border-bottom-left-radius:var(--h-border-bottom-left-radius, var(--border-bottom-left-radius));border-bottom-right-radius:var(--h-border-bottom-right-radius, var(--border-bottom-right-radius));border-top-width:var(--h-border-top-width, var(--border-top-width));border-bottom-width:var(--h-border-bottom-width, var(--border-bottom-width));border-left-width:var(--h-border-left-width, var(--border-left-width));border-right-width:var(--h-border-right-width, var(--border-right-width));border-style:var(--h-border-style, var(--border-style));border-color:var(--h-border-color, var(--border-color));text-decoration:var(--h-text-decoration, var(--text-decoration));text-underline-offset:var(--h-text-underline-offset, var(--text-underline-offset));text-decoration-color:var(--h-text-decoration-color, var(--text-decoration-color));text-decoration-thickness:var(--h-text-decoration-thickness, var(--text-decoration-thickness))}.menu-horizontal .-menu-horizontal__item:hover .-menu-horizontal__item-content{color:var(--h-color-content, var(--color))}.menu-horizontal .-menu-horizontal__item:hover .-menu-horizontal__item-icon-after{color:var(--h-color-icon, var(--color))}.menu-horizontal__children{display:var(--display);flex-direction:var(--flex-direction);position:var(--position);justify-content:var(--justify-content);align-items:var(--align-items);min-width:var(--min-width);top:var(--top);left:var(--left);right:var(--right);z-index:var(--z-index, 100);box-shadow:var(--box-shadow);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius-first-child, var(--border-top-left-radius));border-top-right-radius:var(--border-top-right-radius-first-child, var(--border-top-right-radius));border-bottom-left-radius:var(--border-bottom-left-radius-last-child, var(--border-bottom-left-radius));border-bottom-right-radius:var(--border-bottom-right-radius-last-child, var(--border-bottom-right-radius));transform:var(--transform)}.menu-horizontal__children .menu-horizontal__children{top:var(--top-2, 0);left:var(--left-2);right:var(--right-2);transform:var(--transform-2)}.menu-horizontal__children .\\+menu-horizontal__item--child,.menu-horizontal__children .-menu-horizontal__item--child{position:var(--position);width:var(--width);height:var(--height);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);white-space:nowrap;background-color:var(--bg-color)}.menu-horizontal__children .\\+menu-horizontal__item--child:hover,.menu-horizontal__children .-menu-horizontal__item--child:hover{cursor:pointer}.menu-horizontal__children .\\+menu-horizontal__item--child:hover>.menu-horizontal__children,.menu-horizontal__children .-menu-horizontal__item--child:hover>.menu-horizontal__children{display:flex}.menu-horizontal__children .\\+menu-horizontal__item--child:first-child,.menu-horizontal__children .-menu-horizontal__item--child:first-child{border-top-left-radius:var(--border-top-left-radius-first-child, var(--border-top-left-radius));border-top-right-radius:var(--border-top-right-radius-first-child, var(--border-top-right-radius))}.menu-horizontal__children .\\+menu-horizontal__item--child:last-child,.menu-horizontal__children .-menu-horizontal__item--child:last-child{border-bottom-left-radius:var(--border-bottom-left-radius-last-child, var(--border-bottom-left-radius));border-bottom-right-radius:var(--border-bottom-right-radius-last-child, var(--border-bottom-right-radius))}.menu-horizontal__children .-menu-horizontal__item--child:hover{background-color:var(--h-bg-color, var(--bg-color));transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform)}.menu-horizontal__children .-menu-horizontal__item--child:hover .-menu-horizontal__item-content--child{color:var(--h-color-content, var(--color))}.menu-horizontal__children .-menu-horizontal__item--child:hover .-menu-horizontal__item-icon-after--child{color:var(--h-color-icon, var(--color))}.menu-horizontal__children .\\+menu-horizontal__item-icon-before--child,.menu-horizontal__children .-menu-horizontal__item-icon-before--child{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-horizontal__children .\\+menu-horizontal__item-content--child,.menu-horizontal__children .-menu-horizontal__item-content--child{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-horizontal__children .\\+menu-horizontal__item-icon-after--child,.menu-horizontal__children .-menu-horizontal__item-icon-after--child{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:C.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Fn,decorators:[{type:l,args:[{selector:"wb-menu-horizontal",imports:[k,j],template:"<div class=\"menu-horizontal\" [ngStyle]=\"class['menu-horizontal']\">\n @for (item of config.data_list; track item.key) {\n <ng-container\n *ngTemplateOutlet=\"renderMenu; context: { $implicit: item, depth: 0 }\"\n ></ng-container>\n }\n</div>\n\n<ng-template #renderMenu let-item let-depth=\"depth\">\n <a\n [ngClass]=\"{\n '-menu-horizontal__item': depth == 0 && !checkActive(item),\n '+menu-horizontal__item': depth == 0 && checkActive(item),\n '-menu-horizontal__item--child': depth > 0 && !checkActive(item),\n '+menu-horizontal__item--child': depth > 0 && checkActive(item)\n }\"\n [class.hover]=\"data.hover && data.hover == item.key\"\n [ngStyle]=\"\n class[\n (checkActive(item) ? '+' : '-') + 'menu-horizontal__item' + (depth > 0 ? '--child' : '')\n ]\n \"\n [style]=\"animation['-menu-horizontal__item' + (depth > 0 ? '--child' : '')]\"\n (click)=\"handleChooseItem($event, item, depth)\"\n >\n @if (item.icon_before) {\n <nz-icon\n [nzType]=\"item.icon_before\"\n [ngClass]=\"{\n '-menu-horizontal__item-icon-before': depth == 0 && !checkActive(item),\n '+menu-horizontal__item-icon-before': depth == 0 && checkActive(item),\n '-menu-horizontal__item-icon-before--child': depth > 0 && !checkActive(item),\n '+menu-horizontal__item-icon-before--child': depth > 0 && checkActive(item)\n }\"\n [ngStyle]=\"\n class[\n (checkActive(item) ? '+' : '-') +\n 'menu-horizontal__item-icon-before' +\n (depth > 0 ? '--child' : '')\n ]\n \"\n nzTheme=\"outline\"\n />\n }\n <div\n [ngClass]=\"{\n '-menu-horizontal__item-content': depth == 0 && !checkActive(item),\n '+menu-horizontal__item-content': depth == 0 && checkActive(item),\n '-menu-horizontal__item-content--child': depth > 0 && !checkActive(item),\n '+menu-horizontal__item-content--child': depth > 0 && checkActive(item)\n }\"\n [ngStyle]=\"\n class[\n (checkActive(item) ? '+' : '-') +\n 'menu-horizontal__item-content' +\n (depth > 0 ? '--child' : '')\n ]\n \"\n >\n {{ item.label[webBuilderService.projectWorking.language.default] }}\n </div>\n\n @if (item.icon_after) {\n <nz-icon\n [nzType]=\"item.icon_after\"\n [ngClass]=\"{\n '-menu-horizontal__item-icon-after': depth == 0 && !checkActive(item),\n '+menu-horizontal__item-icon-after': depth == 0 && checkActive(item),\n '-menu-horizontal__item-icon-after--child': depth > 0 && !checkActive(item),\n '+menu-horizontal__item-icon-after--child': depth > 0 && checkActive(item)\n }\"\n [ngStyle]=\"\n class[\n (checkActive(item) ? '+' : '-') +\n 'menu-horizontal__item-icon-after' +\n (depth > 0 ? '--child' : '')\n ]\n \"\n nzTheme=\"outline\"\n />\n }\n\n @if (item.children?.length) {\n <div class=\"menu-horizontal__children\" [ngStyle]=\"class['menu-horizontal__children']\">\n @for (child of item.children; track child.key) {\n <ng-container\n *ngTemplateOutlet=\"renderMenu; context: { $implicit: child, depth: (depth || 0) + 1 }\"\n ></ng-container>\n }\n </div>\n }\n </a>\n</ng-template>\n",styles:[".menu-horizontal{display:var(--display);align-items:var(--align-items);width:var(--width);height:var(--height);box-shadow:var(--box-shadow);flex-direction:var(--flex-direction);gap:var(--gap)}.menu-horizontal .hover{cursor:pointer}.menu-horizontal .hover>.menu-horizontal__children{display:flex}.menu-horizontal .\\+menu-horizontal__item,.menu-horizontal .-menu-horizontal__item{position:var(--position);width:var(--width);height:var(--height);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);background-color:var(--bg-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);white-space:nowrap;transform:var(--transform)}.menu-horizontal .\\+menu-horizontal__item:hover,.menu-horizontal .-menu-horizontal__item:hover{cursor:pointer}.menu-horizontal .\\+menu-horizontal__item:hover>.menu-horizontal__children,.menu-horizontal .-menu-horizontal__item:hover>.menu-horizontal__children{display:flex}.menu-horizontal .\\+menu-horizontal__item .\\+menu-horizontal__item-icon-before,.menu-horizontal .-menu-horizontal__item .\\+menu-horizontal__item-icon-before,.menu-horizontal .\\+menu-horizontal__item .-menu-horizontal__item-icon-before,.menu-horizontal .-menu-horizontal__item .-menu-horizontal__item-icon-before{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform)}.menu-horizontal .\\+menu-horizontal__item .\\+menu-horizontal__item-content,.menu-horizontal .-menu-horizontal__item .\\+menu-horizontal__item-content,.menu-horizontal .\\+menu-horizontal__item .-menu-horizontal__item-content,.menu-horizontal .-menu-horizontal__item .-menu-horizontal__item-content{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);text-underline-offset:var(--text-underline-offset);text-decoration-color:var(--text-decoration-color);text-decoration-thickness:var(--text-decoration-thickness);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform)}.menu-horizontal .\\+menu-horizontal__item .\\+menu-horizontal__item-icon-after,.menu-horizontal .-menu-horizontal__item .\\+menu-horizontal__item-icon-after,.menu-horizontal .\\+menu-horizontal__item .-menu-horizontal__item-icon-after,.menu-horizontal .-menu-horizontal__item .-menu-horizontal__item-icon-after{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform)}.menu-horizontal .-menu-horizontal__item:hover{background-color:var(--h-bg-color, var(--bg-color));transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform, var(--transform));border-top-left-radius:var(--h-border-top-left-radius, var(--border-top-left-radius));border-top-right-radius:var(--h-border-top-right-radius, var(--border-top-right-radius));border-bottom-left-radius:var(--h-border-bottom-left-radius, var(--border-bottom-left-radius));border-bottom-right-radius:var(--h-border-bottom-right-radius, var(--border-bottom-right-radius));border-top-width:var(--h-border-top-width, var(--border-top-width));border-bottom-width:var(--h-border-bottom-width, var(--border-bottom-width));border-left-width:var(--h-border-left-width, var(--border-left-width));border-right-width:var(--h-border-right-width, var(--border-right-width));border-style:var(--h-border-style, var(--border-style));border-color:var(--h-border-color, var(--border-color));text-decoration:var(--h-text-decoration, var(--text-decoration));text-underline-offset:var(--h-text-underline-offset, var(--text-underline-offset));text-decoration-color:var(--h-text-decoration-color, var(--text-decoration-color));text-decoration-thickness:var(--h-text-decoration-thickness, var(--text-decoration-thickness))}.menu-horizontal .-menu-horizontal__item:hover .-menu-horizontal__item-content{color:var(--h-color-content, var(--color))}.menu-horizontal .-menu-horizontal__item:hover .-menu-horizontal__item-icon-after{color:var(--h-color-icon, var(--color))}.menu-horizontal__children{display:var(--display);flex-direction:var(--flex-direction);position:var(--position);justify-content:var(--justify-content);align-items:var(--align-items);min-width:var(--min-width);top:var(--top);left:var(--left);right:var(--right);z-index:var(--z-index, 100);box-shadow:var(--box-shadow);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius-first-child, var(--border-top-left-radius));border-top-right-radius:var(--border-top-right-radius-first-child, var(--border-top-right-radius));border-bottom-left-radius:var(--border-bottom-left-radius-last-child, var(--border-bottom-left-radius));border-bottom-right-radius:var(--border-bottom-right-radius-last-child, var(--border-bottom-right-radius));transform:var(--transform)}.menu-horizontal__children .menu-horizontal__children{top:var(--top-2, 0);left:var(--left-2);right:var(--right-2);transform:var(--transform-2)}.menu-horizontal__children .\\+menu-horizontal__item--child,.menu-horizontal__children .-menu-horizontal__item--child{position:var(--position);width:var(--width);height:var(--height);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);white-space:nowrap;background-color:var(--bg-color)}.menu-horizontal__children .\\+menu-horizontal__item--child:hover,.menu-horizontal__children .-menu-horizontal__item--child:hover{cursor:pointer}.menu-horizontal__children .\\+menu-horizontal__item--child:hover>.menu-horizontal__children,.menu-horizontal__children .-menu-horizontal__item--child:hover>.menu-horizontal__children{display:flex}.menu-horizontal__children .\\+menu-horizontal__item--child:first-child,.menu-horizontal__children .-menu-horizontal__item--child:first-child{border-top-left-radius:var(--border-top-left-radius-first-child, var(--border-top-left-radius));border-top-right-radius:var(--border-top-right-radius-first-child, var(--border-top-right-radius))}.menu-horizontal__children .\\+menu-horizontal__item--child:last-child,.menu-horizontal__children .-menu-horizontal__item--child:last-child{border-bottom-left-radius:var(--border-bottom-left-radius-last-child, var(--border-bottom-left-radius));border-bottom-right-radius:var(--border-bottom-right-radius-last-child, var(--border-bottom-right-radius))}.menu-horizontal__children .-menu-horizontal__item--child:hover{background-color:var(--h-bg-color, var(--bg-color));transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform)}.menu-horizontal__children .-menu-horizontal__item--child:hover .-menu-horizontal__item-content--child{color:var(--h-color-content, var(--color))}.menu-horizontal__children .-menu-horizontal__item--child:hover .-menu-horizontal__item-icon-after--child{color:var(--h-color-icon, var(--color))}.menu-horizontal__children .\\+menu-horizontal__item-icon-before--child,.menu-horizontal__children .-menu-horizontal__item-icon-before--child{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-horizontal__children .\\+menu-horizontal__item-content--child,.menu-horizontal__children .-menu-horizontal__item-content--child{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-horizontal__children .\\+menu-horizontal__item-icon-after--child,.menu-horizontal__children .-menu-horizontal__item-icon-after--child{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}\n"]}]}],ctorParameters:()=>[{type:xn},{type:P.Router},{type:P.ActivatedRoute}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class Nn{router;webBuilderService;authService;data;device;class;config;animation;type;product;isClone;isFocused=!1;findBlock;changeBlockSub;constructor(e,n,t){this.router=e,this.webBuilderService=n,this.authService=t}ngOnInit(){this.data.value=this.data.value||"","object_input_email_cart"==this.data.type&&this.authService.checkAuthEndUser()&&(this.data.value=this.authService.getEndUser()?.email),"object_input_name_cart"==this.data.type&&this.authService.checkAuthEndUser()&&(this.data.value=this.authService.getEndUser()?.addresses?.find(e=>e.is_default)?.name),"object_input_phone_cart"==this.data.type&&this.authService.checkAuthEndUser()&&(this.data.value=this.authService.getEndUser()?.addresses?.find(e=>e.is_default)?.phone),"object_input_address_cart"==this.data.type&&this.authService.checkAuthEndUser()&&(this.data.value=this.authService.getEndUser()?.addresses?.find(e=>e.is_default)?.address),"object_input_name"==this.data.type&&this.product?.name&&(this.data.value=this.product.name),"object_input_phone"==this.data.type&&this.product?.phone&&(this.data.value=this.product.phone),"object_input_address"==this.data.type&&this.product?.address&&(this.data.value=this.product.address),"object_button_set_default_address"==this.data.type&&this.product?.is_default&&(this.data.value=this.product.is_default),"object_product_input_search"==this.data.type&&(this.config.dialog.open=!1),this.changeBlockSub=this.webBuilderService.onNotifyChange(e=>{"change-freeblock"==e.name&&e._id==this.data._id&&this.getDetailFreeblock()}),this.getDetailFreeblock()}getDetailFreeblock(){if(this.config.id_freeblock){if(this.findBlock=this.webBuilderService.findItemById(this.config.id_freeblock),!this.findBlock)return console.error("Không tìm thấy freeblock id:",this.config.id_freeblock)}else this.config.id_freeblock||(this.findBlock=null)}ngOnDestroy(){this.changeBlockSub&&this.changeBlockSub.unsubscribe()}onChangeType(){"object_input_password"==this.data.type&&("password"==this.config.input_type?(this.config.input_type="text",this.config.icon.icon_name="eye"):(this.config.input_type="password",this.config.icon.icon_name="eye-slash"))}onChangeValue(e){this.data.value=e}positionModal(){return"left"==this.config.position?{left:"0px"}:"right"==this.config.position?{right:"0px"}:"center"==this.config.position?{left:"50%",transform:"translateX(-50%)"}:{left:"0px"}}onFocus(e){this.isFocused=!0}onBlur(e){this.isFocused=!1}handleNavigate(){const{projectWorking:e}=this.webBuilderService,{link:n,type:t}=this.config.router;"none"!=t&&("url"==t?window.open(this.config.url,"_blank"):t.includes("link")&&("preview"===this.type?"object_product_input_search"==this.data.type?this.router.navigate([`${e._id}/preview-web`,...n.split("/")],{queryParams:{q:this.data.value}}):this.router.navigate([`${e._id}/preview-web`,...n.split("/")]):this.router.navigate(["",...n.split("/")])))}conditionDisplay(){return"object_input_email_cart"!=this.data.type||this.authService.checkAuthEndUser()}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Nn,deps:[{token:P.Router},{token:xn},{token:Sn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Nn,isStandalone:!0,selector:"wb-input",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",product:"product",isClone:"isClone"},ngImport:t,template:'@if (conditionDisplay()) {\n <div class="input" [id]="data._id" [ngStyle]="class[\'input\']" [style]="animation[\'input\']">\n <input\n [name]="data._id"\n [ngModelOptions]="{ standalone: true }"\n [(ngModel)]="data.value"\n [type]="config.input_type"\n class="input__field"\n [ngStyle]="class[\'input__field\']"\n [style]="animation[\'input__field\']"\n [placeholder]="config.placeholder[webBuilderService.projectWorking.language.default]"\n (ngModelChange)="onChangeValue($event)"\n (focus)="onFocus($event)"\n (blur)="onBlur($event)"\n (keyup.enter)="handleNavigate()"\n [disabled]="data.type == \'object_input_email_cart\'"\n />\n @if (config[\'icon\'][\'is_icon\']) {\n <div class="input__icon" [ngStyle]="class[\'input__icon\']" [style]="animation[\'input__icon\']">\n <nz-icon\n [nzType]="config[\'icon\'][\'icon_name\']"\n [ngStyle]="class[\'input__icon-inner\']"\n class="input__icon-inner"\n nzTheme="outline"\n (click)="onChangeType()"\n />\n </div>\n }\n </div>\n @if ((findBlock && isFocused) || config.dialog?.open) {\n <div\n #btnModalPopup\n class="wb-dialog-hover"\n [ngStyle]="positionModal()"\n [style.transform]="`translateX(${config.dialog.translate_x || 0}px)`"\n >\n <wb-block-blank\n [data]="findBlock"\n [device]="device"\n [class]="findBlock[device + \'_class\']"\n [config]="findBlock[device + \'_config\']"\n [animation]="findBlock[device + \'_animation\']"\n [type]="type"\n >\n </wb-block-blank>\n </div>\n }\n}\n',styles:[".input{background-color:var(--bg-color);width:var(--width);height:var(--height);border-radius:var(--border-radius);text-align:var(--text-align);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);outline-width:var(--outline-width);outline-style:var(--outline-style);outline-color:var(--outline-color);justify-content:var(--justify-content);align-items:var(--align-items);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform);cursor:var(--cursor);box-shadow:var(--box-shadow);display:flex;align-items:center;background-image:var(--bg-image)}.input__field{border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-image:var(--border-image);outline-width:var(--outline-width);outline-style:var(--outline-style);outline-color:var(--outline-color);background-color:transparent;width:100%;height:100%;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);padding-left:var(--padding-left);padding-right:var(--padding-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.input__field::placeholder{color:var(--color-placeholder);font-size:var(--font-size-placeholder);font-weight:var(--font-weight-placeholder);font-family:var(--font-family-placeholder);font-style:var(--font-style-placeholder);text-decoration:var(--text-decoration-placeholder);text-transform:var(--text-transform-placeholder)}.input__field:focus{outline-width:var(--outline-width-focus);outline-style:var(--outline-style-focus);outline-color:var(--outline-color-focus)}.input__icon{background-color:var(--bg-color);width:var(--width);cursor:var(--cursor);height:100%;display:flex;justify-content:center;align-items:center}.input__icon-inner{color:var(--color);font-size:var(--font-size);rotate:var(--rotate);padding-left:var(--padding-left);padding-right:var(--padding-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.input:hover{background-color:var(--h-bg-color, var(--bg-color));transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform)}.wb-dialog-hover{position:absolute;top:100%}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"component",type:kn,selector:"wb-block-blank",inputs:["data","device","class","config","animation","type","product"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Nn,decorators:[{type:l,args:[{selector:"wb-input",imports:[k,B,kn,j],template:'@if (conditionDisplay()) {\n <div class="input" [id]="data._id" [ngStyle]="class[\'input\']" [style]="animation[\'input\']">\n <input\n [name]="data._id"\n [ngModelOptions]="{ standalone: true }"\n [(ngModel)]="data.value"\n [type]="config.input_type"\n class="input__field"\n [ngStyle]="class[\'input__field\']"\n [style]="animation[\'input__field\']"\n [placeholder]="config.placeholder[webBuilderService.projectWorking.language.default]"\n (ngModelChange)="onChangeValue($event)"\n (focus)="onFocus($event)"\n (blur)="onBlur($event)"\n (keyup.enter)="handleNavigate()"\n [disabled]="data.type == \'object_input_email_cart\'"\n />\n @if (config[\'icon\'][\'is_icon\']) {\n <div class="input__icon" [ngStyle]="class[\'input__icon\']" [style]="animation[\'input__icon\']">\n <nz-icon\n [nzType]="config[\'icon\'][\'icon_name\']"\n [ngStyle]="class[\'input__icon-inner\']"\n class="input__icon-inner"\n nzTheme="outline"\n (click)="onChangeType()"\n />\n </div>\n }\n </div>\n @if ((findBlock && isFocused) || config.dialog?.open) {\n <div\n #btnModalPopup\n class="wb-dialog-hover"\n [ngStyle]="positionModal()"\n [style.transform]="`translateX(${config.dialog.translate_x || 0}px)`"\n >\n <wb-block-blank\n [data]="findBlock"\n [device]="device"\n [class]="findBlock[device + \'_class\']"\n [config]="findBlock[device + \'_config\']"\n [animation]="findBlock[device + \'_animation\']"\n [type]="type"\n >\n </wb-block-blank>\n </div>\n }\n}\n',styles:[".input{background-color:var(--bg-color);width:var(--width);height:var(--height);border-radius:var(--border-radius);text-align:var(--text-align);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);outline-width:var(--outline-width);outline-style:var(--outline-style);outline-color:var(--outline-color);justify-content:var(--justify-content);align-items:var(--align-items);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform);cursor:var(--cursor);box-shadow:var(--box-shadow);display:flex;align-items:center;background-image:var(--bg-image)}.input__field{border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-image:var(--border-image);outline-width:var(--outline-width);outline-style:var(--outline-style);outline-color:var(--outline-color);background-color:transparent;width:100%;height:100%;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);padding-left:var(--padding-left);padding-right:var(--padding-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.input__field::placeholder{color:var(--color-placeholder);font-size:var(--font-size-placeholder);font-weight:var(--font-weight-placeholder);font-family:var(--font-family-placeholder);font-style:var(--font-style-placeholder);text-decoration:var(--text-decoration-placeholder);text-transform:var(--text-transform-placeholder)}.input__field:focus{outline-width:var(--outline-width-focus);outline-style:var(--outline-style-focus);outline-color:var(--outline-color-focus)}.input__icon{background-color:var(--bg-color);width:var(--width);cursor:var(--cursor);height:100%;display:flex;justify-content:center;align-items:center}.input__icon-inner{color:var(--color);font-size:var(--font-size);rotate:var(--rotate);padding-left:var(--padding-left);padding-right:var(--padding-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.input:hover{background-color:var(--h-bg-color, var(--bg-color));transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform)}.wb-dialog-hover{position:absolute;top:100%}\n"]}]}],ctorParameters:()=>[{type:P.Router},{type:xn},{type:Sn}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],product:[{type:s}],isClone:[{type:s}]}});class Vn{webBuilderService;sanitizer;data;device;class;config;animation;type;isClone;product;safeContent;constructor(e,n){this.webBuilderService=e,this.sanitizer=n}ngOnInit(){}getContent(){if("design"==this.type||"admin"==this.type)return this.config.content[this.webBuilderService.projectWorking.language.default];switch(this.data.type){case"object_text_paragraph":return this.config?.content[this.webBuilderService.projectWorking.language.default];case"object_news_desc":case"object_product_desc":return this.product?.desc[this.webBuilderService.projectWorking.language.default]??this.config?.content[this.webBuilderService.projectWorking.language.default];case"object_news_desc_short":case"object_product_desc_short":return this.product?.desc_short[this.webBuilderService.projectWorking.language.default]??this.config?.content[this.webBuilderService.projectWorking.language.default]}}getContentSafe(e){return this.safeContent=this.sanitizer.bypassSecurityTrustHtml(e),this.safeContent}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Vn,deps:[{token:xn},{token:L.DomSanitizer}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:Vn,isStandalone:!0,selector:"wb-text-paragraph",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:'<div\n class="text-paragraph ck-content"\n [ngStyle]="class[\'text-paragraph\']"\n [style]="animation[\'text-paragraph\']"\n [innerHTML]="getContentSafe(getContent())"\n></div>\n',styles:[".text-paragraph{width:var(--width);height:var(--min-height);word-break:break-word;white-space:pre-wrap;font-size:initial}.text-paragraph ::ng-deep *{margin:0;padding:0}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Vn,decorators:[{type:l,args:[{selector:"wb-text-paragraph",imports:[k],template:'<div\n class="text-paragraph ck-content"\n [ngStyle]="class[\'text-paragraph\']"\n [style]="animation[\'text-paragraph\']"\n [innerHTML]="getContentSafe(getContent())"\n></div>\n',styles:[".text-paragraph{width:var(--width);height:var(--min-height);word-break:break-word;white-space:pre-wrap;font-size:initial}.text-paragraph ::ng-deep *{margin:0;padding:0}\n"]}]}],ctorParameters:()=>[{type:xn},{type:L.DomSanitizer}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class $n{webBuilderService;functionService;elementRef;authService;map;data;device;class;config;animation;type;isClone;product;loading=!0;translateX=0;isSliding=!1;transition="0.4s";isLastRight=!1;isLastLeft=!0;groupNumber=0;oldTranslateX=0;isDragging=!1;initialMouseX=0;currentMouseX=0;currentIndex=1;products=[];products2D=[];changeGridSub;constructor(e,n,t,i,o){this.webBuilderService=e,this.functionService=n,this.elementRef=t,this.authService=i,this.map=o}ngOnInit(){if(this.changeGridSub=this.webBuilderService.onNotifyChange(e=>{"change-grid"==e.name&&e._id==this.data._id&&this.calcProducts()}),"design"==this.type||"admin"==this.type)this.loading=!1,this.calcProducts();else if(["frame_products","frame_news"].includes(this.data.type)){let e={};e[`${this.data._id}.display`]=!0;const n={frame_products:this.webBuilderService.getProducts_byFields.bind(this.webBuilderService),frame_news:this.webBuilderService.getNews_byFields.bind(this.webBuilderService)};(n[this.data.type]||n.frame_products)(e,{[`${this.data._id}.order`]:1}).then(e=>{this.products=e.data.map(e=>"frame_products"==this.data.type?{...e,...e.variations[0],index_img:0,quantity:1}:"frame_news"==this.data.type?{...e,index_img:0}:void 0);const{cols:n,rows:t}=this.config.grid;for(let e=0;e<this.products.length;e+=t*n)this.products2D.push(this.products.slice(e,e+t*n));this.groupNumber=this.products2D.length,this.isLastRight=this.products.length<=n*t,this.handleDisplay()}).finally(()=>this.loading=!1)}else if("frame_repeat"==this.data.type){this.products=this.config.data_list||[];const{cols:e,rows:n}=this.config.grid;for(let t=0;t<this.products.length;t+=n*e)this.products2D.push(this.products.slice(t,t+n*e));this.loading=!1,this.handleDisplay()}}handleDisplay(){}ngOnDestroy(){this.changeGridSub?.unsubscribe()}calcProducts(){this.products=[],this.products2D=[];const{cols:e,rows:n}=this.data[this.device+"_config"].grid;for(let t=1;t<=e*n;t++)this.products.push({_id:`product-${t}`,name:{vi:`Sản phẩm ${t}`},desc:{vi:`Mô tả sản phẩm ${t}`},desc_short:{vi:`Mô tả ngắn sản phẩm ${t}`},price:1e5,stock:532,id_categorys:[],manysize:!1,imgs:["https://115.78.228.208:20350/autowebapp/VvTRmO6jW8u7coEk4qZd//images/design/sneaker.jpeg"],img:"https://115.78.228.208:20350/autowebapp/VvTRmO6jW8u7coEk4qZd//images/design/sneaker.jpeg",tier_variations:[],models:[],link:`san-pham-${t}`});for(let t=0;t<this.products.length;t+=n*e)this.products2D.push(this.products.slice(t,t+n*e))}onMouseDown(e,n){this.functionService.onMouseDown(this,e,n,"frame-products__grid")}onMouseMove(e,n){this.functionService.onMouseMove(this,e,n)}onMouseUp(e,n){this.functionService.onMouseUp(this,e,n,"frame-products__grid")}onMouseLeave(e){this.functionService.onMouseLeave(this,e)}handleNext(){const{slide_method:e}=this.config.slide;"frame"==e?this.functionService.handleNextPrevFrame(this,"next","frame-products__grid"):"col"==e&&this.functionService.handleNextPrevCol(this,"next","frame-products__grid")}handlePrev(){const{slide_method:e}=this.config.slide;"frame"==e?this.functionService.handleNextPrevFrame(this,"prev","frame-products__grid"):"col"==e&&this.functionService.handleNextPrevCol(this,"prev","frame-products__grid")}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:$n,deps:[{token:xn},{token:On},{token:t.ElementRef},{token:Sn},{token:tt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:$n,isStandalone:!0,selector:"wb-frame-products",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:"<div\n [id]=\"data._id\"\n class=\"frame-products\"\n [ngStyle]=\"data[device + '_class']['frame-products']\"\n (mousedown)=\"onMouseDown($event, 'mouse')\"\n (mousemove)=\"onMouseMove($event, 'mouse')\"\n (mouseup)=\"onMouseUp($event, 'mouse')\"\n (mouseleave)=\"onMouseLeave($event)\"\n (touchstart)=\"onMouseDown($event, 'touch')\"\n (touchmove)=\"onMouseMove($event, 'touch')\"\n (touchend)=\"onMouseUp($event, 'touch')\"\n>\n @if (!loading) {\n @for (group of products2D; track $index) {\n <div\n class=\"frame-products__grid\"\n [ngStyle]=\"data[device + '_class']['frame-products__grid']\"\n [style.transform]=\"'translateX(' + translateX + 'px)'\"\n >\n @for (product of group; track product._id; let productIndex = $index) {\n <div\n class=\"frame-products__item\"\n [ngStyle]=\"data[device + '_class']['frame-products__item']\"\n #dragBoundary\n >\n @for (object of data.objects; track object._id; let objectIndex = $index) {\n @if (!object[device + '_hidden']) {\n @if (productIndex == 0) {\n <div\n class=\"w-fit inline-block\"\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [boundaryEle]=\"dragBoundary\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [top]=\"object[device + '_position_' + data._id].top\"\n [left]=\"object[device + '_position_' + data._id].left\"\n [ngStyle]=\"{\n 'pointer-events':\n ['design', 'admin'].includes(type) && data.is_clone ? 'none' : 'auto'\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n isClone:\n ['design', 'admin'].includes(type) && isClone ? isClone : data.is_clone,\n product: product\n }\n \"\n >\n </ng-container>\n </div>\n } @else {\n <div\n class=\"w-fit inline-block\"\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [boundaryEle]=\"dragBoundary\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [top]=\"object[device + '_position_' + data._id].top\"\n [left]=\"object[device + '_position_' + data._id].left\"\n [ngStyle]=\"{\n opacity: ['design', 'admin'].includes(type) ? 0.5 : 1,\n 'pointer-events': ['design', 'admin'].includes(type) ? 'none' : 'auto'\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n product: product,\n isClone: ['design', 'admin'].includes(type)\n }\n \"\n >\n </ng-container>\n </div>\n }\n }\n }\n\n \x3c!-- Vùng kéo nhiều object --\x3e\n @if (\n productIndex == 0 &&\n webBuilderService.arrayChoosing[0]?.id_object == data._id &&\n webBuilderService.arrayChoosing.length > 1\n ) {\n <div\n wbVirtualSelected\n [boundaryEle]=\"dragBoundary\"\n id=\"choosing-box\"\n [ngStyle]=\"{\n position: 'absolute',\n border: '2px solid red',\n cursor: 'pointer',\n 'z-index': 9999999,\n 'pointer-events': 'none',\n left: webBuilderService.infoVirtualSelected.left + 'px',\n top: webBuilderService.infoVirtualSelected.top + 'px',\n width: webBuilderService.infoVirtualSelected.width + 'px',\n height: webBuilderService.infoVirtualSelected.height + 'px'\n }\"\n ></div>\n }\n </div>\n }\n </div>\n }\n } @else {\n <div class=\"loading\">\n <nz-icon nzType=\"loading\" nzTheme=\"outline\" />\n </div>\n }\n\n @if (config.icon_left.is_icon) {\n <button\n class=\"frame-products__btn-left\"\n [ngStyle]=\"class['frame-products__btn-left']\"\n (click)=\"handlePrev()\"\n >\n <nz-icon\n [nzType]=\"config['icon_left']['icon_name']\"\n [ngStyle]=\"class['frame-products__btn-left-icon']\"\n class=\"frame-products__btn-left-icon\"\n nzTheme=\"outline\"\n />\n </button>\n }\n\n @if (config.icon_right.is_icon) {\n <button\n class=\"frame-products__btn-right\"\n [ngStyle]=\"class['frame-products__btn-right']\"\n (click)=\"handleNext()\"\n >\n <nz-icon\n [nzType]=\"config['icon_right']['icon_name']\"\n [ngStyle]=\"class['frame-products__btn-right-icon']\"\n class=\"frame-products__btn-right-icon\"\n nzTheme=\"outline\"\n />\n </button>\n }\n</div>\n",styles:[".frame-products{width:var(--width);height:var(--height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);display:var(--display);align-items:var(--align-items);flex-wrap:var(--flex-wrap);overflow:var(--overflow);position:var(--position);-webkit-user-select:var(--user-select);user-select:var(--user-select);box-shadow:var(--box-shadow)}.frame-products .frame-products__grid{display:var(--display);grid-auto-columns:var(--grid-auto-columns);gap:var(--gap);grid-auto-flow:var(--grid-auto-flow);grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);grid-auto-rows:var(--grid-auto-rows);transition:var(--transition);height:var(--height);min-width:var(--min-width)}.frame-products .frame-products__item{box-sizing:var(--box-sizing);width:var(--width);height:var(--height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);position:var(--position);overflow:var(--overflow);background-color:var(--bg-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);box-shadow:var(--box-shadow)}.frame-products .frame-products__btn-right,.frame-products .frame-products__btn-left{position:var(--position);top:var(--top);transform:var(--transform);z-index:var(--z-index);width:var(--width);height:var(--height);left:var(--left);background-color:var(--bg-color);right:var(--right);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);cursor:var(--pointer);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color)}.frame-products .frame-products__btn-right .frame-products__btn-right-icon,.frame-products .frame-products__btn-left .frame-products__btn-right-icon,.frame-products .frame-products__btn-right .frame-products__btn-left-icon,.frame-products .frame-products__btn-left .frame-products__btn-left-icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999}.loading>nz-icon{font-size:32px;color:#999}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"component",type:Cn,selector:"[wbdragdrop]",inputs:["mode","boundaryEle","parent","data","device","top","left","type"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"component",type:wn,selector:"[wbVirtualSelected]",inputs:["boundaryEle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:$n,decorators:[{type:l,args:[{selector:"wb-frame-products",imports:[k,Cn,j,wn],template:"<div\n [id]=\"data._id\"\n class=\"frame-products\"\n [ngStyle]=\"data[device + '_class']['frame-products']\"\n (mousedown)=\"onMouseDown($event, 'mouse')\"\n (mousemove)=\"onMouseMove($event, 'mouse')\"\n (mouseup)=\"onMouseUp($event, 'mouse')\"\n (mouseleave)=\"onMouseLeave($event)\"\n (touchstart)=\"onMouseDown($event, 'touch')\"\n (touchmove)=\"onMouseMove($event, 'touch')\"\n (touchend)=\"onMouseUp($event, 'touch')\"\n>\n @if (!loading) {\n @for (group of products2D; track $index) {\n <div\n class=\"frame-products__grid\"\n [ngStyle]=\"data[device + '_class']['frame-products__grid']\"\n [style.transform]=\"'translateX(' + translateX + 'px)'\"\n >\n @for (product of group; track product._id; let productIndex = $index) {\n <div\n class=\"frame-products__item\"\n [ngStyle]=\"data[device + '_class']['frame-products__item']\"\n #dragBoundary\n >\n @for (object of data.objects; track object._id; let objectIndex = $index) {\n @if (!object[device + '_hidden']) {\n @if (productIndex == 0) {\n <div\n class=\"w-fit inline-block\"\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [boundaryEle]=\"dragBoundary\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [top]=\"object[device + '_position_' + data._id].top\"\n [left]=\"object[device + '_position_' + data._id].left\"\n [ngStyle]=\"{\n 'pointer-events':\n ['design', 'admin'].includes(type) && data.is_clone ? 'none' : 'auto'\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n isClone:\n ['design', 'admin'].includes(type) && isClone ? isClone : data.is_clone,\n product: product\n }\n \"\n >\n </ng-container>\n </div>\n } @else {\n <div\n class=\"w-fit inline-block\"\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [boundaryEle]=\"dragBoundary\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [top]=\"object[device + '_position_' + data._id].top\"\n [left]=\"object[device + '_position_' + data._id].left\"\n [ngStyle]=\"{\n opacity: ['design', 'admin'].includes(type) ? 0.5 : 1,\n 'pointer-events': ['design', 'admin'].includes(type) ? 'none' : 'auto'\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n product: product,\n isClone: ['design', 'admin'].includes(type)\n }\n \"\n >\n </ng-container>\n </div>\n }\n }\n }\n\n \x3c!-- Vùng kéo nhiều object --\x3e\n @if (\n productIndex == 0 &&\n webBuilderService.arrayChoosing[0]?.id_object == data._id &&\n webBuilderService.arrayChoosing.length > 1\n ) {\n <div\n wbVirtualSelected\n [boundaryEle]=\"dragBoundary\"\n id=\"choosing-box\"\n [ngStyle]=\"{\n position: 'absolute',\n border: '2px solid red',\n cursor: 'pointer',\n 'z-index': 9999999,\n 'pointer-events': 'none',\n left: webBuilderService.infoVirtualSelected.left + 'px',\n top: webBuilderService.infoVirtualSelected.top + 'px',\n width: webBuilderService.infoVirtualSelected.width + 'px',\n height: webBuilderService.infoVirtualSelected.height + 'px'\n }\"\n ></div>\n }\n </div>\n }\n </div>\n }\n } @else {\n <div class=\"loading\">\n <nz-icon nzType=\"loading\" nzTheme=\"outline\" />\n </div>\n }\n\n @if (config.icon_left.is_icon) {\n <button\n class=\"frame-products__btn-left\"\n [ngStyle]=\"class['frame-products__btn-left']\"\n (click)=\"handlePrev()\"\n >\n <nz-icon\n [nzType]=\"config['icon_left']['icon_name']\"\n [ngStyle]=\"class['frame-products__btn-left-icon']\"\n class=\"frame-products__btn-left-icon\"\n nzTheme=\"outline\"\n />\n </button>\n }\n\n @if (config.icon_right.is_icon) {\n <button\n class=\"frame-products__btn-right\"\n [ngStyle]=\"class['frame-products__btn-right']\"\n (click)=\"handleNext()\"\n >\n <nz-icon\n [nzType]=\"config['icon_right']['icon_name']\"\n [ngStyle]=\"class['frame-products__btn-right-icon']\"\n class=\"frame-products__btn-right-icon\"\n nzTheme=\"outline\"\n />\n </button>\n }\n</div>\n",styles:[".frame-products{width:var(--width);height:var(--height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);display:var(--display);align-items:var(--align-items);flex-wrap:var(--flex-wrap);overflow:var(--overflow);position:var(--position);-webkit-user-select:var(--user-select);user-select:var(--user-select);box-shadow:var(--box-shadow)}.frame-products .frame-products__grid{display:var(--display);grid-auto-columns:var(--grid-auto-columns);gap:var(--gap);grid-auto-flow:var(--grid-auto-flow);grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);grid-auto-rows:var(--grid-auto-rows);transition:var(--transition);height:var(--height);min-width:var(--min-width)}.frame-products .frame-products__item{box-sizing:var(--box-sizing);width:var(--width);height:var(--height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);position:var(--position);overflow:var(--overflow);background-color:var(--bg-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);box-shadow:var(--box-shadow)}.frame-products .frame-products__btn-right,.frame-products .frame-products__btn-left{position:var(--position);top:var(--top);transform:var(--transform);z-index:var(--z-index);width:var(--width);height:var(--height);left:var(--left);background-color:var(--bg-color);right:var(--right);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);cursor:var(--pointer);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color)}.frame-products .frame-products__btn-right .frame-products__btn-right-icon,.frame-products .frame-products__btn-left .frame-products__btn-right-icon,.frame-products .frame-products__btn-right .frame-products__btn-left-icon,.frame-products .frame-products__btn-left .frame-products__btn-left-icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999}.loading>nz-icon{font-size:32px;color:#999}\n"]}]}],ctorParameters:()=>[{type:xn},{type:On},{type:t.ElementRef},{type:Sn},{type:tt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class Wn{route;webBuilderService;data;device;class;config;animation;type;isClone;product;segments;pageName="";constructor(e,n){this.route=e,this.webBuilderService=n}ngOnInit(){"design"!=this.type&&"admin"!=this.type?this.route.url.subscribe(e=>{const n=this.webBuilderService.projectWorking.language.default;this.segments=e.map(e=>e.path);const t=this.segments.findIndex(e=>"preview-web"==e);t>-1&&(this.segments=this.segments.slice(t+1)),1==this.segments.length&&(this.pageName=this.webBuilderService.pages.find(e=>e.link===this.segments[0])?.name[n]||"")}):this.pageName="Giới thiệu"}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Wn,deps:[{token:P.ActivatedRoute},{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Wn,isStandalone:!0,selector:"wb-breadcumb",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:'<div class="breadcumb" [ngStyle]="class[\'breadcumb\']">\n @if (!product) {\n <span [ngStyle]="class[\'breadcumb__content\']" class="breadcumb__content"> Trang chủ </span>\n\n <nz-icon\n [nzType]="config[\'icon\'][\'icon_name\']"\n [ngStyle]="class[\'breadcumb__icon\']"\n class="breadcumb__icon"\n nzTheme="outline"\n />\n\n <span [ngStyle]="class[\'breadcumb__current\']" class="breadcumb__current">\n {{ pageName }}\n </span>\n } @else {\n <span [ngStyle]="class[\'breadcumb__content\']" class="breadcumb__content"> Trang chủ </span>\n\n @if (product.categories) {\n <nz-icon\n [nzType]="config[\'icon\'][\'icon_name\']"\n [ngStyle]="class[\'breadcumb__icon\']"\n class="breadcumb__icon"\n nzTheme="outline"\n />\n\n <span [ngStyle]="class[\'breadcumb__content\']" class="breadcumb__content">\n {{\n product.categories?.[0]?.name[webBuilderService.projectWorking.language.default] ||\n \'Danh mục\'\n }}\n </span>\n }\n <nz-icon\n [nzType]="config[\'icon\'][\'icon_name\']"\n [ngStyle]="class[\'breadcumb__icon\']"\n class="breadcumb__icon"\n nzTheme="outline"\n />\n <span [ngStyle]="class[\'breadcumb__current\']" class="breadcumb__current">\n {{ product.name.vi }}\n </span>\n }\n</div>\n',styles:[".breadcumb{width:var(--width);min-height:var(--min-height);background-color:var(--bg-color);text-align:var(--text-align);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform);cursor:var(--cursor);box-shadow:var(--box-shadow)}.breadcumb__content{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.breadcumb__icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.breadcumb__current{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Wn,decorators:[{type:l,args:[{selector:"wb-breadcumb",imports:[k,j],template:'<div class="breadcumb" [ngStyle]="class[\'breadcumb\']">\n @if (!product) {\n <span [ngStyle]="class[\'breadcumb__content\']" class="breadcumb__content"> Trang chủ </span>\n\n <nz-icon\n [nzType]="config[\'icon\'][\'icon_name\']"\n [ngStyle]="class[\'breadcumb__icon\']"\n class="breadcumb__icon"\n nzTheme="outline"\n />\n\n <span [ngStyle]="class[\'breadcumb__current\']" class="breadcumb__current">\n {{ pageName }}\n </span>\n } @else {\n <span [ngStyle]="class[\'breadcumb__content\']" class="breadcumb__content"> Trang chủ </span>\n\n @if (product.categories) {\n <nz-icon\n [nzType]="config[\'icon\'][\'icon_name\']"\n [ngStyle]="class[\'breadcumb__icon\']"\n class="breadcumb__icon"\n nzTheme="outline"\n />\n\n <span [ngStyle]="class[\'breadcumb__content\']" class="breadcumb__content">\n {{\n product.categories?.[0]?.name[webBuilderService.projectWorking.language.default] ||\n \'Danh mục\'\n }}\n </span>\n }\n <nz-icon\n [nzType]="config[\'icon\'][\'icon_name\']"\n [ngStyle]="class[\'breadcumb__icon\']"\n class="breadcumb__icon"\n nzTheme="outline"\n />\n <span [ngStyle]="class[\'breadcumb__current\']" class="breadcumb__current">\n {{ product.name.vi }}\n </span>\n }\n</div>\n',styles:[".breadcumb{width:var(--width);min-height:var(--min-height);background-color:var(--bg-color);text-align:var(--text-align);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform);cursor:var(--cursor);box-shadow:var(--box-shadow)}.breadcumb__content{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.breadcumb__icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.breadcumb__current{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}\n"]}]}],ctorParameters:()=>[{type:P.ActivatedRoute},{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class Ln{webBuilderService;map;data;device;class;config;animation;type;product;isClone;currentTab=0;constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){this.data.objects?.length&&this.data.objects.sort((e,n)=>e.index-n.index)}onChooseTab(e){this.currentTab=e}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Ln,deps:[{token:xn},{token:tt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Ln,isStandalone:!0,selector:"wb-frame-tab",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",product:"product",isClone:"isClone"},ngImport:t,template:"<div class=\"frame-tab\" [ngStyle]=\"class['frame-tab']\">\n <div class=\"frame-tab__header scrollbar-thin\" [ngStyle]=\"class['frame-tab__header']\">\n @for (object of data.objects; track $index) {\n <div\n [class]=\"`${currentTab == $index ? '+frame-tab__header-item' : '-frame-tab__header-item'}`\"\n [ngStyle]=\"class[`${currentTab == $index ? '+frame-tab__header-item' : '-frame-tab__header-item'}`]\"\n (click)=\"onChooseTab($index)\"\n >\n \x3c!-- <i [ngStyle]=\"class[`${currentTab == $index ? '+frame-tab__header-item-icon' : '-frame-tab__header-item-icon'}`]\"\n [class]=\"`pi pi-${config['icon']['icon_name']} ${currentTab == $index ? '+frame-tab__header-item-icon' : '-frame-tab__header-item-icon'}`\">\n </i> --\x3e\n\n <span\n [class]=\"`${currentTab == $index ? '+frame-tab__header-item-content' : '-frame-tab__header-item-content'}`\"\n [ngStyle]=\"class[`${currentTab == $index ? '+frame-tab__header-item-content' : '-frame-tab__header-item-content'}`]\"\n >\n {{\n object[device + '_config'].content[webBuilderService.projectWorking.language.default]\n }}\n </span>\n </div>\n }\n </div>\n <div class=\"frame-tab__content\" [ngStyle]=\"class['frame-tab__content']\">\n @for (object of data.objects; track $index) {\n @if (currentTab == $index) {\n <div\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [ngStyle]=\"{\n 'min-height': '100%',\n width: '100%',\n display: 'inline-block',\n 'pointer-events':\n ['design', 'admin'].includes(type) &&\n (isClone ? 'none' : data.is_clone ? 'none' : 'auto')\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n isClone: ['design', 'admin'].includes(type) && isClone ? isClone : data.is_clone,\n product: product\n }\n \"\n >\n </ng-container>\n </div>\n }\n }\n </div>\n</div>\n",styles:[".frame-tab{width:var(--width);min-height:var(--min-height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);flex-direction:var(--flex-direction)}.frame-tab .frame-tab__header{display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content);flex-direction:var(--flex-direction);gap:var(--gap);overflow:var(--overflow)}.frame-tab .frame-tab__header .\\+frame-tab__header-item,.frame-tab .frame-tab__header .-frame-tab__header-item{cursor:pointer;background-color:var(--bg-color);min-width:var(--min-width);min-height:var(--min-height);text-align:var(--text-align);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);flex-direction:var(--flex-direction);box-shadow:var(--box-shadow);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right)}.frame-tab .frame-tab__header .\\+frame-tab__header-item .\\+frame-tab__header-item-content,.frame-tab .frame-tab__header .-frame-tab__header-item .\\+frame-tab__header-item-content,.frame-tab .frame-tab__header .\\+frame-tab__header-item .-frame-tab__header-item-content,.frame-tab .frame-tab__header .-frame-tab__header-item .-frame-tab__header-item-content{color:var(--color);font-size:var(--font-size, 16px);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right)}.frame-tab .frame-tab__content{display:var(--display);flex:var(--flex)}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"component",type:Cn,selector:"[wbdragdrop]",inputs:["mode","boundaryEle","parent","data","device","top","left","type"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Ln,decorators:[{type:l,args:[{selector:"wb-frame-tab",imports:[k,Cn],template:"<div class=\"frame-tab\" [ngStyle]=\"class['frame-tab']\">\n <div class=\"frame-tab__header scrollbar-thin\" [ngStyle]=\"class['frame-tab__header']\">\n @for (object of data.objects; track $index) {\n <div\n [class]=\"`${currentTab == $index ? '+frame-tab__header-item' : '-frame-tab__header-item'}`\"\n [ngStyle]=\"class[`${currentTab == $index ? '+frame-tab__header-item' : '-frame-tab__header-item'}`]\"\n (click)=\"onChooseTab($index)\"\n >\n \x3c!-- <i [ngStyle]=\"class[`${currentTab == $index ? '+frame-tab__header-item-icon' : '-frame-tab__header-item-icon'}`]\"\n [class]=\"`pi pi-${config['icon']['icon_name']} ${currentTab == $index ? '+frame-tab__header-item-icon' : '-frame-tab__header-item-icon'}`\">\n </i> --\x3e\n\n <span\n [class]=\"`${currentTab == $index ? '+frame-tab__header-item-content' : '-frame-tab__header-item-content'}`\"\n [ngStyle]=\"class[`${currentTab == $index ? '+frame-tab__header-item-content' : '-frame-tab__header-item-content'}`]\"\n >\n {{\n object[device + '_config'].content[webBuilderService.projectWorking.language.default]\n }}\n </span>\n </div>\n }\n </div>\n <div class=\"frame-tab__content\" [ngStyle]=\"class['frame-tab__content']\">\n @for (object of data.objects; track $index) {\n @if (currentTab == $index) {\n <div\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [ngStyle]=\"{\n 'min-height': '100%',\n width: '100%',\n display: 'inline-block',\n 'pointer-events':\n ['design', 'admin'].includes(type) &&\n (isClone ? 'none' : data.is_clone ? 'none' : 'auto')\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n isClone: ['design', 'admin'].includes(type) && isClone ? isClone : data.is_clone,\n product: product\n }\n \"\n >\n </ng-container>\n </div>\n }\n }\n </div>\n</div>\n",styles:[".frame-tab{width:var(--width);min-height:var(--min-height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);flex-direction:var(--flex-direction)}.frame-tab .frame-tab__header{display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content);flex-direction:var(--flex-direction);gap:var(--gap);overflow:var(--overflow)}.frame-tab .frame-tab__header .\\+frame-tab__header-item,.frame-tab .frame-tab__header .-frame-tab__header-item{cursor:pointer;background-color:var(--bg-color);min-width:var(--min-width);min-height:var(--min-height);text-align:var(--text-align);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);flex-direction:var(--flex-direction);box-shadow:var(--box-shadow);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right)}.frame-tab .frame-tab__header .\\+frame-tab__header-item .\\+frame-tab__header-item-content,.frame-tab .frame-tab__header .-frame-tab__header-item .\\+frame-tab__header-item-content,.frame-tab .frame-tab__header .\\+frame-tab__header-item .-frame-tab__header-item-content,.frame-tab .frame-tab__header .-frame-tab__header-item .-frame-tab__header-item-content{color:var(--color);font-size:var(--font-size, 16px);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right)}.frame-tab .frame-tab__content{display:var(--display);flex:var(--flex)}\n"]}]}],ctorParameters:()=>[{type:xn},{type:tt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],product:[{type:s}],isClone:[{type:s}]}});class En{webBuilderService;route;map;data;device;class;config;animation;type;isClone;product;loading=!0;constructor(e,n,t){this.webBuilderService=e,this.route=n,this.map=t}ngOnInit(){this.route.url.subscribe(()=>{this.handleGetProduct()})}handleGetProduct(){const e=this.route.snapshot.url[this.route.snapshot.url.length-1]?.path;["design","admin"].includes(this.type)?(this.product={desc:{vi:'<p>Sữa HiPP 3 Combiotic Organic 2482 800gr<br>Trẻ từ 1 tuổi trở lên vẫn cần bổ sung dinh dưỡng thiết yếu, mẹ cần bổ sung hàm lượng Canxi cho bé mỗi ngày. Tuy nhiên hàm lượng Sắt, kẽm, I-ốt và các khoáng chất trong sữa bò tự nhiên thường không cao. Sữa bột Hipp 3 Combiotic chứa đầy đủ dưỡng chất thiết yếu cho sự tăng trưởng và phát triển của bé trong giai đoạn tăng trưởng từ 1 tuổi trở lên cho con yêu thông minh, mau lớn và khỏe mạnh.</p><p>Đặc điểm nổi bật của sản phẩm</p><p>Sữa Hipp 3 với nguồn nguyên liệu hoàn toàn hữu cơ và siêu sạch Organic đạt tiêu chuẩn của Liên Minh Châu Âu</p><p>Sữa bổ sung hàm lượng Probitik phân lập gốc từ sữa mẹ, Praebitik và vitamin A, C, D giúp tăng cường miễn dịch, hỗ trợ tiêu hóa.</p><p>Hàm lượng Protein phù hợp với sự phát triển của cơ thể bé, có tác dụng tăng cường miễn dịch, ức chế sự phát triển của các vi khuẩn, virut gây bệnh</p><p>Chất xơ thực phẩm quan trọng GOS chiết tách từ lactose trong sữa tạo môi trường thuận lợi cho lợi khuẩn Probiotic phát triển, tăng cường đường ruột, hỗ trợ hệ tiêu hóa của trẻ.</p><p>Sữa bổ sung ARA và DHA ( axit béo Omega 3 và Omega 6) có vai trò đặc biệt quan trọng giúp kích thích não bộ và các tế bào thần kinh, thị lực của bé phát triển</p><p>Bổ sung sắt có tác dụng trong quá trình tạo máu.</p><p>Bổ sung vitamin D và kháng thể tự nhiên IgG tăng cường hệ miễn dịch, giúp phát triển hoàn thiện chức năng nhìn của mắt, hệ thần kinh, giảm cholesterol toàn phần, và triglyceride máu, LDL-cholesterol (cholesterol xấu), giúp dự phòng các bệnh tim mạch.</p><p>Không chứa tinh bột, sữa bột Hipp 3 Combiotic chỉ chứa đường tự nhiên Lactose giúp bé dễ hấp thu và tiêu hóa tốt.</p><p>Đặc biệt sữa không chứa Gluten</p><p>Sữa bột Hipp3 dạng tơi xốp, dễ tan, không bị vón cục, có mùi thơm nhẹ, dễ uống giúp bé ăn ngon miệng và thích thú</p><p>KM</p><ul><li data-list-item-id="ed2ee73c6cba22f96af6f97cb988c3912">"Tưng bừng khai trương" - giảm giá 50% tất cả sản phẩm</li><li data-list-item-id="ed62a9ac50f6ee192e6a2cabeebff9b1b">Giảm thêm 500.000đ khi thanh toán bằng thẻ tín dụng tại TTMS</li><li data-list-item-id="e10a21617d914add51ebad5203874b999">Giảm ngay 100.000đ khi quét QR Code cùng Mastercard với đơn hàng 1.000.000đ</li></ul>'},desc_short:{vi:'<p><span style="background-color:rgb(255,255,255);color:rgb(112,112,112);font-size:14px;">Các nội dung Hướng dẫn mua hàng viết ở đây</span></p>'},name:{vi:"Sữa Hipp 3 Combiotic Organic 2482 800gr"},seo_title:{vi:""},seo_description:{vi:""},seo_keyword:{vi:""},brand:"Hipp",id_categorys:[],quantity:1,product_attributes:[{id:"8662d676-c1ac-4854-b956-3593583d174b",name:"Kích thước",values:["To","Nhỏ"]}],variations:[{id:"11881207-b902-4559-9a6c-9f5eb609f0f0",sku:"CDEQNL7L",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656340302-812022711.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656342596-883421575.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656343612-416135702.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656344724-531521917.png"],import_price:0,original_price:6e5,retail_price:58e4,fields:[{value:"To",name:"Kích thước"}],weight:0,stock:10,hidden:!1},{id:"5ecf23b5-2c35-4db3-a66f-b70be938b051",sku:"LAE2SHJ4",imgs:["http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656405318-593063767.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656407777-653200713.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656409981-32559064.png","http://localhost:3000/backend/uploads/68f65f70d8180afb2bb757c1/product/1761656411713-182955683.png"],import_price:0,original_price:6e5,retail_price:55e4,fields:[{value:"Nhỏ",name:"Kích thước"}],weight:0,stock:0,hidden:!1}],link:"sua-hipp-3-combiotic-organic-2482-800gr"},this.loading=!1):("frame_product_detail"==this.data.type&&this.webBuilderService.getDetailProduct_byLink(e).then(e=>{0==e.vcode&&(this.product=e.data,this.product={...this.product,...this.product.variations[0],index_img:0,quantity:1})}).finally(()=>this.loading=!1),"frame_category_detail"==this.data.type&&this.webBuilderService.getCategories_byFields({link:{$eq:e}},{}).then(e=>{0==e.vcode&&(this.product=e.data[0],this.product.img=e.data[0].imgs[0])}).finally(()=>this.loading=!1))}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:En,deps:[{token:xn},{token:P.ActivatedRoute},{token:tt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:En,isStandalone:!0,selector:"wb-frame-product-detail",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:"<div\n [id]=\"data._id\"\n class=\"frame-product-detail\"\n [ngStyle]=\"class['frame-product-detail']\"\n #dragBoundary\n>\n @for (object of data.objects; track object._id) {\n @if (!object[device + '_hidden']) {\n <div\n class=\"w-fit inline-block\"\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [boundaryEle]=\"dragBoundary\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [top]=\"object[device + '_position_' + data._id].top\"\n [left]=\"object[device + '_position_' + data._id].left\"\n [ngStyle]=\"{\n 'pointer-events': ['design', 'admin'].includes(type) && data.is_clone ? 'none' : 'auto'\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n isClone: ['design', 'admin'].includes(type) && isClone ? isClone : data.is_clone,\n product: product\n }\n \"\n >\n </ng-container>\n </div>\n }\n }\n\n \x3c!-- Vùng kéo nhiều object --\x3e\n @if (\n webBuilderService.arrayChoosing[0]?.id_object == data._id &&\n webBuilderService.arrayChoosing.length > 1\n ) {\n <div\n wbVirtualSelected\n [boundaryEle]=\"dragBoundary\"\n id=\"choosing-box\"\n [ngStyle]=\"{\n position: 'absolute',\n border: '2px solid red',\n cursor: 'pointer',\n 'z-index': 9999999,\n 'pointer-events': 'none',\n left: webBuilderService.infoVirtualSelected.left + 'px',\n top: webBuilderService.infoVirtualSelected.top + 'px',\n width: webBuilderService.infoVirtualSelected.width + 'px',\n height: webBuilderService.infoVirtualSelected.height + 'px'\n }\"\n ></div>\n }\n</div>\n",styles:[".frame-product-detail{background-color:var(--bg-color);width:var(--width);min-height:var(--min-height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color)}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"component",type:Cn,selector:"[wbdragdrop]",inputs:["mode","boundaryEle","parent","data","device","top","left","type"]},{kind:"component",type:wn,selector:"[wbVirtualSelected]",inputs:["boundaryEle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:En,decorators:[{type:l,args:[{selector:"wb-frame-product-detail",imports:[k,Cn,wn],template:"<div\n [id]=\"data._id\"\n class=\"frame-product-detail\"\n [ngStyle]=\"class['frame-product-detail']\"\n #dragBoundary\n>\n @for (object of data.objects; track object._id) {\n @if (!object[device + '_hidden']) {\n <div\n class=\"w-fit inline-block\"\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [boundaryEle]=\"dragBoundary\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [top]=\"object[device + '_position_' + data._id].top\"\n [left]=\"object[device + '_position_' + data._id].left\"\n [ngStyle]=\"{\n 'pointer-events': ['design', 'admin'].includes(type) && data.is_clone ? 'none' : 'auto'\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n isClone: ['design', 'admin'].includes(type) && isClone ? isClone : data.is_clone,\n product: product\n }\n \"\n >\n </ng-container>\n </div>\n }\n }\n\n \x3c!-- Vùng kéo nhiều object --\x3e\n @if (\n webBuilderService.arrayChoosing[0]?.id_object == data._id &&\n webBuilderService.arrayChoosing.length > 1\n ) {\n <div\n wbVirtualSelected\n [boundaryEle]=\"dragBoundary\"\n id=\"choosing-box\"\n [ngStyle]=\"{\n position: 'absolute',\n border: '2px solid red',\n cursor: 'pointer',\n 'z-index': 9999999,\n 'pointer-events': 'none',\n left: webBuilderService.infoVirtualSelected.left + 'px',\n top: webBuilderService.infoVirtualSelected.top + 'px',\n width: webBuilderService.infoVirtualSelected.width + 'px',\n height: webBuilderService.infoVirtualSelected.height + 'px'\n }\"\n ></div>\n }\n</div>\n",styles:[".frame-product-detail{background-color:var(--bg-color);width:var(--width);min-height:var(--min-height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color)}\n"]}]}],ctorParameters:()=>[{type:xn},{type:P.ActivatedRoute},{type:tt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class Rn{webBuilderService;cart;data;device;class;config;animation;type;isClone;product;constructor(e,n){this.webBuilderService=e,this.cart=n}ngOnInit(){}handleChangeQuantity(e,n){if("design"!=this.type)if("object_product_button_quantity"==this.data.type)switch(e){case"increment":this.product.quantity<this.product.stock&&(this.product.quantity+=1);break;case"decrement":this.product.quantity>1&&(this.product.quantity-=1);break;case"set":this.product.quantity=n&&n>0?n:1}else if("object_button_quantity_cart"==this.data.type){switch(e){case"increment":this.product.quantity+=1;break;case"decrement":this.product.quantity>1&&(this.product.quantity-=1);break;case"set":this.product.quantity=n&&n>0?n:1}this.cart.updateItemQuantity(this.product.id_variation,this.product.quantity)}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Rn,deps:[{token:xn},{token:Tn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Rn,isStandalone:!0,selector:"wb-button-quantity",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:'@if (type == \'design\' ? true : product) {\n <div class="button-quantity" [ngStyle]="class[\'button-quantity\']">\n @if (config[\'icon_before\'][\'is_icon\']) {\n <button\n class="button-quantity__before"\n [ngStyle]="class[\'button-quantity__before\']"\n (click)="handleChangeQuantity(\'decrement\')"\n >\n <nz-icon\n [nzType]="config[\'icon_before\'][\'icon_name\']"\n [ngStyle]="class[\'button-quantity__before-icon\']"\n class="button-quantity__before-icon"\n nzTheme="outline"\n />\n </button>\n }\n\n <input\n type="number"\n class="button-quantity__input"\n [(ngModel)]="product.quantity"\n (blur)="handleChangeQuantity(\'set\', product.quantity)"\n [ngStyle]="class[\'button-quantity__input\']"\n />\n\n @if (config[\'icon_after\'][\'is_icon\']) {\n <button\n class="button-quantity__after"\n [ngStyle]="class[\'button-quantity__after\']"\n (click)="handleChangeQuantity(\'increment\')"\n >\n <nz-icon\n [nzType]="config[\'icon_after\'][\'icon_name\']"\n [ngStyle]="class[\'button-quantity__after-icon\']"\n class="button-quantity__after-icon"\n nzTheme="outline"\n />\n </button>\n }\n </div>\n}\n',styles:[".button-quantity{width:var(--width);height:var(--height);display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content);gap:var(--gap)}.button-quantity__before,.button-quantity__after{width:var(--width);height:var(--height);background-color:var(--bg-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);margin-left:var(--margin-left);margin-right:var(--margin-right);cursor:pointer}.button-quantity .button-quantity__before-icon,.button-quantity .button-quantity__after-icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate)}.button-quantity__input{width:var(--width);height:var(--height);background-color:var(--bg-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);padding-left:var(--padding-left);padding-right:var(--padding-right);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);margin-left:var(--margin-left);margin-right:var(--margin-right)}.button-quantity__input:focus{box-shadow:inset 0 0 5px #0000001a}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Rn,decorators:[{type:l,args:[{selector:"wb-button-quantity",imports:[k,B,j],template:'@if (type == \'design\' ? true : product) {\n <div class="button-quantity" [ngStyle]="class[\'button-quantity\']">\n @if (config[\'icon_before\'][\'is_icon\']) {\n <button\n class="button-quantity__before"\n [ngStyle]="class[\'button-quantity__before\']"\n (click)="handleChangeQuantity(\'decrement\')"\n >\n <nz-icon\n [nzType]="config[\'icon_before\'][\'icon_name\']"\n [ngStyle]="class[\'button-quantity__before-icon\']"\n class="button-quantity__before-icon"\n nzTheme="outline"\n />\n </button>\n }\n\n <input\n type="number"\n class="button-quantity__input"\n [(ngModel)]="product.quantity"\n (blur)="handleChangeQuantity(\'set\', product.quantity)"\n [ngStyle]="class[\'button-quantity__input\']"\n />\n\n @if (config[\'icon_after\'][\'is_icon\']) {\n <button\n class="button-quantity__after"\n [ngStyle]="class[\'button-quantity__after\']"\n (click)="handleChangeQuantity(\'increment\')"\n >\n <nz-icon\n [nzType]="config[\'icon_after\'][\'icon_name\']"\n [ngStyle]="class[\'button-quantity__after-icon\']"\n class="button-quantity__after-icon"\n nzTheme="outline"\n />\n </button>\n }\n </div>\n}\n',styles:[".button-quantity{width:var(--width);height:var(--height);display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content);gap:var(--gap)}.button-quantity__before,.button-quantity__after{width:var(--width);height:var(--height);background-color:var(--bg-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);margin-left:var(--margin-left);margin-right:var(--margin-right);cursor:pointer}.button-quantity .button-quantity__before-icon,.button-quantity .button-quantity__after-icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate)}.button-quantity__input{width:var(--width);height:var(--height);background-color:var(--bg-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);padding-left:var(--padding-left);padding-right:var(--padding-right);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);margin-left:var(--margin-left);margin-right:var(--margin-right)}.button-quantity__input:focus{box-shadow:inset 0 0 5px #0000001a}\n"]}]}],ctorParameters:()=>[{type:xn},{type:Tn}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class Hn{webBuilderService;authService;data;device;class;config;animation;type;isClone;product;disabled=!1;provinces=[];districts=[];wards=[];isOpen=[!1,!1,!1];hideShowSub;constructor(e,n){this.webBuilderService=e,this.authService=n}ngOnInit(){"page"!=this.type&&this.webBuilderService.getProvinces().then(e=>{if(this.provinces=e.data.sort((e,n)=>e.name.localeCompare(n.name)),"object_select_province_district_ward_cart"==this.data.type&&this.authService.checkAuthEndUser()){const e=this.authService.getEndUser().addresses.find(e=>e.is_default);if(!e)return;this.data.province=e.province,this.webBuilderService.getDistricts(this.data.province.code).then(n=>{this.districts=n.data||[],this.wards=[],this.data.district=e.district,this.webBuilderService.getWards(this.data.district.code).then(n=>{this.wards=n.data||[],this.data.ward=e.ward})})}"object_select_province_district_ward"==this.data.type&&this.product?.province&&this.product?.district&&this.product?.ward&&(this.data.province=this.product.province,this.webBuilderService.getDistricts(this.data.province.code).then(e=>{this.districts=e.data||[],this.wards=[],this.data.district=this.product.district,this.webBuilderService.getWards(this.data.district.code).then(e=>{this.wards=e.data||[],this.data.ward=this.product.ward})}))}),this.hideShowSub=this.webBuilderService.onNotifyChange(e=>{"do-not-show-province-district-ward"==e?.name?(this.isOpen=[!1,!1,!1],this.data.province="",this.data.district="",this.data.ward="",this.data.hidden=!0):"show-province-district-ward"==e?.name&&(this.data.hidden=!1)})}ngOnDestroy(){this.hideShowSub&&this.hideShowSub.unsubscribe()}toggleDropdown(e){this.disabled||(this.isOpen=this.isOpen.map((n,t)=>t===e&&!this.isOpen[t]))}selectProvince(e){this.data.province=e,this.data.district={name:"",code:null},this.data.ward={name:"",code:null},this.isOpen[0]=!1,this.webBuilderService.getDistricts(e.code).then(e=>{this.districts=e.data||[],this.wards=[]})}selectDistrict(e){this.data.district=e,this.data.ward={name:"",code:null},this.isOpen[1]=!1,this.webBuilderService.getWards(e.code).then(e=>{this.wards=e.data||[]})}selectWard(e){this.data.ward=e,this.isOpen[2]=!1}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Hn,deps:[{token:xn},{token:Sn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Hn,isStandalone:!0,selector:"wb-select-province-district-ward",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:'@if (!data.hidden) {\n <div class="select-province-district-ward" [ngStyle]="class[\'select-province-district-ward\']">\n \x3c!-- province --\x3e\n <div class="select" [ngStyle]="class[\'select\']" [class.select--disabled]="disabled">\n <div\n class="select__display"\n [ngStyle]="class[\'select__display\']"\n (click)="toggleDropdown(0)"\n [class.select__display--open]="isOpen[0]"\n >\n <span *ngIf="data.province?.code; else provincePlaceholder">{{ data.province.name }}</span>\n <ng-template #provincePlaceholder\n ><span class="select__placeholder" [ngStyle]="class[\'select__placeholder\']"\n >Chọn tỉnh/thành phố</span\n ></ng-template\n >\n @if (config[\'icon\'][\'is_icon\']) {\n <i\n class="pi pi-{{ config[\'icon\'][\'icon_name\'] }}"\n [class.select__icon--open]="isOpen[0]"\n [ngStyle]="class[\'select__icon\']"\n class="select__icon"\n ></i>\n }\n </div>\n <ul\n class="select__options-dropdown"\n [ngStyle]="class[\'select__options-dropdown\']"\n *ngIf="isOpen[0]"\n >\n <li\n class="select__option-item"\n [ngStyle]="class[\'select__option-item\']"\n *ngFor="let province of provinces"\n (click)="selectProvince(province)"\n >\n <span class="select__option-label" [ngStyle]="class[\'select__option-label\']">{{\n province.name\n }}</span>\n </li>\n </ul>\n </div>\n\n \x3c!-- District --\x3e\n <div\n class="select"\n [ngStyle]="class[\'select\']"\n [class.select--disabled]="disabled || !data.province?.code"\n >\n <div\n class="select__display"\n [ngStyle]="class[\'select__display\']"\n (click)="toggleDropdown(1)"\n [class.select__display--open]="isOpen[1]"\n >\n <span *ngIf="data.district?.code; else districtPlaceholder">{{ data.district?.name }}</span>\n <ng-template #districtPlaceholder\n ><span class="select__placeholder" [ngStyle]="class[\'select__placeholder\']"\n >Chọn quận/huyện</span\n ></ng-template\n >\n @if (config[\'icon\'][\'is_icon\']) {\n <i\n class="pi pi-{{ config[\'icon\'][\'icon_name\'] }}"\n [class.select__icon--open]="isOpen[1]"\n [ngStyle]="class[\'select__icon\']"\n class="select__icon"\n ></i>\n }\n </div>\n <ul\n class="select__options-dropdown"\n [ngStyle]="class[\'select__options-dropdown\']"\n *ngIf="isOpen[1]"\n >\n <li\n class="select__option-item"\n [ngStyle]="class[\'select__option-item\']"\n *ngFor="let district of districts"\n (click)="selectDistrict(district)"\n >\n <span class="select__option-label" [ngStyle]="class[\'select__option-label\']">{{\n district.name\n }}</span>\n </li>\n </ul>\n </div>\n\n \x3c!-- Ward --\x3e\n <div\n class="select"\n [ngStyle]="class[\'select\']"\n [class.select--disabled]="disabled || !data.district?.code"\n >\n <div\n class="select__display"\n [ngStyle]="class[\'select__display\']"\n (click)="toggleDropdown(2)"\n [class.select__display--open]="isOpen[2]"\n >\n <span *ngIf="data.ward?.code; else wardPlaceholder">{{ data.ward?.name }}</span>\n <ng-template #wardPlaceholder\n ><span class="select__placeholder" [ngStyle]="class[\'select__placeholder\']"\n >Chọn phường/xã</span\n ></ng-template\n >\n @if (config[\'icon\'][\'is_icon\']) {\n <i\n class="pi pi-{{ config[\'icon\'][\'icon_name\'] }}"\n [class.select__icon--open]="isOpen[2]"\n [ngStyle]="class[\'select__icon\']"\n class="select__icon"\n ></i>\n }\n </div>\n <ul\n class="select__options-dropdown"\n [ngStyle]="class[\'select__options-dropdown\']"\n *ngIf="isOpen[2]"\n >\n <li\n class="select__option-item"\n [ngStyle]="class[\'select__option-item\']"\n *ngFor="let ward of wards"\n (click)="selectWard(ward)"\n >\n <span class="select__option-label" [ngStyle]="class[\'select__option-label\']">{{\n ward.name\n }}</span>\n </li>\n </ul>\n </div>\n </div>\n}\n',styles:[".select-province-district-ward{display:var(--display);align-items:var(--align-items);flex-direction:var(--flex-direction);gap:var(--gap);width:var(--width);height:var(--height)}.select{width:var(--width);height:var(--height);position:var(--position);font-family:var(--font-family);font-size:var(--font-size);-webkit-user-select:var(--user-select);user-select:var(--user-select)}.select--disabled{opacity:.6;pointer-events:none}.select__display{display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content);padding-left:var(--padding-left);padding-right:var(--padding-right);flex-direction:var(--flex-direction);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);background-color:var(--bg-color);width:var(--width);height:var(--height);cursor:var(--cursor);box-shadow:var(--box-shadow)}.select__placeholder{color:var(--color-placeholder);font-size:var(--font-size-placeholder);font-weight:var(--font-weight-placeholder);font-family:var(--font-family-placeholder);font-style:var(--font-style-placeholder);text-decoration:var(--text-decoration-placeholder);text-transform:var(--text-transform-placeholder)}.select__tags-wrapper{display:var(--display);flex-wrap:var(--flex-wrap);gap:var(--gap)}.select__tag{display:var(--display);align-items:var(--align-items);font-size:var(--font-size);padding:var(--padding);background-color:var(--bg-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius)}.select__tag-remove{display:inline-block;margin-left:6px;font-weight:700;cursor:pointer;color:#555}.select__tag-remove:hover{color:#000}.select__icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.select__icon--open{transform:rotate(180deg)}.select__options-dropdown{position:var(--position);top:var(--top);left:var(--left);right:var(--right);max-height:var(--max-height);overflow-y:var(--overflow-y);margin:var(--margin);padding:var(--padding);list-style:var(--list-style);background-color:var(--bg-color);z-index:var(--z-index);border:var(--border);border-radius:var(--border-radius)}.select__option-item{display:var(--display);align-items:var(--align-items);padding:var(--padding);cursor:var(--cursor);transition:var(--transition)}.select__option-item:hover{background-color:var(--h-bg-color)}.select__checkbox{width:var(--width);height:var(--height);border:var(--border);border-radius:var(--border-radius);margin-right:var(--margin-right);display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content)}.select__checkbox-inner{font-size:var(--font-size);color:var(--color)}.select__option-label{flex-grow:var(--flex-grow);font-size:var(--font-size);color:var(--color)}.select__no-options{padding:var(--padding);color:var(--color);font-style:var(--font-style)}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:C.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Hn,decorators:[{type:l,args:[{selector:"wb-select-province-district-ward",imports:[k],template:'@if (!data.hidden) {\n <div class="select-province-district-ward" [ngStyle]="class[\'select-province-district-ward\']">\n \x3c!-- province --\x3e\n <div class="select" [ngStyle]="class[\'select\']" [class.select--disabled]="disabled">\n <div\n class="select__display"\n [ngStyle]="class[\'select__display\']"\n (click)="toggleDropdown(0)"\n [class.select__display--open]="isOpen[0]"\n >\n <span *ngIf="data.province?.code; else provincePlaceholder">{{ data.province.name }}</span>\n <ng-template #provincePlaceholder\n ><span class="select__placeholder" [ngStyle]="class[\'select__placeholder\']"\n >Chọn tỉnh/thành phố</span\n ></ng-template\n >\n @if (config[\'icon\'][\'is_icon\']) {\n <i\n class="pi pi-{{ config[\'icon\'][\'icon_name\'] }}"\n [class.select__icon--open]="isOpen[0]"\n [ngStyle]="class[\'select__icon\']"\n class="select__icon"\n ></i>\n }\n </div>\n <ul\n class="select__options-dropdown"\n [ngStyle]="class[\'select__options-dropdown\']"\n *ngIf="isOpen[0]"\n >\n <li\n class="select__option-item"\n [ngStyle]="class[\'select__option-item\']"\n *ngFor="let province of provinces"\n (click)="selectProvince(province)"\n >\n <span class="select__option-label" [ngStyle]="class[\'select__option-label\']">{{\n province.name\n }}</span>\n </li>\n </ul>\n </div>\n\n \x3c!-- District --\x3e\n <div\n class="select"\n [ngStyle]="class[\'select\']"\n [class.select--disabled]="disabled || !data.province?.code"\n >\n <div\n class="select__display"\n [ngStyle]="class[\'select__display\']"\n (click)="toggleDropdown(1)"\n [class.select__display--open]="isOpen[1]"\n >\n <span *ngIf="data.district?.code; else districtPlaceholder">{{ data.district?.name }}</span>\n <ng-template #districtPlaceholder\n ><span class="select__placeholder" [ngStyle]="class[\'select__placeholder\']"\n >Chọn quận/huyện</span\n ></ng-template\n >\n @if (config[\'icon\'][\'is_icon\']) {\n <i\n class="pi pi-{{ config[\'icon\'][\'icon_name\'] }}"\n [class.select__icon--open]="isOpen[1]"\n [ngStyle]="class[\'select__icon\']"\n class="select__icon"\n ></i>\n }\n </div>\n <ul\n class="select__options-dropdown"\n [ngStyle]="class[\'select__options-dropdown\']"\n *ngIf="isOpen[1]"\n >\n <li\n class="select__option-item"\n [ngStyle]="class[\'select__option-item\']"\n *ngFor="let district of districts"\n (click)="selectDistrict(district)"\n >\n <span class="select__option-label" [ngStyle]="class[\'select__option-label\']">{{\n district.name\n }}</span>\n </li>\n </ul>\n </div>\n\n \x3c!-- Ward --\x3e\n <div\n class="select"\n [ngStyle]="class[\'select\']"\n [class.select--disabled]="disabled || !data.district?.code"\n >\n <div\n class="select__display"\n [ngStyle]="class[\'select__display\']"\n (click)="toggleDropdown(2)"\n [class.select__display--open]="isOpen[2]"\n >\n <span *ngIf="data.ward?.code; else wardPlaceholder">{{ data.ward?.name }}</span>\n <ng-template #wardPlaceholder\n ><span class="select__placeholder" [ngStyle]="class[\'select__placeholder\']"\n >Chọn phường/xã</span\n ></ng-template\n >\n @if (config[\'icon\'][\'is_icon\']) {\n <i\n class="pi pi-{{ config[\'icon\'][\'icon_name\'] }}"\n [class.select__icon--open]="isOpen[2]"\n [ngStyle]="class[\'select__icon\']"\n class="select__icon"\n ></i>\n }\n </div>\n <ul\n class="select__options-dropdown"\n [ngStyle]="class[\'select__options-dropdown\']"\n *ngIf="isOpen[2]"\n >\n <li\n class="select__option-item"\n [ngStyle]="class[\'select__option-item\']"\n *ngFor="let ward of wards"\n (click)="selectWard(ward)"\n >\n <span class="select__option-label" [ngStyle]="class[\'select__option-label\']">{{\n ward.name\n }}</span>\n </li>\n </ul>\n </div>\n </div>\n}\n',styles:[".select-province-district-ward{display:var(--display);align-items:var(--align-items);flex-direction:var(--flex-direction);gap:var(--gap);width:var(--width);height:var(--height)}.select{width:var(--width);height:var(--height);position:var(--position);font-family:var(--font-family);font-size:var(--font-size);-webkit-user-select:var(--user-select);user-select:var(--user-select)}.select--disabled{opacity:.6;pointer-events:none}.select__display{display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content);padding-left:var(--padding-left);padding-right:var(--padding-right);flex-direction:var(--flex-direction);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);background-color:var(--bg-color);width:var(--width);height:var(--height);cursor:var(--cursor);box-shadow:var(--box-shadow)}.select__placeholder{color:var(--color-placeholder);font-size:var(--font-size-placeholder);font-weight:var(--font-weight-placeholder);font-family:var(--font-family-placeholder);font-style:var(--font-style-placeholder);text-decoration:var(--text-decoration-placeholder);text-transform:var(--text-transform-placeholder)}.select__tags-wrapper{display:var(--display);flex-wrap:var(--flex-wrap);gap:var(--gap)}.select__tag{display:var(--display);align-items:var(--align-items);font-size:var(--font-size);padding:var(--padding);background-color:var(--bg-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius)}.select__tag-remove{display:inline-block;margin-left:6px;font-weight:700;cursor:pointer;color:#555}.select__tag-remove:hover{color:#000}.select__icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.select__icon--open{transform:rotate(180deg)}.select__options-dropdown{position:var(--position);top:var(--top);left:var(--left);right:var(--right);max-height:var(--max-height);overflow-y:var(--overflow-y);margin:var(--margin);padding:var(--padding);list-style:var(--list-style);background-color:var(--bg-color);z-index:var(--z-index);border:var(--border);border-radius:var(--border-radius)}.select__option-item{display:var(--display);align-items:var(--align-items);padding:var(--padding);cursor:var(--cursor);transition:var(--transition)}.select__option-item:hover{background-color:var(--h-bg-color)}.select__checkbox{width:var(--width);height:var(--height);border:var(--border);border-radius:var(--border-radius);margin-right:var(--margin-right);display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content)}.select__checkbox-inner{font-size:var(--font-size);color:var(--color)}.select__option-label{flex-grow:var(--flex-grow);font-size:var(--font-size);color:var(--color)}.select__no-options{padding:var(--padding);color:var(--color);font-style:var(--font-style)}\n"]}]}],ctorParameters:()=>[{type:xn},{type:Sn}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class Gn{webBuilderService;data;device;class;config;animation;type;isClone;product;constructor(e){this.webBuilderService=e}ngOnInit(){this.data.hasOwnProperty("value")||(this.data.value=!1),this.data.value=this.product?.is_default||!1}onClick(){["admin","design"].includes(this.type)||(this.data.value=!this.data.value,console.log("Đặt địa chỉ mặc định:",this.data))}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Gn,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Gn,isStandalone:!0,selector:"wb-button-set-default-address",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:'<button\n *ngIf="!product?.is_default"\n [id]="data._id"\n class="button"\n [ngStyle]="class[\'button\']"\n [style]="animation[\'button\']"\n (click)="onClick()"\n>\n @if (config[\'icon\'][\'is_icon\']) {\n <input\n type="checkbox"\n [(ngModel)]="data.value"\n [ngStyle]="class[\'button__icon\']"\n class="button__icon"\n />\n }\n @if (config.content[webBuilderService.projectWorking.language.default]) {\n <span class="button__content" [ngStyle]="class[\'button__content\']">\n {{ config.content[webBuilderService.projectWorking.language.default] }}\n </span>\n }\n</button>\n',styles:[".button{background-color:var(--bg-color);width:var(--width);height:var(--height);text-align:var(--text-align);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);flex-direction:var(--flex-direction);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform);cursor:var(--cursor);box-shadow:var(--box-shadow)}.button__content{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.button__icon{color:var(--color);width:var(--width);height:var(--height);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.button:hover{background-color:var(--h-bg-color, var(--bg-color));transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform)}.button:hover .button__content{color:var(--h-color-content, var(--color))}.button:hover .button__icon{color:var(--h-color-icon, var(--color))}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.CheckboxControlValueAccessor,selector:"input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Gn,decorators:[{type:l,args:[{selector:"wb-button-set-default-address",imports:[k,B],template:'<button\n *ngIf="!product?.is_default"\n [id]="data._id"\n class="button"\n [ngStyle]="class[\'button\']"\n [style]="animation[\'button\']"\n (click)="onClick()"\n>\n @if (config[\'icon\'][\'is_icon\']) {\n <input\n type="checkbox"\n [(ngModel)]="data.value"\n [ngStyle]="class[\'button__icon\']"\n class="button__icon"\n />\n }\n @if (config.content[webBuilderService.projectWorking.language.default]) {\n <span class="button__content" [ngStyle]="class[\'button__content\']">\n {{ config.content[webBuilderService.projectWorking.language.default] }}\n </span>\n }\n</button>\n',styles:[".button{background-color:var(--bg-color);width:var(--width);height:var(--height);text-align:var(--text-align);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);flex-direction:var(--flex-direction);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);transform:var(--transform);cursor:var(--cursor);box-shadow:var(--box-shadow)}.button__content{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.button__icon{color:var(--color);width:var(--width);height:var(--height);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.button:hover{background-color:var(--h-bg-color, var(--bg-color));transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform)}.button:hover .button__content{color:var(--h-color-content, var(--color))}.button:hover .button__icon{color:var(--h-color-icon, var(--color))}\n"]}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class Kn{webBuilderService;data;device;class;config;animation;type;isClone;product;disabled=!1;isOpen=!1;countries=[];countrySelected=null;constructor(e){this.webBuilderService=e}ngOnInit(){"object_select_country"==this.data.type&&this.product?.country&&(this.data.value=this.product.country),this.webBuilderService.getCountries().then(e=>{this.countries=e.map(e=>({name:e.name.common})).sort((e,n)=>e.name.localeCompare(n.name)),this.product&&this.product.country&&(this.data.value=this.product.country,this.countrySelected=this.countries.find(e=>e.name===this.product.country),"Vietnam"!=this.data.value?this.webBuilderService.notifyChange({name:"do-not-show-province-district-ward"}):this.webBuilderService.notifyChange({name:"show-province-district-ward"}))})}toggleDropdown(){this.disabled||(this.isOpen=!this.isOpen)}selectCountry(e){this.data.value=e.name,this.isOpen=!1,this.countrySelected=e,"Vietnam"!=this.data.value?this.webBuilderService.notifyChange({name:"do-not-show-province-district-ward"}):this.webBuilderService.notifyChange({name:"show-province-district-ward"})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Kn,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Kn,isStandalone:!0,selector:"wb-select-country",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:'<div class="select-country" [ngStyle]="class[\'select-country\']">\n \x3c!-- province --\x3e\n <div class="select" [ngStyle]="class[\'select\']" [class.select--disabled]="disabled">\n <div\n class="select__display"\n [ngStyle]="class[\'select__display\']"\n (click)="toggleDropdown()"\n [class.select__display--open]="isOpen"\n >\n <span *ngIf="countrySelected; else provincePlaceholder">{{ countrySelected.name }}</span>\n <ng-template #provincePlaceholder\n ><span class="select__placeholder" [ngStyle]="class[\'select__placeholder\']"\n >Chọn quốc gia</span\n ></ng-template\n >\n @if (config[\'icon\'][\'is_icon\']) {\n <i\n class="pi pi-{{ config[\'icon\'][\'icon_name\'] }}"\n [class.select__icon--open]="isOpen"\n [ngStyle]="class[\'select__icon\']"\n class="select__icon"\n ></i>\n }\n </div>\n <ul\n class="select__options-dropdown"\n [ngStyle]="class[\'select__options-dropdown\']"\n *ngIf="isOpen"\n >\n <li\n class="select__option-item"\n [ngStyle]="class[\'select__option-item\']"\n *ngFor="let country of countries"\n (click)="selectCountry(country)"\n >\n <span class="select__option-label" [ngStyle]="class[\'select__option-label\']">{{\n country.name\n }}</span>\n </li>\n </ul>\n </div>\n</div>\n',styles:[".select{width:var(--width);height:var(--height);position:var(--position);font-family:var(--font-family);font-size:var(--font-size);-webkit-user-select:var(--user-select);user-select:var(--user-select)}.select--disabled{opacity:.6;pointer-events:none}.select__display{display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content);padding-left:var(--padding-left);padding-right:var(--padding-right);flex-direction:var(--flex-direction);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);background-color:var(--bg-color);width:var(--width);height:var(--height);cursor:var(--cursor);box-shadow:var(--box-shadow)}.select__placeholder{color:var(--color-placeholder);font-size:var(--font-size-placeholder);font-weight:var(--font-weight-placeholder);font-family:var(--font-family-placeholder);font-style:var(--font-style-placeholder);text-decoration:var(--text-decoration-placeholder);text-transform:var(--text-transform-placeholder)}.select__tags-wrapper{display:var(--display);flex-wrap:var(--flex-wrap);gap:var(--gap)}.select__tag{display:var(--display);align-items:var(--align-items);font-size:var(--font-size);padding:var(--padding);background-color:var(--bg-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius)}.select__tag-remove{display:inline-block;margin-left:6px;font-weight:700;cursor:pointer;color:#555}.select__tag-remove:hover{color:#000}.select__icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.select__icon--down{transform:rotate(0)}.select__icon--up{transform:rotate(180deg)}.select__options-dropdown{position:var(--position);top:var(--top);left:var(--left);right:var(--right);max-height:var(--max-height);overflow-y:var(--overflow-y);margin:var(--margin);padding:var(--padding);list-style:var(--list-style);background-color:var(--bg-color);z-index:var(--z-index);border:var(--border);border-radius:var(--border-radius)}.select__option-item{display:var(--display);align-items:var(--align-items);padding:var(--padding);cursor:var(--cursor);transition:var(--transition)}.select__option-item:hover{background-color:var(--h-bg-color)}.select__checkbox{width:var(--width);height:var(--height);border:var(--border);border-radius:var(--border-radius);margin-right:var(--margin-right);display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content)}.select__checkbox-inner{font-size:var(--font-size);color:var(--color)}.select__option-label{flex-grow:var(--flex-grow);font-size:var(--font-size);color:var(--color)}.select__no-options{padding:var(--padding);color:var(--color);font-style:var(--font-style)}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:C.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Kn,decorators:[{type:l,args:[{selector:"wb-select-country",imports:[k],template:'<div class="select-country" [ngStyle]="class[\'select-country\']">\n \x3c!-- province --\x3e\n <div class="select" [ngStyle]="class[\'select\']" [class.select--disabled]="disabled">\n <div\n class="select__display"\n [ngStyle]="class[\'select__display\']"\n (click)="toggleDropdown()"\n [class.select__display--open]="isOpen"\n >\n <span *ngIf="countrySelected; else provincePlaceholder">{{ countrySelected.name }}</span>\n <ng-template #provincePlaceholder\n ><span class="select__placeholder" [ngStyle]="class[\'select__placeholder\']"\n >Chọn quốc gia</span\n ></ng-template\n >\n @if (config[\'icon\'][\'is_icon\']) {\n <i\n class="pi pi-{{ config[\'icon\'][\'icon_name\'] }}"\n [class.select__icon--open]="isOpen"\n [ngStyle]="class[\'select__icon\']"\n class="select__icon"\n ></i>\n }\n </div>\n <ul\n class="select__options-dropdown"\n [ngStyle]="class[\'select__options-dropdown\']"\n *ngIf="isOpen"\n >\n <li\n class="select__option-item"\n [ngStyle]="class[\'select__option-item\']"\n *ngFor="let country of countries"\n (click)="selectCountry(country)"\n >\n <span class="select__option-label" [ngStyle]="class[\'select__option-label\']">{{\n country.name\n }}</span>\n </li>\n </ul>\n </div>\n</div>\n',styles:[".select{width:var(--width);height:var(--height);position:var(--position);font-family:var(--font-family);font-size:var(--font-size);-webkit-user-select:var(--user-select);user-select:var(--user-select)}.select--disabled{opacity:.6;pointer-events:none}.select__display{display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content);padding-left:var(--padding-left);padding-right:var(--padding-right);flex-direction:var(--flex-direction);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);background-color:var(--bg-color);width:var(--width);height:var(--height);cursor:var(--cursor);box-shadow:var(--box-shadow)}.select__placeholder{color:var(--color-placeholder);font-size:var(--font-size-placeholder);font-weight:var(--font-weight-placeholder);font-family:var(--font-family-placeholder);font-style:var(--font-style-placeholder);text-decoration:var(--text-decoration-placeholder);text-transform:var(--text-transform-placeholder)}.select__tags-wrapper{display:var(--display);flex-wrap:var(--flex-wrap);gap:var(--gap)}.select__tag{display:var(--display);align-items:var(--align-items);font-size:var(--font-size);padding:var(--padding);background-color:var(--bg-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius)}.select__tag-remove{display:inline-block;margin-left:6px;font-weight:700;cursor:pointer;color:#555}.select__tag-remove:hover{color:#000}.select__icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.select__icon--down{transform:rotate(0)}.select__icon--up{transform:rotate(180deg)}.select__options-dropdown{position:var(--position);top:var(--top);left:var(--left);right:var(--right);max-height:var(--max-height);overflow-y:var(--overflow-y);margin:var(--margin);padding:var(--padding);list-style:var(--list-style);background-color:var(--bg-color);z-index:var(--z-index);border:var(--border);border-radius:var(--border-radius)}.select__option-item{display:var(--display);align-items:var(--align-items);padding:var(--padding);cursor:var(--cursor);transition:var(--transition)}.select__option-item:hover{background-color:var(--h-bg-color)}.select__checkbox{width:var(--width);height:var(--height);border:var(--border);border-radius:var(--border-radius);margin-right:var(--margin-right);display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content)}.select__checkbox-inner{font-size:var(--font-size);color:var(--color)}.select__option-label{flex-grow:var(--flex-grow);font-size:var(--font-size);color:var(--color)}.select__no-options{padding:var(--padding);color:var(--color);font-style:var(--font-style)}\n"]}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class Xn{webBuilderService;router;route;data;device;class;config;animation;type;isClone;product;linkPage;constructor(e,n,t){this.webBuilderService=e,this.router=n,this.route=t}ngOnInit(){this.route.params.subscribe(e=>{this.linkPage=[e.link,e.slug].filter(Boolean).join("/")});const e=n=>{n.forEach(n=>{n.expanded=!1,n.children&&n.children.length>0&&e(n.children)})};this.config&&this.config.data_list&&e(this.config.data_list)}handleChooseItem(e,n,t){e.stopPropagation(),"design"==this.type||"admin"==this.type?this.data.key!=n.key?this.data.key=n.key:this.data.key="":this.onClick(n)}onClick(e){const{projectWorking:n}=this.webBuilderService,{link:t,type:i}=e.router;"none"!=i&&"design"!=this.type&&"admin"!=this.type&&("url"==i?window.open(this.config.url,"_blank"):i.includes("link")&&("preview"===this.type?this.router.navigate([`${n._id}/preview-web`,...t.split("/")]):this.router.navigate(["",...t.split("/")])))}handleOpenMenuMobile(e,n){n.expanded=!n.expanded}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Xn,deps:[{token:xn},{token:P.Router},{token:P.ActivatedRoute}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Xn,isStandalone:!0,selector:"wb-menu-mobile",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:'<div class="menu-mobile" [ngStyle]="class[\'menu-mobile\']">\n @for (item of config.data_list; track $index) {\n <ng-container\n *ngTemplateOutlet="renderMenu; context: { $implicit: item, depth: 0 }"\n ></ng-container>\n }\n</div>\n\n<ng-template #renderMenu let-item let-depth="depth">\n <div\n class="+menu-mobile__item -menu-mobile__item"\n [class.+menu-mobile__item--child]="depth > 0"\n [class.-menu-mobile__item--child]="depth > 0"\n [class.hover]="data.hover && data.hover == item.key"\n [ngStyle]="\n class[\n ((\n type == \'design\'\n ? item.expanded\n : item.expanded || (item.router.type != \'none\' && linkPage == item.router.link)\n )\n ? \'+\'\n : \'-\') +\n \'menu-mobile__item\' +\n (depth > 0 ? \'--child\' : \'\')\n ]\n "\n >\n <div\n class="flex justify-between w-full items-center"\n [style.padding-left]="\'calc(\' + depth * 5 + \'px)\'"\n >\n @if (item.icon_before) {\n <nz-icon\n [nzType]="item.icon_before"\n [ngStyle]="class[\'menu-mobile__item-icon-before\' + (depth > 0 ? \'--child\' : \'\')]"\n class="+menu-mobile__item-icon-before -menu-mobile__item-icon-before"\n [class.+menu-mobile__item-icon-before--child]="depth > 0"\n [class.-menu-mobile__item-icon-before--child]="depth > 0"\n nzTheme="outline"\n />\n }\n <div\n class="+menu-mobile__item-content -menu-mobile__item-content"\n [class.+menu-mobile__item-content--child]="depth > 0"\n [class.-menu-mobile__item-content--child]="depth > 0"\n [ngStyle]="\n class[\n ((\n type == \'design\'\n ? item.expanded\n : item.expanded || (item.router.type != \'none\' && linkPage == item.router.link)\n )\n ? \'+\'\n : \'-\') +\n \'menu-mobile__item-content\' +\n (depth > 0 ? \'--child\' : \'\')\n ]\n "\n (click)="handleChooseItem($event, item, depth)"\n >\n {{ item.label[webBuilderService.projectWorking.language.default] }}\n </div>\n @if (item.icon_after) {\n <nz-icon\n [nzType]="item.icon_after"\n [ngStyle]="\n class[\n ((\n type == \'design\'\n ? item.expanded\n : item.expanded || (item.router.type != \'none\' && linkPage == item.router.link)\n )\n ? \'+\'\n : \'-\') +\n \'menu-mobile__item-icon-after\' +\n (depth > 0 ? \'--child\' : \'\')\n ]\n "\n class="+menu-mobile__item-icon-after -menu-mobile__item-icon-after"\n [class.+menu-mobile__item-icon-after--child]="depth > 0"\n [class.-menu-mobile__item-icon-after--child]="depth > 0"\n (click)="handleOpenMenuMobile($event, item)"\n nzTheme="outline"\n />\n }\n </div>\n @if (item.children?.length) {\n <div\n class="menu-mobile__children"\n [ngClass]="{ open: item.expanded }"\n [ngStyle]="class[\'menu-mobile__children\']"\n >\n @for (child of item.children; track $index) {\n <ng-container\n *ngTemplateOutlet="renderMenu; context: { $implicit: child, depth: (depth || 0) + 1 }"\n ></ng-container>\n }\n </div>\n }\n </div>\n</ng-template>\n',styles:[".menu-mobile{display:var(--display);width:var(--width);height:var(--height);box-shadow:var(--box-shadow);flex-direction:var(--flex-direction)}.menu-mobile .\\+menu-mobile__item,.menu-mobile .-menu-mobile__item{width:var(--width);display:var(--display);flex-direction:column;justify-content:var(--justify-content);align-items:var(--align-items);justify-content:left;background-color:var(--bg-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);white-space:nowrap}.menu-mobile .\\+menu-mobile__item .\\+menu-mobile__item-icon-before,.menu-mobile .-menu-mobile__item .\\+menu-mobile__item-icon-before,.menu-mobile .\\+menu-mobile__item .-menu-mobile__item-icon-before,.menu-mobile .-menu-mobile__item .-menu-mobile__item-icon-before{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-mobile .\\+menu-mobile__item .\\+menu-mobile__item-content,.menu-mobile .-menu-mobile__item .\\+menu-mobile__item-content,.menu-mobile .\\+menu-mobile__item .-menu-mobile__item-content,.menu-mobile .-menu-mobile__item .-menu-mobile__item-content{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-mobile .\\+menu-mobile__item .\\+menu-mobile__item-icon-after,.menu-mobile .-menu-mobile__item .\\+menu-mobile__item-icon-after,.menu-mobile .\\+menu-mobile__item .-menu-mobile__item-icon-after,.menu-mobile .-menu-mobile__item .-menu-mobile__item-icon-after{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-mobile__children{display:flex;flex-direction:var(--flex-direction);justify-content:var(--justify-content);align-items:var(--align-items);width:100%;top:var(--top);left:var(--left);right:var(--right);z-index:var(--z-index, 100);box-shadow:var(--box-shadow);max-height:0;overflow:hidden}.menu-mobile__children .menu-mobile__children{top:var(--top-2, 0);left:var(--left-2);right:var(--right-2)}.menu-mobile__children .\\+menu-mobile__item--child,.menu-mobile__children .-menu-mobile__item--child{width:var(--width);height:var(--height);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);background-color:var(--bg-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);white-space:nowrap}.menu-mobile__children .\\+menu-mobile__item-icon-before--child,.menu-mobile__children .-menu-mobile__item-icon-before--child{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-mobile__children .\\+menu-mobile__item-content--child,.menu-mobile__children .-menu-mobile__item-content--child{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-mobile__children .\\+menu-mobile__item-icon-after--child,.menu-mobile__children .-menu-mobile__item-icon-after--child{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-mobile .menu-mobile__children.open{max-height:unset}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:C.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Xn,decorators:[{type:l,args:[{selector:"wb-menu-mobile",imports:[k,j],template:'<div class="menu-mobile" [ngStyle]="class[\'menu-mobile\']">\n @for (item of config.data_list; track $index) {\n <ng-container\n *ngTemplateOutlet="renderMenu; context: { $implicit: item, depth: 0 }"\n ></ng-container>\n }\n</div>\n\n<ng-template #renderMenu let-item let-depth="depth">\n <div\n class="+menu-mobile__item -menu-mobile__item"\n [class.+menu-mobile__item--child]="depth > 0"\n [class.-menu-mobile__item--child]="depth > 0"\n [class.hover]="data.hover && data.hover == item.key"\n [ngStyle]="\n class[\n ((\n type == \'design\'\n ? item.expanded\n : item.expanded || (item.router.type != \'none\' && linkPage == item.router.link)\n )\n ? \'+\'\n : \'-\') +\n \'menu-mobile__item\' +\n (depth > 0 ? \'--child\' : \'\')\n ]\n "\n >\n <div\n class="flex justify-between w-full items-center"\n [style.padding-left]="\'calc(\' + depth * 5 + \'px)\'"\n >\n @if (item.icon_before) {\n <nz-icon\n [nzType]="item.icon_before"\n [ngStyle]="class[\'menu-mobile__item-icon-before\' + (depth > 0 ? \'--child\' : \'\')]"\n class="+menu-mobile__item-icon-before -menu-mobile__item-icon-before"\n [class.+menu-mobile__item-icon-before--child]="depth > 0"\n [class.-menu-mobile__item-icon-before--child]="depth > 0"\n nzTheme="outline"\n />\n }\n <div\n class="+menu-mobile__item-content -menu-mobile__item-content"\n [class.+menu-mobile__item-content--child]="depth > 0"\n [class.-menu-mobile__item-content--child]="depth > 0"\n [ngStyle]="\n class[\n ((\n type == \'design\'\n ? item.expanded\n : item.expanded || (item.router.type != \'none\' && linkPage == item.router.link)\n )\n ? \'+\'\n : \'-\') +\n \'menu-mobile__item-content\' +\n (depth > 0 ? \'--child\' : \'\')\n ]\n "\n (click)="handleChooseItem($event, item, depth)"\n >\n {{ item.label[webBuilderService.projectWorking.language.default] }}\n </div>\n @if (item.icon_after) {\n <nz-icon\n [nzType]="item.icon_after"\n [ngStyle]="\n class[\n ((\n type == \'design\'\n ? item.expanded\n : item.expanded || (item.router.type != \'none\' && linkPage == item.router.link)\n )\n ? \'+\'\n : \'-\') +\n \'menu-mobile__item-icon-after\' +\n (depth > 0 ? \'--child\' : \'\')\n ]\n "\n class="+menu-mobile__item-icon-after -menu-mobile__item-icon-after"\n [class.+menu-mobile__item-icon-after--child]="depth > 0"\n [class.-menu-mobile__item-icon-after--child]="depth > 0"\n (click)="handleOpenMenuMobile($event, item)"\n nzTheme="outline"\n />\n }\n </div>\n @if (item.children?.length) {\n <div\n class="menu-mobile__children"\n [ngClass]="{ open: item.expanded }"\n [ngStyle]="class[\'menu-mobile__children\']"\n >\n @for (child of item.children; track $index) {\n <ng-container\n *ngTemplateOutlet="renderMenu; context: { $implicit: child, depth: (depth || 0) + 1 }"\n ></ng-container>\n }\n </div>\n }\n </div>\n</ng-template>\n',styles:[".menu-mobile{display:var(--display);width:var(--width);height:var(--height);box-shadow:var(--box-shadow);flex-direction:var(--flex-direction)}.menu-mobile .\\+menu-mobile__item,.menu-mobile .-menu-mobile__item{width:var(--width);display:var(--display);flex-direction:column;justify-content:var(--justify-content);align-items:var(--align-items);justify-content:left;background-color:var(--bg-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);white-space:nowrap}.menu-mobile .\\+menu-mobile__item .\\+menu-mobile__item-icon-before,.menu-mobile .-menu-mobile__item .\\+menu-mobile__item-icon-before,.menu-mobile .\\+menu-mobile__item .-menu-mobile__item-icon-before,.menu-mobile .-menu-mobile__item .-menu-mobile__item-icon-before{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-mobile .\\+menu-mobile__item .\\+menu-mobile__item-content,.menu-mobile .-menu-mobile__item .\\+menu-mobile__item-content,.menu-mobile .\\+menu-mobile__item .-menu-mobile__item-content,.menu-mobile .-menu-mobile__item .-menu-mobile__item-content{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-mobile .\\+menu-mobile__item .\\+menu-mobile__item-icon-after,.menu-mobile .-menu-mobile__item .\\+menu-mobile__item-icon-after,.menu-mobile .\\+menu-mobile__item .-menu-mobile__item-icon-after,.menu-mobile .-menu-mobile__item .-menu-mobile__item-icon-after{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-mobile__children{display:flex;flex-direction:var(--flex-direction);justify-content:var(--justify-content);align-items:var(--align-items);width:100%;top:var(--top);left:var(--left);right:var(--right);z-index:var(--z-index, 100);box-shadow:var(--box-shadow);max-height:0;overflow:hidden}.menu-mobile__children .menu-mobile__children{top:var(--top-2, 0);left:var(--left-2);right:var(--right-2)}.menu-mobile__children .\\+menu-mobile__item--child,.menu-mobile__children .-menu-mobile__item--child{width:var(--width);height:var(--height);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);background-color:var(--bg-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);white-space:nowrap}.menu-mobile__children .\\+menu-mobile__item-icon-before--child,.menu-mobile__children .-menu-mobile__item-icon-before--child{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-mobile__children .\\+menu-mobile__item-content--child,.menu-mobile__children .-menu-mobile__item-content--child{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-mobile__children .\\+menu-mobile__item-icon-after--child,.menu-mobile__children .-menu-mobile__item-icon-after--child{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.menu-mobile .menu-mobile__children.open{max-height:unset}\n"]}]}],ctorParameters:()=>[{type:xn},{type:P.Router},{type:P.ActivatedRoute}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class qn{webBuilderService;functionService;data;device;class;config;animation;type;isClone;product;imgs=[];changeNumberImgsSub;constructor(e,n){this.webBuilderService=e,this.functionService=n}ngOnInit(){this.changeNumberImgsSub=this.webBuilderService.onNotifyChange(e=>{"change-number-imgs"==e.name&&e._id==this.data._id&&this.onChangeImgs()}),this.onChangeImgs()}onChangeImgs(){"design"==this.type||"admin"==this.type?this.imgs=Array.from({length:this.config.total_imgs},(e,n)=>`https://primefaces.org/cdn/primeng/images/galleria/galleria${n+1}.jpg`):this.imgs=this.product?.imgs}handleNext(){const{slide_method:e}=this.config.slide;"frame"==e?this.functionService.handleNextPrevFrame(this,"next","frame-products__grid"):"col"==e&&this.functionService.handleNextPrevCol(this,"next","frame-products__grid")}handlePrev(){const{slide_method:e}=this.config.slide;"frame"==e?this.functionService.handleNextPrevFrame(this,"prev","frame-products__grid"):"col"==e&&this.functionService.handleNextPrevCol(this,"prev","frame-products__grid")}handleImgClick(e){this.product.img=e}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:qn,deps:[{token:xn},{token:On}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:qn,isStandalone:!0,selector:"wb-product-image-list",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:'<div *ngIf="imgs.length > 1" class="product-image-list" [ngStyle]="class[\'product-image-list\']">\n <div\n *ngFor="let img of imgs"\n [class]="img == product?.img ? \'+product-image-list__item\' : \'-product-image-list__item\'"\n [ngStyle]="\n class[img == product?.img ? \'+product-image-list__item\' : \'-product-image-list__item\']\n "\n [style]="animation[\'-product-image-list__item\']"\n >\n <img\n (click)="handleImgClick(img)"\n draggable="false"\n class="product-image-list__img"\n [ngStyle]="class[\'product-image-list__img\']"\n [style]="animation[\'product-image-list__img\']"\n [src]="img"\n />\n </div>\n\n @if (config.slide?.is_icon) {\n <button\n class="product-image-list__btn-left"\n [ngStyle]="class[\'product-image-list__btn-left\']"\n (click)="handlePrev()"\n >\n <i\n class="pi pi-{{ config[\'icon_left\'][\'icon_name\'] }}"\n class="product-image-list__btn-left-icon"\n [ngStyle]="class[\'product-image-list__btn-left-icon\']"\n ></i>\n </button>\n\n <button\n class="product-image-list__btn-right"\n [ngStyle]="class[\'product-image-list__btn-right\']"\n (click)="handleNext()"\n >\n <i\n class="pi pi-{{ config[\'icon_right\'][\'icon_name\'] }}"\n class="product-image-list__btn-right-icon"\n [ngStyle]="class[\'product-image-list__btn-right-icon\']"\n ></i>\n </button>\n }\n</div>\n',styles:[".product-image-list{width:var(--width);height:var(--height);overflow:var(--overflow);display:var(--display);gap:var(--gap);grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);position:var(--position)}.product-image-list .\\+product-image-list__item,.product-image-list .-product-image-list__item{width:var(--width);height:var(--height);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-style:var(--border-style);border-top-width:var(--border-top-width);border-right-width:var(--border-right-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-color:var(--border-color)}.product-image-list .-product-image-list__item:hover{background-color:var(--h-bg-color, var(--bg-color));border-color:var(--h-border-color, var(--border-color));transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform)}.product-image-list__img{width:var(--width);height:var(--height);object-fit:var(--object-fit)}.product-image-list .product-image-list__btn-right,.product-image-list .product-image-list__btn-left{position:var(--position);top:var(--top);transform:var(--transform);z-index:var(--z-index);width:var(--width);height:var(--height);left:var(--left);background-color:var(--bg-color);right:var(--right);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);display:var(--display);place-items:var(--place-items);cursor:var(--pointer);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color)}.product-image-list .product-image-list__btn-right .product-image-list__btn-right-icon,.product-image-list .product-image-list__btn-left .product-image-list__btn-right-icon,.product-image-list .product-image-list__btn-right .product-image-list__btn-left-icon,.product-image-list .product-image-list__btn-left .product-image-list__btn-left-icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:C.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:qn,decorators:[{type:l,args:[{selector:"wb-product-image-list",imports:[k],template:'<div *ngIf="imgs.length > 1" class="product-image-list" [ngStyle]="class[\'product-image-list\']">\n <div\n *ngFor="let img of imgs"\n [class]="img == product?.img ? \'+product-image-list__item\' : \'-product-image-list__item\'"\n [ngStyle]="\n class[img == product?.img ? \'+product-image-list__item\' : \'-product-image-list__item\']\n "\n [style]="animation[\'-product-image-list__item\']"\n >\n <img\n (click)="handleImgClick(img)"\n draggable="false"\n class="product-image-list__img"\n [ngStyle]="class[\'product-image-list__img\']"\n [style]="animation[\'product-image-list__img\']"\n [src]="img"\n />\n </div>\n\n @if (config.slide?.is_icon) {\n <button\n class="product-image-list__btn-left"\n [ngStyle]="class[\'product-image-list__btn-left\']"\n (click)="handlePrev()"\n >\n <i\n class="pi pi-{{ config[\'icon_left\'][\'icon_name\'] }}"\n class="product-image-list__btn-left-icon"\n [ngStyle]="class[\'product-image-list__btn-left-icon\']"\n ></i>\n </button>\n\n <button\n class="product-image-list__btn-right"\n [ngStyle]="class[\'product-image-list__btn-right\']"\n (click)="handleNext()"\n >\n <i\n class="pi pi-{{ config[\'icon_right\'][\'icon_name\'] }}"\n class="product-image-list__btn-right-icon"\n [ngStyle]="class[\'product-image-list__btn-right-icon\']"\n ></i>\n </button>\n }\n</div>\n',styles:[".product-image-list{width:var(--width);height:var(--height);overflow:var(--overflow);display:var(--display);gap:var(--gap);grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);position:var(--position)}.product-image-list .\\+product-image-list__item,.product-image-list .-product-image-list__item{width:var(--width);height:var(--height);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-style:var(--border-style);border-top-width:var(--border-top-width);border-right-width:var(--border-right-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-color:var(--border-color)}.product-image-list .-product-image-list__item:hover{background-color:var(--h-bg-color, var(--bg-color));border-color:var(--h-border-color, var(--border-color));transition-duration:var(--h-transition-duration);transition-property:all;transition-timing-function:var(--h-transition-timing-function);opacity:var(--h-opacity);transform:var(--h-transform)}.product-image-list__img{width:var(--width);height:var(--height);object-fit:var(--object-fit)}.product-image-list .product-image-list__btn-right,.product-image-list .product-image-list__btn-left{position:var(--position);top:var(--top);transform:var(--transform);z-index:var(--z-index);width:var(--width);height:var(--height);left:var(--left);background-color:var(--bg-color);right:var(--right);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);display:var(--display);place-items:var(--place-items);cursor:var(--pointer);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color)}.product-image-list .product-image-list__btn-right .product-image-list__btn-right-icon,.product-image-list .product-image-list__btn-left .product-image-list__btn-right-icon,.product-image-list .product-image-list__btn-right .product-image-list__btn-left-icon,.product-image-list .product-image-list__btn-left .product-image-list__btn-left-icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}\n"]}]}],ctorParameters:()=>[{type:xn},{type:On}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class Un{webBuilderService;route;router;map;data;device;class;config;animation;type;isClone;product;loading=!0;products=[];pageCurrent=1;totalPages=1;limit=10;pageShowChoose=[0,1,2];pageGoto=1;changeGridSub;qpSub;constructor(e,n,t,i){this.webBuilderService=e,this.route=n,this.router=t,this.map=i}ngOnInit(){this.qpSub=this.route.queryParams.subscribe(e=>{if(0==Object.keys(e).length)return;const n=e.page;this.pageCurrent=n?Number(n):1,this.handleGetProduct()}),this.changeGridSub=this.webBuilderService.onNotifyChange(e=>{"change-grid"==e.name&&e._id==this.data._id&&this.calcProducts()}),this.route.url.subscribe(()=>{this.handleGetProduct()})}ngOnDestroy(){this.changeGridSub?.unsubscribe(),this.qpSub?.unsubscribe()}handleGetProduct(){const e=this.route.snapshot.url[this.route.snapshot.url.length-1]?.path,{cols:n,rows:t}=this.config.grid;if(this.limit=n*t,["design","admin"].includes(this.type))this.calcProducts(),this.loading=!1,this.totalPages=12;else if("frame_products_by_category"==this.data.type){this.loading=!0;const n={...this.route.snapshot.queryParams};delete n.page;const t={};for(const e in n)if("price"==e){const i=n[e].split(",").map(e=>e.trim()).filter(Boolean);t.$or=i.map(e=>{const[n,t]=e.split("-").map(Number);return{price:{...void 0!==n?{$gte:n}:{},...void 0!==t&&0!==t?{$lte:t}:{}}}})}else t[e]={$in:n[e].split(",").map(e=>e.trim()).filter(Boolean)};this.webBuilderService.getProducts_byCategoryLink(e,t,{},this.pageCurrent,this.limit).then(e=>{console.log("--getProducts_byCategoryLink"),0===e.vcode&&(this.products=e.data.map(e=>({...e,...e.variations[0],index_img:0,quantity:1})),this.totalPages=e.totalpages,this.updateListPage())}).finally(()=>this.loading=!1)}}calcProducts(){this.products=[];const{cols:e,rows:n}=this.data[this.device+"_config"].grid;for(let t=1;t<=e*n;t++)this.products.push({_id:`product-${t}`,name:{vi:`Sản phẩm ${t}`},desc:{vi:`Mô tả sản phẩm ${t}`},desc_short:{vi:`Mô tả ngắn sản phẩm ${t}`},price:1e5,stock:532,id_categorys:[],manysize:!1,imgs:["https://115.78.228.208:20350/autowebapp/VvTRmO6jW8u7coEk4qZd//images/design/sneaker.jpeg"],img:"https://115.78.228.208:20350/autowebapp/VvTRmO6jW8u7coEk4qZd//images/design/sneaker.jpeg",tier_variations:[],models:[],link:`san-pham-${t}`})}gotoPreviousPage(){this.pageCurrent>1&&this.transferFn(this.pageCurrent-1)}gotoNextPage(){this.pageCurrent<this.totalPages&&this.transferFn(this.pageCurrent+1)}updateListPage(){this.pageCurrent<this.totalPages&&this.pageCurrent,this.pageShowChoose=this.pageShowChoose.map((e,n)=>this.pageCurrent+n-1)}transferFn(e){e!=this.pageCurrent&&(this.pageCurrent=Number(e),this.pageGoto=Number(e),this.updateListPage(),this.router.navigate([],{relativeTo:this.route,queryParams:{page:this.pageCurrent},queryParamsHandling:"merge"}))}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Un,deps:[{token:xn},{token:P.ActivatedRoute},{token:P.Router},{token:tt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Un,isStandalone:!0,selector:"wb-frame-products-by-category",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:'<div\n [id]="data._id"\n class="frame-products-by-category"\n [ngStyle]="class[\'frame-products-by-category\']"\n>\n <div\n class="frame-products-by-category__grid"\n [ngStyle]="class[\'frame-products-by-category__grid\']"\n >\n @if (!loading && products && products.length > 0) {\n @for (\n product of products;\n track product._id ?? product.id_product;\n let productIndex = $index\n ) {\n <div\n class="frame-products-by-category__item"\n [ngStyle]="class[\'frame-products-by-category__item\']"\n #dragBoundary\n >\n @for (object of data.objects; track object._id; let objectIndex = $index) {\n @if (productIndex == 0) {\n <div\n class="w-fit inline-block"\n wbdragdrop\n [parent]="data"\n [mode]="object[device + \'_config\'].drag_mode"\n [boundaryEle]="dragBoundary"\n [data]="object"\n [device]="device"\n [type]="type"\n [top]="object[device + \'_position_\' + data._id].top"\n [left]="object[device + \'_position_\' + data._id].left"\n [ngStyle]="{\n \'pointer-events\':\n [\'design\', \'admin\'].includes(type) && data.is_clone ? \'none\' : \'auto\'\n }"\n >\n <ng-container\n *ngComponentOutlet="\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + \'_class\'],\n config: object[device + \'_config\'],\n animation: object[device + \'_animation\'],\n isClone:\n [\'design\', \'admin\'].includes(type) && isClone ? isClone : data.is_clone,\n product: product\n }\n "\n >\n </ng-container>\n </div>\n } @else {\n <div\n class="w-fit inline-block"\n wbdragdrop\n [parent]="data"\n [mode]="object[device + \'_config\'].drag_mode"\n [boundaryEle]="dragBoundary"\n [data]="object"\n [device]="device"\n [type]="type"\n [top]="object[device + \'_position_\' + data._id].top"\n [left]="object[device + \'_position_\' + data._id].left"\n [ngStyle]="{\n opacity: [\'design\', \'admin\'].includes(type) ? 0.5 : 1,\n \'pointer-events\': [\'design\', \'admin\'].includes(type) ? \'none\' : \'auto\'\n }"\n >\n <ng-container\n *ngComponentOutlet="\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + \'_class\'],\n config: object[device + \'_config\'],\n animation: object[device + \'_animation\'],\n product: product,\n isClone: [\'design\', \'admin\'].includes(type)\n }\n "\n >\n </ng-container>\n </div>\n }\n }\n </div>\n }\n } @else if (!loading && products && products.length === 0) {\n <div\n class="frame-products-by-category__not-found"\n [ngStyle]="class[\'frame-products-by-category__not-found\']"\n >\n {{ config.not_found[webBuilderService.projectWorking.language.default] }}\n </div>\n } @else if (loading) {\n <div class="loading">\n <div class="w-16 h-16 rounded show-lg flex justify-center items-center">\n <i class="pi pi-spinner-dotted animate-spin" style="font-size: 1.5rem"></i>\n </div>\n </div>\n }\n </div>\n\n <div\n *ngIf="!config.hide_pagination && totalPages"\n class="frame-products-by-category__pagination"\n [ngStyle]="class[\'frame-products-by-category__pagination\']"\n >\n <div\n class="frame-products-by-category__pagination-list"\n [ngStyle]="class[\'frame-products-by-category__pagination-list\']"\n >\n \x3c!-- Biểu tượng previous --\x3e\n <div\n *ngIf="!config.hide_icon"\n class="-frame-products-by-category__pagination-item"\n [ngStyle]="class[\'-frame-products-by-category__pagination-item\']"\n (click)="gotoPreviousPage()"\n >\n <i class="pi pi-caret-left"></i>\n </div>\n\n \x3c!-- Trang đầu --\x3e\n <div\n class="-frame-products-by-category__pagination-item"\n [ngStyle]="class[\'-frame-products-by-category__pagination-item\']"\n *ngIf="totalPages >= 3 && pageCurrent >= 3"\n (click)="transferFn(1)"\n >\n 1\n </div>\n\n <div\n class="-frame-products-by-category__pagination-item"\n [ngStyle]="class[\'-frame-products-by-category__pagination-item\']"\n *ngIf="totalPages > 3 && pageCurrent > 3"\n >\n ...\n </div>\n\n <ng-container *ngFor="let page of pageShowChoose">\n <div\n [class]="\n (page === pageCurrent ? \'+\' : \'-\') + \'frame-products-by-category__pagination-item\'\n "\n [ngStyle]="\n class[\n (page === pageCurrent ? \'+\' : \'-\') + \'frame-products-by-category__pagination-item\'\n ]\n "\n *ngIf="page <= totalPages && page > 0"\n (click)="transferFn(page)"\n >\n {{ page }}\n </div>\n </ng-container>\n\n \x3c!-- Trang cuối --\x3e\n <div\n *ngIf="totalPages > 3 && pageCurrent < totalPages - 2"\n class="-frame-products-by-category__pagination-item"\n [ngStyle]="class[\'-frame-products-by-category__pagination-item\']"\n >\n ...\n </div>\n <div\n *ngIf="totalPages >= 3 && pageCurrent <= totalPages - 2"\n class="-frame-products-by-category__pagination-item"\n [ngStyle]="class[\'-frame-products-by-category__pagination-item\']"\n (click)="transferFn(totalPages)"\n >\n {{ totalPages }}\n </div>\n \x3c!-- Biểu tượng next --\x3e\n <div\n *ngIf="!config.hide_icon"\n class="-frame-products-by-category__pagination-item"\n [ngStyle]="class[\'-frame-products-by-category__pagination-item\']"\n (click)="gotoNextPage()"\n >\n <i class="pi pi-caret-right"></i>\n </div>\n </div>\n </div>\n</div>\n',styles:[".frame-products-by-category{width:var(--width);height:var(--height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);display:var(--display);align-items:var(--align-items);flex-wrap:var(--flex-wrap);overflow:var(--overflow);position:var(--position);-webkit-user-select:var(--user-select);user-select:var(--user-select);box-shadow:var(--box-shadow);flex-direction:var(--flex-direction)}.frame-products-by-category .frame-products-by-category__grid{display:var(--display);grid-auto-columns:var(--grid-auto-columns);gap:var(--gap);grid-auto-flow:var(--grid-auto-flow);grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);grid-auto-rows:var(--grid-auto-rows);transition:var(--transition);height:var(--height);min-width:var(--min-width)}.frame-products-by-category .frame-products-by-category__item{box-sizing:var(--box-sizing);width:var(--width);height:var(--height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);position:var(--position);overflow:var(--overflow);background-color:var(--bg-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position)}.frame-products-by-category .frame-products-by-category__pagination{width:var(--width);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);margin-top:var(--margin-top)}.frame-products-by-category .frame-products-by-category__pagination .frame-products-by-category__pagination-list{width:var(--width);height:var(--height);display:var(--display);align-items:var(--align-items);gap:var(--gap)}.frame-products-by-category .frame-products-by-category__pagination .frame-products-by-category__pagination-list .\\+frame-products-by-category__pagination-item,.frame-products-by-category .frame-products-by-category__pagination .frame-products-by-category__pagination-list .-frame-products-by-category__pagination-item{width:var(--width);height:var(--height);display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content);background-color:var(--bg-color);color:var(--color);font-size:var(--font-size);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);cursor:pointer}.frame-products-by-category .frame-products-by-category__not-found{position:var(--position);top:var(--top);left:var(--left);transform:var(--transform);z-index:var(--z-index);color:var(--color);font-size:var(--font-size)}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;color:var(--color);font-size:var(--font-size)}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]},{kind:"directive",type:C.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:C.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"component",type:Cn,selector:"[wbdragdrop]",inputs:["mode","boundaryEle","parent","data","device","top","left","type"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Un,decorators:[{type:l,args:[{selector:"wb-frame-products-by-category",imports:[k,Cn],template:'<div\n [id]="data._id"\n class="frame-products-by-category"\n [ngStyle]="class[\'frame-products-by-category\']"\n>\n <div\n class="frame-products-by-category__grid"\n [ngStyle]="class[\'frame-products-by-category__grid\']"\n >\n @if (!loading && products && products.length > 0) {\n @for (\n product of products;\n track product._id ?? product.id_product;\n let productIndex = $index\n ) {\n <div\n class="frame-products-by-category__item"\n [ngStyle]="class[\'frame-products-by-category__item\']"\n #dragBoundary\n >\n @for (object of data.objects; track object._id; let objectIndex = $index) {\n @if (productIndex == 0) {\n <div\n class="w-fit inline-block"\n wbdragdrop\n [parent]="data"\n [mode]="object[device + \'_config\'].drag_mode"\n [boundaryEle]="dragBoundary"\n [data]="object"\n [device]="device"\n [type]="type"\n [top]="object[device + \'_position_\' + data._id].top"\n [left]="object[device + \'_position_\' + data._id].left"\n [ngStyle]="{\n \'pointer-events\':\n [\'design\', \'admin\'].includes(type) && data.is_clone ? \'none\' : \'auto\'\n }"\n >\n <ng-container\n *ngComponentOutlet="\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + \'_class\'],\n config: object[device + \'_config\'],\n animation: object[device + \'_animation\'],\n isClone:\n [\'design\', \'admin\'].includes(type) && isClone ? isClone : data.is_clone,\n product: product\n }\n "\n >\n </ng-container>\n </div>\n } @else {\n <div\n class="w-fit inline-block"\n wbdragdrop\n [parent]="data"\n [mode]="object[device + \'_config\'].drag_mode"\n [boundaryEle]="dragBoundary"\n [data]="object"\n [device]="device"\n [type]="type"\n [top]="object[device + \'_position_\' + data._id].top"\n [left]="object[device + \'_position_\' + data._id].left"\n [ngStyle]="{\n opacity: [\'design\', \'admin\'].includes(type) ? 0.5 : 1,\n \'pointer-events\': [\'design\', \'admin\'].includes(type) ? \'none\' : \'auto\'\n }"\n >\n <ng-container\n *ngComponentOutlet="\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + \'_class\'],\n config: object[device + \'_config\'],\n animation: object[device + \'_animation\'],\n product: product,\n isClone: [\'design\', \'admin\'].includes(type)\n }\n "\n >\n </ng-container>\n </div>\n }\n }\n </div>\n }\n } @else if (!loading && products && products.length === 0) {\n <div\n class="frame-products-by-category__not-found"\n [ngStyle]="class[\'frame-products-by-category__not-found\']"\n >\n {{ config.not_found[webBuilderService.projectWorking.language.default] }}\n </div>\n } @else if (loading) {\n <div class="loading">\n <div class="w-16 h-16 rounded show-lg flex justify-center items-center">\n <i class="pi pi-spinner-dotted animate-spin" style="font-size: 1.5rem"></i>\n </div>\n </div>\n }\n </div>\n\n <div\n *ngIf="!config.hide_pagination && totalPages"\n class="frame-products-by-category__pagination"\n [ngStyle]="class[\'frame-products-by-category__pagination\']"\n >\n <div\n class="frame-products-by-category__pagination-list"\n [ngStyle]="class[\'frame-products-by-category__pagination-list\']"\n >\n \x3c!-- Biểu tượng previous --\x3e\n <div\n *ngIf="!config.hide_icon"\n class="-frame-products-by-category__pagination-item"\n [ngStyle]="class[\'-frame-products-by-category__pagination-item\']"\n (click)="gotoPreviousPage()"\n >\n <i class="pi pi-caret-left"></i>\n </div>\n\n \x3c!-- Trang đầu --\x3e\n <div\n class="-frame-products-by-category__pagination-item"\n [ngStyle]="class[\'-frame-products-by-category__pagination-item\']"\n *ngIf="totalPages >= 3 && pageCurrent >= 3"\n (click)="transferFn(1)"\n >\n 1\n </div>\n\n <div\n class="-frame-products-by-category__pagination-item"\n [ngStyle]="class[\'-frame-products-by-category__pagination-item\']"\n *ngIf="totalPages > 3 && pageCurrent > 3"\n >\n ...\n </div>\n\n <ng-container *ngFor="let page of pageShowChoose">\n <div\n [class]="\n (page === pageCurrent ? \'+\' : \'-\') + \'frame-products-by-category__pagination-item\'\n "\n [ngStyle]="\n class[\n (page === pageCurrent ? \'+\' : \'-\') + \'frame-products-by-category__pagination-item\'\n ]\n "\n *ngIf="page <= totalPages && page > 0"\n (click)="transferFn(page)"\n >\n {{ page }}\n </div>\n </ng-container>\n\n \x3c!-- Trang cuối --\x3e\n <div\n *ngIf="totalPages > 3 && pageCurrent < totalPages - 2"\n class="-frame-products-by-category__pagination-item"\n [ngStyle]="class[\'-frame-products-by-category__pagination-item\']"\n >\n ...\n </div>\n <div\n *ngIf="totalPages >= 3 && pageCurrent <= totalPages - 2"\n class="-frame-products-by-category__pagination-item"\n [ngStyle]="class[\'-frame-products-by-category__pagination-item\']"\n (click)="transferFn(totalPages)"\n >\n {{ totalPages }}\n </div>\n \x3c!-- Biểu tượng next --\x3e\n <div\n *ngIf="!config.hide_icon"\n class="-frame-products-by-category__pagination-item"\n [ngStyle]="class[\'-frame-products-by-category__pagination-item\']"\n (click)="gotoNextPage()"\n >\n <i class="pi pi-caret-right"></i>\n </div>\n </div>\n </div>\n</div>\n',styles:[".frame-products-by-category{width:var(--width);height:var(--height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);display:var(--display);align-items:var(--align-items);flex-wrap:var(--flex-wrap);overflow:var(--overflow);position:var(--position);-webkit-user-select:var(--user-select);user-select:var(--user-select);box-shadow:var(--box-shadow);flex-direction:var(--flex-direction)}.frame-products-by-category .frame-products-by-category__grid{display:var(--display);grid-auto-columns:var(--grid-auto-columns);gap:var(--gap);grid-auto-flow:var(--grid-auto-flow);grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);grid-auto-rows:var(--grid-auto-rows);transition:var(--transition);height:var(--height);min-width:var(--min-width)}.frame-products-by-category .frame-products-by-category__item{box-sizing:var(--box-sizing);width:var(--width);height:var(--height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);position:var(--position);overflow:var(--overflow);background-color:var(--bg-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position)}.frame-products-by-category .frame-products-by-category__pagination{width:var(--width);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);margin-top:var(--margin-top)}.frame-products-by-category .frame-products-by-category__pagination .frame-products-by-category__pagination-list{width:var(--width);height:var(--height);display:var(--display);align-items:var(--align-items);gap:var(--gap)}.frame-products-by-category .frame-products-by-category__pagination .frame-products-by-category__pagination-list .\\+frame-products-by-category__pagination-item,.frame-products-by-category .frame-products-by-category__pagination .frame-products-by-category__pagination-list .-frame-products-by-category__pagination-item{width:var(--width);height:var(--height);display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content);background-color:var(--bg-color);color:var(--color);font-size:var(--font-size);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);cursor:pointer}.frame-products-by-category .frame-products-by-category__not-found{position:var(--position);top:var(--top);left:var(--left);transform:var(--transform);z-index:var(--z-index);color:var(--color);font-size:var(--font-size)}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;color:var(--color);font-size:var(--font-size)}\n"]}]}],ctorParameters:()=>[{type:xn},{type:P.ActivatedRoute},{type:P.Router},{type:tt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class Yn{webBuilderService;router;route;data;device;class;config;animation;type;isClone;product;selectedValues=[];selectedPriceTokens=[];qpSub;constructor(e,n,t){this.webBuilderService=e,this.router=n,this.route=t}ngOnInit(){const e=this.config.field;this.qpSub=this.route.queryParams.subscribe(n=>{if("price"===e){const e=n.price;if(e)this.selectedPriceTokens=String(e).split(",").map(e=>e.trim()).filter(Boolean);else{const e=void 0!==n.price_min?Number(n.price_min):0,t=void 0!==n.price_max?Number(n.price_max):0;Number.isNaN(e)&&Number.isNaN(t)?this.selectedPriceTokens=[]:this.selectedPriceTokens=[`${e||0}-${t||0}`]}}else{const t=n[e];this.selectedValues=t?String(t).split(",").map(e=>e.trim()).filter(Boolean):[]}})}ngOnDestroy(){this.qpSub?.unsubscribe()}priceToken(e){const n=Number(e?.min??0),t=Number(e?.max??0);return`${isFinite(n)?n:0}-${isFinite(t)?t:0}`}handleChooseItem(e,n){const t=n.target.checked,i={...this.route.snapshot.queryParams},o=this.config.field,a=this.webBuilderService.projectWorking.language.default;if("price"===o){const n=this.priceToken(e);let o=i.price?String(i.price).split(",").map(e=>e.trim()).filter(Boolean):[];t?o.includes(n)||o.push(n):o=o.filter(e=>e!==n),o.length?i.price=o.join(","):delete i.price,delete i.price_min,delete i.price_max}else{const n=String(e.value?.[a]??"");let r=i[o]?String(i[o]).split(",").map(e=>e.trim()).filter(Boolean):[];t?r.includes(n)||r.push(n):r=r.filter(e=>e!==n),r.length?i[o]=r.join(","):delete i[o]}this.router.navigate([],{relativeTo:this.route,queryParams:{...i,page:1}})}isOptionChecked(e){const n=this.config.field,t=this.webBuilderService.projectWorking.language.default;if("price"===n){const n=this.priceToken(e);return this.selectedPriceTokens.includes(n)}const i=String(e.value?.[t]??"");return this.selectedValues.includes(i)}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Yn,deps:[{token:xn},{token:P.Router},{token:P.ActivatedRoute}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:Yn,isStandalone:!0,selector:"wb-checkbox-filter",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:'<div [id]="data._id" class="checkbox-filter" [ngStyle]="class[\'checkbox-filter\']">\n <label *ngFor="let option of config.data_list" [for]="option._id" class="checkbox-filter__option">\n <input\n [id]="option._id"\n class="checkbox-filter__input"\n [ngStyle]="class[\'checkbox-filter__input\']"\n type="checkbox"\n [checked]="isOptionChecked(option)"\n (change)="handleChooseItem(option, $event)"\n />\n <p\n class="checkbox-filter__label"\n [ngStyle]="class[\'checkbox-filter__label\']"\n [style]="animation[\'checkbox-filter__label\']"\n >\n {{ option.value?.[webBuilderService.projectWorking.language.default] ?? option.label }}\n </p>\n </label>\n</div>\n',styles:[".checkbox-filter{display:var(--display);flex-direction:var(--flex-direction);height:var(--height);width:var(--width);overflow:var(--overflow);gap:var(--gap)}.checkbox-filter .checkbox-filter__option{display:var(--display);align-items:var(--align-items);cursor:var(--cursor, pointer)}.checkbox-filter .checkbox-filter__option .checkbox-filter__input{width:var(--width);height:var(--height);appearance:var(--appearance);-webkit-appearance:var(--webkit-appearance);border:var(--border);border-radius:var(--border-radius);cursor:var(--cursor);transition:var(--transition);position:var(--position)}.checkbox-filter .checkbox-filter__option .checkbox-filter__input:checked{background:var(--bg-color);border-color:var(--bg-color)}.checkbox-filter .checkbox-filter__option .checkbox-filter__input:checked:after{content:var(--content-after);position:var(--position-after);left:var(--left-after);top:var(--top-after);transform:var(--transform-after);font-size:var(--font-size-after);color:var(--color-after);display:var(--display-after)}.checkbox-filter .checkbox-filter__option .checkbox-filter__label{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right)}.checkbox-filter .checkbox-filter__option .checkbox-filter__label:hover{color:var(--h-color)}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Yn,decorators:[{type:l,args:[{selector:"wb-checkbox-filter",imports:[k],template:'<div [id]="data._id" class="checkbox-filter" [ngStyle]="class[\'checkbox-filter\']">\n <label *ngFor="let option of config.data_list" [for]="option._id" class="checkbox-filter__option">\n <input\n [id]="option._id"\n class="checkbox-filter__input"\n [ngStyle]="class[\'checkbox-filter__input\']"\n type="checkbox"\n [checked]="isOptionChecked(option)"\n (change)="handleChooseItem(option, $event)"\n />\n <p\n class="checkbox-filter__label"\n [ngStyle]="class[\'checkbox-filter__label\']"\n [style]="animation[\'checkbox-filter__label\']"\n >\n {{ option.value?.[webBuilderService.projectWorking.language.default] ?? option.label }}\n </p>\n </label>\n</div>\n',styles:[".checkbox-filter{display:var(--display);flex-direction:var(--flex-direction);height:var(--height);width:var(--width);overflow:var(--overflow);gap:var(--gap)}.checkbox-filter .checkbox-filter__option{display:var(--display);align-items:var(--align-items);cursor:var(--cursor, pointer)}.checkbox-filter .checkbox-filter__option .checkbox-filter__input{width:var(--width);height:var(--height);appearance:var(--appearance);-webkit-appearance:var(--webkit-appearance);border:var(--border);border-radius:var(--border-radius);cursor:var(--cursor);transition:var(--transition);position:var(--position)}.checkbox-filter .checkbox-filter__option .checkbox-filter__input:checked{background:var(--bg-color);border-color:var(--bg-color)}.checkbox-filter .checkbox-filter__option .checkbox-filter__input:checked:after{content:var(--content-after);position:var(--position-after);left:var(--left-after);top:var(--top-after);transform:var(--transform-after);font-size:var(--font-size-after);color:var(--color-after);display:var(--display-after)}.checkbox-filter .checkbox-filter__option .checkbox-filter__label{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);font-family:var(--font-family);font-style:var(--font-style);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);display:var(--display);letter-spacing:var(--letter-spacing);margin-left:var(--margin-left);margin-right:var(--margin-right)}.checkbox-filter .checkbox-filter__option .checkbox-filter__label:hover{color:var(--h-color)}\n"]}]}],ctorParameters:()=>[{type:xn},{type:P.Router},{type:P.ActivatedRoute}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class Jn{data;device;class;config;animation;type;isClone;product;constructor(){}ngOnInit(){}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Jn,deps:[],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:Jn,isStandalone:!0,selector:"wb-line",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:"<div\n class=\"line\"\n [ngStyle]=\"class['line']\"\n [ngClass]=\"{ 'increase-padding': type == 'design' ? true : false }\"\n></div>\n",styles:[".line{width:var(--width);height:var(--height);background-color:var(--bg-color);background-image:var(--bg-image);rotate:var(--rotate)}.increase-padding:hover{padding:2px}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Jn,decorators:[{type:l,args:[{selector:"wb-line",imports:[k],template:"<div\n class=\"line\"\n [ngStyle]=\"class['line']\"\n [ngClass]=\"{ 'increase-padding': type == 'design' ? true : false }\"\n></div>\n",styles:[".line{width:var(--width);height:var(--height);background-color:var(--bg-color);background-image:var(--bg-image);rotate:var(--rotate)}.increase-padding:hover{padding:2px}\n"]}]}],ctorParameters:()=>[],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class Qn{data;device;class;config;animation;type;isClone;product;constructor(){}ngOnInit(){}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Qn,deps:[],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:Qn,isStandalone:!0,selector:"wb-video",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:'<video\n #videoPlayer\n [id]="data._id"\n autoplay\n muted\n loop\n playsinline\n class="video"\n [ngStyle]="class[\'video\']"\n>\n <source [src]="config.video?.src" type="video/mp4" />\n Your browser does not support the video tag.\n</video>\n',styles:[".video{width:var(--width);height:var(--height);object-fit:var(--object-fit)}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Qn,decorators:[{type:l,args:[{selector:"wb-video",imports:[k],template:'<video\n #videoPlayer\n [id]="data._id"\n autoplay\n muted\n loop\n playsinline\n class="video"\n [ngStyle]="class[\'video\']"\n>\n <source [src]="config.video?.src" type="video/mp4" />\n Your browser does not support the video tag.\n</video>\n',styles:[".video{width:var(--width);height:var(--height);object-fit:var(--object-fit)}\n"]}]}],ctorParameters:()=>[],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class Zn{webBuilderService;map;cartService;el;authService;data;device;class;config;animation;type;isClone;product;loading=!1;products=[];changeGridSub;constructor(e,n,t,i,o){this.webBuilderService=e,this.map=n,this.cartService=t,this.el=i,this.authService=o}ngOnInit(){if(this.changeGridSub=this.webBuilderService.onNotifyChange(e=>{"change-grid"==e.name&&e._id==this.data._id&&this.calcProducts()}),"design"==this.type||"admin"==this.type)this.calcProducts();else{const{rows:e,gap:n}=this.data[this.device+"_config"].grid,t=+this.class[this.data.resize_field]["--height"].replace("px","")||0;this.class["frame-products__item"]["--height"]=(t-n*(e-1))/e+"px",this.class["frame-products__grid"]["--grid-auto-rows"]=(t-n*(e-1))/e+"px","visible"==this.class["frame-products"]["--overflow-y"]&&(this.el.nativeElement.firstChild.style.height="unset")}}ngOnDestroy(){this.changeGridSub?.unsubscribe()}calcProducts(){let e=[];const{cols:n,rows:t,gap:i}=this.data[this.device+"_config"].grid;for(let i=1;i<=n*t;i++)e=[...e,{id_product:"design_product_"+i,id_variation:"design_variation_"+i,sku:"design_sku_"+i,quantity:1,retail_price:100+i,original_price:150+i,img:""}];this.products=e}displayItems(){return"design"===this.type?this.products:"frame_addresses"==this.data.type?this.authService.getEndUser()?.addresses:this.cartService.cart().items}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Zn,deps:[{token:xn},{token:tt},{token:Tn},{token:t.ElementRef},{token:Sn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Zn,isStandalone:!0,selector:"wb-frame-cart",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:"<div [id]=\"data._id\" class=\"frame-products\" [ngStyle]=\"data[device + '_class']['frame-products']\">\n @if (!loading) {\n <div class=\"frame-products__grid\" [ngStyle]=\"data[device + '_class']['frame-products__grid']\">\n @for (\n product of displayItems();\n track product.id_variation || product._id;\n let productIndex = $index\n ) {\n <div\n class=\"frame-products__item\"\n [ngStyle]=\"data[device + '_class']['frame-products__item']\"\n #dragBoundary\n >\n @for (object of data.objects; track object._id; let objectIndex = $index) {\n @if (!object[device + '_hidden']) {\n @if (productIndex == 0) {\n <div\n class=\"w-fit inline-block\"\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [boundaryEle]=\"dragBoundary\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [top]=\"object[device + '_position_' + data._id].top\"\n [left]=\"object[device + '_position_' + data._id].left\"\n [ngStyle]=\"{\n 'pointer-events':\n ['design', 'admin'].includes(type) && data.is_clone ? 'none' : 'auto'\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n isClone:\n ['design', 'admin'].includes(type) && isClone ? isClone : data.is_clone,\n product: product\n }\n \"\n >\n </ng-container>\n </div>\n } @else {\n <div\n class=\"w-fit inline-block\"\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [boundaryEle]=\"dragBoundary\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [top]=\"object[device + '_position_' + data._id].top\"\n [left]=\"object[device + '_position_' + data._id].left\"\n [ngStyle]=\"{\n opacity: ['design', 'admin'].includes(type) ? 0.5 : 1,\n 'pointer-events': ['design', 'admin'].includes(type) ? 'none' : 'auto'\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n product: product,\n isClone: ['design', 'admin'].includes(type)\n }\n \"\n >\n </ng-container>\n </div>\n }\n }\n }\n\n \x3c!-- Vùng kéo nhiều object --\x3e\n @if (\n productIndex == 0 &&\n webBuilderService.arrayChoosing[0]?.id_object == data._id &&\n webBuilderService.arrayChoosing.length > 1\n ) {\n <div\n wbVirtualSelected\n [boundaryEle]=\"dragBoundary\"\n id=\"choosing-box\"\n [ngStyle]=\"{\n position: 'absolute',\n border: '2px solid red',\n cursor: 'pointer',\n 'z-index': 9999999,\n 'pointer-events': 'none',\n left: webBuilderService.infoVirtualSelected.left + 'px',\n top: webBuilderService.infoVirtualSelected.top + 'px',\n width: webBuilderService.infoVirtualSelected.width + 'px',\n height: webBuilderService.infoVirtualSelected.height + 'px'\n }\"\n ></div>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"loading\">\n <nz-icon nzType=\"loading\" nzTheme=\"outline\" />\n </div>\n }\n</div>\n",styles:[".frame-products{width:var(--width);height:var(--height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);display:var(--display);align-items:var(--align-items);flex-wrap:var(--flex-wrap);position:var(--position);-webkit-user-select:var(--user-select);user-select:var(--user-select);box-shadow:var(--box-shadow);overflow-y:var(--overflow-y)}.frame-products::-webkit-scrollbar{width:var(--width-scrollbar);height:var(--height-scrollbar)}.frame-products::-webkit-scrollbar-thumb{background-color:var(--bg-color-thumb);border-radius:var(--border-radius-thumb)}.frame-products::-webkit-scrollbar-track{background-color:var(--bg-color-track);border-radius:var(--border-radius-track)}.frame-products .frame-products__grid{display:var(--display);grid-auto-columns:var(--grid-auto-columns);gap:var(--gap);grid-auto-flow:var(--grid-auto-flow);grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);grid-auto-rows:var(--grid-auto-rows);transition:var(--transition);height:var(--height);min-width:var(--min-width)}.frame-products .frame-products__item{box-sizing:var(--box-sizing);width:var(--width);height:var(--height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);position:var(--position);overflow:var(--overflow);background-color:var(--bg-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);box-shadow:var(--box-shadow)}.frame-products .frame-products__btn-right,.frame-products .frame-products__btn-left{position:var(--position);top:var(--top);transform:var(--transform);z-index:var(--z-index);width:var(--width);height:var(--height);left:var(--left);background-color:var(--bg-color);right:var(--right);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);cursor:var(--pointer);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color)}.frame-products .frame-products__btn-right .frame-products__btn-right-icon,.frame-products .frame-products__btn-left .frame-products__btn-right-icon,.frame-products .frame-products__btn-right .frame-products__btn-left-icon,.frame-products .frame-products__btn-left .frame-products__btn-left-icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999}.loading>nz-icon{font-size:32px;color:#999}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"component",type:Cn,selector:"[wbdragdrop]",inputs:["mode","boundaryEle","parent","data","device","top","left","type"]},{kind:"component",type:wn,selector:"[wbVirtualSelected]",inputs:["boundaryEle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Zn,decorators:[{type:l,args:[{selector:"wb-frame-cart",imports:[k,j,Cn,wn],template:"<div [id]=\"data._id\" class=\"frame-products\" [ngStyle]=\"data[device + '_class']['frame-products']\">\n @if (!loading) {\n <div class=\"frame-products__grid\" [ngStyle]=\"data[device + '_class']['frame-products__grid']\">\n @for (\n product of displayItems();\n track product.id_variation || product._id;\n let productIndex = $index\n ) {\n <div\n class=\"frame-products__item\"\n [ngStyle]=\"data[device + '_class']['frame-products__item']\"\n #dragBoundary\n >\n @for (object of data.objects; track object._id; let objectIndex = $index) {\n @if (!object[device + '_hidden']) {\n @if (productIndex == 0) {\n <div\n class=\"w-fit inline-block\"\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [boundaryEle]=\"dragBoundary\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [top]=\"object[device + '_position_' + data._id].top\"\n [left]=\"object[device + '_position_' + data._id].left\"\n [ngStyle]=\"{\n 'pointer-events':\n ['design', 'admin'].includes(type) && data.is_clone ? 'none' : 'auto'\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n isClone:\n ['design', 'admin'].includes(type) && isClone ? isClone : data.is_clone,\n product: product\n }\n \"\n >\n </ng-container>\n </div>\n } @else {\n <div\n class=\"w-fit inline-block\"\n wbdragdrop\n [parent]=\"data\"\n [mode]=\"object[device + '_config'].drag_mode\"\n [boundaryEle]=\"dragBoundary\"\n [data]=\"object\"\n [device]=\"device\"\n [type]=\"type\"\n [top]=\"object[device + '_position_' + data._id].top\"\n [left]=\"object[device + '_position_' + data._id].left\"\n [ngStyle]=\"{\n opacity: ['design', 'admin'].includes(type) ? 0.5 : 1,\n 'pointer-events': ['design', 'admin'].includes(type) ? 'none' : 'auto'\n }\"\n >\n <ng-container\n *ngComponentOutlet=\"\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + '_class'],\n config: object[device + '_config'],\n animation: object[device + '_animation'],\n product: product,\n isClone: ['design', 'admin'].includes(type)\n }\n \"\n >\n </ng-container>\n </div>\n }\n }\n }\n\n \x3c!-- Vùng kéo nhiều object --\x3e\n @if (\n productIndex == 0 &&\n webBuilderService.arrayChoosing[0]?.id_object == data._id &&\n webBuilderService.arrayChoosing.length > 1\n ) {\n <div\n wbVirtualSelected\n [boundaryEle]=\"dragBoundary\"\n id=\"choosing-box\"\n [ngStyle]=\"{\n position: 'absolute',\n border: '2px solid red',\n cursor: 'pointer',\n 'z-index': 9999999,\n 'pointer-events': 'none',\n left: webBuilderService.infoVirtualSelected.left + 'px',\n top: webBuilderService.infoVirtualSelected.top + 'px',\n width: webBuilderService.infoVirtualSelected.width + 'px',\n height: webBuilderService.infoVirtualSelected.height + 'px'\n }\"\n ></div>\n }\n </div>\n }\n </div>\n } @else {\n <div class=\"loading\">\n <nz-icon nzType=\"loading\" nzTheme=\"outline\" />\n </div>\n }\n</div>\n",styles:[".frame-products{width:var(--width);height:var(--height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-top-left-radius:var(--border-top-left-radius);display:var(--display);align-items:var(--align-items);flex-wrap:var(--flex-wrap);position:var(--position);-webkit-user-select:var(--user-select);user-select:var(--user-select);box-shadow:var(--box-shadow);overflow-y:var(--overflow-y)}.frame-products::-webkit-scrollbar{width:var(--width-scrollbar);height:var(--height-scrollbar)}.frame-products::-webkit-scrollbar-thumb{background-color:var(--bg-color-thumb);border-radius:var(--border-radius-thumb)}.frame-products::-webkit-scrollbar-track{background-color:var(--bg-color-track);border-radius:var(--border-radius-track)}.frame-products .frame-products__grid{display:var(--display);grid-auto-columns:var(--grid-auto-columns);gap:var(--gap);grid-auto-flow:var(--grid-auto-flow);grid-template-columns:var(--grid-template-columns);grid-template-rows:var(--grid-template-rows);grid-auto-rows:var(--grid-auto-rows);transition:var(--transition);height:var(--height);min-width:var(--min-width)}.frame-products .frame-products__item{box-sizing:var(--box-sizing);width:var(--width);height:var(--height);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);position:var(--position);overflow:var(--overflow);background-color:var(--bg-color);background-image:var(--bg-image);background-size:var(--bg-size);background-repeat:var(--bg-repeat);background-position:var(--bg-position);box-shadow:var(--box-shadow)}.frame-products .frame-products__btn-right,.frame-products .frame-products__btn-left{position:var(--position);top:var(--top);transform:var(--transform);z-index:var(--z-index);width:var(--width);height:var(--height);left:var(--left);background-color:var(--bg-color);right:var(--right);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);cursor:var(--pointer);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color)}.frame-products .frame-products__btn-right .frame-products__btn-right-icon,.frame-products .frame-products__btn-left .frame-products__btn-right-icon,.frame-products .frame-products__btn-right .frame-products__btn-left-icon,.frame-products .frame-products__btn-left .frame-products__btn-left-icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function)}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999}.loading>nz-icon{font-size:32px;color:#999}\n"]}]}],ctorParameters:()=>[{type:xn},{type:tt},{type:Tn},{type:t.ElementRef},{type:Sn}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class et{data;device;class;config;animation;type;isClone;product;constructor(){}ngOnInit(){}selectAttribute(e){const n=this.product.variations.find(n=>n.fields.some(n=>n.value===e&&n.name==this.product?.product_attributes?.[this.config.index_attribute??0].name));n&&(this.product.retail_price=n.retail_price,this.product.original_price=n.original_price,this.product.import_price=n.import_price,this.product.sku=n.sku,this.product.stock=n.stock,this.product.id=n.id,this.product.weight=n.weight,this.product.imgs=n.imgs,this.product.hidden=n.hidden,this.product.fields=n.fields,this.product.index_img=0)}activeVariant(e){const n=this.product.variations.find(n=>n.fields.some(n=>n.value===e&&n.name==this.product?.product_attributes?.[this.config.index_attribute??0].name));return!(!n||this.product.sku!=n.sku)}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:et,deps:[],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:et,isStandalone:!0,selector:"wb-product-select-attribute",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},ngImport:t,template:"@if (type == 'design' ? true : product?.product_attributes?.length) {\n <div\n [id]=\"data._id\"\n [ngStyle]=\"class['product-select-attribute']\"\n class=\"product-select-attribute\"\n >\n <div\n [ngStyle]=\"class['product-select-attribute__label']\"\n class=\"product-select-attribute__label\"\n >\n {{ product?.product_attributes?.[config.index_attribute ?? 0].name }}\n </div>\n <div class=\"product-select-attribute__list\">\n @for (\n item of product?.product_attributes?.[config.index_attribute ?? 0]?.values;\n track $index\n ) {\n <div\n [class]=\"(activeVariant(item) ? '+' : '-') + 'product-select-attribute__item'\"\n [ngStyle]=\"class[(activeVariant(item) ? '+' : '-') + 'product-select-attribute__item']\"\n (click)=\"selectAttribute(item)\"\n >\n <span\n [class]=\"(activeVariant(item) ? '+' : '-') + 'product-select-attribute__item-content'\"\n [ngStyle]=\"\n class[(activeVariant(item) ? '+' : '-') + 'product-select-attribute__item-content']\n \"\n >\n {{ item }}\n </span>\n </div>\n }\n </div>\n </div>\n}\n",styles:[".product-select-attribute{width:var(--width);min-height:var(--min-height);display:var(--display);flex-direction:var(--flex-direction);gap:var(--gap)}.product-select-attribute .product-select-attribute__label{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);color:var(--color);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height)}.product-select-attribute .product-select-attribute__list{display:var(--display);gap:var(--gap);align-items:var(--align-items)}.product-select-attribute .\\+product-select-attribute__item,.product-select-attribute .-product-select-attribute__item{cursor:var(--cursor);background-color:var(--bg-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);min-width:var(--min-width);height:var(--height);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items)}.product-select-attribute .\\+product-select-attribute__item .\\+product-select-attribute__item-content,.product-select-attribute .-product-select-attribute__item .\\+product-select-attribute__item-content,.product-select-attribute .\\+product-select-attribute__item .-product-select-attribute__item-content,.product-select-attribute .-product-select-attribute__item .-product-select-attribute__item-content{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);color:var(--color);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);word-break:break-word;white-space:pre-wrap}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:et,decorators:[{type:l,args:[{selector:"wb-product-select-attribute",imports:[k],template:"@if (type == 'design' ? true : product?.product_attributes?.length) {\n <div\n [id]=\"data._id\"\n [ngStyle]=\"class['product-select-attribute']\"\n class=\"product-select-attribute\"\n >\n <div\n [ngStyle]=\"class['product-select-attribute__label']\"\n class=\"product-select-attribute__label\"\n >\n {{ product?.product_attributes?.[config.index_attribute ?? 0].name }}\n </div>\n <div class=\"product-select-attribute__list\">\n @for (\n item of product?.product_attributes?.[config.index_attribute ?? 0]?.values;\n track $index\n ) {\n <div\n [class]=\"(activeVariant(item) ? '+' : '-') + 'product-select-attribute__item'\"\n [ngStyle]=\"class[(activeVariant(item) ? '+' : '-') + 'product-select-attribute__item']\"\n (click)=\"selectAttribute(item)\"\n >\n <span\n [class]=\"(activeVariant(item) ? '+' : '-') + 'product-select-attribute__item-content'\"\n [ngStyle]=\"\n class[(activeVariant(item) ? '+' : '-') + 'product-select-attribute__item-content']\n \"\n >\n {{ item }}\n </span>\n </div>\n }\n </div>\n </div>\n}\n",styles:[".product-select-attribute{width:var(--width);min-height:var(--min-height);display:var(--display);flex-direction:var(--flex-direction);gap:var(--gap)}.product-select-attribute .product-select-attribute__label{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);color:var(--color);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height)}.product-select-attribute .product-select-attribute__list{display:var(--display);gap:var(--gap);align-items:var(--align-items)}.product-select-attribute .\\+product-select-attribute__item,.product-select-attribute .-product-select-attribute__item{cursor:var(--cursor);background-color:var(--bg-color);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);min-width:var(--min-width);height:var(--height);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items)}.product-select-attribute .\\+product-select-attribute__item .\\+product-select-attribute__item-content,.product-select-attribute .-product-select-attribute__item .\\+product-select-attribute__item-content,.product-select-attribute .\\+product-select-attribute__item .-product-select-attribute__item-content,.product-select-attribute .-product-select-attribute__item .-product-select-attribute__item-content{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);color:var(--color);text-decoration:var(--text-decoration);text-transform:var(--text-transform);line-height:var(--line-height);word-break:break-word;white-space:pre-wrap}\n"]}]}],ctorParameters:()=>[],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}]}});class nt{webBuilderService;map;element;platformId;data;device;class;config;animation;type;isClone;product;currentIndex=0;gsap;intervalId;indexSlides={};frameBanner;startX=0;startY=0;isMouseDown=!1;isDragging=!1;isAnimating=!1;dragStartThreshold=5;dragThreshold=50;slideWidth=0;currentProgress=0;PERSPECTIVE_VALUE=400;constructor(e,n,t,i){this.webBuilderService=e,this.map=n,this.element=t,this.platformId=i}ngOnInit(){this.loadScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.1/gsap.min.js",()=>{const e=window;void 0!==e.gsap?(this.gsap=e.gsap,this.gsap.set(".frame-banner__slides",{perspective:this.PERSPECTIVE_VALUE,autoAlpha:1})):console.log("gsap is not loaded")})}ngAfterViewInit(){setTimeout(()=>{this.initSlidesMap(),this.setCurrentSlide()},0)}initSlidesMap(){const e=this.element.nativeElement.querySelector(".frame-banner__slides");if(!e)return;const n=e.querySelectorAll(".frame-banner__slide");this.indexSlides={},n.forEach((e,n)=>{e.id||(e.id=`slide-${n}`),this.indexSlides[n]=e.id})}setCurrentSlide(){if(S(this.platformId)){let e=this.element.nativeElement.getElementsByClassName("frame-banner__slides");if(!e||0===e.length)return;let n=Array.from(e[0].children);if(!n||0===n.length)return;n[this.currentIndex]&&(n[this.currentIndex].style.opacity="1",n[this.currentIndex].style.zIndex="2")}}ngOnDestroy(){this.intervalId&&clearInterval(this.intervalId)}loadScript(e,n){const t=document.querySelector(`script[src="${e}"]`);if(t)return"true"===t.getAttribute("data-loaded")?void n():void t.addEventListener("load",n);const i=document.createElement("script");i.src=e,i.async=!0,i.onload=()=>{i.setAttribute("data-loaded","true"),n()},i.onerror=()=>{console.error(`Failed to load gsap script: ${e}`)},document.getElementsByTagName("head")[0].appendChild(i)}jumpToSlide(e){if(("design"==this.type||e!=this.currentIndex)&&(this.config.animation.is_autoplay&&this.resetInterval(),this.showSlide(e,e<this.currentIndex),"design"==this.type&&S(this.platformId))){let e=this.element.nativeElement.getElementsByClassName("frame-banner__slides");if(!e||0===e.length)return;let n=Array.from(e[0].children);if(!n||0===n.length)return;n[this.currentIndex]&&this.webBuilderService.setItemChoosing(this.data.objects[this.currentIndex],n[this.currentIndex],this.data)}}resetInterval(){"design"!=this.type&&"admin"!=this.type&&(clearInterval(this.intervalId),this.intervalId=setInterval(()=>{this.nextSlide()},1e3*(this.config.animation.time_auto_play+this.config.animation.time_animation_play)))}previousSlide(){if("design"==this.type||"admin"==this.type)return;this.config.animation.is_autoplay&&this.resetInterval();let e=this.element.nativeElement.querySelector(".frame-banner__slides").querySelectorAll(".frame-banner__slide");e.forEach(e=>{e.id==this.indexSlides[this.currentIndex]&&(e.style.display="block")});const n=(this.currentIndex-1+e.length)%e.length;this.showSlide(n,!0)}showSlide(e,n){if(this.isAnimating)return;const t=this.element.nativeElement.querySelector(".frame-banner__slides");if(!t)return;let i=t.querySelectorAll(".frame-banner__slide");if(0===i.length)return;const o="design"==this.type||"admin"==this.type?0:this.config.animation.time_animation_play;if(i.forEach((e,n)=>{this.indexSlides[n]=e.id}),i.forEach(n=>{n.id==this.indexSlides[e]?(n.style.zIndex="2",n.style.opacity="1"):n.id==this.indexSlides[this.currentIndex]?(n.style.zIndex="1",n.style.opacity="0"):(n.style.zIndex="0",n.style.opacity="0")}),!this.gsap)return;this.isAnimating=!0;const a="design"==this.type||"admin"==this.type?0:this.config.animation.slide_transition_animation;this.animateSlide(a,i,this.currentIndex,e,this.indexSlides,this.currentProgress,n,this.gsap,o),this.currentIndex=e,this.gsap.delayedCall(o,()=>{this.isAnimating=!1})}nextSlide(){if("design"==this.type||"admin"==this.type)return;this.config.animation.is_autoplay&&this.resetInterval();let e=this.element.nativeElement.querySelector(".frame-banner__slides").querySelectorAll(".frame-banner__slide");e.forEach(e=>{e.id==this.indexSlides[this.currentIndex]&&(e.style.display="block")});const n=(this.currentIndex+1)%e.length;this.showSlide(n,!1)}startDrag(e){if(this.isAnimating||"design"==this.type||"admin"==this.type)return;const n=this.element.nativeElement.querySelector(".frame-banner__slides");if(!n)return;let t=n.querySelectorAll(".frame-banner__slide");t.length&&(this.startX=this.getEventX(e),this.startY=this.getEventY(e),this.slideWidth=this.frameBanner.nativeElement.offsetWidth,this.currentProgress=0,this.isMouseDown=!0,this.isDragging=!1,this.indexSlides.length!==t.length&&t.forEach((e,n)=>{this.indexSlides[n]=e.id}))}getEventX(e){if(e instanceof TouchEvent){if(e.touches&&e.touches.length>0)return e.touches[0].clientX;if(e.changedTouches&&e.changedTouches.length>0)return e.changedTouches[0].clientX}else if(e instanceof MouseEvent)return e.clientX;return 0}getEventY(e){if(e instanceof TouchEvent){if(e.touches&&e.touches.length>0)return e.touches[0].clientY;if(e.changedTouches&&e.changedTouches.length>0)return e.changedTouches[0].clientY}else if(e instanceof MouseEvent)return e.clientY;return 0}onDrag(e){if(!this.isMouseDown||this.isAnimating||"design"==this.type||"admin"==this.type)return;const n=this.getEventX(e),t=this.getEventY(e),i=Math.abs(n-this.startX),o=Math.abs(t-this.startY);if(!this.isDragging&&(i>this.dragStartThreshold||o>this.dragStartThreshold)&&(this.isDragging=!0),this.isDragging){const e=this.element.nativeElement.querySelector(".frame-banner__slides");if(!e)return;let t=e.querySelectorAll(".frame-banner__slide");if(!t.length)return;const i=n-this.startX,o=i<0?(this.currentIndex+1)%t.length:(this.currentIndex-1+t.length)%t.length,a=i>0;Math.abs(i)<this.dragThreshold?this.currentProgress=0:this.currentProgress=Math.min(Math.max(Math.abs(i)/this.slideWidth,0),1),t.forEach(e=>{e.id==this.indexSlides[this.currentIndex]?e.style.zIndex="1":e.id==this.indexSlides[o]?e.style.zIndex="2":e.style.zIndex="0"});const r=this.config.animation.slide_transition_animation;this.animateSlideOnDrag(r,t,this.currentIndex,o,this.indexSlides,this.currentProgress,a,this.gsap)}}endDrag(e){if("design"!=this.type&&"admin"!=this.type&&this.isMouseDown&&(this.isMouseDown=!1,this.isDragging)){const n=this.getEventX(e)-this.startX;Math.abs(n)>this.dragThreshold&&(n>0?this.previousSlide():this.nextSlide()),this.isDragging=!1,this.currentProgress=0}}animateSlideOnDrag=(e,n,t,i,o,a,r,s)=>{switch(e){case"fade_in":n.forEach((e,n)=>{e.id==o[t]?s.set(e,{opacity:1-a}):e.id==o[i]&&s.set(e,{x:0,y:0,rotate:0,rotateX:0,rotateY:0,scale:1,opacity:a,filter:"none"})});break;case"slide_left":n.forEach((e,n)=>{e.id==o[t]?s.set(e,{x:(r?"":"-")+100*a+"%",opacity:1}):e.id==o[i]&&s.set(e,{x:(r?"-":"")+(100-100*a)+"%",y:0,scale:1,rotate:0,rotateX:0,rotateY:0,opacity:1,filter:"none"})});break;case"slide_right":n.forEach(e=>{e.id==o[t]?s.set(e,{x:(r?"-":"")+100*a+"%",opacity:1}):e.id==o[i]&&s.set(e,{x:(r?"":"-")+(100-100*a)+"%",y:0,scale:1,rotate:0,rotateX:0,rotateY:0,opacity:1,filter:"none"})});break;case"slide":n.forEach(e=>{e.id==o[t]?s.set(e,{x:100*a+"%",opacity:1-a}):e.id==o[i]&&s.set(e,{x:100-100*a+"%",rotate:0,y:0,rotateX:0,rotateY:0,opacity:a,scale:1,filter:"none"})});break;case"zoom_in":n.forEach(e=>{e.id==o[t]?s.set(e,{opacity:1-a,scale:1-a}):e.id==o[i]&&s.set(e,{x:0,y:0,rotate:0,rotateX:0,rotateY:0,scale:a,opacity:a,filter:"none"})});break;case"rotate":n.forEach(e=>{e.id==o[t]?s.set(e,{opacity:1-a,scale:1-a}):e.id==o[i]&&s.set(e,{x:0,y:0,rotate:r?180-180*a:-(180-180*a),rotateX:0,rotateY:0,scale:a,opacity:a,filter:"none"})});break;case"flip_x":n.forEach(e=>{e.id==o[t]?s.set(e,{opacity:1-a,rotateY:r?-(180-180*(1-a)):180-180*(1-a)}):e.id==o[i]&&s.set(e,{x:0,y:0,rotate:0,rotateX:0,rotateY:r?180-180*a:-(180-180*a),scale:1,opacity:a,filter:"none"})});break;case"bounce":n.forEach(e=>{e.id==o[t]?s.set(e,{opacity:1-a}):e.id==o[i]&&s.set(e,{x:0,y:(r?"-":"")+(100-100*a)+"%",scale:1,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"})});break;case"blur":n.forEach(e=>{e.id==o[t]?s.set(e,{opacity:1-a,filter:`blur(${10-10*(1-a)}px)`}):e.id==o[i]&&s.set(e,{x:0,y:0,scale:1,rotate:0,rotateX:0,rotateY:0,filter:`blur(${10-10*a}px)`,opacity:a})});break;case"grayscale":n.forEach(e=>{e.id==o[t]?s.set(e,{opacity:1-a,filter:`grayscale(${100-100*(1-a)}%)`}):e.id==o[i]&&s.set(e,{x:0,y:0,scale:1,rotate:0,rotateX:0,rotateY:0,filter:`grayscale(${100-100*a}%)`,opacity:a})});break;case"squeeze":n.forEach(e=>{e.id==o[t]?s.set(e,{opacity:1-a,scaleX:1-a}):e.id==o[i]&&s.set(e,{x:0,y:0,scaleX:2-a,scaleY:1,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"})});break;case"shutter":n.forEach(e=>{e.id==o[t]?s.set(e,{opacity:1-a,scaleY:1-a}):e.id==o[i]&&s.set(e,{x:0,y:0,scaleX:1,scaleY:2-a,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"})});break;case"scale_rotate":n.forEach(e=>{e.id==o[t]?s.set(e,{opacity:1-a,scale:1-a,rotate:r?-(180-180*(1-a)):180-180*(1-a)}):e.id==o[i]&&s.set(e,{x:0,y:0,scale:a,rotate:r?180-180*a:-(180-180*a),rotateX:0,rotateY:0,opacity:a,filter:"none"})});break;case"cube":n.forEach(e=>{e.id==o[t]?s.set(e,{opacity:1-a,scale:1-.5*a,rotateY:r?-90*a:90*a}):e.id==o[i]&&s.set(e,{x:0,y:0,scale:.5+.5*a,rotate:0,rotateX:0,rotateY:r?90-90*a:-(90-90*a),opacity:a,filter:"none"})});break;case"fly_left_fade":n.forEach(e=>{e.id==o[t]?s.set(e,{x:(r?"":"-")+100*a+"%",opacity:1-a}):e.id==o[i]&&s.set(e,{x:(r?"-":"")+(100-100*a)+"%",y:0,scale:1,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"})});break;case"fly_right_fade":n.forEach(e=>{e.id==o[t]?s.set(e,{x:(r?"-":"")+100*a+"%",opacity:1-a}):e.id==o[i]&&s.set(e,{x:(r?"":"-")+(100-100*a)+"%",y:0,scale:1,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"})});break;case"fly_top_fade":n.forEach(e=>{e.id==o[t]?s.set(e,{y:(r?"-":"")+100*a+"%",opacity:1-a}):e.id==o[i]&&s.set(e,{x:0,y:(r?"":"-")+(100-100*a)+"%",scale:1,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"})});break;case"fly_bottom_fade":n.forEach(e=>{e.id==o[t]?s.set(e,{y:(r?"":"-")+100*a+"%",opacity:1-a}):e.id==o[i]&&s.set(e,{x:0,y:(r?"-":"")+(100-100*a)+"%",scale:1,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"})});break;case"fade_scale":n.forEach(e=>{e.id==o[t]?s.set(e,{scale:r?1.5-.5*(1-a):.5+.5*(1-a),opacity:1-a}):e.id==o[i]&&s.set(e,{x:0,y:0,scale:r?.5+.5*a:1.5-.5*a,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"})});break;case"checkerboard":n.forEach(e=>{e.id==o[t]?s.set(e,{scale:1-a,opacity:1-a}):e.id==o[i]&&s.set(e,{x:0,y:0,scale:.5+.5*a,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"})});break;case"diagonal_split":n.forEach(e=>{e.id==o[t]?s.set(e,{x:(r?"":"-")+(100-100*(1-a))+"%",y:(r?"":"-")+(100-100*(1-a))+"%",opacity:1-a}):e.id==o[i]&&s.set(e,{x:(r?"-":"")+(100-100*a)+"%",y:(r?"-":"")+(100-100*a)+"%",scale:1,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"})});break;case"zoomout_zoomin":n.forEach(e=>{e.id==o[t]?s.set(e,{x:(r?"":"-")+(100-100*(1-a))+"%",y:7.5-7.5*(1-a)+"%",scale:.7+.3*(1-a)}):e.id==o[i]&&s.set(e,{x:(r?"-":"")+(100-100*a)+"%",y:7.5-7.5*a+"%",scale:.7+.3*a,rotate:0,rotateX:0,rotateY:0,opacity:1,filter:"none"})});break;case"zoomout_zoomin_circle":n.forEach(e=>{e.id==o[t]?s.set(e,{x:(r?"":"-")+(100-100*(1-a))+"%",y:30-30*(1-a)+"%",scale:.7+.3*(1-a),rotate:r?45-45*(1-a):-(45-45*(1-a))}):e.id==o[i]&&s.set(e,{x:(r?"-":"")+(100-100*a)+"%",y:30-30*a+"%",scale:.7+.3*a,rotate:r?-(45-45*a):45-45*a,rotateX:0,rotateY:0,opacity:1,filter:"none"})});break;case"xyz":n.forEach(e=>{e.id==o[t]?s.set(e,{x:(r?"":"-")+(100-100*(1-a))+"%",rotateY:r?45-45*(1-a):-(45-45*(1-a))}):e.id==o[i]&&s.set(e,{x:(r?"-":"")+(100-100*a)+"%",y:0,scale:1,rotate:0,rotateX:0,rotateY:r?-(45-45*a):45-45*a,opacity:1,filter:"none"})});break;case"fall_over":n.forEach(e=>{e.id==o[t]?s.set(e,{y:r?0:100*a+"%",rotateX:r?0:-90*a}):e.id==o[i]&&s.set(e,{x:0,y:r?100-100*a+"%":0,scale:1,rotate:0,rotateX:r?90*a-90:0,rotateY:0,opacity:a,filter:"none"})})}};animateSlide=(e,n,t,i,o,a,r,s,l)=>{switch(e){case"fade_in":n.forEach((e,n)=>{e.id==o[t]?s.to(e,{opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:0,rotate:0,rotateX:0,rotateY:0,scale:1,opacity:a,filter:"none"},{opacity:1,duration:l})});break;case"slide_left":n.forEach(e=>{e.id==o[t]?s.fromTo(e,{x:(r?"":"-")+100*a+"%",opacity:1},{x:(r?"":"-")+"100%",opacity:1,duration:l}):e.id==o[i]&&s.fromTo(e,{x:(r?"-":"")+(100-100*a)+"%",y:0,scale:1,rotate:0,rotateX:0,rotateY:0,opacity:1,filter:"none"},{x:0,opacity:1,duration:l})});break;case"slide_right":n.forEach(e=>{e.id==o[t]?s.fromTo(e,{x:(r?"-":"")+100*a+"%",opacity:1},{x:(r?"-":"")+"100%",opacity:1,duration:l}):e.id==o[i]&&s.fromTo(e,{x:(r?"":"-")+(100-100*a)+"%",y:0,scale:1,rotate:0,rotateX:0,rotateY:0,opacity:1,filter:"none"},{x:0,opacity:1,duration:l})});break;case"slide":n.forEach(e=>{e.id==o[t]?s.fromTo(e,{x:100*a+"%",opacity:1-a},{x:"100%",opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:100-100*a+"%",rotate:0,y:0,rotateX:0,rotateY:0,opacity:a,scale:1,filter:"none"},{x:0,rotate:0,opacity:1,scale:1,duration:l})});break;case"zoom_in":n.forEach(e=>{e.id==o[t]?s.fromTo(e,{scale:1-a,opacity:1-a},{scale:0,opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:0,rotate:0,rotateX:0,rotateY:0,scale:a,opacity:a,filter:"none"},{x:0,rotate:0,scale:1,opacity:1,duration:l})});break;case"rotate":n.forEach(e=>{e.id==o[t]?s.fromTo(e,{scale:1-a,opacity:1-a},{scale:0,opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:0,rotate:r?180-180*a:-(180-180*a),rotateX:0,rotateY:0,scale:a,opacity:a,filter:"none"},{rotate:0,scale:1,opacity:1,duration:l})});break;case"flip_x":n.forEach(e=>{e.id==o[t]?s.fromTo(e,{scale:1,rotateY:r?-(180-180*(1-a)):180-180*(1-a),opacity:1-a},{scale:1,rotateY:r?-180:180,opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:0,rotate:0,rotateX:0,rotateY:r?180-180*a:-(180-180*a),scale:1,opacity:a,filter:"none"},{scale:1,rotateY:0,x:0,opacity:1,duration:l})});break;case"bounce":n.forEach(e=>{e.id==o[t]?s.to(e,{opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:(r?"-":"")+(100-100*a)+"%",scale:1,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"},{y:"0%",opacity:1,duration:l,ease:"bounce"})});break;case"blur":n.forEach(e=>{e.id==o[t]?s.to(e,{filter:"blur(10px)",opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:0,scale:1,rotate:0,rotateX:0,rotateY:0,filter:`blur(${10-10*a}px)`,opacity:a},{filter:"blur(0)",opacity:1,duration:l})});break;case"grayscale":n.forEach(e=>{e.id==o[t]?s.to(e,{opacity:0,filter:`grayscale(${100-100*(1-a)}%)`,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:0,scale:1,rotate:0,rotateX:0,rotateY:0,filter:`grayscale(${100-100*a}%)`,opacity:a},{filter:"grayscale(0)",opacity:1,duration:l})});break;case"squeeze":n.forEach(e=>{e.id==o[t]?s.to(e,{scaleX:0,opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:0,scaleX:2-a,scaleY:1,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"},{scaleX:1,opacity:1,duration:l})});break;case"shutter":n.forEach(e=>{e.id==o[t]?s.to(e,{scaleY:0,opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:0,scaleX:1,scaleY:2-a,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"},{scaleY:1,opacity:1,duration:l})});break;case"scale_rotate":n.forEach(e=>{e.id==o[t]?s.fromTo(e,{scale:1-a,rotateX:0,rotateY:0,opacity:1-a},{scale:0,rotate:r?-180:180,opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:0,scale:a,rotate:r?180-180*a:-(180-180*a),rotateX:0,rotateY:0,opacity:a,filter:"none"},{scale:1,rotate:0,opacity:1,duration:l})});break;case"cube":n.forEach(e=>{e.id==o[t]?s.fromTo(e,{scale:1-.5*a,rotateY:r?-90*a:90*a,opacity:1-a},{scale:.5,rotateY:r?-90:90,opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:0,scale:.5+.5*a,rotate:0,rotateX:0,rotateY:r?90-90*a:-(90-90*a),opacity:a,filter:"none"},{scale:1,rotateY:0,opacity:1,duration:l})});break;case"fly_left_fade":n.forEach(e=>{e.id==o[t]?s.fromTo(e,{x:(r?"":"-")+100*a+"%",opacity:1-a},{x:(r?"":"-")+"100%",opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:(r?"-":"")+(100-100*a)+"%",y:0,scale:1,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"},{x:0,opacity:1,duration:l})});break;case"fly_right_fade":n.forEach(e=>{e.id==o[t]?s.fromTo(e,{x:(r?"-":"")+100*a+"%",opacity:1-a},{x:(r?"-":"")+"100%",opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:(r?"":"-")+(100-100*a)+"%",y:0,scale:1,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"},{x:0,opacity:1,duration:l})});break;case"fly_top_fade":n.forEach(e=>{e.id==o[t]?s.fromTo(e,{y:(r?"-":"")+100*a+"%",opacity:1-a},{y:(r?"-":"")+"100%",opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:(r?"":"-")+(100-100*a)+"%",scale:1,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"},{y:0,opacity:1,duration:l})});break;case"fly_bottom_fade":n.forEach(e=>{e.id==o[t]?s.fromTo(e,{y:(r?"":"-")+100*a+"%",opacity:1-a},{y:(r?"":"-")+"100%",opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:(r?"-":"")+(100-100*a)+"%",scale:1,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"},{y:0,opacity:1,duration:l})});break;case"fade_scale":n.forEach(e=>{e.id==o[t]?s.to(e,{scale:r?1.5:.5,opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:0,scale:r?.5+.5*a:1.5-.5*a,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"},{scale:1,opacity:1,duration:l})});break;case"checkerboard":n.forEach(e=>{e.id==o[t]?s.fromTo(e,{scale:1-a,opacity:1-a},{scale:.5,opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:0,scale:.5+.5*a,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"},{scale:1,opacity:1,duration:l})});break;case"diagonal_split":n.forEach(e=>{e.id==o[t]?s.to(e,{x:(r?"":"-")+"100%",y:(r?"":"-")+"100%",opacity:0,duration:l}):e.id==o[i]&&s.fromTo(e,{x:(r?"-":"")+(100-100*a)+"%",y:(r?"-":"")+(100-100*a)+"%",scale:1,rotate:0,rotateX:0,rotateY:0,opacity:a,filter:"none"},{x:0,y:0,opacity:1,duration:l})});break;case"zoomout_zoomin":n.forEach(e=>{e.id==o[t]?s.to(e,{x:(r?"":"-")+"100%",y:"7.5%",scale:.7,duration:l}):e.id==o[i]&&s.fromTo(e,{x:(r?"-":"")+(100-100*a)+"%",y:7.5-7.5*a+"%",scale:.7+.3*a,rotate:0,rotateX:0,rotateY:0,opacity:1,filter:"none"},{x:0,y:0,scale:1,opacity:1,duration:l})});break;case"zoomout_zoomin_circle":n.forEach(e=>{e.id==o[t]?s.to(e,{x:(r?"":"-")+"100%",y:"30%",scale:.7,rotate:r?45:-45,rotateX:0,rotateY:0,opacity:1,duration:l}):e.id==o[i]&&s.fromTo(e,{x:(r?"-":"")+(100-100*a)+"%",y:30-30*a+"%",scale:.7+.3*a,rotate:r?-(45-45*a):45-45*a,rotateX:0,rotateY:0,opacity:1,filter:"none"},{x:0,y:0,scale:1,rotate:0,opacity:1,duration:l})});break;case"xyz":n.forEach(e=>{e.id==o[t]?s.to(e,{x:(r?"":"-")+"100%",y:0,scale:1,rotateX:0,rotateY:r?45:-45,opacity:1,duration:l}):e.id==o[i]&&s.fromTo(e,{x:(r?"-":"")+(100-100*a)+"%",y:0,scale:1,rotate:0,rotateX:0,rotateY:r?-(45-45*a):45-45*a,opacity:1,filter:"none"},{x:0,y:0,scale:1,rotateY:0,opacity:1,duration:l})});break;case"fall_over":n.forEach(e=>{e.id==o[t]?s.fromTo(e,{x:0,y:r?0:100*a+"%",scale:1,rotate:0,rotateX:r?0:-90*a,rotateY:0,opacity:1,filter:"none"},{x:0,y:r?0:"100%",scale:1,rotateX:r?0:-90,rotateY:0,opacity:1,duration:l}):e.id==o[i]&&s.fromTo(e,{x:0,y:r?100-100*a+"%":0,scale:1,rotate:0,rotateX:r?90*a-90:0,rotateY:0,opacity:a,filter:"none"},{x:0,y:0,rotate:0,rotateX:0,rotateY:0,scale:1,opacity:1,duration:l})})}};static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:nt,deps:[{token:xn},{token:tt},{token:t.ElementRef},{token:g}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:nt,isStandalone:!0,selector:"wb-frame-banner",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type",isClone:"isClone",product:"product"},viewQueries:[{propertyName:"frameBanner",first:!0,predicate:["frameBanner"],descendants:!0}],ngImport:t,template:'<div class="frame-banner" [ngStyle]="class[\'frame-banner\']" [id]="data._id">\n \x3c!-- Danh sách nút chuyển trang --\x3e\n <div class="frame-banner__pagination" [ngStyle]="class[\'frame-banner__pagination\']">\n <ul class="frame-banner__dots" [ngStyle]="class[\'frame-banner__dots\']">\n @for (frame of data.objects; track $index) {\n <li\n [ngClass]="{\n \'-frame-banner__dot\': $index != currentIndex,\n \'+frame-banner__dot\': $index == currentIndex\n }"\n [ngStyle]="\n $index == currentIndex ? class[\'+frame-banner__dot\'] : class[\'-frame-banner__dot\']\n "\n (click)="$event.stopPropagation(); jumpToSlide($index)"\n ></li>\n }\n </ul>\n </div>\n\n @if (config.icon_left?.is_icon) {\n <button\n class="frame-banner__btn-left"\n [ngStyle]="class[\'frame-banner__btn-left\']"\n (click)="previousSlide()"\n >\n <nz-icon\n [nzType]="config[\'icon_left\'][\'icon_name\']"\n [ngStyle]="class[\'frame-banner__btn-left-icon\']"\n class="frame-banner__btn-left-icon"\n nzTheme="outline"\n />\n </button>\n }\n\n @if (config.icon_right?.is_icon) {\n <button\n class="frame-banner__btn-right"\n [ngStyle]="class[\'frame-banner__btn-right\']"\n (click)="nextSlide()"\n >\n <nz-icon\n [nzType]="config[\'icon_right\'][\'icon_name\']"\n [ngStyle]="class[\'frame-banner__btn-right-icon\']"\n class="frame-banner__btn-right-icon"\n nzTheme="outline"\n />\n </button>\n }\n <div\n class="frame-banner__slides"\n [ngStyle]="class[\'frame-banner__slides\']"\n #frameBanner\n (mousedown)="startDrag($event)"\n (mousemove)="onDrag($event)"\n (mouseup)="endDrag($event)"\n (mouseleave)="endDrag($event)"\n (touchstart)="startDrag($event)"\n (touchmove)="onDrag($event)"\n (touchend)="endDrag($event)"\n >\n @for (object of data.objects; track $index) {\n <div\n class="frame-banner__slide"\n [ngStyle]="class[\'frame-banner__slide\']"\n [id]="object._id"\n [style.zIndex]="$index == currentIndex ? 2 : 0"\n [style.opacity]="$index == currentIndex ? 1 : 0"\n >\n <ng-container\n *ngComponentOutlet="\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + \'_class\'],\n config: object[device + \'_config\'],\n animation: object[device + \'_animation\'],\n isClone: [\'design\', \'admin\'].includes(type) && isClone ? isClone : data.is_clone,\n product: product\n }\n "\n >\n </ng-container>\n </div>\n }\n </div>\n</div>\n',styles:[".frame-banner{width:var(--width);height:var(--height)}.frame-banner .frame-banner__btn-right,.frame-banner .frame-banner__btn-left{position:var(--position);top:var(--top);transform:var(--transform);z-index:var(--z-index);width:var(--width);height:var(--height);left:var(--left);background-color:var(--bg-color);right:var(--right);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);cursor:var(--pointer);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color)}.frame-banner .frame-banner__btn-right .frame-banner__btn-right-icon,.frame-banner .frame-banner__btn-left .frame-banner__btn-right-icon,.frame-banner .frame-banner__btn-right .frame-banner__btn-left-icon,.frame-banner .frame-banner__btn-left .frame-banner__btn-left-icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);cursor:pointer}.frame-banner .frame-banner__pagination{position:var(--position);bottom:var(--bottom);left:var(--left);display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content);width:var(--width);z-index:var(--z-index)}.frame-banner .frame-banner__pagination .frame-banner__dots{display:var(--display);align-items:var(--align-items);gap:var(--gap)}.frame-banner .frame-banner__pagination .frame-banner__dots .-frame-banner__dot,.frame-banner .frame-banner__pagination .frame-banner__dots .\\+frame-banner__dot{width:var(--width);height:var(--height);background-color:var(--bg-color);cursor:var(--cursor);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-image:var(--border-image)}.frame-banner .frame-banner__slides{width:var(--width);height:var(--height)}.frame-banner .frame-banner__slides .frame-banner__slide{position:var(--position);top:var(--top);left:var(--left);width:var(--width);height:var(--height);transform:var(--transform);-webkit-user-select:var(--user-select);user-select:var(--user-select)}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgClass,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:nt,decorators:[{type:l,args:[{selector:"wb-frame-banner",imports:[k,j],template:'<div class="frame-banner" [ngStyle]="class[\'frame-banner\']" [id]="data._id">\n \x3c!-- Danh sách nút chuyển trang --\x3e\n <div class="frame-banner__pagination" [ngStyle]="class[\'frame-banner__pagination\']">\n <ul class="frame-banner__dots" [ngStyle]="class[\'frame-banner__dots\']">\n @for (frame of data.objects; track $index) {\n <li\n [ngClass]="{\n \'-frame-banner__dot\': $index != currentIndex,\n \'+frame-banner__dot\': $index == currentIndex\n }"\n [ngStyle]="\n $index == currentIndex ? class[\'+frame-banner__dot\'] : class[\'-frame-banner__dot\']\n "\n (click)="$event.stopPropagation(); jumpToSlide($index)"\n ></li>\n }\n </ul>\n </div>\n\n @if (config.icon_left?.is_icon) {\n <button\n class="frame-banner__btn-left"\n [ngStyle]="class[\'frame-banner__btn-left\']"\n (click)="previousSlide()"\n >\n <nz-icon\n [nzType]="config[\'icon_left\'][\'icon_name\']"\n [ngStyle]="class[\'frame-banner__btn-left-icon\']"\n class="frame-banner__btn-left-icon"\n nzTheme="outline"\n />\n </button>\n }\n\n @if (config.icon_right?.is_icon) {\n <button\n class="frame-banner__btn-right"\n [ngStyle]="class[\'frame-banner__btn-right\']"\n (click)="nextSlide()"\n >\n <nz-icon\n [nzType]="config[\'icon_right\'][\'icon_name\']"\n [ngStyle]="class[\'frame-banner__btn-right-icon\']"\n class="frame-banner__btn-right-icon"\n nzTheme="outline"\n />\n </button>\n }\n <div\n class="frame-banner__slides"\n [ngStyle]="class[\'frame-banner__slides\']"\n #frameBanner\n (mousedown)="startDrag($event)"\n (mousemove)="onDrag($event)"\n (mouseup)="endDrag($event)"\n (mouseleave)="endDrag($event)"\n (touchstart)="startDrag($event)"\n (touchmove)="onDrag($event)"\n (touchend)="endDrag($event)"\n >\n @for (object of data.objects; track $index) {\n <div\n class="frame-banner__slide"\n [ngStyle]="class[\'frame-banner__slide\']"\n [id]="object._id"\n [style.zIndex]="$index == currentIndex ? 2 : 0"\n [style.opacity]="$index == currentIndex ? 1 : 0"\n >\n <ng-container\n *ngComponentOutlet="\n map.render(object.component);\n inputs: {\n data: object,\n type: type,\n device: device,\n class: object[device + \'_class\'],\n config: object[device + \'_config\'],\n animation: object[device + \'_animation\'],\n isClone: [\'design\', \'admin\'].includes(type) && isClone ? isClone : data.is_clone,\n product: product\n }\n "\n >\n </ng-container>\n </div>\n }\n </div>\n</div>\n',styles:[".frame-banner{width:var(--width);height:var(--height)}.frame-banner .frame-banner__btn-right,.frame-banner .frame-banner__btn-left{position:var(--position);top:var(--top);transform:var(--transform);z-index:var(--z-index);width:var(--width);height:var(--height);left:var(--left);background-color:var(--bg-color);right:var(--right);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);display:var(--display);justify-content:var(--justify-content);align-items:var(--align-items);cursor:var(--pointer);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color)}.frame-banner .frame-banner__btn-right .frame-banner__btn-right-icon,.frame-banner .frame-banner__btn-left .frame-banner__btn-right-icon,.frame-banner .frame-banner__btn-right .frame-banner__btn-left-icon,.frame-banner .frame-banner__btn-left .frame-banner__btn-left-icon{color:var(--color);font-size:var(--font-size);margin-left:var(--margin-left);margin-right:var(--margin-right);rotate:var(--rotate);transition-duration:var(--transition-duration);transition-property:all;transition-timing-function:var(--transition-timing-function);cursor:pointer}.frame-banner .frame-banner__pagination{position:var(--position);bottom:var(--bottom);left:var(--left);display:var(--display);align-items:var(--align-items);justify-content:var(--justify-content);width:var(--width);z-index:var(--z-index)}.frame-banner .frame-banner__pagination .frame-banner__dots{display:var(--display);align-items:var(--align-items);gap:var(--gap)}.frame-banner .frame-banner__pagination .frame-banner__dots .-frame-banner__dot,.frame-banner .frame-banner__pagination .frame-banner__dots .\\+frame-banner__dot{width:var(--width);height:var(--height);background-color:var(--bg-color);cursor:var(--cursor);border-top-left-radius:var(--border-top-left-radius);border-top-right-radius:var(--border-top-right-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--border-bottom-right-radius);border-top-width:var(--border-top-width);border-bottom-width:var(--border-bottom-width);border-left-width:var(--border-left-width);border-right-width:var(--border-right-width);border-style:var(--border-style);border-color:var(--border-color);border-image:var(--border-image)}.frame-banner .frame-banner__slides{width:var(--width);height:var(--height)}.frame-banner .frame-banner__slides .frame-banner__slide{position:var(--position);top:var(--top);left:var(--left);width:var(--width);height:var(--height);transform:var(--transform);-webkit-user-select:var(--user-select);user-select:var(--user-select)}\n"]}]}],ctorParameters:()=>[{type:xn},{type:tt},{type:t.ElementRef},{type:Object,decorators:[{type:u,args:[g]}]}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}],isClone:[{type:s}],product:[{type:s}],frameBanner:[{type:p,args:["frameBanner",{static:!1}]}]}});class tt{constructor(){}render(e){return e&&{WbBlockBlank:kn,WbFrameBlank:jn,WbFrameProducts:$n,WbFrameProductDetail:En,WbFrameTab:Ln,WbFrameBanner:nt,WbButton:Dn,WbText:Pn,WbImage:An,WbBreadcumb:Wn,WbMenuHorizontal:Fn,WbInput:Nn,WbTextParagraph:Vn,WbButtonQuantity:Rn,WbSelectCountry:Kn,WbSelectProvinceDistrictWard:Hn,WbButtonSetDefaultAddress:Gn,WbMenuMobile:Xn,WbProductImageList:qn,WbFrameProductsByCategory:Un,WbCheckboxFilter:Yn,WbLine:Jn,WbVideo:Qn,WbFrameCart:Zn,WbProductSelectAttribute:et}[e]||null}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:tt,deps:[],target:t.ɵɵFactoryTarget.Injectable});static"ɵprov"=t.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:tt,providedIn:"root"})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:tt,decorators:[{type:a,args:[{providedIn:"root"}]}],ctorParameters:()=>[]});const it={component:"WbButton",component_config:"WbButtonConfig",name:"Nút điều hướng",desktop_class:{button:{"--width":"100px","--height":"50px","--bg-color":"#09090B","--text-align":"center","--cursor":"pointer","--border-top-left-radius":"5px","--border-top-right-radius":"5px","--border-bottom-left-radius":"5px","--border-bottom-right-radius":"5px","--display":"flex","--justify-content":"center","--align-items":"center","--border-style":"solid","--border-top-width":"0px","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px","--bg-image":"none","--box-shadow":"none"},button__content:{"--color":"#FFFFFF","--font-size":"16px","--font-weight":"400","--font-family":"Arial","--display":"inline-block","--line-height":1.5,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"5px"},button__icon:{"--color":"#FFFFFF","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"}},desktop_config:{bg_color:{type:"color",gradient_arr:["#FF5733","#33FF57","#3357FF"],deg:0},icon:{is_icon:!1,icon_name:"search"},router:{type:"none",link:""},content:{vi:"Ok"},shadow:{is_shadow:!1,type:"",x:0,y:0,blur:0,color:"#000000"}},desktop_animation:{},resize_field:"button",resize_group:"image",type:"object_button"},ot={component:"WbText",component_config:"WbTextConfig",name:"Văn vản",desktop_class:{text:{"--width":"100px","--min-height":"10px","--bg-color":"transparent","--cursor":"text","--border-top-left-radius":"5px","--border-top-right-radius":"5px","--border-bottom-left-radius":"5px","--border-bottom-right-radius":"5px","--display":"flex","--justify-content":"left","--align-items":"center","--flex-direction":"row","--border-style":"solid","--border-top-width":"0px","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px","--border-color":"#000000","--bg-image":"none","--box-shadow":"none"},text__content:{"--color":"#000000","--font-size":"16px","--font-weight":"400","--display":"inline-block","--text-decoration":"none","--text-transform":"none","--font-family":"Arial","--line-height":1.5,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"0px"},text__icon:{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px","--rotate":"0deg"}},desktop_config:{tool_tip:{value:{vi:""},position:"top"},bg_color:{type:"color",gradient_arr:["#FF5733","#33FF57","#3357FF"],deg:0},icon:{is_icon:!1,icon_name:"search"},router:{type:"none",link:""},content:{vi:"Văn bản"},tag:"p",max_line:{use:!1,value:1},href:{type:"",link:""}},desktop_animation:{},resize_field:"text",resize_group:"block",type:"object_text"},at={component:"WbImage",component_config:"WbImageConfig",name:"Hình ảnh",desktop_class:{image:{"--width":"100px","--height":"100px","--display":"block","--border-top-left-radius":"5px","--border-top-right-radius":"5px","--border-bottom-left-radius":"5px","--border-bottom-right-radius":"5px","--border-style":"solid","--border-top-width":"0px","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px","--overflow":"hidden","--box-shadow":"none"},image__img:{"--width":"100%","--height":"100%","--object-fit":"fill","--object-position":"center"}},desktop_config:{router:{type:"none",link:""},img:{src:"https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg",alt:"Ảnh nền",upload_type:"device"},shadow:{is_shadow:!1,type:"",x:0,y:0,blur:0,color:"#000000"}},desktop_animation:{},resize_field:"image",resize_group:"image",type:"object_image"},rt={component:"WbProductImageList",component_config:"WbProductImageListConfig",name:"Danh sách hình ảnh sản phẩm",desktop_class:{"product-image-list":{"--display":"grid","--gap":"10px","--grid-template-columns":"repeat(4, 1fr)","--grid-template-rows":"auto","--position":"relative"},"+product-image-list__item":{"--width":"100%","--height":"100%","--border-top-left-radius":"0","--border-top-right-radius":"0","--border-bottom-left-radius":"0","--border-bottom-right-radius":"0","--border-style":"solid","--border-top-width":"0px","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px","--border-color":"#000000"},"-product-image-list__item":{"--width":"100%","--height":"100%","--border-top-left-radius":"0","--border-top-right-radius":"0","--border-bottom-left-radius":"0","--border-bottom-right-radius":"0","--border-style":"solid","--border-top-width":"0px","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px","--border-color":"#000000"},"product-image-list__img":{"--width":"100%","--height":"100%","--object-fit":"cover"},"product-image-list__btn-right":{"--position":"absolute","--top":"50%","--right":"10px","--left":"auto","--transform":"translateY(-50%)","--z-index":"10","--width":"30px","--height":"30px","--bg-color":"#FFFFFF","--border-top-left-radius":"30px","--border-top-right-radius":"30px","--border-bottom-left-radius":"30px","--border-bottom-right-radius":"30px","--display":"grid","--place-items":"center","--cursor":"pointer","--border-style":"solid","--border-top-width":"1px","--border-bottom-width":"1px","--border-left-width":"1px","--border-right-width":"1px","--border-color":"#000000"},"product-image-list__btn-right-icon":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px","--rotate":"0deg"},"product-image-list__btn-left":{"--position":"absolute","--top":"50%","--left":"10px","--right":"auto","--transform":"translateY(-50%)","--z-index":"10","--width":"30px","--height":"30px","--bg-color":"#FFFFFF","--border-top-left-radius":"30px","--border-top-right-radius":"30px","--border-bottom-left-radius":"30px","--border-bottom-right-radius":"30px","--display":"grid","--place-items":"center","--cursor":"pointer","--border-style":"solid","--border-top-width":"1px","--border-bottom-width":"1px","--border-left-width":"1px","--border-right-width":"1px","--border-color":"#000000"},"product-image-list__btn-left-icon":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px","--rotate":"0deg"}},desktop_config:{shadow:{is_shadow:!1,type:"",x:0,y:0,blur:0,color:"#000000"},total_imgs:4,icon_left:{icon_name:"caret-left"},icon_right:{icon_name:"caret-right"},slide:{slide_method:"frame",is_icon:!1,is_auto:!0,auto_time:5e3,is_swipe:!0,loop_method:"back_to_start"}},desktop_animation:{},resize_field:"product-image-list",resize_group:"image",type:"object_product_image_list"},st={component:"WbCheckboxFilter",component_config:"WbCheckboxFilterConfig",name:"Checkbox lọc sản phẩm",desktop_class:{"checkbox-filter":{"--display":"flex","--flex-direction":"column","--height":"100px","--width":"100px","--overflow":"auto","--gap":"10px"},"checkbox-filter__option":{"--display":"flex","--align-items":"center"},"checkbox-filter__input":{"--width":"20px","--height":"20px","--appearance":"none","--webkit-appearance":"none","--border":"1.5px solid #bbb","--border-radius":"4px","--cursor":"pointer","--transition":"background 0.2s, border-color 0.2s","--position":"relative","--bg-color":"#ff5722","--content-after":"'✔'","--position-after":"absolute","--left-after":"50%","--top-after":"50%","--transform-after":"translate(-50%, -50%)","--font-size-after":"12px","--color-after":"#fff","--display-after":"block"},"checkbox-filter__label":{"--font-size":"14px","--color":"#333","--margin-left":"10px","--margin-right":"0px"}},desktop_config:{field:"brand",data_list:[{_id:"1",value:{vi:"Hipp"}},{_id:"2",value:{vi:"Physiolac"}},{_id:"3",value:{vi:"Similac"}},{_id:"4",value:{vi:"Frisolac"}}]},desktop_animation:{},resize_field:"checkbox-filter",resize_group:"image",type:"object_product_checkbox_filter"},lt={component:"WbMenuHorizontal",component_config:"WbMenuHorizontalConfig",name:"Menu ngang",desktop_class:{"menu-horizontal":{"--display":"flex","--align-items":"center","--width":"150px","--height":"57.03180043371548px","--box-shadow":"none 2px 0px 27px #000000"},"+menu-horizontal__item":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"center","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--bg-color":"#ffffff","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--box-shadow":"none 0px 0px 0px #000000","--border-style":"solid","--border-top-width":"0px","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px","--border-color":"#000000","--bg-image":"none"},"+menu-horizontal__item-content":{"--color":"#ff5722","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--display":"inline-block","--line-height":1.5,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"5px","--font-family":"Arial","--font-style":"normal"},"+menu-horizontal__item-icon-before":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"+menu-horizontal__item-icon-after":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"-menu-horizontal__item":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"center","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--bg-color":"#ffffff","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--box-shadow":"none 0px 0px 0px #000000","--border-style":"solid","--border-top-width":"0px","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px","--border-color":"#ffffff","--bg-image":"none"},"-menu-horizontal__item-content":{"--color":"#030303","--font-size":"16px","--font-weight":400,"--text-decoration":"none","--display":"inline-block","--line-height":1.3,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"5px","--font-family":"Arial"},"-menu-horizontal__item-icon-before":{"--color":"#000000","--font-size":"15px","--margin-right":"5px","--margin-left":"5px"},"-menu-horizontal__item-icon-after":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"menu-horizontal__children":{"--display":"none","--flex-direction":"column","--position":"absolute","--justify-content":"center","--align-items":"flex-start","--min-width":"160px","--top":"100%","--left":"0","--left-2":"100%","--z-index":"100","--box-shadow":" 0px 0px 6px #000000","--bg-color":"#fff"},"+menu-horizontal__item--child":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"space-between","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--border-style":"solid","--border-top-width":"0px","--border-color":"rgba(0,0,0,0.21)","--border-bottom-width":"0.5px","--border-left-width":"0px","--border-right-width":"0px"},"+menu-horizontal__item-content--child":{"--color":"#ff5722","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--display":"inline-block","--line-height":5,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"10px","--font-family":"Arial"},"+menu-horizontal__item-icon-before--child":{"--color":"#FFFFFF","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"+menu-horizontal__item-icon-after--child":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"-menu-horizontal__item--child":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"space-between","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--border-style":"solid","--border-bottom-width":"0.5px","--border-color":"rgba(0,0,0,0.15)"},"-menu-horizontal__item-content--child":{"--color":"#000000","--font-size":"16px","--font-weight":"500","--text-decoration":"normal","--display":"inline-block","--line-height":5,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"10px","--font-family":"Arial","--font-style":"normal","--text-transform":"normal"},"-menu-horizontal__item-icon-before--child":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"-menu-horizontal__item-icon-after--child":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"}},desktop_config:{"+bg_color":{type:"color",gradient_arr:["#FF5733","#33FF57","#3357FF"],deg:0},"-bg_color":{type:"color",gradient_arr:["#FF5733","#33FF57","#3357FF"],deg:0},"+bg_color_child":{type:"color",gradient_arr:["#FF5733","#33FF57","#3357FF"],deg:0},"-bg_color_child":{type:"color",gradient_arr:["#FF5733","#33FF57","#3357FF"],deg:0},type:"horizontal",data_list:[{label:{vi:"Trang chủ"},router:{type:"link-select",link:""},group:"router",key:"mb38w4eg3sr9dj"},{label:{vi:"Sản phẩm"},router:{type:"none",link:""},group:"router",key:"mb38yb101u35kp",children:[{label:{vi:"Bé ăn - Bé uống"},router:{type:"none",link:""},group:"router",key:"mb38z27oicg2uh",children:[{label:{vi:"Sữa bột các loại"},router:{type:"none",link:""},group:"router",key:"mb38zod3mq082c"},{label:{vi:"Sữa tươi cho bé"},router:{type:"none",link:""},group:"router",key:"mb38zv42q7wlpq"}],expanded:!1,icon_after:"caret-right"},{label:{vi:"Đồ sơ sinh - Tã bỉm"},router:{type:"none",link:""},group:"router",key:"mb38ze74yatsoh",children:[{label:{vi:"Bỉm và Tã giấy"},router:{type:"none",link:""},group:"router",key:"mb390bjh0kj8fu"},{label:{vi:"Đồ dùng vệ sinh"},router:{type:"none",link:""},group:"router",key:"mb390gycuz92o7"}],icon_after:"caret-right"}],expanded:!0,icon_after:"caret-down"}],shadow:{is_shadow:!1,type:"",x:2,y:0,blur:27,color:"#000000"},"shadow-child":{is_shadow:!0,type:"",x:0,y:0,blur:6,color:"#000000"}},desktop_animation:{},resize_field:"menu-horizontal",resize_group:"image",type:"object_menu_horizontal"};class ct{transform(e){const n=e?.toString()||"",t=n.match(/scale\(([^)]+)\)/);if(t)return parseFloat(t[1]);const i=n.match(/blur\(([^)]+)\)/);return i?parseFloat(i[1]):parseFloat(n.replace("px","").replace("s","").replace("deg",""))||0}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ct,deps:[],target:t.ɵɵFactoryTarget.Pipe});static"ɵpipe"=t.ɵɵngDeclarePipe({minVersion:"14.0.0",version:"20.3.15",ngImport:t,type:ct,isStandalone:!0,name:"wbnumber"})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ct,decorators:[{type:h,args:[{name:"wbnumber"}]}]});class dt{webBuilderService;map;keySearch="";currentTab="hover";tabs=[{title:"Rê chuột",value:"hover"},{title:"Tự động",value:"keyframes"}];data;device;listAnimations={WbButton:{hover:[{_id:1,name:"Đổi màu",value:{button:{"--h-bg-color":"#ffffff","--h-color-content":"#000000","--h-color-icon":"#000000","--h-transition-duration":"0.3s","--transition-duration":"0.3s","--h-bg-image":"none"}},modify:[{name:"Màu nền",type:"color",class:"button",key:"--h-bg-color"},{name:"Màu chữ",type:"color",class:"button",key:"--h-color-content"},{name:"Màu biểu tượng",type:"color",class:"button",key:"--h-color-icon"},{name:"Thời gian bắt đầu(s)",type:"time",class:"button",key:"--h-transition-duration"},{name:"Thời gian kết thúc(s)",type:"time",class:"button",key:"--transition-duration"}]},{_id:2,name:"Phóng to, thu nhỏ",value:{button:{"--h-transform":"scale(1.1)","--h-transition-duration":"0.3s","--transition-duration":"0.3s"}},modify:[{name:"Thu phóng",type:"zoom",class:"button",key:"--h-transform"},{name:"Thời gian bắt đầu(s)",type:"time",class:"button",key:"--h-transition-duration"},{name:"Thời gian kết thúc(s)",type:"time",class:"button",key:"--transition-duration"}]},{_id:3,name:"Làm mờ",value:{button:{"--h-opacity":.5,"--h-transition-duration":"0.3s","--transition-duration":"0.3s"}},modify:[{name:"Độ mờ",type:"number",class:"button",key:"--h-opacity"},{name:"Thời gian bắt đầu(s)",type:"time",class:"button",key:"--h-transition-duration"},{name:"Thời gian kết thúc(s)",type:"time",class:"button",key:"--transition-duration"}]},{_id:4,name:"Thanh trượt",value:{button:{"--h-bg-color":"#ffffff","--h-color-content":"#000000"}}},{_id:5,name:"Vệt sáng",value:{button:{"--h-bg-color":"#ffffff","--h-color-content":"#000000"}}}],keyframes:[{_id:1,name:"Hiệu ứng lan sóng",value:{button:{"--animation-name":"wb-ripple","--a-bg-color":"#ff5722","--animation-duration":"0.3s","--animation-iteration-count":"infinite","--animation-timing-function":"linear"}},modify:[{name:"Màu lan sóng",type:"color",class:"button",key:"--a-bg-color"}]}],json:it},WbText:{hover:[{_id:1,name:"Đổi màu",value:{text:{"--h-color-content":"blue","--h-transition-duration":"0.3s","--transition-duration":"0.3s"}},modify:[{name:"Màu chữ",type:"color",class:"text",key:"--h-color-content"},{name:"Thời gian bắt đầu(s)",type:"time",class:"text",key:"--h-transition-duration"},{name:"Thời gian kết thúc(s)",type:"time",class:"text",key:"--transition-duration"}]},{_id:2,name:"Phóng to, thu nhỏ",value:{text:{"--h-transform":"scale(1.1)","--h-transition-duration":"0.3s","--transition-duration":"0.3s"}},modify:[{name:"Thu phóng",type:"zoom",class:"text",key:"--h-transform"},{name:"Thời gian bắt đầu(s)",type:"time",class:"text",key:"--h-transition-duration"},{name:"Thời gian kết thúc(s)",type:"time",class:"text",key:"--transition-duration"}]}],keyframes:[{_id:1,name:"Hiệu ứng lan sóng",value:{text:{"--animation-name":"wb-ripple","--a-bg-color":"#ff5722","--animation-duration":"0.3s","--animation-iteration-count":"infinite","--animation-timing-function":"linear"}},modify:[{name:"Màu lan sóng",type:"color",class:"text",key:"--a-bg-color"}]}],json:ot},WbImage:{hover:[{_id:1,name:"Phóng to, thu nhỏ",value:{image__img:{"--h-transform":"scale(1.1)","--h-transition-duration":"0.3s","--transition-duration":"0.3s"}},modify:[{name:"Thu phóng",type:"zoom",class:"image__img",key:"--h-transform"},{name:"Thời gian bắt đầu(s)",type:"time",class:"image__img",key:"--h-transition-duration"},{name:"Thời gian kết thúc(s)",type:"time",class:"image__img",key:"--transition-duration"}]},{_id:2,name:"Xoay ảnh",value:{image:{"--h-transform":"rotateY(360deg)","--h-transition-duration":".5s","--transition-duration":".5s"}},modify:[]}],keyframes:[],json:at},WbProductImageList:{hover:[{_id:1,name:"Đổi màu viền",value:{"-product-image-list__item":{"--h-border-color":"#ff5722","--h-transition-duration":"0.3s","--transition-duration":"0.3s"}},modify:[{name:"Đổi màu viền",type:"color",class:"-product-image-list__item",key:"--h-border-color"},{name:"Thời gian bắt đầu(s)",type:"time",class:"-product-image-list__item",key:"--h-transition-duration"},{name:"Thời gian kết thúc(s)",type:"time",class:"-product-image-list__item",key:"--transition-duration"}]}],keyframes:[],json:rt},WbCheckboxFilter:{hover:[{_id:1,name:"Đổi màu chữ",value:{"checkbox-filter__label":{"--h-color":"#ff5722","--h-transition-duration":"0.3s","--transition-duration":"0.3s"}},modify:[{name:"Đổi màu chữ",type:"color",class:"checkbox-filter__label",key:"--h-color"},{name:"Thời gian bắt đầu(s)",type:"time",class:"checkbox-filter__label",key:"--h-transition-duration"},{name:"Thời gian kết thúc(s)",type:"time",class:"checkbox-filter__label",key:"--transition-duration"}]}],keyframes:[],json:st},WbMenuHorizontal:{hover:[{_id:1,name:"Đổi màu",value:{"-menu-horizontal__item":{"--h-bg-color":"#fff","--h-color-content":"rgb(18 18 18 / 85%)","--h-color-icon":"#000000","--h-transition-duration":"0.3s","--transition-duration":"0.3s","--h-bg-image":"none","--h-text-decoration":"underline","--h-text-decoration-thickness":"2px","--h-text-underline-offset":"10px","--h-text-decoration-color":"#008a23"},"-menu-horizontal__item--child":{"--h-bg-color":"#F7F7F7","--h-color-content":"rgb(18 18 18 / 85%)","--h-color-icon":"#000000","--h-transition-duration":"0.3s","--transition-duration":"0.3s","--h-bg-image":"none"}},modify:[{name:"Màu nền(cha)",type:"color",class:"-menu-horizontal__item",key:"--h-bg-color"},{name:"Màu chữ(cha)",type:"color",class:"-menu-horizontal__item",key:"--h-color-content"},{name:"Màu biểu tượng(cha)",type:"color",class:"-menu-horizontal__item",key:"--h-color-icon"},{name:"Gạch chân(cha)",type:"text-decoration",class:"-menu-horizontal__item",key:"--h-text-decoration"},{name:"Độ dày gạch chân(cha)",type:"px",class:"-menu-horizontal__item",key:"--h-text-decoration-thickness"},{name:"Khoảng cách gạch chân(cha)",type:"px",class:"-menu-horizontal__item",key:"--h-text-underline-offset"},{name:"Màu gạch chân(cha)",type:"color",class:"-menu-horizontal__item",key:"--h-text-decoration-color"},{name:"Thời gian bắt đầu(s)(cha)",type:"time",class:"-menu-horizontal__item",key:"--h-transition-duration"},{name:"Thời gian kết thúc(s)(cha)",type:"time",class:"-menu-horizontal__item",key:"--transition-duration"},{name:"Màu nền(con)",type:"color",class:"-menu-horizontal__item--child",key:"--h-bg-color"},{name:"Màu chữ(con)",type:"color",class:"-menu-horizontal__item--child",key:"--h-color-content"},{name:"Màu biểu tượng(con)",type:"color",class:"-menu-horizontal__item--child",key:"--h-color-icon"}]}],keyframes:[],json:lt}};isDetail=!1;currentModify=[];type="design";nzModalData=o(I);selectedIndex=0;borderOptions=[{label:"Không viền",value:"none"},{label:"Viền nét liền",value:"solid"},{label:"Viền nét đứt",value:"dashed"},{label:"Viền chấm chấm",value:"dotted"},{label:"Viền đôi",value:"double"},{label:"Viền khắc lõm (groove)",value:"groove"},{label:"Viền khắc nổi (ridge)",value:"ridge"},{label:"Viền chìm (inset)",value:"inset"},{label:"Viền nổi (outset)",value:"outset"}];textDecorationOptions=[{label:"Gạch chân",value:"underline"},{label:"Không",value:"none"}];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){const{data:e,device:n}=this.nzModalData;this.data=e,this.device=n}onSearch(){}onTabChange(e){this.currentTab=this.tabs[e].value}handleChangeAnimation(e){const{data:n,device:t}=this.nzModalData;if(n[t+"_animation"].type==this.currentTab&&n[t+"_animation"]._id==e._id)return this.isDetail=!0,void(this.currentModify=e.modify);n[t+"_animation"]={_id:e._id,type:this.currentTab,...e.value},this.isDetail=!0,this.currentModify=e.modify,this.updateAnimation()}onRemoveAnimation(e){e.stopPropagation();const{data:n,device:t}=this.nzModalData;n[t+"_animation"]={},this.isDetail=!1,this.currentModify=[],this.updateAnimation()}updateAnimation(){const{data:e,device:n}=this.nzModalData;e.type.includes("block")?this.webBuilderService.updateBlock(e._id,{[n+"_animation"]:e[n+"_animation"]}):this.webBuilderService.updateObject(e._id,{[n+"_animation"]:e[n+"_animation"]})}onAnimationDetailChange(e,n){"time"==n?.type&&(this.data[this.device+"_animation"][n.class][n.key]=e+"s"),"zoom"==n?.type&&(this.data[this.device+"_animation"][n.class][n.key]=`scale(${e})`),this.data[this.webBuilderService.device+"_animation"]=JSON.parse(JSON.stringify(this.data[this.webBuilderService.device+"_animation"]))}onClose(e){e||this.updateAnimation()}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:dt,deps:[{token:xn},{token:tt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:dt,isStandalone:!0,selector:"wb-list-animation",ngImport:t,template:'<div class="animation-config">\n @if (!isDetail) {\n <div class="mb-2 sticky top-0 z-10 bg-white text-center">\n <nz-input-group\n style="max-width: 500px; width: 100%"\n nzSearch\n [nzAddOnAfter]="suffixIconButton"\n >\n <input\n [(ngModel)]="keySearch"\n (input)="onSearch()"\n type="text"\n nz-input\n placeholder="Tìm hiệu ứng..."\n />\n </nz-input-group>\n <ng-template #suffixIconButton>\n <button nz-button nzType="primary" nzSearch><nz-icon nzType="search" /></button>\n </ng-template>\n </div>\n\n <nz-tabs [nzSelectedIndex]="selectedIndex" (nzSelectedIndexChange)="onTabChange($event)">\n @for (tab of tabs; track $index) {\n <nz-tab [nzTitle]="tab.title"> </nz-tab>\n }\n </nz-tabs>\n\n <div class="icon-list grid grid-cols-5 gap-8 mt-4">\n @for (item of listAnimations[data.component][currentTab]; track item._id) {\n <div\n [class]="`relative flex flex-col items-center justify-center gap-2 rounded bg-[#f5f5f5] p-2 cursor-pointer hover:bg-[#e0e0e0] ${data[device + \'_animation\'].type == currentTab && data[device + \'_animation\']._id == item._id ? \'outline outline-black\' : \'\'} `"\n (click)="handleChangeAnimation(item)"\n >\n <ng-container\n *ngComponentOutlet="\n map.render(listAnimations[data.component].json.component);\n inputs: {\n data: listAnimations[data.component].json,\n class: listAnimations[data.component].json[device + \'_class\'],\n config: listAnimations[data.component].json[device + \'_config\'],\n type: type,\n animation: item.value,\n device: device\n }\n "\n >\n </ng-container>\n <p>\n {{ item.name }}\n </p>\n\n @if (\n data[device + \'_animation\'].type == currentTab &&\n data[device + \'_animation\']._id == item._id\n ) {\n <div class="absolute right-1 top-1">\n <button\n nz-button\n nzShape="circle"\n nzType="primary"\n nzDanger\n nzSize="small"\n class="color-remove"\n (click)="onRemoveAnimation($event)"\n >\n ×\n </button>\n </div>\n }\n </div>\n }\n </div>\n } @else {\n <div class="flex flex-col">\n <button class="mb-4 w-fit" nz-button (click)="isDetail = false">Trở lại</button>\n <div class="flex items-center justify-center mb-4">\n <div class="w-fit h-fit shadow-lg">\n <ng-container\n *ngComponentOutlet="\n map.render(data.component);\n inputs: {\n data: data,\n class: data[device + \'_class\'],\n config: data[device + \'_config\'],\n animation: data[device + \'_animation\'],\n device: device,\n type: type\n }\n "\n >\n </ng-container>\n </div>\n </div>\n <div\n class="flex flex-col gap-4 w-full max-w-[400px] mx-auto"\n style="width: 100%; max-width: 400px; margin: 0 auto"\n >\n @for (item of currentModify; track $index) {\n @if (item.type == \'color\') {\n <div class="flex items-center justify-between gap-4">\n <label for="">{{ item.name }}</label>\n\n <div>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_animation\'][item.class][item.key]"\n (ngModelChange)="onAnimationDetailChange()"\n (nzOnOpenChange)="onClose($event)"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_animation\'][item.class][item.key]"\n ></div>\n </ng-template>\n </div>\n </div>\n }\n @if (item.type == \'time\') {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">{{ item.name }}</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateAnimation()"\n [ngModel]="data[device + \'_animation\'][item.class][item.key] | wbnumber"\n (ngModelChange)="onAnimationDetailChange($event, item)"\n />\n </div>\n <div class="px-2">\n <nz-slider\n [nzStep]="0.1"\n [nzMin]="0"\n [nzMax]="10"\n [ngModel]="data[device + \'_animation\'][item.class][item.key] | wbnumber"\n (ngModelChange)="onAnimationDetailChange($event, item)"\n (nzOnAfterChange)="updateAnimation()"\n ></nz-slider>\n </div>\n </div>\n }\n @if (item.type == \'zoom\') {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">{{ item.name }}</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateAnimation()"\n [ngModel]="data[device + \'_animation\'][item.class][item.key] | wbnumber"\n (ngModelChange)="onAnimationDetailChange($event, item)"\n />\n </div>\n <div class="px-2">\n <nz-slider\n [nzStep]="0.1"\n [nzMin]="-1"\n [nzMax]="2"\n [ngModel]="data[device + \'_animation\'][item.class][item.key] | wbnumber"\n (ngModelChange)="onAnimationDetailChange($event, item)"\n (nzOnAfterChange)="updateAnimation()"\n ></nz-slider>\n </div>\n </div>\n }\n @if (item.type == \'number\') {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">{{ item.name }}</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateAnimation()"\n [(ngModel)]="data[device + \'_animation\'][item.class][item.key]"\n (ngModelChange)="onAnimationDetailChange($event, item)"\n />\n </div>\n <div class="px-2">\n <nz-slider\n [nzStep]="0.1"\n [nzMin]="0"\n [nzMax]="0.9"\n [(ngModel)]="data[device + \'_animation\'][item.class][item.key]"\n (ngModelChange)="onAnimationDetailChange($event, item)"\n (nzOnAfterChange)="updateAnimation()"\n ></nz-slider>\n </div>\n </div>\n }\n\n @if (item.type == \'px\') {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">{{ item.name }}</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateAnimation()"\n [ngModel]="data[device + \'_animation\'][item.class][item.key] | wbnumber"\n (ngModelChange)="\n data[device + \'_animation\'][item.class][item.key] = $event + \'px\';\n onAnimationDetailChange($event, item)\n "\n (ngModelChange)="onAnimationDetailChange($event, item)"\n />\n </div>\n <div class="px-2">\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_animation\'][item.class][item.key] | wbnumber"\n (ngModelChange)="\n data[device + \'_animation\'][item.class][item.key] = $event + \'px\';\n onAnimationDetailChange($event, item)\n "\n (nzOnAfterChange)="updateAnimation()"\n ></nz-slider>\n </div>\n </div>\n }\n\n @if (item.type == \'border-style\') {\n <div class="flex flex-col mb-2">\n <p class="mb-1">\n <strong>{{ item.name }}</strong>\n </p>\n <nz-select\n style="width: 100%"\n [(ngModel)]="data[device + \'_animation\'][item.class][item.key]"\n (ngModelChange)="onAnimationDetailChange($event, item); updateAnimation()"\n >\n @for (item of borderOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n }\n\n @if (item.type == \'text-decoration\') {\n <div class="flex flex-col mb-2">\n <p class="mb-1">\n <strong>{{ item.name }}</strong>\n </p>\n <nz-select\n style="width: 100%"\n [(ngModel)]="data[device + \'_animation\'][item.class][item.key]"\n (ngModelChange)="onAnimationDetailChange($event, item); updateAnimation()"\n >\n @for (item of textDecorationOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n }\n }\n </div>\n </div>\n }\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:G},{kind:"directive",type:H.NzInputDirective,selector:"input[nz-input],textarea[nz-input]",inputs:["nzBorderless","nzVariant","nzSize","nzStepperless","nzStatus","disabled","readonly"],exportAs:["nzInput"]},{kind:"component",type:H.NzInputGroupComponent,selector:"nz-input-group",inputs:["nzAddOnBeforeIcon","nzAddOnAfterIcon","nzPrefixIcon","nzSuffixIcon","nzAddOnBefore","nzAddOnAfter","nzPrefix","nzStatus","nzSuffix","nzSize","nzSearch"],exportAs:["nzInputGroup"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]},{kind:"ngmodule",type:U},{kind:"component",type:q.NzTabsComponent,selector:"nz-tabs,nz-tabset",inputs:["nzSelectedIndex","nzTabPosition","nzTabBarExtraContent","nzCanDeactivate","nzAddIcon","nzTabBarStyle","nzType","nzSize","nzAnimated","nzTabBarGutter","nzHideAdd","nzCentered","nzHideAll","nzLinkRouter","nzLinkExact","nzDestroyInactiveTabPane"],outputs:["nzSelectChange","nzSelectedIndexChange","nzTabListScroll","nzClose","nzAdd"],exportAs:["nzTabs"]},{kind:"component",type:q.NzTabComponent,selector:"nz-tab",inputs:["nzTitle","nzClosable","nzCloseIcon","nzDisabled","nzForceRender"],outputs:["nzSelect","nzDeselect","nzClick","nzContextmenu"],exportAs:["nzTab"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]},{kind:"ngmodule",type:J},{kind:"component",type:Y.NzColorPickerComponent,selector:"nz-color-picker",inputs:["nzFormat","nzValue","nzSize","nzDefaultValue","nzTrigger","nzTitle","nzFlipFlop","nzShowText","nzOpen","nzAllowClear","nzDisabled","nzDisabledAlpha"],outputs:["nzOnChange","nzOnFormatChange","nzOnClear","nzOnOpenChange"],exportAs:["nzColorPicker"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"ngmodule",type:ne},{kind:"component",type:ee.NzSliderComponent,selector:"nz-slider",inputs:["nzDisabled","nzDots","nzIncluded","nzRange","nzVertical","nzReverse","nzDefaultValue","nzMarks","nzMax","nzMin","nzStep","nzTooltipVisible","nzTooltipPlacement","nzTipFormatter"],outputs:["nzOnAfterChange"],exportAs:["nzSlider"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"pipe",type:ct,name:"wbnumber"}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:dt,decorators:[{type:l,args:[{selector:"wb-list-animation",imports:[B,G,j,X,U,k,J,ct,Z,ne,ie],template:'<div class="animation-config">\n @if (!isDetail) {\n <div class="mb-2 sticky top-0 z-10 bg-white text-center">\n <nz-input-group\n style="max-width: 500px; width: 100%"\n nzSearch\n [nzAddOnAfter]="suffixIconButton"\n >\n <input\n [(ngModel)]="keySearch"\n (input)="onSearch()"\n type="text"\n nz-input\n placeholder="Tìm hiệu ứng..."\n />\n </nz-input-group>\n <ng-template #suffixIconButton>\n <button nz-button nzType="primary" nzSearch><nz-icon nzType="search" /></button>\n </ng-template>\n </div>\n\n <nz-tabs [nzSelectedIndex]="selectedIndex" (nzSelectedIndexChange)="onTabChange($event)">\n @for (tab of tabs; track $index) {\n <nz-tab [nzTitle]="tab.title"> </nz-tab>\n }\n </nz-tabs>\n\n <div class="icon-list grid grid-cols-5 gap-8 mt-4">\n @for (item of listAnimations[data.component][currentTab]; track item._id) {\n <div\n [class]="`relative flex flex-col items-center justify-center gap-2 rounded bg-[#f5f5f5] p-2 cursor-pointer hover:bg-[#e0e0e0] ${data[device + \'_animation\'].type == currentTab && data[device + \'_animation\']._id == item._id ? \'outline outline-black\' : \'\'} `"\n (click)="handleChangeAnimation(item)"\n >\n <ng-container\n *ngComponentOutlet="\n map.render(listAnimations[data.component].json.component);\n inputs: {\n data: listAnimations[data.component].json,\n class: listAnimations[data.component].json[device + \'_class\'],\n config: listAnimations[data.component].json[device + \'_config\'],\n type: type,\n animation: item.value,\n device: device\n }\n "\n >\n </ng-container>\n <p>\n {{ item.name }}\n </p>\n\n @if (\n data[device + \'_animation\'].type == currentTab &&\n data[device + \'_animation\']._id == item._id\n ) {\n <div class="absolute right-1 top-1">\n <button\n nz-button\n nzShape="circle"\n nzType="primary"\n nzDanger\n nzSize="small"\n class="color-remove"\n (click)="onRemoveAnimation($event)"\n >\n ×\n </button>\n </div>\n }\n </div>\n }\n </div>\n } @else {\n <div class="flex flex-col">\n <button class="mb-4 w-fit" nz-button (click)="isDetail = false">Trở lại</button>\n <div class="flex items-center justify-center mb-4">\n <div class="w-fit h-fit shadow-lg">\n <ng-container\n *ngComponentOutlet="\n map.render(data.component);\n inputs: {\n data: data,\n class: data[device + \'_class\'],\n config: data[device + \'_config\'],\n animation: data[device + \'_animation\'],\n device: device,\n type: type\n }\n "\n >\n </ng-container>\n </div>\n </div>\n <div\n class="flex flex-col gap-4 w-full max-w-[400px] mx-auto"\n style="width: 100%; max-width: 400px; margin: 0 auto"\n >\n @for (item of currentModify; track $index) {\n @if (item.type == \'color\') {\n <div class="flex items-center justify-between gap-4">\n <label for="">{{ item.name }}</label>\n\n <div>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_animation\'][item.class][item.key]"\n (ngModelChange)="onAnimationDetailChange()"\n (nzOnOpenChange)="onClose($event)"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_animation\'][item.class][item.key]"\n ></div>\n </ng-template>\n </div>\n </div>\n }\n @if (item.type == \'time\') {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">{{ item.name }}</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateAnimation()"\n [ngModel]="data[device + \'_animation\'][item.class][item.key] | wbnumber"\n (ngModelChange)="onAnimationDetailChange($event, item)"\n />\n </div>\n <div class="px-2">\n <nz-slider\n [nzStep]="0.1"\n [nzMin]="0"\n [nzMax]="10"\n [ngModel]="data[device + \'_animation\'][item.class][item.key] | wbnumber"\n (ngModelChange)="onAnimationDetailChange($event, item)"\n (nzOnAfterChange)="updateAnimation()"\n ></nz-slider>\n </div>\n </div>\n }\n @if (item.type == \'zoom\') {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">{{ item.name }}</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateAnimation()"\n [ngModel]="data[device + \'_animation\'][item.class][item.key] | wbnumber"\n (ngModelChange)="onAnimationDetailChange($event, item)"\n />\n </div>\n <div class="px-2">\n <nz-slider\n [nzStep]="0.1"\n [nzMin]="-1"\n [nzMax]="2"\n [ngModel]="data[device + \'_animation\'][item.class][item.key] | wbnumber"\n (ngModelChange)="onAnimationDetailChange($event, item)"\n (nzOnAfterChange)="updateAnimation()"\n ></nz-slider>\n </div>\n </div>\n }\n @if (item.type == \'number\') {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">{{ item.name }}</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateAnimation()"\n [(ngModel)]="data[device + \'_animation\'][item.class][item.key]"\n (ngModelChange)="onAnimationDetailChange($event, item)"\n />\n </div>\n <div class="px-2">\n <nz-slider\n [nzStep]="0.1"\n [nzMin]="0"\n [nzMax]="0.9"\n [(ngModel)]="data[device + \'_animation\'][item.class][item.key]"\n (ngModelChange)="onAnimationDetailChange($event, item)"\n (nzOnAfterChange)="updateAnimation()"\n ></nz-slider>\n </div>\n </div>\n }\n\n @if (item.type == \'px\') {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">{{ item.name }}</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateAnimation()"\n [ngModel]="data[device + \'_animation\'][item.class][item.key] | wbnumber"\n (ngModelChange)="\n data[device + \'_animation\'][item.class][item.key] = $event + \'px\';\n onAnimationDetailChange($event, item)\n "\n (ngModelChange)="onAnimationDetailChange($event, item)"\n />\n </div>\n <div class="px-2">\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_animation\'][item.class][item.key] | wbnumber"\n (ngModelChange)="\n data[device + \'_animation\'][item.class][item.key] = $event + \'px\';\n onAnimationDetailChange($event, item)\n "\n (nzOnAfterChange)="updateAnimation()"\n ></nz-slider>\n </div>\n </div>\n }\n\n @if (item.type == \'border-style\') {\n <div class="flex flex-col mb-2">\n <p class="mb-1">\n <strong>{{ item.name }}</strong>\n </p>\n <nz-select\n style="width: 100%"\n [(ngModel)]="data[device + \'_animation\'][item.class][item.key]"\n (ngModelChange)="onAnimationDetailChange($event, item); updateAnimation()"\n >\n @for (item of borderOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n }\n\n @if (item.type == \'text-decoration\') {\n <div class="flex flex-col mb-2">\n <p class="mb-1">\n <strong>{{ item.name }}</strong>\n </p>\n <nz-select\n style="width: 100%"\n [(ngModel)]="data[device + \'_animation\'][item.class][item.key]"\n (ngModelChange)="onAnimationDetailChange($event, item); updateAnimation()"\n >\n @for (item of textDecorationOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n }\n }\n </div>\n </div>\n }\n</div>\n'}]}],ctorParameters:()=>[{type:xn},{type:tt}]});class pt{modal;data;device;constructor(e){this.modal=e}ngOnInit(){}handleChangeAnimation(){this.modal.create({nzTitle:"Danh sách hiệu ứng",nzContent:dt,nzWidth:"95%",nzFooter:null,nzData:{data:this.data,device:this.device}}).afterClose.subscribe(e=>{})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:pt,deps:[{token:O.NzModalService}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:pt,isStandalone:!0,selector:"wb-animation-config",inputs:{data:"data",device:"device"},ngImport:t,template:'<div class="p-2">\n <button nz-button (click)="handleChangeAnimation()" nzType="primary" style="width: 100%">\n Hiệu ứng\n </button>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:pt,decorators:[{type:l,args:[{selector:"wb-animation-config",imports:[B,X],template:'<div class="p-2">\n <button nz-button (click)="handleChangeAnimation()" nzType="primary" style="width: 100%">\n Hiệu ứng\n </button>\n</div>\n'}]}],ctorParameters:()=>[{type:O.NzModalService}],propDecorators:{data:[{type:s}],device:[{type:s}]}});class gt{webBuilderService;data;device;classBgColor;configBgColor;newColor="#ffffff";isType=!1;constructor(e){this.webBuilderService=e}ngOnInit(){}onChooseBgType(e){this.data[this.device+"_config"][this.configBgColor].type=e,"color"===e&&(this.data[this.device+"_class"][this.classBgColor]["--bg-image"]="none"),"gradient"===e&&this.updateBgGradient(),this.updateClassAndConfig()}updateClassAndConfig(){this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"],[this.device+"_config"]:this.data[this.device+"_config"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"],[this.device+"_config"]:this.data[this.device+"_config"]})}updateClass(){setTimeout(()=>{this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})},0)}updateBgGradient(){const{deg:e,gradient_arr:n}=this.data[this.device+"_config"][this.configBgColor];this.data[this.device+"_class"][this.classBgColor]["--bg-image"]=`linear-gradient(${e}deg, ${n.join()})`}addGradientColor(e){e||(this.data[this.device+"_config"][this.configBgColor].gradient_arr.push(this.newColor),this.updateBgGradient(),this.updateClassAndConfig())}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:gt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:gt,isStandalone:!0,selector:"wb-background-color-config",inputs:{data:"data",device:"device",classBgColor:"classBgColor",configBgColor:"configBgColor"},ngImport:t,template:'<div class="background-color-config">\n <div class="row-between">\n <label class="label">Độ mờ(px)</label>\n <nz-input-number\n type="number"\n [ngModel]="data[device + \'_class\'][classBgColor][\'--backdrop-filter\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classBgColor][\'--backdrop-filter\'] = `blur(${$event}px)` "\n (nzBlur)="updateClass()"\n />\n </div>\n @if (configBgColor) {\n <div class="bg-type-row">\n <button\n class="bg-type-btn"\n [ngStyle]="{\n outline: data[device + \'_config\'][configBgColor].type == \'color\' ? \'1px solid red\' : \'\',\n background: data[device + \'_class\'][classBgColor][\'--bg-color\']\n }"\n nz-tooltip\n [nzTooltipTitle]="\'Màu cơ bản\'"\n (click)="onChooseBgType(\'color\')"\n ></button>\n\n <button\n class="bg-type-btn"\n [ngStyle]="{\n outline:\n data[device + \'_config\'][configBgColor].type == \'gradient\' ? \'1px solid red\' : \'\',\n \'background-image\':\n \'linear-gradient(\' +\n data[device + \'_config\'][configBgColor].deg +\n \'deg,\' +\n data[device + \'_config\'][configBgColor].gradient_arr.join(\',\') +\n \')\'\n }"\n nz-tooltip\n [nzTooltipTitle]="\'Phối màu\'"\n (click)="onChooseBgType(\'gradient\')"\n ></button>\n </div>\n\n @if (data[device + \'_config\'][configBgColor].type == \'color\') {\n <div class="row-between">\n <label class="label">Màu nền</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classBgColor][\'--bg-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classBgColor][\'--bg-color\']"\n ></div>\n </ng-template>\n </div>\n } @else {\n <div class="gradient-block">\n <div class="flex items-center justify-between mb-2">\n <span>Tự nhập</span>\n <nz-switch [(ngModel)]="isType"></nz-switch>\n </div>\n @if (!isType) {\n <div class="gradient-colors">\n @for (item of data[device + \'_config\'][configBgColor].gradient_arr; track $index) {\n <div\n class="color-swatch"\n [ngStyle]="{ background: item }"\n nz-tooltip\n [nzTooltipTitle]="item"\n >\n <button\n nz-button\n nzType="primary"\n nzDanger\n nzSize="small"\n class="color-remove"\n (click)="\n data[device + \'_config\'][configBgColor].gradient_arr.splice($index, 1);\n updateBgGradient();\n updateClassAndConfig()\n "\n >\n ×\n </button>\n </div>\n }\n </div>\n\n <div class="row-between mb-8">\n <label class="label">Thêm màu</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="newColor"\n (nzOnOpenChange)="addGradientColor($event)"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classBgColor][\'--bg-color\']"\n ></div>\n </ng-template>\n </div>\n\n <div class="row-between">\n <label class="label">Hướng phối</label>\n <nz-input-number\n type="number"\n [(ngModel)]="data[device + \'_config\'][configBgColor].deg"\n (ngModelChange)="updateBgGradient()"\n (nzBlur)="updateClassAndConfig()"\n />\n </div>\n } @else {\n <input\n nz-input\n [(ngModel)]="data[device + \'_class\'][classBgColor][\'--bg-image\']"\n (blur)="updateClass()"\n />\n }\n </div>\n }\n } @else {\n <div class="row-between">\n <label class="label">Màu nền</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classBgColor][\'--bg-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classBgColor][\'--bg-color\']"\n ></div>\n </ng-template>\n </div>\n }\n</div>\n',styles:[".background-color-config{padding:8px}.background-color-config .bg-type-row{display:flex;gap:8px;margin-bottom:8px}.background-color-config .bg-type-btn{width:20px;height:20px;padding:0;border-radius:4px;cursor:pointer;border:1px solid #d1d5db;box-shadow:0 1px 2px #0000000d;background-size:cover;background-position:center}.background-color-config .row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.background-color-config .row-between .label{margin:0;font-size:12px;color:#000000d9}.background-color-config .color-chip{width:90px;height:30px;border-radius:4px;box-shadow:0 1px 4px #0000001f;border:1px solid rgba(0,0,0,.12);cursor:pointer}.background-color-config .gradient-block .gradient-colors{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.background-color-config .gradient-block .gradient-colors .color-swatch{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.08);overflow:visible}.background-color-config .gradient-block .gradient-colors .color-swatch .color-remove{position:absolute;top:-6px;right:-6px;width:18px;height:18px;padding:0;border-radius:50%!important;line-height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.background-color-config .gradient-block .mb-8{margin-bottom:8px}.background-color-config .gradient-block .deg-input{width:80px;padding:4px 8px;border:1px solid #d1d5db;border-radius:4px}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:W},{kind:"directive",type:$.NzTooltipDirective,selector:"[nz-tooltip]",inputs:["nzTooltipTitle","nzTooltipTitleContext","nz-tooltip","nzTooltipTrigger","nzTooltipPlacement","nzTooltipOrigin","nzTooltipVisible","nzTooltipMouseEnterDelay","nzTooltipMouseLeaveDelay","nzTooltipOverlayClassName","nzTooltipOverlayStyle","nzTooltipArrowPointAtCenter","cdkConnectedOverlayPush","nzTooltipColor"],outputs:["nzTooltipVisibleChange"],exportAs:["nzTooltip"]},{kind:"ngmodule",type:J},{kind:"component",type:Y.NzColorPickerComponent,selector:"nz-color-picker",inputs:["nzFormat","nzValue","nzSize","nzDefaultValue","nzTrigger","nzTitle","nzFlipFlop","nzShowText","nzOpen","nzAllowClear","nzDisabled","nzDisabledAlpha"],outputs:["nzOnChange","nzOnFormatChange","nzOnClear","nzOnOpenChange"],exportAs:["nzColorPicker"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]},{kind:"ngmodule",type:G},{kind:"directive",type:H.NzInputDirective,selector:"input[nz-input],textarea[nz-input]",inputs:["nzBorderless","nzVariant","nzSize","nzStepperless","nzStatus","disabled","readonly"],exportAs:["nzInput"]},{kind:"ngmodule",type:se},{kind:"component",type:re.NzSwitchComponent,selector:"nz-switch",inputs:["nzLoading","nzDisabled","nzControl","nzCheckedChildren","nzUnCheckedChildren","nzSize","nzId"],exportAs:["nzSwitch"]},{kind:"pipe",type:ct,name:"wbnumber"}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:gt,decorators:[{type:l,args:[{selector:"wb-background-color-config",imports:[k,B,W,J,Z,X,ct,G,se],template:'<div class="background-color-config">\n <div class="row-between">\n <label class="label">Độ mờ(px)</label>\n <nz-input-number\n type="number"\n [ngModel]="data[device + \'_class\'][classBgColor][\'--backdrop-filter\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classBgColor][\'--backdrop-filter\'] = `blur(${$event}px)` "\n (nzBlur)="updateClass()"\n />\n </div>\n @if (configBgColor) {\n <div class="bg-type-row">\n <button\n class="bg-type-btn"\n [ngStyle]="{\n outline: data[device + \'_config\'][configBgColor].type == \'color\' ? \'1px solid red\' : \'\',\n background: data[device + \'_class\'][classBgColor][\'--bg-color\']\n }"\n nz-tooltip\n [nzTooltipTitle]="\'Màu cơ bản\'"\n (click)="onChooseBgType(\'color\')"\n ></button>\n\n <button\n class="bg-type-btn"\n [ngStyle]="{\n outline:\n data[device + \'_config\'][configBgColor].type == \'gradient\' ? \'1px solid red\' : \'\',\n \'background-image\':\n \'linear-gradient(\' +\n data[device + \'_config\'][configBgColor].deg +\n \'deg,\' +\n data[device + \'_config\'][configBgColor].gradient_arr.join(\',\') +\n \')\'\n }"\n nz-tooltip\n [nzTooltipTitle]="\'Phối màu\'"\n (click)="onChooseBgType(\'gradient\')"\n ></button>\n </div>\n\n @if (data[device + \'_config\'][configBgColor].type == \'color\') {\n <div class="row-between">\n <label class="label">Màu nền</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classBgColor][\'--bg-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classBgColor][\'--bg-color\']"\n ></div>\n </ng-template>\n </div>\n } @else {\n <div class="gradient-block">\n <div class="flex items-center justify-between mb-2">\n <span>Tự nhập</span>\n <nz-switch [(ngModel)]="isType"></nz-switch>\n </div>\n @if (!isType) {\n <div class="gradient-colors">\n @for (item of data[device + \'_config\'][configBgColor].gradient_arr; track $index) {\n <div\n class="color-swatch"\n [ngStyle]="{ background: item }"\n nz-tooltip\n [nzTooltipTitle]="item"\n >\n <button\n nz-button\n nzType="primary"\n nzDanger\n nzSize="small"\n class="color-remove"\n (click)="\n data[device + \'_config\'][configBgColor].gradient_arr.splice($index, 1);\n updateBgGradient();\n updateClassAndConfig()\n "\n >\n ×\n </button>\n </div>\n }\n </div>\n\n <div class="row-between mb-8">\n <label class="label">Thêm màu</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="newColor"\n (nzOnOpenChange)="addGradientColor($event)"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classBgColor][\'--bg-color\']"\n ></div>\n </ng-template>\n </div>\n\n <div class="row-between">\n <label class="label">Hướng phối</label>\n <nz-input-number\n type="number"\n [(ngModel)]="data[device + \'_config\'][configBgColor].deg"\n (ngModelChange)="updateBgGradient()"\n (nzBlur)="updateClassAndConfig()"\n />\n </div>\n } @else {\n <input\n nz-input\n [(ngModel)]="data[device + \'_class\'][classBgColor][\'--bg-image\']"\n (blur)="updateClass()"\n />\n }\n </div>\n }\n } @else {\n <div class="row-between">\n <label class="label">Màu nền</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classBgColor][\'--bg-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classBgColor][\'--bg-color\']"\n ></div>\n </ng-template>\n </div>\n }\n</div>\n',styles:[".background-color-config{padding:8px}.background-color-config .bg-type-row{display:flex;gap:8px;margin-bottom:8px}.background-color-config .bg-type-btn{width:20px;height:20px;padding:0;border-radius:4px;cursor:pointer;border:1px solid #d1d5db;box-shadow:0 1px 2px #0000000d;background-size:cover;background-position:center}.background-color-config .row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.background-color-config .row-between .label{margin:0;font-size:12px;color:#000000d9}.background-color-config .color-chip{width:90px;height:30px;border-radius:4px;box-shadow:0 1px 4px #0000001f;border:1px solid rgba(0,0,0,.12);cursor:pointer}.background-color-config .gradient-block .gradient-colors{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.background-color-config .gradient-block .gradient-colors .color-swatch{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.08);overflow:visible}.background-color-config .gradient-block .gradient-colors .color-swatch .color-remove{position:absolute;top:-6px;right:-6px;width:18px;height:18px;padding:0;border-radius:50%!important;line-height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.background-color-config .gradient-block .mb-8{margin-bottom:8px}.background-color-config .gradient-block .deg-input{width:80px;padding:4px 8px;border:1px solid #d1d5db;border-radius:4px}\n"]}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],classBgColor:[{type:s}],configBgColor:[{type:s}]}});class ut{webBuilderService;msg;data;device;classBgImage;optionsUpload=[{label:"Từ thiết bị của bạn",value:"device"},{label:"Từ URL",value:"url"}];bgSizeConfigOptions=[{label:"Tự động (giữ kích thước gốc)",value:"auto"},{label:"Kích thước cụ thể (px, rem, ...)",value:"length"},{label:"Tỷ lệ phần trăm so với khung cha",value:"percentage"},{label:"Phủ kín khung (có thể cắt ảnh)",value:"cover"},{label:"Hiển thị toàn bộ ảnh (có thể còn khoảng trống)",value:"contain"},{label:"Giá trị mặc định",value:"initial"},{label:"Kế thừa từ phần tử cha",value:"inherit"}];bgAttachmentConfigOptions=[{label:"Ảnh nền cố định",value:"fixed"},{label:"Không",value:"scroll"}];bgRepeatConfigOptions=[{label:"Lặp lại cả hai chiều",value:"repeat"},{label:"Không lặp lại",value:"no-repeat"},{label:"Chỉ lặp theo chiều ngang",value:"repeat-x"},{label:"Chỉ lặp theo chiều dọc",value:"repeat-y"},{label:"Lặp lại tròn khớp",value:"round"},{label:"Lặp lại không bị cắt",value:"space"}];bgPositionConfigOptions=[{label:"Trái trên",value:"left top"},{label:"Giữa trên",value:"center top"},{label:"Phải trên",value:"right top"},{label:"Trái giữa",value:"left center"},{label:"Chính giữa",value:"center center"},{label:"Phải giữa",value:"right center"},{label:"Trái dưới",value:"left bottom"},{label:"Giữa dưới",value:"center bottom"},{label:"Phải dưới",value:"right bottom"},{label:"Tùy chỉnh (nhập giá trị)",value:"custom"}];urlImage="";bgPostion="center center";bgPositionCustom="";constructor(e,n){this.webBuilderService=e,this.msg=n}ngOnInit(){this.urlImage=this.transform(this.data[this.device+"_class"][this.classBgImage]["--bg-image"]),this.data[this.device+"_class"][this.classBgImage]["--bg-position"]||(this.data[this.device+"_class"][this.classBgImage]["--bg-position"]="left top"),this.data[this.device+"_class"][this.classBgImage]["--bg-repeat"]||(this.data[this.device+"_class"][this.classBgImage]["--bg-repeat"]="repeat"),this.data[this.device+"_class"][this.classBgImage]["--bg-size"]||(this.data[this.device+"_class"][this.classBgImage]["--bg-size"]="auto"),this.data[this.device+"_class"][this.classBgImage]["--bg-attachment"]||(this.data[this.device+"_class"][this.classBgImage]["--bg-attachment"]="scroll"),this.webBuilderService.projectWorking[this.device+"_config"]?.upload_type||(this.webBuilderService.projectWorking[this.device+"_config"]={upload_type:"device"})}transform(e){if(!e)return"";const n=e.match(/^url\(["']?(.+?)["']?\)$/);return n?n[1]:e}updateClass(){this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}):this.data.type.includes("object")?this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}):this.webBuilderService.updatePage(this.webBuilderService.currentPage._id,{[this.device+"_class"]:this.webBuilderService.currentPage[this.device+"_class"]})}onFileSelected(e){const n=e.target.files[0];n&&this.webBuilderService.upLoadImage(n,this.data[this.device+"_class"][this.classBgImage]["--bg-image"]?.split('"'),"object").then(e=>{this.data[this.device+"_class"][this.classBgImage]["--bg-image"]=`url("${e.data}")`,this.updateClass(),this.msg.success("Upload ảnh thành công")})}handleChangeUrlImg(e){this.data[this.device+"_class"][this.classBgImage]["--bg-image"]=e?`url("${e}")`:"none"}onChangeBgPosition(){this.data[this.device+"_class"][this.classBgImage]["--bg-position"]="custom"!=this.bgPostion?this.bgPostion:this.bgPositionCustom,this.updateClass()}updateConfigProject(){this.webBuilderService.updateProject(this.webBuilderService.projectWorking._id,{[this.device+"_config"]:{...this.webBuilderService.projectWorking[this.device+"_config"],upload_type:this.webBuilderService.projectWorking[this.device+"_config"].upload_type}})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ut,deps:[{token:xn},{token:A.NzMessageService}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:ut,isStandalone:!0,selector:"wb-background-image-config",inputs:{data:"data",device:"device",classBgImage:"classBgImage"},ngImport:t,template:'<div class="background-color-config p-2">\n <div class="flex flex-col gap-2 mb-2">\n <label for="">Nguồn tải ảnh</label>\n <nz-select\n [(ngModel)]="webBuilderService.projectWorking[device + \'_config\'].upload_type"\n (ngModelChange)="updateConfigProject()"\n >\n @for (item of optionsUpload; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (webBuilderService.projectWorking[device + \'_config\'].upload_type == \'device\') {\n <button class="mb-2" style="width: 100%" (click)="fileInput.click()" nz-button>\n <nz-icon nzType="upload" nzTheme="outline" />\n Tải ảnh lên\n </button>\n\n <input\n #fileInput\n type="file"\n id="upload-image"\n (change)="onFileSelected($event)"\n accept="image/*"\n hidden\n />\n }\n\n @if (webBuilderService.projectWorking[device + \'_config\'].upload_type == \'url\') {\n <div class="flex flex-col gap-2 mb-2">\n <label>Đường dẫn ảnh</label>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n [(ngModel)]="urlImage"\n (ngModelChange)="handleChangeUrlImg(urlImage)"\n name="Đường dẫn ảnh"\n (blur)="updateClass()"\n ></textarea>\n </div>\n }\n\n <div class="flex flex-col gap-2 mb-2">\n <label>Ảnh nền cố định</label>\n <nz-select\n [(ngModel)]="data[device + \'_class\'][classBgImage][\'--bg-attachment\']"\n (ngModelChange)="updateClass()"\n >\n @for (item of bgAttachmentConfigOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex flex-col gap-2 mb-2">\n <label>Độ bao phủ hình ảnh</label>\n <nz-select\n [(ngModel)]="data[device + \'_class\'][classBgImage][\'--bg-size\']"\n (ngModelChange)="updateClass()"\n >\n @for (item of bgSizeConfigOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n \x3c!-- lặp ảnh --\x3e\n <div class="flex flex-col gap-2 mb-2">\n <label>Lặp ảnh</label>\n <nz-select\n [(ngModel)]="data[device + \'_class\'][classBgImage][\'--bg-repeat\']"\n (ngModelChange)="updateClass()"\n >\n @for (item of bgRepeatConfigOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n \x3c!-- Vị trí ảnh --\x3e\n <div class="flex flex-col gap-2 mb-2">\n <label>Vị trí ảnh</label>\n <nz-select [(ngModel)]="bgPostion" (ngModelChange)="onChangeBgPosition()">\n @for (item of bgPositionConfigOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (bgPostion === \'custom\') {\n <input\n nz-input\n [(ngModel)]="bgPositionCustom"\n (ngModelChange)="onChangeBgPosition()"\n placeholder="Ví dụ: 20px 30px hoặc 50% 50%"\n />\n }\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"ngmodule",type:se},{kind:"ngmodule",type:le},{kind:"ngmodule",type:G},{kind:"directive",type:H.NzInputDirective,selector:"input[nz-input],textarea[nz-input]",inputs:["nzBorderless","nzVariant","nzSize","nzStepperless","nzStatus","disabled","readonly"],exportAs:["nzInput"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ut,decorators:[{type:l,args:[{selector:"wb-background-image-config",imports:[B,ie,X,j,se,le,G],template:'<div class="background-color-config p-2">\n <div class="flex flex-col gap-2 mb-2">\n <label for="">Nguồn tải ảnh</label>\n <nz-select\n [(ngModel)]="webBuilderService.projectWorking[device + \'_config\'].upload_type"\n (ngModelChange)="updateConfigProject()"\n >\n @for (item of optionsUpload; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (webBuilderService.projectWorking[device + \'_config\'].upload_type == \'device\') {\n <button class="mb-2" style="width: 100%" (click)="fileInput.click()" nz-button>\n <nz-icon nzType="upload" nzTheme="outline" />\n Tải ảnh lên\n </button>\n\n <input\n #fileInput\n type="file"\n id="upload-image"\n (change)="onFileSelected($event)"\n accept="image/*"\n hidden\n />\n }\n\n @if (webBuilderService.projectWorking[device + \'_config\'].upload_type == \'url\') {\n <div class="flex flex-col gap-2 mb-2">\n <label>Đường dẫn ảnh</label>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n [(ngModel)]="urlImage"\n (ngModelChange)="handleChangeUrlImg(urlImage)"\n name="Đường dẫn ảnh"\n (blur)="updateClass()"\n ></textarea>\n </div>\n }\n\n <div class="flex flex-col gap-2 mb-2">\n <label>Ảnh nền cố định</label>\n <nz-select\n [(ngModel)]="data[device + \'_class\'][classBgImage][\'--bg-attachment\']"\n (ngModelChange)="updateClass()"\n >\n @for (item of bgAttachmentConfigOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex flex-col gap-2 mb-2">\n <label>Độ bao phủ hình ảnh</label>\n <nz-select\n [(ngModel)]="data[device + \'_class\'][classBgImage][\'--bg-size\']"\n (ngModelChange)="updateClass()"\n >\n @for (item of bgSizeConfigOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n \x3c!-- lặp ảnh --\x3e\n <div class="flex flex-col gap-2 mb-2">\n <label>Lặp ảnh</label>\n <nz-select\n [(ngModel)]="data[device + \'_class\'][classBgImage][\'--bg-repeat\']"\n (ngModelChange)="updateClass()"\n >\n @for (item of bgRepeatConfigOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n \x3c!-- Vị trí ảnh --\x3e\n <div class="flex flex-col gap-2 mb-2">\n <label>Vị trí ảnh</label>\n <nz-select [(ngModel)]="bgPostion" (ngModelChange)="onChangeBgPosition()">\n @for (item of bgPositionConfigOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (bgPostion === \'custom\') {\n <input\n nz-input\n [(ngModel)]="bgPositionCustom"\n (ngModelChange)="onChangeBgPosition()"\n placeholder="Ví dụ: 20px 30px hoặc 50% 50%"\n />\n }\n</div>\n'}]}],ctorParameters:()=>[{type:xn},{type:A.NzMessageService}],propDecorators:{data:[{type:s}],device:[{type:s}],classBgImage:[{type:s}]}});class ht{webBuilderService;data;device;configAnimation;animationOptions=[{label:"Rõ dần",value:"fade_in"},{label:"Trượt phải",value:"slide_right"},{label:"Trượt trái",value:"slide_left"},{label:"Trượt phải trái",value:"slide"},{label:"Phóng to dần ",value:"zoom_in"},{label:"Xoay phải",value:"rotate"},{label:"Quay vòng trục X",value:"flip_x"},{label:"Va đập nhẹ",value:"bounce"},{label:"Mờ sang rõ dần",value:"blur"},{label:"Trắng đen sang màu",value:"grayscale"},{label:"Co lại theo chiều ngang",value:"squeeze"},{label:"Co lại theo chiều dọc",value:"shutter"},{label:"Co lại và xoay",value:"scale_rotate"},{label:"Dấu cộng",value:"cube"},{label:"Di chuyển phải sang trái mờ dần",value:"fly_left_fade"},{label:"Di chuyển trái sang phải mờ dần",value:"fly_right_fade"},{label:"Di chuyển từ trên xuống mờ dần",value:"fly_top_fade"},{label:"Di chuyển từ dưới lên mờ dần",value:"fly_bottom_fade"},{label:"Mờ dần và thu nhỏ",value:"fade_scale"},{label:"Rõ dần và phóng to",value:"checkerboard"},{label:"Di chuyển theo đường chéo",value:"diagonal_split"},{label:"Nhỏ dần sang trái",value:"zoomout_zoomin"},{label:"Xoay tròn sang trái",value:"zoomout_zoomin_circle"},{label:"XYZ",value:"xyz"},{label:"Ngã về trước",value:"fall_over"}];constructor(e){this.webBuilderService=e}ngOnInit(){}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ht,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:ht,isStandalone:!0,selector:"wb-banner-animation-config",inputs:{data:"data",device:"device",configAnimation:"configAnimation"},ngImport:t,template:'<div class="p-2">\n <div class="flex items-center justify-between mb-2">\n <span class="text-xs">Tự động chuyển</span>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'][configAnimation].is_autoplay"\n (ngModelChange)="updateConfig()"\n ></nz-switch>\n </div>\n\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Thời gian chuyển(s)</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateConfig()"\n [(ngModel)]="data[device + \'_config\'][configAnimation][\'time_animation_play\']"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [(ngModel)]="data[device + \'_config\'][configAnimation][\'time_animation_play\']"\n (nzOnAfterChange)="updateConfig()"\n ></nz-slider>\n </div>\n\n <div class="flex flex-col gap-2">\n <div class="text-xs">Kiểu hiệu ứng</div>\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configAnimation].slide_transition_animation"\n (ngModelChange)="updateConfig()"\n >\n @for (item of animationOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:ne},{kind:"component",type:ee.NzSliderComponent,selector:"nz-slider",inputs:["nzDisabled","nzDots","nzIncluded","nzRange","nzVertical","nzReverse","nzDefaultValue","nzMarks","nzMax","nzMin","nzStep","nzTooltipVisible","nzTooltipPlacement","nzTipFormatter"],outputs:["nzOnAfterChange"],exportAs:["nzSlider"]},{kind:"ngmodule",type:G},{kind:"ngmodule",type:se},{kind:"component",type:re.NzSwitchComponent,selector:"nz-switch",inputs:["nzLoading","nzDisabled","nzControl","nzCheckedChildren","nzUnCheckedChildren","nzSize","nzId"],exportAs:["nzSwitch"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ht,decorators:[{type:l,args:[{selector:"wb-banner-animation-config",imports:[B,ie,ne,G,se,Z],template:'<div class="p-2">\n <div class="flex items-center justify-between mb-2">\n <span class="text-xs">Tự động chuyển</span>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'][configAnimation].is_autoplay"\n (ngModelChange)="updateConfig()"\n ></nz-switch>\n </div>\n\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Thời gian chuyển(s)</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateConfig()"\n [(ngModel)]="data[device + \'_config\'][configAnimation][\'time_animation_play\']"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [(ngModel)]="data[device + \'_config\'][configAnimation][\'time_animation_play\']"\n (nzOnAfterChange)="updateConfig()"\n ></nz-slider>\n </div>\n\n <div class="flex flex-col gap-2">\n <div class="text-xs">Kiểu hiệu ứng</div>\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configAnimation].slide_transition_animation"\n (ngModelChange)="updateConfig()"\n >\n @for (item of animationOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],configAnimation:[{type:s}]}});class mt{webBuilderService;data;device;classBorder="";classOutline="";configBorderColor="";borderOptions=[{label:"Không viền",value:"none"},{label:"Viền nét liền",value:"solid"},{label:"Viền nét đứt",value:"dashed"},{label:"Viền chấm chấm",value:"dotted"},{label:"Viền đôi",value:"double"},{label:"Viền khắc lõm (groove)",value:"groove"},{label:"Viền khắc nổi (ridge)",value:"ridge"},{label:"Viền chìm (inset)",value:"inset"},{label:"Viền nổi (outset)",value:"outset"}];outlineOptions=[{label:"Không viền",value:"none"},{label:"Viền nét liền",value:"solid"},{label:"Viền nét đứt",value:"dashed"},{label:"Viền chấm chấm",value:"dotted"},{label:"Viền đôi",value:"double"},{label:"Viền 3D lõm (groove)",value:"groove"},{label:"Viền 3D nổi (ridge)",value:"ridge"},{label:"Viền chìm (inset)",value:"inset"},{label:"Viền nổi (outset)",value:"outset"}];newColor="#ffffff";constructor(e){this.webBuilderService=e}ngOnInit(){}updateClass(){setTimeout(()=>{this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})},0)}onChooseBgType(e){this.data[this.device+"_config"][this.configBorderColor].type=e,"color"===e&&(this.data[this.device+"_class"][this.classBorder]["--border-image"]="none"),"gradient"===e&&this.updateBgGradient(),this.updateClassAndConfig()}updateBgGradient(){const{deg:e,gradient_arr:n}=this.data[this.device+"_config"][this.configBorderColor];this.data[this.device+"_class"][this.classBorder]["--border-image"]=`linear-gradient(${e}deg, ${n.join()}) 1 / 1 / 0 stretch`}updateClassAndConfig(){this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"],[this.device+"_config"]:this.data[this.device+"_config"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"],[this.device+"_config"]:this.data[this.device+"_config"]})}addGradientColor(e){e||(this.data[this.device+"_config"][this.configBorderColor].gradient_arr.push(this.newColor),this.updateBgGradient(),this.updateClassAndConfig())}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:mt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:mt,isStandalone:!0,selector:"wb-border-config",inputs:{data:"data",device:"device",classBorder:"classBorder",classOutline:"classOutline",configBorderColor:"configBorderColor"},ngImport:t,template:'<div class="border-config p-2">\n @if (classBorder) {\n \x3c!-- Kiểu viền --\x3e\n <div class="flex flex-col mb-2">\n <p class="mb-1"><strong>Kiểu viền(border)</strong></p>\n <nz-select\n style="width: 100%"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-style\']"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-style\'] = $event; updateClass()\n "\n >\n @for (item of borderOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n \x3c!-- Width Đường viền trên --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Đường viền trên</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-top-width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-top-width\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-top-width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classBorder][\'--border-top-width\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Width Đường viền dưới --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Đường viền dưới</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-bottom-width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-bottom-width\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-bottom-width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-bottom-width\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Width Đường viền trái --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Đường viền trái</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-left-width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-left-width\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-left-width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-left-width\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Width Đường viền phải --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Đường viền phải</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-right-width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-right-width\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-right-width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-right-width\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n @if (configBorderColor && data[device + \'_config\'][configBorderColor]) {\n <div class="bg-type-row">\n <button\n class="bg-type-btn"\n [ngStyle]="{\n outline:\n data[device + \'_config\'][configBorderColor].type == \'color\' ? \'1px solid red\' : \'\',\n background: data[device + \'_class\'][classBorder][\'--border-color\']\n }"\n nz-tooltip\n [nzTooltipTitle]="\'Màu cơ bản\'"\n (click)="onChooseBgType(\'color\')"\n ></button>\n\n <button\n class="bg-type-btn"\n [ngStyle]="{\n outline:\n data[device + \'_config\'][configBorderColor].type == \'gradient\' ? \'1px solid red\' : \'\',\n \'background-image\':\n \'linear-gradient(\' +\n data[device + \'_config\'][configBorderColor].deg +\n \'deg,\' +\n data[device + \'_config\'][configBorderColor].gradient_arr.join(\',\') +\n \')\'\n }"\n nz-tooltip\n [nzTooltipTitle]="\'Phối màu\'"\n (click)="onChooseBgType(\'gradient\')"\n ></button>\n </div>\n\n @if (data[device + \'_config\'][configBorderColor].type == \'color\') {\n <div class="row-between">\n <label class="label">Màu nền</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classBorder][\'--border-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classBorder][\'--border-color\']"\n ></div>\n </ng-template>\n </div>\n }\n\n @if (data[device + \'_config\'][configBorderColor].type == \'gradient\') {\n <div class="gradient-block">\n <div class="gradient-colors">\n <ng-container\n *ngFor="\n let item of data[device + \'_config\'][configBorderColor].gradient_arr;\n let i = index\n "\n >\n <div\n class="color-swatch"\n [ngStyle]="{ background: item }"\n nz-tooltip\n [nzTooltipTitle]="item"\n >\n <button\n nz-button\n nzType="primary"\n nzDanger\n nzSize="small"\n class="color-remove"\n (click)="\n data[device + \'_config\'][configBorderColor].gradient_arr.splice(i, 1);\n updateBgGradient();\n updateClassAndConfig()\n "\n >\n ×\n </button>\n </div>\n </ng-container>\n </div>\n\n <div class="row-between mb-8">\n <label class="label">Thêm màu</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="newColor"\n (nzOnOpenChange)="addGradientColor($event)"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classBorder][\'--border-color\']"\n ></div>\n </ng-template>\n </div>\n\n <div class="row-between">\n <label class="label">Hướng phối</label>\n <nz-input-number\n type="number"\n [(ngModel)]="data[device + \'_config\'][configBorderColor].deg"\n (ngModelChange)="updateBgGradient()"\n (nzBlur)="updateClassAndConfig()"\n />\n </div>\n </div>\n }\n } @else {\n \x3c!-- Màu viền --\x3e\n <div class="flex items-center justify-between mb-2">\n <div class="m-0 text-xs">Màu viền</div>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classBorder][\'--border-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classBorder][\'--border-color\']"\n ></div>\n </ng-template>\n </div>\n }\n }\n\n @if (classOutline) {\n \x3c!-- Kiểu viền --\x3e\n <div class="flex flex-col mb-2">\n <p class="mb-1"><strong>Kiểu viền(outline)</strong></p>\n <nz-select\n style="width: 100%"\n [ngModel]="data[device + \'_class\'][classOutline][\'--outline-style\']"\n (ngModelChange)="\n data[device + \'_class\'][classOutline][\'--outline-style\'] = $event; updateClass()\n "\n >\n @for (item of outlineOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n \x3c!-- Kích thước viền (outline ko tách ra được top, left, bottom, right) --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Kích thước viền</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classOutline][\'--outline-width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classOutline][\'--outline-width\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classOutline][\'--outline-width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classOutline][\'--outline-width\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Màu viền --\x3e\n <div class="flex items-center justify-between mb-2">\n <div class="m-0 text-xs">Màu viền</div>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classOutline][\'--outline-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classOutline][\'--outline-color\']"\n ></div>\n </ng-template>\n </div>\n }\n\n \x3c!-- @if (classOutlineFocus) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Kích thước viền</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classOutlineFocus][\'--outline-width-focus\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classOutlineFocus][\'--outline-width-focus\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="40"\n [ngModel]="data[device + \'_class\'][classOutlineFocus][\'--outline-width-focus\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classOutlineFocus][\'--outline-width-focus\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n <div class="flex items-center justify-between mb-2">\n <div class="m-0 text-xs">Màu viền</div>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classOutlineFocus][\'--outline-color-focus\']"\n (ngModelChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="\n data[device + \'_class\'][classOutlineFocus][\'--outline-color-focus\']\n "\n ></div>\n </ng-template>\n </div>\n } --\x3e\n</div>\n',styles:[".border-config{padding:8px}.border-config .bg-type-row{display:flex;gap:8px;margin-bottom:8px}.border-config .bg-type-btn{width:20px;height:20px;padding:0;border-radius:4px;cursor:pointer;border:1px solid #d1d5db;box-shadow:0 1px 2px #0000000d;background-size:cover;background-position:center}.border-config .row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.border-config .row-between .label{margin:0;font-size:12px;color:#000000d9}.border-config .color-chip{width:90px;height:30px;border-radius:4px;box-shadow:0 1px 4px #0000001f;border:1px solid rgba(0,0,0,.12);cursor:pointer}.border-config .gradient-block .gradient-colors{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.border-config .gradient-block .gradient-colors .color-swatch{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.08);overflow:visible}.border-config .gradient-block .gradient-colors .color-swatch .color-remove{position:absolute;top:-6px;right:-6px;width:18px;height:18px;padding:0;border-radius:50%!important;line-height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.border-config .gradient-block .mb-8{margin-bottom:8px}.border-config .gradient-block .deg-input{width:80px;padding:4px 8px;border:1px solid #d1d5db;border-radius:4px}\n"],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"ngmodule",type:ne},{kind:"component",type:ee.NzSliderComponent,selector:"nz-slider",inputs:["nzDisabled","nzDots","nzIncluded","nzRange","nzVertical","nzReverse","nzDefaultValue","nzMarks","nzMax","nzMin","nzStep","nzTooltipVisible","nzTooltipPlacement","nzTipFormatter"],outputs:["nzOnAfterChange"],exportAs:["nzSlider"]},{kind:"ngmodule",type:J},{kind:"component",type:Y.NzColorPickerComponent,selector:"nz-color-picker",inputs:["nzFormat","nzValue","nzSize","nzDefaultValue","nzTrigger","nzTitle","nzFlipFlop","nzShowText","nzOpen","nzAllowClear","nzDisabled","nzDisabledAlpha"],outputs:["nzOnChange","nzOnFormatChange","nzOnClear","nzOnOpenChange"],exportAs:["nzColorPicker"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"ngmodule",type:W},{kind:"directive",type:$.NzTooltipDirective,selector:"[nz-tooltip]",inputs:["nzTooltipTitle","nzTooltipTitleContext","nz-tooltip","nzTooltipTrigger","nzTooltipPlacement","nzTooltipOrigin","nzTooltipVisible","nzTooltipMouseEnterDelay","nzTooltipMouseLeaveDelay","nzTooltipOverlayClassName","nzTooltipOverlayStyle","nzTooltipArrowPointAtCenter","cdkConnectedOverlayPush","nzTooltipColor"],outputs:["nzTooltipVisibleChange"],exportAs:["nzTooltip"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]},{kind:"pipe",type:ct,name:"wbnumber"}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:mt,decorators:[{type:l,args:[{selector:"wb-border-config",imports:[B,ct,ie,Z,ne,J,k,W,X],template:'<div class="border-config p-2">\n @if (classBorder) {\n \x3c!-- Kiểu viền --\x3e\n <div class="flex flex-col mb-2">\n <p class="mb-1"><strong>Kiểu viền(border)</strong></p>\n <nz-select\n style="width: 100%"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-style\']"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-style\'] = $event; updateClass()\n "\n >\n @for (item of borderOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n \x3c!-- Width Đường viền trên --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Đường viền trên</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-top-width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-top-width\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-top-width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classBorder][\'--border-top-width\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Width Đường viền dưới --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Đường viền dưới</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-bottom-width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-bottom-width\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-bottom-width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-bottom-width\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Width Đường viền trái --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Đường viền trái</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-left-width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-left-width\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-left-width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-left-width\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Width Đường viền phải --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Đường viền phải</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-right-width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-right-width\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classBorder][\'--border-right-width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classBorder][\'--border-right-width\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n @if (configBorderColor && data[device + \'_config\'][configBorderColor]) {\n <div class="bg-type-row">\n <button\n class="bg-type-btn"\n [ngStyle]="{\n outline:\n data[device + \'_config\'][configBorderColor].type == \'color\' ? \'1px solid red\' : \'\',\n background: data[device + \'_class\'][classBorder][\'--border-color\']\n }"\n nz-tooltip\n [nzTooltipTitle]="\'Màu cơ bản\'"\n (click)="onChooseBgType(\'color\')"\n ></button>\n\n <button\n class="bg-type-btn"\n [ngStyle]="{\n outline:\n data[device + \'_config\'][configBorderColor].type == \'gradient\' ? \'1px solid red\' : \'\',\n \'background-image\':\n \'linear-gradient(\' +\n data[device + \'_config\'][configBorderColor].deg +\n \'deg,\' +\n data[device + \'_config\'][configBorderColor].gradient_arr.join(\',\') +\n \')\'\n }"\n nz-tooltip\n [nzTooltipTitle]="\'Phối màu\'"\n (click)="onChooseBgType(\'gradient\')"\n ></button>\n </div>\n\n @if (data[device + \'_config\'][configBorderColor].type == \'color\') {\n <div class="row-between">\n <label class="label">Màu nền</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classBorder][\'--border-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classBorder][\'--border-color\']"\n ></div>\n </ng-template>\n </div>\n }\n\n @if (data[device + \'_config\'][configBorderColor].type == \'gradient\') {\n <div class="gradient-block">\n <div class="gradient-colors">\n <ng-container\n *ngFor="\n let item of data[device + \'_config\'][configBorderColor].gradient_arr;\n let i = index\n "\n >\n <div\n class="color-swatch"\n [ngStyle]="{ background: item }"\n nz-tooltip\n [nzTooltipTitle]="item"\n >\n <button\n nz-button\n nzType="primary"\n nzDanger\n nzSize="small"\n class="color-remove"\n (click)="\n data[device + \'_config\'][configBorderColor].gradient_arr.splice(i, 1);\n updateBgGradient();\n updateClassAndConfig()\n "\n >\n ×\n </button>\n </div>\n </ng-container>\n </div>\n\n <div class="row-between mb-8">\n <label class="label">Thêm màu</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="newColor"\n (nzOnOpenChange)="addGradientColor($event)"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classBorder][\'--border-color\']"\n ></div>\n </ng-template>\n </div>\n\n <div class="row-between">\n <label class="label">Hướng phối</label>\n <nz-input-number\n type="number"\n [(ngModel)]="data[device + \'_config\'][configBorderColor].deg"\n (ngModelChange)="updateBgGradient()"\n (nzBlur)="updateClassAndConfig()"\n />\n </div>\n </div>\n }\n } @else {\n \x3c!-- Màu viền --\x3e\n <div class="flex items-center justify-between mb-2">\n <div class="m-0 text-xs">Màu viền</div>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classBorder][\'--border-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classBorder][\'--border-color\']"\n ></div>\n </ng-template>\n </div>\n }\n }\n\n @if (classOutline) {\n \x3c!-- Kiểu viền --\x3e\n <div class="flex flex-col mb-2">\n <p class="mb-1"><strong>Kiểu viền(outline)</strong></p>\n <nz-select\n style="width: 100%"\n [ngModel]="data[device + \'_class\'][classOutline][\'--outline-style\']"\n (ngModelChange)="\n data[device + \'_class\'][classOutline][\'--outline-style\'] = $event; updateClass()\n "\n >\n @for (item of outlineOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n \x3c!-- Kích thước viền (outline ko tách ra được top, left, bottom, right) --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Kích thước viền</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classOutline][\'--outline-width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classOutline][\'--outline-width\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classOutline][\'--outline-width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classOutline][\'--outline-width\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Màu viền --\x3e\n <div class="flex items-center justify-between mb-2">\n <div class="m-0 text-xs">Màu viền</div>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classOutline][\'--outline-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classOutline][\'--outline-color\']"\n ></div>\n </ng-template>\n </div>\n }\n\n \x3c!-- @if (classOutlineFocus) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Kích thước viền</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classOutlineFocus][\'--outline-width-focus\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classOutlineFocus][\'--outline-width-focus\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="40"\n [ngModel]="data[device + \'_class\'][classOutlineFocus][\'--outline-width-focus\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classOutlineFocus][\'--outline-width-focus\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n <div class="flex items-center justify-between mb-2">\n <div class="m-0 text-xs">Màu viền</div>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classOutlineFocus][\'--outline-color-focus\']"\n (ngModelChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="\n data[device + \'_class\'][classOutlineFocus][\'--outline-color-focus\']\n "\n ></div>\n </ng-template>\n </div>\n } --\x3e\n</div>\n',styles:[".border-config{padding:8px}.border-config .bg-type-row{display:flex;gap:8px;margin-bottom:8px}.border-config .bg-type-btn{width:20px;height:20px;padding:0;border-radius:4px;cursor:pointer;border:1px solid #d1d5db;box-shadow:0 1px 2px #0000000d;background-size:cover;background-position:center}.border-config .row-between{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.border-config .row-between .label{margin:0;font-size:12px;color:#000000d9}.border-config .color-chip{width:90px;height:30px;border-radius:4px;box-shadow:0 1px 4px #0000001f;border:1px solid rgba(0,0,0,.12);cursor:pointer}.border-config .gradient-block .gradient-colors{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.border-config .gradient-block .gradient-colors .color-swatch{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.08);overflow:visible}.border-config .gradient-block .gradient-colors .color-swatch .color-remove{position:absolute;top:-6px;right:-6px;width:18px;height:18px;padding:0;border-radius:50%!important;line-height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.border-config .gradient-block .mb-8{margin-bottom:8px}.border-config .gradient-block .deg-input{width:80px;padding:4px 8px;border:1px solid #d1d5db;border-radius:4px}\n"]}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],classBorder:[{type:s}],classOutline:[{type:s}],configBorderColor:[{type:s}]}});class bt{webBuilderService;data;device;classBorderRadius="";isFirstChildLastChild=!1;constructor(e){this.webBuilderService=e}ngOnInit(){}updateClass(){this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:bt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:bt,isStandalone:!0,selector:"wb-border-radius-config",inputs:{data:"data",device:"device",classBorderRadius:"classBorderRadius",isFirstChildLastChild:"isFirstChildLastChild"},ngImport:t,template:"<div class=\"border-radius-config p-2\">\n \x3c!-- Góc trên bên trái --\x3e\n <div class=\"flex flex-col mb-2\">\n <div class=\"flex items-center justify-between\">\n <label class=\"text-xs w-2/3\">Góc trên bên trái</label>\n <nz-input-number\n class=\"w-30\"\n (nzBlur)=\"updateClass()\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-left-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-left-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] = $event + 'px'\n \"\n />\n </div>\n <nz-slider\n [nzStep]=\"1\"\n [nzMin]=\"0\"\n [nzMax]=\"100\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-left-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-left-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] = $event + 'px'\n \"\n (nzOnAfterChange)=\"updateClass()\"\n ></nz-slider>\n </div>\n\n \x3c!-- Góc trên bên phải --\x3e\n <div class=\"flex flex-col mb-2\">\n <div class=\"flex items-center justify-between\">\n <label class=\"text-xs w-2/3\">Góc trên bên phải</label>\n <nz-input-number\n class=\"w-30\"\n (nzBlur)=\"updateClass()\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-right-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-right-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] = $event + 'px'\n \"\n />\n </div>\n <nz-slider\n [nzStep]=\"1\"\n [nzMin]=\"0\"\n [nzMax]=\"100\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-right-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-right-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] = $event + 'px'\n \"\n (nzOnAfterChange)=\"updateClass()\"\n ></nz-slider>\n </div>\n\n \x3c!-- Góc dưới bên trái --\x3e\n <div class=\"flex flex-col mb-2\">\n <div class=\"flex items-center justify-between\">\n <label class=\"text-xs w-2/3\">Góc dưới bên trái</label>\n <nz-input-number\n class=\"w-30\"\n (nzBlur)=\"updateClass()\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-left-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-left-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] = $event + 'px'\n \"\n />\n </div>\n <nz-slider\n [nzStep]=\"1\"\n [nzMin]=\"0\"\n [nzMax]=\"100\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-left-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-left-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] = $event + 'px'\n \"\n (nzOnAfterChange)=\"updateClass()\"\n ></nz-slider>\n </div>\n\n \x3c!-- Góc dưới bên trái --\x3e\n <div class=\"flex flex-col mb-2\">\n <div class=\"flex items-center justify-between\">\n <label class=\"text-xs w-2/3\">Góc dưới bên phải</label>\n <nz-input-number\n class=\"w-30\"\n (nzBlur)=\"updateClass()\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-right-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-right-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] = $event + 'px'\n \"\n />\n </div>\n <nz-slider\n [nzStep]=\"1\"\n [nzMin]=\"0\"\n [nzMax]=\"100\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-right-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-right-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] = $event + 'px'\n \"\n (nzOnAfterChange)=\"updateClass()\"\n ></nz-slider>\n </div>\n</div>\n",styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:ne},{kind:"component",type:ee.NzSliderComponent,selector:"nz-slider",inputs:["nzDisabled","nzDots","nzIncluded","nzRange","nzVertical","nzReverse","nzDefaultValue","nzMarks","nzMax","nzMin","nzStep","nzTooltipVisible","nzTooltipPlacement","nzTipFormatter"],outputs:["nzOnAfterChange"],exportAs:["nzSlider"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"pipe",type:ct,name:"wbnumber"}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:bt,decorators:[{type:l,args:[{selector:"wb-border-radius-config",imports:[B,ct,ne,Z],template:"<div class=\"border-radius-config p-2\">\n \x3c!-- Góc trên bên trái --\x3e\n <div class=\"flex flex-col mb-2\">\n <div class=\"flex items-center justify-between\">\n <label class=\"text-xs w-2/3\">Góc trên bên trái</label>\n <nz-input-number\n class=\"w-30\"\n (nzBlur)=\"updateClass()\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-left-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-left-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] = $event + 'px'\n \"\n />\n </div>\n <nz-slider\n [nzStep]=\"1\"\n [nzMin]=\"0\"\n [nzMax]=\"100\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-left-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-left-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] = $event + 'px'\n \"\n (nzOnAfterChange)=\"updateClass()\"\n ></nz-slider>\n </div>\n\n \x3c!-- Góc trên bên phải --\x3e\n <div class=\"flex flex-col mb-2\">\n <div class=\"flex items-center justify-between\">\n <label class=\"text-xs w-2/3\">Góc trên bên phải</label>\n <nz-input-number\n class=\"w-30\"\n (nzBlur)=\"updateClass()\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-right-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-right-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] = $event + 'px'\n \"\n />\n </div>\n <nz-slider\n [nzStep]=\"1\"\n [nzMin]=\"0\"\n [nzMax]=\"100\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-right-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-top-right-radius' + (isFirstChildLastChild ? '-first-child' : '')\n ] = $event + 'px'\n \"\n (nzOnAfterChange)=\"updateClass()\"\n ></nz-slider>\n </div>\n\n \x3c!-- Góc dưới bên trái --\x3e\n <div class=\"flex flex-col mb-2\">\n <div class=\"flex items-center justify-between\">\n <label class=\"text-xs w-2/3\">Góc dưới bên trái</label>\n <nz-input-number\n class=\"w-30\"\n (nzBlur)=\"updateClass()\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-left-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-left-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] = $event + 'px'\n \"\n />\n </div>\n <nz-slider\n [nzStep]=\"1\"\n [nzMin]=\"0\"\n [nzMax]=\"100\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-left-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-left-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] = $event + 'px'\n \"\n (nzOnAfterChange)=\"updateClass()\"\n ></nz-slider>\n </div>\n\n \x3c!-- Góc dưới bên trái --\x3e\n <div class=\"flex flex-col mb-2\">\n <div class=\"flex items-center justify-between\">\n <label class=\"text-xs w-2/3\">Góc dưới bên phải</label>\n <nz-input-number\n class=\"w-30\"\n (nzBlur)=\"updateClass()\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-right-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-right-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] = $event + 'px'\n \"\n />\n </div>\n <nz-slider\n [nzStep]=\"1\"\n [nzMin]=\"0\"\n [nzMax]=\"100\"\n [ngModel]=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-right-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] | wbnumber\n \"\n (ngModelChange)=\"\n data[device + '_class'][classBorderRadius][\n '--border-bottom-right-radius' + (isFirstChildLastChild ? '-last-child' : '')\n ] = $event + 'px'\n \"\n (nzOnAfterChange)=\"updateClass()\"\n ></nz-slider>\n </div>\n</div>\n"}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],classBorderRadius:[{type:s}],isFirstChildLastChild:[{type:s}]}});class ft{webBuilderService;cdr;availableLanguage=[];listLanguage=hn;options=[];constructor(e,n){this.webBuilderService=e,this.cdr=n}ngOnInit(){}ngOnChanges(e){this.options=[],e.availableLanguage.currentValue.forEach(e=>{const n=this.listLanguage.find(n=>n.language==e);n&&this.options.push(n)})}getItem(e){return this.listLanguage.find(n=>n.language==e)}updateDb(){this.cdr.detectChanges(),this.webBuilderService.updateProject(this.webBuilderService.projectWorking._id,{language:this.webBuilderService.projectWorking.language})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ft,deps:[{token:xn},{token:t.ChangeDetectorRef}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:ft,isStandalone:!0,selector:"app-select-language",inputs:{availableLanguage:"availableLanguage"},usesOnChanges:!0,ngImport:t,template:'@if (options.length > 1) {\n <div class="select-language">\n <nz-select\n nzDropdownClassName="select-language-dropdown"\n [(ngModel)]="webBuilderService.projectWorking.language.default"\n (ngModelChange)="updateDb()"\n [nzCustomTemplate]="defaultTemplate"\n >\n @for (l of webBuilderService.projectWorking.language.available; track l) {\n <nz-option class="custom-option" nzCustomContent [nzValue]="l" [nzLabel]="l">\n <img [src]="getItem(l).flag" style="width: 18px" />\n </nz-option>\n }\n </nz-select>\n\n <ng-template #defaultTemplate let-selected>\n <img\n [src]="getItem(webBuilderService.projectWorking.language.default).flag"\n style="width: 18px"\n />\n </ng-template>\n </div>\n}\n',styles:[".select-language ::ng-deep nz-select-item{display:flex!important;align-items:center!important;padding:0!important}.select-language ::ng-deep nz-icon{display:none!important}\n"],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:j}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ft,decorators:[{type:l,args:[{selector:"app-select-language",imports:[B,ie,j],template:'@if (options.length > 1) {\n <div class="select-language">\n <nz-select\n nzDropdownClassName="select-language-dropdown"\n [(ngModel)]="webBuilderService.projectWorking.language.default"\n (ngModelChange)="updateDb()"\n [nzCustomTemplate]="defaultTemplate"\n >\n @for (l of webBuilderService.projectWorking.language.available; track l) {\n <nz-option class="custom-option" nzCustomContent [nzValue]="l" [nzLabel]="l">\n <img [src]="getItem(l).flag" style="width: 18px" />\n </nz-option>\n }\n </nz-select>\n\n <ng-template #defaultTemplate let-selected>\n <img\n [src]="getItem(webBuilderService.projectWorking.language.default).flag"\n style="width: 18px"\n />\n </ng-template>\n </div>\n}\n',styles:[".select-language ::ng-deep nz-select-item{display:flex!important;align-items:center!important;padding:0!important}.select-language ::ng-deep nz-icon{display:none!important}\n"]}]}],ctorParameters:()=>[{type:xn},{type:t.ChangeDetectorRef}],propDecorators:{availableLanguage:[{type:s}]}});class vt{modalRef;webBuilderService;data;device;configContent="";nzModalData=o(I);Editor=pe;config={licenseKey:"GPL",plugins:[ge,ue,he,me,be,fe,ve,ze,ye,_e,xe,we,Ce,ke,Se,Me,Be,Oe,Ie,Te,De,je,Pe,Ae,Fe,Ne,Ve,$e,We,Le,Ee,Re,He,Ge,Ke,Xe,qe,Ue,Ye,Je],toolbar:{items:["undo","redo","|","heading","|","bold","italic","underline","strikethrough","removeFormat","|","fontSize","fontFamily","fontColor","fontBackgroundColor","|","link","blockquote","code","codeBlock","|","bulletedList","numberedList","todoList","|","insertTable","mediaEmbed","horizontalLine","|","alignment","outdent","indent","|","highlight","findAndReplace","selectAll","|","subscript","superscript","specialCharacters"],shouldNotGroupWhenFull:!0},fontSize:{options:[8,9,10,11,12,13,14,16,18,20,24,28,32]},image:{toolbar:["imageStyle:inline","imageStyle:block","imageStyle:side","|","toggleImageCaption","imageTextAlternative","|","resizeImage"],styles:["inline","block","side"],resizeUnit:"%"},table:{contentToolbar:["tableColumn","tableRow","mergeTableCells","tableProperties","tableCellProperties"]},removePlugins:["ExportPdf","ExportWord","CKBox","CKFinder","EasyImage","RealTimeCollaborativeComments","Comments","TrackChanges","RevisionHistory","PresenceList","WProofreader","AIAssistant","SlashCommand","Pagination","ImportWord"]};constructor(e,n){this.modalRef=e,this.webBuilderService=n}ngOnInit(){const{data:e,device:n,configContent:t}=this.nzModalData;this.data=e,this.device=n,this.configContent=t||"content"}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:vt,deps:[{token:O.NzModalRef},{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:vt,isStandalone:!0,selector:"wb-ckeditor-content",ngImport:t,template:'<div class="flex flex-col gap-2 justify-center">\n <div class="flex justify-center items-center">\n <app-select-language [availableLanguage]="webBuilderService.projectWorking.language.available">\n </app-select-language>\n </div>\n\n <ckeditor\n class="text-paragraph-ckeditor"\n [editor]="Editor"\n [config]="config"\n [(ngModel)]="\n data[device + \'_config\'][configContent][webBuilderService.projectWorking.language.default]\n "\n ></ckeditor>\n</div>\n',styles:[".ck-editor__editable_inline{min-height:300px;max-height:600px;overflow-y:auto}.ck-editor__editable_inline::-webkit-scrollbar{width:5px;height:5px}.ck-editor__editable_inline::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.ck-editor__editable_inline::-webkit-scrollbar-track{background-color:#0000001a}\n"],dependencies:[{kind:"component",type:ft,selector:"app-select-language",inputs:["availableLanguage"]},{kind:"ngmodule",type:de},{kind:"component",type:ce.CKEditorComponent,selector:"ckeditor",inputs:["editor","config","data","tagName","watchdog","editorWatchdogConfig","disableWatchdog","disableTwoWayDataBinding","disabled"],outputs:["ready","change","blur","focus","error"]},{kind:"ngmodule",type:k},{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]}],encapsulation:t.ViewEncapsulation.None})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:vt,decorators:[{type:l,args:[{selector:"wb-ckeditor-content",encapsulation:m.None,imports:[ft,de,k,B],template:'<div class="flex flex-col gap-2 justify-center">\n <div class="flex justify-center items-center">\n <app-select-language [availableLanguage]="webBuilderService.projectWorking.language.available">\n </app-select-language>\n </div>\n\n <ckeditor\n class="text-paragraph-ckeditor"\n [editor]="Editor"\n [config]="config"\n [(ngModel)]="\n data[device + \'_config\'][configContent][webBuilderService.projectWorking.language.default]\n "\n ></ckeditor>\n</div>\n',styles:[".ck-editor__editable_inline{min-height:300px;max-height:600px;overflow-y:auto}.ck-editor__editable_inline::-webkit-scrollbar{width:5px;height:5px}.ck-editor__editable_inline::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.ck-editor__editable_inline::-webkit-scrollbar-track{background-color:#0000001a}\n"]}]}],ctorParameters:()=>[{type:O.NzModalRef},{type:xn}]});class zt{webBuilderService;modal;data;device;configContent="";constructor(e,n){this.webBuilderService=e,this.modal=n}ngOnInit(){}handleChangeContent(){this.modal.create({nzTitle:"Chỉnh sửa nội dung",nzContent:vt,nzWidth:"95%",nzFooter:null,nzClassName:"modal-text-paragraph",nzData:{data:this.data,device:this.device,configContent:this.configContent}}).afterClose.subscribe(e=>{this.updateConfig()})}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:zt,deps:[{token:xn},{token:O.NzModalService}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:zt,isStandalone:!0,selector:"wb-ckeditor-config",inputs:{data:"data",device:"device",configContent:"configContent"},ngImport:t,template:'<div class="p-2">\n <button nz-button (click)="handleChangeContent()" nzType="primary" style="width: 100%">\n Chỉnh sửa nội dung\n </button>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:k},{kind:"ngmodule",type:B},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:zt,decorators:[{type:l,args:[{selector:"wb-ckeditor-config",imports:[k,B,X],template:'<div class="p-2">\n <button nz-button (click)="handleChangeContent()" nzType="primary" style="width: 100%">\n Chỉnh sửa nội dung\n </button>\n</div>\n'}]}],ctorParameters:()=>[{type:xn},{type:O.NzModalService}],propDecorators:{data:[{type:s}],device:[{type:s}],configContent:[{type:s}]}});class yt{webBuilderService;data;device;configDialog="dialog";triggerOptions=[{label:"Nhấn chuột",value:"click"},{label:"Rê chuột",value:"hover"}];dialogOptions=[{label:"Modal (nổi giữa màn hình, che nền)",value:"modal"},{label:"Dialog (hộp thoại nhỏ ở giữa)",value:"dialog"},{label:"Drawer (thanh trượt từ cạnh màn hình)",value:"drawer"}];drawerPositionOptions=[{label:"Trái",value:"left"},{label:"Phải",value:"right"},{label:"Trên",value:"top"},{label:"Dưới",value:"bottom"}];alignDialogOptions=[{label:"Trái",value:"left"},{label:"Giữa",value:"center"},{label:"Phải",value:"right"}];topPositionOptions=[{label:"0%",value:"0"},{label:"100%",value:"100%"}];isOpen=!1;deviceEleRect;constructor(e){this.webBuilderService=e}ngOnInit(){this.data[this.device+"_config"].dialog.translate_x||(this.data[this.device+"_config"].dialog.translate_x=0,this.updateConfig())}get filteredFreeblocks(){return this.webBuilderService.freeblocks.filter(e=>"block_header"!==e.type&&"block_footer"!==e.type)}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}updateClass(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}onSetPosition(){this.updateConfig()}openDrawer(){this.webBuilderService.notifyChange({name:"open-drawer",_id:this.data._id})}onChangeBlock(){this.webBuilderService.notifyChange({name:"change-freeblock",_id:this.data._id})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:yt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:yt,isStandalone:!0,selector:"wb-dialog-config",inputs:{data:"data",device:"device",configDialog:"configDialog"},ngImport:t,template:'<div class="dia-log-config p-2">\n @if (data.type != \'object_product_input_search\' && configDialog) {\n <div class="flex flex-col gap-2">\n <span class="text-xs">Chọn khối hộp thoại</span>\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'].id_freeblock"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Chọn khối hộp thoại"\n >\n @for (item of filteredFreeblocks; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex flex-col gap-2">\n <span class="text-xs">Kiểu hộp thoại</span>\n\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configDialog].type"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Chọn khối hộp thoại"\n >\n @for (item of dialogOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (data[device + \'_config\'][configDialog].type == \'dialog\') {\n <div class="flex flex-col gap-2">\n <span class="text-xs">Cách mở hộp thoại</span>\n\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configDialog].trigger"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Cách mở hộp thoại"\n >\n @for (item of triggerOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs mb-1">Đóng/Mở hộp thoại</p>\n <nz-switch [(ngModel)]="data[device + \'_config\'][configDialog].open"></nz-switch>\n </div>\n\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Trái/Phải</label>\n <nz-input-number\n nzMin="-100"\n nzMax="100"\n class="w-30"\n (nzBlur)="updateConfig()"\n [(ngModel)]="data[device + \'_config\'][configDialog][\'translate_x\']"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="-100"\n [nzMax]="100"\n [(ngModel)]="data[device + \'_config\'][configDialog][\'translate_x\']"\n (nzOnAfterChange)="updateConfig()"\n ></nz-slider>\n </div>\n }\n\n @if (\n [\'click\', \'hover\'].includes(data[device + \'_config\'][configDialog].trigger) &&\n data[device + \'_config\'][configDialog].type == \'dialog\'\n ) {\n <div class="flex flex-col gap-2">\n <span class="text-xs">Canh lề hộp thoại</span>\n\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configDialog].position"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Canh lề hộp thoại"\n >\n @for (item of alignDialogOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex flex-col gap-2">\n <span class="text-xs">Khoảng cách bên trên(%)</span>\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_class\'][\'wb-dialog-hover\'][\'--top\']"\n (ngModelChange)="updateClass()"\n nzPlaceHolder="Khoảng cách bên trên(%)"\n >\n @for (item of topPositionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n }\n\n @if (data[device + \'_config\'][configDialog].type == \'modal\') {\n <div class="flex justify-between items-center">\n <p class="text-xs mb-1">Đóng hộp thoại khi click ra ngoài</p>\n\n <nz-switch\n [(ngModel)]="data[device + \'_config\'][configDialog].dismissableMask"\n (ngModelChange)="updateConfig()"\n ></nz-switch>\n </div>\n }\n\n @if (data[device + \'_config\'][configDialog].type == \'drawer\') {\n <div class="flex flex-col gap-2">\n <span class="text-xs">Vị trí xuất hiện</span>\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configDialog].position"\n (ngModelChange)="onSetPosition()"\n nzPlaceHolder="Khoảng cách bên trên(%)"\n >\n @for (item of drawerPositionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex justify-between items-center">\n <button nzType="primary" class="w-full" nz-button (click)="openDrawer()">\n Mở hộp thoại\n </button>\n </div>\n }\n } @else if (data.type == \'object_product_input_search\' && configDialog) {\n <div class="flex flex-col gap-2">\n <span class="text-xs">Chọn khối hộp thoại</span>\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'].id_freeblock"\n (ngModelChange)="onChangeBlock(); updateConfig()"\n nzPlaceHolder="Chọn khối hộp thoại"\n nzAllowClear\n >\n @for (item of filteredFreeblocks; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs mb-1">Đóng/Mở hộp thoại</p>\n <nz-switch [(ngModel)]="data[device + \'_config\'][configDialog].open"></nz-switch>\n </div>\n\n <div class="flex flex-col gap-2">\n <span class="text-xs">Canh lề hộp thoại</span>\n\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configDialog].position"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Canh lề hộp thoại"\n >\n @for (item of alignDialogOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Trái/Phải</label>\n <nz-input-number\n nzMin="-100"\n nzMax="100"\n class="w-30"\n (nzBlur)="updateConfig()"\n [(ngModel)]="data[device + \'_config\'][configDialog][\'translate_x\']"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="-100"\n [nzMax]="100"\n [(ngModel)]="data[device + \'_config\'][configDialog][\'translate_x\']"\n (nzOnAfterChange)="updateConfig()"\n ></nz-slider>\n </div>\n }\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:se},{kind:"component",type:re.NzSwitchComponent,selector:"nz-switch",inputs:["nzLoading","nzDisabled","nzControl","nzCheckedChildren","nzUnCheckedChildren","nzSize","nzId"],exportAs:["nzSwitch"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]},{kind:"ngmodule",type:ne},{kind:"component",type:ee.NzSliderComponent,selector:"nz-slider",inputs:["nzDisabled","nzDots","nzIncluded","nzRange","nzVertical","nzReverse","nzDefaultValue","nzMarks","nzMax","nzMin","nzStep","nzTooltipVisible","nzTooltipPlacement","nzTipFormatter"],outputs:["nzOnAfterChange"],exportAs:["nzSlider"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:yt,decorators:[{type:l,args:[{selector:"wb-dialog-config",imports:[B,ie,se,X,ne,Z],template:'<div class="dia-log-config p-2">\n @if (data.type != \'object_product_input_search\' && configDialog) {\n <div class="flex flex-col gap-2">\n <span class="text-xs">Chọn khối hộp thoại</span>\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'].id_freeblock"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Chọn khối hộp thoại"\n >\n @for (item of filteredFreeblocks; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex flex-col gap-2">\n <span class="text-xs">Kiểu hộp thoại</span>\n\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configDialog].type"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Chọn khối hộp thoại"\n >\n @for (item of dialogOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (data[device + \'_config\'][configDialog].type == \'dialog\') {\n <div class="flex flex-col gap-2">\n <span class="text-xs">Cách mở hộp thoại</span>\n\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configDialog].trigger"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Cách mở hộp thoại"\n >\n @for (item of triggerOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs mb-1">Đóng/Mở hộp thoại</p>\n <nz-switch [(ngModel)]="data[device + \'_config\'][configDialog].open"></nz-switch>\n </div>\n\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Trái/Phải</label>\n <nz-input-number\n nzMin="-100"\n nzMax="100"\n class="w-30"\n (nzBlur)="updateConfig()"\n [(ngModel)]="data[device + \'_config\'][configDialog][\'translate_x\']"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="-100"\n [nzMax]="100"\n [(ngModel)]="data[device + \'_config\'][configDialog][\'translate_x\']"\n (nzOnAfterChange)="updateConfig()"\n ></nz-slider>\n </div>\n }\n\n @if (\n [\'click\', \'hover\'].includes(data[device + \'_config\'][configDialog].trigger) &&\n data[device + \'_config\'][configDialog].type == \'dialog\'\n ) {\n <div class="flex flex-col gap-2">\n <span class="text-xs">Canh lề hộp thoại</span>\n\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configDialog].position"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Canh lề hộp thoại"\n >\n @for (item of alignDialogOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex flex-col gap-2">\n <span class="text-xs">Khoảng cách bên trên(%)</span>\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_class\'][\'wb-dialog-hover\'][\'--top\']"\n (ngModelChange)="updateClass()"\n nzPlaceHolder="Khoảng cách bên trên(%)"\n >\n @for (item of topPositionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n }\n\n @if (data[device + \'_config\'][configDialog].type == \'modal\') {\n <div class="flex justify-between items-center">\n <p class="text-xs mb-1">Đóng hộp thoại khi click ra ngoài</p>\n\n <nz-switch\n [(ngModel)]="data[device + \'_config\'][configDialog].dismissableMask"\n (ngModelChange)="updateConfig()"\n ></nz-switch>\n </div>\n }\n\n @if (data[device + \'_config\'][configDialog].type == \'drawer\') {\n <div class="flex flex-col gap-2">\n <span class="text-xs">Vị trí xuất hiện</span>\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configDialog].position"\n (ngModelChange)="onSetPosition()"\n nzPlaceHolder="Khoảng cách bên trên(%)"\n >\n @for (item of drawerPositionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex justify-between items-center">\n <button nzType="primary" class="w-full" nz-button (click)="openDrawer()">\n Mở hộp thoại\n </button>\n </div>\n }\n } @else if (data.type == \'object_product_input_search\' && configDialog) {\n <div class="flex flex-col gap-2">\n <span class="text-xs">Chọn khối hộp thoại</span>\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'].id_freeblock"\n (ngModelChange)="onChangeBlock(); updateConfig()"\n nzPlaceHolder="Chọn khối hộp thoại"\n nzAllowClear\n >\n @for (item of filteredFreeblocks; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs mb-1">Đóng/Mở hộp thoại</p>\n <nz-switch [(ngModel)]="data[device + \'_config\'][configDialog].open"></nz-switch>\n </div>\n\n <div class="flex flex-col gap-2">\n <span class="text-xs">Canh lề hộp thoại</span>\n\n <nz-select\n class="mb-2 w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configDialog].position"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Canh lề hộp thoại"\n >\n @for (item of alignDialogOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Trái/Phải</label>\n <nz-input-number\n nzMin="-100"\n nzMax="100"\n class="w-30"\n (nzBlur)="updateConfig()"\n [(ngModel)]="data[device + \'_config\'][configDialog][\'translate_x\']"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="-100"\n [nzMax]="100"\n [(ngModel)]="data[device + \'_config\'][configDialog][\'translate_x\']"\n (nzOnAfterChange)="updateConfig()"\n ></nz-slider>\n </div>\n }\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],configDialog:[{type:s}]}});class _t{webBuilderService;data;device;configDataList;configField;classFlexDirection;dataChoosing=null;fieldOptions=[{label:"Thương hiệu",value:"brand"},{label:"Giá",value:"price"}];directionOptions=[{label:"Ngang",value:"row"},{label:"Dọc",value:"column"}];constructor(e){this.webBuilderService=e}ngOnInit(){this.getNewFields()}getNewFields(){this.webBuilderService.getNewField_byFields({main_sector:{$eq:"product"}},{}).then(e=>{console.log("res",e),e.data.forEach(e=>{this.fieldOptions.push({label:e.label,value:e.field})})})}confirm1(e,n){}handleAdd(){this.data[this.device+"_config"][this.configDataList]||(this.data[this.device+"_config"][this.configDataList]=[]),this.data[this.device+"_config"][this.configDataList].push({_id:Math.random().toString(36).substring(2,15),value:{vi:"Apple"}}),this.updateConfig()}drop(e){Qe(this.data[this.device+"_config"][this.configDataList],e.previousIndex,e.currentIndex),this.updateConfig()}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}updateClass(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}handleRemove(e){this.data[this.device+"_config"][this.configDataList]=this.data[this.device+"_config"][this.configDataList].filter(n=>n._id!==e._id),this.updateConfig()}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:_t,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:_t,isStandalone:!0,selector:"wb-filter-config",inputs:{data:"data",device:"device",configDataList:"configDataList",configField:"configField",classFlexDirection:"classFlexDirection"},ngImport:t,template:'<div class="filter-config p-2">\n \x3c!-- Trường lọc dữ liệu --\x3e\n <div class="flex flex-col gap-2">\n <p class="m-0">Trường lọc dữ liệu</p>\n\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configField]"\n (ngModelChange)="updateConfig()"\n >\n @for (item of fieldOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n <nz-segmented\n [nzOptions]="directionOptions"\n [(ngModel)]="data[device + \'_class\'][classFlexDirection][\'--flex-direction\']"\n (ngModelChange)="updateClass()"\n ></nz-segmented>\n\n <p class="m-0">Nội dung</p>\n <button (click)="handleAdd()" nz-button nzType="primary" class="w-full">\n <nz-icon nzType="plus"></nz-icon>\n </button>\n <div cdkDropList class="example-list mb-2" (cdkDropListDropped)="drop($event)">\n @for (item of data[device + \'_config\'][configDataList]; track item._id) {\n <div cdkDrag class="flex items-center gap-2 example-box">\n <nz-icon nzType="menu" class="cursor-move"></nz-icon>\n <input\n type="text"\n nz-input\n (blur)="updateConfig()"\n [(ngModel)]="item.value[webBuilderService.projectWorking.language.default]"\n />\n <nz-icon\n nzType="small-dash"\n nzTheme="outline"\n nz-dropdown\n [nzDropdownMenu]="menu"\n class="cursor-pointer"\n />\n <nz-dropdown-menu #menu="nzDropdownMenu">\n <ul nz-menu nzSelectable>\n <li nz-menu-item nzDanger (click)="handleRemove(item)">Xóa</li>\n </ul>\n </nz-dropdown-menu>\n </div>\n }\n </div>\n\n @if (data[device + \'_config\'][configField] == \'price\' && dataChoosing) {\n <div class="flex flex-col gap-2">\n <div class="flex flex-col gap-2 mb-2">\n <label for="">Giá tối thiểu</label>\n <nz-input-number\n [(ngModel)]="dataChoosing.min"\n [nzMin]="0"\n [nzStep]="1"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Giá tối thiểu"\n ></nz-input-number>\n </div>\n <div class="flex flex-col gap-2 mb-2">\n <label for="">Giá tối đa</label>\n <nz-input-number\n [(ngModel)]="dataChoosing.max"\n [nzMin]="0"\n [nzStep]="1"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Giá tối đa"\n ></nz-input-number>\n </div>\n </div>\n }\n</div>\n\n\x3c!-- <p-confirmpopup /> --\x3e\n',styles:[".example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;font-size:14px}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"],dependencies:[{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:tn},{kind:"component",type:nn.NzSegmentedComponent,selector:"nz-segmented",inputs:["nzBlock","nzDisabled","nzOptions","nzVertical","nzShape","nzSize","nzName"],outputs:["nzValueChange"],exportAs:["nzSegmented"]},{kind:"ngmodule",type:G},{kind:"directive",type:H.NzInputDirective,selector:"input[nz-input],textarea[nz-input]",inputs:["nzBorderless","nzVariant","nzSize","nzStepperless","nzStatus","disabled","readonly"],exportAs:["nzInput"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"directive",type:Ze,selector:"[cdkDrag]",inputs:["cdkDragData","cdkDragLockAxis","cdkDragRootElement","cdkDragBoundary","cdkDragStartDelay","cdkDragFreeDragPosition","cdkDragDisabled","cdkDragConstrainPosition","cdkDragPreviewClass","cdkDragPreviewContainer","cdkDragScale"],outputs:["cdkDragStarted","cdkDragReleased","cdkDragEnded","cdkDragEntered","cdkDragExited","cdkDragDropped","cdkDragMoved"],exportAs:["cdkDrag"]},{kind:"directive",type:en,selector:"[cdkDropList], cdk-drop-list",inputs:["cdkDropListConnectedTo","cdkDropListData","cdkDropListOrientation","id","cdkDropListLockAxis","cdkDropListDisabled","cdkDropListSortingDisabled","cdkDropListEnterPredicate","cdkDropListSortPredicate","cdkDropListAutoScrollDisabled","cdkDropListAutoScrollStep","cdkDropListElementContainer","cdkDropListHasAnchor"],outputs:["cdkDropListDropped","cdkDropListEntered","cdkDropListExited","cdkDropListSorted"],exportAs:["cdkDropList"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]},{kind:"ngmodule",type:an},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzMenuItemComponent,selector:"[nz-menu-item]",inputs:["nzPaddingLeft","nzDisabled","nzSelected","nzDanger","nzMatchRouterExact","nzMatchRouter"],exportAs:["nzMenuItem"]},{kind:"directive",type:on.NzDropDownDirective,selector:"[nz-dropdown]",inputs:["nzDropdownMenu","nzTrigger","nzMatchWidthElement","nzBackdrop","nzClickHide","nzDisabled","nzVisible","nzArrow","nzOverlayClassName","nzOverlayStyle","nzPlacement"],outputs:["nzVisibleChange"],exportAs:["nzDropdown"]},{kind:"component",type:on.NzDropdownMenuComponent,selector:"nz-dropdown-menu",exportAs:["nzDropdownMenu"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:_t,decorators:[{type:l,args:[{selector:"wb-filter-config",imports:[ie,tn,G,Z,B,j,Ze,en,X,an],template:'<div class="filter-config p-2">\n \x3c!-- Trường lọc dữ liệu --\x3e\n <div class="flex flex-col gap-2">\n <p class="m-0">Trường lọc dữ liệu</p>\n\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configField]"\n (ngModelChange)="updateConfig()"\n >\n @for (item of fieldOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n <nz-segmented\n [nzOptions]="directionOptions"\n [(ngModel)]="data[device + \'_class\'][classFlexDirection][\'--flex-direction\']"\n (ngModelChange)="updateClass()"\n ></nz-segmented>\n\n <p class="m-0">Nội dung</p>\n <button (click)="handleAdd()" nz-button nzType="primary" class="w-full">\n <nz-icon nzType="plus"></nz-icon>\n </button>\n <div cdkDropList class="example-list mb-2" (cdkDropListDropped)="drop($event)">\n @for (item of data[device + \'_config\'][configDataList]; track item._id) {\n <div cdkDrag class="flex items-center gap-2 example-box">\n <nz-icon nzType="menu" class="cursor-move"></nz-icon>\n <input\n type="text"\n nz-input\n (blur)="updateConfig()"\n [(ngModel)]="item.value[webBuilderService.projectWorking.language.default]"\n />\n <nz-icon\n nzType="small-dash"\n nzTheme="outline"\n nz-dropdown\n [nzDropdownMenu]="menu"\n class="cursor-pointer"\n />\n <nz-dropdown-menu #menu="nzDropdownMenu">\n <ul nz-menu nzSelectable>\n <li nz-menu-item nzDanger (click)="handleRemove(item)">Xóa</li>\n </ul>\n </nz-dropdown-menu>\n </div>\n }\n </div>\n\n @if (data[device + \'_config\'][configField] == \'price\' && dataChoosing) {\n <div class="flex flex-col gap-2">\n <div class="flex flex-col gap-2 mb-2">\n <label for="">Giá tối thiểu</label>\n <nz-input-number\n [(ngModel)]="dataChoosing.min"\n [nzMin]="0"\n [nzStep]="1"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Giá tối thiểu"\n ></nz-input-number>\n </div>\n <div class="flex flex-col gap-2 mb-2">\n <label for="">Giá tối đa</label>\n <nz-input-number\n [(ngModel)]="dataChoosing.max"\n [nzMin]="0"\n [nzStep]="1"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Giá tối đa"\n ></nz-input-number>\n </div>\n </div>\n }\n</div>\n\n\x3c!-- <p-confirmpopup /> --\x3e\n',styles:[".example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;font-size:14px}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"]}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],configDataList:[{type:s}],configField:[{type:s}],classFlexDirection:[{type:s}]}});class xt{webBuilderService;data;device;classFixed;configFixed;positionOptions=[{label:"Góc trên bên trái",value:"top-left"},{label:"Góc trên bên phải",value:"top-right"},{label:"Góc dưới bên trái",value:"bottom-left"},{label:"Góc dưới bên phải",value:"bottom-right"}];constructor(e){this.webBuilderService=e}ngOnInit(){}updateClass(){this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}updateConfig(){this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}onChangePosition(){switch(this.data[this.device+"_config"][this.configFixed]){case"top-left":this.data[this.device+"_class"][this.classFixed]["--bottom"]="unset",this.data[this.device+"_class"][this.classFixed]["--right"]="unset";break;case"top-right":this.data[this.device+"_class"][this.classFixed]["--bottom"]="unset",this.data[this.device+"_class"][this.classFixed]["--left"]="unset";break;case"bottom-left":this.data[this.device+"_class"][this.classFixed]["--top"]="unset",this.data[this.device+"_class"][this.classFixed]["--right"]="unset";break;case"bottom-right":this.data[this.device+"_class"][this.classFixed]["--top"]="unset",this.data[this.device+"_class"][this.classFixed]["--left"]="unset"}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:xt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:xt,isStandalone:!0,selector:"wb-fixed-config",inputs:{data:"data",device:"device",classFixed:"classFixed",configFixed:"configFixed"},ngImport:t,template:'<div class="fixed-config p-2">\n <div class="flex flex-col mb-2">\n <label for="fonts" class="block text-tiny">Hướng cố định</label>\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configFixed]"\n (ngModelChange)="onChangePosition()"\n >\n @for (item of positionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n \x3c!-- Trên --\x3e\n @if (data[device + \'_config\'][configFixed].includes(\'top\')) {\n <div class="flex items-center mb-2">\n <label class="text-xs w-full flex mb-1">Trên</label>\n <nz-input-number\n class="w-full"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classFixed][\'--top\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classFixed][\'--top\'] = $event + \'px\'"\n />\n </div>\n }\n\n \x3c!-- Dưới --\x3e\n @if (data[device + \'_config\'][configFixed].includes(\'bottom\')) {\n <div class="flex items-center mb-2">\n <label class="text-xs w-full flex mb-1">Dưới</label>\n\n <nz-input-number\n class="w-full"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classFixed][\'--bottom\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classFixed][\'--bottom\'] = $event + \'px\'"\n />\n </div>\n }\n\n \x3c!-- Trái --\x3e\n @if (data[device + \'_config\'][configFixed].includes(\'left\')) {\n <div class="flex items-center mb-2">\n <label class="text-xs w-full flex mb-1">Trái</label>\n\n <nz-input-number\n class="w-full"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classFixed][\'--left\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classFixed][\'--left\'] = $event + \'px\'"\n />\n </div>\n }\n\n \x3c!-- Phải --\x3e\n @if (data[device + \'_config\'][configFixed].includes(\'right\')) {\n <div class="flex items-center mb-2">\n <label class="text-xs w-full flex mb-1">Phải</label>\n\n <nz-input-number\n class="w-full"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classFixed][\'--right\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classFixed][\'--right\'] = $event + \'px\'"\n />\n </div>\n }\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"pipe",type:ct,name:"wbnumber"}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:xt,decorators:[{type:l,args:[{selector:"wb-fixed-config",imports:[ie,B,ct,Z],template:'<div class="fixed-config p-2">\n <div class="flex flex-col mb-2">\n <label for="fonts" class="block text-tiny">Hướng cố định</label>\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configFixed]"\n (ngModelChange)="onChangePosition()"\n >\n @for (item of positionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n \x3c!-- Trên --\x3e\n @if (data[device + \'_config\'][configFixed].includes(\'top\')) {\n <div class="flex items-center mb-2">\n <label class="text-xs w-full flex mb-1">Trên</label>\n <nz-input-number\n class="w-full"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classFixed][\'--top\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classFixed][\'--top\'] = $event + \'px\'"\n />\n </div>\n }\n\n \x3c!-- Dưới --\x3e\n @if (data[device + \'_config\'][configFixed].includes(\'bottom\')) {\n <div class="flex items-center mb-2">\n <label class="text-xs w-full flex mb-1">Dưới</label>\n\n <nz-input-number\n class="w-full"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classFixed][\'--bottom\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classFixed][\'--bottom\'] = $event + \'px\'"\n />\n </div>\n }\n\n \x3c!-- Trái --\x3e\n @if (data[device + \'_config\'][configFixed].includes(\'left\')) {\n <div class="flex items-center mb-2">\n <label class="text-xs w-full flex mb-1">Trái</label>\n\n <nz-input-number\n class="w-full"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classFixed][\'--left\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classFixed][\'--left\'] = $event + \'px\'"\n />\n </div>\n }\n\n \x3c!-- Phải --\x3e\n @if (data[device + \'_config\'][configFixed].includes(\'right\')) {\n <div class="flex items-center mb-2">\n <label class="text-xs w-full flex mb-1">Phải</label>\n\n <nz-input-number\n class="w-full"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classFixed][\'--right\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classFixed][\'--right\'] = $event + \'px\'"\n />\n </div>\n }\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],classFixed:[{type:s}],configFixed:[{type:s}]}});class wt{modalRef;keySearch="";listIcons=["step-backward","step-forward","fast-backward","fast-forward","shrink","arrows-alt","down","up","left","right","caret-up","caret-down","caret-left","caret-right","up-circle","down-circle","left-circle","right-circle","double-right","double-left","vertical-left","vertical-right","vertical-align-top","vertical-align-middle","vertical-align-bottom","forward","backward","rollback","enter","retweet","swap","swap-left","swap-right","arrow-up","arrow-down","arrow-left","arrow-right","play-circle","up-square","down-square","left-square","right-square","login","logout","menu-fold","menu-unfold","border-bottom","border-horizontal","border-inner","border-outer","border-left","border-right","border-top","border-verticle","pic-center","pic-left","pic-right","radius-bottomleft","radius-bottomright","radius-upleft","radius-upright","fullscreen","fullscreen-exit","question","question-circle","plus","plus-circle","pause","pause-circle","minus","minus-circle","plus-square","minus-square","info","info-circle","exclamation","exclamation-circle","close","close-circle","close-square","check","check-circle","check-square","clock-circle","warning","issues-close","stop","edit","form","copy","scissor","delete","snippets","diff","highlight","align-center","align-left","align-right","bg-colors","bold","italic","underline","strikethrough","redo","undo","zoom-in","zoom-out","font-colors","font-size","line-height","dash","small-dash","sort-ascending","sort-descending","drag","ordered-list","unordered-list","radius-setting","column-width","column-height","area-chart","pie-chart","bar-chart","dot-chart","line-chart","radar-chart","heat-map","fall","rise","stock","box-plot","fund","sliders","android","apple","windows","linux","ie","chrome","github","twitter","youtube","wechat","facebook","instagram","behance","slack","linkedin","dropbox","amazon","google","ant-design","send","phone","shopping-cart","search","menu","user","calendar","sound","mail"];listIconsFilter=this.listIcons;constructor(e){this.modalRef=e}ngOnInit(){}onSearch(){this.listIconsFilter=this.listIcons.filter(e=>e.toLowerCase().includes(this.keySearch.toLowerCase()))}onSelectIcon(e){this.modalRef.close(e)}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:wt,deps:[{token:O.NzModalRef}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:wt,isStandalone:!0,selector:"wb-list-icon",ngImport:t,template:'<div class="icon-list-container">\n <div class="mb-8 sticky top-0 z-10 bg-white">\n <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">\n <input\n [(ngModel)]="keySearch"\n (input)="onSearch()"\n type="text"\n nz-input\n placeholder="Tìm kiếm biểu tượng..."\n />\n </nz-input-group>\n <ng-template #suffixIconButton>\n <button nz-button nzType="primary" nzSearch><nz-icon nzType="search" /></button>\n </ng-template>\n </div>\n <div class="icon-list scrollbar-thin grid grid-cols-5 gap-8">\n @for (icon of listIconsFilter; track $index) {\n <div class="icon-item h-fit">\n <div\n class="flex flex-col items-center justify-center gap-2 cursor-pointer hover:bg-gray-100 rounded-lg p-4"\n (click)="onSelectIcon(icon)"\n >\n <nz-icon style="font-size: 22px" [nzType]="icon" />\n <span class="text-xs text-center break-words">{{ icon }}</span>\n </div>\n </div>\n }\n </div>\n</div>\n',styles:[".icon-list{max-height:calc(100vh - 200px);overflow:auto}.icon-item:hover{background-color:#1890ff;color:#fff;transition:all .3s}\n"],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:G},{kind:"directive",type:H.NzInputDirective,selector:"input[nz-input],textarea[nz-input]",inputs:["nzBorderless","nzVariant","nzSize","nzStepperless","nzStatus","disabled","readonly"],exportAs:["nzInput"]},{kind:"component",type:H.NzInputGroupComponent,selector:"nz-input-group",inputs:["nzAddOnBeforeIcon","nzAddOnAfterIcon","nzPrefixIcon","nzSuffixIcon","nzAddOnBefore","nzAddOnAfter","nzPrefix","nzStatus","nzSuffix","nzSize","nzSearch"],exportAs:["nzInputGroup"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:wt,decorators:[{type:l,args:[{selector:"wb-list-icon",imports:[B,G,j,X],template:'<div class="icon-list-container">\n <div class="mb-8 sticky top-0 z-10 bg-white">\n <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">\n <input\n [(ngModel)]="keySearch"\n (input)="onSearch()"\n type="text"\n nz-input\n placeholder="Tìm kiếm biểu tượng..."\n />\n </nz-input-group>\n <ng-template #suffixIconButton>\n <button nz-button nzType="primary" nzSearch><nz-icon nzType="search" /></button>\n </ng-template>\n </div>\n <div class="icon-list scrollbar-thin grid grid-cols-5 gap-8">\n @for (icon of listIconsFilter; track $index) {\n <div class="icon-item h-fit">\n <div\n class="flex flex-col items-center justify-center gap-2 cursor-pointer hover:bg-gray-100 rounded-lg p-4"\n (click)="onSelectIcon(icon)"\n >\n <nz-icon style="font-size: 22px" [nzType]="icon" />\n <span class="text-xs text-center break-words">{{ icon }}</span>\n </div>\n </div>\n }\n </div>\n</div>\n',styles:[".icon-list{max-height:calc(100vh - 200px);overflow:auto}.icon-item:hover{background-color:#1890ff;color:#fff;transition:all .3s}\n"]}]}],ctorParameters:()=>[{type:O.NzModalRef}]});class Ct{modalRef;webBuilderService;modal;functionService;nzModalData=o(I);data;itemEdit;pages=[];blocks=[];options=[{label:"Không",value:"none"},{label:"Đến trang(chọn)",value:"link-select"},{label:"Đến trang(tự nhập)",value:"link-input"},{label:"Trang ngoài",value:"url"},{label:"Email",value:"mailto:"},{label:"Số điện thoại",value:"tel:"}];clickActionOptions=[{label:"Không",value:"none"},{label:"Cuộn lên đầu trang",value:"scroll_to_top"},{label:"Cuộn đến khối",value:"scroll_to_block"}];optionsUpload=[{label:"Từ thiết bị của bạn",value:"device"},{label:"Từ URL",value:"url"}];constructor(e,n,t,i){this.modalRef=e,this.webBuilderService=n,this.modal=t,this.functionService=i}ngOnInit(){this.data=this.nzModalData.obj,this.itemEdit=this.nzModalData.item[this.data.code],this.getPages()}handleChangeIcon(){this.modal.create({nzTitle:"Danh sách biểu tượng",nzContent:wt,nzWidth:"70%",nzFooter:null,nzClassName:"modal-list-icon"}).afterClose.subscribe(e=>{e&&(this.itemEdit.icon.icon_name=e)})}getPages(){this.webBuilderService.getPages().then(e=>{this.pages=e.data,"link-input"!=this.itemEdit.router.type&&"link-select"!=this.itemEdit.router.type||this.getBlocks(),this.itemEdit.router.click_type||(this.itemEdit.router.click_type="scroll_to_top"),this.itemEdit.router.hasOwnProperty("scroll_distance")||(this.itemEdit.router.scroll_distance=0)})}getBlocks(){const e=this.itemEdit.router.link.replace(/^\/+/,"").split("/")[0],n=this.webBuilderService.pages.find(n=>n.link==e);n&&(this.blocks=this.webBuilderService.blocks.filter(e=>e.id_page==n._id))}onSave(){this.modalRef.close({...this.itemEdit})}onCancel(){this.modalRef.close(null)}onFileSelected(e){const n=e.target.files[0];n&&this.webBuilderService.upLoadImage(n,this.itemEdit.img.src,"object/").then(e=>{this.itemEdit.img.src=e.data,this.functionService.createMessage("success","Upload ảnh thành công")})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Ct,deps:[{token:O.NzModalRef},{token:xn},{token:O.NzModalService},{token:On}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Ct,isStandalone:!0,selector:"app-edit-data",ngImport:t,template:'@if (data.type == \'object_button_repeat\') {\n \x3c!-- NỘI DUNG --\x3e\n <div class="flex flex-col mb-1">\n <p class="m-0 text-tiny">{{ \'Nội dung\' }}</p>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n name="Nội dung"\n id="content"\n [(ngModel)]="itemEdit.content[webBuilderService.projectWorking.language.default]"\n ></textarea>\n </div>\n\n \x3c!-- ICON --\x3e\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs mb-1">Sử dụng</p>\n <nz-switch [(ngModel)]="itemEdit.icon.is_icon"></nz-switch>\n </div>\n\n <div class="flex items-center justify-between mb-2">\n <nz-icon style="font-size: 20px" [nzType]="itemEdit.icon[\'icon_name\']" nzTheme="outline" />\n <button\n [disabled]="!itemEdit.icon.is_icon"\n nz-button\n nzType="primary"\n (click)="handleChangeIcon()"\n >\n Thay đổi\n </button>\n </div>\n\n \x3c!-- ROUTER --\x3e\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="itemEdit.router.type"\n (ngModelChange)="getBlocks()"\n >\n @for (item of options; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n\n @if (itemEdit.router.type == \'url\') {\n <input\n class="w-full"\n nz-input\n placeholder="https://viethas.com"\n [(ngModel)]="itemEdit.router.link"\n />\n }\n @if (itemEdit.router.type == \'link-input\') {\n <input\n class="w-full"\n nz-input\n placeholder="gioi-thieu"\n [(ngModel)]="itemEdit.router.link"\n (blur)="getBlocks()"\n />\n }\n @if (itemEdit.router.type == \'link-select\') {\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="itemEdit.router.link"\n (ngModelChange)="getBlocks()"\n nzShowSearch\n >\n @for (item of pages; track $index) {\n <nz-option\n [nzValue]="item.link"\n [nzLabel]="item.name[webBuilderService.projectWorking.language.default]"\n ></nz-option>\n }\n </nz-select>\n }\n @if (itemEdit.router.type == \'mailto:\' || itemEdit.router.type == \'tel:\') {\n <div class="flex flex-col gap-2">\n <span class="m-0">\n Nhập\n {{ itemEdit.router.type == \'mailto:\' ? \'Email\' : \'Số điện thoại\' }}\n liên kết\n </span>\n <input nz-input type="text" class="w-full" [(ngModel)]="itemEdit.router.link" />\n </div>\n }\n\n @if (itemEdit.router.type == \'link-select\' || itemEdit.router.type == \'link-input\') {\n <div class="flex flex-col">\n <div>Hành động khi nhấn</div>\n <nz-select class="mb-2" style="width: 100%" [(ngModel)]="itemEdit.router.click_type">\n @for (item of clickActionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (itemEdit.router.click_type == \'scroll_to_block\') {\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="itemEdit.router.id_block"\n nzPlaceHolder="Chọn khối"\n >\n @for (item of blocks; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n\n <div>Khoảng cách chừa ra để tránh menu cố định</div>\n <nz-input-number\n style="width: 100%"\n [(ngModel)]="itemEdit.router.scroll_distance"\n nzMin="0"\n nzMax="200"\n />\n }\n }\n} @else if (data.type == \'object_text_repeat\') {\n \x3c!-- NỘI DUNG --\x3e\n <div class="flex flex-col mb-1">\n <p class="m-0 text-tiny">{{ \'Nội dung\' }}</p>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n name="Nội dung"\n id="content"\n [(ngModel)]="itemEdit.content[webBuilderService.projectWorking.language.default]"\n ></textarea>\n </div>\n\n \x3c!-- ICON --\x3e\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs mb-1">Sử dụng</p>\n <nz-switch [(ngModel)]="itemEdit.icon.is_icon"></nz-switch>\n </div>\n\n <div class="flex items-center justify-between mb-2">\n <nz-icon style="font-size: 20px" [nzType]="itemEdit.icon[\'icon_name\']" nzTheme="outline" />\n <button\n [disabled]="!itemEdit.icon.is_icon"\n nz-button\n nzType="primary"\n (click)="handleChangeIcon()"\n >\n Thay đổi\n </button>\n </div>\n\n \x3c!-- ROUTER --\x3e\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="itemEdit.router.type"\n (ngModelChange)="getBlocks()"\n >\n @for (item of options; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n\n @if (itemEdit.router.type == \'url\') {\n <input\n class="w-full"\n nz-input\n placeholder="https://viethas.com"\n [(ngModel)]="itemEdit.router.link"\n />\n }\n @if (itemEdit.router.type == \'link-input\') {\n <input\n class="w-full"\n nz-input\n placeholder="gioi-thieu"\n [(ngModel)]="itemEdit.router.link"\n (blur)="getBlocks()"\n />\n }\n @if (itemEdit.router.type == \'link-select\') {\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="itemEdit.router.link"\n (ngModelChange)="getBlocks()"\n nzShowSearch\n >\n @for (item of pages; track $index) {\n <nz-option\n [nzValue]="item.link"\n [nzLabel]="item.name[webBuilderService.projectWorking.language.default]"\n ></nz-option>\n }\n </nz-select>\n }\n @if (itemEdit.router.type == \'mailto:\' || itemEdit.router.type == \'tel:\') {\n <div class="flex flex-col gap-2">\n <span class="m-0">\n Nhập\n {{ itemEdit.router.type == \'mailto:\' ? \'Email\' : \'Số điện thoại\' }}\n liên kết\n </span>\n <input nz-input type="text" class="w-full" [(ngModel)]="itemEdit.router.link" />\n </div>\n }\n\n @if (itemEdit.router.type == \'link-select\' || itemEdit.router.type == \'link-input\') {\n <div class="flex flex-col">\n <div>Hành động khi nhấn</div>\n <nz-select class="mb-2" style="width: 100%" [(ngModel)]="itemEdit.router.click_type">\n @for (item of clickActionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (itemEdit.router.click_type == \'scroll_to_block\') {\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="itemEdit.router.id_block"\n nzPlaceHolder="Chọn khối"\n >\n @for (item of blocks; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n\n <div>Khoảng cách chừa ra để tránh menu cố định</div>\n <nz-input-number\n style="width: 100%"\n [(ngModel)]="itemEdit.router.scroll_distance"\n nzMin="0"\n nzMax="200"\n />\n }\n }\n} @else if (data.type == \'object_image_repeat\') {\n <img\n onerror="src=\'assets/system/imgs/no_img.png\'"\n nz-image\n width="60"\n height="60"\n [nzSrc]="itemEdit.img.src"\n [alt]="itemEdit.img.alt"\n />\n\n <div class="flex flex-col gap-2 mb-2">\n <label for="">Nguồn tải ảnh</label>\n\n <nz-select [(ngModel)]="itemEdit.img.upload_type" nzPlaceHolder="Nguồn hình ảnh hiển thị lên">\n @for (item of optionsUpload; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (itemEdit.img.upload_type == \'device\') {\n <button class="mb-2" style="width: 100%" (click)="fileInput.click()" nz-button>\n <nz-icon nzType="upload" nzTheme="outline" />\n Tải ảnh lên\n </button>\n\n <input\n #fileInput\n type="file"\n id="upload-image"\n (change)="onFileSelected($event)"\n accept="image/*"\n hidden\n />\n }\n\n @if (itemEdit.img.upload_type == \'url\') {\n <div class="flex flex-col gap-2">\n <label for="src">Đường dẫn ảnh</label>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n [(ngModel)]="itemEdit.img.src"\n name="Đường dẫn ảnh"\n ></textarea>\n </div>\n }\n}\n\n<div class="flex items-center justify-end">\n <div class="flex items-center gap-2">\n <button nz-button nzType="default" (click)="onCancel()">Hủy</button>\n <button nz-button nzType="primary" (click)="onSave()">Xác nhận</button>\n </div>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:G},{kind:"directive",type:H.NzInputDirective,selector:"input[nz-input],textarea[nz-input]",inputs:["nzBorderless","nzVariant","nzSize","nzStepperless","nzStatus","disabled","readonly"],exportAs:["nzInput"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]},{kind:"ngmodule",type:se},{kind:"component",type:re.NzSwitchComponent,selector:"nz-switch",inputs:["nzLoading","nzDisabled","nzControl","nzCheckedChildren","nzUnCheckedChildren","nzSize","nzId"],exportAs:["nzSwitch"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:cn},{kind:"directive",type:ln.NzImageDirective,selector:"img[nz-image]",inputs:["nzSrc","nzSrcset","nzDisablePreview","nzFallback","nzPlaceholder","nzScaleStep"],exportAs:["nzImage"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Ct,decorators:[{type:l,args:[{selector:"app-edit-data",imports:[B,G,j,X,se,ie,cn],template:'@if (data.type == \'object_button_repeat\') {\n \x3c!-- NỘI DUNG --\x3e\n <div class="flex flex-col mb-1">\n <p class="m-0 text-tiny">{{ \'Nội dung\' }}</p>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n name="Nội dung"\n id="content"\n [(ngModel)]="itemEdit.content[webBuilderService.projectWorking.language.default]"\n ></textarea>\n </div>\n\n \x3c!-- ICON --\x3e\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs mb-1">Sử dụng</p>\n <nz-switch [(ngModel)]="itemEdit.icon.is_icon"></nz-switch>\n </div>\n\n <div class="flex items-center justify-between mb-2">\n <nz-icon style="font-size: 20px" [nzType]="itemEdit.icon[\'icon_name\']" nzTheme="outline" />\n <button\n [disabled]="!itemEdit.icon.is_icon"\n nz-button\n nzType="primary"\n (click)="handleChangeIcon()"\n >\n Thay đổi\n </button>\n </div>\n\n \x3c!-- ROUTER --\x3e\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="itemEdit.router.type"\n (ngModelChange)="getBlocks()"\n >\n @for (item of options; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n\n @if (itemEdit.router.type == \'url\') {\n <input\n class="w-full"\n nz-input\n placeholder="https://viethas.com"\n [(ngModel)]="itemEdit.router.link"\n />\n }\n @if (itemEdit.router.type == \'link-input\') {\n <input\n class="w-full"\n nz-input\n placeholder="gioi-thieu"\n [(ngModel)]="itemEdit.router.link"\n (blur)="getBlocks()"\n />\n }\n @if (itemEdit.router.type == \'link-select\') {\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="itemEdit.router.link"\n (ngModelChange)="getBlocks()"\n nzShowSearch\n >\n @for (item of pages; track $index) {\n <nz-option\n [nzValue]="item.link"\n [nzLabel]="item.name[webBuilderService.projectWorking.language.default]"\n ></nz-option>\n }\n </nz-select>\n }\n @if (itemEdit.router.type == \'mailto:\' || itemEdit.router.type == \'tel:\') {\n <div class="flex flex-col gap-2">\n <span class="m-0">\n Nhập\n {{ itemEdit.router.type == \'mailto:\' ? \'Email\' : \'Số điện thoại\' }}\n liên kết\n </span>\n <input nz-input type="text" class="w-full" [(ngModel)]="itemEdit.router.link" />\n </div>\n }\n\n @if (itemEdit.router.type == \'link-select\' || itemEdit.router.type == \'link-input\') {\n <div class="flex flex-col">\n <div>Hành động khi nhấn</div>\n <nz-select class="mb-2" style="width: 100%" [(ngModel)]="itemEdit.router.click_type">\n @for (item of clickActionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (itemEdit.router.click_type == \'scroll_to_block\') {\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="itemEdit.router.id_block"\n nzPlaceHolder="Chọn khối"\n >\n @for (item of blocks; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n\n <div>Khoảng cách chừa ra để tránh menu cố định</div>\n <nz-input-number\n style="width: 100%"\n [(ngModel)]="itemEdit.router.scroll_distance"\n nzMin="0"\n nzMax="200"\n />\n }\n }\n} @else if (data.type == \'object_text_repeat\') {\n \x3c!-- NỘI DUNG --\x3e\n <div class="flex flex-col mb-1">\n <p class="m-0 text-tiny">{{ \'Nội dung\' }}</p>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n name="Nội dung"\n id="content"\n [(ngModel)]="itemEdit.content[webBuilderService.projectWorking.language.default]"\n ></textarea>\n </div>\n\n \x3c!-- ICON --\x3e\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs mb-1">Sử dụng</p>\n <nz-switch [(ngModel)]="itemEdit.icon.is_icon"></nz-switch>\n </div>\n\n <div class="flex items-center justify-between mb-2">\n <nz-icon style="font-size: 20px" [nzType]="itemEdit.icon[\'icon_name\']" nzTheme="outline" />\n <button\n [disabled]="!itemEdit.icon.is_icon"\n nz-button\n nzType="primary"\n (click)="handleChangeIcon()"\n >\n Thay đổi\n </button>\n </div>\n\n \x3c!-- ROUTER --\x3e\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="itemEdit.router.type"\n (ngModelChange)="getBlocks()"\n >\n @for (item of options; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n\n @if (itemEdit.router.type == \'url\') {\n <input\n class="w-full"\n nz-input\n placeholder="https://viethas.com"\n [(ngModel)]="itemEdit.router.link"\n />\n }\n @if (itemEdit.router.type == \'link-input\') {\n <input\n class="w-full"\n nz-input\n placeholder="gioi-thieu"\n [(ngModel)]="itemEdit.router.link"\n (blur)="getBlocks()"\n />\n }\n @if (itemEdit.router.type == \'link-select\') {\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="itemEdit.router.link"\n (ngModelChange)="getBlocks()"\n nzShowSearch\n >\n @for (item of pages; track $index) {\n <nz-option\n [nzValue]="item.link"\n [nzLabel]="item.name[webBuilderService.projectWorking.language.default]"\n ></nz-option>\n }\n </nz-select>\n }\n @if (itemEdit.router.type == \'mailto:\' || itemEdit.router.type == \'tel:\') {\n <div class="flex flex-col gap-2">\n <span class="m-0">\n Nhập\n {{ itemEdit.router.type == \'mailto:\' ? \'Email\' : \'Số điện thoại\' }}\n liên kết\n </span>\n <input nz-input type="text" class="w-full" [(ngModel)]="itemEdit.router.link" />\n </div>\n }\n\n @if (itemEdit.router.type == \'link-select\' || itemEdit.router.type == \'link-input\') {\n <div class="flex flex-col">\n <div>Hành động khi nhấn</div>\n <nz-select class="mb-2" style="width: 100%" [(ngModel)]="itemEdit.router.click_type">\n @for (item of clickActionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (itemEdit.router.click_type == \'scroll_to_block\') {\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="itemEdit.router.id_block"\n nzPlaceHolder="Chọn khối"\n >\n @for (item of blocks; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n\n <div>Khoảng cách chừa ra để tránh menu cố định</div>\n <nz-input-number\n style="width: 100%"\n [(ngModel)]="itemEdit.router.scroll_distance"\n nzMin="0"\n nzMax="200"\n />\n }\n }\n} @else if (data.type == \'object_image_repeat\') {\n <img\n onerror="src=\'assets/system/imgs/no_img.png\'"\n nz-image\n width="60"\n height="60"\n [nzSrc]="itemEdit.img.src"\n [alt]="itemEdit.img.alt"\n />\n\n <div class="flex flex-col gap-2 mb-2">\n <label for="">Nguồn tải ảnh</label>\n\n <nz-select [(ngModel)]="itemEdit.img.upload_type" nzPlaceHolder="Nguồn hình ảnh hiển thị lên">\n @for (item of optionsUpload; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (itemEdit.img.upload_type == \'device\') {\n <button class="mb-2" style="width: 100%" (click)="fileInput.click()" nz-button>\n <nz-icon nzType="upload" nzTheme="outline" />\n Tải ảnh lên\n </button>\n\n <input\n #fileInput\n type="file"\n id="upload-image"\n (change)="onFileSelected($event)"\n accept="image/*"\n hidden\n />\n }\n\n @if (itemEdit.img.upload_type == \'url\') {\n <div class="flex flex-col gap-2">\n <label for="src">Đường dẫn ảnh</label>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n [(ngModel)]="itemEdit.img.src"\n name="Đường dẫn ảnh"\n ></textarea>\n </div>\n }\n}\n\n<div class="flex items-center justify-end">\n <div class="flex items-center gap-2">\n <button nz-button nzType="default" (click)="onCancel()">Hủy</button>\n <button nz-button nzType="primary" (click)="onSave()">Xác nhận</button>\n </div>\n</div>\n'}]}],ctorParameters:()=>[{type:O.NzModalRef},{type:xn},{type:O.NzModalService},{type:On}]});class kt{webBuilderService;functionService;modal;data;device;categories=[];selectedCategory="all";products=[];loading=!1;sort={};container;keySearch="";dataSearched=[];heightContainer=0;pageIndex=1;total=1;pageSize=10;nzModalData=o(I);dataMap={frame_products:{mainSector:"product",colName:"products",fieldSearch:"name"},frame_news:{mainSector:"news",colName:"news",fieldSearch:"title"}};constructor(e,n,t){this.webBuilderService=e,this.functionService=n,this.modal=t}ngOnInit(){this.data=this.nzModalData.data,this.device=this.nzModalData.device,["frame_products","frame_news"].includes(this.data.type)&&this.getCategories()}ngAfterViewInit(){setTimeout(()=>{this.heightContainer=this.container.nativeElement.offsetHeight-93},0)}getCategories(){this.webBuilderService.getCategories_byFields({main_sectors:{$in:[this.dataMap[this.data.type].mainSector]}},{}).then(e=>{this.categories=structuredClone(e.data)}).catch(e=>{console.error("Error fetching categories:",e)})}onSearch(){this.keySearch?(this.loading=!0,this.webBuilderService.searchList_likeSearch(this.keySearch,this.dataMap[this.data.type].colName,this.dataMap[this.data.type].fieldSearch).then(e=>{console.log("searchList_likeSearch",e),0===e.vcode&&(this.dataSearched=e.data,this.products=e.data,this.total=e.totaldocs,this.products.forEach(e=>{e[this.data._id]||(e[this.data._id]={display:!1,order:1}),e[this.data._id].display=e[this.data._id]?.display||!1,e[this.data._id].order=e[this.data._id]?.order||1}))}).finally(()=>this.loading=!1)):this.getProducts()}getProducts(){if("frame_news"==this.data.type||"frame_products"==this.data.type){this.loading=!0;let e={};"all"!=this.selectedCategory&&(e.id_categorys={$in:[this.selectedCategory]});const n={frame_products:this.webBuilderService.getProducts_byFields.bind(this.webBuilderService),frame_news:this.webBuilderService.getNews_byFields.bind(this.webBuilderService)};(n[this.data.type]||n.frame_products)(e,this.sort,this.pageIndex,this.pageSize).then(e=>{this.products=e.data,this.total=e.totaldocs,this.products.forEach(e=>{e[this.data._id]||(e[this.data._id]={display:!1,order:1}),e[this.data._id].display=e[this.data._id]?.display||!1,e[this.data._id].order=e[this.data._id]?.order||1})}).finally(()=>this.loading=!1)}else if("frame_repeat"==this.data.type){if(0==this.data.objects.length)return void this.functionService.createMessage("error","Bạn chưa thêm vật thể!!");this.products=[];const e=this.data[this.device+"_config"];e.data_list||(e.data_list=[]);for(const n of e.data_list){const e={...n};for(const n of this.data.objects)n.code in e||("object_button_repeat"==n.type&&(e[n.code]={content:{vi:"Button"},icon:{is_icon:!1,icon_name:"search"},router:{type:"none",link:""}}),"object_text_repeat"==n.type&&(e[n.code]={content:{vi:"Văn bản"},icon:{is_icon:!1,icon_name:"search"},router:{type:"none",link:""}}),"object_image_repeat"==n.type&&(e[n.code]={img:{src:"https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg",alt:"Ảnh nền",upload_type:"device"},router:{type:"none",link:""}}));this.products=[...this.products,e]}}}optionRender=e=>{let n="";for(let t=0;t<e.level;t++)n+="-";return n+e.name[this.webBuilderService.projectWorking.language.default]};renderCategories(e){return this.categories.filter(n=>e.id_categorys.includes(n._id)).map(e=>e.name[this.webBuilderService.projectWorking.language.default]).join(", ")||"Trống"}renderRangePrice(e,n){const t=e.variations.reduce((e,t)=>t[n]<e?t[n]:e,1/0),i=e.variations.reduce((e,t)=>t[n]>e?t[n]:e,0);return i!=t?`${t.toLocaleString("vi-VN",{style:"currency",currency:"VND",maximumFractionDigits:0})} - ${i.toLocaleString("vi-VN",{style:"currency",currency:"VND",maximumFractionDigits:0})}`:t.toLocaleString("vi-VN",{style:"currency",currency:"VND",maximumFractionDigits:0})}updateProduct(e,n,t){e[this.data._id][n]=t;const i={frame_products:this.webBuilderService.updateProduct.bind(this.webBuilderService),frame_news:this.webBuilderService.updateNews.bind(this.webBuilderService)};(i[this.data.type]||i.frame_products)(e._id,{[this.data._id]:e[this.data._id]})}onQueryParamsChange(e){const{pageSize:n,pageIndex:t,sort:i,filter:o}=e,a=i.find(e=>null!==e.value),r=a&&a.key||null,s=a&&a.value||null;this.pageIndex=t,this.pageSize=n,"name"==r&&(this.sort={[`name.${this.webBuilderService.projectWorking.language.default}`]:"ascend"==s?1:-1}),r||(this.sort={}),this.keySearch||this.getProducts()}handleSortLocal=(e,n)=>{const t=this.webBuilderService.projectWorking.language.default,i=(e?.name?.[t]??"").toString(),o=(n?.name?.[t]??"").toString();return i.localeCompare(o,void 0,{sensitivity:"base"})};createData(){const e={_id:this.functionService.generateObjectId()};for(const n of this.data.objects)n.code in e||("object_button_repeat"==n.type&&(e[n.code]={content:{vi:"Button"},icon:{is_icon:!1,icon_name:"search"},router:{type:"none",link:""}}),"object_text_repeat"==n.type&&(e[n.code]={content:{vi:"Văn bản"},icon:{is_icon:!1,icon_name:"search"},router:{type:"none",link:""}}),"object_image_repeat"==n.type&&(e[n.code]={img:{src:"https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg",alt:"Ảnh nền",upload_type:"device"},router:{type:"none",link:""}}));this.products=[...this.products,e],this.data[this.device+"_config"].data_list=[...this.products],this.updateConfig()}openModalEdit(e,n){this.modal.create({nzTitle:"Cập nhật dữ liệu",nzContent:Ct,nzWidth:480,nzFooter:null,nzData:{obj:e,item:n}}).afterClose.subscribe(n=>{n&&(this.products=this.products.map(t=>t._id==e._id?n:t),this.data[this.device+"_config"].data_list=[...this.products],this.updateConfig())})}handleDeleteData(e){this.products=this.products.filter(n=>e._id!=n._id),this.data[this.device+"_config"].data_list=[...this.products],this.updateConfig()}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:kt,deps:[{token:xn},{token:On},{token:O.NzModalService}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:kt,isStandalone:!0,selector:"wb-frame-products-admin",viewQueries:[{propertyName:"container",first:!0,predicate:["container"],descendants:!0,read:b}],ngImport:t,template:'<div class="w-full h-full rounded-lg">\n @if (data.type == \'frame_products\') {\n <div class="flex items-center justify-between w-full mb-4">\n <div class="flex items-center">\n <button class="ml-2 rounded-md" nz-button nzType="default" (click)="getProducts()">\n <nz-icon nzType="reload" nzTheme="outline" />\n Tải lại\n </button>\n\n <nz-select\n nz-tooltip="Lọc theo danh mục"\n placeholder="Chọn danh mục"\n style="width: 150px"\n [(ngModel)]="selectedCategory"\n (ngModelChange)="getProducts()"\n class="ml-2"\n >\n <nz-option [nzValue]="\'all\'" [nzLabel]="\'Tất cả\'"></nz-option>\n @for (item of categories; track $index) {\n <nz-option\n nzCustomContent\n [nzValue]="item._id"\n [nzLabel]="item.name[webBuilderService.projectWorking.language.default]"\n >\n {{ optionRender(item) }}\n </nz-option>\n }\n </nz-select>\n </div>\n\n <nz-input-group style="max-width: 300px" [nzSuffix]="suffixIconSearch" nz>\n <input\n type="text"\n [(ngModel)]="keySearch"\n nz-input\n placeholder="Tìm kiếm sản phẩm..."\n (keyup.enter)="onSearch()"\n />\n </nz-input-group>\n <ng-template #suffixIconSearch>\n <nz-icon nzType="search" (click)="onSearch()" />\n </ng-template>\n </div>\n\n <div #container [ngStyle]="{ height: \'calc(100% - 48px)\' }" class="w-full rounded-lg bg-white">\n <nz-table\n #rowSelectionTable\n nzShowSizeChanger\n [nzData]="products"\n [nzScroll]="{ y: heightContainer + \'px\' }"\n [nzPageSize]="pageSize"\n [nzPageIndex]="pageIndex"\n [nzTotal]="total"\n [nzFrontPagination]="keySearch.length ? true : false"\n [nzLoading]="loading"\n (nzQueryParams)="onQueryParamsChange($event)"\n nzSize="small"\n class="admin-table"\n [nzScroll]="{ x: \'1100px\' }"\n >\n <thead>\n <tr>\n <th nzWidth="80px">Hình ảnh</th>\n <th nzWidth="300px" nzColumnKey="name" [nzSortFn]="!keySearch ? true : handleSortLocal">\n Tên sản phẩm\n </th>\n <th nzWidth="200px">Danh mục</th>\n\n <th nzWidth="100px" nzAlign="center">Vị trí hiển thị</th>\n <th nzWidth="100px" nzAlign="center">Ẩn/hiện</th>\n </tr>\n </thead>\n <tbody>\n @for (pro of rowSelectionTable.data; track pro._id) {\n <tr>\n <td>\n <img\n onerror="src=\'assets/system/imgs/no_img.png\'"\n nz-image\n width="40"\n height="40"\n [nzSrc]="pro.variations[0].imgs[0]"\n [alt]="pro.name[webBuilderService.projectWorking.language.default]"\n />\n </td>\n <td>\n {{ pro.name[webBuilderService.projectWorking.language.default] }}\n </td>\n <td>\n {{ renderCategories(pro) }}\n </td>\n\n <td nzAlign="center">\n <nz-input-number\n [(ngModel)]="pro[data._id].order"\n nzMin="0"\n (nzBlur)="updateProduct(pro, \'order\', pro[data._id].order)"\n />\n </td>\n <td nzAlign="center">\n <nz-switch\n [(ngModel)]="pro[data._id].display"\n (ngModelChange)="updateProduct(pro, \'display\', pro[data._id].display)"\n ></nz-switch>\n </td>\n </tr>\n }\n </tbody>\n </nz-table>\n </div>\n } @else if (data.type == \'frame_news\') {\n <div class="flex items-center justify-between w-full mb-4">\n <div class="flex items-center">\n <button class="ml-2 rounded-md" nz-button nzType="default" (click)="getProducts()">\n <nz-icon nzType="reload" nzTheme="outline" />\n Tải lại\n </button>\n\n <nz-select\n nz-tooltip="Lọc theo danh mục"\n placeholder="Chọn danh mục"\n style="width: 150px"\n [(ngModel)]="selectedCategory"\n (ngModelChange)="getProducts()"\n class="ml-2"\n >\n <nz-option [nzValue]="\'all\'" [nzLabel]="\'Tất cả\'"></nz-option>\n @for (item of categories; track $index) {\n <nz-option\n nzCustomContent\n [nzValue]="item._id"\n [nzLabel]="item.name[webBuilderService.projectWorking.language.default]"\n >\n {{ optionRender(item) }}\n </nz-option>\n }\n </nz-select>\n </div>\n\n <nz-input-group style="max-width: 300px" [nzSuffix]="suffixIconSearch" nz>\n <input\n type="text"\n [(ngModel)]="keySearch"\n nz-input\n placeholder="Tìm kiếm tin tức..."\n (keyup.enter)="onSearch()"\n />\n </nz-input-group>\n <ng-template #suffixIconSearch>\n <nz-icon nzType="search" (click)="onSearch()" />\n </ng-template>\n </div>\n\n <div #container [ngStyle]="{ height: \'calc(100% - 48px)\' }" class="w-full rounded-lg bg-white">\n <nz-table\n #rowSelectionTable\n nzShowSizeChanger\n [nzData]="products"\n [nzScroll]="{ y: heightContainer + \'px\' }"\n [nzPageSize]="pageSize"\n [nzPageIndex]="pageIndex"\n [nzTotal]="total"\n [nzFrontPagination]="keySearch.length ? true : false"\n [nzLoading]="loading"\n (nzQueryParams)="onQueryParamsChange($event)"\n nzSize="small"\n class="admin-table"\n [nzScroll]="{ x: \'1100px\' }"\n >\n <thead>\n <tr>\n <th nzWidth="80px">Hình ảnh</th>\n <th nzWidth="300px" nzColumnKey="name" [nzSortFn]="!keySearch ? true : handleSortLocal">\n Tên tin tức\n </th>\n <th nzWidth="200px">Danh mục</th>\n\n <th nzWidth="100px" nzAlign="center">Vị trí hiển thị</th>\n <th nzWidth="100px" nzAlign="center">Ẩn/hiện</th>\n </tr>\n </thead>\n <tbody>\n @for (pro of rowSelectionTable.data; track pro._id) {\n <tr>\n <td>\n <img\n onerror="src=\'assets/system/imgs/no_img.png\'"\n nz-image\n width="40"\n height="40"\n [nzSrc]="pro.imgs[0]"\n [alt]="pro.title[webBuilderService.projectWorking.language.default]"\n />\n </td>\n <td>\n {{ pro.title[webBuilderService.projectWorking.language.default] }}\n </td>\n <td>\n {{ renderCategories(pro) }}\n </td>\n\n <td nzAlign="center">\n <nz-input-number\n [(ngModel)]="pro[data._id].order"\n nzMin="0"\n (nzBlur)="updateProduct(pro, \'order\', pro[data._id].order)"\n />\n </td>\n <td nzAlign="center">\n <nz-switch\n [(ngModel)]="pro[data._id].display"\n (ngModelChange)="updateProduct(pro, \'display\', pro[data._id].display)"\n ></nz-switch>\n </td>\n </tr>\n }\n </tbody>\n </nz-table>\n </div>\n } @else if (data.type == \'frame_repeat\') {\n <div class="flex items-center justify-end w-full mb-4">\n <button class="ml-2 rounded-md" nz-button nzType="primary" (click)="createData()">\n <nz-icon nzType="plus" nzTheme="outline" />\n Thêm dữ liệu\n </button>\n </div>\n\n <div #container [ngStyle]="{ height: \'calc(100% - 48px)\' }" class="w-full rounded-lg bg-white">\n <nz-table\n #rowSelectionTable\n [nzData]="products"\n [nzScroll]="{ y: heightContainer + \'px\' }"\n [nzPageSize]="32"\n [nzLoading]="loading"\n (nzQueryParams)="onQueryParamsChange($event)"\n [nzShowPagination]="false"\n nzSize="small"\n class="admin-table"\n >\n <thead>\n <tr>\n <th nzWidth="80px">STT</th>\n <th>Đối tượng</th>\n <th nzWidth="100px" nzAlign="center">Thao tác</th>\n </tr>\n </thead>\n <tbody>\n @for (pro of rowSelectionTable.data; track pro._id; let idx = $index) {\n <tr>\n <td>\n {{ idx + 1 }}\n </td>\n <td>\n @for (obj of data.objects; track $index) {\n <p (click)="openModalEdit(obj, pro)" class="list-item">\n {{ obj.name }}\n <nz-icon nzType="edit" class="cursor-pointer" nzTheme="outline" />\n </p>\n }\n </td>\n <td nzAlign="center">\n <button\n nz-button\n nzType="link"\n nzDanger\n nz-popconfirm\n nzPopconfirmTitle="Are you sure delete this task?"\n (nzOnConfirm)="handleDeleteData(pro)"\n >\n Xóa\n </button>\n </td>\n </tr>\n }\n </tbody>\n </nz-table>\n </div>\n }\n</div>\n',styles:[".list-item{cursor:pointer;padding:8px 4px}.list-item:hover{background-color:#80808016}\n"],dependencies:[{kind:"ngmodule",type:sn},{kind:"component",type:rn.NzTableComponent,selector:"nz-table",inputs:["nzTableLayout","nzShowTotal","nzItemRender","nzTitle","nzFooter","nzNoResult","nzPageSizeOptions","nzVirtualItemSize","nzVirtualMaxBufferPx","nzVirtualMinBufferPx","nzVirtualForTrackBy","nzLoadingDelay","nzPageIndex","nzPageSize","nzTotal","nzWidthConfig","nzData","nzCustomColumn","nzPaginationPosition","nzScroll","noDataVirtualHeight","nzPaginationType","nzFrontPagination","nzTemplateMode","nzShowPagination","nzLoading","nzOuterBordered","nzLoadingIndicator","nzBordered","nzSize","nzShowSizeChanger","nzHideOnSinglePage","nzShowQuickJumper","nzSimple"],outputs:["nzPageSizeChange","nzPageIndexChange","nzQueryParams","nzCurrentPageDataChange","nzCustomColumnChange"],exportAs:["nzTable"]},{kind:"component",type:rn.NzThAddOnComponent,selector:"th[nzColumnKey], th[nzSortFn], th[nzSortOrder], th[nzFilters], th[nzShowSort], th[nzShowFilter], th[nzCustomFilter]",inputs:["nzColumnKey","nzFilterMultiple","nzSortOrder","nzSortPriority","nzSortDirections","nzFilters","nzSortFn","nzFilterFn","nzShowSort","nzShowFilter","nzCustomFilter"],outputs:["nzCheckedChange","nzSortOrderChange","nzFilterChange"]},{kind:"directive",type:rn.NzTableCellDirective,selector:"th:not(.nz-disable-th), td:not(.nz-disable-td)"},{kind:"directive",type:rn.NzThMeasureDirective,selector:"th",inputs:["nzWidth","colspan","colSpan","rowspan","rowSpan"]},{kind:"component",type:rn.NzTheadComponent,selector:"thead:not(.ant-table-thead)",outputs:["nzSortOrderChange"]},{kind:"component",type:rn.NzTbodyComponent,selector:"tbody"},{kind:"directive",type:rn.NzTrDirective,selector:"tr:not([nz-table-measure-row]):not([nzExpand]):not([nz-table-fixed-row])"},{kind:"directive",type:rn.NzCellAlignDirective,selector:"th[nzAlign],td[nzAlign]",inputs:["nzAlign"]},{kind:"ngmodule",type:G},{kind:"directive",type:H.NzInputDirective,selector:"input[nz-input],textarea[nz-input]",inputs:["nzBorderless","nzVariant","nzSize","nzStepperless","nzStatus","disabled","readonly"],exportAs:["nzInput"]},{kind:"component",type:H.NzInputGroupComponent,selector:"nz-input-group",inputs:["nzAddOnBeforeIcon","nzAddOnAfterIcon","nzPrefixIcon","nzSuffixIcon","nzAddOnBefore","nzAddOnAfter","nzPrefix","nzStatus","nzSuffix","nzSize","nzSearch"],exportAs:["nzInputGroup"]},{kind:"directive",type:H.NzInputGroupWhitSuffixOrPrefixDirective,selector:"nz-input-group[nzSuffix], nz-input-group[nzPrefix]"},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]},{kind:"ngmodule",type:se},{kind:"component",type:re.NzSwitchComponent,selector:"nz-switch",inputs:["nzLoading","nzDisabled","nzControl","nzCheckedChildren","nzUnCheckedChildren","nzSize","nzId"],exportAs:["nzSwitch"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"ngmodule",type:cn},{kind:"directive",type:ln.NzImageDirective,selector:"img[nz-image]",inputs:["nzSrc","nzSrcset","nzDisablePreview","nzFallback","nzPlaceholder","nzScaleStep"],exportAs:["nzImage"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"ngmodule",type:pn},{kind:"directive",type:dn.NzPopconfirmDirective,selector:"[nz-popconfirm]",inputs:["nzPopconfirmArrowPointAtCenter","nzPopconfirmTitle","nzPopconfirmTitleContext","nz-popconfirm","nzPopconfirmTrigger","nzPopconfirmPlacement","nzPopconfirmOrigin","nzPopconfirmMouseEnterDelay","nzPopconfirmMouseLeaveDelay","nzPopconfirmOverlayClassName","nzPopconfirmOverlayStyle","nzPopconfirmVisible","nzBeforeConfirm","nzIcon","nzCondition","nzPopconfirmShowArrow","nzPopconfirmBackdrop","nzAutofocus","nzOkText","nzOkType","nzCancelText","nzOkButtonProps","nzCancelButtonProps","nzOkDisabled","nzOkDanger"],outputs:["nzPopconfirmVisibleChange","nzOnCancel","nzOnConfirm"],exportAs:["nzPopconfirm"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:kt,decorators:[{type:l,args:[{selector:"wb-frame-products-admin",imports:[sn,G,X,se,ie,B,k,cn,j,Z,pn],template:'<div class="w-full h-full rounded-lg">\n @if (data.type == \'frame_products\') {\n <div class="flex items-center justify-between w-full mb-4">\n <div class="flex items-center">\n <button class="ml-2 rounded-md" nz-button nzType="default" (click)="getProducts()">\n <nz-icon nzType="reload" nzTheme="outline" />\n Tải lại\n </button>\n\n <nz-select\n nz-tooltip="Lọc theo danh mục"\n placeholder="Chọn danh mục"\n style="width: 150px"\n [(ngModel)]="selectedCategory"\n (ngModelChange)="getProducts()"\n class="ml-2"\n >\n <nz-option [nzValue]="\'all\'" [nzLabel]="\'Tất cả\'"></nz-option>\n @for (item of categories; track $index) {\n <nz-option\n nzCustomContent\n [nzValue]="item._id"\n [nzLabel]="item.name[webBuilderService.projectWorking.language.default]"\n >\n {{ optionRender(item) }}\n </nz-option>\n }\n </nz-select>\n </div>\n\n <nz-input-group style="max-width: 300px" [nzSuffix]="suffixIconSearch" nz>\n <input\n type="text"\n [(ngModel)]="keySearch"\n nz-input\n placeholder="Tìm kiếm sản phẩm..."\n (keyup.enter)="onSearch()"\n />\n </nz-input-group>\n <ng-template #suffixIconSearch>\n <nz-icon nzType="search" (click)="onSearch()" />\n </ng-template>\n </div>\n\n <div #container [ngStyle]="{ height: \'calc(100% - 48px)\' }" class="w-full rounded-lg bg-white">\n <nz-table\n #rowSelectionTable\n nzShowSizeChanger\n [nzData]="products"\n [nzScroll]="{ y: heightContainer + \'px\' }"\n [nzPageSize]="pageSize"\n [nzPageIndex]="pageIndex"\n [nzTotal]="total"\n [nzFrontPagination]="keySearch.length ? true : false"\n [nzLoading]="loading"\n (nzQueryParams)="onQueryParamsChange($event)"\n nzSize="small"\n class="admin-table"\n [nzScroll]="{ x: \'1100px\' }"\n >\n <thead>\n <tr>\n <th nzWidth="80px">Hình ảnh</th>\n <th nzWidth="300px" nzColumnKey="name" [nzSortFn]="!keySearch ? true : handleSortLocal">\n Tên sản phẩm\n </th>\n <th nzWidth="200px">Danh mục</th>\n\n <th nzWidth="100px" nzAlign="center">Vị trí hiển thị</th>\n <th nzWidth="100px" nzAlign="center">Ẩn/hiện</th>\n </tr>\n </thead>\n <tbody>\n @for (pro of rowSelectionTable.data; track pro._id) {\n <tr>\n <td>\n <img\n onerror="src=\'assets/system/imgs/no_img.png\'"\n nz-image\n width="40"\n height="40"\n [nzSrc]="pro.variations[0].imgs[0]"\n [alt]="pro.name[webBuilderService.projectWorking.language.default]"\n />\n </td>\n <td>\n {{ pro.name[webBuilderService.projectWorking.language.default] }}\n </td>\n <td>\n {{ renderCategories(pro) }}\n </td>\n\n <td nzAlign="center">\n <nz-input-number\n [(ngModel)]="pro[data._id].order"\n nzMin="0"\n (nzBlur)="updateProduct(pro, \'order\', pro[data._id].order)"\n />\n </td>\n <td nzAlign="center">\n <nz-switch\n [(ngModel)]="pro[data._id].display"\n (ngModelChange)="updateProduct(pro, \'display\', pro[data._id].display)"\n ></nz-switch>\n </td>\n </tr>\n }\n </tbody>\n </nz-table>\n </div>\n } @else if (data.type == \'frame_news\') {\n <div class="flex items-center justify-between w-full mb-4">\n <div class="flex items-center">\n <button class="ml-2 rounded-md" nz-button nzType="default" (click)="getProducts()">\n <nz-icon nzType="reload" nzTheme="outline" />\n Tải lại\n </button>\n\n <nz-select\n nz-tooltip="Lọc theo danh mục"\n placeholder="Chọn danh mục"\n style="width: 150px"\n [(ngModel)]="selectedCategory"\n (ngModelChange)="getProducts()"\n class="ml-2"\n >\n <nz-option [nzValue]="\'all\'" [nzLabel]="\'Tất cả\'"></nz-option>\n @for (item of categories; track $index) {\n <nz-option\n nzCustomContent\n [nzValue]="item._id"\n [nzLabel]="item.name[webBuilderService.projectWorking.language.default]"\n >\n {{ optionRender(item) }}\n </nz-option>\n }\n </nz-select>\n </div>\n\n <nz-input-group style="max-width: 300px" [nzSuffix]="suffixIconSearch" nz>\n <input\n type="text"\n [(ngModel)]="keySearch"\n nz-input\n placeholder="Tìm kiếm tin tức..."\n (keyup.enter)="onSearch()"\n />\n </nz-input-group>\n <ng-template #suffixIconSearch>\n <nz-icon nzType="search" (click)="onSearch()" />\n </ng-template>\n </div>\n\n <div #container [ngStyle]="{ height: \'calc(100% - 48px)\' }" class="w-full rounded-lg bg-white">\n <nz-table\n #rowSelectionTable\n nzShowSizeChanger\n [nzData]="products"\n [nzScroll]="{ y: heightContainer + \'px\' }"\n [nzPageSize]="pageSize"\n [nzPageIndex]="pageIndex"\n [nzTotal]="total"\n [nzFrontPagination]="keySearch.length ? true : false"\n [nzLoading]="loading"\n (nzQueryParams)="onQueryParamsChange($event)"\n nzSize="small"\n class="admin-table"\n [nzScroll]="{ x: \'1100px\' }"\n >\n <thead>\n <tr>\n <th nzWidth="80px">Hình ảnh</th>\n <th nzWidth="300px" nzColumnKey="name" [nzSortFn]="!keySearch ? true : handleSortLocal">\n Tên tin tức\n </th>\n <th nzWidth="200px">Danh mục</th>\n\n <th nzWidth="100px" nzAlign="center">Vị trí hiển thị</th>\n <th nzWidth="100px" nzAlign="center">Ẩn/hiện</th>\n </tr>\n </thead>\n <tbody>\n @for (pro of rowSelectionTable.data; track pro._id) {\n <tr>\n <td>\n <img\n onerror="src=\'assets/system/imgs/no_img.png\'"\n nz-image\n width="40"\n height="40"\n [nzSrc]="pro.imgs[0]"\n [alt]="pro.title[webBuilderService.projectWorking.language.default]"\n />\n </td>\n <td>\n {{ pro.title[webBuilderService.projectWorking.language.default] }}\n </td>\n <td>\n {{ renderCategories(pro) }}\n </td>\n\n <td nzAlign="center">\n <nz-input-number\n [(ngModel)]="pro[data._id].order"\n nzMin="0"\n (nzBlur)="updateProduct(pro, \'order\', pro[data._id].order)"\n />\n </td>\n <td nzAlign="center">\n <nz-switch\n [(ngModel)]="pro[data._id].display"\n (ngModelChange)="updateProduct(pro, \'display\', pro[data._id].display)"\n ></nz-switch>\n </td>\n </tr>\n }\n </tbody>\n </nz-table>\n </div>\n } @else if (data.type == \'frame_repeat\') {\n <div class="flex items-center justify-end w-full mb-4">\n <button class="ml-2 rounded-md" nz-button nzType="primary" (click)="createData()">\n <nz-icon nzType="plus" nzTheme="outline" />\n Thêm dữ liệu\n </button>\n </div>\n\n <div #container [ngStyle]="{ height: \'calc(100% - 48px)\' }" class="w-full rounded-lg bg-white">\n <nz-table\n #rowSelectionTable\n [nzData]="products"\n [nzScroll]="{ y: heightContainer + \'px\' }"\n [nzPageSize]="32"\n [nzLoading]="loading"\n (nzQueryParams)="onQueryParamsChange($event)"\n [nzShowPagination]="false"\n nzSize="small"\n class="admin-table"\n >\n <thead>\n <tr>\n <th nzWidth="80px">STT</th>\n <th>Đối tượng</th>\n <th nzWidth="100px" nzAlign="center">Thao tác</th>\n </tr>\n </thead>\n <tbody>\n @for (pro of rowSelectionTable.data; track pro._id; let idx = $index) {\n <tr>\n <td>\n {{ idx + 1 }}\n </td>\n <td>\n @for (obj of data.objects; track $index) {\n <p (click)="openModalEdit(obj, pro)" class="list-item">\n {{ obj.name }}\n <nz-icon nzType="edit" class="cursor-pointer" nzTheme="outline" />\n </p>\n }\n </td>\n <td nzAlign="center">\n <button\n nz-button\n nzType="link"\n nzDanger\n nz-popconfirm\n nzPopconfirmTitle="Are you sure delete this task?"\n (nzOnConfirm)="handleDeleteData(pro)"\n >\n Xóa\n </button>\n </td>\n </tr>\n }\n </tbody>\n </nz-table>\n </div>\n }\n</div>\n',styles:[".list-item{cursor:pointer;padding:8px 4px}.list-item:hover{background-color:#80808016}\n"]}]}],ctorParameters:()=>[{type:xn},{type:On},{type:O.NzModalService}],propDecorators:{container:[{type:p,args:["container",{read:b}]}]}});class St{modal;data;device;constructor(e){this.modal=e}ngOnInit(){}handleEditContent(){this.modal.create({nzTitle:"Cập nhật danh sách sản phẩm",nzContent:kt,nzWidth:"70vw",nzClassName:"modal-user",nzFooter:null,nzData:{data:this.data,device:this.device}}).afterClose.subscribe(e=>{})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:St,deps:[{token:O.NzModalService}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:St,isStandalone:!0,selector:"wb-frame-content-config",inputs:{data:"data",device:"device"},ngImport:t,template:'<div class="frame-content-config p-2">\n <button nz-button (click)="handleEditContent()" nzType="primary" style="width: 100%">\n Chỉnh sửa nội dung\n </button>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:St,decorators:[{type:l,args:[{selector:"wb-frame-content-config",imports:[X],template:'<div class="frame-content-config p-2">\n <button nz-button (click)="handleEditContent()" nzType="primary" style="width: 100%">\n Chỉnh sửa nội dung\n </button>\n</div>\n'}]}],ctorParameters:()=>[{type:O.NzModalService}],propDecorators:{data:[{type:s}],device:[{type:s}]}});class Mt{webBuilderService;data;device;configHeader="";configFooter="";configChatBoxs="";lengthFreeBlocks=0;constructor(e){this.webBuilderService=e}ngOnInit(){}onChangeFreeBlock(e="header",n){const{currentPage:t,device:i,freeblocks:o}=this.webBuilderService,{id_header:a,id_footer:r}=t[i+"_config"];if("header"===e)if(n){const e=o.find(e=>e._id==n);this.webBuilderService.header=e||null}else this.webBuilderService.header=null;else if("footer"===e)if(n){const e=o.find(e=>e._id==n);this.webBuilderService.footer=e||null}else this.webBuilderService.footer=null;else"chatboxs"===e&&(this.webBuilderService.chatboxs=this.webBuilderService.freeblocks.filter(e=>n.includes(e._id)));this.updateConfig()}updateConfig(){this.webBuilderService.updatePage(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}get headerOptions(){return this.webBuilderService.freeblocks.filter(e=>"block_header"===e.type)}get footerOptions(){return this.webBuilderService.freeblocks.filter(e=>"block_footer"===e.type)}get chatboxOptions(){return this.webBuilderService.freeblocks.filter(e=>"block_chatbox"===e.type)}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Mt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Mt,isStandalone:!0,selector:"wb-freeblock-config",inputs:{data:"data",device:"device",configHeader:"configHeader",configFooter:"configFooter",configChatBoxs:"configChatBoxs",lengthFreeBlocks:"lengthFreeBlocks"},ngImport:t,template:'<div class="freeblock-config p-2">\n <div class="flex flex-col gap-2">\n <p class="text-xs m-0">Chọn Header</p>\n\n <nz-select\n class="w-full mb-2"\n nzPlaceHolder="Chọn header"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configHeader]"\n (ngModelChange)="onChangeFreeBlock(\'header\', $event)"\n nzAllowClear\n >\n @for (item of headerOptions; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex flex-col gap-2">\n <p class="text-xs m-0">Chọn Footer</p>\n\n <nz-select\n class="w-full mb-2"\n nzPlaceHolder="Chọn footer"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configFooter]"\n (ngModelChange)="onChangeFreeBlock(\'footer\', $event)"\n nzAllowClear\n >\n @for (item of footerOptions; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex flex-col gap-2">\n <p class="text-xs m-0">Chọn hộp thoại chat</p>\n\n <nz-select\n class="w-full mb-2"\n nzPlaceHolder="Chọn chatbox"\n nzMode="multiple"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configChatBoxs]"\n (ngModelChange)="onChangeFreeBlock(\'chatboxs\', $event)"\n nzAllowClear\n >\n @for (item of chatboxOptions; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n </div>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Mt,decorators:[{type:l,args:[{selector:"wb-freeblock-config",imports:[ie,B],template:'<div class="freeblock-config p-2">\n <div class="flex flex-col gap-2">\n <p class="text-xs m-0">Chọn Header</p>\n\n <nz-select\n class="w-full mb-2"\n nzPlaceHolder="Chọn header"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configHeader]"\n (ngModelChange)="onChangeFreeBlock(\'header\', $event)"\n nzAllowClear\n >\n @for (item of headerOptions; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex flex-col gap-2">\n <p class="text-xs m-0">Chọn Footer</p>\n\n <nz-select\n class="w-full mb-2"\n nzPlaceHolder="Chọn footer"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configFooter]"\n (ngModelChange)="onChangeFreeBlock(\'footer\', $event)"\n nzAllowClear\n >\n @for (item of footerOptions; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex flex-col gap-2">\n <p class="text-xs m-0">Chọn hộp thoại chat</p>\n\n <nz-select\n class="w-full mb-2"\n nzPlaceHolder="Chọn chatbox"\n nzMode="multiple"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configChatBoxs]"\n (ngModelChange)="onChangeFreeBlock(\'chatboxs\', $event)"\n nzAllowClear\n >\n @for (item of chatboxOptions; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n </div>\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],configHeader:[{type:s}],configFooter:[{type:s}],configChatBoxs:[{type:s}],lengthFreeBlocks:[{type:s}]}});class Bt{webBuilderService;data;device;configGrid="";classGrid="";constructor(e){this.webBuilderService=e}ngOnInit(){}updateClassAndConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"],[this.device+"_config"]:this.data[this.device+"_config"]})}onChangeGrid(){const{cols:e,rows:n,gap:t}=this.data[this.device+"_config"][this.configGrid];this.data[this.device+"_class"][this.classGrid]["--grid-template-columns"]=`repeat(${e}, 1fr)`,this.data[this.device+"_class"][this.classGrid]["--grid-template-rows"]=`repeat(${n}, 1fr)`,this.data[this.device+"_class"][this.classGrid]["--grid-auto-rows"]="1fr",this.data[this.device+"_class"][this.classGrid]["--gap"]=`${t}px`,this.webBuilderService.notifyChange({name:"change-grid",_id:this.data._id})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Bt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:Bt,isStandalone:!0,selector:"wb-grid-config",inputs:{data:"data",device:"device",configGrid:"configGrid",classGrid:"classGrid"},ngImport:t,template:'<div class="grid-config p-2">\n <div class="flex flex-col gap-2">\n <label for="cols">Số cột</label>\n <nz-input-number\n id="cols"\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configGrid].cols"\n (ngModelChange)="onChangeGrid()"\n (nzBlur)="updateClassAndConfig()"\n nzMin="1"\n nzMax="12"\n nzStep="1"\n nzPlaceHolder="Số cột (1-7)"\n />\n </div>\n\n <div class="flex flex-col gap-2">\n <label for="rows">Số hàng</label>\n\n <nz-input-number\n id="rows"\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configGrid].rows"\n (ngModelChange)="onChangeGrid()"\n (nzBlur)="updateClassAndConfig()"\n nzMin="1"\n nzMax="12"\n nzStep="1"\n nzPlaceHolder="Số hàng (1-7)"\n />\n </div>\n\n <div class="flex flex-col gap-2">\n <label for="gap">Khoảng cách</label>\n\n <nz-input-number\n id="gap"\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configGrid].gap"\n (ngModelChange)="onChangeGrid()"\n (nzBlur)="updateClassAndConfig()"\n nzMin="0"\n nzMax="30"\n nzStep="1"\n nzPlaceHolder="Khoảng cách (1-30)"\n />\n </div>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Bt,decorators:[{type:l,args:[{selector:"wb-grid-config",imports:[B,Z],template:'<div class="grid-config p-2">\n <div class="flex flex-col gap-2">\n <label for="cols">Số cột</label>\n <nz-input-number\n id="cols"\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configGrid].cols"\n (ngModelChange)="onChangeGrid()"\n (nzBlur)="updateClassAndConfig()"\n nzMin="1"\n nzMax="12"\n nzStep="1"\n nzPlaceHolder="Số cột (1-7)"\n />\n </div>\n\n <div class="flex flex-col gap-2">\n <label for="rows">Số hàng</label>\n\n <nz-input-number\n id="rows"\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configGrid].rows"\n (ngModelChange)="onChangeGrid()"\n (nzBlur)="updateClassAndConfig()"\n nzMin="1"\n nzMax="12"\n nzStep="1"\n nzPlaceHolder="Số hàng (1-7)"\n />\n </div>\n\n <div class="flex flex-col gap-2">\n <label for="gap">Khoảng cách</label>\n\n <nz-input-number\n id="gap"\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configGrid].gap"\n (ngModelChange)="onChangeGrid()"\n (nzBlur)="updateClassAndConfig()"\n nzMin="0"\n nzMax="30"\n nzStep="1"\n nzPlaceHolder="Khoảng cách (1-30)"\n />\n </div>\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],configGrid:[{type:s}],classGrid:[{type:s}]}});class Ot{webBuilderService;data;device;classCursor="";classOverflowY="";classFlexDirection="";classGap="";configDragMode="drag_mode";configTypeDisplay="";configEnableZoom="";devices=[{label:"Ẩn ở máy tính",value:"desktop",key:"desktop_hidden"},{label:"Ẩn ở máy tính bảng ngang",value:"tablet_landscape",key:"tablet_landscape_hidden"},{label:"Ẩn ở máy tính bảng dọc",value:"tablet_portrait",key:"tablet_portrait_hidden"},{label:"Ẩn ở điện thoại ngang",value:"mobile_landscape",key:"mobile_landscape_hidden"},{label:"Ẩn ở điện thoại dọc",value:"mobile_portrait",key:"mobile_portrait_hidden"}];cursorOptions=[{label:"Alias",value:"alias"},{label:"All Scroll",value:"all-scroll"},{label:"Tự động",value:"auto"},{label:"Ô (Cell)",value:"cell"},{label:"Thay đổi cột",value:"col-resize"},{label:"Menu ngữ cảnh",value:"context-menu"},{label:"Sao chép",value:"copy"},{label:"Crosshair",value:"crosshair"},{label:"Mặc định",value:"default"},{label:"Kéo sang phải (E)",value:"e-resize"},{label:"Kéo ngang (EW)",value:"ew-resize"},{label:"Nắm bắt",value:"grab"},{label:"Đang nắm bắt",value:"grabbing"},{label:"Trợ giúp",value:"help"},{label:"Di chuyển",value:"move"},{label:"Kéo lên (N)",value:"n-resize"},{label:"Kéo lên phải (NE)",value:"ne-resize"},{label:"Kéo NE–SW",value:"nesw-resize"},{label:"Kéo dọc (NS)",value:"ns-resize"},{label:"Kéo lên trái (NW)",value:"nw-resize"},{label:"Kéo NW–SE",value:"nwse-resize"},{label:"Không thả (No Drop)",value:"no-drop"},{label:"Ẩn (None)",value:"none"},{label:"Không cho phép",value:"not-allowed"},{label:"Bàn tay (Pointer)",value:"pointer"},{label:"Đang tải (Progress)",value:"progress"},{label:"Thay đổi hàng",value:"row-resize"},{label:"Kéo xuống (S)",value:"s-resize"},{label:"Kéo xuống phải (SE)",value:"se-resize"},{label:"Kéo xuống trái (SW)",value:"sw-resize"},{label:"Văn bản",value:"text"},{label:"URL tùy chỉnh",value:"url"},{label:"Kéo sang trái (W)",value:"w-resize"},{label:"Chờ (Wait)",value:"wait"},{label:"Phóng to (Zoom In)",value:"zoom-in"},{label:"Thu nhỏ (Zoom Out)",value:"zoom-out"}];dragOptions=[{label:"Absolute",value:"absolute"},{label:"Margin",value:"margin"}];flexDirectionOptions=[{label:"Cột",value:"column"},{label:"Cột ngược",value:"column-reverse"},{label:"Hàng",value:"row"},{label:"Hàng ngược",value:"row-reverse"}];displayTypeOptions=[{label:"Ngang",value:"horizontal"},{label:"Dọc",value:"vertical"}];overflowOptions=[{label:"Hiển thị",value:"visible"},{label:"Ẩn",value:"hidden"},{label:"Cuộn",value:"scroll"},{label:"Tự động",value:"auto"}];constructor(e){this.webBuilderService=e}ngOnInit(){}ngOnChanges(e){this.classCursor&&!this.data[this.device+"_class"][this.classCursor]["--cursor"]&&(this.data[this.device+"_class"][this.classCursor]["--cursor"]="auto")}updateClass(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}updateHidden(e,n){this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[e]:n}):this.webBuilderService.updateObject(this.data._id,{[e]:n})}onChangedirection(){const e=this.data[this.device+"_class"][this.data.resize_field][this.webBuilderService.resizeGroup[this.data.resize_group].width],n=this.data[this.device+"_class"][this.data.resize_field][this.webBuilderService.resizeGroup[this.data.resize_group].height];this.data[this.device+"_class"][this.data.resize_field][this.webBuilderService.resizeGroup[this.data.resize_group].width]=n,this.data[this.device+"_class"][this.data.resize_field][this.webBuilderService.resizeGroup[this.data.resize_group].height]=e,this.updateConfig()}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Ot,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Ot,isStandalone:!0,selector:"wb-hide-show-config",inputs:{data:"data",device:"device",classCursor:"classCursor",classOverflowY:"classOverflowY",classFlexDirection:"classFlexDirection",classGap:"classGap",configDragMode:"configDragMode",configTypeDisplay:"configTypeDisplay",configEnableZoom:"configEnableZoom"},usesOnChanges:!0,ngImport:t,template:'<div class="hide-show-config flex flex-col gap-2 p-2">\n @for (item of devices; track $index) {\n @if (webBuilderService.device != item.value) {\n <div class="flex justify-between items-center">\n <p class="mb-0">{{ item.label }}</p>\n <nz-switch\n [(ngModel)]="data[item.key]"\n (ngModelChange)="updateHidden(item.key, $event)"\n ></nz-switch>\n </div>\n }\n }\n\n @if (configDragMode && data.component != \'WbBlockBlank\') {\n <div class="flex flex-col gap-2 mb-2">\n <span class="text-xs">Kiểu kéo thả</span>\n <nz-select\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configDragMode]"\n nzPlaceHolder="Kiểu kéo thả"\n (ngModelChange)="updateConfig()"\n >\n @for (item of dragOptions; track item.value) {\n <nz-option nzCustomContent [nzValue]="item.value" [nzLabel]="item.label">\n <div [style.cursor]="item.value">\n {{ item.label }}\n </div>\n </nz-option>\n }\n </nz-select>\n </div>\n }\n\n @if (device == \'desktop\' && classCursor) {\n <div class="flex flex-col gap-2 mb-2">\n <span class="text-xs">Kiểu con trỏ</span>\n <nz-select\n class="w-full"\n [(ngModel)]="data[device + \'_class\'][classCursor][\'--cursor\']"\n nzPlaceHolder="Chọn kiểu con trỏ"\n nzShowSearch\n (ngModelChange)="updateClass()"\n >\n @for (item of cursorOptions; track item.value) {\n <nz-option nzCustomContent [nzValue]="item.value" [nzLabel]="item.value">\n <div [style.cursor]="item.value">\n {{ item.value }}\n </div>\n </nz-option>\n }\n </nz-select>\n </div>\n }\n\n \x3c!-- Tràn viền --\x3e\n @if (classOverflowY) {\n <div class="flex flex-col gap-2">\n <span class="text-xs">Tràn viền</span>\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_class\'][classOverflowY][\'--overflow-y\']"\n (ngModelChange)="updateClass()"\n >\n @for (item of overflowOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n }\n\n @if (classFlexDirection) {\n <div class="flex flex-col gap-2">\n <span class="text-xs">Hướng hiển thị</span>\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_class\'][classFlexDirection][\'--flex-direction\']"\n (ngModelChange)="updateClass()"\n >\n @for (item of flexDirectionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n }\n\n @if (classGap) {\n \x3c!-- Khoảng cách --\x3e\n <div class="flex flex-col gap-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng cách</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n @if (configEnableZoom) {\n <div class="flex justify-between items-center">\n <p class="text-xs mb-1">Hiển thị zoom</p>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'][configEnableZoom]"\n (ngModelChange)="updateConfig()"\n />\n </div>\n }\n\n \x3c!-- Line component --\x3e\n @if (data.type == \'object_line\') {\n <div class="flex flex-col gap-2 mb-2">\n <span class="text-xs">Hướng hiển thị (ngang/dọc)</span>\n <nz-select\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configTypeDisplay]"\n nzPlaceHolder="Hướng hiển thị (ngang/dọc)"\n (ngModelChange)="onChangedirection()"\n >\n @for (item of displayTypeOptions; track item.value) {\n <nz-option nzCustomContent [nzValue]="item.value" [nzLabel]="item.label">\n <div [style.cursor]="item.value">\n {{ item.label }}\n </div>\n </nz-option>\n }\n </nz-select>\n </div>\n }\n\n @if (data.type == \'object_product_button_add_to_cart\') {\n <div class="flex items-center gap-2">\n Bắt buộc đăng nhập:\n <nz-switch\n [(ngModel)]="data[device + \'_config\'].need_to_login"\n (ngModelChange)="updateConfig()"\n ></nz-switch>\n </div>\n }\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:se},{kind:"component",type:re.NzSwitchComponent,selector:"nz-switch",inputs:["nzLoading","nzDisabled","nzControl","nzCheckedChildren","nzUnCheckedChildren","nzSize","nzId"],exportAs:["nzSwitch"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"ngmodule",type:ne},{kind:"component",type:ee.NzSliderComponent,selector:"nz-slider",inputs:["nzDisabled","nzDots","nzIncluded","nzRange","nzVertical","nzReverse","nzDefaultValue","nzMarks","nzMax","nzMin","nzStep","nzTooltipVisible","nzTooltipPlacement","nzTipFormatter"],outputs:["nzOnAfterChange"],exportAs:["nzSlider"]},{kind:"pipe",type:ct,name:"wbnumber"}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Ot,decorators:[{type:l,args:[{selector:"wb-hide-show-config",imports:[se,B,ie,Z,ne,ct],template:'<div class="hide-show-config flex flex-col gap-2 p-2">\n @for (item of devices; track $index) {\n @if (webBuilderService.device != item.value) {\n <div class="flex justify-between items-center">\n <p class="mb-0">{{ item.label }}</p>\n <nz-switch\n [(ngModel)]="data[item.key]"\n (ngModelChange)="updateHidden(item.key, $event)"\n ></nz-switch>\n </div>\n }\n }\n\n @if (configDragMode && data.component != \'WbBlockBlank\') {\n <div class="flex flex-col gap-2 mb-2">\n <span class="text-xs">Kiểu kéo thả</span>\n <nz-select\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configDragMode]"\n nzPlaceHolder="Kiểu kéo thả"\n (ngModelChange)="updateConfig()"\n >\n @for (item of dragOptions; track item.value) {\n <nz-option nzCustomContent [nzValue]="item.value" [nzLabel]="item.label">\n <div [style.cursor]="item.value">\n {{ item.label }}\n </div>\n </nz-option>\n }\n </nz-select>\n </div>\n }\n\n @if (device == \'desktop\' && classCursor) {\n <div class="flex flex-col gap-2 mb-2">\n <span class="text-xs">Kiểu con trỏ</span>\n <nz-select\n class="w-full"\n [(ngModel)]="data[device + \'_class\'][classCursor][\'--cursor\']"\n nzPlaceHolder="Chọn kiểu con trỏ"\n nzShowSearch\n (ngModelChange)="updateClass()"\n >\n @for (item of cursorOptions; track item.value) {\n <nz-option nzCustomContent [nzValue]="item.value" [nzLabel]="item.value">\n <div [style.cursor]="item.value">\n {{ item.value }}\n </div>\n </nz-option>\n }\n </nz-select>\n </div>\n }\n\n \x3c!-- Tràn viền --\x3e\n @if (classOverflowY) {\n <div class="flex flex-col gap-2">\n <span class="text-xs">Tràn viền</span>\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_class\'][classOverflowY][\'--overflow-y\']"\n (ngModelChange)="updateClass()"\n >\n @for (item of overflowOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n }\n\n @if (classFlexDirection) {\n <div class="flex flex-col gap-2">\n <span class="text-xs">Hướng hiển thị</span>\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_class\'][classFlexDirection][\'--flex-direction\']"\n (ngModelChange)="updateClass()"\n >\n @for (item of flexDirectionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n }\n\n @if (classGap) {\n \x3c!-- Khoảng cách --\x3e\n <div class="flex flex-col gap-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng cách</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n @if (configEnableZoom) {\n <div class="flex justify-between items-center">\n <p class="text-xs mb-1">Hiển thị zoom</p>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'][configEnableZoom]"\n (ngModelChange)="updateConfig()"\n />\n </div>\n }\n\n \x3c!-- Line component --\x3e\n @if (data.type == \'object_line\') {\n <div class="flex flex-col gap-2 mb-2">\n <span class="text-xs">Hướng hiển thị (ngang/dọc)</span>\n <nz-select\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configTypeDisplay]"\n nzPlaceHolder="Hướng hiển thị (ngang/dọc)"\n (ngModelChange)="onChangedirection()"\n >\n @for (item of displayTypeOptions; track item.value) {\n <nz-option nzCustomContent [nzValue]="item.value" [nzLabel]="item.label">\n <div [style.cursor]="item.value">\n {{ item.label }}\n </div>\n </nz-option>\n }\n </nz-select>\n </div>\n }\n\n @if (data.type == \'object_product_button_add_to_cart\') {\n <div class="flex items-center gap-2">\n Bắt buộc đăng nhập:\n <nz-switch\n [(ngModel)]="data[device + \'_config\'].need_to_login"\n (ngModelChange)="updateConfig()"\n ></nz-switch>\n </div>\n }\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],classCursor:[{type:s}],classOverflowY:[{type:s}],classFlexDirection:[{type:s}],classGap:[{type:s}],configDragMode:[{type:s}],configTypeDisplay:[{type:s}],configEnableZoom:[{type:s}]}});class It{webBuilderService;modal;data;device;configIcon="";classIconPosition="";classFlexDirection="";classIcon="";classBgIcon="";classMarginIcon="";classWidthButtonIcon="";classHeightButtonIcon="";constructor(e,n){this.webBuilderService=e,this.modal=n}ngOnInit(){}handleChangeIcon(){this.modal.create({nzTitle:"Danh sách biểu tượng",nzContent:wt,nzWidth:"70%",nzFooter:null,nzClassName:"modal-list-icon"}).afterClose.subscribe(e=>{e&&(this.data[this.device+"_config"][this.configIcon].icon_name=e,this.updateConfig())})}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}updateClass(){setTimeout(()=>{this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})},0)}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:It,deps:[{token:xn},{token:O.NzModalService}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:It,isStandalone:!0,selector:"wb-icon-config",inputs:{data:"data",device:"device",configIcon:"configIcon",classIconPosition:"classIconPosition",classFlexDirection:"classFlexDirection",classIcon:"classIcon",classBgIcon:"classBgIcon",classMarginIcon:"classMarginIcon",classWidthButtonIcon:"classWidthButtonIcon",classHeightButtonIcon:"classHeightButtonIcon"},ngImport:t,template:'<div class="icon-config p-2">\n \x3c!-- Sử dụng --\x3e\n @if (configIcon) {\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs mb-1">Sử dụng</p>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'][configIcon].is_icon"\n (ngModelChange)="updateConfig()"\n ></nz-switch>\n </div>\n }\n\n @if ((configIcon && data[device + \'_config\'][configIcon].is_icon) || !configIcon) {\n \x3c!-- Thay đổi biểu tượng --\x3e\n @if (configIcon) {\n <div class="flex items-center justify-between mb-2">\n <nz-icon\n style="font-size: 20px"\n [ngStyle]="{ color: data[device + \'_class\'][classIcon][\'--color\'] }"\n [nzType]="data[device + \'_config\'][configIcon][\'icon_name\']"\n nzTheme="outline"\n />\n <button nz-button nzType="primary" (click)="handleChangeIcon()">Thay đổi</button>\n </div>\n }\n\n \x3c!-- Màu biểu tượng --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="m-0 text-xs">Màu biểu tượng</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classIcon][\'--color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classIcon][\'--color\']"\n ></div>\n </ng-template>\n </div>\n\n @if (classIconPosition) {\n \x3c!-- Vị trí biểu tượng --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="m-0 text-xs">Vị trí </label>\n <div class="flex items-center gap-2">\n <button\n nz-button\n [style.width.px]="50"\n [nzType]="\n data[device + \'_class\'][classIconPosition][\'--flex-direction\'] == \'row\'\n ? \'primary\'\n : \'default\'\n "\n (click)="\n data[device + \'_class\'][classIconPosition][\'--flex-direction\'] = \'row\'; updateClass()\n "\n >\n <div class="flex items-center justify-center gap-2">\n <nz-icon nzType="minus" nzTheme="outline" />\n <nz-icon nzType="star" nzTheme="outline" />\n </div>\n </button>\n\n <button\n nz-button\n [style.width.px]="50"\n [nzType]="\n data[device + \'_class\'][classIconPosition][\'--flex-direction\'] == \'row-reverse\'\n ? \'primary\'\n : \'default\'\n "\n (click)="\n data[device + \'_class\'][classIconPosition][\'--flex-direction\'] = \'row-reverse\';\n updateClass()\n "\n >\n <div class="flex items-center justify-center gap-2">\n <nz-icon nzType="star" nzTheme="outline" />\n <nz-icon nzType="minus" nzTheme="outline" />\n </div>\n </button>\n </div>\n </div>\n }\n\n \x3c!-- Màu nền biểu tượng(frame-products-config) --\x3e\n @if (classBgIcon) {\n \x3c!-- Màu nền biểu tượng --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="m-0 text-xs">Màu nền biểu tượng</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classBgIcon][\'--bg-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classBgIcon][\'--bg-color\']"\n ></div>\n </ng-template>\n </div>\n }\n\n \x3c!-- Kích thước --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Kích thước</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classIcon][\'--font-size\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classIcon][\'--font-size\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="40"\n [ngModel]="data[device + \'_class\'][classIcon][\'--font-size\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classIcon][\'--font-size\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Xoay --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Xoay</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classIcon][\'--rotate\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classIcon][\'--rotate\'] = $event + \'deg\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="360"\n [ngModel]="data[device + \'_class\'][classIcon][\'--rotate\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classIcon][\'--rotate\'] = $event + \'deg\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n @if (classMarginIcon) {\n \x3c!-- Khoảng đệm bên trái --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng đệm bên trái</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classMarginIcon][\'--margin-left\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classMarginIcon][\'--margin-left\'] = $event + \'px\'\n "\n />\n </div>\n\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="40"\n [ngModel]="data[device + \'_class\'][classMarginIcon][\'--margin-left\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classMarginIcon][\'--margin-left\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Khoảng đệm bên phải --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng đệm bên phải</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classMarginIcon][\'--margin-right\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classMarginIcon][\'--margin-right\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="40"\n [ngModel]="data[device + \'_class\'][classMarginIcon][\'--margin-right\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classMarginIcon][\'--margin-right\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n \x3c!-- Chiều dài nút(frame-products-config) --\x3e\n @if (classWidthButtonIcon) {\n \x3c!-- Chiều dài nút --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều dài nút</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classWidthButtonIcon][\'--width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classWidthButtonIcon][\'--width\'] = $event + \'px\'\n "\n />\n </div>\n\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classWidthButtonIcon][\'--width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classWidthButtonIcon][\'--width\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n \x3c!-- Chiều cao nút(frame-products-config) --\x3e\n @if (classHeightButtonIcon) {\n \x3c!-- Chiều cao nút --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều cao nút</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classHeightButtonIcon][\'--height\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classHeightButtonIcon][\'--height\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classHeightButtonIcon][\'--height\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classHeightButtonIcon][\'--height\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n }\n</div>\n',styles:[".color-chip{width:90px;height:30px;border-radius:4px;box-shadow:0 1px 4px #0000001f;border:1px solid rgba(0,0,0,.12);cursor:pointer}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:se},{kind:"component",type:re.NzSwitchComponent,selector:"nz-switch",inputs:["nzLoading","nzDisabled","nzControl","nzCheckedChildren","nzUnCheckedChildren","nzSize","nzId"],exportAs:["nzSwitch"]},{kind:"ngmodule",type:J},{kind:"component",type:Y.NzColorPickerComponent,selector:"nz-color-picker",inputs:["nzFormat","nzValue","nzSize","nzDefaultValue","nzTrigger","nzTitle","nzFlipFlop","nzShowText","nzOpen","nzAllowClear","nzDisabled","nzDisabledAlpha"],outputs:["nzOnChange","nzOnFormatChange","nzOnClear","nzOnOpenChange"],exportAs:["nzColorPicker"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"ngmodule",type:ne},{kind:"component",type:ee.NzSliderComponent,selector:"nz-slider",inputs:["nzDisabled","nzDots","nzIncluded","nzRange","nzVertical","nzReverse","nzDefaultValue","nzMarks","nzMax","nzMin","nzStep","nzTooltipVisible","nzTooltipPlacement","nzTipFormatter"],outputs:["nzOnAfterChange"],exportAs:["nzSlider"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"pipe",type:ct,name:"wbnumber"}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:It,decorators:[{type:l,args:[{selector:"wb-icon-config",imports:[k,B,se,J,ct,X,j,ne,Z],template:'<div class="icon-config p-2">\n \x3c!-- Sử dụng --\x3e\n @if (configIcon) {\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs mb-1">Sử dụng</p>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'][configIcon].is_icon"\n (ngModelChange)="updateConfig()"\n ></nz-switch>\n </div>\n }\n\n @if ((configIcon && data[device + \'_config\'][configIcon].is_icon) || !configIcon) {\n \x3c!-- Thay đổi biểu tượng --\x3e\n @if (configIcon) {\n <div class="flex items-center justify-between mb-2">\n <nz-icon\n style="font-size: 20px"\n [ngStyle]="{ color: data[device + \'_class\'][classIcon][\'--color\'] }"\n [nzType]="data[device + \'_config\'][configIcon][\'icon_name\']"\n nzTheme="outline"\n />\n <button nz-button nzType="primary" (click)="handleChangeIcon()">Thay đổi</button>\n </div>\n }\n\n \x3c!-- Màu biểu tượng --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="m-0 text-xs">Màu biểu tượng</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classIcon][\'--color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classIcon][\'--color\']"\n ></div>\n </ng-template>\n </div>\n\n @if (classIconPosition) {\n \x3c!-- Vị trí biểu tượng --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="m-0 text-xs">Vị trí </label>\n <div class="flex items-center gap-2">\n <button\n nz-button\n [style.width.px]="50"\n [nzType]="\n data[device + \'_class\'][classIconPosition][\'--flex-direction\'] == \'row\'\n ? \'primary\'\n : \'default\'\n "\n (click)="\n data[device + \'_class\'][classIconPosition][\'--flex-direction\'] = \'row\'; updateClass()\n "\n >\n <div class="flex items-center justify-center gap-2">\n <nz-icon nzType="minus" nzTheme="outline" />\n <nz-icon nzType="star" nzTheme="outline" />\n </div>\n </button>\n\n <button\n nz-button\n [style.width.px]="50"\n [nzType]="\n data[device + \'_class\'][classIconPosition][\'--flex-direction\'] == \'row-reverse\'\n ? \'primary\'\n : \'default\'\n "\n (click)="\n data[device + \'_class\'][classIconPosition][\'--flex-direction\'] = \'row-reverse\';\n updateClass()\n "\n >\n <div class="flex items-center justify-center gap-2">\n <nz-icon nzType="star" nzTheme="outline" />\n <nz-icon nzType="minus" nzTheme="outline" />\n </div>\n </button>\n </div>\n </div>\n }\n\n \x3c!-- Màu nền biểu tượng(frame-products-config) --\x3e\n @if (classBgIcon) {\n \x3c!-- Màu nền biểu tượng --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="m-0 text-xs">Màu nền biểu tượng</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classBgIcon][\'--bg-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classBgIcon][\'--bg-color\']"\n ></div>\n </ng-template>\n </div>\n }\n\n \x3c!-- Kích thước --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Kích thước</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classIcon][\'--font-size\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classIcon][\'--font-size\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="40"\n [ngModel]="data[device + \'_class\'][classIcon][\'--font-size\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classIcon][\'--font-size\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Xoay --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Xoay</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classIcon][\'--rotate\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classIcon][\'--rotate\'] = $event + \'deg\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="360"\n [ngModel]="data[device + \'_class\'][classIcon][\'--rotate\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classIcon][\'--rotate\'] = $event + \'deg\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n @if (classMarginIcon) {\n \x3c!-- Khoảng đệm bên trái --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng đệm bên trái</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classMarginIcon][\'--margin-left\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classMarginIcon][\'--margin-left\'] = $event + \'px\'\n "\n />\n </div>\n\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="40"\n [ngModel]="data[device + \'_class\'][classMarginIcon][\'--margin-left\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classMarginIcon][\'--margin-left\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Khoảng đệm bên phải --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng đệm bên phải</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classMarginIcon][\'--margin-right\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classMarginIcon][\'--margin-right\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="40"\n [ngModel]="data[device + \'_class\'][classMarginIcon][\'--margin-right\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classMarginIcon][\'--margin-right\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n \x3c!-- Chiều dài nút(frame-products-config) --\x3e\n @if (classWidthButtonIcon) {\n \x3c!-- Chiều dài nút --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều dài nút</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classWidthButtonIcon][\'--width\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classWidthButtonIcon][\'--width\'] = $event + \'px\'\n "\n />\n </div>\n\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classWidthButtonIcon][\'--width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classWidthButtonIcon][\'--width\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n \x3c!-- Chiều cao nút(frame-products-config) --\x3e\n @if (classHeightButtonIcon) {\n \x3c!-- Chiều cao nút --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều cao nút</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classHeightButtonIcon][\'--height\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classHeightButtonIcon][\'--height\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classHeightButtonIcon][\'--height\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classHeightButtonIcon][\'--height\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n }\n</div>\n',styles:[".color-chip{width:90px;height:30px;border-radius:4px;box-shadow:0 1px 4px #0000001f;border:1px solid rgba(0,0,0,.12);cursor:pointer}\n"]}]}],ctorParameters:()=>[{type:xn},{type:O.NzModalService}],propDecorators:{data:[{type:s}],device:[{type:s}],configIcon:[{type:s}],classIconPosition:[{type:s}],classFlexDirection:[{type:s}],classIcon:[{type:s}],classBgIcon:[{type:s}],classMarginIcon:[{type:s}],classWidthButtonIcon:[{type:s}],classHeightButtonIcon:[{type:s}]}});class Tt{webBuilderService;data;device;configLinkPage;options=[{label:"Không",value:"none"},{label:"Đến trang(chọn)",value:"link-select"},{label:"Đến trang(tự nhập)",value:"link-input"},{label:"Trang ngoài",value:"url"},{label:"Email",value:"mailto:"},{label:"Số điện thoại",value:"tel:"}];pages=[];clickActionOptions=[{label:"Không",value:"none"},{label:"Cuộn lên đầu trang",value:"scroll_to_top"},{label:"Cuộn đến khối",value:"scroll_to_block"}];blocks=[];constructor(e){this.webBuilderService=e}ngOnInit(){this.data[this.device+"_config"][this.configLinkPage].click_type||(this.data[this.device+"_config"][this.configLinkPage].click_type="scroll_to_top"),this.data[this.device+"_config"][this.configLinkPage].hasOwnProperty("scroll_distance")||(this.data[this.device+"_config"][this.configLinkPage].scroll_distance=0),this.getPages()}getPages(){this.webBuilderService.getPages().then(e=>{this.pages=e.data,"link-input"!=this.data[this.device+"_config"][this.configLinkPage].type&&"link-select"!=this.data[this.device+"_config"][this.configLinkPage].type||this.getBlocks()})}getBlocks(){const e=this.data[this.device+"_config"][this.configLinkPage].link.replace(/^\/+/,"").split("/")[0],n=this.webBuilderService.pages.find(n=>n.link==e);if(n){const e=this.webBuilderService.blocks.filter(e=>e.id_page==n._id);this.blocks=e}}updateClass(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Tt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Tt,isStandalone:!0,selector:"wb-link-page-config",inputs:{data:"data",device:"device",configLinkPage:"configLinkPage"},ngImport:t,template:'<div class="link-page-config p-2">\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].type"\n (ngModelChange)="getBlocks(); updateConfig()"\n >\n @for (item of options; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n\n @if (data[device + \'_config\'][configLinkPage].type == \'url\') {\n <input\n class="w-full"\n nz-input\n placeholder="https://viethas.com"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].link"\n (blur)="updateConfig()"\n />\n }\n @if (data[device + \'_config\'][configLinkPage].type == \'link-input\') {\n <input\n class="w-full"\n nz-input\n placeholder="gioi-thieu"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].link"\n (blur)="getBlocks(); updateConfig()"\n />\n }\n @if (data[device + \'_config\'][configLinkPage].type == \'link-select\') {\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].link"\n (ngModelChange)="getBlocks(); updateConfig()"\n nzShowSearch\n >\n @for (item of pages; track $index) {\n <nz-option\n [nzValue]="item.link"\n [nzLabel]="item.name[webBuilderService.projectWorking.language.default]"\n ></nz-option>\n }\n </nz-select>\n }\n @if (\n data[device + \'_config\'][configLinkPage].type == \'mailto:\' ||\n data[device + \'_config\'][configLinkPage].type == \'tel:\'\n ) {\n <div class="flex flex-col gap-2">\n <span class="m-0">\n Nhập\n {{ data[device + \'_config\'][configLinkPage].type == \'mailto:\' ? \'Email\' : \'Số điện thoại\' }}\n liên kết\n </span>\n <input\n nz-input\n type="text"\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].link"\n (blur)="updateConfig()"\n />\n </div>\n }\n\n @if (\n data[device + \'_config\'][configLinkPage].type == \'link-select\' ||\n data[device + \'_config\'][configLinkPage].type == \'link-input\'\n ) {\n <div class="flex flex-col">\n <div>Hành động khi nhấn</div>\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].click_type"\n (ngModelChange)="updateConfig()"\n >\n @for (item of clickActionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (data[device + \'_config\'][configLinkPage].click_type == \'scroll_to_block\') {\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].id_block"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Chọn khối"\n >\n @for (item of blocks; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n\n <div>Khoảng cách chừa ra để tránh menu cố định</div>\n <nz-input-number\n style="width: 100%"\n (nzBlur)="updateConfig()"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].scroll_distance"\n nzMin="0"\n nzMax="200"\n />\n }\n }\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:G},{kind:"directive",type:H.NzInputDirective,selector:"input[nz-input],textarea[nz-input]",inputs:["nzBorderless","nzVariant","nzSize","nzStepperless","nzStatus","disabled","readonly"],exportAs:["nzInput"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Tt,decorators:[{type:l,args:[{selector:"wb-link-page-config",imports:[ie,B,G,Z],template:'<div class="link-page-config p-2">\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].type"\n (ngModelChange)="getBlocks(); updateConfig()"\n >\n @for (item of options; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n\n @if (data[device + \'_config\'][configLinkPage].type == \'url\') {\n <input\n class="w-full"\n nz-input\n placeholder="https://viethas.com"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].link"\n (blur)="updateConfig()"\n />\n }\n @if (data[device + \'_config\'][configLinkPage].type == \'link-input\') {\n <input\n class="w-full"\n nz-input\n placeholder="gioi-thieu"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].link"\n (blur)="getBlocks(); updateConfig()"\n />\n }\n @if (data[device + \'_config\'][configLinkPage].type == \'link-select\') {\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].link"\n (ngModelChange)="getBlocks(); updateConfig()"\n nzShowSearch\n >\n @for (item of pages; track $index) {\n <nz-option\n [nzValue]="item.link"\n [nzLabel]="item.name[webBuilderService.projectWorking.language.default]"\n ></nz-option>\n }\n </nz-select>\n }\n @if (\n data[device + \'_config\'][configLinkPage].type == \'mailto:\' ||\n data[device + \'_config\'][configLinkPage].type == \'tel:\'\n ) {\n <div class="flex flex-col gap-2">\n <span class="m-0">\n Nhập\n {{ data[device + \'_config\'][configLinkPage].type == \'mailto:\' ? \'Email\' : \'Số điện thoại\' }}\n liên kết\n </span>\n <input\n nz-input\n type="text"\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].link"\n (blur)="updateConfig()"\n />\n </div>\n }\n\n @if (\n data[device + \'_config\'][configLinkPage].type == \'link-select\' ||\n data[device + \'_config\'][configLinkPage].type == \'link-input\'\n ) {\n <div class="flex flex-col">\n <div>Hành động khi nhấn</div>\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].click_type"\n (ngModelChange)="updateConfig()"\n >\n @for (item of clickActionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (data[device + \'_config\'][configLinkPage].click_type == \'scroll_to_block\') {\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].id_block"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Chọn khối"\n >\n @for (item of blocks; track $index) {\n <nz-option [nzValue]="item._id" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n\n <div>Khoảng cách chừa ra để tránh menu cố định</div>\n <nz-input-number\n style="width: 100%"\n (nzBlur)="updateConfig()"\n [(ngModel)]="data[device + \'_config\'][configLinkPage].scroll_distance"\n nzMin="0"\n nzMax="200"\n />\n }\n }\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],configLinkPage:[{type:s}]}});class Dt{webBuilderService;modalRef;nzModalData=o(I);options=[{label:"Không",value:"none"},{label:"Đến trang(chọn)",value:"link-select"},{label:"Đến trang(tự nhập)",value:"link-input"},{label:"Trang ngoài",value:"url"}];dataItem={label:{vi:""},router:{type:"none",link:""},group:"router"};optionsGroup=[{label:"Điều hướng",value:"router"},{label:"Gọi danh mục",value:"category"},{label:"Gọi hộp thoại",value:"dialog"}];constructor(e,n){this.webBuilderService=e,this.modalRef=n}ngOnInit(){}onCancel(){this.modalRef.close()}onAddMenuItem(){this.modalRef.close({...this.dataItem,key:Date.now().toString(36)+Math.random().toString(36).slice(2,8)})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Dt,deps:[{token:xn},{token:O.NzModalRef}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Dt,isStandalone:!0,selector:"wb-add-menu-item",ngImport:t,template:'<div class="add-menu-item py-1 h-full">\n <div class="flex flex-col gap-2 h-full">\n <div class="flex gap-2 h-full">\n @if (!nzModalData.isChild) {\n <div class="w-30 border-r border-gray-300 pr-4 h-full">\n @for (group of optionsGroup; track $index) {\n <div class="flex items-center">\n <nz-radio-group [(ngModel)]="dataItem.group">\n <label nz-radio [nzValue]="group.value"> {{ group.label }}</label>\n </nz-radio-group>\n </div>\n }\n </div>\n }\n\n <div [class]="`w-full bg-white`">\n <div class="mb-2">\n Tên menu\n <input\n class="w-full"\n nz-input\n [(ngModel)]="dataItem.label[webBuilderService.projectWorking.language.default]"\n />\n </div>\n\n <div>\n Điều hướng\n <nz-select class="mb-2 w-full" style="width: 100%" [(ngModel)]="dataItem.router.type">\n @for (item of options; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n\n @if (dataItem.router.type == \'link-input\' || dataItem.router.type == \'url\') {\n <input class="w-full" nz-input [(ngModel)]="dataItem.router.link" />\n }\n @if (dataItem.router.type == \'link-select\') {\n <nz-select class="mb-2" style="width: 100%" [(ngModel)]="dataItem.router.link">\n @for (\n item of webBuilderService.pages[webBuilderService.projectWorking.language.default];\n track $index\n ) {\n <nz-option [nzValue]="item.link" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n }\n </div>\n </div>\n </div>\n\n <div class="flex justify-end gap-2">\n <button nz-button nzType="default" type="button" (click)="onCancel()">Hủy</button>\n <button\n nz-button\n nzType="primary"\n type="submit"\n [disabled]="dataItem.name === \'\'"\n (click)="onAddMenuItem()"\n >\n Xác nhận\n </button>\n </div>\n </div>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:un},{kind:"component",type:gn.NzRadioComponent,selector:"[nz-radio],[nz-radio-button]",inputs:["nzValue","nzDisabled","nzAutoFocus","nz-radio-button"],exportAs:["nzRadio"]},{kind:"component",type:gn.NzRadioGroupComponent,selector:"nz-radio-group",inputs:["nzDisabled","nzButtonStyle","nzSize","nzName"],exportAs:["nzRadioGroup"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:G},{kind:"directive",type:H.NzInputDirective,selector:"input[nz-input],textarea[nz-input]",inputs:["nzBorderless","nzVariant","nzSize","nzStepperless","nzStatus","disabled","readonly"],exportAs:["nzInput"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Dt,decorators:[{type:l,args:[{selector:"wb-add-menu-item",imports:[B,un,ie,G,X],template:'<div class="add-menu-item py-1 h-full">\n <div class="flex flex-col gap-2 h-full">\n <div class="flex gap-2 h-full">\n @if (!nzModalData.isChild) {\n <div class="w-30 border-r border-gray-300 pr-4 h-full">\n @for (group of optionsGroup; track $index) {\n <div class="flex items-center">\n <nz-radio-group [(ngModel)]="dataItem.group">\n <label nz-radio [nzValue]="group.value"> {{ group.label }}</label>\n </nz-radio-group>\n </div>\n }\n </div>\n }\n\n <div [class]="`w-full bg-white`">\n <div class="mb-2">\n Tên menu\n <input\n class="w-full"\n nz-input\n [(ngModel)]="dataItem.label[webBuilderService.projectWorking.language.default]"\n />\n </div>\n\n <div>\n Điều hướng\n <nz-select class="mb-2 w-full" style="width: 100%" [(ngModel)]="dataItem.router.type">\n @for (item of options; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n\n @if (dataItem.router.type == \'link-input\' || dataItem.router.type == \'url\') {\n <input class="w-full" nz-input [(ngModel)]="dataItem.router.link" />\n }\n @if (dataItem.router.type == \'link-select\') {\n <nz-select class="mb-2" style="width: 100%" [(ngModel)]="dataItem.router.link">\n @for (\n item of webBuilderService.pages[webBuilderService.projectWorking.language.default];\n track $index\n ) {\n <nz-option [nzValue]="item.link" [nzLabel]="item.name"></nz-option>\n }\n </nz-select>\n }\n </div>\n </div>\n </div>\n\n <div class="flex justify-end gap-2">\n <button nz-button nzType="default" type="button" (click)="onCancel()">Hủy</button>\n <button\n nz-button\n nzType="primary"\n type="submit"\n [disabled]="dataItem.name === \'\'"\n (click)="onAddMenuItem()"\n >\n Xác nhận\n </button>\n </div>\n </div>\n</div>\n'}]}],ctorParameters:()=>[{type:xn},{type:O.NzModalRef}]});class jt{webBuilderService;modalRef;nzModalData=o(I);options=[{label:"Không",value:"none"},{label:"Đến trang(chọn)",value:"link-select"},{label:"Đến trang(tự nhập)",value:"link-input"},{label:"Trang ngoài",value:"url"}];dataItem={label:{vi:""},router:{type:"none",link:""},group:"router"};optionsGroup=[{label:"Điều hướng",value:"router"},{label:"Gọi danh mục",value:"category"},{label:"Gọi hộp thoại",value:"dialog"}];constructor(e,n){this.webBuilderService=e,this.modalRef=n}ngOnInit(){const{node:e}=this.nzModalData;this.dataItem=structuredClone(e||this.dataItem)}onCancel(){this.modalRef.close()}onEditMenuItem(){this.modalRef.close({...this.dataItem})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:jt,deps:[{token:xn},{token:O.NzModalRef}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:jt,isStandalone:!0,selector:"wb-edit-menu-item",ngImport:t,template:'<div class="add-menu-item py-1 h-full">\n <div class="flex flex-col gap-2 h-full">\n <div class="flex gap-2 h-full">\n @if (!nzModalData.isChild) {\n <div class="w-30 border-r border-gray-300 pr-4 h-full">\n @for (group of optionsGroup; track $index) {\n <div class="flex items-center">\n <nz-radio-group [(ngModel)]="dataItem.group">\n <label nz-radio [nzValue]="group.value"> {{ group.label }}</label>\n </nz-radio-group>\n </div>\n }\n </div>\n }\n\n <div [class]="`w-full bg-white`">\n <div class="mb-2">\n Tên menu\n <input\n class="w-full"\n nz-input\n [(ngModel)]="dataItem.label[webBuilderService.projectWorking.language.default]"\n />\n </div>\n\n <div>\n Điều hướng\n <nz-select class="mb-2 w-full" style="width: 100%" [(ngModel)]="dataItem.router.type">\n @for (item of options; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n\n @if (dataItem.router.type == \'link-input\' || dataItem.router.type == \'url\') {\n <input class="w-full" nz-input [(ngModel)]="dataItem.router.link" />\n }\n @if (dataItem.router.type == \'link-select\') {\n <nz-select class="mb-2" style="width: 100%" [(ngModel)]="dataItem.router.link">\n @for (item of webBuilderService.pages; track $index) {\n <nz-option\n [nzValue]="item.link"\n [nzLabel]="item.name[webBuilderService.projectWorking.language.default]"\n ></nz-option>\n }\n </nz-select>\n }\n </div>\n </div>\n </div>\n\n <div class="flex justify-end gap-2">\n <button nz-button nzType="default" type="button" (click)="onCancel()">Hủy</button>\n <button\n nz-button\n nzType="primary"\n type="submit"\n [disabled]="dataItem.name === \'\'"\n (click)="onEditMenuItem()"\n >\n Xác nhận\n </button>\n </div>\n </div>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:un},{kind:"component",type:gn.NzRadioComponent,selector:"[nz-radio],[nz-radio-button]",inputs:["nzValue","nzDisabled","nzAutoFocus","nz-radio-button"],exportAs:["nzRadio"]},{kind:"component",type:gn.NzRadioGroupComponent,selector:"nz-radio-group",inputs:["nzDisabled","nzButtonStyle","nzSize","nzName"],exportAs:["nzRadioGroup"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:G},{kind:"directive",type:H.NzInputDirective,selector:"input[nz-input],textarea[nz-input]",inputs:["nzBorderless","nzVariant","nzSize","nzStepperless","nzStatus","disabled","readonly"],exportAs:["nzInput"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:jt,decorators:[{type:l,args:[{selector:"wb-edit-menu-item",imports:[B,un,ie,G,X],template:'<div class="add-menu-item py-1 h-full">\n <div class="flex flex-col gap-2 h-full">\n <div class="flex gap-2 h-full">\n @if (!nzModalData.isChild) {\n <div class="w-30 border-r border-gray-300 pr-4 h-full">\n @for (group of optionsGroup; track $index) {\n <div class="flex items-center">\n <nz-radio-group [(ngModel)]="dataItem.group">\n <label nz-radio [nzValue]="group.value"> {{ group.label }}</label>\n </nz-radio-group>\n </div>\n }\n </div>\n }\n\n <div [class]="`w-full bg-white`">\n <div class="mb-2">\n Tên menu\n <input\n class="w-full"\n nz-input\n [(ngModel)]="dataItem.label[webBuilderService.projectWorking.language.default]"\n />\n </div>\n\n <div>\n Điều hướng\n <nz-select class="mb-2 w-full" style="width: 100%" [(ngModel)]="dataItem.router.type">\n @for (item of options; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n\n @if (dataItem.router.type == \'link-input\' || dataItem.router.type == \'url\') {\n <input class="w-full" nz-input [(ngModel)]="dataItem.router.link" />\n }\n @if (dataItem.router.type == \'link-select\') {\n <nz-select class="mb-2" style="width: 100%" [(ngModel)]="dataItem.router.link">\n @for (item of webBuilderService.pages; track $index) {\n <nz-option\n [nzValue]="item.link"\n [nzLabel]="item.name[webBuilderService.projectWorking.language.default]"\n ></nz-option>\n }\n </nz-select>\n }\n </div>\n </div>\n </div>\n\n <div class="flex justify-end gap-2">\n <button nz-button nzType="default" type="button" (click)="onCancel()">Hủy</button>\n <button\n nz-button\n nzType="primary"\n type="submit"\n [disabled]="dataItem.name === \'\'"\n (click)="onEditMenuItem()"\n >\n Xác nhận\n </button>\n </div>\n </div>\n</div>\n'}]}],ctorParameters:()=>[{type:xn},{type:O.NzModalRef}]});class Pt{webBuilderService;modalRef;modal;cdr;data;device;nzModalData=o(I);constructor(e,n,t,i){this.webBuilderService=e,this.modalRef=n,this.modal=t,this.cdr=i}ngOnInit(){const{data:e,device:n}=this.nzModalData;this.data=e,this.device=n}handleAddMenuItem(e){this.modal.create({nzTitle:"Thêm menu",nzContent:Dt,nzWidth:"45%",nzFooter:null,nzData:{isChild:!!e}}).afterClose.subscribe(n=>{n&&(e?(Array.isArray(e?.children)||(e.children=[]),e.children=[...e.children,n]):this.data[this.device+"_config"].data_list=[...this.data[this.device+"_config"].data_list,n],this.updateConfig())})}handleChangeIcon(e,n){this.modal.create({nzTitle:"Thay đổi icon"+("before"===n?"trước":"sau"),nzContent:wt,nzWidth:"70%",nzFooter:null,nzData:{isChild:!!e}}).afterClose.subscribe(t=>{t&&(e&&(e[`icon_${n}`]=t),this.updateConfig())})}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}confirmDelete(e){this.modal.confirm({nzTitle:"Bạn có chắc chắn muốn xóa mục này không?",nzOkText:"Xác nhận",nzOkDanger:!0,nzCancelText:"Hủy",nzOnOk:()=>new Promise((n,t)=>{const i=this.findParentNodeById(e.key,this.data[this.device+"_config"].data_list);i&&(i.children=i.children.filter(n=>n.key!=e.key)),this.data[this.device+"_config"].data_list=this.data[this.device+"_config"].data_list.filter(n=>n.key!=e.key),this.updateConfig(),n(!0)}).catch(()=>console.log("Oops errors!"))})}findParentNodeById(e,n){for(let t of n){if(t.children&&t.children.some(n=>n.key==e))return t;if(t.children){const n=this.findParentNodeById(e,t.children);if(n)return n}}return null}handleEditMenuItem(e){this.modal.create({nzTitle:"Cập nhật menu",nzContent:jt,nzWidth:"45%",nzFooter:null,nzData:{isChild:!!e,node:e}}).afterClose.subscribe(n=>{n&&(e&&Object.assign(e,n),this.updateConfig())})}handleOpenMenuMobile(e,n){n.expanded=!n.expanded}drop(e){const n=e.item.element.nativeElement.getAttribute("key");if("0"!=e.item.element.nativeElement.getAttribute("level")){const t=this.findParentNodeById(n,this.data[this.device+"_config"].data_list),i=t?.children?.findIndex(e=>e.key==n),o=e.currentIndex-e.previousIndex,a=this.clamp(i+o,t?.children?.length-1);Qe(t.children,i,a)}else Qe(this.data[this.device+"_config"].data_list,e.previousIndex,e.currentIndex);this.cdr.detectChanges()}clamp(e,n){return Math.max(0,Math.min(n,e))}removeIcon(e,n){e[n]="",this.cdr.detectChanges()}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Pt,deps:[{token:xn},{token:O.NzModalRef},{token:O.NzModalService},{token:t.ChangeDetectorRef}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Pt,isStandalone:!0,selector:"wb-menu-content",ngImport:t,template:'<div class="flex flex-col">\n <div class="flex items-center justify-end mb-2 gap-4">\n <app-select-language [availableLanguage]="webBuilderService.projectWorking.language.available">\n </app-select-language>\n <button nz-button nzType="primary" (click)="handleAddMenuItem()">Thêm menu</button>\n </div>\n <div class="menu-mobile" (cdkDropListDropped)="drop($event)" cdkDropList>\n @for (item of this.data[this.device + \'_config\'].data_list; track $index) {\n <ng-container\n *ngTemplateOutlet="renderMenu; context: { $implicit: item, depth: 0 }"\n ></ng-container>\n }\n\n <ng-template #renderMenu let-item let-depth="depth">\n <div class="menu-mobile__item" [attr.key]="item.key" [attr.level]="depth" cdkDrag>\n <div\n class="flex justify-between w-full items-center"\n [style.padding-left]="\'calc(\' + depth * 25 + \'px)\'"\n >\n <div class="flex items-center gap-2">\n \x3c!-- Nút mở menu con --\x3e\n <button nz-button nzType="text" nzShape="circle">\n @if (item.children?.length) {\n <nz-icon\n [nzType]="item.expanded ? \'caret-up\' : \'caret-down\'"\n class="menu-mobile__item-icon-before"\n nzTheme="outline"\n (click)="handleOpenMenuMobile($event, item)"\n />\n }\n </button>\n\n \x3c!-- icon trước --\x3e\n @if (item.icon_before) {\n <nz-icon\n [nzType]="item.icon_before"\n class="menu-mobile__item-icon-before"\n nzTheme="outline"\n />\n }\n\n \x3c!-- Tên menu --\x3e\n <div class="menu-mobile__item-content">\n {{ item.label[webBuilderService.projectWorking.language.default] }}\n </div>\n \x3c!-- icons sau --\x3e\n @if (item.icon_after) {\n <nz-icon\n [nzType]="item.icon_after"\n class="menu-mobile__item-icon-after"\n nzTheme="outline"\n />\n }\n </div>\n\n \x3c!-- danh sách nút thao tác --\x3e\n <div class="flex items-center gap-2">\n \x3c!-- chỉnh sửa icon trước --\x3e\n <button nz-button nzType="primary" nzShape="circle" class="action-icon">\n <nz-icon\n nzType="star"\n nzTheme="fill"\n (click)="handleChangeIcon(item, \'before\')"\n nz-tooltip\n nzTooltipTitle="Icon trước"\n />\n\n @if (item.icon_before) {\n \x3c!-- Nút remove --\x3e\n <button\n nz-button\n nzType="primary"\n nzDanger\n nzSize="small"\n class="icon-remove"\n nz-tooltip\n nzTooltipTitle="Xóa icon"\n (click)="removeIcon(item, \'icon_before\')"\n >\n ×\n </button>\n }\n </button>\n\n \x3c!-- chỉnh sửa icon sau --\x3e\n <button nz-button nzType="primary" nzShape="circle" class="action-icon">\n <nz-icon\n nzType="star"\n nz-tooltip\n nzTooltipTitle="Icon sau"\n (click)="handleChangeIcon(item, \'after\')"\n />\n\n @if (item.icon_after) {\n \x3c!-- Nút remove --\x3e\n <button\n nz-button\n nzType="primary"\n nzDanger\n nzSize="small"\n class="icon-remove"\n nz-tooltip\n nzTooltipTitle="Xóa icon"\n (click)="removeIcon(item, \'icon_after\')"\n >\n ×\n </button>\n }\n </button>\n\n \x3c!-- thêm menu --\x3e\n <button\n nz-button\n nzType="primary"\n nzShape="circle"\n (click)="handleAddMenuItem(item)"\n nz-tooltip\n nzTooltipTitle="Thêm menu"\n >\n <nz-icon nzType="plus" />\n </button>\n\n \x3c!-- chỉnh sửa menu --\x3e\n <button\n nz-button\n nzType="primary"\n nzShape="circle"\n (click)="handleEditMenuItem(item)"\n nz-tooltip\n nzTooltipTitle="Chỉnh sửa menu"\n >\n <nz-icon nzType="edit" />\n </button>\n\n \x3c!-- Xóa menu --\x3e\n <button\n nz-button\n nzType="primary"\n nzShape="circle"\n nzDanger\n (click)="confirmDelete(item)"\n nz-tooltip\n nzTooltipTitle="Xóa menu"\n >\n <nz-icon nzType="delete" />\n </button>\n </div>\n </div>\n </div>\n\n @if (item.children?.length && item.expanded) {\n @for (child of item.children; track $index) {\n <ng-container\n *ngTemplateOutlet="renderMenu; context: { $implicit: child, depth: (depth || 0) + 1 }"\n ></ng-container>\n }\n }\n </ng-template>\n </div>\n</div>\n',styles:[".menu-mobile{display:block;width:100%;height:450px;box-shadow:none 2px 0 27px #000;overflow:auto}.menu-mobile::-webkit-scrollbar{width:5px;height:5px}.menu-mobile::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.menu-mobile::-webkit-scrollbar-track{background-color:#0000001a}.menu-mobile .menu-mobile__item{cursor:move;position:relative;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#fff;border-radius:0/0px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:#000;white-space:nowrap}.menu-mobile .menu-mobile__item>div:hover{background-color:#0000000a}.menu-mobile .menu-mobile__item .menu-mobile__item-icon-before{color:#000;font-size:16px;margin-left:5px;margin-right:5px;transform:rotate(0);transition-duration:0s;transition-property:all;transition-timing-function:ease}.menu-mobile .menu-mobile__item .menu-mobile__item-content{font-size:16px;font-weight:500;font-style:normal;text-decoration:none;text-transform:none;line-height:2.5;display:inline-block;letter-spacing:1px;margin-left:0;margin-right:5px;transition-duration:0s;transition-property:all;transition-timing-function:ease}.menu-mobile .menu-mobile__item .menu-mobile__item-icon-after{color:#000;font-size:16px;margin-left:5px;margin-right:5px;transform:rotate(0);transition-duration:0s;transition-property:all;transition-timing-function:ease}.menu-mobile .action-icon{position:relative}.menu-mobile .action-icon .icon-remove{position:absolute;top:-6px;right:-6px;width:18px;height:18px;padding:0;border-radius:50%;line-height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.menu-mobile__children{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:100%;top:100%;left:0;right:auto;z-index:100;box-shadow:none 0 0 6px #000;max-height:0;overflow:hidden}.menu-mobile__children .menu-mobile__children{top:0;left:100%;right:auto}.menu-mobile__children .menu-mobile__item--child{width:100%;height:100%;display:flex;justify-content:space-between;align-items:center;background-color:#fff;border-radius:0/0px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:#00000036;white-space:nowrap}.menu-mobile__children .menu-mobile__item-icon-before--child{color:#fff;font-size:16px;margin-left:5px;margin-right:5px;transform:rotate(0);transition-duration:0s;transition-property:all;transition-timing-function:ease}.menu-mobile__children .menu-mobile__item-content--child{color:#ff5722;font-size:16px;font-weight:500;font-style:normal;text-decoration:none;text-transform:none;line-height:2.5;display:inline-block;letter-spacing:1px;margin-left:0;margin-right:5px;transition-duration:0s;transition-property:all;transition-timing-function:ease}.menu-mobile__children .menu-mobile__item-icon-after--child{color:#000;font-size:16px;margin-left:5px;margin-right:5px;transform:rotate(0);transition-duration:0s;transition-property:all;transition-timing-function:ease}\n"],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgTemplateOutlet,selector:"[ngTemplateOutlet]",inputs:["ngTemplateOutletContext","ngTemplateOutlet","ngTemplateOutletInjector"]},{kind:"ngmodule",type:B},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]},{kind:"ngmodule",type:W},{kind:"directive",type:$.NzTooltipDirective,selector:"[nz-tooltip]",inputs:["nzTooltipTitle","nzTooltipTitleContext","nz-tooltip","nzTooltipTrigger","nzTooltipPlacement","nzTooltipOrigin","nzTooltipVisible","nzTooltipMouseEnterDelay","nzTooltipMouseLeaveDelay","nzTooltipOverlayClassName","nzTooltipOverlayStyle","nzTooltipArrowPointAtCenter","cdkConnectedOverlayPush","nzTooltipColor"],outputs:["nzTooltipVisibleChange"],exportAs:["nzTooltip"]},{kind:"component",type:ft,selector:"app-select-language",inputs:["availableLanguage"]},{kind:"directive",type:en,selector:"[cdkDropList], cdk-drop-list",inputs:["cdkDropListConnectedTo","cdkDropListData","cdkDropListOrientation","id","cdkDropListLockAxis","cdkDropListDisabled","cdkDropListSortingDisabled","cdkDropListEnterPredicate","cdkDropListSortPredicate","cdkDropListAutoScrollDisabled","cdkDropListAutoScrollStep","cdkDropListElementContainer","cdkDropListHasAnchor"],outputs:["cdkDropListDropped","cdkDropListEntered","cdkDropListExited","cdkDropListSorted"],exportAs:["cdkDropList"]},{kind:"directive",type:Ze,selector:"[cdkDrag]",inputs:["cdkDragData","cdkDragLockAxis","cdkDragRootElement","cdkDragBoundary","cdkDragStartDelay","cdkDragFreeDragPosition","cdkDragDisabled","cdkDragConstrainPosition","cdkDragPreviewClass","cdkDragPreviewContainer","cdkDragScale"],outputs:["cdkDragStarted","cdkDragReleased","cdkDragEnded","cdkDragEntered","cdkDragExited","cdkDragDropped","cdkDragMoved"],exportAs:["cdkDrag"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Pt,decorators:[{type:l,args:[{selector:"wb-menu-content",imports:[k,B,j,X,W,ft,en,Ze],template:'<div class="flex flex-col">\n <div class="flex items-center justify-end mb-2 gap-4">\n <app-select-language [availableLanguage]="webBuilderService.projectWorking.language.available">\n </app-select-language>\n <button nz-button nzType="primary" (click)="handleAddMenuItem()">Thêm menu</button>\n </div>\n <div class="menu-mobile" (cdkDropListDropped)="drop($event)" cdkDropList>\n @for (item of this.data[this.device + \'_config\'].data_list; track $index) {\n <ng-container\n *ngTemplateOutlet="renderMenu; context: { $implicit: item, depth: 0 }"\n ></ng-container>\n }\n\n <ng-template #renderMenu let-item let-depth="depth">\n <div class="menu-mobile__item" [attr.key]="item.key" [attr.level]="depth" cdkDrag>\n <div\n class="flex justify-between w-full items-center"\n [style.padding-left]="\'calc(\' + depth * 25 + \'px)\'"\n >\n <div class="flex items-center gap-2">\n \x3c!-- Nút mở menu con --\x3e\n <button nz-button nzType="text" nzShape="circle">\n @if (item.children?.length) {\n <nz-icon\n [nzType]="item.expanded ? \'caret-up\' : \'caret-down\'"\n class="menu-mobile__item-icon-before"\n nzTheme="outline"\n (click)="handleOpenMenuMobile($event, item)"\n />\n }\n </button>\n\n \x3c!-- icon trước --\x3e\n @if (item.icon_before) {\n <nz-icon\n [nzType]="item.icon_before"\n class="menu-mobile__item-icon-before"\n nzTheme="outline"\n />\n }\n\n \x3c!-- Tên menu --\x3e\n <div class="menu-mobile__item-content">\n {{ item.label[webBuilderService.projectWorking.language.default] }}\n </div>\n \x3c!-- icons sau --\x3e\n @if (item.icon_after) {\n <nz-icon\n [nzType]="item.icon_after"\n class="menu-mobile__item-icon-after"\n nzTheme="outline"\n />\n }\n </div>\n\n \x3c!-- danh sách nút thao tác --\x3e\n <div class="flex items-center gap-2">\n \x3c!-- chỉnh sửa icon trước --\x3e\n <button nz-button nzType="primary" nzShape="circle" class="action-icon">\n <nz-icon\n nzType="star"\n nzTheme="fill"\n (click)="handleChangeIcon(item, \'before\')"\n nz-tooltip\n nzTooltipTitle="Icon trước"\n />\n\n @if (item.icon_before) {\n \x3c!-- Nút remove --\x3e\n <button\n nz-button\n nzType="primary"\n nzDanger\n nzSize="small"\n class="icon-remove"\n nz-tooltip\n nzTooltipTitle="Xóa icon"\n (click)="removeIcon(item, \'icon_before\')"\n >\n ×\n </button>\n }\n </button>\n\n \x3c!-- chỉnh sửa icon sau --\x3e\n <button nz-button nzType="primary" nzShape="circle" class="action-icon">\n <nz-icon\n nzType="star"\n nz-tooltip\n nzTooltipTitle="Icon sau"\n (click)="handleChangeIcon(item, \'after\')"\n />\n\n @if (item.icon_after) {\n \x3c!-- Nút remove --\x3e\n <button\n nz-button\n nzType="primary"\n nzDanger\n nzSize="small"\n class="icon-remove"\n nz-tooltip\n nzTooltipTitle="Xóa icon"\n (click)="removeIcon(item, \'icon_after\')"\n >\n ×\n </button>\n }\n </button>\n\n \x3c!-- thêm menu --\x3e\n <button\n nz-button\n nzType="primary"\n nzShape="circle"\n (click)="handleAddMenuItem(item)"\n nz-tooltip\n nzTooltipTitle="Thêm menu"\n >\n <nz-icon nzType="plus" />\n </button>\n\n \x3c!-- chỉnh sửa menu --\x3e\n <button\n nz-button\n nzType="primary"\n nzShape="circle"\n (click)="handleEditMenuItem(item)"\n nz-tooltip\n nzTooltipTitle="Chỉnh sửa menu"\n >\n <nz-icon nzType="edit" />\n </button>\n\n \x3c!-- Xóa menu --\x3e\n <button\n nz-button\n nzType="primary"\n nzShape="circle"\n nzDanger\n (click)="confirmDelete(item)"\n nz-tooltip\n nzTooltipTitle="Xóa menu"\n >\n <nz-icon nzType="delete" />\n </button>\n </div>\n </div>\n </div>\n\n @if (item.children?.length && item.expanded) {\n @for (child of item.children; track $index) {\n <ng-container\n *ngTemplateOutlet="renderMenu; context: { $implicit: child, depth: (depth || 0) + 1 }"\n ></ng-container>\n }\n }\n </ng-template>\n </div>\n</div>\n',styles:[".menu-mobile{display:block;width:100%;height:450px;box-shadow:none 2px 0 27px #000;overflow:auto}.menu-mobile::-webkit-scrollbar{width:5px;height:5px}.menu-mobile::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.menu-mobile::-webkit-scrollbar-track{background-color:#0000001a}.menu-mobile .menu-mobile__item{cursor:move;position:relative;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#fff;border-radius:0/0px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:#000;white-space:nowrap}.menu-mobile .menu-mobile__item>div:hover{background-color:#0000000a}.menu-mobile .menu-mobile__item .menu-mobile__item-icon-before{color:#000;font-size:16px;margin-left:5px;margin-right:5px;transform:rotate(0);transition-duration:0s;transition-property:all;transition-timing-function:ease}.menu-mobile .menu-mobile__item .menu-mobile__item-content{font-size:16px;font-weight:500;font-style:normal;text-decoration:none;text-transform:none;line-height:2.5;display:inline-block;letter-spacing:1px;margin-left:0;margin-right:5px;transition-duration:0s;transition-property:all;transition-timing-function:ease}.menu-mobile .menu-mobile__item .menu-mobile__item-icon-after{color:#000;font-size:16px;margin-left:5px;margin-right:5px;transform:rotate(0);transition-duration:0s;transition-property:all;transition-timing-function:ease}.menu-mobile .action-icon{position:relative}.menu-mobile .action-icon .icon-remove{position:absolute;top:-6px;right:-6px;width:18px;height:18px;padding:0;border-radius:50%;line-height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.menu-mobile__children{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:100%;top:100%;left:0;right:auto;z-index:100;box-shadow:none 0 0 6px #000;max-height:0;overflow:hidden}.menu-mobile__children .menu-mobile__children{top:0;left:100%;right:auto}.menu-mobile__children .menu-mobile__item--child{width:100%;height:100%;display:flex;justify-content:space-between;align-items:center;background-color:#fff;border-radius:0/0px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:#00000036;white-space:nowrap}.menu-mobile__children .menu-mobile__item-icon-before--child{color:#fff;font-size:16px;margin-left:5px;margin-right:5px;transform:rotate(0);transition-duration:0s;transition-property:all;transition-timing-function:ease}.menu-mobile__children .menu-mobile__item-content--child{color:#ff5722;font-size:16px;font-weight:500;font-style:normal;text-decoration:none;text-transform:none;line-height:2.5;display:inline-block;letter-spacing:1px;margin-left:0;margin-right:5px;transition-duration:0s;transition-property:all;transition-timing-function:ease}.menu-mobile__children .menu-mobile__item-icon-after--child{color:#000;font-size:16px;margin-left:5px;margin-right:5px;transform:rotate(0);transition-duration:0s;transition-property:all;transition-timing-function:ease}\n"]}]}],ctorParameters:()=>[{type:xn},{type:O.NzModalRef},{type:O.NzModalService},{type:t.ChangeDetectorRef}]});const At={horizontal:{"menu-horizontal":{"--display":"flex","--align-items":"center","--width":"1053px","--height":"57.03180043371548px","--box-shadow":"none 2px 0px 27px #000000"},"+menu-horizontal__item":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"center","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--bg-color":"#ffffff","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--box-shadow":"none 0px 0px 0px #000000","--border-style":"solid","--border-top-width":"0px","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px","--border-color":"#000000"},"+menu-horizontal__item-content":{"--color":"#ff5722","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--display":"inline-block","--line-height":1.5,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"5px","--font-family":"Arial","--font-style":"normal"},"+menu-horizontal__item-icon-before":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"+menu-horizontal__item-icon-after":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"-menu-horizontal__item":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"center","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--bg-color":"#ffffff","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--box-shadow":"none 0px 0px 0px #000000","--border-style":"solid","--border-top-width":"0px","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px","--border-color":"#ffffff"},"-menu-horizontal__item-content":{"--color":"#030303","--font-size":"16px","--font-weight":400,"--text-decoration":"none","--display":"inline-block","--line-height":1.3,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"5px","--font-family":"Arial"},"-menu-horizontal__item-icon-before":{"--color":"#000000","--font-size":"15px","--margin-right":"5px","--margin-left":"5px"},"-menu-horizontal__item-icon-after":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"menu-horizontal__children":{"--display":"none","--flex-direction":"column","--position":"absolute","--justify-content":"center","--align-items":"flex-start","--min-width":"160px","--top":"100%","--left":"0","--left-2":"100%","--background-color":"white","--z-index":"100","--box-shadow":" 0px 0px 6px #000000"},"+menu-horizontal__item--child":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"space-between","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--bg-color":"#ffffff","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--border-style":"solid","--border-top-width":"0px","--border-color":"rgba(0,0,0,0.21)","--border-bottom-width":"0.5px","--border-left-width":"0px","--border-right-width":"0px"},"+menu-horizontal__item-content--child":{"--color":"#ff5722","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--display":"inline-block","--line-height":5,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"10px","--font-family":"Arial"},"+menu-horizontal__item-icon-before--child":{"--color":"#FFFFFF","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"+menu-horizontal__item-icon-after--child":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"-menu-horizontal__item--child":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"space-between","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--bg-color":"#ffffff","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--border-style":"solid","--border-bottom-width":"0.5px","--border-color":"rgba(0,0,0,0.15)"},"-menu-horizontal__item-content--child":{"--color":"#000000","--font-size":"16px","--font-weight":"500","--text-decoration":"normal","--display":"inline-block","--line-height":5,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"10px","--font-family":"Arial","--font-style":"normal","--text-transform":"normal"},"-menu-horizontal__item-icon-before--child":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"-menu-horizontal__item-icon-after--child":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"}},vertical:{"menu-horizontal":{"--display":"flex","--align-items":"center","--width":"1053px","--height":"57.03180043371548px","--flex-direction":"column","--box-shadow":"none 2px 0px 27px #000000"},"+menu-horizontal__item":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"center","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--bg-color":"#ffffff","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--box-shadow":"none 0px 0px 0px #000000","--border-style":"solid","--border-top-width":"0px","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px","--border-color":"#000000"},"+menu-horizontal__item-content":{"--color":"#ff5722","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--display":"inline-block","--line-height":1.5,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"5px","--font-family":"Arial","--font-style":"normal"},"+menu-horizontal__item-icon-before":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"+menu-horizontal__item-icon-after":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"-menu-horizontal__item":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"center","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--bg-color":"#ffffff","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--box-shadow":"none 0px 0px 0px #000000","--border-style":"solid","--border-top-width":"0px","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px","--border-color":"#ffffff"},"-menu-horizontal__item-content":{"--color":"#030303","--font-size":"16px","--font-weight":400,"--text-decoration":"none","--display":"inline-block","--line-height":1.3,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"5px","--font-family":"Arial"},"-menu-horizontal__item-icon-before":{"--color":"#000000","--font-size":"15px","--margin-right":"5px","--margin-left":"5px"},"-menu-horizontal__item-icon-after":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"menu-horizontal__children":{"--display":"none","--flex-direction":"column","--position":"absolute","--justify-content":"center","--align-items":"flex-start","--min-width":"160px","--top":"0","--left":"100%","--left-2":"100%","--right":"0","--right-2":"0","--background-color":"white","--z-index":"100","--box-shadow":" 0px 0px 6px #000000"},"+menu-horizontal__item--child":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"space-between","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--bg-color":"#ffffff","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--border-style":"solid","--border-top-width":"0px","--border-color":"rgba(0,0,0,0.21)","--border-bottom-width":"0.5px","--border-left-width":"0px","--border-right-width":"0px"},"+menu-horizontal__item-content--child":{"--color":"#ff5722","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--display":"inline-block","--line-height":5,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"10px","--font-family":"Arial"},"+menu-horizontal__item-icon-before--child":{"--color":"#FFFFFF","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"+menu-horizontal__item-icon-after--child":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"-menu-horizontal__item--child":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"space-between","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--bg-color":"#ffffff","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--border-style":"solid","--border-bottom-width":"0.5px","--border-color":"rgba(0,0,0,0.15)"},"-menu-horizontal__item-content--child":{"--color":"#000000","--font-size":"16px","--font-weight":"500","--text-decoration":"normal","--display":"inline-block","--line-height":5,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"10px","--font-family":"Arial","--font-style":"normal","--text-transform":"normal"},"-menu-horizontal__item-icon-before--child":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"-menu-horizontal__item-icon-after--child":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"}},mobile:{"menu-mobile":{"--display":"block","--align-items":"center","--width":"305.0851593017578px","--height":"412.26881599053047px","--box-shadow":"none 2px 0px 27px #000000"},"+menu-mobile__item":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"center","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--bg-color":"#ffffff","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--box-shadow":"none 0px 0px 0px #000000","--border-style":"solid","--border-top-width":"0px","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px","--border-color":"#000000"},"+menu-mobile__item-content":{"--color":"#ff5722","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--display":"inline-block","--line-height":2.5,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"0px","--font-family":"Arial","--font-style":"normal"},"+menu-mobile__item-icon-before":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"+menu-mobile__item-icon-after":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px","--rotate":"0deg"},"-menu-mobile__item":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"center","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--bg-color":"#ffffff","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--box-shadow":"none 0px 0px 0px #000000","--border-style":"solid","--border-top-width":"0px","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px","--border-color":"#ffffff"},"-menu-mobile__item-content":{"--color":"#030303","--font-size":"16px","--font-weight":400,"--text-decoration":"none","--display":"inline-block","--line-height":2.5,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"0px","--font-family":"Arial"},"-menu-mobile__item-icon-before":{"--color":"#000000","--font-size":"15px","--margin-right":"5px","--margin-left":"5px"},"-menu-mobile__item-icon-after":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px","--rotate":"90deg"},"menu-mobile__children":{"--display":"none","--flex-direction":"column","--position":"absolute","--justify-content":"center","--align-items":"flex-start","--min-width":"160px","--top":"100%","--left":"0","--left-2":"100%","--background-color":"white","--z-index":"100","--box-shadow":"none 0px 0px 6px #000000"},"+menu-mobile__item--child":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"space-between","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--bg-color":"#ffffff","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--border-style":"solid","--border-top-width":"0px","--border-color":"rgba(0,0,0,0.21)","--border-bottom-width":"0px","--border-left-width":"0px","--border-right-width":"0px"},"+menu-mobile__item-content--child":{"--color":"#ff5722","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--display":"inline-block","--line-height":2.5,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"0px","--font-family":"Arial"},"+menu-mobile__item-icon-before--child":{"--color":"#FFFFFF","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"+menu-mobile__item-icon-after--child":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"-menu-mobile__item--child":{"--position":"relative","--display":"flex","--align-items":"center","--justify-content":"space-between","--height":"100%","--color":"#000","--font-size":"16px","--font-weight":"500","--text-decoration":"none","--width":"100%","--bg-color":"#ffffff","--border-top-left-radius":"0px","--border-top-right-radius":"0px","--border-bottom-left-radius":"0px","--border-bottom-right-radius":"0px","--border-style":"solid","--border-bottom-width":"0px","--border-color":"rgba(0,0,0,0.15)"},"-menu-mobile__item-content--child":{"--color":"#000000","--font-size":"16px","--font-weight":"500","--text-decoration":"normal","--display":"inline-block","--line-height":2.5,"--letter-spacing":"1px","--margin-right":"5px","--margin-left":"0px","--font-family":"Arial","--font-style":"normal","--text-transform":"normal"},"-menu-mobile__item-icon-before--child":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px"},"-menu-mobile__item-icon-after--child":{"--color":"#000000","--font-size":"16px","--margin-right":"5px","--margin-left":"5px","--rotate":"90deg"}}};class Ft{webBuilderService;modal;data;device;options=[{label:"Menu ngang",value:"horizontal"},{label:"Menu dọc",value:"vertical"}];directionOptions=[{label:"Bên phải",value:"right"},{label:"Menu dọc",value:"left"}];constructor(e,n){this.webBuilderService=e,this.modal=n}ngOnInit(){}handleEditContent(){this.modal.create({nzTitle:"Nội dung menu",nzContent:Pt,nzWidth:"80%",nzFooter:null,nzData:{data:this.data,device:this.device}}).afterClose.subscribe(e=>{})}updateConfig(){const e=this.data[this.device+"_config"];this.data[this.device+"_class"]=At[e.type],"horizontal"==e.type||"vertical"==e.type?this.data.resize_field="menu-horizontal":this.data.resize_field="menu-mobile",this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"],[this.device+"_class"]:this.data[this.device+"_class"],resize_field:this.data.resize_field})}handleChangeDirection(e){this.data[this.device+"_config"];const n=this.data[this.device+"_class"];"right"===e?(n["menu-horizontal__children"]["--left"]="100%",n["menu-horizontal__children"]["--left-2"]="100%",n["menu-horizontal__children"]["--top"]="0",n["menu-horizontal__children"]["--right"]="unset",n["menu-horizontal__children"]["--right-2"]="unset"):(n["menu-horizontal__children"]["--left"]="unset",n["menu-horizontal__children"]["--left-2"]="unset",n["menu-horizontal__children"]["--right"]="100%",n["menu-horizontal__children"]["--right-2"]="100%",n["menu-horizontal__children"]["--top"]="0"),this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Ft,deps:[{token:xn},{token:O.NzModalService}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Ft,isStandalone:!0,selector:"wb-menu-content-config",inputs:{data:"data",device:"device"},ngImport:t,template:"<div class=\"menu-content-config p-2\">\n @if (data.component == 'WbMenuHorizontal') {\n <div>\n <label class=\"block mb-2\">Chọn kiểu hiển thị menu</label>\n <nz-select\n class=\"mb-2 w-full\"\n [(ngModel)]=\"data[device + '_config']['type']\"\n nzPlaceHolder=\"Kiểu hiển thị menu\"\n (ngModelChange)=\"updateConfig()\"\n >\n @for (item of options; track $index) {\n <nz-option [nzValue]=\"item.value\" [nzLabel]=\"item.label\"></nz-option>\n }\n </nz-select>\n </div>\n }\n\n @if (data[device + '_config'].type == 'vertical') {\n \x3c!-- Vị trí biểu tượng --\x3e\n <div class=\"flex flex-col justify-between mb-2\">\n <label class=\"m-0 text-xs\">Hướng hiển thị</label>\n\n <div class=\"flex items-center gap-2\">\n <button\n nz-button\n [nzType]=\"\n data[device + '_class']['menu-horizontal__children']['--right'] === '100%'\n ? 'primary'\n : 'default'\n \"\n (click)=\"handleChangeDirection('left')\"\n >\n Trái\n </button>\n <button\n nz-button\n [nzType]=\"\n data[device + '_class']['menu-horizontal__children']['--left'] === '100%'\n ? 'primary'\n : 'default'\n \"\n (click)=\"handleChangeDirection('right')\"\n >\n Phải\n </button>\n </div>\n </div>\n }\n\n <button nz-button (click)=\"handleEditContent()\" nzType=\"primary\" style=\"width: 100%\">\n Chỉnh sửa nội dung\n </button>\n</div>\n",styles:[""],dependencies:[{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Ft,decorators:[{type:l,args:[{selector:"wb-menu-content-config",imports:[ie,B,X],template:"<div class=\"menu-content-config p-2\">\n @if (data.component == 'WbMenuHorizontal') {\n <div>\n <label class=\"block mb-2\">Chọn kiểu hiển thị menu</label>\n <nz-select\n class=\"mb-2 w-full\"\n [(ngModel)]=\"data[device + '_config']['type']\"\n nzPlaceHolder=\"Kiểu hiển thị menu\"\n (ngModelChange)=\"updateConfig()\"\n >\n @for (item of options; track $index) {\n <nz-option [nzValue]=\"item.value\" [nzLabel]=\"item.label\"></nz-option>\n }\n </nz-select>\n </div>\n }\n\n @if (data[device + '_config'].type == 'vertical') {\n \x3c!-- Vị trí biểu tượng --\x3e\n <div class=\"flex flex-col justify-between mb-2\">\n <label class=\"m-0 text-xs\">Hướng hiển thị</label>\n\n <div class=\"flex items-center gap-2\">\n <button\n nz-button\n [nzType]=\"\n data[device + '_class']['menu-horizontal__children']['--right'] === '100%'\n ? 'primary'\n : 'default'\n \"\n (click)=\"handleChangeDirection('left')\"\n >\n Trái\n </button>\n <button\n nz-button\n [nzType]=\"\n data[device + '_class']['menu-horizontal__children']['--left'] === '100%'\n ? 'primary'\n : 'default'\n \"\n (click)=\"handleChangeDirection('right')\"\n >\n Phải\n </button>\n </div>\n </div>\n }\n\n <button nz-button (click)=\"handleEditContent()\" nzType=\"primary\" style=\"width: 100%\">\n Chỉnh sửa nội dung\n </button>\n</div>\n"}]}],ctorParameters:()=>[{type:xn},{type:O.NzModalService}],propDecorators:{data:[{type:s}],device:[{type:s}]}});class Nt{webBuilderService;data;device;classObjectFit;constructor(e){this.webBuilderService=e}ngOnInit(){}onChoose(e){this.data[this.device+"_class"][this.classObjectFit]["--object-fit"]=e,this.updateClass()}updateClass(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Nt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:Nt,isStandalone:!0,selector:"wb-object-fit-config",inputs:{data:"data",device:"device",classObjectFit:"classObjectFit"},ngImport:t,template:'<div class="object-fit-config p-2">\n <div class="flex gap-2 mb-2">\n <div\n class="flex items-center flex-col gap-2 w-full cursor-pointer p-2"\n (click)="onChoose(\'none\')"\n title="none"\n [ngStyle]="{\n border:\n this.data[this.device + \'_class\'][this.classObjectFit][\'--object-fit\'] == \'none\'\n ? \'1px solid #ddd\'\n : \'none\'\n }"\n >\n <img\n src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg"\n alt="Bình thường"\n class="w-12 h-12 objet-none"\n />\n <p class="m-0 text-xs">Bình thường</p>\n </div>\n\n <div\n class="flex items-center flex-col gap-2 w-full cursor-pointer p-2"\n (click)="onChoose(\'cover\')"\n title="cover"\n [ngStyle]="{\n border:\n this.data[this.device + \'_class\'][this.classObjectFit][\'--object-fit\'] == \'cover\'\n ? \'1px solid #ddd\'\n : \'none\'\n }"\n >\n <img\n src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg"\n alt="Bao phủ"\n class="w-12 h-12 object-cover"\n />\n <p class="m-0 text-xs">Bao phủ</p>\n </div>\n </div>\n\n <div class="flex gap-2">\n <div\n class="flex items-center flex-col gap-2 w-full cursor-pointer p-2"\n (click)="onChoose(\'contain\')"\n title="contain"\n [ngStyle]="{\n border:\n this.data[this.device + \'_class\'][this.classObjectFit][\'--object-fit\'] == \'contain\'\n ? \'1px solid #ddd\'\n : \'none\'\n }"\n >\n <img\n src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg"\n alt="Bình thường"\n class="w-12 h-12 object-contain"\n />\n <p class="m-0 text-xs">Vừa vặn</p>\n </div>\n\n <div\n class="flex items-center flex-col gap-2 w-full cursor-pointer p-2"\n (click)="onChoose(\'fill\')"\n title="fill"\n [ngStyle]="{\n border:\n this.data[this.device + \'_class\'][this.classObjectFit][\'--object-fit\'] == \'fill\'\n ? \'1px solid #ddd\'\n : \'none\'\n }"\n >\n <img\n src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg"\n alt="Bao phủ"\n class="w-12 h-12 object-fill"\n />\n <p class="m-0 text-xs">Lắp đầy</p>\n </div>\n </div>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgStyle,selector:"[ngStyle]",inputs:["ngStyle"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Nt,decorators:[{type:l,args:[{selector:"wb-object-fit-config",imports:[B,k],template:'<div class="object-fit-config p-2">\n <div class="flex gap-2 mb-2">\n <div\n class="flex items-center flex-col gap-2 w-full cursor-pointer p-2"\n (click)="onChoose(\'none\')"\n title="none"\n [ngStyle]="{\n border:\n this.data[this.device + \'_class\'][this.classObjectFit][\'--object-fit\'] == \'none\'\n ? \'1px solid #ddd\'\n : \'none\'\n }"\n >\n <img\n src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg"\n alt="Bình thường"\n class="w-12 h-12 objet-none"\n />\n <p class="m-0 text-xs">Bình thường</p>\n </div>\n\n <div\n class="flex items-center flex-col gap-2 w-full cursor-pointer p-2"\n (click)="onChoose(\'cover\')"\n title="cover"\n [ngStyle]="{\n border:\n this.data[this.device + \'_class\'][this.classObjectFit][\'--object-fit\'] == \'cover\'\n ? \'1px solid #ddd\'\n : \'none\'\n }"\n >\n <img\n src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg"\n alt="Bao phủ"\n class="w-12 h-12 object-cover"\n />\n <p class="m-0 text-xs">Bao phủ</p>\n </div>\n </div>\n\n <div class="flex gap-2">\n <div\n class="flex items-center flex-col gap-2 w-full cursor-pointer p-2"\n (click)="onChoose(\'contain\')"\n title="contain"\n [ngStyle]="{\n border:\n this.data[this.device + \'_class\'][this.classObjectFit][\'--object-fit\'] == \'contain\'\n ? \'1px solid #ddd\'\n : \'none\'\n }"\n >\n <img\n src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg"\n alt="Bình thường"\n class="w-12 h-12 object-contain"\n />\n <p class="m-0 text-xs">Vừa vặn</p>\n </div>\n\n <div\n class="flex items-center flex-col gap-2 w-full cursor-pointer p-2"\n (click)="onChoose(\'fill\')"\n title="fill"\n [ngStyle]="{\n border:\n this.data[this.device + \'_class\'][this.classObjectFit][\'--object-fit\'] == \'fill\'\n ? \'1px solid #ddd\'\n : \'none\'\n }"\n >\n <img\n src="https://primefaces.org/cdn/primeng/images/galleria/galleria10.jpg"\n alt="Bao phủ"\n class="w-12 h-12 object-fill"\n />\n <p class="m-0 text-xs">Lắp đầy</p>\n </div>\n </div>\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],classObjectFit:[{type:s}]}});class Vt{webBuilderService;data;device;classGap;classJustifyContent;configPositionTab;positions=[{label:"Trên",value:"top"},{label:"Dưới",value:"bottom"},{label:"Trái",value:"left"},{label:"Phải",value:"right"}];justifyOptions=[{label:"",value:"flex-start",icon:"align-left"},{label:"",value:"center",icon:"align-center"},{label:"",value:"flex-end",icon:"align-right"},{label:"",value:"space-between",icon:"menu"}];constructor(e){this.webBuilderService=e}ngOnInit(){}drop(e){Qe(this.data.objects,e.previousIndex,e.currentIndex),this.data.objects.forEach((e,n)=>{e.index=n,this.webBuilderService.updateObject(e._id,{index:n})})}updateClass(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}updateObjectChoosingConfig(e,n){this.webBuilderService.updateObject(e._id,{[n]:e[n]})}handleAdd(){const e=this.data.objects.reduce((e,n)=>n.index>e?n.index:e,0),n=JSON.parse(JSON.stringify(Bn));n.id_object=this.data._id,n.desktop_class["frame-blank"]["--bg-color"]=this.randomColor(),n.desktop_config.content={},n.desktop_config.content.vi=`Tab ${e+2}`,n.index=e+1,n.is_child=!0,delete n.id_block,fn.forEach(e=>{const t=e.value;n[t+"_position_"+this.data._id]={top:0,left:0,z_index:1};const i=n[t+"_class"]?t+"_class":"desktop_class";n[t+"_class"]={...n[i],[Bn.resize_field]:{...n[i][Bn.resize_field],"--width":"100%","--min-height":"100%"}};const o=n[t+"_config"]?t+"_config":"desktop_config",a=n[t+"_animation"]?t+"_animation":"desktop_animation";n[t+"_config"]={...n[o]},n[t+"_animation"]={...n[a]}}),this.webBuilderService.addObject(n)}onChangePositionTab(e){const n=this.data[this.device+"_class"];this.data[this.device+"_config"];this.data[this.device+"_config"][this.configPositionTab]=e.value,"top"==e.value?(n["frame-tab"]["--flex-direction"]="column",n["frame-tab__header"]["--flex-direction"]="row",n["frame-tab__header"]["--align-items"]="center"):"bottom"==e.value?(n["frame-tab"]["--flex-direction"]="column-reverse",n["frame-tab__header"]["--flex-direction"]="row",n["frame-tab__header"]["--align-items"]="center"):"left"==e.value?(n["frame-tab"]["--flex-direction"]="row",n["frame-tab__header"]["--flex-direction"]="column",n["frame-tab__header"]["--align-items"]="unset"):"right"==e.value&&(n["frame-tab"]["--flex-direction"]="row-reverse",n["frame-tab__header"]["--flex-direction"]="column",n["frame-tab__header"]["--align-items"]="unset"),this.updateClassAndConfig()}updateClassAndConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"],[this.device+"_config"]:this.data[this.device+"_config"]})}handleRemove(e){}randomColor(){let e="#";for(let n=0;n<6;n++)e+="0123456789ABCDEF"[Math.floor(16*Math.random())];return e}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Vt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Vt,isStandalone:!0,selector:"wb-ordinal-config",inputs:{data:"data",device:"device",classGap:"classGap",classJustifyContent:"classJustifyContent",configPositionTab:"configPositionTab"},ngImport:t,template:'<div class="ordinal-config p-2">\n <button nz-button (click)="handleAdd()" nzType="primary" class="w-full">\n <nz-icon nzType="plus"></nz-icon>\n </button>\n @if (data.type == \'frame_tab\') {\n <div cdkDropList class="example-list mb-2" (cdkDropListDropped)="drop($event)">\n @for (obj of data.objects; track obj._id) {\n <div cdkDrag class="flex items-center gap-2 example-box">\n <nz-icon nzType="menu" class="cursor-move"></nz-icon>\n <input\n type="text"\n nz-input\n (blur)="updateObjectChoosingConfig(obj, device + \'_config\')"\n [(ngModel)]="\n obj[device + \'_config\'][\'content\'][webBuilderService.projectWorking.language.default]\n "\n />\n <nz-icon\n nzType="small-dash"\n nzTheme="outline"\n nz-dropdown\n [nzDropdownMenu]="menu"\n class="cursor-pointer"\n />\n <nz-dropdown-menu #menu="nzDropdownMenu">\n <ul nz-menu nzSelectable>\n <li nz-menu-item nzDanger (click)="handleRemove(obj)">Xóa</li>\n </ul>\n </nz-dropdown-menu>\n </div>\n }\n </div>\n } @else if (data.type == \'frame_banner\') {\n <div cdkDropList class="example-list mb-2" (cdkDropListDropped)="drop($event)">\n @for (obj of data.objects; track obj._id) {\n <div cdkDrag class="flex items-center gap-2 example-box">\n <nz-icon nzType="menu" class="cursor-move"></nz-icon>\n <div class="w-full">\n {{ obj.name }}\n </div>\n <nz-icon\n nzType="small-dash"\n nzTheme="outline"\n nz-dropdown\n [nzDropdownMenu]="menu"\n class="cursor-pointer"\n />\n <nz-dropdown-menu #menu="nzDropdownMenu">\n <ul nz-menu nzSelectable>\n <li nz-menu-item nzDanger (click)="handleRemove(obj)">Xóa</li>\n </ul>\n </nz-dropdown-menu>\n </div>\n }\n </div>\n }\n\n @if (configPositionTab) {\n <div class="flex flex-col gap-2 mb-2">\n <p class="mb-0">Vị trí thanh điều hướng</p>\n\n <div class="grid grid-cols-2 gap-2">\n @for (pos of positions; track $index) {\n <button\n nz-button\n [nzType]="\n data[device + \'_config\'][configPositionTab] == pos.value ? \'primary\' : \'default\'\n "\n (click)="onChangePositionTab(pos)"\n >\n {{ pos.label }}\n </button>\n }\n </div>\n </div>\n }\n\n @if (classJustifyContent) {\n <div class="flex items-center gap-2">\n <p class="mb-0">Căn chỉnh</p>\n\n <nz-segmented\n [nzOptions]="justifyOptions"\n [(ngModel)]="data[device + \'_class\'][classJustifyContent][\'--justify-content\']"\n (ngModelChange)="updateClass()"\n ></nz-segmented>\n </div>\n }\n\n @if (classGap) {\n \x3c!-- Khoảng cách --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">Khoảng cách</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n />\n </div>\n <div class="px-2">\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n </div>\n }\n</div>\n',styles:[".example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;font-size:14px}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"directive",type:Ze,selector:"[cdkDrag]",inputs:["cdkDragData","cdkDragLockAxis","cdkDragRootElement","cdkDragBoundary","cdkDragStartDelay","cdkDragFreeDragPosition","cdkDragDisabled","cdkDragConstrainPosition","cdkDragPreviewClass","cdkDragPreviewContainer","cdkDragScale"],outputs:["cdkDragStarted","cdkDragReleased","cdkDragEnded","cdkDragEntered","cdkDragExited","cdkDragDropped","cdkDragMoved"],exportAs:["cdkDrag"]},{kind:"directive",type:en,selector:"[cdkDropList], cdk-drop-list",inputs:["cdkDropListConnectedTo","cdkDropListData","cdkDropListOrientation","id","cdkDropListLockAxis","cdkDropListDisabled","cdkDropListSortingDisabled","cdkDropListEnterPredicate","cdkDropListSortPredicate","cdkDropListAutoScrollDisabled","cdkDropListAutoScrollStep","cdkDropListElementContainer","cdkDropListHasAnchor"],outputs:["cdkDropListDropped","cdkDropListEntered","cdkDropListExited","cdkDropListSorted"],exportAs:["cdkDropList"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"ngmodule",type:G},{kind:"directive",type:H.NzInputDirective,selector:"input[nz-input],textarea[nz-input]",inputs:["nzBorderless","nzVariant","nzSize","nzStepperless","nzStatus","disabled","readonly"],exportAs:["nzInput"]},{kind:"ngmodule",type:tn},{kind:"component",type:nn.NzSegmentedComponent,selector:"nz-segmented",inputs:["nzBlock","nzDisabled","nzOptions","nzVertical","nzShape","nzSize","nzName"],outputs:["nzValueChange"],exportAs:["nzSegmented"]},{kind:"ngmodule",type:ie},{kind:"ngmodule",type:ne},{kind:"component",type:ee.NzSliderComponent,selector:"nz-slider",inputs:["nzDisabled","nzDots","nzIncluded","nzRange","nzVertical","nzReverse","nzDefaultValue","nzMarks","nzMax","nzMin","nzStep","nzTooltipVisible","nzTooltipPlacement","nzTipFormatter"],outputs:["nzOnAfterChange"],exportAs:["nzSlider"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"ngmodule",type:an},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzMenuItemComponent,selector:"[nz-menu-item]",inputs:["nzPaddingLeft","nzDisabled","nzSelected","nzDanger","nzMatchRouterExact","nzMatchRouter"],exportAs:["nzMenuItem"]},{kind:"directive",type:on.NzDropDownDirective,selector:"[nz-dropdown]",inputs:["nzDropdownMenu","nzTrigger","nzMatchWidthElement","nzBackdrop","nzClickHide","nzDisabled","nzVisible","nzArrow","nzOverlayClassName","nzOverlayStyle","nzPlacement"],outputs:["nzVisibleChange"],exportAs:["nzDropdown"]},{kind:"component",type:on.NzDropdownMenuComponent,selector:"nz-dropdown-menu",exportAs:["nzDropdownMenu"]},{kind:"pipe",type:ct,name:"wbnumber"}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Vt,decorators:[{type:l,args:[{selector:"wb-ordinal-config",imports:[B,Ze,en,X,j,G,tn,ie,ct,ne,Z,an],template:'<div class="ordinal-config p-2">\n <button nz-button (click)="handleAdd()" nzType="primary" class="w-full">\n <nz-icon nzType="plus"></nz-icon>\n </button>\n @if (data.type == \'frame_tab\') {\n <div cdkDropList class="example-list mb-2" (cdkDropListDropped)="drop($event)">\n @for (obj of data.objects; track obj._id) {\n <div cdkDrag class="flex items-center gap-2 example-box">\n <nz-icon nzType="menu" class="cursor-move"></nz-icon>\n <input\n type="text"\n nz-input\n (blur)="updateObjectChoosingConfig(obj, device + \'_config\')"\n [(ngModel)]="\n obj[device + \'_config\'][\'content\'][webBuilderService.projectWorking.language.default]\n "\n />\n <nz-icon\n nzType="small-dash"\n nzTheme="outline"\n nz-dropdown\n [nzDropdownMenu]="menu"\n class="cursor-pointer"\n />\n <nz-dropdown-menu #menu="nzDropdownMenu">\n <ul nz-menu nzSelectable>\n <li nz-menu-item nzDanger (click)="handleRemove(obj)">Xóa</li>\n </ul>\n </nz-dropdown-menu>\n </div>\n }\n </div>\n } @else if (data.type == \'frame_banner\') {\n <div cdkDropList class="example-list mb-2" (cdkDropListDropped)="drop($event)">\n @for (obj of data.objects; track obj._id) {\n <div cdkDrag class="flex items-center gap-2 example-box">\n <nz-icon nzType="menu" class="cursor-move"></nz-icon>\n <div class="w-full">\n {{ obj.name }}\n </div>\n <nz-icon\n nzType="small-dash"\n nzTheme="outline"\n nz-dropdown\n [nzDropdownMenu]="menu"\n class="cursor-pointer"\n />\n <nz-dropdown-menu #menu="nzDropdownMenu">\n <ul nz-menu nzSelectable>\n <li nz-menu-item nzDanger (click)="handleRemove(obj)">Xóa</li>\n </ul>\n </nz-dropdown-menu>\n </div>\n }\n </div>\n }\n\n @if (configPositionTab) {\n <div class="flex flex-col gap-2 mb-2">\n <p class="mb-0">Vị trí thanh điều hướng</p>\n\n <div class="grid grid-cols-2 gap-2">\n @for (pos of positions; track $index) {\n <button\n nz-button\n [nzType]="\n data[device + \'_config\'][configPositionTab] == pos.value ? \'primary\' : \'default\'\n "\n (click)="onChangePositionTab(pos)"\n >\n {{ pos.label }}\n </button>\n }\n </div>\n </div>\n }\n\n @if (classJustifyContent) {\n <div class="flex items-center gap-2">\n <p class="mb-0">Căn chỉnh</p>\n\n <nz-segmented\n [nzOptions]="justifyOptions"\n [(ngModel)]="data[device + \'_class\'][classJustifyContent][\'--justify-content\']"\n (ngModelChange)="updateClass()"\n ></nz-segmented>\n </div>\n }\n\n @if (classGap) {\n \x3c!-- Khoảng cách --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">Khoảng cách</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n />\n </div>\n <div class="px-2">\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n </div>\n }\n</div>\n',styles:[".example-list{width:500px;max-width:100%;border:solid 1px #ccc;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}.example-box{padding:20px 10px;border-bottom:solid 1px #ccc;color:#000000de;display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;background:#fff;font-size:14px}.cdk-drag-preview{border:none;box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"]}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],classGap:[{type:s}],classJustifyContent:[{type:s}],configPositionTab:[{type:s}]}});class $t{webBuilderService;data;device;classPadding;constructor(e){this.webBuilderService=e}ngOnInit(){}updateClass(){this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:$t,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:$t,isStandalone:!0,selector:"wb-padding-config",inputs:{data:"data",device:"device",classPadding:"classPadding"},ngImport:t,template:'<div class="padding-config p-2">\n \x3c!-- Góc trên --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Góc trên</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-top\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-top\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-top\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-top\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Góc dưới --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Góc dưới</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-bottom\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-bottom\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-bottom\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-bottom\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Góc trái --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Góc trái</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-left\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-left\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-left\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-left\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Góc phải --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Góc phải</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-right\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-right\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-right\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-right\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"ngmodule",type:ne},{kind:"component",type:ee.NzSliderComponent,selector:"nz-slider",inputs:["nzDisabled","nzDots","nzIncluded","nzRange","nzVertical","nzReverse","nzDefaultValue","nzMarks","nzMax","nzMin","nzStep","nzTooltipVisible","nzTooltipPlacement","nzTipFormatter"],outputs:["nzOnAfterChange"],exportAs:["nzSlider"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"pipe",type:ct,name:"wbnumber"}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:$t,decorators:[{type:l,args:[{selector:"wb-padding-config",imports:[Z,ne,B,ct],template:'<div class="padding-config p-2">\n \x3c!-- Góc trên --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Góc trên</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-top\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-top\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-top\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-top\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Góc dưới --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Góc dưới</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-bottom\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-bottom\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-bottom\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-bottom\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Góc trái --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Góc trái</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-left\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-left\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-left\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-left\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Góc phải --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Góc phải</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-right\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-right\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-right\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-right\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],classPadding:[{type:s}]}});class Wt{webBuilderService;data;device;classNotChoose;classChoose;classGap;classAlign;borderOptions=[{label:"Viền nét liền",value:"solid"},{label:"Viền nét đứt",value:"dashed"},{label:"Viền chấm chấm",value:"dotted"},{label:"Viền đôi",value:"double"}];alignOptions=[{label:"Trái",value:"left"},{label:"Giữa",value:"center"},{label:"Phải",value:"right"}];constructor(e){this.webBuilderService=e}ngOnInit(){}updateClass(){this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}updateConfig(){this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Wt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Wt,isStandalone:!0,selector:"wb-pagination-config",inputs:{data:"data",device:"device",classNotChoose:"classNotChoose",classChoose:"classChoose",classGap:"classGap",classAlign:"classAlign"},ngImport:t,template:'<div class="pagination-config p-2">\n \x3c!-- Ẩn phân trang --\x3e\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs mb-1">Ẩn phân trang</p>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'].hide_pagination"\n (ngModelChange)="updateConfig()"\n ></nz-switch>\n </div>\n\n @if (!data[device + \'_config\'].hide_pagination) {\n \x3c!-- Ẩn biểu tượng --\x3e\n <div class="flex justify-between items-center">\n <p class="text-xs mb-1">Ẩn biểu tượng</p>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'].hide_icon"\n (ngModelChange)="updateConfig()"\n ></nz-switch>\n </div>\n\n \x3c!-- Canh lề --\x3e\n <p class="m-0 text-center"><strong>Canh lề</strong></p>\n <div class="flex justify-center mb-2">\n <nz-segmented\n [nzOptions]="alignOptions"\n [(ngModel)]="data[device + \'_class\'][classAlign][\'--justify-content\']"\n (ngModelChange)="updateClass()"\n ></nz-segmented>\n </div>\n\n \x3c!-- Khoảng cách trên --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng cách trên</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classAlign][\'--margin-top\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classAlign][\'--margin-top\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classAlign][\'--margin-top\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classAlign][\'--margin-top\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Khoảng cách giữa các phần tử --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng cách giữa các phần tử</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n \x3c!-- ==================== NÚT CHƯA CHỌN ================= --\x3e\n <p class="m-0 text-center"><strong>Nút chưa chọn</strong></p>\n \x3c!-- Màu nền --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="label">Màu nền</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classNotChoose][\'--bg-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classNotChoose][\'--bg-color\']"\n ></div>\n </ng-template>\n </div>\n\n \x3c!-- Màu chữ --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="label">Màu chữ</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop2"\n [(ngModel)]="data[device + \'_class\'][classNotChoose][\'--color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop2>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classNotChoose][\'--color\']"\n ></div>\n </ng-template>\n </div>\n\n \x3c!-- Kích thước --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Kích thước</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classNotChoose][\'--font-size\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classNotChoose][\'--font-size\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classNotChoose][\'--font-size\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classNotChoose][\'--font-size\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Chiều rộng --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều rộng</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classNotChoose][\'--width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classNotChoose][\'--width\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classNotChoose][\'--width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classNotChoose][\'--width\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Chiều cao --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều cao</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classNotChoose][\'--height\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classNotChoose][\'--height\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classNotChoose][\'--height\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classNotChoose][\'--height\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- ==================== NÚT ĐÃ CHỌN ================= --\x3e\n <p class="m-0 text-center"><strong>Nút đã chọn</strong></p>\n \x3c!-- Màu nền --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="label">Màu nền</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop3"\n [(ngModel)]="data[device + \'_class\'][classChoose][\'--bg-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop3>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classChoose][\'--bg-color\']"\n ></div>\n </ng-template>\n </div>\n \x3c!-- Màu chữ --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="label">Màu chữ</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop4"\n [(ngModel)]="data[device + \'_class\'][classChoose][\'--color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop4>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classChoose][\'--color\']"\n ></div>\n </ng-template>\n </div>\n\n \x3c!-- Kích thước --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Kích thước</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classChoose][\'--font-size\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classChoose][\'--font-size\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classChoose][\'--font-size\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classChoose][\'--font-size\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Chiều rộng --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều rộng</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classChoose][\'--width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classChoose][\'--width\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classChoose][\'--width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classChoose][\'--width\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Chiều cao --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều cao</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classChoose][\'--height\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classChoose][\'--height\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classChoose][\'--height\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classChoose][\'--height\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:se},{kind:"component",type:re.NzSwitchComponent,selector:"nz-switch",inputs:["nzLoading","nzDisabled","nzControl","nzCheckedChildren","nzUnCheckedChildren","nzSize","nzId"],exportAs:["nzSwitch"]},{kind:"ngmodule",type:ne},{kind:"component",type:ee.NzSliderComponent,selector:"nz-slider",inputs:["nzDisabled","nzDots","nzIncluded","nzRange","nzVertical","nzReverse","nzDefaultValue","nzMarks","nzMax","nzMin","nzStep","nzTooltipVisible","nzTooltipPlacement","nzTipFormatter"],outputs:["nzOnAfterChange"],exportAs:["nzSlider"]},{kind:"ngmodule",type:J},{kind:"component",type:Y.NzColorPickerComponent,selector:"nz-color-picker",inputs:["nzFormat","nzValue","nzSize","nzDefaultValue","nzTrigger","nzTitle","nzFlipFlop","nzShowText","nzOpen","nzAllowClear","nzDisabled","nzDisabledAlpha"],outputs:["nzOnChange","nzOnFormatChange","nzOnClear","nzOnOpenChange"],exportAs:["nzColorPicker"]},{kind:"ngmodule",type:tn},{kind:"component",type:nn.NzSegmentedComponent,selector:"nz-segmented",inputs:["nzBlock","nzDisabled","nzOptions","nzVertical","nzShape","nzSize","nzName"],outputs:["nzValueChange"],exportAs:["nzSegmented"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"ngmodule",type:ie},{kind:"pipe",type:ct,name:"wbnumber"}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Wt,decorators:[{type:l,args:[{selector:"wb-pagination-config",imports:[B,se,ne,ct,J,tn,Z,ie],template:'<div class="pagination-config p-2">\n \x3c!-- Ẩn phân trang --\x3e\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs mb-1">Ẩn phân trang</p>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'].hide_pagination"\n (ngModelChange)="updateConfig()"\n ></nz-switch>\n </div>\n\n @if (!data[device + \'_config\'].hide_pagination) {\n \x3c!-- Ẩn biểu tượng --\x3e\n <div class="flex justify-between items-center">\n <p class="text-xs mb-1">Ẩn biểu tượng</p>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'].hide_icon"\n (ngModelChange)="updateConfig()"\n ></nz-switch>\n </div>\n\n \x3c!-- Canh lề --\x3e\n <p class="m-0 text-center"><strong>Canh lề</strong></p>\n <div class="flex justify-center mb-2">\n <nz-segmented\n [nzOptions]="alignOptions"\n [(ngModel)]="data[device + \'_class\'][classAlign][\'--justify-content\']"\n (ngModelChange)="updateClass()"\n ></nz-segmented>\n </div>\n\n \x3c!-- Khoảng cách trên --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng cách trên</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classAlign][\'--margin-top\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classAlign][\'--margin-top\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classAlign][\'--margin-top\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classAlign][\'--margin-top\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Khoảng cách giữa các phần tử --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng cách giữa các phần tử</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n \x3c!-- ==================== NÚT CHƯA CHỌN ================= --\x3e\n <p class="m-0 text-center"><strong>Nút chưa chọn</strong></p>\n \x3c!-- Màu nền --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="label">Màu nền</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classNotChoose][\'--bg-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classNotChoose][\'--bg-color\']"\n ></div>\n </ng-template>\n </div>\n\n \x3c!-- Màu chữ --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="label">Màu chữ</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop2"\n [(ngModel)]="data[device + \'_class\'][classNotChoose][\'--color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop2>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classNotChoose][\'--color\']"\n ></div>\n </ng-template>\n </div>\n\n \x3c!-- Kích thước --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Kích thước</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classNotChoose][\'--font-size\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classNotChoose][\'--font-size\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classNotChoose][\'--font-size\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classNotChoose][\'--font-size\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Chiều rộng --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều rộng</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classNotChoose][\'--width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classNotChoose][\'--width\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classNotChoose][\'--width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classNotChoose][\'--width\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Chiều cao --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều cao</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classNotChoose][\'--height\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classNotChoose][\'--height\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classNotChoose][\'--height\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classNotChoose][\'--height\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- ==================== NÚT ĐÃ CHỌN ================= --\x3e\n <p class="m-0 text-center"><strong>Nút đã chọn</strong></p>\n \x3c!-- Màu nền --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="label">Màu nền</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop3"\n [(ngModel)]="data[device + \'_class\'][classChoose][\'--bg-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop3>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classChoose][\'--bg-color\']"\n ></div>\n </ng-template>\n </div>\n \x3c!-- Màu chữ --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="label">Màu chữ</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop4"\n [(ngModel)]="data[device + \'_class\'][classChoose][\'--color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop4>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classChoose][\'--color\']"\n ></div>\n </ng-template>\n </div>\n\n \x3c!-- Kích thước --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Kích thước</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classChoose][\'--font-size\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classChoose][\'--font-size\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classChoose][\'--font-size\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classChoose][\'--font-size\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Chiều rộng --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều rộng</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classChoose][\'--width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classChoose][\'--width\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classChoose][\'--width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classChoose][\'--width\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- Chiều cao --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều cao</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classChoose][\'--height\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classChoose][\'--height\'] = $event + \'px\'"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classChoose][\'--height\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classChoose][\'--height\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],classNotChoose:[{type:s}],classChoose:[{type:s}],classGap:[{type:s}],classAlign:[{type:s}]}});class Lt{webBuilderService;data;device;classRotate;constructor(e){this.webBuilderService=e}ngOnInit(){}updateClass(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Lt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:Lt,isStandalone:!0,selector:"wb-rotate-config",inputs:{data:"data",device:"device",classRotate:"classRotate"},ngImport:t,template:'<div class="rotate-config p-2">\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Xoay</label>\n <nz-input-number\n class="w-1/3"\n [ngModel]="data[device + \'_class\'][classRotate][\'--rotate\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classRotate][\'--rotate\'] = $event + \'deg\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="360"\n [ngModel]="data[device + \'_class\'][classRotate][\'--rotate\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classRotate][\'--rotate\'] = $event + \'deg\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"ngmodule",type:ne},{kind:"component",type:ee.NzSliderComponent,selector:"nz-slider",inputs:["nzDisabled","nzDots","nzIncluded","nzRange","nzVertical","nzReverse","nzDefaultValue","nzMarks","nzMax","nzMin","nzStep","nzTooltipVisible","nzTooltipPlacement","nzTipFormatter"],outputs:["nzOnAfterChange"],exportAs:["nzSlider"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"pipe",type:ct,name:"wbnumber"}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Lt,decorators:[{type:l,args:[{selector:"wb-rotate-config",imports:[Z,ne,B,ct],template:'<div class="rotate-config p-2">\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Xoay</label>\n <nz-input-number\n class="w-1/3"\n [ngModel]="data[device + \'_class\'][classRotate][\'--rotate\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classRotate][\'--rotate\'] = $event + \'deg\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="360"\n [ngModel]="data[device + \'_class\'][classRotate][\'--rotate\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classRotate][\'--rotate\'] = $event + \'deg\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],classRotate:[{type:s}]}});class Et{webBuilderService;data;device;classScrollbar;constructor(e){this.webBuilderService=e}ngOnInit(){}updateClass(){setTimeout(()=>{this.data.hasOwnProperty("type")?this.data.type.includes("object")||this.data.type.includes("frame")?this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}):this.data.type.includes("block")&&this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}):this.webBuilderService.updateProject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})},0)}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Et,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Et,isStandalone:!0,selector:"wb-scrollbar-config",inputs:{data:"data",device:"device",classScrollbar:"classScrollbar"},ngImport:t,template:'<div class="scrollbar-config p-2">\n \x3c!-- Chiều rộng --\x3e\n @if (classScrollbar) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều rộng</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--width-scrollbar\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--width-scrollbar\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="10"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--width-scrollbar\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--width-scrollbar\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n \x3c!-- Chiều cao --\x3e\n @if (classScrollbar) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều cao</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--height-scrollbar\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--height-scrollbar\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="10"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--height-scrollbar\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--height-scrollbar\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n \x3c!-- Màu nền thanh cuộn --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="m-0 text-xs">Màu nền thanh cuộn</label>\n\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classScrollbar][\'--bg-color-thumb\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classScrollbar][\'--bg-color-thumb\']"\n ></div>\n </ng-template>\n </div>\n\n \x3c!-- Chiều cao --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="m-0 text-xs">Màu nền đường dẫn</label>\n\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop2"\n [(ngModel)]="data[device + \'_class\'][classScrollbar][\'--bg-color-track\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop2>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classScrollbar][\'--bg-color-track\']"\n ></div>\n </ng-template>\n </div>\n\n \x3c!-- Bo tròn thanh cuộn --\x3e\n @if (classScrollbar) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">Bo tròn thanh cuộn</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--border-radius-thumb\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--border-radius-thumb\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="30"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--border-radius-thumb\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--border-radius-thumb\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n \x3c!-- Bo tròn đường dẫn --\x3e\n @if (classScrollbar) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">Bo tròn đường dẫn</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--border-radius-track\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--border-radius-track\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="30"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--border-radius-track\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--border-radius-track\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:X},{kind:"ngmodule",type:j},{kind:"ngmodule",type:ie},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"ngmodule",type:J},{kind:"component",type:Y.NzColorPickerComponent,selector:"nz-color-picker",inputs:["nzFormat","nzValue","nzSize","nzDefaultValue","nzTrigger","nzTitle","nzFlipFlop","nzShowText","nzOpen","nzAllowClear","nzDisabled","nzDisabledAlpha"],outputs:["nzOnChange","nzOnFormatChange","nzOnClear","nzOnOpenChange"],exportAs:["nzColorPicker"]},{kind:"ngmodule",type:ne},{kind:"component",type:ee.NzSliderComponent,selector:"nz-slider",inputs:["nzDisabled","nzDots","nzIncluded","nzRange","nzVertical","nzReverse","nzDefaultValue","nzMarks","nzMax","nzMin","nzStep","nzTooltipVisible","nzTooltipPlacement","nzTipFormatter"],outputs:["nzOnAfterChange"],exportAs:["nzSlider"]},{kind:"pipe",type:ct,name:"wbnumber"}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Et,decorators:[{type:l,args:[{selector:"wb-scrollbar-config",imports:[B,X,j,ie,Z,J,ct,ne],template:'<div class="scrollbar-config p-2">\n \x3c!-- Chiều rộng --\x3e\n @if (classScrollbar) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều rộng</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--width-scrollbar\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--width-scrollbar\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="10"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--width-scrollbar\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--width-scrollbar\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n \x3c!-- Chiều cao --\x3e\n @if (classScrollbar) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều cao</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--height-scrollbar\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--height-scrollbar\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="10"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--height-scrollbar\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--height-scrollbar\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n \x3c!-- Màu nền thanh cuộn --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="m-0 text-xs">Màu nền thanh cuộn</label>\n\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classScrollbar][\'--bg-color-thumb\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classScrollbar][\'--bg-color-thumb\']"\n ></div>\n </ng-template>\n </div>\n\n \x3c!-- Chiều cao --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="m-0 text-xs">Màu nền đường dẫn</label>\n\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop2"\n [(ngModel)]="data[device + \'_class\'][classScrollbar][\'--bg-color-track\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop2>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_class\'][classScrollbar][\'--bg-color-track\']"\n ></div>\n </ng-template>\n </div>\n\n \x3c!-- Bo tròn thanh cuộn --\x3e\n @if (classScrollbar) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">Bo tròn thanh cuộn</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--border-radius-thumb\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--border-radius-thumb\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="30"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--border-radius-thumb\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--border-radius-thumb\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n \x3c!-- Bo tròn đường dẫn --\x3e\n @if (classScrollbar) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">Bo tròn đường dẫn</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--border-radius-track\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--border-radius-track\'] = $event + \'px\'\n "\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="30"\n [ngModel]="data[device + \'_class\'][classScrollbar][\'--border-radius-track\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classScrollbar][\'--border-radius-track\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],classScrollbar:[{type:s}]}});class Rt{webBuilderService;data;device;classShadow="";configShadow="";shadowOptions=[{label:"Bên trong",value:"inset"},{label:"Bên ngoài",value:""}];constructor(e){this.webBuilderService=e}ngOnInit(){this.data[this.device+"_config"][this.configShadow]||(this.data[this.device+"_config"][this.configShadow]={is_shadow:!1,type:"",x:0,y:0,blur:0,color:"#000000"})}onChangeShadow(){setTimeout(()=>{const e=this.data[this.device+"_config"][this.configShadow];this.data[this.device+"_class"][this.classShadow]["--box-shadow"]=`${e.is_shadow?e.type:"none"} ${e.x}px ${e.y}px ${e.blur}px ${e.color}`},0)}updateClass(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}updateClassAndConfig(){this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"],[this.device+"_config"]:this.data[this.device+"_config"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"],[this.device+"_config"]:this.data[this.device+"_config"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Rt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Rt,isStandalone:!0,selector:"wb-shadow-config",inputs:{data:"data",device:"device",classShadow:"classShadow",configShadow:"configShadow"},ngImport:t,template:'<div class="shadow-config p-2">\n \x3c!-- Sử dụng --\x3e\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs m-0">Đổ bóng</p>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'][configShadow].is_shadow"\n (ngModelChange)="onChangeShadow(); updateClassAndConfig()"\n ></nz-switch>\n </div>\n\n @if (data[device + \'_config\'][configShadow].is_shadow) {\n \x3c!-- Màu bóng --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="m-0 text-xs">Màu bóng</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_config\'][configShadow][\'color\']"\n (nzOnChange)="onChangeShadow(); updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_config\'][configShadow][\'color\']"\n ></div>\n </ng-template>\n </div>\n\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configShadow].type"\n (ngModelChange)="onChangeShadow(); updateClassAndConfig()"\n >\n @for (item of shadowOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n\n \x3c!-- Chiều ngang --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều ngang</label>\n <nz-input-number\n class="w-30"\n [(ngModel)]="data[device + \'_config\'][configShadow][\'x\']"\n (ngModelChange)="onChangeShadow()"\n (nzBlur)="updateClassAndConfig()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="-50"\n [nzMax]="50"\n [(ngModel)]="data[device + \'_config\'][configShadow][\'x\']"\n (ngModelChange)="onChangeShadow()"\n (nzOnAfterChange)="updateClassAndConfig()"\n ></nz-slider>\n </div>\n\n \x3c!-- Chiều dọc --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều dọc</label>\n <nz-input-number\n class="w-30"\n [(ngModel)]="data[device + \'_config\'][configShadow][\'y\']"\n (ngModelChange)="onChangeShadow()"\n (nzBlur)="updateClassAndConfig()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="-50"\n [nzMax]="50"\n [(ngModel)]="data[device + \'_config\'][configShadow][\'y\']"\n (ngModelChange)="onChangeShadow()"\n (nzOnAfterChange)="updateClassAndConfig()"\n ></nz-slider>\n </div>\n\n \x3c!-- Độ nhòe --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Độ nhòe</label>\n <nz-input-number\n class="w-30"\n [(ngModel)]="data[device + \'_config\'][configShadow][\'blur\']"\n (ngModelChange)="onChangeShadow()"\n (nzBlur)="updateClassAndConfig()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="50"\n [(ngModel)]="data[device + \'_config\'][configShadow][\'blur\']"\n (ngModelChange)="onChangeShadow()"\n (nzOnAfterChange)="updateClassAndConfig()"\n ></nz-slider>\n </div>\n }\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:se},{kind:"component",type:re.NzSwitchComponent,selector:"nz-switch",inputs:["nzLoading","nzDisabled","nzControl","nzCheckedChildren","nzUnCheckedChildren","nzSize","nzId"],exportAs:["nzSwitch"]},{kind:"ngmodule",type:ne},{kind:"component",type:ee.NzSliderComponent,selector:"nz-slider",inputs:["nzDisabled","nzDots","nzIncluded","nzRange","nzVertical","nzReverse","nzDefaultValue","nzMarks","nzMax","nzMin","nzStep","nzTooltipVisible","nzTooltipPlacement","nzTipFormatter"],outputs:["nzOnAfterChange"],exportAs:["nzSlider"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:J},{kind:"component",type:Y.NzColorPickerComponent,selector:"nz-color-picker",inputs:["nzFormat","nzValue","nzSize","nzDefaultValue","nzTrigger","nzTitle","nzFlipFlop","nzShowText","nzOpen","nzAllowClear","nzDisabled","nzDisabledAlpha"],outputs:["nzOnChange","nzOnFormatChange","nzOnClear","nzOnOpenChange"],exportAs:["nzColorPicker"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Rt,decorators:[{type:l,args:[{selector:"wb-shadow-config",imports:[se,ne,Z,B,J,ie],template:'<div class="shadow-config p-2">\n \x3c!-- Sử dụng --\x3e\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs m-0">Đổ bóng</p>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'][configShadow].is_shadow"\n (ngModelChange)="onChangeShadow(); updateClassAndConfig()"\n ></nz-switch>\n </div>\n\n @if (data[device + \'_config\'][configShadow].is_shadow) {\n \x3c!-- Màu bóng --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="m-0 text-xs">Màu bóng</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_config\'][configShadow][\'color\']"\n (nzOnChange)="onChangeShadow(); updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="data[device + \'_config\'][configShadow][\'color\']"\n ></div>\n </ng-template>\n </div>\n\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configShadow].type"\n (ngModelChange)="onChangeShadow(); updateClassAndConfig()"\n >\n @for (item of shadowOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n\n \x3c!-- Chiều ngang --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều ngang</label>\n <nz-input-number\n class="w-30"\n [(ngModel)]="data[device + \'_config\'][configShadow][\'x\']"\n (ngModelChange)="onChangeShadow()"\n (nzBlur)="updateClassAndConfig()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="-50"\n [nzMax]="50"\n [(ngModel)]="data[device + \'_config\'][configShadow][\'x\']"\n (ngModelChange)="onChangeShadow()"\n (nzOnAfterChange)="updateClassAndConfig()"\n ></nz-slider>\n </div>\n\n \x3c!-- Chiều dọc --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều dọc</label>\n <nz-input-number\n class="w-30"\n [(ngModel)]="data[device + \'_config\'][configShadow][\'y\']"\n (ngModelChange)="onChangeShadow()"\n (nzBlur)="updateClassAndConfig()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="-50"\n [nzMax]="50"\n [(ngModel)]="data[device + \'_config\'][configShadow][\'y\']"\n (ngModelChange)="onChangeShadow()"\n (nzOnAfterChange)="updateClassAndConfig()"\n ></nz-slider>\n </div>\n\n \x3c!-- Độ nhòe --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Độ nhòe</label>\n <nz-input-number\n class="w-30"\n [(ngModel)]="data[device + \'_config\'][configShadow][\'blur\']"\n (ngModelChange)="onChangeShadow()"\n (nzBlur)="updateClassAndConfig()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="50"\n [(ngModel)]="data[device + \'_config\'][configShadow][\'blur\']"\n (ngModelChange)="onChangeShadow()"\n (nzOnAfterChange)="updateClassAndConfig()"\n ></nz-slider>\n </div>\n }\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],classShadow:[{type:s}],configShadow:[{type:s}]}});class Ht{webBuilderService;modal;data;device;configSlide="slide";configIconLeft="icon_left";classBgIconLeft="frame-products__btn-left";classIconLeft="frame-products__btn-left-icon";configIconRight="icon_right";classBgIconRight="frame-products__btn-right";classIconRight="frame-products__btn-right-icon";slideMethodOptions=[{label:"Khung",value:"frame"},{label:"Cột",value:"col"}];loopMethodOptions=[{label:"Không lặp",value:"none"},{label:"Trượt về ô đầu",value:"back_to_start"},{label:"Vô hạn",value:"infinity"}];constructor(e,n){this.webBuilderService=e,this.modal=n}ngOnInit(){}updateClass(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}handleChangeIcon(e){this.modal.create({nzTitle:"Danh sách biểu tượng",nzContent:wt,nzWidth:"70%",nzFooter:null}).afterClose.subscribe(n=>{n&&(this.data[this.device+"_config"]["icon_"+e].icon_name=n,this.updateConfig())})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Ht,deps:[{token:xn},{token:O.NzModalService}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Ht,isStandalone:!0,selector:"wb-slide-config",inputs:{data:"data",device:"device",configSlide:"configSlide",configIconLeft:"configIconLeft",classBgIconLeft:"classBgIconLeft",classIconLeft:"classIconLeft",configIconRight:"configIconRight",classBgIconRight:"classBgIconRight",classIconRight:"classIconRight"},ngImport:t,template:'<div class="slide-config p-2">\n <div class="flex flex-col gap-2 mb-2">\n <span class="text-xs">Kiểu trượt</span>\n <nz-select\n class="w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configSlide].slide_method"\n (ngModelChange)="updateConfig()"\n >\n @for (item of slideMethodOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs mb-1">Cho phép vuốt</p>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'][configSlide].is_swipe"\n (ngModelChange)="updateConfig()"\n ></nz-switch>\n </div>\n\n <div class="flex flex-col gap-2 mb-2">\n <span class="text-xs">Kiểu lặp lại</span>\n <nz-select\n class="w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configSlide].loop_method"\n (ngModelChange)="updateConfig()"\n [nzPlaceHolder]="\'Chọn kiểu lặp lại\'"\n >\n @for (item of loopMethodOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n</div>\n',styles:[".color-chip{width:90px;height:30px;border-radius:4px;box-shadow:0 1px 4px #0000001f;border:1px solid rgba(0,0,0,.12);cursor:pointer}\n"],dependencies:[{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:se},{kind:"component",type:re.NzSwitchComponent,selector:"nz-switch",inputs:["nzLoading","nzDisabled","nzControl","nzCheckedChildren","nzUnCheckedChildren","nzSize","nzId"],exportAs:["nzSwitch"]},{kind:"ngmodule",type:j},{kind:"ngmodule",type:k},{kind:"ngmodule",type:J},{kind:"ngmodule",type:ne},{kind:"ngmodule",type:X}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Ht,decorators:[{type:l,args:[{selector:"wb-slide-config",imports:[ie,B,se,j,k,J,ne,X],template:'<div class="slide-config p-2">\n <div class="flex flex-col gap-2 mb-2">\n <span class="text-xs">Kiểu trượt</span>\n <nz-select\n class="w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configSlide].slide_method"\n (ngModelChange)="updateConfig()"\n >\n @for (item of slideMethodOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex justify-between items-center mb-2">\n <p class="text-xs mb-1">Cho phép vuốt</p>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'][configSlide].is_swipe"\n (ngModelChange)="updateConfig()"\n ></nz-switch>\n </div>\n\n <div class="flex flex-col gap-2 mb-2">\n <span class="text-xs">Kiểu lặp lại</span>\n <nz-select\n class="w-full"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configSlide].loop_method"\n (ngModelChange)="updateConfig()"\n [nzPlaceHolder]="\'Chọn kiểu lặp lại\'"\n >\n @for (item of loopMethodOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n</div>\n',styles:[".color-chip{width:90px;height:30px;border-radius:4px;box-shadow:0 1px 4px #0000001f;border:1px solid rgba(0,0,0,.12);cursor:pointer}\n"]}]}],ctorParameters:()=>[{type:xn},{type:O.NzModalService}],propDecorators:{data:[{type:s}],device:[{type:s}],configSlide:[{type:s}],configIconLeft:[{type:s}],classBgIconLeft:[{type:s}],classIconLeft:[{type:s}],configIconRight:[{type:s}],classBgIconRight:[{type:s}],classIconRight:[{type:s}]}});class Gt{webBuilderService;data;device;configSticky;stickyOptions=[{label:"Không",value:"none"},{label:"Cố định trong phần tử cha",value:"sticky"},{label:"Cố định toàn trang",value:"fixed"}];constructor(e){this.webBuilderService=e}ngOnInit(){}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Gt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Gt,isStandalone:!0,selector:"wb-sticky-config",inputs:{data:"data",device:"device",configSticky:"configSticky"},ngImport:t,template:'<div class="p-2">\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configSticky].type"\n (ngModelChange)="updateConfig()"\n >\n @for (item of stickyOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label" [title]="item.value"></nz-option>\n }\n </nz-select>\n\n <div class="flex flex-col gap-2">\n <p class="mb-0">Khoảng cách bên trên</p>\n <div class="flex items-center mb-2">\n <label class="text-xs w-full flex mb-1">Trên</label>\n <nz-input-number\n class="w-full"\n (nzBlur)="updateConfig()"\n [(ngModel)]="data[device + \'_config\'][configSticky].top"\n />\n </div>\n </div>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Gt,decorators:[{type:l,args:[{selector:"wb-sticky-config",imports:[B,ie,Z],template:'<div class="p-2">\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configSticky].type"\n (ngModelChange)="updateConfig()"\n >\n @for (item of stickyOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label" [title]="item.value"></nz-option>\n }\n </nz-select>\n\n <div class="flex flex-col gap-2">\n <p class="mb-0">Khoảng cách bên trên</p>\n <div class="flex items-center mb-2">\n <label class="text-xs w-full flex mb-1">Trên</label>\n <nz-input-number\n class="w-full"\n (nzBlur)="updateConfig()"\n [(ngModel)]="data[device + \'_config\'][configSticky].top"\n />\n </div>\n </div>\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],configSticky:[{type:s}]}});class Kt{webBuilderService;data;device;classContent="";classGap;classCursor="";classFontWeight="";classAlign="";classLineHeight="";classLetterSpacing="";classAlignFlex="";classMargin="";classMaxLine="";classPadding="";classMinWidth="";classMinHeight="";configContent="";configNotFound="";configHref="";configTag="";configMaxLine="";placeholder=!1;configFormatDate="";dateFormatOptions=[{label:"MM/DD/YYYY",value:"MM/DD/YYYY"},{label:"DD/MM/YYYY",value:"DD/MM/YYYY"},{label:"YYYY/MM/DD",value:"YYYY/MM/DD"},{label:"MM-DD-YYYY",value:"MM-DD-YYYY"},{label:"DD-MM-YYYY",value:"DD-MM-YYYY"},{label:"YYYY-MM-DD",value:"YYYY-MM-DD"}];fonts=[{name:"Default Sans-serif (Mặc định)",value:"sans-serif"},{name:"Default Serif (Có chân)",value:"serif"},{name:"Default Monospace",value:"monospace"},{name:"System UI (Chuẩn HDH)",value:'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif'},{name:"Arial",value:"Arial, Helvetica, sans-serif"},{name:"Arial Black",value:'"Arial Black", Gadget, sans-serif'},{name:"Verdana",value:"Verdana, Geneva, sans-serif"},{name:"Tahoma",value:"Tahoma, Geneva, sans-serif"},{name:"Trebuchet MS",value:'"Trebuchet MS", Helvetica, sans-serif'},{name:"Impact",value:"Impact, Charcoal, sans-serif"},{name:"Helvetica",value:"Helvetica, Arial, sans-serif"},{name:"Segoe UI (Windows System)",value:'"Segoe UI", Tahoma, Geneva, Verdana, sans-serif'},{name:"Times New Roman",value:'"Times New Roman", Times, serif'},{name:"Georgia",value:"Georgia, serif"},{name:"Garamond",value:'Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif'},{name:"Palatino",value:'"Palatino Linotype", "Book Antiqua", Palatino, serif'},{name:"Courier New",value:'"Courier New", Courier, monospace'},{name:"Lucida Console",value:'"Lucida Console", Monaco, monospace'},{name:"Comic Sans MS",value:'"Comic Sans MS", "Comic Sans", cursive'},{name:"Brush Script MT",value:'"Brush Script MT", cursive'}];textAlignOptions=[{icon:"align-left",value:"left"},{icon:"align-center",value:"center"},{icon:"align-right",value:"right"},{icon:"menu",value:"justify"}];justifyOptions=[{label:"",value:"flex-start",icon:"align-left"},{label:"",value:"center",icon:"align-center"},{label:"",value:"flex-end",icon:"align-right"},{label:"",value:"space-between",icon:"menu"}];tagOptions=[{label:"h1",value:"h1"},{label:"h2",value:"h2"},{label:"h3",value:"h3"},{label:"h4",value:"h4"},{label:"h5",value:"h5"},{label:"p",value:"p"}];constructor(e){this.webBuilderService=e}ngOnInit(){this.webBuilderService.getFontNames(this.webBuilderService.projectWorking.setups.font).forEach(e=>{this.fonts.push({name:e,value:e})})}onChangeTag(){const e=this.data[this.device+"_config"][this.configTag];this.data[this.device+"_class"][this.classContent]["--font-size"]={h1:"36px",h2:"30px",h3:"24px",h4:"20px",h5:"18px",p:"16px"}[e]||"16px",this.updateClassAndConfig()}onChangeUseMaxLine(){this.data[this.device+"_config"][this.configMaxLine].use?(this.data[this.device+"_class"][this.classMaxLine]["--webkit-line-clamp"]=this.data[this.device+"_config"][this.configMaxLine].value,this.data[this.device+"_class"][this.classMaxLine]["--text-overflow"]="ellipsis",this.data[this.device+"_class"][this.classMaxLine]["--display"]="-webkit-box",this.data[this.device+"_class"][this.classMaxLine]["--webkit-box-orient"]="vertical",this.data[this.device+"_class"][this.classMaxLine]["--overflow"]="hidden"):(this.data[this.device+"_class"][this.classMaxLine]["--webkit-line-clamp"]="unset",this.data[this.device+"_class"][this.classMaxLine]["--text-overflow"]="unset",this.data[this.device+"_class"][this.classMaxLine]["--display"]="block",this.data[this.device+"_class"][this.classMaxLine]["--webkit-box-orient"]="unset",this.data[this.device+"_class"][this.classMaxLine]["--overflow"]="unset"),this.updateClassAndConfig()}onChangeMaxLine(){this.data[this.device+"_class"][this.classMaxLine]["--webkit-line-clamp"]=this.data[this.device+"_config"][this.configMaxLine].value}updateClassAndConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"],[this.device+"_config"]:this.data[this.device+"_config"]})}updateClass(){setTimeout(()=>{this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})},0)}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Kt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Kt,isStandalone:!0,selector:"wb-text-format-config",inputs:{data:"data",device:"device",classContent:"classContent",classGap:"classGap",classCursor:"classCursor",classFontWeight:"classFontWeight",classAlign:"classAlign",classLineHeight:"classLineHeight",classLetterSpacing:"classLetterSpacing",classAlignFlex:"classAlignFlex",classMargin:"classMargin",classMaxLine:"classMaxLine",classPadding:"classPadding",classMinWidth:"classMinWidth",classMinHeight:"classMinHeight",configContent:"configContent",configNotFound:"configNotFound",configHref:"configHref",configTag:"configTag",configMaxLine:"configMaxLine",placeholder:"placeholder",configFormatDate:"configFormatDate"},ngImport:t,template:'<div class="text-format-config p-2">\n \x3c!-- Cấu hình thẻ khi là văn bản --\x3e\n @if (configTag) {\n <nz-select\n nz-tooltip="Chọn thẻ HTML áp dụng cho văn bản"\n [nzOptions]="tagOptions"\n [(ngModel)]="data[device + \'_config\'][configTag]"\n nzPlaceHolder="Chọn thẻ"\n class="w-full mb-1"\n (ngModelChange)="onChangeTag()"\n ></nz-select>\n }\n\n @if (configFormatDate) {\n <div class="flex flex-col gap-2">\n <span class="m-0">Định dạng ngày tháng</span>\n <nz-select\n [nzOptions]="dateFormatOptions"\n [(ngModel)]="data[device + \'_config\'][configFormatDate]"\n nzPlaceHolder="Chọn định dạng ngày tháng"\n class="w-full mb-1"\n (ngModelChange)="updateConfig()"\n ></nz-select>\n </div>\n }\n @if (configMaxLine) {\n <div class="flex items-center justify-between">\n <p class="text-xs mb-1">Hiển thị số dòng tối đa</p>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'][configMaxLine].use"\n (ngModelChange)="onChangeUseMaxLine()"\n ></nz-switch>\n </div>\n\n @if (data[device + \'_config\'][configMaxLine].use) {\n <div class="flex flex-col gap-2">\n <label for="cols" class="text-xs">Số dòng tối đa</label>\n <input\n id="cols"\n nz-input\n type="number"\n class="w-full"\n [min]="1"\n [max]="12"\n [step]="1"\n [placeholder]="\'Số dòng tối đa (1-7)\'"\n [(ngModel)]="data[device + \'_config\'][configMaxLine].value"\n (ngModelChange)="onChangeMaxLine()"\n (blur)="updateClassAndConfig()"\n />\n </div>\n }\n }\n\n \x3c!-- Nội dung --\x3e\n @if (configContent) {\n <div class="flex flex-col mb-1">\n <p class="m-0 text-tiny">{{ !placeholder ? \'Nội dung\' : \'Chữ nền\' }}</p>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n name="Nội dung"\n id="content"\n [(ngModel)]="\n data[device + \'_config\'][configContent][webBuilderService.projectWorking.language.default]\n "\n (blur)="updateConfig()"\n ></textarea>\n </div>\n }\n\n @if (configNotFound) {\n <div class="flex flex-col mb-1">\n <p class="m-0 text-tiny">{{ !placeholder ? \'Nội dung\' : \'Chữ nền\' }}</p>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n name="Nội dung"\n id="content"\n [(ngModel)]="\n data[device + \'_config\'][configNotFound][\n webBuilderService.projectWorking.language.default\n ]\n "\n (blur)="updateConfig()"\n ></textarea>\n </div>\n }\n\n \x3c!-- Kiểu chữ, Kích thước --\x3e\n @if (classContent) {\n <div class="flex items-center gap-1 mb-1 justify-between">\n <div class="flex flex-col font-family-config">\n <p class="m-0 text-tiny">Kiểu chữ</p>\n <nz-select\n [(ngModel)]="\n data[device + \'_class\'][classContent][\n \'--font-family\' + (placeholder ? \'-placeholder\' : \'\')\n ]\n "\n nzPlaceHolder="Chọn font"\n class="w-full"\n (ngModelChange)="updateClass()"\n >\n @for (font of fonts; track $index) {\n <nz-option [nzValue]="font.value" [nzLabel]="font.name"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex flex-col font-size-config">\n <p class="m-0 text-tiny">Kích thước</p>\n <nz-input-number\n class="w-full"\n [ngModel]="\n data[device + \'_class\'][classContent][\n \'--font-size\' + (placeholder ? \'-placeholder\' : \'\')\n ] | wbnumber\n "\n (ngModelChange)="\n data[device + \'_class\'][classContent][\n \'--font-size\' + (placeholder ? \'-placeholder\' : \'\')\n ] = $event + \'px\'\n "\n (nzBlur)="updateClass()"\n />\n </div>\n </div>\n }\n\n \x3c!-- Định dạng (B/I/U/line-through/uppercase + màu) --\x3e\n @if (classContent) {\n <div class="mb-2">\n <p class="m-0 text-tiny">Định dạng</p>\n <div class="format-actions">\n \x3c!-- Bold --\x3e\n <button\n nz-button\n [nzType]="\n data[device + \'_class\'][classContent][\n \'--font-weight\' + (placeholder ? \'-placeholder\' : \'\')\n ] == 900\n ? \'primary\'\n : \'default\'\n "\n (click)="\n data[device + \'_class\'][classContent][\n \'--font-weight\' + (placeholder ? \'-placeholder\' : \'\')\n ] =\n data[device + \'_class\'][classContent][\n \'--font-weight\' + (placeholder ? \'-placeholder\' : \'\')\n ] == 900\n ? 400\n : 900;\n updateClass()\n "\n >\n B\n </button>\n\n \x3c!-- Italic --\x3e\n <button\n nz-button\n [nzType]="\n data[device + \'_class\'][classContent][\n \'--font-style\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'italic\'\n ? \'primary\'\n : \'default\'\n "\n (click)="\n data[device + \'_class\'][classContent][\n \'--font-style\' + (placeholder ? \'-placeholder\' : \'\')\n ] =\n data[device + \'_class\'][classContent][\n \'--font-style\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'italic\'\n ? \'normal\'\n : \'italic\';\n updateClass()\n "\n >\n <span class="italic">I</span>\n </button>\n\n \x3c!-- Underline --\x3e\n <button\n nz-button\n [nzType]="\n data[device + \'_class\'][classContent][\n \'--text-decoration\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'underline\'\n ? \'primary\'\n : \'default\'\n "\n (click)="\n data[device + \'_class\'][classContent][\n \'--text-decoration\' + (placeholder ? \'-placeholder\' : \'\')\n ] =\n data[device + \'_class\'][classContent][\n \'--text-decoration\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'underline\'\n ? \'normal\'\n : \'underline\';\n updateClass()\n "\n >\n U\n </button>\n\n \x3c!-- Line-through --\x3e\n <button\n nz-button\n [nzType]="\n data[device + \'_class\'][classContent][\n \'--text-decoration\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'line-through\'\n ? \'primary\'\n : \'default\'\n "\n (click)="\n data[device + \'_class\'][classContent][\n \'--text-decoration\' + (placeholder ? \'-placeholder\' : \'\')\n ] =\n data[device + \'_class\'][classContent][\n \'--text-decoration\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'line-through\'\n ? \'normal\'\n : \'line-through\';\n updateClass()\n "\n >\n <i nz-icon nzType="strikethrough"></i>\n </button>\n\n \x3c!-- Uppercase --\x3e\n <button\n nz-button\n [nzType]="\n data[device + \'_class\'][classContent][\n \'--text-transform\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'uppercase\'\n ? \'primary\'\n : \'default\'\n "\n (click)="\n data[device + \'_class\'][classContent][\n \'--text-transform\' + (placeholder ? \'-placeholder\' : \'\')\n ] =\n data[device + \'_class\'][classContent][\n \'--text-transform\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'uppercase\'\n ? \'normal\'\n : \'uppercase\';\n updateClass()\n "\n >\n AB\n </button>\n\n \x3c!-- Color --\x3e\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="\n data[device + \'_class\'][classContent][\'--color\' + (placeholder ? \'-placeholder\' : \'\')]\n "\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="\n data[device + \'_class\'][classContent][\'--color\' + (placeholder ? \'-placeholder\' : \'\')]\n "\n ></div>\n </ng-template>\n </div>\n </div>\n }\n\n @if (\n data[device + \'_class\'][classContent][\n \'--text-decoration\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'underline\'\n ) {\n \x3c!-- Độ dày gạch chân --\x3e\n <div>\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Độ dày gạch chân</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="\n data[device + \'_class\'][classContent][\'--text-decoration-thickness\'] | wbnumber\n "\n (ngModelChange)="\n data[device + \'_class\'][classContent][\'--text-decoration-thickness\'] = $event + \'px\'\n "\n />\n </div>\n\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classContent][\'--text-decoration-thickness\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classContent][\'--text-decoration-thickness\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n \x3c!-- Khoảng cách gạch chân --\x3e\n <div>\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng cách gạch chân</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classContent][\'--text-underline-offset\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classContent][\'--text-underline-offset\'] = $event + \'px\'\n "\n />\n </div>\n\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classContent][\'--text-underline-offset\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classContent][\'--text-underline-offset\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n \x3c!-- Màu gạch chân --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="label">Màu gạch chân</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classContent][\'--text-decoration-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="\n data[device + \'_class\'][classContent][\'--text-decoration-color\']\n "\n ></div>\n </ng-template>\n </div>\n }\n\n \x3c!-- Canh lề Flex (justify-content) --\x3e\n @if (classAlignFlex) {\n <div class="text-xs">Canh lề tổng</div>\n <div class="mb-2">\n <nz-segmented\n [nzOptions]="justifyOptions"\n [(ngModel)]="data[device + \'_class\'][classAlignFlex][\'--justify-content\']"\n (ngModelChange)="updateClass()"\n >\n </nz-segmented>\n </div>\n }\n\n \x3c!-- Canh lề (text-align) --\x3e\n @if (classAlign) {\n <div class="mb-2">\n <div class="text-xs">Canh lề chữ</div>\n <nz-segmented\n [nzOptions]="textAlignOptions"\n [(ngModel)]="data[device + \'_class\'][classAlign][\'--text-align\']"\n (ngModelChange)="updateClass()"\n ></nz-segmented>\n </div>\n }\n\n \x3c!-- Độ đậm chữ --\x3e\n @if (classFontWeight) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Độ đậm chữ</label>\n <nz-input-number\n class="w-30"\n [(ngModel)]="\n data[device + \'_class\'][classFontWeight][\n \'--font-weight\' + (placeholder ? \'-placeholder\' : \'\')\n ]\n "\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="100"\n [nzMin]="100"\n [nzMax]="900"\n [(ngModel)]="\n data[device + \'_class\'][classFontWeight][\n \'--font-weight\' + (placeholder ? \'-placeholder\' : \'\')\n ]\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n \x3c!-- Khoảng cách dòng --\x3e\n @if (classLineHeight) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng cách dòng</label>\n <nz-input-number\n class="w-30"\n [(ngModel)]="data[device + \'_class\'][classLineHeight][\'--line-height\']"\n [nzStep]="0.1"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="0.1"\n [nzMin]="0"\n [nzMax]="5"\n [(ngModel)]="data[device + \'_class\'][classLineHeight][\'--line-height\']"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n \x3c!-- Khoảng cách chữ --\x3e\n @if (classLetterSpacing) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng cách chữ</label>\n <nz-input-number\n class="w-30"\n [ngModel]="\n data[device + \'_class\'][classLetterSpacing][\n \'--letter-spacing\' + (placeholder ? \'-placeholder\' : \'\')\n ] | wbnumber\n "\n (ngModelChange)="\n data[device + \'_class\'][classLetterSpacing][\n \'--letter-spacing\' + (placeholder ? \'-placeholder\' : \'\')\n ] = $event + \'px\'\n "\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="1"\n [nzMax]="10"\n [ngModel]="\n data[device + \'_class\'][classLetterSpacing][\n \'--letter-spacing\' + (placeholder ? \'-placeholder\' : \'\')\n ] | wbnumber\n "\n (ngModelChange)="\n data[device + \'_class\'][classLetterSpacing][\n \'--letter-spacing\' + (placeholder ? \'-placeholder\' : \'\')\n ] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n @if (classMargin) {\n \x3c!-- margin-left --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">khoảng đệm bên trái</label>\n <nz-input-number\n class="w-30"\n [ngModel]="data[device + \'_class\'][classMargin][\'--margin-left\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMargin][\'--margin-left\'] = $event + \'px\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="50"\n [ngModel]="data[device + \'_class\'][classMargin][\'--margin-left\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMargin][\'--margin-left\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- margin-right --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">khoảng đệm bên phải</label>\n <nz-input-number\n class="w-30"\n [ngModel]="data[device + \'_class\'][classMargin][\'--margin-right\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMargin][\'--margin-right\'] = $event + \'px\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="50"\n [ngModel]="data[device + \'_class\'][classMargin][\'--margin-right\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMargin][\'--margin-right\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n @if (classPadding) {\n \x3c!-- padding-top --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">khoảng đệm bên trên</label>\n <nz-input-number\n class="w-1/3"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-top\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-top\'] = $event + \'px\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="50"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-top\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-top\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- padding-bottom --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">khoảng đệm bên dưới</label>\n <nz-input-number\n class="w-1/3"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-bottom\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classPadding][\'--padding-bottom\'] = $event + \'px\'\n "\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="50"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-bottom\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-bottom\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- padding-left --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">khoảng đệm bên trái</label>\n <nz-input-number\n class="w-1/3"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-left\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-left\'] = $event + \'px\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="50"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-left\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-left\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- padding-right --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">khoảng đệm bên phải</label>\n <nz-input-number\n class="w-1/3"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-right\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-right\'] = $event + \'px\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="50"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-right\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-right\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n @if (classMinWidth) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều rộng tối thiểu</label>\n <nz-input-number\n class="w-1/3"\n [ngModel]="data[device + \'_class\'][classMinWidth][\'--min-width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMinWidth][\'--min-width\'] = $event + \'px\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="200"\n [ngModel]="data[device + \'_class\'][classMinWidth][\'--min-width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMinWidth][\'--min-width\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n @if (classMinHeight) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều rộng tối thiểu</label>\n <nz-input-number\n class="w-1/3"\n [ngModel]="data[device + \'_class\'][classMinHeight][\'--min-height\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMinHeight][\'--min-height\'] = $event + \'px\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="200"\n [ngModel]="data[device + \'_class\'][classMinHeight][\'--min-height\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMinHeight][\'--min-height\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n @if (classGap) {\n \x3c!-- Khoảng cách --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">Khoảng cách</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n />\n </div>\n <div class="px-2">\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n </div>\n }\n</div>\n',styles:[".text-format-config .format-actions{display:flex;align-items:center;gap:4px}.text-format-config .format-actions button[nz-button]{width:40px;height:32px;padding:0 8px}.text-format-config .format-actions button[nz-button].italic{font-style:italic}.text-format-config .format-actions .color-chip{width:30px;height:30px;border-radius:9999px;box-shadow:0 1px 4px #0000001f;border:1px solid rgba(0,0,0,.12);cursor:pointer}.text-format-config .mb-2{margin-bottom:8px}.text-format-config .w-full{width:100%}.text-format-config .font-family-config{width:66%}.text-format-config .font-family-config p{line-height:normal}.text-format-config .font-size-config{width:30%}.text-format-config .font-size-config p{line-height:normal}\n"],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:M.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:se},{kind:"component",type:re.NzSwitchComponent,selector:"nz-switch",inputs:["nzLoading","nzDisabled","nzControl","nzCheckedChildren","nzUnCheckedChildren","nzSize","nzId"],exportAs:["nzSwitch"]},{kind:"ngmodule",type:ne},{kind:"component",type:ee.NzSliderComponent,selector:"nz-slider",inputs:["nzDisabled","nzDots","nzIncluded","nzRange","nzVertical","nzReverse","nzDefaultValue","nzMarks","nzMax","nzMin","nzStep","nzTooltipVisible","nzTooltipPlacement","nzTipFormatter"],outputs:["nzOnAfterChange"],exportAs:["nzSlider"]},{kind:"ngmodule",type:G},{kind:"directive",type:H.NzInputDirective,selector:"input[nz-input],textarea[nz-input]",inputs:["nzBorderless","nzVariant","nzSize","nzStepperless","nzStatus","disabled","readonly"],exportAs:["nzInput"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]},{kind:"ngmodule",type:tn},{kind:"component",type:nn.NzSegmentedComponent,selector:"nz-segmented",inputs:["nzBlock","nzDisabled","nzOptions","nzVertical","nzShape","nzSize","nzName"],outputs:["nzValueChange"],exportAs:["nzSegmented"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"ngmodule",type:J},{kind:"component",type:Y.NzColorPickerComponent,selector:"nz-color-picker",inputs:["nzFormat","nzValue","nzSize","nzDefaultValue","nzTrigger","nzTitle","nzFlipFlop","nzShowText","nzOpen","nzAllowClear","nzDisabled","nzDisabledAlpha"],outputs:["nzOnChange","nzOnFormatChange","nzOnClear","nzOnOpenChange"],exportAs:["nzColorPicker"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"ngmodule",type:W},{kind:"directive",type:$.NzTooltipDirective,selector:"[nz-tooltip]",inputs:["nzTooltipTitle","nzTooltipTitleContext","nz-tooltip","nzTooltipTrigger","nzTooltipPlacement","nzTooltipOrigin","nzTooltipVisible","nzTooltipMouseEnterDelay","nzTooltipMouseLeaveDelay","nzTooltipOverlayClassName","nzTooltipOverlayStyle","nzTooltipArrowPointAtCenter","cdkConnectedOverlayPush","nzTooltipColor"],outputs:["nzTooltipVisibleChange"],exportAs:["nzTooltip"]},{kind:"pipe",type:ct,name:"wbnumber"}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Kt,decorators:[{type:l,args:[{selector:"wb-text-format-config",imports:[B,ie,se,ne,G,X,tn,j,J,ct,Z,W],template:'<div class="text-format-config p-2">\n \x3c!-- Cấu hình thẻ khi là văn bản --\x3e\n @if (configTag) {\n <nz-select\n nz-tooltip="Chọn thẻ HTML áp dụng cho văn bản"\n [nzOptions]="tagOptions"\n [(ngModel)]="data[device + \'_config\'][configTag]"\n nzPlaceHolder="Chọn thẻ"\n class="w-full mb-1"\n (ngModelChange)="onChangeTag()"\n ></nz-select>\n }\n\n @if (configFormatDate) {\n <div class="flex flex-col gap-2">\n <span class="m-0">Định dạng ngày tháng</span>\n <nz-select\n [nzOptions]="dateFormatOptions"\n [(ngModel)]="data[device + \'_config\'][configFormatDate]"\n nzPlaceHolder="Chọn định dạng ngày tháng"\n class="w-full mb-1"\n (ngModelChange)="updateConfig()"\n ></nz-select>\n </div>\n }\n @if (configMaxLine) {\n <div class="flex items-center justify-between">\n <p class="text-xs mb-1">Hiển thị số dòng tối đa</p>\n <nz-switch\n [(ngModel)]="data[device + \'_config\'][configMaxLine].use"\n (ngModelChange)="onChangeUseMaxLine()"\n ></nz-switch>\n </div>\n\n @if (data[device + \'_config\'][configMaxLine].use) {\n <div class="flex flex-col gap-2">\n <label for="cols" class="text-xs">Số dòng tối đa</label>\n <input\n id="cols"\n nz-input\n type="number"\n class="w-full"\n [min]="1"\n [max]="12"\n [step]="1"\n [placeholder]="\'Số dòng tối đa (1-7)\'"\n [(ngModel)]="data[device + \'_config\'][configMaxLine].value"\n (ngModelChange)="onChangeMaxLine()"\n (blur)="updateClassAndConfig()"\n />\n </div>\n }\n }\n\n \x3c!-- Nội dung --\x3e\n @if (configContent) {\n <div class="flex flex-col mb-1">\n <p class="m-0 text-tiny">{{ !placeholder ? \'Nội dung\' : \'Chữ nền\' }}</p>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n name="Nội dung"\n id="content"\n [(ngModel)]="\n data[device + \'_config\'][configContent][webBuilderService.projectWorking.language.default]\n "\n (blur)="updateConfig()"\n ></textarea>\n </div>\n }\n\n @if (configNotFound) {\n <div class="flex flex-col mb-1">\n <p class="m-0 text-tiny">{{ !placeholder ? \'Nội dung\' : \'Chữ nền\' }}</p>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n name="Nội dung"\n id="content"\n [(ngModel)]="\n data[device + \'_config\'][configNotFound][\n webBuilderService.projectWorking.language.default\n ]\n "\n (blur)="updateConfig()"\n ></textarea>\n </div>\n }\n\n \x3c!-- Kiểu chữ, Kích thước --\x3e\n @if (classContent) {\n <div class="flex items-center gap-1 mb-1 justify-between">\n <div class="flex flex-col font-family-config">\n <p class="m-0 text-tiny">Kiểu chữ</p>\n <nz-select\n [(ngModel)]="\n data[device + \'_class\'][classContent][\n \'--font-family\' + (placeholder ? \'-placeholder\' : \'\')\n ]\n "\n nzPlaceHolder="Chọn font"\n class="w-full"\n (ngModelChange)="updateClass()"\n >\n @for (font of fonts; track $index) {\n <nz-option [nzValue]="font.value" [nzLabel]="font.name"></nz-option>\n }\n </nz-select>\n </div>\n\n <div class="flex flex-col font-size-config">\n <p class="m-0 text-tiny">Kích thước</p>\n <nz-input-number\n class="w-full"\n [ngModel]="\n data[device + \'_class\'][classContent][\n \'--font-size\' + (placeholder ? \'-placeholder\' : \'\')\n ] | wbnumber\n "\n (ngModelChange)="\n data[device + \'_class\'][classContent][\n \'--font-size\' + (placeholder ? \'-placeholder\' : \'\')\n ] = $event + \'px\'\n "\n (nzBlur)="updateClass()"\n />\n </div>\n </div>\n }\n\n \x3c!-- Định dạng (B/I/U/line-through/uppercase + màu) --\x3e\n @if (classContent) {\n <div class="mb-2">\n <p class="m-0 text-tiny">Định dạng</p>\n <div class="format-actions">\n \x3c!-- Bold --\x3e\n <button\n nz-button\n [nzType]="\n data[device + \'_class\'][classContent][\n \'--font-weight\' + (placeholder ? \'-placeholder\' : \'\')\n ] == 900\n ? \'primary\'\n : \'default\'\n "\n (click)="\n data[device + \'_class\'][classContent][\n \'--font-weight\' + (placeholder ? \'-placeholder\' : \'\')\n ] =\n data[device + \'_class\'][classContent][\n \'--font-weight\' + (placeholder ? \'-placeholder\' : \'\')\n ] == 900\n ? 400\n : 900;\n updateClass()\n "\n >\n B\n </button>\n\n \x3c!-- Italic --\x3e\n <button\n nz-button\n [nzType]="\n data[device + \'_class\'][classContent][\n \'--font-style\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'italic\'\n ? \'primary\'\n : \'default\'\n "\n (click)="\n data[device + \'_class\'][classContent][\n \'--font-style\' + (placeholder ? \'-placeholder\' : \'\')\n ] =\n data[device + \'_class\'][classContent][\n \'--font-style\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'italic\'\n ? \'normal\'\n : \'italic\';\n updateClass()\n "\n >\n <span class="italic">I</span>\n </button>\n\n \x3c!-- Underline --\x3e\n <button\n nz-button\n [nzType]="\n data[device + \'_class\'][classContent][\n \'--text-decoration\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'underline\'\n ? \'primary\'\n : \'default\'\n "\n (click)="\n data[device + \'_class\'][classContent][\n \'--text-decoration\' + (placeholder ? \'-placeholder\' : \'\')\n ] =\n data[device + \'_class\'][classContent][\n \'--text-decoration\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'underline\'\n ? \'normal\'\n : \'underline\';\n updateClass()\n "\n >\n U\n </button>\n\n \x3c!-- Line-through --\x3e\n <button\n nz-button\n [nzType]="\n data[device + \'_class\'][classContent][\n \'--text-decoration\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'line-through\'\n ? \'primary\'\n : \'default\'\n "\n (click)="\n data[device + \'_class\'][classContent][\n \'--text-decoration\' + (placeholder ? \'-placeholder\' : \'\')\n ] =\n data[device + \'_class\'][classContent][\n \'--text-decoration\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'line-through\'\n ? \'normal\'\n : \'line-through\';\n updateClass()\n "\n >\n <i nz-icon nzType="strikethrough"></i>\n </button>\n\n \x3c!-- Uppercase --\x3e\n <button\n nz-button\n [nzType]="\n data[device + \'_class\'][classContent][\n \'--text-transform\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'uppercase\'\n ? \'primary\'\n : \'default\'\n "\n (click)="\n data[device + \'_class\'][classContent][\n \'--text-transform\' + (placeholder ? \'-placeholder\' : \'\')\n ] =\n data[device + \'_class\'][classContent][\n \'--text-transform\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'uppercase\'\n ? \'normal\'\n : \'uppercase\';\n updateClass()\n "\n >\n AB\n </button>\n\n \x3c!-- Color --\x3e\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="\n data[device + \'_class\'][classContent][\'--color\' + (placeholder ? \'-placeholder\' : \'\')]\n "\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="\n data[device + \'_class\'][classContent][\'--color\' + (placeholder ? \'-placeholder\' : \'\')]\n "\n ></div>\n </ng-template>\n </div>\n </div>\n }\n\n @if (\n data[device + \'_class\'][classContent][\n \'--text-decoration\' + (placeholder ? \'-placeholder\' : \'\')\n ] == \'underline\'\n ) {\n \x3c!-- Độ dày gạch chân --\x3e\n <div>\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Độ dày gạch chân</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="\n data[device + \'_class\'][classContent][\'--text-decoration-thickness\'] | wbnumber\n "\n (ngModelChange)="\n data[device + \'_class\'][classContent][\'--text-decoration-thickness\'] = $event + \'px\'\n "\n />\n </div>\n\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classContent][\'--text-decoration-thickness\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classContent][\'--text-decoration-thickness\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n \x3c!-- Khoảng cách gạch chân --\x3e\n <div>\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng cách gạch chân</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classContent][\'--text-underline-offset\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classContent][\'--text-underline-offset\'] = $event + \'px\'\n "\n />\n </div>\n\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classContent][\'--text-underline-offset\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classContent][\'--text-underline-offset\'] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n \x3c!-- Màu gạch chân --\x3e\n <div class="flex items-center justify-between mb-2">\n <label class="label">Màu gạch chân</label>\n <nz-color-picker\n class="color-chip"\n [nzFlipFlop]="flipFlop"\n [(ngModel)]="data[device + \'_class\'][classContent][\'--text-decoration-color\']"\n (nzOnChange)="updateClass()"\n ></nz-color-picker>\n <ng-template #flipFlop>\n <div\n class="color-chip"\n [style.background-color]="\n data[device + \'_class\'][classContent][\'--text-decoration-color\']\n "\n ></div>\n </ng-template>\n </div>\n }\n\n \x3c!-- Canh lề Flex (justify-content) --\x3e\n @if (classAlignFlex) {\n <div class="text-xs">Canh lề tổng</div>\n <div class="mb-2">\n <nz-segmented\n [nzOptions]="justifyOptions"\n [(ngModel)]="data[device + \'_class\'][classAlignFlex][\'--justify-content\']"\n (ngModelChange)="updateClass()"\n >\n </nz-segmented>\n </div>\n }\n\n \x3c!-- Canh lề (text-align) --\x3e\n @if (classAlign) {\n <div class="mb-2">\n <div class="text-xs">Canh lề chữ</div>\n <nz-segmented\n [nzOptions]="textAlignOptions"\n [(ngModel)]="data[device + \'_class\'][classAlign][\'--text-align\']"\n (ngModelChange)="updateClass()"\n ></nz-segmented>\n </div>\n }\n\n \x3c!-- Độ đậm chữ --\x3e\n @if (classFontWeight) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Độ đậm chữ</label>\n <nz-input-number\n class="w-30"\n [(ngModel)]="\n data[device + \'_class\'][classFontWeight][\n \'--font-weight\' + (placeholder ? \'-placeholder\' : \'\')\n ]\n "\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="100"\n [nzMin]="100"\n [nzMax]="900"\n [(ngModel)]="\n data[device + \'_class\'][classFontWeight][\n \'--font-weight\' + (placeholder ? \'-placeholder\' : \'\')\n ]\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n \x3c!-- Khoảng cách dòng --\x3e\n @if (classLineHeight) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng cách dòng</label>\n <nz-input-number\n class="w-30"\n [(ngModel)]="data[device + \'_class\'][classLineHeight][\'--line-height\']"\n [nzStep]="0.1"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="0.1"\n [nzMin]="0"\n [nzMax]="5"\n [(ngModel)]="data[device + \'_class\'][classLineHeight][\'--line-height\']"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n \x3c!-- Khoảng cách chữ --\x3e\n @if (classLetterSpacing) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Khoảng cách chữ</label>\n <nz-input-number\n class="w-30"\n [ngModel]="\n data[device + \'_class\'][classLetterSpacing][\n \'--letter-spacing\' + (placeholder ? \'-placeholder\' : \'\')\n ] | wbnumber\n "\n (ngModelChange)="\n data[device + \'_class\'][classLetterSpacing][\n \'--letter-spacing\' + (placeholder ? \'-placeholder\' : \'\')\n ] = $event + \'px\'\n "\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="1"\n [nzMax]="10"\n [ngModel]="\n data[device + \'_class\'][classLetterSpacing][\n \'--letter-spacing\' + (placeholder ? \'-placeholder\' : \'\')\n ] | wbnumber\n "\n (ngModelChange)="\n data[device + \'_class\'][classLetterSpacing][\n \'--letter-spacing\' + (placeholder ? \'-placeholder\' : \'\')\n ] = $event + \'px\'\n "\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n @if (classMargin) {\n \x3c!-- margin-left --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">khoảng đệm bên trái</label>\n <nz-input-number\n class="w-30"\n [ngModel]="data[device + \'_class\'][classMargin][\'--margin-left\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMargin][\'--margin-left\'] = $event + \'px\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="50"\n [ngModel]="data[device + \'_class\'][classMargin][\'--margin-left\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMargin][\'--margin-left\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- margin-right --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">khoảng đệm bên phải</label>\n <nz-input-number\n class="w-30"\n [ngModel]="data[device + \'_class\'][classMargin][\'--margin-right\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMargin][\'--margin-right\'] = $event + \'px\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="50"\n [ngModel]="data[device + \'_class\'][classMargin][\'--margin-right\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMargin][\'--margin-right\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n @if (classPadding) {\n \x3c!-- padding-top --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">khoảng đệm bên trên</label>\n <nz-input-number\n class="w-1/3"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-top\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-top\'] = $event + \'px\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="50"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-top\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-top\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- padding-bottom --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">khoảng đệm bên dưới</label>\n <nz-input-number\n class="w-1/3"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-bottom\'] | wbnumber"\n (ngModelChange)="\n data[device + \'_class\'][classPadding][\'--padding-bottom\'] = $event + \'px\'\n "\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="50"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-bottom\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-bottom\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- padding-left --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">khoảng đệm bên trái</label>\n <nz-input-number\n class="w-1/3"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-left\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-left\'] = $event + \'px\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="50"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-left\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-left\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n\n \x3c!-- padding-right --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">khoảng đệm bên phải</label>\n <nz-input-number\n class="w-1/3"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-right\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-right\'] = $event + \'px\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="50"\n [ngModel]="data[device + \'_class\'][classPadding][\'--padding-right\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classPadding][\'--padding-right\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n @if (classMinWidth) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều rộng tối thiểu</label>\n <nz-input-number\n class="w-1/3"\n [ngModel]="data[device + \'_class\'][classMinWidth][\'--min-width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMinWidth][\'--min-width\'] = $event + \'px\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="200"\n [ngModel]="data[device + \'_class\'][classMinWidth][\'--min-width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMinWidth][\'--min-width\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n @if (classMinHeight) {\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between">\n <label class="text-xs w-2/3">Chiều rộng tối thiểu</label>\n <nz-input-number\n class="w-1/3"\n [ngModel]="data[device + \'_class\'][classMinHeight][\'--min-height\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMinHeight][\'--min-height\'] = $event + \'px\'"\n (nzBlur)="updateClass()"\n />\n </div>\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="200"\n [ngModel]="data[device + \'_class\'][classMinHeight][\'--min-height\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classMinHeight][\'--min-height\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n }\n\n @if (classGap) {\n \x3c!-- Khoảng cách --\x3e\n <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3">Khoảng cách</label>\n <nz-input-number\n class="w-30"\n (nzBlur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n />\n </div>\n <div class="px-2">\n <nz-slider\n [nzStep]="1"\n [nzMin]="0"\n [nzMax]="100"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n (nzOnAfterChange)="updateClass()"\n ></nz-slider>\n </div>\n </div>\n }\n</div>\n',styles:[".text-format-config .format-actions{display:flex;align-items:center;gap:4px}.text-format-config .format-actions button[nz-button]{width:40px;height:32px;padding:0 8px}.text-format-config .format-actions button[nz-button].italic{font-style:italic}.text-format-config .format-actions .color-chip{width:30px;height:30px;border-radius:9999px;box-shadow:0 1px 4px #0000001f;border:1px solid rgba(0,0,0,.12);cursor:pointer}.text-format-config .mb-2{margin-bottom:8px}.text-format-config .w-full{width:100%}.text-format-config .font-family-config{width:66%}.text-format-config .font-family-config p{line-height:normal}.text-format-config .font-size-config{width:30%}.text-format-config .font-size-config p{line-height:normal}\n"]}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],classContent:[{type:s}],classGap:[{type:s}],classCursor:[{type:s}],classFontWeight:[{type:s}],classAlign:[{type:s}],classLineHeight:[{type:s}],classLetterSpacing:[{type:s}],classAlignFlex:[{type:s}],classMargin:[{type:s}],classMaxLine:[{type:s}],classPadding:[{type:s}],classMinWidth:[{type:s}],classMinHeight:[{type:s}],configContent:[{type:s}],configNotFound:[{type:s}],configHref:[{type:s}],configTag:[{type:s}],configMaxLine:[{type:s}],placeholder:[{type:s}],configFormatDate:[{type:s}]}});class Xt{webBuilderService;data;device;configTooltip;positionOptions=[{label:"Top",value:"top"},{label:"Right",value:"right"},{label:"Bottom",value:"bottom"},{label:"Left",value:"left"}];constructor(e){this.webBuilderService=e}ngOnInit(){}ngOnChanges(e){this.data[this.device+"_config"][this.configTooltip]||(this.data[this.device+"_config"][this.configTooltip]={value:{vi:""},position:"top"})}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Xt,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Xt,isStandalone:!0,selector:"wb-tool-tip-config",inputs:{data:"data",device:"device",configTooltip:"configTooltip"},usesOnChanges:!0,ngImport:t,template:'<div class="tool-tip-config p-2">\n \x3c!-- Nội dung --\x3e\n <div class="flex flex-col mb-1">\n <p class="m-0 text-tiny">Nội dung</p>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n name="Nội dung"\n id="content"\n [(ngModel)]="\n data[device + \'_config\'][configTooltip].value[\n webBuilderService.projectWorking.language.default\n ]\n "\n (blur)="updateConfig()"\n ></textarea>\n </div>\n\n <div class="flex flex-col gap-2">\n <p class="m-0 text-tiny">Vị trí</p>\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configTooltip].position"\n (ngModelChange)="updateConfig()"\n >\n @for (item of positionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:G},{kind:"directive",type:H.NzInputDirective,selector:"input[nz-input],textarea[nz-input]",inputs:["nzBorderless","nzVariant","nzSize","nzStepperless","nzStatus","disabled","readonly"],exportAs:["nzInput"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Xt,decorators:[{type:l,args:[{selector:"wb-tool-tip-config",imports:[G,B,ie],template:'<div class="tool-tip-config p-2">\n \x3c!-- Nội dung --\x3e\n <div class="flex flex-col mb-1">\n <p class="m-0 text-tiny">Nội dung</p>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n name="Nội dung"\n id="content"\n [(ngModel)]="\n data[device + \'_config\'][configTooltip].value[\n webBuilderService.projectWorking.language.default\n ]\n "\n (blur)="updateConfig()"\n ></textarea>\n </div>\n\n <div class="flex flex-col gap-2">\n <p class="m-0 text-tiny">Vị trí</p>\n <nz-select\n class="mb-2"\n style="width: 100%"\n [(ngModel)]="data[device + \'_config\'][configTooltip].position"\n (ngModelChange)="updateConfig()"\n >\n @for (item of positionOptions; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],configTooltip:[{type:s}]}});class qt{webBuilderService;msg;data;device;configImg="img";optionsUpload=[{label:"Từ thiết bị của bạn",value:"device"},{label:"Từ URL",value:"url"}];constructor(e,n){this.webBuilderService=e,this.msg=n}ngOnInit(){}onFileSelected(e){const n=e.target.files[0];n&&this.webBuilderService.upLoadImage(n,this.data[this.device+"_config"][this.configImg].src,"object/").then(e=>{this.data[this.device+"_config"][this.configImg].src=e.data,this.msg.success("Upload ảnh thành công"),this.updateConfig()})}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:qt,deps:[{token:xn},{token:A.NzMessageService}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:qt,isStandalone:!0,selector:"wb-upload-image-config",inputs:{data:"data",device:"device",configImg:"configImg"},ngImport:t,template:'<div class="upload-image-config p-2">\n <div class="flex flex-col gap-2 mb-2">\n <label for="">Nguồn tải ảnh</label>\n\n <nz-select\n [(ngModel)]="data[device + \'_config\'][configImg].upload_type"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Nguồn hình ảnh hiển thị lên"\n >\n @for (item of optionsUpload; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (data[device + \'_config\'][configImg].upload_type == \'device\') {\n <button class="mb-2" style="width: 100%" (click)="fileInput.click()" nz-button>\n <nz-icon nzType="upload" nzTheme="outline" />\n Tải ảnh lên\n </button>\n\n <input\n #fileInput\n type="file"\n id="upload-image"\n (change)="onFileSelected($event)"\n accept="image/*"\n hidden\n />\n }\n\n @if (data[device + \'_config\'][configImg].upload_type == \'url\') {\n <div class="flex flex-col gap-2">\n <label for="src">Đường dẫn ảnh</label>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configImg].src"\n name="Đường dẫn ảnh"\n (blur)="updateConfig()"\n ></textarea>\n </div>\n }\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"ngmodule",type:G},{kind:"directive",type:H.NzInputDirective,selector:"input[nz-input],textarea[nz-input]",inputs:["nzBorderless","nzVariant","nzSize","nzStepperless","nzStatus","disabled","readonly"],exportAs:["nzInput"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]},{kind:"directive",type:ae.NzWaveDirective,selector:'[nz-wave],button[nz-button]:not([nzType="link"]):not([nzType="text"])',inputs:["nzWaveExtraNode"],exportAs:["nzWave"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:qt,decorators:[{type:l,args:[{selector:"wb-upload-image-config",imports:[B,ie,j,G,X],template:'<div class="upload-image-config p-2">\n <div class="flex flex-col gap-2 mb-2">\n <label for="">Nguồn tải ảnh</label>\n\n <nz-select\n [(ngModel)]="data[device + \'_config\'][configImg].upload_type"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Nguồn hình ảnh hiển thị lên"\n >\n @for (item of optionsUpload; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (data[device + \'_config\'][configImg].upload_type == \'device\') {\n <button class="mb-2" style="width: 100%" (click)="fileInput.click()" nz-button>\n <nz-icon nzType="upload" nzTheme="outline" />\n Tải ảnh lên\n </button>\n\n <input\n #fileInput\n type="file"\n id="upload-image"\n (change)="onFileSelected($event)"\n accept="image/*"\n hidden\n />\n }\n\n @if (data[device + \'_config\'][configImg].upload_type == \'url\') {\n <div class="flex flex-col gap-2">\n <label for="src">Đường dẫn ảnh</label>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configImg].src"\n name="Đường dẫn ảnh"\n (blur)="updateConfig()"\n ></textarea>\n </div>\n }\n</div>\n'}]}],ctorParameters:()=>[{type:xn},{type:A.NzMessageService}],propDecorators:{data:[{type:s}],device:[{type:s}],configImg:[{type:s}]}});class Ut{webBuilderService;data;device;configVideo="video";optionsUpload=[{label:"Từ URL",value:"url"}];constructor(e){this.webBuilderService=e}ngOnInit(){}updateConfig(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_config"]:this.data[this.device+"_config"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Ut,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Ut,isStandalone:!0,selector:"wb-upload-video-config",inputs:{data:"data",device:"device",configVideo:"configVideo"},ngImport:t,template:'<div class="upload-image-config p-2">\n <div class="flex flex-col gap-2 mb-2">\n <label for="">Nguồn tải ảnh</label>\n\n <nz-select\n [(ngModel)]="data[device + \'_config\'][configVideo].upload_type"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Nguồn hình ảnh hiển thị lên"\n >\n @for (item of optionsUpload; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (data[device + \'_config\'][configVideo].upload_type == \'device\') {\n \x3c!-- <button class="mb-2" style="width: 100%" (click)="fileInput.click()" nz-button>\n <nz-icon nzType="upload" nzTheme="outline" />\n Tải ảnh lên\n </button> --\x3e\n\n \x3c!-- <input\n #fileInput\n type="file"\n id="upload-image"\n (change)="onFileSelected($event)"\n accept="image/*"\n hidden\n /> --\x3e\n }\n\n @if (data[device + \'_config\'][configVideo].upload_type == \'url\') {\n <div class="flex flex-col gap-2">\n <label for="src">Đường dẫn ảnh</label>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configVideo].src"\n name="Đường dẫn ảnh"\n (blur)="updateConfig()"\n ></textarea>\n </div>\n }\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:ie},{kind:"component",type:te.NzOptionComponent,selector:"nz-option",inputs:["nzTitle","nzLabel","nzValue","nzKey","nzDisabled","nzHide","nzCustomContent"],exportAs:["nzOption"]},{kind:"component",type:te.NzSelectComponent,selector:"nz-select",inputs:["nzId","nzSize","nzStatus","nzVariant","nzOptionHeightPx","nzOptionOverflowSize","nzDropdownClassName","nzDropdownMatchSelectWidth","nzDropdownStyle","nzNotFoundContent","nzPlaceHolder","nzPlacement","nzMaxTagCount","nzDropdownRender","nzCustomTemplate","nzPrefix","nzSuffixIcon","nzClearIcon","nzRemoveIcon","nzMenuItemSelectedIcon","nzTokenSeparators","nzMaxTagPlaceholder","nzMaxMultipleCount","nzMode","nzFilterOption","compareWith","nzAllowClear","nzBorderless","nzShowSearch","nzLoading","nzAutoFocus","nzAutoClearSearchValue","nzServerSearch","nzDisabled","nzOpen","nzSelectOnTab","nzBackdrop","nzOptions","nzShowArrow"],outputs:["nzOnSearch","nzScrollToBottom","nzOpenChange","nzBlur","nzFocus","nzOnClear"],exportAs:["nzSelect"]},{kind:"ngmodule",type:j},{kind:"ngmodule",type:G},{kind:"directive",type:H.NzInputDirective,selector:"input[nz-input],textarea[nz-input]",inputs:["nzBorderless","nzVariant","nzSize","nzStepperless","nzStatus","disabled","readonly"],exportAs:["nzInput"]},{kind:"ngmodule",type:X}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Ut,decorators:[{type:l,args:[{selector:"wb-upload-video-config",imports:[B,ie,j,G,X],template:'<div class="upload-image-config p-2">\n <div class="flex flex-col gap-2 mb-2">\n <label for="">Nguồn tải ảnh</label>\n\n <nz-select\n [(ngModel)]="data[device + \'_config\'][configVideo].upload_type"\n (ngModelChange)="updateConfig()"\n nzPlaceHolder="Nguồn hình ảnh hiển thị lên"\n >\n @for (item of optionsUpload; track $index) {\n <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>\n }\n </nz-select>\n </div>\n\n @if (data[device + \'_config\'][configVideo].upload_type == \'device\') {\n \x3c!-- <button class="mb-2" style="width: 100%" (click)="fileInput.click()" nz-button>\n <nz-icon nzType="upload" nzTheme="outline" />\n Tải ảnh lên\n </button> --\x3e\n\n \x3c!-- <input\n #fileInput\n type="file"\n id="upload-image"\n (change)="onFileSelected($event)"\n accept="image/*"\n hidden\n /> --\x3e\n }\n\n @if (data[device + \'_config\'][configVideo].upload_type == \'url\') {\n <div class="flex flex-col gap-2">\n <label for="src">Đường dẫn ảnh</label>\n <textarea\n nz-input\n rows="3"\n class="w-full"\n [(ngModel)]="data[device + \'_config\'][configVideo].src"\n name="Đường dẫn ảnh"\n (blur)="updateConfig()"\n ></textarea>\n </div>\n }\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],configVideo:[{type:s}]}});class Yt{constructor(){}render(e){return e&&{WbHideShowConfig:Ot,WbTextFormatConfig:Kt,WbBackgroundColorConfig:gt,WbIconConfig:It,WbBorderRadiusConfig:bt,WbBorderConfig:mt,WbShadowConfig:Rt,WbLinkPageConfig:Tt,WbAnimationConfig:pt,WbPaddingConfig:$t,WbBackgroundImageConfig:ut,WbScrollbarConfig:Et,WbFreeblockConfig:Mt,WbDialogConfig:yt,WbUploadImageConfig:qt,WbObjectFitConfig:Nt,WbCkeditorConfig:zt,WbMenuContentConfig:Ft,WbGridConfig:Bt,WbSlideConfig:Ht,WbFrameContentConfig:St,WbRotateConfig:Lt,WbOrdinalConfig:Vt,WbUploadVideoConfig:Ut,WbFixedConfig:xt,WbStickyConfig:Gt,WbPaginationConfig:Wt,WbFilterConfig:_t,WbToolTipConfig:Xt,WbBannerAnimationConfig:ht}[e]||null}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Yt,deps:[],target:t.ɵɵFactoryTarget.Injectable});static"ɵprov"=t.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Yt,providedIn:"root"})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Yt,decorators:[{type:a,args:[{providedIn:"root"}]}],ctorParameters:()=>[]});class Jt{map;data;device;class;config;animation;type;tabs=[];constructor(e){this.map=e}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device}},{label:"Khoảng đệm trong",component:"WbPaddingConfig",props:{data:n,device:this.device,classPadding:"block-blank"}},{label:"Màu nền",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"block-blank",configBgColor:"bg_color"}},{label:"Hình nền",component:"WbBackgroundImageConfig",props:{data:n,device:this.device,classBgImage:"block-blank"}},{label:"Bo tròn",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"block-blank"}},{label:"Đổ bóng",component:"WbShadowConfig",props:{data:n,device:this.device,classShadow:"block-blank",configShadow:"shadow"}},{label:"Kiểu viền",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"block-blank"}},{label:"Hiệu ứng",component:"WbAnimationConfig",props:{data:n,device:this.device}}],"block_chatbox"==this.data.type&&this.tabs.splice(this.tabs.length-1,0,{label:"Cấu hình cố định",component:"WbFixedConfig",props:{data:n,device:this.device,classFixed:"block-blank",configFixed:"fixed"}})}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Jt,deps:[{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Jt,isStandalone:!0,selector:"wb-block-blank-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Jt,decorators:[{type:l,args:[{selector:"wb-block-blank-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class Qt{map;data;device;class;config;animation;type;tabs=[];constructor(e){this.map=e}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,configDragMode:"drag_mode"}},{label:"Màu nền",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"frame-blank",configBgColor:"bg_color"}},{label:"Hình nền",component:"WbBackgroundImageConfig",props:{data:n,device:this.device,classBgImage:"frame-blank"}},{label:"Bo tròn",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"frame-blank"}},{label:"Đổ bóng",component:"WbShadowConfig",props:{data:n,device:this.device,classShadow:"frame-blank",configShadow:"shadow"}},{label:"Khoảng đệm trong",component:"WbPaddingConfig",props:{data:n,device:this.device,classPadding:"frame-blank"}},{label:"Kiểu viền",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"frame-blank"}},{label:"Cấu hình cố định",component:"WbStickyConfig",props:{data:n,device:this.device,configSticky:"sticky"}},{label:"Hiệu ứng",component:"WbAnimationConfig",props:{data:n,device:this.device}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Qt,deps:[{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Qt,isStandalone:!0,selector:"wb-frame-blank-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]},{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Qt,decorators:[{type:l,args:[{selector:"wb-frame-blank-config",imports:[k,R],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class Zt{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device}},{label:"Cột/Hàng",component:"WbGridConfig",props:{data:n,device:this.device,configGrid:"grid",classGrid:"frame-products__grid"}},{label:"Cấu hình Slide",component:"WbSlideConfig",props:{data:n,device:this.device,configSlide:"slide"}},{label:"Nút biểu tượng(trước)",component:"WbIconConfig",props:{data:n,device:this.device,configIcon:"icon_left",classIcon:"frame-products__btn-left-icon",classBgIcon:"frame-products__btn-left",classWidthButtonIcon:"frame-products__btn-left",classHeightButtonIcon:"frame-products__btn-left"}},{label:"Bo tròn nút(trước)",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"frame-products__btn-left"}},{label:"Kiểu viền nút(trước)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"frame-products__btn-left"}},{label:"Bo tròn nút(trước)",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"frame-products__btn-right"}},{label:"Nút biểu tượng(sau)",component:"WbIconConfig",props:{data:n,device:this.device,configIcon:"icon_right",classIcon:"frame-products__btn-right-icon",classBgIcon:"frame-products__btn-right",classWidthButtonIcon:"frame-products__btn-right",classHeightButtonIcon:"frame-products__btn-right"}},{label:"Kiểu viền nút(sau)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"frame-products__btn-right"}},{label:"Màu nền",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"frame-products__item",configBgColor:"bg_color"}},{label:"Bo tròn",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"frame-products"}},{label:"Đổ bóng chung",component:"WbShadowConfig",props:{data:n,device:this.device,classShadow:"frame-products",configShadow:"shadow"}},{label:"Đổ bóng(phần tử)",component:"WbShadowConfig",props:{data:n,device:this.device,classShadow:"frame-products__item",configShadow:"shadow_item"}},{label:"Kiểu viền",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"frame-products"}},{label:"Kiểu viền phần tử",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"frame-products__item"}},{label:"Chỉnh sửa nội dung",component:"WbFrameContentConfig",props:{data:n,device:this.device}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Zt,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Zt,isStandalone:!0,selector:"wb-frame-products-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]},{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Zt,decorators:[{type:l,args:[{selector:"wb-frame-products-config",imports:[k,R],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class ei{data;device;class;config;animation;type;constructor(){}ngOnInit(){}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ei,deps:[],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:ei,isStandalone:!1,selector:"wb-frame-product-detail-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},ngImport:t,template:"<p>frame-product-detail-config works!</p>\n",styles:[""]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ei,decorators:[{type:l,args:[{selector:"wb-frame-product-detail-config",standalone:!1,template:"<p>frame-product-detail-config works!</p>\n"}]}],ctorParameters:()=>[],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class ni{map;data;device;class;config;animation;type;tabs=[];constructor(e){this.map=e}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,configDragMode:"drag_mode"}},{label:"Thành phần",component:"WbOrdinalConfig",props:{data:n,device:this.device,classJustifyContent:"frame-tab__header",classGap:"frame-tab__header",configPositionTab:"position_tab"}},{label:"Định dạng văn bản(Đã chọn)",component:"WbTextFormatConfig",props:{data:n,device:this.device,classContent:"+frame-tab__header-item-content",classAlignFlex:"+frame-tab__header-item",classLineHeight:"+frame-tab__header-item-content",classLetterSpacing:"+frame-tab__header-item-content",classPadding:"+frame-tab__header-item",classFontWeight:"+frame-tab__header-item-content",classMinWidth:"+frame-tab__header-item",classMinHeight:"+frame-tab__header-item"}},{label:"Định dạng văn bản(Chưa chọn chọn)",component:"WbTextFormatConfig",props:{data:n,device:this.device,classContent:"-frame-tab__header-item-content",classAlignFlex:"-frame-tab__header-item",classLineHeight:"-frame-tab__header-item-content",classLetterSpacing:"-frame-tab__header-item-content",classPadding:"-frame-tab__header-item",classFontWeight:"-frame-tab__header-item-content",classMinWidth:"-frame-tab__header-item",classMinHeight:"-frame-tab__header-item"}},{label:"Đổ bóng(Đã chọn)",component:"WbShadowConfig",props:{data:n,device:this.device,classShadow:"+frame-tab__header-item",configShadow:"+shadow"}},{label:"Đổ bóng(Chưa chọn)",component:"WbShadowConfig",props:{data:n,device:this.device,classShadow:"-frame-tab__header-item",configShadow:"-shadow"}},{label:"Màu nền(Đã chọn)",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"+frame-tab__header-item",configBgColor:"+bg_color"}},{label:"Màu nền(Chưa chọn)",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"-frame-tab__header-item",configBgColor:"-bg_color"}},{label:"Bo tròn(Đã chọn)",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"+frame-tab__header-item"}},{label:"Bo tròn(Chưa chọn)",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"-frame-tab__header-item"}},{label:"Kiểu viền(Đã chọn)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"+frame-tab__header-item"}},{label:"Kiểu viền(Chưa chọn)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"-frame-tab__header-item"}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ni,deps:[{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:ni,isStandalone:!0,selector:"wb-frame-tab-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ni,decorators:[{type:l,args:[{selector:"wb-frame-tab-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class ti{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,classCursor:"button",configDragMode:"drag_mode"}},{label:"Định dạng văn bản",component:"WbTextFormatConfig",props:{data:n,device:this.device,classContent:"button__content",classAlignFlex:"button",classLineHeight:"button__content",classLetterSpacing:"button__content",classMargin:"button__content",classFontWeight:"button__content",configContent:"content"}},{label:"Màu nền",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"button",configBgColor:"bg_color"}},{label:"Biểu tượng",component:"WbIconConfig",props:{data:n,device:this.device,configIcon:"icon",classIcon:"button__icon",classIconPosition:"button"}},{label:"Bo tròn",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"button"}},{label:"Đổ bóng",component:"WbShadowConfig",props:{data:n,device:this.device,classShadow:"button",configShadow:"shadow"}},{label:"Kiểu viền",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"button",configBorderColor:"border_color"}},{label:"Điều hướng",component:"WbLinkPageConfig",props:{data:n,device:this.device,configLinkPage:"router"}},{label:"Hiệu ứng",component:"WbAnimationConfig",props:{data:n,device:this.device}}],"object_button_dialog"==this.data.type&&this.tabs.splice(this.tabs.length-1,0,{label:"Cấu hình hộp thoại",component:"WbDialogConfig",props:{data:n,device:this.device,configDialog:"dialog"}})}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ti,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:ti,isStandalone:!0,selector:"wb-button-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ti,decorators:[{type:l,args:[{selector:"wb-button-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class ii{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,classCursor:"text",configDragMode:"drag_mode"}},{label:"Định dạng văn bản",component:"WbTextFormatConfig",props:{data:n,device:this.device,classContent:"text__content",classAlignFlex:"text",classAlign:"text__content",classLineHeight:"text__content",classLetterSpacing:"text__content",classCursor:"text",classFontWeight:"text__content",classMaxLine:"text__content",classMargin:"text__content",configTag:"tag",configHref:"href",configContent:"content",configMaxLine:"max_line",configFormatDate:"object_news_publish"==this.data.type?"format_date":null}},{label:"Tooltip",component:"WbToolTipConfig",props:{data:n,device:this.device,configTooltip:"tool_tip"}},{label:"Màu nền",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"text",configBgColor:"bg_color"}},{label:"Biểu tượng",component:"WbIconConfig",props:{data:n,device:this.device,configIcon:"icon",classIcon:"text__icon",classIconPosition:"text"}},{label:"Bo tròn",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"text"}},{label:"Kiểu viền",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"text"}},{label:"Điều hướng",component:"WbLinkPageConfig",props:{data:n,device:this.device,configLinkPage:"router"}},{label:"Hiệu ứng",component:"WbAnimationConfig",props:{data:n,device:this.device}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ii,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:ii,isStandalone:!0,selector:"wb-text-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ii,decorators:[{type:l,args:[{selector:"wb-text-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class oi{map;data;device;class;config;animation;type;tabs=[];constructor(e){this.map=e}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,classCursor:"image",configEnableZoom:"object_product_image"==this.data.type?"enable_zoom":null,configDragMode:"drag_mode"}},{label:"Tải hình ảnh",component:"WbUploadImageConfig",props:{data:n,device:this.device,configImg:"img"}},{label:"Độ bao phủ",component:"WbObjectFitConfig",props:{data:n,device:this.device,classObjectFit:"image__img"}},{label:"Bo tròn",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"image"}},{label:"Đổ bóng",component:"WbShadowConfig",props:{data:n,device:this.device,classShadow:"image",configShadow:"shadow"}},{label:"Kiểu viền",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"image",configBorderColor:"border_color"}},{label:"Điều hướng",component:"WbLinkPageConfig",props:{data:n,device:this.device,configLinkPage:"router"}},{label:"Hiệu ứng",component:"WbAnimationConfig",props:{data:n,device:this.device}}],"object_image"!=this.data.type&&(this.tabs=this.tabs.filter(e=>"Tải hình ảnh"!=e.label))}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:oi,deps:[{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:oi,isStandalone:!0,selector:"wb-image-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:oi,decorators:[{type:l,args:[{selector:"wb-image-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class ai{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,classCursor:"breadcumb"}},{label:"Định dạng văn bản",component:"WbTextFormatConfig",props:{data:n,device:this.device,classContent:"breadcumb__content",classAlign:"breadcumb",classLineHeight:"breadcumb__content",classLetterSpacing:"breadcumb__content",classMargin:"breadcumb__content",classFontWeight:"breadcumb__content"}},{label:"Định dạng văn bản trang hiện tại",component:"WbTextFormatConfig",props:{data:n,device:this.device,classContent:"breadcumb__current",classLineHeight:"breadcumb__current",classLetterSpacing:"breadcumb__current",classMargin:"breadcumb__current",classFontWeight:"breadcumb__current"}},{label:"Màu nền",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"breadcumb",configBgColor:"bg_color"}},{label:"Biểu tượng",component:"WbIconConfig",props:{data:n,device:this.device,configIcon:"icon",classIcon:"breadcumb__icon"}},{label:"Bo tròn",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"breadcumb"}},{label:"Điều hướng",component:"WbLinkPageConfig",props:{data:n,device:this.device,configLinkPage:"router"}},{label:"Hiệu ứng",component:"WbAnimationConfig",props:{data:n,device:this.device}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ai,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:ai,isStandalone:!0,selector:"wb-breadcumb-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ai,decorators:[{type:l,args:[{selector:"wb-breadcumb-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class ri{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data||e.device||e.config||e.class){const n=e.data?.currentValue??this.data;this.onChangeClass(n)}}onChangeClass(e){["horizontal","vertical"].includes(this.config.type)&&(this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:e,device:this.device,configDragMode:"drag_mode"}},{label:"Định dạng văn bản(cha)",component:"WbTextFormatConfig",props:{data:e,device:this.device,classContent:(this.data.isActive?"+":"-")+"menu-horizontal__item-content",classAlignFlex:(this.data.isActive?"+":"-")+"menu-horizontal__item",classLineHeight:(this.data.isActive?"+":"-")+"menu-horizontal__item-content",classLetterSpacing:(this.data.isActive?"+":"-")+"menu-horizontal__item-content",classMargin:(this.data.isActive?"+":"-")+"menu-horizontal__item-content",classFontWeight:(this.data.isActive?"+":"-")+"menu-horizontal__item-content",classGap:"menu-horizontal"}},{label:"Màu nền(cha)",component:"WbBackgroundColorConfig",props:{data:e,device:this.device,classBgColor:(this.data.isActive?"+":"-")+"menu-horizontal__item",configBgColor:(this.data.isActive?"+":"-")+"bg_color"}},{label:"Bo tròn(cha)",component:"WbBorderRadiusConfig",props:{data:e,device:this.device,classBorderRadius:(this.data.isActive?"+":"-")+"menu-horizontal__item"}},{label:"Đổ bóng(cha)",component:"WbShadowConfig",props:{data:e,device:this.device,classShadow:"menu-horizontal",configShadow:"shadow"}},{label:"Kiểu viền(cha)",component:"WbBorderConfig",props:{data:e,device:this.device,classBorder:(this.data.isActive?"+":"-")+"menu-horizontal__item"}},{label:"Icon trước(cha)",component:"WbIconConfig",props:{data:e,device:this.device,classIcon:(this.data.isActive?"+":"-")+"menu-horizontal__item-icon-before"}},{label:"Icon sau(cha)",component:"WbIconConfig",props:{data:e,device:this.device,classIcon:(this.data.isActive?"+":"-")+"menu-horizontal__item-icon-after"}},{label:"Định dạng văn bản(con)",component:"WbTextFormatConfig",is_child:!0,props:{data:e,device:this.device,classContent:(this.data.isActive?"+":"-")+"menu-horizontal__item-content--child",classAlignFlex:(this.data.isActive?"+":"-")+"menu-horizontal__item--child",classLineHeight:(this.data.isActive?"+":"-")+"menu-horizontal__item-content--child",classLetterSpacing:(this.data.isActive?"+":"-")+"menu-horizontal__item-content--child",classMargin:(this.data.isActive?"+":"-")+"menu-horizontal__item-content--child",classFontWeight:(this.data.isActive?"+":"-")+"menu-horizontal__item-content--child"}},{label:"Màu nền(con)",component:"WbBackgroundColorConfig",is_child:!0,props:{data:e,device:this.device,classBgColor:(this.data.isActive?"+":"-")+"menu-horizontal__item--child",configBgColor:(this.data.isActive?"+":"-")+"bg_color_child"}},{label:"Bo tròn chung(con)",component:"WbBorderRadiusConfig",is_child:!0,props:{data:e,device:this.device,classBorderRadius:"menu-horizontal__children",isFirstChildLastChild:!0}},{label:"Bo tròn(con)",component:"WbBorderRadiusConfig",is_child:!0,props:{data:e,device:this.device,classBorderRadius:(this.data.isActive?"+":"-")+"menu-horizontal__item--child"}},{label:"Đổ bóng(con)",component:"WbShadowConfig",is_child:!0,props:{data:e,device:this.device,classShadow:"menu-horizontal__children",configShadow:"shadow-child"}},{label:"Kiểu viền chung(con)",component:"WbBorderConfig",is_child:!0,props:{data:e,device:this.device,classBorder:"menu-horizontal__children"}},{label:"Kiểu viền(con)",component:"WbBorderConfig",is_child:!0,props:{data:e,device:this.device,classBorder:(this.data.isActive?"+":"-")+"menu-horizontal__item--child"}},{label:"Icon trước(con)",is_child:!0,component:"WbIconConfig",props:{data:e,device:this.device,classIcon:(this.data.isActive?"+":"-")+"menu-horizontal__item-icon-before--child"}},{label:"Icon sau(con)",is_child:!0,component:"WbIconConfig",props:{data:e,device:this.device,classIcon:(this.data.isActive?"+":"-")+"menu-horizontal__item-icon-after--child"}},{label:"Chỉnh sửa nội dung",component:"WbMenuContentConfig",props:{data:e,device:this.device}},{label:"Hiệu ứng",component:"WbAnimationConfig",props:{data:e,device:this.device}}])}onMouseEnter(e){e.is_child&&(this.data.hover=this.config.data_list.find(e=>e.children?.length)?.key||"")}onMouseLeave(e){e.is_child&&(this.data.hover="")}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ri,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:ri,isStandalone:!0,selector:"wb-menu-horizontal-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n <div class="flex justify-between items-center px-2">\n <p class="text-xs mb-1">Thiết kế nút {{ data.isActive ? \'đã chọn\' : \'chưa chọn\' }}</p>\n <nz-switch [(ngModel)]="data.isActive" (ngModelChange)="onChangeClass(data)"></nz-switch>\n </div>\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]},{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:se},{kind:"component",type:re.NzSwitchComponent,selector:"nz-switch",inputs:["nzLoading","nzDisabled","nzControl","nzCheckedChildren","nzUnCheckedChildren","nzSize","nzId"],exportAs:["nzSwitch"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ri,decorators:[{type:l,args:[{selector:"wb-menu-horizontal-config",imports:[B,k,R,se],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n <div class="flex justify-between items-center px-2">\n <p class="text-xs mb-1">Thiết kế nút {{ data.isActive ? \'đã chọn\' : \'chưa chọn\' }}</p>\n <nz-switch [(ngModel)]="data.isActive" (ngModelChange)="onChangeClass(data)"></nz-switch>\n </div>\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class si{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,classCursor:"input"}},{label:"Chữ nền",component:"WbTextFormatConfig",props:{data:n,device:this.device,placeholder:!0,classContent:"input__field",classLineHeight:"input__field",classLetterSpacing:"input__field",classFontWeight:"input__field",configContent:"placeholder"}},{label:"Văn bản nhập",component:"WbTextFormatConfig",props:{data:n,device:this.device,classContent:"input__field",classLineHeight:"input__field",classLetterSpacing:"input__field",classPadding:"input__field",classFontWeight:"input__field"}},{label:"Màu nền",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"input",configBgColor:"bg_color"}},{label:"Biểu tượng",component:"WbIconConfig",props:{data:n,device:this.device,configIcon:"icon",classBgIcon:"input__icon",classIcon:"input__icon-inner",classWidthButtonIcon:"input__icon"}},{label:"Bo tròn tổng",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"input"}},{label:"Bo tròn ô nhập",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"input__field"}},{label:"Kiểu viền tổng",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"input",classOutline:"input"}},{label:"Kiểu viền ô nhập",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"input__field",classOutline:"input__field"}},{label:"Đổ bóng",component:"WbShadowConfig",props:{data:n,device:this.device,classShadow:"input",configShadow:"shadow"}},{label:"Cấu hình hộp thoại",component:"WbDialogConfig",props:{data:n,device:this.device,configDialog:"dialog"}},{label:"Hiệu ứng",component:"WbAnimationConfig",props:{data:n,device:this.device}}],"object_product_input_search"==this.data.type?this.tabs.splice(this.tabs.length-1,0,{label:"Điều hướng(Enter)",component:"WbLinkPageConfig",props:{data:n,device:this.device,configLinkPage:"router"}}):this.tabs=this.tabs.filter(e=>"Cấu hình hộp thoại"!=e.label)}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:si,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:si,isStandalone:!0,selector:"wb-input-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:si,decorators:[{type:l,args:[{selector:"wb-input-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class li{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,configDragMode:"drag_mode"}},{label:"Chỉnh sửa nội dung",component:"WbCkeditorConfig",props:{data:n,device:this.device,configContent:"content"}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:li,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:li,isStandalone:!0,selector:"wb-text-paragraph-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:li,decorators:[{type:l,args:[{selector:"wb-text-paragraph-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class ci{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,classGap:"button-quantity"}},{label:"Định dạng văn bản(ô nhập)",component:"WbTextFormatConfig",props:{data:n,device:this.device,classContent:"button-quantity__input",classLineHeight:"button-quantity__input",classLetterSpacing:"button-quantity__input",classPadding:"button-quantity__input",classFontWeight:"button-quantity__input"}},{label:"Kiểu viền(ô nhập)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"button-quantity__input"}},{label:"Màu nền(ô nhập)",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"button-quantity__input",configBgColor:"bg_color_input"}},{label:"Bo tròn(ô nhập)",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"button-quantity__input"}},{label:"Màu nền(nút trước)",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"button-quantity__before",configBgColor:"bg_color_before"}},{label:"Biểu tượng(nút trước)",component:"WbIconConfig",props:{data:n,device:this.device,configIcon:"icon_before",classIcon:"button-quantity__before-icon"}},{label:"Bo tròn(nút trước)",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"button-quantity__before"}},{label:"Kiểu viền(nút trước)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"button-quantity__before"}},{label:"Màu nền(nút sau)",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"button-quantity__after",configBgColor:"bg_color_after"}},{label:"Biểu tượng(nút sau)",component:"WbIconConfig",props:{data:n,device:this.device,configIcon:"icon_after",classIcon:"button-quantity__after-icon"}},{label:"Bo tròn(nút sau)",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"button-quantity__after"}},{label:"Kiểu viền(nút sau)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"button-quantity__after"}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ci,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:ci,isStandalone:!0,selector:"wb-button-quantity-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ci,decorators:[{type:l,args:[{selector:"wb-button-quantity-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class di{data;device;class;config;animation;type;tabs=[];constructor(){}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device}},{label:"Chữ nền",component:"WbTextFormatConfig",props:{data:n,device:this.device,placeholder:!0,classContent:"select__placeholder",classLineHeight:"select__placeholder",classLetterSpacing:"select__placeholder",classFontWeight:"select__placeholder",configContent:"placeholder"}},{label:"Định dạng văn bản",component:"WbTextFormatConfig",props:{data:n,device:this.device,classContent:"select",classLineHeight:"select",classLetterSpacing:"select",classPadding:"select__display",classFontWeight:"select"}},{label:"Màu nền",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"select__display",configBgColor:"bg_color"}},{label:"Biểu tượng",component:"WbIconConfig",props:{data:n,device:this.device,configIcon:"icon",classIcon:"select__icon",classIconPosition:"select__display"}},{label:"Bo tròn",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"select__display"}},{label:"Kiểu viền",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"select__display"}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:di,deps:[],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:di,isStandalone:!0,selector:"wb-select-country-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<div class="select-config">\n @for (tab of tabs; track $index) {\n <div class="flex flex-col">\n <div\n class="flex justify-between items-center cursor-pointer bg-gray-100 px-2 py-1"\n (click)="tab.open = !tab.open"\n >\n <p class="m-0">{{ tab.label }}</p>\n <i class="pi pi-chevron-down" style="font-size: 12px"></i>\n </div>\n @if (tab.open) {\n <div class="flex flex-col gap-1">\n <div class="p-2">\n <ng-container *ngComponentOutlet="tab.component; inputs: tab.props"></ng-container>\n </div>\n </div>\n }\n </div>\n }\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:di,decorators:[{type:l,args:[{selector:"wb-select-country-config",imports:[R,k],template:'<div class="select-config">\n @for (tab of tabs; track $index) {\n <div class="flex flex-col">\n <div\n class="flex justify-between items-center cursor-pointer bg-gray-100 px-2 py-1"\n (click)="tab.open = !tab.open"\n >\n <p class="m-0">{{ tab.label }}</p>\n <i class="pi pi-chevron-down" style="font-size: 12px"></i>\n </div>\n @if (tab.open) {\n <div class="flex flex-col gap-1">\n <div class="p-2">\n <ng-container *ngComponentOutlet="tab.component; inputs: tab.props"></ng-container>\n </div>\n </div>\n }\n </div>\n }\n</div>\n'}]}],ctorParameters:()=>[],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class pi{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,classFlexDirection:"select-province-district-ward",classGap:"select-province-district-ward"}},{label:"Chữ nền",component:"WbTextFormatConfig",props:{data:n,device:this.device,placeholder:!0,classContent:"select__placeholder",classLineHeight:"select__placeholder",classLetterSpacing:"select__placeholder",classFontWeight:"select__placeholder",configContent:"placeholder"}},{label:"Định dạng văn bản",component:"WbTextFormatConfig",props:{data:n,device:this.device,classContent:"select",classLineHeight:"select",classLetterSpacing:"select",classPadding:"select__display",classFontWeight:"select"}},{label:"Màu nền",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"select__display",configBgColor:"bg_color"}},{label:"Biểu tượng",component:"WbIconConfig",props:{data:n,device:this.device,configIcon:"icon",classIcon:"select__icon",classIconPosition:"select__display"}},{label:"Bo tròn",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"select__display"}},{label:"Kiểu viền",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"select__display"}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:pi,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:pi,isStandalone:!0,selector:"wb-select-province-district-ward-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:pi,decorators:[{type:l,args:[{selector:"wb-select-province-district-ward-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class gi{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,classCursor:"button"}},{label:"Định dạng văn bản",component:"WbTextFormatConfig",props:{data:n,device:this.device,classContent:"button__content",classAlignFlex:"button",classLineHeight:"button__content",classLetterSpacing:"button__content",classMargin:"button__content",classFontWeight:"button__content",configContent:"content"}},{label:"Màu nền",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"button",configBgColor:"bg_color"}},{label:"Biểu tượng",component:"WbIconConfig",props:{data:n,device:this.device,configIcon:"icon",classIcon:"button__icon",classIconPosition:"button"}},{label:"Bo tròn",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"button"}},{label:"Đổ bóng",component:"WbShadowConfig",props:{data:n,device:this.device,classShadow:"button",configShadow:"shadow"}},{label:"Kiểu viền",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"button"}},{label:"Hiệu ứng",component:"WbAnimationConfig",props:{data:n,device:this.device}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:gi,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:gi,isStandalone:!0,selector:"wb-button-set-default-address-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:gi,decorators:[{type:l,args:[{selector:"wb-button-set-default-address-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class ui{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data||e.device||e.config||e.class){const n=e.data?.currentValue??this.data;this.onChangeClass(n)}}onChangeClass(e){this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:e,device:this.device,configDragMode:"drag_mode"}},{label:"Định dạng văn bản(cha)",component:"WbTextFormatConfig",props:{data:e,device:this.device,classContent:(this.data.isActive?"+":"-")+"menu-mobile__item-content",classAlignFlex:(this.data.isActive?"+":"-")+"menu-mobile__item",classLineHeight:(this.data.isActive?"+":"-")+"menu-mobile__item-content",classLetterSpacing:(this.data.isActive?"+":"-")+"menu-mobile__item-content",classMargin:(this.data.isActive?"+":"-")+"menu-mobile__item-content"}},{label:"Màu nền(cha)",component:"WbBackgroundColorConfig",props:{data:e,device:this.device,classBgColor:(this.data.isActive?"+":"-")+"menu-mobile__item",configBgColor:(this.data.isActive?"+":"-")+"bg_color"}},{label:"Bo tròn(cha)",component:"WbBorderRadiusConfig",props:{data:e,device:this.device,classBorderRadius:(this.data.isActive?"+":"-")+"menu-mobile__item"}},{label:"Đổ bóng(cha)",component:"WbShadowConfig",props:{data:e,device:this.device,classShadow:"menu-mobile",configShadow:"shadow"}},{label:"Kiểu viền(cha)",component:"WbBorderConfig",props:{data:e,device:this.device,classBorder:(this.data.isActive?"+":"-")+"menu-mobile__item"}},{label:"Icon trước(cha)",component:"WbIconConfig",props:{data:e,device:this.device,classIcon:(this.data.isActive?"+":"-")+"menu-mobile__item-icon-before"}},{label:"Icon sau(cha)",component:"WbIconConfig",props:{data:e,device:this.device,classIcon:(this.data.isActive?"+":"-")+"menu-mobile__item-icon-after"}},{label:"Định dạng văn bản(con)",component:"WbTextFormatConfig",is_child:!0,props:{data:e,device:this.device,classContent:(this.data.isActive?"+":"-")+"menu-mobile__item-content--child",classAlignFlex:(this.data.isActive?"+":"-")+"menu-mobile__item--child",classLineHeight:(this.data.isActive?"+":"-")+"menu-mobile__item-content--child",classLetterSpacing:(this.data.isActive?"+":"-")+"menu-mobile__item-content--child",classMargin:(this.data.isActive?"+":"-")+"menu-mobile__item-content--child"}},{label:"Màu nền(con)",component:"WbBackgroundColorConfig",is_child:!0,props:{data:e,device:this.device,classBgColor:(this.data.isActive?"+":"-")+"menu-mobile__item--child",configBgColor:(this.data.isActive?"+":"-")+"bg_color_child"}},{label:"Bo tròn(con)",component:"WbBorderRadiusConfig",is_child:!0,props:{data:e,device:this.device,classBorderRadius:(this.data.isActive?"+":"-")+"menu-mobile__item--child"}},{label:"Đổ bóng(con)",component:"WbShadowConfig",is_child:!0,props:{data:e,device:this.device,classShadow:"menu-mobile__children",configShadow:"shadow-child"}},{label:"Kiểu viền(con)",component:"WbBorderConfig",is_child:!0,props:{data:e,device:this.device,classBorder:(this.data.isActive?"+":"-")+"menu-mobile__item--child"}},{label:"Icon trước(con)",is_child:!0,component:"WbIconConfig",props:{data:e,device:this.device,classIcon:(this.data.isActive?"+":"-")+"menu-mobile__item-icon-before--child"}},{label:"Icon sau(con)",is_child:!0,component:"WbIconConfig",props:{data:e,device:this.device,classIcon:(this.data.isActive?"+":"-")+"menu-mobile__item-icon-after--child"}},{label:"Chỉnh sửa nội dung",component:"WbMenuContentConfig",props:{data:e,device:this.device}},{label:"Hiệu ứng",component:"WbAnimationConfig",props:{data:e,device:this.device}}]}onMouseEnter(e){e.is_child&&(this.data.hover=this.config.data_list.find(e=>e.children?.length)?.key||"")}onMouseLeave(e){e.is_child&&(this.data.hover="")}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ui,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:ui,isStandalone:!0,selector:"wb-menu-mobile-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n <div class="flex justify-between items-center px-2">\n <p class="text-xs mb-1">Thiết kế nút {{ data.isActive ? \'đã chọn\' : \'chưa chọn\' }}</p>\n <nz-switch [(ngModel)]="data.isActive" (ngModelChange)="onChangeClass(data)"></nz-switch>\n </div>\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:se},{kind:"component",type:re.NzSwitchComponent,selector:"nz-switch",inputs:["nzLoading","nzDisabled","nzControl","nzCheckedChildren","nzUnCheckedChildren","nzSize","nzId"],exportAs:["nzSwitch"]},{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ui,decorators:[{type:l,args:[{selector:"wb-menu-mobile-config",imports:[se,B,R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n <div class="flex justify-between items-center px-2">\n <p class="text-xs mb-1">Thiết kế nút {{ data.isActive ? \'đã chọn\' : \'chưa chọn\' }}</p>\n <nz-switch [(ngModel)]="data.isActive" (ngModelChange)="onChangeClass(data)"></nz-switch>\n </div>\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class hi{webBuilderService;data;device;class;config;animation;type;tabs=[];constructor(e){this.webBuilderService=e}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device}},{label:"Số lượng ảnh hiển thị",component:"WbImageListNumberConfig",props:{data:n,device:this.device,configNumber:"total_imgs",classGrid:"product-image-list"}},{label:"Độ bao phủ",component:"WbObjectFitConfig",props:{data:n,device:this.device,classObjectFit:"product-image-list__img"}},{label:"Cấu hình slide",component:"WbSlideConfig",props:{data:n,device:this.device,configSlide:"slide",configIconLeft:"icon_left",classBgIconLeft:"product-image-list__btn-left",classIconLeft:"product-image-list__btn-left-icon",configIconRight:"icon_right",classBgIconRight:"product-image-list__btn-right",classIconRight:"product-image-list__btn-right-icon"}},{label:"Bo tròn(đã chọn)",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"+product-image-list__item"}},{label:"Kiểu viền(đã chọn)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"+product-image-list__item"}},{label:"Bo tròn(chưa chọn)",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"-product-image-list__item"}},{label:"Kiểu viền(chưa chọn)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"-product-image-list__item"}},{label:"Hiệu ứng",component:"WbAnimationConfig",props:{data:n,device:this.device}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:hi,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:hi,isStandalone:!1,selector:"wb-product-image-list-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<div class="button-config">\n @for (tab of tabs; track $index) {\n <div class="flex flex-col">\n <div\n class="flex justify-between items-center cursor-pointer bg-gray-100 px-2 py-1"\n (click)="tab.open = !tab.open"\n >\n <p class="m-0">{{ tab.label }}</p>\n <i class="pi pi-chevron-down" style="font-size: 12px"></i>\n </div>\n @if (tab.open) {\n <div class="flex flex-col gap-1">\n <div class="p-2">\n <ng-container *ngComponentOutlet="tab.component; inputs: tab.props"></ng-container>\n </div>\n </div>\n }\n </div>\n }\n</div>\n',styles:[""]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:hi,decorators:[{type:l,args:[{selector:"wb-product-image-list-config",standalone:!1,template:'<div class="button-config">\n @for (tab of tabs; track $index) {\n <div class="flex flex-col">\n <div\n class="flex justify-between items-center cursor-pointer bg-gray-100 px-2 py-1"\n (click)="tab.open = !tab.open"\n >\n <p class="m-0">{{ tab.label }}</p>\n <i class="pi pi-chevron-down" style="font-size: 12px"></i>\n </div>\n @if (tab.open) {\n <div class="flex flex-col gap-1">\n <div class="p-2">\n <ng-container *ngComponentOutlet="tab.component; inputs: tab.props"></ng-container>\n </div>\n </div>\n }\n </div>\n }\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class mi{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device}},{label:"Cột/Hàng",component:"WbGridConfig",props:{data:n,device:this.device,configGrid:"grid",classGrid:"frame-products-by-category__grid"}},{label:"Phân trang",component:"WbPaginationConfig",props:{data:n,device:this.device,classGap:"frame-products-by-category__pagination-list",classAlign:"frame-products-by-category__pagination",classNotChoose:"-frame-products-by-category__pagination-item",classChoose:"+frame-products-by-category__pagination-item"}},{label:"Kiểu viền(chưa chọn)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"-frame-products-by-category__pagination-item"}},{label:"Bo tròn(chưa chọn)",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"-frame-products-by-category__pagination-item"}},{label:"Kiểu viền(đã chọn)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"+frame-products-by-category__pagination-item"}},{label:"Bo tròn(chưa chọn)",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"+frame-products-by-category__pagination-item"}},{label:"Cấu hình không tìm thấy dữ liệu",component:"WbTextFormatConfig",props:{data:n,device:this.device,configNotFound:"not_found",classContent:"frame-products-by-category__not-found"}},{label:"Màu nền",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"frame-products-by-category__item",configBgColor:"bg_color"}},{label:"Bo tròn",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"frame-products-by-category"}},{label:"Đổ bóng",component:"WbShadowConfig",props:{data:n,device:this.device,classShadow:"frame-products-by-category",configShadow:"shadow"}},{label:"Đổ bóng(phần tử)",component:"WbShadowConfig",props:{data:n,device:this.device,classShadow:"frame-products-by-category__item",configShadow:"shadow"}},{label:"Kiểu viền",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"frame-products-by-category"}},{label:"Kiểu viền phần tử",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"frame-products-by-category__item"}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:mi,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:mi,isStandalone:!0,selector:"wb-frame-products-by-category-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:mi,decorators:[{type:l,args:[{selector:"wb-frame-products-by-category-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class bi{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,classCursor:"checkbox-filter",configDragMode:"drag_mode"}},{label:"Định dạng văn bản",component:"WbTextFormatConfig",props:{data:n,device:this.device,classContent:"checkbox-filter__label",classAlignFlex:"checkbox-filter__label",classLineHeight:"checkbox-filter__label",classLetterSpacing:"checkbox-filter__label",classMargin:"checkbox-filter__label",classFontWeight:"checkbox-filter__label"}},{label:"Thành phần",component:"WbFilterConfig",props:{data:n,device:this.device,configDataList:"data_list",configField:"field",classFlexDirection:"checkbox-filter"}},{label:"Biểu tượng",component:"WbCheckboxConfig",props:{data:n,device:this.device,classInput:"checkbox-filter__input",classGap:"checkbox-filter"}},{label:"Hiệu ứng",component:"WbAnimationConfig",props:{data:n,device:this.device}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:bi,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:bi,isStandalone:!0,selector:"wb-checkbox-filter-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:bi,decorators:[{type:l,args:[{selector:"wb-checkbox-filter-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class fi{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data||e.device){const n=e.data?.currentValue||this.data;this.tabs=[{open:!0,label:"Khối tự do",component:"WbFreeblockConfig",props:{data:n,device:this.device,configHeader:"id_header",configFooter:"id_footer",configChatBoxs:"id_chatboxs",lengthFreeBlocks:this.webBuilderService.freeblocks?.length}},{label:"Thanh cuộn",component:"WbScrollbarConfig",props:{data:this.webBuilderService.projectWorking,device:this.device,classScrollbar:"scrollbar"}},{label:"Hình nền",component:"WbBackgroundImageConfig",props:{data:n,device:this.device,classBgImage:"page"}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:fi,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:fi,isStandalone:!0,selector:"wb-page-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]},{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:fi,decorators:[{type:l,args:[{selector:"wb-page-config",imports:[k,R],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class vi{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,classCursor:"line",configDragMode:"drag_mode",configTypeDisplay:"direction"}},{label:"Màu nền",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"line",configBgColor:"bg_color"}},{label:"Cấu hình xoay",component:"WbRotateConfig",props:{data:n,device:this.device,classRotate:"line"}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:vi,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:vi,isStandalone:!0,selector:"wb-line-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:vi,decorators:[{type:l,args:[{selector:"wb-line-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class zi{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,classCursor:"video",configDragMode:"drag_mode"}},{label:"Độ bao phủ",component:"WbObjectFitConfig",props:{data:n,device:this.device,classObjectFit:"video"}},{label:"Upload video",component:"WbUploadVideoConfig",props:{data:n,device:this.device,configVideo:"video"}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:zi,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:zi,isStandalone:!0,selector:"wb-video-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:zi,decorators:[{type:l,args:[{selector:"wb-video-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class yi{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,classOverflowY:"frame-products"}},{label:"Cột/Hàng",component:"WbGridConfig",props:{data:n,device:this.device,configGrid:"grid",classGrid:"frame-products__grid"}},{label:"Màu nền",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"frame-products__item",configBgColor:"bg_color"}},{label:"Bo tròn",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"frame-products"}},{label:"Đổ bóng chung",component:"WbShadowConfig",props:{data:n,device:this.device,classShadow:"frame-products",configShadow:"shadow"}},{label:"Đổ bóng(phần tử)",component:"WbShadowConfig",props:{data:n,device:this.device,classShadow:"frame-products__item",configShadow:"shadow_item"}},{label:"Kiểu viền",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"frame-products"}},{label:"Kiểu viền phần tử",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"frame-products__item"}},{label:"Thanh cuộn",component:"WbScrollbarConfig",props:{data:n,device:this.device,classScrollbar:"frame-products"}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:yi,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:yi,isStandalone:!0,selector:"wb-frame-cart-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]},{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:yi,decorators:[{type:l,args:[{selector:"wb-frame-cart-config",imports:[k,R],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class _i{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,configDragMode:"drag_mode"}},{label:"Định dạng văn bản",component:"WbTextFormatConfig",props:{data:n,device:this.device,classContent:"product-select-attribute__label",classAlignFlex:"product-select-attribute__label",classLineHeight:"product-select-attribute__label",classLetterSpacing:"product-select-attribute__label",classMargin:"product-select-attribute__label",classFontWeight:"product-select-attribute__label"}},{label:"Màu nền(chưa chọn)",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"-product-select-attribute__item"}},{label:"Định dạng văn bản(chưa chọn)",component:"WbTextFormatConfig",props:{data:n,device:this.device,classContent:"-product-select-attribute__item-content",classAlignFlex:"-product-select-attribute__item-content",classLineHeight:"-product-select-attribute__item-content",classLetterSpacing:"-product-select-attribute__item-content",classFontWeight:"-product-select-attribute__item-content",classMaxLine:"-product-select-attribute__item-content",classMargin:"-product-select-attribute__item-content"}},{label:"Kiểu viền(chưa chọn)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"-product-select-attribute__item"}},{label:"Màu nền(đã chọn)",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"+product-select-attribute__item"}},{label:"Định dạng văn bản(đã chọn)",component:"WbTextFormatConfig",props:{data:n,device:this.device,classContent:"+product-select-attribute__item-content",classAlignFlex:"+product-select-attribute__item-content",classLineHeight:"+product-select-attribute__item-content",classLetterSpacing:"+product-select-attribute__item-content",classFontWeight:"+product-select-attribute__item-content",classMaxLine:"+product-select-attribute__item-content",classMargin:"+product-select-attribute__item-content"}},{label:"Kiểu viền(đã chọn)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"+product-select-attribute__item"}},{label:"Hiệu ứng",component:"WbAnimationConfig",props:{data:n,device:this.device}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:_i,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:_i,isStandalone:!0,selector:"wb-product-select-attribute-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:_i,decorators:[{type:l,args:[{selector:"wb-product-select-attribute-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class xi{webBuilderService;map;data;device;class;config;animation;type;tabs=[];constructor(e,n){this.webBuilderService=e,this.map=n}ngOnInit(){}ngOnChanges(e){if(e.data){const n=e.data.currentValue;this.tabs=[{open:!0,label:"Hiển thị",component:"WbHideShowConfig",props:{data:n,device:this.device,configDragMode:"drag_mode"}},{label:"Thành phần",component:"WbOrdinalConfig",props:{data:n,device:this.device,classGap:"frame-banner__dots",classJustifyContent:"frame-banner__pagination"}},{label:"Nút biểu tượng(trước)",component:"WbIconConfig",props:{data:n,device:this.device,configIcon:"icon_left",classIcon:"frame-banner__btn-left-icon",classBgIcon:"frame-banner__btn-left",classWidthButtonIcon:"frame-banner__btn-left",classHeightButtonIcon:"frame-banner__btn-left"}},{label:"Bo tròn nút(trước)",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"frame-banner__btn-left"}},{label:"Kiểu viền nút(trước)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"frame-banner__btn-left"}},{label:"Bo tròn nút(trước)",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"frame-banner__btn-right"}},{label:"Nút biểu tượng(sau)",component:"WbIconConfig",props:{data:n,device:this.device,configIcon:"icon_right",classIcon:"frame-banner__btn-right-icon",classBgIcon:"frame-banner__btn-right",classWidthButtonIcon:"frame-banner__btn-right",classHeightButtonIcon:"frame-banner__btn-right"}},{label:"Kiểu viền nút(sau)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"frame-banner__btn-right"}},{label:"Màu nền nút phân trang(chưa chọn)",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"-frame-banner__dot"}},{label:"Kiểu viền nút phân trang(chưa chọn)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"-frame-banner__dot"}},{label:"Bo tròn nút phân trang(chưa chọn)",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"-frame-banner__dot"}},{label:"Màu nền nút phân trang(đã chọn)",component:"WbBackgroundColorConfig",props:{data:n,device:this.device,classBgColor:"+frame-banner__dot"}},{label:"Kiểu viền nút phân trang(đã chọn)",component:"WbBorderConfig",props:{data:n,device:this.device,classBorder:"+frame-banner__dot"}},{label:"Bo tròn nút phân trang(đã chọn)",component:"WbBorderRadiusConfig",props:{data:n,device:this.device,classBorderRadius:"+frame-banner__dot"}},{label:"Hiệu ứng",component:"WbBannerAnimationConfig",props:{data:n,device:this.device,configAnimation:"animation"}}]}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:xi,deps:[{token:xn},{token:Yt}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:xi,isStandalone:!0,selector:"wb-frame-banner-config",inputs:{data:"data",device:"device",class:"class",config:"config",animation:"animation",type:"type"},usesOnChanges:!0,ngImport:t,template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n',styles:[""],dependencies:[{kind:"ngmodule",type:R},{kind:"directive",type:E.NzMenuDirective,selector:"[nz-menu]",inputs:["nzInlineIndent","nzTheme","nzMode","nzInlineCollapsed","nzSelectable"],outputs:["nzClick"],exportAs:["nzMenu"]},{kind:"component",type:E.NzSubMenuComponent,selector:"[nz-submenu]",inputs:["nzMenuClassName","nzPaddingLeft","nzTitle","nzIcon","nzTriggerSubMenuAction","nzOpen","nzDisabled","nzPlacement"],outputs:["nzOpenChange"],exportAs:["nzSubmenu"]},{kind:"ngmodule",type:k},{kind:"directive",type:C.NgComponentOutlet,selector:"[ngComponentOutlet]",inputs:["ngComponentOutlet","ngComponentOutletInputs","ngComponentOutletInjector","ngComponentOutletEnvironmentInjector","ngComponentOutletContent","ngComponentOutletNgModule","ngComponentOutletNgModuleFactory"],exportAs:["ngComponentOutlet"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:xi,decorators:[{type:l,args:[{selector:"wb-frame-banner-config",imports:[R,k],template:'<ul class="menu-inline-custom" nz-menu nzMode="inline">\n @for (tab of tabs; track $index) {\n <li nz-submenu [nzTitle]="tab.label" [nzOpen]="tab.open">\n <ng-container\n *ngComponentOutlet="map.render(tab.component); inputs: tab.props"\n ></ng-container>\n </li>\n }\n</ul>\n'}]}],ctorParameters:()=>[{type:xn},{type:Yt}],propDecorators:{data:[{type:s}],device:[{type:s}],class:[{type:s}],config:[{type:s}],animation:[{type:s}],type:[{type:s}]}});class wi{constructor(){}render(e){return e&&{WbPageConfig:fi,WbBlockBlankConfig:Jt,WbFrameBlankConfig:Qt,WbFrameProductsConfig:Zt,WbFrameProductDetailConfig:ei,WbFrameTabConfig:ni,WbFrameBannerConfig:xi,WbButtonConfig:ti,WbTextConfig:ii,WbImageConfig:oi,WbBreadcumbConfig:ai,WbMenuHorizontalConfig:ri,WbInputConfig:si,WbTextParagraphConfig:li,WbButtonQuantityConfig:ci,WbSelectCountryConfig:di,WbSelectProvinceDistrictWardConfig:pi,WbButtonSetDefaultAddressConfig:gi,WbMenuMobileConfig:ui,WbProductImageListConfig:hi,WbFrameProductsByCategoryConfig:mi,WbCheckboxFilterConfig:bi,WbLineConfig:vi,WbVideoConfig:zi,WbFrameCartConfig:yi,WbProductSelectAttributeConfig:_i}[e]||null}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:wi,deps:[],target:t.ɵɵFactoryTarget.Injectable});static"ɵprov"=t.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:wi,providedIn:"root"})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:wi,decorators:[{type:a,args:[{providedIn:"root"}]}],ctorParameters:()=>[]});class Ci{webBuilderService;data;device;classInput;classGap;constructor(e){this.webBuilderService=e}ngOnInit(){}updateClass(){this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Ci,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:Ci,isStandalone:!1,selector:"wb-checkbox-config",inputs:{data:"data",device:"device",classInput:"classInput",classGap:"classGap"},ngImport:t,template:'<div class="checkbox-config">\n \x3c!-- Khoảng cách giữa có phần tử--\x3e\n \x3c!-- <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3 ">Khoảng cách giữa có phần tử</label>\n <input type="number" class="outline outline-gray-300 rounded p-1 w-1/3" (blur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'">\n </div>\n <div class="px-2">\n <p-slider step="1" min="0" max="40" [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n (onSlideEnd)="updateClass()" />\n </div>\n </div> --\x3e\n\n \x3c!-- Kích thước checkbox--\x3e\n \x3c!-- <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3 ">Kích thước checkbox</label>\n <input type="number" class="outline outline-gray-300 rounded p-1 w-1/3" (blur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classInput][\'--width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classInput][\'--width\'] = data[device + \'_class\'][classInput][\'--height\'] = $event + \'px\'">\n </div>\n <div class="px-2">\n <p-slider step="1" min="0" max="40" [ngModel]="data[device + \'_class\'][classInput][\'--width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classInput][\'--width\'] = data[device + \'_class\'][classInput][\'--height\'] = $event + \'px\'"\n (onSlideEnd)="updateClass()" />\n </div>\n </div> --\x3e\n\n \x3c!-- Kích thước biểu tưởng--\x3e\n \x3c!-- <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3 ">Kích thước biểu tưởng</label>\n <input type="number" class="outline outline-gray-300 rounded p-1 w-1/3" (blur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classInput][\'--font-size-after\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classInput][\'--font-size-after\'] = $event + \'px\'">\n </div>\n <div class="px-2">\n <p-slider step="1" min="0" max="40" [ngModel]="data[device + \'_class\'][classInput][\'--font-size-after\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classInput][\'--font-size-after\'] = $event + \'px\'"\n (onSlideEnd)="updateClass()" />\n </div>\n </div> --\x3e\n\n \x3c!-- Màu nền --\x3e\n \x3c!-- <div class="flex items-center justify-between">\n <label class="m-0 text-xs">Màu nền</label>\n <div class="">\n <input [(colorPicker)]="data[device + \'_class\'][classInput][\'--bg-color\']"\n class="w-22 h-8 rounded cursor-pointer border border-gray-300 shadow"\n [style.background]="data[device + \'_class\'][classInput][\'--bg-color\']" (colorPickerClose)="updateClass()" />\n </div>\n </div> --\x3e\n\n \x3c!-- Màu icon --\x3e\n \x3c!-- <div class="flex items-center justify-between">\n <label class="m-0 text-xs">Màu icon</label>\n <div class="">\n <input [(colorPicker)]="data[device + \'_class\'][classInput][\'--color-after\']"\n class="w-22 h-8 rounded cursor-pointer border border-gray-300 shadow"\n [style.background]="data[device + \'_class\'][classInput][\'--color-after\']" (colorPickerClose)="updateClass()" />\n </div>\n </div> --\x3e\n</div>\n',styles:[""]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Ci,decorators:[{type:l,args:[{selector:"wb-checkbox-config",standalone:!1,template:'<div class="checkbox-config">\n \x3c!-- Khoảng cách giữa có phần tử--\x3e\n \x3c!-- <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3 ">Khoảng cách giữa có phần tử</label>\n <input type="number" class="outline outline-gray-300 rounded p-1 w-1/3" (blur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'">\n </div>\n <div class="px-2">\n <p-slider step="1" min="0" max="40" [ngModel]="data[device + \'_class\'][classGap][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGap][\'--gap\'] = $event + \'px\'"\n (onSlideEnd)="updateClass()" />\n </div>\n </div> --\x3e\n\n \x3c!-- Kích thước checkbox--\x3e\n \x3c!-- <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3 ">Kích thước checkbox</label>\n <input type="number" class="outline outline-gray-300 rounded p-1 w-1/3" (blur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classInput][\'--width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classInput][\'--width\'] = data[device + \'_class\'][classInput][\'--height\'] = $event + \'px\'">\n </div>\n <div class="px-2">\n <p-slider step="1" min="0" max="40" [ngModel]="data[device + \'_class\'][classInput][\'--width\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classInput][\'--width\'] = data[device + \'_class\'][classInput][\'--height\'] = $event + \'px\'"\n (onSlideEnd)="updateClass()" />\n </div>\n </div> --\x3e\n\n \x3c!-- Kích thước biểu tưởng--\x3e\n \x3c!-- <div class="flex flex-col mb-2">\n <div class="flex items-center justify-between mb-2">\n <label class="text-xs w-2/3 ">Kích thước biểu tưởng</label>\n <input type="number" class="outline outline-gray-300 rounded p-1 w-1/3" (blur)="updateClass()"\n [ngModel]="data[device + \'_class\'][classInput][\'--font-size-after\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classInput][\'--font-size-after\'] = $event + \'px\'">\n </div>\n <div class="px-2">\n <p-slider step="1" min="0" max="40" [ngModel]="data[device + \'_class\'][classInput][\'--font-size-after\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classInput][\'--font-size-after\'] = $event + \'px\'"\n (onSlideEnd)="updateClass()" />\n </div>\n </div> --\x3e\n\n \x3c!-- Màu nền --\x3e\n \x3c!-- <div class="flex items-center justify-between">\n <label class="m-0 text-xs">Màu nền</label>\n <div class="">\n <input [(colorPicker)]="data[device + \'_class\'][classInput][\'--bg-color\']"\n class="w-22 h-8 rounded cursor-pointer border border-gray-300 shadow"\n [style.background]="data[device + \'_class\'][classInput][\'--bg-color\']" (colorPickerClose)="updateClass()" />\n </div>\n </div> --\x3e\n\n \x3c!-- Màu icon --\x3e\n \x3c!-- <div class="flex items-center justify-between">\n <label class="m-0 text-xs">Màu icon</label>\n <div class="">\n <input [(colorPicker)]="data[device + \'_class\'][classInput][\'--color-after\']"\n class="w-22 h-8 rounded cursor-pointer border border-gray-300 shadow"\n [style.background]="data[device + \'_class\'][classInput][\'--color-after\']" (colorPickerClose)="updateClass()" />\n </div>\n </div> --\x3e\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],classInput:[{type:s}],classGap:[{type:s}]}});class ki{webBuilderService;data;device;configNumber;classGrid;positionImages=[{label:"Trái",value:"left"},{label:"Phải",value:"right"},{label:"Dưới",value:"bottom"}];constructor(e){this.webBuilderService=e}ngOnInit(){}updateClassAndConfig(){this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"],[this.device+"_config"]:this.data[this.device+"_config"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"],[this.device+"_config"]:this.data[this.device+"_config"]})}onChangeNumber(){this.data[this.device+"_class"][this.classGrid]["--grid-template-columns"]=`repeat(${this.data[this.device+"_config"][this.configNumber]}, 1fr)`,this.webBuilderService.notifyChange({name:"change-number-imgs",_id:this.data._id})}updateClass(){this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ki,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:ki,isStandalone:!0,selector:"wb-image-list-number-config",inputs:{data:"data",device:"device",configNumber:"configNumber",classGrid:"classGrid"},ngImport:t,template:'<div class="image-list-number-config">\n <div class="flex flex-col gap-2">\n <label for="cols">Số lượng</label>\n <input\n id="cols"\n type="number"\n class="py-1 px-2 border border-gray-300 rounded"\n [(ngModel)]="data[device + \'_config\'][configNumber]"\n (ngModelChange)="onChangeNumber()"\n (blur)="updateClassAndConfig()"\n [min]="1"\n [max]="7"\n [step]="1"\n [placeholder]="\'Số lượng (1-7)\'"\n />\n </div>\n\n \x3c!-- <div class="flex flex-col gap-2">\n <label for="cols">Khoảng cách</label>\n <input id="cols" type="number" class="py-1 px-2 border border-gray-300 rounded"\n [ngModel]="data[device + \'_class\'][classGrid][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGrid][\'--gap\'] = $event + \'px\'" (blur)="updateClass();" [min]="1"\n [max]="100" [step]="1" [placeholder]="\'Khoảng cách (1-100)\'" />\n </div> --\x3e\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.DefaultValueAccessor,selector:"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"},{kind:"directive",type:M.NumberValueAccessor,selector:"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]"},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.MinValidator,selector:"input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]",inputs:["min"]},{kind:"directive",type:M.MaxValidator,selector:"input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]",inputs:["max"]},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:G}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:ki,decorators:[{type:l,args:[{selector:"wb-image-list-number-config",imports:[B,G],template:'<div class="image-list-number-config">\n <div class="flex flex-col gap-2">\n <label for="cols">Số lượng</label>\n <input\n id="cols"\n type="number"\n class="py-1 px-2 border border-gray-300 rounded"\n [(ngModel)]="data[device + \'_config\'][configNumber]"\n (ngModelChange)="onChangeNumber()"\n (blur)="updateClassAndConfig()"\n [min]="1"\n [max]="7"\n [step]="1"\n [placeholder]="\'Số lượng (1-7)\'"\n />\n </div>\n\n \x3c!-- <div class="flex flex-col gap-2">\n <label for="cols">Khoảng cách</label>\n <input id="cols" type="number" class="py-1 px-2 border border-gray-300 rounded"\n [ngModel]="data[device + \'_class\'][classGrid][\'--gap\'] | wbnumber"\n (ngModelChange)="data[device + \'_class\'][classGrid][\'--gap\'] = $event + \'px\'" (blur)="updateClass();" [min]="1"\n [max]="100" [step]="1" [placeholder]="\'Khoảng cách (1-100)\'" />\n </div> --\x3e\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}],configNumber:[{type:s}],classGrid:[{type:s}]}});class Si{webBuilderService;data;device;idParent=null;constructor(e){this.webBuilderService=e}ngOnInit(){}ngOnChanges(e){e.data&&this.data&&(this.idParent=this.data.id_page??this.data.id_block??this.data.id_object)}updatePosition(){const e=this.data.id_page??this.data.id_block??this.data.id_object,n=e?`${this.device}_position_${e}`:`${this.device}_position`;this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[n]:this.data[n]}):this.webBuilderService.updateObject(this.data._id,{[n]:this.data[n]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Si,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:Si,isStandalone:!0,selector:"wb-position-config",inputs:{data:"data",device:"device"},usesOnChanges:!0,ngImport:t,template:'<div class="position-config flex flex-col mb-2">\n <div class="flex items-center px-2 gap-2">\n <div\n class="flex items-center gap-2 w-1/2"\n nz-tooltip\n nzTooltipTitle="Khoảng cách bên trái"\n nzTooltipPlacement="left"\n >\n <nz-icon style="font-size: 12px" nzType="arrow-left" nzTheme="outline" />\n <nz-input-number\n style="width: 100%"\n (nzBlur)="updatePosition()"\n (keyup.enter)="updatePosition()"\n [(ngModel)]="\n data[idParent ? device + \'_position_\' + idParent : device + \'_position\'][\'left\']\n "\n nzMin="0"\n nzMax="10000"\n />\n </div>\n\n <div\n class="flex items-center gap-2 w-1/2"\n nz-tooltip\n nzTooltipTitle="Khoảng cách bên trên"\n nzTooltipPlacement="left"\n >\n <nz-icon style="font-size: 12px" nzType="arrow-up" nzTheme="outline" />\n <nz-input-number\n style="width: 100%"\n (nzBlur)="updatePosition()"\n (keyup.enter)="updatePosition()"\n [(ngModel)]="\n data[idParent ? device + \'_position_\' + idParent : device + \'_position\'][\'top\']\n "\n nzMin="0"\n nzMax="10000"\n />\n </div>\n </div>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:j},{kind:"directive",type:D.NzIconDirective,selector:"nz-icon,[nz-icon]",inputs:["nzSpin","nzRotate","nzType","nzTheme","nzTwotoneColor","nzIconfont"],exportAs:["nzIcon"]},{kind:"ngmodule",type:W},{kind:"directive",type:$.NzTooltipDirective,selector:"[nz-tooltip]",inputs:["nzTooltipTitle","nzTooltipTitleContext","nz-tooltip","nzTooltipTrigger","nzTooltipPlacement","nzTooltipOrigin","nzTooltipVisible","nzTooltipMouseEnterDelay","nzTooltipMouseLeaveDelay","nzTooltipOverlayClassName","nzTooltipOverlayStyle","nzTooltipArrowPointAtCenter","cdkConnectedOverlayPush","nzTooltipColor"],outputs:["nzTooltipVisibleChange"],exportAs:["nzTooltip"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Si,decorators:[{type:l,args:[{selector:"wb-position-config",imports:[B,j,W,Z],template:'<div class="position-config flex flex-col mb-2">\n <div class="flex items-center px-2 gap-2">\n <div\n class="flex items-center gap-2 w-1/2"\n nz-tooltip\n nzTooltipTitle="Khoảng cách bên trái"\n nzTooltipPlacement="left"\n >\n <nz-icon style="font-size: 12px" nzType="arrow-left" nzTheme="outline" />\n <nz-input-number\n style="width: 100%"\n (nzBlur)="updatePosition()"\n (keyup.enter)="updatePosition()"\n [(ngModel)]="\n data[idParent ? device + \'_position_\' + idParent : device + \'_position\'][\'left\']\n "\n nzMin="0"\n nzMax="10000"\n />\n </div>\n\n <div\n class="flex items-center gap-2 w-1/2"\n nz-tooltip\n nzTooltipTitle="Khoảng cách bên trên"\n nzTooltipPlacement="left"\n >\n <nz-icon style="font-size: 12px" nzType="arrow-up" nzTheme="outline" />\n <nz-input-number\n style="width: 100%"\n (nzBlur)="updatePosition()"\n (keyup.enter)="updatePosition()"\n [(ngModel)]="\n data[idParent ? device + \'_position_\' + idParent : device + \'_position\'][\'top\']\n "\n nzMin="0"\n nzMax="10000"\n />\n </div>\n </div>\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}]}});class Mi{webBuilderService;data;device;idParent;constructor(e){this.webBuilderService=e}ngOnInit(){}onChoosePosition(e){if(0==this.data.objects.length)return;const{cols:n,rows:t}=this.data?.[this.device]?.config?.grid||{cols:1,rows:1},{resizeGroup:i}=this.webBuilderService;switch(e){case"left-in":const e=this.data.objects.reduce((e,n)=>n[this.device+"_position_"+this.data._id].left<e?n[this.device+"_position_"+this.data._id].left:e,99999999);this.data.objects.forEach(n=>{const t="position_"+this.data._id;n[this.device+"_"+t].left-=e,this.webBuilderService.updateObject(n._id,{[this.device+"_"+t]:n[this.device+"_"+t]})});break;case"center-in":const o="position_"+this.data._id,a=this.data.objects.reduce((e,n)=>n[this.device+"_"+o].left<e?n[this.device+"_"+o].left:e,99999999),r=this.data.objects.reduce((e,n)=>n[this.device+"_"+o].left+ +n[this.device+"_class"][n.resize_field][i[n.resize_group].width].replace("px","")>e?n[this.device+"_"+o].left+ +n[this.device+"_class"][n.resize_field][i[n.resize_group].width].replace("px",""):e,0)-a;let s=+this.data[this.device+"_class"][this.data.resize_field][i[this.data.resize_group].width].replace("px","")/n;this.data.type.includes("block")&&(s=this.webBuilderService.elementChoosingRef.offsetWidth);const l=(s-r)/2;this.data.objects.forEach(e=>{const n=e[this.device+"_"+o].left-a+l;e[this.device+"_"+o].left=n,this.webBuilderService.updateObject(e._id,{[this.device+"_"+o]:e[this.device+"_"+o]})});break;case"right-in":{const e="position_"+this.data._id,{resizeGroup:t}=this.webBuilderService,i=this.data.objects.reduce((n,i)=>{const o=i[this.device+"_"+e].left+ +i[this.device+"_class"][i.resize_field][t[i.resize_group].width].replace("px","");return o>n?o:n},0);let o=+this.data[this.device+"_class"][this.data.resize_field][t[this.data.resize_group].width].replace("px","")/n;this.data.type.includes("block")&&(o=this.webBuilderService.elementChoosingRef.offsetWidth);const a=o-i;this.data.objects.forEach(n=>{n[this.device+"_"+e].left+=a,this.webBuilderService.updateObject(n._id,{[this.device+"_"+e]:n[this.device+"_"+e]})});break}case"top-in":{const e="position_"+this.data._id,n=this.data.objects.reduce((n,t)=>t[this.device+"_"+e].top<n?t[this.device+"_"+e].top:n,99999999);this.data.objects.forEach(t=>{t[this.device+"_"+e].top-=n,this.webBuilderService.updateObject(t._id,{[this.device+"_"+e]:t[this.device+"_"+e]})});break}case"middle-in":{const e="position_"+this.data._id,{resizeGroup:n}=this.webBuilderService,i=this.data.objects.reduce((n,t)=>t[this.device+"_"+e].top<n?t[this.device+"_"+e].top:n,99999999),o=this.data.objects.reduce((t,i)=>{const o=i[this.device+"_"+e].top+ +i[this.device+"_class"][i.resize_field][n[i.resize_group].height].replace("px","");return o>t?o:t},0)-i,a=(+this.data[this.device+"_class"][this.data.resize_field][n[this.data.resize_group].height].replace("px","")/t-o)/2;this.data.objects.forEach(n=>{const t=n[this.device+"_"+e].top-i+a;n[this.device+"_"+e].top=t,this.webBuilderService.updateObject(n._id,{[this.device+"_"+e]:n[this.device+"_"+e]})});break}case"bottom-in":{const e="position_"+this.data._id,{resizeGroup:n}=this.webBuilderService,i=this.data.objects.reduce((t,i)=>{const o=i[this.device+"_"+e].top+ +i[this.device+"_class"][i.resize_field][n[i.resize_group].height].replace("px","");return o>t?o:t},0),o=+this.data[this.device+"_class"][this.data.resize_field][n[this.data.resize_group].height].replace("px","")/t-i;this.data.objects.forEach(n=>{n[this.device+"_"+e].top+=o,this.webBuilderService.updateObject(n._id,{[this.device+"_"+e]:n[this.device+"_"+e]})});break}}}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Mi,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:Mi,isStandalone:!0,selector:"wb-position-in-config",inputs:{data:"data",device:"device"},ngImport:t,template:'<div class="position-out-config flex gap-1 items-center justify-between px-2 mb-1">\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n [nz-tooltip]="\'left-in\'"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'left-in\')"\n >\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="16"\n height="16"\n fill="currentColor"\n class="bi bi-align-start"\n viewBox="0 0 16 16"\n >\n <path fill-rule="evenodd" d="M1.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5" />\n <path d="M3 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z" />\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n [nz-tooltip]="\'center-in\'"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'center-in\')"\n >\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="16"\n height="16"\n fill="currentColor"\n class="bi bi-align-center"\n viewBox="0 0 16 16"\n >\n <path\n d="M8 1a.5.5 0 0 1 .5.5V6h-1V1.5A.5.5 0 0 1 8 1m0 14a.5.5 0 0 1-.5-.5V10h1v4.5a.5.5 0 0 1-.5.5M2 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"\n />\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n [nz-tooltip]="\'right-in\'"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'right-in\')"\n >\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="16"\n height="16"\n fill="currentColor"\n class="bi bi-align-end"\n viewBox="0 0 16 16"\n >\n <path\n fill-rule="evenodd"\n d="M14.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5"\n />\n <path d="M13 7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1z" />\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n [nz-tooltip]="\'top-in\'"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'top-in\')"\n >\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="16"\n height="16"\n fill="currentColor"\n class="bi bi-align-top"\n viewBox="0 0 16 16"\n >\n <rect width="4" height="12" rx="1" transform="matrix(1 0 0 -1 6 15)" />\n <path d="M1.5 2a.5.5 0 0 1 0-1zm13-1a.5.5 0 0 1 0 1zm-13 0h13v1h-13z" />\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n [nz-tooltip]="\'middle-in\'"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'middle-in\')"\n >\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="16"\n height="16"\n fill="currentColor"\n class="bi bi-align-middle"\n viewBox="0 0 16 16"\n >\n <path\n d="M6 13a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zM1 8a.5.5 0 0 0 .5.5H6v-1H1.5A.5.5 0 0 0 1 8m14 0a.5.5 0 0 1-.5.5H10v-1h4.5a.5.5 0 0 1 .5.5"\n />\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n [nz-tooltip]="\'bottom-in\'"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'bottom-in\')"\n >\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="16"\n height="16"\n fill="currentColor"\n class="bi bi-align-bottom"\n viewBox="0 0 16 16"\n >\n <rect width="4" height="12" x="6" y="1" rx="1" />\n <path d="M1.5 14a.5.5 0 0 0 0 1zm13 1a.5.5 0 0 0 0-1zm-13 0h13v-1h-13z" />\n </svg>\n </button>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:k},{kind:"ngmodule",type:B},{kind:"ngmodule",type:W},{kind:"directive",type:$.NzTooltipDirective,selector:"[nz-tooltip]",inputs:["nzTooltipTitle","nzTooltipTitleContext","nz-tooltip","nzTooltipTrigger","nzTooltipPlacement","nzTooltipOrigin","nzTooltipVisible","nzTooltipMouseEnterDelay","nzTooltipMouseLeaveDelay","nzTooltipOverlayClassName","nzTooltipOverlayStyle","nzTooltipArrowPointAtCenter","cdkConnectedOverlayPush","nzTooltipColor"],outputs:["nzTooltipVisibleChange"],exportAs:["nzTooltip"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Mi,decorators:[{type:l,args:[{selector:"wb-position-in-config",imports:[k,B,W,X],template:'<div class="position-out-config flex gap-1 items-center justify-between px-2 mb-1">\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n [nz-tooltip]="\'left-in\'"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'left-in\')"\n >\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="16"\n height="16"\n fill="currentColor"\n class="bi bi-align-start"\n viewBox="0 0 16 16"\n >\n <path fill-rule="evenodd" d="M1.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5" />\n <path d="M3 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z" />\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n [nz-tooltip]="\'center-in\'"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'center-in\')"\n >\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="16"\n height="16"\n fill="currentColor"\n class="bi bi-align-center"\n viewBox="0 0 16 16"\n >\n <path\n d="M8 1a.5.5 0 0 1 .5.5V6h-1V1.5A.5.5 0 0 1 8 1m0 14a.5.5 0 0 1-.5-.5V10h1v4.5a.5.5 0 0 1-.5.5M2 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z"\n />\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n [nz-tooltip]="\'right-in\'"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'right-in\')"\n >\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="16"\n height="16"\n fill="currentColor"\n class="bi bi-align-end"\n viewBox="0 0 16 16"\n >\n <path\n fill-rule="evenodd"\n d="M14.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5"\n />\n <path d="M13 7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1z" />\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n [nz-tooltip]="\'top-in\'"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'top-in\')"\n >\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="16"\n height="16"\n fill="currentColor"\n class="bi bi-align-top"\n viewBox="0 0 16 16"\n >\n <rect width="4" height="12" rx="1" transform="matrix(1 0 0 -1 6 15)" />\n <path d="M1.5 2a.5.5 0 0 1 0-1zm13-1a.5.5 0 0 1 0 1zm-13 0h13v1h-13z" />\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n [nz-tooltip]="\'middle-in\'"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'middle-in\')"\n >\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="16"\n height="16"\n fill="currentColor"\n class="bi bi-align-middle"\n viewBox="0 0 16 16"\n >\n <path\n d="M6 13a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zM1 8a.5.5 0 0 0 .5.5H6v-1H1.5A.5.5 0 0 0 1 8m14 0a.5.5 0 0 1-.5.5H10v-1h4.5a.5.5 0 0 1 .5.5"\n />\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n [nz-tooltip]="\'bottom-in\'"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'bottom-in\')"\n >\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="16"\n height="16"\n fill="currentColor"\n class="bi bi-align-bottom"\n viewBox="0 0 16 16"\n >\n <rect width="4" height="12" x="6" y="1" rx="1" />\n <path d="M1.5 14a.5.5 0 0 0 0 1zm13 1a.5.5 0 0 0 0-1zm-13 0h13v-1h-13z" />\n </svg>\n </button>\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}]}});class Bi{webBuilderService;data;device;idParent;constructor(e){this.webBuilderService=e}ngOnInit(){}ngOnChanges(e){this.idParent=this.data.id_page||this.data.id_block||this.data.id_object}onChoosePosition(e){const n=this.webBuilderService.elementChoosingRef.parentElement,t=this.webBuilderService.parentChoosing,i=this.idParent?`${this.device}_position_${this.idParent}`:`${this.device}_position`,{cols:o,rows:a}=t?.[this.device]?.config?.grid??{cols:1,rows:1};switch(e){case"left-out":this.data[i].left=0;break;case"center-out":const e=n.offsetWidth/o/2-this.webBuilderService.elementChoosingRef.offsetWidth/2;this.data[i].left=e;break;case"right-out":const t=n.offsetWidth/o-this.webBuilderService.elementChoosingRef.offsetWidth;this.data[i].left=t;break;case"top-out":this.data[i].top=0;break;case"middle-out":const r=n.offsetHeight/a/2-this.webBuilderService.elementChoosingRef.offsetHeight/2;this.data[i].top=r;break;case"bottom-out":const s=n.offsetHeight/a-this.webBuilderService.elementChoosingRef.offsetHeight;this.data[i].top=s}this.updatePosition()}updatePosition(){const e=this.idParent?`${this.device}_position_${this.idParent}`:`${this.device}_position`;this.webBuilderService.updateObject(this.data._id,{[e]:this.data[e]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Bi,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"14.0.0",version:"20.3.15",type:Bi,isStandalone:!0,selector:"wb-position-out-config",inputs:{data:"data",device:"device"},usesOnChanges:!0,ngImport:t,template:'<div class="position-out-config flex gap-1 items-center justify-between px-2 mb-1">\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n nz-tooltip="left-out"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'left-out\')"\n >\n <svg\n _ngcontent-fuh-c715=""\n width="14px"\n height="14px"\n version="1.1"\n id="Layer_1"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n x="0px"\n y="0px"\n viewBox="0 0 16 16"\n xml:space="preserve"\n style="enable-background: new 0 0 16 16"\n >\n <g _ngcontent-fuh-c715="">\n <path\n _ngcontent-fuh-c715=""\n d="M14,10.2H4c-0.7,0-1.3-0.5-1.3-1.3V7c0-0.7,0.5-1.3,1.3-1.3h10c0.7,0,1.3,0.5,1.3,1.3v2C15.3,9.7,14.7,10.2,14,10.2z\n M4,6.2C3.5,6.2,3.3,6.5,3.3,7v2c0,0.5,0.3,0.8,0.8,0.8h10c0.5,0,0.8-0.3,0.8-0.8V7c0-0.5-0.3-0.8-0.8-0.8H4z"\n ></path>\n </g>\n <g _ngcontent-fuh-c715="">\n <path\n _ngcontent-fuh-c715=""\n d="M1.5,15.2c-0.4,0-0.8-0.3-0.8-0.8v-13C0.7,1,1,0.7,1.5,0.7S2.3,1,2.3,1.4v13C2.3,14.9,1.9,15.2,1.5,15.2z M1.5,1.2\n c-0.2,0-0.3,0.1-0.3,0.3v13c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3v-13C1.8,1.3,1.7,1.2,1.5,1.2z"\n ></path>\n </g>\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n nz-tooltip="center-out"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'center-out\')"\n >\n <svg\n _ngcontent-fuh-c715=""\n width="14px"\n height="14px"\n version="1.1"\n id="Layer_1"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n x="0px"\n y="0px"\n viewBox="0 0 16 16"\n xml:space="preserve"\n style="enable-background: new 0 0 16 16"\n >\n <path\n _ngcontent-fuh-c715=""\n d="M8,15.3c-0.4,0-0.8-0.3-0.8-0.8v-4.3H3c-0.7,0-1.3-0.5-1.3-1.3V7c0-0.7,0.5-1.3,1.3-1.3h4.3V1.5c0-0.4,0.3-0.8,0.8-0.8\n\ts0.8,0.3,0.8,0.8v4.3H13c0.7,0,1.3,0.5,1.3,1.3v2c0,0.7-0.5,1.3-1.3,1.3H8.8v4.3C8.8,14.9,8.4,15.3,8,15.3z M3,6.3\n\tC2.5,6.3,2.3,6.5,2.3,7v2c0,0.5,0.3,0.8,0.8,0.8h4.8v4.8c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V9.8H13c0.5,0,0.8-0.3,0.8-0.8V7\n\tc0-0.5-0.3-0.8-0.8-0.8H8.3V1.5c0-0.2-0.1-0.3-0.3-0.3S7.8,1.3,7.8,1.5v4.8H3z"\n ></path>\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n nz-tooltip="right-out"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'right-out\')"\n >\n <svg\n _ngcontent-fuh-c715=""\n width="14px"\n height="14px"\n version="1.1"\n id="Layer_1"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n x="0px"\n y="0px"\n viewBox="0 0 16 16"\n xml:space="preserve"\n style="enable-background: new 0 0 16 16"\n >\n <style _ngcontent-fuh-c715="" type="text/css">\n .st0 {\n fill: none;\n stroke: #000000;\n stroke-width: 0.5;\n stroke-miterlimit: 10;\n }\n </style>\n <path\n _ngcontent-fuh-c715=""\n d="M13,7v2c0,0.6-0.4,1-1,1H2c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1h10C12.6,6,13,6.4,13,7z"\n class="st0"\n ></path>\n <path\n _ngcontent-fuh-c715=""\n d="M14,14.5v-13C14,1.2,14.2,1,14.5,1l0,0C14.8,1,15,1.2,15,1.5v13c0,0.3-0.2,0.5-0.5,0.5l0,0\n C14.2,15,14,14.8,14,14.5z"\n class="st0"\n ></path>\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n nz-tooltip="top-out"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'top-out\')"\n >\n <svg\n _ngcontent-fuh-c715=""\n width="14px"\n height="14px"\n version="1.1"\n id="Layer_1"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n x="0px"\n y="0px"\n viewBox="0 0 16 16"\n xml:space="preserve"\n style="enable-background: new 0 0 16 16"\n >\n <g _ngcontent-fuh-c715="">\n <path\n _ngcontent-fuh-c715=""\n d="M9,15.2H7c-0.7,0-1.3-0.5-1.3-1.3V4c0-0.7,0.5-1.3,1.3-1.3h2c0.7,0,1.3,0.5,1.3,1.3v10C10.3,14.7,9.7,15.2,9,15.2z M7,3.2\n\t\tC6.5,3.2,6.3,3.5,6.3,4v10c0,0.5,0.3,0.8,0.8,0.8h2c0.5,0,0.8-0.3,0.8-0.8V4c0-0.5-0.3-0.8-0.8-0.8H7z"\n ></path>\n </g>\n <g _ngcontent-fuh-c715="">\n <path\n _ngcontent-fuh-c715=""\n d="M14.5,2.2h-13c-0.4,0-0.8-0.3-0.8-0.8s0.3-0.8,0.8-0.8h13c0.4,0,0.8,0.3,0.8,0.8S14.9,2.2,14.5,2.2z M1.5,1.2\n\t\tc-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3h13c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H1.5z"\n ></path>\n </g>\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n nz-tooltip="middle-out"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'middle-out\')"\n >\n <svg\n _ngcontent-fuh-c715=""\n width="14px"\n height="14px"\n version="1.1"\n id="Layer_1"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n x="0px"\n y="0px"\n viewBox="0 0 16 16"\n xml:space="preserve"\n style="enable-background: new 0 0 16 16"\n >\n <g _ngcontent-fuh-c715="">\n <path\n _ngcontent-fuh-c715=""\n d="M9,14.3H7c-0.7,0-1.3-0.5-1.3-1.3V8.8H1.5C1.1,8.8,0.8,8.4,0.8,8c0-0.4,0.3-0.7,0.8-0.7h4.3V3c0-0.7,0.5-1.3,1.3-1.3h2\n\t\tc0.7,0,1.3,0.5,1.3,1.3v4.3h4.3c0.4,0,0.8,0.3,0.8,0.7c0,0.4-0.3,0.8-0.8,0.8h-4.3V13C10.3,13.7,9.7,14.3,9,14.3z M1.5,7.8\n\t\tC1.3,7.8,1.3,7.8,1.3,8c0,0.2,0.1,0.3,0.3,0.3h4.8V13c0,0.5,0.3,0.8,0.8,0.8h2c0.5,0,0.8-0.3,0.8-0.8V8.3h4.8\n\t\tc0.2,0,0.3-0.1,0.3-0.3c0-0.2-0.1-0.2-0.3-0.2H9.8V3c0-0.5-0.3-0.8-0.8-0.8H7C6.5,2.3,6.3,2.5,6.3,3v4.8H1.5z"\n ></path>\n </g>\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n nz-tooltip="bottom-out"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'bottom-out\')"\n >\n <svg\n _ngcontent-fuh-c715=""\n width="14px"\n height="14px"\n version="1.1"\n id="Layer_1"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n x="0px"\n y="0px"\n viewBox="0 0 16 16"\n xml:space="preserve"\n style="enable-background: new 0 0 16 16"\n >\n <style _ngcontent-fuh-c715="" type="text/css">\n .st0 {\n fill: none;\n stroke: #000000;\n stroke-width: 0.5;\n stroke-miterlimit: 10;\n }\n </style>\n <path\n _ngcontent-fuh-c715=""\n d="M9,13H7c-0.6,0-1-0.4-1-1V2c0-0.6,0.4-1,1-1h2c0.6,0,1,0.4,1,1v10C10,12.6,9.6,13,9,13z"\n class="st0"\n ></path>\n <path\n _ngcontent-fuh-c715=""\n d="M14.5,15h-13C1.2,15,1,14.8,1,14.5v0C1,14.2,1.2,14,1.5,14h13c0.3,0,0.5,0.2,0.5,0.5v0C15,14.8,14.8,15,14.5,15\n\tz"\n class="st0"\n ></path>\n </svg>\n </button>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:k},{kind:"ngmodule",type:B},{kind:"ngmodule",type:W},{kind:"directive",type:$.NzTooltipDirective,selector:"[nz-tooltip]",inputs:["nzTooltipTitle","nzTooltipTitleContext","nz-tooltip","nzTooltipTrigger","nzTooltipPlacement","nzTooltipOrigin","nzTooltipVisible","nzTooltipMouseEnterDelay","nzTooltipMouseLeaveDelay","nzTooltipOverlayClassName","nzTooltipOverlayStyle","nzTooltipArrowPointAtCenter","cdkConnectedOverlayPush","nzTooltipColor"],outputs:["nzTooltipVisibleChange"],exportAs:["nzTooltip"]},{kind:"ngmodule",type:X},{kind:"component",type:K.NzButtonComponent,selector:"button[nz-button], a[nz-button]",inputs:["nzBlock","nzGhost","nzSearch","nzLoading","nzDanger","disabled","tabIndex","nzType","nzShape","nzSize"],exportAs:["nzButton"]},{kind:"directive",type:oe.ɵNzTransitionPatchDirective,selector:"[nz-button], [nz-icon], nz-icon, [nz-menu-item], [nz-submenu], nz-select-top-control, nz-select-placeholder, nz-input-group",inputs:["hidden"]}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Bi,decorators:[{type:l,args:[{selector:"wb-position-out-config",imports:[k,B,W,X],template:'<div class="position-out-config flex gap-1 items-center justify-between px-2 mb-1">\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n nz-tooltip="left-out"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'left-out\')"\n >\n <svg\n _ngcontent-fuh-c715=""\n width="14px"\n height="14px"\n version="1.1"\n id="Layer_1"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n x="0px"\n y="0px"\n viewBox="0 0 16 16"\n xml:space="preserve"\n style="enable-background: new 0 0 16 16"\n >\n <g _ngcontent-fuh-c715="">\n <path\n _ngcontent-fuh-c715=""\n d="M14,10.2H4c-0.7,0-1.3-0.5-1.3-1.3V7c0-0.7,0.5-1.3,1.3-1.3h10c0.7,0,1.3,0.5,1.3,1.3v2C15.3,9.7,14.7,10.2,14,10.2z\n M4,6.2C3.5,6.2,3.3,6.5,3.3,7v2c0,0.5,0.3,0.8,0.8,0.8h10c0.5,0,0.8-0.3,0.8-0.8V7c0-0.5-0.3-0.8-0.8-0.8H4z"\n ></path>\n </g>\n <g _ngcontent-fuh-c715="">\n <path\n _ngcontent-fuh-c715=""\n d="M1.5,15.2c-0.4,0-0.8-0.3-0.8-0.8v-13C0.7,1,1,0.7,1.5,0.7S2.3,1,2.3,1.4v13C2.3,14.9,1.9,15.2,1.5,15.2z M1.5,1.2\n c-0.2,0-0.3,0.1-0.3,0.3v13c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3v-13C1.8,1.3,1.7,1.2,1.5,1.2z"\n ></path>\n </g>\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n nz-tooltip="center-out"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'center-out\')"\n >\n <svg\n _ngcontent-fuh-c715=""\n width="14px"\n height="14px"\n version="1.1"\n id="Layer_1"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n x="0px"\n y="0px"\n viewBox="0 0 16 16"\n xml:space="preserve"\n style="enable-background: new 0 0 16 16"\n >\n <path\n _ngcontent-fuh-c715=""\n d="M8,15.3c-0.4,0-0.8-0.3-0.8-0.8v-4.3H3c-0.7,0-1.3-0.5-1.3-1.3V7c0-0.7,0.5-1.3,1.3-1.3h4.3V1.5c0-0.4,0.3-0.8,0.8-0.8\n\ts0.8,0.3,0.8,0.8v4.3H13c0.7,0,1.3,0.5,1.3,1.3v2c0,0.7-0.5,1.3-1.3,1.3H8.8v4.3C8.8,14.9,8.4,15.3,8,15.3z M3,6.3\n\tC2.5,6.3,2.3,6.5,2.3,7v2c0,0.5,0.3,0.8,0.8,0.8h4.8v4.8c0,0.2,0.1,0.3,0.3,0.3s0.3-0.1,0.3-0.3V9.8H13c0.5,0,0.8-0.3,0.8-0.8V7\n\tc0-0.5-0.3-0.8-0.8-0.8H8.3V1.5c0-0.2-0.1-0.3-0.3-0.3S7.8,1.3,7.8,1.5v4.8H3z"\n ></path>\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n nz-tooltip="right-out"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'right-out\')"\n >\n <svg\n _ngcontent-fuh-c715=""\n width="14px"\n height="14px"\n version="1.1"\n id="Layer_1"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n x="0px"\n y="0px"\n viewBox="0 0 16 16"\n xml:space="preserve"\n style="enable-background: new 0 0 16 16"\n >\n <style _ngcontent-fuh-c715="" type="text/css">\n .st0 {\n fill: none;\n stroke: #000000;\n stroke-width: 0.5;\n stroke-miterlimit: 10;\n }\n </style>\n <path\n _ngcontent-fuh-c715=""\n d="M13,7v2c0,0.6-0.4,1-1,1H2c-0.6,0-1-0.4-1-1V7c0-0.6,0.4-1,1-1h10C12.6,6,13,6.4,13,7z"\n class="st0"\n ></path>\n <path\n _ngcontent-fuh-c715=""\n d="M14,14.5v-13C14,1.2,14.2,1,14.5,1l0,0C14.8,1,15,1.2,15,1.5v13c0,0.3-0.2,0.5-0.5,0.5l0,0\n C14.2,15,14,14.8,14,14.5z"\n class="st0"\n ></path>\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n nz-tooltip="top-out"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'top-out\')"\n >\n <svg\n _ngcontent-fuh-c715=""\n width="14px"\n height="14px"\n version="1.1"\n id="Layer_1"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n x="0px"\n y="0px"\n viewBox="0 0 16 16"\n xml:space="preserve"\n style="enable-background: new 0 0 16 16"\n >\n <g _ngcontent-fuh-c715="">\n <path\n _ngcontent-fuh-c715=""\n d="M9,15.2H7c-0.7,0-1.3-0.5-1.3-1.3V4c0-0.7,0.5-1.3,1.3-1.3h2c0.7,0,1.3,0.5,1.3,1.3v10C10.3,14.7,9.7,15.2,9,15.2z M7,3.2\n\t\tC6.5,3.2,6.3,3.5,6.3,4v10c0,0.5,0.3,0.8,0.8,0.8h2c0.5,0,0.8-0.3,0.8-0.8V4c0-0.5-0.3-0.8-0.8-0.8H7z"\n ></path>\n </g>\n <g _ngcontent-fuh-c715="">\n <path\n _ngcontent-fuh-c715=""\n d="M14.5,2.2h-13c-0.4,0-0.8-0.3-0.8-0.8s0.3-0.8,0.8-0.8h13c0.4,0,0.8,0.3,0.8,0.8S14.9,2.2,14.5,2.2z M1.5,1.2\n\t\tc-0.2,0-0.3,0.1-0.3,0.3s0.1,0.3,0.3,0.3h13c0.2,0,0.3-0.1,0.3-0.3s-0.1-0.3-0.3-0.3H1.5z"\n ></path>\n </g>\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n nz-tooltip="middle-out"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'middle-out\')"\n >\n <svg\n _ngcontent-fuh-c715=""\n width="14px"\n height="14px"\n version="1.1"\n id="Layer_1"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n x="0px"\n y="0px"\n viewBox="0 0 16 16"\n xml:space="preserve"\n style="enable-background: new 0 0 16 16"\n >\n <g _ngcontent-fuh-c715="">\n <path\n _ngcontent-fuh-c715=""\n d="M9,14.3H7c-0.7,0-1.3-0.5-1.3-1.3V8.8H1.5C1.1,8.8,0.8,8.4,0.8,8c0-0.4,0.3-0.7,0.8-0.7h4.3V3c0-0.7,0.5-1.3,1.3-1.3h2\n\t\tc0.7,0,1.3,0.5,1.3,1.3v4.3h4.3c0.4,0,0.8,0.3,0.8,0.7c0,0.4-0.3,0.8-0.8,0.8h-4.3V13C10.3,13.7,9.7,14.3,9,14.3z M1.5,7.8\n\t\tC1.3,7.8,1.3,7.8,1.3,8c0,0.2,0.1,0.3,0.3,0.3h4.8V13c0,0.5,0.3,0.8,0.8,0.8h2c0.5,0,0.8-0.3,0.8-0.8V8.3h4.8\n\t\tc0.2,0,0.3-0.1,0.3-0.3c0-0.2-0.1-0.2-0.3-0.2H9.8V3c0-0.5-0.3-0.8-0.8-0.8H7C6.5,2.3,6.3,2.5,6.3,3v4.8H1.5z"\n ></path>\n </g>\n </svg>\n </button>\n\n <button\n nz-button\n nzType="text"\n class="bg-gray-300 p-1 cursor-pointer"\n nz-tooltip="bottom-out"\n nzTooltipPlacement="top"\n (click)="onChoosePosition(\'bottom-out\')"\n >\n <svg\n _ngcontent-fuh-c715=""\n width="14px"\n height="14px"\n version="1.1"\n id="Layer_1"\n xmlns="http://www.w3.org/2000/svg"\n xmlns:xlink="http://www.w3.org/1999/xlink"\n x="0px"\n y="0px"\n viewBox="0 0 16 16"\n xml:space="preserve"\n style="enable-background: new 0 0 16 16"\n >\n <style _ngcontent-fuh-c715="" type="text/css">\n .st0 {\n fill: none;\n stroke: #000000;\n stroke-width: 0.5;\n stroke-miterlimit: 10;\n }\n </style>\n <path\n _ngcontent-fuh-c715=""\n d="M9,13H7c-0.6,0-1-0.4-1-1V2c0-0.6,0.4-1,1-1h2c0.6,0,1,0.4,1,1v10C10,12.6,9.6,13,9,13z"\n class="st0"\n ></path>\n <path\n _ngcontent-fuh-c715=""\n d="M14.5,15h-13C1.2,15,1,14.8,1,14.5v0C1,14.2,1.2,14,1.5,14h13c0.3,0,0.5,0.2,0.5,0.5v0C15,14.8,14.8,15,14.5,15\n\tz"\n class="st0"\n ></path>\n </svg>\n </button>\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}]}});class Oi{webBuilderService;data;device;idParent=null;constructor(e){this.webBuilderService=e}ngOnInit(){}ngOnChanges(e){e.data&&this.data&&(this.idParent=this.data.id_page??this.data.id_block??this.data.id_object)}updateClass(){this.data.type.includes("block")?this.webBuilderService.updateBlock(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]}):this.webBuilderService.updateObject(this.data._id,{[this.device+"_class"]:this.data[this.device+"_class"]})}static"ɵfac"=t.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Oi,deps:[{token:xn}],target:t.ɵɵFactoryTarget.Component});static"ɵcmp"=t.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"20.3.15",type:Oi,isStandalone:!0,selector:"wb-width-height-config",inputs:{data:"data",device:"device"},usesOnChanges:!0,ngImport:t,template:'<div class="width-height-config flex flex-col mb-2">\n <div class="flex items-center px-2 gap-2">\n @if (![\'block_blank\', \'block_header\', \'block_footer\'].includes(data.type)) {\n <div\n class="flex items-center gap-2 w-1/2"\n nz-tooltip\n nzTooltipTitle="Chiều rộng"\n nzTooltipPlacement="left"\n >\n <svg\n viewBox="64 64 896 896"\n focusable="false"\n fill="currentColor"\n width="1em"\n height="1em"\n data-icon="column-width"\n aria-hidden="true"\n >\n <path\n d="M180 176h-60c-4.4 0-8 3.6-8 8v656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V184c0-4.4-3.6-8-8-8zm724 0h-60c-4.4 0-8 3.6-8 8v656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V184c0-4.4-3.6-8-8-8zM785.3 504.3L657.7 403.6a7.23 7.23 0 00-11.7 5.7V476H378v-62.8c0-6-7-9.4-11.7-5.7L238.7 508.3a7.14 7.14 0 000 11.3l127.5 100.8c4.7 3.7 11.7.4 11.7-5.7V548h268v62.8c0 6 7 9.4 11.7 5.7l127.5-100.8c3.8-2.9 3.8-8.5.2-11.4z"\n ></path>\n </svg>\n\n <nz-input-number\n style="width: 100%"\n (nzBlur)="updateClass()"\n (keyup.enter)="updateClass()"\n [ngModel]="\n data[device + \'_class\'][data.resize_field][\n webBuilderService.resizeGroup[data.resize_group].width\n ] | wbnumber\n "\n (ngModelChange)="\n data[device + \'_class\'][data.resize_field][\n webBuilderService.resizeGroup[data.resize_group].width\n ] = $event + \'px\'\n "\n nzMin="1"\n nzMax="10000"\n />\n </div>\n }\n\n <div\n class="flex items-center gap-2 w-1/2"\n nz-tooltip\n nzTooltipTitle="Chiều cao"\n nzTooltipPlacement="top"\n >\n <svg\n viewBox="64 64 896 896"\n focusable="false"\n fill="currentColor"\n width="1em"\n height="1em"\n data-icon="column-height"\n aria-hidden="true"\n >\n <path\n d="M840 836H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm0-724H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM610.8 378c6 0 9.4-7 5.7-11.7L515.7 238.7a7.14 7.14 0 00-11.3 0L403.6 366.3a7.23 7.23 0 005.7 11.7H476v268h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H548V378h62.8z"\n ></path>\n </svg>\n <nz-input-number\n style="width: 100%"\n (nzBlur)="updateClass()"\n (keyup.enter)="updateClass()"\n [ngModel]="\n data[device + \'_class\'][data.resize_field][\n webBuilderService.resizeGroup[data.resize_group].height\n ] | wbnumber\n "\n (ngModelChange)="\n data[device + \'_class\'][data.resize_field][\n webBuilderService.resizeGroup[data.resize_group].height\n ] = $event + \'px\'\n "\n nzMin="1"\n nzMax="10000"\n />\n </div>\n </div>\n</div>\n',styles:[""],dependencies:[{kind:"ngmodule",type:B},{kind:"directive",type:M.NgControlStatus,selector:"[formControlName],[ngModel],[formControl]"},{kind:"directive",type:M.NgModel,selector:"[ngModel]:not([formControlName]):not([formControl])",inputs:["name","disabled","ngModel","ngModelOptions"],outputs:["ngModelChange"],exportAs:["ngModel"]},{kind:"ngmodule",type:Z},{kind:"component",type:Q.NzInputNumberComponent,selector:"nz-input-number",inputs:["nzId","nzSize","nzPlaceHolder","nzStatus","nzVariant","nzStep","nzMin","nzMax","nzPrecision","nzParser","nzFormatter","nzDisabled","nzReadOnly","nzAutoFocus","nzBordered","nzKeyboard","nzControls","nzPrefix","nzSuffix","nzAddonBefore","nzAddonAfter"],outputs:["nzBlur","nzFocus","nzOnStep"],exportAs:["nzInputNumber"]},{kind:"ngmodule",type:W},{kind:"directive",type:$.NzTooltipDirective,selector:"[nz-tooltip]",inputs:["nzTooltipTitle","nzTooltipTitleContext","nz-tooltip","nzTooltipTrigger","nzTooltipPlacement","nzTooltipOrigin","nzTooltipVisible","nzTooltipMouseEnterDelay","nzTooltipMouseLeaveDelay","nzTooltipOverlayClassName","nzTooltipOverlayStyle","nzTooltipArrowPointAtCenter","cdkConnectedOverlayPush","nzTooltipColor"],outputs:["nzTooltipVisibleChange"],exportAs:["nzTooltip"]},{kind:"pipe",type:ct,name:"wbnumber"}]})}t.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"20.3.15",ngImport:t,type:Oi,decorators:[{type:l,args:[{selector:"wb-width-height-config",imports:[B,ct,Z,W],template:'<div class="width-height-config flex flex-col mb-2">\n <div class="flex items-center px-2 gap-2">\n @if (![\'block_blank\', \'block_header\', \'block_footer\'].includes(data.type)) {\n <div\n class="flex items-center gap-2 w-1/2"\n nz-tooltip\n nzTooltipTitle="Chiều rộng"\n nzTooltipPlacement="left"\n >\n <svg\n viewBox="64 64 896 896"\n focusable="false"\n fill="currentColor"\n width="1em"\n height="1em"\n data-icon="column-width"\n aria-hidden="true"\n >\n <path\n d="M180 176h-60c-4.4 0-8 3.6-8 8v656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V184c0-4.4-3.6-8-8-8zm724 0h-60c-4.4 0-8 3.6-8 8v656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V184c0-4.4-3.6-8-8-8zM785.3 504.3L657.7 403.6a7.23 7.23 0 00-11.7 5.7V476H378v-62.8c0-6-7-9.4-11.7-5.7L238.7 508.3a7.14 7.14 0 000 11.3l127.5 100.8c4.7 3.7 11.7.4 11.7-5.7V548h268v62.8c0 6 7 9.4 11.7 5.7l127.5-100.8c3.8-2.9 3.8-8.5.2-11.4z"\n ></path>\n </svg>\n\n <nz-input-number\n style="width: 100%"\n (nzBlur)="updateClass()"\n (keyup.enter)="updateClass()"\n [ngModel]="\n data[device + \'_class\'][data.resize_field][\n webBuilderService.resizeGroup[data.resize_group].width\n ] | wbnumber\n "\n (ngModelChange)="\n data[device + \'_class\'][data.resize_field][\n webBuilderService.resizeGroup[data.resize_group].width\n ] = $event + \'px\'\n "\n nzMin="1"\n nzMax="10000"\n />\n </div>\n }\n\n <div\n class="flex items-center gap-2 w-1/2"\n nz-tooltip\n nzTooltipTitle="Chiều cao"\n nzTooltipPlacement="top"\n >\n <svg\n viewBox="64 64 896 896"\n focusable="false"\n fill="currentColor"\n width="1em"\n height="1em"\n data-icon="column-height"\n aria-hidden="true"\n >\n <path\n d="M840 836H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm0-724H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM610.8 378c6 0 9.4-7 5.7-11.7L515.7 238.7a7.14 7.14 0 00-11.3 0L403.6 366.3a7.23 7.23 0 005.7 11.7H476v268h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H548V378h62.8z"\n ></path>\n </svg>\n <nz-input-number\n style="width: 100%"\n (nzBlur)="updateClass()"\n (keyup.enter)="updateClass()"\n [ngModel]="\n data[device + \'_class\'][data.resize_field][\n webBuilderService.resizeGroup[data.resize_group].height\n ] | wbnumber\n "\n (ngModelChange)="\n data[device + \'_class\'][data.resize_field][\n webBuilderService.resizeGroup[data.resize_group].height\n ] = $event + \'px\'\n "\n nzMin="1"\n nzMax="10000"\n />\n </div>\n </div>\n</div>\n'}]}],ctorParameters:()=>[{type:xn}],propDecorators:{data:[{type:s}],device:[{type:s}]}});export{Sn as AuthService,Tn as CartService,Yt as CommonConfigMapService,wi as ComponentConfigMapService,tt as ComponentMapService,In as DrawerService,On as FunctionService,ft as SelectLanguageComponent,yn as WEBBUILDER_API_URL,pt as WbAnimationConfig,gt as WbBackgroundColorConfig,ut as WbBackgroundImageConfig,ht as WbBannerAnimationConfig,kn as WbBlockBlank,Jt as WbBlockBlankConfig,mt as WbBorderConfig,bt as WbBorderRadiusConfig,Wn as WbBreadcumb,ai as WbBreadcumbConfig,Dn as WbButton,ti as WbButtonConfig,Rn as WbButtonQuantity,ci as WbButtonQuantityConfig,Gn as WbButtonSetDefaultAddress,gi as WbButtonSetDefaultAddressConfig,Ci as WbCheckboxConfig,Yn as WbCheckboxFilter,bi as WbCheckboxFilterConfig,zt as WbCkeditorConfig,yt as WbDialogConfig,Cn as WbDragDrop,_t as WbFilterConfig,xt as WbFixedConfig,nt as WbFrameBanner,xi as WbFrameBannerConfig,jn as WbFrameBlank,Qt as WbFrameBlankConfig,Zn as WbFrameCart,yi as WbFrameCartConfig,St as WbFrameContentConfig,En as WbFrameProductDetail,ei as WbFrameProductDetailConfig,$n as WbFrameProducts,kt as WbFrameProductsAdmin,Un as WbFrameProductsByCategory,mi as WbFrameProductsByCategoryConfig,Zt as WbFrameProductsConfig,Ln as WbFrameTab,ni as WbFrameTabConfig,Mt as WbFreeblockConfig,Bt as WbGridConfig,Ot as WbHideShowConfig,It as WbIconConfig,An as WbImage,oi as WbImageConfig,ki as WbImageListNumberConfig,Nn as WbInput,si as WbInputConfig,Jn as WbLine,vi as WbLineConfig,Tt as WbLinkPageConfig,Pt as WbMenuContent,Fn as WbMenuHorizontal,ri as WbMenuHorizontalConfig,Xn as WbMenuMobile,ui as WbMenuMobileConfig,Nt as WbObjectFitConfig,Vt as WbOrdinalConfig,$t as WbPaddingConfig,fi as WbPageConfig,Wt as WbPaginationConfig,Si as WbPositionConfig,Mi as WbPositionInConfig,Bi as WbPositionOutConfig,qn as WbProductImageList,hi as WbProductImageListConfig,et as WbProductSelectAttribute,_i as WbProductSelectAttributeConfig,Lt as WbRotateConfig,Et as WbScrollbarConfig,Kn as WbSelectCountry,di as WbSelectCountryConfig,Hn as WbSelectProvinceDistrictWard,pi as WbSelectProvinceDistrictWardConfig,Rt as WbShadowConfig,Ht as WbSlideConfig,Gt as WbStickyConfig,Pn as WbText,ii as WbTextConfig,Kt as WbTextFormatConfig,Vn as WbTextParagraph,li as WbTextParagraphConfig,Xt as WbToolTipConfig,qt as WbUploadImageConfig,Ut as WbUploadVideoConfig,Qn as WbVideo,zi as WbVideoConfig,wn as WbVirtualSelected,Oi as WbWidthHeightConfig,xn as webBuilderService};
|