@epam/ai-dial-ui-kit 0.4.0-rc.3 → 0.4.0-rc.30
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 +43156 -3432
- 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 +45 -15
- package/dist/src/components/FileManager/FileManagerContext.d.ts +50 -0
- package/dist/src/components/FileManager/FileManagerProvider.d.ts +17 -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/FileManagerToolbar/DialFileManagerToolbar.d.ts +33 -29
- package/dist/src/components/FileManager/components/FoldersTree/FoldersTree.d.ts +2 -0
- package/dist/src/components/FileManager/constants.d.ts +7 -8
- package/dist/src/components/FileManager/hooks/use-collapse-tree.d.ts +5 -0
- package/dist/src/components/FileManager/hooks/use-file-clipboard.d.ts +16 -0
- package/dist/src/components/FileManager/hooks/use-file-manager-context.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 +1 -0
- package/dist/src/components/Grid/Grid.d.ts +9 -1
- package/dist/src/components/Input/Input.d.ts +2 -0
- package/dist/src/components/InputPopup/InputPopup.d.ts +6 -2
- package/dist/src/components/NoDataContent/NoDataContent.d.ts +3 -0
- package/dist/src/components/Select/Select.d.ts +2 -0
- package/dist/src/components/SelectField/SelectField.d.ts +5 -0
- package/dist/src/components/Tabs/Tabs.d.ts +27 -14
- package/dist/src/hooks/use-flexible-actions.d.ts +86 -0
- package/dist/src/hooks/use-is-mobile-screen.d.ts +15 -0
- package/dist/src/hooks/use-screen-type.d.ts +19 -0
- package/dist/src/index.d.ts +8 -2
- package/dist/src/models/select.d.ts +1 -0
- package/dist/src/types/file-manager.d.ts +11 -0
- package/dist/src/types/flexible-actions.d.ts +4 -0
- package/dist/src/types/screen.d.ts +6 -0
- package/dist/src/types/tab.d.ts +4 -0
- package/dist/src/utils/mobile.d.ts +35 -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}.contents{display:contents}.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-\[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-10{min-height:2.5rem}.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}.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-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-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-\[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-0{border-bottom-width:0}.border-b-2{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-\[9px\]{padding:9px!important}.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-lg{font-size:1.125rem!important;line-height:1.75rem!important}.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>;
|
|
@@ -1,39 +1,47 @@
|
|
|
1
|
-
import { FC
|
|
1
|
+
import { FC } from 'react';
|
|
2
2
|
import { ColDef } from 'ag-grid-community';
|
|
3
|
-
import { DialFile
|
|
3
|
+
import { DialFile } from '../../models/file';
|
|
4
4
|
import { DialFoldersTreeProps } from './components/FoldersTree/FoldersTree';
|
|
5
5
|
import { DialFileManagerNavigationPanelProps } from './components/FileManagerNavigationPanel/FileManagerNavigationPanel';
|
|
6
6
|
import { DialGridProps } from '../Grid/Grid';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
author?: string;
|
|
13
|
-
path: string;
|
|
14
|
-
nodeType: DialFileNodeType;
|
|
15
|
-
extension?: string;
|
|
16
|
-
}
|
|
7
|
+
import { DialFileManagerToolbarProps } from './components/FileManagerToolbar/DialFileManagerToolbar';
|
|
8
|
+
import { DialFileManagerBulkActionsToolbarProps } from './components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar';
|
|
9
|
+
import { DialFileManagerActions } from '../../types/file-manager';
|
|
10
|
+
import { FileManagerGridRow } from './FileManagerContext';
|
|
11
|
+
type GridRow = FileManagerGridRow;
|
|
17
12
|
export interface FileTreeOptions extends Omit<DialFoldersTreeProps, 'items' | 'selectedPath' | 'onItemClick'> {
|
|
18
13
|
width?: number;
|
|
19
14
|
title?: string;
|
|
20
15
|
containerCssClass?: string;
|
|
21
|
-
additionalButtons?: ReactNode;
|
|
16
|
+
additionalButtons?: React.ReactNode;
|
|
17
|
+
collapsed?: boolean;
|
|
18
|
+
actionLabels?: {
|
|
19
|
+
[DialFileManagerActions.Copy]?: string;
|
|
20
|
+
[DialFileManagerActions.Cut]?: string;
|
|
21
|
+
[DialFileManagerActions.Paste]?: string;
|
|
22
|
+
[DialFileManagerActions.Rename]?: string;
|
|
23
|
+
};
|
|
22
24
|
}
|
|
23
25
|
export type NavigationPanelOptions = Omit<DialFileManagerNavigationPanelProps, 'path' | 'makeHref' | 'onItemClick'>;
|
|
24
26
|
export interface GridOptions extends Omit<DialGridProps<GridRow>, 'rowData' | 'columnDefs'> {
|
|
25
27
|
columnDefs?: ColDef<GridRow>[];
|
|
26
28
|
filterable?: boolean;
|
|
27
29
|
}
|
|
30
|
+
export type ToolbarOptions = Omit<DialFileManagerToolbarProps, 'areHiddenFilesVisible' | 'onToggleHiddenFiles'>;
|
|
31
|
+
export type BulkActionsToolbarOptions = Omit<DialFileManagerBulkActionsToolbarProps, 'onClearSelection'>;
|
|
28
32
|
export interface DialFileManagerProps {
|
|
29
33
|
path?: string;
|
|
30
34
|
cssClass?: string;
|
|
31
35
|
items?: DialFile[];
|
|
32
36
|
treeOptions?: FileTreeOptions;
|
|
37
|
+
toolbarOptions?: ToolbarOptions;
|
|
33
38
|
navigationPanelOptions?: NavigationPanelOptions;
|
|
34
|
-
/** Grid options; rowData and columnDefs are prepared here */
|
|
35
39
|
gridOptions?: GridOptions;
|
|
40
|
+
bulkActionsToolbarOptions?: BulkActionsToolbarOptions;
|
|
36
41
|
onPathChange?: (nextPath?: string) => void;
|
|
42
|
+
onTableFileClick?: (file: GridRow) => void;
|
|
43
|
+
onCopyFiles?: (files: string[], destination: string) => void;
|
|
44
|
+
onMoveToFiles?: (files: string[], destination: string) => void;
|
|
37
45
|
}
|
|
38
46
|
/**
|
|
39
47
|
* File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.
|
|
@@ -43,6 +51,7 @@ export interface DialFileManagerProps {
|
|
|
43
51
|
* - The grid shows children of the current folder. When a search query is present, it scans all nested descendants.
|
|
44
52
|
* - Pluggable tree, navigation panel, and grid behaviors via `treeOptions`, `navigationPanelOptions`, and `gridOptions`.
|
|
45
53
|
* - Optional filters toggle via `gridOptions.filterable` (default `true`).
|
|
54
|
+
* - Supports bulk actions toolbar when items are selected.
|
|
46
55
|
*
|
|
47
56
|
* @example
|
|
48
57
|
* ```tsx
|
|
@@ -67,15 +76,36 @@ export interface DialFileManagerProps {
|
|
|
67
76
|
* items={files}
|
|
68
77
|
* treeOptions={{ width: 300, title: 'Explorer', showFiles: true }}
|
|
69
78
|
* />
|
|
79
|
+
*
|
|
80
|
+
* // With explicit provider (advanced apps)
|
|
81
|
+
* <FileManagerProvider items={files} path="/All files">
|
|
82
|
+
* <MyCustomHeader />
|
|
83
|
+
* <DialFileManagerView /> // internal view
|
|
84
|
+
* <MyCustomFooter />
|
|
85
|
+
* </FileManagerProvider>
|
|
70
86
|
* ```
|
|
71
87
|
*
|
|
72
|
-
* @param [path] - Absolute path of the current location (e.g
|
|
88
|
+
* @param [path] - Absolute path of the current location (e.g. "/All files/Design/Icons")
|
|
73
89
|
* @param [cssClass] - Additional classes for the root container
|
|
74
90
|
* @param [items] - Full hierarchical list of files and folders used by both tree and grid
|
|
91
|
+
*
|
|
75
92
|
* @param [treeOptions] - Options that configure the collapsible sidebar and folders tree
|
|
76
93
|
* @param [navigationPanelOptions] - Options for the breadcrumb and search panel (value/onSearchChange for controlled search)
|
|
94
|
+
* @param [toolbarOptions] - Options for the file manager toolbar
|
|
77
95
|
* @param [gridOptions] - Options forwarded to `DialGrid`; supports `columnDefs` override and `filterable` flag
|
|
96
|
+
* @param [bulkActionsToolbarOptions] - Options for the bulk actions toolbar shown when items are selected
|
|
97
|
+
*
|
|
78
98
|
* @param [onPathChange] - Callback fired when user navigates via tree or breadcrumb
|
|
99
|
+
* @param [onTableFileClick] - Callback fired when a file row is clicked in the grid
|
|
100
|
+
*
|
|
101
|
+
* @param [onCopyFiles] - Callback fired when files copy-paste
|
|
102
|
+
* @param [onMoveToFiles] - Callback fired when files cut-paste or rename
|
|
79
103
|
*/
|
|
80
104
|
export declare const DialFileManager: FC<DialFileManagerProps>;
|
|
105
|
+
/**
|
|
106
|
+
* Internal view-only component.
|
|
107
|
+
* Reads all data from FileManagerContext and renders the actual layout.
|
|
108
|
+
* This is what apps can reuse if they want to control the provider manually.
|
|
109
|
+
*/
|
|
110
|
+
export declare const DialFileManagerView: FC;
|
|
81
111
|
export {};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { DialFile, DialFileNodeType } from '../../models/file';
|
|
2
|
+
import { FileTreeOptions, NavigationPanelOptions, GridOptions, ToolbarOptions, BulkActionsToolbarOptions, DialFileManagerProps } from './FileManager';
|
|
3
|
+
export interface FileManagerGridRow {
|
|
4
|
+
id: string;
|
|
5
|
+
name: string;
|
|
6
|
+
updatedAt?: string;
|
|
7
|
+
size?: string;
|
|
8
|
+
author?: string;
|
|
9
|
+
path: string;
|
|
10
|
+
nodeType: DialFileNodeType;
|
|
11
|
+
extension?: string;
|
|
12
|
+
}
|
|
13
|
+
export interface FileManagerContextValue {
|
|
14
|
+
cssClass?: string;
|
|
15
|
+
items: DialFile[];
|
|
16
|
+
treeOptions?: FileTreeOptions;
|
|
17
|
+
navigationPanelOptions?: NavigationPanelOptions;
|
|
18
|
+
gridOptions?: GridOptions;
|
|
19
|
+
toolbarOptions?: ToolbarOptions;
|
|
20
|
+
bulkActionsToolbarOptions?: BulkActionsToolbarOptions;
|
|
21
|
+
currentPath?: string;
|
|
22
|
+
setCurrentPath: (p?: string) => void;
|
|
23
|
+
searchValue: string;
|
|
24
|
+
effectiveSearchValue: string;
|
|
25
|
+
setSearchValue: (v: string) => void;
|
|
26
|
+
areHiddenFilesVisible: boolean;
|
|
27
|
+
toggleHiddenFilesVisibility: () => void;
|
|
28
|
+
isTreeCollapsed: boolean;
|
|
29
|
+
toggleTreeCollapse: () => void;
|
|
30
|
+
selectedIds: Set<string>;
|
|
31
|
+
setSelectedIds: (next: Set<string>) => void;
|
|
32
|
+
clearSelection: () => void;
|
|
33
|
+
currentFolder?: DialFile;
|
|
34
|
+
gridRows: FileManagerGridRow[];
|
|
35
|
+
clipboard: {
|
|
36
|
+
copied: Set<string>;
|
|
37
|
+
cut: Set<string>;
|
|
38
|
+
hasItems: boolean;
|
|
39
|
+
};
|
|
40
|
+
onCopy: (files: string[]) => void;
|
|
41
|
+
onCut: (files: string[]) => void;
|
|
42
|
+
onPaste: () => void;
|
|
43
|
+
handlePathChange: (nextPath?: string) => void;
|
|
44
|
+
handleTreeItemClick: (item: DialFile) => void;
|
|
45
|
+
handleBreadcrumbItemClick: (href?: string) => void;
|
|
46
|
+
handleSearchChange: (value?: string) => void;
|
|
47
|
+
handleTableRowClick: (row: FileManagerGridRow) => void;
|
|
48
|
+
onTableFileClick?: DialFileManagerProps['onTableFileClick'];
|
|
49
|
+
}
|
|
50
|
+
export declare const FileManagerContext: import('react').Context<FileManagerContextValue | undefined>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
import { DialFileManagerProps } from './FileManager';
|
|
3
|
+
export interface FileManagerProviderProps extends Omit<DialFileManagerProps, 'children'> {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Provider that encapsulates all File Manager business logic:
|
|
8
|
+
* - path & navigation
|
|
9
|
+
* - search (controlled + uncontrolled)
|
|
10
|
+
* - hidden files toggle
|
|
11
|
+
* - tree collapsed state
|
|
12
|
+
* - selection
|
|
13
|
+
* - clipboard (copy / cut / paste)
|
|
14
|
+
* - computed grid rows
|
|
15
|
+
*
|
|
16
|
+
*/
|
|
17
|
+
export declare const FileManagerProvider: FC<FileManagerProviderProps>;
|
|
@@ -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/FileManagerToolbar/DialFileManagerToolbar.d.ts
CHANGED
|
@@ -2,33 +2,34 @@ 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;
|
|
11
|
+
showHiddenFilesLabel?: string;
|
|
12
|
+
hideHiddenFilesLabel?: string;
|
|
10
13
|
isCreateButtonVisible?: boolean;
|
|
11
14
|
createButtonVariant?: ButtonVariant;
|
|
12
15
|
createButtonDropdownItems?: DropdownItem[];
|
|
13
16
|
createButtonLabel?: string;
|
|
14
17
|
refreshButtonLabel?: string;
|
|
15
|
-
onTabChange
|
|
16
|
-
onToggleHiddenFiles
|
|
17
|
-
onRefresh
|
|
18
|
+
onTabChange?: (id: DialFileManagerTabs) => void;
|
|
19
|
+
onToggleHiddenFiles?: (value: boolean) => void;
|
|
20
|
+
onRefresh?: () => void;
|
|
18
21
|
}
|
|
19
22
|
/**
|
|
20
|
-
* DialFileManagerToolbar — A configurable toolbar component for file
|
|
23
|
+
* DialFileManagerToolbar — A configurable, responsive toolbar component for file management views.
|
|
21
24
|
*
|
|
22
|
-
* Provides a
|
|
23
|
-
* - Tab navigation for switching between
|
|
24
|
-
* -
|
|
25
|
-
* -
|
|
26
|
-
* -
|
|
27
|
-
* - Fully responsive horizontal layout
|
|
25
|
+
* Provides a flexible toolbar interface for file managers or similar UIs, supporting:
|
|
26
|
+
* - Tab navigation for switching between file sections or views
|
|
27
|
+
* - A toggle for showing or hiding hidden files
|
|
28
|
+
* - A refresh button for reloading content
|
|
29
|
+
* - An optional "Create" button or dropdown for creating new files or folders
|
|
28
30
|
*
|
|
29
31
|
* @example
|
|
30
32
|
* ```tsx
|
|
31
|
-
* // Basic usage
|
|
32
33
|
* const tabs: TabModel[] = [
|
|
33
34
|
* { id: 'all', name: 'All Files' },
|
|
34
35
|
* { id: 'favorites', name: 'Favorites' },
|
|
@@ -39,8 +40,8 @@ export interface DialFileManagerToolbarProps {
|
|
|
39
40
|
* activeTab="all"
|
|
40
41
|
* areHiddenFilesVisible={false}
|
|
41
42
|
* onTabChange={(id) => console.log('Switched to tab:', id)}
|
|
42
|
-
* onToggleHiddenFiles={(visible) => console.log('Hidden files:', visible)}
|
|
43
|
-
* onRefresh={() => console.log('
|
|
43
|
+
* onToggleHiddenFiles={(visible) => console.log('Hidden files visible:', visible)}
|
|
44
|
+
* onRefresh={() => console.log('Refreshed')}
|
|
44
45
|
* isCreateButtonVisible
|
|
45
46
|
* createButtonDropdownItems={[
|
|
46
47
|
* { key: 'folder', label: 'New Folder' },
|
|
@@ -49,23 +50,26 @@ export interface DialFileManagerToolbarProps {
|
|
|
49
50
|
* />
|
|
50
51
|
* ```
|
|
51
52
|
*
|
|
52
|
-
* @param [tabs] -
|
|
53
|
-
* @param [activeTab] - ID of the currently active tab.
|
|
54
|
-
* @param
|
|
55
|
-
* @param [
|
|
56
|
-
* @param [
|
|
57
|
-
* @param [
|
|
53
|
+
* @param [tabs] - List of tab definitions to display, each represented by a `TabModel` containing `id` and `name`.
|
|
54
|
+
* @param [activeTab] - The ID of the currently active tab.
|
|
55
|
+
* @param areHiddenFilesVisible - Whether hidden files are currently visible.
|
|
56
|
+
* @param [hiddenFilesSwitcherLabel='Hidden files'] - Label for the hidden files toggle control.
|
|
57
|
+
* @param [showHiddenFilesLabel='Show hidden'] - Label shown when hidden files are not visible.
|
|
58
|
+
* @param [hideHiddenFilesLabel='Hide hidden'] - Label shown when hidden files are visible.
|
|
59
|
+
* @param [onTabChange] - Callback fired when the user switches between tabs. Receives the selected tab ID.
|
|
60
|
+
* @param [onToggleHiddenFiles] - Callback fired when the hidden files visibility is toggled. Receives the new visibility state.
|
|
58
61
|
* @param [onRefresh] - Callback fired when the refresh button is clicked.
|
|
59
|
-
* @param [refreshButtonLabel='Refresh'] -
|
|
60
|
-
* @param [isCreateButtonVisible] - Whether the
|
|
62
|
+
* @param [refreshButtonLabel='Refresh'] - Text label for the refresh button.
|
|
63
|
+
* @param [isCreateButtonVisible] - Whether the "Create" button or dropdown should be displayed.
|
|
61
64
|
* @param [createButtonVariant=ButtonVariant.Secondary] - Visual style variant for the create button.
|
|
62
|
-
* @param [createButtonDropdownItems=[]] - Dropdown
|
|
63
|
-
* @param [createButtonLabel='Create'] - Label for the create button.
|
|
65
|
+
* @param [createButtonDropdownItems=[]] - Dropdown items available under the create button. If empty, a single create button is shown instead.
|
|
66
|
+
* @param [createButtonLabel='Create'] - Label text for the create button.
|
|
64
67
|
*
|
|
65
68
|
* @remarks
|
|
66
|
-
* -
|
|
67
|
-
* -
|
|
68
|
-
* - The refresh and create actions
|
|
69
|
-
* -
|
|
69
|
+
* - Tabs are rendered via `DialTabs`.
|
|
70
|
+
* - The hidden files toggle uses `DialSwitch`.
|
|
71
|
+
* - The refresh and create actions use `DialButton` or dropdown variants for consistency.
|
|
72
|
+
* - The toolbar automatically adapts its layout for different screen sizes.
|
|
73
|
+
* - When `createButtonDropdownItems` is provided, the create button becomes a dropdown menu.
|
|
70
74
|
*/
|
|
71
75
|
export declare const DialFileManagerToolbar: FC<DialFileManagerToolbarProps>;
|
|
@@ -12,6 +12,7 @@ export interface DialFoldersTreeProps {
|
|
|
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,
|
|
@@ -82,6 +83,7 @@ export interface DialFoldersTreeProps {
|
|
|
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.
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
export declare const containerBaseClasses = "w-full h-full grid grid-rows-[auto_1fr] gap-
|
|
2
|
-
export declare const toolbarBaseClasses = "w-full
|
|
3
|
-
export declare const mainGridClasses = "flex min-h-0 min-w-0 h-full gap-
|
|
4
|
-
export declare const contentGridClasses = "flex flex-col flex-1 min-h-0 min-w-0 h-full gap-
|
|
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
5
|
export declare const contentHeaderClasses = "items-center";
|
|
6
|
-
export declare const
|
|
7
|
-
export declare const
|
|
8
|
-
export declare const
|
|
9
|
-
export declare const sidebarWidth = 360;
|
|
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;
|
|
10
9
|
export declare const sidebarTitleDefault = "Files";
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export interface UseFileClipboardOptions {
|
|
2
|
+
getDestination: () => string;
|
|
3
|
+
onCopyFiles?: (files: string[], destination: string) => void;
|
|
4
|
+
onMoveToFiles?: (files: string[], destination: string) => void;
|
|
5
|
+
}
|
|
6
|
+
export declare const useFileClipboard: ({ getDestination, onCopyFiles, onMoveToFiles, }: UseFileClipboardOptions) => {
|
|
7
|
+
state: {
|
|
8
|
+
copied: Set<string>;
|
|
9
|
+
cut: Set<string>;
|
|
10
|
+
hasItems: boolean;
|
|
11
|
+
};
|
|
12
|
+
copy: (files: string[]) => void;
|
|
13
|
+
cut: (files: string[]) => void;
|
|
14
|
+
paste: () => void;
|
|
15
|
+
clear: () => void;
|
|
16
|
+
};
|
|
@@ -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
|
+
};
|
|
@@ -3,3 +3,4 @@ export declare const findFolderForPath: (root: DialFile[] | undefined, path?: st
|
|
|
3
3
|
export declare const normalizeToLowerCase: (input?: string) => string;
|
|
4
4
|
export declare const normalizeExtensionWithoutDot: (input?: string) => string;
|
|
5
5
|
export declare const collectAllDescendants: (folder?: DialFile) => DialFile[];
|
|
6
|
+
export declare const isHiddenDotFile: (node: DialFile) => boolean;
|