@ahrowe/ui 0.21.0 → 0.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/common/carousel/carousel.mjs +1 -1
- package/dist/esm/common/carousel/carousel.mjs.map +1 -1
- package/dist/esm/common/carousel/carousel.module.mjs +1 -1
- package/dist/esm/common/carousel/carousel.module.mjs.map +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.mjs +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.mjs.map +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.module.mjs +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.module.mjs.map +1 -1
- package/dist/esm/common/sectionHeader/sectionHeader.types.mjs.map +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/package/common/carousel/carousel.types.d.ts +2 -0
- package/dist/types/package/common/sectionHeader/sectionHeader.types.d.ts +1 -1
- package/docs/Carousel.md +19 -0
- package/docs/SectionHeader.md +3 -3
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import n from"../actionIcon/actionIcon.mjs";import r from"./carousel.module.mjs";import i,{useEffect as a,
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../interactableDiv/index.mjs";import n from"../actionIcon/actionIcon.mjs";import r from"./carousel.module.mjs";import i,{useEffect as a,useLayoutEffect as o,useRef as s,useState as c}from"react";import l from"classnames";import{faChevronLeft as ee,faChevronRight as te}from"@fortawesome/free-solid-svg-icons";import{Fragment as ne,jsx as u,jsxs as d}from"react/jsx-runtime";var f=10,re=.2;function p(p){let{children:ie,currentIndex:h,defaultIndex:ae=0,onChange:oe=()=>{},loop:se=!0,autoPlay:g=!1,autoPlayInterval:_=4e3,pauseOnHover:v=!0,showArrows:ce=!0,showDots:le=!0,swipeable:ue=!0,lazyRender:de=!1,adaptiveHeight:y=!1,className:fe,style:pe,classNames:b,styles:x,...S}=e(`Carousel`,p),C=i.Children.toArray(ie),w=C.length,T=se&&w>1,E=+!!T,D=T?[C[w-1],...C,C[0]]:C,O=h!==void 0,[me,he]=c(()=>m(ae,w,T)),k=m(O?h:me,w,T),[A,j]=c(k+E),[ge,M]=c(!0),N=s(k),[P,F]=c(!1),[I,L]=c(!1),[_e,R]=c(!1),[z,B]=c(0),V=s(null);a(()=>{let e=N.current;if(N.current=k,e===k)return;let t=T&&e===w-1&&k===0,n=T&&e===0&&k===w-1;M(!0),j(t?e=>e+1:n?e=>e-1:k+E)},[k]);let[H,ve]=c(()=>({min:k+E-1,max:k+E+1})),ye=Math.min(H.min,A-1),be=Math.max(H.max,A+1),U=s([]),[xe,W]=c(void 0);o(()=>{if(!y){W(void 0);return}let e=U.current[A];if(!e)return;let t=()=>W(e.offsetHeight);t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[y,A,w]);function G(e){let t=m(e,w,T);O||he(t),oe(t)}function K(){!T&&k>=w-1||G(k+1)}function q(){!T&&k<=0||G(k-1)}function Se(e){e.target===e.currentTarget&&(ve({min:A-1,max:A+1}),T&&(A===0?(M(!1),j(w)):A===D.length-1&&(M(!1),j(1))))}let J=v&&(P||I)||_e;a(()=>{if(!g||w<=1||J)return;let e=setInterval(K,_);return()=>clearInterval(e)},[g,_,J,k,w]);let Y=s(null);function Ce(e){!ue||w<=1||(Y.current={startX:e.clientX,startY:e.clientY,axisLocked:!1,active:!0},e.currentTarget.setPointerCapture?.(e.pointerId))}function we(e){let t=Y.current;if(!t||!t.active)return;let n=e.clientX-t.startX,r=e.clientY-t.startY;if(!t.axisLocked){if(Math.abs(n)<f&&Math.abs(r)<f)return;if(Math.abs(r)>Math.abs(n)){t.active=!1;return}t.axisLocked=!0,R(!0),M(!1)}B(n/(V.current?.getBoundingClientRect().width||1)*100)}function X(){let e=Y.current;if(Y.current=null,!e||!e.axisLocked){R(!1);return}let t=Math.abs(z)>=re*100;B(0),M(!0),R(!1),t&&(z<0?K():q())}function Te(e){e.key===`ArrowLeft`?(e.preventDefault(),q()):e.key===`ArrowRight`&&(e.preventDefault(),K())}let Z=!T&&k<=0,Q=!T&&k>=w-1,$=D.length>0?100/D.length:100,Ee=`translateX(calc(${-A*$}% + ${$/100*z}%))`;return d(`div`,{...S,ref:V,role:`region`,"aria-roledescription":`carousel`,className:l(r.carousel,y&&r.carouselAdaptive,b?.root,fe),style:{height:xe,...pe,...x?.root},onMouseEnter:v?()=>F(!0):void 0,onMouseLeave:v?()=>F(!1):void 0,onFocus:v?()=>L(!0):void 0,onBlur:v?()=>L(!1):void 0,onKeyDown:Te,children:[u(`div`,{className:l(r.carouselTrack,y&&r.carouselTrackAdaptive,b?.track),style:{width:`${D.length*100}%`,transform:Ee,transition:ge?void 0:`none`,...x?.track},onTransitionEnd:Se,onPointerDown:Ce,onPointerMove:we,onPointerUp:X,onPointerCancel:X,children:D.map((e,t)=>{let n=T&&(t===0||t===D.length-1),i=t-E,a=!n&&i===k,o=!de||t>=ye&&t<=be;return u(`div`,{ref:e=>{U.current[t]=e},className:l(r.carouselSlide,b?.slide),style:{width:`${100/D.length}%`,...x?.slide},inert:a?void 0:!0,children:o?e:null},`carousel-slide-${t}`)})}),ce&&w>1&&d(ne,{children:[u(n,{icon:ee,title:`Previous slide`,"aria-label":`Previous slide`,"aria-disabled":Z||void 0,onClick:()=>!Z&&q(),className:l(r.carouselPrevButton,Z&&r.carouselButtonDisabled,b?.prevButton),style:x?.prevButton}),u(n,{icon:te,title:`Next slide`,"aria-label":`Next slide`,"aria-disabled":Q||void 0,onClick:()=>!Q&&K(),className:l(r.carouselNextButton,Q&&r.carouselButtonDisabled,b?.nextButton),style:x?.nextButton})]}),le&&w>1&&u(`div`,{className:l(r.carouselDots,b?.dots),style:x?.dots,children:C.map((e,n)=>u(t,{"aria-label":`Go to slide ${n+1}`,"aria-current":n===k,onClick:()=>G(n),className:l(r.carouselDot,n===k&&r.carouselDotActive,b?.dot),style:x?.dot},`carousel-dot-${n}`))})]})}function m(e,t,n){return t===0?0:n?(e%t+t)%t:Math.max(0,Math.min(t-1,e))}export{p as default};
|
|
2
2
|
//# sourceMappingURL=carousel.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\nimport type { CarouselProps } from './carousel.types';\n\nimport styles from './carousel.module.pcss';\n\nconst AXIS_LOCK_THRESHOLD = 10;\nconst DRAG_COMMIT_RATIO = 0.2;\n\nfunction Carousel(props: CarouselProps) {\n const {\n children,\n currentIndex,\n defaultIndex = 0,\n onChange = () => {},\n loop = true,\n autoPlay = false,\n autoPlayInterval = 4000,\n pauseOnHover = true,\n showArrows = true,\n showDots = true,\n swipeable = true,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Carousel', props);\n\n const slides = React.Children.toArray(children);\n const count = slides.length;\n const canLoop = loop && count > 1;\n const offset = canLoop ? 1 : 0;\n const extendedSlides = canLoop ? [slides[count - 1], ...slides, slides[0]] : slides;\n\n const isControlled = currentIndex !== undefined;\n const [internalIndex, setInternalIndex] = useState(() => clampIndex(defaultIndex, count, canLoop));\n const realIndex = clampIndex(isControlled ? currentIndex! : internalIndex, count, canLoop);\n\n const [displayIndex, setDisplayIndex] = useState(realIndex + offset);\n const [transitionEnabled, setTransitionEnabled] = useState(true);\n const prevRealIndexRef = useRef(realIndex);\n\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n const [dragging, setDragging] = useState(false);\n const [dragOffsetPercent, setDragOffsetPercent] = useState(0);\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const prevReal = prevRealIndexRef.current;\n prevRealIndexRef.current = realIndex;\n if (prevReal === realIndex) return;\n\n const forwardWrap = canLoop && prevReal === count - 1 && realIndex === 0;\n const backwardWrap = canLoop && prevReal === 0 && realIndex === count - 1;\n\n setTransitionEnabled(true);\n if (forwardWrap) {\n setDisplayIndex((d) => d + 1);\n } else if (backwardWrap) {\n setDisplayIndex((d) => d - 1);\n } else {\n setDisplayIndex(realIndex + offset);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [realIndex]);\n\n function goToIndex(nextIndex: number) {\n const clamped = clampIndex(nextIndex, count, canLoop);\n if (!isControlled) setInternalIndex(clamped);\n onChange(clamped);\n }\n\n function goNext() {\n if (!canLoop && realIndex >= count - 1) return;\n goToIndex(realIndex + 1);\n }\n\n function goPrev() {\n if (!canLoop && realIndex <= 0) return;\n goToIndex(realIndex - 1);\n }\n\n function handleTrackTransitionEnd(event: React.TransitionEvent<HTMLDivElement>) {\n if (event.target !== event.currentTarget || !canLoop) return;\n if (displayIndex === 0) {\n setTransitionEnabled(false);\n setDisplayIndex(count);\n } else if (displayIndex === extendedSlides.length - 1) {\n setTransitionEnabled(false);\n setDisplayIndex(1);\n }\n }\n\n const isPaused = (pauseOnHover && (hovered || focused)) || dragging;\n useEffect(() => {\n if (!autoPlay || count <= 1 || isPaused) return;\n const timer = setInterval(goNext, autoPlayInterval);\n return () => clearInterval(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [autoPlay, autoPlayInterval, isPaused, realIndex, count]);\n\n const dragRef = useRef<{\n startX: number;\n startY: number;\n axisLocked: boolean;\n active: boolean;\n } | null>(null);\n\n function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {\n if (!swipeable || count <= 1) return;\n dragRef.current = { startX: event.clientX, startY: event.clientY, axisLocked: false, active: true };\n event.currentTarget.setPointerCapture?.(event.pointerId);\n }\n\n function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {\n const drag = dragRef.current;\n if (!drag || !drag.active) return;\n\n const deltaX = event.clientX - drag.startX;\n const deltaY = event.clientY - drag.startY;\n\n if (!drag.axisLocked) {\n if (Math.abs(deltaX) < AXIS_LOCK_THRESHOLD && Math.abs(deltaY) < AXIS_LOCK_THRESHOLD) return;\n if (Math.abs(deltaY) > Math.abs(deltaX)) {\n drag.active = false;\n return;\n }\n drag.axisLocked = true;\n setDragging(true);\n setTransitionEnabled(false);\n }\n\n const width = containerRef.current?.getBoundingClientRect().width || 1;\n setDragOffsetPercent((deltaX / width) * 100);\n }\n\n function handlePointerUp() {\n const drag = dragRef.current;\n dragRef.current = null;\n if (!drag || !drag.axisLocked) {\n setDragging(false);\n return;\n }\n\n const committed = Math.abs(dragOffsetPercent) >= DRAG_COMMIT_RATIO * 100;\n setDragOffsetPercent(0);\n setTransitionEnabled(true);\n setDragging(false);\n if (committed) {\n if (dragOffsetPercent < 0) goNext();\n else goPrev();\n }\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n goPrev();\n } else if (event.key === 'ArrowRight') {\n event.preventDefault();\n goNext();\n }\n }\n\n const isPrevDisabled = !canLoop && realIndex <= 0;\n const isNextDisabled = !canLoop && realIndex >= count - 1;\n\n const slideWidthPercent = extendedSlides.length > 0 ? 100 / extendedSlides.length : 100;\n const trackTransform = `translateX(calc(${-displayIndex * slideWidthPercent}% + ${dragOffsetPercent * (slideWidthPercent / 100)}%))`;\n\n return (\n <div\n {...rest}\n ref={containerRef}\n role=\"region\"\n aria-roledescription=\"carousel\"\n className={cx(styles.carousel, classNames?.root, className)}\n style={{ ...style, ...slotStyles?.root }}\n onMouseEnter={pauseOnHover ? () => setHovered(true) : undefined}\n onMouseLeave={pauseOnHover ? () => setHovered(false) : undefined}\n onFocus={pauseOnHover ? () => setFocused(true) : undefined}\n onBlur={pauseOnHover ? () => setFocused(false) : undefined}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cx(styles.carouselTrack, classNames?.track)}\n style={{\n width: `${extendedSlides.length * 100}%`,\n transform: trackTransform,\n transition: transitionEnabled ? undefined : 'none',\n ...slotStyles?.track,\n }}\n onTransitionEnd={handleTrackTransitionEnd}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={handlePointerUp}\n onPointerCancel={handlePointerUp}\n >\n {extendedSlides.map((slide, idx) => {\n const isClonePosition = canLoop && (idx === 0 || idx === extendedSlides.length - 1);\n const logicalIndex = idx - offset;\n const isActive = !isClonePosition && logicalIndex === realIndex;\n\n return (\n <div\n key={`carousel-slide-${idx}`}\n className={cx(styles.carouselSlide, classNames?.slide)}\n style={{ width: `${100 / extendedSlides.length}%`, ...slotStyles?.slide }}\n inert={isActive ? undefined : true}\n >\n {slide}\n </div>\n );\n })}\n </div>\n\n {showArrows && count > 1 && (\n <>\n <ActionIcon\n icon={faChevronLeft}\n title=\"Previous slide\"\n aria-label=\"Previous slide\"\n aria-disabled={isPrevDisabled || undefined}\n onClick={() => !isPrevDisabled && goPrev()}\n className={cx(styles.carouselPrevButton, isPrevDisabled && styles.carouselButtonDisabled, classNames?.prevButton)}\n style={slotStyles?.prevButton}\n />\n <ActionIcon\n icon={faChevronRight}\n title=\"Next slide\"\n aria-label=\"Next slide\"\n aria-disabled={isNextDisabled || undefined}\n onClick={() => !isNextDisabled && goNext()}\n className={cx(styles.carouselNextButton, isNextDisabled && styles.carouselButtonDisabled, classNames?.nextButton)}\n style={slotStyles?.nextButton}\n />\n </>\n )}\n\n {showDots && count > 1 && (\n <div className={cx(styles.carouselDots, classNames?.dots)} style={slotStyles?.dots}>\n {slides.map((_, index) => (\n <InteractableDiv\n key={`carousel-dot-${index}`}\n aria-label={`Go to slide ${index + 1}`}\n aria-current={index === realIndex}\n onClick={() => goToIndex(index)}\n className={cx(styles.carouselDot, index === realIndex && styles.carouselDotActive, classNames?.dot)}\n style={slotStyles?.dot}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction clampIndex(index: number, count: number, canLoop: boolean): number {\n if (count === 0) return 0;\n if (canLoop) return ((index % count) + count) % count;\n return Math.max(0, Math.min(count - 1, index));\n}\n\nexport default Carousel;\n"],"mappings":"icAWA,IAAM,EAAsB,GACtB,GAAoB,GAE1B,SAAS,EAAS,EAAsB,CACtC,GAAM,CACJ,YACA,eACA,gBAAe,EACf,eAAiB,CAAC,EAClB,QAAO,GACP,WAAW,GACX,mBAAmB,IACnB,eAAe,GACf,aAAa,GACb,YAAW,GACX,aAAY,GACZ,aACA,SACA,aACA,OAAQ,EACR,GAAG,IACD,EAAqB,WAAY,CAAK,EAEpC,EAAS,EAAM,SAAS,QAAQ,EAAQ,EACxC,EAAQ,EAAO,OACf,EAAU,IAAQ,EAAQ,EAC1B,EAAS,KACT,EAAiB,EAAU,CAAC,EAAO,EAAQ,GAAI,GAAG,EAAQ,EAAO,EAAE,EAAI,EAEvE,EAAe,IAAiB,IAAA,GAChC,CAAC,EAAe,GAAoB,MAAe,EAAW,GAAc,EAAO,CAAO,CAAC,EAC3F,EAAY,EAAW,EAAe,EAAgB,EAAe,EAAO,CAAO,EAEnF,CAAC,EAAc,GAAmB,EAAS,EAAY,CAAM,EAC7D,CAAC,GAAmB,GAAwB,EAAS,EAAI,EACzD,EAAmB,EAAO,CAAS,EAEnC,CAAC,EAAS,GAAc,EAAS,EAAK,EACtC,CAAC,EAAS,GAAc,EAAS,EAAK,EACtC,CAAC,EAAU,GAAe,EAAS,EAAK,EACxC,CAAC,EAAmB,GAAwB,EAAS,CAAC,EAEtD,EAAe,EAAuB,IAAI,EAEhD,MAAgB,CACd,IAAM,EAAW,EAAiB,QAElC,GADA,EAAiB,QAAU,EACvB,IAAa,EAAW,OAE5B,IAAM,EAAc,GAAW,IAAa,EAAQ,GAAK,IAAc,EACjE,EAAe,GAAW,IAAa,GAAK,IAAc,EAAQ,EAExE,EAAqB,EAAI,EAEvB,EADE,EACe,GAAM,EAAI,EAClB,EACQ,GAAM,EAAI,EAEX,EAAY,CAAM,CAGtC,EAAG,CAAC,CAAS,CAAC,EAEd,SAAS,EAAU,EAAmB,CACpC,IAAM,EAAU,EAAW,EAAW,EAAO,CAAO,EAC/C,GAAc,EAAiB,CAAO,EAC3C,EAAS,CAAO,CAClB,CAEA,SAAS,GAAS,CACZ,CAAC,GAAW,GAAa,EAAQ,GACrC,EAAU,EAAY,CAAC,CACzB,CAEA,SAAS,GAAS,CACZ,CAAC,GAAW,GAAa,GAC7B,EAAU,EAAY,CAAC,CACzB,CAEA,SAAS,GAAyB,EAA8C,CAC1E,EAAM,SAAW,EAAM,eAAiB,CAAC,IACzC,IAAiB,GACnB,EAAqB,EAAK,EAC1B,EAAgB,CAAK,GACZ,IAAiB,EAAe,OAAS,IAClD,EAAqB,EAAK,EAC1B,EAAgB,CAAC,GAErB,CAEA,IAAM,EAAY,IAAiB,GAAW,IAAa,EAC3D,MAAgB,CACd,GAAI,CAAC,GAAY,GAAS,GAAK,EAAU,OACzC,IAAM,EAAQ,YAAY,EAAQ,CAAgB,EAClD,UAAa,cAAc,CAAK,CAElC,EAAG,CAAC,EAAU,EAAkB,EAAU,EAAW,CAAK,CAAC,EAE3D,IAAM,EAAU,EAKN,IAAI,EAEd,SAAS,GAAkB,EAA2C,CAChE,CAAC,IAAa,GAAS,IAC3B,EAAQ,QAAU,CAAE,OAAQ,EAAM,QAAS,OAAQ,EAAM,QAAS,WAAY,GAAO,OAAQ,EAAK,EAClG,EAAM,cAAc,oBAAoB,EAAM,SAAS,EACzD,CAEA,SAAS,GAAkB,EAA2C,CACpE,IAAM,EAAO,EAAQ,QACrB,GAAI,CAAC,GAAQ,CAAC,EAAK,OAAQ,OAE3B,IAAM,EAAS,EAAM,QAAU,EAAK,OAC9B,EAAS,EAAM,QAAU,EAAK,OAEpC,GAAI,CAAC,EAAK,WAAY,CACpB,GAAI,KAAK,IAAI,CAAM,EAAI,GAAuB,KAAK,IAAI,CAAM,EAAI,EAAqB,OACtF,GAAI,KAAK,IAAI,CAAM,EAAI,KAAK,IAAI,CAAM,EAAG,CACvC,EAAK,OAAS,GACd,MACF,CACA,EAAK,WAAa,GAClB,EAAY,EAAI,EAChB,EAAqB,EAAK,CAC5B,CAGA,EAAsB,GADR,EAAa,SAAS,sBAAsB,EAAE,OAAS,GAC7B,GAAG,CAC7C,CAEA,SAAS,GAAkB,CACzB,IAAM,EAAO,EAAQ,QAErB,GADA,EAAQ,QAAU,KACd,CAAC,GAAQ,CAAC,EAAK,WAAY,CAC7B,EAAY,EAAK,EACjB,MACF,CAEA,IAAM,EAAY,KAAK,IAAI,CAAiB,GAAK,GAAoB,IACrE,EAAqB,CAAC,EACtB,EAAqB,EAAI,EACzB,EAAY,EAAK,EACb,IACE,EAAoB,EAAG,EAAO,EAC7B,EAAO,EAEhB,CAEA,SAAS,EAAc,EAA4C,CAC7D,EAAM,MAAQ,aAChB,EAAM,eAAe,EACrB,EAAO,GACE,EAAM,MAAQ,eACvB,EAAM,eAAe,EACrB,EAAO,EAEX,CAEA,IAAM,EAAiB,CAAC,GAAW,GAAa,EAC1C,EAAiB,CAAC,GAAW,GAAa,EAAQ,EAElD,EAAoB,EAAe,OAAS,EAAI,IAAM,EAAe,OAAS,IAC9E,GAAiB,mBAAmB,CAAC,EAAe,EAAkB,MAA2B,EAAoB,IAAzC,EAA8C,KAEhI,OACE,EAAC,MAAD,CACE,GAAI,GACJ,IAAK,EACL,KAAK,SACL,uBAAqB,WACrB,UAAW,EAAG,EAAO,SAAU,GAAY,KAAM,EAAS,EAC1D,MAAO,CAAE,GAAG,GAAO,GAAG,GAAY,IAAK,EACvC,aAAc,MAAqB,EAAW,EAAI,EAAI,IAAA,GACtD,aAAc,MAAqB,EAAW,EAAK,EAAI,IAAA,GACvD,QAAS,MAAqB,EAAW,EAAI,EAAI,IAAA,GACjD,OAAQ,MAAqB,EAAW,EAAK,EAAI,IAAA,GACjD,UAAW,WAXb,CAaE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,cAAe,GAAY,KAAK,EACrD,MAAO,CACL,MAAO,GAAG,EAAe,OAAS,IAAI,GACtC,UAAW,GACX,WAAY,GAAoB,IAAA,GAAY,OAC5C,GAAG,GAAY,KACjB,EACA,gBAAiB,GACjB,cAAe,GACf,cAAe,GACf,YAAa,EACb,gBAAiB,WAEhB,EAAe,KAAK,EAAO,IAAQ,CAClC,IAAM,EAAkB,IAAY,IAAQ,GAAK,IAAQ,EAAe,OAAS,GAC3E,EAAe,EAAM,EACrB,EAAW,CAAC,GAAmB,IAAiB,EAEtD,OACE,EAAC,MAAD,CAEE,UAAW,EAAG,EAAO,cAAe,GAAY,KAAK,EACrD,MAAO,CAAE,MAAO,GAAG,IAAM,EAAe,OAAO,GAAI,GAAG,GAAY,KAAM,EACxE,MAAO,EAAW,IAAA,GAAY,YAE7B,CACE,EANE,kBAAkB,GAMpB,CAET,CAAC,CACE,CAAA,EAEJ,GAAc,EAAQ,GACrB,EAAA,GAAA,CAAA,SAAA,CACE,EAAC,EAAD,CACE,KAAM,GACN,MAAM,iBACN,aAAW,iBACX,gBAAe,GAAkB,IAAA,GACjC,YAAe,CAAC,GAAkB,EAAO,EACzC,UAAW,EAAG,EAAO,mBAAoB,GAAkB,EAAO,uBAAwB,GAAY,UAAU,EAChH,MAAO,GAAY,UACpB,CAAA,EACD,EAAC,EAAD,CACE,KAAM,GACN,MAAM,aACN,aAAW,aACX,gBAAe,GAAkB,IAAA,GACjC,YAAe,CAAC,GAAkB,EAAO,EACzC,UAAW,EAAG,EAAO,mBAAoB,GAAkB,EAAO,uBAAwB,GAAY,UAAU,EAChH,MAAO,GAAY,UACpB,CAAA,CACD,CAAA,CAAA,EAGH,IAAY,EAAQ,GACnB,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,aAAc,GAAY,IAAI,EAAG,MAAO,GAAY,cAC3E,EAAO,KAAK,EAAG,IACd,EAAC,EAAD,CAEE,aAAY,eAAe,EAAQ,IACnC,eAAc,IAAU,EACxB,YAAe,EAAU,CAAK,EAC9B,UAAW,EAAG,EAAO,YAAa,IAAU,GAAa,EAAO,kBAAmB,GAAY,GAAG,EAClG,MAAO,GAAY,GACpB,EANM,gBAAgB,GAMtB,CACF,CACE,CAAA,CAEJ,GAET,CAEA,SAAS,EAAW,EAAe,EAAe,EAA0B,CAG1E,OAFI,IAAU,EAAU,EACpB,GAAkB,EAAQ,EAAS,GAAS,EACzC,KAAK,IAAI,EAAG,KAAK,IAAI,EAAQ,EAAG,CAAK,CAAC,CAC/C"}
|
|
1
|
+
{"version":3,"file":"carousel.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\n\nimport ActionIcon from '../actionIcon';\nimport InteractableDiv from '../interactableDiv';\nimport { useComponentDefaults } from '../configProvider';\nimport type { CarouselProps } from './carousel.types';\n\nimport styles from './carousel.module.pcss';\n\nconst AXIS_LOCK_THRESHOLD = 10;\nconst DRAG_COMMIT_RATIO = 0.2;\n\nfunction Carousel(props: CarouselProps) {\n const {\n children,\n currentIndex,\n defaultIndex = 0,\n onChange = () => {},\n loop = true,\n autoPlay = false,\n autoPlayInterval = 4000,\n pauseOnHover = true,\n showArrows = true,\n showDots = true,\n swipeable = true,\n lazyRender = false,\n adaptiveHeight = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Carousel', props);\n\n const slides = React.Children.toArray(children);\n const count = slides.length;\n const canLoop = loop && count > 1;\n const offset = canLoop ? 1 : 0;\n const extendedSlides = canLoop ? [slides[count - 1], ...slides, slides[0]] : slides;\n\n const isControlled = currentIndex !== undefined;\n const [internalIndex, setInternalIndex] = useState(() => clampIndex(defaultIndex, count, canLoop));\n const realIndex = clampIndex(isControlled ? currentIndex! : internalIndex, count, canLoop);\n\n const [displayIndex, setDisplayIndex] = useState(realIndex + offset);\n const [transitionEnabled, setTransitionEnabled] = useState(true);\n const prevRealIndexRef = useRef(realIndex);\n\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n const [dragging, setDragging] = useState(false);\n const [dragOffsetPercent, setDragOffsetPercent] = useState(0);\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const prevReal = prevRealIndexRef.current;\n prevRealIndexRef.current = realIndex;\n if (prevReal === realIndex) return;\n\n const forwardWrap = canLoop && prevReal === count - 1 && realIndex === 0;\n const backwardWrap = canLoop && prevReal === 0 && realIndex === count - 1;\n\n setTransitionEnabled(true);\n if (forwardWrap) {\n setDisplayIndex((d) => d + 1);\n } else if (backwardWrap) {\n setDisplayIndex((d) => d - 1);\n } else {\n setDisplayIndex(realIndex + offset);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [realIndex]);\n\n // The window of slides `lazyRender` keeps mounted, as of the last settled position. Slides are\n // rendered for the union of this and the current window, so the ones a multi-step jump slides\n // past stay mounted until the transform transition ends instead of blanking out mid-flight.\n const [settledMountRange, setSettledMountRange] = useState(() => ({\n min: realIndex + offset - 1,\n max: realIndex + offset + 1,\n }));\n const mountMin = Math.min(settledMountRange.min, displayIndex - 1);\n const mountMax = Math.max(settledMountRange.max, displayIndex + 1);\n\n const slideRefs = useRef<(HTMLDivElement | null)[]>([]);\n const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);\n\n useLayoutEffect(() => {\n if (!adaptiveHeight) {\n setContentHeight(undefined);\n return;\n }\n const slideElement = slideRefs.current[displayIndex];\n if (!slideElement) return;\n\n const update = () => setContentHeight(slideElement.offsetHeight);\n update();\n\n const observer = new ResizeObserver(update);\n observer.observe(slideElement);\n return () => observer.disconnect();\n }, [adaptiveHeight, displayIndex, count]);\n\n function goToIndex(nextIndex: number) {\n const clamped = clampIndex(nextIndex, count, canLoop);\n if (!isControlled) setInternalIndex(clamped);\n onChange(clamped);\n }\n\n function goNext() {\n if (!canLoop && realIndex >= count - 1) return;\n goToIndex(realIndex + 1);\n }\n\n function goPrev() {\n if (!canLoop && realIndex <= 0) return;\n goToIndex(realIndex - 1);\n }\n\n function handleTrackTransitionEnd(event: React.TransitionEvent<HTMLDivElement>) {\n if (event.target !== event.currentTarget) return;\n setSettledMountRange({ min: displayIndex - 1, max: displayIndex + 1 });\n\n if (!canLoop) return;\n if (displayIndex === 0) {\n setTransitionEnabled(false);\n setDisplayIndex(count);\n } else if (displayIndex === extendedSlides.length - 1) {\n setTransitionEnabled(false);\n setDisplayIndex(1);\n }\n }\n\n const isPaused = (pauseOnHover && (hovered || focused)) || dragging;\n useEffect(() => {\n if (!autoPlay || count <= 1 || isPaused) return;\n const timer = setInterval(goNext, autoPlayInterval);\n return () => clearInterval(timer);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [autoPlay, autoPlayInterval, isPaused, realIndex, count]);\n\n const dragRef = useRef<{\n startX: number;\n startY: number;\n axisLocked: boolean;\n active: boolean;\n } | null>(null);\n\n function handlePointerDown(event: React.PointerEvent<HTMLDivElement>) {\n if (!swipeable || count <= 1) return;\n dragRef.current = { startX: event.clientX, startY: event.clientY, axisLocked: false, active: true };\n event.currentTarget.setPointerCapture?.(event.pointerId);\n }\n\n function handlePointerMove(event: React.PointerEvent<HTMLDivElement>) {\n const drag = dragRef.current;\n if (!drag || !drag.active) return;\n\n const deltaX = event.clientX - drag.startX;\n const deltaY = event.clientY - drag.startY;\n\n if (!drag.axisLocked) {\n if (Math.abs(deltaX) < AXIS_LOCK_THRESHOLD && Math.abs(deltaY) < AXIS_LOCK_THRESHOLD) return;\n if (Math.abs(deltaY) > Math.abs(deltaX)) {\n drag.active = false;\n return;\n }\n drag.axisLocked = true;\n setDragging(true);\n setTransitionEnabled(false);\n }\n\n const width = containerRef.current?.getBoundingClientRect().width || 1;\n setDragOffsetPercent((deltaX / width) * 100);\n }\n\n function handlePointerUp() {\n const drag = dragRef.current;\n dragRef.current = null;\n if (!drag || !drag.axisLocked) {\n setDragging(false);\n return;\n }\n\n const committed = Math.abs(dragOffsetPercent) >= DRAG_COMMIT_RATIO * 100;\n setDragOffsetPercent(0);\n setTransitionEnabled(true);\n setDragging(false);\n if (committed) {\n if (dragOffsetPercent < 0) goNext();\n else goPrev();\n }\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n if (event.key === 'ArrowLeft') {\n event.preventDefault();\n goPrev();\n } else if (event.key === 'ArrowRight') {\n event.preventDefault();\n goNext();\n }\n }\n\n const isPrevDisabled = !canLoop && realIndex <= 0;\n const isNextDisabled = !canLoop && realIndex >= count - 1;\n\n const slideWidthPercent = extendedSlides.length > 0 ? 100 / extendedSlides.length : 100;\n const trackTransform = `translateX(calc(${-displayIndex * slideWidthPercent}% + ${dragOffsetPercent * (slideWidthPercent / 100)}%))`;\n\n return (\n <div\n {...rest}\n ref={containerRef}\n role=\"region\"\n aria-roledescription=\"carousel\"\n className={cx(styles.carousel, adaptiveHeight && styles.carouselAdaptive, classNames?.root, className)}\n style={{ height: contentHeight, ...style, ...slotStyles?.root }}\n onMouseEnter={pauseOnHover ? () => setHovered(true) : undefined}\n onMouseLeave={pauseOnHover ? () => setHovered(false) : undefined}\n onFocus={pauseOnHover ? () => setFocused(true) : undefined}\n onBlur={pauseOnHover ? () => setFocused(false) : undefined}\n onKeyDown={handleKeyDown}\n >\n <div\n className={cx(styles.carouselTrack, adaptiveHeight && styles.carouselTrackAdaptive, classNames?.track)}\n style={{\n width: `${extendedSlides.length * 100}%`,\n transform: trackTransform,\n transition: transitionEnabled ? undefined : 'none',\n ...slotStyles?.track,\n }}\n onTransitionEnd={handleTrackTransitionEnd}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={handlePointerUp}\n onPointerCancel={handlePointerUp}\n >\n {extendedSlides.map((slide, idx) => {\n const isClonePosition = canLoop && (idx === 0 || idx === extendedSlides.length - 1);\n const logicalIndex = idx - offset;\n const isActive = !isClonePosition && logicalIndex === realIndex;\n const isRendered = !lazyRender || (idx >= mountMin && idx <= mountMax);\n\n return (\n <div\n key={`carousel-slide-${idx}`}\n ref={(el) => {\n slideRefs.current[idx] = el;\n }}\n className={cx(styles.carouselSlide, classNames?.slide)}\n style={{ width: `${100 / extendedSlides.length}%`, ...slotStyles?.slide }}\n inert={isActive ? undefined : true}\n >\n {isRendered ? slide : null}\n </div>\n );\n })}\n </div>\n\n {showArrows && count > 1 && (\n <>\n <ActionIcon\n icon={faChevronLeft}\n title=\"Previous slide\"\n aria-label=\"Previous slide\"\n aria-disabled={isPrevDisabled || undefined}\n onClick={() => !isPrevDisabled && goPrev()}\n className={cx(styles.carouselPrevButton, isPrevDisabled && styles.carouselButtonDisabled, classNames?.prevButton)}\n style={slotStyles?.prevButton}\n />\n <ActionIcon\n icon={faChevronRight}\n title=\"Next slide\"\n aria-label=\"Next slide\"\n aria-disabled={isNextDisabled || undefined}\n onClick={() => !isNextDisabled && goNext()}\n className={cx(styles.carouselNextButton, isNextDisabled && styles.carouselButtonDisabled, classNames?.nextButton)}\n style={slotStyles?.nextButton}\n />\n </>\n )}\n\n {showDots && count > 1 && (\n <div className={cx(styles.carouselDots, classNames?.dots)} style={slotStyles?.dots}>\n {slides.map((_, index) => (\n <InteractableDiv\n key={`carousel-dot-${index}`}\n aria-label={`Go to slide ${index + 1}`}\n aria-current={index === realIndex}\n onClick={() => goToIndex(index)}\n className={cx(styles.carouselDot, index === realIndex && styles.carouselDotActive, classNames?.dot)}\n style={slotStyles?.dot}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction clampIndex(index: number, count: number, canLoop: boolean): number {\n if (count === 0) return 0;\n if (canLoop) return ((index % count) + count) % count;\n return Math.max(0, Math.min(count - 1, index));\n}\n\nexport default Carousel;\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={carousel:`carousel_-oOBA`,"carousel-track":`carousel-track_tmtQz`,carouselTrack:`carousel-track_tmtQz`,"carousel-slide":`carousel-slide_Qpgjn`,carouselSlide:`carousel-slide_Qpgjn`,"carousel-prevButton":`carousel-prevButton_P9QsH`,carouselPrevButton:`carousel-prevButton_P9QsH`,"carousel-nextButton":`carousel-nextButton_FgVo7`,carouselNextButton:`carousel-nextButton_FgVo7`,"carousel-buttonDisabled":`carousel-buttonDisabled_rGyW-`,carouselButtonDisabled:`carousel-buttonDisabled_rGyW-`,"carousel-dots":`carousel-dots_xyfSx`,carouselDots:`carousel-dots_xyfSx`,"carousel-dot":`carousel-dot_kPnww`,carouselDot:`carousel-dot_kPnww`,"carousel-dot-active":`carousel-dot-active_f9EJ1`,carouselDotActive:`carousel-dot-active_f9EJ1`};export{e as default};
|
|
1
|
+
var e={carousel:`carousel_-oOBA`,"carousel-adaptive":`carousel-adaptive_i4I4U`,carouselAdaptive:`carousel-adaptive_i4I4U`,"carousel-track":`carousel-track_tmtQz`,carouselTrack:`carousel-track_tmtQz`,"carousel-trackAdaptive":`carousel-trackAdaptive_Qzc0j`,carouselTrackAdaptive:`carousel-trackAdaptive_Qzc0j`,"carousel-slide":`carousel-slide_Qpgjn`,carouselSlide:`carousel-slide_Qpgjn`,"carousel-prevButton":`carousel-prevButton_P9QsH`,carouselPrevButton:`carousel-prevButton_P9QsH`,"carousel-nextButton":`carousel-nextButton_FgVo7`,carouselNextButton:`carousel-nextButton_FgVo7`,"carousel-buttonDisabled":`carousel-buttonDisabled_rGyW-`,carouselButtonDisabled:`carousel-buttonDisabled_rGyW-`,"carousel-dots":`carousel-dots_xyfSx`,carouselDots:`carousel-dots_xyfSx`,"carousel-dot":`carousel-dot_kPnww`,carouselDot:`carousel-dot_kPnww`,"carousel-dot-active":`carousel-dot-active_f9EJ1`,carouselDotActive:`carousel-dot-active_f9EJ1`};export{e as default};
|
|
2
2
|
//# sourceMappingURL=carousel.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"carousel.module.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.module.pcss"],"sourcesContent":[".carousel {\n position: relative;\n overflow: hidden;\n border-radius: var(--default-border-radius);\n\n &-track {\n display: flex;\n align-items: stretch;\n transition: transform 0.4s ease;\n touch-action: pan-y;\n user-select: none;\n }\n\n &-slide {\n flex-shrink: 0;\n box-sizing: border-box;\n }\n\n &-prevButton,\n &-nextButton {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: var(--background-accent);\n color: var(--text-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: opacity 0.15s, background 0.15s;\n\n &:hover {\n background: var(--background-accent-light);\n }\n }\n\n &-buttonDisabled {\n opacity: 0.35;\n pointer-events: none;\n }\n\n &-prevButton {\n left: 12px;\n }\n\n &-nextButton {\n right: 12px;\n }\n\n &-dots {\n position: absolute;\n bottom: 12px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 1;\n display: flex;\n gap: 8px;\n }\n\n &-dot {\n width: 8px;\n height: 8px;\n border-radius: 2000px;\n background: var(--background-accent);\n opacity: 0.6;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: opacity 0.15s, background 0.15s, width 0.15s;\n\n &:hover {\n opacity: 0.85;\n }\n\n &-active {\n background: var(--primary-color);\n opacity: 1;\n width: 20px;\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"carousel.module.mjs","names":[],"sources":["../../../../package/common/carousel/carousel.module.pcss"],"sourcesContent":[".carousel {\n position: relative;\n overflow: hidden;\n border-radius: var(--default-border-radius);\n\n &-adaptive {\n transition: height 0.4s ease;\n }\n\n &-track {\n display: flex;\n align-items: stretch;\n transition: transform 0.4s ease;\n touch-action: pan-y;\n user-select: none;\n }\n\n &-trackAdaptive {\n align-items: flex-start;\n }\n\n &-slide {\n flex-shrink: 0;\n box-sizing: border-box;\n }\n\n &-prevButton,\n &-nextButton {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: var(--background-accent);\n color: var(--text-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: opacity 0.15s, background 0.15s;\n\n &:hover {\n background: var(--background-accent-light);\n }\n }\n\n &-buttonDisabled {\n opacity: 0.35;\n pointer-events: none;\n }\n\n &-prevButton {\n left: 12px;\n }\n\n &-nextButton {\n right: 12px;\n }\n\n &-dots {\n position: absolute;\n bottom: 12px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 1;\n display: flex;\n gap: 8px;\n }\n\n &-dot {\n width: 8px;\n height: 8px;\n border-radius: 2000px;\n background: var(--background-accent);\n opacity: 0.6;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n transition: opacity 0.15s, background 0.15s, width 0.15s;\n\n &:hover {\n opacity: 0.85;\n }\n\n &-active {\n background: var(--primary-color);\n opacity: 1;\n width: 20px;\n }\n }\n}\n"],"mappings":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"../actionIcon/actionIcon.mjs";import r from"../divider/divider.mjs";import{SectionHeaderSize as i}from"./sectionHeader.types.mjs";import a from"./sectionHeader.module.mjs";import"react";import o from"classnames";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";var u={[i.Small]:a.sectionHeaderSizeSmall,[i.Medium]:a.sectionHeaderSizeMedium,[i.Large]:a.sectionHeaderSizeLarge};function d(d){let{title:f,subtitle:p,icon:m,thumbnail:h,left:g,center:_,actions:v,level:y=2,size:b=i.Medium,divider:x=!1,className:S,style:C,classNames:w,styles:T,...E}=e(`SectionHeader`,d),D=typeof h==`string`&&h.startsWith(`http`)?h:void 0,O=h!=null&&h!==``,k=O||m!=null,A=`h${y}`;return l(s,{children:[l(`div`,{...E,className:o(a.sectionHeader,u[b],S,w?.root),style:{...C,...T?.root},children:[k&&c(`div`,{className:o(a.sectionHeaderLeading,w?.leading),style:{...D?{backgroundImage:`url(${D})`}:{},...T?.leading},children:O?!D&&h:m?t(m):null}),l(`div`,{className:o(a.sectionHeaderTitles,w?.titles),style:T?.titles,children:[c(A,{className:o(a.sectionHeaderTitle,w?.title),style:T?.title,children:f}),p!=null&&p!==``&&c(`div`,{className:o(a.sectionHeaderSubtitle,w?.subtitle),style:T?.subtitle,children:p})]}),l(`div`,{className:o(a.sectionHeaderTrailing,w?.trailing),style:T?.trailing,children:[c(`div`,{className:o(a.sectionHeaderLeft,w?.left),style:T?.left,children:g}),c(`div`,{className:o(a.sectionHeaderCenter,w?.center),style:T?.center,children:_}),c(`div`,{className:o(a.sectionHeaderActions,w?.actions),style:T?.actions,children:Array.isArray(v)?v.map((e,t)=>c(n,{title:e.title,onClick:e.onClick?t=>{t.stopPropagation(),e.onClick?.(t)}:void 0,icon:e.icon},t)):v})]})]}),x&&c(r,{className:a.sectionHeaderDivider})]})}export{d as default};
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{renderIcon as t}from"../utils/renderIcon.mjs";import n from"../actionIcon/actionIcon.mjs";import r from"../divider/divider.mjs";import{SectionHeaderSize as i}from"./sectionHeader.types.mjs";import a from"./sectionHeader.module.mjs";import"react";import o from"classnames";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";var u={[i.Small]:a.sectionHeaderSizeSmall,[i.Medium]:a.sectionHeaderSizeMedium,[i.Large]:a.sectionHeaderSizeLarge};function d(d){let{title:f,subtitle:p,icon:m,thumbnail:h,left:g,center:_,actions:v,level:y=2,size:b=i.Medium,divider:x=!1,className:S,style:C,classNames:w,styles:T,...E}=e(`SectionHeader`,d),D=typeof h==`string`&&h.startsWith(`http`)?h:void 0,O=h!=null&&h!==``,k=O||m!=null,A=`h${y}`;return l(s,{children:[l(`div`,{...E,className:o(a.sectionHeader,u[b],S,w?.root),style:{...C,...T?.root},children:[l(`div`,{className:o(a.sectionHeaderIdentity,w?.identity),style:T?.identity,children:[k&&c(`div`,{className:o(a.sectionHeaderLeading,w?.leading),style:{...D?{backgroundImage:`url(${D})`}:{},...T?.leading},children:O?!D&&h:m?t(m):null}),l(`div`,{className:o(a.sectionHeaderTitles,w?.titles),style:T?.titles,children:[c(A,{className:o(a.sectionHeaderTitle,w?.title),style:T?.title,title:typeof f==`string`?f:void 0,children:f}),p!=null&&p!==``&&c(`div`,{className:o(a.sectionHeaderSubtitle,w?.subtitle),style:T?.subtitle,children:p})]})]}),l(`div`,{className:o(a.sectionHeaderTrailing,w?.trailing),style:T?.trailing,children:[c(`div`,{className:o(a.sectionHeaderLeft,w?.left),style:T?.left,children:g}),c(`div`,{className:o(a.sectionHeaderCenter,w?.center),style:T?.center,children:_}),c(`div`,{className:o(a.sectionHeaderActions,w?.actions),style:T?.actions,children:Array.isArray(v)?v.map((e,t)=>c(n,{title:e.title,onClick:e.onClick?t=>{t.stopPropagation(),e.onClick?.(t)}:void 0,icon:e.icon},t)):v})]})]}),x&&c(r,{className:a.sectionHeaderDivider})]})}export{d as default};
|
|
2
2
|
//# sourceMappingURL=sectionHeader.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sectionHeader.mjs","names":[],"sources":["../../../../package/common/sectionHeader/sectionHeader.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport { SectionHeaderSize } from './sectionHeader.types';\nimport type { SectionHeaderProps, SectionHeaderAction } from './sectionHeader.types';\nimport styles from './sectionHeader.module.pcss';\nimport ActionIcon from '../actionIcon';\nimport Divider from '../divider';\nimport { useComponentDefaults } from '../configProvider';\nimport { renderIcon } from '../utils/renderIcon';\n\nconst CLASS_BY_SIZE: Record<SectionHeaderSize, string> = {\n [SectionHeaderSize.Small]: styles.sectionHeaderSizeSmall,\n [SectionHeaderSize.Medium]: styles.sectionHeaderSizeMedium,\n [SectionHeaderSize.Large]: styles.sectionHeaderSizeLarge,\n};\n\nfunction SectionHeader(props: SectionHeaderProps): ReactElement {\n const {\n title,\n subtitle,\n icon,\n thumbnail,\n left,\n center,\n actions,\n level = 2,\n size = SectionHeaderSize.Medium,\n divider = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('SectionHeader', props);\n\n const thumbnailUrl =\n typeof thumbnail === 'string' && thumbnail.startsWith('http') ? thumbnail : undefined;\n const hasThumbnail = thumbnail != null && thumbnail !== '';\n const hasLeading = hasThumbnail || icon != null;\n\n const Heading = `h${level}` as keyof React.JSX.IntrinsicElements;\n\n return (\n <>\n <div\n {...rest}\n className={cx(\n styles.sectionHeader,\n CLASS_BY_SIZE[size],\n className,\n classNames?.root,\n )}\n style={{ ...style, ...slotStyles?.root }}\n >\n {hasLeading && (\n
|
|
1
|
+
{"version":3,"file":"sectionHeader.mjs","names":[],"sources":["../../../../package/common/sectionHeader/sectionHeader.tsx"],"sourcesContent":["import React from 'react';\nimport type { ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport { SectionHeaderSize } from './sectionHeader.types';\nimport type { SectionHeaderProps, SectionHeaderAction } from './sectionHeader.types';\nimport styles from './sectionHeader.module.pcss';\nimport ActionIcon from '../actionIcon';\nimport Divider from '../divider';\nimport { useComponentDefaults } from '../configProvider';\nimport { renderIcon } from '../utils/renderIcon';\n\nconst CLASS_BY_SIZE: Record<SectionHeaderSize, string> = {\n [SectionHeaderSize.Small]: styles.sectionHeaderSizeSmall,\n [SectionHeaderSize.Medium]: styles.sectionHeaderSizeMedium,\n [SectionHeaderSize.Large]: styles.sectionHeaderSizeLarge,\n};\n\nfunction SectionHeader(props: SectionHeaderProps): ReactElement {\n const {\n title,\n subtitle,\n icon,\n thumbnail,\n left,\n center,\n actions,\n level = 2,\n size = SectionHeaderSize.Medium,\n divider = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('SectionHeader', props);\n\n const thumbnailUrl =\n typeof thumbnail === 'string' && thumbnail.startsWith('http') ? thumbnail : undefined;\n const hasThumbnail = thumbnail != null && thumbnail !== '';\n const hasLeading = hasThumbnail || icon != null;\n\n const Heading = `h${level}` as keyof React.JSX.IntrinsicElements;\n\n return (\n <>\n <div\n {...rest}\n className={cx(\n styles.sectionHeader,\n CLASS_BY_SIZE[size],\n className,\n classNames?.root,\n )}\n style={{ ...style, ...slotStyles?.root }}\n >\n <div\n className={cx(styles.sectionHeaderIdentity, classNames?.identity)}\n style={slotStyles?.identity}\n >\n {hasLeading && (\n <div\n className={cx(styles.sectionHeaderLeading, classNames?.leading)}\n style={{\n ...(thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : {}),\n ...slotStyles?.leading,\n }}\n >\n {hasThumbnail\n ? !thumbnailUrl && thumbnail\n : icon ? renderIcon(icon) : null}\n </div>\n )}\n\n <div\n className={cx(styles.sectionHeaderTitles, classNames?.titles)}\n style={slotStyles?.titles}\n >\n <Heading\n className={cx(styles.sectionHeaderTitle, classNames?.title)}\n style={slotStyles?.title}\n // The title renders on a single line and truncates with an ellipsis,\n // so expose the full text on hover when it's plain text.\n title={typeof title === 'string' ? title : undefined}\n >\n {title}\n </Heading>\n {subtitle != null && subtitle !== '' && (\n <div\n className={cx(styles.sectionHeaderSubtitle, classNames?.subtitle)}\n style={slotStyles?.subtitle}\n >\n {subtitle}\n </div>\n )}\n </div>\n </div>\n\n <div\n className={cx(styles.sectionHeaderTrailing, classNames?.trailing)}\n style={slotStyles?.trailing}\n >\n <div className={cx(styles.sectionHeaderLeft, classNames?.left)} style={slotStyles?.left}>\n {left}\n </div>\n\n <div\n className={cx(styles.sectionHeaderCenter, classNames?.center)}\n style={slotStyles?.center}\n >\n {center}\n </div>\n\n <div\n className={cx(styles.sectionHeaderActions, classNames?.actions)}\n style={slotStyles?.actions}\n >\n {Array.isArray(actions)\n ? (actions as SectionHeaderAction[]).map((action, index) => (\n <ActionIcon\n key={index}\n title={action.title}\n onClick={\n action.onClick\n ? (e: React.MouseEvent<HTMLDivElement>) => {\n e.stopPropagation();\n action.onClick?.(e);\n }\n : undefined\n }\n icon={action.icon}\n />\n ))\n : (actions as React.ReactNode)}\n </div>\n </div>\n </div>\n {divider && <Divider className={styles.sectionHeaderDivider} />}\n </>\n );\n}\n\nexport default SectionHeader;\n"],"mappings":"yaAYA,IAAM,EAAmD,EACtD,EAAkB,OAAQ,EAAO,wBACjC,EAAkB,QAAS,EAAO,yBAClC,EAAkB,OAAQ,EAAO,sBACpC,EAEA,SAAS,EAAc,EAAyC,CAC9D,GAAM,CACJ,QACA,WACA,OACA,YACA,OACA,SACA,UACA,QAAQ,EACR,OAAO,EAAkB,OACzB,UAAU,GACV,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,gBAAiB,CAAK,EAEzC,EACJ,OAAO,GAAc,UAAY,EAAU,WAAW,MAAM,EAAI,EAAY,IAAA,GACxE,EAAe,GAAa,MAAQ,IAAc,GAClD,EAAa,GAAgB,GAAQ,KAErC,EAAU,IAAI,IAEpB,OACE,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,cACP,EAAc,GACd,EACA,GAAY,IACd,EACA,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,WARzC,CAUE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,sBAAuB,GAAY,QAAQ,EAChE,MAAO,GAAY,kBAFrB,CAIG,GACC,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,qBAAsB,GAAY,OAAO,EAC9D,MAAO,CACL,GAAI,EAAe,CAAE,gBAAiB,OAAO,EAAa,EAAG,EAAI,CAAC,EAClE,GAAG,GAAY,OACjB,WAEC,EACG,CAAC,GAAgB,EACjB,EAAO,EAAW,CAAI,EAAI,IAC3B,CAAA,EAGP,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,oBAAqB,GAAY,MAAM,EAC5D,MAAO,GAAY,gBAFrB,CAIE,EAAC,EAAD,CACE,UAAW,EAAG,EAAO,mBAAoB,GAAY,KAAK,EAC1D,MAAO,GAAY,MAGnB,MAAO,OAAO,GAAU,SAAW,EAAQ,IAAA,YAE1C,CACM,CAAA,EACR,GAAY,MAAQ,IAAa,IAChC,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,sBAAuB,GAAY,QAAQ,EAChE,MAAO,GAAY,kBAElB,CACE,CAAA,CAEJ,GACF,IAEL,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,sBAAuB,GAAY,QAAQ,EAChE,MAAO,GAAY,kBAFrB,CAIE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,kBAAmB,GAAY,IAAI,EAAG,MAAO,GAAY,cAChF,CACE,CAAA,EAEL,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,oBAAqB,GAAY,MAAM,EAC5D,MAAO,GAAY,gBAElB,CACE,CAAA,EAEL,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,qBAAsB,GAAY,OAAO,EAC9D,MAAO,GAAY,iBAElB,MAAM,QAAQ,CAAO,EACjB,EAAkC,KAAK,EAAQ,IAC9C,EAAC,EAAD,CAEE,MAAO,EAAO,MACd,QACE,EAAO,QACF,GAAwC,CACvC,EAAE,gBAAgB,EAClB,EAAO,UAAU,CAAC,CACpB,EACA,IAAA,GAEN,KAAM,EAAO,IACd,EAXM,CAWN,CACF,EACA,CACF,CAAA,CACF,GACF,IACJ,GAAW,EAAC,EAAD,CAAS,UAAW,EAAO,oBAAuB,CAAA,CAC9D,CAAA,CAAA,CAEN"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e={sectionHeader:`sectionHeader_X3bNj`,"sectionHeader-leading":`sectionHeader-leading_d6opV`,sectionHeaderLeading:`sectionHeader-leading_d6opV`,"sectionHeader-titles":`sectionHeader-titles_iN9dT`,sectionHeaderTitles:`sectionHeader-titles_iN9dT`,"sectionHeader-title":`sectionHeader-title_wH--S`,sectionHeaderTitle:`sectionHeader-title_wH--S`,"sectionHeader-subtitle":`sectionHeader-subtitle_WRK3Y`,sectionHeaderSubtitle:`sectionHeader-subtitle_WRK3Y`,"sectionHeader-trailing":`sectionHeader-trailing_ewWDV`,sectionHeaderTrailing:`sectionHeader-trailing_ewWDV`,"sectionHeader-left":`sectionHeader-left_ZUuWs`,sectionHeaderLeft:`sectionHeader-left_ZUuWs`,"sectionHeader-center":`sectionHeader-center_MzSev`,sectionHeaderCenter:`sectionHeader-center_MzSev`,"sectionHeader-actions":`sectionHeader-actions_E40ZS`,sectionHeaderActions:`sectionHeader-actions_E40ZS`,"sectionHeader-divider":`sectionHeader-divider_Ovpev`,sectionHeaderDivider:`sectionHeader-divider_Ovpev`,"sectionHeader-size-small":`sectionHeader-size-small_6OVWE`,sectionHeaderSizeSmall:`sectionHeader-size-small_6OVWE`,"sectionHeader-size-medium":`sectionHeader-size-medium_BVSe6`,sectionHeaderSizeMedium:`sectionHeader-size-medium_BVSe6`,"sectionHeader-size-large":`sectionHeader-size-large_bOZDP`,sectionHeaderSizeLarge:`sectionHeader-size-large_bOZDP`};export{e as default};
|
|
1
|
+
var e={sectionHeader:`sectionHeader_X3bNj`,"sectionHeader-leading":`sectionHeader-leading_d6opV`,sectionHeaderLeading:`sectionHeader-leading_d6opV`,"sectionHeader-identity":`sectionHeader-identity_Qmlpt`,sectionHeaderIdentity:`sectionHeader-identity_Qmlpt`,"sectionHeader-titles":`sectionHeader-titles_iN9dT`,sectionHeaderTitles:`sectionHeader-titles_iN9dT`,"sectionHeader-title":`sectionHeader-title_wH--S`,sectionHeaderTitle:`sectionHeader-title_wH--S`,"sectionHeader-subtitle":`sectionHeader-subtitle_WRK3Y`,sectionHeaderSubtitle:`sectionHeader-subtitle_WRK3Y`,"sectionHeader-trailing":`sectionHeader-trailing_ewWDV`,sectionHeaderTrailing:`sectionHeader-trailing_ewWDV`,"sectionHeader-left":`sectionHeader-left_ZUuWs`,sectionHeaderLeft:`sectionHeader-left_ZUuWs`,"sectionHeader-center":`sectionHeader-center_MzSev`,sectionHeaderCenter:`sectionHeader-center_MzSev`,"sectionHeader-actions":`sectionHeader-actions_E40ZS`,sectionHeaderActions:`sectionHeader-actions_E40ZS`,"sectionHeader-divider":`sectionHeader-divider_Ovpev`,sectionHeaderDivider:`sectionHeader-divider_Ovpev`,"sectionHeader-size-small":`sectionHeader-size-small_6OVWE`,sectionHeaderSizeSmall:`sectionHeader-size-small_6OVWE`,"sectionHeader-size-medium":`sectionHeader-size-medium_BVSe6`,sectionHeaderSizeMedium:`sectionHeader-size-medium_BVSe6`,"sectionHeader-size-large":`sectionHeader-size-large_bOZDP`,sectionHeaderSizeLarge:`sectionHeader-size-large_bOZDP`};export{e as default};
|
|
2
2
|
//# sourceMappingURL=sectionHeader.module.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sectionHeader.module.mjs","names":[],"sources":["../../../../package/common/sectionHeader/sectionHeader.module.pcss"],"sourcesContent":[".sectionHeader {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-m, 16px);\n align-items: center;\n color: var(--text-color);\n\n &-leading {\n display: flex;\n justify-content: center;\n align-items: center;\n width: var(--section-header-leading-size);\n height: var(--section-header-leading-size);\n color: var(--primary-color);\n background: var(--background-accent);\n border-radius: var(--default-border-radius);\n overflow: hidden;\n background-size: cover;\n background-position: center;\n flex-shrink: 0;\n font-size: calc(var(--section-header-leading-size) * 0.5);\n }\n\n &-titles {\n display: flex;\n flex-flow: column;\n flex: 0 1 auto;\n gap: 2px;\n min-width: 0;\n }\n\n &-title {\n margin: 0;\n font-size: var(--section-header-title-size);\n font-weight: var(--header-font-weight, 600);\n line-height: 1.2;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &-subtitle {\n color: var(--text-dark);\n font-weight: 300;\n font-size: var(--section-header-subtitle-size);\n
|
|
1
|
+
{"version":3,"file":"sectionHeader.module.mjs","names":[],"sources":["../../../../package/common/sectionHeader/sectionHeader.module.pcss"],"sourcesContent":[".sectionHeader {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-m, 16px);\n align-items: center;\n color: var(--text-color);\n\n &-leading {\n display: flex;\n justify-content: center;\n align-items: center;\n width: var(--section-header-leading-size);\n height: var(--section-header-leading-size);\n color: var(--primary-color);\n background: var(--background-accent);\n border-radius: var(--default-border-radius);\n overflow: hidden;\n background-size: cover;\n background-position: center;\n flex-shrink: 0;\n font-size: calc(var(--section-header-leading-size) * 0.5);\n }\n\n /* Leading icon/thumbnail + titles form one unbreakable flex item. Without the\n wrapper they're siblings on the wrapping root, and since flex breaks lines by\n hypothetical size (flex-basis: auto = content width) rather than the shrunk\n size, a long title drops to its own row and orphans the icon above it. */\n &-identity {\n display: flex;\n align-items: center;\n gap: var(--spacing-m, 16px);\n flex: 0 1 auto;\n min-width: 0;\n }\n\n &-titles {\n display: flex;\n flex-flow: column;\n flex: 0 1 auto;\n gap: 2px;\n min-width: 0;\n }\n\n &-title {\n margin: 0;\n font-size: var(--section-header-title-size);\n font-weight: var(--header-font-weight, 600);\n line-height: 1.2;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &-subtitle {\n color: var(--text-dark);\n font-weight: 300;\n font-size: var(--section-header-subtitle-size);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n &-trailing {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--spacing-m, 16px);\n flex: 1 1 auto;\n }\n\n &-left {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n &-center {\n display: flex;\n align-items: center;\n min-width: 0;\n }\n\n &-actions {\n display: flex;\n gap: var(--spacing-s, 8px);\n flex-wrap: wrap;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n }\n\n &-divider {\n margin-top: var(--spacing-s, 8px);\n }\n\n &-size {\n &-small {\n --section-header-title-size: var(--header-small-font-size, 16px);\n --section-header-subtitle-size: 12px;\n --section-header-leading-size: calc(var(--section-header-title-size) * 2.2);\n }\n\n &-medium {\n --section-header-title-size: var(--header-medium-font-size, 18px);\n --section-header-subtitle-size: 14px;\n --section-header-leading-size: calc(var(--section-header-title-size) * 2.2);\n }\n\n &-large {\n --section-header-title-size: var(--header-font-size, 24px);\n --section-header-subtitle-size: 15px;\n --section-header-leading-size: calc(var(--section-header-title-size) * 2.2);\n }\n }\n}\n\n@media (max-width: 640px) {\n .sectionHeader-center:not(:empty) {\n flex: 1 1 100%;\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sectionHeader.types.mjs","names":[],"sources":["../../../../package/common/sectionHeader/sectionHeader.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { IconContent } from '../types/icon.types';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\nimport type { IconAction } from '../types/actions.types';\n\nexport enum SectionHeaderSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\n\nexport type SectionHeaderAction = IconAction;\n\nexport type SectionHeaderSlots =\n | 'root'\n | 'leading'\n | 'titles'\n | 'title'\n | 'subtitle'\n | 'trailing'\n | 'left'\n | 'center'\n | 'actions';\n\nexport interface SectionHeaderProps extends HtmlProps {\n title?: ReactNode;\n subtitle?: ReactNode;\n icon?: IconContent;\n thumbnail?: string | ReactNode;\n left?: ReactNode;\n center?: ReactNode;\n actions?: SectionHeaderAction[] | ReactNode;\n level?: 1 | 2 | 3 | 4 | 5 | 6;\n size?: SectionHeaderSize;\n divider?: boolean;\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames<SectionHeaderSlots>;\n styles?: SlotStyles<SectionHeaderSlots>;\n}\n"],"mappings":"AAKA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,MAAA,QACA,EAAA,OAAA,SACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
|
|
1
|
+
{"version":3,"file":"sectionHeader.types.mjs","names":[],"sources":["../../../../package/common/sectionHeader/sectionHeader.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { IconContent } from '../types/icon.types';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\nimport type { IconAction } from '../types/actions.types';\n\nexport enum SectionHeaderSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\n\nexport type SectionHeaderAction = IconAction;\n\nexport type SectionHeaderSlots =\n | 'root'\n | 'identity'\n | 'leading'\n | 'titles'\n | 'title'\n | 'subtitle'\n | 'trailing'\n | 'left'\n | 'center'\n | 'actions';\n\nexport interface SectionHeaderProps extends HtmlProps {\n title?: ReactNode;\n subtitle?: ReactNode;\n icon?: IconContent;\n thumbnail?: string | ReactNode;\n left?: ReactNode;\n center?: ReactNode;\n actions?: SectionHeaderAction[] | ReactNode;\n level?: 1 | 2 | 3 | 4 | 5 | 6;\n size?: SectionHeaderSize;\n divider?: boolean;\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames<SectionHeaderSlots>;\n styles?: SlotStyles<SectionHeaderSlots>;\n}\n"],"mappings":"AAKA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,MAAA,QACA,EAAA,OAAA,SACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
|