@ahrowe/ui 0.4.1 → 0.4.3
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/accordion/accordion.mjs +1 -1
- package/dist/esm/common/accordion/accordion.mjs.map +1 -1
- package/dist/esm/common/actionButtons/actionButtons.mjs +1 -1
- package/dist/esm/common/actionButtons/actionButtons.mjs.map +1 -1
- package/dist/esm/common/badge/badge.mjs +1 -1
- package/dist/esm/common/badge/badge.mjs.map +1 -1
- package/dist/esm/common/button/button.mjs +1 -1
- package/dist/esm/common/button/button.mjs.map +1 -1
- package/dist/esm/common/card/Card.mjs +1 -1
- package/dist/esm/common/card/Card.mjs.map +1 -1
- package/dist/esm/common/checkbox/checkbox.mjs +1 -1
- package/dist/esm/common/checkbox/checkbox.mjs.map +1 -1
- package/dist/esm/common/chip/chip.mjs +1 -1
- package/dist/esm/common/chip/chip.mjs.map +1 -1
- package/dist/esm/common/configProvider/configProvider.mjs +2 -0
- package/dist/esm/common/configProvider/configProvider.mjs.map +1 -0
- package/dist/esm/common/configProvider/useComponentDefaults.mjs +2 -0
- package/dist/esm/common/configProvider/useComponentDefaults.mjs.map +1 -0
- package/dist/esm/common/datePicker/datePicker.mjs +1 -1
- package/dist/esm/common/datePicker/datePicker.mjs.map +1 -1
- package/dist/esm/common/dropdown/dropdown.mjs +1 -1
- package/dist/esm/common/dropdown/dropdown.mjs.map +1 -1
- package/dist/esm/common/dropdown/dropdown.module.mjs.map +1 -1
- package/dist/esm/common/floatingMenu/floatingMenu.module.mjs.map +1 -1
- package/dist/esm/common/input/input.mjs +1 -1
- package/dist/esm/common/input/input.mjs.map +1 -1
- package/dist/esm/common/input/input.module.mjs.map +1 -1
- package/dist/esm/common/input/input.types.mjs.map +1 -1
- package/dist/esm/common/inputDropdown/inputDropdown.mjs +1 -1
- package/dist/esm/common/inputDropdown/inputDropdown.mjs.map +1 -1
- package/dist/esm/common/numberInput/numberInput.mjs +1 -1
- package/dist/esm/common/numberInput/numberInput.mjs.map +1 -1
- package/dist/esm/common/skeleton/skeleton.mjs +1 -1
- package/dist/esm/common/skeleton/skeleton.mjs.map +1 -1
- package/dist/esm/common/switch/switch.mjs +1 -1
- package/dist/esm/common/switch/switch.mjs.map +1 -1
- package/dist/esm/common/textarea/textarea.mjs +1 -1
- package/dist/esm/common/textarea/textarea.mjs.map +1 -1
- package/dist/esm/common/themeProvider/theme.module.mjs +1 -1
- package/dist/esm/common/themeProvider/theme.module.mjs.map +1 -1
- package/dist/esm/common/themeProvider/themeProvider.mjs +1 -1
- package/dist/esm/common/themeProvider/themeProvider.mjs.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/index.cjs +4 -4
- package/dist/index.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/package/common/accordion/accordion.d.ts +1 -1
- package/dist/types/package/common/actionButtons/actionButtons.d.ts +1 -1
- package/dist/types/package/common/badge/badge.d.ts +1 -1
- package/dist/types/package/common/button/button.d.ts +1 -1
- package/dist/types/package/common/card/Card.d.ts +1 -1
- package/dist/types/package/common/checkbox/checkbox.d.ts +1 -1
- package/dist/types/package/common/chip/chip.d.ts +1 -1
- package/dist/types/package/common/configProvider/configProvider.d.ts +5 -0
- package/dist/types/package/common/configProvider/configProvider.types.d.ts +52 -0
- package/dist/types/package/common/configProvider/index.d.ts +3 -0
- package/dist/types/package/common/configProvider/useComponentDefaults.d.ts +17 -0
- package/dist/types/package/common/datePicker/datePicker.d.ts +2 -3
- package/dist/types/package/common/dropdown/dropdown.d.ts +1 -1
- package/dist/types/package/common/dropdown/dropdown.types.d.ts +1 -0
- package/dist/types/package/common/input/input.d.ts +1 -1
- package/dist/types/package/common/input/input.types.d.ts +1 -0
- package/dist/types/package/common/inputDropdown/inputDropdown.d.ts +1 -1
- package/dist/types/package/common/numberInput/numberInput.d.ts +2 -2
- package/dist/types/package/common/skeleton/skeleton.d.ts +1 -1
- package/dist/types/package/common/switch/switch.d.ts +1 -1
- package/dist/types/package/common/themeProvider/theme.types.d.ts +2 -0
- package/dist/types/package/index.d.ts +2 -0
- package/docs/CLAUDE.md +1 -0
- package/docs/ConfigProvider.md +81 -0
- package/docs/Dropdown.md +1 -0
- package/docs/Input.md +1 -0
- package/docs/ThemeProvider.md +4 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{AccordionStyleType as e}from"./accordion.types.mjs";import t from"./accordion.module.mjs";import n from"./accordion.primary.module.mjs";import r from"./accordion.plain.module.mjs";import{useEffect as
|
|
1
|
+
import{AccordionStyleType as e}from"./accordion.types.mjs";import t from"./accordion.module.mjs";import n from"./accordion.primary.module.mjs";import r from"./accordion.plain.module.mjs";import{useComponentDefaults as i}from"../configProvider/useComponentDefaults.mjs";import{useEffect as a,useRef as o,useState as s}from"react";import c from"classnames";import{FontAwesomeIcon as l}from"@fortawesome/react-fontawesome";import{faChevronDown as u}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";var p={[e.Default]:t,[e.Primary]:n,[e.Plain]:r};function m(t){let{id:n=``,title:r=``,children:m=null,expanded:h=null,onHeaderClicked:g=()=>{},styleType:_=e.Default,startOpen:v=!1,hideHeader:y=!1,className:b,style:x,classNames:S,styles:C,...w}=i(`Accordion`,t),T=p[_],E=o(null),[D,O]=s(h??v),[k,A]=s(null);a(()=>{h!==null&&O(h)},[h]),a(()=>{let e=E.current;if(!e)return;let t=new ResizeObserver(()=>A(e.offsetHeight));return t.observe(e),()=>t.unobserve(e)},[]);function j(){let e=!D;g(n,e),h===null&&O(e)}let M={height:`${D?32:24}px`},N={height:D?k??`auto`:`0px`};return f(`div`,{...w,id:n||void 0,className:c(T.accordion,D&&T.accordionActive,b,S?.root),style:{...x,...C?.root},children:[!y&&f(`div`,{className:c(T.accordionHeader,D&&T.accordionHeaderActive,S?.header),style:{...M,...C?.header},onClick:j,role:`button`,tabIndex:0,onKeyDown:({key:e})=>{e===`Enter`&&j()},children:[d(`div`,{className:c(T.accordionTitle,S?.title),style:C?.title,children:r}),d(l,{icon:u,className:c(T.accordionIcon,D&&T.accordionIconActive,S?.icon),style:C?.icon})]}),d(`div`,{className:c(T.accordionBody,D&&T.accordionBodyActive,S?.body),style:{...N,...C?.body},children:d(`div`,{className:c(T.accordionBodyInner,S?.bodyInner),style:C?.bodyInner,ref:E,children:m})})]})}export{m as default};
|
|
2
2
|
//# sourceMappingURL=accordion.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as arrowIcon } from '@fortawesome/free-solid-svg-icons';\n\nimport { AccordionStyleType, type AccordionProps } from './accordion.types';\n\nimport defaultStyles from './accordion.module.pcss';\nimport primaryStyles from './accordion.primary.module.pcss';\nimport plainStyles from './accordion.plain.module.pcss';\n\nconst STYLES_BY_TYPE: Record<AccordionStyleType, typeof defaultStyles> = {\n [AccordionStyleType.Default]: defaultStyles,\n [AccordionStyleType.Primary]: primaryStyles,\n [AccordionStyleType.Plain]: plainStyles,\n};\n\nfunction Accordion({\n id = '',\n title = '',\n children = null,\n expanded = null,\n onHeaderClicked = () => {},\n styleType = AccordionStyleType.Default,\n startOpen = false,\n hideHeader = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}
|
|
1
|
+
{"version":3,"file":"accordion.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as arrowIcon } from '@fortawesome/free-solid-svg-icons';\n\nimport { AccordionStyleType, type AccordionProps } from './accordion.types';\n\nimport defaultStyles from './accordion.module.pcss';\nimport primaryStyles from './accordion.primary.module.pcss';\nimport plainStyles from './accordion.plain.module.pcss';\nimport { useComponentDefaults } from '../configProvider';\n\nconst STYLES_BY_TYPE: Record<AccordionStyleType, typeof defaultStyles> = {\n [AccordionStyleType.Default]: defaultStyles,\n [AccordionStyleType.Primary]: primaryStyles,\n [AccordionStyleType.Plain]: plainStyles,\n};\n\nfunction Accordion(props: AccordionProps): ReactElement {\n const {\n id = '',\n title = '',\n children = null,\n expanded = null,\n onHeaderClicked = () => {},\n styleType = AccordionStyleType.Default,\n startOpen = false,\n hideHeader = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Accordion', props);\n const s = STYLES_BY_TYPE[styleType];\n const bodyRef = useRef<HTMLDivElement>(null);\n\n const [isExpanded, setIsExpanded] = useState(expanded ?? startOpen);\n const [bodyHeight, setBodyHeight] = useState<number | null>(null);\n\n // Sync controlled expanded prop\n useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n if (expanded !== null) setIsExpanded(expanded);\n }, [expanded]);\n\n // Measure body height via ResizeObserver\n useEffect(() => {\n const el = bodyRef.current;\n if (!el) return;\n const observer = new ResizeObserver(() => setBodyHeight(el.offsetHeight));\n observer.observe(el);\n return () => observer.unobserve(el);\n }, []);\n\n function toggleExpanded() {\n const next = !isExpanded;\n onHeaderClicked(id, next);\n if (expanded === null) setIsExpanded(next);\n }\n\n const headerHeight = 24;\n const headerStyle = { height: `${isExpanded ? headerHeight + headerHeight / 3 : headerHeight}px` };\n const bodyStyle = { height: isExpanded ? (bodyHeight ?? 'auto') : '0px' };\n\n return (\n <div {...rest} id={id || undefined} className={cx(s.accordion, isExpanded && s.accordionActive, className, classNames?.root)} style={{ ...style, ...slotStyles?.root }}>\n {!hideHeader && (\n <div\n className={cx(s.accordionHeader, isExpanded && s.accordionHeaderActive, classNames?.header)}\n style={{ ...headerStyle, ...slotStyles?.header }}\n onClick={toggleExpanded}\n role=\"button\"\n tabIndex={0}\n onKeyDown={({ key }) => { if (key === 'Enter') toggleExpanded(); }}\n >\n <div className={cx(s.accordionTitle, classNames?.title)} style={slotStyles?.title}>{title}</div>\n <FontAwesomeIcon\n icon={arrowIcon}\n className={cx(s.accordionIcon, isExpanded && s.accordionIconActive, classNames?.icon)}\n style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n />\n </div>\n )}\n <div\n className={cx(s.accordionBody, isExpanded && s.accordionBodyActive, classNames?.body)}\n style={{ ...bodyStyle, ...slotStyles?.body }}\n >\n <div className={cx(s.accordionBodyInner, classNames?.bodyInner)} style={slotStyles?.bodyInner} ref={bodyRef}>\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nexport default Accordion;\n"],"mappings":"whBAYA,IAAM,EAAmE,EACtE,EAAmB,SAAU,GAC7B,EAAmB,SAAU,GAC7B,EAAmB,OAAQ,CAC9B,EAEA,SAAS,EAAU,EAAqC,CACtD,GAAM,CACN,KAAK,GACL,QAAQ,GACR,WAAW,KACX,WAAW,KACX,sBAAwB,CAAC,EACzB,YAAY,EAAmB,QAC/B,YAAY,GACZ,aAAa,GACb,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACC,EAAqB,YAAa,CAAK,EACrC,EAAI,EAAe,GACnB,EAAU,EAAuB,IAAI,EAErC,CAAC,EAAY,GAAiB,EAAS,GAAY,CAAS,EAC5D,CAAC,EAAY,GAAiB,EAAwB,IAAI,EAGhE,MAAgB,CAEV,IAAa,MAAM,EAAc,CAAQ,CAC/C,EAAG,CAAC,CAAQ,CAAC,EAGb,MAAgB,CACd,IAAM,EAAK,EAAQ,QACnB,GAAI,CAAC,EAAI,OACT,IAAM,EAAW,IAAI,mBAAqB,EAAc,EAAG,YAAY,CAAC,EAExE,OADA,EAAS,QAAQ,CAAE,MACN,EAAS,UAAU,CAAE,CACpC,EAAG,CAAC,CAAC,EAEL,SAAS,GAAiB,CACxB,IAAM,EAAO,CAAC,EACd,EAAgB,EAAI,CAAI,EACpB,IAAa,MAAM,EAAc,CAAI,CAC3C,CAGA,IAAM,EAAc,CAAE,OAAQ,GAAG,EAAa,GAAkC,GAAa,GAAI,EAC3F,EAAY,CAAE,OAAQ,EAAc,GAAc,OAAU,KAAM,EAExE,OACE,EAAC,MAAD,CAAK,GAAI,EAAM,GAAI,GAAM,IAAA,GAAW,UAAW,EAAG,EAAE,UAAW,GAAc,EAAE,gBAAiB,EAAW,GAAY,IAAI,EAAG,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,WAArK,CACG,CAAC,GACA,EAAC,MAAD,CACE,UAAW,EAAG,EAAE,gBAAiB,GAAc,EAAE,sBAAuB,GAAY,MAAM,EAC1F,MAAO,CAAE,GAAG,EAAa,GAAG,GAAY,MAAO,EAC/C,QAAS,EACT,KAAK,SACL,SAAU,EACV,WAAY,CAAE,SAAU,CAAM,IAAQ,SAAS,EAAe,CAAG,WANnE,CAQE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAE,eAAgB,GAAY,KAAK,EAAG,MAAO,GAAY,eAAQ,CAAW,CAAA,EAC/F,EAAC,EAAD,CACE,KAAM,EACN,UAAW,EAAG,EAAE,cAAe,GAAc,EAAE,oBAAqB,GAAY,IAAI,EACpF,MAAO,GAAY,IACpB,CAAA,CACE,IAEP,EAAC,MAAD,CACE,UAAW,EAAG,EAAE,cAAe,GAAc,EAAE,oBAAqB,GAAY,IAAI,EACpF,MAAO,CAAE,GAAG,EAAW,GAAG,GAAY,IAAK,WAE3C,EAAC,MAAD,CAAK,UAAW,EAAG,EAAE,mBAAoB,GAAY,SAAS,EAAG,MAAO,GAAY,UAAW,IAAK,EACjG,UACE,CAAA,CACF,CAAA,CACF,GAET"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"./actionButtons.module.mjs";import{ButtonStyleType as
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"./actionButtons.module.mjs";import{ButtonStyleType as n,ButtonType as r}from"../button/button.types.mjs";import i from"../button/button.mjs";import a from"classnames";import{jsx as o,jsxs as s}from"react/jsx-runtime";function c(c){let{onSubmit:l=()=>null,onClose:u=()=>null,submitLabel:d=`Save`,cancelLabel:f=`Cancel`,submitButtonStyle:p=n.Primary,isSubmitButtonLoading:m=!1,isSubmitButtonDisabled:h=!1,submitButtonIcon:g=void 0,cancelButtonStyle:_=n.Default,isCancelButtonLoading:v=!1,isCancelButtonDisabled:y=!1,cancelButtonIcon:b=void 0,hidePrimaryButton:x=!1,hideSecondaryButton:S=!1,noMargin:C=!1,className:w,style:T,classNames:E,styles:D,...O}=e(`ActionButtons`,c);return s(`div`,{...O,className:a(t.actionButtons,!C&&t.actionButtonsMargin,w,E?.root),style:{...T,...D?.root},children:[!x&&o(i,{isLoading:m,disabled:h,styleType:p,type:r.Submit,onClick:l,className:E?.submitButton,style:D?.submitButton,icon:g,children:d}),!S&&o(i,{isLoading:v,disabled:y,onClick:u,styleType:_,className:E?.cancelButton,style:D?.cancelButton,icon:b,children:f})]})}export{c as default};
|
|
2
2
|
//# sourceMappingURL=actionButtons.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"actionButtons.mjs","names":[],"sources":["../../../../package/common/actionButtons/actionButtons.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport styles from './actionButtons.module.pcss';\nimport Button, { ButtonStyleType, ButtonType } from '../button';\nimport { ActionButtonsProps } from './actionButtons.types';\n\nexport default function ActionButtons({\n onSubmit = () => null,\n onClose = () => null,\n submitLabel = 'Save',\n cancelLabel = 'Cancel',\n submitButtonStyle = ButtonStyleType.Primary,\n isSubmitButtonLoading = false,\n isSubmitButtonDisabled = false,\n submitButtonIcon = undefined,\n cancelButtonStyle = ButtonStyleType.Default,\n isCancelButtonLoading = false,\n isCancelButtonDisabled = false,\n cancelButtonIcon = undefined,\n hidePrimaryButton = false,\n hideSecondaryButton = false,\n noMargin = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}
|
|
1
|
+
{"version":3,"file":"actionButtons.mjs","names":[],"sources":["../../../../package/common/actionButtons/actionButtons.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport styles from './actionButtons.module.pcss';\nimport Button, { ButtonStyleType, ButtonType } from '../button';\nimport { useComponentDefaults } from '../configProvider';\nimport { ActionButtonsProps } from './actionButtons.types';\n\nexport default function ActionButtons(props: ActionButtonsProps) {\n const {\n onSubmit = () => null,\n onClose = () => null,\n submitLabel = 'Save',\n cancelLabel = 'Cancel',\n submitButtonStyle = ButtonStyleType.Primary,\n isSubmitButtonLoading = false,\n isSubmitButtonDisabled = false,\n submitButtonIcon = undefined,\n cancelButtonStyle = ButtonStyleType.Default,\n isCancelButtonLoading = false,\n isCancelButtonDisabled = false,\n cancelButtonIcon = undefined,\n hidePrimaryButton = false,\n hideSecondaryButton = false,\n noMargin = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('ActionButtons', props);\n return (\n <div\n {...rest}\n className={cx(styles.actionButtons, !noMargin && styles.actionButtonsMargin, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n >\n {!hidePrimaryButton && (\n <Button\n isLoading={isSubmitButtonLoading}\n disabled={isSubmitButtonDisabled}\n styleType={submitButtonStyle}\n type={ButtonType.Submit}\n onClick={onSubmit}\n className={classNames?.submitButton}\n style={slotStyles?.submitButton}\n icon={submitButtonIcon}\n >\n {submitLabel}\n </Button>\n )}\n {!hideSecondaryButton && (\n <Button\n isLoading={isCancelButtonLoading}\n disabled={isCancelButtonDisabled}\n onClick={onClose}\n styleType={cancelButtonStyle}\n className={classNames?.cancelButton}\n style={slotStyles?.cancelButton}\n icon={cancelButtonIcon}\n >\n {cancelLabel}\n </Button>\n )}\n </div>\n );\n}"],"mappings":"yTAOA,SAAwB,EAAc,EAA2B,CAC/D,GAAM,CACN,eAAiB,KACjB,cAAgB,KAChB,cAAc,OACd,cAAc,SACd,oBAAoB,EAAgB,QACpC,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,IAAA,GACnB,oBAAoB,EAAgB,QACpC,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,IAAA,GACnB,oBAAoB,GACpB,sBAAsB,GACtB,WAAW,GACX,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACC,EAAqB,gBAAiB,CAAK,EAC/C,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,cAAe,CAAC,GAAY,EAAO,oBAAqB,EAAW,GAAY,IAAI,EACxG,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,IAAK,WAHzC,CAKG,CAAC,GACF,EAAC,EAAD,CACE,UAAW,EACX,SAAU,EACV,UAAW,EACX,KAAM,EAAW,OACjB,QAAS,EACT,UAAW,GAAY,aACvB,MAAO,GAAY,aACnB,KAAM,WAEL,CACK,CAAA,EAEP,CAAC,GACA,EAAC,EAAD,CACE,UAAW,EACX,SAAU,EACV,QAAS,EACT,UAAW,EACX,UAAW,GAAY,aACvB,MAAO,GAAY,aACnB,KAAM,WAEL,CACK,CAAA,CAEP,GAET"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{BadgePosition as
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import{BadgePosition as t,BadgeStyleType as n}from"./badge.types.mjs";import r from"./badge.module.mjs";import i from"classnames";import{jsx as a,jsxs as o}from"react/jsx-runtime";var s={[n.Default]:r.badgeStyleDefault,[n.Primary]:r.badgeStylePrimary,[n.Success]:r.badgeStyleSuccess,[n.Info]:r.badgeStyleInfo,[n.Warn]:r.badgeStyleWarn,[n.Error]:r.badgeStyleError},c={[t.TopRight]:r.badgePositionTopRight,[t.TopLeft]:r.badgePositionTopLeft,[t.BottomRight]:r.badgePositionBottomRight,[t.BottomLeft]:r.badgePositionBottomLeft};function l(l){let{count:u,max:d=99,content:f,dot:p=!1,showZero:m=!1,styleType:h=n.Primary,position:g=t.TopRight,children:_=null,className:v,style:y,classNames:b,styles:x,...S}=e(`Badge`,l),C=typeof u==`number`,w=f!=null,T=(p||w||C)&&!(!p&&!w&&C&&u===0&&!m),E=w?f:C?u>d?`${d}+`:u:null,D=_!=null;return o(`span`,{...S,className:i(r.wrapper,v),style:y,children:[_,T&&a(`span`,{className:i(r.badge,s[h],p&&r.badgeDot,D&&r.badgeOverlay,D&&c[g],b?.badge),style:x?.badge,children:!p&&E})]})}export{l as default};
|
|
2
2
|
//# sourceMappingURL=badge.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.mjs","names":[],"sources":["../../../../package/common/badge/badge.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport { BadgeStyleType, BadgePosition } from './badge.types';\nimport type { BadgeProps } from './badge.types';\nimport styles from './badge.module.pcss';\n\nconst CLASS_BY_STYLE: Record<BadgeStyleType, string> = {\n [BadgeStyleType.Default]: styles.badgeStyleDefault,\n [BadgeStyleType.Primary]: styles.badgeStylePrimary,\n [BadgeStyleType.Success]: styles.badgeStyleSuccess,\n [BadgeStyleType.Info]: styles.badgeStyleInfo,\n [BadgeStyleType.Warn]: styles.badgeStyleWarn,\n [BadgeStyleType.Error]: styles.badgeStyleError,\n};\n\nconst CLASS_BY_POSITION: Record<BadgePosition, string> = {\n [BadgePosition.TopRight]: styles.badgePositionTopRight,\n [BadgePosition.TopLeft]: styles.badgePositionTopLeft,\n [BadgePosition.BottomRight]: styles.badgePositionBottomRight,\n [BadgePosition.BottomLeft]: styles.badgePositionBottomLeft,\n};\n\nfunction Badge({\n count,\n max = 99,\n content,\n dot = false,\n showZero = false,\n styleType = BadgeStyleType.Primary,\n position = BadgePosition.TopRight,\n children = null,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}
|
|
1
|
+
{"version":3,"file":"badge.mjs","names":[],"sources":["../../../../package/common/badge/badge.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport { BadgeStyleType, BadgePosition } from './badge.types';\nimport type { BadgeProps } from './badge.types';\nimport styles from './badge.module.pcss';\nimport { useComponentDefaults } from '../configProvider';\n\nconst CLASS_BY_STYLE: Record<BadgeStyleType, string> = {\n [BadgeStyleType.Default]: styles.badgeStyleDefault,\n [BadgeStyleType.Primary]: styles.badgeStylePrimary,\n [BadgeStyleType.Success]: styles.badgeStyleSuccess,\n [BadgeStyleType.Info]: styles.badgeStyleInfo,\n [BadgeStyleType.Warn]: styles.badgeStyleWarn,\n [BadgeStyleType.Error]: styles.badgeStyleError,\n};\n\nconst CLASS_BY_POSITION: Record<BadgePosition, string> = {\n [BadgePosition.TopRight]: styles.badgePositionTopRight,\n [BadgePosition.TopLeft]: styles.badgePositionTopLeft,\n [BadgePosition.BottomRight]: styles.badgePositionBottomRight,\n [BadgePosition.BottomLeft]: styles.badgePositionBottomLeft,\n};\n\nfunction Badge(props: BadgeProps): ReactElement {\n const {\n count,\n max = 99,\n content,\n dot = false,\n showZero = false,\n styleType = BadgeStyleType.Primary,\n position = BadgePosition.TopRight,\n children = null,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Badge', props);\n const hasCount = typeof count === 'number';\n const hasContent = content != null;\n const isHiddenByZero = !dot && !hasContent && hasCount && count === 0 && !showZero;\n const showBadge = (dot || hasContent || hasCount) && !isHiddenByZero;\n\n const displayValue = hasContent ? content : hasCount ? (count > max ? `${max}+` : count) : null;\n const isOverlay = children != null;\n\n return (\n <span\n {...rest}\n className={cx(styles.wrapper, className)}\n style={style}\n >\n {children}\n {showBadge && (\n <span\n className={cx(\n styles.badge,\n CLASS_BY_STYLE[styleType],\n dot && styles.badgeDot,\n isOverlay && styles.badgeOverlay,\n isOverlay && CLASS_BY_POSITION[position],\n classNames?.badge\n )}\n style={slotStyles?.badge}\n >\n {!dot && displayValue}\n </span>\n )}\n </span>\n );\n}\n\nexport default Badge;\n"],"mappings":"sQAQA,IAAM,EAAiD,EACpD,EAAe,SAAU,EAAO,mBAChC,EAAe,SAAU,EAAO,mBAChC,EAAe,SAAU,EAAO,mBAChC,EAAe,MAAO,EAAO,gBAC7B,EAAe,MAAO,EAAO,gBAC7B,EAAe,OAAQ,EAAO,eACjC,EAEM,EAAmD,EACtD,EAAc,UAAW,EAAO,uBAChC,EAAc,SAAU,EAAO,sBAC/B,EAAc,aAAc,EAAO,0BACnC,EAAc,YAAa,EAAO,uBACrC,EAEA,SAAS,EAAM,EAAiC,CAC9C,GAAM,CACN,QACA,MAAM,GACN,UACA,MAAM,GACN,WAAW,GACX,YAAY,EAAe,QAC3B,WAAW,EAAc,SACzB,WAAW,KACX,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACC,EAAqB,QAAS,CAAK,EACjC,EAAW,OAAO,GAAU,SAC5B,EAAa,GAAW,KAExB,GAAa,GAAO,GAAc,IAAa,EAD9B,CAAC,GAAO,CAAC,GAAc,GAAY,IAAU,GAAK,CAAC,GAGpE,EAAe,EAAa,EAAU,EAAY,EAAQ,EAAM,GAAG,EAAI,GAAK,EAAS,KACrF,EAAY,GAAY,KAE9B,OACE,EAAC,OAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,QAAS,CAAS,EAChC,iBAHT,CAKG,EACA,GACC,EAAC,OAAD,CACE,UAAW,EACT,EAAO,MACP,EAAe,GACf,GAAO,EAAO,SACd,GAAa,EAAO,aACpB,GAAa,EAAkB,GAC/B,GAAY,KACd,EACA,MAAO,GAAY,eAElB,CAAC,GAAO,CACL,CAAA,CAEJ,GAEV"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"./button.module.mjs";import
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"./button.module.mjs";import n from"../loading/spinnerLoading/index.mjs";import{ButtonSize as r,ButtonStyleType as i,ButtonType as a}from"./button.types.mjs";import o from"../ripple/ripple.mjs";import s from"classnames";import{FontAwesomeIcon as c}from"@fortawesome/react-fontawesome";import{jsx as l,jsxs as u}from"react/jsx-runtime";var d={default:t.buttonStyleDefault,primary:t.buttonStylePrimary,delete:t.buttonStyleDelete},f={default:t.buttonSizeDefault,small:t.buttonSizeSmall,medium:t.buttonSizeMedium,large:t.buttonSizeLarge};function p(p){let{className:m,style:h,type:g=a.Button,styleType:_=i.Default,size:v=r.Default,onClick:y=()=>{},children:b,icon:x,isLoading:S=!1,disabled:C=!1,title:w=void 0,ref:T,classNames:E,styles:D,...O}=e(`Button`,p);return l(`button`,{...O,className:s(t.button,d[_],f[v],{[t.buttonNotAllowed]:S||C},m),style:h,type:g,onClick:y,disabled:C||S,title:w,ref:T,children:l(o,{disabled:S||C,children:l(`div`,{className:s(t.buttonBackground,E?.background),style:D?.background,children:u(`div`,{className:s(t.buttonContent,E?.content),style:D?.content,children:[S?l(`div`,{className:s(t.buttonLoadingContainer,E?.loadingContainer),style:D?.loadingContainer,children:l(n,{className:t.buttonLoadingIcon})}):null,u(`div`,{className:s(E?.label,{[t.buttonLoading]:S,[t.buttonWithIcon]:!!x}),style:D?.label,children:[x?l(c,{icon:x}):null,b]})]})})})})}p.StyleType=i,p.Size=r,p.Type=a;export{p as default};
|
|
2
2
|
//# sourceMappingURL=button.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.mjs","names":[],"sources":["../../../../package/common/button/button.tsx"],"sourcesContent":["import cx from 'classnames';\nimport type { ReactElement } from 'react';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport styles from './button.module.pcss';\nimport SpinnerLoading from 'components/common/loading/spinnerLoading';\nimport { ButtonStyleType, ButtonSize, ButtonType } from './button.types';\nimport type { ButtonProps } from './button.types';\nimport Ripple from '../ripple';\n\nconst CLASS_BY_STYLE: Record<ButtonStyleType, string> = {\n default: styles.buttonStyleDefault,\n primary: styles.buttonStylePrimary,\n delete: styles.buttonStyleDelete,\n};\n\nconst CLASS_BY_SIZE: Record<ButtonSize, string> = {\n default: styles.buttonSizeDefault,\n small: styles.buttonSizeSmall,\n medium: styles.buttonSizeMedium,\n large: styles.buttonSizeLarge,\n};\n\nfunction Button({\n className,\n style,\n type = ButtonType.Button,\n styleType = ButtonStyleType.Default,\n size = ButtonSize.Default,\n onClick = (): void => {},\n children,\n icon,\n isLoading = false,\n disabled = false,\n title = undefined,\n ref,\n classNames,\n styles: slotStyles,\n ...rest\n}
|
|
1
|
+
{"version":3,"file":"button.mjs","names":[],"sources":["../../../../package/common/button/button.tsx"],"sourcesContent":["import cx from 'classnames';\nimport type { ReactElement } from 'react';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport styles from './button.module.pcss';\nimport SpinnerLoading from 'components/common/loading/spinnerLoading';\nimport { ButtonStyleType, ButtonSize, ButtonType } from './button.types';\nimport type { ButtonProps } from './button.types';\nimport Ripple from '../ripple';\nimport { useComponentDefaults } from '../configProvider';\n\nconst CLASS_BY_STYLE: Record<ButtonStyleType, string> = {\n default: styles.buttonStyleDefault,\n primary: styles.buttonStylePrimary,\n delete: styles.buttonStyleDelete,\n};\n\nconst CLASS_BY_SIZE: Record<ButtonSize, string> = {\n default: styles.buttonSizeDefault,\n small: styles.buttonSizeSmall,\n medium: styles.buttonSizeMedium,\n large: styles.buttonSizeLarge,\n};\n\nfunction Button(props: ButtonProps): ReactElement {\n const {\n className,\n style,\n type = ButtonType.Button,\n styleType = ButtonStyleType.Default,\n size = ButtonSize.Default,\n onClick = (): void => {},\n children,\n icon,\n isLoading = false,\n disabled = false,\n title = undefined,\n ref,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Button', props);\n return (\n <button\n {...rest}\n className={cx(\n styles.button,\n CLASS_BY_STYLE[styleType],\n CLASS_BY_SIZE[size],\n {\n [styles.buttonNotAllowed]: isLoading || disabled,\n },\n className\n )}\n style={style}\n type={type}\n onClick={onClick}\n disabled={disabled || isLoading}\n title={title}\n ref={ref}\n >\n <Ripple disabled={isLoading || disabled}>\n <div className={cx(styles.buttonBackground, classNames?.background)} style={slotStyles?.background}>\n <div className={cx(styles.buttonContent, classNames?.content)} style={slotStyles?.content}>\n {isLoading ? (\n <div className={cx(styles.buttonLoadingContainer, classNames?.loadingContainer)} style={slotStyles?.loadingContainer}>\n <SpinnerLoading className={styles.buttonLoadingIcon} />\n </div>\n ) : null}\n <div\n className={cx(classNames?.label, {\n [styles.buttonLoading]: isLoading,\n [styles.buttonWithIcon]: !!icon,\n })}\n style={slotStyles?.label}\n >\n {icon ? <FontAwesomeIcon icon={icon} /> : null}\n {children}\n </div>\n </div>\n </div>\n </Ripple>\n </button>\n );\n}\n\nButton.StyleType = ButtonStyleType;\nButton.Size = ButtonSize;\nButton.Type = ButtonType;\n\nexport default Button;\n"],"mappings":"8aAWA,IAAM,EAAkD,CACtD,QAAS,EAAO,mBAChB,QAAS,EAAO,mBAChB,OAAQ,EAAO,iBACjB,EAEM,EAA4C,CAChD,QAAS,EAAO,kBAChB,MAAO,EAAO,gBACd,OAAQ,EAAO,iBACf,MAAO,EAAO,eAChB,EAEA,SAAS,EAAO,EAAkC,CAChD,GAAM,CACN,YACA,QACA,OAAO,EAAW,OAClB,YAAY,EAAgB,QAC5B,OAAO,EAAW,QAClB,cAAsB,CAAC,EACvB,WACA,OACA,YAAY,GACZ,WAAW,GACX,QAAQ,IAAA,GACR,MACA,aACA,OAAQ,EACR,GAAG,GACC,EAAqB,SAAU,CAAK,EACxC,OACE,EAAC,SAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,OACP,EAAe,GACf,EAAc,GACd,EACG,EAAO,kBAAmB,GAAa,CAC1C,EACA,CACF,EACO,QACD,OACG,UACT,SAAU,GAAY,EACf,QACF,eAEL,EAAC,EAAD,CAAQ,SAAU,GAAa,WAC7B,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,iBAAkB,GAAY,UAAU,EAAG,MAAO,GAAY,oBACtF,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,cAAe,GAAY,OAAO,EAAG,MAAO,GAAY,iBAAlF,CACG,EACC,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,uBAAwB,GAAY,gBAAgB,EAAG,MAAO,GAAY,0BAClG,EAAC,EAAD,CAAgB,UAAW,EAAO,iBAAoB,CAAA,CACnD,CAAA,EACH,KACJ,EAAC,MAAD,CACE,UAAW,EAAG,GAAY,MAAO,EAC9B,EAAO,eAAgB,GACvB,EAAO,gBAAiB,CAAC,CAAC,CAC7B,CAAC,EACD,MAAO,GAAY,eALrB,CAOG,EAAO,EAAC,EAAD,CAAuB,MAAO,CAAA,EAAI,KACzC,CACE,GACF,GACF,CAAA,CACC,CAAA,CACF,CAAA,CAEZ,CAEA,EAAO,UAAY,EACnB,EAAO,KAAO,EACd,EAAO,KAAO"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"../ripple/ripple.mjs";import
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../ripple/ripple.mjs";import n from"../interactableDiv/index.mjs";import{CardStyleType as r}from"./card.types.mjs";import i from"./card.module.mjs";import a from"classnames";import{jsx as o}from"react/jsx-runtime";var s={elevated:i.cardStyleElevated,outlined:i.cardStyleOutlined,filled:i.cardStyleFilled};function c(c){let{className:l=void 0,children:u=null,styleType:d=r.Elevated,onClick:f=void 0,tabIndex:p=null,hoverEffect:m=void 0,style:h=void 0,autoGap:g=!0,clip:_=!1,...v}=e(`Card`,c),y=!!f;return o(n,{...v,className:a(i.card,s[d],_&&i.cardClip,y&&i.cardInteractable,(y&&m!==!1||m)&&i.cardHover,l),onClick:f,tabIndex:p??(y?0:null),style:h,children:o(t,{disabled:!y,className:a(i.cardPadding,g&&i.cardGaps),style:{borderRadius:`inherit`},children:u})})}export{c as default};
|
|
2
2
|
//# sourceMappingURL=Card.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.mjs","names":[],"sources":["../../../../package/common/card/Card.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport { CardStyleType, type CardProps } from './card.types';\nimport styles from './card.module.pcss';\nimport InteractableDiv from '../interactableDiv';\nimport Ripple from '../ripple';\n\nconst CLASS_BY_STYLE: Record<CardStyleType, string> = {\n elevated: styles.cardStyleElevated,\n outlined: styles.cardStyleOutlined,\n filled: styles.cardStyleFilled,\n};\n\nfunction Card({\n className = undefined,\n children = null,\n styleType = CardStyleType.Elevated,\n onClick = undefined,\n tabIndex = null,\n hoverEffect = undefined,\n style = undefined,\n autoGap = true,\n clip = false,\n ...rest\n}
|
|
1
|
+
{"version":3,"file":"Card.mjs","names":[],"sources":["../../../../package/common/card/Card.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport { CardStyleType, type CardProps } from './card.types';\nimport styles from './card.module.pcss';\nimport InteractableDiv from '../interactableDiv';\nimport Ripple from '../ripple';\nimport { useComponentDefaults } from '../configProvider';\n\nconst CLASS_BY_STYLE: Record<CardStyleType, string> = {\n elevated: styles.cardStyleElevated,\n outlined: styles.cardStyleOutlined,\n filled: styles.cardStyleFilled,\n};\n\nfunction Card(props: CardProps) {\n const {\n className = undefined,\n children = null,\n styleType = CardStyleType.Elevated,\n onClick = undefined,\n tabIndex = null,\n hoverEffect = undefined,\n style = undefined,\n autoGap = true,\n clip = false,\n ...rest\n } = useComponentDefaults('Card', props);\n const isInteractable = !!onClick;\n\n return (\n <InteractableDiv\n {...rest}\n className={cx(\n styles.card,\n CLASS_BY_STYLE[styleType],\n clip && styles.cardClip,\n isInteractable && styles.cardInteractable,\n ((isInteractable && hoverEffect !== false) || hoverEffect) && styles.cardHover,\n className\n )}\n onClick={onClick}\n tabIndex={tabIndex ?? (isInteractable ? 0 : null)}\n style={style}\n >\n <Ripple\n disabled={!isInteractable}\n className={cx(styles.cardPadding, autoGap && styles.cardGaps)}\n style={{ borderRadius: 'inherit' }}\n >\n {children}\n </Ripple>\n </InteractableDiv>\n );\n}\n\nexport default Card;\n"],"mappings":"sTAQA,IAAM,EAAgD,CACpD,SAAU,EAAO,kBACjB,SAAU,EAAO,kBACjB,OAAQ,EAAO,eACjB,EAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACN,YAAY,IAAA,GACZ,WAAW,KACX,YAAY,EAAc,SAC1B,UAAU,IAAA,GACV,WAAW,KACX,cAAc,IAAA,GACd,QAAQ,IAAA,GACR,UAAU,GACV,OAAO,GACP,GAAG,GACC,EAAqB,OAAQ,CAAK,EAChC,EAAiB,CAAC,CAAC,EAEzB,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,KACP,EAAe,GACf,GAAQ,EAAO,SACf,GAAkB,EAAO,kBACvB,GAAkB,IAAgB,IAAU,IAAgB,EAAO,UACrE,CACF,EACS,UACT,SAAU,IAAa,EAAiB,EAAI,MACrC,iBAEP,EAAC,EAAD,CACE,SAAU,CAAC,EACX,UAAW,EAAG,EAAO,YAAa,GAAW,EAAO,QAAQ,EAC5D,MAAO,CAAE,aAAc,SAAU,EAEhC,UACK,CAAA,CACO,CAAA,CAErB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"../loading/spinnerLoading/index.mjs";import
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../loading/spinnerLoading/index.mjs";import n from"../ripple/ripple.mjs";import r from"./checkbox.module.mjs";import{useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(u){let{label:d=``,selected:f=!1,onToggle:p=()=>{},className:m=``,style:h,disabled:g=!1,lineHeight:_=``,title:v=``,tabIndex:y=0,cursorDefault:b=!1,width:x=`17px`,height:S=`17px`,formValidator:C=null,children:w=null,background:T=null,isLoading:E=!1,classNames:D,styles:O,...k}=e(`Checkbox`,u),A=a(null),[,j]=o(0);i(()=>{if(!C)return;let e=()=>j(e=>e+1);return C.registerOnUpdateListener(e),()=>C.removeOnUpdateListener(e)},[C]);function M(e){g||E||(A.current?.addRipple(),C&&C.set(!C.value),p(!f,e))}let N=C?C.value:f;return l(`div`,{...k,className:s(r.checkbox,{[r.checkboxDisabled]:g,[r.checkboxPointer]:!b},m),style:h,onClick:M,onKeyPress:e=>{e.key===`Enter`&&M(e)},role:`checkbox`,"aria-checked":N,tabIndex:y,children:[c(`div`,{title:v,className:s(r.checkboxIcon,E?r.checkboxLoading:null,D?.icon),style:O?.icon,children:E?c(`div`,{style:{width:x,height:S},children:c(t,{className:r.checkboxLoadingSpinner})}):l(`div`,{style:{width:x,height:S,...O?.checkmark},className:s(r.checkboxCheckmark,N&&r.checkboxCheckmarkChecked,D?.checkmark),children:[c(n,{ref:A,manualOnly:!0,overflowHidden:!1,rippleAnimationLength:.3,rippleBackground:`radial-gradient(transparent, var(--primary-color))`}),c(`svg`,{strokeLinejoin:`round`,strokeLinecap:`round`,xmlns:`http://www.w3.org/2000/svg`,viewBox:`-0.5 -1.5 4 2.6`,width:`calc(${x} + 1px)`,height:`calc(${S} + 1px)`,...T?{style:{background:T}}:{},children:c(`path`,{d:`M 0 0 l 1 1 l 2 -2`,strokeWidth:`0.4`,fill:`none`})})]})}),c(`div`,{className:D?.label,style:{lineHeight:_||`100%`,...O?.label},children:w||d})]})}export{u as default};
|
|
2
2
|
//# sourceMappingURL=checkbox.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.tsx"],"sourcesContent":["import { useRef, useEffect, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Ripple from 'components/common/ripple';\nimport SpinnerLoading from '../loading/spinnerLoading';\n\nimport type { CheckboxProps } from './checkbox.types';\nimport styles from './checkbox.module.pcss';\n\nfunction Checkbox({\n label = '',\n selected = false,\n onToggle = () => {},\n className = '',\n style,\n disabled = false,\n lineHeight = '',\n title = '',\n tabIndex = 0,\n cursorDefault = false,\n width = '17px',\n height = '17px',\n formValidator = null,\n children = null,\n background = null,\n isLoading = false,\n classNames,\n styles: slotStyles,\n ...rest\n}
|
|
1
|
+
{"version":3,"file":"checkbox.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.tsx"],"sourcesContent":["import { useRef, useEffect, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Ripple from 'components/common/ripple';\nimport SpinnerLoading from '../loading/spinnerLoading';\nimport { useComponentDefaults } from '../configProvider';\n\nimport type { CheckboxProps } from './checkbox.types';\nimport styles from './checkbox.module.pcss';\n\nfunction Checkbox(props: CheckboxProps): ReactElement {\n const {\n label = '',\n selected = false,\n onToggle = () => {},\n className = '',\n style,\n disabled = false,\n lineHeight = '',\n title = '',\n tabIndex = 0,\n cursorDefault = false,\n width = '17px',\n height = '17px',\n formValidator = null,\n children = null,\n background = null,\n isLoading = false,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('Checkbox', props);\n const rippleRef = useRef<{ addRipple: () => void }>(null);\n const [, forceUpdate] = useState(0);\n\n useEffect(() => {\n if (!formValidator) return;\n const listener = () => forceUpdate((n) => n + 1);\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\n\n function handleToggle(event?: React.MouseEvent | React.KeyboardEvent) {\n if (disabled || isLoading) return;\n rippleRef.current?.addRipple();\n if (formValidator) {\n formValidator.set(!formValidator.value);\n }\n onToggle(!selected, event);\n }\n\n const currSelected = (formValidator ? formValidator.value : selected) as boolean;\n\n return (\n <div\n {...rest}\n className={cx(\n styles.checkbox,\n {\n [styles.checkboxDisabled]: disabled,\n [styles.checkboxPointer]: !cursorDefault,\n },\n className\n )}\n style={style}\n onClick={handleToggle}\n onKeyPress={(e) => { if (e.key === 'Enter') handleToggle(e); }}\n role=\"checkbox\"\n aria-checked={currSelected}\n tabIndex={tabIndex}\n >\n <div\n title={title}\n className={cx(styles.checkboxIcon, isLoading ? styles.checkboxLoading : null, classNames?.icon)}\n style={slotStyles?.icon}\n >\n {isLoading ? (\n <div style={{ width, height }}>\n <SpinnerLoading className={styles.checkboxLoadingSpinner} />\n </div>\n ) : (\n <div\n style={{ width, height, ...slotStyles?.checkmark }}\n className={cx(\n styles.checkboxCheckmark,\n currSelected && styles.checkboxCheckmarkChecked,\n classNames?.checkmark\n )}\n >\n <Ripple\n ref={rippleRef}\n manualOnly\n overflowHidden={false}\n rippleAnimationLength={0.3}\n rippleBackground=\"radial-gradient(transparent, var(--primary-color))\"\n />\n <svg\n strokeLinejoin=\"round\"\n strokeLinecap=\"round\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"-0.5 -1.5 4 2.6\"\n width={`calc(${width} + 1px)`}\n height={`calc(${height} + 1px)`}\n {...(background ? { style: { background } } : {})}\n >\n <path d=\"M 0 0 l 1 1 l 2 -2\" strokeWidth=\"0.4\" fill=\"none\" />\n </svg>\n </div>\n )}\n </div>\n <div className={classNames?.label} style={{ lineHeight: lineHeight || '100%', ...slotStyles?.label }}>{children || label}</div>\n </div>\n );\n}\n\nexport default Checkbox;\n"],"mappings":"sVASA,SAAS,EAAS,EAAoC,CACpD,GAAM,CACN,QAAQ,GACR,WAAW,GACX,eAAiB,CAAC,EAClB,YAAY,GACZ,QACA,WAAW,GACX,aAAa,GACb,QAAQ,GACR,WAAW,EACX,gBAAgB,GAChB,QAAQ,OACR,SAAS,OACT,gBAAgB,KAChB,WAAW,KACX,aAAa,KACb,YAAY,GACZ,aACA,OAAQ,EACR,GAAG,GACC,EAAqB,WAAY,CAAK,EACpC,EAAY,EAAkC,IAAI,EAClD,EAAG,GAAe,EAAS,CAAC,EAElC,MAAgB,CACd,GAAI,CAAC,EAAe,OACpB,IAAM,MAAiB,EAAa,GAAM,EAAI,CAAC,EAE/C,OADA,EAAc,yBAAyB,CAAQ,MAClC,EAAc,uBAAuB,CAAQ,CAC5D,EAAG,CAAC,CAAa,CAAC,EAElB,SAAS,EAAa,EAAgD,CAChE,GAAY,IAChB,EAAU,SAAS,UAAU,EACzB,GACF,EAAc,IAAI,CAAC,EAAc,KAAK,EAExC,EAAS,CAAC,EAAU,CAAK,EAC3B,CAEA,IAAM,EAAgB,EAAgB,EAAc,MAAQ,EAE5D,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,SACP,EACG,EAAO,kBAAmB,GAC1B,EAAO,iBAAkB,CAAC,CAC7B,EACA,CACF,EACO,QACP,QAAS,EACT,WAAa,GAAM,CAAM,EAAE,MAAQ,SAAS,EAAa,CAAC,CAAG,EAC7D,KAAK,WACL,eAAc,EACJ,oBAfZ,CAiBE,EAAC,MAAD,CACS,QACP,UAAW,EAAG,EAAO,aAAc,EAAY,EAAO,gBAAkB,KAAM,GAAY,IAAI,EAC9F,MAAO,GAAY,cAElB,EACC,EAAC,MAAD,CAAK,MAAO,CAAE,QAAO,QAAO,WAC1B,EAAC,EAAD,CAAgB,UAAW,EAAO,sBAAyB,CAAA,CACxD,CAAA,EAEL,EAAC,MAAD,CACE,MAAO,CAAE,QAAO,SAAQ,GAAG,GAAY,SAAU,EACjD,UAAW,EACT,EAAO,kBACP,GAAgB,EAAO,yBACvB,GAAY,SACd,WANF,CAQE,EAAC,EAAD,CACE,IAAK,EACL,WAAA,GACA,eAAgB,GAChB,sBAAuB,GACvB,iBAAiB,oDAClB,CAAA,EACD,EAAC,MAAD,CACE,eAAe,QACf,cAAc,QACd,MAAM,6BACN,QAAQ,kBACR,MAAO,QAAQ,EAAM,SACrB,OAAQ,QAAQ,EAAO,SACvB,GAAK,EAAa,CAAE,MAAO,CAAE,YAAW,CAAE,EAAI,CAAC,WAE/C,EAAC,OAAD,CAAM,EAAE,qBAAqB,YAAY,MAAM,KAAK,MAAQ,CAAA,CACzD,CAAA,CACF,GAEJ,CAAA,EACL,EAAC,MAAD,CAAK,UAAW,GAAY,MAAO,MAAO,CAAE,WAAY,GAAc,OAAQ,GAAG,GAAY,KAAM,WAAI,GAAY,CAAW,CAAA,CAC3H,GAET"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"../ripple/ripple.mjs";import
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../ripple/ripple.mjs";import n from"../actionIcon/actionIcon.mjs";import{ChipStyleType as r}from"./chip.types.mjs";import i from"./chip.module.mjs";import{useMemo as a}from"react";import o from"classnames";import{faXmarkCircle as s}from"@fortawesome/free-solid-svg-icons";import{jsx as c,jsxs as l}from"react/jsx-runtime";var u={default:i.chipStyleDefault,primary:i.chipStylePrimary,info:i.chipStyleInfo,warn:i.chipStyleWarn,error:i.chipStyleError};function d(d){let{className:f=``,thumbnail:p=``,text:m=``,styleType:h=r.Default,showRemoveIcon:g=!1,onClick:_,onRemove:v,...y}=e(`Chip`,d),b=a(()=>{if(typeof p==`string`&&p.startsWith(`http`))return p},[p]);return c(`div`,{...y,className:o(i.chip,u[h],_&&i.chipClickable,f),onClick:_,children:c(t,{disabled:!_,style:{borderRadius:`inherit`},children:l(`div`,{className:i.chipInner,children:[p&&c(`div`,{className:i.chipThumbnail,style:b?{backgroundImage:`url(${b})`}:{},children:!b&&p}),c(`div`,{className:i.chipText,children:m}),g&&c(n,{icon:s,onClick:e=>{e.stopPropagation(),v?.()}})]})})})}export{d as default};
|
|
2
2
|
//# sourceMappingURL=chip.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.mjs","names":[],"sources":["../../../../package/common/chip/chip.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { faXmarkCircle } from '@fortawesome/free-solid-svg-icons';\nimport cx from 'classnames';\n\nimport Ripple from '../ripple';\nimport ActionIcon from '../actionIcon';\nimport { ChipStyleType, ChipProps } from './chip.types';\n\nimport styles from './chip.module.pcss';\n\nconst CLASS_BY_STYLE: Record<ChipStyleType, string> = {\n default: styles.chipStyleDefault,\n primary: styles.chipStylePrimary,\n info: styles.chipStyleInfo,\n warn: styles.chipStyleWarn,\n error: styles.chipStyleError,\n};\n\nfunction Chip({\n className = '',\n thumbnail = '',\n text = '',\n styleType = ChipStyleType.Default,\n showRemoveIcon = false,\n onClick,\n onRemove,\n ...rest\n}
|
|
1
|
+
{"version":3,"file":"chip.mjs","names":[],"sources":["../../../../package/common/chip/chip.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { faXmarkCircle } from '@fortawesome/free-solid-svg-icons';\nimport cx from 'classnames';\n\nimport Ripple from '../ripple';\nimport ActionIcon from '../actionIcon';\nimport { ChipStyleType, ChipProps } from './chip.types';\nimport { useComponentDefaults } from '../configProvider';\n\nimport styles from './chip.module.pcss';\n\nconst CLASS_BY_STYLE: Record<ChipStyleType, string> = {\n default: styles.chipStyleDefault,\n primary: styles.chipStylePrimary,\n info: styles.chipStyleInfo,\n warn: styles.chipStyleWarn,\n error: styles.chipStyleError,\n};\n\nfunction Chip(props: ChipProps) {\n const {\n className = '',\n thumbnail = '',\n text = '',\n styleType = ChipStyleType.Default,\n showRemoveIcon = false,\n onClick,\n onRemove,\n ...rest\n } = useComponentDefaults('Chip', props);\n const thumbnailUrl = useMemo(() => {\n if (typeof thumbnail === 'string' && thumbnail.startsWith('http')) return thumbnail;\n return undefined;\n }, [thumbnail]);\n\n return (\n <div\n {...rest}\n className={cx(styles.chip, CLASS_BY_STYLE[styleType], onClick && styles.chipClickable, className)}\n onClick={onClick}\n >\n <Ripple disabled={!onClick} style={{ borderRadius: 'inherit' }}>\n <div className={styles.chipInner}>\n {thumbnail && (\n <div\n className={styles.chipThumbnail}\n style={thumbnailUrl ? { backgroundImage: `url(${thumbnailUrl})` } : {}}\n >\n {!thumbnailUrl && thumbnail}\n </div>\n )}\n <div className={styles.chipText}>{text}</div>\n {showRemoveIcon && <ActionIcon icon={faXmarkCircle} onClick={(e) => { e.stopPropagation(); onRemove?.(); }} />}\n </div>\n </Ripple>\n </div>\n );\n}\n\nexport default Chip;\n"],"mappings":"kaAWA,IAAM,EAAgD,CACpD,QAAS,EAAO,iBAChB,QAAS,EAAO,iBAChB,KAAM,EAAO,cACb,KAAM,EAAO,cACb,MAAO,EAAO,cAChB,EAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACN,YAAY,GACZ,YAAY,GACZ,OAAO,GACP,YAAY,EAAc,QAC1B,iBAAiB,GACjB,UACA,WACA,GAAG,GACC,EAAqB,OAAQ,CAAK,EAChC,EAAe,MAAc,CACjC,GAAI,OAAO,GAAc,UAAY,EAAU,WAAW,MAAM,EAAG,OAAO,CAE5E,EAAG,CAAC,CAAS,CAAC,EAEd,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,KAAM,EAAe,GAAY,GAAW,EAAO,cAAe,CAAS,EACvF,mBAET,EAAC,EAAD,CAAQ,SAAU,CAAC,EAAS,MAAO,CAAE,aAAc,SAAU,WAC3D,EAAC,MAAD,CAAK,UAAW,EAAO,mBAAvB,CACG,GACC,EAAC,MAAD,CACE,UAAW,EAAO,cAClB,MAAO,EAAe,CAAE,gBAAiB,OAAO,EAAa,EAAG,EAAI,CAAC,WAEpE,CAAC,GAAgB,CACf,CAAA,EAEP,EAAC,MAAD,CAAK,UAAW,EAAO,kBAAW,CAAU,CAAA,EAC3C,GAAkB,EAAC,EAAD,CAAY,KAAM,EAAe,QAAU,GAAM,CAAE,EAAE,gBAAgB,EAAG,IAAW,CAAG,CAAI,CAAA,CAC1G,GACC,CAAA,CACL,CAAA,CAET"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{createContext as e,useContext as t,useMemo as n}from"react";import{jsx as r}from"react/jsx-runtime";var i=e(null);function a(e,t){if(!e)return t??{};if(!t)return e;let n={...e};for(let r in t)n[r]={...e[r],...t[r]};return n}function o({children:e,defaultProps:o}){let s=t(i),c=n(()=>a(s,o),[s,o]);return r(i.Provider,{value:c,children:e})}export{i as ConfigContext,o as default};
|
|
2
|
+
//# sourceMappingURL=configProvider.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"configProvider.mjs","names":[],"sources":["../../../../package/common/configProvider/configProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react';\nimport type { ComponentDefaults, ConfigProviderProps } from './configProvider.types';\n\nexport const ConfigContext = createContext<ComponentDefaults | null>(null);\n\n/**\n * Shallow-merge two default maps per component key, so nested ConfigProviders\n * compose: an inner provider's `Input` defaults extend (and override on\n * conflict) the outer provider's `Input` defaults rather than replacing them.\n */\nfunction mergeDefaults(\n parent: ComponentDefaults | null,\n own: ComponentDefaults | undefined,\n): ComponentDefaults {\n if (!parent) return own ?? {};\n if (!own) return parent;\n\n const merged: Record<string, object> = { ...parent };\n for (const key in own) {\n merged[key] = {\n ...(parent as Record<string, object>)[key],\n ...(own as Record<string, object>)[key],\n };\n }\n return merged as ComponentDefaults;\n}\n\nfunction ConfigProvider({ children, defaultProps }: ConfigProviderProps) {\n const parent = useContext(ConfigContext);\n const value = useMemo(() => mergeDefaults(parent, defaultProps), [parent, defaultProps]);\n\n return <ConfigContext.Provider value={value}>{children}</ConfigContext.Provider>;\n}\n\nexport default ConfigProvider;\n"],"mappings":"2GAGA,IAAa,EAAgB,EAAwC,IAAI,EAOzE,SAAS,EACP,EACA,EACmB,CACnB,GAAI,CAAC,EAAQ,OAAO,GAAO,CAAC,EAC5B,GAAI,CAAC,EAAK,OAAO,EAEjB,IAAM,EAAiC,CAAE,GAAG,CAAO,EACnD,IAAK,IAAM,KAAO,EAChB,EAAO,GAAO,CACZ,GAAI,EAAkC,GACtC,GAAI,EAA+B,EACrC,EAEF,OAAO,CACT,CAEA,SAAS,EAAe,CAAE,WAAU,gBAAqC,CACvE,IAAM,EAAS,EAAW,CAAa,EACjC,EAAQ,MAAc,EAAc,EAAQ,CAAY,EAAG,CAAC,EAAQ,CAAY,CAAC,EAEvF,OAAO,EAAC,EAAc,SAAf,CAA+B,QAAQ,UAAiC,CAAA,CACjF"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{ConfigContext as e}from"./configProvider.mjs";import{useContext as t}from"react";function n(n,r){let i=t(e)?.[n];if(!i)return r;let a={...i};for(let e in r){let t=r[e];t!==void 0&&(a[e]=t)}return a}export{n as useComponentDefaults};
|
|
2
|
+
//# sourceMappingURL=useComponentDefaults.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useComponentDefaults.mjs","names":[],"sources":["../../../../package/common/configProvider/useComponentDefaults.ts"],"sourcesContent":["import { useContext } from 'react';\nimport { ConfigContext } from './configProvider';\nimport type { ComponentDefaults } from './configProvider.types';\n\n/**\n * Merge global defaults from the nearest `ConfigProvider` **under** the props\n * the caller actually passed: an explicit prop always wins, a global default\n * fills in only props the caller left `undefined`, and the component's own\n * built-in default (its destructuring default) applies when neither is set.\n *\n * Call it at the very top of a component and destructure from the result\n * instead of from the raw props:\n *\n * ```tsx\n * function Input(props: InputProps) {\n * const { alwaysFloatLabel = false, ... } = useComponentDefaults('Input', props);\n * }\n * ```\n */\nexport function useComponentDefaults<P extends object>(\n component: keyof ComponentDefaults,\n props: P,\n): P {\n const ctx = useContext(ConfigContext);\n const defaults = ctx?.[component];\n if (!defaults) return props;\n\n const merged: Record<string, unknown> = { ...defaults };\n for (const key in props) {\n const value = (props as Record<string, unknown>)[key];\n if (value !== undefined) merged[key] = value;\n }\n return merged as P;\n}\n"],"mappings":"wFAmBA,SAAgB,EACd,EACA,EACG,CAEH,IAAM,EADM,EAAW,CACN,IAAM,GACvB,GAAI,CAAC,EAAU,OAAO,EAEtB,IAAM,EAAkC,CAAE,GAAG,CAAS,EACtD,IAAK,IAAM,KAAO,EAAO,CACvB,IAAM,EAAS,EAAkC,GAC7C,IAAU,IAAA,KAAW,EAAO,GAAO,EACzC,CACA,OAAO,CACT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"../button/button.mjs";import
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../button/button.mjs";import n from"../actionIcon/actionIcon.mjs";import{Align as r}from"../floatingMenu/floatingMenu.types.mjs";import i from"../floatingMenu/floatingMenu.mjs";import a from"../tooltip/tooltip.mjs";import o from"../input/input.mjs";import s from"../modal/modal.mjs";import{getLocale as ee}from"../../services/localization.mjs";import{correctDateMaskValue as te,getDateFromDayMonthAndYear as c,getDateString as l,getMonthName as ne,getMonthNames as re}from"./dateFunctions.mjs";import ie from"./components/datePickerMonth/datePickerMonth.mjs";import u from"../dropdown/dropdown.mjs";import d from"./datePicker.module.mjs";import{useEffect as f,useRef as p,useState as m}from"react";import h from"classnames";import{faChevronLeft as ae,faChevronRight as oe}from"@fortawesome/free-solid-svg-icons";import{Fragment as se,jsx as g,jsxs as _}from"react/jsx-runtime";import v from"@mona-health/react-input-mask";function y(y){let{className:ce=``,selected:b,onSelect:x=()=>null,formValidator:S=null,noInput:C=!1,noHeader:le=!1,isModal:w=!1,isInline:T=!1,onChange:ue=()=>null,minDate:E=null,maxDate:D=null,children:de=null,showClearButton:fe=!1,label:pe=``,isValid:O=!0,errorMessage:k=``,isRequired:A=!1,startDate:j,endDate:M}=e(`DatePicker`,y),N=()=>S?S.value:b,P=N()??new Date,[F,I]=m(P.getMonth()+1),[L,R]=m(P.getFullYear()),[z,B]=m(!1),[V,H]=m(()=>N()?l(P):``),[me,U]=m(!1),[he,W]=m(!1),[,ge]=m(0),[_e,ve]=m(b),G=p(S);if(_e!==b){ve(b);let e=b??new Date;I(e.getMonth()+1),R(e.getFullYear()),H(b?l(b):``)}f(()=>{if(G.current=S,!S)return;let e=()=>{let e=S.value;e?(I(e.getMonth()+1),R(e.getFullYear()),H(l(e))):H(``),ge(e=>e+1)};return S.registerOnUpdateListener(e),()=>S.removeOnUpdateListener(e)},[S]);let ye=()=>S?S.touched&&S.hasError():!O||!!k,be=()=>!!(A||S?.validators.find(e=>e.validatorId===`required`)),K=e=>{H(e?l(e):``),S&&S.set(e),ue(e)},q=e=>{K(e),x(e),B(!1)},J=e=>{I(t=>{let n=t+e;return n<1?(n=12,R(e=>e-1)):n>12&&(n=1,R(e=>e+1)),n})},Y=e=>{if(e.match(/\d{2}\.\d{2}\.\d{4}/gi)){let[t,n,r]=e.split(`.`),i=c(Number(t),Number(n),Number(r));if(i&&i.toString()!==`Invalid Date`&&(!D||i<=D)&&(!E||i>=E))return i}return null},xe=({previousState:e,nextState:t})=>{if(!e||t.value===e.value)return t;let n=te(t.value,e.value,t.selection??null),r=Y(n.value);return r&&K(r),n},Se=()=>{let e=400,t=new Date().getFullYear()-200;return E&&(t=E.getFullYear()),D&&(e=D.getFullYear()-t+1),Array.from(Array(e).keys()).map(e=>({key:e+t,label:e+t}))},X=N(),Z=ye(),Q=_(se,{children:[le?null:_(`div`,{className:d.datePickerHeader,children:[g(n,{icon:ae,onClick:()=>J(-1)}),g(`div`,{className:d.datePickerHeaderMonthAndYearContainer,children:_(`div`,{className:d.datePickerHeaderMonthAndYear,children:[g(u,{plainStyle:!0,scrollToSelected:!0,onChange:e=>I(e),className:d.datePickerHeaderMonth,value:ne(ee(`-`),L,F,1),items:re().map((e,t)=>({key:t+1,label:e}))}),g(u,{plainStyle:!0,scrollToSelected:!0,useMatLabelStyle:!1,className:d.datePickerHeaderYear,onChange:e=>R(e),value:L,items:Se()})]})}),g(n,{icon:oe,onClick:()=>J(1)})]}),g(ie,{className:d.datePickerMonth,month:F,year:L,onSelect:q,selectionStart:j??X,selectionEnd:M??X,minDate:E,maxDate:D}),fe&&g(t,{onClick:()=>q(null),children:`Clear`}),de]}),$=C?null:g(o,{readOnly:w,label:`${pe}${be()?` *`:``}`,value:V,onChange:e=>H(e),onClick:()=>B(!0),customInput:g(v,{mask:`99.99.9999`,maskPlaceholder:`_`,beforeMaskedStateChange:xe}),onBlur:()=>{G.current&&(G.current.touched=!0),U(!1),K(Y(V))},onFocus:()=>U(!0),onMouseEnter:()=>W(!0),onMouseLeave:()=>W(!1),isValid:!Z}),Ce=T?Q:w?g(s,{hideHeader:!0,isOpen:z,onClose:()=>B(!1),children:Q}):g(i,{isOpen:z,onOpenChange:e=>B(e),content:Q,align:r.Left,dontCloseOnChildClick:!0,children:$});return _(`div`,{className:h(d.datePicker,ce),children:[(w||T)&&$,Ce,g(a,{variant:`error`,message:S?S.getCurrentErrorMessage():k||``,isVisible:Z&&(me||he)})]})}export{y as default};
|
|
2
2
|
//# sourceMappingURL=datePicker.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datePicker.mjs","names":[],"sources":["../../../../package/common/datePicker/datePicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport Input from '../input';\nimport DatePickerMonth from './components/datePickerMonth';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\nimport { getLocale } from 'services/localization';\nimport ActionIcon from '../actionIcon';\nimport Modal from '../modal';\nimport FloatingMenu from '../floatingMenu';\nimport Dropdown from '../dropdown';\nimport { Align } from '../floatingMenu/floatingMenu.types';\nimport InputMask, { InputState, BeforeMaskedStateChangeStates } from '@mona-health/react-input-mask';\nimport { getDateFromDayMonthAndYear, getMonthName, getMonthNames, getDateString, correctDateMaskValue } from './dateFunctions';\nimport Button from '../button';\nimport Tooltip from '../tooltip';\nimport type FormValidator from 'services/formValidation/formValidator';\n\nimport styles from './datePicker.module.pcss';\n\ninterface DatePickerProps {\n className?: string;\n selected?: Date;\n onSelect?: (date: Date | null) => void;\n formValidator?: FormValidator | null;\n noInput?: boolean;\n noHeader?: boolean;\n isModal?: boolean;\n isInline?: boolean;\n onChange?: (date: Date | null) => void;\n minDate?: Date | null;\n maxDate?: Date | null;\n children?: React.ReactNode;\n showClearButton?: boolean;\n label?: string;\n isValid?: boolean;\n errorMessage?: string;\n isRequired?: boolean;\n startDate?: Date;\n endDate?: Date;\n}\n\nexport default function DatePicker({\n className = '',\n selected,\n onSelect = () => null,\n formValidator = null,\n noInput = false,\n noHeader = false,\n isModal = false,\n isInline = false,\n onChange = () => null,\n minDate = null,\n maxDate = null,\n children = null,\n showClearButton = false,\n label = '',\n isValid = true,\n errorMessage = '',\n isRequired = false,\n startDate,\n endDate,\n}: DatePickerProps) {\n const getCurrValue = (): Date | undefined =>\n formValidator ? (formValidator.value as Date) : selected;\n\n const initialDate = getCurrValue() ?? new Date();\n\n const [currentMonth, setCurrentMonth] = useState(initialDate.getMonth() + 1);\n const [currentYear, setCurrentYear] = useState(initialDate.getFullYear());\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n const [currentDateString, setCurrentDateString] = useState(() =>\n getCurrValue() ? getDateString(initialDate) : ''\n );\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [, forceUpdate] = useState(0);\n const [prevSelected, setPrevSelected] = useState(selected);\n\n const fvRef = useRef(formValidator);\n\n // Sync navigation view when `selected` prop changes externally\n if (prevSelected !== selected) {\n setPrevSelected(selected);\n const d = selected ?? new Date();\n setCurrentMonth(d.getMonth() + 1);\n setCurrentYear(d.getFullYear());\n setCurrentDateString(selected ? getDateString(selected) : '');\n }\n\n // Subscribe to formValidator updates (external system → setState in callback)\n useEffect(() => {\n fvRef.current = formValidator;\n if (!formValidator) return;\n const listener = () => {\n const val = formValidator.value as Date | undefined;\n if (val) {\n setCurrentMonth(val.getMonth() + 1);\n setCurrentYear(val.getFullYear());\n setCurrentDateString(getDateString(val));\n } else {\n setCurrentDateString('');\n }\n forceUpdate((n: number) => n + 1);\n };\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\n\n const hasError = (): boolean => {\n return formValidator\n ? (formValidator.touched && formValidator.hasError())\n : (!isValid || !!errorMessage);\n };\n\n const computedIsRequired = (): boolean => {\n return !!(isRequired || formValidator?.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n ));\n };\n\n const handleChange = (date: Date | null) => {\n setCurrentDateString(date ? getDateString(date) : '');\n if (formValidator) formValidator.set(date);\n onChange(date);\n };\n\n const handleSelect = (date: Date | null) => {\n handleChange(date);\n onSelect(date);\n setIsPickerOpen(false);\n };\n\n const changeMonth = (delta: number) => {\n setCurrentMonth((prev) => {\n let next = prev + delta;\n if (next < 1) { next = 12; setCurrentYear((y) => y - 1); }\n else if (next > 12) { next = 1; setCurrentYear((y) => y + 1); }\n return next;\n });\n };\n\n const tryParseDateString = (dateString: string): Date | null => {\n if (dateString.match(/\\d{2}\\.\\d{2}\\.\\d{4}/gi)) {\n const [day, month, year] = dateString.split('.');\n const parsedDate = getDateFromDayMonthAndYear(Number(day), Number(month), Number(year));\n if (parsedDate && parsedDate.toString() !== 'Invalid Date') {\n const isSmallerThanMaxDate = !maxDate || parsedDate <= maxDate;\n const isBiggerThanMinDate = !minDate || parsedDate >= minDate;\n if (isSmallerThanMaxDate && isBiggerThanMinDate) return parsedDate;\n }\n }\n return null;\n };\n\n const beforeMaskedStateChange = ({ previousState, nextState }: BeforeMaskedStateChangeStates): InputState => {\n // previousState is only supplied on user-driven change events; on mount/focus/blur\n // there is nothing to auto-correct, so the next state passes through unchanged.\n if (!previousState || nextState.value === previousState.value) return nextState;\n\n const corrected = correctDateMaskValue(nextState.value, previousState.value, nextState.selection ?? null);\n\n const parsedDate = tryParseDateString(corrected.value);\n if (parsedDate) handleChange(parsedDate);\n\n return corrected;\n };\n\n const getYearDropdownOptions = () => {\n let length = 400;\n let zeroOffset = new Date().getFullYear() - 200;\n if (minDate) zeroOffset = minDate.getFullYear();\n if (maxDate) length = maxDate.getFullYear() - zeroOffset + 1;\n return Array.from(Array(length).keys()).map((i) => ({ key: i + zeroOffset, label: i + zeroOffset }));\n };\n\n const currValue = getCurrValue();\n const hasErr = hasError();\n\n const header = noHeader ? null : (\n <div className={styles.datePickerHeader}>\n <ActionIcon icon={faChevronLeft} onClick={() => changeMonth(-1)} />\n <div className={styles.datePickerHeaderMonthAndYearContainer}>\n <div className={styles.datePickerHeaderMonthAndYear}>\n <Dropdown\n plainStyle\n scrollToSelected\n onChange={(v) => setCurrentMonth(v as number)}\n className={styles.datePickerHeaderMonth}\n value={getMonthName(getLocale('-'), currentYear, currentMonth, 1)}\n items={getMonthNames().map((month, index) => ({ key: index + 1, label: month }))}\n />\n <Dropdown\n plainStyle\n scrollToSelected\n useMatLabelStyle={false}\n className={styles.datePickerHeaderYear}\n onChange={(v) => setCurrentYear(v as number)}\n value={currentYear}\n items={getYearDropdownOptions()}\n />\n </div>\n </div>\n <ActionIcon icon={faChevronRight} onClick={() => changeMonth(1)} />\n </div>\n );\n\n const pickerContent = (\n <>\n {header}\n <DatePickerMonth\n className={styles.datePickerMonth}\n month={currentMonth}\n year={currentYear}\n onSelect={handleSelect}\n selectionStart={startDate ?? currValue}\n selectionEnd={endDate ?? currValue}\n minDate={minDate}\n maxDate={maxDate}\n />\n {showClearButton && <Button onClick={() => handleSelect(null)}>Clear</Button>}\n {children}\n </>\n );\n\n const input = noInput ? null : (\n <Input\n readOnly={isModal}\n label={`${label}${computedIsRequired() ? ' *' : ''}`}\n value={currentDateString}\n onChange={(v) => setCurrentDateString(v as string)}\n onClick={() => setIsPickerOpen(true)}\n customInput={\n <InputMask mask=\"99.99.9999\" maskPlaceholder=\"_\" beforeMaskedStateChange={beforeMaskedStateChange} />\n }\n onBlur={() => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n handleChange(tryParseDateString(currentDateString));\n }}\n onFocus={() => setIsFocused(true)}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n isValid={!hasErr}\n />\n );\n\n const picker = (() => {\n if (isInline) return pickerContent;\n if (isModal) {\n return (\n <Modal hideHeader isOpen={isPickerOpen} onClose={() => setIsPickerOpen(false)}>\n {pickerContent}\n </Modal>\n );\n }\n return (\n <FloatingMenu\n isOpen={isPickerOpen}\n onOpenChange={(open: boolean) => setIsPickerOpen(open)}\n content={pickerContent}\n align={Align.Left}\n dontCloseOnChildClick\n >\n {input}\n </FloatingMenu>\n );\n })();\n\n return (\n <div className={cx(styles.datePicker, className)}>\n {(isModal || isInline) && input}\n {picker}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={hasErr && (isFocused || isHovered)}\n />\n </div>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"datePicker.mjs","names":[],"sources":["../../../../package/common/datePicker/datePicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport Input from '../input';\nimport { useComponentDefaults } from '../configProvider';\nimport DatePickerMonth from './components/datePickerMonth';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\nimport { getLocale } from 'services/localization';\nimport ActionIcon from '../actionIcon';\nimport Modal from '../modal';\nimport FloatingMenu from '../floatingMenu';\nimport Dropdown from '../dropdown';\nimport { Align } from '../floatingMenu/floatingMenu.types';\nimport InputMask, { InputState, BeforeMaskedStateChangeStates } from '@mona-health/react-input-mask';\nimport { getDateFromDayMonthAndYear, getMonthName, getMonthNames, getDateString, correctDateMaskValue } from './dateFunctions';\nimport Button from '../button';\nimport Tooltip from '../tooltip';\nimport type FormValidator from 'services/formValidation/formValidator';\n\nimport styles from './datePicker.module.pcss';\n\nexport interface DatePickerProps {\n className?: string;\n selected?: Date;\n onSelect?: (date: Date | null) => void;\n formValidator?: FormValidator | null;\n noInput?: boolean;\n noHeader?: boolean;\n isModal?: boolean;\n isInline?: boolean;\n onChange?: (date: Date | null) => void;\n minDate?: Date | null;\n maxDate?: Date | null;\n children?: React.ReactNode;\n showClearButton?: boolean;\n label?: string;\n isValid?: boolean;\n errorMessage?: string;\n isRequired?: boolean;\n startDate?: Date;\n endDate?: Date;\n}\n\nexport default function DatePicker(props: DatePickerProps) {\n const {\n className = '',\n selected,\n onSelect = () => null,\n formValidator = null,\n noInput = false,\n noHeader = false,\n isModal = false,\n isInline = false,\n onChange = () => null,\n minDate = null,\n maxDate = null,\n children = null,\n showClearButton = false,\n label = '',\n isValid = true,\n errorMessage = '',\n isRequired = false,\n startDate,\n endDate,\n } = useComponentDefaults('DatePicker', props);\n const getCurrValue = (): Date | undefined =>\n formValidator ? (formValidator.value as Date) : selected;\n\n const initialDate = getCurrValue() ?? new Date();\n\n const [currentMonth, setCurrentMonth] = useState(initialDate.getMonth() + 1);\n const [currentYear, setCurrentYear] = useState(initialDate.getFullYear());\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n const [currentDateString, setCurrentDateString] = useState(() =>\n getCurrValue() ? getDateString(initialDate) : ''\n );\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [, forceUpdate] = useState(0);\n const [prevSelected, setPrevSelected] = useState(selected);\n\n const fvRef = useRef(formValidator);\n\n // Sync navigation view when `selected` prop changes externally\n if (prevSelected !== selected) {\n setPrevSelected(selected);\n const d = selected ?? new Date();\n setCurrentMonth(d.getMonth() + 1);\n setCurrentYear(d.getFullYear());\n setCurrentDateString(selected ? getDateString(selected) : '');\n }\n\n // Subscribe to formValidator updates (external system → setState in callback)\n useEffect(() => {\n fvRef.current = formValidator;\n if (!formValidator) return;\n const listener = () => {\n const val = formValidator.value as Date | undefined;\n if (val) {\n setCurrentMonth(val.getMonth() + 1);\n setCurrentYear(val.getFullYear());\n setCurrentDateString(getDateString(val));\n } else {\n setCurrentDateString('');\n }\n forceUpdate((n: number) => n + 1);\n };\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\n\n const hasError = (): boolean => {\n return formValidator\n ? (formValidator.touched && formValidator.hasError())\n : (!isValid || !!errorMessage);\n };\n\n const computedIsRequired = (): boolean => {\n return !!(isRequired || formValidator?.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n ));\n };\n\n const handleChange = (date: Date | null) => {\n setCurrentDateString(date ? getDateString(date) : '');\n if (formValidator) formValidator.set(date);\n onChange(date);\n };\n\n const handleSelect = (date: Date | null) => {\n handleChange(date);\n onSelect(date);\n setIsPickerOpen(false);\n };\n\n const changeMonth = (delta: number) => {\n setCurrentMonth((prev) => {\n let next = prev + delta;\n if (next < 1) { next = 12; setCurrentYear((y) => y - 1); }\n else if (next > 12) { next = 1; setCurrentYear((y) => y + 1); }\n return next;\n });\n };\n\n const tryParseDateString = (dateString: string): Date | null => {\n if (dateString.match(/\\d{2}\\.\\d{2}\\.\\d{4}/gi)) {\n const [day, month, year] = dateString.split('.');\n const parsedDate = getDateFromDayMonthAndYear(Number(day), Number(month), Number(year));\n if (parsedDate && parsedDate.toString() !== 'Invalid Date') {\n const isSmallerThanMaxDate = !maxDate || parsedDate <= maxDate;\n const isBiggerThanMinDate = !minDate || parsedDate >= minDate;\n if (isSmallerThanMaxDate && isBiggerThanMinDate) return parsedDate;\n }\n }\n return null;\n };\n\n const beforeMaskedStateChange = ({ previousState, nextState }: BeforeMaskedStateChangeStates): InputState => {\n // previousState is only supplied on user-driven change events; on mount/focus/blur\n // there is nothing to auto-correct, so the next state passes through unchanged.\n if (!previousState || nextState.value === previousState.value) return nextState;\n\n const corrected = correctDateMaskValue(nextState.value, previousState.value, nextState.selection ?? null);\n\n const parsedDate = tryParseDateString(corrected.value);\n if (parsedDate) handleChange(parsedDate);\n\n return corrected;\n };\n\n const getYearDropdownOptions = () => {\n let length = 400;\n let zeroOffset = new Date().getFullYear() - 200;\n if (minDate) zeroOffset = minDate.getFullYear();\n if (maxDate) length = maxDate.getFullYear() - zeroOffset + 1;\n return Array.from(Array(length).keys()).map((i) => ({ key: i + zeroOffset, label: i + zeroOffset }));\n };\n\n const currValue = getCurrValue();\n const hasErr = hasError();\n\n const header = noHeader ? null : (\n <div className={styles.datePickerHeader}>\n <ActionIcon icon={faChevronLeft} onClick={() => changeMonth(-1)} />\n <div className={styles.datePickerHeaderMonthAndYearContainer}>\n <div className={styles.datePickerHeaderMonthAndYear}>\n <Dropdown\n plainStyle\n scrollToSelected\n onChange={(v) => setCurrentMonth(v as number)}\n className={styles.datePickerHeaderMonth}\n value={getMonthName(getLocale('-'), currentYear, currentMonth, 1)}\n items={getMonthNames().map((month, index) => ({ key: index + 1, label: month }))}\n />\n <Dropdown\n plainStyle\n scrollToSelected\n useMatLabelStyle={false}\n className={styles.datePickerHeaderYear}\n onChange={(v) => setCurrentYear(v as number)}\n value={currentYear}\n items={getYearDropdownOptions()}\n />\n </div>\n </div>\n <ActionIcon icon={faChevronRight} onClick={() => changeMonth(1)} />\n </div>\n );\n\n const pickerContent = (\n <>\n {header}\n <DatePickerMonth\n className={styles.datePickerMonth}\n month={currentMonth}\n year={currentYear}\n onSelect={handleSelect}\n selectionStart={startDate ?? currValue}\n selectionEnd={endDate ?? currValue}\n minDate={minDate}\n maxDate={maxDate}\n />\n {showClearButton && <Button onClick={() => handleSelect(null)}>Clear</Button>}\n {children}\n </>\n );\n\n const input = noInput ? null : (\n <Input\n readOnly={isModal}\n label={`${label}${computedIsRequired() ? ' *' : ''}`}\n value={currentDateString}\n onChange={(v) => setCurrentDateString(v as string)}\n onClick={() => setIsPickerOpen(true)}\n customInput={\n <InputMask mask=\"99.99.9999\" maskPlaceholder=\"_\" beforeMaskedStateChange={beforeMaskedStateChange} />\n }\n onBlur={() => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n handleChange(tryParseDateString(currentDateString));\n }}\n onFocus={() => setIsFocused(true)}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n isValid={!hasErr}\n />\n );\n\n const picker = (() => {\n if (isInline) return pickerContent;\n if (isModal) {\n return (\n <Modal hideHeader isOpen={isPickerOpen} onClose={() => setIsPickerOpen(false)}>\n {pickerContent}\n </Modal>\n );\n }\n return (\n <FloatingMenu\n isOpen={isPickerOpen}\n onOpenChange={(open: boolean) => setIsPickerOpen(open)}\n content={pickerContent}\n align={Align.Left}\n dontCloseOnChildClick\n >\n {input}\n </FloatingMenu>\n );\n })();\n\n return (\n <div className={cx(styles.datePicker, className)}>\n {(isModal || isInline) && input}\n {picker}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={hasErr && (isFocused || isHovered)}\n />\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"../bodyEnd/bodyEnd.mjs";import{useFloatingPosition as
|
|
1
|
+
import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../bodyEnd/bodyEnd.mjs";import{useFloatingPosition as n}from"../floatingMenu/useFloatingPosition.mjs";import r from"../tooltip/tooltip.mjs";import i from"../infiniteBlock/infiniteBlock.mjs";import a from"./dropdown.module.mjs";import{useEffect as o,useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as ee}from"@fortawesome/react-fontawesome";import{faChevronDown as u}from"@fortawesome/free-solid-svg-icons";import{jsx as d,jsxs as f}from"react/jsx-runtime";import p from"downshift";function m(m){let{errorMessage:h=``,className:te=``,label:g=``,value:_=``,isValid:v=!0,tabIndex:y=0,isRequired:b=!1,customProps:x={},isRow:S=!1,disabled:C=!1,onScroll:w=()=>Promise.resolve(),onClick:T,onChange:E,onFocus:ne=null,onBlur:re=null,onMouseEnter:ie=null,onMouseLeave:ae=null,dropdownLabel:oe,isDropdownListWider:D=!1,inputClassName:se=``,dropDownIconClassName:ce=``,dropDownClassName:le=``,formValidator:O=null,labelClassName:k=``,dropDownInputClassName:A=``,items:j=[],useMatLabelStyle:M=!0,alwaysFloatLabel:N=!1,placeholder:P=``,plainStyle:F=!1,scrollToSelected:I=!1,reactRef:L,...R}=e(`Dropdown`,m),[z,B]=c(!1),[V,H]=c(!1),[,U]=c(0),W=s(O),G=s(null),K=s(null),[q,ue]=c(!1),[de,fe]=c(10);o(()=>{if(q){let e=G.current?.getBoundingClientRect();fe(e?.width??10)}},[q]),n({isOpen:q,triggerRef:G,anchorRef:K,panelRef:K,flipClassName:a.dropdownInputListAnimFlip}),o(()=>{if(W.current=O,!W.current)return;W.current.label=g??``,W.current.validate();let e=()=>U(e=>e+1);return W.current.registerOnUpdateListener(e),()=>W.current?.removeOnUpdateListener(e)},[O,g]);let pe=e=>{H(!0),ie?.(e)},me=e=>{H(!1),ae?.(e)},he=e=>{B(!0),ne?.(e)},ge=e=>{W.current&&(W.current.touched=!0),B(!1),re?.(e)},_e=()=>O?O.touched&&O.hasError():!v||!!h,ve=()=>!!(b||O?.validators.find(e=>e.validatorId===`required`)),J=e=>{O?(O.set(e),E?.(O.value,x)):E?.(e,x)},Y=oe,X=O?O.value:_,Z=_e();j.forEach(e=>{e.key===X&&(Y=e.label)});let Q=Y||X,$=Q==null||typeof Q==`string`&&Q.trim()===``;return f(`div`,{...R,className:l(te,a.dropdownLabel,a.dropdown,{[a.dropdownLabelColumn]:!S}),onMouseEnter:pe,onMouseLeave:me,children:[d(p,{onChange:e=>J((e||{key:``}).key),itemToString:e=>e?String(e.key):``,selectedItem:j.find(e=>e.key===X)??null,onStateChange:e=>{typeof e.isOpen==`boolean`&&ue(e.isOpen)},stateReducer:(e,t)=>I&&Object.prototype.hasOwnProperty.call(t,`isOpen`)?{...t,highlightedIndex:t.isOpen?j.indexOf(e.selectedItem):null}:t,children:({getItemProps:e,getToggleButtonProps:n,isOpen:r,selectedItem:o,highlightedIndex:s,setHighlightedIndex:c})=>d(`div`,{children:f(`div`,{ref:G,onFocus:he,onBlur:ge,className:l(a.dropdownInput,{[a.dropdownInputPlain]:F},A),children:[d(`button`,{tabIndex:y,type:`button`,disabled:C,style:D?{padding:`6px`,border:`none`}:{},className:l(a.dropdownInputButton,{[a.dropdownInputButtonDisabled]:C},se),...n(),onClick:e=>{n().onClick?.(e),T?.(e)},ref:L,children:$?`\xA0`:Q}),d(`button`,{type:`button`,tabIndex:-1,disabled:C,className:l(a.dropdownInputButtonIcon,ce),...n(),onClick:e=>{n().onClick?.(e),T?.(e)},children:!C&&d(ee,{icon:u,className:l(a.dropdownInputButtonIconArrow,{[a.dropdownInputButtonIconArrowOpen]:r})})}),!C&&r?d(t,{children:d(`div`,{ref:K,className:l(a.dropdownInputListAnim,{[a.dropdownInputListAnimWider]:D}),style:{width:`${de}px`},children:d(i,{onScroll:w,className:a.dropdownInputList,setHighlightedIndex:c,children:j.map((t,n)=>d(`div`,{...e({index:n,item:t,disabled:!!t.disabled}),className:l(a.dropdownInputListItem,le,{[a.dropdownInputListItemActive]:s===n,[a.dropdownInputListItemSelected]:o===t,[a.dropdownInputListItemDisabled]:!!t.disabled}),children:t.label},t.key))})})}):null,d(`fieldset`,{className:l(a.dropdownFieldset,{[a.dropdownBorderPlain]:F,[a.dropdownBorderFocused]:z,[a.dropdownBorderInvalid]:Z,[a.dropdownBorderError]:Z}),children:d(`legend`,{className:l(a.dropdownFieldsetLegend,{[a.dropdownFieldsetLegendActive]:M&&(N||z||!$)}),children:d(`span`,{children:g})})}),M&&g&&d(`div`,{className:l(a.dropdownMatLabel,{[a.dropdownMatLabelFloating]:N||z||!$}),children:g}),M&&P&&d(`div`,{className:l(a.dropdownPlaceholder,z&&!Y&&a.dropdownPlaceholderShown),children:P})]})})}),g&&!M&&f(`div`,{className:l(a.dropdownLabelText,k),children:[g,ve()?d(`div`,{className:a.requiredMark,children:`*`}):null]}),d(r,{variant:`error`,message:O?O.getCurrentErrorMessage():h||``,isVisible:Z&&(z||V)})]})}export{m as default};
|
|
2
2
|
//# sourceMappingURL=dropdown.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport InfiniteBlock from 'components/common/infiniteBlock';\nimport BodyEnd from 'components/common/bodyEnd';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as dropdownIcon } from '@fortawesome/free-solid-svg-icons';\nimport Downshift, { StateChangeOptions, DownshiftState } from 'downshift';\nimport Tooltip from 'components/common/tooltip';\n\nimport { useFloatingPosition } from '../floatingMenu/useFloatingPosition';\nimport styles from './dropdown.module.pcss';\nimport type { DropdownProps, DropdownItem } from './dropdown.types';\n\nfunction Dropdown({\n errorMessage = '',\n className = '',\n label = '',\n value = '',\n isValid = true,\n tabIndex = 0,\n isRequired = false,\n customProps = {},\n isRow = false,\n disabled = false,\n onScroll = () => Promise.resolve(),\n onClick,\n onChange,\n onFocus: onFocusProp = null,\n onBlur: onBlurProp = null,\n onMouseEnter: onMouseEnterProp = null,\n onMouseLeave: onMouseLeaveProp = null,\n dropdownLabel: dropdownLabelProp,\n isDropdownListWider = false,\n inputClassName = '',\n dropDownIconClassName = '',\n dropDownClassName = '',\n formValidator = null,\n labelClassName = '',\n dropDownInputClassName = '',\n items = [],\n useMatLabelStyle = true,\n placeholder = '',\n plainStyle = false,\n scrollToSelected = false,\n reactRef,\n ...rest\n}: DropdownProps) {\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [, forceUpdate] = useState(0);\n const fvRef = useRef(formValidator);\n const triggerRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const [menuIsOpen, setMenuIsOpen] = useState(false);\n const [triggerWidth, setTriggerWidth] = useState(10);\n\n useEffect(() => {\n if (menuIsOpen) {\n const rect = triggerRef.current?.getBoundingClientRect();\n setTriggerWidth(rect?.width ?? 10);\n }\n }, [menuIsOpen]);\n\n useFloatingPosition({\n isOpen: menuIsOpen,\n triggerRef,\n anchorRef,\n panelRef: anchorRef,\n flipClassName: styles.dropdownInputListAnimFlip,\n });\n\n useEffect(() => {\n fvRef.current = formValidator;\n if (!fvRef.current) return;\n fvRef.current.label = label ?? '';\n fvRef.current.validate();\n const listener = () => forceUpdate(n => n + 1);\n fvRef.current.registerOnUpdateListener(listener);\n return () => fvRef.current?.removeOnUpdateListener(listener);\n }, [formValidator, label]);\n\n const onMouseEnterHandler = (event: React.MouseEvent) => {\n setIsHovered(true);\n onMouseEnterProp?.(event);\n };\n\n const onMouseLeaveHandler = (event: React.MouseEvent) => {\n setIsHovered(false);\n onMouseLeaveProp?.(event);\n };\n\n const onFocusHandler = (event: React.FocusEvent) => {\n setIsFocused(true);\n onFocusProp?.(event);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n onBlurProp?.(event);\n };\n\n const hasError = (): boolean => {\n return formValidator\n ? (formValidator.touched && formValidator.hasError())\n : (!isValid || !!errorMessage);\n };\n\n const computedIsRequired = (): boolean => {\n return !!(isRequired || formValidator?.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n ));\n };\n\n const onChangeHandler = (val: string | number): void => {\n if (formValidator) {\n formValidator.set(val);\n onChange?.(formValidator.value, customProps);\n } else {\n onChange?.(val, customProps);\n }\n };\n\n let dropdownLabel = dropdownLabelProp;\n const currentValue = formValidator ? formValidator.value as string | number : value;\n const hasErr = hasError();\n\n items.forEach((item: DropdownItem) => {\n if (item.key === currentValue) {\n dropdownLabel = item.label as string;\n }\n });\n\n const displayValue = dropdownLabel || currentValue;\n const isDisplayBlank =\n displayValue == null ||\n (typeof displayValue === 'string' && displayValue.trim() === '');\n\n return (\n <div\n {...rest}\n className={cx(className, styles.dropdownLabel, styles.dropdown, {\n [styles.dropdownLabelColumn]: !isRow,\n })}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n >\n <Downshift\n onChange={(selection: DropdownItem | null) => onChangeHandler((selection || { key: '' }).key)}\n itemToString={(item: DropdownItem | null) => (item ? String(item.key) : '')}\n selectedItem={items.find((el) => el.key === currentValue) ?? null}\n onStateChange={(changes: StateChangeOptions<DropdownItem>) => {\n if (typeof changes.isOpen === 'boolean') setMenuIsOpen(changes.isOpen);\n }}\n stateReducer={(state: DownshiftState<DropdownItem>, changes: StateChangeOptions<DropdownItem>) => {\n if (scrollToSelected && Object.prototype.hasOwnProperty.call(changes, 'isOpen')) {\n return {\n ...changes,\n highlightedIndex: changes.isOpen ? items.indexOf(state.selectedItem as DropdownItem) : null,\n };\n }\n return changes;\n }}\n >\n {({\n getItemProps,\n getToggleButtonProps,\n isOpen,\n selectedItem,\n highlightedIndex,\n setHighlightedIndex,\n }) => (\n <div>\n <div\n ref={triggerRef}\n onFocus={onFocusHandler}\n onBlur={onBlurHandler}\n className={cx(\n styles.dropdownInput,\n { [styles.dropdownInputPlain]: plainStyle },\n dropDownInputClassName\n )}\n >\n <button\n tabIndex={tabIndex}\n type=\"button\"\n disabled={disabled}\n style={isDropdownListWider ? { padding: '6px', border: 'none' } : {}}\n className={cx(\n styles.dropdownInputButton,\n { [styles.dropdownInputButtonDisabled]: disabled },\n inputClassName\n )}\n {...getToggleButtonProps()}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n getToggleButtonProps().onClick?.(e);\n onClick?.(e);\n }}\n ref={reactRef}\n >\n {/* Non-breaking space when blank (same text-node layout as a\n real value) so the button keeps a full line of height. */}\n {isDisplayBlank ? '\\u00A0' : displayValue}\n </button>\n <button\n type=\"button\"\n tabIndex={-1}\n disabled={disabled}\n className={cx(styles.dropdownInputButtonIcon, dropDownIconClassName)}\n {...getToggleButtonProps()}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n getToggleButtonProps().onClick?.(e);\n onClick?.(e);\n }}\n >\n {!disabled && (\n <FontAwesomeIcon\n icon={dropdownIcon}\n className={cx(styles.dropdownInputButtonIconArrow, {\n [styles.dropdownInputButtonIconArrowOpen]: isOpen,\n })}\n />\n )}\n </button>\n {!disabled && isOpen ? (\n <BodyEnd>\n <div\n ref={anchorRef}\n className={cx(styles.dropdownInputListAnim, {\n [styles.dropdownInputListAnimWider]: isDropdownListWider,\n })}\n style={{ width: `${triggerWidth}px` }}\n >\n <InfiniteBlock\n onScroll={onScroll}\n className={styles.dropdownInputList}\n setHighlightedIndex={setHighlightedIndex}\n >\n {items.map((item: DropdownItem, index: number) => (\n <div\n key={item.key}\n {...getItemProps({ index, item, disabled: !!item.disabled })}\n className={cx(styles.dropdownInputListItem, dropDownClassName, {\n [styles.dropdownInputListItemActive]: highlightedIndex === index,\n [styles.dropdownInputListItemSelected]: selectedItem === item,\n [styles.dropdownInputListItemDisabled]: !!item.disabled,\n })}\n >\n {item.label}\n </div>\n ))}\n </InfiniteBlock>\n </div>\n </BodyEnd>\n ) : null}\n <fieldset\n className={cx(styles.dropdownFieldset, {\n [styles.dropdownBorderPlain]: plainStyle,\n [styles.dropdownBorderFocused]: isFocused,\n [styles.dropdownBorderInvalid]: hasErr,\n [styles.dropdownBorderError]: hasErr,\n })}\n >\n <legend\n className={cx(styles.dropdownFieldsetLegend, {\n [styles.dropdownFieldsetLegendActive]:\n useMatLabelStyle && (isFocused || !isDisplayBlank),\n })}\n >\n <span>{label}</span>\n </legend>\n </fieldset>\n {useMatLabelStyle && label && (\n <div\n className={cx(styles.dropdownMatLabel, {\n [styles.dropdownMatLabelFloating]: isFocused || !isDisplayBlank,\n })}\n >\n {label}\n </div>\n )}\n {useMatLabelStyle && placeholder && (\n <div\n className={cx(\n styles.dropdownPlaceholder,\n isFocused && !dropdownLabel && styles.dropdownPlaceholderShown\n )}\n >\n {placeholder}\n </div>\n )}\n </div>\n </div>\n )}\n </Downshift>\n {label && !useMatLabelStyle && (\n <div className={cx(styles.dropdownLabelText, labelClassName)}>\n {label}\n {computedIsRequired() ? <div className={styles.requiredMark}>*</div> : null}\n </div>\n )}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={hasErr && (isFocused || isHovered)}\n />\n </div>\n );\n}\n\nexport default Dropdown;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"dropdown.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport InfiniteBlock from 'components/common/infiniteBlock';\nimport BodyEnd from 'components/common/bodyEnd';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faChevronDown as dropdownIcon } from '@fortawesome/free-solid-svg-icons';\nimport Downshift, { StateChangeOptions, DownshiftState } from 'downshift';\nimport Tooltip from 'components/common/tooltip';\n\nimport { useFloatingPosition } from '../floatingMenu/useFloatingPosition';\nimport { useComponentDefaults } from '../configProvider';\nimport styles from './dropdown.module.pcss';\nimport type { DropdownProps, DropdownItem } from './dropdown.types';\n\nfunction Dropdown(props: DropdownProps) {\n const {\n errorMessage = '',\n className = '',\n label = '',\n value = '',\n isValid = true,\n tabIndex = 0,\n isRequired = false,\n customProps = {},\n isRow = false,\n disabled = false,\n onScroll = () => Promise.resolve(),\n onClick,\n onChange,\n onFocus: onFocusProp = null,\n onBlur: onBlurProp = null,\n onMouseEnter: onMouseEnterProp = null,\n onMouseLeave: onMouseLeaveProp = null,\n dropdownLabel: dropdownLabelProp,\n isDropdownListWider = false,\n inputClassName = '',\n dropDownIconClassName = '',\n dropDownClassName = '',\n formValidator = null,\n labelClassName = '',\n dropDownInputClassName = '',\n items = [],\n useMatLabelStyle = true,\n alwaysFloatLabel = false,\n placeholder = '',\n plainStyle = false,\n scrollToSelected = false,\n reactRef,\n ...rest\n } = useComponentDefaults('Dropdown', props);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [, forceUpdate] = useState(0);\n const fvRef = useRef(formValidator);\n const triggerRef = useRef<HTMLDivElement>(null);\n const anchorRef = useRef<HTMLDivElement>(null);\n const [menuIsOpen, setMenuIsOpen] = useState(false);\n const [triggerWidth, setTriggerWidth] = useState(10);\n\n useEffect(() => {\n if (menuIsOpen) {\n const rect = triggerRef.current?.getBoundingClientRect();\n setTriggerWidth(rect?.width ?? 10);\n }\n }, [menuIsOpen]);\n\n useFloatingPosition({\n isOpen: menuIsOpen,\n triggerRef,\n anchorRef,\n panelRef: anchorRef,\n flipClassName: styles.dropdownInputListAnimFlip,\n });\n\n useEffect(() => {\n fvRef.current = formValidator;\n if (!fvRef.current) return;\n fvRef.current.label = label ?? '';\n fvRef.current.validate();\n const listener = () => forceUpdate(n => n + 1);\n fvRef.current.registerOnUpdateListener(listener);\n return () => fvRef.current?.removeOnUpdateListener(listener);\n }, [formValidator, label]);\n\n const onMouseEnterHandler = (event: React.MouseEvent) => {\n setIsHovered(true);\n onMouseEnterProp?.(event);\n };\n\n const onMouseLeaveHandler = (event: React.MouseEvent) => {\n setIsHovered(false);\n onMouseLeaveProp?.(event);\n };\n\n const onFocusHandler = (event: React.FocusEvent) => {\n setIsFocused(true);\n onFocusProp?.(event);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n onBlurProp?.(event);\n };\n\n const hasError = (): boolean => {\n return formValidator\n ? (formValidator.touched && formValidator.hasError())\n : (!isValid || !!errorMessage);\n };\n\n const computedIsRequired = (): boolean => {\n return !!(isRequired || formValidator?.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n ));\n };\n\n const onChangeHandler = (val: string | number): void => {\n if (formValidator) {\n formValidator.set(val);\n onChange?.(formValidator.value, customProps);\n } else {\n onChange?.(val, customProps);\n }\n };\n\n let dropdownLabel = dropdownLabelProp;\n const currentValue = formValidator ? formValidator.value as string | number : value;\n const hasErr = hasError();\n\n items.forEach((item: DropdownItem) => {\n if (item.key === currentValue) {\n dropdownLabel = item.label as string;\n }\n });\n\n const displayValue = dropdownLabel || currentValue;\n const isDisplayBlank =\n displayValue == null ||\n (typeof displayValue === 'string' && displayValue.trim() === '');\n\n return (\n <div\n {...rest}\n className={cx(className, styles.dropdownLabel, styles.dropdown, {\n [styles.dropdownLabelColumn]: !isRow,\n })}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n >\n <Downshift\n onChange={(selection: DropdownItem | null) => onChangeHandler((selection || { key: '' }).key)}\n itemToString={(item: DropdownItem | null) => (item ? String(item.key) : '')}\n selectedItem={items.find((el) => el.key === currentValue) ?? null}\n onStateChange={(changes: StateChangeOptions<DropdownItem>) => {\n if (typeof changes.isOpen === 'boolean') setMenuIsOpen(changes.isOpen);\n }}\n stateReducer={(state: DownshiftState<DropdownItem>, changes: StateChangeOptions<DropdownItem>) => {\n if (scrollToSelected && Object.prototype.hasOwnProperty.call(changes, 'isOpen')) {\n return {\n ...changes,\n highlightedIndex: changes.isOpen ? items.indexOf(state.selectedItem as DropdownItem) : null,\n };\n }\n return changes;\n }}\n >\n {({\n getItemProps,\n getToggleButtonProps,\n isOpen,\n selectedItem,\n highlightedIndex,\n setHighlightedIndex,\n }) => (\n <div>\n <div\n ref={triggerRef}\n onFocus={onFocusHandler}\n onBlur={onBlurHandler}\n className={cx(\n styles.dropdownInput,\n { [styles.dropdownInputPlain]: plainStyle },\n dropDownInputClassName\n )}\n >\n <button\n tabIndex={tabIndex}\n type=\"button\"\n disabled={disabled}\n style={isDropdownListWider ? { padding: '6px', border: 'none' } : {}}\n className={cx(\n styles.dropdownInputButton,\n { [styles.dropdownInputButtonDisabled]: disabled },\n inputClassName\n )}\n {...getToggleButtonProps()}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n getToggleButtonProps().onClick?.(e);\n onClick?.(e);\n }}\n ref={reactRef}\n >\n {/* Non-breaking space when blank (same text-node layout as a\n real value) so the button keeps a full line of height. */}\n {isDisplayBlank ? '\\u00A0' : displayValue}\n </button>\n <button\n type=\"button\"\n tabIndex={-1}\n disabled={disabled}\n className={cx(styles.dropdownInputButtonIcon, dropDownIconClassName)}\n {...getToggleButtonProps()}\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n getToggleButtonProps().onClick?.(e);\n onClick?.(e);\n }}\n >\n {!disabled && (\n <FontAwesomeIcon\n icon={dropdownIcon}\n className={cx(styles.dropdownInputButtonIconArrow, {\n [styles.dropdownInputButtonIconArrowOpen]: isOpen,\n })}\n />\n )}\n </button>\n {!disabled && isOpen ? (\n <BodyEnd>\n <div\n ref={anchorRef}\n className={cx(styles.dropdownInputListAnim, {\n [styles.dropdownInputListAnimWider]: isDropdownListWider,\n })}\n style={{ width: `${triggerWidth}px` }}\n >\n <InfiniteBlock\n onScroll={onScroll}\n className={styles.dropdownInputList}\n setHighlightedIndex={setHighlightedIndex}\n >\n {items.map((item: DropdownItem, index: number) => (\n <div\n key={item.key}\n {...getItemProps({ index, item, disabled: !!item.disabled })}\n className={cx(styles.dropdownInputListItem, dropDownClassName, {\n [styles.dropdownInputListItemActive]: highlightedIndex === index,\n [styles.dropdownInputListItemSelected]: selectedItem === item,\n [styles.dropdownInputListItemDisabled]: !!item.disabled,\n })}\n >\n {item.label}\n </div>\n ))}\n </InfiniteBlock>\n </div>\n </BodyEnd>\n ) : null}\n <fieldset\n className={cx(styles.dropdownFieldset, {\n [styles.dropdownBorderPlain]: plainStyle,\n [styles.dropdownBorderFocused]: isFocused,\n [styles.dropdownBorderInvalid]: hasErr,\n [styles.dropdownBorderError]: hasErr,\n })}\n >\n <legend\n className={cx(styles.dropdownFieldsetLegend, {\n [styles.dropdownFieldsetLegendActive]:\n useMatLabelStyle && (alwaysFloatLabel || isFocused || !isDisplayBlank),\n })}\n >\n <span>{label}</span>\n </legend>\n </fieldset>\n {useMatLabelStyle && label && (\n <div\n className={cx(styles.dropdownMatLabel, {\n [styles.dropdownMatLabelFloating]: alwaysFloatLabel || isFocused || !isDisplayBlank,\n })}\n >\n {label}\n </div>\n )}\n {useMatLabelStyle && placeholder && (\n <div\n className={cx(\n styles.dropdownPlaceholder,\n isFocused && !dropdownLabel && styles.dropdownPlaceholderShown\n )}\n >\n {placeholder}\n </div>\n )}\n </div>\n </div>\n )}\n </Downshift>\n {label && !useMatLabelStyle && (\n <div className={cx(styles.dropdownLabelText, labelClassName)}>\n {label}\n {computedIsRequired() ? <div className={styles.requiredMark}>*</div> : null}\n </div>\n )}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={hasErr && (isFocused || isHovered)}\n />\n </div>\n );\n}\n\nexport default Dropdown;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.module.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.module.pcss"],"sourcesContent":["\n.required-mark {\n padding: 0px 0px 0px 4px;\n color: var(--error-font-color);\n}\n\n.dropdown {\n position: relative;\n\n &-label {\n display: flex;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n white-space: nowrap;\n margin-right: 5px;\n margin-bottom: 5px;\n display: flex;\n align-items: center;\n color: var(--text-color);\n font-size: 12px;\n position: absolute;\n top: -15px;\n }\n }\n\n &-input {\n position: relative;\n cursor: pointer;\n background-color: var(--input-background);\n border-radius: var(--default-border-radius);\n\n &-plain {\n background: transparent;\n }\n\n &:focus-within {\n outline: none;\n }\n\n &-button {\n padding: 7px 20% 7px 7.5px !important;\n background-color: transparent;\n border: none;\n font-family: inherit;\n font-size: inherit;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n text-align: left;\n width: 100%;\n line-height: 1.25;\n color: var(--text-color);\n\n &-disabled {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n border-radius: var(--default-border-radius);\n }\n\n &:focus {\n outline: none;\n }\n\n &-icon {\n float: right;\n background-color: transparent;\n border: none;\n position: absolute;\n outline: none;\n right: var(--spacing-s);\n top: 50%;\n transform: translateY(-50%);\n color: var(--text-color);\n cursor: pointer;\n\n &-arrow {\n transition: transform 0.25s;\n pointer-events: none;\n\n &-open {\n transform: rotate(180deg);\n }\n }\n }\n }\n\n &-list-anim {\n position: fixed;\n z-index: 1;\n color: var(--text-color);\n background: var(--background-modal);\n box-shadow: var(--card-shadow);\n border-radius: var(--default-border-radius);\n overflow: hidden;\n transform: scaleY(1);\n transition: transform 0.25s;\n transform-origin: right top;\n\n &-flip {\n transform-origin: right bottom;\n }\n\n &-wider {\n width: max-content !important;\n }\n }\n\n &-list {\n width: 100%;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 160px;\n list-style-type: none;\n\n &-item {\n border: none;\n cursor: pointer;\n background-color: var(--background-modal);\n padding: 8px;\n text-align: left;\n border-radius: 0;\n transition: all 0.3s;\n\n &-active {\n background-color: var(--background-accent);\n }\n\n &-selected {\n font-weight: 500;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n background-color: var(--background-accent);\n }\n\n &-disabled {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n cursor: not-allowed;\n\n &:hover {\n background-color: var(--disabled-input-color);\n }\n }\n }\n\n &-hidden {\n transform: scaleY(0);\n }\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n box-sizing: border-box;\n border-radius: var(--default-border-radius);\n inset: -10px 0 0 0;\n padding-left: 8px;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n pointer-events: none;\n user-select: none;\n\n &-legend {\n display: block;\n max-width: 0;\n transition: max-width 0.2s;\n white-space: nowrap;\n padding: 0;\n\n &-active {\n max-width: 300px;\n }\n\n span {\n font-size: 13px;\n padding: 5px;\n opacity: 0;\n }\n\n /* With an empty label the span would still reserve its padding, leaving a gap in\n the fieldset's top border. Collapse it so the notch closes when there's no label. */\n span:empty {\n padding: 0.000001px;\n }\n }\n }\n\n &-placeholder {\n position: absolute;\n top: 8px;\n left: 7px;\n transition: all 0.2s;\n opacity: 0;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n inset: 9px 0 0 7px;\n font-size: 16px;\n pointer-events: none;\n user-select: none;\n\n &-floating {\n inset: -9px 0 0 14px;\n font-size: 13px;\n }\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 0.5;\n }\n }\n\n &-border {\n outline: 1px solid var(--border-color);\n transition: border-color;\n background-color: var(--input-background);\n outline: none;\n\n &-focused {\n outline-color: var(--primary-color);\n border-color: var(--primary-color);\n }\n\n &-searchFocused {\n outline-color: var(--search-input-color);\n outline-width: 2px;\n border-color: var(--search-input-color);\n }\n\n &-plain {\n border-color: transparent;\n outline-color: transparent;\n }\n\n &-invalid {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-invalid:hover {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-error {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"dropdown.module.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.module.pcss"],"sourcesContent":["\n.required-mark {\n padding: 0px 0px 0px 4px;\n color: var(--error-font-color);\n}\n\n.dropdown {\n position: relative;\n\n &-label {\n display: flex;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n white-space: nowrap;\n margin-right: 5px;\n margin-bottom: 5px;\n display: flex;\n align-items: center;\n color: var(--text-color);\n font-size: 12px;\n position: absolute;\n top: -15px;\n }\n }\n\n &-input {\n position: relative;\n cursor: pointer;\n background-color: var(--input-background);\n border-radius: var(--default-border-radius);\n\n &-plain {\n background: transparent;\n }\n\n &:focus-within {\n outline: none;\n }\n\n &-button {\n padding: 7px 20% 7px 7.5px !important;\n background-color: transparent;\n border: none;\n font-family: inherit;\n font-size: inherit;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n text-align: left;\n width: 100%;\n line-height: 1.25;\n color: var(--text-color);\n\n &-disabled {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n border-radius: var(--default-border-radius);\n }\n\n &:focus {\n outline: none;\n }\n\n &-icon {\n float: right;\n background-color: transparent;\n border: none;\n position: absolute;\n outline: none;\n right: var(--spacing-s);\n top: 50%;\n transform: translateY(-50%);\n color: var(--text-color);\n cursor: pointer;\n\n &-arrow {\n transition: transform 0.25s;\n pointer-events: none;\n\n &-open {\n transform: rotate(180deg);\n }\n }\n }\n }\n\n &-list-anim {\n position: fixed;\n z-index: 1;\n color: var(--text-color);\n background: var(--background-modal);\n box-shadow: var(--card-shadow);\n border-radius: var(--default-border-radius);\n overflow: hidden;\n transform: scaleY(1);\n transition: transform 0.25s;\n transform-origin: right top;\n\n &-flip {\n transform-origin: right bottom;\n }\n\n &-wider {\n width: max-content !important;\n }\n }\n\n &-list {\n width: 100%;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 160px;\n list-style-type: none;\n\n &-item {\n border: none;\n cursor: pointer;\n background-color: var(--background-modal);\n padding: 8px;\n text-align: left;\n border-radius: 0;\n transition: all 0.3s;\n\n &-active {\n background-color: var(--background-accent);\n }\n\n &-selected {\n font-weight: 500;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n background-color: var(--background-accent);\n }\n\n &-disabled {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n cursor: not-allowed;\n\n &:hover {\n background-color: var(--disabled-input-color);\n }\n }\n }\n\n &-hidden {\n transform: scaleY(0);\n }\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n box-sizing: border-box;\n border-radius: var(--default-border-radius);\n inset: -10px 0 0 0;\n padding-left: 8px;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n pointer-events: none;\n user-select: none;\n\n &-legend {\n display: block;\n max-width: 0;\n transition: max-width 0.2s;\n white-space: nowrap;\n padding: 0;\n\n &-active {\n max-width: 300px;\n }\n\n span {\n font-size: 13px;\n padding: 5px;\n opacity: 0;\n }\n\n /* With an empty label the span would still reserve its padding, leaving a gap in\n the fieldset's top border. Collapse it so the notch closes when there's no label. */\n span:empty {\n padding: 0.000001px;\n }\n }\n }\n\n &-placeholder {\n position: absolute;\n top: 8px;\n left: 7px;\n transition: all 0.2s;\n opacity: 0;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n inset: 9px 0 0 7px;\n font-size: 16px;\n color: var(--input-label-resting-color, var(--text-light));\n pointer-events: none;\n user-select: none;\n\n &-floating {\n inset: -9px 0 0 14px;\n font-size: 13px;\n color: var(--input-label-floating-color, var(--text-color));\n }\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 0.5;\n }\n }\n\n &-border {\n outline: 1px solid var(--border-color);\n transition: border-color;\n background-color: var(--input-background);\n outline: none;\n\n &-focused {\n outline-color: var(--primary-color);\n border-color: var(--primary-color);\n }\n\n &-searchFocused {\n outline-color: var(--search-input-color);\n outline-width: 2px;\n border-color: var(--search-input-color);\n }\n\n &-plain {\n border-color: transparent;\n outline-color: transparent;\n }\n\n &-invalid {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-invalid:hover {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-error {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"floatingMenu.module.mjs","names":[],"sources":["../../../../package/common/floatingMenu/floatingMenu.module.pcss"],"sourcesContent":[".floatingMenu {\n position: relative;\n\n &-content {\n cursor: pointer;\n }\n\n &-container {\n color: var(--text-color);\n box-shadow: var(--card-shadow);\n position: absolute;\n margin-top: 10px;\n background: var(--background-modal);\n padding: 8px;\n border-radius: calc(var(--default-border-radius) + 4px);\n\n .floatingMenu-anim-flip & {\n top: auto;\n bottom: 0;\n margin-top: 0;\n margin-bottom: 10px;\n }\n\n &-align {\n &-left {\n left: 0px;\n }\n\n &-right {\n right: 0px;\n }\n\n &-center {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &-flag {\n box-shadow: var(--card-shadow);\n background: var(--background-modal);\n height: 10px;\n width: 10px;\n position: absolute;\n margin-top: 5px;\n transform: rotate(45deg);\n\n .floatingMenu-anim-flip & {\n top: auto;\n bottom: 0;\n margin-top: 0;\n margin-bottom: 5px;\n }\n\n &-align-right {\n right: 8px;\n }\n\n &-align-left {\n left: 8px;\n }\n\n &-align-center {\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n }\n }\n }\n\n &-anim {\n transform: scale(0.7);\n opacity: 0.7;\n animation: showMenu 0.1s forwards;\n position: fixed;\n z-index: 1;\n }\n\n @keyframes showMenu {\n to {\n transform: scale(1);\n opacity: 1;\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"floatingMenu.module.mjs","names":[],"sources":["../../../../package/common/floatingMenu/floatingMenu.module.pcss"],"sourcesContent":[".floatingMenu {\n position: relative;\n\n &-content {\n cursor: pointer;\n }\n\n &-container {\n color: var(--text-color);\n font-family: var(--default-font);\n font-size: var(--default-font-size);\n box-shadow: var(--card-shadow);\n position: absolute;\n margin-top: 10px;\n background: var(--background-modal);\n padding: 8px;\n border-radius: calc(var(--default-border-radius) + 4px);\n\n .floatingMenu-anim-flip & {\n top: auto;\n bottom: 0;\n margin-top: 0;\n margin-bottom: 10px;\n }\n\n &-align {\n &-left {\n left: 0px;\n }\n\n &-right {\n right: 0px;\n }\n\n &-center {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &-flag {\n box-shadow: var(--card-shadow);\n background: var(--background-modal);\n height: 10px;\n width: 10px;\n position: absolute;\n margin-top: 5px;\n transform: rotate(45deg);\n\n .floatingMenu-anim-flip & {\n top: auto;\n bottom: 0;\n margin-top: 0;\n margin-bottom: 5px;\n }\n\n &-align-right {\n right: 8px;\n }\n\n &-align-left {\n left: 8px;\n }\n\n &-align-center {\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n }\n }\n }\n\n &-anim {\n transform: scale(0.7);\n opacity: 0.7;\n animation: showMenu 0.1s forwards;\n position: fixed;\n z-index: 1;\n }\n\n @keyframes showMenu {\n to {\n transform: scale(1);\n opacity: 1;\n }\n }\n}\n"],"mappings":""}
|