feat(modal): updated modals in ngx-bootstrap-docs according bs5

libs/doc-pages/modal/src/lib/demos/accessibility/accessibility.html

@@ -3,8 +3,8 @@
 <ng-template #template>
   <div class="modal-header">
     <h4 class="modal-title pull-left" id="my-modal-title">Modal title</h4>
-    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
-      <span aria-hidden="true">&times;</span>
+    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef.hide()">
+      <span aria-hidden="true" class="visually-hidden">&times;</span>
     </button>
   </div>
   <div class="modal-body">

libs/doc-pages/modal/src/lib/demos/auto-shown/auto-shown.html

@@ -5,8 +5,8 @@
     <div class="modal-content">
       <div class="modal-header">
         <h4 id="dialog-auto-name" class="modal-title pull-left">Auto shown modal</h4>
-        <button type="button" class="close pull-right" aria-label="Close" (click)="hideModal()">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="hideModal()">
+          <span aria-hidden="true" class="visually-hidden">&times;</span>
         </button>
       </div>
       <div class="modal-body">

libs/doc-pages/modal/src/lib/demos/child/child.html

@@ -5,8 +5,8 @@
     <div class="modal-content">
       <div class="modal-header">
         <h4 id="dialog-child-name" class="modal-title pull-left">Child modal</h4>
-        <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="close pull-right btn-close" aria-label="Close" (click)="hideChildModal()">
+          <span aria-hidden="true" class="visually-hidden">&times;</span>
         </button>
       </div>
       <div class="modal-body">

libs/doc-pages/modal/src/lib/demos/events/events.html

@@ -12,8 +12,8 @@
     <div class="modal-content">
       <div class="modal-header">
         <h4 id="dialog-events-name" class="modal-title pull-left">Modal</h4>
-        <button type="button" class="close pull-right" aria-label="Close" (click)="modal.hide()">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="close pull-right btn-close" aria-label="Close" (click)="modal.hide()">
+          <span aria-hidden="true" class="visually-hidden">&times;</span>
         </button>
       </div>
       <div class="modal-body">

libs/doc-pages/modal/src/lib/demos/modal-ref-events/modal-ref-events.html

@@ -4,8 +4,8 @@
 <ng-template #template>
   <div class="modal-header">
     <h4 class="modal-title pull-left">Modal</h4>
-    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
-      <span aria-hidden="true">&times;</span>
+    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef.hide()">
+      <span aria-hidden="true" class="visually-hidden">&times;</span>
     </button>
   </div>
   <div class="modal-body">

libs/doc-pages/modal/src/lib/demos/modal-with-popups/modal-with-popups.html

@@ -2,8 +2,8 @@
 <ng-template #template>
   <div class="modal-header">
     <h4 class="modal-title pull-left">Modal</h4>
-    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
-      <span aria-hidden="true">&times;</span>
+    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef.hide()">
+      <span aria-hidden="true" class="visually-hidden">&times;</span>
     </button>
   </div>
   <div class="modal-body">

libs/doc-pages/modal/src/lib/demos/nested/nested.html

@@ -4,8 +4,8 @@
     <div class="modal-content">
       <div class="modal-header">
         <h4 id="dialog-nested-name1" class="modal-title pull-left">First modal</h4>
-        <button type="button" class="close pull-right" aria-label="Close" (click)="parentModal.hide()">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="parentModal.hide()">
+          <span aria-hidden="true" class="visually-hidden">&times;</span>
         </button>
       </div>
       <div class="modal-body">
@@ -20,8 +20,8 @@
     <div class="modal-content">
       <div class="modal-header">
         <h4 id="dialog-nested-name2" class="modal-title pull-left">Second modal</h4>
-        <button type="button" class="close pull-right" aria-label="Close" (click)="childModal.hide()">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="childModal.hide()">
+          <span aria-hidden="true" class="visually-hidden">&times;</span>
         </button>
       </div>
       <div class="modal-body">
@@ -37,8 +37,8 @@
     <div class="modal-content">
       <div class="modal-header">
         <h4 id="dialog-nested-name3" class="modal-title pull-left">Third modal</h4>
-        <button type="button" class="close pull-right" aria-label="Close" (click)="thirdModal.hide()">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="thirdModal.hide()">
+          <span aria-hidden="true" class="visually-hidden">&times;</span>
         </button>
       </div>
       <div class="modal-body">

libs/doc-pages/modal/src/lib/demos/scrolling-long-content/scrolling-long-content.html

@@ -4,8 +4,8 @@
 <ng-template #template>
   <div class="modal-header">
     <h4 class="modal-title pull-left">Modal</h4>
-    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
-      <span aria-hidden="true">&times;</span>
+    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef.hide()">
+      <span aria-hidden="true" class="visually-hidden">&times;</span>
     </button>
   </div>
   <div class="modal-body">

libs/doc-pages/modal/src/lib/demos/service-component/service-component.ts

@@ -33,8 +33,8 @@ export class DemoModalServiceFromComponent {
   template: `
     <div class="modal-header">
       <h4 class="modal-title pull-left">{{title}}</h4>
-      <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
-        <span aria-hidden="true">&times;</span>
+      <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
+        <span aria-hidden="true" class="visually-hidden">&times;</span>
       </button>
     </div>
     <div class="modal-body">

libs/doc-pages/modal/src/lib/demos/service-events/service-events.html

@@ -4,8 +4,8 @@
 <ng-template #template>
   <div class="modal-header">
     <h4 class="modal-title pull-left">Modal</h4>
-    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
-      <span aria-hidden="true">&times;</span>
+    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef.hide()">
+      <span aria-hidden="true" class="visually-hidden">&times;</span>
     </button>
   </div>
   <div class="modal-body">

libs/doc-pages/modal/src/lib/demos/service-nested/service-nested.html

@@ -3,8 +3,8 @@
 <ng-template #template>
   <div class="modal-header">
     <h4 class="modal-title pull-left">First modal</h4>
-    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
-      <span aria-hidden="true">&times;</span>
+    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef.hide()">
+      <span aria-hidden="true" class="visually-hidden">&times;</span>
     </button>
   </div>
   <div class="modal-body">
@@ -18,8 +18,8 @@
 <ng-template #templateNested>
   <div class="modal-header">
     <h4 class="modal-title pull-left">Second modal</h4>
-    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef2.hide()">
-      <span aria-hidden="true">&times;</span>
+    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef2.hide()">
+      <span aria-hidden="true" class="visually-hidden">&times;</span>
     </button>
   </div>
   <div class="modal-body">

libs/doc-pages/modal/src/lib/demos/service-template/service-template.html

@@ -3,8 +3,8 @@
 <ng-template #template>
   <div class="modal-header">
     <h4 class="modal-title pull-left">Modal</h4>
-    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
-      <span aria-hidden="true">&times;</span>
+    <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef.hide()">
+      <span aria-hidden="true" class="visually-hidden">&times;</span>
     </button>
   </div>
   <div class="modal-body">

libs/doc-pages/modal/src/lib/demos/sizes/sizes.html

@@ -8,8 +8,8 @@
     <div class="modal-content">
       <div class="modal-header">
         <h4 id="dialog-sizes-name1" class="modal-title pull-left">Large modal</h4>
-        <button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close close pull-right" (click)="lgModal.hide()" aria-label="Close">
+          <span aria-hidden="true" class="visually-hidden">&times;</span>
         </button>
       </div>
       <div class="modal-body">
@@ -28,8 +28,8 @@
     <div class="modal-content">
       <div class="modal-header">
         <h4 id="dialog-sizes-name2" class="modal-title pull-left">Small modal</h4>
-        <button type="button" class="close pull-right" aria-label="Close" (click)="smModal.hide()">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="smModal.hide()">
+          <span aria-hidden="true" class="visually-hidden">&times;</span>
         </button>
       </div>
       <div class="modal-body">

libs/doc-pages/modal/src/lib/demos/static/static.html

@@ -6,8 +6,8 @@
     <div class="modal-content">
       <div class="modal-header">
         <h4 id="dialog-static-name" class="modal-title pull-left">Static modal</h4>
-        <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="staticModal.hide()">
+          <span aria-hidden="true" class="visually-hidden">&times;</span>
         </button>
       </div>
       <div class="modal-body">