@anker-in/headless-ui 1.0.16-alpha.5 → 1.0.16-alpha.6

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.
Files changed (9) hide show
  1. package/dist/cjs/biz-components/Graphic/index.js +1 -1
  2. package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
  3. package/dist/cjs/biz-components/TextModal/index.js +1 -1
  4. package/dist/cjs/biz-components/TextModal/index.js.map +2 -2
  5. package/dist/esm/biz-components/Graphic/index.js +1 -1
  6. package/dist/esm/biz-components/Graphic/index.js.map +2 -2
  7. package/dist/esm/biz-components/TextModal/index.js +1 -1
  8. package/dist/esm/biz-components/TextModal/index.js.map +2 -2
  9. package/package.json +1 -1
package/dist/cjs/biz-components/Graphic/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var z=Object.create;var b=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var Y=(e,s)=>{for(var i in s)b(e,i,{get:s[i],enumerable:!0})},T=(e,s,i,m)=>{if(s&&typeof s=="object"||typeof s=="function")for(let r of R(s))!F.call(e,r)&&r!==i&&b(e,r,{get:()=>s[r],enumerable:!(m=j(s,r))||m.enumerable});return e};var g=(e,s,i)=>(i=e!=null?z(q(e)):{},T(s||!e||!e.__esModule?b(i,"default",{value:e,enumerable:!0}):i,e)),_=e=>T(b({},"__esModule",{value:!0}),e);var Z={};Y(Z,{default:()=>Q});module.exports=_(Z);var t=require("react/jsx-runtime"),M=require("react-responsive"),o=g(require("react")),c=require("../../helpers/utils.js"),V=require("../../shared/Styles.js"),N=g(require("../SwiperBox/index.js")),a=require("../../components/index.js"),C=g(require("../Title/index.js")),P=require("../VideoModal/index.js"),$=require("../TextModal/index.js"),G=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js");const h="image",u="graphic",A=({data:e,configuration:s})=>{const i=()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};function m(n){throw new Error("Function not implemented.")}function r(n){throw new Error("Function not implemented.")}function x(n){throw new Error("Function not implemented.")}return(0,t.jsx)("div",{className:(0,c.cn)(i(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,c.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:(0,t.jsxs)("div",{className:"relative block size-full cursor-pointer overflow-hidden",children:[(0,t.jsx)("a",{"aria-label":e?.title??e?.description,href:e?.href?(0,w.trackUrlRef)(e?.href||"",`${h}_${u}`):"",className:"block size-full cursor-pointer overflow-hidden","data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${h}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,t.jsx)(a.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}),(0,t.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[(0,t.jsxs)("div",{className:(0,c.cn)("flex items-end overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(a.Text,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&(0,t.jsx)(a.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&(0,t.jsx)("button",{"aria-label":"Play Video",onClick:n=>{n.preventDefault(),n.stopPropagation(),s?.onVideoPlayBtnClick?.(s?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&(0,t.jsx)("button",{onClick:n=>{n.preventDefault(),n.stopPropagation(),s?.onIconClick?.(e,s)},className:"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden",children:(0,t.jsx)(a.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&(0,t.jsx)(a.Button,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"mt-[8px] self-start",href:(0,w.trackUrlRef)(e?.href,`${h}_${u}`),"data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${h}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},I=o.default.forwardRef(({data:e,className:s},i)=>{const m=(0,M.useMediaQuery)({query:"(max-width: 768px)"}),r=(0,o.useRef)(null),[x,n]=(0,o.useState)(!1),[v,S]=(0,o.useState)(""),[E,B]=(0,o.useState)(""),[H,L]=(0,o.useState)(""),[D,y]=(0,o.useState)(null),[U,k]=(0,o.useState)(!1),f=p=>{const l=e?.items?.length>3,d=e?.items?.length>2;switch(p){case 1440:return l?4:e?.items?.length;case 1024:return l?3:e?.items?.length;case 768:return l||d?2.3:2;default:return 1.2}};return(0,o.useImperativeHandle)(i,()=>r.current),(0,G.useExposure)(r,{componentType:h,componentName:u,componentTitle:e?.title}),(0,o.useEffect)(()=>{const p=r.current?.querySelectorAll(".graphic-description");if(p&&p.length>0){let l=0;p.forEach(d=>{l=Math.max(l,d.offsetHeight)}),p.forEach(d=>{d.style.height=`${l}px`})}},[]),(0,t.jsxs)("div",{className:(0,c.cn)("graphicBlock",s),ref:r,children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(C.default,{data:{title:e?.title}}),(0,t.jsx)(N.default,{id:"Graphic",className:(0,c.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(p,l)=>{n(!0),l?.isYouTube?B?.(l?.youtubeId||""):(S?.(l?.video?.url||""),L?.(l?.mobileVideo?.url||""))},onIconClick:p=>{k(!0),y(p)},title:e?.title}},Slide:A,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:f()},768:{spaceBetween:16,freeMode:!1,slidesPerView:f(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:f(1440)}}})]}),(0,t.jsx)(P.VideoModal,{visible:x,youTubeId:E,onCloseModal:()=>n(!1),videoUrl:m&&H||v}),(0,t.jsx)($.TextModal,{textVisible:U,extension:D?.extension,onCloseModal:()=>{k(!1),y(null)}})]})});I.displayName="Graphic";var Q=(0,V.withLayout)(I);
1
+ "use strict";"use client";var z=Object.create;var b=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var Y=(e,s)=>{for(var i in s)b(e,i,{get:s[i],enumerable:!0})},T=(e,s,i,m)=>{if(s&&typeof s=="object"||typeof s=="function")for(let r of R(s))!F.call(e,r)&&r!==i&&b(e,r,{get:()=>s[r],enumerable:!(m=j(s,r))||m.enumerable});return e};var g=(e,s,i)=>(i=e!=null?z(q(e)):{},T(s||!e||!e.__esModule?b(i,"default",{value:e,enumerable:!0}):i,e)),_=e=>T(b({},"__esModule",{value:!0}),e);var Z={};Y(Z,{default:()=>Q});module.exports=_(Z);var t=require("react/jsx-runtime"),I=require("react-responsive"),o=g(require("react")),c=require("../../helpers/utils.js"),M=require("../../shared/Styles.js"),V=g(require("../SwiperBox/index.js")),p=require("../../components/index.js"),C=g(require("../Title/index.js")),P=require("../VideoModal/index.js"),$=require("../TextModal/index.js"),G=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js");const h="image",u="graphic",A=({data:e,configuration:s})=>{const i=()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};function m(n){throw new Error("Function not implemented.")}function r(n){throw new Error("Function not implemented.")}function x(n){throw new Error("Function not implemented.")}return(0,t.jsx)("div",{className:(0,c.cn)(i(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,c.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:(0,t.jsxs)("div",{className:"relative block size-full cursor-pointer overflow-hidden",children:[e?.href?(0,t.jsx)("a",{"aria-label":e?.title??e?.description,href:(0,w.trackUrlRef)(e?.href||"",`${h}_${u}`),className:"block size-full cursor-pointer overflow-hidden","data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${h}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}):(0,t.jsx)("div",{className:"block size-full cursor-pointer overflow-hidden",children:(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}),(0,t.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[(0,t.jsxs)("div",{className:(0,c.cn)("flex items-end overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(p.Text,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&(0,t.jsx)(p.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&(0,t.jsx)("button",{"aria-label":"Play Video",onClick:n=>{n.preventDefault(),n.stopPropagation(),s?.onVideoPlayBtnClick?.(s?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&(0,t.jsx)("button",{onClick:n=>{n.preventDefault(),n.stopPropagation(),s?.onIconClick?.(e,s)},className:"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden",children:(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&(0,t.jsx)(p.Button,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"mt-[8px] self-start",href:(0,w.trackUrlRef)(e?.href,`${h}_${u}`),"data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${h}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},N=o.default.forwardRef(({data:e,className:s},i)=>{const m=(0,I.useMediaQuery)({query:"(max-width: 768px)"}),r=(0,o.useRef)(null),[x,n]=(0,o.useState)(!1),[v,S]=(0,o.useState)(""),[E,B]=(0,o.useState)(""),[U,H]=(0,o.useState)(""),[L,y]=(0,o.useState)(null),[D,k]=(0,o.useState)(!1),f=a=>{const l=e?.items?.length>3,d=e?.items?.length>2;switch(a){case 1440:return l?4:e?.items?.length;case 1024:return l?3:e?.items?.length;case 768:return l||d?2.3:2;default:return 1.2}};return(0,o.useImperativeHandle)(i,()=>r.current),(0,G.useExposure)(r,{componentType:h,componentName:u,componentTitle:e?.title}),(0,o.useEffect)(()=>{const a=r.current?.querySelectorAll(".graphic-description");if(a&&a.length>0){let l=0;a.forEach(d=>{l=Math.max(l,d.offsetHeight)}),a.forEach(d=>{d.style.height=`${l}px`})}},[]),(0,t.jsxs)("div",{className:(0,c.cn)("graphicBlock",s),ref:r,children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(C.default,{data:{title:e?.title}}),(0,t.jsx)(V.default,{id:"Graphic",className:(0,c.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(a,l)=>{n(!0),l?.isYouTube?B?.(l?.youtubeId||""):(S?.(l?.video?.url||""),H?.(l?.mobileVideo?.url||""))},onIconClick:a=>{k(!0),y(a)},title:e?.title}},Slide:A,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:f()},768:{spaceBetween:16,freeMode:!1,slidesPerView:f(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:f(1440)}}})]}),(0,t.jsx)(P.VideoModal,{visible:x,youTubeId:E,onCloseModal:()=>n(!1),videoUrl:m&&U||v}),(0,t.jsx)($.TextModal,{textVisible:D,extension:L?.extension,onCloseModal:()=>{k(!1),y(null)}})]})});N.displayName="Graphic";var Q=(0,M.withLayout)(N);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/Graphic/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n isYouTube?: boolean\n isShowIcon?: boolean\n buttonText?: string\n icon?: Img\n theme?: Theme\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n // textPcImg?: Img\n // textMobileImg?: Img\n // text?: string\n // textDesc?: string\n // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n itemTheme?: Theme\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n function setVisible(arg0: boolean) {\n throw new Error('Function not implemented.')\n }\n\n function setTextVisible(arg0: boolean) {\n throw new Error('Function not implemented.')\n }\n\n function setCurrentItem(data: GraphicType) {\n throw new Error('Function not implemented.')\n }\n\n return (\n <div\n className={cn(\n handleAspect(),\n 'graphicItem',\n 'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <div\n className=\"relative block size-full cursor-pointer overflow-hidden\"\n >\n <a\n aria-label={data?.title ?? data?.description}\n href={data?.href ? trackUrlRef(data?.href || '', `${componentType}_${componentName}`) : ''}\n className=\"block size-full cursor-pointer overflow-hidden\"\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </a>\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n <button\n aria-label=\"Play Video\"\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n {data?.isShowIcon && data?.icon?.url && (\n <button\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onIconClick?.(data, configuration)\n }}\n className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover\"\n source={data?.icon?.url}\n alt={data?.icon?.alt || ''}\n />\n </button>\n )}\n </div>\n {data.buttonText && (\n <Button\n as=\"a\"\n aria-label={data?.title ?? data?.description}\n variant=\"secondary\"\n className=\"mt-[8px] self-start\"\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n >\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n const [textVisible, setTextVisible] = useState<boolean>(false)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n if (descriptions && descriptions.length > 0) {\n let maxHeight = 0\n descriptions.forEach((el: HTMLDivElement) => {\n maxHeight = Math.max(maxHeight, el.offsetHeight)\n })\n descriptions.forEach((el: HTMLDivElement) => {\n el.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n return (\n <div className={cn('graphicBlock', className)} ref={innerRef}>\n <div className=\"graphic-box\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n }\n },\n onIconClick: (data: GraphicType) => {\n setTextVisible(true)\n setCurrentItem(data)\n },\n title: data?.title,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </div>\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n onCloseModal={() => setVisible(false)}\n videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n />\n <TextModal\n textVisible={textVisible}\n extension={currentItem?.extension}\n onCloseModal={() => {\n setTextVisible(false)\n setCurrentItem(null)\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n isYouTube?: boolean\n isShowIcon?: boolean\n buttonText?: string\n icon?: Img\n theme?: Theme\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n // textPcImg?: Img\n // textMobileImg?: Img\n // text?: string\n // textDesc?: string\n // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n itemTheme?: Theme\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n function setVisible(arg0: boolean) {\n throw new Error('Function not implemented.')\n }\n\n function setTextVisible(arg0: boolean) {\n throw new Error('Function not implemented.')\n }\n\n function setCurrentItem(data: GraphicType) {\n throw new Error('Function not implemented.')\n }\n\n return (\n <div\n className={cn(\n handleAspect(),\n 'graphicItem',\n 'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <div className=\"relative block size-full cursor-pointer overflow-hidden\">\n {data?.href ? (\n <a\n aria-label={data?.title ?? data?.description}\n href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n className=\"block size-full cursor-pointer overflow-hidden\"\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </a>\n ) : (\n <div className=\"block size-full cursor-pointer overflow-hidden\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </div>\n )}\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n <button\n aria-label=\"Play Video\"\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n {data?.isShowIcon && data?.icon?.url && (\n <button\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onIconClick?.(data, configuration)\n }}\n className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover\"\n source={data?.icon?.url}\n alt={data?.icon?.alt || ''}\n />\n </button>\n )}\n </div>\n {data.buttonText && (\n <Button\n as=\"a\"\n aria-label={data?.title ?? data?.description}\n variant=\"secondary\"\n className=\"mt-[8px] self-start\"\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n >\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n const [textVisible, setTextVisible] = useState<boolean>(false)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n if (descriptions && descriptions.length > 0) {\n let maxHeight = 0\n descriptions.forEach((el: HTMLDivElement) => {\n maxHeight = Math.max(maxHeight, el.offsetHeight)\n })\n descriptions.forEach((el: HTMLDivElement) => {\n el.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n return (\n <div className={cn('graphicBlock', className)} ref={innerRef}>\n <div className=\"graphic-box\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n }\n },\n onIconClick: (data: GraphicType) => {\n setTextVisible(true)\n setCurrentItem(data)\n },\n title: data?.title,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </div>\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n onCloseModal={() => setVisible(false)}\n videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n />\n <TextModal\n textVisible={textVisible}\n extension={currentItem?.extension}\n onCloseModal={() => {\n setTextVisible(false)\n setCurrentItem(null)\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
5
+ "mappings": "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",
6
6
  "names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react_responsive", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "import_VideoModal", "import_TextModal", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "handleAspect", "setVisible", "arg0", "setTextVisible", "setCurrentItem", "e", "Graphic", "React", "className", "ref", "isMobile", "innerRef", "visible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "textVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "Title", "SwiperBox", "_"]
7
7
  }
package/dist/cjs/biz-components/TextModal/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var l in e)d(o,l,{get:e[l],enumerable:!0})},g=(o,e,l,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of p(e))!r.call(o,s)&&s!==l&&d(o,s,{get:()=>e[s],enumerable:!(i=m(e,s))||i.enumerable});return o};var c=o=>g(d({},"__esModule",{value:!0}),o);var f={};b(f,{TextModal:()=>n});module.exports=c(f);var t=require("react/jsx-runtime"),x=require("../../components/dialog.js"),a=require("../../components/index.js"),u=require("../../helpers/index.js");const n=o=>{const{textVisible:e,extension:l,onCloseModal:i}=o;return(0,t.jsx)(x.Dialog,{open:e,onOpenChange:()=>i(),children:(0,t.jsx)(x.DialogContent,{className:" tablet:max-h-[535px] tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden",children:(0,t.jsxs)("div",{className:"tablet:rounded-2xl overflow-hidden rounded-lg md-tablet:flex md-tablet:flex-col",children:[(0,t.jsx)("div",{className:"min-h-[260px] w-full md-tablet:flex-1",children:(0,t.jsx)(a.Picture,{source:`${l?.textPcImg?.url||""} , ${l?.textMobileImg?.url||""} 767`,className:"size-full",imgClassName:"w-full h-full object-cover"})}),(0,t.jsx)("div",{className:"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4",children:(0,t.jsx)(a.Text,{html:l?.textTitle,className:"tablet:text-[24px] text-[20px] font-bold leading-[1.2]"})}),(0,t.jsx)("div",{onClick:()=>i(),className:"absolute right-4 top-4 cursor-pointer",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:(0,t.jsx)("g",{"clip-path":"url(#clip0_2548_10038)",children:(0,t.jsx)("path",{d:"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z",fill:"white"})})})}),(0,t.jsxs)("div",{className:"tablet:p-8 p-4 text-[#1D1D1F] md-tablet:flex-1 md-tablet:overflow-y-auto",children:[(0,t.jsx)(a.Text,{html:l?.text,className:" tablet:text-2xl text-xl font-bold leading-[1.2]"}),(0,t.jsx)("br",{}),(0,t.jsx)(a.Text,{html:l?.textDesc,className:"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]"})]})]})})})};
1
+ "use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var l in e)d(o,l,{get:e[l],enumerable:!0})},g=(o,e,l,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of p(e))!r.call(o,s)&&s!==l&&d(o,s,{get:()=>e[s],enumerable:!(i=m(e,s))||i.enumerable});return o};var c=o=>g(d({},"__esModule",{value:!0}),o);var f={};b(f,{TextModal:()=>n});module.exports=c(f);var t=require("react/jsx-runtime"),x=require("../../components/dialog.js"),a=require("../../components/index.js"),u=require("../../helpers/index.js");const n=o=>{const{textVisible:e,extension:l,onCloseModal:i}=o;return(0,t.jsx)(x.Dialog,{open:e,onOpenChange:()=>i(),children:(0,t.jsx)(x.DialogContent,{className:"tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden",children:(0,t.jsxs)("div",{className:"tablet:rounded-2xl overflow-hidden rounded-lg md-tablet:flex md-tablet:flex-col",children:[(0,t.jsx)("div",{className:"min-h-[260px] w-full md-tablet:flex-1",children:(0,t.jsx)(a.Picture,{source:`${l?.textPcImg?.url||""} , ${l?.textMobileImg?.url||""} 767`,className:"size-full",imgClassName:"w-full h-full object-cover"})}),(0,t.jsx)("div",{className:"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4",children:(0,t.jsx)(a.Text,{html:l?.textTitle,className:"tablet:text-[24px] text-[20px] font-bold leading-[1.2]"})}),(0,t.jsx)("div",{onClick:()=>i(),className:"absolute right-4 top-4 cursor-pointer",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:(0,t.jsx)("g",{"clip-path":"url(#clip0_2548_10038)",children:(0,t.jsx)("path",{d:"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z",fill:"white"})})})}),(0,t.jsxs)("div",{className:"tablet:p-8 p-4 text-[#1D1D1F] tablet:max-h-60 md-tablet:flex-1 overflow-y-auto",children:[(0,t.jsx)(a.Text,{html:l?.text,className:" tablet:text-2xl text-xl font-bold leading-[1.2]"}),(0,t.jsx)("br",{}),(0,t.jsx)(a.Text,{html:l?.textDesc,className:"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]"})]})]})})})};
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/TextModal/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/TextModal/index.tsx"],
4
- "sourcesContent": ["import type { Media } from '../../types/props.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Img } from '../../types/props.js'\n\nexport type TextModalType = {\n textVisible: boolean\n extension?: {\n textPcImg: Img\n textMobileImg: Img\n textTitle: string\n text: string\n textDesc: string\n }\n onCloseModal: () => void\n}\n\nconst TextModal = (props: TextModalType) => {\n const { textVisible, extension, onCloseModal } = props\n\n return (\n <Dialog open={textVisible} onOpenChange={() => onCloseModal()}>\n <DialogContent className=\" tablet:max-h-[535px] tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden\">\n <div className=\"tablet:rounded-2xl overflow-hidden rounded-lg md-tablet:flex md-tablet:flex-col\">\n <div className=\"min-h-[260px] w-full md-tablet:flex-1\">\n <Picture\n source={`${extension?.textPcImg?.url || ''} , ${extension?.textMobileImg?.url || ''} 767`}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n <div className=\"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4\">\n <Text html={extension?.textTitle} className=\"tablet:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n </div>\n <div onClick={() => onCloseModal()} className=\"absolute right-4 top-4 cursor-pointer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n <g clip-path=\"url(#clip0_2548_10038)\">\n <path\n d=\"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z\"\n fill=\"white\"\n />\n </g>\n </svg>\n </div>\n <div className=\"tablet:p-8 p-4 text-[#1D1D1F] md-tablet:flex-1 md-tablet:overflow-y-auto\">\n <Text html={extension?.text} className=\" tablet:text-2xl text-xl font-bold leading-[1.2]\" />\n <br />\n <Text html={extension?.textDesc} className=\"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]\" />\n </div>\n </div>\n </DialogContent>\n </Dialog>\n )\n}\n\nexport { TextModal }\n"],
5
- "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GA0BY,IAAAI,EAAA,6BAzBZC,EAAsC,sCACtCC,EAA8B,qCAC9BC,EAAmB,kCAenB,MAAML,EAAaM,GAAyB,CAC1C,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAW,aAAAC,CAAa,EAAIH,EAEjD,SACE,OAAC,UAAO,KAAMC,EAAa,aAAc,IAAME,EAAa,EAC1D,mBAAC,iBAAc,UAAU,sKACvB,oBAAC,OAAI,UAAU,kFACb,oBAAC,OAAI,UAAU,wCACb,mBAAC,WACC,OAAQ,GAAGD,GAAW,WAAW,KAAO,EAAE,MAAMA,GAAW,eAAe,KAAO,EAAE,OACnF,UAAU,YACV,aAAa,6BACf,EACF,KACA,OAAC,OAAI,UAAU,yDACb,mBAAC,QAAK,KAAMA,GAAW,UAAW,UAAU,yDAAyD,EACvG,KACA,OAAC,OAAI,QAAS,IAAMC,EAAa,EAAG,UAAU,wCAC5C,mBAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,mBAAC,KAAE,YAAU,yBACX,mBAAC,QACC,EAAE,0gBACF,KAAK,QACP,EACF,EACF,EACF,KACA,QAAC,OAAI,UAAU,2EACb,oBAAC,QAAK,KAAMD,GAAW,KAAM,UAAU,mDAAmD,KAC1F,OAAC,OAAG,KACJ,OAAC,QAAK,KAAMA,GAAW,SAAU,UAAU,8DAA8D,GAC3G,GACF,EACF,EACF,CAEJ",
4
+ "sourcesContent": ["import type { Media } from '../../types/props.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Img } from '../../types/props.js'\n\nexport type TextModalType = {\n textVisible: boolean\n extension?: {\n textPcImg: Img\n textMobileImg: Img\n textTitle: string\n text: string\n textDesc: string\n }\n onCloseModal: () => void\n}\n\nconst TextModal = (props: TextModalType) => {\n const { textVisible, extension, onCloseModal } = props\n\n return (\n <Dialog open={textVisible} onOpenChange={() => onCloseModal()}>\n <DialogContent className=\"tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden\">\n <div className=\"tablet:rounded-2xl overflow-hidden rounded-lg md-tablet:flex md-tablet:flex-col\">\n <div className=\"min-h-[260px] w-full md-tablet:flex-1\">\n <Picture\n source={`${extension?.textPcImg?.url || ''} , ${extension?.textMobileImg?.url || ''} 767`}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n <div className=\"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4\">\n <Text html={extension?.textTitle} className=\"tablet:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n </div>\n <div onClick={() => onCloseModal()} className=\"absolute right-4 top-4 cursor-pointer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n <g clip-path=\"url(#clip0_2548_10038)\">\n <path\n d=\"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z\"\n fill=\"white\"\n />\n </g>\n </svg>\n </div>\n <div className=\"tablet:p-8 p-4 text-[#1D1D1F] tablet:max-h-60 md-tablet:flex-1 overflow-y-auto\">\n <Text html={extension?.text} className=\" tablet:text-2xl text-xl font-bold leading-[1.2]\" />\n <br />\n <Text html={extension?.textDesc} className=\"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]\" />\n </div>\n </div>\n </DialogContent>\n </Dialog>\n )\n}\n\nexport { TextModal }\n"],
5
+ "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GA0BY,IAAAI,EAAA,6BAzBZC,EAAsC,sCACtCC,EAA8B,qCAC9BC,EAAmB,kCAenB,MAAML,EAAaM,GAAyB,CAC1C,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAW,aAAAC,CAAa,EAAIH,EAEjD,SACE,OAAC,UAAO,KAAMC,EAAa,aAAc,IAAME,EAAa,EAC1D,mBAAC,iBAAc,UAAU,gJACvB,oBAAC,OAAI,UAAU,kFACb,oBAAC,OAAI,UAAU,wCACb,mBAAC,WACC,OAAQ,GAAGD,GAAW,WAAW,KAAO,EAAE,MAAMA,GAAW,eAAe,KAAO,EAAE,OACnF,UAAU,YACV,aAAa,6BACf,EACF,KACA,OAAC,OAAI,UAAU,yDACb,mBAAC,QAAK,KAAMA,GAAW,UAAW,UAAU,yDAAyD,EACvG,KACA,OAAC,OAAI,QAAS,IAAMC,EAAa,EAAG,UAAU,wCAC5C,mBAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,mBAAC,KAAE,YAAU,yBACX,mBAAC,QACC,EAAE,0gBACF,KAAK,QACP,EACF,EACF,EACF,KACA,QAAC,OAAI,UAAU,iFACb,oBAAC,QAAK,KAAMD,GAAW,KAAM,UAAU,mDAAmD,KAC1F,OAAC,OAAG,KACJ,OAAC,QAAK,KAAMA,GAAW,SAAU,UAAU,8DAA8D,GAC3G,GACF,EACF,EACF,CAEJ",
6
6
  "names": ["TextModal_exports", "__export", "TextModal", "__toCommonJS", "import_jsx_runtime", "import_dialog", "import_components", "import_helpers", "props", "textVisible", "extension", "onCloseModal"]
7
7
  }
package/dist/esm/biz-components/Graphic/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useMediaQuery as $}from"react-responsive";import G,{useEffect as S,useImperativeHandle as E,useRef as B,useState as r}from"react";import{cn as c}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import L from"../SwiperBox/index.js";import{Button as D,Heading as U,Picture as v,Text as z}from"../../components/index.js";import j from"../Title/index.js";import{VideoModal as R}from"../VideoModal/index.js";import{TextModal as q}from"../TextModal/index.js";import{useExposure as F}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";const m="image",d="graphic",Y=({data:e,configuration:i})=>{const u=()=>{switch(i.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};function f(o){throw new Error("Function not implemented.")}function p(o){throw new Error("Function not implemented.")}function b(o){throw new Error("Function not implemented.")}return t("div",{className:c(u(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:c("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":i?.itemShape==="round"}),children:n("div",{className:"relative block size-full cursor-pointer overflow-hidden",children:[t("a",{"aria-label":e?.title??e?.description,href:e?.href?y(e?.href||"",`${m}_${d}`):"",className:"block size-full cursor-pointer overflow-hidden","data-headless-nav-postion":`''#${i?.index+1}`,"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:t(v,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}),n("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[n("div",{className:c("flex items-end overflow-hidden","graphic-bottom"),children:[n("div",{className:"flex-1 overflow-hidden",children:[t(z,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&t(U,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:o=>{o.preventDefault(),o.stopPropagation(),i?.onVideoPlayBtnClick?.(i?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:o=>{o.preventDefault(),o.stopPropagation(),i?.onIconClick?.(e,i)},className:"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden",children:t(v,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(D,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"mt-[8px] self-start",href:y(e?.href,`${m}_${d}`),"data-headless-nav-postion":`''#${i?.index+1}`,"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},k=G.forwardRef(({data:e,className:i},u)=>{const f=$({query:"(max-width: 768px)"}),p=B(null),[b,o]=r(!1),[g,T]=r(""),[I,M]=r(""),[V,N]=r(""),[C,w]=r(null),[P,x]=r(!1),h=l=>{const s=e?.items?.length>3,a=e?.items?.length>2;switch(l){case 1440:return s?4:e?.items?.length;case 1024:return s?3:e?.items?.length;case 768:return s||a?2.3:2;default:return 1.2}};return E(u,()=>p.current),F(p,{componentType:m,componentName:d,componentTitle:e?.title}),S(()=>{const l=p.current?.querySelectorAll(".graphic-description");if(l&&l.length>0){let s=0;l.forEach(a=>{s=Math.max(s,a.offsetHeight)}),l.forEach(a=>{a.style.height=`${s}px`})}},[]),n("div",{className:c("graphicBlock",i),ref:p,children:[n("div",{className:"graphic-box",children:[e?.title&&t(j,{data:{title:e?.title}}),t(L,{id:"Graphic",className:c("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(l,s)=>{o(!0),s?.isYouTube?M?.(s?.youtubeId||""):(T?.(s?.video?.url||""),N?.(s?.mobileVideo?.url||""))},onIconClick:l=>{x(!0),w(l)},title:e?.title}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:h()},768:{spaceBetween:16,freeMode:!1,slidesPerView:h(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:h(1440)}}})]}),t(R,{visible:b,youTubeId:I,onCloseModal:()=>o(!1),videoUrl:f&&V||g}),t(q,{textVisible:P,extension:C?.extension,onCloseModal:()=>{x(!1),w(null)}})]})});k.displayName="Graphic";var se=H(k);export{se as default};
1
+ "use client";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useMediaQuery as $}from"react-responsive";import G,{useEffect as S,useImperativeHandle as E,useRef as B,useState as r}from"react";import{cn as c}from"../../helpers/utils.js";import{withLayout as U}from"../../shared/Styles.js";import H from"../SwiperBox/index.js";import{Button as L,Heading as D,Picture as f,Text as z}from"../../components/index.js";import j from"../Title/index.js";import{VideoModal as R}from"../VideoModal/index.js";import{TextModal as q}from"../TextModal/index.js";import{useExposure as F}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";const m="image",d="graphic",Y=({data:e,configuration:i})=>{const u=()=>{switch(i.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};function b(o){throw new Error("Function not implemented.")}function p(o){throw new Error("Function not implemented.")}function g(o){throw new Error("Function not implemented.")}return t("div",{className:c(u(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:c("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":i?.itemShape==="round"}),children:n("div",{className:"relative block size-full cursor-pointer overflow-hidden",children:[e?.href?t("a",{"aria-label":e?.title??e?.description,href:y(e?.href||"",`${m}_${d}`),className:"block size-full cursor-pointer overflow-hidden","data-headless-nav-postion":`''#${i?.index+1}`,"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}):t("div",{className:"block size-full cursor-pointer overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}),n("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[n("div",{className:c("flex items-end overflow-hidden","graphic-bottom"),children:[n("div",{className:"flex-1 overflow-hidden",children:[t(z,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&t(D,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:o=>{o.preventDefault(),o.stopPropagation(),i?.onVideoPlayBtnClick?.(i?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:o=>{o.preventDefault(),o.stopPropagation(),i?.onIconClick?.(e,i)},className:"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(L,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"mt-[8px] self-start",href:y(e?.href,`${m}_${d}`),"data-headless-nav-postion":`''#${i?.index+1}`,"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},k=G.forwardRef(({data:e,className:i},u)=>{const b=$({query:"(max-width: 768px)"}),p=B(null),[g,o]=r(!1),[w,T]=r(""),[N,I]=r(""),[M,V]=r(""),[C,x]=r(null),[P,v]=r(!1),h=l=>{const s=e?.items?.length>3,a=e?.items?.length>2;switch(l){case 1440:return s?4:e?.items?.length;case 1024:return s?3:e?.items?.length;case 768:return s||a?2.3:2;default:return 1.2}};return E(u,()=>p.current),F(p,{componentType:m,componentName:d,componentTitle:e?.title}),S(()=>{const l=p.current?.querySelectorAll(".graphic-description");if(l&&l.length>0){let s=0;l.forEach(a=>{s=Math.max(s,a.offsetHeight)}),l.forEach(a=>{a.style.height=`${s}px`})}},[]),n("div",{className:c("graphicBlock",i),ref:p,children:[n("div",{className:"graphic-box",children:[e?.title&&t(j,{data:{title:e?.title}}),t(H,{id:"Graphic",className:c("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(l,s)=>{o(!0),s?.isYouTube?I?.(s?.youtubeId||""):(T?.(s?.video?.url||""),V?.(s?.mobileVideo?.url||""))},onIconClick:l=>{v(!0),x(l)},title:e?.title}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:h()},768:{spaceBetween:16,freeMode:!1,slidesPerView:h(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:h(1440)}}})]}),t(R,{visible:g,youTubeId:N,onCloseModal:()=>o(!1),videoUrl:b&&M||w}),t(q,{textVisible:P,extension:C?.extension,onCloseModal:()=>{v(!1),x(null)}})]})});k.displayName="Graphic";var se=U(k);export{se as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/Graphic/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n isYouTube?: boolean\n isShowIcon?: boolean\n buttonText?: string\n icon?: Img\n theme?: Theme\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n // textPcImg?: Img\n // textMobileImg?: Img\n // text?: string\n // textDesc?: string\n // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n itemTheme?: Theme\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n function setVisible(arg0: boolean) {\n throw new Error('Function not implemented.')\n }\n\n function setTextVisible(arg0: boolean) {\n throw new Error('Function not implemented.')\n }\n\n function setCurrentItem(data: GraphicType) {\n throw new Error('Function not implemented.')\n }\n\n return (\n <div\n className={cn(\n handleAspect(),\n 'graphicItem',\n 'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <div\n className=\"relative block size-full cursor-pointer overflow-hidden\"\n >\n <a\n aria-label={data?.title ?? data?.description}\n href={data?.href ? trackUrlRef(data?.href || '', `${componentType}_${componentName}`) : ''}\n className=\"block size-full cursor-pointer overflow-hidden\"\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </a>\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n <button\n aria-label=\"Play Video\"\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n {data?.isShowIcon && data?.icon?.url && (\n <button\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onIconClick?.(data, configuration)\n }}\n className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover\"\n source={data?.icon?.url}\n alt={data?.icon?.alt || ''}\n />\n </button>\n )}\n </div>\n {data.buttonText && (\n <Button\n as=\"a\"\n aria-label={data?.title ?? data?.description}\n variant=\"secondary\"\n className=\"mt-[8px] self-start\"\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n >\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n const [textVisible, setTextVisible] = useState<boolean>(false)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n if (descriptions && descriptions.length > 0) {\n let maxHeight = 0\n descriptions.forEach((el: HTMLDivElement) => {\n maxHeight = Math.max(maxHeight, el.offsetHeight)\n })\n descriptions.forEach((el: HTMLDivElement) => {\n el.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n return (\n <div className={cn('graphicBlock', className)} ref={innerRef}>\n <div className=\"graphic-box\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n }\n },\n onIconClick: (data: GraphicType) => {\n setTextVisible(true)\n setCurrentItem(data)\n },\n title: data?.title,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </div>\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n onCloseModal={() => setVisible(false)}\n videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n />\n <TextModal\n textVisible={textVisible}\n extension={currentItem?.extension}\n onCloseModal={() => {\n setTextVisible(false)\n setCurrentItem(null)\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n isYouTube?: boolean\n isShowIcon?: boolean\n buttonText?: string\n icon?: Img\n theme?: Theme\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n // textPcImg?: Img\n // textMobileImg?: Img\n // text?: string\n // textDesc?: string\n // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n itemTheme?: Theme\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n function setVisible(arg0: boolean) {\n throw new Error('Function not implemented.')\n }\n\n function setTextVisible(arg0: boolean) {\n throw new Error('Function not implemented.')\n }\n\n function setCurrentItem(data: GraphicType) {\n throw new Error('Function not implemented.')\n }\n\n return (\n <div\n className={cn(\n handleAspect(),\n 'graphicItem',\n 'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <div className=\"relative block size-full cursor-pointer overflow-hidden\">\n {data?.href ? (\n <a\n aria-label={data?.title ?? data?.description}\n href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n className=\"block size-full cursor-pointer overflow-hidden\"\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </a>\n ) : (\n <div className=\"block size-full cursor-pointer overflow-hidden\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </div>\n )}\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n <button\n aria-label=\"Play Video\"\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n {data?.isShowIcon && data?.icon?.url && (\n <button\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onIconClick?.(data, configuration)\n }}\n className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover\"\n source={data?.icon?.url}\n alt={data?.icon?.alt || ''}\n />\n </button>\n )}\n </div>\n {data.buttonText && (\n <Button\n as=\"a\"\n aria-label={data?.title ?? data?.description}\n variant=\"secondary\"\n className=\"mt-[8px] self-start\"\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n >\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n const [textVisible, setTextVisible] = useState<boolean>(false)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n if (descriptions && descriptions.length > 0) {\n let maxHeight = 0\n descriptions.forEach((el: HTMLDivElement) => {\n maxHeight = Math.max(maxHeight, el.offsetHeight)\n })\n descriptions.forEach((el: HTMLDivElement) => {\n el.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n return (\n <div className={cn('graphicBlock', className)} ref={innerRef}>\n <div className=\"graphic-box\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n }\n },\n onIconClick: (data: GraphicType) => {\n setTextVisible(true)\n setCurrentItem(data)\n },\n title: data?.title,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </div>\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n onCloseModal={() => setVisible(false)}\n videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n />\n <TextModal\n textVisible={textVisible}\n extension={currentItem?.extension}\n onCloseModal={() => {\n setTextVisible(false)\n setCurrentItem(null)\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "useMediaQuery", "React", "useEffect", "useImperativeHandle", "useRef", "useState", "cn", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "handleAspect", "setVisible", "arg0", "setTextVisible", "setCurrentItem", "e", "Graphic", "className", "ref", "isMobile", "innerRef", "visible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "textVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "_", "Graphic_default"]
7
7
  }
package/dist/esm/biz-components/TextModal/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Dialog as x,DialogContent as d}from"../../components/dialog.js";import{Picture as n,Text as l}from"../../components/index.js";import"../../helpers/index.js";const m=i=>{const{textVisible:s,extension:e,onCloseModal:o}=i;return t(x,{open:s,onOpenChange:()=>o(),children:t(d,{className:" tablet:max-h-[535px] tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden",children:a("div",{className:"tablet:rounded-2xl overflow-hidden rounded-lg md-tablet:flex md-tablet:flex-col",children:[t("div",{className:"min-h-[260px] w-full md-tablet:flex-1",children:t(n,{source:`${e?.textPcImg?.url||""} , ${e?.textMobileImg?.url||""} 767`,className:"size-full",imgClassName:"w-full h-full object-cover"})}),t("div",{className:"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4",children:t(l,{html:e?.textTitle,className:"tablet:text-[24px] text-[20px] font-bold leading-[1.2]"})}),t("div",{onClick:()=>o(),className:"absolute right-4 top-4 cursor-pointer",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:t("g",{"clip-path":"url(#clip0_2548_10038)",children:t("path",{d:"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z",fill:"white"})})})}),a("div",{className:"tablet:p-8 p-4 text-[#1D1D1F] md-tablet:flex-1 md-tablet:overflow-y-auto",children:[t(l,{html:e?.text,className:" tablet:text-2xl text-xl font-bold leading-[1.2]"}),t("br",{}),t(l,{html:e?.textDesc,className:"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]"})]})]})})})};export{m as TextModal};
1
+ import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Dialog as x,DialogContent as d}from"../../components/dialog.js";import{Picture as n,Text as l}from"../../components/index.js";import"../../helpers/index.js";const m=i=>{const{textVisible:s,extension:e,onCloseModal:o}=i;return t(x,{open:s,onOpenChange:()=>o(),children:t(d,{className:"tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden",children:a("div",{className:"tablet:rounded-2xl overflow-hidden rounded-lg md-tablet:flex md-tablet:flex-col",children:[t("div",{className:"min-h-[260px] w-full md-tablet:flex-1",children:t(n,{source:`${e?.textPcImg?.url||""} , ${e?.textMobileImg?.url||""} 767`,className:"size-full",imgClassName:"w-full h-full object-cover"})}),t("div",{className:"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4",children:t(l,{html:e?.textTitle,className:"tablet:text-[24px] text-[20px] font-bold leading-[1.2]"})}),t("div",{onClick:()=>o(),className:"absolute right-4 top-4 cursor-pointer",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:t("g",{"clip-path":"url(#clip0_2548_10038)",children:t("path",{d:"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z",fill:"white"})})})}),a("div",{className:"tablet:p-8 p-4 text-[#1D1D1F] tablet:max-h-60 md-tablet:flex-1 overflow-y-auto",children:[t(l,{html:e?.text,className:" tablet:text-2xl text-xl font-bold leading-[1.2]"}),t("br",{}),t(l,{html:e?.textDesc,className:"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]"})]})]})})})};export{m as TextModal};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/TextModal/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/TextModal/index.tsx"],
4
- "sourcesContent": ["import type { Media } from '../../types/props.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Img } from '../../types/props.js'\n\nexport type TextModalType = {\n textVisible: boolean\n extension?: {\n textPcImg: Img\n textMobileImg: Img\n textTitle: string\n text: string\n textDesc: string\n }\n onCloseModal: () => void\n}\n\nconst TextModal = (props: TextModalType) => {\n const { textVisible, extension, onCloseModal } = props\n\n return (\n <Dialog open={textVisible} onOpenChange={() => onCloseModal()}>\n <DialogContent className=\" tablet:max-h-[535px] tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden\">\n <div className=\"tablet:rounded-2xl overflow-hidden rounded-lg md-tablet:flex md-tablet:flex-col\">\n <div className=\"min-h-[260px] w-full md-tablet:flex-1\">\n <Picture\n source={`${extension?.textPcImg?.url || ''} , ${extension?.textMobileImg?.url || ''} 767`}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n <div className=\"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4\">\n <Text html={extension?.textTitle} className=\"tablet:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n </div>\n <div onClick={() => onCloseModal()} className=\"absolute right-4 top-4 cursor-pointer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n <g clip-path=\"url(#clip0_2548_10038)\">\n <path\n d=\"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z\"\n fill=\"white\"\n />\n </g>\n </svg>\n </div>\n <div className=\"tablet:p-8 p-4 text-[#1D1D1F] md-tablet:flex-1 md-tablet:overflow-y-auto\">\n <Text html={extension?.text} className=\" tablet:text-2xl text-xl font-bold leading-[1.2]\" />\n <br />\n <Text html={extension?.textDesc} className=\"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]\" />\n </div>\n </div>\n </DialogContent>\n </Dialog>\n )\n}\n\nexport { TextModal }\n"],
5
- "mappings": "AA0BY,cAAAA,EAmBF,QAAAC,MAnBE,oBAzBZ,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,6BACtC,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,MAAmB,yBAenB,MAAMC,EAAaC,GAAyB,CAC1C,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAW,aAAAC,CAAa,EAAIH,EAEjD,OACEP,EAACE,EAAA,CAAO,KAAMM,EAAa,aAAc,IAAME,EAAa,EAC1D,SAAAV,EAACG,EAAA,CAAc,UAAU,sKACvB,SAAAF,EAAC,OAAI,UAAU,kFACb,UAAAD,EAAC,OAAI,UAAU,wCACb,SAAAA,EAACI,EAAA,CACC,OAAQ,GAAGK,GAAW,WAAW,KAAO,EAAE,MAAMA,GAAW,eAAe,KAAO,EAAE,OACnF,UAAU,YACV,aAAa,6BACf,EACF,EACAT,EAAC,OAAI,UAAU,yDACb,SAAAA,EAACK,EAAA,CAAK,KAAMI,GAAW,UAAW,UAAU,yDAAyD,EACvG,EACAT,EAAC,OAAI,QAAS,IAAMU,EAAa,EAAG,UAAU,wCAC5C,SAAAV,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,KAAE,YAAU,yBACX,SAAAA,EAAC,QACC,EAAE,0gBACF,KAAK,QACP,EACF,EACF,EACF,EACAC,EAAC,OAAI,UAAU,2EACb,UAAAD,EAACK,EAAA,CAAK,KAAMI,GAAW,KAAM,UAAU,mDAAmD,EAC1FT,EAAC,OAAG,EACJA,EAACK,EAAA,CAAK,KAAMI,GAAW,SAAU,UAAU,8DAA8D,GAC3G,GACF,EACF,EACF,CAEJ",
4
+ "sourcesContent": ["import type { Media } from '../../types/props.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Img } from '../../types/props.js'\n\nexport type TextModalType = {\n textVisible: boolean\n extension?: {\n textPcImg: Img\n textMobileImg: Img\n textTitle: string\n text: string\n textDesc: string\n }\n onCloseModal: () => void\n}\n\nconst TextModal = (props: TextModalType) => {\n const { textVisible, extension, onCloseModal } = props\n\n return (\n <Dialog open={textVisible} onOpenChange={() => onCloseModal()}>\n <DialogContent className=\"tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden\">\n <div className=\"tablet:rounded-2xl overflow-hidden rounded-lg md-tablet:flex md-tablet:flex-col\">\n <div className=\"min-h-[260px] w-full md-tablet:flex-1\">\n <Picture\n source={`${extension?.textPcImg?.url || ''} , ${extension?.textMobileImg?.url || ''} 767`}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n <div className=\"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4\">\n <Text html={extension?.textTitle} className=\"tablet:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n </div>\n <div onClick={() => onCloseModal()} className=\"absolute right-4 top-4 cursor-pointer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n <g clip-path=\"url(#clip0_2548_10038)\">\n <path\n d=\"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z\"\n fill=\"white\"\n />\n </g>\n </svg>\n </div>\n <div className=\"tablet:p-8 p-4 text-[#1D1D1F] tablet:max-h-60 md-tablet:flex-1 overflow-y-auto\">\n <Text html={extension?.text} className=\" tablet:text-2xl text-xl font-bold leading-[1.2]\" />\n <br />\n <Text html={extension?.textDesc} className=\"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]\" />\n </div>\n </div>\n </DialogContent>\n </Dialog>\n )\n}\n\nexport { TextModal }\n"],
5
+ "mappings": "AA0BY,cAAAA,EAmBF,QAAAC,MAnBE,oBAzBZ,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,6BACtC,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,MAAmB,yBAenB,MAAMC,EAAaC,GAAyB,CAC1C,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAW,aAAAC,CAAa,EAAIH,EAEjD,OACEP,EAACE,EAAA,CAAO,KAAMM,EAAa,aAAc,IAAME,EAAa,EAC1D,SAAAV,EAACG,EAAA,CAAc,UAAU,gJACvB,SAAAF,EAAC,OAAI,UAAU,kFACb,UAAAD,EAAC,OAAI,UAAU,wCACb,SAAAA,EAACI,EAAA,CACC,OAAQ,GAAGK,GAAW,WAAW,KAAO,EAAE,MAAMA,GAAW,eAAe,KAAO,EAAE,OACnF,UAAU,YACV,aAAa,6BACf,EACF,EACAT,EAAC,OAAI,UAAU,yDACb,SAAAA,EAACK,EAAA,CAAK,KAAMI,GAAW,UAAW,UAAU,yDAAyD,EACvG,EACAT,EAAC,OAAI,QAAS,IAAMU,EAAa,EAAG,UAAU,wCAC5C,SAAAV,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,KAAE,YAAU,yBACX,SAAAA,EAAC,QACC,EAAE,0gBACF,KAAK,QACP,EACF,EACF,EACF,EACAC,EAAC,OAAI,UAAU,iFACb,UAAAD,EAACK,EAAA,CAAK,KAAMI,GAAW,KAAM,UAAU,mDAAmD,EAC1FT,EAAC,OAAG,EACJA,EAACK,EAAA,CAAK,KAAMI,GAAW,SAAU,UAAU,8DAA8D,GAC3G,GACF,EACF,EACF,CAEJ",
6
6
  "names": ["jsx", "jsxs", "Dialog", "DialogContent", "Picture", "Text", "TextModal", "props", "textVisible", "extension", "onCloseModal"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.0.16-alpha.5",
3
+ "version": "1.0.16-alpha.6",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",