diff --git a/packages/main/src/StepInput.hbs b/packages/main/src/StepInput.hbs index cfad475bae91..f955d743399c 100644 --- a/packages/main/src/StepInput.hbs +++ b/packages/main/src/StepInput.hbs @@ -6,10 +6,12 @@ @focusout="{{_onfocusout}}" > + {{#unless readonly}}
+
- + {{/unless}} + {{#unless readonly}}
- + {{/unless}} diff --git a/packages/main/src/StepInput.js b/packages/main/src/StepInput.js index 3cd062d29c2b..86b77e708c22 100644 --- a/packages/main/src/StepInput.js +++ b/packages/main/src/StepInput.js @@ -220,9 +220,12 @@ const metadata = { noAttribute: true, }, - _focused: { + /** + * @type {Boolean} + * @private + */ + focused: { type: Boolean, - noAttribute: true, }, _inputFocused: { @@ -421,7 +424,7 @@ class StepInput extends UI5Element { } get _isFocused() { - return this._focused; + return this.focused; } get _valuePrecisioned() { @@ -530,7 +533,7 @@ class StepInput extends UI5Element { this.value = value; this._validate(); this._setButtonState(); - this._focused = true; + this.focused = true; this.inputOuter.setAttribute("focused", ""); if (fireChangeEvent) { this._fireChangeEvent(); @@ -568,11 +571,11 @@ class StepInput extends UI5Element { } _onfocusin() { - this._focused = true; + this.focused = true; } _onfocusout() { - this._focused = false; + this.focused = false; } _onkeydown(event) { diff --git a/packages/main/src/themes/StepInput.css b/packages/main/src/themes/StepInput.css index e5fe15aa79d1..7b010c521cc5 100644 --- a/packages/main/src/themes/StepInput.css +++ b/packages/main/src/themes/StepInput.css @@ -9,7 +9,7 @@ :host { color: var(--sapField_TextColor); background-color: var(--sapField_Background); - border: 1px solid var(--sapField_BorderColor); + border: var(--_ui5_step_input_border_style); border-radius: var(--sapField_BorderCornerRadius); box-sizing: border-box; height: var(--_ui5_input_height); @@ -20,17 +20,74 @@ text-align: inherit; } +:host(:not([value-state]):not([readonly]):not([disabled])){ + box-shadow: none; +} + +:host([value-state="Success"]:not([readonly]):not([disabled])) { + background-color: var(--sapField_SuccessBackground); +} + +:host([value-state="Error"]:not([readonly]):not([disabled])) { + background-color: var(--sapField_InvalidBackground); +} + +:host([value-state="Information"]:not([readonly]):not([disabled])) { + background-color: var(--sapField_InformationBackground); +} + +:host([value-state="Warning"]:not([readonly]):not([disabled])) { + background-color: var(--sapField_WarningBackground); +} :host(:not([value-state]):not([readonly]):not([disabled]):hover), -:host([value-state=None]:not([readonly]):not([disabled]):hover) { - background-color: var(--sapField_Hover_Background); - border: 1px solid var(--sapField_Hover_BorderColor); +:host([value-state="None"]:not([readonly]):not([disabled]):hover) { + background-color: var(--_ui5_step_input_border_color_hover); + border: var(--_ui5_step_input_border_hover); +} +:host(:not([value-state]):not([readonly]):not([disabled]):not([focused]):hover), +:host([value-state="None"]:not([readonly]):not([disabled]):not([focused]):hover) { + background-color: var(--sapField_Hover_Background); + border: var(--_ui5_step_input_border_style_hover); + box-shadow: var(--_ui5-input-hover-box-shadow); +} + +:host([value-state="Success"]:not([readonly]):not([disabled]):not([focused]):hover) { + box-shadow: var(--_ui5-input-value-state-success-hover-box-shadow); +} + +:host([value-state="Information"]:not([readonly]):not([disabled]):not([focused]):hover) { + box-shadow: var(--_ui5-input-value-state-information-hover-box-shadow); +} + +:host([value-state="Warning"]:not([readonly]):not([disabled]):not([focused]):hover) { + box-shadow: var(--_ui5-input-value-state-warning-hover-box-shadow); +} + +:host([value-state="Error"]:not([readonly]):not([disabled]):not([focused]):hover) { + box-shadow: var(--_ui5-input-value-state-error-hover-box-shadow); +} + +:host([value-state="Success"]:not([readonly]):not([disabled]):hover), +:host([value-state="Error"]:not([readonly]):not([disabled]):hover), +:host([value-state="Information"]:not([readonly]):not([disabled]):hover), +:host([value-state="Warning"]:not([readonly]):not([disabled]):hover) { + background-color: var(--_ui5-step_input_button_state_hover_background_color); } -:host([value-state=Success]:not([readonly]):not([disabled]))::after, -:host([value-state=Error]:not([readonly]):not([disabled]))::after, -:host([value-state=None]:not([readonly]):not([disabled]))::after, -:host([value-state=Information]:not([readonly]):not([disabled]))::after, -:host([value-state=Warning]:not([readonly]):not([disabled]))::after { +:host(:not([value-state]):not([readonly]):not([disabled])[focused]), +:host([value-state="None"]:not([readonly]):not([disabled])[focused]), +:host([value-state="Success"]:not([readonly]):not([disabled])[focused]), +:host([value-state="Error"]:not([readonly]):not([disabled])[focused]), +:host([value-state="Information"]:not([readonly]):not([disabled])[focused]), +:host([value-state="Warning"]:not([readonly]):not([disabled])[focused]){ + background-color: var(--sapField_Focus_Background); +} + +:host([value-state="Success"]:not([readonly]):not([disabled]))::after, +:host([value-state="Error"]:not([readonly]):not([disabled]))::after, +:host([value-state="None"]:not([readonly]):not([disabled]))::after, +:host([value-state="Information"]:not([readonly]):not([disabled]))::after, +:host([value-state="Warning"]:not([readonly]):not([disabled]))::after { position: absolute; content: ""; top: -1px; @@ -45,34 +102,36 @@ border-width: 0px; } -:host([value-state=Information]:not([readonly]):not([disabled]))::after { +:host([value-state="Information"]:not([readonly]):not([disabled]))::after { border-color: var(--sapField_InformationColor); border-width: var(--_ui5-input-information_border_width); } -:host([value-state=Warning]:not([readonly]):not([disabled]))::after { +:host([value-state="Warning"]:not([readonly]):not([disabled]))::after { border-color: var(--sapField_WarningColor); border-width: 2px; } -:host([value-state=Success]:not([readonly]):not([disabled]))::after { +:host([value-state="Success"]:not([readonly]):not([disabled]))::after { border-color: var(--sapField_SuccessColor); border-width: 1px; } -:host([value-state=Error]:not([readonly]):not([disabled]))::after { +:host([value-state="Error"]:not([readonly]):not([disabled]))::after { border-color: var(--sapField_InvalidColor); border-width: var(--_ui5-input-information_border_width); } :host([value-state])::after { - border-width: var(--_ui5_input_state_border_width); + border-width: var(--_ui5_input_state_border_width); } - -:host([value-state=Error]:not([readonly]):not([disabled])) .ui5-step-input-input { - background-color: var(--sapField_InvalidBackground); +:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input { + background-color: var(--_ui5_input_input_background_color); } +:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input:hover { + background-color: var(--_ui5_step_input_input_error_background_color); +} :host([value-state]:not([value-state="None"]) .ui5-step-input-input[focused]) { outline: none; } @@ -81,16 +140,25 @@ width: 100%; color: inherit; background-color: inherit; - border: 1px solid transparent; + border: var(--_ui5_step_input_input_border); box-sizing: border-box; vertical-align: top; - margin-top: -1px; + margin-top: var(--_ui5_step_input_input_margin_top); min-width: 9.125rem; position: relative; padding: 0px 2.5rem 0px 2.4375rem; outline: none; } +:host .ui5-step-input-input[readonly] { + padding: 0; +} + +:host .ui5-step-input-input:hover, +:host .ui5-step-input-input[focused]{ + box-shadow: none; +} + :host .ui5-step-input-root { white-space: nowrap; } @@ -109,10 +177,10 @@ :host .ui5-step-icon { position: absolute; - display: inline-block; + display: var(--_ui5_step_input_button_display); height: 2rem; height: 100%; - background-color: var(--sapField_Background); + background-color: var(--_ui5_step_input_button_background_color); z-index: 2; } @@ -122,11 +190,11 @@ } :host .ui5-step-icon.ui5-step-dec { - left: 0; + left: var(--_ui5_step_input_button_left); } :host .ui5-step-icon.ui5-step-inc { - right: 0; + right: var(--_ui5_step_input_button_right); } :host .ui5-step-icon *:not([clickable]), @@ -146,10 +214,11 @@ :host .ui5-step-input-input[focused]::after { position: absolute; content: ""; - border: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor); - top: 1px; + border: var(--_ui5_step_input_input_border_focused_after); + top: var(--_ui5_step_input_input_border_top_bottom_focused_after); right: 0px; - bottom: 1px; + bottom: var(--_ui5_step_input_input_border_top_bottom_focused_after); + border-radius: var(--_ui5_step_input_input_border_radius_focused_after); left: 0px; outline: none; pointer-events: none; @@ -160,36 +229,27 @@ outline: none; } -:host([value-state]:not([value-state=None]):not([value-state=Success]):not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after { - top: 2px; - right: 1px; - bottom: 2px; - left: 1px; +:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after { + border-color: var(--_ui5_step_input_input_information_border_color_focused_after); } -:host([value-state=Information]:not([readonly]):not([disabled]))::after { - border-color: var(--sapField_InformationColor); - border-width: var(--_ui5-input-information_border_width); +:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after { + border-color: var(--_ui5_step_input_input_warning_border_color_focused_after); } -:host([value-state=Warning]:not([readonly]):not([disabled]))::after { - border-color: var(--sapField_WarningColor); +:host([value-state="Success"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after { + border-color: var(--_ui5_step_input_input_success_border_color_focused_after); } -:host([value-state=Success]:not([readonly]):not([disabled]))::after { - border-color: var(--sapField_SuccessColor); - border-width: 1px; -} - -:host([value-state=Error]:not([readonly]):not([disabled]))::after { - border-color: var(--sapField_InvalidColor); +:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-step-input-input[focused]::after { + border-color: var(--_ui5_step_input_input_error_border_color_focused_after); } /* Disable spin buttons in Chrome, Safari, Edge, Opera */ :host .ui5-step-input-input::-webkit-outer-spin-button, :host .ui5-step-input-input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; + -webkit-appearance: none; + margin: 0; } :host([disabled]) { @@ -201,10 +261,9 @@ } :host([disabled]) .ui5-step-icon { - background: var(--sapField_ReadOnly_Background); + background-color: var(--_ui5_step_input_disabled_button_background); } :host([disabled]) .ui5-step-icon [ui5-icon] { color: var(--sapField_ReadOnly_BorderColor); } - diff --git a/packages/main/src/themes/base/StepInput-parameters.css b/packages/main/src/themes/base/StepInput-parameters.css new file mode 100644 index 000000000000..3c8fb3964b8b --- /dev/null +++ b/packages/main/src/themes/base/StepInput-parameters.css @@ -0,0 +1,23 @@ +:root { + --_ui5_step_input_input_error_background_color: var(--sapField_InvalidBackground); + --_ui5-step_input_button_state_hover_background_color: var(--sapField_Background); + --_ui5_step_input_border_style: 1px solid var(--sapField_BorderColor); + --_ui5_step_input_border_style_hover: 1px solid var(--sapField_Hover_BorderColor); + --_ui5_step_input_button_background_color:var(--sapField_Background); + --_ui5_step_input_input_border: 1px solid transparent; + --_ui5_step_input_input_margin_top: -0.0625rem; + --_ui5_step_input_button_display: inline-block; + --_ui5_step_input_button_left: 0; + --_ui5_step_input_button_right: 0; + --_ui5_step_input_input_border_focused_after: var(--_ui5_input_focus_border_width) dotted var(--sapContent_FocusColor); + --_ui5_step_input_input_border_top_bottom_focused_after: 0.0625rem; + --_ui5_step_input_input_border_radius_focused_after: 0; + --_ui5_step_input_input_information_border_color_focused_after: var(--sapField_BorderColor); + --_ui5_step_input_input_warning_border_color_focused_after: var(--sapField_BorderColor); + --_ui5_step_input_input_success_border_color_focused_after: var(--sapField_BorderColor); + --_ui5_step_input_input_error_border_color_focused_after: var(--sapField_BorderColor); + --_ui5_step_input_disabled_button_background: var(--sapField_ReadOnly_Background); + --_ui5_step_input_border_color_hover: var(--sapField_Hover_Background); + --_ui5_step_input_border_hover: 1px solid var(--sapField_Hover_BorderColor); + --_ui5_input_input_background_color: var(--sapField_InvalidBackground); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css index 0c1542a75323..922f15f65524 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -43,4 +43,5 @@ @import "../base/ValueStateMessage-parameters.css"; @import "../base/MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; -@import "../base/Suggestions-parameters.css"; \ No newline at end of file +@import "../base/Suggestions-parameters.css"; +@import "../base/StepInput-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css index 896d3f2c3745..274b13980deb 100644 --- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css @@ -42,4 +42,5 @@ @import "./ValueStateMessage-parameters.css"; @import "../base/MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; -@import "../base/Suggestions-parameters.css"; \ No newline at end of file +@import "../base/Suggestions-parameters.css"; +@import "../base/StepInput-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css index 9f64b063ef5d..74453e1e0d47 100644 --- a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css @@ -42,4 +42,5 @@ @import "./ValueStateMessage-parameters.css"; @import "../base/MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; -@import "../base/Suggestions-parameters.css"; \ No newline at end of file +@import "../base/Suggestions-parameters.css"; +@import "../base/StepInput-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css index b12dae891edb..91321da0eca2 100644 --- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css @@ -43,4 +43,5 @@ @import "../base/ValueStateMessage-parameters.css"; @import "./MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; -@import "../base/Suggestions-parameters.css"; \ No newline at end of file +@import "../base/Suggestions-parameters.css"; +@import "../base/StepInput-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css index 5d2973f433cb..98303514e7c9 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css @@ -43,3 +43,4 @@ @import "./MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; @import "../base/Suggestions-parameters.css"; +@import "../base/StepInput-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css index 1f78829b0cdc..c950ab18cf86 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css @@ -43,4 +43,5 @@ @import "./ValueStateMessage-parameters.css"; @import "../base/MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; -@import "../base/Suggestions-parameters.css"; \ No newline at end of file +@import "../base/Suggestions-parameters.css"; +@import "../base/StepInput-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css index 1f78829b0cdc..c950ab18cf86 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css @@ -43,4 +43,5 @@ @import "./ValueStateMessage-parameters.css"; @import "../base/MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; -@import "../base/Suggestions-parameters.css"; \ No newline at end of file +@import "../base/Suggestions-parameters.css"; +@import "../base/StepInput-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/StepInput-parameters.css b/packages/main/src/themes/sap_horizon/StepInput-parameters.css new file mode 100644 index 000000000000..5386f78da012 --- /dev/null +++ b/packages/main/src/themes/sap_horizon/StepInput-parameters.css @@ -0,0 +1,25 @@ +@import "../base/StepInput-parameters.css"; + +:root { + --_ui5_step_input_input_error_background_color: inherit; + --_ui5-step_input_button_state_hover_background_color: var(--sapField_Hover_Background); + --_ui5_step_input_border_style: none; + --_ui5_step_input_border_style_hover: none; + --_ui5_step_input_button_background_color: transparent; + --_ui5_step_input_input_border: none; + --_ui5_step_input_input_margin_top: 0; + --_ui5_step_input_button_display: inline-flex; + --_ui5_step_input_button_left: 0.125rem; + --_ui5_step_input_button_right: 0; + --_ui5_step_input_input_border_focused_after: 0.125rem solid #0070f2; + --_ui5_step_input_input_border_top_bottom_focused_after: 0; + --_ui5_step_input_input_border_radius_focused_after: 0.25rem; + --_ui5_step_input_input_information_border_color_focused_after: var(--sapField_InformationColor); + --_ui5_step_input_input_warning_border_color_focused_after: var(--sapField_WarningColor); + --_ui5_step_input_input_success_border_color_focused_after: var(--sapField_SuccessColor); + --_ui5_step_input_input_error_border_color_focused_after: var(--sapField_InvalidColor); + --_ui5_step_input_disabled_button_background: none; + --_ui5_step_input_border_color_hover: none; + --_ui5_step_input_border_hover: none; + --_ui5_input_input_background_color: transparent; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css index d49825d1debe..9011c7ec0652 100644 --- a/packages/main/src/themes/sap_horizon/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon/parameters-bundle.css @@ -52,4 +52,5 @@ @import "./Table-parameters.css"; @import "./TableRow-parameters.css"; @import "./TableColumn-parameters.css"; -@import "./GrowingButton-parameters.css"; \ No newline at end of file +@import "./StepInput-parameters.css"; +@import "./GrowingButton-parameters.css";