@kompasid/lit-web-components 0.9.51 → 0.9.53
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-header-account-profile/KompasHeaderAccountProfile.js +10 -3
- package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map +1 -1
- package/dist/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.js +5 -5
- package/dist/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.js.map +1 -1
- package/dist/tailwind/tailwind.js +45 -17
- package/dist/tailwind/tailwind.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts +10 -3
- package/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.ts +5 -5
- package/tailwind/tailwind.css +45 -17
- package/tailwind/tailwind.ts +45 -17
|
@@ -166,14 +166,14 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
|
|
|
166
166
|
* Kompeni Element
|
|
167
167
|
*/
|
|
168
168
|
const kompeniTemplate = () => html ` <div
|
|
169
|
-
class="flex relative group bg-[#FFF8D6] text-yellow-700 gap-1 p-2 mt-2 rounded items-center justify-center text-xs
|
|
169
|
+
class="flex relative group bg-[#FFF8D6] text-yellow-700 gap-1 p-2 mt-2 rounded items-center justify-center text-xs font-sans leading-none w-full"
|
|
170
170
|
>
|
|
171
171
|
<div class="w-5 h-5 flex items-center justify-center flex-shrink-0">
|
|
172
172
|
${unsafeSVG(getFontAwesomeIcon('fa', 'building-circle-check', 13, 10))}
|
|
173
173
|
</div>
|
|
174
|
-
<p class="truncate">${this.company_name}</p>
|
|
174
|
+
<p class="break-all multi-line-truncate w-full">${this.company_name}</p>
|
|
175
175
|
<div
|
|
176
|
-
class="absolute px-2 top-full -right-[5%] w-max max-w-[300px] mt-1 hidden group-hover:block"
|
|
176
|
+
class="absolute px-2 top-full -right-[5%] w-max max-w-[300px] mt-1 hidden group-hover:block z-10"
|
|
177
177
|
>
|
|
178
178
|
<div
|
|
179
179
|
class="bg-grey-600 text-white text-sm font-sans p-4 rounded-lg relative leading-5"
|
|
@@ -285,6 +285,13 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
|
|
|
285
285
|
};
|
|
286
286
|
KompasHeaderAccountProfile.styles = [
|
|
287
287
|
css `
|
|
288
|
+
.multi-line-truncate {
|
|
289
|
+
display: -webkit-box;
|
|
290
|
+
-webkit-box-orient: vertical;
|
|
291
|
+
-webkit-line-clamp: 1; /* Number of lines to show */
|
|
292
|
+
overflow: hidden;
|
|
293
|
+
}
|
|
294
|
+
|
|
288
295
|
.header-account--membership-icon {
|
|
289
296
|
position: absolute;
|
|
290
297
|
bottom: -2px;
|
package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAExD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,+CAA+C,CAAA;AAG/C,IAAM,0BAA0B,GAAhC,MAAM,0BAA2B,SAAQ,UAAU;IAAnD;;QAwBL;;WAEG;QACyB,oBAAe,GAAG,EAAE,CAAA;QACpB,aAAQ,GAAG,EAAU,CAAA;QACrB,oBAAe,GAAG,EAAE,CAAA;QACpB,iBAAY,GAAG,EAAE,CAAA;QACjB,uBAAkB,GAAG,EAAE,CAAA;QACvB,aAAQ,GAAG,EAAE,CAAA;QACzC;;WAEG;QACyB,qBAAgB,GAAG,EAAE,CAAA;QACrB,iCAA4B,GAAG,EAAE,CAAA;QACjC,4BAAuB,GAAG,CAAC,CAAA;QAC3B,+BAA0B,GAAG,CAAC,CAAA;QAC9B,qBAAgB,GAAG,CAAC,CAAA;QACpB,sBAAiB,GAAG,EAAE,CAAA;QACtB,uBAAkB,GAAG,EAAE,CAAA;QACvB,0BAAqB,GAAG,EAAE,CAAA;QAC1B,+BAA0B,GAAG,EAAE,CAAA;QAC/B,yBAAoB,GAAG,EAAE,CAAA;QACzB,sBAAiB,GAAG,EAAE,CAAA;QACtB,gCAA2B,GAAG,EAAE,CAAA;QAChC,wBAAmB,GAAG,EAAE,CAAA;QACxB,8BAAyB,GAAG,EAAE,CAAA;QAC9B,iCAA4B,GAAG,CAAC,CAAA;QAE5D;;WAEG;QACc,mBAAc,GAAG,CAAC,CAAA;IAqQrC,CAAC;IAnQC,UAAU,CAAC,IAAmB;QAC5B,OAAO,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAA;IAC9D,CAAC;IAEO,qBAAqB;QAC3B,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;KAgBV,CAAA;IACH,CAAC;IAEO,oBAAoB;;QAC1B;;WAEG;QACH,MAAM,eAAe,GAAG,GAAG,EAAE;YAC3B,IAAI,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE;gBAC9B,OAAO,IAAI,CAAA,EAAE,CAAA;aACd;YACD,MAAM,eAAe,GAAG,GAAG,EAAE;gBAC3B,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,IAAI,cAAc,CAAA;gBACrD,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,eAAe,cAAc,aAAa,EAAE,CAAA;YAC7E,CAAC,CAAA;YAED,OAAO,IAAI,CAAA;;;qBAGI,eAAe;;;;;;OAM7B,CAAA;QACH,CAAC,CAAA;QACD;;WAEG;QACH,MAAM,cAAc,GAAG,GAAG,EAAE;;YAC1B,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,YAAY,CAAA,EAAE;gBAChC,OAAO,IAAI,CAAA,EAAE,CAAA;aACd;YAED,OAAO,IAAI,CAAA;;;;;;;;OAQV,CAAA;QACH,CAAC,CAAA;QAED;;WAEG;QAEH,MAAM,kBAAkB,GAAG,GAAG,EAAE;YAC9B,MAAM,EAAE,aAAa,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAA;YAElE,IAAI,MAAM,GAAG,IAAI,CAAA,oBAAoB,CAAA,CAAC,UAAU;YAChD,IAAI,kBAAkB,GAAG,EAAE,CAAA;YAE3B,MAAM,OAAO,GAAG,IAAI,IAAI,EAAE,CAAA;YAC1B,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;YAC/C,MAAM,WAAW,GAAG,IAAI,IAAI,CAAC,aAAa,CAAC,CAAA;YAC3C,MAAM,YAAY,GAAW,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,CAAA,CAAC,iEAAiE;YAEzI,MAAM,eAAe,GAAG,GAAG,EAAE;gBAC3B,IAAI,aAAa,EAAE;oBACjB,MAAM,cAAc,GAClB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAA;oBACrD,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAClC,OAAO,CACL,IAAI,IAAI,EAAE,EACV,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAC5D,CACF,CAAA;iBACF;gBACD,MAAM,KAAK,GAAG,uBAAuB,CAAA;gBACrC,OAAO,IAAI,CAAA;;oBAEC,KAAK;0CACiB,kBAAkB;;SAEnD,CAAA;YACH,CAAC,CAAA;YAED,MAAM,iBAAiB,GAAG,GAAG,EAAE;gBAC7B,MAAM,KAAK,GAAG,oBAAoB,CAAA;gBAClC,OAAO,IAAI,CAAA;;qBAEE,KAAK;4CACkB,YAAY;;SAE/C,CAAA;YACH,CAAC,CAAA;YAED,MAAM,iBAAiB,GAAG,GAAG,EAAE;gBAC7B,MAAM,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;gBACjD,MAAM,KAAK,GAAG,oBAAoB,CAAA;gBAClC,OAAO,IAAI,CAAA;;oBAEC,KAAK;0CACiB,gBAAgB;;SAEjD,CAAA;YACH,CAAC,CAAA;YAED,IAAI,aAAa,IAAI,gBAAgB,GAAG,CAAC,EAAE;gBACzC,MAAM,GAAG,eAAe,EAAE,CAAA;aAC3B;iBAAM,IAAI,YAAY,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,EAAE;gBACjD,MAAM,GAAG,iBAAiB,EAAE,CAAA;aAC7B;iBAAM,IAAI,YAAY,GAAG,CAAC,EAAE;gBAC3B,MAAM,GAAG,iBAAiB,EAAE,CAAA;aAC7B;YAED,OAAO,IAAI,CAAA,mCAAmC,YAAY;UACtD,MAAM;WACL,CAAA;QACP,CAAC,CAAA;QAED;;WAEG;QACH,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;UAI5B,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE,uBAAuB,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;;4BAElD,IAAI,CAAC,YAAY;;;;;;;YAOjC,IAAI,CAAC,YAAY;;;;;;;;;;;;;;;;;WAiBlB,CAAA;QAEP,OAAO,IAAI,CAAA;;;;;;qBAMM,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE;uBAC/B,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE;+HACuE,IAAI;aACpH,kBAAkB;YACnB,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,EAAE;;;gBAGF,IAAI,CAAC,eAAe;;cAEtB,cAAc,EAAE;;;;;uBAKP,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE;yBAC/B,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE;;;;wDAIF,IAAI,CAAC,kBAAkB;YAC7D,CAAC,CAAC,8BAA8B;YAChC,CAAC,CAAC,eAAe;;kBAEjB,IAAI,CAAC,QAAQ,CAAC,QAAQ;;gBAExB,kBAAkB,EAAE;;cAEtB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,OAAO;;;;UAInD,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,aAAa;YAC5B,CAAC,CAAC,IAAI,CAAA;;mCAEmB,IAAI,CAAC,QAAQ,CAAC,gBAAgB;;;;mCAI9B,IAAI,CAAC,gBAAgB;+CACT,IAAI;iBAChC,4BAA4B;0CACL,IAAI,CAAC,uBAAuB;6CACzB,IAAI,CAAC,0BAA0B;mCACzC,IAAI,CAAC,gBAAgB;oCACpB,IAAI,CAAC,iBAAiB;qCACrB,IAAI,CAAC,kBAAkB;wCACpB,IAAI,CAAC,qBAAqB;6CACrB,IAAI,CAAC,0BAA0B;uCACrC,IAAI,CAAC,oBAAoB;oCAC5B,IAAI,CAAC,iBAAiB;8CACZ,IAAI,CAAC,2BAA2B;sCACxC,IAAI,CAAC,mBAAmB;4CAClB,IAAI,CAAC,yBAAyB;+CAC3B,IAAI;iBAChC,4BAA4B;;mBAE5B;YACT,CAAC,CAAC,eAAe,EAAE;;KAExB,CAAA;IACH,CAAC;IACD,oBAAoB;QAClB,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC3B,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,kBAAkB,CAAA;SAC/C;IACH,CAAC;IAEQ,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,CAAC,IAAI,CAAC,QAAQ;YACd,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE;YAC9B,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE;;;KAGlC,CAAA;IACH,CAAC;;AA1TM,iCAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;KAkBF;IACD,QAAQ;CACT,CAAA;AAK2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sEAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAc;AAIb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oEAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gFAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2EAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8EAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oEAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qEAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sEAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yEAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8EAAgC;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wEAA0B;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qEAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+EAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uEAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6EAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gFAAiC;AAKnD;IAAR,KAAK,EAAE;kEAA2B;AAvDxB,0BAA0B;IADtC,aAAa,CAAC,iCAAiC,CAAC;GACpC,0BAA0B,CA4TtC;SA5TY,0BAA0B","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { format, addDays, differenceInDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { User } from '../kompasid-header-account/types.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport '../kompasid-grace-period/KompasGracePeriod.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n static styles = [\n css`\n .header-account--membership-icon {\n position: absolute;\n bottom: -2px;\n right: -2px;\n }\n\n .tooltip::after {\n content: '';\n position: absolute;\n width: 24px;\n height: 16px;\n background-color: #333333;\n /* Memotong kotak menjadi segitiga */\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n /* Menghaluskan sudut potongan */\n border-radius: 4px;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n @property({ type: String }) userInitialName = ''\n @property({ type: Object }) userData = {} as User\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: String }) company_name = ''\n @property({ type: String }) manage_account_url = ''\n @property({ type: String }) openFrom = ''\n /**\n * Props For Grace Period Tracker\n */\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n /**\n * State\n */\n @state() private maxGracePeriod = 7\n\n formatDate(date: Date | string) {\n return format(new Date(date), 'dd MMM yyyy', { locale: id })\n }\n\n private renderSkeletonLoading() {\n return html`\n <div>\n <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n <div\n class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n ></div>\n <div class=\"flex flex-col text-left w-40 gap-y-2\">\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n <div>\n <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n `\n }\n\n private renderProfileContent() {\n /**\n * Subs Button Element\n */\n const subscribeButton = () => {\n if (this.userData.isMembership) {\n return html``\n }\n const handleSubscribe = () => {\n const openFromValue = this.openFrom || 'Sidebar_Menu'\n window.location.href = `${this.subscriptionUrl}?open_from=${openFromValue}`\n }\n\n return html`\n <div class=\"w-full\">\n <button\n @click=${handleSubscribe}\n class=\"w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-brand-1 text-grey-100 font-bold text-base focus:outline-none\"\n >\n Berlangganan Sekarang\n </button>\n </div>\n `\n }\n /**\n * membership icon element, show if isMebership has truthy value\n */\n const membershipIcon = () => {\n if (!this.userData?.isMembership) {\n return html``\n }\n\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-6 w-6\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n /**\n * Active Info Element\n */\n\n const activeInfoTemplate = () => {\n const { isGracePeriod, totalGracePeriod, expired } = this.userData\n\n let result = html`Tidak Berlangganan` // default\n let endGracePeriodDate = ''\n\n const nowDate = new Date()\n const isoDateString = expired.replace(' ', 'T')\n const expiredDate = new Date(isoDateString)\n const subsDaysLeft: number = differenceInDays(expiredDate, nowDate) + 1 // differenceInDays + 1 jika tanggal bertepatan di hari yang sama\n\n const gracePeriodCard = () => {\n if (isGracePeriod) {\n const totalGraceSubs =\n this.maxGracePeriod - Math.max(totalGracePeriod, 0)\n endGracePeriodDate = this.formatDate(\n addDays(\n new Date(),\n totalGracePeriod > this.maxGracePeriod ? 0 : totalGraceSubs\n )\n )\n }\n const label = 'Periode Masa Tenggang'\n return html`\n <div class=\"text-orange-500 gracePeriodCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${endGracePeriodDate}</p>\n </div>\n `\n }\n\n const lessThan3daysCard = () => {\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"lessThan3daysCard\">\n <span> ${label} </span>\n <p class=\"font-bold\">Berakhir ${subsDaysLeft} hari lagi</p>\n </div>\n `\n }\n\n const moreThan3daysCard = () => {\n const formattedExpired = this.formatDate(expired)\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"moreThan3daysCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${formattedExpired}</p>\n </div>\n `\n }\n\n if (isGracePeriod && totalGracePeriod > 0) {\n result = gracePeriodCard()\n } else if (subsDaysLeft >= 0 && subsDaysLeft <= 3) {\n result = lessThan3daysCard()\n } else if (subsDaysLeft > 3) {\n result = moreThan3daysCard()\n }\n\n return html`<p class=\"text-sm text-grey-600 ${subsDaysLeft}-days-left\">\n ${result}\n </p>`\n }\n\n /**\n * Kompeni Element\n */\n const kompeniTemplate = () => html` <div\n class=\"flex relative group bg-[#FFF8D6] text-yellow-700 gap-1 p-2 mt-2 rounded items-center justify-center text-xs max-w-[190px] font-sans leading-none\"\n >\n <div class=\"w-5 h-5 flex items-center justify-center flex-shrink-0\">\n ${unsafeSVG(getFontAwesomeIcon('fa', 'building-circle-check', 13, 10))}\n </div>\n <p class=\"truncate\">${this.company_name}</p>\n <div\n class=\"absolute px-2 top-full -right-[5%] w-max max-w-[300px] mt-1 hidden group-hover:block\"\n >\n <div\n class=\"bg-grey-600 text-white text-sm font-sans p-4 rounded-lg relative leading-5\"\n >\n ${this.company_name}\n <svg\n width=\"16\"\n height=\"12\"\n viewBox=\"0 0 24 13\"\n class=\"text-grey-600 absolute left-[80%] -top-[11px]\"\n >\n <polygon\n points=\"3,15 12,3 21,15\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>`\n\n return html`\n <div\n class=\"active-info flex flex-col items-start leading-none text-left font-sans\"\n >\n <div class=\"flex flex-row items-center gap-4\">\n <div\n @click=${() => this.clickToManageAccount()}\n @keydown=${() => this.clickToManageAccount()}\n class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative select-none ${this\n .manage_account_url\n ? 'cursor-pointer'\n : ''}\"\n >\n <span class=\"capitalize text-2xl text-grey-100 font-bold\">\n ${this.userInitialName}\n </span>\n ${membershipIcon()}\n </div>\n\n <div class=\"flex flex-col text-left\">\n <div\n @click=${() => this.clickToManageAccount()}\n @keydown=${() => this.clickToManageAccount()}\n class=\"select-none\"\n >\n <p\n class=\"capitalize font-bold text-base ${this.manage_account_url\n ? 'text-blue-600 cursor-pointer'\n : 'text-grey-600'}\"\n >\n ${this.userData.userName}\n </p>\n ${activeInfoTemplate()}\n </div>\n ${this.company_name ? kompeniTemplate() : nothing}\n </div>\n </div>\n\n ${this.userData?.isGracePeriod\n ? html` <div class=\"mt-4 kompasid-grace-period\">\n <kompasid-grace-period\n totalGracePeriod=${this.userData.totalGracePeriod}\n isColumn=\"true\"\n isShowButton=\"true\"\n isBackgroundOnContentOnly=\"true\"\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this\n .paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this\n .tracker_metered_wall_balance}\n ></kompasid-grace-period>\n </div>`\n : subscribeButton()}\n </div>\n `\n }\n clickToManageAccount() {\n if (this.manage_account_url) {\n window.location.href = this.manage_account_url\n }\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div class=\"flex flex-shrink-0 flex-col p-4\">\n ${!this.userData\n ? this.renderSkeletonLoading()\n : this.renderProfileContent()}\n </div>\n <hr class=\"border-grey-300 mx-4\" />\n `\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { format, addDays, differenceInDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { User } from '../kompasid-header-account/types.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport '../kompasid-grace-period/KompasGracePeriod.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n static styles = [\n css`\n .multi-line-truncate {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1; /* Number of lines to show */\n overflow: hidden;\n }\n\n .header-account--membership-icon {\n position: absolute;\n bottom: -2px;\n right: -2px;\n }\n\n .tooltip::after {\n content: '';\n position: absolute;\n width: 24px;\n height: 16px;\n background-color: #333333;\n /* Memotong kotak menjadi segitiga */\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n /* Menghaluskan sudut potongan */\n border-radius: 4px;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n @property({ type: String }) userInitialName = ''\n @property({ type: Object }) userData = {} as User\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: String }) company_name = ''\n @property({ type: String }) manage_account_url = ''\n @property({ type: String }) openFrom = ''\n /**\n * Props For Grace Period Tracker\n */\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n /**\n * State\n */\n @state() private maxGracePeriod = 7\n\n formatDate(date: Date | string) {\n return format(new Date(date), 'dd MMM yyyy', { locale: id })\n }\n\n private renderSkeletonLoading() {\n return html`\n <div>\n <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n <div\n class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n ></div>\n <div class=\"flex flex-col text-left w-40 gap-y-2\">\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n <div>\n <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n `\n }\n\n private renderProfileContent() {\n /**\n * Subs Button Element\n */\n const subscribeButton = () => {\n if (this.userData.isMembership) {\n return html``\n }\n const handleSubscribe = () => {\n const openFromValue = this.openFrom || 'Sidebar_Menu'\n window.location.href = `${this.subscriptionUrl}?open_from=${openFromValue}`\n }\n\n return html`\n <div class=\"w-full\">\n <button\n @click=${handleSubscribe}\n class=\"w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-brand-1 text-grey-100 font-bold text-base focus:outline-none\"\n >\n Berlangganan Sekarang\n </button>\n </div>\n `\n }\n /**\n * membership icon element, show if isMebership has truthy value\n */\n const membershipIcon = () => {\n if (!this.userData?.isMembership) {\n return html``\n }\n\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-6 w-6\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n /**\n * Active Info Element\n */\n\n const activeInfoTemplate = () => {\n const { isGracePeriod, totalGracePeriod, expired } = this.userData\n\n let result = html`Tidak Berlangganan` // default\n let endGracePeriodDate = ''\n\n const nowDate = new Date()\n const isoDateString = expired.replace(' ', 'T')\n const expiredDate = new Date(isoDateString)\n const subsDaysLeft: number = differenceInDays(expiredDate, nowDate) + 1 // differenceInDays + 1 jika tanggal bertepatan di hari yang sama\n\n const gracePeriodCard = () => {\n if (isGracePeriod) {\n const totalGraceSubs =\n this.maxGracePeriod - Math.max(totalGracePeriod, 0)\n endGracePeriodDate = this.formatDate(\n addDays(\n new Date(),\n totalGracePeriod > this.maxGracePeriod ? 0 : totalGraceSubs\n )\n )\n }\n const label = 'Periode Masa Tenggang'\n return html`\n <div class=\"text-orange-500 gracePeriodCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${endGracePeriodDate}</p>\n </div>\n `\n }\n\n const lessThan3daysCard = () => {\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"lessThan3daysCard\">\n <span> ${label} </span>\n <p class=\"font-bold\">Berakhir ${subsDaysLeft} hari lagi</p>\n </div>\n `\n }\n\n const moreThan3daysCard = () => {\n const formattedExpired = this.formatDate(expired)\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"moreThan3daysCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${formattedExpired}</p>\n </div>\n `\n }\n\n if (isGracePeriod && totalGracePeriod > 0) {\n result = gracePeriodCard()\n } else if (subsDaysLeft >= 0 && subsDaysLeft <= 3) {\n result = lessThan3daysCard()\n } else if (subsDaysLeft > 3) {\n result = moreThan3daysCard()\n }\n\n return html`<p class=\"text-sm text-grey-600 ${subsDaysLeft}-days-left\">\n ${result}\n </p>`\n }\n\n /**\n * Kompeni Element\n */\n const kompeniTemplate = () => html` <div\n class=\"flex relative group bg-[#FFF8D6] text-yellow-700 gap-1 p-2 mt-2 rounded items-center justify-center text-xs font-sans leading-none w-full\"\n >\n <div class=\"w-5 h-5 flex items-center justify-center flex-shrink-0\">\n ${unsafeSVG(getFontAwesomeIcon('fa', 'building-circle-check', 13, 10))}\n </div>\n <p class=\"break-all multi-line-truncate w-full\">${this.company_name}</p>\n <div\n class=\"absolute px-2 top-full -right-[5%] w-max max-w-[300px] mt-1 hidden group-hover:block z-10\"\n >\n <div\n class=\"bg-grey-600 text-white text-sm font-sans p-4 rounded-lg relative leading-5\"\n >\n ${this.company_name}\n <svg\n width=\"16\"\n height=\"12\"\n viewBox=\"0 0 24 13\"\n class=\"text-grey-600 absolute left-[80%] -top-[11px]\"\n >\n <polygon\n points=\"3,15 12,3 21,15\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>`\n\n return html`\n <div\n class=\"active-info flex flex-col items-start leading-none text-left font-sans\"\n >\n <div class=\"flex flex-row items-center gap-4\">\n <div\n @click=${() => this.clickToManageAccount()}\n @keydown=${() => this.clickToManageAccount()}\n class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative select-none ${this\n .manage_account_url\n ? 'cursor-pointer'\n : ''}\"\n >\n <span class=\"capitalize text-2xl text-grey-100 font-bold\">\n ${this.userInitialName}\n </span>\n ${membershipIcon()}\n </div>\n\n <div class=\"flex flex-col text-left\">\n <div\n @click=${() => this.clickToManageAccount()}\n @keydown=${() => this.clickToManageAccount()}\n class=\"select-none\"\n >\n <p\n class=\"capitalize font-bold text-base ${this.manage_account_url\n ? 'text-blue-600 cursor-pointer'\n : 'text-grey-600'}\"\n >\n ${this.userData.userName}\n </p>\n ${activeInfoTemplate()}\n </div>\n ${this.company_name ? kompeniTemplate() : nothing}\n </div>\n </div>\n\n ${this.userData?.isGracePeriod\n ? html` <div class=\"mt-4 kompasid-grace-period\">\n <kompasid-grace-period\n totalGracePeriod=${this.userData.totalGracePeriod}\n isColumn=\"true\"\n isShowButton=\"true\"\n isBackgroundOnContentOnly=\"true\"\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this\n .paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this\n .tracker_metered_wall_balance}\n ></kompasid-grace-period>\n </div>`\n : subscribeButton()}\n </div>\n `\n }\n clickToManageAccount() {\n if (this.manage_account_url) {\n window.location.href = this.manage_account_url\n }\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div class=\"flex flex-shrink-0 flex-col p-4\">\n ${!this.userData\n ? this.renderSkeletonLoading()\n : this.renderProfileContent()}\n </div>\n <hr class=\"border-grey-300 mx-4\" />\n `\n }\n}\n"]}
|
|
@@ -357,7 +357,7 @@ let KompasPaywallModalRegister = class KompasPaywallModalRegister extends LitEle
|
|
|
357
357
|
@keydown=${() => this.closeModal()}
|
|
358
358
|
>
|
|
359
359
|
<div
|
|
360
|
-
class="modal-content max-w-7xl w-full flex flex-col lg:flex-row max-h-full overflow-auto lg:overflow-hidden"
|
|
360
|
+
class="modal-content max-w-7xl mx-auto w-full flex flex-col lg:flex-row max-h-full overflow-auto lg:overflow-hidden"
|
|
361
361
|
@click="${(e) => e.stopPropagation()}"
|
|
362
362
|
@keydown=${(e) => e.stopPropagation()}
|
|
363
363
|
>
|
|
@@ -467,12 +467,12 @@ let KompasPaywallModalRegister = class KompasPaywallModalRegister extends LitEle
|
|
|
467
467
|
@keydown=${() => this.closeModal()}
|
|
468
468
|
>
|
|
469
469
|
<div
|
|
470
|
-
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"
|
|
470
|
+
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"
|
|
471
471
|
@click="${(e) => e.stopPropagation()}"
|
|
472
472
|
@keydown=${(e) => e.stopPropagation()}
|
|
473
473
|
>
|
|
474
474
|
<button class="close-button" @click="${this.closeModal}">
|
|
475
|
-
${unsafeSVG(getFontAwesomeIcon('fa', 'times',
|
|
475
|
+
${unsafeSVG(getFontAwesomeIcon('fa', 'times', 32, 32))}
|
|
476
476
|
</button>
|
|
477
477
|
${this.dataModalRegister.modal.successPopUp.logo
|
|
478
478
|
? html `
|
|
@@ -535,8 +535,8 @@ KompasPaywallModalRegister.styles = [
|
|
|
535
535
|
|
|
536
536
|
.close-button {
|
|
537
537
|
position: absolute;
|
|
538
|
-
top:
|
|
539
|
-
right:
|
|
538
|
+
top: 32px;
|
|
539
|
+
right: 32px;
|
|
540
540
|
background: none;
|
|
541
541
|
border: none;
|
|
542
542
|
font-size: 1.5em;
|
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":"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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"]}
|
|
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: 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"]}
|
|
@@ -1003,19 +1003,6 @@ 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
|
-
|
|
1019
1006
|
.min-h-\\[68px\\] {
|
|
1020
1007
|
min-height: 68px;
|
|
1021
1008
|
}
|
|
@@ -1158,6 +1145,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1158
1145
|
width: 100vw;
|
|
1159
1146
|
}
|
|
1160
1147
|
|
|
1148
|
+
.min-w-0 {
|
|
1149
|
+
min-width: 0px;
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1161
1152
|
.max-w-4xl {
|
|
1162
1153
|
max-width: 56rem;
|
|
1163
1154
|
}
|
|
@@ -1218,10 +1209,31 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1218
1209
|
max-width: 20rem;
|
|
1219
1210
|
}
|
|
1220
1211
|
|
|
1212
|
+
.max-w-full {
|
|
1213
|
+
max-width: 100%;
|
|
1214
|
+
}
|
|
1215
|
+
|
|
1216
|
+
.max-w-fit {
|
|
1217
|
+
max-width: -moz-fit-content;
|
|
1218
|
+
max-width: fit-content;
|
|
1219
|
+
}
|
|
1220
|
+
|
|
1221
|
+
.max-w-\\[200px\\] {
|
|
1222
|
+
max-width: 200px;
|
|
1223
|
+
}
|
|
1224
|
+
|
|
1225
|
+
.flex-1 {
|
|
1226
|
+
flex: 1 1 0%;
|
|
1227
|
+
}
|
|
1228
|
+
|
|
1221
1229
|
.flex-shrink-0 {
|
|
1222
1230
|
flex-shrink: 0;
|
|
1223
1231
|
}
|
|
1224
1232
|
|
|
1233
|
+
.flex-shrink {
|
|
1234
|
+
flex-shrink: 1;
|
|
1235
|
+
}
|
|
1236
|
+
|
|
1225
1237
|
.shrink-0 {
|
|
1226
1238
|
flex-shrink: 0;
|
|
1227
1239
|
}
|
|
@@ -1230,6 +1242,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1230
1242
|
flex-grow: 1;
|
|
1231
1243
|
}
|
|
1232
1244
|
|
|
1245
|
+
.flex-grow-0 {
|
|
1246
|
+
flex-grow: 0;
|
|
1247
|
+
}
|
|
1248
|
+
|
|
1233
1249
|
.rotate-180 {
|
|
1234
1250
|
--tw-rotate: 180deg;
|
|
1235
1251
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
|
|
@@ -1468,6 +1484,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1468
1484
|
white-space: nowrap;
|
|
1469
1485
|
}
|
|
1470
1486
|
|
|
1487
|
+
.overflow-ellipsis {
|
|
1488
|
+
text-overflow: ellipsis;
|
|
1489
|
+
}
|
|
1490
|
+
|
|
1471
1491
|
.whitespace-nowrap {
|
|
1472
1492
|
white-space: nowrap;
|
|
1473
1493
|
}
|
|
@@ -1476,10 +1496,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
1476
1496
|
text-wrap: wrap;
|
|
1477
1497
|
}
|
|
1478
1498
|
|
|
1499
|
+
.text-nowrap {
|
|
1500
|
+
text-wrap: nowrap;
|
|
1501
|
+
}
|
|
1502
|
+
|
|
1479
1503
|
.break-words {
|
|
1480
1504
|
overflow-wrap: break-word;
|
|
1481
1505
|
}
|
|
1482
1506
|
|
|
1507
|
+
.break-all {
|
|
1508
|
+
word-break: break-all;
|
|
1509
|
+
}
|
|
1510
|
+
|
|
1483
1511
|
.rounded {
|
|
1484
1512
|
border-radius: 0.25rem;
|
|
1485
1513
|
}
|
|
@@ -2406,10 +2434,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
2406
2434
|
margin-bottom: 1.25rem;
|
|
2407
2435
|
}
|
|
2408
2436
|
|
|
2409
|
-
.md\\:ml-2 {
|
|
2410
|
-
margin-left: 0.5rem;
|
|
2411
|
-
}
|
|
2412
|
-
|
|
2413
2437
|
.md\\:ml-6 {
|
|
2414
2438
|
margin-left: 1.5rem;
|
|
2415
2439
|
}
|
|
@@ -2634,6 +2658,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
|
|
|
2634
2658
|
align-self: flex-end;
|
|
2635
2659
|
}
|
|
2636
2660
|
|
|
2661
|
+
.md\\:whitespace-normal {
|
|
2662
|
+
white-space: normal;
|
|
2663
|
+
}
|
|
2664
|
+
|
|
2637
2665
|
.md\\:rounded {
|
|
2638
2666
|
border-radius: 0.25rem;
|
|
2639
2667
|
}
|