[Knockout] New Progress Bar UI doesn't work

[ElenaGorbatkova]

Are you requesting a feature, reporting a bug or ask a question?

Reporting a bug

What is the current behavior?

New Progress bar UI is not working

What is the expected behavior?

New Progress bar UI is enables when:

"showProgressBar": "auto", "progressBarType": "pages", "progressBarShowPageNumbers": true, "progressBarShowPageTitles": true,

How would you reproduce the current behavior (if this is a bug)?

add the above-mentioned properties to any multi page form

Provide the test code and the tested page URL (if applicable)

Tested page URL:

https://plnkr.co/edit/1HUA1QN6jPYuAz4f?preview

Test code

your_code_here

{
 "title": "Patient intake form",
 "logoPosition": "right",
 "pages": [
  {
   "name": "personal-information",
   "elements": [
    {
     "type": "text",
     "name": "first-name",
     "title": "First name"
    },
    {
     "type": "text",
     "name": "last-name",
     "startWithNewLine": false,
     "title": "Last name"
    },
    {
     "type": "dropdown",
     "name": "nationality",
     "title": "Nationality",
     "choices": [
      "Item 1",
      "Item 2",
      "Item 3"
     ],
     "choicesByUrl": {
      "url": "https://surveyjs.io/api/CountriesExample"
     }
    },
    {
     "type": "text",
     "name": "ssn",
     "visibleIf": "{nationality} = 'United States'",
     "startWithNewLine": false,
     "title": "Social security number",
     "description": "You SSN must be a 9-digit number.",
     "descriptionLocation": "underInput",
     "inputType": "number",
     "min": 9,
     "max": 9
    },
    {
     "type": "text",
     "name": "birthday",
     "title": "Date of birth",
     "inputType": "date"
    },
    {
     "type": "boolean",
     "name": "driving-license",
     "visibleIf": "age({birthday}) >= 16",
     "startWithNewLine": false,
     "title": "Do you drive have a driving license?"
    },
    {
     "type": "dropdown",
     "name": "driving-experience",
     "visibleIf": "age({birthday}) >= 16",
     "startWithNewLine": false,
     "title": "How many years of driving experience do you have?",
     "choices": [
      {
       "value": "Item 1",
       "text": "Less than a year"
      },
      {
       "value": "Item 2",
       "text": "1-5 years"
      },
      {
       "value": "Item 4",
       "text": "Over 5 years"
      }
     ]
    }
   ],
   "title": "Personal information"
  },
  {
   "name": "contact-information-page",
   "elements": [
    {
     "type": "multipletext",
     "name": "contact-information",
     "titleLocation": "hidden",
     "items": [
      {
       "name": "address",
       "inputType": "tel",
       "title": "Address"
      },
      {
       "name": "email",
       "isRequired": true,
       "inputType": "email",
       "title": "Email address"
      },
      {
       "name": "phone-number",
       "isRequired": true,
       "title": "Phone number"
      }
     ],
     "itemTitleWidth": "130"
    },
    {
     "type": "radiogroup",
     "name": "provide-emergency-contact",
     "title": "Would you like to provide your emergency contact?",
     "choices": [
      {
       "value": "yes",
       "text": "Yes"
      },
      {
       "value": "no",
       "text": "No"
      }
     ]
    },
    {
     "type": "paneldynamic",
     "name": "emergency-contact",
     "title": "Emergency contact information",
     "enableIf": "{provide-emergency-contact} = 'yes'",
     "templateElements": [
      {
       "type": "text",
       "name": "full-name",
       "title": "Full name",
       "requiredIf": "{provide-emergency-contact} = 'yes'"
      },
      {
       "type": "text",
       "name": "relationship",
       "startWithNewLine": false,
       "title": "Relationship"
      },
      {
       "type": "text",
       "name": "phone-number",
       "title": "Phone number",
       "inputType": "tel",
       "autocomplete": "tel"
      },
      {
       "type": "text",
       "name": "address",
       "startWithNewLine": false,
       "title": "Address"
      }
     ],
     "templateTabTitle": "{panelIndex} Primary Emergency Contact",
     "panelCount": 1,
     "minPanelCount": 1,
     "maxPanelCount": 2,
     "panelAddText": "Add 2nd Primary Emergency Contact",
     "renderMode": "tab"
    },
    {
     "type": "radiogroup",
     "name": "order-receipt",
     "title": "Where would you like us to send the order receipt?",
     "choices": [
      {
       "value": "phone-number",
       "text": "Phone number"
      },
      {
       "value": "email",
       "text": "Email"
      },
      {
       "value": "no-receipt",
       "text": "No receipt"
      }
     ]
    },
    {
     "type": "text",
     "name": "receipt-phone-number",
     "title": "Text receipt to:",
     "titleLocation": "left",
     "setValueIf": "{order-receipt} = ['phone-number']",
     "setValueExpression": "{contact-information.phone-number}",
     "inputType": "tel"
    },
    {
     "type": "text",
     "name": "receipt-email",
     "startWithNewLine": false,
     "title": "Email receipt to:",
     "titleLocation": "left",
     "setValueExpression": "assign value 'contact-information.email' to question: 'receipt-email'",
     "inputType": "email"
    }
   ],
   "title": "Contact information"
  }
 ],
 "triggers": [
  {
   "type": "skip",
   "expression": "{nationality} <> 'United States'",
   "gotoName": "birthday"
  }
 ],
 "showQuestionNumbers": "off",
   "showProgressBar": "auto",
  "progressBarType": "pages",
  "progressBarShowPageNumbers": true,
  "progressBarShowPageTitles": true,
 "completeText": "Submit",
 "widthMode": "static",
 "width": "1000"
}

### Specify your

* browser:
* editor version:

[JaneSjs]

+1 T16697 - progressbar css binding error https://surveyjs.answerdesk.io/internal/ticket/details/T16697