mimir-ui-kit 1.29.4 → 1.30.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/assets/InputRangeSlider.css +1 -0
- package/dist/assets/index.css +1 -1
- package/dist/components/InputRangeSlider/InputRangeSlider.d.ts +3 -0
- package/dist/components/InputRangeSlider/InputRangeSlider.js +203 -0
- package/dist/components/InputRangeSlider/constants.d.ts +10 -0
- package/dist/components/InputRangeSlider/constants.js +18 -0
- package/dist/components/InputRangeSlider/index.d.ts +3 -0
- package/dist/components/InputRangeSlider/index.js +7 -0
- package/dist/components/InputRangeSlider/types.d.ts +33 -0
- package/dist/components/InputRangeSlider/types.js +1 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +5 -0
- package/dist/index.js +5 -0
- package/package.json +1 -1
@@ -0,0 +1 @@
|
|
1
|
+
._main-wrapper_62xnd_2{display:flex;flex-direction:column;min-height:46px}._wrapper_62xnd_8{--thumb-width: 42px;--thumb-height: 16px;--default-z-index: 3;position:relative;display:flex;align-items:flex-end;height:16px;height:var(--thumb-height)}._input-wrapper_62xnd_18{position:absolute;align-self:flex-end;width:calc(100% + var(--thumb-width));height:var(--thumb-height);margin:0 calc(var(--thumb-width) / -2)}._info-wrapper_62xnd_26{display:flex;flex:1;align-items:center;align-self:flex-start;justify-content:space-between;width:100%;height:20px}._control-wrapper_62xnd_36{position:absolute;width:100%;height:var(--thumb-height)}._input_62xnd_18{position:absolute;bottom:0;z-index:var(--default-z-index);width:100%;padding:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none}._input_62xnd_18::-ms-track{background:transparent;border:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}._input_62xnd_18::-moz-range-track{background:transparent;border:transparent;-moz-appearance:none;-webkit-appearance:none;appearance:none}._input_62xnd_18:focus::-webkit-slider-runnable-track{background:transparent;border:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}._input_62xnd_18::-ms-thumb{position:relative;width:var(--thumb-width);height:var(--thumb-height);border:0 none;border-radius:0;transform:translate3d(0,calc(-50% + 2px),0);cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:all}._input_62xnd_18::-ms-thumb:active{cursor:grabbing}._input_62xnd_18::-moz-range-thumb{position:relative;width:var(--thumb-width);height:var(--thumb-height);border:0 none;border-radius:0;transform:translate3d(0,calc(-50% + 2px),0);cursor:grab;-moz-appearance:none;-webkit-appearance:none;appearance:none;pointer-events:all}._input_62xnd_18::-moz-range-thumb:active{cursor:grabbing}._input_62xnd_18::-webkit-slider-thumb{position:relative;width:var(--thumb-width);height:var(--thumb-height);border:0 none;border-radius:0;transform:translate3d(0,calc(-50% + 2px),0);cursor:grab;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:all}._input_62xnd_18::-webkit-slider-thumb:active{cursor:grabbing}._input_62xnd_18._equal-value_62xnd_109{z-index:calc(var(--default-z-index) + 1)}._rail_62xnd_113{position:absolute;top:50%;width:100%;height:2px;background-color:var(--sapphire-normal);transform:translateY(-50%)}._rail_62xnd_113._off_62xnd_121._right_62xnd_121,._rail_62xnd_113._off_62xnd_121._double-range_62xnd_121{background-color:transparent}._rail_62xnd_113._double-range_62xnd_121,._rail_62xnd_113._right_62xnd_121{background-color:var(--black-30)}._inner-rail_62xnd_131{position:absolute;top:50%;height:2px;background-color:var(--black-30);transform:translateY(-50%)}._inner-rail_62xnd_131._off_62xnd_121._right_62xnd_121{background-color:var(--sapphire-normal)}._inner-rail_62xnd_131._off_62xnd_121._left_62xnd_141{background-color:transparent}._inner-rail_62xnd_131._off_62xnd_121._double-range_62xnd_121,._inner-rail_62xnd_131._double-range_62xnd_121,._inner-rail_62xnd_131._right_62xnd_121{background-color:var(--sapphire-normal)}._control_62xnd_36{position:absolute;top:0;z-index:calc(var(--default-z-index) - 1);width:var(--thumb-width);height:var(--thumb-height);margin-left:calc(var(--thumb-width) / -2);background-color:var(--sapphire-normal);border-radius:var(--control-radius-xs2);transform:translate3d(0,calc(-50% + 2px),0)}
|
package/dist/assets/index.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
@font-face{font-weight:400;font-family:Montserrat;font-style:normal;src:url(./fonts/585d10920d676fcd.woff2) format("woff2"),url(./fonts/3b9f59412b17ff93.woff) format("woff")}@font-face{font-weight:700;font-family:Montserrat;font-style:normal;src:url(./fonts/f4d681a788c6d497.woff2) format("woff2"),url(./fonts/43b748f250df0f08.woff) format("woff")}@font-face{font-weight:300;font-family:Montserrat;font-style:normal;src:url(./fonts/ee3db32f0aadef5d.woff2) format("woff2"),url(./fonts/1a738bfdbc1e4d9d.woff) format("woff")}@font-face{font-weight:500;font-family:Montserrat;font-style:normal;src:url(./fonts/e51d2feb30084bc2.woff2) format("woff2"),url(./fonts/badaa6d1837432de.woff) format("woff")}@font-face{font-weight:600;font-family:Montserrat;font-style:normal;src:url(./fonts/63611593e008a77c.woff2) format("woff2"),url(./fonts/3cdd7fabbe89d2b9.woff) format("woff")}@font-face{font-weight:400;font-family:Inter;font-style:normal;src:url(./fonts/d080ae18fd04e52c.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:700;font-family:Inter;font-style:normal;src:url(./fonts/11d5bc9f0cad36d1.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:500;font-family:Inter;font-style:normal;src:url(./fonts/242d04bef81519ae.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:600;font-family:Inter;font-style:normal;src:url(./fonts/cac2ba46e8c8adc9.woff2) format("woff2");font-variant-numeric:slashed-zero}@supports (font-variation-settings: normal){:root{font-family:InterVariable,sans-serif}}:root{font-feature-settings:"zero"}*{margin:0;padding:0;border:0;outline:none}*,:after,:before{box-sizing:border-box}:active,:focus{outline:0}a,a:visited,a:hover{-webkit-text-decoration:none;text-decoration:none}a:active,a:focus{outline:0}aside,footer,header,nav{display:block}body,html{width:100%;height:100%;font-size:100%;line-height:1}button,input,textarea,select{font-family:inherit}input::-ms-clear{display:none}button{background-color:transparent;cursor:pointer}button::-moz-focus-inner{padding:0;border:0}ul li{list-style:none}img{vertical-align:top}h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--color-typo-brand);-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}:root{--sapphire-100: #2355d7;--sapphire-90: #3564df;--sapphire-80: #4b75e2;--sapphire-70: #6186e6;--sapphire-60: #7797e9;--sapphire-50: #8da7ed;--sapphire-40: #9fb7f4;--sapphire-30: #b9caf4;--sapphire-20: #cfdaf7;--sapphire-10: #e5ebfb;--citrine-100: #ff7900;--citrine-90: #ff861a;--citrine-80: #ff9433;--citrine-70: #ffa14d;--citrine-60: #ffaf66;--citrine-50: #ffbc80;--citrine-40: #ffc999;--citrine-30: #ffd7b2;--citrine-20: #ffe4cc;--citrine-10: #fff2e5;--magenta-100: #bc2251;--magenta-90: #d8275d;--magenta-80: #dc3d6d;--magenta-70: #e15781;--magenta-60: #e46c91;--magenta-50: #e986a4;--magenta-40: #ed9cb4;--magenta-30: #f2b6c8;--magenta-20: #f6cbd8;--magenta-10: #fae5ec;--black-100: #000;--black-95: #0d0d0d;--black-90: #1a1a1a;--black-85: #262626;--black-80: #333;--black-75: #404040;--black-70: #4d4d4d;--black-65: #595959;--black-60: #666;--black-55: #737373;--black-50: #808080;--black-45: #8c8c8c;--black-40: #999;--black-35: #a6a6a6;--black-30: #b3b3b3;--black-25: #bfbfbf;--black-20: #ccc;--black-15: #d9d9d9;--black-10: #e6e6e6;--black-5: #f2f2f2;--white: #fff;--dark-blue: #0a38af;--blue-40: #a7bbef;--blue-20: #d3ddf7;--green: #1b770c;--red-tag: #f01406;--success-normal: #23b413;--success-bg-hover: #d5fbe2;--success-bg-active: #ebfdf1;--alarm-normal: #fdc023;--alarm-bg-hover: #fff0c7;--alarm-bg-active: #fff6de;--error-normal: #e64646;--error-bg-hover: #fadbdb;--error-bg-active: #fbe3e3;--disabled: #b3b3b3;--disabled-color: #b2b2b2;--light-text: var(--white);--dark-text: var(--black-100);--sapphire-normal: var(--sapphire-100);--sapphire-hover: #1b41a3;--sapphire-active: #122c70;--citrine-normal: var(--citrine-100);--citrine-hover: #e56d00;--citrine-active: #cc6100;--asphalt-border: var(--black-30);--asphalt-normal: var(--black-80);--asphalt-hover: var(--black-90);--asphalt-active: var(--black-100);--gray-normal: var(--black-5);--gray-hover: var(--black-10);--gray-active: var(--black-80);--white-normal: var(--white);--white-hover: var(--black-5);--white-transparent: rgba(255, 255, 255, .4);--white-active: var(--black-80);--red-normal: var(--error-normal);--red-hover: #e33030;--red-active: #dc1e1e;--green-normal: var(--green);--green-hover: #16610a;--green-active: #114a08;--counter-text: #ffa066;--button-height-ms: 16px;--button-height-xs: 24px;--button-height-s: 32px;--button-height-m: 40px;--button-height-l: 48px;--button-height-xl: 56px;--button-height-xxl: 64px;--select-search-height-l: 48px;--select-search-height-xxl: 64px;--select-search-options-height-desktop: 320px;--select-search-options-height-mobile: 264px;--control-default: var(--sapphire-20);--control-hover: var(--sapphire-40);--control-selected: var(--sapphire-100);--control-disabled: var(--black-10);--font-inter: "Inter", sans-serif;--font-montserrat: "Montserrat", sans-serif;--font-weight-text-regular: 400;--font-weight-text-medium: 500;--font-weight-text-semibold: 600;--font-weight-text-bold: 700;--font-weight-text-extrabold: 800;--font-weight-text-black: 900;--size-text-xs2: 8px;--size-text-xs: 10px;--size-text-s: 12px;--size-text-m: 14px;--size-text-l: 16px;--size-text-l2: 18px;--size-text-xl: 20px;--size-text-xl2: 24px;--size-text-3xl: 26px;--size-text-2xl: 28px;--size-text-xl3: 32px;--size-text-xl4: 48px;--size-text-4xl: 52px;--size-text-5xl: 56px;--size-text-xl5: 72px;--size-text-xl6: 96px;--line-height-text-2xs: 1em;--line-height-text-xxs: 1.125em;--line-height-text-xs: 1.1em;--line-height-text-s: 1.2em;--line-height-text-s1: 1.25em;--line-height-text-m: 1.3em;--line-height-text-m1: 1.35em;--line-height-text-l: 1.4em;--line-height-text-l1: 1.45em;--line-height-text-xl: 1.5em;--line-height-text-xl1: 1.5em;--control-radius-xs: 4px;--control-radius: 6px;--control-radius-s: 8px;--control-radius-m-s: 16px;--control-radius-m: 20px;--control-radius-l: 24px;--control-radius-xl: 32px;--control-radius-xxl: 40px;--control-input-radius: 12px;--control-border-width: 1px;--control-height-xl: 60px;--control-height-xxl: 60px;--control-height-l: var(--space-4xl);--control-height-m: var(--space-3xl);--control-height-s: var(--space-2xl);--control-height-xs: var(--space-xl);--control-box-size-s: var(--space-s);--control-box-size-m: var(--space-m);--control-box-size-l: var(--space-l);--control-space-xxl: var(--space-xl);--control-space-l: var(--space-xl);--control-space-m: var(--space-l);--control-space-s: var(--space-m);--control-space-xs: var(--space-s);--control-text-size-2xl: var(--size-text-xl);--control-text-size-xl: var(--size-text-xl3);--control-text-size-l: var(--size-text-l);--control-text-size-m: var(--size-text-m);--control-text-size-s: var(--size-text-s);--control-text-size-xs: var(--size-text-xs);--space-3xs: 2px;--space-2xs: 4px;--space-1xs: 6px;--space-xs: 8px;--space-xss: 10px;--space-s: 12px;--space-2s: 14px;--space-m: 16px;--space-2m: 18px;--space-l: 20px;--space-2l: 22px;--space-xl: 24px;--space-1xl: 28px;--space-2xl: 32px;--space-2xxl: 36px;--space-xxl: 40px;--space-3xl: 44px;--space-4xl: 48px;--space-5xl: 56px;--space-4xxl: 64px;--space-5xxl: 72px;--space-6xl: 96px;--box-shadow-active: 0 0 2px var(--sapphire-normal);--box-shadow-focus: 0px 0px 10px 2px #1389cc;--box-shadow-select-search: 0 3px 15px 0 rgba(31, 32, 35, .15);--select-search-input-top-l: -15%;--select-search-input-top-xxl: -35%;--container-width-xs: 375px;--container-width-s: 767px;--container-width-m: 960px;--container-width-l: 1280px;--container-width-xl: 1440px;--container-width-xxl: 1920px;--zindex-fixed: 1030;--sidebar-width-collapsed: 64px;--sidebar-width-expanded: 256px;--header-height: 64px;--sidebar-form-width-tablet: 369px;--sidebar-form-width-mobile: 309px;--tab-trail-height-m: 58px;--tab-trail-height-s: 36px;--accordion-icon-circle-size-m: 48px;--accordion-icon-circle-size-s: 36px;--accordion-icon-square-size-m: 40px;--accordion-icon-square-size-s: 32px}@supports (font-variation-settings: normal){:root{font-family:Inter,sans-serif}}:root{font-feature-settings:"zero";font-variant-numeric:slashed-zero}body{font-family:Inter,sans-serif;font-feature-settings:"zero";font-variant-numeric:slashed-zero;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
|
1
|
+
@font-face{font-weight:400;font-family:Montserrat;font-style:normal;src:url(./fonts/585d10920d676fcd.woff2) format("woff2"),url(./fonts/3b9f59412b17ff93.woff) format("woff")}@font-face{font-weight:700;font-family:Montserrat;font-style:normal;src:url(./fonts/f4d681a788c6d497.woff2) format("woff2"),url(./fonts/43b748f250df0f08.woff) format("woff")}@font-face{font-weight:300;font-family:Montserrat;font-style:normal;src:url(./fonts/ee3db32f0aadef5d.woff2) format("woff2"),url(./fonts/1a738bfdbc1e4d9d.woff) format("woff")}@font-face{font-weight:500;font-family:Montserrat;font-style:normal;src:url(./fonts/e51d2feb30084bc2.woff2) format("woff2"),url(./fonts/badaa6d1837432de.woff) format("woff")}@font-face{font-weight:600;font-family:Montserrat;font-style:normal;src:url(./fonts/63611593e008a77c.woff2) format("woff2"),url(./fonts/3cdd7fabbe89d2b9.woff) format("woff")}@font-face{font-weight:400;font-family:Inter;font-style:normal;src:url(./fonts/d080ae18fd04e52c.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:700;font-family:Inter;font-style:normal;src:url(./fonts/11d5bc9f0cad36d1.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:500;font-family:Inter;font-style:normal;src:url(./fonts/242d04bef81519ae.woff2) format("woff2");font-variant-numeric:slashed-zero}@font-face{font-weight:600;font-family:Inter;font-style:normal;src:url(./fonts/cac2ba46e8c8adc9.woff2) format("woff2");font-variant-numeric:slashed-zero}@supports (font-variation-settings: normal){:root{font-family:InterVariable,sans-serif}}:root{font-feature-settings:"zero"}*{margin:0;padding:0;border:0;outline:none}*,:after,:before{box-sizing:border-box}:active,:focus{outline:0}a,a:visited,a:hover{-webkit-text-decoration:none;text-decoration:none}a:active,a:focus{outline:0}aside,footer,header,nav{display:block}body,html{width:100%;height:100%;font-size:100%;line-height:1}button,input,textarea,select{font-family:inherit}input::-ms-clear{display:none}button{background-color:transparent;cursor:pointer}button::-moz-focus-inner{padding:0;border:0}ul li{list-style:none}img{vertical-align:top}h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--color-typo-brand);-webkit-transition:background-color 5000s ease-in-out 0s;transition:background-color 5000s ease-in-out 0s}:root{--sapphire-100: #2355d7;--sapphire-90: #3564df;--sapphire-80: #4b75e2;--sapphire-70: #6186e6;--sapphire-60: #7797e9;--sapphire-50: #8da7ed;--sapphire-40: #9fb7f4;--sapphire-30: #b9caf4;--sapphire-20: #cfdaf7;--sapphire-10: #e5ebfb;--citrine-100: #ff7900;--citrine-90: #ff861a;--citrine-80: #ff9433;--citrine-70: #ffa14d;--citrine-60: #ffaf66;--citrine-50: #ffbc80;--citrine-40: #ffc999;--citrine-30: #ffd7b2;--citrine-20: #ffe4cc;--citrine-10: #fff2e5;--magenta-100: #bc2251;--magenta-90: #d8275d;--magenta-80: #dc3d6d;--magenta-70: #e15781;--magenta-60: #e46c91;--magenta-50: #e986a4;--magenta-40: #ed9cb4;--magenta-30: #f2b6c8;--magenta-20: #f6cbd8;--magenta-10: #fae5ec;--black-100: #000;--black-95: #0d0d0d;--black-90: #1a1a1a;--black-85: #262626;--black-80: #333;--black-75: #404040;--black-70: #4d4d4d;--black-65: #595959;--black-60: #666;--black-55: #737373;--black-50: #808080;--black-45: #8c8c8c;--black-40: #999;--black-35: #a6a6a6;--black-30: #b3b3b3;--black-25: #bfbfbf;--black-20: #ccc;--black-15: #d9d9d9;--black-10: #e6e6e6;--black-5: #f2f2f2;--white: #fff;--dark-blue: #0a38af;--blue-40: #a7bbef;--blue-20: #d3ddf7;--green: #1b770c;--red-tag: #f01406;--success-normal: #23b413;--success-bg-hover: #d5fbe2;--success-bg-active: #ebfdf1;--alarm-normal: #fdc023;--alarm-bg-hover: #fff0c7;--alarm-bg-active: #fff6de;--error-normal: #e64646;--error-bg-hover: #fadbdb;--error-bg-active: #fbe3e3;--disabled: #b3b3b3;--disabled-color: #b2b2b2;--light-text: var(--white);--dark-text: var(--black-100);--sapphire-normal: var(--sapphire-100);--sapphire-hover: #1b41a3;--sapphire-active: #122c70;--citrine-normal: var(--citrine-100);--citrine-hover: #e56d00;--citrine-active: #cc6100;--asphalt-border: var(--black-30);--asphalt-normal: var(--black-80);--asphalt-hover: var(--black-90);--asphalt-active: var(--black-100);--gray-normal: var(--black-5);--gray-hover: var(--black-10);--gray-active: var(--black-80);--white-normal: var(--white);--white-hover: var(--black-5);--white-transparent: rgba(255, 255, 255, .4);--white-active: var(--black-80);--red-normal: var(--error-normal);--red-hover: #e33030;--red-active: #dc1e1e;--green-normal: var(--green);--green-hover: #16610a;--green-active: #114a08;--counter-text: #ffa066;--button-height-ms: 16px;--button-height-xs: 24px;--button-height-s: 32px;--button-height-m: 40px;--button-height-l: 48px;--button-height-xl: 56px;--button-height-xxl: 64px;--select-search-height-l: 48px;--select-search-height-xxl: 64px;--select-search-options-height-desktop: 320px;--select-search-options-height-mobile: 264px;--control-default: var(--sapphire-20);--control-hover: var(--sapphire-40);--control-selected: var(--sapphire-100);--control-disabled: var(--black-10);--font-inter: "Inter", sans-serif;--font-montserrat: "Montserrat", sans-serif;--font-weight-text-regular: 400;--font-weight-text-medium: 500;--font-weight-text-semibold: 600;--font-weight-text-bold: 700;--font-weight-text-extrabold: 800;--font-weight-text-black: 900;--size-text-xs2: 8px;--size-text-xs: 10px;--size-text-s: 12px;--size-text-m: 14px;--size-text-l: 16px;--size-text-l2: 18px;--size-text-xl: 20px;--size-text-xl2: 24px;--size-text-3xl: 26px;--size-text-2xl: 28px;--size-text-xl3: 32px;--size-text-xl4: 48px;--size-text-4xl: 52px;--size-text-5xl: 56px;--size-text-xl5: 72px;--size-text-xl6: 96px;--line-height-text-2xs: 1em;--line-height-text-xxs: 1.125em;--line-height-text-xs: 1.1em;--line-height-text-s: 1.2em;--line-height-text-s1: 1.25em;--line-height-text-m: 1.3em;--line-height-text-m1: 1.35em;--line-height-text-l: 1.4em;--line-height-text-l1: 1.45em;--line-height-text-xl: 1.5em;--line-height-text-xl1: 1.5em;--control-radius-xs2: 2px;--control-radius-xs: 4px;--control-radius: 6px;--control-radius-s: 8px;--control-radius-m-s: 16px;--control-radius-m: 20px;--control-radius-l: 24px;--control-radius-xl: 32px;--control-radius-xxl: 40px;--control-input-radius: 12px;--control-border-width: 1px;--control-height-xl: 60px;--control-height-xxl: 60px;--control-height-l: var(--space-4xl);--control-height-m: var(--space-3xl);--control-height-s: var(--space-2xl);--control-height-xs: var(--space-xl);--control-box-size-s: var(--space-s);--control-box-size-m: var(--space-m);--control-box-size-l: var(--space-l);--control-space-xxl: var(--space-xl);--control-space-l: var(--space-xl);--control-space-m: var(--space-l);--control-space-s: var(--space-m);--control-space-xs: var(--space-s);--control-text-size-2xl: var(--size-text-xl);--control-text-size-xl: var(--size-text-xl3);--control-text-size-l: var(--size-text-l);--control-text-size-m: var(--size-text-m);--control-text-size-s: var(--size-text-s);--control-text-size-xs: var(--size-text-xs);--space-3xs: 2px;--space-2xs: 4px;--space-1xs: 6px;--space-xs: 8px;--space-xss: 10px;--space-s: 12px;--space-2s: 14px;--space-m: 16px;--space-2m: 18px;--space-l: 20px;--space-2l: 22px;--space-xl: 24px;--space-1xl: 28px;--space-2xl: 32px;--space-2xxl: 36px;--space-xxl: 40px;--space-3xl: 44px;--space-4xl: 48px;--space-5xl: 56px;--space-4xxl: 64px;--space-5xxl: 72px;--space-6xl: 96px;--box-shadow-active: 0 0 2px var(--sapphire-normal);--box-shadow-focus: 0px 0px 10px 2px #1389cc;--box-shadow-select-search: 0 3px 15px 0 rgba(31, 32, 35, .15);--select-search-input-top-l: -15%;--select-search-input-top-xxl: -35%;--container-width-xs: 375px;--container-width-s: 767px;--container-width-m: 960px;--container-width-l: 1280px;--container-width-xl: 1440px;--container-width-xxl: 1920px;--zindex-fixed: 1030;--sidebar-width-collapsed: 64px;--sidebar-width-expanded: 256px;--header-height: 64px;--sidebar-form-width-tablet: 369px;--sidebar-form-width-mobile: 309px;--tab-trail-height-m: 58px;--tab-trail-height-s: 36px;--accordion-icon-circle-size-m: 48px;--accordion-icon-circle-size-s: 36px;--accordion-icon-square-size-m: 40px;--accordion-icon-square-size-s: 32px}@supports (font-variation-settings: normal){:root{font-family:Inter,sans-serif}}:root{font-feature-settings:"zero";font-variant-numeric:slashed-zero}body{font-family:Inter,sans-serif;font-feature-settings:"zero";font-variant-numeric:slashed-zero;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
|
@@ -0,0 +1,3 @@
|
|
1
|
+
import { TProps } from './types';
|
2
|
+
|
3
|
+
export declare const InputRangeSlider: import('react').MemoExoticComponent<({ min, max, value, isMinEqualMax, isSingleSlider, step, borderState, positions, minMaxDescriptions, onChangeValue, wrapperClassName, ...props }: TProps) => import("react/jsx-runtime").JSX.Element>;
|
@@ -0,0 +1,203 @@
|
|
1
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
2
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
3
|
+
import { memo, useState, useEffect } from "react";
|
4
|
+
import { EInputRangeSliderPositions, EInputRangeSliderBorderState, DEFAULT_STEP, DEFAULT_WIDTH } from "./constants.js";
|
5
|
+
import '../../assets/InputRangeSlider.css';const wrapper = "_wrapper_62xnd_8";
|
6
|
+
const input = "_input_62xnd_18";
|
7
|
+
const rail = "_rail_62xnd_113";
|
8
|
+
const off = "_off_62xnd_121";
|
9
|
+
const right = "_right_62xnd_121";
|
10
|
+
const left = "_left_62xnd_141";
|
11
|
+
const control = "_control_62xnd_36";
|
12
|
+
const cls = {
|
13
|
+
"main-wrapper": "_main-wrapper_62xnd_2",
|
14
|
+
wrapper,
|
15
|
+
"input-wrapper": "_input-wrapper_62xnd_18",
|
16
|
+
"info-wrapper": "_info-wrapper_62xnd_26",
|
17
|
+
"control-wrapper": "_control-wrapper_62xnd_36",
|
18
|
+
input,
|
19
|
+
"equal-value": "_equal-value_62xnd_109",
|
20
|
+
rail,
|
21
|
+
off,
|
22
|
+
right,
|
23
|
+
"double-range": "_double-range_62xnd_121",
|
24
|
+
"inner-rail": "_inner-rail_62xnd_131",
|
25
|
+
left,
|
26
|
+
control
|
27
|
+
};
|
28
|
+
const InputRangeSlider = memo(
|
29
|
+
({
|
30
|
+
min,
|
31
|
+
max,
|
32
|
+
value,
|
33
|
+
isMinEqualMax = false,
|
34
|
+
isSingleSlider = true,
|
35
|
+
step = DEFAULT_STEP,
|
36
|
+
borderState = EInputRangeSliderBorderState.ON,
|
37
|
+
positions = EInputRangeSliderPositions.LEFT,
|
38
|
+
minMaxDescriptions,
|
39
|
+
onChangeValue,
|
40
|
+
wrapperClassName,
|
41
|
+
...props
|
42
|
+
}) => {
|
43
|
+
const [minValue, setMinValue] = useState(() => (value == null ? void 0 : value.min) ?? min);
|
44
|
+
const [maxValue, setMaxValue] = useState(() => (value == null ? void 0 : value.max) ?? max);
|
45
|
+
const {
|
46
|
+
max: maxDescription,
|
47
|
+
min: minDescription,
|
48
|
+
maxClassName,
|
49
|
+
minClassName
|
50
|
+
} = minMaxDescriptions ?? {};
|
51
|
+
useEffect(() => {
|
52
|
+
if (value) {
|
53
|
+
setMinValue(value.min);
|
54
|
+
setMaxValue(value.max);
|
55
|
+
}
|
56
|
+
}, [value]);
|
57
|
+
const handleMinChange = (event) => {
|
58
|
+
event.preventDefault();
|
59
|
+
const newMinVal = Math.min(
|
60
|
+
+event.target.value,
|
61
|
+
isSingleSlider || isMinEqualMax ? maxValue : maxValue - step
|
62
|
+
);
|
63
|
+
if (!value) {
|
64
|
+
setMinValue(newMinVal);
|
65
|
+
}
|
66
|
+
onChangeValue == null ? void 0 : onChangeValue({ min: newMinVal, max: maxValue });
|
67
|
+
};
|
68
|
+
const handleMaxChange = (event) => {
|
69
|
+
event.preventDefault();
|
70
|
+
const newMaxVal = Math.max(
|
71
|
+
+event.target.value,
|
72
|
+
isMinEqualMax ? minValue : minValue + step
|
73
|
+
);
|
74
|
+
if (!value) {
|
75
|
+
setMaxValue(newMaxVal);
|
76
|
+
}
|
77
|
+
onChangeValue == null ? void 0 : onChangeValue({ min: minValue, max: newMaxVal });
|
78
|
+
};
|
79
|
+
const minPos = (minValue - min) / (max - min) * DEFAULT_WIDTH;
|
80
|
+
const maxPos = (maxValue - min) / (max - min) * DEFAULT_WIDTH;
|
81
|
+
const isLeftPosition = positions === EInputRangeSliderPositions.LEFT;
|
82
|
+
const isEqualValue = minValue === maxValue && maxPos !== 0;
|
83
|
+
const isOff = borderState === EInputRangeSliderBorderState.OFF;
|
84
|
+
const renderInputs = () => {
|
85
|
+
const inputProps = {
|
86
|
+
...props,
|
87
|
+
type: "range",
|
88
|
+
min,
|
89
|
+
max,
|
90
|
+
step
|
91
|
+
};
|
92
|
+
const leftInput = /* @__PURE__ */ jsx(
|
93
|
+
"input",
|
94
|
+
{
|
95
|
+
...inputProps,
|
96
|
+
className: classNames(cls.input, {
|
97
|
+
[cls["equal-value"]]: isEqualValue
|
98
|
+
}),
|
99
|
+
value: minValue,
|
100
|
+
onChange: handleMinChange
|
101
|
+
}
|
102
|
+
);
|
103
|
+
const rightInput = /* @__PURE__ */ jsx(
|
104
|
+
"input",
|
105
|
+
{
|
106
|
+
...inputProps,
|
107
|
+
className: cls.input,
|
108
|
+
value: maxValue,
|
109
|
+
onChange: handleMaxChange
|
110
|
+
}
|
111
|
+
);
|
112
|
+
if (isSingleSlider) {
|
113
|
+
return isLeftPosition ? leftInput : rightInput;
|
114
|
+
}
|
115
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
116
|
+
leftInput,
|
117
|
+
rightInput
|
118
|
+
] });
|
119
|
+
};
|
120
|
+
const renderControls = () => {
|
121
|
+
const leftControl = /* @__PURE__ */ jsx(
|
122
|
+
"div",
|
123
|
+
{
|
124
|
+
className: classNames(cls.control),
|
125
|
+
style: {
|
126
|
+
left: `${minPos}%`
|
127
|
+
}
|
128
|
+
}
|
129
|
+
);
|
130
|
+
const rightControl = /* @__PURE__ */ jsx(
|
131
|
+
"div",
|
132
|
+
{
|
133
|
+
className: classNames(cls.control),
|
134
|
+
style: {
|
135
|
+
left: `${maxPos}%`
|
136
|
+
}
|
137
|
+
}
|
138
|
+
);
|
139
|
+
const getRailWidth = () => {
|
140
|
+
if (isOff) {
|
141
|
+
return isLeftPosition ? `${minPos}%` : `${DEFAULT_WIDTH - maxPos}%`;
|
142
|
+
}
|
143
|
+
return !isLeftPosition ? `${DEFAULT_WIDTH - maxPos}%` : void 0;
|
144
|
+
};
|
145
|
+
const innerRailRight = isSingleSlider && !isLeftPosition ? "0%" : `${DEFAULT_WIDTH - maxPos}%`;
|
146
|
+
const innerRailWidth = isSingleSlider && !isLeftPosition ? getRailWidth() : `${maxPos - minPos}%`;
|
147
|
+
const rail2 = /* @__PURE__ */ jsxs(Fragment, { children: [
|
148
|
+
/* @__PURE__ */ jsx(
|
149
|
+
"div",
|
150
|
+
{
|
151
|
+
style: {
|
152
|
+
width: !isOff && !isLeftPosition ? `${maxPos}%` : getRailWidth()
|
153
|
+
},
|
154
|
+
className: classNames(cls.rail, cls[borderState], cls[positions], {
|
155
|
+
[cls["double-range"]]: !isSingleSlider
|
156
|
+
})
|
157
|
+
}
|
158
|
+
),
|
159
|
+
/* @__PURE__ */ jsx(
|
160
|
+
"div",
|
161
|
+
{
|
162
|
+
style: {
|
163
|
+
right: innerRailRight,
|
164
|
+
width: innerRailWidth
|
165
|
+
},
|
166
|
+
className: classNames(
|
167
|
+
cls["inner-rail"],
|
168
|
+
cls[borderState],
|
169
|
+
cls[positions],
|
170
|
+
{
|
171
|
+
[cls["double-range"]]: !isSingleSlider
|
172
|
+
}
|
173
|
+
)
|
174
|
+
}
|
175
|
+
)
|
176
|
+
] });
|
177
|
+
if (isSingleSlider) {
|
178
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
179
|
+
isLeftPosition ? leftControl : rightControl,
|
180
|
+
rail2
|
181
|
+
] });
|
182
|
+
}
|
183
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
184
|
+
leftControl,
|
185
|
+
rail2,
|
186
|
+
rightControl
|
187
|
+
] });
|
188
|
+
};
|
189
|
+
return /* @__PURE__ */ jsxs("div", { className: classNames(cls["main-wrapper"], wrapperClassName), children: [
|
190
|
+
/* @__PURE__ */ jsxs("div", { className: cls["info-wrapper"], children: [
|
191
|
+
!!minDescription && /* @__PURE__ */ jsx("div", { className: minClassName, children: minDescription }),
|
192
|
+
!!maxDescription && /* @__PURE__ */ jsx("div", { className: maxClassName, children: maxDescription })
|
193
|
+
] }),
|
194
|
+
/* @__PURE__ */ jsxs("div", { className: cls.wrapper, children: [
|
195
|
+
/* @__PURE__ */ jsx("div", { className: cls["input-wrapper"], children: renderInputs() }),
|
196
|
+
/* @__PURE__ */ jsx("div", { className: cls["control-wrapper"], children: renderControls() })
|
197
|
+
] })
|
198
|
+
] });
|
199
|
+
}
|
200
|
+
);
|
201
|
+
export {
|
202
|
+
InputRangeSlider
|
203
|
+
};
|
@@ -0,0 +1,18 @@
|
|
1
|
+
var EInputRangeSliderPositions = /* @__PURE__ */ ((EInputRangeSliderPositions2) => {
|
2
|
+
EInputRangeSliderPositions2["LEFT"] = "left";
|
3
|
+
EInputRangeSliderPositions2["RIGHT"] = "right";
|
4
|
+
return EInputRangeSliderPositions2;
|
5
|
+
})(EInputRangeSliderPositions || {});
|
6
|
+
var EInputRangeSliderBorderState = /* @__PURE__ */ ((EInputRangeSliderBorderState2) => {
|
7
|
+
EInputRangeSliderBorderState2["ON"] = "on";
|
8
|
+
EInputRangeSliderBorderState2["OFF"] = "off";
|
9
|
+
return EInputRangeSliderBorderState2;
|
10
|
+
})(EInputRangeSliderBorderState || {});
|
11
|
+
const DEFAULT_STEP = 1;
|
12
|
+
const DEFAULT_WIDTH = 100;
|
13
|
+
export {
|
14
|
+
DEFAULT_STEP,
|
15
|
+
DEFAULT_WIDTH,
|
16
|
+
EInputRangeSliderBorderState,
|
17
|
+
EInputRangeSliderPositions
|
18
|
+
};
|
@@ -0,0 +1,33 @@
|
|
1
|
+
import { ComponentProps, ReactNode } from 'react';
|
2
|
+
import { EInputRangeSliderBorderState, EInputRangeSliderPositions } from './constants';
|
3
|
+
|
4
|
+
type TInputRangeSliderDoubleRangeProps = {
|
5
|
+
isSingleSlider: true;
|
6
|
+
positions?: EInputRangeSliderPositions | `${EInputRangeSliderPositions}`;
|
7
|
+
} | {
|
8
|
+
isSingleSlider?: false;
|
9
|
+
positions?: never;
|
10
|
+
};
|
11
|
+
export type TProps = TInputRangeSliderDoubleRangeProps & ({
|
12
|
+
min: number;
|
13
|
+
max: number;
|
14
|
+
step?: number;
|
15
|
+
wrapperClassName?: string;
|
16
|
+
isMinEqualMax?: boolean;
|
17
|
+
value?: {
|
18
|
+
min: number;
|
19
|
+
max: number;
|
20
|
+
};
|
21
|
+
onChangeValue?: (value: {
|
22
|
+
min: number;
|
23
|
+
max: number;
|
24
|
+
}) => void;
|
25
|
+
borderState?: EInputRangeSliderBorderState | `${EInputRangeSliderBorderState}`;
|
26
|
+
minMaxDescriptions?: {
|
27
|
+
min: ReactNode;
|
28
|
+
max: ReactNode;
|
29
|
+
minClassName?: string;
|
30
|
+
maxClassName?: string;
|
31
|
+
};
|
32
|
+
} & Omit<ComponentProps<'input'>, 'value'>);
|
33
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
|
@@ -44,3 +44,5 @@ export { ENotificationBadgeSize } from './NotificationBadge';
|
|
44
44
|
export { Chip, EChipSize, EChipVariant } from './Chip';
|
45
45
|
export { UniversalUploader, EUploaderType } from './UniversalUploader';
|
46
46
|
export type { TUniversalUploader, TOnChangeUpdate, TPhotoWithType, TFileWithType } from './UniversalUploader';
|
47
|
+
export { InputRangeSlider, EInputRangeSliderBorderState, EInputRangeSliderPositions } from './InputRangeSlider';
|
48
|
+
export type { TInputRangeSliderProps } from './InputRangeSlider';
|
package/dist/components/index.js
CHANGED
@@ -45,6 +45,8 @@ import { Chip } from "./Chip/Chip.js";
|
|
45
45
|
import { EChipSize, EChipVariant } from "./Chip/constants.js";
|
46
46
|
import { UniversalUploader } from "./UniversalUploader/UniversalUploader.js";
|
47
47
|
import { EUploaderType } from "./UniversalUploader/constants.js";
|
48
|
+
import { InputRangeSlider } from "./InputRangeSlider/InputRangeSlider.js";
|
49
|
+
import { EInputRangeSliderBorderState, EInputRangeSliderPositions } from "./InputRangeSlider/constants.js";
|
48
50
|
export {
|
49
51
|
Accordion,
|
50
52
|
AccordionItem,
|
@@ -63,6 +65,8 @@ export {
|
|
63
65
|
EChipSize,
|
64
66
|
EChipVariant,
|
65
67
|
EDrawerPosition,
|
68
|
+
EInputRangeSliderBorderState,
|
69
|
+
EInputRangeSliderPositions,
|
66
70
|
EInputSize,
|
67
71
|
EInputVariant,
|
68
72
|
ELinkSize,
|
@@ -83,6 +87,7 @@ export {
|
|
83
87
|
I as Input,
|
84
88
|
InputPassword,
|
85
89
|
InputPhoneNumber,
|
90
|
+
InputRangeSlider,
|
86
91
|
Link,
|
87
92
|
Loader,
|
88
93
|
MergedButton,
|
package/dist/index.js
CHANGED
@@ -45,6 +45,8 @@ import { Chip } from "./components/Chip/Chip.js";
|
|
45
45
|
import { EChipSize, EChipVariant } from "./components/Chip/constants.js";
|
46
46
|
import { UniversalUploader } from "./components/UniversalUploader/UniversalUploader.js";
|
47
47
|
import { EUploaderType } from "./components/UniversalUploader/constants.js";
|
48
|
+
import { InputRangeSlider } from "./components/InputRangeSlider/InputRangeSlider.js";
|
49
|
+
import { EInputRangeSliderBorderState, EInputRangeSliderPositions } from "./components/InputRangeSlider/constants.js";
|
48
50
|
import { useMediaQuery } from "./hooks/useMediaQuery/useMediaQuery.js";
|
49
51
|
import { EMediaQuery, EMinMediaQuery } from "./hooks/useMediaQuery/constants.js";
|
50
52
|
import { useLockBodyScroll } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
|
@@ -74,6 +76,8 @@ import './assets/index.css';export {
|
|
74
76
|
EChipSize,
|
75
77
|
EChipVariant,
|
76
78
|
EDrawerPosition,
|
79
|
+
EInputRangeSliderBorderState,
|
80
|
+
EInputRangeSliderPositions,
|
77
81
|
EInputSize,
|
78
82
|
EInputVariant,
|
79
83
|
ELinkSize,
|
@@ -97,6 +101,7 @@ import './assets/index.css';export {
|
|
97
101
|
I as Input,
|
98
102
|
InputPassword,
|
99
103
|
InputPhoneNumber,
|
104
|
+
InputRangeSlider,
|
100
105
|
Link,
|
101
106
|
Loader,
|
102
107
|
MergedButton,
|