npm - @ahrowe/ui - Versions diffs - 0.17.1 → 0.17.3 - Mend

@ahrowe/ui 0.17.1 → 0.17.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.

Files changed (15) hide show

package/dist/esm/common/checkbox/checkbox.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/interactableDiv/interactableDiv.mjs +1 -1
package/dist/esm/common/interactableDiv/interactableDiv.mjs.map +1 -1
package/dist/esm/common/progressBar/progressBar.module.mjs.map +1 -1
package/dist/index.cjs +6 -6
package/dist/index.cjs.map +1 -1
package/dist/style.css +1 -1
package/dist/types/package/common/interactableDiv/interactableDiv.d.ts +2 -9
package/dist/types/package/common/themeProvider/theme.types.d.ts +2 -0
package/docs/Input.md +2 -0
package/docs/ProgressBar.md +17 -0
package/package.json +1 -1

package/dist/esm/common/checkbox/checkbox.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.module.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.module.pcss"],"sourcesContent":["\n.checkbox {\n user-select: none;\n display: flex;\n align-items: center;\n column-gap: 10px;\n margin: -1px;\n border: 1px solid transparent;\n width: fit-content;\n /* The visible checkmark box (below) is nested inside this root, not directly on it — see\n input.module.pcss for why this variable exists: a wrapping ButtonGroup sets --group-radius-\n per corner on the position this occupies, and unlike border-radius itself, custom properties\n inherit through any nesting depth, reaching descendants a plain ancestor selector can't. /\n --checkmark-radius: var(--group-radius-tl, var(--default-border-radius)) var(--group-radius-tr, var(--default-border-radius))\n var(--group-radius-br, var(--default-border-radius)) var(--group-radius-bl, var(--default-border-radius));\n\n &-icon {\n color: #a3a9b9;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n background-color: var(--light-background-color);\n width: fit-content;\n height: fit-content;\n /* width: 16px;\n height: 16px; */\n }\n\n &-loading {\n background: transparent;\n\n &-spinner {\n width: 100%;\n height: 100%;\n }\n }\n\n &-pointer {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &:focus-visible {\n outline: none;\n border: 1px solid var(--primary-color);\n border-radius: 6px;\n }\n\n &-disabled {\n filter: brightness(0.8);\n cursor: not-allowed;\n }\n\n &-checkmark {\n border: 1.8px solid var(--~~text~~-color);\n border-radius: var(--checkmark-radius);\n position: relative;\n\n svg {\n stroke: var(--text-on-primary);\n stroke-dasharray: 5;\n stroke-dashoffset: 5;\n transition:\n transform 0.1s,\n stroke-dashoffset 0.4s;\n transition-delay: 0s, 0.2s;\n background: var(--primary-color);\n transform: scale(0);\n box-sizing: content-box;\n padding: 2px;\n border-radius: var(--default-border-radius);\n }\n\n &-checked {\n svg {\n stroke-dashoffset: 0;\n transform: scale(1) translate(-3px, -3px);\n }\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"checkbox.module.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.module.pcss"],"sourcesContent":["\n.checkbox {\n user-select: none;\n display: flex;\n align-items: center;\n column-gap: 10px;\n margin: -1px;\n border: 1px solid transparent;\n width: fit-content;\n /* The visible checkmark box (below) is nested inside this root, not directly on it — see\n input.module.pcss for why this variable exists: a wrapping ButtonGroup sets --group-radius-\n per corner on the position this occupies, and unlike border-radius itself, custom properties\n inherit through any nesting depth, reaching descendants a plain ancestor selector can't. /\n --checkmark-radius: var(--group-radius-tl, var(--default-border-radius)) var(--group-radius-tr, var(--default-border-radius))\n var(--group-radius-br, var(--default-border-radius)) var(--group-radius-bl, var(--default-border-radius));\n\n &-icon {\n color: #a3a9b9;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n background-color: var(--light-background-color);\n width: fit-content;\n height: fit-content;\n /* width: 16px;\n height: 16px; */\n }\n\n &-loading {\n background: transparent;\n\n &-spinner {\n width: 100%;\n height: 100%;\n }\n }\n\n &-pointer {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &:focus-visible {\n outline: none;\n border: 1px solid var(--primary-color);\n border-radius: 6px;\n }\n\n &-disabled {\n filter: brightness(0.8);\n cursor: not-allowed;\n }\n\n &-checkmark {\n border: 1.8px solid var(--border-color);\n border-radius: var(--checkmark-radius);\n position: relative;\n\n svg {\n stroke: var(--text-on-primary);\n stroke-dasharray: 5;\n stroke-dashoffset: 5;\n transition:\n transform 0.1s,\n stroke-dashoffset 0.4s;\n transition-delay: 0s, 0.2s;\n background: var(--primary-color);\n transform: scale(0);\n box-sizing: content-box;\n padding: 2px;\n border-radius: var(--default-border-radius);\n }\n\n &-checked {\n svg {\n stroke-dashoffset: 0;\n transform: scale(1) translate(-3px, -3px);\n }\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/input/input.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../tooltip/tooltip.mjs";import n from"../animatedIcon/animatedIcon.mjs";import r from"./input.module.mjs";import{InputIconPosition as i,InputType as a}from"./input.types.mjs";import ee,{useCallback as te,useEffect as o,useId as ne,useRef as s,useState as c}from"react";import l from"classnames";import{FontAwesomeIcon as u}from"@fortawesome/react-fontawesome";import{faEnvelope as re,faEye as ie,faEyeSlash as ae,faPen as oe,faPhone as se,faSearch as ce,faXmark as d}from"@fortawesome/free-solid-svg-icons";import{jsx as f,jsxs as p}from"react/jsx-runtime";function m(m){let{name:h=``,id:le,label:g=``,errorMessage:ue=``,isValid:de=!0,className:fe=``,style:pe,value:me=``,icon:he=null,iconPosition:ge,onChange:_=()=>{},onFocus:_e=null,onBlur:ve=null,onMouseEnter:ye=null,onMouseLeave:be=null,isUppercase:xe=!1,isRequired:Se=!1,tabIndex:Ce=0,type:v=void 0,isRow:we=!1,onIconClick:y=null,parse:b=null,formValidator:x=null,autoFocus:S=!1,suffix:C=null,upperRightLabel:w=null,labelInBorder:Te=!1,showCancel:Ee=!1,onClearClicked:De,min:Oe=null,max:ke=null,placeholder:T=``,useMatLabelStyle:E=!0,alwaysFloatLabel:Ae=!1,autoComplete:je=null,onClick:Me=()=>null,readOnly:D=!1,customInput:O,alwaysShowCancel:Ne=!1,multiline:k=!1,rows:A,autoResize:j=!1,classNames:M,styles:N,disabled:P=!1,...F}=e(`Input`,m),[I,Pe]=c(!1),[Fe,L]=c(!1),[R,Ie]=c(!1),[,Le]=c(0),z=s(null),B=s(x),Re=ne(),ze=le||h||Re,Be=te(()=>{let e=z.current;!e||!j||(e.style.height=`auto`,e.style.height=`${e.scrollHeight}px`)},[j]);o(()=>{Be()},[]),o(()=>{S&&z.current&&setTimeout(()=>{z.current?.focus()},1)},[S]),o(()=>{B.current=x;let e=B.current;if(!e)return;e.label=g??``,e.validate();let t=()=>Le(e=>e+1);return e.registerOnUpdateListener(t),()=>{e.removeOnUpdateListener(t)}},[x,g]);let Ve=()=>x?x.touched&&x.hasError():!de||!!ue,He=()=>!!(Se||x&&x.validators.find(e=>e.validatorId===`required`)),Ue=e=>{L(!0),ye&&ye(e)},We=e=>{L(!1),be&&be(e)},Ge=e=>{Pe(!0),_e&&_e(e)},Ke=e=>{B.current&&(B.current.touched=!0),Pe(!1),ve&&ve(e)},qe=e=>{let t,n;typeof e==`string`?n=e:(t=e,n=e.target.value),b&&(n=b(n)),x&&x.set(n),_&&_(n,t),Be()},Je=()=>{if(v!==a.Email)return v===a.Phone?`tel`:v===a.Search?`search`:v===`password`&&R?`text`:v},Ye=()=>{if(v===a.Email)return`email`;if(v===a.Phone)return`tel`;if(v===a.Search)return`search`},V=v&&v!==a.Date&&v!==a.Iban&&v!==a.HasNoIcon,Xe=v===a.Search||v===a.Password,H=!!he,Ze=H&&!Xe,Qe=v===a.Email||v===a.Phone||v===a.Search,U=(ge??(!E&&Qe?i.Left:i.Right))===i.Left,W={className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!y,[r.inputFieldIconLeft]:U}),onClick:y??void 0},G=he,$e=Ze&&G?ee.cloneElement(G,{className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!y&&!G.props.onClick,[r.inputFieldIconLeft]:U},G.props.className),onClick:y??G.props.onClick}):null,et=(V||H)&&U,tt={className:l(r.inputFieldIcon,r.inputFieldIconPassword,{[r.inputFieldIconLeft]:U}),onClick:()=>Ie(!R)},K=Ve(),q=g;q&&He()&&(q=`${q} *`);let nt=He()?f(`span`,{className:r.requiredMark,children:`*`}):null,J=x?x.value:me,Y=I&&!D,X=E&&(Ae||Y||J||v===a.Date),Z=v===a.Search&&!!J,Q=O?.props;function $(){x&&x.set(``),_?.(``),De?.()}return p(`div`,{className:l(r.input,{[r.inputIconLeft]:et},fe),style:pe,children:[p(`label`,{htmlFor:ze,className:l(r.inputLabel,M?.label,{[r.inputLabelColumn]:!we,[r.inputLabelInBorder]:Te}),style:N?.label,children:[g&&!E?p(`span`,{className:r.inputLabelText,children:[g,nt]}):null,w&&f(`div`,{className:l(r.inputUpperRightLabel,M?.upperRightLabel),style:N?.upperRightLabel,children:w}),p(`div`,{className:l(r.inputContainer,{[r.inputContainerMultiline]:k},M?.container),style:N?.container,onMouseEnter:Ue,onMouseLeave:We,children:[$e,ee.cloneElement(O||f(k?`textarea`:`input`,{}),{...F,className:l(r.inputField,{[r.inputFieldUppercase]:xe,[r.inputFieldDate]:v===a.Date,[r.inputFieldDefault]:v!==a.Date,[r.inputFieldWithIcon]:V||H,[r.inputFieldWithIconLeft]:et,[r.inputFieldMultiline]:k,[r.inputFieldMultilineAutoResize]:k&&j,[r.inputFieldReadOnly]:D&&!P},M?.input,Q?.className),style:Q?.style||N?.input?{...Q?.style,...N?.input}:void 0,name:h,id:ze,value:J,tabIndex:Ce,ref:O?void 0:z,onChange:qe,onFocus:Ge,onBlur:Ke,placeholder:E?``:T,autoComplete:je,onClick:Me,readOnly:D,disabled:P,...!k&&{type:Je(),inputMode:F.inputMode??Ye(),min:Oe,max:ke},...k&&A!==void 0&&{rows:A}}),C&&f(`div`,{className:l(r.inputFieldSuffix,M?.suffix),style:N?.suffix,children:C})]}),f(`fieldset`,{className:l(r.inputFieldset,M?.fieldset,{[r.inputFieldsetNoNotch]:!g,[r.inputContainerBorderFocused]:Y,[r.inputContainerBorderSearchFocused]:v===a.Search&&(Y||!!J),[r.inputContainerBorderInvalid]:K,[r.inputContainerBorderError]:K}),style:N?.fieldset,children:f(`legend`,{className:l(r.inputFieldsetLegend,{[r.inputFieldsetLegendActive]:X}),children:f(`span`,{children:q})})}),E&&g&&p(`div`,{className:l(r.inputMatLabel,{[r.inputMatLabelFloating]:X,[r.inputMatLabelMultiline]:k&&!X}),children:[g,nt]}),E&&T&&f(`div`,{className:l(r.inputPlaceholder,Y&&!J&&r.inputPlaceholderShown,k&&r.inputPlaceholderMultiline),children:T}),f(t,{variant:`error`,message:x?x.getCurrentErrorMessage():ue||``,isVisible:K&&(I||Fe)})]}),v===a.Phone&&!H&&f(u,{icon:se,...W}),v===a.Email&&!H&&f(u,{icon:re,...W}),v===a.Edit&&!H&&f(u,{icon:oe,...W}),v===a.Search&&f(n,{icon:Z?d:ce,className:l(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!Z,[r.inputFieldIconLeft]:U}),onClick:Z?$:void 0}),v===a.Password&&f(u,{icon:R?ae:ie,...tt}),(Ee&&J&&(I||Fe)||Ne)&&v!==a.Search&&f(u,{icon:d,className:r.inputFieldIcon,onClick:$,onMouseEnter:()=>L(!0),onMouseLeave:()=>L(!1)})]})}export{m as default};
+import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../tooltip/tooltip.mjs";import n from"../animatedIcon/animatedIcon.mjs";import r from"./input.module.mjs";import{InputIconPosition as i,InputType as a}from"./input.types.mjs";import ee,{useCallback as te,useEffect as o,useId as ne,useRef as re,useState as s}from"react";import c from"classnames";import{FontAwesomeIcon as l}from"@fortawesome/react-fontawesome";import{faEnvelope as ie,faEye as ae,faEyeSlash as oe,faPen as se,faPhone as ce,faSearch as le,faXmark as ue}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";function f(e){if(e)return{role:`button`,tabIndex:0,onKeyDown:t=>{t.key!==`Enter`&&t.key!==` `||(t.preventDefault(),e(t))}}}function de(de){let{name:fe=``,id:pe,label:p=``,errorMessage:me=``,isValid:he=!0,className:ge=``,style:_e,value:ve=``,icon:ye=null,iconPosition:be,onChange:m=()=>{},onFocus:h=null,onBlur:g=null,onMouseEnter:_=null,onMouseLeave:v=null,isUppercase:xe=!1,isRequired:Se=!1,tabIndex:Ce=0,type:y=void 0,isRow:we=!1,onIconClick:b=null,parse:x=null,formValidator:S=null,autoFocus:C=!1,suffix:w=null,upperRightLabel:T=null,labelInBorder:Te=!1,showCancel:Ee=!1,onClearClicked:De,min:Oe=null,max:ke=null,placeholder:E=``,useMatLabelStyle:D=!0,alwaysFloatLabel:Ae=!1,autoComplete:je=null,onClick:Me=()=>null,readOnly:O=!1,customInput:k,alwaysShowCancel:Ne=!1,multiline:A=!1,rows:j,autoResize:M=!1,classNames:N,styles:P,disabled:Pe=!1,...Fe}=e(`Input`,de),[F,Ie]=s(!1),[Le,I]=s(!1),[L,R]=s(!1),[,Re]=s(0),z=re(null),B=re(S),ze=ne(),Be=pe||fe||ze,Ve=te(()=>{let e=z.current;!e||!M||(e.style.height=`auto`,e.style.height=`${e.scrollHeight}px`)},[M]);o(()=>{Ve()},[]),o(()=>{C&&z.current&&setTimeout(()=>{z.current?.focus()},1)},[C]),o(()=>{B.current=S;let e=B.current;if(!e)return;e.label=p??``,e.validate();let t=()=>Re(e=>e+1);return e.registerOnUpdateListener(t),()=>{e.removeOnUpdateListener(t)}},[S,p]);let He=()=>S?S.touched&&S.hasError():!he||!!me,Ue=()=>!!(Se||S&&S.validators.find(e=>e.validatorId===`required`)),We=e=>{I(!0),_&&_(e)},Ge=e=>{I(!1),v&&v(e)},Ke=e=>{Ie(!0),h&&h(e)},qe=e=>{B.current&&(B.current.touched=!0),Ie(!1),g&&g(e)},Je=e=>{let t,n;typeof e==`string`?n=e:(t=e,n=e.target.value),x&&(n=x(n)),S&&S.set(n),m&&m(n,t),Ve()},Ye=()=>{if(y!==a.Email)return y===a.Phone?`tel`:y===a.Search?`search`:y===`password`&&L?`text`:y},Xe=()=>{if(y===a.Email)return`email`;if(y===a.Phone)return`tel`;if(y===a.Search)return`search`},Ze=y&&y!==a.Date&&y!==a.Iban&&y!==a.HasNoIcon,Qe=y===a.Search||y===a.Password,V=!!ye,$e=V&&!Qe,et=y===a.Email||y===a.Phone||y===a.Search,H=(be??(!D&&et?i.Left:i.Right))===i.Left,U={className:c(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!b,[r.inputFieldIconLeft]:H}),onClick:b??void 0,...f(b)},W=ye,G=b??W?.props.onClick,tt=$e&&W?ee.cloneElement(W,{className:c(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!G,[r.inputFieldIconLeft]:H},W.props.className),onClick:G,...f(G)}):null,nt=(Ze||V)&&H,rt={className:c(r.inputFieldIcon,r.inputFieldIconPassword,{[r.inputFieldIconLeft]:H}),onClick:()=>R(!L),...f(()=>R(!L)),"aria-label":L?`Hide password`:`Show password`},K=He(),q=p;q&&Ue()&&(q=`${q} *`);let it=Ue()?u(`span`,{className:r.requiredMark,children:`*`}):null,J=S?S.value:ve,Y=F&&!O,X=D&&(Ae||Y||J||y===a.Date),Z=y===a.Search&&!!J,Q=k?.props;function $(){S&&S.set(``),m?.(``),De?.()}return d(`div`,{className:c(r.input,{[r.inputIconLeft]:nt},ge),style:_e,children:[d(`label`,{htmlFor:Be,className:c(r.inputLabel,N?.label,{[r.inputLabelColumn]:!we,[r.inputLabelInBorder]:Te}),style:P?.label,children:[p&&!D?d(`span`,{className:r.inputLabelText,children:[p,it]}):null,T&&u(`div`,{className:c(r.inputUpperRightLabel,N?.upperRightLabel),style:P?.upperRightLabel,children:T}),d(`div`,{className:c(r.inputContainer,{[r.inputContainerMultiline]:A},N?.container),style:P?.container,onMouseEnter:We,onMouseLeave:Ge,children:[tt,ee.cloneElement(k||u(A?`textarea`:`input`,{}),{...Fe,className:c(r.inputField,{[r.inputFieldUppercase]:xe,[r.inputFieldDate]:y===a.Date,[r.inputFieldDefault]:y!==a.Date,[r.inputFieldWithIcon]:Ze||V,[r.inputFieldWithIconLeft]:nt,[r.inputFieldMultiline]:A,[r.inputFieldMultilineAutoResize]:A&&M,[r.inputFieldReadOnly]:O&&!Pe},N?.input,Q?.className),style:Q?.style||P?.input?{...Q?.style,...P?.input}:void 0,name:fe,id:Be,value:J,tabIndex:Ce,ref:k?void 0:z,onChange:Je,onFocus:Ke,onBlur:qe,placeholder:D?``:E,autoComplete:je,onClick:Me,readOnly:O,disabled:Pe,...!A&&{type:Ye(),inputMode:Fe.inputMode??Xe(),min:Oe,max:ke},...A&&j!==void 0&&{rows:j}}),w&&u(`div`,{className:c(r.inputFieldSuffix,N?.suffix),style:P?.suffix,children:w})]}),u(`fieldset`,{className:c(r.inputFieldset,N?.fieldset,{[r.inputFieldsetNoNotch]:!p,[r.inputContainerBorderFocused]:Y,[r.inputContainerBorderSearchFocused]:y===a.Search&&(Y||!!J),[r.inputContainerBorderInvalid]:K,[r.inputContainerBorderError]:K}),style:P?.fieldset,children:u(`legend`,{className:c(r.inputFieldsetLegend,{[r.inputFieldsetLegendActive]:X}),children:u(`span`,{children:q})})}),D&&p&&d(`div`,{className:c(r.inputMatLabel,{[r.inputMatLabelFloating]:X,[r.inputMatLabelMultiline]:A&&!X}),children:[p,it]}),D&&E&&u(`div`,{className:c(r.inputPlaceholder,Y&&!J&&r.inputPlaceholderShown,A&&r.inputPlaceholderMultiline),children:E}),u(t,{variant:`error`,message:S?S.getCurrentErrorMessage():me||``,isVisible:K&&(F||Le)})]}),y===a.Phone&&!V&&u(l,{icon:ce,...U}),y===a.Email&&!V&&u(l,{icon:ie,...U}),y===a.Edit&&!V&&u(l,{icon:se,...U}),y===a.Search&&u(n,{icon:Z?ue:le,className:c(r.inputFieldIcon,{[r.inputFieldIconNotClickable]:!Z,[r.inputFieldIconLeft]:H}),onClick:Z?$:void 0,...f(Z?$:void 0),"aria-label":Z?`Clear search`:void 0}),y===a.Password&&u(l,{icon:L?oe:ae,...rt}),(Ee&&J&&(F||Le)||Ne)&&y!==a.Search&&u(l,{icon:ue,className:r.inputFieldIcon,onClick:$,onMouseEnter:()=>I(!0),onMouseLeave:()=>I(!1),...f($),"aria-label":`Clear`})]})}export{de as default};
 //# sourceMappingURL=input.mjs.map

package/dist/esm/common/input/input.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.mjs","names":[],"sources":["../../../../package/common/input/input.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faPhone,\n faPen,\n faEnvelope,\n faSearch,\n faXmark,\n faEye as passwordHiddenIcon,\n faEyeSlash as passwordShownIcon,\n} from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\nimport AnimatedIcon from 'components/common/animatedIcon';\nimport { useComponentDefaults } from 'components/common/configProvider';\nimport styles from './input.module.pcss';\nimport type { InputProps } from './input.types';\nimport { InputType, InputIconPosition } from './input.types';\n\nfunction Input(props: InputProps) {\n const {\n name = '',\n id,\n label = '',\n errorMessage = '',\n isValid = true,\n className = '',\n style,\n value = '',\n icon = null,\n iconPosition,\n onChange = () => {},\n onFocus: onFocusProp = null,\n onBlur: onBlurProp = null,\n onMouseEnter: onMouseEnterProp = null,\n onMouseLeave: onMouseLeaveProp = null,\n isUppercase = false,\n isRequired = false,\n tabIndex = 0,\n type = undefined,\n isRow = false,\n onIconClick = null,\n parse = null,\n formValidator = null,\n autoFocus = false,\n suffix = null,\n upperRightLabel = null,\n labelInBorder = false,\n showCancel = false,\n onClearClicked,\n min = null,\n max = null,\n placeholder = '',\n useMatLabelStyle = true,\n alwaysFloatLabel = false,\n autoComplete = null,\n onClick = () => null,\n readOnly = false,\n customInput,\n alwaysShowCancel = false,\n multiline = false,\n rows,\n autoResize = false,\n classNames,\n styles: slotStyles,\n disabled = false,\n ...rest\n } = useComponentDefaults('Input', props);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [isPasswordShown, setIsPasswordShown] = useState(false);\n const [, forceUpdate] = useState(0);\n\n const inputRef = useRef<HTMLInputElement \| HTMLTextAreaElement>(null);\n const fvRef = useRef(formValidator);\n\n const generatedId = useId();\n const inputId = id \|\| name \|\| generatedId;\n\n const resizeTextarea = useCallback(() => {\n const el = inputRef.current;\n if (!el \|\| !autoResize) return;\n el.style.height = 'auto';\n el.style.height = `${el.scrollHeight}px`;\n }, [autoResize]);\n\n useEffect(() => {\n resizeTextarea();\n }, []);\n\n useEffect(() => {\n if (autoFocus && inputRef.current) {\n setTimeout(() => { inputRef.current?.focus(); }, 1);\n }\n }, [autoFocus]);\n\n useEffect(() => {\n fvRef.current = formValidator;\n const fv = fvRef.current;\n if (!fv) return;\n fv.label = label ?? '';\n fv.validate();\n const listener = () => forceUpdate(n => n + 1);\n fv.registerOnUpdateListener(listener);\n return () => { fv.removeOnUpdateListener(listener); };\n }, [formValidator, label]);\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 && formValidator.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n )));\n };\n\n const onMouseEnterHandler = (event: React.MouseEvent) => {\n setIsHovered(true);\n if (onMouseEnterProp) onMouseEnterProp(event);\n };\n\n const onMouseLeaveHandler = (event: React.MouseEvent) => {\n setIsHovered(false);\n if (onMouseLeaveProp) onMouseLeaveProp(event);\n };\n\n const onFocusHandler = (event: React.FocusEvent) => {\n setIsFocused(true);\n if (onFocusProp) onFocusProp(event);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n if (onBlurProp) onBlurProp(event);\n };\n\n const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement> \| string): void => {\n let parsedEvent: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement> \| undefined;\n let val: string;\n\n if (typeof event !== 'string') {\n parsedEvent = event;\n val = event.target.value;\n } else {\n val = event;\n }\n\n if (parse) val = parse(val);\n if (formValidator) formValidator.set(val);\n if (onChange) onChange(val, parsedEvent);\n resizeTextarea();\n };\n\n const getInputType = (): string \| undefined => {\n if (type === InputType.Email) return undefined;\n if (type === InputType.Phone) return 'tel';\n if (type === InputType.Search) return 'search';\n if (type === 'password' && isPasswordShown) return 'text';\n return type;\n };\n\n const getInputMode = (): React.HTMLAttributes<HTMLInputElement>['inputMode'] => {\n if (type === InputType.Email) return 'email';\n if (type === InputType.Phone) return 'tel';\n if (type === InputType.Search) return 'search';\n return undefined;\n };\n\n const hasIcon =\n type &&\n type !== InputType.Date &&\n type !== InputType.Iban &&\n type !== InputType.HasNoIcon;\n\n const isFunctionalIconType = type === InputType.Search \|\| type === InputType.Password;\n const hasCustomIcon = !!icon;\n const customIconApplies = hasCustomIcon && !isFunctionalIconType;\n\n const defaultsLeftWithoutMatLabel = type === InputType.Email \|\| type === InputType.Phone \|\| type === InputType.Search;\n const resolvedIconPosition = iconPosition ?? (!useMatLabelStyle && defaultsLeftWithoutMatLabel ? InputIconPosition.Left : InputIconPosition.Right);\n const iconIsLeft = resolvedIconPosition === InputIconPosition.Left;\n\n const iconProps = {\n className: cx(styles.inputFieldIcon, {\n [styles.inputFieldIconNotClickable]: !onIconClick,\n [styles.inputFieldIconLeft]: iconIsLeft,\n }),\n onClick: onIconClick ?? undefined,\n };\n\n const customIcon = icon as React.ReactElement<{ className?: string; onClick?: React.MouseEventHandler }> \| null;\n const renderedIcon = customIconApplies && customIcon\n ? React.cloneElement(customIcon, {\n className: cx(\n styles.inputFieldIcon,\n {\n [styles.inputFieldIconNotClickable]: !onIconClick && !customIcon.props.onClick,\n [styles.inputFieldIconLeft]: iconIsLeft,\n },\n customIcon.props.className,\n ),\n onClick: onIconClick ?? customIcon.props.onClick,\n })\n : null;\n\n const hasLeftIcon = (hasIcon \|\| hasCustomIcon) && iconIsLeft;\n\n const passwordIconProps = {\n className: cx(styles.inputFieldIcon, styles.inputFieldIconPassword, { [styles.inputFieldIconLeft]: iconIsLeft }),\n onClick: () => setIsPasswordShown(!isPasswordShown),\n };\n\n const hasErr = hasError();\n\n let editedLabel = label;\n if (editedLabel && computedIsRequired()) editedLabel = `${editedLabel} `;\n const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}></span> : null;\n\n const currVal = formValidator ? formValidator.value : value;\n const showFocus = isFocused && !readOnly;\n const shouldFloatLabel = useMatLabelStyle && (alwaysFloatLabel \|\| showFocus \|\| currVal \|\| type === InputType.Date);\n\n const isSearchCleared = type === InputType.Search && !!currVal;\n\n const customInputProps = customInput?.props as\n \| { className?: string; style?: React.CSSProperties }\n \| undefined;\n\n function handleClear() {\n if (formValidator) formValidator.set('');\n onChange?.('');\n onClearClicked?.();\n }\n\n return (\n <div className={cx(styles.input, { [styles.inputIconLeft]: hasLeftIcon }, className)} style={style}>\n <label\n htmlFor={inputId}\n className={cx(styles.inputLabel, classNames?.label, {\n [styles.inputLabelColumn]: !isRow,\n [styles.inputLabelInBorder]: labelInBorder,\n })}\n style={slotStyles?.label}\n >\n {label && !useMatLabelStyle ? (\n <span className={styles.inputLabelText}>\n {label}\n {requiredMark}\n </span>\n ) : null}\n {upperRightLabel && (\n <div className={cx(styles.inputUpperRightLabel, classNames?.upperRightLabel)} style={slotStyles?.upperRightLabel}>\n {upperRightLabel}\n </div>\n )}\n <div\n className={cx(styles.inputContainer, { [styles.inputContainerMultiline]: multiline }, classNames?.container)}\n style={slotStyles?.container}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n >\n {renderedIcon}\n {React.cloneElement(customInput \|\| (multiline ? <textarea /> : <input />), {\n ...rest,\n className: cx(\n styles.inputField,\n {\n [styles.inputFieldUppercase]: isUppercase,\n [styles.inputFieldDate]: type === InputType.Date,\n [styles.inputFieldDefault]: type !== InputType.Date,\n [styles.inputFieldWithIcon]: hasIcon \|\| hasCustomIcon,\n [styles.inputFieldWithIconLeft]: hasLeftIcon,\n [styles.inputFieldMultiline]: multiline,\n [styles.inputFieldMultilineAutoResize]: multiline && autoResize,\n [styles.inputFieldReadOnly]: readOnly && !disabled,\n },\n classNames?.input,\n customInputProps?.className,\n ),\n style: customInputProps?.style \|\| slotStyles?.input\n ? { ...customInputProps?.style, ...slotStyles?.input }\n : undefined,\n name,\n id: inputId,\n value: currVal,\n tabIndex,\n ref: customInput ? undefined : inputRef,\n onChange: onChangeHandler,\n onFocus: onFocusHandler,\n onBlur: onBlurHandler,\n placeholder: !useMatLabelStyle ? placeholder : '',\n autoComplete,\n onClick,\n readOnly,\n disabled,\n ...(!multiline && { type: getInputType(), inputMode: rest.inputMode ?? getInputMode(), min, max }),\n ...(multiline && rows !== undefined && { rows }),\n })}\n {suffix && <div className={cx(styles.inputFieldSuffix, classNames?.suffix)} style={slotStyles?.suffix}>{suffix}</div>}\n </div>\n <fieldset\n className={cx(styles.inputFieldset, classNames?.fieldset, {\n [styles.inputFieldsetNoNotch]: !label,\n [styles.inputContainerBorderFocused]: showFocus,\n [styles.inputContainerBorderSearchFocused]:\n type === InputType.Search && (showFocus \|\| !!currVal),\n [styles.inputContainerBorderInvalid]: hasErr,\n [styles.inputContainerBorderError]: hasErr,\n })}\n style={slotStyles?.fieldset}\n >\n <legend\n className={cx(styles.inputFieldsetLegend, {\n [styles.inputFieldsetLegendActive]: shouldFloatLabel,\n })}\n >\n <span>{editedLabel}</span>\n </legend>\n </fieldset>\n {useMatLabelStyle && label && (\n <div\n className={cx(styles.inputMatLabel, {\n [styles.inputMatLabelFloating]: shouldFloatLabel,\n [styles.inputMatLabelMultiline]: multiline && !shouldFloatLabel,\n })}\n >\n {label}\n {requiredMark}\n </div>\n )}\n {useMatLabelStyle && placeholder && (\n <div\n className={cx(\n styles.inputPlaceholder,\n showFocus && !currVal && styles.inputPlaceholderShown,\n multiline && styles.inputPlaceholderMultiline,\n )}\n >\n {placeholder}\n </div>\n )}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage \|\| '')}\n isVisible={hasErr && (isFocused \|\| isHovered)}\n />\n </label>\n\n {type === InputType.Phone && !hasCustomIcon && <FontAwesomeIcon icon={faPhone} {...iconProps} />}\n {type === InputType.Email && !hasCustomIcon && <FontAwesomeIcon icon={faEnvelope} {...iconProps} />}\n {type === InputType.Edit && !hasCustomIcon && <FontAwesomeIcon icon={faPen} {...iconProps} />}\n {type === InputType.Search && (\n <AnimatedIcon\n icon={isSearchCleared ? faXmark : faSearch}\n className={cx(styles.inputFieldIcon, {\n [styles.inputFieldIconNotClickable]: !isSearchCleared,\n [styles.inputFieldIconLeft]: iconIsLeft,\n })}\n onClick={isSearchCleared ? handleClear : undefined}\n />\n )}\n {type === InputType.Password && (\n <FontAwesomeIcon\n icon={isPasswordShown ? passwordShownIcon : passwordHiddenIcon}\n {...passwordIconProps}\n />\n )}\n\n {((showCancel && currVal && (isFocused \|\| isHovered)) \|\| alwaysShowCancel) && type !== InputType.Search && (\n <FontAwesomeIcon\n icon={faXmark}\n className={styles.inputFieldIcon}\n onClick={handleClear}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n />\n )}\n </div>\n );\n}\n\nexport default Input;\n"],"mappings":"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"}
1	+ {"version":3,"file":"input.mjs","names":[],"sources":["../../../../package/common/input/input.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, useId } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport {\n faPhone,\n faPen,\n faEnvelope,\n faSearch,\n faXmark,\n faEye as passwordHiddenIcon,\n faEyeSlash as passwordShownIcon,\n} from '@fortawesome/free-solid-svg-icons';\nimport Tooltip from 'components/common/tooltip';\nimport AnimatedIcon from 'components/common/animatedIcon';\nimport { useComponentDefaults } from 'components/common/configProvider';\nimport styles from './input.module.pcss';\nimport type { InputProps } from './input.types';\nimport { InputType, InputIconPosition } from './input.types';\n\nfunction keyboardActivationProps(onActivate?: ((event: React.SyntheticEvent) => void) \| null) {\n if (!onActivate) return undefined;\n return {\n role: 'button' as const,\n tabIndex: 0,\n onKeyDown: (event: React.KeyboardEvent) => {\n if (event.key !== 'Enter' && event.key !== ' ') return;\n event.preventDefault();\n onActivate(event);\n },\n };\n}\n\nfunction Input(props: InputProps) {\n const {\n name = '',\n id,\n label = '',\n errorMessage = '',\n isValid = true,\n className = '',\n style,\n value = '',\n icon = null,\n iconPosition,\n onChange = () => {},\n onFocus: onFocusProp = null,\n onBlur: onBlurProp = null,\n onMouseEnter: onMouseEnterProp = null,\n onMouseLeave: onMouseLeaveProp = null,\n isUppercase = false,\n isRequired = false,\n tabIndex = 0,\n type = undefined,\n isRow = false,\n onIconClick = null,\n parse = null,\n formValidator = null,\n autoFocus = false,\n suffix = null,\n upperRightLabel = null,\n labelInBorder = false,\n showCancel = false,\n onClearClicked,\n min = null,\n max = null,\n placeholder = '',\n useMatLabelStyle = true,\n alwaysFloatLabel = false,\n autoComplete = null,\n onClick = () => null,\n readOnly = false,\n customInput,\n alwaysShowCancel = false,\n multiline = false,\n rows,\n autoResize = false,\n classNames,\n styles: slotStyles,\n disabled = false,\n ...rest\n } = useComponentDefaults('Input', props);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [isPasswordShown, setIsPasswordShown] = useState(false);\n const [, forceUpdate] = useState(0);\n\n const inputRef = useRef<HTMLInputElement \| HTMLTextAreaElement>(null);\n const fvRef = useRef(formValidator);\n\n const generatedId = useId();\n const inputId = id \|\| name \|\| generatedId;\n\n const resizeTextarea = useCallback(() => {\n const el = inputRef.current;\n if (!el \|\| !autoResize) return;\n el.style.height = 'auto';\n el.style.height = `${el.scrollHeight}px`;\n }, [autoResize]);\n\n useEffect(() => {\n resizeTextarea();\n }, []);\n\n useEffect(() => {\n if (autoFocus && inputRef.current) {\n setTimeout(() => { inputRef.current?.focus(); }, 1);\n }\n }, [autoFocus]);\n\n useEffect(() => {\n fvRef.current = formValidator;\n const fv = fvRef.current;\n if (!fv) return;\n fv.label = label ?? '';\n fv.validate();\n const listener = () => forceUpdate(n => n + 1);\n fv.registerOnUpdateListener(listener);\n return () => { fv.removeOnUpdateListener(listener); };\n }, [formValidator, label]);\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 && formValidator.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n )));\n };\n\n const onMouseEnterHandler = (event: React.MouseEvent) => {\n setIsHovered(true);\n if (onMouseEnterProp) onMouseEnterProp(event);\n };\n\n const onMouseLeaveHandler = (event: React.MouseEvent) => {\n setIsHovered(false);\n if (onMouseLeaveProp) onMouseLeaveProp(event);\n };\n\n const onFocusHandler = (event: React.FocusEvent) => {\n setIsFocused(true);\n if (onFocusProp) onFocusProp(event);\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n if (onBlurProp) onBlurProp(event);\n };\n\n const onChangeHandler = (event: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement> \| string): void => {\n let parsedEvent: React.ChangeEvent<HTMLInputElement \| HTMLTextAreaElement> \| undefined;\n let val: string;\n\n if (typeof event !== 'string') {\n parsedEvent = event;\n val = event.target.value;\n } else {\n val = event;\n }\n\n if (parse) val = parse(val);\n if (formValidator) formValidator.set(val);\n if (onChange) onChange(val, parsedEvent);\n resizeTextarea();\n };\n\n const getInputType = (): string \| undefined => {\n if (type === InputType.Email) return undefined;\n if (type === InputType.Phone) return 'tel';\n if (type === InputType.Search) return 'search';\n if (type === 'password' && isPasswordShown) return 'text';\n return type;\n };\n\n const getInputMode = (): React.HTMLAttributes<HTMLInputElement>['inputMode'] => {\n if (type === InputType.Email) return 'email';\n if (type === InputType.Phone) return 'tel';\n if (type === InputType.Search) return 'search';\n return undefined;\n };\n\n const hasIcon =\n type &&\n type !== InputType.Date &&\n type !== InputType.Iban &&\n type !== InputType.HasNoIcon;\n\n const isFunctionalIconType = type === InputType.Search \|\| type === InputType.Password;\n const hasCustomIcon = !!icon;\n const customIconApplies = hasCustomIcon && !isFunctionalIconType;\n\n const defaultsLeftWithoutMatLabel = type === InputType.Email \|\| type === InputType.Phone \|\| type === InputType.Search;\n const resolvedIconPosition = iconPosition ?? (!useMatLabelStyle && defaultsLeftWithoutMatLabel ? InputIconPosition.Left : InputIconPosition.Right);\n const iconIsLeft = resolvedIconPosition === InputIconPosition.Left;\n\n const iconProps = {\n className: cx(styles.inputFieldIcon, {\n [styles.inputFieldIconNotClickable]: !onIconClick,\n [styles.inputFieldIconLeft]: iconIsLeft,\n }),\n onClick: onIconClick ?? undefined,\n ...keyboardActivationProps(onIconClick),\n };\n\n const customIcon = icon as React.ReactElement<{ className?: string; onClick?: React.MouseEventHandler }> \| null;\n const resolvedCustomIconClick = onIconClick ?? customIcon?.props.onClick;\n const renderedIcon = customIconApplies && customIcon\n ? React.cloneElement(customIcon, {\n className: cx(\n styles.inputFieldIcon,\n {\n [styles.inputFieldIconNotClickable]: !resolvedCustomIconClick,\n [styles.inputFieldIconLeft]: iconIsLeft,\n },\n customIcon.props.className,\n ),\n onClick: resolvedCustomIconClick,\n ...keyboardActivationProps(resolvedCustomIconClick as ((event: React.SyntheticEvent) => void) \| undefined),\n })\n : null;\n\n const hasLeftIcon = (hasIcon \|\| hasCustomIcon) && iconIsLeft;\n\n const passwordIconProps = {\n className: cx(styles.inputFieldIcon, styles.inputFieldIconPassword, { [styles.inputFieldIconLeft]: iconIsLeft }),\n onClick: () => setIsPasswordShown(!isPasswordShown),\n ...keyboardActivationProps(() => setIsPasswordShown(!isPasswordShown)),\n 'aria-label': isPasswordShown ? 'Hide password' : 'Show password',\n };\n\n const hasErr = hasError();\n\n let editedLabel = label;\n if (editedLabel && computedIsRequired()) editedLabel = `${editedLabel} `;\n const requiredMark = computedIsRequired() ? <span className={styles.requiredMark}></span> : null;\n\n const currVal = formValidator ? formValidator.value : value;\n const showFocus = isFocused && !readOnly;\n const shouldFloatLabel = useMatLabelStyle && (alwaysFloatLabel \|\| showFocus \|\| currVal \|\| type === InputType.Date);\n\n const isSearchCleared = type === InputType.Search && !!currVal;\n\n const customInputProps = customInput?.props as\n \| { className?: string; style?: React.CSSProperties }\n \| undefined;\n\n function handleClear() {\n if (formValidator) formValidator.set('');\n onChange?.('');\n onClearClicked?.();\n }\n\n return (\n <div className={cx(styles.input, { [styles.inputIconLeft]: hasLeftIcon }, className)} style={style}>\n <label\n htmlFor={inputId}\n className={cx(styles.inputLabel, classNames?.label, {\n [styles.inputLabelColumn]: !isRow,\n [styles.inputLabelInBorder]: labelInBorder,\n })}\n style={slotStyles?.label}\n >\n {label && !useMatLabelStyle ? (\n <span className={styles.inputLabelText}>\n {label}\n {requiredMark}\n </span>\n ) : null}\n {upperRightLabel && (\n <div className={cx(styles.inputUpperRightLabel, classNames?.upperRightLabel)} style={slotStyles?.upperRightLabel}>\n {upperRightLabel}\n </div>\n )}\n <div\n className={cx(styles.inputContainer, { [styles.inputContainerMultiline]: multiline }, classNames?.container)}\n style={slotStyles?.container}\n onMouseEnter={onMouseEnterHandler}\n onMouseLeave={onMouseLeaveHandler}\n >\n {renderedIcon}\n {React.cloneElement(customInput \|\| (multiline ? <textarea /> : <input />), {\n ...rest,\n className: cx(\n styles.inputField,\n {\n [styles.inputFieldUppercase]: isUppercase,\n [styles.inputFieldDate]: type === InputType.Date,\n [styles.inputFieldDefault]: type !== InputType.Date,\n [styles.inputFieldWithIcon]: hasIcon \|\| hasCustomIcon,\n [styles.inputFieldWithIconLeft]: hasLeftIcon,\n [styles.inputFieldMultiline]: multiline,\n [styles.inputFieldMultilineAutoResize]: multiline && autoResize,\n [styles.inputFieldReadOnly]: readOnly && !disabled,\n },\n classNames?.input,\n customInputProps?.className,\n ),\n style: customInputProps?.style \|\| slotStyles?.input\n ? { ...customInputProps?.style, ...slotStyles?.input }\n : undefined,\n name,\n id: inputId,\n value: currVal,\n tabIndex,\n ref: customInput ? undefined : inputRef,\n onChange: onChangeHandler,\n onFocus: onFocusHandler,\n onBlur: onBlurHandler,\n placeholder: !useMatLabelStyle ? placeholder : '',\n autoComplete,\n onClick,\n readOnly,\n disabled,\n ...(!multiline && { type: getInputType(), inputMode: rest.inputMode ?? getInputMode(), min, max }),\n ...(multiline && rows !== undefined && { rows }),\n })}\n {suffix && <div className={cx(styles.inputFieldSuffix, classNames?.suffix)} style={slotStyles?.suffix}>{suffix}</div>}\n </div>\n <fieldset\n className={cx(styles.inputFieldset, classNames?.fieldset, {\n [styles.inputFieldsetNoNotch]: !label,\n [styles.inputContainerBorderFocused]: showFocus,\n [styles.inputContainerBorderSearchFocused]:\n type === InputType.Search && (showFocus \|\| !!currVal),\n [styles.inputContainerBorderInvalid]: hasErr,\n [styles.inputContainerBorderError]: hasErr,\n })}\n style={slotStyles?.fieldset}\n >\n <legend\n className={cx(styles.inputFieldsetLegend, {\n [styles.inputFieldsetLegendActive]: shouldFloatLabel,\n })}\n >\n <span>{editedLabel}</span>\n </legend>\n </fieldset>\n {useMatLabelStyle && label && (\n <div\n className={cx(styles.inputMatLabel, {\n [styles.inputMatLabelFloating]: shouldFloatLabel,\n [styles.inputMatLabelMultiline]: multiline && !shouldFloatLabel,\n })}\n >\n {label}\n {requiredMark}\n </div>\n )}\n {useMatLabelStyle && placeholder && (\n <div\n className={cx(\n styles.inputPlaceholder,\n showFocus && !currVal && styles.inputPlaceholderShown,\n multiline && styles.inputPlaceholderMultiline,\n )}\n >\n {placeholder}\n </div>\n )}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage \|\| '')}\n isVisible={hasErr && (isFocused \|\| isHovered)}\n />\n </label>\n\n {type === InputType.Phone && !hasCustomIcon && <FontAwesomeIcon icon={faPhone} {...iconProps} />}\n {type === InputType.Email && !hasCustomIcon && <FontAwesomeIcon icon={faEnvelope} {...iconProps} />}\n {type === InputType.Edit && !hasCustomIcon && <FontAwesomeIcon icon={faPen} {...iconProps} />}\n {type === InputType.Search && (\n <AnimatedIcon\n icon={isSearchCleared ? faXmark : faSearch}\n className={cx(styles.inputFieldIcon, {\n [styles.inputFieldIconNotClickable]: !isSearchCleared,\n [styles.inputFieldIconLeft]: iconIsLeft,\n })}\n onClick={isSearchCleared ? handleClear : undefined}\n {...keyboardActivationProps(isSearchCleared ? handleClear : undefined)}\n aria-label={isSearchCleared ? 'Clear search' : undefined}\n />\n )}\n {type === InputType.Password && (\n <FontAwesomeIcon\n icon={isPasswordShown ? passwordShownIcon : passwordHiddenIcon}\n {...passwordIconProps}\n />\n )}\n\n {((showCancel && currVal && (isFocused \|\| isHovered)) \|\| alwaysShowCancel) && type !== InputType.Search && (\n <FontAwesomeIcon\n icon={faXmark}\n className={styles.inputFieldIcon}\n onClick={handleClear}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n {...keyboardActivationProps(handleClear)}\n aria-label=\"Clear\"\n />\n )}\n </div>\n );\n}\n\nexport default Input;\n"],"mappings":"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"}

package/dist/esm/common/input/input.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["\n.required-mark {\n padding: 0px 0px 0px 4px;\n color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n position: relative;\n width: 100%;\n --input-notch-height: 1.75em;\n --input-icon-size: 1.2em;\n --input-icon-offset: 0.6em;\n --input-icon-gutter: 2.2em;\n /* The visible border lives on `fieldset`/`container` below, not this root — buried inside a\n `<label>`, out of reach of a plain ancestor selector. --group-radius-* are custom properties\n (not defined here) that a wrapping ButtonGroup sets per corner on the position it occupies;\n unlike border-radius itself they inherit through any nesting depth, so they reach these\n descendants and flatten the right corners when this Input sits inside a ButtonGroup. /\n --input-radius: var(--group-radius-tl, var(--default-border-radius)) var(--group-radius-tr, var(--default-border-radius))\n var(--group-radius-br, var(--default-border-radius)) var(--group-radius-bl, var(--default-border-radius));\n\n &-placeholder {\n position: absolute;\n top: 50%;\n left: 7px;\n transform: translateY(-50%);\n transition: all 0.2s;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n left: 7px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1em;\n color: var(--input-label-resting-color, var(--text-light));\n pointer-events: none;\n user-select: none;\n\n &-floating {\n top: 0;\n bottom: auto;\n left: 14px;\n right: 0;\n font-size: 0.8em;\n color: var(--input-label-floating-color, var(--text-color));\n transform: translateY(-50%);\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n padding: 0;\n min-width: 0;\n box-sizing: border-box;\n border-radius: var(--input-radius);\n font-size: 0.8em;\n inset: calc(var(--input-notch-height) / -2) 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 &-no-notch {\n / Only Firefox actually renders the reserved notch space as a visible overlap on\n label-less inputs (e.g. crossing a divider directly above it in a tightly-packed\n layout like the sidebar search box); Chrome's rendering was never broken, just\n consistently sized with every other input. @supports (-moz-appearance: none) is a\n reliable Firefox-only feature query, so this scopes the fix to where it's needed\n instead of changing every browser's sizing. /\n @supports (-moz-appearance: none) {\n inset: 0;\n }\n }\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 line-height: var(--input-notch-height);\n padding: 0 5px;\n opacity: 0;\n }\n\n span:empty {\n padding: 0.000001px;\n }\n }\n }\n\n &-iconLeft {\n .input-matLabel {\n left: var(--input-icon-gutter);\n\n &-floating {\n left: calc(var(--input-icon-gutter) + 0.5em);\n }\n }\n\n .input-placeholder {\n left: var(--input-icon-gutter);\n }\n\n .input-fieldset {\n padding-left: var(--input-icon-gutter);\n }\n }\n\n &-container {\n display: flex;\n align-items: center;\n border-radius: var(--input-radius);\n background-color: var(--input-background);\n transition: border-color;\n cursor: text;\n height: 100%;\n\n &-multiline {\n overflow: hidden;\n padding-top: 10px;\n align-items: flex-start;\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 &-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\n &-label {\n display: flex;\n color: var(--text-color);\n height: 100%;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n white-space: nowrap;\n margin-right: 5px;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n color: color(var(--border-color) lightness(40%));\n background-color: transparent;\n font-size: 12px;\n position: absolute;\n top: -15px;\n white-space: nowrap;\n }\n }\n\n &-upper-right-label {\n position: absolute;\n transform: translateY(calc(-100% - 1.5px));\n right: 8px;\n min-height: 12px;\n font-size: 12px;\n color: color(var(--border-color) lightness(40%));\n }\n\n &-field {\n appearance: none;\n -webkit-appearance: none;\n font-family: inherit;\n font-size: inherit;\n box-sizing: border-box;\n resize: none;\n width: 100%;\n border: none;\n border-radius: var(--default-border-radius);\n overflow: hidden;\n line-height: 1.25;\n color: var(--text-color);\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: var(--text-light);\n }\n\n / The browser's own search-cancel decoration doesn't match the theme — Search has its own\n themed clear icon (see isSearchCleared in input.tsx) that replaces it. */\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n }\n\n &-withIcon {\n padding-right: var(--input-icon-gutter) !important;\n\n &-left {\n padding-right: 0.643em !important;\n padding-left: var(--input-icon-gutter) !important;\n }\n }\n\n &-suffix {\n padding-right: 9px;\n }\n\n &-date {\n padding: 6px 9px;\n color-scheme: dark;\n\n svg {\n color: white;\n }\n }\n\n &-default {\n padding: 8px 7.5px 6px;\n }\n\n &[disabled] {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n opacity: 1;\n\n &::placeholder {\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n }\n }\n\n &-readOnly {\n cursor: default;\n color: var(--text-dark);\n -webkit-text-fill-color: var(--text-dark);\n }\n\n &-uppercase {\n text-transform: uppercase;\n }\n\n &-multiline {\n overflow-y: auto;\n resize: vertical;\n padding-top: 4px;\n min-height: 30px;\n\n &-autoResize {\n resize: none;\n overflow: hidden;\n }\n }\n\n &-icon {\n appearance: none;\n -webkit-appearance: none;\n box-sizing: border-box;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n border: none;\n position: absolute;\n outline: none;\n right: var(--input-icon-offset);\n color: var(--input-icon-color);\n width: var(--input-icon-size) !important;\n height: var(--input-icon-size) !important;\n user-select: none;\n top: 50%;\n transform: translateY(-50%);\n\n &-left {\n left: var(--input-icon-offset);\n }\n\n &-notClickable {\n pointer-events: none;\n }\n }\n }\n\n &-error {\n height: 1em;\n padding-top: 3px;\n color: var(--error-font-color);\n font-size: 11px;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 0.5;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["\n.required-mark {\n padding: 0px 0px 0px 4px;\n color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n position: relative;\n width: 100%;\n --input-notch-height: 1.75em;\n --input-icon-size: 1.2em;\n --input-icon-offset: 0.6em;\n --input-icon-gutter: 2.2em;\n /* The visible border lives on `fieldset`/`container` below, not this root — buried inside a\n `<label>`, out of reach of a plain ancestor selector. --group-radius-* are custom properties\n (not defined here) that a wrapping ButtonGroup sets per corner on the position it occupies;\n unlike border-radius itself they inherit through any nesting depth, so they reach these\n descendants and flatten the right corners when this Input sits inside a ButtonGroup. /\n --input-radius: var(--group-radius-tl, var(--default-border-radius)) var(--group-radius-tr, var(--default-border-radius))\n var(--group-radius-br, var(--default-border-radius)) var(--group-radius-bl, var(--default-border-radius));\n\n &-placeholder {\n position: absolute;\n top: 50%;\n left: 7px;\n transform: translateY(-50%);\n transition: all 0.2s;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n left: 7px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1em;\n color: var(--input-label-resting-color, var(--text-light));\n pointer-events: none;\n user-select: none;\n\n &-floating {\n top: 0;\n bottom: auto;\n left: 14px;\n right: 0;\n font-size: 0.8em;\n color: var(--input-label-floating-color, var(--text-color));\n transform: translateY(-50%);\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n padding: 0;\n min-width: 0;\n box-sizing: border-box;\n border-radius: var(--input-radius);\n font-size: 0.8em;\n inset: calc(var(--input-notch-height) / -2) 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 &-no-notch {\n / Only Firefox actually renders the reserved notch space as a visible overlap on\n label-less inputs (e.g. crossing a divider directly above it in a tightly-packed\n layout like the sidebar search box); Chrome's rendering was never broken, just\n consistently sized with every other input. @supports (-moz-appearance: none) is a\n reliable Firefox-only feature query, so this scopes the fix to where it's needed\n instead of changing every browser's sizing. /\n @supports (-moz-appearance: none) {\n inset: 0;\n }\n }\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 line-height: var(--input-notch-height);\n padding: 0 5px;\n opacity: 0;\n }\n\n span:empty {\n padding: 0.000001px;\n }\n }\n }\n\n &-iconLeft {\n .input-matLabel {\n left: var(--input-icon-gutter);\n\n &-floating {\n left: calc(var(--input-icon-gutter) + 0.5em);\n }\n }\n\n .input-placeholder {\n left: var(--input-icon-gutter);\n }\n\n .input-fieldset {\n padding-left: var(--input-icon-gutter);\n }\n }\n\n &-container {\n display: flex;\n align-items: center;\n border-radius: var(--input-radius);\n background-color: var(--input-background);\n transition: border-color;\n cursor: text;\n height: 100%;\n\n &-multiline {\n overflow: hidden;\n padding-top: 10px;\n align-items: flex-start;\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 &-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\n &-label {\n display: flex;\n color: var(--text-color);\n height: 100%;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n white-space: nowrap;\n margin-right: 5px;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n color: color(var(--border-color) lightness(40%));\n background-color: transparent;\n font-size: 12px;\n position: absolute;\n top: -15px;\n white-space: nowrap;\n }\n }\n\n &-upper-right-label {\n position: absolute;\n transform: translateY(calc(-100% - 1.5px));\n right: 8px;\n min-height: 12px;\n font-size: 12px;\n color: color(var(--border-color) lightness(40%));\n }\n\n &-field {\n appearance: none;\n -webkit-appearance: none;\n font-family: inherit;\n font-size: inherit;\n box-sizing: border-box;\n resize: none;\n width: 100%;\n border: none;\n border-radius: var(--default-border-radius);\n overflow: hidden;\n line-height: 1.25;\n color: var(--text-color);\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: var(--text-light);\n }\n\n / The browser's own search-cancel decoration doesn't match the theme — Search has its own\n themed clear icon (see isSearchCleared in input.tsx) that replaces it. */\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n appearance: none;\n display: none;\n }\n\n &-withIcon {\n padding-right: var(--input-icon-gutter) !important;\n\n &-left {\n padding-right: 0.643em !important;\n padding-left: var(--input-icon-gutter) !important;\n }\n }\n\n &-suffix {\n padding-right: 9px;\n }\n\n &-date {\n padding: 6px 9px;\n color-scheme: dark;\n\n svg {\n color: white;\n }\n }\n\n &-default {\n padding: 8px 7.5px 6px;\n }\n\n &[disabled] {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n opacity: 1;\n\n &::placeholder {\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n }\n }\n\n &-readOnly {\n cursor: default;\n color: var(--text-dark);\n -webkit-text-fill-color: var(--text-dark);\n }\n\n &-uppercase {\n text-transform: uppercase;\n }\n\n &-multiline {\n overflow-y: auto;\n resize: vertical;\n padding-top: 4px;\n min-height: 30px;\n\n &-autoResize {\n resize: none;\n overflow: hidden;\n }\n }\n\n &-icon {\n appearance: none;\n -webkit-appearance: none;\n box-sizing: border-box;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n border: none;\n position: absolute;\n outline: none;\n right: var(--input-icon-offset);\n color: var(--input-icon-color);\n width: var(--input-icon-size) !important;\n height: var(--input-icon-size) !important;\n user-select: none;\n top: 50%;\n transform: translateY(-50%);\n\n &:focus-visible {\n outline: 1px solid var(--primary-color);\n outline-offset: 2px;\n }\n\n &-left {\n left: var(--input-icon-offset);\n }\n\n &-notClickable {\n pointer-events: none;\n }\n }\n }\n\n &-error {\n height: 1em;\n padding-top: 3px;\n color: var(--error-font-color);\n font-size: 11px;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 0.5;\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/interactableDiv/interactableDiv.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from"./interactableDiv.module.mjs";import t,{useCallback as n}from"react";import r from"classnames";import{jsx as i}from"react/jsx-runtime";var a=t.forwardRef(({className:t,children:a,onClick:o,onMouseDown:s,onKeyDown:c,tabIndex:l=0,title:u,...d},f)=>{let p=n(e=>{e.key===`Enter`&&o?.(e),c?.(e)},[o,c]);return i(`div`,{className:r(e.interactableDiv,t),onClick:o,onMouseDown:s,tabIndex:l??void 0,role:`button`,onKeyDown:p,ref:f,title:u,...d,children:a})});a.displayName=`InteractableDiv`;export{a as default};
+import e from"./interactableDiv.module.mjs";import t,{useCallback as n}from"react";import r from"classnames";import{jsx as i}from"react/jsx-runtime";var a=t.forwardRef(({className:t,children:a,onClick:o,onKeyDown:s,tabIndex:c=0,...l},u)=>{let d=n(e=>{(e.key===`Enter`||e.key===` `)&&(e.key===` `&&e.preventDefault(),o?.(e)),s?.(e)},[o,s]);return i(`div`,{className:r(e.interactableDiv,t),onClick:o,tabIndex:c??void 0,role:`button`,onKeyDown:d,ref:u,...l,children:a})});a.displayName=`InteractableDiv`;export{a as default};
 //# sourceMappingURL=interactableDiv.mjs.map

package/dist/esm/common/interactableDiv/interactableDiv.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interactableDiv.mjs","names":[],"sources":["../../../../package/common/interactableDiv/interactableDiv.tsx"],"sourcesContent":["import cx from 'classnames';\nimport React, {~~\n ReactNode,\n~~ useCallback~~,\n~~ type KeyboardEvent~~,\n type~~ ~~KeyboardEventHandler,\n~~ type MouseEvent~~,\n type~~ ~~MouseEventHandler,\n~~ type ReactElement~~,\n~~} from 'react';\n\nimport styles from './interactableDiv.module.pcss';\nimport type { HtmlProps } from '../types/baseProps.types';\n\ninterface Properties extends HtmlProps ~~{\n className?: string \| undefined;\n children?: ReactNode \| undefined;\n onClick?: MouseEventHandler~~<~~HTMLDivElement> \| undefined;\n onMouseDown?: MouseEventHandler~~<HTMLDivElement> ~~\| undefined;\n onKeyDown?: KeyboardEventHandler<HTMLDivElement~~> ~~\| undefined;\~~n ~~style?: React.CSSProperties \| undefined;\n~~ tabIndex?: number \| null;\n ~~title?: string \| undefined;\n~~}\n\nconst InteractableDiv = React.forwardRef<HTMLDivElement, Properties>(\n ({ className, children, onClick, ~~onMouseDown,~~ onKeyDown, tabIndex = 0, ~~title,~~ ...props }, ref): ReactElement => {\n const onKeyDownHandler = useCallback(\n (e: KeyboardEvent<HTMLDivElement> ~~\| MouseEvent<HTMLDivElement>~~) => {\n if ((e as ~~React~~.~~KeyboardEvent).~~key === '~~Enter~~') {\n onClick?.(e as MouseEvent<HTMLDivElement>);\n }\n onKeyDown?.(e ~~as KeyboardEvent<HTMLDivElement>~~);\n },\n [onClick, onKeyDown]\n );\n\n return (\n <div\n className={cx(styles.interactableDiv, className)}\n onClick={onClick}\n ~~onMouseDown={onMouseDown}\n~~ tabIndex={tabIndex ?? undefined}\n role=\"button\"\n onKeyDown={onKeyDownHandler}\n ref={ref}\n ~~title=~~{~~title}\n {~~...props}\n >\n {children}\n </div>\n );\n }\n);\n\nInteractableDiv.displayName = 'InteractableDiv';\n\nexport default InteractableDiv;\n"],"mappings":"~~qJAyBA~~,IAAM,EAAkB,EAAM,YAC3B,CAAE,YAAW,WAAU,UAAS,~~cAAa,~~YAAW,WAAW,EAAG,~~QAAO,~~GAAG,GAAS,IAAsB,~~CAC9G~~,IAAM,EAAmB,EACtB,~~GAAkE~~,~~CAC5D~~,~~EAA0B~~,MAAQ,~~SACrC~~,IAAU,~~CAA+B~~,~~EAE3C~~,IAAY,~~CAAkC~~,~~CAChD~~,EACA,CAAC,EAAS,CAAS,CACrB,EAEA,OACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,CAAS,EACtC,~~UACI~~,~~cACb,~~SAAU,GAAY,IAAA,GACtB,KAAK,SACL,UAAW,EACN,~~MACE~~,~~QACP,~~GAAI,EAEH,UACE,CAAA,CAET,CACF,EAEA,EAAgB,YAAc"}
1	+ {"version":3,"file":"interactableDiv.mjs","names":[],"sources":["../../../../package/common/interactableDiv/interactableDiv.tsx"],"sourcesContent":["import cx from 'classnames';\nimport React, { useCallback, type KeyboardEvent, type MouseEvent, type ReactElement } from 'react';\n\nimport styles from './interactableDiv.module.pcss';\nimport type { HtmlProps } from '../types/baseProps.types';\n\ninterface Properties extends HtmlProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex'> {\n tabIndex?: number \| null;\n}\n\nconst InteractableDiv = React.forwardRef<HTMLDivElement, Properties>(\n ({ className, children, onClick, onKeyDown, tabIndex = 0, ...props }, ref): ReactElement => {\n const onKeyDownHandler = useCallback(\n (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n if (e.key === ' ') e.preventDefault();\n onClick?.(e as unknown as MouseEvent<HTMLDivElement>);\n }\n onKeyDown?.(e);\n },\n [onClick, onKeyDown]\n );\n\n return (\n <div\n className={cx(styles.interactableDiv, className)}\n onClick={onClick}\n tabIndex={tabIndex ?? undefined}\n role=\"button\"\n onKeyDown={onKeyDownHandler}\n ref={ref}\n {...props}\n >\n {children}\n </div>\n );\n }\n);\n\nInteractableDiv.displayName = 'InteractableDiv';\n\nexport default InteractableDiv;\n"],"mappings":"qJAUA,IAAM,EAAkB,EAAM,YAC3B,CAAE,YAAW,WAAU,UAAS,YAAW,WAAW,EAAG,GAAG,GAAS,IAAsB,CAC1F,IAAM,EAAmB,EACtB,GAAqC,EAChC,EAAE,MAAQ,SAAW,EAAE,MAAQ,OAC7B,EAAE,MAAQ,KAAK,EAAE,eAAe,EACpC,IAAU,CAA0C,GAEtD,IAAY,CAAC,CACf,EACA,CAAC,EAAS,CAAS,CACrB,EAEA,OACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,gBAAiB,CAAS,EACtC,UACT,SAAU,GAAY,IAAA,GACtB,KAAK,SACL,UAAW,EACN,MACL,GAAI,EAEH,UACE,CAAA,CAET,CACF,EAEA,EAAgB,YAAc"}

package/dist/esm/common/progressBar/progressBar.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progressBar.module.mjs","names":[],"sources":["../../../../package/common/progressBar/progressBar.module.pcss"],"sourcesContent":[".progressBar{\n min-width: 100px;\n min-height: 10px;\n background-color: ~~#e0e0e0~~;\n border-radius: var(--default-border-radius);\n overflow: hidden;\n display: flex;\n align-items: stretch;\n\n &-fill {\n background-color: var(--primary-color);\n width: 0;\n display: flex;\n align-items: center;\n overflow: hidden;\n transition: width .3s ease;\n\n &-end {\n border-radius: 0 var(--default-border-radius) var(--default-border-radius) 0;\n }\n }\n\n &-label {\n color: white;\n font-size: 12px;\n padding: 0 ~~2px~~;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &-custom {\n mix-blend-mode: difference;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"progressBar.module.mjs","names":[],"sources":["../../../../package/common/progressBar/progressBar.module.pcss"],"sourcesContent":[".progressBar{\n min-width: 100px;\n min-height: 10px;\n background-color: var(--progress-bar-track-color, var(--background-accent-light));\n border-radius: var(--default-border-radius);\n overflow: hidden;\n display: flex;\n align-items: stretch;\n\n &-fill {\n background-color: var(--primary-color);\n width: 0;\n display: flex;\n align-items: center;\n overflow: hidden;\n transition: width .3s ease;\n transform: translateZ(0);\n container-type: inline-size;\n\n &-end {\n border-radius: 0 var(--default-border-radius) var(--default-border-radius) 0;\n }\n }\n\n &-label {\n color: white;\n font-size: 12px;\n padding: 0 min(5px, 4cqw);\n box-sizing: border-box;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &-custom {\n mix-blend-mode: difference;\n }\n }\n}\n"],"mappings":""}