@kompasid/lit-web-components 0.9.50 → 0.9.52
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/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js +5 -5
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js.map +1 -1
- package/dist/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.js +16 -19
- package/dist/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.js.map +1 -1
- package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js +2 -2
- package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js.map +1 -1
- package/dist/tailwind/tailwind.js +12 -13
- package/dist/tailwind/tailwind.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/kompasid-paywall-body/KompasPaywallBody.ts +5 -5
- package/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.ts +16 -19
- package/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts +2 -2
- package/tailwind/tailwind.css +12 -13
- package/tailwind/tailwind.ts +12 -13
package/dist/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasPaywallModalRegister.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAI/C,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,UAAU;IAAnD;;QA6DL;;WAEG;QACyB,uBAAkB,GAAG,EAAE,CAAA;QACvB,aAAQ,GAAG,EAAE,CAAA;QAExB,gBAAW,GAAG,KAAK,CAAA;QACnB,iBAAY,GAAG,KAAK,CAAA;QACpB,sBAAiB,GAAkB,EAAmB,CAAA;QACtD,sBAAiB,GAAG,KAAK,CAAA;QAqClC,sBAAiB,GAAG,KAAK,CAAA;QAGzB,aAAQ,GAAG;YACjB,QAAQ,EAAE,EAAE;YACZ,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,EAAE;YACT,WAAW,EAAE,EAAE;SAChB,CAAA;QAGO,eAAU,GAAG;YACnB,QAAQ,EAAE,EAAE;YACZ,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,EAAE;YACT,WAAW,EAAE,EAAE;SAChB,CAAA;QAGO,gBAAW,GAAG;YACpB,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,KAAK;YACZ,WAAW,EAAE,KAAK;SACnB,CAAA;QAGO,kBAAa,GAAG,KAAK,CAAA;QA8HrB,iBAAY,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;qBAWd,IAAI,CAAC,YAAY;;;;;;;;;;;;;;;wBAed,IAAI,CAAC,QAAQ,CAAC,QAAQ;wBACtB,IAAI,CAAC,WAAW;uBACjB,IAAI,CAAC,UAAU;8BACR,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ;;cAE1C,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,CAAC;YACnD,IAAI,CAAC,UAAU,CAAC,QAAQ;YACtB,CAAC,CAAC,IAAI,CAAA;;;;;wBAKI,SAAS,CACT,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,EAAE,CAAC,CACxD;;sBAED,IAAI,CAAC,UAAU,CAAC,QAAQ;;iBAE7B;YACH,CAAC,CAAC,EAAE;;;;;;;;;;;;;;wBAcM,IAAI,CAAC,QAAQ,CAAC,KAAK;wBACnB,IAAI,CAAC,WAAW;uBACjB,IAAI,CAAC,UAAU;8BACR,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;;cAEvC,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,IAAI,CAAC,aAAa,CAAC;YAChD,IAAI,CAAC,UAAU,CAAC,KAAK;YACnB,CAAC,CAAC,IAAI,CAAA;;;;;wBAKI,SAAS,CACT,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,EAAE,CAAC,CACxD;;sBAED,IAAI,CAAC,UAAU,CAAC,KAAK;;iBAE1B;YACH,CAAC,CAAC,EAAE;;;;;;;;;;;;;;wBAcM,IAAI,CAAC,QAAQ,CAAC,KAAK;wBACnB,IAAI,CAAC,WAAW;uBACjB,IAAI,CAAC,UAAU;8BACR,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;;cAEvC,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,IAAI,CAAC,aAAa,CAAC;YAChD,IAAI,CAAC,UAAU,CAAC,KAAK;YACnB,CAAC,CAAC,IAAI,CAAA;;;;;wBAKI,SAAS,CACT,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,EAAE,CAAC,CACxD;;sBAED,IAAI,CAAC,UAAU,CAAC,KAAK;;iBAE1B;YACH,CAAC,CAAC,EAAE;;;;;;;;;;;;;wBAaM,IAAI,CAAC,QAAQ,CAAC,WAAW;wBACzB,IAAI,CAAC,WAAW;uBACjB,IAAI,CAAC,UAAU;8BACR,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW;;cAE7C,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa,CAAC;YACtD,IAAI,CAAC,UAAU,CAAC,WAAW;YACzB,CAAC,CAAC,IAAI,CAAA;;;;;wBAKI,SAAS,CACT,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,EAAE,CAAC,CACxD;;sBAED,IAAI,CAAC,UAAU,CAAC,WAAW;;iBAEhC;YACH,CAAC,CAAC,EAAE;;;;;;;;;;;GAWf,CAAA;IA4MH,CAAC;IAliBC;;OAEG;IACM,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,cAAc,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAA;QACvD,IAAI,CAAC,kBAAkB,EAAE,CAAA;IAC3B,CAAC;IAED,KAAK,CAAC,kBAAkB;QACtB,IAAI;YACF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAC1B,kEAAkE,CACnE,CAAA;YACD,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;YAClC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAA;SAC9B;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,KAAK,YAAY,KAAK,EAAE;gBAC1B,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;aAC3B;SACF;gBAAS;YACR,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAA;SAC9B;IACH,CAAC;IAED,SAAS;QACP,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;IACzB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;QACxB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;IAC3B,CAAC;IAgCO,mBAAmB;QACzB,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAA;IAClD,CAAC;IAEO,WAAW,CAAC,CAAa;QAC/B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC3C,MAAM,IAAI,GAAG,MAAM,CAAC,IAAkC,CAAA;QACtD,IAAI,CAAC,QAAQ,GAAG;YACd,GAAG,IAAI,CAAC,QAAQ;YAChB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,KAAK;SACrB,CAAA;QAED,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;YAChD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;SACzB;IACH,CAAC;IAEO,UAAU,CAAC,CAAa;QAC9B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC3C,MAAM,IAAI,GAAG,MAAM,CAAC,IAAkC,CAAA;QACtD,IAAI,CAAC,WAAW,GAAG;YACjB,GAAG,IAAI,CAAC,WAAW;YACnB,CAAC,IAAI,CAAC,EAAE,IAAI;SACb,CAAA;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;IAC1B,CAAC;IAEO,aAAa,CAAC,KAAiC;QACrD,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAA;QACzC,IAAI,KAAK,GAAG,EAAE,CAAA;QAEd,IAAI,CAAC,KAAK,EAAE;YACV,QAAQ,KAAK,EAAE;gBACb,KAAK,UAAU;oBACb,KAAK,GAAG,2BAA2B,CAAA;oBACnC,MAAK;gBACP,KAAK,OAAO;oBACV,KAAK,GAAG,oBAAoB,CAAA;oBAC5B,MAAK;gBACP,KAAK,OAAO;oBACV,KAAK,GAAG,2BAA2B,CAAA;oBACnC,MAAK;gBACP,KAAK,aAAa;oBAChB,KAAK,GAAG,uCAAuC,CAAA;oBAC/C,MAAK;gBACP;oBACE,KAAK,GAAG,EAAE,CAAA;oBACV,MAAK;aACR;SACF;aAAM,IAAI,KAAK,KAAK,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC7D,KAAK,GAAG,2BAA2B,CAAA;SACpC;aAAM,IAAI,KAAK,KAAK,OAAO,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YACnE,KAAK,GAAG,kCAAkC,CAAA;SAC3C;QAED,IAAI,CAAC,UAAU,GAAG;YAChB,GAAG,IAAI,CAAC,UAAU;YAClB,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAA;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;QAC9B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;QAC3B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;QAC3B,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAA;QAEjC,OAAO,CACL,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC;YACrD,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CACjE,CAAA;IACH,CAAC;IAEO,KAAK,CAAC,YAAY,CAAC,CAAQ;QACjC,CAAC,CAAC,cAAc,EAAE,CAAA;QAClB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;QAEzB,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,EAAE,CAAA;QACnC,IAAI,CAAC,OAAO,EAAE;YACZ,OAAM;SACP;QAED,MAAM,UAAU,GAAG;YACjB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ;YAC5B,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK;YAC1B,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK;YAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,WAAW;SACnC,CAAA;QAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QAExB,2BAA2B;QAC3B,IAAI;YACF,MAAM,QAAQ,GAAG,IAAI,eAAe,CAAC,UAAU,CAAC,CAAA;YAChD,MAAM,KAAK,CAAC,wDAAwD,EAAE;gBACpE,MAAM,EAAE,MAAM;gBACd,IAAI,EAAE,QAAQ;aACf,CAAC,CAAA;SACH;QAAC,OAAO,GAAG,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,GAAG,CAAC,CAAA;SAC7C;IACH,CAAC;IAEO,sBAAsB;QAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAA;IAC3B,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,uBAAuB,EAAE,CAAA;QAC9B,MAAM,CAAC,IAAI,CACT,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG;YACpD,iHAAiH,CACpH,CAAA;IACH,CAAC;IAEO,uBAAuB;QAC7B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,gBAAgB;YACvB,QAAQ,EAAE,IAAI,CAAC,kBAAkB;YACjC,IAAI,EAAE,IAAI,CAAC,QAAQ;YACnB,SAAS,EAAE,UAAU,EAAE;SACxB,CAAC,CAAA;IACJ,CAAC;IA8JD,MAAM;QACJ,OAAO,IAAI,CAAC,iBAAiB;YAC3B,CAAC,CAAC,IAAI,CAAA;;;;;kBAKM,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY;;;;oBAItC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,cAAc;;;;;wBAKtC,IAAI,CAAC,SAAS;mCACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,aAAa;gBAC5D,CAAC,CAAC,yBAAyB;gBAC3B,CAAC,CAAC,iDAAiD;;;kBAGjD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU;;;;;YAK5C,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,YAAY;gBACtC,CAAC,CAAC,IAAI,CAAA;;;4BAGU,IAAI,CAAC,UAAU;6BACd,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;;;;8BAItB,CAAC,CAAiC,EAAE,EAAE,CAC9C,CAAC,CAAC,eAAe,EAAE;+BACV,CAAC,CAAiC,EAAE,EAAE,CAC/C,CAAC,CAAC,eAAe,EAAE;;2DAEkB,IAAI,CAAC,UAAU;wBAClD,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;;;;;;0BAMlD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI;oBAC/C,CAAC,CAAC,IAAI,CAAA;;;uCAGO,IAAI,CAAC,iBAAiB,CAAC,KAAK;yBAChC,aAAa,CAAC,IAAI;;;6BAGxB;oBACH,CAAC,CAAC,OAAO;;+FAE4D,IAAI;qBACtE,iBAAiB;oBAClB,CAAC,CAAC,WAAW;oBACb,CAAC,CAAC,4BAA4B;;4BAE9B,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa;qBACzC,QAAQ;oBACX,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ;yBAChD,MAAM;oBACP,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,CACrD,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;;;;;;;0CAOI,SAAS,CACT,kBAAkB,CAChB,KAAK,EACL,OAAO,EACP,EAAE,EACF,EAAE,CACH,CACF;;;;;0CAKC,IAAI;;;mCAGX,CACJ;oBACH,CAAC,CAAC,OAAO;;;;kCAIH,IAAI,CAAC,mBAAmB;;;;+FAIqC,IAAI;qBACtE,iBAAiB;oBAClB,CAAC,CAAC,QAAQ;oBACV,CAAC,CAAC,EAAE;;;;;4BAKJ,IAAI,CAAC,iBAAiB;oBACtB,CAAC,CAAC,aAAa;oBACf,CAAC,CAAC,2BAA2B;4BAC7B,SAAS,CACT,kBAAkB,CAChB,KAAK,EACL,IAAI,CAAC,iBAAiB;oBACpB,CAAC,CAAC,YAAY;oBACd,CAAC,CAAC,cAAc,CACnB,CACF;;;;;;;;mCAQQ,IAAI,CAAC,sBAAsB;;;4BAGlC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO;qBACjD,IAAI;;;;;wBAKT,IAAI,CAAC,YAAY,EAAE;;;;;;mCAMR,IAAI,CAAC,sBAAsB;;;4BAGlC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO;qBACjD,IAAI;;;;;;eAMlB;gBACH,CAAC,CAAC,EAAE;YACJ,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY;gBACrC,CAAC,CAAC,IAAI,CAAA;;0BAEQ,IAAI,CAAC,UAAU;2BACd,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;;;;4BAItB,CAAC,CAAiC,EAAE,EAAE,CAC9C,CAAC,CAAC,eAAe,EAAE;6BACV,CAAC,CAAiC,EAAE,EAAE,CAC/C,CAAC,CAAC,eAAe,EAAE;;yDAEkB,IAAI,CAAC,UAAU;sBAClD,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;;oBAEtD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI;oBAC9C,CAAC,CAAC,IAAI,CAAA;;;iCAGO,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,YAAY;yBAC7C,IAAI;;;uBAGV;oBACH,CAAC,CAAC,OAAO;;;wBAGL,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK;;;;oCAInC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,YAAY;qBACpD,WAAW;;;gCAGJ,IAAI,CAAC,UAAU;;;;;;;qBAO1B;gBACT,CAAC,CAAC,EAAE,GAAG;YACb,CAAC,CAAC,OAAO,CAAA;IACb,CAAC;;AAxmBM,iCAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;IACD,QAAQ;CACT,CAAA;AAK2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sEAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAc;AAEhC;IAAR,KAAK,EAAE;+DAA4B;AAC3B;IAAR,KAAK,EAAE;gEAA6B;AAC5B;IAAR,KAAK,EAAE;qEAA+D;AAC9D;IAAR,KAAK,EAAE;qEAAkC;AAqC1C;IADC,KAAK,EAAE;qEACyB;AAGjC;IADC,KAAK,EAAE;4DAMP;AAGD;IADC,KAAK,EAAE;8DAMP;AAGD;IADC,KAAK,EAAE;+DAMP;AAGD;IADC,KAAK,EAAE;iEACqB;AAtIlB,0BAA0B;IADtC,aAAa,CAAC,iCAAiC,CAAC;GACpC,0BAA0B,CA0mBtC;SA1mBY,0BAA0B","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { ModalRegister } from './types.js'\n\n@customElement('kompasid-paywall-modal-register')\nexport class KompasPaywallModalRegister extends LitElement {\n static styles = [\n css`\n :host {\n display: block;\n }\n\n .bold-yellow b {\n color: #dbaa00;\n }\n\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n }\n\n .modal-content {\n background-color: #222222;\n border-radius: 12px;\n overflow: hidden;\n position: relative;\n }\n\n .close-button {\n position: absolute;\n top: 10px;\n right: 10px;\n background: none;\n border: none;\n font-size: 1.5em;\n color: #999999;\n cursor: pointer;\n z-index: 1;\n }\n\n .transparent-linear-dark {\n background-image: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(hsla(0, 0%, 18%, 0)),\n to(#333333)\n );\n background-image: linear-gradient(180deg, hsla(0, 0%, 18%, 0), #333333);\n }\n\n .font-lora {\n font-family: 'Lora', 'Georgia', 'serif';\n }\n `,\n TWStyles,\n ]\n\n /**\n * Properties\n */\n @property({ type: String }) subscriptionStatus = ''\n @property({ type: String }) userGuid = ''\n\n @state() private isModalOpen = false\n @state() private confirmation = false\n @state() private dataModalRegister: ModalRegister = {} as ModalRegister\n @state() private showModalRegister = false\n\n /**\n * Lifecycle\n */\n override connectedCallback() {\n super.connectedCallback()\n addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])\n this.getRegisterProData()\n }\n\n async getRegisterProData() {\n try {\n const response = await fetch(\n 'https://cdn-www.kompas.id/web-component/form-b2b-kompas-pro.json'\n )\n const data = await response.json()\n this.dataModalRegister = data\n } catch (error) {\n if (error instanceof Error) {\n console.log(error.message)\n }\n } finally {\n this.showModalRegister = true\n }\n }\n\n openModal() {\n this.isModalOpen = true\n }\n\n closeModal() {\n this.isModalOpen = false\n this.confirmation = false\n }\n\n @state()\n private showMobileBenefit = false\n\n @state()\n private formData = {\n nameUser: '',\n email: '',\n nomor: '',\n nameCompany: '',\n }\n\n @state()\n private formErrors = {\n nameUser: '',\n email: '',\n nomor: '',\n nameCompany: '',\n }\n\n @state()\n private formTouched = {\n nameUser: false,\n email: false,\n nomor: false,\n nameCompany: false,\n }\n\n @state()\n private formSubmitted = false\n\n private toggleMobileBenefit() {\n this.showMobileBenefit = !this.showMobileBenefit\n }\n\n private handleInput(e: InputEvent) {\n const target = e.target as HTMLInputElement\n const name = target.name as keyof typeof this.formData\n this.formData = {\n ...this.formData,\n [name]: target.value,\n }\n\n if (this.formTouched[name] || this.formSubmitted) {\n this.validateField(name)\n }\n }\n\n private handleBlur(e: FocusEvent) {\n const target = e.target as HTMLInputElement\n const name = target.name as keyof typeof this.formData\n this.formTouched = {\n ...this.formTouched,\n [name]: true,\n }\n this.validateField(name)\n }\n\n private validateField(field: keyof typeof this.formData) {\n const value = this.formData[field].trim()\n let error = ''\n\n if (!value) {\n switch (field) {\n case 'nameUser':\n error = 'Nama lengkap harus diisi.'\n break\n case 'email':\n error = 'Email harus diisi.'\n break\n case 'nomor':\n error = 'Nomor kontak harus diisi.'\n break\n case 'nameCompany':\n error = 'Nama perusahaan/asosiasi harus diisi.'\n break\n default:\n error = ''\n break\n }\n } else if (field === 'email' && !/^\\S+@\\S+\\.\\S+$/.test(value)) {\n error = 'Masukan email yang valid.'\n } else if (field === 'nomor' && !/^[0-9+\\-\\s()]{6,20}$/.test(value)) {\n error = 'Masukan nomor kontak yang valid.'\n }\n\n this.formErrors = {\n ...this.formErrors,\n [field]: error,\n }\n }\n\n private validateForm() {\n this.validateField('nameUser')\n this.validateField('email')\n this.validateField('nomor')\n this.validateField('nameCompany')\n\n return (\n Object.values(this.formErrors).every(error => !error) &&\n Object.values(this.formData).every(value => value.trim() !== '')\n )\n }\n\n private async handleSubmit(e: Event) {\n e.preventDefault()\n this.formSubmitted = true\n\n const isValid = this.validateForm()\n if (!isValid) {\n return\n }\n\n const formResult = {\n name: this.formData.nameUser,\n email: this.formData.email,\n phone: this.formData.nomor,\n company: this.formData.nameCompany,\n }\n\n this.confirmation = true\n\n // Send form data to Zapier\n try {\n const formBody = new URLSearchParams(formResult)\n await fetch('https://hooks.zapier.com/hooks/catch/14222434/uedqovx/', {\n method: 'POST',\n body: formBody,\n })\n } catch (err) {\n console.error('Form submission error:', err)\n }\n }\n\n private customerServiceClicked() {\n this.redirectToHelpdesk()\n }\n\n private redirectToHelpdesk(): void {\n this.sendDataLayeronHelpDesk()\n window.open(\n this.dataModalRegister.modal.registerPopUp.hotline.url ||\n 'https://api.whatsapp.com/send/?phone=6281290050800&text=Halo,%20saya%20perlu%20informasi%20mengenai%20kompas.id'\n )\n }\n\n private sendDataLayeronHelpDesk(): void {\n window.dataLayer.push({\n event: 'helpOfferClick',\n userType: this.subscriptionStatus,\n GUID: this.userGuid,\n interface: deviceType(),\n })\n }\n\n private templateForm = () => html`\n <div class=\"text-white text-center font-sans py-6 px-4 md:px-20 md:py-16\">\n <h1 class=\"font-lora text-xl md:text-2xl font-bold\">\n Akses Penuh Media Intelligence dengan Paket Langganan Korporasi\n </h1>\n <div class=\"text-grey-200 text-sm md:text-base mt-4\">\n Lengkapi formulir ini untuk dapatkan konsultasi paket korporasi Kompas\n Professional dan penawaran harga terbaik bagi organisasi Anda.\n </div>\n <div>\n <form\n @submit=\"${this.handleSubmit}\"\n action=\"\"\n class=\"mt-8 gap-6 flex flex-col\"\n >\n <div class=\"flex flex-col gap-2\">\n <label for=\"nameUser\" class=\"font-bold flex flex-row\">\n Nama Lengkap\n <span class=\"text-[#F57A7A] flex items-start\">*</span>\n </label>\n <input\n id=\"nameUser\"\n name=\"nameUser\"\n type=\"text\"\n placeholder=\"\"\n class=\"p-2 bg-grey-500 rounded border border-grey-400\"\n .value=\"${this.formData.nameUser}\"\n @input=\"${this.handleInput}\"\n @blur=\"${this.handleBlur}\"\n aria-invalid=\"${!!this.formErrors.nameUser}\"\n />\n ${(this.formTouched.nameUser || this.formSubmitted) &&\n this.formErrors.nameUser\n ? html`\n <div\n class=\"text-sm text-[#F57A7A] flex flex-row items-center\"\n >\n <div class=\"h-4 w-4 flex items-center justify-center mr-2\">\n ${unsafeSVG(\n getFontAwesomeIcon('fas', 'exclamation-circle', 10, 10)\n )}\n </div>\n ${this.formErrors.nameUser}\n </div>\n `\n : ''}\n </div>\n <div class=\"flex flex-col gap-2\">\n <label for=\"email\" class=\"font-bold flex flex-row\">\n Email\n <span class=\"text-[#F57A7A] flex items-start\">*</span>\n </label>\n <input\n autocomplete=\"off\"\n id=\"email\"\n name=\"email\"\n type=\"email\"\n placeholder=\"\"\n class=\"p-2 bg-grey-500 rounded border border-grey-400\"\n .value=\"${this.formData.email}\"\n @input=\"${this.handleInput}\"\n @blur=\"${this.handleBlur}\"\n aria-invalid=\"${!!this.formErrors.email}\"\n />\n ${(this.formTouched.email || this.formSubmitted) &&\n this.formErrors.email\n ? html`\n <div\n class=\"text-sm text-[#F57A7A] flex flex-row items-center\"\n >\n <div class=\"h-4 w-4 flex items-center justify-center mr-2\">\n ${unsafeSVG(\n getFontAwesomeIcon('fas', 'exclamation-circle', 10, 10)\n )}\n </div>\n ${this.formErrors.email}\n </div>\n `\n : ''}\n </div>\n <div class=\"flex flex-col gap-2\">\n <label for=\"nomor\" class=\"font-bold flex flex-row\">\n Nomor Kontak (WhatsApp/Ponsel)\n <span class=\"text-[#F57A7A] flex items-start\">*</span>\n </label>\n <input\n autocomplete=\"off\"\n id=\"nomor\"\n name=\"nomor\"\n type=\"tel\"\n placeholder=\"\"\n class=\"p-2 bg-grey-500 rounded border border-grey-400\"\n .value=\"${this.formData.nomor}\"\n @input=\"${this.handleInput}\"\n @blur=\"${this.handleBlur}\"\n aria-invalid=\"${!!this.formErrors.nomor}\"\n />\n ${(this.formTouched.nomor || this.formSubmitted) &&\n this.formErrors.nomor\n ? html`\n <div\n class=\"text-sm text-[#F57A7A] flex flex-row items-center\"\n >\n <div class=\"h-4 w-4 flex items-center justify-center mr-2\">\n ${unsafeSVG(\n getFontAwesomeIcon('fas', 'exclamation-circle', 10, 10)\n )}\n </div>\n ${this.formErrors.nomor}\n </div>\n `\n : ''}\n </div>\n <div class=\"flex flex-col gap-2\">\n <label for=\"name_company\" class=\"font-bold flex flex-row\">\n Nama Perusahaan/Asosiasi\n <span class=\"text-[#F57A7A] flex items-start\">*</span>\n </label>\n <input\n id=\"name_company\"\n name=\"nameCompany\"\n type=\"text\"\n placeholder=\"\"\n class=\"p-2 bg-grey-500 rounded border border-grey-400\"\n .value=\"${this.formData.nameCompany}\"\n @input=\"${this.handleInput}\"\n @blur=\"${this.handleBlur}\"\n aria-invalid=\"${!!this.formErrors.nameCompany}\"\n />\n ${(this.formTouched.nameCompany || this.formSubmitted) &&\n this.formErrors.nameCompany\n ? html`\n <div\n class=\"text-sm text-[#F57A7A] flex flex-row items-center\"\n >\n <div class=\"h-4 w-4 flex items-center justify-center mr-2\">\n ${unsafeSVG(\n getFontAwesomeIcon('fas', 'exclamation-circle', 10, 10)\n )}\n </div>\n ${this.formErrors.nameCompany}\n </div>\n `\n : ''}\n </div>\n <button\n type=\"submit\"\n class=\"bg-yellow-500 text-center h-10 rounded text-grey-600 mt-2 w-full font-bold\"\n >\n Kirim\n </button>\n </form>\n </div>\n </div>\n `\n\n render() {\n return this.showModalRegister\n ? html`<div\n class=\"px-4 font-sans flex flex-wrap items-center justify-between rounded-lg md:mx-0 w-full min-h-[68px] bg-white relative\"\n >\n <div class=\"flex flex-col gap-1\">\n <span class=\"text-xs leading-tight text-grey-500\">\n ${this.dataModalRegister.card.labelPackage}\n </span>\n <div class=\"flex items-baseline\">\n <h5 class=\"text-base font-bold text-orange-400 leading-none\">\n ${this.dataModalRegister.card.textInvitation}\n </h5>\n </div>\n </div>\n <button\n @click=\"${this.openModal}\"\n class=\"h-8 rounded ${this.dataModalRegister.card.isButtonSolid\n ? 'bg-green-500 text-white'\n : 'bg-white border border-green-500 text-green-500'} flex items-center\"\n >\n <h6 class=\"text-xs md:text-sm font-bold py-2 px-4\">\n ${this.dataModalRegister.card.textButton}\n </h6>\n </button>\n </div>\n\n ${this.isModalOpen && !this.confirmation\n ? html`\n <div\n class=\"modal-overlay p-4\"\n @click=\"${this.closeModal}\"\n @keydown=${() => this.closeModal()}\n >\n <div\n class=\"modal-content max-w-7xl w-full flex flex-col lg:flex-row max-h-full overflow-auto\"\n @click=\"${(e: { stopPropagation: () => any }) =>\n e.stopPropagation()}\"\n @keydown=${(e: { stopPropagation: () => any }) =>\n e.stopPropagation()}\n >\n <button class=\"close-button\" @click=\"${this.closeModal}\">\n ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}\n </button>\n <div\n class=\"bg-grey-600 lg:max-w-[515px] w-full p-4 md:p-16 justify-between items-center flex flex-col relative\"\n >\n <div class=\"items-center flex flex-col\">\n ${this.dataModalRegister.modal.registerPopUp.logo\n ? html`\n <img\n class=\" max-w-[214px] md:max-w-[321px] pt-2 md:pt-0\"\n src=\"${this.dataModalRegister.modal\n .registerPopUp.logo}\"\n alt=\"logo kompas pro mining\"\n />\n `\n : nothing}\n <div\n class=\"flex flex-col mt-6 md:mt-10 gap-2 text-left overflow-hidden ${this\n .showMobileBenefit\n ? 'max-h-fit'\n : 'max-h-[150px] lg:max-h-fit'}\"\n >\n ${this.dataModalRegister.modal.registerPopUp\n .benefits &&\n this.dataModalRegister.modal.registerPopUp.benefits\n .length\n ? this.dataModalRegister.modal.registerPopUp.benefits.map(\n item =>\n html`\n <div\n class=\"flex items-baseline text-left text-white\"\n >\n <div\n class=\"text-green-400 h-5 w-5 md:h-6 md:w-6 flex shrink-0 items-center justify-center\"\n >\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'check',\n 16,\n 16\n )\n )}\n </div>\n <h6\n class=\"text-sm md:text-lg font-sans ml-1 leading-6\"\n >\n ${item}\n </h6>\n </div>\n `\n )\n : nothing}\n </div>\n </div>\n <button\n @click=\"${this.toggleMobileBenefit}\"\n class=\"bg-grey-600 absolute text-grey-100 py-6 w-full bottom-0 left-0 text-center lg:hidden\"\n >\n <div\n class=\"h-12 transparent-linear-dark -mt-[72px] z-0 w-full absolute ${this\n .showMobileBenefit\n ? 'hidden'\n : ''}\"\n ></div>\n <div\n class=\"flex flex-row items-center justify-center gap-4\"\n >\n ${this.showMobileBenefit\n ? 'Sembunyikan'\n : 'Lihat keuntungan lainnnya'}\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n this.showMobileBenefit\n ? 'chevron-up'\n : 'chevron-down'\n )\n )}\n </div>\n </button>\n <div\n class=\"hidden lg:block text-grey-300 pt-10 border-t border-grey-500 w-full text-center\"\n >\n Butuh bantuan? Hubungi\n <button\n @click=${this.customerServiceClicked}\n class=\"font-bold underline\"\n >\n ${this.dataModalRegister.modal.registerPopUp.hotline\n .text}\n </button>\n </div>\n </div>\n <div class=\"w-full h-full\">\n ${this.templateForm()}\n <div\n class=\"block lg:hidden text-grey-300 py-5 bg-grey-600 w-full text-center\"\n >\n Butuh bantuan? Hubungi\n <button\n @click=${this.customerServiceClicked}\n class=\"font-bold underline\"\n >\n ${this.dataModalRegister.modal.registerPopUp.hotline\n .text}\n </button>\n </div>\n </div>\n </div>\n </div>\n `\n : ''}\n ${this.isModalOpen && this.confirmation\n ? html` <div\n class=\"modal-overlay px-4\"\n @click=\"${this.closeModal}\"\n @keydown=${() => this.closeModal()}\n >\n <div\n class=\"modal-content max-w-[624px] max-h-[577px] items-end flex flex-col justify-end h-full w-full p-4 md:p-10\"\n @click=\"${(e: { stopPropagation: () => any }) =>\n e.stopPropagation()}\"\n @keydown=${(e: { stopPropagation: () => any }) =>\n e.stopPropagation()}\n >\n <button class=\"close-button\" @click=\"${this.closeModal}\">\n ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}\n </button>\n ${this.dataModalRegister.modal.successPopUp.logo\n ? html`\n <img\n class=\"w-full max-w-[242px] mx-auto\"\n src=\"${this.dataModalRegister.modal.successPopUp\n .logo}\"\n alt=\"konfirmasi\"\n />\n `\n : nothing}\n <div class=\"text-grey-300 text-center mt-8\">\n <h1 class=\"text-lg md:text-xl font-bold \">\n ${this.dataModalRegister.modal.successPopUp.title}\n </h1>\n <p\n class=\"text-sm md:text-base mt-4 bold-yellow\"\n .innerHTML=\"${this.dataModalRegister.modal.successPopUp\n .description}\"\n ></p>\n <button\n @click=\"${this.closeModal}\"\n class=\"bg-yellow-500 text-center h-10 rounded text-grey-600 mt-6 w-full font-bold\"\n >\n Oke\n </button>\n </div>\n </div>\n </div>`\n : ''} `\n : nothing\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"KompasPaywallModalRegister.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAI/C,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,UAAU;IAAnD;;QA0DL;;WAEG;QACyB,uBAAkB,GAAG,EAAE,CAAA;QACvB,aAAQ,GAAG,EAAE,CAAA;QAExB,gBAAW,GAAG,KAAK,CAAA;QACnB,iBAAY,GAAG,KAAK,CAAA;QACpB,sBAAiB,GAAkB,EAAmB,CAAA;QACtD,sBAAiB,GAAG,KAAK,CAAA;QAqClC,sBAAiB,GAAG,KAAK,CAAA;QAGzB,aAAQ,GAAG;YACjB,QAAQ,EAAE,EAAE;YACZ,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,EAAE;YACT,WAAW,EAAE,EAAE;SAChB,CAAA;QAGO,eAAU,GAAG;YACnB,QAAQ,EAAE,EAAE;YACZ,KAAK,EAAE,EAAE;YACT,KAAK,EAAE,EAAE;YACT,WAAW,EAAE,EAAE;SAChB,CAAA;QAGO,gBAAW,GAAG;YACpB,QAAQ,EAAE,KAAK;YACf,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,KAAK;YACZ,WAAW,EAAE,KAAK;SACnB,CAAA;QAGO,kBAAa,GAAG,KAAK,CAAA;QA8HrB,iBAAY,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;qBAWd,IAAI,CAAC,YAAY;;;;;;;;;;;;;;;wBAed,IAAI,CAAC,QAAQ,CAAC,QAAQ;wBACtB,IAAI,CAAC,WAAW;uBACjB,IAAI,CAAC,UAAU;8BACR,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ;;cAE1C,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,CAAC;YACnD,IAAI,CAAC,UAAU,CAAC,QAAQ;YACtB,CAAC,CAAC,IAAI,CAAA;;;;;wBAKI,SAAS,CACT,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,EAAE,CAAC,CACxD;;sBAED,IAAI,CAAC,UAAU,CAAC,QAAQ;;iBAE7B;YACH,CAAC,CAAC,EAAE;;;;;;;;;;;;;;wBAcM,IAAI,CAAC,QAAQ,CAAC,KAAK;wBACnB,IAAI,CAAC,WAAW;uBACjB,IAAI,CAAC,UAAU;8BACR,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;;cAEvC,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,IAAI,CAAC,aAAa,CAAC;YAChD,IAAI,CAAC,UAAU,CAAC,KAAK;YACnB,CAAC,CAAC,IAAI,CAAA;;;;;wBAKI,SAAS,CACT,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,EAAE,CAAC,CACxD;;sBAED,IAAI,CAAC,UAAU,CAAC,KAAK;;iBAE1B;YACH,CAAC,CAAC,EAAE;;;;;;;;;;;;;;wBAcM,IAAI,CAAC,QAAQ,CAAC,KAAK;wBACnB,IAAI,CAAC,WAAW;uBACjB,IAAI,CAAC,UAAU;8BACR,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK;;cAEvC,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,IAAI,CAAC,aAAa,CAAC;YAChD,IAAI,CAAC,UAAU,CAAC,KAAK;YACnB,CAAC,CAAC,IAAI,CAAA;;;;;wBAKI,SAAS,CACT,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,EAAE,CAAC,CACxD;;sBAED,IAAI,CAAC,UAAU,CAAC,KAAK;;iBAE1B;YACH,CAAC,CAAC,EAAE;;;;;;;;;;;;;wBAaM,IAAI,CAAC,QAAQ,CAAC,WAAW;wBACzB,IAAI,CAAC,WAAW;uBACjB,IAAI,CAAC,UAAU;8BACR,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,WAAW;;cAE7C,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,IAAI,IAAI,CAAC,aAAa,CAAC;YACtD,IAAI,CAAC,UAAU,CAAC,WAAW;YACzB,CAAC,CAAC,IAAI,CAAA;;;;;wBAKI,SAAS,CACT,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,EAAE,CAAC,CACxD;;sBAED,IAAI,CAAC,UAAU,CAAC,WAAW;;iBAEhC;YACH,CAAC,CAAC,EAAE;;;;;;;;;;;GAWf,CAAA;IA4MH,CAAC;IAliBC;;OAEG;IACM,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,cAAc,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAA;QACvD,IAAI,CAAC,kBAAkB,EAAE,CAAA;IAC3B,CAAC;IAED,KAAK,CAAC,kBAAkB;QACtB,IAAI;YACF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAC1B,kEAAkE,CACnE,CAAA;YACD,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;YAClC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAA;SAC9B;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,KAAK,YAAY,KAAK,EAAE;gBAC1B,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;aAC3B;SACF;gBAAS;YACR,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAA;SAC9B;IACH,CAAC;IAED,SAAS;QACP,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;IACzB,CAAC;IAED,UAAU;QACR,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;QACxB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;IAC3B,CAAC;IAgCO,mBAAmB;QACzB,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAA;IAClD,CAAC;IAEO,WAAW,CAAC,CAAa;QAC/B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC3C,MAAM,IAAI,GAAG,MAAM,CAAC,IAAkC,CAAA;QACtD,IAAI,CAAC,QAAQ,GAAG;YACd,GAAG,IAAI,CAAC,QAAQ;YAChB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,KAAK;SACrB,CAAA;QAED,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;YAChD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;SACzB;IACH,CAAC;IAEO,UAAU,CAAC,CAAa;QAC9B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC3C,MAAM,IAAI,GAAG,MAAM,CAAC,IAAkC,CAAA;QACtD,IAAI,CAAC,WAAW,GAAG;YACjB,GAAG,IAAI,CAAC,WAAW;YACnB,CAAC,IAAI,CAAC,EAAE,IAAI;SACb,CAAA;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;IAC1B,CAAC;IAEO,aAAa,CAAC,KAAiC;QACrD,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAA;QACzC,IAAI,KAAK,GAAG,EAAE,CAAA;QAEd,IAAI,CAAC,KAAK,EAAE;YACV,QAAQ,KAAK,EAAE;gBACb,KAAK,UAAU;oBACb,KAAK,GAAG,2BAA2B,CAAA;oBACnC,MAAK;gBACP,KAAK,OAAO;oBACV,KAAK,GAAG,oBAAoB,CAAA;oBAC5B,MAAK;gBACP,KAAK,OAAO;oBACV,KAAK,GAAG,2BAA2B,CAAA;oBACnC,MAAK;gBACP,KAAK,aAAa;oBAChB,KAAK,GAAG,uCAAuC,CAAA;oBAC/C,MAAK;gBACP;oBACE,KAAK,GAAG,EAAE,CAAA;oBACV,MAAK;aACR;SACF;aAAM,IAAI,KAAK,KAAK,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC7D,KAAK,GAAG,2BAA2B,CAAA;SACpC;aAAM,IAAI,KAAK,KAAK,OAAO,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YACnE,KAAK,GAAG,kCAAkC,CAAA;SAC3C;QAED,IAAI,CAAC,UAAU,GAAG;YAChB,GAAG,IAAI,CAAC,UAAU;YAClB,CAAC,KAAK,CAAC,EAAE,KAAK;SACf,CAAA;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;QAC9B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;QAC3B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;QAC3B,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAA;QAEjC,OAAO,CACL,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC;YACrD,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CACjE,CAAA;IACH,CAAC;IAEO,KAAK,CAAC,YAAY,CAAC,CAAQ;QACjC,CAAC,CAAC,cAAc,EAAE,CAAA;QAClB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;QAEzB,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,EAAE,CAAA;QACnC,IAAI,CAAC,OAAO,EAAE;YACZ,OAAM;SACP;QAED,MAAM,UAAU,GAAG;YACjB,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ;YAC5B,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK;YAC1B,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK;YAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,WAAW;SACnC,CAAA;QAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QAExB,2BAA2B;QAC3B,IAAI;YACF,MAAM,QAAQ,GAAG,IAAI,eAAe,CAAC,UAAU,CAAC,CAAA;YAChD,MAAM,KAAK,CAAC,wDAAwD,EAAE;gBACpE,MAAM,EAAE,MAAM;gBACd,IAAI,EAAE,QAAQ;aACf,CAAC,CAAA;SACH;QAAC,OAAO,GAAG,EAAE;YACZ,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,GAAG,CAAC,CAAA;SAC7C;IACH,CAAC;IAEO,sBAAsB;QAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAA;IAC3B,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,uBAAuB,EAAE,CAAA;QAC9B,MAAM,CAAC,IAAI,CACT,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG;YACpD,iHAAiH,CACpH,CAAA;IACH,CAAC;IAEO,uBAAuB;QAC7B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,gBAAgB;YACvB,QAAQ,EAAE,IAAI,CAAC,kBAAkB;YACjC,IAAI,EAAE,IAAI,CAAC,QAAQ;YACnB,SAAS,EAAE,UAAU,EAAE;SACxB,CAAC,CAAA;IACJ,CAAC;IA8JD,MAAM;QACJ,OAAO,IAAI,CAAC,iBAAiB;YAC3B,CAAC,CAAC,IAAI,CAAA;;;;;kBAKM,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY;;;;oBAItC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,cAAc;;;;;wBAKtC,IAAI,CAAC,SAAS;mCACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,aAAa;gBAC5D,CAAC,CAAC,yBAAyB;gBAC3B,CAAC,CAAC,iDAAiD;;;kBAGjD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU;;;;;YAK5C,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,YAAY;gBACtC,CAAC,CAAC,IAAI,CAAA;;;4BAGU,IAAI,CAAC,UAAU;6BACd,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;;;;8BAItB,CAAC,CAAiC,EAAE,EAAE,CAC9C,CAAC,CAAC,eAAe,EAAE;+BACV,CAAC,CAAiC,EAAE,EAAE,CAC/C,CAAC,CAAC,eAAe,EAAE;;2DAEkB,IAAI,CAAC,UAAU;wBAClD,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;;;;;;0BAMlD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI;oBAC/C,CAAC,CAAC,IAAI,CAAA;;;uCAGO,IAAI,CAAC,iBAAiB,CAAC,KAAK;yBAChC,aAAa,CAAC,IAAI;;;6BAGxB;oBACH,CAAC,CAAC,OAAO;;+FAE4D,IAAI;qBACtE,iBAAiB;oBAClB,CAAC,CAAC,WAAW;oBACb,CAAC,CAAC,4BAA4B;;4BAE9B,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa;qBACzC,QAAQ;oBACX,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ;yBAChD,MAAM;oBACP,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,CACrD,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;;;;;;;0CAOI,SAAS,CACT,kBAAkB,CAChB,KAAK,EACL,OAAO,EACP,EAAE,EACF,EAAE,CACH,CACF;;;;;0CAKC,IAAI;;;mCAGX,CACJ;oBACH,CAAC,CAAC,OAAO;;;;kCAIH,IAAI,CAAC,mBAAmB;;;;+FAIqC,IAAI;qBACtE,iBAAiB;oBAClB,CAAC,CAAC,QAAQ;oBACV,CAAC,CAAC,EAAE;;;;;4BAKJ,IAAI,CAAC,iBAAiB;oBACtB,CAAC,CAAC,aAAa;oBACf,CAAC,CAAC,2BAA2B;4BAC7B,SAAS,CACT,kBAAkB,CAChB,KAAK,EACL,IAAI,CAAC,iBAAiB;oBACpB,CAAC,CAAC,YAAY;oBACd,CAAC,CAAC,cAAc,CACnB,CACF;;;;;;;;mCAQQ,IAAI,CAAC,sBAAsB;;;4BAGlC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO;qBACjD,IAAI;;;;;wBAKT,IAAI,CAAC,YAAY,EAAE;;;;;;mCAMR,IAAI,CAAC,sBAAsB;;;4BAGlC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO;qBACjD,IAAI;;;;;;eAMlB;gBACH,CAAC,CAAC,EAAE;YACJ,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY;gBACrC,CAAC,CAAC,IAAI,CAAA;;0BAEQ,IAAI,CAAC,UAAU;2BACd,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;;;;4BAItB,CAAC,CAAiC,EAAE,EAAE,CAC9C,CAAC,CAAC,eAAe,EAAE;6BACV,CAAC,CAAiC,EAAE,EAAE,CAC/C,CAAC,CAAC,eAAe,EAAE;;yDAEkB,IAAI,CAAC,UAAU;sBAClD,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;;oBAEtD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI;oBAC9C,CAAC,CAAC,IAAI,CAAA;;;iCAGO,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,YAAY;yBAC7C,IAAI;;;uBAGV;oBACH,CAAC,CAAC,OAAO;;;wBAGL,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK;;;;oCAInC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,YAAY;qBACpD,WAAW;;;gCAGJ,IAAI,CAAC,UAAU;;;;;;;qBAO1B;gBACT,CAAC,CAAC,EAAE,GAAG;YACb,CAAC,CAAC,OAAO,CAAA;IACb,CAAC;;AArmBM,iCAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoDF;IACD,QAAQ;CACT,CAAA;AAK2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sEAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAc;AAEhC;IAAR,KAAK,EAAE;+DAA4B;AAC3B;IAAR,KAAK,EAAE;gEAA6B;AAC5B;IAAR,KAAK,EAAE;qEAA+D;AAC9D;IAAR,KAAK,EAAE;qEAAkC;AAqC1C;IADC,KAAK,EAAE;qEACyB;AAGjC;IADC,KAAK,EAAE;4DAMP;AAGD;IADC,KAAK,EAAE;8DAMP;AAGD;IADC,KAAK,EAAE;+DAMP;AAGD;IADC,KAAK,EAAE;iEACqB;AAnIlB,0BAA0B;IADtC,aAAa,CAAC,iCAAiC,CAAC;GACpC,0BAA0B,CAumBtC;SAvmBY,0BAA0B","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { ModalRegister } from './types.js'\n\n@customElement('kompasid-paywall-modal-register')\nexport class KompasPaywallModalRegister extends LitElement {\n static styles = [\n css`\n :host {\n display: block;\n }\n\n .bold-yellow b {\n color: #dbaa00;\n }\n\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n z-index: 1000;\n }\n\n .modal-content {\n background-color: #222222;\n border-radius: 12px;\n position: relative;\n }\n\n .close-button {\n position: absolute;\n top: 32px;\n right: 32px;\n background: none;\n border: none;\n font-size: 1.5em;\n color: #999999;\n cursor: pointer;\n z-index: 1;\n }\n\n .transparent-linear-dark {\n background-image: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(hsla(0, 0%, 18%, 0)),\n to(#333333)\n );\n background-image: linear-gradient(180deg, hsla(0, 0%, 18%, 0), #333333);\n }\n\n .font-lora {\n font-family: 'Lora', 'Georgia', 'serif';\n }\n `,\n TWStyles,\n ]\n\n /**\n * Properties\n */\n @property({ type: String }) subscriptionStatus = ''\n @property({ type: String }) userGuid = ''\n\n @state() private isModalOpen = false\n @state() private confirmation = false\n @state() private dataModalRegister: ModalRegister = {} as ModalRegister\n @state() private showModalRegister = false\n\n /**\n * Lifecycle\n */\n override connectedCallback() {\n super.connectedCallback()\n addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])\n this.getRegisterProData()\n }\n\n async getRegisterProData() {\n try {\n const response = await fetch(\n 'https://cdn-www.kompas.id/web-component/form-b2b-kompas-pro.json'\n )\n const data = await response.json()\n this.dataModalRegister = data\n } catch (error) {\n if (error instanceof Error) {\n console.log(error.message)\n }\n } finally {\n this.showModalRegister = true\n }\n }\n\n openModal() {\n this.isModalOpen = true\n }\n\n closeModal() {\n this.isModalOpen = false\n this.confirmation = false\n }\n\n @state()\n private showMobileBenefit = false\n\n @state()\n private formData = {\n nameUser: '',\n email: '',\n nomor: '',\n nameCompany: '',\n }\n\n @state()\n private formErrors = {\n nameUser: '',\n email: '',\n nomor: '',\n nameCompany: '',\n }\n\n @state()\n private formTouched = {\n nameUser: false,\n email: false,\n nomor: false,\n nameCompany: false,\n }\n\n @state()\n private formSubmitted = false\n\n private toggleMobileBenefit() {\n this.showMobileBenefit = !this.showMobileBenefit\n }\n\n private handleInput(e: InputEvent) {\n const target = e.target as HTMLInputElement\n const name = target.name as keyof typeof this.formData\n this.formData = {\n ...this.formData,\n [name]: target.value,\n }\n\n if (this.formTouched[name] || this.formSubmitted) {\n this.validateField(name)\n }\n }\n\n private handleBlur(e: FocusEvent) {\n const target = e.target as HTMLInputElement\n const name = target.name as keyof typeof this.formData\n this.formTouched = {\n ...this.formTouched,\n [name]: true,\n }\n this.validateField(name)\n }\n\n private validateField(field: keyof typeof this.formData) {\n const value = this.formData[field].trim()\n let error = ''\n\n if (!value) {\n switch (field) {\n case 'nameUser':\n error = 'Nama lengkap harus diisi.'\n break\n case 'email':\n error = 'Email harus diisi.'\n break\n case 'nomor':\n error = 'Nomor kontak harus diisi.'\n break\n case 'nameCompany':\n error = 'Nama perusahaan/asosiasi harus diisi.'\n break\n default:\n error = ''\n break\n }\n } else if (field === 'email' && !/^\\S+@\\S+\\.\\S+$/.test(value)) {\n error = 'Masukan email yang valid.'\n } else if (field === 'nomor' && !/^[0-9+\\-\\s()]{6,20}$/.test(value)) {\n error = 'Masukan nomor kontak yang valid.'\n }\n\n this.formErrors = {\n ...this.formErrors,\n [field]: error,\n }\n }\n\n private validateForm() {\n this.validateField('nameUser')\n this.validateField('email')\n this.validateField('nomor')\n this.validateField('nameCompany')\n\n return (\n Object.values(this.formErrors).every(error => !error) &&\n Object.values(this.formData).every(value => value.trim() !== '')\n )\n }\n\n private async handleSubmit(e: Event) {\n e.preventDefault()\n this.formSubmitted = true\n\n const isValid = this.validateForm()\n if (!isValid) {\n return\n }\n\n const formResult = {\n name: this.formData.nameUser,\n email: this.formData.email,\n phone: this.formData.nomor,\n company: this.formData.nameCompany,\n }\n\n this.confirmation = true\n\n // Send form data to Zapier\n try {\n const formBody = new URLSearchParams(formResult)\n await fetch('https://hooks.zapier.com/hooks/catch/14222434/uedqovx/', {\n method: 'POST',\n body: formBody,\n })\n } catch (err) {\n console.error('Form submission error:', err)\n }\n }\n\n private customerServiceClicked() {\n this.redirectToHelpdesk()\n }\n\n private redirectToHelpdesk(): void {\n this.sendDataLayeronHelpDesk()\n window.open(\n this.dataModalRegister.modal.registerPopUp.hotline.url ||\n 'https://api.whatsapp.com/send/?phone=6281290050800&text=Halo,%20saya%20perlu%20informasi%20mengenai%20kompas.id'\n )\n }\n\n private sendDataLayeronHelpDesk(): void {\n window.dataLayer.push({\n event: 'helpOfferClick',\n userType: this.subscriptionStatus,\n GUID: this.userGuid,\n interface: deviceType(),\n })\n }\n\n private templateForm = () => html`\n <div class=\"text-white text-center font-sans py-6 px-4 md:px-20 md:py-16\">\n <h1 class=\"font-lora text-xl md:text-2xl font-bold\">\n Akses Penuh Media Intelligence dengan Paket Langganan Korporasi\n </h1>\n <div class=\"text-grey-200 text-sm md:text-base mt-4\">\n Lengkapi formulir ini untuk dapatkan konsultasi paket korporasi Kompas\n Professional dan penawaran harga terbaik bagi organisasi Anda.\n </div>\n <div>\n <form\n @submit=\"${this.handleSubmit}\"\n action=\"\"\n class=\"mt-8 gap-6 flex flex-col\"\n >\n <div class=\"flex flex-col gap-2\">\n <label for=\"nameUser\" class=\"font-bold flex flex-row\">\n Nama Lengkap\n <span class=\"text-[#F57A7A] flex items-start\">*</span>\n </label>\n <input\n id=\"nameUser\"\n name=\"nameUser\"\n type=\"text\"\n placeholder=\"\"\n class=\"p-2 bg-grey-600 rounded border border-grey-500\"\n .value=\"${this.formData.nameUser}\"\n @input=\"${this.handleInput}\"\n @blur=\"${this.handleBlur}\"\n aria-invalid=\"${!!this.formErrors.nameUser}\"\n />\n ${(this.formTouched.nameUser || this.formSubmitted) &&\n this.formErrors.nameUser\n ? html`\n <div\n class=\"text-sm text-[#F57A7A] flex flex-row items-center\"\n >\n <div class=\"h-4 w-4 flex items-center justify-center mr-2\">\n ${unsafeSVG(\n getFontAwesomeIcon('fas', 'exclamation-circle', 10, 10)\n )}\n </div>\n ${this.formErrors.nameUser}\n </div>\n `\n : ''}\n </div>\n <div class=\"flex flex-col gap-2\">\n <label for=\"email\" class=\"font-bold flex flex-row\">\n Email\n <span class=\"text-[#F57A7A] flex items-start\">*</span>\n </label>\n <input\n autocomplete=\"off\"\n id=\"email\"\n name=\"email\"\n type=\"email\"\n placeholder=\"\"\n class=\"p-2 bg-grey-600 rounded border border-grey-500\"\n .value=\"${this.formData.email}\"\n @input=\"${this.handleInput}\"\n @blur=\"${this.handleBlur}\"\n aria-invalid=\"${!!this.formErrors.email}\"\n />\n ${(this.formTouched.email || this.formSubmitted) &&\n this.formErrors.email\n ? html`\n <div\n class=\"text-sm text-[#F57A7A] flex flex-row items-center\"\n >\n <div class=\"h-4 w-4 flex items-center justify-center mr-2\">\n ${unsafeSVG(\n getFontAwesomeIcon('fas', 'exclamation-circle', 10, 10)\n )}\n </div>\n ${this.formErrors.email}\n </div>\n `\n : ''}\n </div>\n <div class=\"flex flex-col gap-2\">\n <label for=\"nomor\" class=\"font-bold flex flex-row\">\n Nomor Kontak (WhatsApp/Ponsel)\n <span class=\"text-[#F57A7A] flex items-start\">*</span>\n </label>\n <input\n autocomplete=\"off\"\n id=\"nomor\"\n name=\"nomor\"\n type=\"tel\"\n placeholder=\"\"\n class=\"p-2 bg-grey-600 rounded border border-grey-500\"\n .value=\"${this.formData.nomor}\"\n @input=\"${this.handleInput}\"\n @blur=\"${this.handleBlur}\"\n aria-invalid=\"${!!this.formErrors.nomor}\"\n />\n ${(this.formTouched.nomor || this.formSubmitted) &&\n this.formErrors.nomor\n ? html`\n <div\n class=\"text-sm text-[#F57A7A] flex flex-row items-center\"\n >\n <div class=\"h-4 w-4 flex items-center justify-center mr-2\">\n ${unsafeSVG(\n getFontAwesomeIcon('fas', 'exclamation-circle', 10, 10)\n )}\n </div>\n ${this.formErrors.nomor}\n </div>\n `\n : ''}\n </div>\n <div class=\"flex flex-col gap-2\">\n <label for=\"name_company\" class=\"font-bold flex flex-row\">\n Nama Perusahaan/Asosiasi\n <span class=\"text-[#F57A7A] flex items-start\">*</span>\n </label>\n <input\n id=\"name_company\"\n name=\"nameCompany\"\n type=\"text\"\n placeholder=\"\"\n class=\"p-2 bg-grey-600 rounded border border-grey-500\"\n .value=\"${this.formData.nameCompany}\"\n @input=\"${this.handleInput}\"\n @blur=\"${this.handleBlur}\"\n aria-invalid=\"${!!this.formErrors.nameCompany}\"\n />\n ${(this.formTouched.nameCompany || this.formSubmitted) &&\n this.formErrors.nameCompany\n ? html`\n <div\n class=\"text-sm text-[#F57A7A] flex flex-row items-center\"\n >\n <div class=\"h-4 w-4 flex items-center justify-center mr-2\">\n ${unsafeSVG(\n getFontAwesomeIcon('fas', 'exclamation-circle', 10, 10)\n )}\n </div>\n ${this.formErrors.nameCompany}\n </div>\n `\n : ''}\n </div>\n <button\n type=\"submit\"\n class=\"bg-yellow-500 text-center h-10 rounded text-grey-600 mt-2 w-full font-bold\"\n >\n Kirim\n </button>\n </form>\n </div>\n </div>\n `\n\n render() {\n return this.showModalRegister\n ? html`<div\n class=\"p-4 gap-2 font-sans flex flex-wrap items-center justify-between rounded-lg md:mx-0 w-full min-h-[68px] bg-white relative\"\n >\n <div class=\"flex flex-col gap-1\">\n <span class=\"text-xs leading-tight text-grey-500\">\n ${this.dataModalRegister.card.labelPackage}\n </span>\n <div class=\"flex items-baseline\">\n <h5 class=\"text-base font-bold text-orange-400 leading-none\">\n ${this.dataModalRegister.card.textInvitation}\n </h5>\n </div>\n </div>\n <button\n @click=\"${this.openModal}\"\n class=\"h-8 rounded ${this.dataModalRegister.card.isButtonSolid\n ? 'bg-green-500 text-white'\n : 'bg-white border border-green-500 text-green-500'} flex items-center\"\n >\n <h6 class=\"text-sm font-bold py-2 px-4\">\n ${this.dataModalRegister.card.textButton}\n </h6>\n </button>\n </div>\n\n ${this.isModalOpen && !this.confirmation\n ? html`\n <div\n class=\"modal-overlay p-4\"\n @click=\"${this.closeModal}\"\n @keydown=${() => this.closeModal()}\n >\n <div\n class=\"modal-content max-w-7xl mx-auto w-full flex flex-col lg:flex-row max-h-full overflow-auto lg:overflow-hidden\"\n @click=\"${(e: { stopPropagation: () => any }) =>\n e.stopPropagation()}\"\n @keydown=${(e: { stopPropagation: () => any }) =>\n e.stopPropagation()}\n >\n <button class=\"close-button\" @click=\"${this.closeModal}\">\n ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 32, 32))}\n </button>\n <div\n class=\"bg-grey-600 lg:max-w-[515px] w-full p-4 md:p-16 justify-between items-center flex flex-col relative\"\n >\n <div class=\"items-center flex flex-col\">\n ${this.dataModalRegister.modal.registerPopUp.logo\n ? html`\n <img\n class=\" max-w-[214px] md:max-w-[321px] pt-2 md:pt-0\"\n src=\"${this.dataModalRegister.modal\n .registerPopUp.logo}\"\n alt=\"logo kompas pro mining\"\n />\n `\n : nothing}\n <div\n class=\"flex flex-col mt-6 md:mt-10 gap-2 text-left overflow-hidden ${this\n .showMobileBenefit\n ? 'max-h-fit'\n : 'max-h-[150px] lg:max-h-fit'}\"\n >\n ${this.dataModalRegister.modal.registerPopUp\n .benefits &&\n this.dataModalRegister.modal.registerPopUp.benefits\n .length\n ? this.dataModalRegister.modal.registerPopUp.benefits.map(\n item =>\n html`\n <div\n class=\"flex items-baseline text-left text-white\"\n >\n <div\n class=\"text-green-400 h-5 w-5 md:h-6 md:w-6 flex shrink-0 items-center justify-center\"\n >\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'check',\n 16,\n 16\n )\n )}\n </div>\n <h6\n class=\"text-sm md:text-lg font-sans ml-1 leading-6\"\n >\n ${item}\n </h6>\n </div>\n `\n )\n : nothing}\n </div>\n </div>\n <button\n @click=\"${this.toggleMobileBenefit}\"\n class=\"bg-grey-600 absolute text-grey-100 py-6 w-full bottom-0 left-0 text-center lg:hidden\"\n >\n <div\n class=\"h-12 transparent-linear-dark -mt-[72px] z-0 w-full absolute ${this\n .showMobileBenefit\n ? 'hidden'\n : ''}\"\n ></div>\n <div\n class=\"flex flex-row items-center justify-center gap-4\"\n >\n ${this.showMobileBenefit\n ? 'Sembunyikan'\n : 'Lihat keuntungan lainnnya'}\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n this.showMobileBenefit\n ? 'chevron-up'\n : 'chevron-down'\n )\n )}\n </div>\n </button>\n <div\n class=\"hidden lg:block text-grey-300 pt-10 border-t border-grey-500 w-full text-center\"\n >\n Butuh bantuan? Hubungi\n <button\n @click=${this.customerServiceClicked}\n class=\"font-bold underline text-white\"\n >\n ${this.dataModalRegister.modal.registerPopUp.hotline\n .text}\n </button>\n </div>\n </div>\n <div class=\"w-full h-full lg:overflow-auto\">\n ${this.templateForm()}\n <div\n class=\"block lg:hidden text-grey-300 py-5 bg-grey-600 w-full text-center text-xs\"\n >\n Butuh bantuan? Hubungi\n <button\n @click=${this.customerServiceClicked}\n class=\"font-bold underline text-white\"\n >\n ${this.dataModalRegister.modal.registerPopUp.hotline\n .text}\n </button>\n </div>\n </div>\n </div>\n </div>\n `\n : ''}\n ${this.isModalOpen && this.confirmation\n ? html` <div\n class=\"modal-overlay px-4\"\n @click=\"${this.closeModal}\"\n @keydown=${() => this.closeModal()}\n >\n <div\n class=\"modal-content m-auto max-w-[624px] max-h-[577px] items-end flex flex-col justify-end h-full w-full p-4 md:p-10\"\n @click=\"${(e: { stopPropagation: () => any }) =>\n e.stopPropagation()}\"\n @keydown=${(e: { stopPropagation: () => any }) =>\n e.stopPropagation()}\n >\n <button class=\"close-button\" @click=\"${this.closeModal}\">\n ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 32, 32))}\n </button>\n ${this.dataModalRegister.modal.successPopUp.logo\n ? html`\n <img\n class=\"w-full max-w-[242px] mx-auto\"\n src=\"${this.dataModalRegister.modal.successPopUp\n .logo}\"\n alt=\"konfirmasi\"\n />\n `\n : nothing}\n <div class=\"text-grey-300 text-center mt-8\">\n <h1 class=\"text-lg md:text-xl font-bold \">\n ${this.dataModalRegister.modal.successPopUp.title}\n </h1>\n <p\n class=\"text-sm md:text-base mt-4 bold-yellow\"\n .innerHTML=\"${this.dataModalRegister.modal.successPopUp\n .description}\"\n ></p>\n <button\n @click=\"${this.closeModal}\"\n class=\"bg-yellow-500 text-center h-10 rounded text-grey-600 mt-6 w-full font-bold\"\n >\n Oke\n </button>\n </div>\n </div>\n </div>`\n : ''} `\n : nothing\n }\n}\n"]}
|
|
@@ -51,7 +51,7 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
async relatedArticles() {
|
|
54
|
-
const kompasApiAi = 'https://
|
|
54
|
+
const kompasApiAi = 'https://api.kompas.id/icm/api/v1';
|
|
55
55
|
// Constructing parameters
|
|
56
56
|
const params = new URLSearchParams();
|
|
57
57
|
params.append('page_url', this.permalinkArticle);
|
|
@@ -60,7 +60,7 @@ let KompasWidgetRecirculationsDefault = class KompasWidgetRecirculationsDefault
|
|
|
60
60
|
params.append('guid', this.userGuid);
|
|
61
61
|
params.append('slugs', this.slugs);
|
|
62
62
|
// Constructing the URL with parameters
|
|
63
|
-
const endpoint = `${kompasApiAi}/
|
|
63
|
+
const endpoint = `${kompasApiAi}/recommendations?${params.toString()}`;
|
|
64
64
|
const response = await fetch(endpoint, {
|
|
65
65
|
headers: {
|
|
66
66
|
'Content-Type': 'application/json',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasWidgetRecirculationsDefault.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAExD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAA;AAEzF,mCAAmC,EAAE,CAAA;AAE9B,IAAM,iCAAiC,GAAvC,MAAM,iCAAkC,SAAQ,UAAU;IAA1D;;QAuBL;;WAEG;QACwB,UAAK,GAAa,EAAE,CAAA;QACnB,WAAM,GAAG,EAAE,CAAA;QACX,qBAAgB,GAAG,EAAE,CAAA;QACrB,aAAQ,GAAG,GAAG,CAAA;QACd,UAAK,GAAG,EAAE,CAAA;QACV,SAAI,GAC9B,gBAAgB,CAAA;QACU,iBAAY,GAAG,EAAE,CAAA;QACjB,cAAS,GAAG,EAAE,CAAA,CAAC,qDAAqD;QACpE,cAAS,GAAG,EAAE,CAAA,CAAC,0BAA0B;QAExC,WAAM,GAAG,KAAK,CAAA;QAE3C,0EAA0E;QAC9C,uBAAkB,GAAG,EAAE,CAAA,CAAC,EAAE;QAC1B,+BAA0B,GAAG,EAAE,CAAA;QAC3D,aAAa;QACe,oBAAe,GAAG,EAAE,CAAA;QACpB,sBAAiB,GAAG,EAAE,CAAA;QACtB,gCAA2B,GAAG,EAAE,CAAA;QAChC,iCAA4B,GAAG,EAAE,CAAA;QACjC,8BAAyB,GAAG,EAAE,CAAA;QAC9B,iCAA4B,GAAG,CAAC,CAAA;QAChC,wBAAmB,GAAG,EAAE,CAAA;IAsVtD,CAAC;IApVC;;OAEG;IACH,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI;YACF,IAAI,IAAI,CAAC,IAAI,KAAK,gBAAgB,EAAE;gBAClC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAA;aAC7B;iBAAM,IAAI,IAAI,CAAC,IAAI,KAAK,cAAc,EAAE;gBACvC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAA;aAC3B;SACF;QAAC,OAAO,KAAK,EAAE;YACd,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAA;SAC7B;IACH,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,MAAM,WAAW,GAAG,6BAA6B,CAAA;QAEjD,0BAA0B;QAC1B,MAAM,MAAM,GAAG,IAAI,eAAe,EAAE,CAAA;QACpC,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAChD,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;QAClC,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,UAAU,CAAC,CAAA;QACtC,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;QACpC,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QAElC,uCAAuC;QACvC,MAAM,QAAQ,GAAG,GAAG,WAAW,mBAAmB,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAA;QAErE,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE;YACrC,OAAO,EAAE;gBACP,cAAc,EAAE,kBAAkB;aACnC;SACF,CAAC,CAAA;QAEF,gCAAgC;QAChC,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;QACzD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QAEpB,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;QAEpC,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,EAAE;YAClB,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAA;YAC3B,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;YACpC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;YACrC,IAAI,CAAC,KAAK,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAA;SACrE;aAAM;YACL,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAA;SACxD;IACH,CAAC;IAED,KAAK,CAAC,aAAa;QACjB,MAAM,eAAe,GAAG,8BAA8B,CAAA;QAEtD,uCAAuC;QACvC,MAAM,QAAQ,GAAG,GAAG,eAAe,0BAA0B,IAAI,CAAC,YAAY,EAAE,CAAA;QAEhF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE;YACrC,OAAO,EAAE;gBACP,cAAc,EAAE,kBAAkB;aACnC;SACF,CAAC,CAAA;QAEF,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;QAEpC,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,EAAE;YAClB,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAA;YAC3B,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;YACpC,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;YACrC,IAAI,CAAC,KAAK,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAA;SACrE;aAAM;YACL,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAA;SACxD;IACH,CAAC;IAED,gBAAgB,CAAC,KAAc;QAC7B,MAAM,YAAY,GAChB,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAA;QACtE,KAAK,CAAC,sBAAsB,YAAY,EAAE,CAAC,CAAA;IAC7C,CAAC;IAED;;OAEG;IAEK,mBAAmB;QACzB,OAAO,IAAI,CAAA;;;;uEAIwD,IAAI;aAC5D,MAAM;YACP,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,eAAe;;;;;;KAM1B,CAAA;IACH,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,SAAS;;;;qEAIuC,IAAI,CAAC,MAAM;YACpE,CAAC,CAAC,eAAe;YACjB,CAAC,CAAC,cAAc;;YAEhB,IAAI,CAAC,SAAS;;;KAGrB,CAAA;IACH,CAAC;IAED,WAAW,CAAC,IAAU;;QACpB,MAAM,KAAK,GAAG,EAAE,CAAA;QAChB,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,UAAU,CAAC,CAAA;QACrE,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,WAAW,CAAC,CAAA;QACvE,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,cAAc,CAAC,CAAA;QAC5E,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAA;QAE3C,IAAI,aAAa,EAAE;YACjB,KAAK,CAAC,IAAI,CACR,IAAI,CAAA;;;;SAIH,CACF,CAAA;SACF;aAAM,IAAI,WAAW,EAAE;YACtB,KAAK,CAAC,IAAI,CACR,IAAI,CAAA;;;;;;;;;;;SAWH,CACF,CAAA;SACF;aAAM,IAAI,UAAU,EAAE;YACrB,KAAK,CAAC,IAAI,CACR,IAAI,CAAA;;;;SAIH,CACF,CAAA;SACF;aAAM,IAAI,UAAU,EAAE;YACrB,KAAK,CAAC,IAAI,CACR,IAAI,CAAA;;;;SAIH,CACF,CAAA;SACF;QAED,OAAO,KAAK,CAAA;IACd,CAAC;IAED,WAAW,CAAC,IAAU;;QACpB,MAAM,EAAE,eAAe,EAAE,GAAG,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,KAAK,KAAI,EAAE,CAAA;QACxD,IAAI,CAAC,eAAe;YAAE,OAAO,EAAE,CAAA;QAE/B,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,eAAe,CAAA;QACpD,OAAO,IAAI,CAAA;;eAEA,SAAS;iBACP,KAAK;kBACJ,MAAM;eACT,IAAI,CAAC,KAAK;;;KAGpB,CAAA;IACH,CAAC;IAED;;OAEG;IACK,kBAAkB,CAAC,IAAU,EAAE,SAAiB;;QACtD,IAAI,IAAI,CAAC,IAAI,KAAK,gBAAgB;YAAE,OAAM,CAAC,iDAAiD;QAE5F,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,IAAI,EAAE,CAAA;QACzC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,sBAAsB;YACtB,KAAK,EAAE,sBAAsB;YAC7B,UAAU,EAAE,IAAI,CAAC,IAAI;YACrB,kBAAkB,EAAE,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,KAAI,EAAE;YACvE,UAAU,EAAE,SAAS;YACrB,OAAO,EAAE,IAAI,CAAC,MAAM,IAAI,EAAE;YAC1B,UAAU,EAAE,SAAS;YACrB,wBAAwB;YACxB,OAAO,EAAE,IAAI,CAAC,eAAe,IAAI,IAAI;YACrC,SAAS,EAAE,IAAI,CAAC,iBAAiB,IAAI,EAAE;YACvC,mBAAmB,EAAE,IAAI,CAAC,2BAA2B,IAAI,EAAE;YAC3D,oBAAoB,EAAE,IAAI,CAAC,4BAA4B,IAAI,EAAE;YAC7D,iBAAiB,EAAE,IAAI,CAAC,yBAAyB,IAAI,EAAE;YACvD,oBAAoB,EAAE,IAAI,CAAC,4BAA4B;YACvD,WAAW,EAAE,IAAI,CAAC,mBAAmB,IAAI,WAAW;SACrD,CAAC,CAAA;IACJ,CAAC;IAEO,iBAAiB;QACvB,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,IAAI,EAAE,CAAA;QACzC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,qBAAqB;YAC5B,UAAU,EAAE,IAAI,CAAC,kBAAkB,IAAI,EAAE;YACzC,kBAAkB,EAAE,IAAI,CAAC,0BAA0B,IAAI,EAAE;YACzD,SAAS,EAAE,IAAI,CAAC,iBAAiB,IAAI,EAAE;YACvC,mBAAmB,EAAE,IAAI,CAAC,2BAA2B,IAAI,EAAE;YAC3D,oBAAoB,EAAE,IAAI,CAAC,4BAA4B,IAAI,EAAE;YAC7D,iBAAiB,EAAE,IAAI,CAAC,yBAAyB,IAAI,EAAE;YACvD,oBAAoB,EAAE,IAAI,CAAC,4BAA4B;YACvD,WAAW,EAAE,IAAI,CAAC,mBAAmB,IAAI,WAAW;SACrD,CAAC,CAAA;IACJ,CAAC;IAED,cAAc;QACZ,IAAI,IAAI,CAAC,IAAI,KAAK,gBAAgB,EAAE;YAClC,IAAI,CAAC,iBAAiB,EAAE,CAAA;SACzB;aAAM;YACL,yCAAyC;SAC1C;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;2BACY,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE;;UAEhD,IAAI,CAAC,IAAI,KAAK,gBAAgB;YAC9B,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE;YAC5B,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE;;;wBAGZ,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE;;;;;cAKrC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;YACb,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CACf,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;6CAGM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;;;oCAG/B,IAAI,CAAC,SAAS,cAAc,IAAI,CAAC,IAAI;gBAC7C,gBAAgB;gBACd,CAAC,CAAC,iBAAiB;gBACnB,CAAC,CAAC,iBAAiB;sCACX,GAAG,EAAE,CACb,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC;;8BAExC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;;4GAEwD,IAAI;iBAC/E,MAAM;gBACP,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,eAAe;;gCAEjB,IAAI,CAAC,KAAK;;;8DAGoB,IAAI,CAAC,MAAM;gBACzC,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,eAAe;;gCAEjB,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;;mBAMlD,CACF;YACH,CAAC,CAAC,mBAAmB;;;;;;cAMrB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;YACb,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CACf,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;6CAGM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;;;oCAG/B,IAAI,CAAC,SAAS,cAAc,IAAI,CAAC,IAAI;gBAC7C,gBAAgB;gBACd,CAAC,CAAC,iBAAiB;gBACnB,CAAC,CAAC,iBAAiB;sCACX,GAAG,EAAE,CACb,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC;;8BAExC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;;4GAEwD,IAAI;iBAC/E,MAAM;gBACP,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,eAAe;;gCAEjB,IAAI,CAAC,KAAK;;;8DAGoB,IAAI,CAAC,MAAM;gBACzC,CAAC,CAAC,YAAY;gBACd,CAAC,CAAC,eAAe;;gCAEjB,iBAAiB,CAAC,IAAI,CAAC,aAAa,CAAC;;;;;;mBAMlD,CACF;YACH,CAAC,CAAC,EAAE;;;;;;;;KAQb,CAAA;IACH,CAAC;;AArYM,wCAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF;IACD,QAAQ;CACT,CAAA;AAK0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gEAAqB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2EAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DACT;AACU;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uEAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oEAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oEAAe;AAEb;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iEAAe;AAGf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6EAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qFAAgC;AAE/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0EAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4EAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sFAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uFAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oFAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uFAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8EAAyB;AAjDzC,iCAAiC;IAD7C,aAAa,CAAC,wCAAwC,CAAC;GAC3C,iCAAiC,CAuY7C;SAvYY,iCAAiC","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Post } from './types.js'\nimport { useTimeDifference } from '../../utils/useTimeDIfference.js'\nimport { createIntersectionObserverComponent } from '../../utils/IntersectionObserver.js'\n\ncreateIntersectionObserverComponent()\n@customElement('kompasid-widget-recirculations-default')\nexport class KompasWidgetRecirculationsDefault extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .chip {\n align-items: center;\n border-radius: 0.25rem;\n display: flex;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.75rem;\n font-weight: bold;\n height: 1.5rem;\n justify-content: center;\n line-height: 1rem;\n margin-bottom: 0.25rem;\n padding: 0.375rem 0.5rem;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n @property({ type: Array }) posts: Post[][] = []\n @property({ type: String }) recoID = ''\n @property({ type: String }) permalinkArticle = ''\n @property({ type: String }) userGuid = '0'\n @property({ type: String }) slugs = ''\n @property({ type: String }) type: 'relatedArticle' | 'otherArticle' =\n 'relatedArticle'\n @property({ type: String }) mainCategory = ''\n @property({ type: String }) titleName = '' // contoh: Artikel Terkait / Lainnya dalam 'kategori'\n @property({ type: String }) titleLink = '' // contoh: /kategori/opini\n\n @property({ type: Boolean }) isDark = false\n\n // data dari artikel yg sedang dibuka, untuk datalayer reco_content_viewed\n @property({ type: String }) tracker_content_id = '' //\n @property({ type: String }) tracker_content_categories = ''\n // datau user\n @property({ type: String }) tracker_user_id = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_subscription_package = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_page_domain = ''\n\n /**\n * Fetch Data\n */\n async connectedCallback() {\n super.connectedCallback()\n try {\n if (this.type === 'relatedArticle') {\n await this.relatedArticles()\n } else if (this.type === 'otherArticle') {\n await this.otherArticles()\n }\n } catch (error) {\n this.handleFetchError(error)\n }\n }\n\n async relatedArticles() {\n const kompasApiAi = 'https://ai.kompas.id/api/v1'\n\n // Constructing parameters\n const params = new URLSearchParams()\n params.append('page_url', this.permalinkArticle)\n params.append('page_type', 'read')\n params.append('item_type', 'articles')\n params.append('guid', this.userGuid)\n params.append('slugs', this.slugs)\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiAi}/recommendation?${params.toString()}`\n\n const response = await fetch(endpoint, {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n\n // get x-request-id from headers\n const recoId = response.headers.get('X-Request-Id') || ''\n this.recoID = recoId\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n } else {\n throw new Error('Data artikel terkait tidak ditemukan')\n }\n }\n\n async otherArticles() {\n const kompasApiCdsSPA = 'https://cds.kompas.id/api/v2'\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`\n\n const response = await fetch(endpoint, {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n } else {\n throw new Error('Data artikel lainnya tidak ditemukan')\n }\n }\n\n handleFetchError(error: unknown) {\n const errorMessage =\n error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n alert(`Terjadi kesalahan: ${errorMessage}`)\n }\n\n /**\n * Render widget components\n */\n\n private titleRelatedArticle() {\n return html`\n <div class=\"flex font-sans uppercase items-start mb-6 mt-8\">\n <div>\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n Artikel Terkait\n </h5>\n </div>\n </div>\n `\n }\n\n private titleOtherArticle() {\n return html`\n <a\n href=\"${this.titleLink}\"\n class=\"flex font-sans uppercase items-start mb-6 mt-8\"\n >\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this.isDark\n ? 'text-blue-200'\n : 'text-brand-1'}\"\n >\n ${this.titleName}\n </h5>\n </a>\n `\n }\n\n renderChips(post: Post) {\n const chips = []\n const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')\n const isEksklusif = post.postTag?.some(tag => tag.slug === 'eksklusif')\n const isKompasBrief = post.postTag?.some(tag => tag.slug === 'kompas-brief')\n const isFreemium = post.isFreemium === true\n\n if (isKompasBrief) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-red-100 text-red-600\">Kompas Brief</div>\n </div>\n `\n )\n } else if (isEksklusif) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-grey-600 text-white\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n alt=\"Kompas Icon\"\n style=\"width: 16px; height: 16px; margin-right: 4px;\"\n />\n Eksklusif\n </div>\n </div>\n `\n )\n } else if (isFreemium) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n </div>\n `\n )\n } else if (isAnalisis) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n </div>\n `\n )\n }\n\n return chips\n }\n\n renderImage(post: Post) {\n const { thumbnailMedium } = post.thumbnails?.sizes || {}\n if (!thumbnailMedium) return ''\n\n const { permalink, width, height } = thumbnailMedium\n return html`\n <img\n src=\"${permalink}\"\n width=\"${width}\"\n height=\"${height}\"\n alt=\"${post.title}\"\n class=\"aspect-video object-cover w-full\"\n />\n `\n }\n\n /**\n * mengirim event ke datalayer\n */\n private recoContentClicked(post: Post, recoIndex: number) {\n if (this.type !== 'relatedArticle') return // Hanya trigger event jika type 'relatedArticle'\n\n window.dataLayer = window.dataLayer || []\n window.dataLayer.push({\n // data dari component\n event: 'reco_content_clicked',\n content_id: post.name,\n content_categories: post.category?.map(cat => cat.name).join('|') || '',\n reco_index: recoIndex,\n reco_id: this.recoID || '',\n reco_model: 'context',\n // data dari implementor\n user_id: this.tracker_user_id || 'NA',\n user_type: this.tracker_user_type || '',\n subscription_status: this.tracker_subscription_status || '',\n subscription_package: this.tracker_subscription_package || '',\n metered_wall_type: this.tracker_metered_wall_type || '',\n metered_wall_balance: this.tracker_metered_wall_balance,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n })\n }\n\n private recoContentViewed() {\n window.dataLayer = window.dataLayer || []\n window.dataLayer.push({\n event: 'reco_content_viewed',\n content_id: this.tracker_content_id || '',\n content_categories: this.tracker_content_categories || '',\n user_type: this.tracker_user_type || '',\n subscription_status: this.tracker_subscription_status || '',\n subscription_package: this.tracker_subscription_package || '',\n metered_wall_type: this.tracker_metered_wall_type || '',\n metered_wall_balance: this.tracker_metered_wall_balance,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n })\n }\n\n handleObserver() {\n if (this.type === 'relatedArticle') {\n this.recoContentViewed()\n } else {\n // kalo mau implemen buat artikel lainnya\n }\n }\n\n render() {\n return html`\n <div class=\"w-full ${this.isDark ? 'bg-dark-5 ' : ''}\">\n <!-- start: widget title -->\n ${this.type === 'relatedArticle'\n ? this.titleRelatedArticle()\n : this.titleOtherArticle()}\n <!-- end: widget title -->\n <intersection-observer-component\n .onTrigger=\"${() => this.handleObserver()}\"\n ></intersection-observer-component>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8\">\n <!-- start: left-post-loop -->\n <div class=\"grid grid-cols-1 gap-6\">\n ${this.posts[0]\n ? this.posts[0].map(\n (post, index) => html`\n <div class=\"w-full\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a\n href=\"${post.permalink}?open_from=${this.type ===\n 'relatedArticle'\n ? 'Artikel_Terkait'\n : 'Artikel_Lainnya'}\"\n @click=\"${() =>\n this.recoContentClicked(post, index + 1)}\"\n >\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${post.title}\n </h5>\n <p\n class=\"font-sans pt-2 text-sm ${this.isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${useTimeDifference(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : 'Belum ada artikel'}\n </div>\n <!-- end: left-post-loop -->\n\n <!-- start: right-post-loop -->\n <div class=\"flex flex-col w-full\">\n ${this.posts[1]\n ? this.posts[1].map(\n (post, index) => html`\n <div class=\"mb-6\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a\n href=\"${post.permalink}?open_from=${this.type ===\n 'relatedArticle'\n ? 'Artikel_Terkait'\n : 'Artikel_Lainnya'}\"\n @click=\"${() =>\n this.recoContentClicked(post, index + 6)}\"\n >\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${post.title}\n </h5>\n <p\n class=\"font-sans pt-2 text-sm ${this.isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${useTimeDifference(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : ''}\n <!-- start: ads -->\n <slot></slot>\n <!-- end: ads -->\n </div>\n <!-- end: right-post-loop -->\n </div>\n </div>\n `\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"KompasWidgetRecirculationsDefault.js","sourceRoot":"","sources":["../../../../src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { Post } from './types.js'\nimport { useTimeDifference } from '../../utils/useTimeDIfference.js'\nimport { createIntersectionObserverComponent } from '../../utils/IntersectionObserver.js'\n\ncreateIntersectionObserverComponent()\n@customElement('kompasid-widget-recirculations-default')\nexport class KompasWidgetRecirculationsDefault extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .chip {\n align-items: center;\n border-radius: 0.25rem;\n display: flex;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.75rem;\n font-weight: bold;\n height: 1.5rem;\n justify-content: center;\n line-height: 1rem;\n margin-bottom: 0.25rem;\n padding: 0.375rem 0.5rem;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n @property({ type: Array }) posts: Post[][] = []\n @property({ type: String }) recoID = ''\n @property({ type: String }) permalinkArticle = ''\n @property({ type: String }) userGuid = '0'\n @property({ type: String }) slugs = ''\n @property({ type: String }) type: 'relatedArticle' | 'otherArticle' =\n 'relatedArticle'\n @property({ type: String }) mainCategory = ''\n @property({ type: String }) titleName = '' // contoh: Artikel Terkait / Lainnya dalam 'kategori'\n @property({ type: String }) titleLink = '' // contoh: /kategori/opini\n\n @property({ type: Boolean }) isDark = false\n\n // data dari artikel yg sedang dibuka, untuk datalayer reco_content_viewed\n @property({ type: String }) tracker_content_id = '' //\n @property({ type: String }) tracker_content_categories = ''\n // datau user\n @property({ type: String }) tracker_user_id = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_subscription_package = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_page_domain = ''\n\n /**\n * Fetch Data\n */\n async connectedCallback() {\n super.connectedCallback()\n try {\n if (this.type === 'relatedArticle') {\n await this.relatedArticles()\n } else if (this.type === 'otherArticle') {\n await this.otherArticles()\n }\n } catch (error) {\n this.handleFetchError(error)\n }\n }\n\n async relatedArticles() {\n const kompasApiAi = 'https://api.kompas.id/icm/api/v1'\n\n // Constructing parameters\n const params = new URLSearchParams()\n params.append('page_url', this.permalinkArticle)\n params.append('page_type', 'read')\n params.append('item_type', 'articles')\n params.append('guid', this.userGuid)\n params.append('slugs', this.slugs)\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiAi}/recommendations?${params.toString()}`\n\n const response = await fetch(endpoint, {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n\n // get x-request-id from headers\n const recoId = response.headers.get('X-Request-Id') || ''\n this.recoID = recoId\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n } else {\n throw new Error('Data artikel terkait tidak ditemukan')\n }\n }\n\n async otherArticles() {\n const kompasApiCdsSPA = 'https://cds.kompas.id/api/v2'\n\n // Constructing the URL with parameters\n const endpoint = `${kompasApiCdsSPA}/article/list/category/${this.mainCategory}`\n\n const response = await fetch(endpoint, {\n headers: {\n 'Content-Type': 'application/json',\n },\n })\n\n const result = await response.json()\n\n if (result?.result) {\n const items = result.result\n const firstChunk = items.slice(0, 5)\n const secondChunk = items.slice(5, 7)\n this.posts = [Object.freeze(firstChunk), Object.freeze(secondChunk)]\n } else {\n throw new Error('Data artikel lainnya tidak ditemukan')\n }\n }\n\n handleFetchError(error: unknown) {\n const errorMessage =\n error instanceof Error ? error.message : 'Kesalahan tidak diketahui'\n alert(`Terjadi kesalahan: ${errorMessage}`)\n }\n\n /**\n * Render widget components\n */\n\n private titleRelatedArticle() {\n return html`\n <div class=\"flex font-sans uppercase items-start mb-6 mt-8\">\n <div>\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n Artikel Terkait\n </h5>\n </div>\n </div>\n `\n }\n\n private titleOtherArticle() {\n return html`\n <a\n href=\"${this.titleLink}\"\n class=\"flex font-sans uppercase items-start mb-6 mt-8\"\n >\n <h5\n class=\"capitalize font-bold font-sans text-lg md:text-xl ${this.isDark\n ? 'text-blue-200'\n : 'text-brand-1'}\"\n >\n ${this.titleName}\n </h5>\n </a>\n `\n }\n\n renderChips(post: Post) {\n const chips = []\n const isAnalisis = post.postTag?.some(tag => tag.slug === 'analisis')\n const isEksklusif = post.postTag?.some(tag => tag.slug === 'eksklusif')\n const isKompasBrief = post.postTag?.some(tag => tag.slug === 'kompas-brief')\n const isFreemium = post.isFreemium === true\n\n if (isKompasBrief) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-red-100 text-red-600\">Kompas Brief</div>\n </div>\n `\n )\n } else if (isEksklusif) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-grey-600 text-white\">\n <img\n src=\"https://cdn-www.kompas.id/assets/img/icons/kompas-icon-small.svg\"\n alt=\"Kompas Icon\"\n style=\"width: 16px; height: 16px; margin-right: 4px;\"\n />\n Eksklusif\n </div>\n </div>\n `\n )\n } else if (isFreemium) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-blue-100 text-brand-1\">Bebas Akses</div>\n </div>\n `\n )\n } else if (isAnalisis) {\n chips.push(\n html`\n <div class=\"flex\">\n <div class=\"chip bg-orange-100 text-orange-500\">Analisis</div>\n </div>\n `\n )\n }\n\n return chips\n }\n\n renderImage(post: Post) {\n const { thumbnailMedium } = post.thumbnails?.sizes || {}\n if (!thumbnailMedium) return ''\n\n const { permalink, width, height } = thumbnailMedium\n return html`\n <img\n src=\"${permalink}\"\n width=\"${width}\"\n height=\"${height}\"\n alt=\"${post.title}\"\n class=\"aspect-video object-cover w-full\"\n />\n `\n }\n\n /**\n * mengirim event ke datalayer\n */\n private recoContentClicked(post: Post, recoIndex: number) {\n if (this.type !== 'relatedArticle') return // Hanya trigger event jika type 'relatedArticle'\n\n window.dataLayer = window.dataLayer || []\n window.dataLayer.push({\n // data dari component\n event: 'reco_content_clicked',\n content_id: post.name,\n content_categories: post.category?.map(cat => cat.name).join('|') || '',\n reco_index: recoIndex,\n reco_id: this.recoID || '',\n reco_model: 'context',\n // data dari implementor\n user_id: this.tracker_user_id || 'NA',\n user_type: this.tracker_user_type || '',\n subscription_status: this.tracker_subscription_status || '',\n subscription_package: this.tracker_subscription_package || '',\n metered_wall_type: this.tracker_metered_wall_type || '',\n metered_wall_balance: this.tracker_metered_wall_balance,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n })\n }\n\n private recoContentViewed() {\n window.dataLayer = window.dataLayer || []\n window.dataLayer.push({\n event: 'reco_content_viewed',\n content_id: this.tracker_content_id || '',\n content_categories: this.tracker_content_categories || '',\n user_type: this.tracker_user_type || '',\n subscription_status: this.tracker_subscription_status || '',\n subscription_package: this.tracker_subscription_package || '',\n metered_wall_type: this.tracker_metered_wall_type || '',\n metered_wall_balance: this.tracker_metered_wall_balance,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n })\n }\n\n handleObserver() {\n if (this.type === 'relatedArticle') {\n this.recoContentViewed()\n } else {\n // kalo mau implemen buat artikel lainnya\n }\n }\n\n render() {\n return html`\n <div class=\"w-full ${this.isDark ? 'bg-dark-5 ' : ''}\">\n <!-- start: widget title -->\n ${this.type === 'relatedArticle'\n ? this.titleRelatedArticle()\n : this.titleOtherArticle()}\n <!-- end: widget title -->\n <intersection-observer-component\n .onTrigger=\"${() => this.handleObserver()}\"\n ></intersection-observer-component>\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8\">\n <!-- start: left-post-loop -->\n <div class=\"grid grid-cols-1 gap-6\">\n ${this.posts[0]\n ? this.posts[0].map(\n (post, index) => html`\n <div class=\"w-full\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a\n href=\"${post.permalink}?open_from=${this.type ===\n 'relatedArticle'\n ? 'Artikel_Terkait'\n : 'Artikel_Lainnya'}\"\n @click=\"${() =>\n this.recoContentClicked(post, index + 1)}\"\n >\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${post.title}\n </h5>\n <p\n class=\"font-sans pt-2 text-sm ${this.isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${useTimeDifference(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : 'Belum ada artikel'}\n </div>\n <!-- end: left-post-loop -->\n\n <!-- start: right-post-loop -->\n <div class=\"flex flex-col w-full\">\n ${this.posts[1]\n ? this.posts[1].map(\n (post, index) => html`\n <div class=\"mb-6\">\n <div class=\"flex\">\n <div class=\"w-1/2\">${this.renderImage(post)}</div>\n <div class=\"flex-grow pl-4 w-1/2\">\n <a\n href=\"${post.permalink}?open_from=${this.type ===\n 'relatedArticle'\n ? 'Artikel_Terkait'\n : 'Artikel_Lainnya'}\"\n @click=\"${() =>\n this.recoContentClicked(post, index + 6)}\"\n >\n ${this.renderChips(post)}\n <h5\n class=\"hover:underline font-bold font-sans leading-tight text-lg md:text-xl ${this\n .isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${post.title}\n </h5>\n <p\n class=\"font-sans pt-2 text-sm ${this.isDark\n ? 'text-white'\n : 'text-grey-600'}\"\n >\n ${useTimeDifference(post.publishedDate)}\n </p>\n </a>\n </div>\n </div>\n </div>\n `\n )\n : ''}\n <!-- start: ads -->\n <slot></slot>\n <!-- end: ads -->\n </div>\n <!-- end: right-post-loop -->\n </div>\n </div>\n `\n }\n}\n"]}
|
|
@@ -2393,10 +2393,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
2393
2393
|
margin-bottom: 1.25rem;
|
|
2394
2394
|
}
|
|
2395
2395
|
|
|
2396
|
-
.md\\:ml-2 {
|
|
2397
|
-
margin-left: 0.5rem;
|
|
2398
|
-
}
|
|
2399
|
-
|
|
2400
2396
|
.md\\:ml-6 {
|
|
2401
2397
|
margin-left: 1.5rem;
|
|
2402
2398
|
}
|
|
@@ -2457,11 +2453,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
2457
2453
|
max-height: 220px;
|
|
2458
2454
|
}
|
|
2459
2455
|
|
|
2460
|
-
.md\\:max-h-fit {
|
|
2461
|
-
max-height: -moz-fit-content;
|
|
2462
|
-
max-height: fit-content;
|
|
2463
|
-
}
|
|
2464
|
-
|
|
2465
2456
|
.md\\:min-h-\\[244px\\] {
|
|
2466
2457
|
min-height: 244px;
|
|
2467
2458
|
}
|
|
@@ -2843,15 +2834,15 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
2843
2834
|
height: 2rem;
|
|
2844
2835
|
}
|
|
2845
2836
|
|
|
2846
|
-
.lg\\:max-h-none {
|
|
2847
|
-
max-height: none;
|
|
2848
|
-
}
|
|
2849
|
-
|
|
2850
2837
|
.lg\\:max-h-fit {
|
|
2851
2838
|
max-height: -moz-fit-content;
|
|
2852
2839
|
max-height: fit-content;
|
|
2853
2840
|
}
|
|
2854
2841
|
|
|
2842
|
+
.lg\\:max-h-none {
|
|
2843
|
+
max-height: none;
|
|
2844
|
+
}
|
|
2845
|
+
|
|
2855
2846
|
.lg\\:min-h-\\[220px\\] {
|
|
2856
2847
|
min-height: 220px;
|
|
2857
2848
|
}
|
|
@@ -2933,6 +2924,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
2933
2924
|
column-gap: 1.5rem;
|
|
2934
2925
|
}
|
|
2935
2926
|
|
|
2927
|
+
.lg\\:overflow-auto {
|
|
2928
|
+
overflow: auto;
|
|
2929
|
+
}
|
|
2930
|
+
|
|
2931
|
+
.lg\\:overflow-hidden {
|
|
2932
|
+
overflow: hidden;
|
|
2933
|
+
}
|
|
2934
|
+
|
|
2936
2935
|
.lg\\:px-0 {
|
|
2937
2936
|
padding-left: 0px;
|
|
2938
2937
|
padding-right: 0px;
|