@epam/ai-dial-ui-kit 0.4.0-rc.2 → 0.4.0-rc.21
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 +62 -2
- package/dist/dial-ui-kit.es.js +42789 -3395
- package/dist/index.css +2 -2
- package/dist/src/components/AutocompleteInput/AutocompleteInputValue.d.ts +2 -0
- package/dist/src/components/CollapsibleSidebar/CollapsibleSidebar.d.ts +7 -3
- package/dist/src/components/FileManager/FileManager.d.ts +93 -0
- package/dist/src/components/FileManager/__mocks__/files.d.ts +3 -0
- package/dist/src/components/FileManager/components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar.d.ts +53 -0
- package/dist/src/components/FileManager/components/FileManagerBulkActionsToolbar/constants.d.ts +3 -0
- package/dist/src/components/FileManager/components/FileManagerNavigationPanel/constants.d.ts +1 -1
- package/dist/src/components/FileManager/components/FileManagerToolbar/DialFileManagerToolbar.d.ts +6 -5
- package/dist/src/components/FileManager/components/FoldersTree/FoldersTree.d.ts +4 -2
- package/dist/src/components/FileManager/constants.d.ts +9 -0
- package/dist/src/components/FileManager/hooks/use-collapse-tree.d.ts +5 -0
- package/dist/src/components/FileManager/hooks/use-file-manager-tabs.d.ts +7 -0
- package/dist/src/components/FileManager/hooks/use-show-hidden-files.d.ts +5 -0
- package/dist/src/components/FileManager/utils.d.ts +6 -0
- package/dist/src/components/Input/Input.d.ts +2 -0
- package/dist/src/components/InputPopup/InputPopup.d.ts +6 -2
- package/dist/src/components/SelectField/SelectField.d.ts +5 -0
- package/dist/src/hooks/use-is-tablet-screen.d.ts +15 -0
- package/dist/src/index.d.ts +4 -1
- package/dist/src/models/select.d.ts +1 -0
- package/dist/src/types/file-manager.d.ts +5 -0
- package/dist/src/utils/mobile.d.ts +14 -0
- package/package.json +8 -8
package/dist/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.dial-h1{font-weight:600}.dial-h1,.dial-h2{font-size:20px;line-height:24px}.dial-h2{font-weight:400}.dial-h3{font-weight:600;line-height:18px}.dial-body,.dial-h3{font-size:16px}.dial-body{font-weight:400;line-height:28px}.dial-small{font-weight:400}.dial-small,.dial-small-semi{font-size:14px;line-height:16px}.dial-small-semi{font-weight:600}.dial-small-medium{font-weight:400;font-size:14px;line-height:16px}.dial-small-150{font-weight:400;font-size:14px;line-height:21px}.dial-tiny{line-height:14px}.dial-tiny,.dial-tiny-150{font-weight:400;font-size:12px}.dial-tiny-150{line-height:18px}.dial-caption{font-weight:400;font-size:10px;line-height:12px}h1{font-weight:600}h1,h2{font-size:20px;line-height:24px}h2{font-weight:400}h3{font-weight:600;font-size:16px;line-height:18px}.dial-base-button{display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px}.dial-base-button-disable{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}.dial-primary-button{background-color:var(--controls-bg-accent,#5c8dea);color:var(--controls-primary,#fcfcfc);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--controls-bg-accent-hover,#4878d2)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-secondary-button{background-color:transparent;color:var(--text-primary,#f3f4f6);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;border-color:var(--stroke-primary,#333942);&:focus,&:hover{background-color:var(--bg-layer-4,#333942)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-tertiary-button{background-color:transparent;color:var(--text-accent-primary,#5c8dea);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--controls-bg-accent-alpha,#5c8dea2b)}&:active,&:focus{border-color:var(--stroke-accent-primary,#5c8dea)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-danger-button{background-color:var(--bg-red-400,#f76464);color:var(--text-primary,#f3f4f6);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--bg-red-800,#ae2f2f)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-input{border-radius:3px;border-width:1px;border-style:solid;border-color:var(--stroke-primary,#333942);&:hover{border-color:var(--stroke-hover,#f3f4f6)}&:focus,&:focus-within{border-color:var(--stroke-accent-primary,#5c8dea)}}.dial-input,.dial-input-no-border{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;font-weight:400;font-size:14px;line-height:16px;width:100%;outline-width:0;&:not(:-moz-placeholder){color:var(--text-primary,#f3f4f6)}&:not(:placeholder-shown){color:var(--text-primary,#f3f4f6)}&:disabled{background-color:var(--bg-layer-3,#222932)}&:disabled:not(:-moz-placeholder){color:var(--text-secondary,#7f8792)}&:disabled,&:disabled:not(:placeholder-shown){color:var(--text-secondary,#7f8792)}}.dial-input-disable,.dial-input-readonly{background-color:var(--bg-layer-3,#222932)}.dial-input-disable:not(:-moz-placeholder){color:var(--text-secondary,#7f8792)}.dial-input-disable,.dial-input-disable:not(:placeholder-shown){color:var(--text-secondary,#7f8792)}.dial-input-error{border-color:var(--stroke-error,#f76464)}.dial-input-field{height:38px}input{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}&:focus{outline:none}}.dial-textarea{min-height:72px;resize:both;overflow:auto;white-space:normal}.dial-input-radio{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding:0;height:18px;width:18px;border-color:var(--stroke-hover,#f3f4f6);background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:currentColor;font:inherit;&:checked{border-color:var(--stroke-accent-primary,#5c8dea)}&:checked{&:after{height:10px;width:10px;background-color:var(--bg-accent-primary,#5c8dea);content:"";border-radius:18px}}&:focus,&:hover{border-width:1px;border-color:var(--stroke-accent-primary,#5c8dea);background-color:transparent}&:disabled{pointer-events:none}&:disabled{&:checked{border-color:var(--stroke-primary,#333942)}&:checked{&:after{background-color:var(--controls-bg-disable,#7f8792)}}}}div .dial-sm-popup{max-width:100%}@media (min-width:768px){div .dial-sm-popup{max-width:400px}}div .dial-md-popup{max-width:100%}@media (min-width:768px){div .dial-md-popup{max-width:800px}}div .dial-lg-popup{max-width:100%}@media (min-width:768px){div .dial-lg-popup{max-width:1200px}}div .dial-popup{position:relative;display:flex;height:100%;max-height:100%;width:100%;flex-direction:column;border-radius:3px;background-color:var(--bg-layer-3,#222932);--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:768px){div .dial-popup{height:auto}}div .dial-danger-popup{border-top-width:4px;border-color:var(--stroke-error,#f76464)}.ag-root-wrapper{.ag-root-wrapper-body{height:auto}.ag-filter-wrapper{.ag-input-field-input.ag-text-field-input{padding-left:1.25rem}}overflow-x:auto;.ag-header{.ag-header-cell.align-right{.ag-header-cell-label{justify-content:flex-end}}.ag-header-cell{.header-checkbox-container{display:flex;height:100%;width:100%;align-items:center;justify-content:center}}.ag-header-viewport,.ag-pinned-left-header{.ag-floating-filter{input{margin:0;padding:0;padding-left:.5rem;padding-right:.5rem;height:24px!important}}}}.ag-cell{display:flex;align-items:center}.ag-cell{&.ag-cell-focus,&.ag-grid-no-border{border-width:0}&.align-right{justify-content:flex-end}}.ag-error-row{background-color:var(--bg-error,#402027)}.ag-error-row{#editable-cell-renderer{border-color:var(--stroke-error,#f76464)}&.ag-error-border{border-width:1px;border-color:var(--stroke-error,#f76464);cursor:pointer}&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}.ag-new-row{background-color:var(--bg-success,#1d3841)}.ag-new-row{&.ag-new-border{border-width:1px;border-color:var(--stroke-accent-secondary,#37babc);cursor:pointer}&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}.ag-changed-row{background-color:var(--bg-info,#1c2c47)}.ag-changed-row{&.ag-changed-border{border-width:1px;border-color:var(--stroke-accent-primary,#5c8dea);cursor:pointer}&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}.ag-empty-row{&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}}.with-selection-column{.ag-row .dial-row-select{opacity:0;transition:opacity .12s ease}.ag-row-hover .dial-row-select,.ag-row-selected .dial-row-select{opacity:1}.header-checkbox-container .dial-header-select.unchecked{opacity:0;transition:opacity .12s ease}.ag-header-cell:hover .header-checkbox-container .dial-header-select.unchecked,.header-checkbox-container .dial-header-select.checked,.header-checkbox-container .dial-header-select.indeterminate{opacity:1}}.ag-layout-auto-height{.ag-center-cols-container,.ag-center-cols-viewport{min-height:0}}@layer ui{*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
|
|
2
|
-
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}::-webkit-scrollbar-corner,::-webkit-scrollbar-track,::-webkit-scrollbar-track:hover,:not(:hover)::-webkit-scrollbar-thumb{background-color:transparent}::-webkit-scrollbar-thumb{cursor:pointer;border-radius:3px;background-color:var(--bg-layer-4,#333942)}::-webkit-scrollbar{height:4px;width:4px}*{scrollbar-width:thin;scrollbar-color:transparent transparent}:hover{scrollbar-color:var(--bg-layer-4,#333942) transparent}.divide-y>:empty~:not([hidden]){border-top:none;border-bottom:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.-bottom-0\.5{bottom:-.125rem}.-left-0\.5{left:-.125rem}.z-\[52\]{z-index:52}.z-\[53\]{z-index:53}.z-\[55\]{z-index:55}.m-0{margin:0}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-\[2px\]{margin-bottom:2px}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-\[26px\]{margin-left:26px}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.size-3{width:.75rem;height:.75rem}.h-0{height:0}.h-11{height:2.75rem}.h-12{height:3rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\[10px\]{height:10px}.h-\[120px\]{height:120px}.h-\[12\]{height:12}.h-\[18px\]{height:18px}.h-\[200px\]{height:200px}.h-\[22px\]{height:22px}.h-\[250px\]{height:250px}.h-\[300px\]{height:300px}.h-\[32px\]{height:32px}.h-\[34px\]{height:34px}.h-\[38px\]{height:38px}.h-\[400px\]{height:400px}.h-\[4px\]{height:4px}.h-\[500px\]{height:500px}.h-auto{height:auto}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-4{min-height:1rem}.min-h-\[220px\]{min-height:220px}.min-h-\[38px\]{min-height:38px}.min-h-\[42px\]{min-height:42px}.min-h-\[48px\]{min-height:48px}.min-h-\[72px\]{min-height:72px}.min-h-screen{min-height:100vh}.w-0{width:0}.w-12{width:3rem}.w-2{width:.5rem}.w-32{width:8rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-96{width:24rem}.w-\[10px\]{width:10px}.w-\[160px\]{width:160px}.w-\[18px\]{width:18px}.w-\[22px\]{width:22px}.w-\[250px\]{width:250px}.w-\[260px\]{width:260px}.w-\[280px\]{width:280px}.w-\[300px\]{width:300px}.w-\[320px\]{width:320px}.w-\[360px\]{width:360px}.w-\[36px\]{width:36px}.w-\[400px\]{width:400px}.w-\[420px\]{width:420px}.w-\[450px\]{width:450px}.w-\[480px\]{width:480px}.w-\[4px\]{width:4px}.w-\[500px\]{width:500px}.w-\[520px\]{width:520px}.w-\[600px\]{width:600px}.w-\[800px\]{width:800px}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.min-w-0{min-width:0}.min-w-\[100px\]{min-width:100px}.min-w-\[160px\]{min-width:160px}.min-w-\[180px\]{min-width:180px}.min-w-\[400px\]{min-width:400px}.min-w-\[600px\]{min-width:600px}.min-w-\[800px\]{min-width:800px}.max-w-80{max-width:20rem}.max-w-\[1000px\]{max-width:1000px}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1400px\]{max-width:1400px}.max-w-\[160px\]{max-width:160px}.max-w-\[200px\]{max-width:200px}.max-w-\[300px\]{max-width:300px}.max-w-\[80px\]{max-width:80px}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.grow-0{flex-grow:0}.basis-auto{flex-basis:auto}.border-collapse{border-collapse:collapse}.rotate-180{--tw-rotate:180deg}.rotate-180,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate:90deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-steps{animation:spin .75s steps(8) infinite}.\!cursor-not-allowed{cursor:not-allowed!important}.cursor-default{cursor:default}.cursor-move{cursor:move}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-\[minmax\(0\2c 100px\)_1fr\]{grid-template-columns:minmax(0,100px) 1fr}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-\[2px\]{gap:2px}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-\[160px\]{-moz-column-gap:160px;column-gap:160px}.gap-y-1{row-gap:.25rem}.gap-y-10{row-gap:2.5rem}.gap-y-3{row-gap:.75rem}.gap-y-6{row-gap:1.5rem}.gap-y-\[80px\]{row-gap:80px}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-tertiary>:not([hidden])~:not([hidden]){border-color:var(--stroke-tertiary,#090d13)}.self-end{align-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.rounded{border-radius:3px}.rounded-\[8px\]{border-radius:8px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-xl{border-radius:.75rem}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-2,.border-b-\[2px\]{border-bottom-width:2px}.border-l{border-left-width:1px}.border-l-0{border-left-width:0}.border-l-2{border-left-width:2px}.border-l-4{border-left-width:4px}.border-r-0{border-right-width:0}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-t-4{border-top-width:4px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-\[\#F4CE46\]{--tw-border-opacity:1;border-color:rgb(244 206 70/var(--tw-border-opacity,1))}.border-accent-primary{border-color:var(--stroke-accent-primary,#5c8dea)}.border-accent-secondary{border-color:var(--stroke-accent-secondary,#37babc)}.border-error{border-color:var(--stroke-error,#f76464)}.border-hover{border-color:var(--stroke-hover,#f3f4f6)}.border-icon-secondary{border-color:var(--icon-secondary,#7f8792)}.border-primary{border-color:var(--stroke-primary,#333942)}.border-red-900{border-color:var(--red-900,#402027)}.border-secondary{border-color:var(--stroke-secondary,#222932)}.border-tertiary{border-color:var(--stroke-tertiary,#090d13)}.border-transparent{border-color:transparent}.border-b-accent-primary{border-bottom-color:var(--stroke-accent-primary,#5c8dea)}.border-l-accent-primary{border-left-color:var(--stroke-accent-primary,#5c8dea)}.border-l-transparent{border-left-color:transparent}.\!bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)!important}.bg-accent-primary{background-color:var(--bg-accent-primary,#5c8dea)}.bg-accent-primary-alpha{background-color:var(--bg-accent-primary-alpha,#5c8dea2b)}.bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)}.bg-blackout{background-color:var(--bg-blackout,#090d13b3)}.bg-controls-accent{background-color:var(--controls-bg-accent,#5c8dea)}.bg-controls-disable{background-color:var(--controls-bg-disable,#7f8792)}.bg-controls-enable-primary{background-color:var(--controls-enable-primary,#fcfcfc)}.bg-error{background-color:var(--bg-error,#402027)}.bg-info{background-color:var(--bg-info,#1c2c47)}.bg-layer-0{background-color:var(--bg-layer-0,#000)}.bg-layer-1{background-color:var(--bg-layer-1,#090d13)}.bg-layer-2{background-color:var(--bg-layer-2,#141a23)}.bg-layer-3{background-color:var(--bg-layer-3,#222932)}.bg-layer-4{background-color:var(--bg-layer-4,#333942)}.bg-red-400{background-color:var(--bg-red-400,#f76464)}.bg-success{background-color:var(--bg-success,#1d3841)}.bg-transparent{background-color:transparent}.bg-warning{background-color:var(--bg-warning,#3f3d25)}.stroke-primary{stroke:var(--stroke-primary,#333942)}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-\[6px\]{padding:6px}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[6px\]{padding-left:6px;padding-right:6px}.py-0{padding-top:0;padding-bottom:0}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-\[6px\]{padding-top:6px;padding-bottom:6px}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-\[6px\]{padding-bottom:6px}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-\[6px\]{padding-right:6px}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font{font-family:var(--theme-font,var(--font-inter))}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.leading-4{line-height:1rem}.leading-none{line-height:1}.tracking-wider{letter-spacing:.05em}.\!text-error{color:var(--text-error,#f76464)!important}.text-\[var\(--bg-layer-0\2c _\#000000\)\]{color:var(--bg-layer-0,#000)}.text-accent-primary{color:var(--text-accent-primary,#5c8dea)}.text-accent-secondary{color:var(--text-accent-secondary,#37babc)}.text-accent-tertiary{color:var(--text-accent-tertiary,#a972ff)}.text-controls-disable{color:var(--controls-disable,#333942)}.text-error{color:var(--text-error,#f76464)}.text-icon-accent-primary{color:var(--icon-accent-primary,#5c8dea)}.text-icon-accent-secondary{color:var(--icon-accent-secondary,#37babc)}.text-icon-secondary{color:var(--icon-secondary,#7f8792)}.text-info{color:var(--text-info,#5c8dea)}.text-primary{color:var(--text-primary,#f3f4f6)}.text-secondary{color:var(--text-secondary,#7f8792)}.text-success{color:var(--text-success,#37babc)}.text-transparent{color:transparent}.text-warning{color:var(--text-warning,#f4ce46)}.text-white{color:var(--text-white,#fff)}.underline{text-decoration-line:underline}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.shadow{--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color)}.shadow,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.outline-offset-0{outline-offset:0}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-1,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-sky-400{--tw-ring-opacity:1;--tw-ring-color:rgb(56 189 248/var(--tw-ring-opacity,1))}.ring-offset-1{--tw-ring-offset-width:1px}.ring-offset-2{--tw-ring-offset-width:2px}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.\[writing-mode\:tb-rl\]{writing-mode:tb-rl}}.before\:mr-2:before{content:var(--tw-content);margin-right:.5rem}.before\:inline-block:before{content:var(--tw-content);display:inline-block}.before\:h-\[18px\]:before{content:var(--tw-content);height:18px}.before\:w-\[18px\]:before{content:var(--tw-content);width:18px}.before\:rounded:before{content:var(--tw-content);border-radius:3px}.before\:border:before{content:var(--tw-content);border-width:1px}.before\:border-hover:before{content:var(--tw-content);border-color:var(--stroke-hover,#f3f4f6)}.before\:border-icon-secondary:before{content:var(--tw-content);border-color:var(--icon-secondary,#7f8792)}.before\:bg-layer-4:before{content:var(--tw-content);background-color:var(--bg-layer-4,#333942)}.before\:content-\[\"\"\]:before{--tw-content:"";content:var(--tw-content)}.hover\:border-hover:hover{border-color:var(--stroke-hover,#f3f4f6)}.hover\:bg-accent-primary-alpha:hover{background-color:var(--bg-accent-primary-alpha,#5c8dea2b)}.hover\:text-accent-primary:hover{color:var(--text-accent-primary,#5c8dea)}.hover\:text-accent-tertiary:hover{color:var(--text-accent-tertiary,#a972ff)}.hover\:text-error:hover{color:var(--text-error,#f76464)}.hover\:text-icon-accent-primary:hover{color:var(--icon-accent-primary,#5c8dea)}.hover\:text-primary:hover{color:var(--text-primary,#f3f4f6)}.hover\:opacity-90:hover{opacity:.9}.focus\:bg-accent-primary-alpha:focus{background-color:var(--bg-accent-primary-alpha,#5c8dea2b)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:border-none:focus-visible{border-style:none}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:outline:focus-visible{outline-style:solid}.disabled\:opacity-60:disabled{opacity:.6}.group:hover .group-hover\:visible{visibility:visible}@media (min-width:640px){.sm\:inline{display:inline}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:768px){.md\:max-w-\[1200px\]{max-width:1200px}.md\:max-w-\[400px\]{max-width:400px}.md\:max-w-\[800px\]{max-width:800px}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:p-4{padding:1rem}}@media (min-width:1024px){.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}
|
|
1
|
+
.dial-h1{font-weight:600}.dial-h1,.dial-h2{font-size:20px;line-height:24px}.dial-h2{font-weight:400}.dial-h3{font-weight:600;line-height:18px}.dial-body,.dial-h3{font-size:16px}.dial-body{font-weight:400;line-height:28px}.dial-small{font-weight:400}.dial-small,.dial-small-semi{font-size:14px;line-height:16px}.dial-small-semi{font-weight:600}.dial-small-medium{font-weight:400;font-size:14px;line-height:16px}.dial-small-150{font-weight:400;font-size:14px;line-height:21px}.dial-tiny{line-height:14px}.dial-tiny,.dial-tiny-150{font-weight:400;font-size:12px}.dial-tiny-150{line-height:18px}.dial-caption{font-weight:400;font-size:10px;line-height:12px}h1{font-weight:600}h1,h2{font-size:20px;line-height:24px}h2{font-weight:400}h3{font-weight:600;font-size:16px;line-height:18px}.dial-base-button{display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px}.dial-base-button-disable{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}.dial-primary-button{background-color:var(--controls-bg-accent,#5c8dea);color:var(--controls-primary,#fcfcfc);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--controls-bg-accent-hover,#4878d2)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-secondary-button{background-color:transparent;color:var(--text-primary,#f3f4f6);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;border-color:var(--stroke-primary,#333942);&:focus,&:hover{background-color:var(--bg-layer-4,#333942)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-tertiary-button{background-color:transparent;color:var(--text-accent-primary,#5c8dea);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--controls-bg-accent-alpha,#5c8dea2b)}&:active,&:focus{border-color:var(--stroke-accent-primary,#5c8dea)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-danger-button{background-color:var(--bg-red-400,#f76464);color:var(--text-primary,#f3f4f6);display:flex;flex-direction:row;align-items:center;padding:.5rem .75rem;border-radius:3px;border:1px solid transparent;font-weight:400;font-size:14px;line-height:16px;min-width:38px;min-height:38px;&:focus,&:hover{background-color:var(--bg-red-800,#ae2f2f)}&:focus{border-color:var(--stroke-hover,#f3f4f6)}&:disabled{pointer-events:none;background-color:var(--controls-bg-disable,#7f8792);color:var(--controls-disable,#333942)}}.dial-input{border-radius:3px;border-width:1px;border-style:solid;border-color:var(--stroke-primary,#333942);&:hover{border-color:var(--stroke-hover,#f3f4f6)}&:focus,&:focus-within{border-color:var(--stroke-accent-primary,#5c8dea)}}.dial-input,.dial-input-no-border{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:transparent;font-weight:400;font-size:14px;line-height:16px;width:100%;outline-width:0;&:not(:-moz-placeholder){color:var(--text-primary,#f3f4f6)}&:not(:placeholder-shown){color:var(--text-primary,#f3f4f6)}&:disabled{background-color:var(--bg-layer-3,#222932)}&:disabled:not(:-moz-placeholder){color:var(--text-secondary,#7f8792)}&:disabled,&:disabled:not(:placeholder-shown){color:var(--text-secondary,#7f8792)}}.dial-input-disable,.dial-input-readonly{background-color:var(--bg-layer-3,#222932)}.dial-input-disable:not(:-moz-placeholder){color:var(--text-secondary,#7f8792)}.dial-input-disable,.dial-input-disable:not(:placeholder-shown){color:var(--text-secondary,#7f8792)}.dial-input-error{border-color:var(--stroke-error,#f76464)}.dial-input-field{height:38px}input{-moz-appearance:textfield;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}&:focus{outline:none}}.dial-textarea{min-height:72px;resize:both;overflow:auto;white-space:normal}.dial-input-radio{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding:0;height:18px;width:18px;border-color:var(--stroke-hover,#f3f4f6);background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:currentColor;font:inherit;&:checked{border-color:var(--stroke-accent-primary,#5c8dea)}&:checked{&:after{height:10px;width:10px;background-color:var(--bg-accent-primary,#5c8dea);content:"";border-radius:18px}}&:focus,&:hover{border-width:1px;border-color:var(--stroke-accent-primary,#5c8dea);background-color:transparent}&:disabled{pointer-events:none}&:disabled{&:checked{border-color:var(--stroke-primary,#333942)}&:checked{&:after{background-color:var(--controls-bg-disable,#7f8792)}}}}div .dial-sm-popup{max-width:100%}@media (min-width:768px){div .dial-sm-popup{max-width:400px}}div .dial-md-popup{max-width:100%}@media (min-width:768px){div .dial-md-popup{max-width:800px}}div .dial-lg-popup{max-width:100%}@media (min-width:768px){div .dial-lg-popup{max-width:1200px}}div .dial-popup{position:relative;display:flex;height:100%;max-height:100%;width:100%;flex-direction:column;border-radius:3px;background-color:var(--bg-layer-3,#222932);--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:768px){div .dial-popup{height:auto}}div .dial-danger-popup{border-top-width:4px;border-color:var(--stroke-error,#f76464)}.ag-root-wrapper{.ag-root-wrapper-body{height:auto}.ag-filter-wrapper{.ag-input-field-input.ag-text-field-input{padding-left:1.25rem}}overflow-x:auto;.ag-header{.ag-header-cell.align-right{.ag-header-cell-label{justify-content:flex-end}}.ag-header-cell{.header-checkbox-container{display:flex;height:100%;width:100%;align-items:center;justify-content:center}}.ag-header-viewport,.ag-pinned-left-header{.ag-floating-filter{input{margin:0;padding:0;padding-left:.5rem;padding-right:.5rem;height:24px!important}}}}.ag-cell{display:flex;align-items:center}.ag-cell{&.ag-cell-focus,&.ag-grid-no-border{border-width:0}&.align-right{justify-content:flex-end}}.ag-error-row{background-color:var(--bg-error,#402027)}.ag-error-row{#editable-cell-renderer{border-color:var(--stroke-error,#f76464)}&.ag-error-border{border-width:1px;border-color:var(--stroke-error,#f76464);cursor:pointer}&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}.ag-new-row{background-color:var(--bg-success,#1d3841)}.ag-new-row{&.ag-new-border{border-width:1px;border-color:var(--stroke-accent-secondary,#37babc);cursor:pointer}&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}.ag-changed-row{background-color:var(--bg-info,#1c2c47)}.ag-changed-row{&.ag-changed-border{border-width:1px;border-color:var(--stroke-accent-primary,#5c8dea);cursor:pointer}&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}.ag-empty-row{&.ag-row-hover:not(.ag-full-width-row):before{background-color:transparent}}}.with-selection-column{.ag-row .dial-row-select{opacity:0;transition:opacity .12s ease}.ag-row-hover .dial-row-select,.ag-row-selected .dial-row-select{opacity:1}.header-checkbox-container .dial-header-select.unchecked{opacity:0;transition:opacity .12s ease}.ag-header-cell:hover .header-checkbox-container .dial-header-select.unchecked,.header-checkbox-container .dial-header-select.checked,.header-checkbox-container .dial-header-select.indeterminate{opacity:1}}.ag-layout-auto-height{.ag-center-cols-container,.ag-center-cols-viewport{min-height:0}}div .dial-step{border-top-width:2px}@layer ui{*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
|
|
2
|
+
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}::-webkit-scrollbar-corner,::-webkit-scrollbar-track,::-webkit-scrollbar-track:hover,:not(:hover)::-webkit-scrollbar-thumb{background-color:transparent}::-webkit-scrollbar-thumb{cursor:pointer;border-radius:3px;background-color:var(--bg-layer-4,#333942)}::-webkit-scrollbar{height:4px;width:4px}*{scrollbar-width:thin;scrollbar-color:transparent transparent}:hover{scrollbar-color:var(--bg-layer-4,#333942) transparent}.divide-y>:empty~:not([hidden]){border-top:none;border-bottom:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.-bottom-0\.5{bottom:-.125rem}.-left-0\.5{left:-.125rem}.left-0{left:0}.top-0{top:0}.z-\[52\]{z-index:52}.z-\[53\]{z-index:53}.z-\[55\]{z-index:55}.m-0{margin:0}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-1{margin-top:.25rem;margin-bottom:.25rem}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-\[2px\]{margin-bottom:2px}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-\[26px\]{margin-left:26px}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.size-3{width:.75rem;height:.75rem}.\!h-\[600px\]{height:600px!important}.h-0{height:0}.h-11{height:2.75rem}.h-12{height:3rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\[10px\]{height:10px}.h-\[120px\]{height:120px}.h-\[12\]{height:12}.h-\[18px\]{height:18px}.h-\[200px\]{height:200px}.h-\[22px\]{height:22px}.h-\[250px\]{height:250px}.h-\[300px\]{height:300px}.h-\[32px\]{height:32px}.h-\[34px\]{height:34px}.h-\[38px\]{height:38px}.h-\[400px\]{height:400px}.h-\[4px\]{height:4px}.h-\[500px\]{height:500px}.h-\[640px\]{height:640px}.h-auto{height:auto}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-4{min-height:1rem}.min-h-\[220px\]{min-height:220px}.min-h-\[38px\]{min-height:38px}.min-h-\[42px\]{min-height:42px}.min-h-\[48px\]{min-height:48px}.min-h-\[72px\]{min-height:72px}.min-h-screen{min-height:100vh}.w-0{width:0}.w-12{width:3rem}.w-2{width:.5rem}.w-32{width:8rem}.w-40{width:10rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-64{width:16rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-96{width:24rem}.w-\[1000px\]{width:1000px}.w-\[10px\]{width:10px}.w-\[160px\]{width:160px}.w-\[18px\]{width:18px}.w-\[22px\]{width:22px}.w-\[250px\]{width:250px}.w-\[260px\]{width:260px}.w-\[280px\]{width:280px}.w-\[300px\]{width:300px}.w-\[320px\]{width:320px}.w-\[360px\]{width:360px}.w-\[36px\]{width:36px}.w-\[400px\]{width:400px}.w-\[420px\]{width:420px}.w-\[450px\]{width:450px}.w-\[480px\]{width:480px}.w-\[4px\]{width:4px}.w-\[500px\]{width:500px}.w-\[520px\]{width:520px}.w-\[600px\]{width:600px}.w-\[800px\]{width:800px}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.min-w-0{min-width:0}.min-w-\[100px\]{min-width:100px}.min-w-\[160px\]{min-width:160px}.min-w-\[180px\]{min-width:180px}.min-w-\[400px\]{min-width:400px}.min-w-\[600px\]{min-width:600px}.min-w-\[800px\]{min-width:800px}.max-w-80{max-width:20rem}.max-w-\[1000px\]{max-width:1000px}.max-w-\[1200px\]{max-width:1200px}.max-w-\[1400px\]{max-width:1400px}.max-w-\[160px\]{max-width:160px}.max-w-\[200px\]{max-width:200px}.max-w-\[300px\]{max-width:300px}.max-w-\[80px\]{max-width:80px}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.grow-0{flex-grow:0}.basis-auto{flex-basis:auto}.border-collapse{border-collapse:collapse}.rotate-180{--tw-rotate:180deg}.rotate-180,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate:90deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin-steps{animation:spin .75s steps(8) infinite}.\!cursor-not-allowed{cursor:not-allowed!important}.cursor-default{cursor:default}.cursor-move{cursor:move}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-\[minmax\(0\2c 100px\)_1fr\]{grid-template-columns:minmax(0,100px) 1fr}.grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-\[2px\]{gap:2px}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-\[160px\]{-moz-column-gap:160px;column-gap:160px}.gap-y-1{row-gap:.25rem}.gap-y-10{row-gap:2.5rem}.gap-y-3{row-gap:.75rem}.gap-y-6{row-gap:1.5rem}.gap-y-\[80px\]{row-gap:80px}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-tertiary>:not([hidden])~:not([hidden]){border-color:var(--stroke-tertiary,#090d13)}.self-end{align-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;white-space:nowrap}.overflow-ellipsis,.truncate{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-words{overflow-wrap:break-word}.rounded{border-radius:3px}.rounded-\[8px\]{border-radius:8px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-none{border-radius:0}.rounded-xl{border-radius:.75rem}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-2,.border-b-\[2px\]{border-bottom-width:2px}.border-l{border-left-width:1px}.border-l-0{border-left-width:0}.border-l-2{border-left-width:2px}.border-l-4{border-left-width:4px}.border-r-0{border-right-width:0}.border-t{border-top-width:1px}.border-t-4{border-top-width:4px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-\[\#F4CE46\]{--tw-border-opacity:1;border-color:rgb(244 206 70/var(--tw-border-opacity,1))}.border-accent-primary{border-color:var(--stroke-accent-primary,#5c8dea)}.border-accent-secondary{border-color:var(--stroke-accent-secondary,#37babc)}.border-error{border-color:var(--stroke-error,#f76464)}.border-hover{border-color:var(--stroke-hover,#f3f4f6)}.border-icon-secondary{border-color:var(--icon-secondary,#7f8792)}.border-primary{border-color:var(--stroke-primary,#333942)}.border-red-900{border-color:var(--red-900,#402027)}.border-secondary{border-color:var(--stroke-secondary,#222932)}.border-tertiary{border-color:var(--stroke-tertiary,#090d13)}.border-transparent{border-color:transparent}.border-b-accent-primary{border-bottom-color:var(--stroke-accent-primary,#5c8dea)}.border-l-accent-primary{border-left-color:var(--stroke-accent-primary,#5c8dea)}.border-l-transparent{border-left-color:transparent}.\!bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)!important}.bg-accent-primary{background-color:var(--bg-accent-primary,#5c8dea)}.bg-accent-primary-alpha{background-color:var(--bg-accent-primary-alpha,#5c8dea2b)}.bg-accent-secondary{background-color:var(--bg-accent-secondary,#37babc)}.bg-blackout{background-color:var(--bg-blackout,#090d13b3)}.bg-controls-accent{background-color:var(--controls-bg-accent,#5c8dea)}.bg-controls-disable{background-color:var(--controls-bg-disable,#7f8792)}.bg-controls-enable-primary{background-color:var(--controls-enable-primary,#fcfcfc)}.bg-error{background-color:var(--bg-error,#402027)}.bg-info{background-color:var(--bg-info,#1c2c47)}.bg-layer-0{background-color:var(--bg-layer-0,#000)}.bg-layer-1{background-color:var(--bg-layer-1,#090d13)}.bg-layer-2{background-color:var(--bg-layer-2,#141a23)}.bg-layer-3{background-color:var(--bg-layer-3,#222932)}.bg-layer-4{background-color:var(--bg-layer-4,#333942)}.bg-red-400{background-color:var(--bg-red-400,#f76464)}.bg-success{background-color:var(--bg-success,#1d3841)}.bg-transparent{background-color:transparent}.bg-warning{background-color:var(--bg-warning,#3f3d25)}.stroke-primary{stroke:var(--stroke-primary,#333942)}.p-0{padding:0}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-\[6px\]{padding:6px}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[6px\]{padding-left:6px;padding-right:6px}.py-0{padding-top:0;padding-bottom:0}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-\[6px\]{padding-top:6px;padding-bottom:6px}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-\[6px\]{padding-right:6px}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font{font-family:var(--theme-font,var(--font-inter))}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.leading-4{line-height:1rem}.leading-none{line-height:1}.tracking-wider{letter-spacing:.05em}.\!text-error{color:var(--text-error,#f76464)!important}.text-\[var\(--bg-layer-0\2c _\#000000\)\]{color:var(--bg-layer-0,#000)}.text-accent-primary{color:var(--text-accent-primary,#5c8dea)}.text-accent-secondary{color:var(--text-accent-secondary,#37babc)}.text-accent-tertiary{color:var(--text-accent-tertiary,#a972ff)}.text-controls-disable{color:var(--controls-disable,#333942)}.text-error{color:var(--text-error,#f76464)}.text-icon-accent-primary{color:var(--icon-accent-primary,#5c8dea)}.text-icon-accent-secondary{color:var(--icon-accent-secondary,#37babc)}.text-icon-secondary{color:var(--icon-secondary,#7f8792)}.text-info{color:var(--text-info,#5c8dea)}.text-primary{color:var(--text-primary,#f3f4f6)}.text-secondary{color:var(--text-secondary,#7f8792)}.text-success{color:var(--text-success,#37babc)}.text-transparent{color:transparent}.text-warning{color:var(--text-warning,#f4ce46)}.text-white{color:var(--text-white,#fff)}.underline{text-decoration-line:underline}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.shadow{--tw-shadow:0 0 4px 0 var(--bg-blackout,#090d13b3);--tw-shadow-colored:0 0 4px 0 var(--tw-shadow-color)}.shadow,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.outline-offset-0{outline-offset:0}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-1,.ring-2{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-sky-400{--tw-ring-opacity:1;--tw-ring-color:rgb(56 189 248/var(--tw-ring-opacity,1))}.ring-offset-1{--tw-ring-offset-width:1px}.ring-offset-2{--tw-ring-offset-width:2px}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.\[writing-mode\:tb-rl\]{writing-mode:tb-rl}}.before\:mr-2:before{content:var(--tw-content);margin-right:.5rem}.before\:inline-block:before{content:var(--tw-content);display:inline-block}.before\:h-\[18px\]:before{content:var(--tw-content);height:18px}.before\:w-\[18px\]:before{content:var(--tw-content);width:18px}.before\:rounded:before{content:var(--tw-content);border-radius:3px}.before\:border:before{content:var(--tw-content);border-width:1px}.before\:border-hover:before{content:var(--tw-content);border-color:var(--stroke-hover,#f3f4f6)}.before\:border-icon-secondary:before{content:var(--tw-content);border-color:var(--icon-secondary,#7f8792)}.before\:bg-layer-4:before{content:var(--tw-content);background-color:var(--bg-layer-4,#333942)}.before\:content-\[\"\"\]:before{--tw-content:"";content:var(--tw-content)}.hover\:border-hover:hover{border-color:var(--stroke-hover,#f3f4f6)}.hover\:bg-accent-primary-alpha:hover{background-color:var(--bg-accent-primary-alpha,#5c8dea2b)}.hover\:text-accent-primary:hover{color:var(--text-accent-primary,#5c8dea)}.hover\:text-accent-tertiary:hover{color:var(--text-accent-tertiary,#a972ff)}.hover\:text-error:hover{color:var(--text-error,#f76464)}.hover\:text-icon-accent-primary:hover{color:var(--icon-accent-primary,#5c8dea)}.hover\:text-primary:hover{color:var(--text-primary,#f3f4f6)}.hover\:opacity-90:hover{opacity:.9}.focus\:bg-accent-primary-alpha:focus{background-color:var(--bg-accent-primary-alpha,#5c8dea2b)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:border-none:focus-visible{border-style:none}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:outline:focus-visible{outline-style:solid}.disabled\:opacity-60:disabled{opacity:.6}.group:hover .group-hover\:visible{visibility:visible}@media (min-width:640px){.sm\:inline{display:inline}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:768px){.md\:max-w-\[1200px\]{max-width:1200px}.md\:max-w-\[400px\]{max-width:400px}.md\:max-w-\[800px\]{max-width:800px}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:p-4{padding:1rem}}@media (min-width:1024px){.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
export interface DialAutocompleteInputValueProps {
|
|
3
|
+
placeholder?: string;
|
|
3
4
|
selectedItems?: string[];
|
|
4
5
|
listCssClass?: string;
|
|
5
6
|
listElementCssClass?: string;
|
|
@@ -19,6 +20,7 @@ export interface DialAutocompleteInputValueProps {
|
|
|
19
20
|
* />
|
|
20
21
|
* ```
|
|
21
22
|
*
|
|
23
|
+
* @param [placeholder] - Placeholder text to display when no items are selected.
|
|
22
24
|
* @param [selectedItems] - An array of strings representing the selected items to display. If empty or undefined, the component renders nothing.
|
|
23
25
|
* @param [listCssClass] - Additional CSS classes applied to the `<ul>` element containing the list of selected items.
|
|
24
26
|
* @param [listElementCssClass] - Additional CSS classes applied to each `<li>` element representing an individual selected item.
|
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
import { FC, ReactNode } from 'react';
|
|
1
|
+
import { FC, ReactNode, MouseEvent } from 'react';
|
|
2
2
|
export interface DialCollapsibleSidebarProps {
|
|
3
3
|
children: ReactNode;
|
|
4
|
-
width
|
|
4
|
+
width?: number;
|
|
5
5
|
title: string;
|
|
6
6
|
titleCssClass?: string;
|
|
7
7
|
containerCssClass?: string;
|
|
8
8
|
iconSize?: number;
|
|
9
9
|
additionalButtons?: ReactNode;
|
|
10
10
|
iconStroke?: number;
|
|
11
|
+
isOpened?: boolean;
|
|
12
|
+
onToggle?: (nextOpened: boolean, e: MouseEvent<HTMLButtonElement>) => void;
|
|
11
13
|
}
|
|
12
14
|
/**
|
|
13
15
|
* A collapsible horizontal bar component that allows toggling between an expanded and collapsed state.
|
|
@@ -28,12 +30,14 @@ export interface DialCollapsibleSidebarProps {
|
|
|
28
30
|
* ```
|
|
29
31
|
*
|
|
30
32
|
* @param children - The content to display inside the collapsible bar when expanded
|
|
31
|
-
* @param width - The width of the bar when expanded
|
|
33
|
+
* @param [width = 280] - The width of the bar when expanded
|
|
32
34
|
* @param title - The title displayed when the bar is collapsed
|
|
33
35
|
* @param [titleCssClass] - Additional CSS classes applied to the title element
|
|
34
36
|
* @param [containerCssClass] - Additional CSS classes applied to the container element
|
|
35
37
|
* @param [iconSize = 32] - The size of the toggle icons. Defaults to 32
|
|
36
38
|
* @param [iconStroke = 1.5] - The stroke width of the toggle icons. Defaults to 1.5
|
|
37
39
|
* @param [additionalButtons] - Additional buttons or elements displayed next to the toggle button when expanded
|
|
40
|
+
* @param [isOpened] - When provided, the component becomes controlled by this value
|
|
41
|
+
* @param [onToggle] - Fired when user clicks the toggle in controlled mode, with the next state
|
|
38
42
|
*/
|
|
39
43
|
export declare const DialCollapsibleSidebar: FC<DialCollapsibleSidebarProps>;
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
import { ColDef } from 'ag-grid-community';
|
|
3
|
+
import { DialFile, DialFileNodeType } from '../../models/file';
|
|
4
|
+
import { DialFoldersTreeProps } from './components/FoldersTree/FoldersTree';
|
|
5
|
+
import { DialFileManagerNavigationPanelProps } from './components/FileManagerNavigationPanel/FileManagerNavigationPanel';
|
|
6
|
+
import { DialGridProps } from '../Grid/Grid';
|
|
7
|
+
import { DialFileManagerToolbarProps } from './components/FileManagerToolbar/DialFileManagerToolbar';
|
|
8
|
+
import { DialFileManagerBulkActionsToolbarProps } from './components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar';
|
|
9
|
+
interface GridRow {
|
|
10
|
+
id: string;
|
|
11
|
+
name: string;
|
|
12
|
+
updatedAt?: string;
|
|
13
|
+
size?: string;
|
|
14
|
+
author?: string;
|
|
15
|
+
path: string;
|
|
16
|
+
nodeType: DialFileNodeType;
|
|
17
|
+
extension?: string;
|
|
18
|
+
}
|
|
19
|
+
export interface FileTreeOptions extends Omit<DialFoldersTreeProps, 'items' | 'selectedPath' | 'onItemClick'> {
|
|
20
|
+
width?: number;
|
|
21
|
+
title?: string;
|
|
22
|
+
containerCssClass?: string;
|
|
23
|
+
additionalButtons?: ReactNode;
|
|
24
|
+
collapsed?: boolean;
|
|
25
|
+
}
|
|
26
|
+
export type NavigationPanelOptions = Omit<DialFileManagerNavigationPanelProps, 'path' | 'makeHref' | 'onItemClick'>;
|
|
27
|
+
export interface GridOptions extends Omit<DialGridProps<GridRow>, 'rowData' | 'columnDefs'> {
|
|
28
|
+
columnDefs?: ColDef<GridRow>[];
|
|
29
|
+
filterable?: boolean;
|
|
30
|
+
}
|
|
31
|
+
export type ToolbarOptions = Omit<DialFileManagerToolbarProps, 'areHiddenFilesVisible' | 'onToggleHiddenFiles'>;
|
|
32
|
+
export type BulkActionsToolbarOptions = Omit<DialFileManagerBulkActionsToolbarProps, 'onClearSelection'>;
|
|
33
|
+
export interface DialFileManagerProps {
|
|
34
|
+
path?: string;
|
|
35
|
+
cssClass?: string;
|
|
36
|
+
items?: DialFile[];
|
|
37
|
+
treeOptions?: FileTreeOptions;
|
|
38
|
+
toolbarOptions?: ToolbarOptions;
|
|
39
|
+
navigationPanelOptions?: NavigationPanelOptions;
|
|
40
|
+
gridOptions?: GridOptions;
|
|
41
|
+
bulkActionsToolbarOptions?: BulkActionsToolbarOptions;
|
|
42
|
+
onPathChange?: (nextPath?: string) => void;
|
|
43
|
+
onTableFileClick?: (file: GridRow) => void;
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.
|
|
47
|
+
*
|
|
48
|
+
* Features:
|
|
49
|
+
* - Global `path` drives both the breadcrumb trail and the visible folder in the grid.
|
|
50
|
+
* - The grid shows children of the current folder. When a search query is present, it scans all nested descendants.
|
|
51
|
+
* - Pluggable tree, navigation panel, and grid behaviors via `treeOptions`, `navigationPanelOptions`, and `gridOptions`.
|
|
52
|
+
* - Optional filters toggle via `gridOptions.filterable` (default `true`).
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* ```tsx
|
|
56
|
+
* // Minimal usage
|
|
57
|
+
* <DialFileManager items={files} path="/All files" />
|
|
58
|
+
*
|
|
59
|
+
* // With controlled search and disabled grid filters
|
|
60
|
+
* const [query, setQuery] = useState('');
|
|
61
|
+
* <DialFileManager
|
|
62
|
+
* items={files}
|
|
63
|
+
* path="/All files/Design"
|
|
64
|
+
* navigationPanelOptions={{
|
|
65
|
+
* searchable: true,
|
|
66
|
+
* value: query,
|
|
67
|
+
* onSearchChange: setQuery,
|
|
68
|
+
* }}
|
|
69
|
+
* gridOptions={{ filterable: false }}
|
|
70
|
+
* />
|
|
71
|
+
*
|
|
72
|
+
* // With custom tree width and title
|
|
73
|
+
* <DialFileManager
|
|
74
|
+
* items={files}
|
|
75
|
+
* treeOptions={{ width: 300, title: 'Explorer', showFiles: true }}
|
|
76
|
+
* />
|
|
77
|
+
* ```
|
|
78
|
+
*
|
|
79
|
+
* @param [path] - Absolute path of the current location (e.g., "/All files/Design/Icons")
|
|
80
|
+
* @param [cssClass] - Additional classes for the root container
|
|
81
|
+
* @param [items] - Full hierarchical list of files and folders used by both tree and grid
|
|
82
|
+
*
|
|
83
|
+
* @param [treeOptions] - Options that configure the collapsible sidebar and folders tree
|
|
84
|
+
* @param [navigationPanelOptions] - Options for the breadcrumb and search panel (value/onSearchChange for controlled search)
|
|
85
|
+
* @param [toolbarOptions] - Options for the file manager toolbar
|
|
86
|
+
* @param [gridOptions] - Options forwarded to `DialGrid`; supports `columnDefs` override and `filterable` flag
|
|
87
|
+
* @param [bulkActionsToolbarOptions] - Options for the bulk actions toolbar shown when items are selected
|
|
88
|
+
*
|
|
89
|
+
* @param [onPathChange] - Callback fired when user navigates via tree or breadcrumb
|
|
90
|
+
* @param [onTableFileClick] - Callback fired when a file row is clicked in the grid
|
|
91
|
+
*/
|
|
92
|
+
export declare const DialFileManager: FC<DialFileManagerProps>;
|
|
93
|
+
export {};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { DropdownItem } from '../../../../models/dropdown';
|
|
3
|
+
export interface DialActionDropdownItem extends DropdownItem {
|
|
4
|
+
title: string;
|
|
5
|
+
}
|
|
6
|
+
export interface DialFileManagerBulkActionsToolbarProps {
|
|
7
|
+
selectionLabel: string;
|
|
8
|
+
onClearSelection: () => void;
|
|
9
|
+
actions: DialActionDropdownItem[];
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* A responsive toolbar component displayed when files or items are selected
|
|
13
|
+
* in the file manager. It shows a label with the number or name of selected
|
|
14
|
+
* items and provides contextual action buttons.
|
|
15
|
+
*
|
|
16
|
+
* On smaller screens or when there’s not enough horizontal space,
|
|
17
|
+
* some action buttons are automatically moved into a dropdown menu.
|
|
18
|
+
*
|
|
19
|
+
* **Key Features:**
|
|
20
|
+
* - Dynamically measures available container width to determine how many actions
|
|
21
|
+
* can fit inline.
|
|
22
|
+
* - Uses a hidden measurement container to precisely calculate button widths.
|
|
23
|
+
* - Automatically moves overflow actions into a "More" dropdown (`IconDotsVertical`).
|
|
24
|
+
* - Responsive design with support for mobile layout via `useIsMobileScreen`.
|
|
25
|
+
*
|
|
26
|
+
* **Layout logic:**
|
|
27
|
+
* - `measureRef`: hidden element used to measure the width of each button.
|
|
28
|
+
* - `containerRef`: visible container where the toolbar is rendered.
|
|
29
|
+
* - `leftSectionRef`: left section containing the "selected items" button.
|
|
30
|
+
* - `visibleCount`: dynamically updated number of visible actions.
|
|
31
|
+
* - Uses `ResizeObserver` + `requestAnimationFrame` to update layout on resize.
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* ```tsx
|
|
35
|
+
* <DialFileManagerSelectionToolbar
|
|
36
|
+
* selectionLabel="3 files selected"
|
|
37
|
+
* onClearSelection={() => console.log('Cleared')}
|
|
38
|
+
* actions={[
|
|
39
|
+
* { key: 'download', title: 'Download', icon: <IconDownload />, onClick: () => {} },
|
|
40
|
+
* { key: 'delete', title: 'Delete', icon: <IconTrash />, onClick: () => {} },
|
|
41
|
+
* ]}
|
|
42
|
+
* />
|
|
43
|
+
* ```
|
|
44
|
+
*
|
|
45
|
+
* @param {object} props
|
|
46
|
+
* @param {string} props.selectionLabel - Label showing current selection status (e.g., "3 files selected").
|
|
47
|
+
* @param {() => void} props.onClearSelection - Callback invoked when the clear selection button is clicked.
|
|
48
|
+
* @param {DialActionDropdownItem[]} props.actions - List of available toolbar actions.
|
|
49
|
+
* Each action defines a title, icon, key, and optional click handler.
|
|
50
|
+
*
|
|
51
|
+
* @returns {JSX.Element} A responsive toolbar that adjusts visible actions based on available width.
|
|
52
|
+
*/
|
|
53
|
+
export declare const DialFileManagerBulkActionsToolbar: FC<DialFileManagerBulkActionsToolbarProps>;
|
package/dist/src/components/FileManager/components/FileManagerNavigationPanel/constants.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export declare const panelBaseClasses = "w-full h-[12] flex items-center justify-between gap-4";
|
|
2
|
-
export declare const breadcrumbContainerClasses = "min-w-0 h-[38px] flex-1 overflow-hidden bg-layer-3 px-3 flex items-center";
|
|
2
|
+
export declare const breadcrumbContainerClasses = "min-w-0 h-[38px] flex-1 overflow-hidden bg-layer-3 px-3 flex items-center rounded";
|
|
3
3
|
export declare const searchContainerClasses = "w-[260px]";
|
package/dist/src/components/FileManager/components/FileManagerToolbar/DialFileManagerToolbar.d.ts
CHANGED
|
@@ -2,9 +2,10 @@ import { FC } from 'react';
|
|
|
2
2
|
import { TabModel } from '../../../../models/tab';
|
|
3
3
|
import { ButtonVariant } from '../../../../types/button';
|
|
4
4
|
import { DropdownItem } from '../../../../models/dropdown';
|
|
5
|
+
import { DialFileManagerTabs } from '../../../../types/file-manager';
|
|
5
6
|
export interface DialFileManagerToolbarProps {
|
|
6
|
-
tabs
|
|
7
|
-
activeTab
|
|
7
|
+
tabs?: TabModel[];
|
|
8
|
+
activeTab?: string;
|
|
8
9
|
areHiddenFilesVisible: boolean;
|
|
9
10
|
hiddenFilesSwitcherLabel?: string;
|
|
10
11
|
isCreateButtonVisible?: boolean;
|
|
@@ -12,9 +13,9 @@ export interface DialFileManagerToolbarProps {
|
|
|
12
13
|
createButtonDropdownItems?: DropdownItem[];
|
|
13
14
|
createButtonLabel?: string;
|
|
14
15
|
refreshButtonLabel?: string;
|
|
15
|
-
onTabChange
|
|
16
|
-
onToggleHiddenFiles
|
|
17
|
-
onRefresh
|
|
16
|
+
onTabChange?: (id: DialFileManagerTabs) => void;
|
|
17
|
+
onToggleHiddenFiles?: (value: boolean) => void;
|
|
18
|
+
onRefresh?: () => void;
|
|
18
19
|
}
|
|
19
20
|
/**
|
|
20
21
|
* DialFileManagerToolbar — A configurable toolbar component for file manager views.
|
|
@@ -5,13 +5,14 @@ export interface DialFoldersTreeProps {
|
|
|
5
5
|
items: DialFile[];
|
|
6
6
|
expandedPaths?: Set<string>;
|
|
7
7
|
loadingPaths?: Set<string>;
|
|
8
|
-
|
|
8
|
+
selectedPath?: string;
|
|
9
9
|
showFiles?: boolean;
|
|
10
10
|
emptyStateTitle?: string;
|
|
11
11
|
emptyStateDescription?: string;
|
|
12
12
|
emptyStateIcon?: ReactNode;
|
|
13
13
|
onItemClick?: (item: DialFile) => void;
|
|
14
14
|
getContextMenuItems?: (item: DialFile) => DropdownItem[];
|
|
15
|
+
areHiddenFilesVisible?: boolean;
|
|
15
16
|
}
|
|
16
17
|
/**
|
|
17
18
|
* DialFoldersTree — A hierarchical folder tree component with nested expand/collapse support, selection highlighting,
|
|
@@ -75,13 +76,14 @@ export interface DialFoldersTreeProps {
|
|
|
75
76
|
* @param [items] - Array of folder and file nodes to display in the tree.
|
|
76
77
|
* @param [expandedPaths] - Set of folder paths that should be expanded.
|
|
77
78
|
* @param [loadingPaths] - Set of folder paths currently loading (shows spinner or placeholder).
|
|
78
|
-
* @param [
|
|
79
|
+
* @param [selectedPath] - Path representing the currently selected folder or file.
|
|
79
80
|
* @param [showFiles=false] - Whether to show files in addition to folders.
|
|
80
81
|
* @param [emptyStateTitle='No Folders'] - Title text displayed when there are no items.
|
|
81
82
|
* @param [emptyStateDescription] - Optional description text for the empty state.
|
|
82
83
|
* @param [emptyStateIcon] - Optional icon to display in the empty state.
|
|
83
84
|
* @param [onItemClick] - Callback fired when a folder or file is clicked (receives the corresponding `DialFile` node).
|
|
84
85
|
* @param [getContextMenuItems] - Function returning context menu items for a given node.
|
|
86
|
+
* @param [areHiddenFilesVisible=false] - Whether hidden files (dotfiles) should be visible in the tree.
|
|
85
87
|
*
|
|
86
88
|
* @remarks
|
|
87
89
|
* - Folder and file data must follow the `DialFile` model.
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare const containerBaseClasses = "w-full h-full grid grid-rows-[auto_1fr] gap-5 p-6 overflow-hidden min-w-0 bg-layer-2";
|
|
2
|
+
export declare const toolbarBaseClasses = "w-full text-secondary flex items-center gap-2";
|
|
3
|
+
export declare const mainGridClasses = "flex min-h-0 min-w-0 h-full gap-4 overflow-hidden";
|
|
4
|
+
export declare const contentGridClasses = "flex flex-col flex-1 min-h-0 min-w-0 h-full gap-4";
|
|
5
|
+
export declare const contentHeaderClasses = "items-center";
|
|
6
|
+
export declare const treeBaseClasses = "w-full h-full rounded bg-layer-3 text-secondary overflow-auto min-w-0";
|
|
7
|
+
export declare const gridBaseClasses = "flex-1 w-full rounded text-secondary overflow-auto min-h-0 min-w-0";
|
|
8
|
+
export declare const sidebarWidth = 280;
|
|
9
|
+
export declare const sidebarTitleDefault = "Files";
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { TabModel } from '../../../models/tab';
|
|
2
|
+
import { DialFileManagerTabs } from '../../../types/file-manager';
|
|
3
|
+
export declare const useDialFileManagerTabs: (tabLabels?: Record<DialFileManagerTabs, string>) => {
|
|
4
|
+
activeTab: DialFileManagerTabs;
|
|
5
|
+
handleTabChange: (tab: DialFileManagerTabs) => void;
|
|
6
|
+
tabs: TabModel[] | undefined;
|
|
7
|
+
};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { DialFile } from '../../models/file';
|
|
2
|
+
export declare const findFolderForPath: (root: DialFile[] | undefined, path?: string) => DialFile | undefined;
|
|
3
|
+
export declare const normalizeToLowerCase: (input?: string) => string;
|
|
4
|
+
export declare const normalizeExtensionWithoutDot: (input?: string) => string;
|
|
5
|
+
export declare const collectAllDescendants: (folder?: DialFile) => DialFile[];
|
|
6
|
+
export declare const isHiddenDotFile: (node: DialFile) => boolean;
|
|
@@ -7,6 +7,7 @@ export interface DialInputProps extends InputBaseProps, Partial<NumberInputBaseP
|
|
|
7
7
|
hideBorder?: boolean;
|
|
8
8
|
tooltipText?: string;
|
|
9
9
|
tooltipTriggerClassName?: string;
|
|
10
|
+
hideTooltip?: boolean;
|
|
10
11
|
onChange?: (value?: string) => void;
|
|
11
12
|
onBlur?: (event: FocusEvent<HTMLInputElement, Element>) => void;
|
|
12
13
|
}
|
|
@@ -34,6 +35,7 @@ export interface DialInputProps extends InputBaseProps, Partial<NumberInputBaseP
|
|
|
34
35
|
* @param hideBorder - Whether to hide the input border styling
|
|
35
36
|
* @param tooltipText - The text to display inside the tooltip. If empty, the tooltip will display the value prop.
|
|
36
37
|
* @param tooltipTriggerClassName - Additional CSS classes to apply to the tooltip
|
|
38
|
+
* @param hideTooltip - Whether to hide the tooltip
|
|
37
39
|
* @param onChange - Callback function called when the input value changes
|
|
38
40
|
* @param onBlur - Callback function called when the input blurs
|
|
39
41
|
*/
|
|
@@ -7,9 +7,11 @@ export interface DialInputPopupProps {
|
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
valueCssClasses?: string;
|
|
9
9
|
inputCssClasses?: string;
|
|
10
|
+
placeholder?: string;
|
|
10
11
|
elementId?: string;
|
|
11
12
|
errorText?: string;
|
|
12
|
-
|
|
13
|
+
invalid?: boolean;
|
|
14
|
+
emptyValueText?: string;
|
|
13
15
|
}
|
|
14
16
|
/**
|
|
15
17
|
* An input field that opens a popup when clicked, displaying a selected value or a list of values.
|
|
@@ -35,6 +37,7 @@ export interface DialInputPopupProps {
|
|
|
35
37
|
*
|
|
36
38
|
* @param [open] - The current state of the modal, indicating whether it is opened or closed.
|
|
37
39
|
* @param [selectedValue] - The currently selected value(s). Can be a string for a single value or an array of strings for multiple values.
|
|
40
|
+
* @param [placeholder] - Placeholder text displayed when no value is selected.
|
|
38
41
|
* @param children - The content to render inside the modal when it is opened.
|
|
39
42
|
* @param onOpen - A callback function triggered when the modal open button is clicked.
|
|
40
43
|
* @param [disabled=false] - Whether the input is disabled, preventing user interaction.
|
|
@@ -42,6 +45,7 @@ export interface DialInputPopupProps {
|
|
|
42
45
|
* @param [inputCssClasses] - Additional CSS classes applied to the input container.
|
|
43
46
|
* @param [elementId] - A unique identifier for the input element, useful for accessibility and testing.
|
|
44
47
|
* @param [errorText] - An optional error message displayed below the input when an error state is present.
|
|
45
|
-
* @param
|
|
48
|
+
* @param [invalid] - Whether the input is in an invalid state, affecting styling. Applyed automatically if errorText is provided.
|
|
49
|
+
* @param [emptyValueText] - The text displayed when no value is selected and placeholder is not provided.
|
|
46
50
|
*/
|
|
47
51
|
export declare const DialInputPopup: FC<DialInputPopupProps>;
|
|
@@ -25,6 +25,11 @@ export interface DialSelectFieldProps extends Omit<DialSelectProps, 'cssClass'>,
|
|
|
25
25
|
* onChange={(v) => setTransport(v as string)}
|
|
26
26
|
* />
|
|
27
27
|
*
|
|
28
|
+
* @params - Component properties extending:
|
|
29
|
+
* - {@link DialSelectProps} for select options and props, except for cssClass
|
|
30
|
+
* - {@link DialFormItemProps} for form item props, except for htmlFor
|
|
31
|
+
* - {@link DialFieldLabelProps} for label props, except for label, children, value
|
|
32
|
+
*
|
|
28
33
|
* @param selectCssClass CSS class for the select element
|
|
29
34
|
* @param containerCssClass CSS class for the form item container
|
|
30
35
|
* @param emptyStateTitle Title to show when there are no options
|
|
@@ -13,3 +13,18 @@
|
|
|
13
13
|
* }
|
|
14
14
|
*/
|
|
15
15
|
export declare const useIsTabletScreen: () => boolean;
|
|
16
|
+
/**
|
|
17
|
+
* A React hook that determines whether the current window size matches a mobile screen width.
|
|
18
|
+
*
|
|
19
|
+
* It initializes based on the current screen size using `isSmallScreen()` and updates its value
|
|
20
|
+
* whenever the window is resized.
|
|
21
|
+
*
|
|
22
|
+
* @returns {boolean} `true` if the viewport width matches the mobile breakpoint, otherwise `false`.
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* const isMobile = useIsMobileScreen();
|
|
26
|
+
* if (isMobile) {
|
|
27
|
+
* console.log('Mobile layout active');
|
|
28
|
+
* }
|
|
29
|
+
*/
|
|
30
|
+
export declare const useIsMobileScreen: () => boolean;
|
package/dist/src/index.d.ts
CHANGED
|
@@ -34,6 +34,7 @@ export { DialConfirmationPopup } from './components/ConfirmationPopup/Confirmati
|
|
|
34
34
|
export { DialRadioGroupPopupField } from './components/RadioGroupPopupField/RadioGroupPopupField';
|
|
35
35
|
export { DialFormPopup } from './components/FormPopup/FormPopup';
|
|
36
36
|
export { DialFileManagerNavigationPanel } from './components/FileManager/components/FileManagerNavigationPanel/FileManagerNavigationPanel';
|
|
37
|
+
export { DialFileManager } from './components/FileManager/FileManager';
|
|
37
38
|
export { DialInput } from './components/Input/Input';
|
|
38
39
|
export type { DialInputProps } from './components/Input/Input';
|
|
39
40
|
export { DialNumberInputField } from './components/InputField/InputField';
|
|
@@ -55,12 +56,14 @@ export { ButtonVariant } from './types/button';
|
|
|
55
56
|
export { RadioGroupOrientation } from './types/radio-group';
|
|
56
57
|
export { PopupSize } from './types/popup';
|
|
57
58
|
export { ConfirmationPopupVariant } from './types/confirmation-popup';
|
|
58
|
-
export { DropdownType } from './types/dropdown';
|
|
59
|
+
export { DropdownType, DropdownTrigger, DropdownItemType, } from './types/dropdown';
|
|
59
60
|
export { SearchSize } from './types/search';
|
|
60
61
|
export { TagVariant } from './types/tag';
|
|
61
62
|
export { TabOrientation } from './types/tab';
|
|
62
63
|
export type { DialBreadcrumbPathItem } from './models/breadcrumb';
|
|
63
64
|
export { FormItemOrientation } from './types/form-item';
|
|
65
|
+
export { DialFileManagerTabs } from './types/file-manager';
|
|
66
|
+
export { useDialFileManagerTabs } from './components/FileManager/hooks/use-file-manager-tabs';
|
|
64
67
|
export { StepStatus } from './models/step';
|
|
65
68
|
export type { Step } from './models/step';
|
|
66
69
|
export type { RadioButtonWithContent } from './models/radio';
|
|
@@ -12,3 +12,17 @@
|
|
|
12
12
|
* }
|
|
13
13
|
*/
|
|
14
14
|
export declare const isMediumScreen: () => boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Checks if the current viewport width is within the "small" (mobile) screen range.
|
|
17
|
+
*
|
|
18
|
+
* Specifically, it returns `true` if the window width is less than 640 pixels.
|
|
19
|
+
* Safely handles server-side rendering by verifying that `window` is defined.
|
|
20
|
+
*
|
|
21
|
+
* @returns {boolean} `true` if the viewport width is less than 640px, otherwise `false`.
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* if (isSmallScreen()) {
|
|
25
|
+
* console.log('Mobile screen detected');
|
|
26
|
+
* }
|
|
27
|
+
*/
|
|
28
|
+
export declare const isSmallScreen: () => boolean;
|