@kompasid/lit-web-components 0.9.49 → 0.9.51
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 +31 -18
- 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 +26 -5
- 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 +31 -18
- package/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts +2 -2
- package/tailwind/tailwind.css +26 -5
- package/tailwind/tailwind.ts +26 -5
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;QA6HrB,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;IA6LH,CAAC;IAlhBC;;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,iHAAiH,CAClH,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;;;;;;;iDAOb,IAAI,CAAC,YAAY,EAAE;;;eAGrD;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;;AAxlBM,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,CA0lBtC;SA1lBY,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 '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] md: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 md: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 md: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 Layanan Pelanggan.\n </button>\n </div>\n </div>\n <div class=\"w-full h-full\">${this.templateForm()}</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":"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","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: 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-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 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 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"]}
|
|
@@ -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":"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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://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"]}
|
|
@@ -1003,6 +1003,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1003
1003
|
max-height: 100%;
|
|
1004
1004
|
}
|
|
1005
1005
|
|
|
1006
|
+
.max-h-screen {
|
|
1007
|
+
max-height: 100vh;
|
|
1008
|
+
}
|
|
1009
|
+
|
|
1010
|
+
.max-h-\\[90vh\\] {
|
|
1011
|
+
max-height: 90vh;
|
|
1012
|
+
}
|
|
1013
|
+
|
|
1014
|
+
.max-h-max {
|
|
1015
|
+
max-height: -moz-max-content;
|
|
1016
|
+
max-height: max-content;
|
|
1017
|
+
}
|
|
1018
|
+
|
|
1006
1019
|
.min-h-\\[68px\\] {
|
|
1007
1020
|
min-height: 68px;
|
|
1008
1021
|
}
|
|
@@ -2457,11 +2470,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
2457
2470
|
max-height: 220px;
|
|
2458
2471
|
}
|
|
2459
2472
|
|
|
2460
|
-
.md\\:max-h-fit {
|
|
2461
|
-
max-height: -moz-fit-content;
|
|
2462
|
-
max-height: fit-content;
|
|
2463
|
-
}
|
|
2464
|
-
|
|
2465
2473
|
.md\\:min-h-\\[244px\\] {
|
|
2466
2474
|
min-height: 244px;
|
|
2467
2475
|
}
|
|
@@ -2843,6 +2851,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
2843
2851
|
height: 2rem;
|
|
2844
2852
|
}
|
|
2845
2853
|
|
|
2854
|
+
.lg\\:max-h-fit {
|
|
2855
|
+
max-height: -moz-fit-content;
|
|
2856
|
+
max-height: fit-content;
|
|
2857
|
+
}
|
|
2858
|
+
|
|
2846
2859
|
.lg\\:max-h-none {
|
|
2847
2860
|
max-height: none;
|
|
2848
2861
|
}
|
|
@@ -2928,6 +2941,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
2928
2941
|
column-gap: 1.5rem;
|
|
2929
2942
|
}
|
|
2930
2943
|
|
|
2944
|
+
.lg\\:overflow-auto {
|
|
2945
|
+
overflow: auto;
|
|
2946
|
+
}
|
|
2947
|
+
|
|
2948
|
+
.lg\\:overflow-hidden {
|
|
2949
|
+
overflow: hidden;
|
|
2950
|
+
}
|
|
2951
|
+
|
|
2931
2952
|
.lg\\:px-0 {
|
|
2932
2953
|
padding-left: 0px;
|
|
2933
2954
|
padding-right: 0px;
|