@dubai-design-system/components-js 5.0.3 → 5.1.0

package/dist/collection/components/dda-pagination/dda-pagination.stories.js

@@ -26,51 +26,51 @@ export default {
         },
         simple_slider_prev_button: {
             control: { type: 'text' },
-            description: 'Text for the previous button in simple slider mode',
+            description: '`name` of the previous button when type is simple-slider',
         },
         simple_slider_next_button: {
             control: { type: 'text' },
-            description: 'Text for the next button in simple slider mode',
+            description: '`name` of the next button when type is simple-slider',
         },
         buttons_prev_button: {
             control: { type: 'text' },
-            description: 'Text for the previous button in buttons mode',
+            description: '`name` of the previous button when type is buttons',
         },
         buttons_next_button: {
             control: { type: 'text' },
-            description: 'Text for the next button in buttons mode',
+            description: '`name` of the next button when type is buttons',
         },
         text_prev_button: {
             control: { type: 'text' },
-            description: 'Text for the previous button in text mode',
+            description: '`name` of the previous button when type is text',
         },
         text_next_button: {
             control: { type: 'text' },
-            description: 'Text for the next button in text mode',
+            description: '`name` of the next button when type is text',
         },
         text_pages_prev_button: {
             control: { type: 'text' },
-            description: 'Text for the previous button in text-pages mode',
+            description: '`name` of the previous button when type is text-pages',
         },
         text_pages_next_button: {
             control: { type: 'text' },
-            description: 'Text for the next button in text-pages mode',
+            description: '`name` of the next button when type is text-pages',
         },
         button_text_prev_button: {
             control: { type: 'text' },
-            description: 'Text for the previous button in button-text mode',
+            description: '`name` of the previous button when type is button-text',
         },
         button_text_next_button: {
             control: { type: 'text' },
-            description: 'Text for the next button in button-text mode',
+            description: '`name` of the next button when type is button-text',
         },
         buttons_pages_prev_button: {
             control: { type: 'text' },
-            description: 'Text for the previous button in buttons-pages mode',
+            description: '`name` of the previous button when type is buttons-pages',
         },
         buttons_pages_next_button: {
             control: { type: 'text' },
-            description: 'Text for the next button in buttons-pages mode',
+            description: '`name` of the next button when type is buttons-pages',
         },
     },
     parameters: {
@@ -86,18 +86,18 @@ To use the \`dda-pagination\` component, pass the following props:
     type="simple-slider"
     custom_class=""
     component_mode=""
-    simple_slider_prev_button: ""
-    simple_slider_next_button: ""
-    buttons_prev_button: ""
-    buttons_next_button: ""
-    text_prev_button: ""
-    text_next_button: ""
-    text_pages_prev_button: ""
-    text_pages_next_button: ""
-    button_text_prev_button: ""
-    button_text_next_button: ""
-    buttons_pages_prev_button: ""
-    buttons_pages_next_button: ""
+    simple_slider_prev_button=""
+    simple_slider_next_button=""
+    buttons_prev_button=""
+    buttons_next_button=""
+    text_prev_button=""
+    text_next_button=""
+    text_pages_prev_button=""
+    text_pages_next_button=""
+    button_text_prev_button=""
+    button_text_next_button=""
+    buttons_pages_prev_button=""
+    buttons_pages_next_button=""
 ></dda-pagination>
   \`\`\`
 `,

package/dist/collection/components/dda-phonefield/dda-phonefield.js

@@ -1,8 +1,11 @@
 import { h, Host } from "@stencil/core";
 import { CountriesList } from "../../assets/countries";
+import { uniqueId } from "../../utils/unique-id";
 export class DdaPhoneField {
     constructor() {
+        /** Placeholder text of the phone input. */
         this.placeholder = 'Enter phone number';
+        /** Disables the phone input and shows the disabled styling. */
         this.disabled = false;
         this.country_code = '+971';
         this.country_flag = 'https://flagcdn.com/w320/ae.png'; // Default UAE flag
@@ -10,17 +13,26 @@ export class DdaPhoneField {
         this.is_focused = false;
         this.dropdown_open = false;
         this.countries = [];
+        /** Accessible name of the country code dropdown button; the selected code is added after it. */
+        this.toggle_button_label = 'Choose country code';
         // F-018 (WCAG 1.3.5): telephone is exactly the field type autocomplete
         // exists for. Default to the correct token; still overridable.
-        this.autocomplete = 'tel';
+        // The country code is chosen separately, so the input holds the national
+        // number only: `tel-national` fits it better than `tel`.
+        /** `autocomplete` token of the phone input. Defaults to `tel-national`, because the country code is chosen separately. */
+        this.autocomplete = 'tel-national';
+        // Fallback id so the label is never orphaned when no input_id is passed.
+        this.fallbackId = uniqueId('dda-phonefield');
     }
-    // F-016: ids derived from the consumer-supplied input_id, same pattern as
-    // dda-input/dda-select.
+    get inputId() {
+        return this.input_id || this.fallbackId;
+    }
+    // F-016: ids derived from the input id, same pattern as dda-input/dda-select.
     get helperId() {
-        return this.input_id ? `${this.input_id}-helper` : undefined;
+        return `${this.inputId}-helper`;
     }
     get errorId() {
-        return this.input_id ? `${this.input_id}-error` : undefined;
+        return `${this.inputId}-error`;
     }
     get describedBy() {
         const ids = [
@@ -56,11 +68,17 @@ export class DdaPhoneField {
     handlephonenumberChange(event) {
         const target = event.target;
         const targetvalue = target.value.replace(/[^0-9.]/g, '');
+        // type="tel" does not block other characters, so write the filtered
+        // value back. Leading zeros are digits and stay.
+        if (target.value !== targetvalue) {
+            target.value = targetvalue;
+        }
         this.phone_number = targetvalue;
     }
     render() {
         const inputClass = `${this.component_mode} ${this.size ? `dda-input-size-${this.size}` : ''} ${this.error_message ? `dda-error-message` : ''}  ${this.validation_type ? `dda-validation-${this.validation_type}` : ''}  ${this.is_focused ? 'dda-input-focus' : ''} ${this.phone_number ? 'dda-input-focus-filled' : ''}`;
-        return (h(Host, { key: 'cf25902e0ce27b528e00a92f728a0eb221bb65ff' }, h("div", { key: 'ff34b06175b8ab15fedbad232468316639bbe0d3', class: `dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}` }, this.label && h("label", { key: 'a277c84bebef55a5126396beca24584f70d7acb6', htmlFor: this.input_id, class: "dda-input-label" }, this.label), h("div", { key: 'ccf3e63be167ecbbe310084e8b3306e353a6f243', class: `dda-input-field-group dda-phone-field` }, h("div", { key: 'c41acbf341633482a915273f9d3c522c4b2bd95f', class: "dda-input-dropdown-btn" }, h("button", { key: '0cc277ad44e73255ad84f6e2e099847f254fe4d4', type: "button", name: this.toggle_button_name, class: "dda-dropdown-select", onClick: () => this.toggleDropdown() }, h("img", { key: '78e46d6ca28db487ebe4c66b14c8f46850a0ccd8', src: this.country_flag, alt: "", width: "20" }), " ", this.country_code, " ", h("i", { key: '31511bbcb0826bb1fd787a4431378c4b1f8b616f', class: `material-icons` }, this.dropdown_open ? 'keyboard_arrow_down' : 'keyboard_arrow_down')), this.dropdown_open && (h("div", { key: 'e541a962e8f0ea40162968f700ece1e572ce54d3', class: "dda-input-dropdown-list" }, this.countries.map(country => (h("button", { id: this.button_id, name: this.country_select_button_name, "aria-label": this.button_aria_label, type: "button", class: "dda-input-dropdown-item", onClick: () => this.selectCountry(country) }, h("img", { src: country.flag, alt: "", width: "20" }), " ", country.code)))))), h("input", { key: 'ebb15740cd44c82780ce21a7c4425893fdea7e50', id: this.input_id, name: this.phone_input_name, "aria-label": this.aria_label, type: "number", class: `dda-field-group-input`, placeholder: this.placeholder, inputmode: 'numeric', pattern: "[0-9]*", autocomplete: this.autocomplete, value: this.phone_number, onInput: this.handlephonenumberChange.bind(this), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), disabled: this.disabled, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && !this.validation_type && h("span", { key: '635c07efb64846c0deac837cc269f4b544572ef7', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '7e4e2dce397eb4d761bc1e2536219f5f2005dc68', id: this.errorId, class: "dda-error-message" }, this.error_message))));
+        const id = this.inputId;
+        return (h(Host, { key: 'ed4636c58fceb5ee94ab0e643bef7c0d80a29e24' }, h("div", { key: '2fac5e6cf7529e1892453eaf0eae6eb49765802d', class: `dda-input-container ${inputClass} ${this.custom_class} ${this.disabled ? 'dda-input-disabled' : ''}` }, this.label && h("label", { key: '3d5a0b67761684d04ac28984337598cc69239a89', htmlFor: id, class: "dda-input-label" }, this.label), h("div", { key: 'c7934f67a0b4210164e9ba2b01f1f4b7f0456a0c', class: `dda-input-field-group dda-phone-field` }, h("div", { key: '57f327b669bd80efe824934f5580df54f6939381', class: "dda-input-dropdown-btn" }, h("button", { key: '645477fa36b62fb9b0495d58074b98db2d62beb4', type: "button", name: this.toggle_button_name, class: "dda-dropdown-select", "aria-label": this.toggle_button_label ? `${this.toggle_button_label}: ${this.country_code}` : undefined, "aria-expanded": this.dropdown_open ? 'true' : 'false', onClick: () => this.toggleDropdown() }, h("img", { key: 'a7e82fcf47ae104a3c39aa97cc9c64cea1588070', src: this.country_flag, alt: "", width: "20" }), " ", this.country_code, " ", h("i", { key: 'b8e9482e942a69b252071d9286c9fa30ead4f2f9', class: `material-icons`, "aria-hidden": "true" }, this.dropdown_open ? 'keyboard_arrow_down' : 'keyboard_arrow_down')), this.dropdown_open && (h("div", { key: 'a71f7b95b1eb9682826645655191c27ec41740d7', class: "dda-input-dropdown-list" }, this.countries.map((country, index) => (h("button", { id: `${this.button_id || `${id}-country`}-${index}`, name: this.country_select_button_name, "aria-label": this.button_aria_label, type: "button", class: "dda-input-dropdown-item", onClick: () => this.selectCountry(country) }, h("img", { src: country.flag, alt: "", width: "20" }), " ", country.code)))))), h("input", { key: 'd8d4ad4c885b26f38ece5fe3ec91bc583d03af58', id: id, name: this.phone_input_name, "aria-label": this.aria_label, type: "tel", class: `dda-field-group-input`, placeholder: this.placeholder, inputmode: 'tel', pattern: "[0-9]*", autocomplete: this.autocomplete, value: this.phone_number, onInput: this.handlephonenumberChange.bind(this), onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), disabled: this.disabled, "aria-describedby": this.describedBy, "aria-invalid": this.error_message ? 'true' : undefined })), this.helper_text && !this.validation_type && h("span", { key: 'facc14856c52b22330242c5f3a9ab17293232900', id: this.helperId, class: "dda-helper-text" }, this.helper_text), this.error_message && h("span", { key: '6b2d21965e9797235d757e1183799bcfa24b0461', id: this.errorId, class: "dda-error-message" }, this.error_message))));
     }
     static get is() { return "dda-phonefield"; }
     static get originalStyleUrls() {
@@ -87,7 +105,7 @@ export class DdaPhoneField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Visible label text, linked to the phone input through `input_id`."
                 },
                 "getter": false,
                 "setter": false,
@@ -106,7 +124,7 @@ export class DdaPhoneField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Placeholder text of the phone input."
                 },
                 "getter": false,
                 "setter": false,
@@ -126,7 +144,7 @@ export class DdaPhoneField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Helper text shown below the field. Hidden when `validation_type` is set."
                 },
                 "getter": false,
                 "setter": false,
@@ -145,7 +163,7 @@ export class DdaPhoneField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Validation style. `error` shows the error colors. Any value hides `helper_text`."
                 },
                 "getter": false,
                 "setter": false,
@@ -164,7 +182,7 @@ export class DdaPhoneField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Error text shown below the field. When set, the input gets `aria-invalid=\"true\"`."
                 },
                 "getter": false,
                 "setter": false,
@@ -183,7 +201,7 @@ export class DdaPhoneField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Disables the phone input and shows the disabled styling."
                 },
                 "getter": false,
                 "setter": false,
@@ -203,7 +221,7 @@ export class DdaPhoneField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Size. `small` shows a smaller field; omit for the default size."
                 },
                 "getter": false,
                 "setter": false,
@@ -222,7 +240,7 @@ export class DdaPhoneField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the field container."
                 },
                 "getter": false,
                 "setter": false,
@@ -241,7 +259,7 @@ export class DdaPhoneField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the field, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -260,7 +278,7 @@ export class DdaPhoneField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`id` of the phone input. Also used for the label `for` and the helper and error text ids. When it is not set, the component generates a unique id."
                 },
                 "getter": false,
                 "setter": false,
@@ -279,7 +297,7 @@ export class DdaPhoneField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the phone input. Use it when there is no visible label."
                 },
                 "getter": false,
                 "setter": false,
@@ -298,7 +316,7 @@ export class DdaPhoneField {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Prefix of the country option button ids in the open list. Each option gets `<button_id>-<index>`. When it is not set, the prefix comes from the input id."
                 },
                 "getter": false,
                 "setter": false,
@@ -317,7 +335,7 @@ export class DdaPhoneField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name set on each country option button in the open list."
                 },
                 "getter": false,
                 "setter": false,
@@ -336,7 +354,7 @@ export class DdaPhoneField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the country code dropdown button."
                 },
                 "getter": false,
                 "setter": false,
@@ -355,13 +373,33 @@ export class DdaPhoneField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of each country option button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "country_select_button_name"
             },
+            "toggle_button_label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the country code dropdown button; the selected code is added after it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "toggle_button_label",
+                "defaultValue": "'Choose country code'"
+            },
             "phone_input_name": {
                 "type": "string",
                 "mutable": false,
@@ -374,7 +412,7 @@ export class DdaPhoneField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`name` of the phone input, submitted with its form."
                 },
                 "getter": false,
                 "setter": false,
@@ -393,13 +431,13 @@ export class DdaPhoneField {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`autocomplete` token of the phone input. Defaults to `tel-national`, because the country code is chosen separately."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "autocomplete",
-                "defaultValue": "'tel'"
+                "defaultValue": "'tel-national'"
             }
         };
     }

package/dist/collection/components/dda-phonefield/dda-phonefield.stories.js

@@ -57,10 +57,6 @@ export default {
             control: { type: 'text' },
             description: 'Aria label for the button inside the phone field',
         },
-        onchange: {
-            control: { type: 'text' },
-            description: 'onchange event for the phone field',
-        },
         toggle_button_name: {
             control: { type: 'text' },
             description: 'Name for the toggle button',
@@ -97,7 +93,6 @@ To use the \`dda-phonefield\` component, pass the following props:
     button_id="button"
     aria_label="phone-field"
     button_aria_label="phone-button"
-    onchange="console.log('changed')"
     toggle_button_name="toggle-button"
     country_select_button_name="country-select-button"
     phone_input_name="phone-input"
@@ -130,7 +125,6 @@ Default.args = {
     button_id: 'button',
     aria_label: 'phone-field',
     button_aria_label: 'phone-button',
-    onchange: '',
     toggle_button_name: "toggle-button",
     country_select_button_name: "country-select-button",
     phone_input_name: "phone-input",
@@ -143,15 +137,12 @@ FocusFilled.args = {
     helper_text: 'Helper or footer text',
     error_message: '',
     disabled: false,
-    phone_number: '',
-    isFocused: true,
     custom_class: 'dda-input-focus',
     component_mode: '',
     input_id: 'input',
     button_id: 'button',
     aria_label: 'phone-field',
     button_aria_label: 'phone-button',
-    onchange: '',
     toggle_button_name: "toggle-button",
     country_select_button_name: "country-select-button",
     phone_input_name: "phone-input",
@@ -164,14 +155,12 @@ Filled.args = {
     helper_text: 'Helper or footer text',
     error_message: '',
     disabled: false,
-    phone_number: '56 546 0000',
     custom_class: '',
     component_mode: '',
     input_id: 'input',
     button_id: 'button',
     aria_label: 'phone-field',
     button_aria_label: 'phone-button',
-    onchange: '',
     toggle_button_name: "toggle-button",
     country_select_button_name: "country-select-button",
     phone_input_name: "phone-input",
@@ -191,7 +180,6 @@ Error.args = {
     button_id: 'button',
     aria_label: 'phone-field',
     button_aria_label: 'phone-button',
-    onchange: '',
     toggle_button_name: "toggle-button",
     country_select_button_name: "country-select-button",
     phone_input_name: "phone-input",
@@ -210,7 +198,6 @@ Disabled.args = {
     button_id: 'button',
     aria_label: 'phone-field',
     button_aria_label: 'phone-button',
-    onchange: '',
     toggle_button_name: "toggle-button",
     country_select_button_name: "country-select-button",
     phone_input_name: "phone-input",

package/dist/collection/components/dda-progressbar/dda-progressbar.js

@@ -1,17 +1,22 @@
 import { h, Host } from "@stencil/core";
 export class DdaProgressBar {
     constructor() {
+        /** Progress in percent, from 0 to 100. Sets the bar width and `aria-valuenow`. */
         this.progress = 0;
+        /** Shows the percentage in a tooltip at the end of the filled bar. */
         this.tooltip = false;
+        /** Tooltip position: `top` or `bottom`. */
         this.tooltip_position = 'top';
+        /** Shows the percentage as text after the bar. */
         this.show_percentage_text = false;
+        /** Accessible name of the progress bar. */
         this.aria_label = 'Progress';
     }
     render() {
         const progressStyle = {
             width: `${this.progress}%`,
         };
-        return (h(Host, { key: 'd15dd4450a6e3844824c70012a60a7ffc2929a05' }, h("div", { key: '272d319e6dc56d0887c8a5649df86ceefcbd15e1', class: `dda-progress-bar-container ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'a6783ce163ce0f5d18a869f90a941b3956ab84bf', class: "dda-progress-bar", role: "progressbar", "aria-label": this.aria_label, "aria-valuenow": `${this.progress}`, "aria-valuemin": "0", "aria-valuemax": "100" }, h("div", { key: '18dde8d79aa85aa38550aad9b17f145ec1d513ac', class: "dda-progress-value", style: progressStyle }, this.tooltip && (h("div", { key: '682ba315e92ce66c2312169fe157723a0d6d7880', class: `dda-tooltip tooltip-${this.tooltip_position}` }, this.progress, "%")))), this.show_percentage_text && (h("span", { key: 'f8ac4a0f095600dfc5df8b6001fe7221533cc49f', class: "dda-percentage-text" }, this.progress, "%")))));
+        return (h(Host, { key: '9aba64a14f203bb1c33e1e062c5d4e7e7184c629' }, h("div", { key: '24696a000c26d6b8247b45503187440fa53a6c63', class: `dda-progress-bar-container ${this.custom_class} ${this.component_mode}` }, h("div", { key: 'f04d35bf3f048585df20c365c716307e683bb77f', class: "dda-progress-bar", role: "progressbar", "aria-label": this.aria_label, "aria-valuenow": `${this.progress}`, "aria-valuemin": "0", "aria-valuemax": "100" }, h("div", { key: '9bc2a539196b12d7579aa01f09a9d11f52bc91fd', class: "dda-progress-value", style: progressStyle }, this.tooltip && (h("div", { key: 'd7267cd54ed3b09ab19dcbb8837e9620a1411e84', class: `dda-tooltip tooltip-${this.tooltip_position}` }, this.progress, "%")))), this.show_percentage_text && (h("span", { key: 'c0cd34956a817d6daa3fe526d961897194452cbe', class: "dda-percentage-text" }, this.progress, "%")))));
     }
     static get is() { return "dda-progressbar"; }
     static get originalStyleUrls() {
@@ -38,7 +43,7 @@ export class DdaProgressBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Progress in percent, from 0 to 100. Sets the bar width and `aria-valuenow`."
                 },
                 "getter": false,
                 "setter": false,
@@ -58,7 +63,7 @@ export class DdaProgressBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Shows the percentage in a tooltip at the end of the filled bar."
                 },
                 "getter": false,
                 "setter": false,
@@ -78,7 +83,7 @@ export class DdaProgressBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Tooltip position: `top` or `bottom`."
                 },
                 "getter": false,
                 "setter": false,
@@ -98,7 +103,7 @@ export class DdaProgressBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Shows the percentage as text after the bar."
                 },
                 "getter": false,
                 "setter": false,
@@ -118,7 +123,7 @@ export class DdaProgressBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Extra CSS classes added to the progress bar container."
                 },
                 "getter": false,
                 "setter": false,
@@ -137,7 +142,7 @@ export class DdaProgressBar {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Theme override class for the progress bar, e.g. `light-mode`."
                 },
                 "getter": false,
                 "setter": false,
@@ -156,7 +161,7 @@ export class DdaProgressBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accessible name of the progress bar."
                 },
                 "getter": false,
                 "setter": false,