@salutejs/plasma-new-hope 0.176.0-canary.1511.11555353496.0 → 0.176.0-canary.1511.11569320253.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/NumberInput/NumberInput.css +1 -1
- package/cjs/components/NumberInput/NumberInput.tokens.js +1 -0
- package/cjs/components/NumberInput/NumberInput.tokens.js.map +1 -1
- package/cjs/components/NumberInput/ui/Input/Input.js +24 -22
- package/cjs/components/NumberInput/ui/Input/Input.js.map +1 -1
- package/cjs/components/NumberInput/variations/_segmentation/base.js +1 -1
- package/cjs/components/NumberInput/variations/_segmentation/base.js.map +1 -1
- package/cjs/components/NumberInput/variations/_segmentation/base_1jt83uh.css +1 -0
- package/cjs/index.css +1 -1
- package/emotion/cjs/components/NumberInput/NumberInput.tokens.js +1 -0
- package/emotion/cjs/components/NumberInput/ui/Input/Input.js +24 -22
- package/emotion/cjs/components/NumberInput/variations/_segmentation/base.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +16 -16
- package/emotion/cjs/examples/plasma_web/components/NumberInput/NumberInput.config.js +16 -16
- package/emotion/es/components/NumberInput/NumberInput.tokens.js +1 -0
- package/emotion/es/components/NumberInput/ui/Input/Input.js +24 -22
- package/emotion/es/components/NumberInput/variations/_segmentation/base.js +1 -1
- package/emotion/es/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +16 -16
- package/emotion/es/examples/plasma_web/components/NumberInput/NumberInput.config.js +16 -16
- package/es/components/NumberInput/NumberInput.css +1 -1
- package/es/components/NumberInput/NumberInput.tokens.js +1 -0
- package/es/components/NumberInput/NumberInput.tokens.js.map +1 -1
- package/es/components/NumberInput/ui/Input/Input.js +24 -22
- package/es/components/NumberInput/ui/Input/Input.js.map +1 -1
- package/es/components/NumberInput/variations/_segmentation/base.js +1 -1
- package/es/components/NumberInput/variations/_segmentation/base.js.map +1 -1
- package/es/components/NumberInput/variations/_segmentation/base_1jt83uh.css +1 -0
- package/es/index.css +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/NumberInput/NumberInput.tokens.js +1 -0
- package/styled-components/cjs/components/NumberInput/ui/Input/Input.js +24 -22
- package/styled-components/cjs/components/NumberInput/variations/_segmentation/base.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +4 -4
- package/styled-components/cjs/examples/plasma_web/components/NumberInput/NumberInput.config.js +4 -4
- package/styled-components/es/components/NumberInput/NumberInput.tokens.js +1 -0
- package/styled-components/es/components/NumberInput/ui/Input/Input.js +24 -22
- package/styled-components/es/components/NumberInput/variations/_segmentation/base.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/NumberInput/NumberInput.config.js +4 -4
- package/styled-components/es/examples/plasma_web/components/NumberInput/NumberInput.config.js +4 -4
- package/types/components/NumberInput/NumberInput.tokens.d.ts +1 -0
- package/types/components/NumberInput/NumberInput.tokens.d.ts.map +1 -1
- package/types/components/NumberInput/ui/Input/Input.d.ts.map +1 -1
- package/types/components/NumberInput/variations/_segmentation/base.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/NumberInput/NumberInput.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/NumberInput/NumberInput.config.d.ts.map +1 -1
- package/cjs/components/NumberInput/variations/_segmentation/base_1mg9wqg.css +0 -1
- package/es/components/NumberInput/variations/_segmentation/base_1mg9wqg.css +0 -1
@@ -47,6 +47,6 @@
|
|
47
47
|
|
48
48
|
.base_dx9knv_b15uqx38__1d74109c .base_dx9knv_i1s8bsh6__1d74109c{background-color:var(--plasma-number-input_background-color);box-shadow:inset 0 0 0 var(--plasma-number-input_input-wrapper_border-width) var(--plasma-number-input_border-color);}.base_dx9knv_b15uqx38__1d74109c .base_dx9knv_i1s8bsh6__1d74109c.base_dx9knv_manualInputNumberInput__1d74109c:hover{background-color:var(--plasma-number-input_background-color-hover);box-shadow:inset 0 0 0 var(--plasma-number-input_input-wrapper_border-width) var(--plasma-number-input_border-color-hover);}
|
49
49
|
|
50
|
-
.
|
50
|
+
.base_1jt83uh_bpps6rw__e5ecf98f .base_1jt83uh_i1s8bsh6__e5ecf98f{border-radius:var(--plasma-number-input_input-wrapper_border-radius);}.base_1jt83uh_bpps6rw__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f{--plasma_private-segemntation-border-radius:var(--plasma-number-input_icon-button_radius);}.base_1jt83uh_bpps6rw__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_segmentedView__e5ecf98f,.base_1jt83uh_bpps6rw__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_solidView__e5ecf98f{--plasma_private-segemntation-border-radius:var(--plasma-number-input_icon-button_segmentation_radius,var(--plasma-number-input_icon-button_radius));}.base_1jt83uh_bpps6rw__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrement__e5ecf98f{border-radius:var(--plasma-number-input_icon-button_radius) var(--plasma_private-segemntation-border-radius) var(--plasma_private-segemntation-border-radius) var(--plasma-number-input_icon-button_radius);}.base_1jt83uh_bpps6rw__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrement__e5ecf98f{border-radius:var(--plasma_private-segemntation-border-radius) var(--plasma-number-input_icon-button_radius) var(--plasma-number-input_icon-button_radius) var(--plasma_private-segemntation-border-radius);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_segmentedView__e5ecf98f .base_1jt83uh_i1s8bsh6__e5ecf98f{border-radius:var(--plasma-number-input_icon-button_segmentation_radius);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f{position:relative;}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f:before{content:'';position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:calc(100% - var(--plasma-number-input_icon-button_width) * 2);height:100%;background:var(--plasma-number-input_background-color-solid);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_i1s8bsh6__e5ecf98f{position:relative;color:var(--plasma-number-input_color-solid);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_i1s8bsh6__e5ecf98f:not(error-animation).base_1jt83uh_manualInputNumberInput__e5ecf98f:focus-within{background-color:var(--plasma-number-input_background-color-solid-focus);box-shadow:inset 0 0 0 var(--plasma-number-input_input-wrapper_border-width) var(--plasma-number-input_border-color-solid-focus);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f:hover,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f:active{background-color:var(--plasma-number-input_icon-button_background-color);color:var(--plasma-number-input_icon-button_color_solid-hover);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f{opacity:1;}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f svg,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f svg{opacity:var(--plasma-number-input_action-button_disabled-opacity);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f:hover,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f:hover,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f:active,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f:active{color:var(--plasma-number-input_icon-button_color);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f:hover svg,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f:hover svg,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f:active svg,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f:active svg{opacity:var(--plasma-number-input_action-button_disabled-opacity);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f.base_1jt83uh_clearView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f:hover,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f.base_1jt83uh_clearView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f:hover,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f.base_1jt83uh_clearView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f:active,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f.base_1jt83uh_clearView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f:active{background-color:transparent;}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_s1ft73sv__e5ecf98f{--plasma-spinner-color:var(--plasma-number-input_loader-spinner_color-solid);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_i1tgbhg7__e5ecf98f{caret-color:var(--plasma-number-input_caret_color-solid,var(--plasma-number-input_caret_color));}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_i1tgbhg7__e5ecf98f:not(.base_1jt83uh_errorAnimation__e5ecf98f){color:var(--plasma-number-input_color-solid);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_az36kha__e5ecf98f{color:var(--plasma-number-input_additional-text_color-solid);}
|
51
51
|
|
52
52
|
.base_1sl0mh8_bmqk5v5__e93ebd2b.base_1sl0mh8_bmqk5v5__e93ebd2b.base_1sl0mh8_numberInputDisabled__e93ebd2b{pointer-events:none;opacity:var(--plasma-number-input_disabled-opacity);cursor:not-allowed;}
|
@@ -27,6 +27,7 @@ var tokens = {
|
|
27
27
|
disabledOpacity: '--plasma-number-input_disabled-opacity',
|
28
28
|
// Action button view tokens
|
29
29
|
iconButtonColor: '--plasma-number-input_icon-button_color',
|
30
|
+
iconButtonColorSolidHover: '--plasma-number-input_icon-button_color_solid-hover',
|
30
31
|
iconButtonBackgroundColor: '--plasma-number-input_icon-button_background-color',
|
31
32
|
iconButtonColorHover: '--plasma-number-input_icon-button_color-hover',
|
32
33
|
iconButtonBackgroundColorHover: '--plasma-number-input_icon-button_background-color-hover',
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"NumberInput.tokens.js","sources":["../../../src/components/NumberInput/NumberInput.tokens.ts"],"sourcesContent":["export const classes = {\n actionButtonDecrement: 'action-button-decrement',\n actionButtonDecrementDisabled: 'action-button-decrement-disabled',\n actionButtonIncrement: 'action-button-increment',\n actionButtonIncrementDisabled: 'action-button-increment-disabled',\n textBefore: 'text-before',\n textAfter: 'text-after',\n solidView: 'solid-view',\n segmentedView: 'segmented-view',\n clearView: 'clear-view',\n errorAnimation: 'error-animation',\n disabled: 'number-input-disabled',\n manualInput: 'manual-input-number-input',\n};\n\nexport const privateTokens = {\n inputWidth: '--plasma_private-number-input_width',\n segmentationBorderRadius: '--plasma_private-segemntation-border-radius',\n segmentationInputBorderRadius: '--plasma_private-segemntation_input_border-radius',\n};\n\nexport const tokens = {\n // Root size tokens\n rootMinWidth: '--plasma-number-input_min-width',\n disabledOpacity: '--plasma-number-input_disabled-opacity',\n\n // Action button view tokens\n iconButtonColor: '--plasma-number-input_icon-button_color',\n iconButtonBackgroundColor: '--plasma-number-input_icon-button_background-color',\n iconButtonColorHover: '--plasma-number-input_icon-button_color-hover',\n iconButtonBackgroundColorHover: '--plasma-number-input_icon-button_background-color-hover',\n iconButtonColorActive: '--plasma-number-input_icon-button_color-active',\n iconButtonBackgroundColorActive: '--plasma-number-input_icon-button_background-color-active',\n\n actionButtonDisabledOpacity: '--plasma-number-input_action-button_disabled-opacity',\n\n // Action button size tokens\n iconButtonHeight: '--plasma-number-input_icon-button_height',\n iconButtonWidth: '--plasma-number-input_icon-button_width',\n iconButtonPadding: '--plasma-number-input_icon-button_padding',\n iconButtonRadius: '--plasma-number-input_icon-button_radius',\n iconButtonSegmentationRadius: '--plasma-number-input_icon-button_segmentation_radius',\n iconButtonFontFamily: '--plasma-number-input_icon-button_font-family',\n iconButtonFontSize: '--plasma-number-input_icon-button_font-size',\n iconButtonFontStyle: '--plasma-number-input_icon-button_font-style',\n iconButtonFontWeight: '--plasma-number-input_icon-button_font-weight',\n iconButtonLetterSpacing: '--plasma-number-input_icon-button_letter-spacing',\n iconButtonLineHeight: '--plasma-number-input_icon-button_line-height',\n\n // Input size tokens\n inputWrapperBorderWidth: '--plasma-number-input_input-wrapper_border-width',\n inputWrapperMargin: '--plasma-number-input_input-wrapper_margin',\n inputWrapperBorderRadius: '--plasma-number-input_input-wrapper_border-radius',\n textWrapperHeight: '--plasma-number-input_text-wrapper_height',\n textWrapperPadding: '--plasma-number-input_text-wrapper_padding',\n\n fontFamily: '--plasma-number-input_font-family',\n fontStyle: '--plasma-number-input_font-style',\n fontSize: '--plasma-number-input_font-size',\n fontWeight: '--plasma-number-input_font-weight',\n letterSpacing: '--plasma-number-input_letter-spacing',\n lineHeight: '--plasma-number-input_line-height',\n\n textBeforeMarginRight: '--plasma-number-input_text-before_margin-right',\n textAfterMarginLeft: '--plasma-number-input_text-after_margin-left',\n\n // Input view tokens\n caretColor: '--plasma-number-input_caret_color',\n caretColorSolid: '--plasma-number-input_caret_color-solid',\n color: '--plasma-number-input_color',\n colorSolid: '--plasma-number-input_color-solid',\n backgroundColor: '--plasma-number-input_background-color',\n backgroundColorHover: '--plasma-number-input_background-color-hover',\n backgroundColorFocus: '--plasma-number-input_background-color-focus',\n backgroundColorSolidFocus: '--plasma-number-input_background-color-solid-focus',\n backgroundColorSolid: '--plasma-number-input_background-color-solid',\n borderColor: '--plasma-number-input_border-color',\n borderColorHover: '--plasma-number-input_border-color-hover',\n borderColorFocus: '--plasma-number-input_border-color-focus',\n borderColorSolidFocus: '--plasma-number-input_border-color-solid-focus',\n borderColorSolid: '--plasma-number-input_border-color-solid',\n additionalTextColor: '--plasma-number-input_additional-text_color',\n additionalTextColorSolid: '--plasma-number-input_additional-text_color-solid',\n\n errorColor: '--plasma-number-input_error-color',\n backgroundErrorColor: '--plasma-number-input_background_error-color',\n borderErrorColor: '--plasma-number-input_border_error-color',\n\n // Loader tokens\n loaderSpinnerSize: '--plasma-number-input_loader-spinner_size',\n loaderSpinnerColor: '--plasma-number-input_loader-spinner_color',\n loaderSpinnerColorSolid: '--plasma-number-input_loader-spinner_color-solid',\n};\n"],"names":["classes","actionButtonDecrement","actionButtonDecrementDisabled","actionButtonIncrement","actionButtonIncrementDisabled","textBefore","textAfter","solidView","segmentedView","clearView","errorAnimation","disabled","manualInput","privateTokens","inputWidth","segmentationBorderRadius","segmentationInputBorderRadius","tokens","rootMinWidth","disabledOpacity","iconButtonColor","iconButtonBackgroundColor","iconButtonColorHover","iconButtonBackgroundColorHover","iconButtonColorActive","iconButtonBackgroundColorActive","actionButtonDisabledOpacity","iconButtonHeight","iconButtonWidth","iconButtonPadding","iconButtonRadius","iconButtonSegmentationRadius","iconButtonFontFamily","iconButtonFontSize","iconButtonFontStyle","iconButtonFontWeight","iconButtonLetterSpacing","iconButtonLineHeight","inputWrapperBorderWidth","inputWrapperMargin","inputWrapperBorderRadius","textWrapperHeight","textWrapperPadding","fontFamily","fontStyle","fontSize","fontWeight","letterSpacing","lineHeight","textBeforeMarginRight","textAfterMarginLeft","caretColor","caretColorSolid","color","colorSolid","backgroundColor","backgroundColorHover","backgroundColorFocus","backgroundColorSolidFocus","backgroundColorSolid","borderColor","borderColorHover","borderColorFocus","borderColorSolidFocus","borderColorSolid","additionalTextColor","additionalTextColorSolid","errorColor","backgroundErrorColor","borderErrorColor","loaderSpinnerSize","loaderSpinnerColor","loaderSpinnerColorSolid"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"NumberInput.tokens.js","sources":["../../../src/components/NumberInput/NumberInput.tokens.ts"],"sourcesContent":["export const classes = {\n actionButtonDecrement: 'action-button-decrement',\n actionButtonDecrementDisabled: 'action-button-decrement-disabled',\n actionButtonIncrement: 'action-button-increment',\n actionButtonIncrementDisabled: 'action-button-increment-disabled',\n textBefore: 'text-before',\n textAfter: 'text-after',\n solidView: 'solid-view',\n segmentedView: 'segmented-view',\n clearView: 'clear-view',\n errorAnimation: 'error-animation',\n disabled: 'number-input-disabled',\n manualInput: 'manual-input-number-input',\n};\n\nexport const privateTokens = {\n inputWidth: '--plasma_private-number-input_width',\n segmentationBorderRadius: '--plasma_private-segemntation-border-radius',\n segmentationInputBorderRadius: '--plasma_private-segemntation_input_border-radius',\n};\n\nexport const tokens = {\n // Root size tokens\n rootMinWidth: '--plasma-number-input_min-width',\n disabledOpacity: '--plasma-number-input_disabled-opacity',\n\n // Action button view tokens\n iconButtonColor: '--plasma-number-input_icon-button_color',\n iconButtonColorSolidHover: '--plasma-number-input_icon-button_color_solid-hover',\n iconButtonBackgroundColor: '--plasma-number-input_icon-button_background-color',\n iconButtonColorHover: '--plasma-number-input_icon-button_color-hover',\n iconButtonBackgroundColorHover: '--plasma-number-input_icon-button_background-color-hover',\n iconButtonColorActive: '--plasma-number-input_icon-button_color-active',\n iconButtonBackgroundColorActive: '--plasma-number-input_icon-button_background-color-active',\n\n actionButtonDisabledOpacity: '--plasma-number-input_action-button_disabled-opacity',\n\n // Action button size tokens\n iconButtonHeight: '--plasma-number-input_icon-button_height',\n iconButtonWidth: '--plasma-number-input_icon-button_width',\n iconButtonPadding: '--plasma-number-input_icon-button_padding',\n iconButtonRadius: '--plasma-number-input_icon-button_radius',\n iconButtonSegmentationRadius: '--plasma-number-input_icon-button_segmentation_radius',\n iconButtonFontFamily: '--plasma-number-input_icon-button_font-family',\n iconButtonFontSize: '--plasma-number-input_icon-button_font-size',\n iconButtonFontStyle: '--plasma-number-input_icon-button_font-style',\n iconButtonFontWeight: '--plasma-number-input_icon-button_font-weight',\n iconButtonLetterSpacing: '--plasma-number-input_icon-button_letter-spacing',\n iconButtonLineHeight: '--plasma-number-input_icon-button_line-height',\n\n // Input size tokens\n inputWrapperBorderWidth: '--plasma-number-input_input-wrapper_border-width',\n inputWrapperMargin: '--plasma-number-input_input-wrapper_margin',\n inputWrapperBorderRadius: '--plasma-number-input_input-wrapper_border-radius',\n textWrapperHeight: '--plasma-number-input_text-wrapper_height',\n textWrapperPadding: '--plasma-number-input_text-wrapper_padding',\n\n fontFamily: '--plasma-number-input_font-family',\n fontStyle: '--plasma-number-input_font-style',\n fontSize: '--plasma-number-input_font-size',\n fontWeight: '--plasma-number-input_font-weight',\n letterSpacing: '--plasma-number-input_letter-spacing',\n lineHeight: '--plasma-number-input_line-height',\n\n textBeforeMarginRight: '--plasma-number-input_text-before_margin-right',\n textAfterMarginLeft: '--plasma-number-input_text-after_margin-left',\n\n // Input view tokens\n caretColor: '--plasma-number-input_caret_color',\n caretColorSolid: '--plasma-number-input_caret_color-solid',\n color: '--plasma-number-input_color',\n colorSolid: '--plasma-number-input_color-solid',\n backgroundColor: '--plasma-number-input_background-color',\n backgroundColorHover: '--plasma-number-input_background-color-hover',\n backgroundColorFocus: '--plasma-number-input_background-color-focus',\n backgroundColorSolidFocus: '--plasma-number-input_background-color-solid-focus',\n backgroundColorSolid: '--plasma-number-input_background-color-solid',\n borderColor: '--plasma-number-input_border-color',\n borderColorHover: '--plasma-number-input_border-color-hover',\n borderColorFocus: '--plasma-number-input_border-color-focus',\n borderColorSolidFocus: '--plasma-number-input_border-color-solid-focus',\n borderColorSolid: '--plasma-number-input_border-color-solid',\n additionalTextColor: '--plasma-number-input_additional-text_color',\n additionalTextColorSolid: '--plasma-number-input_additional-text_color-solid',\n\n errorColor: '--plasma-number-input_error-color',\n backgroundErrorColor: '--plasma-number-input_background_error-color',\n borderErrorColor: '--plasma-number-input_border_error-color',\n\n // Loader tokens\n loaderSpinnerSize: '--plasma-number-input_loader-spinner_size',\n loaderSpinnerColor: '--plasma-number-input_loader-spinner_color',\n loaderSpinnerColorSolid: '--plasma-number-input_loader-spinner_color-solid',\n};\n"],"names":["classes","actionButtonDecrement","actionButtonDecrementDisabled","actionButtonIncrement","actionButtonIncrementDisabled","textBefore","textAfter","solidView","segmentedView","clearView","errorAnimation","disabled","manualInput","privateTokens","inputWidth","segmentationBorderRadius","segmentationInputBorderRadius","tokens","rootMinWidth","disabledOpacity","iconButtonColor","iconButtonColorSolidHover","iconButtonBackgroundColor","iconButtonColorHover","iconButtonBackgroundColorHover","iconButtonColorActive","iconButtonBackgroundColorActive","actionButtonDisabledOpacity","iconButtonHeight","iconButtonWidth","iconButtonPadding","iconButtonRadius","iconButtonSegmentationRadius","iconButtonFontFamily","iconButtonFontSize","iconButtonFontStyle","iconButtonFontWeight","iconButtonLetterSpacing","iconButtonLineHeight","inputWrapperBorderWidth","inputWrapperMargin","inputWrapperBorderRadius","textWrapperHeight","textWrapperPadding","fontFamily","fontStyle","fontSize","fontWeight","letterSpacing","lineHeight","textBeforeMarginRight","textAfterMarginLeft","caretColor","caretColorSolid","color","colorSolid","backgroundColor","backgroundColorHover","backgroundColorFocus","backgroundColorSolidFocus","backgroundColorSolid","borderColor","borderColorHover","borderColorFocus","borderColorSolidFocus","borderColorSolid","additionalTextColor","additionalTextColorSolid","errorColor","backgroundErrorColor","borderErrorColor","loaderSpinnerSize","loaderSpinnerColor","loaderSpinnerColorSolid"],"mappings":"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"}
|
@@ -77,6 +77,27 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
77
77
|
onChange(event, newValue);
|
78
78
|
}
|
79
79
|
};
|
80
|
+
var validateValue = function validateValue(newValue) {
|
81
|
+
console.log(newValue);
|
82
|
+
if (!newValue || !isNumber.isNumber(newValue)) {
|
83
|
+
setValues(null, lastValidValue);
|
84
|
+
return;
|
85
|
+
}
|
86
|
+
if (String(newValue).endsWith('.')) {
|
87
|
+
setValues(null, Number(newValue));
|
88
|
+
return;
|
89
|
+
}
|
90
|
+
var resValue = Number(newValue);
|
91
|
+
if (max && resValue > max) {
|
92
|
+
setErrorClass(NumberInput_tokens.classes.errorAnimation);
|
93
|
+
setErrorValue(max);
|
94
|
+
return;
|
95
|
+
}
|
96
|
+
if (min && resValue < min) {
|
97
|
+
setErrorClass(NumberInput_tokens.classes.errorAnimation);
|
98
|
+
setErrorValue(min);
|
99
|
+
}
|
100
|
+
};
|
80
101
|
var handleManualInputChange = function handleManualInputChange(event) {
|
81
102
|
var _textWrapperRef$curre, _wrapperRef$current;
|
82
103
|
if (!isManualInput || disabled) {
|
@@ -103,21 +124,10 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
103
124
|
setValues(event, lastValidValue);
|
104
125
|
return;
|
105
126
|
}
|
106
|
-
var resValue = Number(cleanValue);
|
107
|
-
if (max && resValue > max) {
|
108
|
-
setErrorClass(NumberInput_tokens.classes.errorAnimation);
|
109
|
-
setErrorValue(max);
|
110
|
-
return;
|
111
|
-
}
|
112
|
-
if (min && resValue < min) {
|
113
|
-
setErrorClass(NumberInput_tokens.classes.errorAnimation);
|
114
|
-
setErrorValue(min);
|
115
|
-
return;
|
116
|
-
}
|
117
127
|
if (textWrapperRef !== null && textWrapperRef !== void 0 && textWrapperRef.current && wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current && (textWrapperRef === null || textWrapperRef === void 0 || (_textWrapperRef$curre = textWrapperRef.current) === null || _textWrapperRef$curre === void 0 ? void 0 : _textWrapperRef$curre.clientWidth) > (wrapperRef === null || wrapperRef === void 0 || (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.clientWidth)) {
|
118
128
|
wrapperRef.current.scrollLeft = textWrapperRef.current.offsetWidth - textWrapperRef.current.offsetLeft || 0;
|
119
129
|
}
|
120
|
-
setValues(event,
|
130
|
+
setValues(event, Number(cleanValue));
|
121
131
|
};
|
122
132
|
var handleClickInputWrapper = function handleClickInputWrapper() {
|
123
133
|
if (!isManualInput || !inputRef.current) {
|
@@ -130,11 +140,7 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
130
140
|
};
|
131
141
|
var handleBlur = function handleBlur(event) {
|
132
142
|
setIsEditing(false);
|
133
|
-
|
134
|
-
setValues(null, lastValidValue);
|
135
|
-
} else if (String(value).endsWith('.')) {
|
136
|
-
setValues(null, Number(value));
|
137
|
-
}
|
143
|
+
validateValue(value);
|
138
144
|
if (onBlur) {
|
139
145
|
onBlur(event);
|
140
146
|
}
|
@@ -145,11 +151,7 @@ var NumberInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
145
151
|
}
|
146
152
|
if (event.keyCode === constants.keyCodes.Enter) {
|
147
153
|
event.preventDefault();
|
148
|
-
|
149
|
-
setValues(null, lastValidValue);
|
150
|
-
} else if (String(value).endsWith('.')) {
|
151
|
-
setValues(null, Number(value));
|
152
|
-
}
|
154
|
+
validateValue(value);
|
153
155
|
if (onKeyDown) {
|
154
156
|
onKeyDown(event);
|
155
157
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../../../src/components/NumberInput/ui/Input/Input.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent, ChangeEvent, FocusEvent } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { classes } from '../../NumberInput.tokens';\nimport { cx, isNumber } from '../../../../utils';\nimport { useDidMountEffect } from '../../../../hooks';\nimport { numberPettern } from '../../utils';\nimport { keyCodes } from '../../../../utils/constants';\n\nimport type { InputProps } from './Input.types';\nimport {\n AdditionalText,\n Input,\n InputWrapper,\n DynamicInput,\n InputWidthHelper,\n TextWrapper,\n StyledSpinner,\n Loader,\n} from './Input.styles';\n\nexport const NumberInput = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n value,\n min,\n max,\n isLoading,\n loader,\n disabled,\n segmentation,\n textBefore,\n textAfter,\n isManualInput,\n setInnerValue,\n onChange,\n onBlur,\n onKeyDown,\n ...rest\n },\n ref,\n ) => {\n const [dynamicWidth, setDynamicWidth] = useState(value ? `${String(value).length}ch` : '1ch');\n const [lastValidValue, setLastValidValue] = useState(Number(value));\n const [errorClass, setErrorClass] = useState<string | undefined>(undefined);\n const [errorValue, setErrorValue] = useState<number>();\n const [isEditing, setIsEditing] = useState(false);\n\n const inputHelperRef = useRef<HTMLSpanElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const textWrapperRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const inputForkRef = useForkRef(inputRef, ref);\n\n const solidViewClass = segmentation === 'solid' ? classes.solidView : undefined;\n const manualInputClass = isManualInput ? classes.manualInput : undefined;\n\n const getInputWidth = (firstRender = true) => {\n if (!firstRender && inputHelperRef.current?.clientWidth) {\n return `${inputHelperRef.current?.clientWidth}px`;\n }\n\n if (value) {\n return `${String(value).length}ch`;\n }\n\n return '1ch';\n };\n\n const setValues = (event: ChangeEvent<HTMLInputElement> | null, newValue: number) => {\n setLastValidValue(newValue);\n setInnerValue(newValue);\n\n if (onChange) {\n onChange(event, newValue);\n }\n };\n\n const handleManualInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (!isManualInput || disabled) {\n return;\n }\n\n const { value: newValue } = event.target;\n\n if (!newValue) {\n setInnerValue('');\n\n if (onChange) {\n onChange(event, '');\n }\n return;\n }\n\n const cleanValue = newValue.replace(/[^-.\\d]/g, '');\n if (cleanValue.endsWith('.')) {\n setInnerValue(cleanValue);\n\n if (onChange) {\n onChange(event, cleanValue);\n }\n return;\n }\n\n const isValid = numberPettern.test(cleanValue);\n\n if (!isValid) {\n setValues(event, lastValidValue);\n return;\n }\n\n const resValue = Number(cleanValue);\n if (max && resValue > max) {\n setErrorClass(classes.errorAnimation);\n setErrorValue(max);\n return;\n }\n\n if (min && resValue < min) {\n setErrorClass(classes.errorAnimation);\n setErrorValue(min);\n return;\n }\n\n if (\n textWrapperRef?.current &&\n wrapperRef?.current &&\n textWrapperRef?.current?.clientWidth > wrapperRef?.current?.clientWidth\n ) {\n wrapperRef.current.scrollLeft =\n textWrapperRef.current.offsetWidth - textWrapperRef.current.offsetLeft || 0;\n }\n\n setValues(event, resValue);\n };\n\n const handleClickInputWrapper = () => {\n if (!isManualInput || !inputRef.current) {\n return;\n }\n\n if (!isEditing) {\n inputRef.current.select();\n }\n\n setIsEditing(true);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n setIsEditing(false);\n\n if (!value || !isNumber(value)) {\n setValues(null, lastValidValue);\n } else if (String(value).endsWith('.')) {\n setValues(null, Number(value));\n }\n\n if (onBlur) {\n onBlur(event);\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (!isManualInput || disabled) {\n return;\n }\n\n if (event.keyCode === keyCodes.Enter) {\n event.preventDefault();\n\n if (!value || !isNumber(value)) {\n setValues(null, lastValidValue);\n } else if (String(value).endsWith('.')) {\n setValues(null, Number(value));\n }\n\n if (onKeyDown) {\n onKeyDown(event);\n }\n }\n };\n\n const handleEndErrorAnimation = (correctValue: number) => {\n setErrorClass(undefined);\n setValues(null, correctValue);\n };\n\n useEffect(() => {\n setDynamicWidth(getInputWidth());\n }, []);\n\n useDidMountEffect(() => {\n setDynamicWidth(getInputWidth(false));\n }, [value]);\n\n return (\n <InputWrapper\n ref={wrapperRef}\n className={cx(solidViewClass, errorClass, manualInputClass)}\n isManualInput={Boolean(isManualInput)}\n onClick={handleClickInputWrapper}\n >\n <TextWrapper ref={textWrapperRef}>\n {textBefore && <AdditionalText className={classes.textBefore}>{textBefore}</AdditionalText>}\n {isLoading ? (\n <Loader>{loader || <StyledSpinner />}</Loader>\n ) : (\n <DynamicInput>\n <Input\n ref={inputForkRef}\n dynamicWidth={dynamicWidth}\n value={value}\n isManualInput={Boolean(isManualInput)}\n tabIndex={disabled || !isManualInput ? -1 : 0}\n onChange={handleManualInputChange}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n onAnimationEnd={() => handleEndErrorAnimation(Number(errorValue))}\n {...rest}\n />\n <InputWidthHelper ref={inputHelperRef}>{value}</InputWidthHelper>\n </DynamicInput>\n )}\n {textAfter && <AdditionalText className={classes.textAfter}>{textAfter}</AdditionalText>}\n </TextWrapper>\n </InputWrapper>\n );\n },\n);\n"],"names":["NumberInput","forwardRef","_ref","ref","value","min","max","isLoading","loader","disabled","segmentation","textBefore","textAfter","isManualInput","setInnerValue","onChange","onBlur","onKeyDown","rest","_objectWithoutProperties","_excluded","_useState","useState","concat","String","length","_useState2","_slicedToArray","dynamicWidth","setDynamicWidth","_useState3","Number","_useState4","lastValidValue","setLastValidValue","_useState5","undefined","_useState6","errorClass","setErrorClass","_useState7","_useState8","errorValue","setErrorValue","_useState9","_useState10","isEditing","setIsEditing","inputHelperRef","useRef","wrapperRef","textWrapperRef","inputRef","inputForkRef","useForkRef","solidViewClass","classes","solidView","manualInputClass","manualInput","getInputWidth","_inputHelperRef$curre","firstRender","arguments","current","clientWidth","_inputHelperRef$curre2","setValues","event","newValue","handleManualInputChange","_textWrapperRef$curre","_wrapperRef$current","target","cleanValue","replace","endsWith","isValid","numberPettern","test","resValue","errorAnimation","scrollLeft","offsetWidth","offsetLeft","handleClickInputWrapper","select","handleBlur","isNumber","handleKeyDown","keyCode","keyCodes","Enter","preventDefault","handleEndErrorAnimation","correctValue","useEffect","useDidMountEffect","React","createElement","InputWrapper","className","cx","Boolean","onClick","TextWrapper","AdditionalText","Loader","_StyledSpinner","StyledSpinner","DynamicInput","Input","_extends","tabIndex","onAnimationEnd","InputWidthHelper"],"mappings":"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"}
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../../../src/components/NumberInput/ui/Input/Input.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from 'react';\nimport type { KeyboardEvent, ChangeEvent, FocusEvent } from 'react';\nimport { useForkRef } from '@salutejs/plasma-core';\n\nimport { classes } from '../../NumberInput.tokens';\nimport { cx, isNumber } from '../../../../utils';\nimport { useDidMountEffect } from '../../../../hooks';\nimport { numberPettern } from '../../utils';\nimport { keyCodes } from '../../../../utils/constants';\n\nimport type { InputProps } from './Input.types';\nimport {\n AdditionalText,\n Input,\n InputWrapper,\n DynamicInput,\n InputWidthHelper,\n TextWrapper,\n StyledSpinner,\n Loader,\n} from './Input.styles';\n\nexport const NumberInput = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n value,\n min,\n max,\n isLoading,\n loader,\n disabled,\n segmentation,\n textBefore,\n textAfter,\n isManualInput,\n setInnerValue,\n onChange,\n onBlur,\n onKeyDown,\n ...rest\n },\n ref,\n ) => {\n const [dynamicWidth, setDynamicWidth] = useState(value ? `${String(value).length}ch` : '1ch');\n const [lastValidValue, setLastValidValue] = useState(Number(value));\n const [errorClass, setErrorClass] = useState<string | undefined>(undefined);\n const [errorValue, setErrorValue] = useState<number>();\n const [isEditing, setIsEditing] = useState(false);\n\n const inputHelperRef = useRef<HTMLSpanElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const textWrapperRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const inputForkRef = useForkRef(inputRef, ref);\n\n const solidViewClass = segmentation === 'solid' ? classes.solidView : undefined;\n const manualInputClass = isManualInput ? classes.manualInput : undefined;\n\n const getInputWidth = (firstRender = true) => {\n if (!firstRender && inputHelperRef.current?.clientWidth) {\n return `${inputHelperRef.current?.clientWidth}px`;\n }\n\n if (value) {\n return `${String(value).length}ch`;\n }\n\n return '1ch';\n };\n\n const setValues = (event: ChangeEvent<HTMLInputElement> | null, newValue: number) => {\n setLastValidValue(newValue);\n setInnerValue(newValue);\n\n if (onChange) {\n onChange(event, newValue);\n }\n };\n\n const validateValue = (newValue: number | string) => {\n console.log(newValue);\n if (!newValue || !isNumber(newValue)) {\n setValues(null, lastValidValue);\n return;\n }\n\n if (String(newValue).endsWith('.')) {\n setValues(null, Number(newValue));\n return;\n }\n\n const resValue = Number(newValue);\n if (max && resValue > max) {\n setErrorClass(classes.errorAnimation);\n setErrorValue(max);\n return;\n }\n\n if (min && resValue < min) {\n setErrorClass(classes.errorAnimation);\n setErrorValue(min);\n }\n };\n\n const handleManualInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n if (!isManualInput || disabled) {\n return;\n }\n\n const { value: newValue } = event.target;\n\n if (!newValue) {\n setInnerValue('');\n\n if (onChange) {\n onChange(event, '');\n }\n return;\n }\n\n const cleanValue = newValue.replace(/[^-.\\d]/g, '');\n if (cleanValue.endsWith('.')) {\n setInnerValue(cleanValue);\n\n if (onChange) {\n onChange(event, cleanValue);\n }\n return;\n }\n\n const isValid = numberPettern.test(cleanValue);\n\n if (!isValid) {\n setValues(event, lastValidValue);\n return;\n }\n\n if (\n textWrapperRef?.current &&\n wrapperRef?.current &&\n textWrapperRef?.current?.clientWidth > wrapperRef?.current?.clientWidth\n ) {\n wrapperRef.current.scrollLeft =\n textWrapperRef.current.offsetWidth - textWrapperRef.current.offsetLeft || 0;\n }\n\n setValues(event, Number(cleanValue));\n };\n\n const handleClickInputWrapper = () => {\n if (!isManualInput || !inputRef.current) {\n return;\n }\n\n if (!isEditing) {\n inputRef.current.select();\n }\n\n setIsEditing(true);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n setIsEditing(false);\n validateValue(value);\n\n if (onBlur) {\n onBlur(event);\n }\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n if (!isManualInput || disabled) {\n return;\n }\n\n if (event.keyCode === keyCodes.Enter) {\n event.preventDefault();\n\n validateValue(value);\n\n if (onKeyDown) {\n onKeyDown(event);\n }\n }\n };\n\n const handleEndErrorAnimation = (correctValue: number) => {\n setErrorClass(undefined);\n setValues(null, correctValue);\n };\n\n useEffect(() => {\n setDynamicWidth(getInputWidth());\n }, []);\n\n useDidMountEffect(() => {\n setDynamicWidth(getInputWidth(false));\n }, [value]);\n\n return (\n <InputWrapper\n ref={wrapperRef}\n className={cx(solidViewClass, errorClass, manualInputClass)}\n isManualInput={Boolean(isManualInput)}\n onClick={handleClickInputWrapper}\n >\n <TextWrapper ref={textWrapperRef}>\n {textBefore && <AdditionalText className={classes.textBefore}>{textBefore}</AdditionalText>}\n {isLoading ? (\n <Loader>{loader || <StyledSpinner />}</Loader>\n ) : (\n <DynamicInput>\n <Input\n ref={inputForkRef}\n dynamicWidth={dynamicWidth}\n value={value}\n isManualInput={Boolean(isManualInput)}\n tabIndex={disabled || !isManualInput ? -1 : 0}\n onChange={handleManualInputChange}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n onAnimationEnd={() => handleEndErrorAnimation(Number(errorValue))}\n {...rest}\n />\n <InputWidthHelper ref={inputHelperRef}>{value}</InputWidthHelper>\n </DynamicInput>\n )}\n {textAfter && <AdditionalText className={classes.textAfter}>{textAfter}</AdditionalText>}\n </TextWrapper>\n </InputWrapper>\n );\n },\n);\n"],"names":["NumberInput","forwardRef","_ref","ref","value","min","max","isLoading","loader","disabled","segmentation","textBefore","textAfter","isManualInput","setInnerValue","onChange","onBlur","onKeyDown","rest","_objectWithoutProperties","_excluded","_useState","useState","concat","String","length","_useState2","_slicedToArray","dynamicWidth","setDynamicWidth","_useState3","Number","_useState4","lastValidValue","setLastValidValue","_useState5","undefined","_useState6","errorClass","setErrorClass","_useState7","_useState8","errorValue","setErrorValue","_useState9","_useState10","isEditing","setIsEditing","inputHelperRef","useRef","wrapperRef","textWrapperRef","inputRef","inputForkRef","useForkRef","solidViewClass","classes","solidView","manualInputClass","manualInput","getInputWidth","_inputHelperRef$curre","firstRender","arguments","current","clientWidth","_inputHelperRef$curre2","setValues","event","newValue","validateValue","console","log","isNumber","endsWith","resValue","errorAnimation","handleManualInputChange","_textWrapperRef$curre","_wrapperRef$current","target","cleanValue","replace","isValid","numberPettern","test","scrollLeft","offsetWidth","offsetLeft","handleClickInputWrapper","select","handleBlur","handleKeyDown","keyCode","keyCodes","Enter","preventDefault","handleEndErrorAnimation","correctValue","useEffect","useDidMountEffect","React","createElement","InputWrapper","className","cx","Boolean","onClick","TextWrapper","AdditionalText","Loader","_StyledSpinner","StyledSpinner","DynamicInput","Input","_extends","tabIndex","onAnimationEnd","InputWidthHelper"],"mappings":";;;;;;;;;;;;;;;;;AAsBO,IAAMA,WAAW,gBAAGC,gBAAU,CACjC,UAAAC,IAAA,EAkBIC,GAAG,EACF;AAAA,EAAA,IAjBGC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,GAAG,GAAAH,IAAA,CAAHG,GAAG;IACHC,GAAG,GAAAJ,IAAA,CAAHI,GAAG;IACHC,SAAS,GAAAL,IAAA,CAATK,SAAS;IACTC,MAAM,GAAAN,IAAA,CAANM,MAAM;IACNC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACRC,YAAY,GAAAR,IAAA,CAAZQ,YAAY;IACZC,UAAU,GAAAT,IAAA,CAAVS,UAAU;IACVC,SAAS,GAAAV,IAAA,CAATU,SAAS;IACTC,aAAa,GAAAX,IAAA,CAAbW,aAAa;IACbC,aAAa,GAAAZ,IAAA,CAAbY,aAAa;IACbC,QAAQ,GAAAb,IAAA,CAARa,QAAQ;IACRC,MAAM,GAAAd,IAAA,CAANc,MAAM;IACNC,SAAS,GAAAf,IAAA,CAATe,SAAS;AACNC,IAAAA,IAAI,GAAAC,iDAAA,CAAAjB,IAAA,EAAAkB,SAAA,CAAA,CAAA;AAIX,EAAA,IAAAC,SAAA,GAAwCC,cAAQ,CAAClB,KAAK,MAAAmB,MAAA,CAAMC,MAAM,CAACpB,KAAK,CAAC,CAACqB,MAAM,EAAA,IAAA,CAAA,GAAO,KAAK,CAAC;IAAAC,UAAA,GAAAC,uCAAA,CAAAN,SAAA,EAAA,CAAA,CAAA;AAAtFO,IAAAA,YAAY,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,eAAe,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;EACpC,IAAAI,UAAA,GAA4CR,cAAQ,CAACS,MAAM,CAAC3B,KAAK,CAAC,CAAC;IAAA4B,UAAA,GAAAL,uCAAA,CAAAG,UAAA,EAAA,CAAA,CAAA;AAA5DG,IAAAA,cAAc,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,iBAAiB,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AACxC,EAAA,IAAAG,UAAA,GAAoCb,cAAQ,CAAqBc,SAAS,CAAC;IAAAC,UAAA,GAAAV,uCAAA,CAAAQ,UAAA,EAAA,CAAA,CAAA;AAApEG,IAAAA,UAAU,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,aAAa,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AAChC,EAAA,IAAAG,UAAA,GAAoClB,cAAQ,EAAU;IAAAmB,UAAA,GAAAd,uCAAA,CAAAa,UAAA,EAAA,CAAA,CAAA;AAA/CE,IAAAA,UAAU,GAAAD,UAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,aAAa,GAAAF,UAAA,CAAA,CAAA,CAAA,CAAA;AAChC,EAAA,IAAAG,UAAA,GAAkCtB,cAAQ,CAAC,KAAK,CAAC;IAAAuB,WAAA,GAAAlB,uCAAA,CAAAiB,UAAA,EAAA,CAAA,CAAA;AAA1CE,IAAAA,SAAS,GAAAD,WAAA,CAAA,CAAA,CAAA;AAAEE,IAAAA,YAAY,GAAAF,WAAA,CAAA,CAAA,CAAA,CAAA;AAE9B,EAAA,IAAMG,cAAc,GAAGC,YAAM,CAAkB,IAAI,CAAC,CAAA;AACpD,EAAA,IAAMC,UAAU,GAAGD,YAAM,CAAiB,IAAI,CAAC,CAAA;AAC/C,EAAA,IAAME,cAAc,GAAGF,YAAM,CAAiB,IAAI,CAAC,CAAA;AACnD,EAAA,IAAMG,QAAQ,GAAGH,YAAM,CAAmB,IAAI,CAAC,CAAA;AAC/C,EAAA,IAAMI,YAAY,GAAGC,qBAAU,CAACF,QAAQ,EAAEjD,GAAG,CAAC,CAAA;EAE9C,IAAMoD,cAAc,GAAG7C,YAAY,KAAK,OAAO,GAAG8C,0BAAO,CAACC,SAAS,GAAGrB,SAAS,CAAA;EAC/E,IAAMsB,gBAAgB,GAAG7C,aAAa,GAAG2C,0BAAO,CAACG,WAAW,GAAGvB,SAAS,CAAA;AAExE,EAAA,IAAMwB,aAAa,GAAG,SAAhBA,aAAaA,GAA2B;AAAA,IAAA,IAAAC,qBAAA,CAAA;AAAA,IAAA,IAAvBC,WAAW,GAAAC,SAAA,CAAAtC,MAAA,GAAA,CAAA,IAAAsC,SAAA,CAAA,CAAA,CAAA,KAAA3B,SAAA,GAAA2B,SAAA,CAAA,CAAA,CAAA,GAAG,IAAI,CAAA;AACrC,IAAA,IAAI,CAACD,WAAW,IAAAD,CAAAA,qBAAA,GAAIb,cAAc,CAACgB,OAAO,MAAA,IAAA,IAAAH,qBAAA,KAAA,KAAA,CAAA,IAAtBA,qBAAA,CAAwBI,WAAW,EAAE;AAAA,MAAA,IAAAC,sBAAA,CAAA;AACrD,MAAA,OAAA,EAAA,CAAA3C,MAAA,CAAA,CAAA2C,sBAAA,GAAUlB,cAAc,CAACgB,OAAO,MAAA,IAAA,IAAAE,sBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAtBA,sBAAA,CAAwBD,WAAW,EAAA,IAAA,CAAA,CAAA;AACjD,KAAA;AAEA,IAAA,IAAI7D,KAAK,EAAE;AACP,MAAA,OAAA,EAAA,CAAAmB,MAAA,CAAUC,MAAM,CAACpB,KAAK,CAAC,CAACqB,MAAM,EAAA,IAAA,CAAA,CAAA;AAClC,KAAA;AAEA,IAAA,OAAO,KAAK,CAAA;GACf,CAAA;EAED,IAAM0C,SAAS,GAAG,SAAZA,SAASA,CAAIC,KAA2C,EAAEC,QAAgB,EAAK;IACjFnC,iBAAiB,CAACmC,QAAQ,CAAC,CAAA;IAC3BvD,aAAa,CAACuD,QAAQ,CAAC,CAAA;AAEvB,IAAA,IAAItD,QAAQ,EAAE;AACVA,MAAAA,QAAQ,CAACqD,KAAK,EAAEC,QAAQ,CAAC,CAAA;AAC7B,KAAA;GACH,CAAA;AAED,EAAA,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAID,QAAyB,EAAK;AACjDE,IAAAA,OAAO,CAACC,GAAG,CAACH,QAAQ,CAAC,CAAA;IACrB,IAAI,CAACA,QAAQ,IAAI,CAACI,iBAAQ,CAACJ,QAAQ,CAAC,EAAE;AAClCF,MAAAA,SAAS,CAAC,IAAI,EAAElC,cAAc,CAAC,CAAA;AAC/B,MAAA,OAAA;AACJ,KAAA;IAEA,IAAIT,MAAM,CAAC6C,QAAQ,CAAC,CAACK,QAAQ,CAAC,GAAG,CAAC,EAAE;AAChCP,MAAAA,SAAS,CAAC,IAAI,EAAEpC,MAAM,CAACsC,QAAQ,CAAC,CAAC,CAAA;AACjC,MAAA,OAAA;AACJ,KAAA;AAEA,IAAA,IAAMM,QAAQ,GAAG5C,MAAM,CAACsC,QAAQ,CAAC,CAAA;AACjC,IAAA,IAAI/D,GAAG,IAAIqE,QAAQ,GAAGrE,GAAG,EAAE;AACvBiC,MAAAA,aAAa,CAACiB,0BAAO,CAACoB,cAAc,CAAC,CAAA;MACrCjC,aAAa,CAACrC,GAAG,CAAC,CAAA;AAClB,MAAA,OAAA;AACJ,KAAA;AAEA,IAAA,IAAID,GAAG,IAAIsE,QAAQ,GAAGtE,GAAG,EAAE;AACvBkC,MAAAA,aAAa,CAACiB,0BAAO,CAACoB,cAAc,CAAC,CAAA;MACrCjC,aAAa,CAACtC,GAAG,CAAC,CAAA;AACtB,KAAA;GACH,CAAA;AAED,EAAA,IAAMwE,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAIT,KAAoC,EAAK;IAAA,IAAAU,qBAAA,EAAAC,mBAAA,CAAA;AACtE,IAAA,IAAI,CAAClE,aAAa,IAAIJ,QAAQ,EAAE;AAC5B,MAAA,OAAA;AACJ,KAAA;AAEA,IAAA,IAAe4D,QAAQ,GAAKD,KAAK,CAACY,MAAM,CAAhC5E,KAAK,CAAA;IAEb,IAAI,CAACiE,QAAQ,EAAE;MACXvD,aAAa,CAAC,EAAE,CAAC,CAAA;AAEjB,MAAA,IAAIC,QAAQ,EAAE;AACVA,QAAAA,QAAQ,CAACqD,KAAK,EAAE,EAAE,CAAC,CAAA;AACvB,OAAA;AACA,MAAA,OAAA;AACJ,KAAA;IAEA,IAAMa,UAAU,GAAGZ,QAAQ,CAACa,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;AACnD,IAAA,IAAID,UAAU,CAACP,QAAQ,CAAC,GAAG,CAAC,EAAE;MAC1B5D,aAAa,CAACmE,UAAU,CAAC,CAAA;AAEzB,MAAA,IAAIlE,QAAQ,EAAE;AACVA,QAAAA,QAAQ,CAACqD,KAAK,EAAEa,UAAU,CAAC,CAAA;AAC/B,OAAA;AACA,MAAA,OAAA;AACJ,KAAA;AAEA,IAAA,IAAME,OAAO,GAAGC,qBAAa,CAACC,IAAI,CAACJ,UAAU,CAAC,CAAA;IAE9C,IAAI,CAACE,OAAO,EAAE;AACVhB,MAAAA,SAAS,CAACC,KAAK,EAAEnC,cAAc,CAAC,CAAA;AAChC,MAAA,OAAA;AACJ,KAAA;IAEA,IACIkB,cAAc,aAAdA,cAAc,KAAA,KAAA,CAAA,IAAdA,cAAc,CAAEa,OAAO,IACvBd,UAAU,KAAVA,IAAAA,IAAAA,UAAU,eAAVA,UAAU,CAAEc,OAAO,IACnB,CAAAb,cAAc,KAAdA,IAAAA,IAAAA,cAAc,KAAA2B,KAAAA,CAAAA,IAAAA,CAAAA,qBAAA,GAAd3B,cAAc,CAAEa,OAAO,MAAA,IAAA,IAAAc,qBAAA,KAAvBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,qBAAA,CAAyBb,WAAW,KAAGf,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAA,KAAA,CAAA,IAAA,CAAA6B,mBAAA,GAAV7B,UAAU,CAAEc,OAAO,MAAA,IAAA,IAAAe,mBAAA,KAAnBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,mBAAA,CAAqBd,WAAW,CACzE,EAAA;AACEf,MAAAA,UAAU,CAACc,OAAO,CAACsB,UAAU,GACzBnC,cAAc,CAACa,OAAO,CAACuB,WAAW,GAAGpC,cAAc,CAACa,OAAO,CAACwB,UAAU,IAAI,CAAC,CAAA;AACnF,KAAA;AAEArB,IAAAA,SAAS,CAACC,KAAK,EAAErC,MAAM,CAACkD,UAAU,CAAC,CAAC,CAAA;GACvC,CAAA;AAED,EAAA,IAAMQ,uBAAuB,GAAG,SAA1BA,uBAAuBA,GAAS;AAClC,IAAA,IAAI,CAAC5E,aAAa,IAAI,CAACuC,QAAQ,CAACY,OAAO,EAAE;AACrC,MAAA,OAAA;AACJ,KAAA;IAEA,IAAI,CAAClB,SAAS,EAAE;AACZM,MAAAA,QAAQ,CAACY,OAAO,CAAC0B,MAAM,EAAE,CAAA;AAC7B,KAAA;IAEA3C,YAAY,CAAC,IAAI,CAAC,CAAA;GACrB,CAAA;AAED,EAAA,IAAM4C,UAAU,GAAG,SAAbA,UAAUA,CAAIvB,KAAmC,EAAK;IACxDrB,YAAY,CAAC,KAAK,CAAC,CAAA;IACnBuB,aAAa,CAAClE,KAAK,CAAC,CAAA;AAEpB,IAAA,IAAIY,MAAM,EAAE;MACRA,MAAM,CAACoD,KAAK,CAAC,CAAA;AACjB,KAAA;GACH,CAAA;AAED,EAAA,IAAMwB,aAAa,GAAG,SAAhBA,aAAaA,CAAIxB,KAAsC,EAAK;AAC9D,IAAA,IAAI,CAACvD,aAAa,IAAIJ,QAAQ,EAAE;AAC5B,MAAA,OAAA;AACJ,KAAA;AAEA,IAAA,IAAI2D,KAAK,CAACyB,OAAO,KAAKC,kBAAQ,CAACC,KAAK,EAAE;MAClC3B,KAAK,CAAC4B,cAAc,EAAE,CAAA;MAEtB1B,aAAa,CAAClE,KAAK,CAAC,CAAA;AAEpB,MAAA,IAAIa,SAAS,EAAE;QACXA,SAAS,CAACmD,KAAK,CAAC,CAAA;AACpB,OAAA;AACJ,KAAA;GACH,CAAA;AAED,EAAA,IAAM6B,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAIC,YAAoB,EAAK;IACtD3D,aAAa,CAACH,SAAS,CAAC,CAAA;AACxB+B,IAAAA,SAAS,CAAC,IAAI,EAAE+B,YAAY,CAAC,CAAA;GAChC,CAAA;AAEDC,EAAAA,eAAS,CAAC,YAAM;AACZtE,IAAAA,eAAe,CAAC+B,aAAa,EAAE,CAAC,CAAA;GACnC,EAAE,EAAE,CAAC,CAAA;AAENwC,EAAAA,mCAAiB,CAAC,YAAM;AACpBvE,IAAAA,eAAe,CAAC+B,aAAa,CAAC,KAAK,CAAC,CAAC,CAAA;AACzC,GAAC,EAAE,CAACxD,KAAK,CAAC,CAAC,CAAA;AAEX,EAAA,oBACIiG,KAAA,CAAAC,aAAA,CAACC,yBAAY,EAAA;AACTpG,IAAAA,GAAG,EAAE+C,UAAW;IAChBsD,SAAS,EAAEC,QAAE,CAAClD,cAAc,EAAEjB,UAAU,EAAEoB,gBAAgB,CAAE;AAC5D7C,IAAAA,aAAa,EAAE6F,OAAO,CAAC7F,aAAa,CAAE;AACtC8F,IAAAA,OAAO,EAAElB,uBAAAA;AAAwB,GAAA,eAEjCY,KAAA,CAAAC,aAAA,CAACM,wBAAW,EAAA;AAACzG,IAAAA,GAAG,EAAEgD,cAAAA;AAAe,GAAA,EAC5BxC,UAAU,iBAAI0F,KAAA,CAAAC,aAAA,CAACO,2BAAc,EAAA;IAACL,SAAS,EAAEhD,0BAAO,CAAC7C,UAAAA;AAAW,GAAA,EAAEA,UAA2B,CAAC,EAC1FJ,SAAS,gBACN8F,KAAA,CAAAC,aAAA,CAACQ,mBAAM,QAAEtG,MAAM,IAAAuG,cAAA,KAAAA,cAAA,gBAAIV,KAAA,CAAAC,aAAA,CAACU,0BAAa,EAAE,IAAA,CAAC,CAAS,CAAC,gBAE9CX,KAAA,CAAAC,aAAA,CAACW,yBAAY,qBACTZ,KAAA,CAAAC,aAAA,CAACY,kBAAK,EAAAC,iCAAA,CAAA;AACFhH,IAAAA,GAAG,EAAEkD,YAAa;AAClBzB,IAAAA,YAAY,EAAEA,YAAa;AAC3BxB,IAAAA,KAAK,EAAEA,KAAM;AACbS,IAAAA,aAAa,EAAE6F,OAAO,CAAC7F,aAAa,CAAE;IACtCuG,QAAQ,EAAE3G,QAAQ,IAAI,CAACI,aAAa,GAAG,CAAC,CAAC,GAAG,CAAE;AAC9CE,IAAAA,QAAQ,EAAE8D,uBAAwB;AAClC7D,IAAAA,MAAM,EAAE2E,UAAW;AACnB1E,IAAAA,SAAS,EAAE2E,aAAc;IACzByB,cAAc,EAAE,SAAAA,cAAA,GAAA;AAAA,MAAA,OAAMpB,uBAAuB,CAAClE,MAAM,CAACW,UAAU,CAAC,CAAC,CAAA;AAAA,KAAA;GAC7DxB,EAAAA,IAAI,CACX,CAAC,eACFmF,KAAA,CAAAC,aAAA,CAACgB,6BAAgB,EAAA;AAACnH,IAAAA,GAAG,EAAE6C,cAAAA;GAAiB5C,EAAAA,KAAwB,CACtD,CACjB,EACAQ,SAAS,iBAAIyF,KAAA,CAAAC,aAAA,CAACO,2BAAc,EAAA;IAACL,SAAS,EAAEhD,0BAAO,CAAC5C,SAAAA;GAAYA,EAAAA,SAA0B,CAC9E,CACH,CAAC,CAAA;AAEvB,CACJ;;;;"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"base.js","sources":["../../../../../src/components/NumberInput/variations/_segmentation/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, privateTokens, tokens } from '../../NumberInput.tokens';\nimport { StyledIconButton } from '../../ui/ActionButton/ActionButton.styles';\nimport { AdditionalText, Input, InputWrapper, StyledSpinner } from '../../ui/Input/Input.styles';\nimport { spinnerTokens } from '../../../Spinner';\n\nexport const base = css`\n ${InputWrapper} {\n border-radius: var(${tokens.inputWrapperBorderRadius});\n }\n\n ${StyledIconButton} {\n ${privateTokens.segmentationBorderRadius}: var(${tokens.iconButtonRadius});\n\n &.${classes.segmentedView}, &.${classes.solidView} {\n ${privateTokens.segmentationBorderRadius}: var(${tokens.iconButtonSegmentationRadius}, var(${tokens.iconButtonRadius}));\n }\n\n &.${classes.actionButtonDecrement} {\n border-radius: var(${tokens.iconButtonRadius}) var(${privateTokens.segmentationBorderRadius}) var(${privateTokens.segmentationBorderRadius}) var(${tokens.iconButtonRadius});\n }\n\n &.${classes.actionButtonIncrement} {\n border-radius: var(${privateTokens.segmentationBorderRadius}) var(${tokens.iconButtonRadius}) var(${tokens.iconButtonRadius}) var(${privateTokens.segmentationBorderRadius});\n }\n }\n\n &.${classes.segmentedView} {\n ${InputWrapper} {\n border-radius: var(${tokens.iconButtonSegmentationRadius});\n }\n }\n\n &.${classes.solidView} {\n position: relative;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: calc(100% - var(${tokens.iconButtonWidth}) * 2);\n height: 100%;\n background: var(${tokens.backgroundColorSolid});\n }\n\n ${InputWrapper} {\n position: relative;\n color: var(${tokens.colorSolid});\n \n &:not(${classes.errorAnimation}).${classes.manualInput}:focus-within {\n background-color: var(${tokens.backgroundColorSolidFocus});\n box-shadow: inset 0 0 0 var(${tokens.inputWrapperBorderWidth}) var(${tokens.borderColorSolidFocus});\n }\n }\n\n
|
1
|
+
{"version":3,"file":"base.js","sources":["../../../../../src/components/NumberInput/variations/_segmentation/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, privateTokens, tokens } from '../../NumberInput.tokens';\nimport { StyledIconButton } from '../../ui/ActionButton/ActionButton.styles';\nimport { AdditionalText, Input, InputWrapper, StyledSpinner } from '../../ui/Input/Input.styles';\nimport { spinnerTokens } from '../../../Spinner';\n\nexport const base = css`\n ${InputWrapper} {\n border-radius: var(${tokens.inputWrapperBorderRadius});\n }\n\n ${StyledIconButton} {\n ${privateTokens.segmentationBorderRadius}: var(${tokens.iconButtonRadius});\n\n &.${classes.segmentedView}, &.${classes.solidView} {\n ${privateTokens.segmentationBorderRadius}: var(${tokens.iconButtonSegmentationRadius}, var(${tokens.iconButtonRadius}));\n }\n\n &.${classes.actionButtonDecrement} {\n border-radius: var(${tokens.iconButtonRadius}) var(${privateTokens.segmentationBorderRadius}) var(${privateTokens.segmentationBorderRadius}) var(${tokens.iconButtonRadius});\n }\n\n &.${classes.actionButtonIncrement} {\n border-radius: var(${privateTokens.segmentationBorderRadius}) var(${tokens.iconButtonRadius}) var(${tokens.iconButtonRadius}) var(${privateTokens.segmentationBorderRadius});\n }\n }\n\n &.${classes.segmentedView} {\n ${InputWrapper} {\n border-radius: var(${tokens.iconButtonSegmentationRadius});\n }\n }\n\n &.${classes.solidView} {\n position: relative;\n\n &:before {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: calc(100% - var(${tokens.iconButtonWidth}) * 2);\n height: 100%;\n background: var(${tokens.backgroundColorSolid});\n }\n\n ${InputWrapper} {\n position: relative;\n color: var(${tokens.colorSolid});\n \n &:not(${classes.errorAnimation}).${classes.manualInput}:focus-within {\n background-color: var(${tokens.backgroundColorSolidFocus});\n box-shadow: inset 0 0 0 var(${tokens.inputWrapperBorderWidth}) var(${tokens.borderColorSolidFocus});\n }\n }\n\n ${StyledIconButton} {\n :hover,\n :active { \n background-color: var(${tokens.iconButtonBackgroundColor});\n color: var(${tokens.iconButtonColorSolidHover});\n }\n\n &.${classes.actionButtonDecrementDisabled}, &.${classes.actionButtonIncrementDisabled} {\n opacity: 1;\n\n svg {\n opacity: var(${tokens.actionButtonDisabledOpacity});\n }\n\n :hover,\n :active {\n color: var(${tokens.iconButtonColor});\n\n svg {\n opacity: var(${tokens.actionButtonDisabledOpacity});\n }\n }\n }\n }\n\n &.${classes.clearView} {\n ${StyledIconButton} {\n &.${classes.actionButtonDecrementDisabled}, &.${classes.actionButtonIncrementDisabled} {\n :hover,\n :active {\n background-color: transparent;\n }\n }\n }\n }\n\n ${StyledSpinner} {\n ${spinnerTokens.color}: var(${tokens.loaderSpinnerColorSolid});\n }\n \n ${Input} {\n caret-color: var(${tokens.caretColorSolid}, var(${tokens.caretColor}));\n\n &:not(.${classes.errorAnimation}){\n color: var(${tokens.colorSolid});\n }\n }\n \n ${AdditionalText} {\n color: var(${tokens.additionalTextColorSolid});\n }\n }\n`;\n"],"names":["base"],"mappings":";;;;AAOO,IAAMA,IAAI,GAuGhB;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.bpps6rw .i1s8bsh6{border-radius:var(--plasma-number-input_input-wrapper_border-radius);}.bpps6rw .sj0ab1b{--plasma_private-segemntation-border-radius:var(--plasma-number-input_icon-button_radius);}.bpps6rw .sj0ab1b.segmented-view,.bpps6rw .sj0ab1b.solid-view{--plasma_private-segemntation-border-radius:var(--plasma-number-input_icon-button_segmentation_radius,var(--plasma-number-input_icon-button_radius));}.bpps6rw .sj0ab1b.action-button-decrement{border-radius:var(--plasma-number-input_icon-button_radius) var(--plasma_private-segemntation-border-radius) var(--plasma_private-segemntation-border-radius) var(--plasma-number-input_icon-button_radius);}.bpps6rw .sj0ab1b.action-button-increment{border-radius:var(--plasma_private-segemntation-border-radius) var(--plasma-number-input_icon-button_radius) var(--plasma-number-input_icon-button_radius) var(--plasma_private-segemntation-border-radius);}.bpps6rw.segmented-view .i1s8bsh6{border-radius:var(--plasma-number-input_icon-button_segmentation_radius);}.bpps6rw.solid-view{position:relative;}.bpps6rw.solid-view:before{content:'';position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:calc(100% - var(--plasma-number-input_icon-button_width) * 2);height:100%;background:var(--plasma-number-input_background-color-solid);}.bpps6rw.solid-view .i1s8bsh6{position:relative;color:var(--plasma-number-input_color-solid);}.bpps6rw.solid-view .i1s8bsh6:not(error-animation).manual-input-number-input:focus-within{background-color:var(--plasma-number-input_background-color-solid-focus);box-shadow:inset 0 0 0 var(--plasma-number-input_input-wrapper_border-width) var(--plasma-number-input_border-color-solid-focus);}.bpps6rw.solid-view .sj0ab1b:hover,.bpps6rw.solid-view .sj0ab1b:active{background-color:var(--plasma-number-input_icon-button_background-color);color:var(--plasma-number-input_icon-button_color_solid-hover);}.bpps6rw.solid-view .sj0ab1b.action-button-decrement-disabled,.bpps6rw.solid-view .sj0ab1b.action-button-increment-disabled{opacity:1;}.bpps6rw.solid-view .sj0ab1b.action-button-decrement-disabled svg,.bpps6rw.solid-view .sj0ab1b.action-button-increment-disabled svg{opacity:var(--plasma-number-input_action-button_disabled-opacity);}.bpps6rw.solid-view .sj0ab1b.action-button-decrement-disabled:hover,.bpps6rw.solid-view .sj0ab1b.action-button-increment-disabled:hover,.bpps6rw.solid-view .sj0ab1b.action-button-decrement-disabled:active,.bpps6rw.solid-view .sj0ab1b.action-button-increment-disabled:active{color:var(--plasma-number-input_icon-button_color);}.bpps6rw.solid-view .sj0ab1b.action-button-decrement-disabled:hover svg,.bpps6rw.solid-view .sj0ab1b.action-button-increment-disabled:hover svg,.bpps6rw.solid-view .sj0ab1b.action-button-decrement-disabled:active svg,.bpps6rw.solid-view .sj0ab1b.action-button-increment-disabled:active svg{opacity:var(--plasma-number-input_action-button_disabled-opacity);}.bpps6rw.solid-view.clear-view .sj0ab1b.action-button-decrement-disabled:hover,.bpps6rw.solid-view.clear-view .sj0ab1b.action-button-increment-disabled:hover,.bpps6rw.solid-view.clear-view .sj0ab1b.action-button-decrement-disabled:active,.bpps6rw.solid-view.clear-view .sj0ab1b.action-button-increment-disabled:active{background-color:transparent;}.bpps6rw.solid-view .s1ft73sv{--plasma-spinner-color:var(--plasma-number-input_loader-spinner_color-solid);}.bpps6rw.solid-view .i1tgbhg7{caret-color:var(--plasma-number-input_caret_color-solid,var(--plasma-number-input_caret_color));}.bpps6rw.solid-view .i1tgbhg7:not(.error-animation){color:var(--plasma-number-input_color-solid);}.bpps6rw.solid-view .az36kha{color:var(--plasma-number-input_additional-text_color-solid);}
|
package/cjs/index.css
CHANGED
@@ -824,6 +824,6 @@
|
|
824
824
|
|
825
825
|
.base_dx9knv_b15uqx38__1d74109c .base_dx9knv_i1s8bsh6__1d74109c{background-color:var(--plasma-number-input_background-color);box-shadow:inset 0 0 0 var(--plasma-number-input_input-wrapper_border-width) var(--plasma-number-input_border-color);}.base_dx9knv_b15uqx38__1d74109c .base_dx9knv_i1s8bsh6__1d74109c.base_dx9knv_manualInputNumberInput__1d74109c:hover{background-color:var(--plasma-number-input_background-color-hover);box-shadow:inset 0 0 0 var(--plasma-number-input_input-wrapper_border-width) var(--plasma-number-input_border-color-hover);}
|
826
826
|
|
827
|
-
.
|
827
|
+
.base_1jt83uh_bpps6rw__e5ecf98f .base_1jt83uh_i1s8bsh6__e5ecf98f{border-radius:var(--plasma-number-input_input-wrapper_border-radius);}.base_1jt83uh_bpps6rw__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f{--plasma_private-segemntation-border-radius:var(--plasma-number-input_icon-button_radius);}.base_1jt83uh_bpps6rw__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_segmentedView__e5ecf98f,.base_1jt83uh_bpps6rw__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_solidView__e5ecf98f{--plasma_private-segemntation-border-radius:var(--plasma-number-input_icon-button_segmentation_radius,var(--plasma-number-input_icon-button_radius));}.base_1jt83uh_bpps6rw__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrement__e5ecf98f{border-radius:var(--plasma-number-input_icon-button_radius) var(--plasma_private-segemntation-border-radius) var(--plasma_private-segemntation-border-radius) var(--plasma-number-input_icon-button_radius);}.base_1jt83uh_bpps6rw__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrement__e5ecf98f{border-radius:var(--plasma_private-segemntation-border-radius) var(--plasma-number-input_icon-button_radius) var(--plasma-number-input_icon-button_radius) var(--plasma_private-segemntation-border-radius);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_segmentedView__e5ecf98f .base_1jt83uh_i1s8bsh6__e5ecf98f{border-radius:var(--plasma-number-input_icon-button_segmentation_radius);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f{position:relative;}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f:before{content:'';position:absolute;top:0;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:calc(100% - var(--plasma-number-input_icon-button_width) * 2);height:100%;background:var(--plasma-number-input_background-color-solid);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_i1s8bsh6__e5ecf98f{position:relative;color:var(--plasma-number-input_color-solid);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_i1s8bsh6__e5ecf98f:not(error-animation).base_1jt83uh_manualInputNumberInput__e5ecf98f:focus-within{background-color:var(--plasma-number-input_background-color-solid-focus);box-shadow:inset 0 0 0 var(--plasma-number-input_input-wrapper_border-width) var(--plasma-number-input_border-color-solid-focus);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f:hover,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f:active{background-color:var(--plasma-number-input_icon-button_background-color);color:var(--plasma-number-input_icon-button_color_solid-hover);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f{opacity:1;}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f svg,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f svg{opacity:var(--plasma-number-input_action-button_disabled-opacity);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f:hover,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f:hover,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f:active,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f:active{color:var(--plasma-number-input_icon-button_color);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f:hover svg,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f:hover svg,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f:active svg,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f:active svg{opacity:var(--plasma-number-input_action-button_disabled-opacity);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f.base_1jt83uh_clearView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f:hover,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f.base_1jt83uh_clearView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f:hover,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f.base_1jt83uh_clearView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonDecrementDisabled__e5ecf98f:active,.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f.base_1jt83uh_clearView__e5ecf98f .base_1jt83uh_sj0ab1b__e5ecf98f.base_1jt83uh_actionButtonIncrementDisabled__e5ecf98f:active{background-color:transparent;}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_s1ft73sv__e5ecf98f{--plasma-spinner-color:var(--plasma-number-input_loader-spinner_color-solid);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_i1tgbhg7__e5ecf98f{caret-color:var(--plasma-number-input_caret_color-solid,var(--plasma-number-input_caret_color));}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_i1tgbhg7__e5ecf98f:not(.base_1jt83uh_errorAnimation__e5ecf98f){color:var(--plasma-number-input_color-solid);}.base_1jt83uh_bpps6rw__e5ecf98f.base_1jt83uh_solidView__e5ecf98f .base_1jt83uh_az36kha__e5ecf98f{color:var(--plasma-number-input_additional-text_color-solid);}
|
828
828
|
|
829
829
|
.base_1sl0mh8_bmqk5v5__e93ebd2b.base_1sl0mh8_bmqk5v5__e93ebd2b.base_1sl0mh8_numberInputDisabled__e93ebd2b{pointer-events:none;opacity:var(--plasma-number-input_disabled-opacity);cursor:not-allowed;}
|
@@ -29,6 +29,7 @@ var tokens = exports.tokens = {
|
|
29
29
|
disabledOpacity: '--plasma-number-input_disabled-opacity',
|
30
30
|
// Action button view tokens
|
31
31
|
iconButtonColor: '--plasma-number-input_icon-button_color',
|
32
|
+
iconButtonColorSolidHover: '--plasma-number-input_icon-button_color_solid-hover',
|
32
33
|
iconButtonBackgroundColor: '--plasma-number-input_icon-button_background-color',
|
33
34
|
iconButtonColorHover: '--plasma-number-input_icon-button_color-hover',
|
34
35
|
iconButtonBackgroundColorHover: '--plasma-number-input_icon-button_background-color-hover',
|
@@ -88,6 +88,27 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)(func
|
|
88
88
|
onChange(event, newValue);
|
89
89
|
}
|
90
90
|
};
|
91
|
+
var validateValue = function validateValue(newValue) {
|
92
|
+
console.log(newValue);
|
93
|
+
if (!newValue || !(0, _utils.isNumber)(newValue)) {
|
94
|
+
setValues(null, lastValidValue);
|
95
|
+
return;
|
96
|
+
}
|
97
|
+
if (String(newValue).endsWith('.')) {
|
98
|
+
setValues(null, Number(newValue));
|
99
|
+
return;
|
100
|
+
}
|
101
|
+
var resValue = Number(newValue);
|
102
|
+
if (max && resValue > max) {
|
103
|
+
setErrorClass(_NumberInput.classes.errorAnimation);
|
104
|
+
setErrorValue(max);
|
105
|
+
return;
|
106
|
+
}
|
107
|
+
if (min && resValue < min) {
|
108
|
+
setErrorClass(_NumberInput.classes.errorAnimation);
|
109
|
+
setErrorValue(min);
|
110
|
+
}
|
111
|
+
};
|
91
112
|
var handleManualInputChange = function handleManualInputChange(event) {
|
92
113
|
var _textWrapperRef$curre, _wrapperRef$current;
|
93
114
|
if (!isManualInput || disabled) {
|
@@ -114,21 +135,10 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)(func
|
|
114
135
|
setValues(event, lastValidValue);
|
115
136
|
return;
|
116
137
|
}
|
117
|
-
var resValue = Number(cleanValue);
|
118
|
-
if (max && resValue > max) {
|
119
|
-
setErrorClass(_NumberInput.classes.errorAnimation);
|
120
|
-
setErrorValue(max);
|
121
|
-
return;
|
122
|
-
}
|
123
|
-
if (min && resValue < min) {
|
124
|
-
setErrorClass(_NumberInput.classes.errorAnimation);
|
125
|
-
setErrorValue(min);
|
126
|
-
return;
|
127
|
-
}
|
128
138
|
if (textWrapperRef !== null && textWrapperRef !== void 0 && textWrapperRef.current && wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current && (textWrapperRef === null || textWrapperRef === void 0 || (_textWrapperRef$curre = textWrapperRef.current) === null || _textWrapperRef$curre === void 0 ? void 0 : _textWrapperRef$curre.clientWidth) > (wrapperRef === null || wrapperRef === void 0 || (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.clientWidth)) {
|
129
139
|
wrapperRef.current.scrollLeft = textWrapperRef.current.offsetWidth - textWrapperRef.current.offsetLeft || 0;
|
130
140
|
}
|
131
|
-
setValues(event,
|
141
|
+
setValues(event, Number(cleanValue));
|
132
142
|
};
|
133
143
|
var handleClickInputWrapper = function handleClickInputWrapper() {
|
134
144
|
if (!isManualInput || !inputRef.current) {
|
@@ -141,11 +151,7 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)(func
|
|
141
151
|
};
|
142
152
|
var handleBlur = function handleBlur(event) {
|
143
153
|
setIsEditing(false);
|
144
|
-
|
145
|
-
setValues(null, lastValidValue);
|
146
|
-
} else if (String(value).endsWith('.')) {
|
147
|
-
setValues(null, Number(value));
|
148
|
-
}
|
154
|
+
validateValue(value);
|
149
155
|
if (onBlur) {
|
150
156
|
onBlur(event);
|
151
157
|
}
|
@@ -156,11 +162,7 @@ var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)(func
|
|
156
162
|
}
|
157
163
|
if (event.keyCode === _constants.keyCodes.Enter) {
|
158
164
|
event.preventDefault();
|
159
|
-
|
160
|
-
setValues(null, lastValidValue);
|
161
|
-
} else if (String(value).endsWith('.')) {
|
162
|
-
setValues(null, Number(value));
|
163
|
-
}
|
165
|
+
validateValue(value);
|
164
166
|
if (onKeyDown) {
|
165
167
|
onKeyDown(event);
|
166
168
|
}
|
@@ -9,4 +9,4 @@ var _NumberInput = /*#__PURE__*/require("../../NumberInput.tokens");
|
|
9
9
|
var _ActionButton = /*#__PURE__*/require("../../ui/ActionButton/ActionButton.styles");
|
10
10
|
var _Input = /*#__PURE__*/require("../../ui/Input/Input.styles");
|
11
11
|
var _Spinner = /*#__PURE__*/require("../../../Spinner");
|
12
|
-
var base = exports.base = /*#__PURE__*/(0, _react.css)(_Input.InputWrapper, "{border-radius:var(", _NumberInput.tokens.inputWrapperBorderRadius, ");}", _ActionButton.StyledIconButton, "{", _NumberInput.privateTokens.segmentationBorderRadius, ":var(", _NumberInput.tokens.iconButtonRadius, ");&.", _NumberInput.classes.segmentedView, ",&.", _NumberInput.classes.solidView, "{", _NumberInput.privateTokens.segmentationBorderRadius, ":var(", _NumberInput.tokens.iconButtonSegmentationRadius, ", var(", _NumberInput.tokens.iconButtonRadius, "));}&.", _NumberInput.classes.actionButtonDecrement, "{border-radius:var(", _NumberInput.tokens.iconButtonRadius, ") var(", _NumberInput.privateTokens.segmentationBorderRadius, ") var(", _NumberInput.privateTokens.segmentationBorderRadius, ") var(", _NumberInput.tokens.iconButtonRadius, ");}&.", _NumberInput.classes.actionButtonIncrement, "{border-radius:var(", _NumberInput.privateTokens.segmentationBorderRadius, ") var(", _NumberInput.tokens.iconButtonRadius, ") var(", _NumberInput.tokens.iconButtonRadius, ") var(", _NumberInput.privateTokens.segmentationBorderRadius, ");}}&.", _NumberInput.classes.segmentedView, "{", _Input.InputWrapper, "{border-radius:var(", _NumberInput.tokens.iconButtonSegmentationRadius, ");}}&.", _NumberInput.classes.solidView, "{position:relative;&:before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(100% - var(", _NumberInput.tokens.iconButtonWidth, ") * 2);height:100%;background:var(", _NumberInput.tokens.backgroundColorSolid, ");}", _Input.InputWrapper, "{position:relative;color:var(", _NumberInput.tokens.colorSolid, ");&:not(", _NumberInput.classes.errorAnimation, ").", _NumberInput.classes.manualInput, ":focus-within{background-color:var(", _NumberInput.tokens.backgroundColorSolidFocus, ");box-shadow:inset 0 0 0 var(", _NumberInput.tokens.inputWrapperBorderWidth, ") var(", _NumberInput.tokens.borderColorSolidFocus, ");}}
|
12
|
+
var base = exports.base = /*#__PURE__*/(0, _react.css)(_Input.InputWrapper, "{border-radius:var(", _NumberInput.tokens.inputWrapperBorderRadius, ");}", _ActionButton.StyledIconButton, "{", _NumberInput.privateTokens.segmentationBorderRadius, ":var(", _NumberInput.tokens.iconButtonRadius, ");&.", _NumberInput.classes.segmentedView, ",&.", _NumberInput.classes.solidView, "{", _NumberInput.privateTokens.segmentationBorderRadius, ":var(", _NumberInput.tokens.iconButtonSegmentationRadius, ", var(", _NumberInput.tokens.iconButtonRadius, "));}&.", _NumberInput.classes.actionButtonDecrement, "{border-radius:var(", _NumberInput.tokens.iconButtonRadius, ") var(", _NumberInput.privateTokens.segmentationBorderRadius, ") var(", _NumberInput.privateTokens.segmentationBorderRadius, ") var(", _NumberInput.tokens.iconButtonRadius, ");}&.", _NumberInput.classes.actionButtonIncrement, "{border-radius:var(", _NumberInput.privateTokens.segmentationBorderRadius, ") var(", _NumberInput.tokens.iconButtonRadius, ") var(", _NumberInput.tokens.iconButtonRadius, ") var(", _NumberInput.privateTokens.segmentationBorderRadius, ");}}&.", _NumberInput.classes.segmentedView, "{", _Input.InputWrapper, "{border-radius:var(", _NumberInput.tokens.iconButtonSegmentationRadius, ");}}&.", _NumberInput.classes.solidView, "{position:relative;&:before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(100% - var(", _NumberInput.tokens.iconButtonWidth, ") * 2);height:100%;background:var(", _NumberInput.tokens.backgroundColorSolid, ");}", _Input.InputWrapper, "{position:relative;color:var(", _NumberInput.tokens.colorSolid, ");&:not(", _NumberInput.classes.errorAnimation, ").", _NumberInput.classes.manualInput, ":focus-within{background-color:var(", _NumberInput.tokens.backgroundColorSolidFocus, ");box-shadow:inset 0 0 0 var(", _NumberInput.tokens.inputWrapperBorderWidth, ") var(", _NumberInput.tokens.borderColorSolidFocus, ");}}", _ActionButton.StyledIconButton, "{:hover,:active{background-color:var(", _NumberInput.tokens.iconButtonBackgroundColor, ");color:var(", _NumberInput.tokens.iconButtonColorSolidHover, ");}&.", _NumberInput.classes.actionButtonDecrementDisabled, ",&.", _NumberInput.classes.actionButtonIncrementDisabled, "{opacity:1;svg{opacity:var(", _NumberInput.tokens.actionButtonDisabledOpacity, ");}:hover,:active{color:var(", _NumberInput.tokens.iconButtonColor, ");svg{opacity:var(", _NumberInput.tokens.actionButtonDisabledOpacity, ");}}}}&.", _NumberInput.classes.clearView, "{", _ActionButton.StyledIconButton, "{&.", _NumberInput.classes.actionButtonDecrementDisabled, ",&.", _NumberInput.classes.actionButtonIncrementDisabled, "{:hover,:active{background-color:transparent;}}}}", _Input.StyledSpinner, "{", _Spinner.spinnerTokens.color, ":var(", _NumberInput.tokens.loaderSpinnerColorSolid, ");}", _Input.Input, "{caret-color:var(", _NumberInput.tokens.caretColorSolid, ", var(", _NumberInput.tokens.caretColor, "));&:not(.", _NumberInput.classes.errorAnimation, "){color:var(", _NumberInput.tokens.colorSolid, ");}}", _Input.AdditionalText, "{color:var(", _NumberInput.tokens.additionalTextColorSolid, ");}};label:plasma-new-hope__base;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvTnVtYmVySW5wdXQvdmFyaWF0aW9ucy9fc2VnbWVudGF0aW9uL2Jhc2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT3VCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2NvbXBvbmVudHMvTnVtYmVySW5wdXQvdmFyaWF0aW9ucy9fc2VnbWVudGF0aW9uL2Jhc2UudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IGNsYXNzZXMsIHByaXZhdGVUb2tlbnMsIHRva2VucyB9IGZyb20gJy4uLy4uL051bWJlcklucHV0LnRva2Vucyc7XG5pbXBvcnQgeyBTdHlsZWRJY29uQnV0dG9uIH0gZnJvbSAnLi4vLi4vdWkvQWN0aW9uQnV0dG9uL0FjdGlvbkJ1dHRvbi5zdHlsZXMnO1xuaW1wb3J0IHsgQWRkaXRpb25hbFRleHQsIElucHV0LCBJbnB1dFdyYXBwZXIsIFN0eWxlZFNwaW5uZXIgfSBmcm9tICcuLi8uLi91aS9JbnB1dC9JbnB1dC5zdHlsZXMnO1xuaW1wb3J0IHsgc3Bpbm5lclRva2VucyB9IGZyb20gJy4uLy4uLy4uL1NwaW5uZXInO1xuXG5leHBvcnQgY29uc3QgYmFzZSA9IGNzc2BcbiAgICAke0lucHV0V3JhcHBlcn0ge1xuICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMuaW5wdXRXcmFwcGVyQm9yZGVyUmFkaXVzfSk7XG4gICAgfVxuXG4gICAgJHtTdHlsZWRJY29uQnV0dG9ufSB7XG4gICAgICAgICR7cHJpdmF0ZVRva2Vucy5zZWdtZW50YXRpb25Cb3JkZXJSYWRpdXN9OiB2YXIoJHt0b2tlbnMuaWNvbkJ1dHRvblJhZGl1c30pO1xuXG4gICAgICAgICYuJHtjbGFzc2VzLnNlZ21lbnRlZFZpZXd9LCAmLiR7Y2xhc3Nlcy5zb2xpZFZpZXd9IHtcbiAgICAgICAgICAgICR7cHJpdmF0ZVRva2Vucy5zZWdtZW50YXRpb25Cb3JkZXJSYWRpdXN9OiB2YXIoJHt0b2tlbnMuaWNvbkJ1dHRvblNlZ21lbnRhdGlvblJhZGl1c30sIHZhcigke3Rva2Vucy5pY29uQnV0dG9uUmFkaXVzfSkpO1xuICAgICAgICB9XG5cbiAgICAgICAgJi4ke2NsYXNzZXMuYWN0aW9uQnV0dG9uRGVjcmVtZW50fSB7XG4gICAgICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoJHt0b2tlbnMuaWNvbkJ1dHRvblJhZGl1c30pIHZhcigke3ByaXZhdGVUb2tlbnMuc2VnbWVudGF0aW9uQm9yZGVyUmFkaXVzfSkgdmFyKCR7cHJpdmF0ZVRva2Vucy5zZWdtZW50YXRpb25Cb3JkZXJSYWRpdXN9KSB2YXIoJHt0b2tlbnMuaWNvbkJ1dHRvblJhZGl1c30pO1xuICAgICAgICB9XG5cbiAgICAgICAgJi4ke2NsYXNzZXMuYWN0aW9uQnV0dG9uSW5jcmVtZW50fSB7XG4gICAgICAgICAgICBib3JkZXItcmFkaXVzOiB2YXIoJHtwcml2YXRlVG9rZW5zLnNlZ21lbnRhdGlvbkJvcmRlclJhZGl1c30pIHZhcigke3Rva2Vucy5pY29uQnV0dG9uUmFkaXVzfSkgdmFyKCR7dG9rZW5zLmljb25CdXR0b25SYWRpdXN9KSB2YXIoJHtwcml2YXRlVG9rZW5zLnNlZ21lbnRhdGlvbkJvcmRlclJhZGl1c30pO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgJi4ke2NsYXNzZXMuc2VnbWVudGVkVmlld30ge1xuICAgICAgICAke0lucHV0V3JhcHBlcn0ge1xuICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogdmFyKCR7dG9rZW5zLmljb25CdXR0b25TZWdtZW50YXRpb25SYWRpdXN9KTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgICYuJHtjbGFzc2VzLnNvbGlkVmlld30ge1xuICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAgICAgJjpiZWZvcmUge1xuICAgICAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICB0b3A6IDA7XG4gICAgICAgICAgICBsZWZ0OiA1MCU7XG4gICAgICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTUwJSk7XG4gICAgICAgICAgICB3aWR0aDogY2FsYygxMDAlIC0gdmFyKCR7dG9rZW5zLmljb25CdXR0b25XaWR0aH0pICogMik7XG4gICAgICAgICAgICBoZWlnaHQ6IDEwMCU7XG4gICAgICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoJHt0b2tlbnMuYmFja2dyb3VuZENvbG9yU29saWR9KTtcbiAgICAgICAgfVxuXG4gICAgICAgICR7SW5wdXRXcmFwcGVyfSB7XG4gICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLmNvbG9yU29saWR9KTtcbiAgICAgICAgICAgIFxuICAgICAgICAgICAgJjpub3QoJHtjbGFzc2VzLmVycm9yQW5pbWF0aW9ufSkuJHtjbGFzc2VzLm1hbnVhbElucHV0fTpmb2N1cy13aXRoaW4ge1xuICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigke3Rva2Vucy5iYWNrZ3JvdW5kQ29sb3JTb2xpZEZvY3VzfSk7XG4gICAgICAgICAgICAgICAgYm94LXNoYWRvdzogaW5zZXQgMCAwIDAgdmFyKCR7dG9rZW5zLmlucHV0V3JhcHBlckJvcmRlcldpZHRofSkgdmFyKCR7dG9rZW5zLmJvcmRlckNvbG9yU29saWRGb2N1c30pO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG5cbiAgICAgICAgJHtTdHlsZWRJY29uQnV0dG9ufSB7XG4gICAgICAgICAgICA6aG92ZXIsXG4gICAgICAgICAgICA6YWN0aXZlIHsgICAgICAgICAgICAgICAgXG4gICAgICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKCR7dG9rZW5zLmljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3J9KTtcbiAgICAgICAgICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLmljb25CdXR0b25Db2xvclNvbGlkSG92ZXJ9KTtcbiAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgJi4ke2NsYXNzZXMuYWN0aW9uQnV0dG9uRGVjcmVtZW50RGlzYWJsZWR9LCAmLiR7Y2xhc3Nlcy5hY3Rpb25CdXR0b25JbmNyZW1lbnREaXNhYmxlZH0ge1xuICAgICAgICAgICAgICAgIG9wYWNpdHk6IDE7XG5cbiAgICAgICAgICAgICAgICBzdmcge1xuICAgICAgICAgICAgICAgICAgICBvcGFjaXR5OiB2YXIoJHt0b2tlbnMuYWN0aW9uQnV0dG9uRGlzYWJsZWRPcGFjaXR5fSk7XG4gICAgICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICAgICAgOmhvdmVyLFxuICAgICAgICAgICAgICAgIDphY3RpdmUge1xuICAgICAgICAgICAgICAgICAgICBjb2xvcjogdmFyKCR7dG9rZW5zLmljb25CdXR0b25Db2xvcn0pO1xuXG4gICAgICAgICAgICAgICAgICAgIHN2ZyB7XG4gICAgICAgICAgICAgICAgICAgICAgICBvcGFjaXR5OiB2YXIoJHt0b2tlbnMuYWN0aW9uQnV0dG9uRGlzYWJsZWRPcGFjaXR5fSk7XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cblxuICAgICAgICAmLiR7Y2xhc3Nlcy5jbGVhclZpZXd9IHtcbiAgICAgICAgICAgICR7U3R5bGVkSWNvbkJ1dHRvbn0ge1xuICAgICAgICAgICAgICAgICYuJHtjbGFzc2VzLmFjdGlvbkJ1dHRvbkRlY3JlbWVudERpc2FibGVkfSwgJi4ke2NsYXNzZXMuYWN0aW9uQnV0dG9uSW5jcmVtZW50RGlzYWJsZWR9IHtcbiAgICAgICAgICAgICAgICAgICAgOmhvdmVyLFxuICAgICAgICAgICAgICAgICAgICA6YWN0aXZlIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICB9XG5cbiAgICAgICAgJHtTdHlsZWRTcGlubmVyfSB7XG4gICAgICAgICAgICAke3NwaW5uZXJUb2tlbnMuY29sb3J9OiB2YXIoJHt0b2tlbnMubG9hZGVyU3Bpbm5lckNvbG9yU29saWR9KTtcbiAgICAgICAgfVxuICAgIFxuICAgICAgICAke0lucHV0fSB7XG4gICAgICAgICAgICBjYXJldC1jb2xvcjogdmFyKCR7dG9rZW5zLmNhcmV0Q29sb3JTb2xpZH0sIHZhcigke3Rva2Vucy5jYXJldENvbG9yfSkpO1xuXG4gICAgICAgICAgICAmOm5vdCguJHtjbGFzc2VzLmVycm9yQW5pbWF0aW9ufSl7XG4gICAgICAgICAgICAgICAgY29sb3I6IHZhcigke3Rva2Vucy5jb2xvclNvbGlkfSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH1cbiAgICBcbiAgICAgICAgJHtBZGRpdGlvbmFsVGV4dH0ge1xuICAgICAgICAgICAgY29sb3I6IHZhcigke3Rva2Vucy5hZGRpdGlvbmFsVGV4dENvbG9yU29saWR9KTtcbiAgICAgICAgfVxuICAgIH1cbmA7XG4iXX0= */"));
|