Skip to content

Commit e8009c9

Browse files
nnaydenownnaydenow
authoredJul 5, 2020
feat(ui5-progress-indicator): initial implementation (#1887)
Fixes: #1392
·
v./29.5v0.0.0-7b49a7ff1
1 parent 09dca05 commit e8009c9

18 files changed

+662
-0
lines changed
 

‎packages/main/bundle.esm.js

+1
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ import Select from "./dist/Select.js";
5858
import Switch from "./dist/Switch.js";
5959
import MessageStrip from "./dist/MessageStrip.js";
6060
import MultiComboBox from "./dist/MultiComboBox.js";
61+
import ProgressIndicator from "./dist/ProgressIndicator.js";
6162
import RatingIndicator from "./dist/RatingIndicator.js";
6263
import TabContainer from "./dist/TabContainer.js";
6364
import Tab from "./dist/Tab.js";

‎packages/main/src/ProgressIndicator.hbs

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<div class="ui5-progress-indicator-root {{classes.root}}"
2+
dir="{{effectiveDir}}"
3+
role="progressbar"
4+
aria-valuemin="0"
5+
aria-valuenow="{{validatedValue}}"
6+
aria-valuemax="100"
7+
aria-valuetext="{{valueStateText}}"
8+
?aria-disabled="{{disabled}}"
9+
>
10+
<div class="ui5-progress-indicator-bar" style="{{styles.bar}}">
11+
{{#unless showValueInRemainingBar}}
12+
{{> valueLabel}}
13+
{{/unless}}
14+
</div>
15+
<div class="ui5-progress-indicator-remaining-bar">
16+
{{#if showValueInRemainingBar}}
17+
{{> valueLabel}}
18+
{{/if}}
19+
</div>
20+
</div>
21+
22+
{{#*inline "valueLabel"}}
23+
{{#if showIcon}}
24+
<ui5-icon name="{{valueStateIcon}}" class="ui5-progress-indicator-icon"></ui5-icon>
25+
{{/if}}
26+
{{#unless hideValue}}
27+
<span class="ui5-progress-indicator-value">{{validatedValue}}%</span>
28+
{{/unless}}
29+
{{/inline}}

‎packages/main/src/ProgressIndicator.js

+223
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2+
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
3+
import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
4+
import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
5+
import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
6+
import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
7+
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
8+
import ProgressIndicatorTemplate from "./generated/templates/ProgressIndicatorTemplate.lit.js";
9+
import {
10+
VALUE_STATE_ERROR,
11+
VALUE_STATE_WARNING,
12+
VALUE_STATE_SUCCESS,
13+
VALUE_STATE_INFORMATION,
14+
} from "./generated/i18n/i18n-defaults.js";
15+
16+
// Styles
17+
import ProgressIndicatorCss from "./generated/themes/ProgressIndicator.css.js";
18+
19+
/**
20+
* @public
21+
*/
22+
const metadata = {
23+
tag: "ui5-progress-indicator",
24+
properties: /** @lends sap.ui.webcomponents.main.ProgressIndicator.prototype */ {
25+
/**
26+
* Defines whether <code>ui5-progress-indicator</code> is in disabled state.
27+
*
28+
* @type {boolean}
29+
* @defaultvalue false
30+
* @public
31+
*/
32+
disabled: {
33+
type: Boolean,
34+
},
35+
/**
36+
* Defines whether <code>ui5-progress-indicator</code> value is shown.
37+
*
38+
* @type {boolean}
39+
* @defaultvalue false
40+
* @public
41+
*/
42+
hideValue: {
43+
type: Boolean,
44+
},
45+
/**
46+
* Specifies the numerical value in percent for the length of the <code>ui5-progress-indicator</code>.
47+
*
48+
* <b>Note:</b>
49+
* If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.
50+
* @type {Integer}
51+
* @defaultvalue 0
52+
* @public
53+
*/
54+
value: {
55+
type: Integer,
56+
defaultValue: 0,
57+
},
58+
/**
59+
* Defines the value state of the <code>ui5-progress-indicator</code>.
60+
* <br><br>
61+
* Available options are:
62+
* <ul>
63+
* <li><code>None</code></li>
64+
* <li><code>Error</code></li>
65+
* <li><code>Warning</code></li>
66+
* <li><code>Success</code></li>
67+
* <li><code>Information</code></li>
68+
* </ul>
69+
*
70+
* @type {ValueState}
71+
* @defaultvalue "None"
72+
* @public
73+
*/
74+
valueState: {
75+
type: ValueState,
76+
defaultValue: ValueState.None,
77+
},
78+
},
79+
slots: /** @lends sap.ui.webcomponents.main.ProgressIndicator.prototype */ {
80+
//
81+
},
82+
events: /** @lends sap.ui.webcomponents.main.ProgressIndicator.prototype */ {
83+
//
84+
},
85+
};
86+
87+
/**
88+
* @class
89+
*
90+
* <h3 class="comment-api-title">Overview</h3>
91+
* Shows the progress of a process in a graphical way. To indicate the progress,
92+
* the inside of the <code>ui5-progress-indicator</code> is filled with a color.
93+
*
94+
* <h3>Responsive Behavior</h3>
95+
* You can change the size of the Rating Indicator by changing its <code>width</code> or <code>height</code> CSS properties.
96+
* <br>
97+
* Example: <code>&lt;ui5-progress-indicator style="height: 2rem; width: 6rem;">&lt;/ui5-progress-indicator></code>
98+
*
99+
* For the <code>ui5-progress-indicator</code>
100+
* <h3>ES6 Module Import</h3>
101+
*
102+
* <code>import @ui5/webcomponents/dist/ProgressIndicator.js";</code>
103+
*
104+
* @constructor
105+
* @author SAP SE
106+
* @alias sap.ui.webcomponents.main.ProgressIndicator
107+
* @extends UI5Element
108+
* @tagname ui5-progress-indicator
109+
* @public
110+
* @since 1.0.0-rc.8
111+
*/
112+
class ProgressIndicator extends UI5Element {
113+
static get metadata() {
114+
return metadata;
115+
}
116+
117+
static get render() {
118+
return litRender;
119+
}
120+
121+
static get styles() {
122+
return ProgressIndicatorCss;
123+
}
124+
125+
static get template() {
126+
return ProgressIndicatorTemplate;
127+
}
128+
129+
constructor() {
130+
super();
131+
132+
this._previousValue = 0;
133+
this._transitionDuration = 0;
134+
135+
this.i18nBundle = getI18nBundle("@ui5/webcomponents");
136+
}
137+
138+
onBeforeRendering() {
139+
this._transitionDuration = Math.abs(this._previousValue - this.validatedValue) * 20;
140+
this._previousValue = this.validatedValue;
141+
}
142+
143+
valueStateTextMappings() {
144+
const i18nBundle = this.i18nBundle;
145+
146+
return {
147+
"Error": i18nBundle.getText(VALUE_STATE_ERROR),
148+
"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
149+
"Success": i18nBundle.getText(VALUE_STATE_SUCCESS),
150+
"Information": i18nBundle.getText(VALUE_STATE_INFORMATION),
151+
};
152+
}
153+
154+
valueStateIconMappings() {
155+
return {
156+
"Error": "status-negative",
157+
"Warning": "status-critical",
158+
"Success": "status-positive",
159+
"Information": "hint",
160+
};
161+
}
162+
163+
get styles() {
164+
return {
165+
bar: {
166+
"width": `${this.validatedValue}%`,
167+
"transition-duration": this.shouldAnimate ? `${this._transitionDuration}ms` : "none",
168+
},
169+
};
170+
}
171+
172+
get classes() {
173+
return {
174+
root: {
175+
"ui5-progress-indicator-max-value": this.validatedValue === 100,
176+
"ui5-progress-indicator-min-value": this.validatedValue === 0,
177+
},
178+
};
179+
}
180+
181+
get validatedValue() {
182+
if (this.value < 0) {
183+
return 0;
184+
}
185+
186+
if (this.value > 100) {
187+
return 100;
188+
}
189+
190+
return this.value;
191+
}
192+
193+
get showValueInRemainingBar() {
194+
return this.value <= 50;
195+
}
196+
197+
get shouldAnimate() {
198+
return getAnimationMode() !== AnimationMode.None;
199+
}
200+
201+
get valueStateText() {
202+
const percentValue = `${this.validatedValue}%`;
203+
const valueText = this.valueStateTextMappings()[this.valueState];
204+
205+
return valueText ? `${percentValue} ${valueText}` : percentValue;
206+
}
207+
208+
get showIcon() {
209+
return this.valueState !== ValueState.None;
210+
}
211+
212+
get valueStateIcon() {
213+
return this.valueStateIconMappings()[this.valueState];
214+
}
215+
216+
static async onDefine() {
217+
await fetchI18nBundle("@ui5/webcomponents");
218+
}
219+
}
220+
221+
ProgressIndicator.define();
222+
223+
export default ProgressIndicator;

‎packages/main/src/themes/ProgressIndicator.css

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
:host(:not([hidden])) {
2+
display: inline-block;
3+
min-height: 1rem;
4+
min-width: 4rem;
5+
width: 100%;
6+
height: 1rem;
7+
overflow: hidden;
8+
}
9+
10+
.ui5-progress-indicator-root {
11+
box-sizing: border-box;
12+
display: flex;
13+
align-items: center;
14+
background: var(--sapField_Background);
15+
border-radius: 0.5rem;
16+
overflow: hidden;
17+
height: 100%;
18+
width: 100%;
19+
font-size: var(--sapFontSmallSize);
20+
font-family: var(--sapFontFamily);
21+
}
22+
23+
.ui5-progress-indicator-bar {
24+
background: var(--_ui5_progress_indicator_value_state_none);
25+
justify-content: flex-end;
26+
height: 100%;
27+
display: flex;
28+
align-items: center;
29+
color: var(--_ui5_progress_indicator_bar_color);
30+
transition-property: width;
31+
transition-timing-function: linear;
32+
box-sizing: border-box;
33+
border: var(--_ui5_progress_indicator_bar_border_max);
34+
border-radius: 0.5rem 0 0 0.5rem;
35+
}
36+
37+
.ui5-progress-indicator-min-value .ui5-progress-indicator-bar,
38+
.ui5-progress-indicator-max-value .ui5-progress-indicator-remaining-bar {
39+
border:none;
40+
}
41+
42+
.ui5-progress-indicator-max-value .ui5-progress-indicator-bar {
43+
border-radius: 0.5rem;
44+
}
45+
46+
.ui5-progress-indicator-min-value .ui5-progress-indicator-remaining-bar {
47+
border-left: var(--_ui5_progress_indicator_border);
48+
border-radius: 0.5rem;
49+
}
50+
51+
.ui5-progress-indicator-remaining-bar {
52+
justify-content: flex-start;
53+
height: 100%;
54+
display: flex;
55+
align-items: center;
56+
flex-grow: 1;
57+
flex-basis: 0;
58+
border: var(--_ui5_progress_indicator_border);
59+
border-left: none;
60+
border-radius: 0 0.5rem 0.5rem 0;
61+
box-sizing: border-box;
62+
color: var(--_ui5_progress_indicator_color);
63+
}
64+
65+
.ui5-progress-indicator-value {
66+
margin: 0 0.375rem;
67+
}
68+
69+
.ui5-progress-indicator-icon {
70+
margin-left: 0.375rem;
71+
width: var(--sapFontSmallSize);
72+
height: var(--sapFontSmallSize);
73+
display: var(--_ui5_progress_indicator_icon_visibility);
74+
}
75+
76+
:host([value-state="Error"]) .ui5-progress-indicator-bar {
77+
background: var(--_ui5_progress_indicator_value_state_error);
78+
}
79+
80+
:host([value-state="Warning"]) .ui5-progress-indicator-bar {
81+
background: var(--_ui5_progress_indicator_value_state_warning);
82+
}
83+
84+
:host([value-state="Success"]) .ui5-progress-indicator-bar {
85+
background: var(--_ui5_progress_indicator_value_state_success);
86+
}
87+
88+
:host([value-state="Information"]) .ui5-progress-indicator-bar {
89+
background: var(--_ui5_progress_indicator_value_state_information);
90+
}
91+
92+
:host([disabled]) .ui5-progress-indicator-root {
93+
opacity: 0.5;
94+
}
95+
96+
[dir="rtl"] .ui5-progress-indicator-bar {
97+
border-radius: 0 0.5rem 0.5rem 0;
98+
flex-direction: row-reverse;
99+
justify-content: flex-start;
100+
}
101+
102+
[dir="rtl"].ui5-progress-indicator-min-value .ui5-progress-indicator-bar,
103+
[dir="rtl"].ui5-progress-indicator-max-value .ui5-progress-indicator-remaining-bar {
104+
border:none;
105+
}
106+
107+
[dir="rtl"].ui5-progress-indicator-max-value .ui5-progress-indicator-bar {
108+
border-radius: 0.5rem;
109+
}
110+
111+
[dir="rtl"] .ui5-progress-indicator-remaining-bar {
112+
border: var(--_ui5_progress_indicator_border);
113+
border-right: none;
114+
border-radius: 0.5rem 0 0 0.5rem;
115+
flex-direction: row-reverse;
116+
justify-content: flex-end;
117+
}
118+
119+
[dir="rtl"].ui5-progress-indicator-min-value .ui5-progress-indicator-remaining-bar {
120+
border-right: var(--_ui5_progress_indicator_border);
121+
border-radius: 0.5rem;
122+
}

0 commit comments

Comments
 (0)
Please sign in to comment.