@anker-in/headless-ui 0.0.27-alpha.48 → 0.0.27-alpha.49
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/cjs/cpn-components/CpnBanner/index.js +1 -1
- package/dist/cjs/cpn-components/CpnBanner/index.js.map +2 -2
- package/dist/cjs/cpn-components/CpnBanner/types.d.ts +1 -0
- package/dist/cjs/cpn-components/CpnBanner/types.js.map +1 -1
- package/dist/cjs/cpn-components/CpnNavigation/index.js +1 -1
- package/dist/cjs/cpn-components/CpnNavigation/index.js.map +2 -2
- package/dist/esm/cpn-components/CpnBanner/index.js +1 -1
- package/dist/esm/cpn-components/CpnBanner/index.js.map +2 -2
- package/dist/esm/cpn-components/CpnBanner/types.d.ts +1 -0
- package/dist/esm/cpn-components/CpnNavigation/index.js +1 -1
- package/dist/esm/cpn-components/CpnNavigation/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var w=Object.create;var m=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var N=(n,
|
|
1
|
+
"use strict";var w=Object.create;var m=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var N=(n,o)=>{for(var s in o)m(n,s,{get:o[s],enumerable:!0})},x=(n,o,s,b)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of g(o))!h.call(n,i)&&i!==s&&m(n,i,{get:()=>o[i],enumerable:!(b=k(o,i))||b.enumerable});return n};var B=(n,o,s)=>(s=n!=null?w(y(n)):{},x(o||!n||!n.__esModule?m(s,"default",{value:n,enumerable:!0}):s,n)),C=n=>x(m({},"__esModule",{value:!0}),n);var P={};N(P,{default:()=>z});module.exports=C(P);var e=require("react/jsx-runtime"),l=require("../../helpers/utils.js"),c=require("../../components/index.js"),d=B(require("../CpnCountDown/index.js"));const j=n=>{const{id:o,image:s,imageMob:b,imageLink:i,content:f=[],cns:a}=n,u=t=>{if(t?.startsWith("http")&&(location.href=t),t?.startsWith("#")){const r=document.querySelector(t);r&&r.scrollIntoView({behavior:"smooth"})}};return(0,e.jsxs)("div",{id:o,className:(0,l.cn)("cpn-banner-container relative w-full",a?.container),children:[(0,e.jsx)(c.Picture,{loading:"eager",source:`${s}, ${b||s} 768`,className:(0,l.cn)("cpn-banner-picture",a?.picture),imgClassName:(0,l.cn)("cpn-banner-image h-full object-cover",a?.image),alt:""}),i&&(0,e.jsx)("a",{href:i,className:"absolute left-0 top-0 z-[1] size-full"}),(0,e.jsx)("div",{className:(0,l.cn)("cpn-banner-box tablet:flex tablet:flex-col tablet:justify-center tablet:pt-0 tablet:text-left absolute left-0 top-0 size-full pt-10 text-center",a?.box),children:(0,e.jsx)("div",{className:(0,l.cn)("cpn-banner-content-box tablet:px-10 desktop:px-20 px-6",a?.contentBox),children:(0,e.jsx)("div",{className:(0,l.cn)("cpn-banner-content tablet:mx-0 tablet:max-w-[40vw] mx-auto max-w-[70vw]",a?.content),children:f?.map((t,r)=>{switch(t.type){case"subheading":return(0,e.jsx)(c.Text,{as:"div",html:t.text,className:(0,l.cn)("cpn-banner-subheading tablet:text-[1.25vw] lg-desktop:text-[24px] mt-4 font-medium",a?.subheading)},r);case"title":return(0,e.jsx)(c.Text,{as:"div",html:t.text,className:(0,l.cn)("cpn-banner-title tablet:mt-5 tablet:text-[2.7vw] lg-desktop:text-[56px] mt-4 text-[32px] font-bold leading-[1.12]",a?.title)},r);case"subtitle":return(0,e.jsx)(c.Text,{as:"div",html:t.text,className:(0,l.cn)("cpn-banner-subtitle tablet:mt-5 tablet:text-[1.25vw] lg-desktop:text-[24px] mt-4 font-medium",a?.subtitle)},r);case"button":return(0,e.jsx)("div",{className:(0,l.cn)("cpn-banner-buttonBox tablet:mt-6 tablet:justify-start mt-4 flex justify-center",a?.buttonBox),children:(0,e.jsx)(c.Button,{className:(0,l.cn)("cpn-banner-button tablet:min-w-[138px] tablet:px-7 lg-desktop:min-w-[156px] lg-desktop:px-8 !w-auto min-w-[120px] !max-w-full px-5",a?.button,t.cns),onClick:t.onClick?t.onClick:()=>u(t.target||""),children:t.text},r)});case"buttons":return(0,e.jsx)("div",{className:(0,l.cn)("cpn-banner-buttonBox tablet:mt-6 tablet:justify-start mt-4 flex justify-center",a?.buttonBox),children:t.buttons.map((p,v)=>(0,e.jsx)(c.Button,{className:(0,l.cn)("cpn-banner-button tablet:min-w-[138px] tablet:px-7 lg-desktop:min-w-[156px] lg-desktop:px-8 !w-auto min-w-[120px] !max-w-full px-5",a?.button,p.cns),onClick:p.onClick?p.onClick:()=>u(p.target||""),children:p.text},v))});case"countdown":return(0,e.jsx)("div",{className:"cpn-banner-countdown tablet:mt-6 tablet:justify-start mt-4 flex justify-center",children:(0,e.jsx)(d.default,{endTime:t.endTime,copy:t.copy,cns:a?.countdown})},r)}})})})})]})};var z=j;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/cpn-components/CpnBanner/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { BannerProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Picture, Text, Button } from '../../components/index.js'\nimport CountDown from '../CpnCountDown/index.js'\n\nconst CpnBanner = (props: BannerProps) => {\n const { id, image, imageMob, imageLink, content = [], cns } = props\n\n const btnClick = (target: string) => {\n if (target?.startsWith('http')) {\n location.href = target\n }\n if (target?.startsWith('#')) {\n const element = document.querySelector(target)\n if (element) {\n element.scrollIntoView({ behavior: 'smooth' })\n }\n }\n }\n\n return (\n <div id={id} className={cn('cpn-banner-container relative w-full', cns?.container)}>\n <Picture\n loading=\"eager\"\n source={`${image}, ${imageMob || image} 768`}\n className={cn('cpn-banner-picture', cns?.picture)}\n imgClassName={cn('cpn-banner-image h-full object-cover', cns?.image)}\n alt=\"\"\n />\n {imageLink && <a href={imageLink} className=\"absolute left-0 top-0 z-[1] size-full\"></a>}\n <div\n className={cn(\n 'cpn-banner-box tablet:flex tablet:flex-col tablet:justify-center tablet:pt-0 tablet:text-left absolute left-0 top-0 size-full pt-10 text-center',\n cns?.box\n )}\n >\n <div className
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqBI,IAAAI,EAAA,6BApBJC,EAAmB,kCACnBC,EAAsC,qCACtCC,EAAsB,uCAEtB,MAAMC,EAAaC,GAAuB,CACxC,KAAM,CAAE,GAAAC,EAAI,MAAAC,EAAO,SAAAC,EAAU,UAAAC,EAAW,QAAAC,EAAU,CAAC,EAAG,IAAAC,CAAI,EAAIN,EAExDO,EAAYC,GAAmB,CAInC,GAHIA,GAAQ,WAAW,MAAM,IAC3B,SAAS,KAAOA,GAEdA,GAAQ,WAAW,GAAG,EAAG,CAC3B,MAAMC,EAAU,SAAS,cAAcD,CAAM,EACzCC,GACFA,EAAQ,eAAe,CAAE,SAAU,QAAS,CAAC,CAEjD,CACF,EAEA,SACE,QAAC,OAAI,GAAIR,EAAI,aAAW,MAAG,uCAAwCK,GAAK,SAAS,EAC/E,oBAAC,WACC,QAAQ,QACR,OAAQ,GAAGJ,CAAK,KAAKC,GAAYD,CAAK,OACtC,aAAW,MAAG,qBAAsBI,GAAK,OAAO,EAChD,gBAAc,MAAG,uCAAwCA,GAAK,KAAK,EACnE,IAAI,GACN,EACCF,MAAa,OAAC,KAAE,KAAMA,EAAW,UAAU,wCAAwC,KACpF,OAAC,OACC,aAAW,MACT,kJACAE,GAAK,GACP,EAEA,mBAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["import type { BannerProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Picture, Text, Button } from '../../components/index.js'\nimport CountDown from '../CpnCountDown/index.js'\n\nconst CpnBanner = (props: BannerProps) => {\n const { id, image, imageMob, imageLink, content = [], cns } = props\n\n const btnClick = (target: string) => {\n if (target?.startsWith('http')) {\n location.href = target\n }\n if (target?.startsWith('#')) {\n const element = document.querySelector(target)\n if (element) {\n element.scrollIntoView({ behavior: 'smooth' })\n }\n }\n }\n\n return (\n <div id={id} className={cn('cpn-banner-container relative w-full', cns?.container)}>\n <Picture\n loading=\"eager\"\n source={`${image}, ${imageMob || image} 768`}\n className={cn('cpn-banner-picture', cns?.picture)}\n imgClassName={cn('cpn-banner-image h-full object-cover', cns?.image)}\n alt=\"\"\n />\n {imageLink && <a href={imageLink} className=\"absolute left-0 top-0 z-[1] size-full\"></a>}\n <div\n className={cn(\n 'cpn-banner-box tablet:flex tablet:flex-col tablet:justify-center tablet:pt-0 tablet:text-left absolute left-0 top-0 size-full pt-10 text-center',\n cns?.box\n )}\n >\n <div className={cn('cpn-banner-content-box tablet:px-10 desktop:px-20 px-6', cns?.contentBox)}>\n <div className={cn('cpn-banner-content tablet:mx-0 tablet:max-w-[40vw] mx-auto max-w-[70vw]', cns?.content)}>\n {content?.map((item, index) => {\n switch (item.type) {\n case 'subheading':\n return (\n <Text\n key={index}\n as=\"div\"\n html={item.text}\n className={cn(\n 'cpn-banner-subheading tablet:text-[1.25vw] lg-desktop:text-[24px] mt-4 font-medium',\n cns?.subheading\n )}\n />\n )\n case 'title':\n return (\n <Text\n key={index}\n as=\"div\"\n html={item.text}\n className={cn(\n 'cpn-banner-title tablet:mt-5 tablet:text-[2.7vw] lg-desktop:text-[56px] mt-4 text-[32px] font-bold leading-[1.12]',\n cns?.title\n )}\n />\n )\n case 'subtitle':\n return (\n <Text\n key={index}\n as=\"div\"\n html={item.text}\n className={cn(\n 'cpn-banner-subtitle tablet:mt-5 tablet:text-[1.25vw] lg-desktop:text-[24px] mt-4 font-medium',\n cns?.subtitle\n )}\n />\n )\n case 'button':\n return (\n <div\n className={cn(\n 'cpn-banner-buttonBox tablet:mt-6 tablet:justify-start mt-4 flex justify-center',\n cns?.buttonBox\n )}\n >\n <Button\n key={index}\n className={cn(\n 'cpn-banner-button tablet:min-w-[138px] tablet:px-7 lg-desktop:min-w-[156px] lg-desktop:px-8 !w-auto min-w-[120px] !max-w-full px-5',\n cns?.button,\n item.cns\n )}\n onClick={item.onClick ? item.onClick : () => btnClick(item.target || '')}\n >\n {item.text}\n </Button>\n </div>\n )\n case 'buttons':\n return (\n <div\n className={cn(\n 'cpn-banner-buttonBox tablet:mt-6 tablet:justify-start mt-4 flex justify-center',\n cns?.buttonBox\n )}\n >\n {item.buttons.map((button, index) => (\n <Button\n key={index}\n className={cn(\n 'cpn-banner-button tablet:min-w-[138px] tablet:px-7 lg-desktop:min-w-[156px] lg-desktop:px-8 !w-auto min-w-[120px] !max-w-full px-5',\n cns?.button,\n button.cns\n )}\n onClick={button.onClick ? button.onClick : () => btnClick(button.target || '')}\n >\n {button.text}\n </Button>\n ))}\n </div>\n )\n case 'countdown':\n return (\n <div\n key={index}\n className=\"cpn-banner-countdown tablet:mt-6 tablet:justify-start mt-4 flex justify-center\"\n >\n <CountDown endTime={item.endTime} copy={item.copy} cns={cns?.countdown} />\n </div>\n )\n }\n })}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nexport default CpnBanner\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqBI,IAAAI,EAAA,6BApBJC,EAAmB,kCACnBC,EAAsC,qCACtCC,EAAsB,uCAEtB,MAAMC,EAAaC,GAAuB,CACxC,KAAM,CAAE,GAAAC,EAAI,MAAAC,EAAO,SAAAC,EAAU,UAAAC,EAAW,QAAAC,EAAU,CAAC,EAAG,IAAAC,CAAI,EAAIN,EAExDO,EAAYC,GAAmB,CAInC,GAHIA,GAAQ,WAAW,MAAM,IAC3B,SAAS,KAAOA,GAEdA,GAAQ,WAAW,GAAG,EAAG,CAC3B,MAAMC,EAAU,SAAS,cAAcD,CAAM,EACzCC,GACFA,EAAQ,eAAe,CAAE,SAAU,QAAS,CAAC,CAEjD,CACF,EAEA,SACE,QAAC,OAAI,GAAIR,EAAI,aAAW,MAAG,uCAAwCK,GAAK,SAAS,EAC/E,oBAAC,WACC,QAAQ,QACR,OAAQ,GAAGJ,CAAK,KAAKC,GAAYD,CAAK,OACtC,aAAW,MAAG,qBAAsBI,GAAK,OAAO,EAChD,gBAAc,MAAG,uCAAwCA,GAAK,KAAK,EACnE,IAAI,GACN,EACCF,MAAa,OAAC,KAAE,KAAMA,EAAW,UAAU,wCAAwC,KACpF,OAAC,OACC,aAAW,MACT,kJACAE,GAAK,GACP,EAEA,mBAAC,OAAI,aAAW,MAAG,yDAA0DA,GAAK,UAAU,EAC1F,mBAAC,OAAI,aAAW,MAAG,0EAA2EA,GAAK,OAAO,EACvG,SAAAD,GAAS,IAAI,CAACK,EAAMC,IAAU,CAC7B,OAAQD,EAAK,KAAM,CACjB,IAAK,aACH,SACE,OAAC,QAEC,GAAG,MACH,KAAMA,EAAK,KACX,aAAW,MACT,qFACAJ,GAAK,UACP,GANKK,CAOP,EAEJ,IAAK,QACH,SACE,OAAC,QAEC,GAAG,MACH,KAAMD,EAAK,KACX,aAAW,MACT,oHACAJ,GAAK,KACP,GANKK,CAOP,EAEJ,IAAK,WACH,SACE,OAAC,QAEC,GAAG,MACH,KAAMD,EAAK,KACX,aAAW,MACT,+FACAJ,GAAK,QACP,GANKK,CAOP,EAEJ,IAAK,SACH,SACE,OAAC,OACC,aAAW,MACT,iFACAL,GAAK,SACP,EAEA,mBAAC,UAEC,aAAW,MACT,qIACAA,GAAK,OACLI,EAAK,GACP,EACA,QAASA,EAAK,QAAUA,EAAK,QAAU,IAAMH,EAASG,EAAK,QAAU,EAAE,EAEtE,SAAAA,EAAK,MARDC,CASP,EACF,EAEJ,IAAK,UACH,SACE,OAAC,OACC,aAAW,MACT,iFACAL,GAAK,SACP,EAEC,SAAAI,EAAK,QAAQ,IAAI,CAACE,EAAQD,OACzB,OAAC,UAEC,aAAW,MACT,qIACAL,GAAK,OACLM,EAAO,GACT,EACA,QAASA,EAAO,QAAUA,EAAO,QAAU,IAAML,EAASK,EAAO,QAAU,EAAE,EAE5E,SAAAA,EAAO,MARHD,CASP,CACD,EACH,EAEJ,IAAK,YACH,SACE,OAAC,OAEC,UAAU,iFAEV,mBAAC,EAAAE,QAAA,CAAU,QAASH,EAAK,QAAS,KAAMA,EAAK,KAAM,IAAKJ,GAAK,UAAW,GAHnEK,CAIP,CAEN,CACF,CAAC,EACH,EACF,EACF,GACF,CAEJ,EAEA,IAAOlB,EAAQM",
|
|
6
6
|
"names": ["CpnBanner_exports", "__export", "CpnBanner_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_components", "import_CpnCountDown", "CpnBanner", "props", "id", "image", "imageMob", "imageLink", "content", "cns", "btnClick", "target", "element", "item", "index", "button", "CountDown"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/cpn-components/CpnBanner/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { CountDownProps } from '../CpnCountDown/types'\n\ntype TextType = 'title' | 'subtitle' | 'subheading'\n\ntype TextContent = {\n type: TextType\n text: string\n}\n\ninterface BaseType {\n text?: string\n target?: string\n end?: string\n copy?: CountDownProps['copy']\n}\n\ntype ButtonContent = {\n type: 'button'\n text: string\n target?: string\n cns?: string\n onClick?: () => void\n}\n\ntype ButtonsContent = {\n type: 'buttons'\n buttons: Omit<ButtonContent, 'type'>[]\n}\n\ntype CountDownContent = {\n type: 'countdown'\n} & CountDownProps\n\ntype BannerContent = TextContent | ButtonContent | ButtonsContent | CountDownContent\n\nexport type BannerProps = {\n id?: string\n image: string\n imageMob?: string\n imageLink?: string\n content?: BannerContent[]\n cns?: {\n container?: string\n picture?: string\n image?: string\n box?: string\n content?: string\n subheading?: string\n title?: string\n subtitle?: string\n buttonBox?: string\n button?: string\n countdown?: CountDownProps['cns']\n }\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { CountDownProps } from '../CpnCountDown/types'\n\ntype TextType = 'title' | 'subtitle' | 'subheading'\n\ntype TextContent = {\n type: TextType\n text: string\n}\n\ninterface BaseType {\n text?: string\n target?: string\n end?: string\n copy?: CountDownProps['copy']\n}\n\ntype ButtonContent = {\n type: 'button'\n text: string\n target?: string\n cns?: string\n onClick?: () => void\n}\n\ntype ButtonsContent = {\n type: 'buttons'\n buttons: Omit<ButtonContent, 'type'>[]\n}\n\ntype CountDownContent = {\n type: 'countdown'\n} & CountDownProps\n\ntype BannerContent = TextContent | ButtonContent | ButtonsContent | CountDownContent\n\nexport type BannerProps = {\n id?: string\n image: string\n imageMob?: string\n imageLink?: string\n content?: BannerContent[]\n cns?: {\n container?: string\n picture?: string\n image?: string\n box?: string\n contentBox?: string\n content?: string\n subheading?: string\n title?: string\n subtitle?: string\n buttonBox?: string\n button?: string\n countdown?: CountDownProps['cns']\n }\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var y=Object.create;var v=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var S=(e,t)=>{for(var o in t)v(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,
|
|
1
|
+
"use strict";var y=Object.create;var v=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var I=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var S=(e,t)=>{for(var o in t)v(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of N(t))!R.call(e,n)&&n!==o&&v(e,n,{get:()=>t[n],enumerable:!(i=E(t,n))||i.enumerable});return e};var k=(e,t,o)=>(o=e!=null?y(I(e)):{},h(t||!e||!e.__esModule?v(o,"default",{value:e,enumerable:!0}):o,e)),H=e=>h(v({},"__esModule",{value:!0}),e);var $={};S($,{default:()=>T});module.exports=H($);var p=require("react/jsx-runtime"),c=require("react"),f=require("../../helpers/utils.js"),g=k(require("lodash.debounce"));const L=e=>{const{lists:t,styles:o,cns:i,offset:n=0}=e,[x,d]=(0,c.useState)(0),u=(0,c.useRef)(null),C=r=>{r.scrollIntoView({behavior:"smooth",inline:"center"})},w=(r,l,a)=>{d(l);const s=a.target;C(s),r.anchor&&document.querySelector(`#${r.anchor}`)?.scrollIntoView({behavior:"smooth"}),a.preventDefault()};return(0,c.useEffect)(()=>{const r=(0,g.default)(()=>{const a=[];t?.forEach(m=>{const b=document.querySelector(`#${m.anchor}`);b&&a.push(b.getBoundingClientRect().top)});const s=a.findIndex(m=>m>l+n);d(s===-1?a.length-1:s===0?0:s-1)},100),l=u.current?.getBoundingClientRect().height||0;return window.addEventListener("scroll",r),()=>{window.removeEventListener("scroll",r)}},[t,n]),(0,p.jsx)("div",{id:"nav",className:(0,f.cn)("cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]",i?.container),style:{"--bgColor":o?.bgColor||"#C6F1FF","--color":o?.color||"#333","--activeColor":o?.activeColor||"#000"},children:(0,p.jsx)("div",{className:(0,f.cn)("cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden","tablet:gap-[80px] tablet:justify-center",i?.box),ref:u,children:t?.map((r,l)=>(0,p.jsx)("a",{href:`#${r.anchor}`,className:(0,f.cn)("cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200",i?.item,{[`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[""] ${i?.activeItem}`]:x===l}),onClick:a=>w(r,l,a),children:r.label},r.label))})})};var T=L;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/cpn-components/CpnNavigation/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport debounce from 'lodash.debounce'\n\nconst CpnNavigation = (props: NavigationProps) => {\n const { lists, styles, cns, offset = 0 } = props\n const [activeIndex, setActiveIndex] = useState(0)\n const navBox = useRef<HTMLDivElement>(null)\n\n const scrollIntoView = (ele: HTMLElement) => {\n ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n }\n\n const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n setActiveIndex(index)\n const ele = e.target as HTMLAnchorElement\n scrollIntoView(ele)\n if (nav.anchor) {\n document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n }\n e.preventDefault()\n }\n\n useEffect(() => {\n const scrollHandler = debounce(() => {\n const sectionTops: number[] = []\n lists?.forEach(nav => {\n const section = document.querySelector(`#${nav.anchor}`)\n if (section) {\n sectionTops.push(section.getBoundingClientRect().top)\n }\n })\n const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset)
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiEY,IAAAI,EAAA,6BAjEZC,EAAmD,iBACnDC,EAAmB,kCAEnBC,EAAqB,8BAErB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,CAAE,EAAIJ,EACrC,CAACK,EAAaC,CAAc,KAAI,YAAS,CAAC,EAC1CC,KAAS,UAAuB,IAAI,EAEpCC,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,CACnB,EAEA,sBAAU,IAAM,CACd,MAAMC,KAAgB,EAAAC,SAAS,IAAM,CACnC,MAAMC,EAAwB,CAAC,EAC/Bf,GAAO,QAAQU,GAAO,CACpB,MAAMM,EAAU,SAAS,cAAc,IAAIN,EAAI,MAAM,EAAE,EACnDM,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAML,EAAQI,EAAY,UAAUE,GAAcA,EAAaC,EAAYf,CAAM,
|
|
4
|
+
"sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport debounce from 'lodash.debounce'\n\nconst CpnNavigation = (props: NavigationProps) => {\n const { lists, styles, cns, offset = 0 } = props\n const [activeIndex, setActiveIndex] = useState(0)\n const navBox = useRef<HTMLDivElement>(null)\n\n const scrollIntoView = (ele: HTMLElement) => {\n ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n }\n\n const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n setActiveIndex(index)\n const ele = e.target as HTMLAnchorElement\n scrollIntoView(ele)\n if (nav.anchor) {\n document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n }\n e.preventDefault()\n }\n\n useEffect(() => {\n const scrollHandler = debounce(() => {\n const sectionTops: number[] = []\n lists?.forEach(nav => {\n const section = document.querySelector(`#${nav.anchor}`)\n if (section) {\n sectionTops.push(section.getBoundingClientRect().top)\n }\n })\n const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset)\n setActiveIndex(index === -1 ? sectionTops.length - 1 : index === 0 ? 0 : index - 1)\n }, 100)\n const navHeight = navBox.current?.getBoundingClientRect().height || 0\n window.addEventListener('scroll', scrollHandler)\n return () => {\n window.removeEventListener('scroll', scrollHandler)\n }\n }, [lists, offset])\n\n return (\n <div\n id=\"nav\"\n className={cn('cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]', cns?.container)}\n style={\n {\n '--bgColor': styles?.bgColor || '#C6F1FF',\n '--color': styles?.color || '#333',\n '--activeColor': styles?.activeColor || '#000',\n } as React.CSSProperties\n }\n >\n <div\n className={cn(\n 'cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden',\n 'tablet:gap-[80px] tablet:justify-center',\n cns?.box\n )}\n ref={navBox}\n >\n {lists?.map((nav, index) => {\n return (\n <a\n key={nav.label}\n href={`#${nav.anchor}`}\n className={cn(\n 'cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200',\n cns?.item,\n {\n [`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[\"\"] ${cns?.activeItem}`]:\n activeIndex === index,\n }\n )}\n onClick={e => handleNavItemClick(nav, index, e)}\n >\n {nav.label}\n </a>\n )\n })}\n </div>\n </div>\n )\n}\n\nexport default CpnNavigation\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAiEY,IAAAI,EAAA,6BAjEZC,EAAmD,iBACnDC,EAAmB,kCAEnBC,EAAqB,8BAErB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,CAAE,EAAIJ,EACrC,CAACK,EAAaC,CAAc,KAAI,YAAS,CAAC,EAC1CC,KAAS,UAAuB,IAAI,EAEpCC,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,CACnB,EAEA,sBAAU,IAAM,CACd,MAAMC,KAAgB,EAAAC,SAAS,IAAM,CACnC,MAAMC,EAAwB,CAAC,EAC/Bf,GAAO,QAAQU,GAAO,CACpB,MAAMM,EAAU,SAAS,cAAc,IAAIN,EAAI,MAAM,EAAE,EACnDM,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAML,EAAQI,EAAY,UAAUE,GAAcA,EAAaC,EAAYf,CAAM,EACjFE,EAAeM,IAAU,GAAKI,EAAY,OAAS,EAAIJ,IAAU,EAAI,EAAIA,EAAQ,CAAC,CACpF,EAAG,GAAG,EACAO,EAAYZ,EAAO,SAAS,sBAAsB,EAAE,QAAU,EACpE,cAAO,iBAAiB,SAAUO,CAAa,EACxC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAa,CACpD,CACF,EAAG,CAACb,EAAOG,CAAM,CAAC,KAGhB,OAAC,OACC,GAAG,MACH,aAAW,MAAG,iEAAkED,GAAK,SAAS,EAC9F,MACE,CACE,YAAaD,GAAQ,SAAW,UAChC,UAAWA,GAAQ,OAAS,OAC5B,gBAAiBA,GAAQ,aAAe,MAC1C,EAGF,mBAAC,OACC,aAAW,MACT,iIACA,0CACAC,GAAK,GACP,EACA,IAAKI,EAEJ,SAAAN,GAAO,IAAI,CAACU,EAAKC,OAEd,OAAC,KAEC,KAAM,IAAID,EAAI,MAAM,GACpB,aAAW,MACT,yJACAR,GAAK,KACL,CACE,CAAC,wNAAwNA,GAAK,UAAU,EAAE,EACxOE,IAAgBO,CACpB,CACF,EACA,QAASC,GAAKH,EAAmBC,EAAKC,EAAOC,CAAC,EAE7C,SAAAF,EAAI,OAZAA,EAAI,KAaX,CAEH,EACH,EACF,CAEJ,EAEA,IAAOlB,EAAQM",
|
|
6
6
|
"names": ["CpnNavigation_exports", "__export", "CpnNavigation_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_lodash", "CpnNavigation", "props", "lists", "styles", "cns", "offset", "activeIndex", "setActiveIndex", "navBox", "scrollIntoView", "ele", "handleNavItemClick", "nav", "index", "e", "scrollHandler", "debounce", "sectionTops", "section", "sectionTop", "navHeight"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as n,jsxs as k}from"react/jsx-runtime";import{cn as a}from"../../helpers/utils.js";import{Picture as f,Text as s,Button as p}from"../../components/index.js";import v from"../CpnCountDown/index.js";const w=b=>{const{id:m,image:c,imageMob:u,imageLink:i,content:x=[],cns:e}=b,r=t=>{if(t?.startsWith("http")&&(location.href=t),t?.startsWith("#")){const l=document.querySelector(t);l&&l.scrollIntoView({behavior:"smooth"})}};return k("div",{id:m,className:a("cpn-banner-container relative w-full",e?.container),children:[n(f,{loading:"eager",source:`${c}, ${u||c} 768`,className:a("cpn-banner-picture",e?.picture),imgClassName:a("cpn-banner-image h-full object-cover",e?.image),alt:""}),i&&n("a",{href:i,className:"absolute left-0 top-0 z-[1] size-full"}),n("div",{className:a("cpn-banner-box tablet:flex tablet:flex-col tablet:justify-center tablet:pt-0 tablet:text-left absolute left-0 top-0 size-full pt-10 text-center",e?.box),children:n("div",{className:a("cpn-banner-content-box tablet:px-10 desktop:px-20 px-6",e?.contentBox),children:n("div",{className:a("cpn-banner-content tablet:mx-0 tablet:max-w-[40vw] mx-auto max-w-[70vw]",e?.content),children:x?.map((t,l)=>{switch(t.type){case"subheading":return n(s,{as:"div",html:t.text,className:a("cpn-banner-subheading tablet:text-[1.25vw] lg-desktop:text-[24px] mt-4 font-medium",e?.subheading)},l);case"title":return n(s,{as:"div",html:t.text,className:a("cpn-banner-title tablet:mt-5 tablet:text-[2.7vw] lg-desktop:text-[56px] mt-4 text-[32px] font-bold leading-[1.12]",e?.title)},l);case"subtitle":return n(s,{as:"div",html:t.text,className:a("cpn-banner-subtitle tablet:mt-5 tablet:text-[1.25vw] lg-desktop:text-[24px] mt-4 font-medium",e?.subtitle)},l);case"button":return n("div",{className:a("cpn-banner-buttonBox tablet:mt-6 tablet:justify-start mt-4 flex justify-center",e?.buttonBox),children:n(p,{className:a("cpn-banner-button tablet:min-w-[138px] tablet:px-7 lg-desktop:min-w-[156px] lg-desktop:px-8 !w-auto min-w-[120px] !max-w-full px-5",e?.button,t.cns),onClick:t.onClick?t.onClick:()=>r(t.target||""),children:t.text},l)});case"buttons":return n("div",{className:a("cpn-banner-buttonBox tablet:mt-6 tablet:justify-start mt-4 flex justify-center",e?.buttonBox),children:t.buttons.map((o,d)=>n(p,{className:a("cpn-banner-button tablet:min-w-[138px] tablet:px-7 lg-desktop:min-w-[156px] lg-desktop:px-8 !w-auto min-w-[120px] !max-w-full px-5",e?.button,o.cns),onClick:o.onClick?o.onClick:()=>r(o.target||""),children:o.text},d))});case"countdown":return n("div",{className:"cpn-banner-countdown tablet:mt-6 tablet:justify-start mt-4 flex justify-center",children:n(v,{endTime:t.endTime,copy:t.copy,cns:e?.countdown})},l)}})})})})]})};var N=w;export{N as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/cpn-components/CpnBanner/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { BannerProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Picture, Text, Button } from '../../components/index.js'\nimport CountDown from '../CpnCountDown/index.js'\n\nconst CpnBanner = (props: BannerProps) => {\n const { id, image, imageMob, imageLink, content = [], cns } = props\n\n const btnClick = (target: string) => {\n if (target?.startsWith('http')) {\n location.href = target\n }\n if (target?.startsWith('#')) {\n const element = document.querySelector(target)\n if (element) {\n element.scrollIntoView({ behavior: 'smooth' })\n }\n }\n }\n\n return (\n <div id={id} className={cn('cpn-banner-container relative w-full', cns?.container)}>\n <Picture\n loading=\"eager\"\n source={`${image}, ${imageMob || image} 768`}\n className={cn('cpn-banner-picture', cns?.picture)}\n imgClassName={cn('cpn-banner-image h-full object-cover', cns?.image)}\n alt=\"\"\n />\n {imageLink && <a href={imageLink} className=\"absolute left-0 top-0 z-[1] size-full\"></a>}\n <div\n className={cn(\n 'cpn-banner-box tablet:flex tablet:flex-col tablet:justify-center tablet:pt-0 tablet:text-left absolute left-0 top-0 size-full pt-10 text-center',\n cns?.box\n )}\n >\n <div className
|
|
5
|
-
"mappings": "AAqBI,OACE,OAAAA,EADF,QAAAC,MAAA,oBApBJ,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,QAAAC,EAAM,UAAAC,MAAc,4BACtC,OAAOC,MAAe,2BAEtB,MAAMC,EAAaC,GAAuB,CACxC,KAAM,CAAE,GAAAC,EAAI,MAAAC,EAAO,SAAAC,EAAU,UAAAC,EAAW,QAAAC,EAAU,CAAC,EAAG,IAAAC,CAAI,EAAIN,EAExDO,EAAYC,GAAmB,CAInC,GAHIA,GAAQ,WAAW,MAAM,IAC3B,SAAS,KAAOA,GAEdA,GAAQ,WAAW,GAAG,EAAG,CAC3B,MAAMC,EAAU,SAAS,cAAcD,CAAM,EACzCC,GACFA,EAAQ,eAAe,CAAE,SAAU,QAAS,CAAC,CAEjD,CACF,EAEA,OACEhB,EAAC,OAAI,GAAIQ,EAAI,UAAWP,EAAG,uCAAwCY,GAAK,SAAS,EAC/E,UAAAd,EAACG,EAAA,CACC,QAAQ,QACR,OAAQ,GAAGO,CAAK,KAAKC,GAAYD,CAAK,OACtC,UAAWR,EAAG,qBAAsBY,GAAK,OAAO,EAChD,aAAcZ,EAAG,uCAAwCY,GAAK,KAAK,EACnE,IAAI,GACN,EACCF,GAAaZ,EAAC,KAAE,KAAMY,EAAW,UAAU,wCAAwC,EACpFZ,EAAC,OACC,UAAWE,EACT,kJACAY,GAAK,GACP,EAEA,SAAAd,EAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["import type { BannerProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Picture, Text, Button } from '../../components/index.js'\nimport CountDown from '../CpnCountDown/index.js'\n\nconst CpnBanner = (props: BannerProps) => {\n const { id, image, imageMob, imageLink, content = [], cns } = props\n\n const btnClick = (target: string) => {\n if (target?.startsWith('http')) {\n location.href = target\n }\n if (target?.startsWith('#')) {\n const element = document.querySelector(target)\n if (element) {\n element.scrollIntoView({ behavior: 'smooth' })\n }\n }\n }\n\n return (\n <div id={id} className={cn('cpn-banner-container relative w-full', cns?.container)}>\n <Picture\n loading=\"eager\"\n source={`${image}, ${imageMob || image} 768`}\n className={cn('cpn-banner-picture', cns?.picture)}\n imgClassName={cn('cpn-banner-image h-full object-cover', cns?.image)}\n alt=\"\"\n />\n {imageLink && <a href={imageLink} className=\"absolute left-0 top-0 z-[1] size-full\"></a>}\n <div\n className={cn(\n 'cpn-banner-box tablet:flex tablet:flex-col tablet:justify-center tablet:pt-0 tablet:text-left absolute left-0 top-0 size-full pt-10 text-center',\n cns?.box\n )}\n >\n <div className={cn('cpn-banner-content-box tablet:px-10 desktop:px-20 px-6', cns?.contentBox)}>\n <div className={cn('cpn-banner-content tablet:mx-0 tablet:max-w-[40vw] mx-auto max-w-[70vw]', cns?.content)}>\n {content?.map((item, index) => {\n switch (item.type) {\n case 'subheading':\n return (\n <Text\n key={index}\n as=\"div\"\n html={item.text}\n className={cn(\n 'cpn-banner-subheading tablet:text-[1.25vw] lg-desktop:text-[24px] mt-4 font-medium',\n cns?.subheading\n )}\n />\n )\n case 'title':\n return (\n <Text\n key={index}\n as=\"div\"\n html={item.text}\n className={cn(\n 'cpn-banner-title tablet:mt-5 tablet:text-[2.7vw] lg-desktop:text-[56px] mt-4 text-[32px] font-bold leading-[1.12]',\n cns?.title\n )}\n />\n )\n case 'subtitle':\n return (\n <Text\n key={index}\n as=\"div\"\n html={item.text}\n className={cn(\n 'cpn-banner-subtitle tablet:mt-5 tablet:text-[1.25vw] lg-desktop:text-[24px] mt-4 font-medium',\n cns?.subtitle\n )}\n />\n )\n case 'button':\n return (\n <div\n className={cn(\n 'cpn-banner-buttonBox tablet:mt-6 tablet:justify-start mt-4 flex justify-center',\n cns?.buttonBox\n )}\n >\n <Button\n key={index}\n className={cn(\n 'cpn-banner-button tablet:min-w-[138px] tablet:px-7 lg-desktop:min-w-[156px] lg-desktop:px-8 !w-auto min-w-[120px] !max-w-full px-5',\n cns?.button,\n item.cns\n )}\n onClick={item.onClick ? item.onClick : () => btnClick(item.target || '')}\n >\n {item.text}\n </Button>\n </div>\n )\n case 'buttons':\n return (\n <div\n className={cn(\n 'cpn-banner-buttonBox tablet:mt-6 tablet:justify-start mt-4 flex justify-center',\n cns?.buttonBox\n )}\n >\n {item.buttons.map((button, index) => (\n <Button\n key={index}\n className={cn(\n 'cpn-banner-button tablet:min-w-[138px] tablet:px-7 lg-desktop:min-w-[156px] lg-desktop:px-8 !w-auto min-w-[120px] !max-w-full px-5',\n cns?.button,\n button.cns\n )}\n onClick={button.onClick ? button.onClick : () => btnClick(button.target || '')}\n >\n {button.text}\n </Button>\n ))}\n </div>\n )\n case 'countdown':\n return (\n <div\n key={index}\n className=\"cpn-banner-countdown tablet:mt-6 tablet:justify-start mt-4 flex justify-center\"\n >\n <CountDown endTime={item.endTime} copy={item.copy} cns={cns?.countdown} />\n </div>\n )\n }\n })}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nexport default CpnBanner\n"],
|
|
5
|
+
"mappings": "AAqBI,OACE,OAAAA,EADF,QAAAC,MAAA,oBApBJ,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,EAAS,QAAAC,EAAM,UAAAC,MAAc,4BACtC,OAAOC,MAAe,2BAEtB,MAAMC,EAAaC,GAAuB,CACxC,KAAM,CAAE,GAAAC,EAAI,MAAAC,EAAO,SAAAC,EAAU,UAAAC,EAAW,QAAAC,EAAU,CAAC,EAAG,IAAAC,CAAI,EAAIN,EAExDO,EAAYC,GAAmB,CAInC,GAHIA,GAAQ,WAAW,MAAM,IAC3B,SAAS,KAAOA,GAEdA,GAAQ,WAAW,GAAG,EAAG,CAC3B,MAAMC,EAAU,SAAS,cAAcD,CAAM,EACzCC,GACFA,EAAQ,eAAe,CAAE,SAAU,QAAS,CAAC,CAEjD,CACF,EAEA,OACEhB,EAAC,OAAI,GAAIQ,EAAI,UAAWP,EAAG,uCAAwCY,GAAK,SAAS,EAC/E,UAAAd,EAACG,EAAA,CACC,QAAQ,QACR,OAAQ,GAAGO,CAAK,KAAKC,GAAYD,CAAK,OACtC,UAAWR,EAAG,qBAAsBY,GAAK,OAAO,EAChD,aAAcZ,EAAG,uCAAwCY,GAAK,KAAK,EACnE,IAAI,GACN,EACCF,GAAaZ,EAAC,KAAE,KAAMY,EAAW,UAAU,wCAAwC,EACpFZ,EAAC,OACC,UAAWE,EACT,kJACAY,GAAK,GACP,EAEA,SAAAd,EAAC,OAAI,UAAWE,EAAG,yDAA0DY,GAAK,UAAU,EAC1F,SAAAd,EAAC,OAAI,UAAWE,EAAG,0EAA2EY,GAAK,OAAO,EACvG,SAAAD,GAAS,IAAI,CAACK,EAAMC,IAAU,CAC7B,OAAQD,EAAK,KAAM,CACjB,IAAK,aACH,OACElB,EAACI,EAAA,CAEC,GAAG,MACH,KAAMc,EAAK,KACX,UAAWhB,EACT,qFACAY,GAAK,UACP,GANKK,CAOP,EAEJ,IAAK,QACH,OACEnB,EAACI,EAAA,CAEC,GAAG,MACH,KAAMc,EAAK,KACX,UAAWhB,EACT,oHACAY,GAAK,KACP,GANKK,CAOP,EAEJ,IAAK,WACH,OACEnB,EAACI,EAAA,CAEC,GAAG,MACH,KAAMc,EAAK,KACX,UAAWhB,EACT,+FACAY,GAAK,QACP,GANKK,CAOP,EAEJ,IAAK,SACH,OACEnB,EAAC,OACC,UAAWE,EACT,iFACAY,GAAK,SACP,EAEA,SAAAd,EAACK,EAAA,CAEC,UAAWH,EACT,qIACAY,GAAK,OACLI,EAAK,GACP,EACA,QAASA,EAAK,QAAUA,EAAK,QAAU,IAAMH,EAASG,EAAK,QAAU,EAAE,EAEtE,SAAAA,EAAK,MARDC,CASP,EACF,EAEJ,IAAK,UACH,OACEnB,EAAC,OACC,UAAWE,EACT,iFACAY,GAAK,SACP,EAEC,SAAAI,EAAK,QAAQ,IAAI,CAACE,EAAQD,IACzBnB,EAACK,EAAA,CAEC,UAAWH,EACT,qIACAY,GAAK,OACLM,EAAO,GACT,EACA,QAASA,EAAO,QAAUA,EAAO,QAAU,IAAML,EAASK,EAAO,QAAU,EAAE,EAE5E,SAAAA,EAAO,MARHD,CASP,CACD,EACH,EAEJ,IAAK,YACH,OACEnB,EAAC,OAEC,UAAU,iFAEV,SAAAA,EAACM,EAAA,CAAU,QAASY,EAAK,QAAS,KAAMA,EAAK,KAAM,IAAKJ,GAAK,UAAW,GAHnEK,CAIP,CAEN,CACF,CAAC,EACH,EACF,EACF,GACF,CAEJ,EAEA,IAAOE,EAAQd",
|
|
6
6
|
"names": ["jsx", "jsxs", "cn", "Picture", "Text", "Button", "CountDown", "CpnBanner", "props", "id", "image", "imageMob", "imageLink", "content", "cns", "btnClick", "target", "element", "item", "index", "button", "CpnBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as s}from"react/jsx-runtime";import{useEffect as g,useRef as x,useState as C}from"react";import{cn as
|
|
1
|
+
import{jsx as s}from"react/jsx-runtime";import{useEffect as g,useRef as x,useState as C}from"react";import{cn as c}from"../../helpers/utils.js";import w from"lodash.debounce";const y=d=>{const{lists:a,styles:i,cns:n,offset:v=0}=d,[u,f]=C(0),p=x(null),b=e=>{e.scrollIntoView({behavior:"smooth",inline:"center"})},h=(e,o,t)=>{f(o);const r=t.target;b(r),e.anchor&&document.querySelector(`#${e.anchor}`)?.scrollIntoView({behavior:"smooth"}),t.preventDefault()};return g(()=>{const e=w(()=>{const t=[];a?.forEach(l=>{const m=document.querySelector(`#${l.anchor}`);m&&t.push(m.getBoundingClientRect().top)});const r=t.findIndex(l=>l>o+v);f(r===-1?t.length-1:r===0?0:r-1)},100),o=p.current?.getBoundingClientRect().height||0;return window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e)}},[a,v]),s("div",{id:"nav",className:c("cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]",n?.container),style:{"--bgColor":i?.bgColor||"#C6F1FF","--color":i?.color||"#333","--activeColor":i?.activeColor||"#000"},children:s("div",{className:c("cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden","tablet:gap-[80px] tablet:justify-center",n?.box),ref:p,children:a?.map((e,o)=>s("a",{href:`#${e.anchor}`,className:c("cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200",n?.item,{[`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[""] ${n?.activeItem}`]:u===o}),onClick:t=>h(e,o,t),children:e.label},e.label))})})};var S=y;export{S as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/cpn-components/CpnNavigation/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport debounce from 'lodash.debounce'\n\nconst CpnNavigation = (props: NavigationProps) => {\n const { lists, styles, cns, offset = 0 } = props\n const [activeIndex, setActiveIndex] = useState(0)\n const navBox = useRef<HTMLDivElement>(null)\n\n const scrollIntoView = (ele: HTMLElement) => {\n ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n }\n\n const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n setActiveIndex(index)\n const ele = e.target as HTMLAnchorElement\n scrollIntoView(ele)\n if (nav.anchor) {\n document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n }\n e.preventDefault()\n }\n\n useEffect(() => {\n const scrollHandler = debounce(() => {\n const sectionTops: number[] = []\n lists?.forEach(nav => {\n const section = document.querySelector(`#${nav.anchor}`)\n if (section) {\n sectionTops.push(section.getBoundingClientRect().top)\n }\n })\n const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset)
|
|
5
|
-
"mappings": "AAiEY,cAAAA,MAAA,oBAjEZ,OAAgB,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QACnD,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAc,kBAErB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,CAAE,EAAIJ,EACrC,CAACK,EAAaC,CAAc,EAAIV,EAAS,CAAC,EAC1CW,EAASZ,EAAuB,IAAI,EAEpCa,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,CACnB,EAEA,OAAAnB,EAAU,IAAM,CACd,MAAMoB,EAAgBhB,EAAS,IAAM,CACnC,MAAMiB,EAAwB,CAAC,EAC/Bd,GAAO,QAAQU,GAAO,CACpB,MAAMK,EAAU,SAAS,cAAc,IAAIL,EAAI,MAAM,EAAE,EACnDK,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAMJ,EAAQG,EAAY,UAAUE,GAAcA,EAAaC,EAAYd,CAAM,
|
|
4
|
+
"sourcesContent": ["import React, { useEffect, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport type { Nav, NavigationProps } from './types.js'\nimport debounce from 'lodash.debounce'\n\nconst CpnNavigation = (props: NavigationProps) => {\n const { lists, styles, cns, offset = 0 } = props\n const [activeIndex, setActiveIndex] = useState(0)\n const navBox = useRef<HTMLDivElement>(null)\n\n const scrollIntoView = (ele: HTMLElement) => {\n ele.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n }\n\n const handleNavItemClick = (nav: Nav, index: number, e: React.SyntheticEvent<EventTarget>) => {\n setActiveIndex(index)\n const ele = e.target as HTMLAnchorElement\n scrollIntoView(ele)\n if (nav.anchor) {\n document.querySelector(`#${nav.anchor}`)?.scrollIntoView({ behavior: 'smooth' })\n }\n e.preventDefault()\n }\n\n useEffect(() => {\n const scrollHandler = debounce(() => {\n const sectionTops: number[] = []\n lists?.forEach(nav => {\n const section = document.querySelector(`#${nav.anchor}`)\n if (section) {\n sectionTops.push(section.getBoundingClientRect().top)\n }\n })\n const index = sectionTops.findIndex(sectionTop => sectionTop > navHeight + offset)\n setActiveIndex(index === -1 ? sectionTops.length - 1 : index === 0 ? 0 : index - 1)\n }, 100)\n const navHeight = navBox.current?.getBoundingClientRect().height || 0\n window.addEventListener('scroll', scrollHandler)\n return () => {\n window.removeEventListener('scroll', scrollHandler)\n }\n }, [lists, offset])\n\n return (\n <div\n id=\"nav\"\n className={cn('cpn-nav-container sticky top-0 z-10 w-full bg-[var(--bgColor)]', cns?.container)}\n style={\n {\n '--bgColor': styles?.bgColor || '#C6F1FF',\n '--color': styles?.color || '#333',\n '--activeColor': styles?.activeColor || '#000',\n } as React.CSSProperties\n }\n >\n <div\n className={cn(\n 'cpn-nav-box relative flex items-center justify-start gap-[18px] overflow-scroll px-6 text-center [&::-webkit-scrollbar]:hidden',\n 'tablet:gap-[80px] tablet:justify-center',\n cns?.box\n )}\n ref={navBox}\n >\n {lists?.map((nav, index) => {\n return (\n <a\n key={nav.label}\n href={`#${nav.anchor}`}\n className={cn(\n 'cpn-nav-item relative cursor-pointer whitespace-nowrap py-[14px] text-[16px] font-medium leading-[1.2] text-[var(--color)] transition-all duration-200',\n cns?.item,\n {\n [`border-[var(--activeColor)] text-[var(--activeColor)] after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:bg-[var(--activeColor)] after:transition-all after:duration-200 after:content-[\"\"] ${cns?.activeItem}`]:\n activeIndex === index,\n }\n )}\n onClick={e => handleNavItemClick(nav, index, e)}\n >\n {nav.label}\n </a>\n )\n })}\n </div>\n </div>\n )\n}\n\nexport default CpnNavigation\n"],
|
|
5
|
+
"mappings": "AAiEY,cAAAA,MAAA,oBAjEZ,OAAgB,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QACnD,OAAS,MAAAC,MAAU,yBAEnB,OAAOC,MAAc,kBAErB,MAAMC,EAAiBC,GAA2B,CAChD,KAAM,CAAE,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,OAAAC,EAAS,CAAE,EAAIJ,EACrC,CAACK,EAAaC,CAAc,EAAIV,EAAS,CAAC,EAC1CW,EAASZ,EAAuB,IAAI,EAEpCa,EAAkBC,GAAqB,CAC3CA,EAAI,eAAe,CAAE,SAAU,SAAU,OAAQ,QAAS,CAAC,CAC7D,EAEMC,EAAqB,CAACC,EAAUC,EAAeC,IAAyC,CAC5FP,EAAeM,CAAK,EACpB,MAAMH,EAAMI,EAAE,OACdL,EAAeC,CAAG,EACdE,EAAI,QACN,SAAS,cAAc,IAAIA,EAAI,MAAM,EAAE,GAAG,eAAe,CAAE,SAAU,QAAS,CAAC,EAEjFE,EAAE,eAAe,CACnB,EAEA,OAAAnB,EAAU,IAAM,CACd,MAAMoB,EAAgBhB,EAAS,IAAM,CACnC,MAAMiB,EAAwB,CAAC,EAC/Bd,GAAO,QAAQU,GAAO,CACpB,MAAMK,EAAU,SAAS,cAAc,IAAIL,EAAI,MAAM,EAAE,EACnDK,GACFD,EAAY,KAAKC,EAAQ,sBAAsB,EAAE,GAAG,CAExD,CAAC,EACD,MAAMJ,EAAQG,EAAY,UAAUE,GAAcA,EAAaC,EAAYd,CAAM,EACjFE,EAAeM,IAAU,GAAKG,EAAY,OAAS,EAAIH,IAAU,EAAI,EAAIA,EAAQ,CAAC,CACpF,EAAG,GAAG,EACAM,EAAYX,EAAO,SAAS,sBAAsB,EAAE,QAAU,EACpE,cAAO,iBAAiB,SAAUO,CAAa,EACxC,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAa,CACpD,CACF,EAAG,CAACb,EAAOG,CAAM,CAAC,EAGhBX,EAAC,OACC,GAAG,MACH,UAAWI,EAAG,iEAAkEM,GAAK,SAAS,EAC9F,MACE,CACE,YAAaD,GAAQ,SAAW,UAChC,UAAWA,GAAQ,OAAS,OAC5B,gBAAiBA,GAAQ,aAAe,MAC1C,EAGF,SAAAT,EAAC,OACC,UAAWI,EACT,iIACA,0CACAM,GAAK,GACP,EACA,IAAKI,EAEJ,SAAAN,GAAO,IAAI,CAACU,EAAKC,IAEdnB,EAAC,KAEC,KAAM,IAAIkB,EAAI,MAAM,GACpB,UAAWd,EACT,yJACAM,GAAK,KACL,CACE,CAAC,wNAAwNA,GAAK,UAAU,EAAE,EACxOE,IAAgBO,CACpB,CACF,EACA,QAASC,GAAKH,EAAmBC,EAAKC,EAAOC,CAAC,EAE7C,SAAAF,EAAI,OAZAA,EAAI,KAaX,CAEH,EACH,EACF,CAEJ,EAEA,IAAOQ,EAAQpB",
|
|
6
6
|
"names": ["jsx", "useEffect", "useRef", "useState", "cn", "debounce", "CpnNavigation", "props", "lists", "styles", "cns", "offset", "activeIndex", "setActiveIndex", "navBox", "scrollIntoView", "ele", "handleNavItemClick", "nav", "index", "e", "scrollHandler", "sectionTops", "section", "sectionTop", "navHeight", "CpnNavigation_default"]
|
|
7
7
|
}
|