@epam/ai-dial-ui-kit 0.3.0-rc.0 → 0.3.0-rc.2
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/dial-ui-kit.cjs.js +1 -1
- package/dist/dial-ui-kit.es.js +966 -671
- package/dist/index.css +1 -1
- package/dist/src/components/Dropdown/Dropdown.d.ts +70 -0
- package/dist/src/components/Dropdown/constants.d.ts +8 -0
- package/dist/src/components/Tag/Tag.d.ts +28 -0
- package/dist/src/components/Tag/constants.d.ts +3 -0
- package/dist/src/components/TagInput/TagInput.d.ts +39 -0
- package/dist/src/index.d.ts +5 -0
- package/dist/src/models/dropdown.d.ts +14 -0
- package/dist/src/types/dropdown.d.ts +13 -0
- package/dist/src/types/tag.d.ts +3 -0
- package/package.json +1 -1
package/dist/dial-ui-kit.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),i=require("classnames"),C=require("@tabler/icons-react"),h=require("react"),j=require("@floating-ui/react"),oe=require("react-dom");function le(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const w=le(h),B=({errorText:e})=>e&&s.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),z=({fieldTitle:e,htmlFor:t,optional:r,optionalText:n,cssClass:a})=>e?s.jsxs("label",{className:i("dial-tiny text-secondary",a,!a?.includes("mb")&&"mb-2"),htmlFor:t,children:[s.jsx("span",{className:"min-h-4",children:e}),r&&s.jsx("span",{className:"ml-1",children:n??"(Optional)"})]}):null,k=({icon:e,className:t})=>e?s.jsx("span",{className:i("flex-shrink-0",t),children:e}):null;var N=(e=>(e.Primary="primary",e.Secondary="secondary",e.Tertiary="tertiary",e.Danger="danger",e))(N||{});const ie={[N.Primary]:"dial-primary-button",[N.Secondary]:"dial-secondary-button",[N.Tertiary]:"dial-tertiary-button",[N.Danger]:"dial-danger-button"},T=({title:e,variant:t,cssClass:r,textCssClass:n,ref:a,onClick:o,disable:l,iconAfter:u,iconBefore:d,hideTitleOnMobile:c,ariaLabel:x})=>{const p=i("dial-small-semi",u?"mr-2":"",d?"ml-2":"",c?"hidden sm:inline":"inline",n),f=i(t&&ie[t],r,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:a,type:"button",className:f,onClick:m=>o?.(m),disabled:l,"aria-label":e||x,children:[s.jsx(k,{icon:d}),e&&s.jsx("span",{className:p,children:e}),s.jsx(k,{icon:u})]})};var L=(e=>(e.Info="info",e.Success="success",e.Warning="warning",e.Error="error",e))(L||{});const ce={info:s.jsx(C.IconInfoCircle,{size:24,stroke:2}),error:s.jsx(C.IconAlertCircle,{size:24,stroke:2}),warning:s.jsx(C.IconAlertTriangle,{size:24,stroke:2}),success:s.jsx(C.IconCircleCheck,{size:24,stroke:2})},de={[L.Info]:"bg-info border-info text-info",[L.Success]:"bg-success border-success text-success",[L.Warning]:"bg-warning border-warning text-warning",[L.Error]:"bg-error border-error text-error"},ue="items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex",xe=({variant:e=L.Info,message:t,cssClass:r,closable:n=!1,onClose:a})=>s.jsxs("div",{role:"alert",className:i(ue,de[e],r),children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(k,{icon:ce[e]}),s.jsx("div",{className:"text-primary",children:t})]}),n&&s.jsx(T,{cssClass:"ml-2 text-secondary hover:text-primary",ariaLabel:"Close alert",iconBefore:s.jsx(C.IconX,{size:16}),onClick:o=>a?.(o)})]}),pe="flex items-center justify-center text-secondary",me="shrink-0 grow-0 basis-auto animate-spin-steps",fe=e=>w.createElement("svg",{viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},w.createElement("path",{d:"M24 39V46.5",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),w.createElement("path",{opacity:.4,d:"M9 24H1.5",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),w.createElement("path",{opacity:.5,d:"M8.0918 8.0918L13.3994 13.3994",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),w.createElement("path",{opacity:.6,d:"M24 1.5V9",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),w.createElement("path",{opacity:.7,d:"M39.9121 8.08594L37.2607 10.7373L34.6094 13.3887",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),w.createElement("path",{opacity:.8,d:"M46.5 24H39",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),w.createElement("path",{opacity:.9,d:"M34.6055 34.6055L39.9082 39.9082",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),w.createElement("path",{opacity:.3,d:"M13.3936 34.6055L8.08594 39.9131",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"})),$=({size:e=18,cssClass:t,iconClass:r,fullWidth:n=!0,ariaLabel:a="Loading"})=>s.jsx("div",{role:"status","aria-label":a,className:i({[pe]:!0,"w-full h-full":n,[t||""]:!!t}),children:s.jsx(k,{icon:s.jsx(fe,{width:e,height:e,className:i(me,r),role:"img"})})}),he=7,ge=2,K=h.createContext(null),U=()=>{const e=h.useContext(K);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},je=({initialOpen:e=!1,placement:t="bottom",isTriggerClickable:r=!1,open:n,onOpenChange:a}={})=>{const[o,l]=h.useState(e),u=h.useRef(null),d=n??o,c=a??l,x=j.useFloating({placement:t,open:d,onOpenChange:c,whileElementsMounted:j.autoUpdate,middleware:[j.offset(he+ge),j.flip({crossAxis:t.includes("-"),fallbackAxisSideDirection:"start",padding:5}),j.shift({padding:5}),j.arrow({element:u})]}),p=j.useHover(x.context,{move:!1,enabled:n==null,mouseOnly:r,delay:{open:500,close:0}}),f=j.useFocus(x.context,{enabled:n==null}),m=j.useDismiss(x.context),b=j.useRole(x.context,{role:"tooltip"}),g=j.useInteractions([p,f,m,b]);return h.useMemo(()=>({open:d,setOpen:c,arrowRef:u,...g,...x}),[d,c,g,x])},be=({children:e,...t})=>{const r=je(t);return s.jsx(K.Provider,{value:r,children:e})},Ce=h.forwardRef(function({style:t,...r},n){const a=U(),o=j.useMergeRefs([a.refs.setFloating,n]);return a.open?s.jsx(j.FloatingPortal,{id:"tooltip-portal",children:s.jsxs("div",{ref:o,style:{...a.floatingStyles,...t},...a.getFloatingProps(r),className:i("z-[55] whitespace-pre-wrap break-words rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",a.getFloatingProps(r).className),children:[r.children,s.jsx(j.FloatingArrow,{ref:a.arrowRef,context:a.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"})]})}):null}),ye=h.forwardRef(function({children:t,asChild:r=!1,...n},a){const o=U(),u=t&&typeof t=="object"&&"ref"in t&&t.ref!==void 0?t.ref:void 0,d=j.useMergeRefs([o.refs.setReference,a,u]);return r&&h.isValidElement(t)?h.cloneElement(t,o.getReferenceProps({ref:d,...n,...t.props})):s.jsx("span",{ref:d,...o.getReferenceProps(n),className:n.className??"dial-tooltip-trigger text-left",children:t})}),S=({hideTooltip:e,tooltip:t,children:r,triggerClassName:n,contentClassName:a,...o})=>s.jsxs(be,{...o,children:[s.jsx(ye,{className:i(n,"truncate"),children:r}),s.jsx(Ce,{className:i("text-primary",a,"max-w-[300px]",(e||!t)&&"hidden"),children:t})]}),F=18,P={size:F,stroke:2},ve=({label:e,id:t,checked:r,indeterminate:n,disabled:a,ariaLabel:o,onChange:l})=>{const u=h.useCallback(x=>{x.stopPropagation(),l?.(x.target.checked,t)},[l,t]),d=i("flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",`${r?"":'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,a?"pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4":""),c=i("mr-2 border rounded",a?"bg-layer-4 border-icon-secondary":"");return s.jsxs("label",{className:d,htmlFor:t,children:[r&&(n?s.jsx(C.IconMinus,{className:c,...P}):s.jsx(C.IconCheck,{className:c,...P})),e&&s.jsx(S,{tooltip:e,triggerClassName:"flex-1 min-w-0",children:s.jsx("p",{className:"text-primary w-full truncate",children:e})}),s.jsx("input",{type:"checkbox",onChange:u,id:t,checked:r,"aria-checked":n?"mixed":r,"aria-disabled":a||void 0,"aria-label":e?void 0:o,className:"invisible w-0 h-0"})]})};var v=(e=>(e.VALID="valid",e.ERROR="error",e))(v||{});const we=(e,t)=>{if(t===e.id)switch(e.status){case v.VALID:return"border-accent-secondary text-primary";case v.ERROR:return"border-red-900 text-primary";default:return"border-accent-primary text-primary"}switch(e.status){case v.VALID:return"border-primary text-white";case v.ERROR:return"border-red-900 text-error";default:return"border-primary text-secondary"}},Ne=(e,t)=>{if(t===e.id)switch(e.status){case v.VALID:return"bg-accent-secondary";case v.ERROR:return"bg-red-400";default:return"bg-accent-primary"}switch(e.status){case v.VALID:return"bg-accent-secondary";case v.ERROR:return"bg-red-400";default:return"bg-layer-4"}},ke=({step:e,index:t,currentStep:r,onChangeStep:n})=>{const a="h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer",o="w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white",l=()=>r===e.id&&e.status===v.ERROR?s.jsx(C.IconExclamationCircle,{stroke:2,size:16}):r!==e.id&&e.status===v.VALID?s.jsx(C.IconCheck,{stroke:2,size:16}):t+1;return s.jsxs("button",{className:i(a,we(e,r)),onClick:()=>n(e.id),children:[s.jsx("span",{className:i(o,Ne(e,r)),children:l()}),s.jsx("span",{children:e.name})]})},De=({steps:e,currentStep:t,onChangeStep:r})=>{const n=a=>{const o=e.findIndex(u=>u.id===t),l=e.findIndex(u=>u.id===a);(a!==t&&e[o].status===v.VALID||l<o)&&r(a)};return s.jsx("div",{id:"steps",className:"flex gap-x-3",children:e.map((a,o)=>s.jsx(ke,{currentStep:t,onChangeStep:n,step:a,index:o},a.id))})},X=({name:e,value:t,title:r,description:n,checked:a=!1,inputId:o,cssClass:l,labelCssClass:u,disabled:d,onChange:c,descriptionCssClass:x})=>{const p=`${o}-desc`,f=i("dial-small cursor-pointer",d?"text-secondary":"text-primary",u),m=i("cursor-pointer dial-input-radio",r&&"mr-2",l),b=i("flex flex-col",!!n&&"mb-2"),g=i("dial-tiny mt-2 ml-[26px] text-secondary",x),D=I=>{d||I.target.checked&&c?.(t)};return s.jsxs("div",{className:b,children:[s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"radio",id:o,name:e,value:t,checked:a,disabled:d,"aria-describedby":a&&n?p:void 0,className:m,onChange:D}),r?s.jsx("label",{className:f,htmlFor:o,children:r}):null]}),a&&n&&s.jsx("div",{id:p,className:g,children:n})]})};var _=(e=>(e.Row="Row",e.Column="Column",e))(_||{});const Ie="flex flex-col gap-2",Se="flex",Re="pb-1 mt-2",Le={[_.Column]:"flex-col gap-y-3",[_.Row]:"flex-row gap-x-6"},Ee=({fieldTitle:e,radioCssClass:t,labelCssClass:r,disabled:n,elementId:a,radioButtons:o,activeRadioButton:l,orientation:u,onChange:d})=>s.jsxs("div",{className:Ie,children:[e&&s.jsx(z,{fieldTitle:e,htmlFor:a}),s.jsx("div",{role:"radiogroup","aria-label":e,"aria-disabled":n||void 0,className:i(Se,Le[u]),children:o.map(c=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(X,{name:a,value:c.id,inputId:c.id,disabled:n,cssClass:t,labelCssClass:r,title:c.name,checked:c.id===l,onChange:()=>d(c.id)}),c.id===l&&c.content?s.jsx("div",{className:Re,children:c.content}):null]},c.id))})]}),Fe=({icon:e,title:t,description:r})=>s.jsxs("div",{className:"h-full w-full flex flex-col items-center justify-center text-secondary",children:[e||s.jsx(C.IconClipboardX,{width:60,height:60}),s.jsx("span",{className:"small mt-2 text-primary",children:t}),r&&s.jsx("span",{className:"mt-1 text-primary",children:r})]}),Te=60,Pe=({containerCssClass:e,children:t,width:r,title:n,iconSize:a=F,titleCssClass:o,additionalButtons:l})=>{const[u,d]=h.useState(r),[c,x]=h.useState(!0),p=i(["transform rotate-180 [writing-mode:tb-rl]",c&&"hidden",o]),f=i(["flex flex-row gap-2 cursor-pointer text-secondary",c?"justify-end":"justify-center"]),m=()=>{d(c?Te:r),x(!c)};return s.jsxs("div",{className:i(["rounded p-4 flex flex-col justify-between overflow-y-auto flex-shrink-0",e]),style:{width:`${u}px`},children:[s.jsx("div",{className:i(["flex-1 min-h-0 overflow-auto",!c&&"hidden"]),children:t}),s.jsx("div",{className:p,children:n}),s.jsxs("div",{className:f,children:[c&&l,s.jsx(T,{cssClass:"hover:text-icon-accent-primary",onClick:m,iconBefore:c?s.jsx(C.IconChevronsLeft,{size:a,stroke:P.stroke}):s.jsx(C.IconChevronsRight,{size:a,stroke:P.stroke})})]})]})},Ae=({label:e,text:t,children:r,postfix:n})=>s.jsxs("div",{className:i("flex flex-col text-secondary",r?"":"max-w-[200px]"),children:[s.jsx("label",{className:"dial-tiny mb-2",children:e}),r||s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx(S,{triggerClassName:"text-primary",tooltip:t,children:t}),n||null]})]}),Q=({ariaLabel:e,cssClass:t,size:r=24,onClose:n})=>s.jsx(T,{ariaLabel:e,cssClass:i("text-secondary hover:text-accent-primary",t),onClick:n,iconBefore:s.jsx(C.IconX,{size:r})}),Y=({value:e,textareaId:t,placeholder:r,cssClass:n="",disabled:a,invalid:o,readonly:l,onChange:u})=>s.jsx(S,{tooltip:e,triggerClassName:"flex",children:s.jsx("textarea",{id:t,placeholder:r,value:e||"",disabled:a,className:i("dial-textarea dial-input px-3 py-2",o?"dial-input-error":"",a&&"dial-input-disable",l&&"dial-input-readonly",n),onChange:d=>!l&&u?.(d.currentTarget.value)})}),Me=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],Oe=(e,t,r,n)=>{if((t==="number"||r!==void 0||n!==void 0)&&!Me.includes(e.key)&&!(e.key==="-"&&e.currentTarget.selectionStart===0&&(r===void 0||r<0))&&!(e.key==="."&&t==="number"&&!e.currentTarget.value.includes("."))){if(!/^[0-9]$/.test(e.key)){e.preventDefault();return}if(r!==void 0||n!==void 0){const o=e.currentTarget.value,l=e.currentTarget.selectionStart||0,u=o.slice(0,l)+e.key+o.slice(l),d=parseFloat(u);if(!isNaN(d)){if(r!==void 0&&d<r){e.preventDefault();return}if(n!==void 0&&d>n){e.preventDefault();return}}}}},M=({iconBefore:e,iconAfter:t,hideBorder:r,value:n,elementId:a,placeholder:o="",cssClass:l="",containerCssClass:u,tooltipTriggerClassName:d,type:c="text",disabled:x,readonly:p,invalid:f,onChange:m,min:b,max:g,prefix:D,suffix:I,textBeforeInput:y,textAfterInput:W})=>{const te=R=>R.target.blur(),re=c==="number"||b!==void 0||g!==void 0,ne=R=>{Oe(R,c,b,g)},ae=R=>{const A=R.currentTarget.value;if(re&&A!==""){const H=parseFloat(A);if(isNaN(H)&&A!=="-"&&A!=="."||!isNaN(H)&&(b!==void 0&&H<b||g!==void 0&&H>g))return}m?.(A)};return s.jsxs("div",{className:i("dial-input-field flex flex-row items-center justify-between py-2",r?"dial-input-no-border":"dial-input",f&&"dial-input-error",x&&"dial-input-disable",p&&"dial-input-readonly",!y&&"pl-3",!W&&"pr-3",u),children:[y&&s.jsx("div",{children:s.jsx(M,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"overflow-hidden overflow-ellipsis dial-small",value:y,disabled:!0,elementId:y+"textBefore"})}),D&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",D]}),s.jsx(k,{icon:e}),s.jsx(S,{tooltip:n,triggerClassName:i(d,"flex-1"),children:s.jsx("input",{type:c,autoComplete:"off",id:a,placeholder:o,value:n??"",disabled:x,className:i("border-0 bg-transparent",l),onChange:R=>!p&&ae?.(R),onKeyDown:ne,onWheel:te,min:b,max:g})}),s.jsx(k,{icon:t}),I&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",I]}),W&&s.jsx("div",{children:s.jsx(M,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",value:W,disabled:!0,elementId:W+"textAfter"})})]})},Ve=/^0+\.(\d+)?$/,Be=/^0+/,J=({fieldTitle:e,errorText:t,optional:r,elementCssClass:n,elementContainerCssClass:a,elementId:o,containerCssClass:l,readonly:u,defaultEmptyText:d,min:c,max:x,...p})=>s.jsxs("div",{className:i("flex flex-col",l),children:[s.jsx(z,{fieldTitle:e,optional:r,htmlFor:o}),u?s.jsx("span",{children:p.value||(d??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(M,{elementId:o,cssClass:n,containerCssClass:a,invalid:t!=null,min:c,max:x,...p}),s.jsx(B,{errorText:t})]})]}),ze=({onChange:e,value:t,min:r,max:n,...a})=>{const o=l=>String(l)?.match(Ve)?String(l)?.replace(Be,"0"):Number(l);return s.jsx(J,{type:"number",onChange:l=>e?.(o(l)),value:t,min:r,max:n,...a})},We=({onChange:e,...t})=>s.jsx(J,{type:"text",onChange:r=>e?.(r),...t}),He=({fieldTitle:e,optional:t,elementId:r,elementCssClass:n,errorText:a,...o})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(z,{fieldTitle:e,optional:t,htmlFor:r}),s.jsx(Y,{textareaId:r,cssClass:n,...o}),s.jsx(B,{errorText:a})]}),_e=({title:e,switchId:t,isOn:r=!1,disabled:n,onChange:a})=>{const o=i("flex w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",r?"flex-row-reverse":"flex-row",n?"pointer-events-none":"",n?r?"bg-controls-disable":"bg-layer-4":r?"bg-accent-primary":"bg-layer-4"),l=h.useCallback(u=>{u.stopPropagation(),a?.(!r)},[a,r]);return s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"checkbox",onChange:l,id:t,disabled:n,className:"invisible w-0 h-0",checked:r}),s.jsx("label",{htmlFor:t,className:o,children:s.jsx("span",{className:i("size-3 rounded-full",n?r?"bg-layer-4":"bg-controls-disable":"bg-controls-enable-primary")})}),e&&s.jsx("span",{className:"pl-2 dial-small text-primary",children:e})]})};var E=(e=>(e.Sm="sm",e.Md="md",e.Lg="lg",e))(E||{});const qe="z-[52] flex items-center justify-center bg-blackout md:p-4",Ge="divide-tertiary divide-y",Ze="flex flex-row justify-between py-4 px-6 items-center",$e={[E.Sm]:"dial-sm-popup",[E.Md]:"dial-md-popup",[E.Lg]:"dial-lg-popup"},ee=({open:e=!1,title:t,portalId:r,cssClass:n,overlayClass:a,headingClass:o,dividers:l=!0,children:u,footer:d,onClose:c,size:x=E.Md})=>{const{refs:p,context:f}=j.useFloating({open:e,onOpenChange:y=>{y||c?.(null)}}),m=j.useRole(f,{role:"dialog"}),b=j.useDismiss(f,{outsidePress:!0}),{getFloatingProps:g}=j.useInteractions([m,b]);if(!e)return null;const D=typeof t=="string"?"dial-popup-heading":void 0,I=y=>y?typeof y=="string"?s.jsx("h3",{id:D,className:i("flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",o),children:s.jsx(S,{tooltip:y,children:y})}):y:s.jsx("span",{});return s.jsx(j.FloatingPortal,{id:r,children:s.jsx(j.FloatingOverlay,{className:i(qe,a),children:s.jsx(j.FloatingFocusManager,{context:f,children:s.jsxs("div",{ref:p.setFloating,...g(),role:"dialog","aria-modal":"true","aria-labelledby":D,className:i("dial-popup",$e[x],l&&Ge,n),children:[s.jsxs("div",{className:Ze,children:[I(t),s.jsx(Q,{ariaLabel:"Close dialog",onClose:y=>c?.(y)})]}),s.jsx("div",{className:"flex-grow overflow-auto",children:u}),d]})})})})};var O=(e=>(e.Info="info",e.Danger="danger",e))(O||{});const Ke="flex justify-end gap-2 px-6 py-4",Ue="text-secondary dial-small-150 px-6 py-4",Xe="Cancel",G={[O.Info]:{confirmVariant:N.Primary,cancelVariant:N.Secondary},[O.Danger]:{container:"border-t-4 border-error",confirmVariant:N.Danger,cancelVariant:N.Secondary}},Qe=({title:e,description:t,descriptionCssClass:r,open:n=!1,confirmLabel:a,cancelLabel:o=Xe,isLoading:l=!1,disableConfirmButton:u=!1,cssClass:d,confirmClassName:c,onClose:x,onConfirm:p,onCancel:f,children:m,dividers:b=!1,variant:g=O.Info,size:D=E.Sm})=>{const I=l?null:s.jsxs("div",{className:Ke,children:[s.jsx(T,{variant:N.Secondary,title:o,onClick:()=>f?f():x?.()}),s.jsx(T,{variant:G[g].confirmVariant,cssClass:c,title:a,disable:u,onClick:()=>p()})]}),y=h.useCallback(()=>l?s.jsx("div",{className:"px-6 py-4 h-[120px]",children:s.jsx($,{size:50})}):m??(t?s.jsx("div",{className:i(Ue,r),children:t}):null),[m,t,l,r]);return s.jsx(ee,{open:n,title:e,cssClass:i(G[g].container,d),dividers:b,onClose:()=>x?.(),footer:I,size:D,children:y()})},Ye=({onClick:e})=>s.jsx(C.IconEyeOff,{...P,className:"text-primary",onClick:e}),Je=({onClick:e})=>s.jsx(C.IconEye,{...P,className:"text-primary",onClick:e}),se=({...e})=>{const[t,r]=h.useState(!1),n=h.useCallback(a=>{r(a)},[]);return s.jsx(M,{type:t?"text":"password",...e,iconAfter:t?s.jsx(Ye,{onClick:()=>n(!1)}):s.jsx(Je,{onClick:()=>n(!0)})})},es=({fieldTitle:e,optional:t,elementCssClass:r,elementId:n,errorText:a,...o})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(z,{fieldTitle:e,optional:t,htmlFor:n}),s.jsx(se,{cssClass:r,elementId:n,invalid:!!a,...o}),s.jsx(B,{errorText:a})]});var V=(e=>(e.Small="small",e.Base="base",e))(V||{});const ss={[V.Small]:{textClass:"text-xs px-1",containerClass:"px-[6px] py-1 h-[22px]",iconSize:10,iconStroke:1},[V.Base]:{textClass:"text-sm px-2",containerClass:"px-3 py-2 h-[38px]",iconSize:18,iconStroke:1.5}},ts=({elementId:e,value:t,placeholder:r,disabled:n,readonly:a,invalid:o,cssClass:l,containerCssClass:u,onChange:d,size:c=V.Base})=>{const[x,p]=h.useState(t||"");h.useEffect(()=>{p(t||"")},[t]);const f=h.useCallback(g=>{p(g),d?.(g)},[d]),m=ss[c],b=h.useCallback(()=>{f("")},[f]);return s.jsxs("div",{className:i("dial-input flex flex-row items-center justify-between",o&&"dial-input-error",n&&"dial-input-disable",a&&"dial-input-readonly",m.containerClass,u),children:[s.jsx(k,{className:i(n?"text-secondary":"text-primary"),icon:s.jsx(C.IconSearch,{size:m.iconSize,stroke:m.iconStroke})}),s.jsx("input",{id:e,type:"text",autoComplete:"off",placeholder:r,value:x??"",disabled:n,readOnly:a,className:i("border-0 bg-transparent w-full",l,m.textClass),onChange:g=>!a&&f(g.currentTarget.value)}),x&&!a&&!n&&s.jsx(k,{className:"text-primary cursor-pointer",icon:s.jsx(C.IconX,{size:m.iconSize,stroke:m.iconStroke,onClick:b,"aria-label":"Clear search",role:"button"})})]})},q=({selectedItems:e,listCssClass:t,listElementCssClass:r})=>!!e?.length&&s.jsx("ul",{className:i("flex-row items-center truncate flex-wrap","flex gap-x-2 gap-y-1",t),children:e?.map(n=>s.jsx("li",{className:i(["tiny bg-layer-3 rounded p-1 border border-primary max-w-[200px] truncate",r]),children:s.jsx(S,{tooltip:n,children:s.jsx("button",{"aria-label":"autocomplete-action",type:"button",className:"truncate w-full",children:n})})},n))}),Z=e=>w.createElement("svg",{width:18,height:18,viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},w.createElement("path",{d:"M2.25 13.5V12C2.25 11.5858 2.58579 11.25 3 11.25C3.41421 11.25 3.75 11.5858 3.75 12V13.5C3.75 13.6989 3.82907 13.8896 3.96973 14.0303C4.11038 14.1709 4.30109 14.25 4.5 14.25H6C6.41421 14.25 6.75 14.5858 6.75 15C6.75 15.4142 6.41421 15.75 6 15.75H4.5C3.90326 15.75 3.33114 15.5128 2.90918 15.0908C2.48722 14.6689 2.25 14.0967 2.25 13.5ZM14.25 6V4.5C14.25 4.30109 14.1709 4.11038 14.0303 3.96973C13.8896 3.82907 13.6989 3.75 13.5 3.75H12C11.5858 3.75 11.25 3.41421 11.25 3C11.25 2.58579 11.5858 2.25 12 2.25H13.5C14.0967 2.25 14.6689 2.48722 15.0908 2.90918C15.5128 3.33114 15.75 3.90326 15.75 4.5V6C15.75 6.41421 15.4142 6.75 15 6.75C14.5858 6.75 14.25 6.41421 14.25 6Z",fill:"currentColor"})),rs=({children:e,open:t,readonly:r,selectedValue:n,valueCssClasses:a,inputCssClasses:o,onOpen:l,elementId:u,errorText:d,emptyValueText:c})=>{const x=Array.isArray(n)&&n.length>0,p=typeof n=="string"&&!!n.trim(),f=x||p?n:c,m=r?void 0:l,b=()=>s.jsxs(s.Fragment,{children:[s.jsx("button",{type:"button",className:"w-full",onClick:m,"aria-label":"open-popup",id:u,children:s.jsxs("div",{className:i("dial-input px-3 py-2 dial-input-field flex flex-row items-center w-full justify-between",o,r&&"dial-input-disable",d&&"dial-input-error"),children:[s.jsx(S,{tooltip:String(f),children:s.jsx("span",{className:a,children:f})}),!r&&s.jsx("div",{className:"flex-shrink-0",children:s.jsx(k,{icon:s.jsx(Z,{role:"img",width:F,height:F})})})]})}),d&&s.jsx(B,{errorText:d})]}),g=()=>s.jsx("div",{className:"w-full",onClick:m,children:s.jsxs("div",{className:i("dial-input px-3 py-2 flex flex-row items-center w-full justify-between",r&&"dial-input-disable"),children:[s.jsx(q,{selectedItems:f}),!r&&s.jsx("div",{className:"ml-1",children:s.jsx(k,{icon:s.jsx(Z,{role:"img",width:F,height:F})})})]})});return s.jsxs(s.Fragment,{children:[x?g():b(),t&&oe.createPortal(e,document.body)]})},ns=({placeholder:e="",selectedItems:t=[],updateSelected:r,listCssClass:n,listElementCssClass:a,containerCssClass:o,inputCssClass:l})=>{const[u,d]=h.useState(""),c=h.useCallback(p=>{p.key==="Enter"&&(r([...t,p.currentTarget.value]),d("")),(p.key==="Backspace"||p.key==="Delete")&&t.length&&!u&&r(t.slice(0,-1))},[t,r,u]),x=h.useCallback(p=>{d(p.target.value)},[d]);return s.jsxs("div",{className:i(["dial-input px-3 py-2 flex flex-row items-center flex-wrap w-fit gap-2",o]),children:[s.jsx(q,{selectedItems:t,listCssClass:n,listElementCssClass:a}),s.jsx("input",{type:"text",value:u,className:i(["border-0 bg-transparent p-0",l]),placeholder:t?.length?"":e,onKeyDown:c,onChange:x})]})};exports.AlertVariant=L;exports.ButtonVariant=N;exports.ConfirmationPopupVariant=O;exports.DialAlert=xe;exports.DialAutocompleteInput=ns;exports.DialAutocompleteInputValue=q;exports.DialButton=T;exports.DialCheckbox=ve;exports.DialCloseButton=Q;exports.DialCollapsibleSidebar=Pe;exports.DialConfirmationPopup=Qe;exports.DialErrorText=B;exports.DialFieldLabel=z;exports.DialIcon=k;exports.DialInput=M;exports.DialInputPopup=rs;exports.DialLabelledText=Ae;exports.DialLoader=$;exports.DialNoDataContent=Fe;exports.DialNumberInputField=ze;exports.DialPasswordInput=se;exports.DialPasswordInputField=es;exports.DialPopup=ee;exports.DialRadioButton=X;exports.DialRadioGroup=Ee;exports.DialSearch=ts;exports.DialSteps=De;exports.DialSwitch=_e;exports.DialTextAreaField=He;exports.DialTextInputField=We;exports.DialTextarea=Y;exports.DialTooltip=S;exports.PopupSize=E;exports.RadioGroupOrientation=_;exports.SearchSize=V;exports.StepStatus=v;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),l=require("classnames"),w=require("@tabler/icons-react"),h=require("react"),m=require("@floating-ui/react"),we=require("react-dom");function Ne(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const F=Ne(h),H=({errorText:e})=>e&&s.jsx("span",{className:"text-error dial-tiny mt-1",children:e}),_=({fieldTitle:e,htmlFor:t,optional:r,optionalText:n,cssClass:a})=>e?s.jsxs("label",{className:l("dial-tiny text-secondary",a,!a?.includes("mb")&&"mb-2"),htmlFor:t,children:[s.jsx("span",{className:"min-h-4",children:e}),r&&s.jsx("span",{className:"ml-1",children:n??"(Optional)"})]}):null,S=({icon:e,className:t})=>e?s.jsx("span",{className:l("flex-shrink-0",t),children:e}):null;var E=(e=>(e.Primary="primary",e.Secondary="secondary",e.Tertiary="tertiary",e.Danger="danger",e))(E||{});const ke={[E.Primary]:"dial-primary-button",[E.Secondary]:"dial-secondary-button",[E.Tertiary]:"dial-tertiary-button",[E.Danger]:"dial-danger-button"},V=({title:e,variant:t,cssClass:r,textCssClass:n,ref:a,onClick:o,disable:c,iconAfter:u,iconBefore:d,hideTitleOnMobile:i,ariaLabel:x})=>{const p=l("dial-small-semi",u?"mr-2":"",d?"ml-2":"",i?"hidden sm:inline":"inline",n),j=l(t&&ke[t],r,"focus-visible:outline outline-offset-0");return s.jsxs("button",{ref:a,type:"button",className:j,onClick:g=>o?.(g),disabled:c,"aria-label":e||x,children:[s.jsx(S,{icon:d}),e&&s.jsx("span",{className:p,children:e}),s.jsx(S,{icon:u})]})};var M=(e=>(e.Info="info",e.Success="success",e.Warning="warning",e.Error="error",e))(M||{});const De={info:s.jsx(w.IconInfoCircle,{size:24,stroke:2}),error:s.jsx(w.IconAlertCircle,{size:24,stroke:2}),warning:s.jsx(w.IconAlertTriangle,{size:24,stroke:2}),success:s.jsx(w.IconCircleCheck,{size:24,stroke:2})},Ie={[M.Info]:"bg-info border-info text-info",[M.Success]:"bg-success border-success text-success",[M.Warning]:"bg-warning border-warning text-warning",[M.Error]:"bg-error border-error text-error"},Se="items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex",Re=({variant:e=M.Info,message:t,cssClass:r,closable:n=!1,onClose:a})=>s.jsxs("div",{role:"alert",className:l(Se,Ie[e],r),children:[s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(S,{icon:De[e]}),s.jsx("div",{className:"text-primary",children:t})]}),n&&s.jsx(V,{cssClass:"ml-2 text-secondary hover:text-primary",ariaLabel:"Close alert",iconBefore:s.jsx(w.IconX,{size:16}),onClick:o=>a?.(o)})]}),Fe="flex items-center justify-center text-secondary",Ee="shrink-0 grow-0 basis-auto animate-spin-steps",Le=e=>F.createElement("svg",{viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},F.createElement("path",{d:"M24 39V46.5",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),F.createElement("path",{opacity:.4,d:"M9 24H1.5",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),F.createElement("path",{opacity:.5,d:"M8.0918 8.0918L13.3994 13.3994",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),F.createElement("path",{opacity:.6,d:"M24 1.5V9",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),F.createElement("path",{opacity:.7,d:"M39.9121 8.08594L37.2607 10.7373L34.6094 13.3887",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),F.createElement("path",{opacity:.8,d:"M46.5 24H39",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),F.createElement("path",{opacity:.9,d:"M34.6055 34.6055L39.9082 39.9082",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"}),F.createElement("path",{opacity:.3,d:"M13.3936 34.6055L8.08594 39.9131",stroke:"currentColor",strokeWidth:3,strokeLinecap:"round",strokeLinejoin:"round"})),re=({size:e=18,cssClass:t,iconClass:r,fullWidth:n=!0,ariaLabel:a="Loading"})=>s.jsx("div",{role:"status","aria-label":a,className:l({[Fe]:!0,"w-full h-full":n,[t||""]:!!t}),children:s.jsx(S,{icon:s.jsx(Le,{width:e,height:e,className:l(Ee,r),role:"img"})})}),Te=7,Pe=2,ne=h.createContext(null),ae=()=>{const e=h.useContext(ne);if(e==null)throw new Error("Tooltip components must be wrapped in <Tooltip />");return e},Ae=({initialOpen:e=!1,placement:t="bottom",isTriggerClickable:r=!1,open:n,onOpenChange:a}={})=>{const[o,c]=h.useState(e),u=h.useRef(null),d=n??o,i=a??c,x=m.useFloating({placement:t,open:d,onOpenChange:i,whileElementsMounted:m.autoUpdate,middleware:[m.offset(Te+Pe),m.flip({crossAxis:t.includes("-"),fallbackAxisSideDirection:"start",padding:5}),m.shift({padding:5}),m.arrow({element:u})]}),p=m.useHover(x.context,{move:!1,enabled:n==null,mouseOnly:r,delay:{open:500,close:0}}),j=m.useFocus(x.context,{enabled:n==null}),g=m.useDismiss(x.context),v=m.useRole(x.context,{role:"tooltip"}),C=m.useInteractions([p,j,g,v]);return h.useMemo(()=>({open:d,setOpen:i,arrowRef:u,...C,...x}),[d,i,C,x])},Me=({children:e,...t})=>{const r=Ae(t);return s.jsx(ne.Provider,{value:r,children:e})},Oe=h.forwardRef(function({style:t,...r},n){const a=ae(),o=m.useMergeRefs([a.refs.setFloating,n]);return a.open?s.jsx(m.FloatingPortal,{id:"tooltip-portal",children:s.jsxs("div",{ref:o,style:{...a.floatingStyles,...t},...a.getFloatingProps(r),className:l("z-[55] whitespace-pre-wrap break-words rounded border border-primary bg-blackout px-2 py-1 dial-tiny shadow max-w-[300px]",a.getFloatingProps(r).className),children:[r.children,s.jsx(m.FloatingArrow,{ref:a.arrowRef,context:a.context,fill:"currentColor",strokeWidth:1,className:"stroke-primary w-2 text-[var(--bg-layer-0,_#000000)]"})]})}):null}),Ve=h.forwardRef(function({children:t,asChild:r=!1,...n},a){const o=ae(),u=t&&typeof t=="object"&&"ref"in t&&t.ref!==void 0?t.ref:void 0,d=m.useMergeRefs([o.refs.setReference,a,u]);return r&&h.isValidElement(t)?h.cloneElement(t,o.getReferenceProps({ref:d,...n,...t.props})):s.jsx("span",{ref:d,...o.getReferenceProps(n),className:n.className??"dial-tooltip-trigger text-left",children:t})}),P=({hideTooltip:e,tooltip:t,children:r,triggerClassName:n,contentClassName:a,...o})=>s.jsxs(Me,{...o,children:[s.jsx(Ve,{className:l(n,"truncate"),children:r}),s.jsx(Oe,{className:l("text-primary",a,"max-w-[300px]",(e||!t)&&"hidden"),children:t})]}),W=18,z={size:W,stroke:2},Be=({label:e,id:t,checked:r,indeterminate:n,disabled:a,ariaLabel:o,onChange:c})=>{const u=h.useCallback(p=>{c?.(p.target.checked,t)},[c,t]),d=l("flex flex-row items-center cursor-pointer text-accent-primary small-medium flex-1 min-w-0",`${r||n?"":'before:content-[""] before:inline-block before:w-[18px] before:h-[18px] before:border before:border-hover before:rounded before:mr-2'}`,a?"pointer-events-none text-secondary before:border-icon-secondary before:bg-layer-4":""),i=l("mr-2 border rounded",a?"bg-layer-4 border-icon-secondary":""),x=()=>n?s.jsx(w.IconMinus,{className:i,...z}):r?s.jsx(w.IconCheck,{className:i,...z}):null;return s.jsxs("label",{className:d,htmlFor:t,children:[x(),e&&s.jsx(P,{tooltip:e,triggerClassName:"flex-1 min-w-0",children:s.jsx("p",{className:"text-primary w-full truncate",children:e})}),s.jsx("input",{type:"checkbox",role:"checkbox",name:t,onChange:u,id:t,checked:r,"aria-checked":n?"mixed":r,"aria-disabled":a||void 0,"aria-label":e?void 0:o,className:"invisible w-0 h-0"})]})};var I=(e=>(e.VALID="valid",e.ERROR="error",e))(I||{});const We=(e,t)=>{if(t===e.id)switch(e.status){case I.VALID:return"border-accent-secondary text-primary";case I.ERROR:return"border-red-900 text-primary";default:return"border-accent-primary text-primary"}switch(e.status){case I.VALID:return"border-primary text-white";case I.ERROR:return"border-red-900 text-error";default:return"border-primary text-secondary"}},ze=(e,t)=>{if(t===e.id)switch(e.status){case I.VALID:return"bg-accent-secondary";case I.ERROR:return"bg-red-400";default:return"bg-accent-primary"}switch(e.status){case I.VALID:return"bg-accent-secondary";case I.ERROR:return"bg-red-400";default:return"bg-layer-4"}},He=({step:e,index:t,currentStep:r,onChangeStep:n})=>{const a="h-[32px] flex flex-1 min-w-[180px] items-center dial-tiny border-t-2 cursor-pointer",o="w-[22px] h-[22px] flex justify-center items-center mr-2 rounded-full text-white",c=()=>r===e.id&&e.status===I.ERROR?s.jsx(w.IconExclamationCircle,{stroke:2,size:16}):r!==e.id&&e.status===I.VALID?s.jsx(w.IconCheck,{stroke:2,size:16}):t+1;return s.jsxs("button",{className:l(a,We(e,r)),onClick:()=>n(e.id),children:[s.jsx("span",{className:l(o,ze(e,r)),children:c()}),s.jsx("span",{children:e.name})]})},_e=({steps:e,currentStep:t,onChangeStep:r})=>{const n=a=>{const o=e.findIndex(u=>u.id===t),c=e.findIndex(u=>u.id===a);(a!==t&&e[o].status===I.VALID||c<o)&&r(a)};return s.jsx("div",{id:"steps",className:"flex gap-x-3",children:e.map((a,o)=>s.jsx(He,{currentStep:t,onChangeStep:n,step:a,index:o},a.id))})},oe=({name:e,value:t,title:r,description:n,checked:a=!1,inputId:o,cssClass:c,labelCssClass:u,disabled:d,onChange:i,descriptionCssClass:x})=>{const p=`${o}-desc`,j=l("dial-small cursor-pointer",d?"text-secondary":"text-primary",u),g=l("cursor-pointer dial-input-radio",r&&"mr-2",c),v=l("flex flex-col",!!n&&"mb-2"),C=l("dial-tiny mt-2 ml-[26px] text-secondary",x),D=k=>{d||k.target.checked&&i?.(t)};return s.jsxs("div",{className:v,children:[s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"radio",id:o,name:e,value:t,checked:a,disabled:d,"aria-describedby":a&&n?p:void 0,className:g,onChange:D}),r?s.jsx("label",{className:j,htmlFor:o,children:r}):null]}),a&&n&&s.jsx("div",{id:p,className:C,children:n})]})};var Q=(e=>(e.Row="Row",e.Column="Column",e))(Q||{});const Ge="flex flex-col gap-2",$e="flex",qe="pb-1 mt-2",Ke={[Q.Column]:"flex-col gap-y-3",[Q.Row]:"flex-row gap-x-6"},Ue=({fieldTitle:e,radioCssClass:t,labelCssClass:r,disabled:n,elementId:a,radioButtons:o,activeRadioButton:c,orientation:u,onChange:d})=>s.jsxs("div",{className:Ge,children:[e&&s.jsx(_,{fieldTitle:e,htmlFor:a}),s.jsx("div",{role:"radiogroup","aria-label":e,"aria-disabled":n||void 0,className:l($e,Ke[u]),children:o.map(i=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(oe,{name:a,value:i.id,inputId:i.id,disabled:n,cssClass:t,labelCssClass:r,title:i.name,checked:i.id===c,onChange:()=>d(i.id)}),i.id===c&&i.content?s.jsx("div",{className:qe,children:i.content}):null]},i.id))})]}),Xe=({icon:e,title:t,description:r})=>s.jsxs("div",{className:"h-full w-full flex flex-col items-center justify-center text-secondary",children:[e||s.jsx(w.IconClipboardX,{width:60,height:60}),s.jsx("span",{className:"small mt-2 text-primary",children:t}),r&&s.jsx("span",{className:"mt-1 text-primary",children:r})]}),Ze=60,Qe=({containerCssClass:e,children:t,width:r,title:n,iconSize:a=W,titleCssClass:o,additionalButtons:c})=>{const[u,d]=h.useState(r),[i,x]=h.useState(!0),p=l(["transform rotate-180 [writing-mode:tb-rl]",i&&"hidden",o]),j=l(["flex flex-row gap-2 cursor-pointer text-secondary",i?"justify-end":"justify-center"]),g=()=>{d(i?Ze:r),x(!i)};return s.jsxs("div",{className:l(["rounded p-4 flex flex-col justify-between overflow-y-auto flex-shrink-0",e]),style:{width:`${u}px`},children:[s.jsx("div",{className:l(["flex-1 min-h-0 overflow-auto",!i&&"hidden"]),children:t}),s.jsx("div",{className:p,children:n}),s.jsxs("div",{className:j,children:[i&&c,s.jsx(V,{cssClass:"hover:text-icon-accent-primary",onClick:g,iconBefore:i?s.jsx(w.IconChevronsLeft,{size:a,stroke:z.stroke}):s.jsx(w.IconChevronsRight,{size:a,stroke:z.stroke})})]})]})},Ye=({label:e,text:t,children:r,postfix:n})=>s.jsxs("div",{className:l("flex flex-col text-secondary",r?"":"max-w-[200px]"),children:[s.jsx("label",{className:"dial-tiny mb-2",children:e}),r||s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx(P,{triggerClassName:"text-primary",tooltip:t,children:t}),n||null]})]});var Y=(e=>(e.Default="default",e))(Y||{});const Je={[Y.Default]:"border-icon-secondary bg-layer-3"},le=({tag:e,cssClass:t,remove:r,variant:n=Y.Default})=>{const a=Je[n],o=l("flex items-center gap-1 tiny border rounded p-1 h-[22px] text-primary",t,a);return s.jsxs("div",{className:o,children:[s.jsx("span",{children:e}),r&&s.jsx(V,{iconAfter:s.jsx(w.IconX,{size:16}),onClick:r})]},e)},J=({ariaLabel:e,cssClass:t,size:r=24,onClose:n})=>s.jsx(V,{ariaLabel:e,cssClass:l("text-secondary hover:text-accent-primary",t),onClick:n,iconBefore:s.jsx(w.IconX,{size:r})}),ie=({value:e,textareaId:t,placeholder:r,cssClass:n="",disabled:a,invalid:o,readonly:c,onChange:u})=>s.jsx(P,{tooltip:e,triggerClassName:"flex",children:s.jsx("textarea",{id:t,placeholder:r,value:e||"",disabled:a,className:l("dial-textarea dial-input px-3 py-2",o?"dial-input-error":"",a&&"dial-input-disable",c&&"dial-input-readonly",n),onChange:d=>!c&&u?.(d.currentTarget.value)})}),es=["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Backspace","Delete","Tab","Enter","Escape","Home","End"],ss=(e,t,r,n)=>{if((t==="number"||r!==void 0||n!==void 0)&&!es.includes(e.key)&&!(e.key==="-"&&e.currentTarget.selectionStart===0&&(r===void 0||r<0))&&!(e.key==="."&&t==="number"&&!e.currentTarget.value.includes("."))){if(!/^[0-9]$/.test(e.key)){e.preventDefault();return}if(r!==void 0||n!==void 0){const o=e.currentTarget.value,c=e.currentTarget.selectionStart||0,u=o.slice(0,c)+e.key+o.slice(c),d=parseFloat(u);if(!isNaN(d)){if(r!==void 0&&d<r){e.preventDefault();return}if(n!==void 0&&d>n){e.preventDefault();return}}}}},q=({iconBefore:e,iconAfter:t,hideBorder:r,value:n,elementId:a,placeholder:o="",cssClass:c="",containerCssClass:u,tooltipTriggerClassName:d,type:i="text",disabled:x,readonly:p,invalid:j,onChange:g,min:v,max:C,prefix:D,suffix:k,textBeforeInput:y,textAfterInput:b})=>{const N=T=>T.target.blur(),A=i==="number"||v!==void 0||C!==void 0,G=T=>{ss(T,i,v,C)},X=T=>{const R=T.currentTarget.value;if(A&&R!==""){const B=parseFloat(R);if(isNaN(B)&&R!=="-"&&R!=="."||!isNaN(B)&&(v!==void 0&&B<v||C!==void 0&&B>C))return}g?.(R)};return s.jsxs("div",{className:l("dial-input-field flex flex-row items-center justify-between py-2",r?"dial-input-no-border":"dial-input",j&&"dial-input-error",x&&"dial-input-disable",p&&"dial-input-readonly",!y&&"pl-3",!b&&"pr-3",u),children:[y&&s.jsx("div",{children:s.jsx(q,{hideBorder:!0,containerCssClass:"rounded-r-none border-r-0",cssClass:"overflow-hidden overflow-ellipsis dial-small",value:y,disabled:!0,elementId:y+"textBefore"})}),D&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",D]}),s.jsx(S,{icon:e}),s.jsx(P,{tooltip:n,triggerClassName:l(d,"flex-1"),children:s.jsx("input",{type:i,autoComplete:"off",id:a,placeholder:o,value:n??"",disabled:x,className:l("border-0 bg-transparent",c),onChange:T=>!p&&X?.(T),onKeyDown:G,onWheel:N,min:v,max:C})}),s.jsx(S,{icon:t}),k&&s.jsxs("p",{className:"text-secondary dial-small",children:[" ",k]}),b&&s.jsx("div",{children:s.jsx(q,{hideBorder:!0,containerCssClass:"rounded-l-none border-l-0",value:b,disabled:!0,elementId:b+"textAfter"})})]})},ts=/^0+\.(\d+)?$/,rs=/^0+/,ce=({fieldTitle:e,errorText:t,optional:r,elementCssClass:n,elementContainerCssClass:a,elementId:o,containerCssClass:c,readonly:u,defaultEmptyText:d,min:i,max:x,...p})=>s.jsxs("div",{className:l("flex flex-col",c),children:[s.jsx(_,{fieldTitle:e,optional:r,htmlFor:o}),u?s.jsx("span",{children:p.value||(d??"None")}):s.jsxs(s.Fragment,{children:[s.jsx(q,{elementId:o,cssClass:n,containerCssClass:a,invalid:t!=null,min:i,max:x,...p}),s.jsx(H,{errorText:t})]})]}),ns=({onChange:e,value:t,min:r,max:n,...a})=>{const o=c=>String(c)?.match(ts)?String(c)?.replace(rs,"0"):Number(c);return s.jsx(ce,{type:"number",onChange:c=>e?.(o(c)),value:t,min:r,max:n,...a})},as=({onChange:e,...t})=>s.jsx(ce,{type:"text",onChange:r=>e?.(r),...t}),os=({fieldTitle:e,optional:t,elementId:r,elementCssClass:n,errorText:a,...o})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(_,{fieldTitle:e,optional:t,htmlFor:r}),s.jsx(ie,{textareaId:r,cssClass:n,...o}),s.jsx(H,{errorText:a})]}),ls=({title:e,switchId:t,isOn:r=!1,disabled:n,onChange:a})=>{const o=l("flex w-[36px] h-[18px] cursor-pointer items-center gap-1 rounded-full p-0.5 transition-all duration-200",r?"flex-row-reverse":"flex-row",n?"pointer-events-none":"",n?r?"bg-controls-disable":"bg-layer-4":r?"bg-accent-primary":"bg-layer-4"),c=h.useCallback(u=>{u.stopPropagation(),a?.(!r)},[a,r]);return s.jsxs("div",{className:"flex flex-row items-center",children:[s.jsx("input",{type:"checkbox",onChange:c,id:t,disabled:n,className:"invisible w-0 h-0",checked:r}),s.jsx("label",{htmlFor:t,className:o,children:s.jsx("span",{className:l("size-3 rounded-full",n?r?"bg-layer-4":"bg-controls-disable":"bg-controls-enable-primary")})}),e&&s.jsx("span",{className:"pl-2 dial-small text-primary",children:e})]})};var O=(e=>(e.Sm="sm",e.Md="md",e.Lg="lg",e))(O||{});const is="z-[52] flex items-center justify-center bg-blackout md:p-4",cs="divide-tertiary divide-y",ds="flex flex-row justify-between py-4 px-6 items-center",us={[O.Sm]:"dial-sm-popup",[O.Md]:"dial-md-popup",[O.Lg]:"dial-lg-popup"},de=({open:e=!1,title:t,portalId:r,cssClass:n,overlayClass:a,headingClass:o,dividers:c=!0,children:u,footer:d,onClose:i,size:x=O.Md})=>{const{refs:p,context:j}=m.useFloating({open:e,onOpenChange:y=>{y||i?.(null)}}),g=m.useRole(j,{role:"dialog"}),v=m.useDismiss(j,{outsidePress:!0}),{getFloatingProps:C}=m.useInteractions([g,v]);if(!e)return null;const D=typeof t=="string"?"dial-popup-heading":void 0,k=y=>y?typeof y=="string"?s.jsx("h3",{id:D,className:l("flex-1 min-w-0 mr-3 truncate dial-h3 text-primary",o),children:s.jsx(P,{tooltip:y,children:y})}):y:s.jsx("span",{});return s.jsx(m.FloatingPortal,{id:r,children:s.jsx(m.FloatingOverlay,{className:l(is,a),children:s.jsx(m.FloatingFocusManager,{context:j,children:s.jsxs("div",{ref:p.setFloating,...C(),role:"dialog","aria-modal":"true","aria-labelledby":D,className:l("dial-popup",us[x],c&&cs,n),children:[s.jsxs("div",{className:ds,children:[k(t),s.jsx(J,{ariaLabel:"Close dialog",onClose:y=>i?.(y)})]}),s.jsx("div",{className:"flex-grow overflow-auto",children:u}),d]})})})})};var K=(e=>(e.Info="info",e.Danger="danger",e))(K||{});const xs="flex justify-end gap-2 px-6 py-4",ps="text-secondary dial-small-150 px-6 py-4",fs="Cancel",se={[K.Info]:{confirmVariant:E.Primary,cancelVariant:E.Secondary},[K.Danger]:{container:"border-t-4 border-error",confirmVariant:E.Danger,cancelVariant:E.Secondary}},ms=({title:e,description:t,descriptionCssClass:r,open:n=!1,confirmLabel:a,cancelLabel:o=fs,isLoading:c=!1,disableConfirmButton:u=!1,cssClass:d,confirmClassName:i,onClose:x,onConfirm:p,onCancel:j,children:g,dividers:v=!1,variant:C=K.Info,size:D=O.Sm})=>{const k=c?null:s.jsxs("div",{className:xs,children:[s.jsx(V,{variant:E.Secondary,title:o,onClick:()=>j?j():x?.()}),s.jsx(V,{variant:se[C].confirmVariant,cssClass:i,title:a,disable:u,onClick:()=>p()})]}),y=h.useCallback(()=>c?s.jsx("div",{className:"px-6 py-4 h-[120px]",children:s.jsx(re,{size:50})}):g??(t?s.jsx("div",{className:l(ps,r),children:t}):null),[g,t,c,r]);return s.jsx(de,{open:n,title:e,cssClass:l(se[C].container,d),dividers:v,onClose:()=>x?.(),footer:k,size:D,children:y()})},hs=({onClick:e})=>s.jsx(w.IconEyeOff,{...z,className:"text-primary",onClick:e}),gs=({onClick:e})=>s.jsx(w.IconEye,{...z,className:"text-primary",onClick:e}),ue=({...e})=>{const[t,r]=h.useState(!1),n=h.useCallback(a=>{r(a)},[]);return s.jsx(q,{type:t?"text":"password",...e,iconAfter:t?s.jsx(hs,{onClick:()=>n(!1)}):s.jsx(gs,{onClick:()=>n(!0)})})},js=({fieldTitle:e,optional:t,elementCssClass:r,elementId:n,errorText:a,...o})=>s.jsxs("div",{className:"flex flex-col",children:[s.jsx(_,{fieldTitle:e,optional:t,htmlFor:n}),s.jsx(ue,{cssClass:r,elementId:n,invalid:!!a,...o}),s.jsx(H,{errorText:a})]});var U=(e=>(e.Small="small",e.Base="base",e))(U||{});const bs={[U.Small]:{textClass:"text-xs px-1",containerClass:"px-[6px] py-1 h-[22px]",iconSize:10,iconStroke:1},[U.Base]:{textClass:"text-sm px-2",containerClass:"px-3 py-2 h-[38px]",iconSize:18,iconStroke:1.5}},Cs=({elementId:e,value:t,placeholder:r,disabled:n,readonly:a,invalid:o,cssClass:c,containerCssClass:u,onChange:d,size:i=U.Base})=>{const[x,p]=h.useState(t||"");h.useEffect(()=>{p(t||"")},[t]);const j=h.useCallback(C=>{p(C),d?.(C)},[d]),g=bs[i],v=h.useCallback(()=>{j("")},[j]);return s.jsxs("div",{className:l("dial-input flex flex-row items-center justify-between",o&&"dial-input-error",n&&"dial-input-disable",a&&"dial-input-readonly",g.containerClass,u),children:[s.jsx(S,{className:l(n?"text-secondary":"text-primary"),icon:s.jsx(w.IconSearch,{size:g.iconSize,stroke:g.iconStroke})}),s.jsx("input",{id:e,type:"text",autoComplete:"off",placeholder:r,value:x??"",disabled:n,readOnly:a,className:l("border-0 bg-transparent w-full",c,g.textClass),onChange:C=>!a&&j(C.currentTarget.value)}),x&&!a&&!n&&s.jsx(S,{className:"text-primary cursor-pointer",icon:s.jsx(w.IconX,{size:g.iconSize,stroke:g.iconStroke,onClick:v,"aria-label":"Clear search",role:"button"})})]})},ee=({selectedItems:e,listCssClass:t,listElementCssClass:r})=>!!e?.length&&s.jsx("ul",{className:l("flex-row items-center truncate flex-wrap","flex gap-x-2 gap-y-1",t),children:e?.map(n=>s.jsx("li",{className:l(["tiny bg-layer-3 rounded p-1 border border-primary max-w-[200px] truncate",r]),children:s.jsx(P,{tooltip:n,children:s.jsx("button",{"aria-label":"autocomplete-action",type:"button",className:"truncate w-full",children:n})})},n))}),te=e=>F.createElement("svg",{width:18,height:18,viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},F.createElement("path",{d:"M2.25 13.5V12C2.25 11.5858 2.58579 11.25 3 11.25C3.41421 11.25 3.75 11.5858 3.75 12V13.5C3.75 13.6989 3.82907 13.8896 3.96973 14.0303C4.11038 14.1709 4.30109 14.25 4.5 14.25H6C6.41421 14.25 6.75 14.5858 6.75 15C6.75 15.4142 6.41421 15.75 6 15.75H4.5C3.90326 15.75 3.33114 15.5128 2.90918 15.0908C2.48722 14.6689 2.25 14.0967 2.25 13.5ZM14.25 6V4.5C14.25 4.30109 14.1709 4.11038 14.0303 3.96973C13.8896 3.82907 13.6989 3.75 13.5 3.75H12C11.5858 3.75 11.25 3.41421 11.25 3C11.25 2.58579 11.5858 2.25 12 2.25H13.5C14.0967 2.25 14.6689 2.48722 15.0908 2.90918C15.5128 3.33114 15.75 3.90326 15.75 4.5V6C15.75 6.41421 15.4142 6.75 15 6.75C14.5858 6.75 14.25 6.41421 14.25 6Z",fill:"currentColor"})),ys=({children:e,open:t,readonly:r,selectedValue:n,valueCssClasses:a,inputCssClasses:o,onOpen:c,elementId:u,errorText:d,emptyValueText:i})=>{const x=Array.isArray(n)&&n.length>0,p=typeof n=="string"&&!!n.trim(),j=x||p?n:i,g=r?void 0:c,v=()=>s.jsxs(s.Fragment,{children:[s.jsx("button",{type:"button",className:"w-full",onClick:g,"aria-label":"open-popup",id:u,children:s.jsxs("div",{className:l("dial-input px-3 py-2 dial-input-field flex flex-row items-center w-full justify-between",o,r&&"dial-input-disable",d&&"dial-input-error"),children:[s.jsx(P,{tooltip:String(j),children:s.jsx("span",{className:a,children:j})}),!r&&s.jsx("div",{className:"flex-shrink-0",children:s.jsx(S,{icon:s.jsx(te,{role:"img",width:W,height:W})})})]})}),d&&s.jsx(H,{errorText:d})]}),C=()=>s.jsx("div",{className:"w-full",onClick:g,children:s.jsxs("div",{className:l("dial-input px-3 py-2 flex flex-row items-center w-full justify-between",r&&"dial-input-disable"),children:[s.jsx(ee,{selectedItems:j}),!r&&s.jsx("div",{className:"ml-1",children:s.jsx(S,{icon:s.jsx(te,{role:"img",width:W,height:W})})})]})});return s.jsxs(s.Fragment,{children:[x?C():v(),t&&we.createPortal(e,document.body)]})},vs=({placeholder:e="",selectedItems:t=[],updateSelected:r,listCssClass:n,listElementCssClass:a,containerCssClass:o,inputCssClass:c})=>{const[u,d]=h.useState(""),i=h.useCallback(p=>{p.key==="Enter"&&(r([...t,p.currentTarget.value]),d("")),(p.key==="Backspace"||p.key==="Delete")&&t.length&&!u&&r(t.slice(0,-1))},[t,r,u]),x=h.useCallback(p=>{d(p.target.value)},[d]);return s.jsxs("div",{className:l(["dial-input px-3 py-2 flex flex-row items-center flex-wrap w-fit gap-2",o]),children:[s.jsx(ee,{selectedItems:t,listCssClass:n,listElementCssClass:a}),s.jsx("input",{type:"text",value:u,className:l(["border-0 bg-transparent p-0",c]),placeholder:t?.length?"":e,onKeyDown:i,onChange:x})]})},ws=({initialTags:e=[],fieldTitle:t,optional:r,elementId:n,placeholder:a,errorText:o,invalid:c,disabled:u,onChange:d})=>{const i=h.useRef(null),[x,p]=h.useState(e),[j,g]=h.useState(""),[v,C]=h.useState(!1),D=b=>{const N=b.trim().replace(/,$/,"");if(N&&!x.includes(N)){const A=[N,...x];p(A),d?.(A)}},k=b=>{(b.key===","||b.key==="Enter")&&(b.preventDefault(),D(j),g(""))},y=b=>{const N=x.filter((A,G)=>G!==b);p(N),d?.(N)};return h.useEffect(()=>{const b=new ResizeObserver(()=>{if(i.current){const N=i.current.scrollHeight>i.current.clientHeight+10;C(N)}});return i.current&&b.observe(i.current),()=>b.disconnect()},[x]),s.jsxs("div",{className:l("flex flex-col w-full"),children:[s.jsx(_,{fieldTitle:t,optional:r,htmlFor:n}),s.jsx("div",{className:l("dial-input min-h-[38px] p-[6px]",c&&"dial-input-error",u&&"dial-input-disable"),children:s.jsxs("div",{ref:i,className:l("flex flex-wrap gap-2 items-center",v?"flex-col-reverse":"flex-row"),children:[x.map((b,N)=>s.jsx(le,{tag:b,remove:u?void 0:()=>y(N)},b+N)),s.jsx("input",{type:"text",value:j,onChange:b=>g(b.target.value),onKeyDown:k,className:l("dial-input-no-border outline-none border-none w-full min-w-[100px] flex-1 p-1"),placeholder:a,disabled:u})]})}),s.jsx(H,{errorText:o})]})};var xe=(e=>(e.Dropdown="dropdown",e.Menu="menu",e))(xe||{}),$=(e=>(e.Click="click",e.Hover="hover",e.ContextMenu="contextMenu",e))($||{}),pe=(e=>(e.Item="item",e.Divider="divider",e))(pe||{});const Ns=l("inline-flex items-center gap-2 align-middle","h-auto px-0 bg-transparent border-0"),ks=l("z-[53] overflow-auto rounded bg-layer-0 text-primary shadow focus-visible:outline-none","w-max"),Ds=l("flex w-full cursor-pointer items-center gap-3","focus-visible:border-none focus-visible:outline-none","hover:bg-accent-primary-alpha px-3","dial-small h-[34px] rounded text-primary"),Is="opacity-75 !cursor-not-allowed",Ss="text-error",Rs="my-1 border-t border-hover",Z=8,Fs=({children:e,menu:t,renderOverlay:r,trigger:n=[$.Click],placement:a,disabled:o=!1,open:c,defaultOpen:u=!1,onOpenChange:d,closable:i=!1,onClose:x,cssClass:p,listClassName:j,outsidePressIgnoreRef:g,outsideClosable:v=!0})=>{const[C,D]=h.useState(u),k=c!==void 0,y=k?!!c:C,b=h.useCallback(f=>{k||D(f),d?.(f)},[k,d]),N=h.useId(),A=f=>f?"clientWidth"in f?f.clientWidth:f.getBoundingClientRect?.()?.width??0:0,G=a===void 0,{refs:X,floatingStyles:T,context:R}=m.useFloating({placement:a,open:y,onOpenChange:b,whileElementsMounted:m.autoUpdate,middleware:[m.offset({mainAxis:Z,crossAxis:0}),G?m.autoPlacement({alignment:"start",crossAxis:!0,padding:Z}):m.flip({padding:Z}),m.shift({padding:Z}),m.size({apply({availableWidth:f,elements:L}){const ve=A(L.reference);L.floating.style.setProperty("--reference-width",`${ve}px`),L.floating.style.maxWidth=`${f}px`}})]}),B=m.useClick(R,{enabled:n.includes($.Click)&&!o}),fe=m.useHover(R,{enabled:n.includes($.Hover)&&!o,move:!1,restMs:40,delay:{open:80,close:80}}),me=m.useDismiss(R,{bubbles:!0,referencePress:!1,outsidePress:f=>{if(!v)return!1;const L=f.target;return!(g?.current&&L instanceof Node&&g.current.contains(L))}}),he=m.useRole(R,{role:"menu"}),{getReferenceProps:ge,getFloatingProps:je}=m.useInteractions([B,fe,me,he]),be=f=>{!n.includes($.ContextMenu)||o||(f.preventDefault(),b(!0))};h.useEffect(()=>{o&&y&&b(!1)},[o,y,b]);const Ce=f=>L=>{f.disabled||(f.onClick?.({key:f.key,domEvent:L}),t?.onClick?.({key:f.key,domEvent:L}),b(!1))},ye=r?r():t&&s.jsx("div",{role:"none",className:"py-1",children:t.items.map(f=>f.type===pe.Divider?s.jsx("div",{role:"separator",className:Rs},f.key):s.jsxs("button",{role:"menuitem",type:"button","aria-disabled":!!f.disabled,className:l(Ds,f.disabled&&Is,f.danger&&Ss),disabled:f.disabled,onClick:Ce(f),children:[f.icon&&s.jsx("span",{className:l(f.danger&&"text-error",f.disabled&&"text-secondary"),children:s.jsx(S,{icon:f.icon})}),s.jsx("span",{className:l("flex-1 truncate text-left",f.danger&&"text-error",f.disabled&&"text-secondary"),children:f.label})]},f.key))});return s.jsxs(s.Fragment,{children:[s.jsx("span",{ref:X.setReference,className:l(Ns,o&&"!cursor-not-allowed opacity-75",p),"aria-haspopup":"menu","aria-expanded":y,"aria-controls":N,onContextMenu:be,...ge(),children:e}),y&&s.jsx(m.FloatingPortal,{children:s.jsx(m.FloatingFocusManager,{context:R,modal:!1,initialFocus:-1,returnFocus:!0,children:s.jsxs("div",{id:N,ref:X.setFloating,style:T,className:l(ks,j),...je(),children:[i&&s.jsx("div",{className:"flex items-center justify-between px-2 pt-2",children:s.jsx(J,{ariaLabel:"Close dropdown",onClose:f=>{x?.(f),b(!1)}})}),ye]})})})]})};exports.AlertVariant=M;exports.ButtonVariant=E;exports.ConfirmationPopupVariant=K;exports.DialAlert=Re;exports.DialAutocompleteInput=vs;exports.DialAutocompleteInputValue=ee;exports.DialButton=V;exports.DialCheckbox=Be;exports.DialCloseButton=J;exports.DialCollapsibleSidebar=Qe;exports.DialConfirmationPopup=ms;exports.DialDropdown=Fs;exports.DialErrorText=H;exports.DialFieldLabel=_;exports.DialIcon=S;exports.DialInput=q;exports.DialInputPopup=ys;exports.DialLabelledText=Ye;exports.DialLoader=re;exports.DialNoDataContent=Xe;exports.DialNumberInputField=ns;exports.DialPasswordInput=ue;exports.DialPasswordInputField=js;exports.DialPopup=de;exports.DialRadioButton=oe;exports.DialRadioGroup=Ue;exports.DialSearch=Cs;exports.DialSteps=_e;exports.DialSwitch=ls;exports.DialTag=le;exports.DialTagInput=ws;exports.DialTextAreaField=os;exports.DialTextInputField=as;exports.DialTextarea=ie;exports.DialTooltip=P;exports.DropdownType=xe;exports.PopupSize=O;exports.RadioGroupOrientation=Q;exports.SearchSize=U;exports.StepStatus=I;exports.TagVariant=Y;
|