Merge branch 'master' of github.com:mdbootstrap/mdb-docs-and-content into arek

Author: idzark

en/angular/web/docs/components/cards/a.html

@@ -28,9 +28,9 @@ <h2 class="section-heading mb-4">
   </p>
 
   <pre><code class="language-javascript">// MDB Angular Pro
-import { ButtonsModule, WavesModule, CardsFreeModule } from 'ng-uikit-pro-standard'</code></pre>
+import { ButtonsModule, WavesModule, CardsModule } from 'ng-uikit-pro-standard'</code></pre>
   <pre><code class="language-javascript">// MDB Angular Pro
-import { ButtonsModule, WavesModule, CardsFreeModule } from 'angular-bootstrap-md'</code></pre>
+import { ButtonsModule, WavesModule, CardsModule } from 'angular-bootstrap-md'</code></pre>
   <div class="row">
     <div class="col-md-6">
       <a class="btn btn-primary waves-light mx-2" href="https://mdbootstrap.com/docs/angular/getting-started/importing-modules/"

en/angular/web/docs/forms/contact-form/o.html

@@ -321,43 +321,116 @@ <h5>
 
                 <mdb-card-body class="px-lg-5 pt-0">
 
-                  <form class="text-center" style="color: #757575;" [formGroup]="contactForm" (ngSubmit)="onSubmit()">
-
-                    <div class="md-form mt-3">
-                      <input type="text" formControlName="contactFormName" id="materialContactFormName" class="form-control"
-                        mdbInput>
-                      <label for="materialContactFormName">Name</label>
-                    </div>
-
-                    <div class="md-form">
-                      <input type="email" formControlName="contactFormEmail" id="materialContactFormEmail" class="form-control"
-                        mdbInput>
-                      <label for="materialContactFormEmail">E-mail</label>
-                    </div>
-
-                    <span>Subject</span>
-                    <div class="row">
-                      <div class="col-md-12 mx-auto">
-                        <mdb-select formControlName="contactFormSubjects" [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
+                <form
+                  class="text-center"
+                  style="color: #757575;"
+                  [formGroup]="contactForm"
+                  (ngSubmit)="onSubmit()"
+                >
+                  <div class="md-form mt-3">
+                    <input
+                      type="text"
+                      formControlName="contactFormName"
+                      id="materialContactFormName"
+                      class="form-control"
+                      mdbInput
+                      mdbValidate
+                    />
+                    <label for="materialContactFormName">Name</label>
+                    <mdb-error *ngIf="name.invalid && (name.dirty || name.touched)"
+                      >Input invalid</mdb-error
+                    >
+                    <mdb-success *ngIf="name.valid && (name.dirty || name.touched)"
+                      >Input valid</mdb-success
+                    >
+                  </div>
+
+                  <div class="md-form">
+                    <input
+                      type="email"
+                      formControlName="contactFormEmail"
+                      id="materialContactFormEmail"
+                      class="form-control"
+                      mdbInput
+                      mdbValidate
+                    />
+                    <label for="materialContactFormEmail">E-mail</label>
+                    <mdb-error *ngIf="email.invalid && (email.dirty || email.touched)"
+                      >Input invalid</mdb-error
+                    >
+                    <mdb-success *ngIf="email.valid && (email.dirty || email.touched)"
+                      >Input valid</mdb-success
+                    >
+                  </div>
+
+                  <span>Subject</span>
+                  <div class="row">
+                    <div class="col-md-12 mx-auto">
+                      <div class="md-form">
+                        <mdb-select
+                          formControlName="contactFormSubjects"
+                          [options]="optionsSelect"
+                          placeholder="Choose your option"
+                          mdbValidate
+                        ></mdb-select>
+                        <mdb-error *ngIf="subjects.invalid && (subjects.dirty || subjects.touched)"
+                          >Input invalid</mdb-error
+                        >
+                        <mdb-success *ngIf="subjects.valid && (subjects.dirty || subjects.touched)"
+                          >Input valid</mdb-success
+                        >
                       </div>
                     </div>
-
-                    <div class="md-form">
-                      <textarea type="text" formControlName="contactFormMessage" id="materialContactFormMessage" class="form-control md-textarea"
-                        mdbInput></textarea>
-                      <label for="materialContactFormMessage">Message</label>
-                    </div>
-
-                    <div class="row">
-                      <div class="col-md-6 mx-auto d-flex justify-content-center">
-                        <mdb-checkbox formControlName="contactFormCopy">Send me a copy of this message</mdb-checkbox>
+                  </div>
+
+                  <div class="md-form">
+                    <textarea
+                      type="text"
+                      formControlName="contactFormMessage"
+                      id="materialContactFormMessage"
+                      class="form-control md-textarea"
+                      mdbInput
+                      mdbValidate
+                    ></textarea>
+                    <label for="materialContactFormMessage">Message</label>
+                    <mdb-error *ngIf="message.invalid && (message.dirty || message.touched)"
+                      >Input invalid</mdb-error
+                    >
+                    <mdb-success *ngIf="message.valid && (message.dirty || message.touched)"
+                      >Input valid</mdb-success
+                    >
+                  </div>
+
+                  <div class="row">
+                    <div class="col-md-6 mx-auto d-flex justify-content-center">
+                      <div class="md-form">
+                        <mdb-checkbox mdbValidate formControlName="contactFormCopy"
+                          >Send me a copy of this message</mdb-checkbox
+                        >
+                        <mdb-error *ngIf="copy.invalid && (copy.dirty || copy.touched)"
+                          >Input invalid</mdb-error
+                        >
+                        <mdb-success *ngIf="copy.valid && (copy.dirty || copy.touched)"
+                          >Input valid</mdb-success
+                        >
                       </div>
                     </div>
-
-                    <button mdbBtn color="info" outline="true" rounded="true" block="true" class="z-depth-0 my-4 waves-effect"
-                      mdbWavesEffect type="submit" [disabled]="disabledSubmitButton">Send</button>
-
-                  </form>
+                  </div>
+
+                  <button
+                    mdbBtn
+                    color="info"
+                    outline="true"
+                    rounded="true"
+                    block="true"
+                    class="z-depth-0 my-4 waves-effect"
+                    mdbWavesEffect
+                    type="submit"
+                    [disabled]="disabledSubmitButton"
+                  >
+                    Send
+                  </button>
+                </form>
 
                 </mdb-card-body>
 
@@ -388,14 +461,14 @@ <h5>
                   }
                 }
 
-                constructor(private fb: FormBuilder, private connectionService: ConnectionService) {
+                constructor(fb: FormBuilder, private connectionService: ConnectionService) {
 
                 this.contactForm = fb.group({
                   'contactFormName': ['', Validators.required],
                   'contactFormEmail': ['', Validators.compose([Validators.required, Validators.email])],
                   'contactFormSubjects': ['', Validators.required],
                   'contactFormMessage': ['', Validators.required],
-                  'contactFormCopy': [''],
+                  'contactFormCopy': ['', Validators.requiredTrue],
                   });
                 }
 
@@ -409,12 +482,28 @@ <h5>
                   ];
                 }
 
+                get name() {
+                  return this.contactForm.get('contactFormName');
+                }
+                get email() {
+                  return this.contactForm.get('contactFormEmail');
+                }
+                get subjects() {
+                  return this.contactForm.get('contactFormSubjects');
+                }
+                get message() {
+                  return this.contactForm.get('contactFormMessage');
+                }
+                get copy() {
+                  return this.contactForm.get('contactFormCopy');
+                }
+
                 onSubmit() {
                   this.connectionService.sendMessage(this.contactForm.value).subscribe(() => {
                     alert('Your message has been sent.');
                     this.contactForm.reset();
                     this.disabledSubmitButton = true;
-                  }, error => {
+                  }, (error: any) => {
                     console.log('Error', error);
                   });
                 }

en/angular/web/docs/navigation/navigation/o.html

@@ -44,7 +44,7 @@ <h2 class="section-heading">Regular fixed Navbar</h2>
             <section>
                 <mdbsnippet>
                     <code data-lang="html" data-name="HTML">
-<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark pink ie-nav" [containerInside]="false">
+<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark pink ie-nav fixed-top" [containerInside]="false">
     <mdb-navbar-brand>
         <a class="logo navbar-brand" href="#"><strong>Navbar</strong></a>
     </mdb-navbar-brand>

en/jquery/web/docs/components/steppers/a.html

@@ -75,13 +75,13 @@ <h2 class="section-heading mb-4">
   <p>Then, below the linked CSS files add Stepper file.</p>
 
   <pre class="code-toolbar" data-editor="false"><code class="language-markup">
-&lt;!-- MDBootstrap Steppers Pro  --&gt;&#10;&lt;link href=&quot;css/addons-pro/stepper.min.css&quot; rel=&quot;stylesheet&quot;&gt;
+&lt;!-- MDBootstrap Steppers Pro  --&gt;&#10;&lt;link href=&quot;css/addons-pro/steppers.min.css&quot; rel=&quot;stylesheet&quot;&gt;
   </code></pre>
 
   <p>Next, below the linked JavaScript files add Steppers file.</p>
 
   <pre class="code-toolbar" data-editor="false"><code class="language-markup">
-&lt;!-- MDBootstrap Steppers Pro  --&gt;&#10;&lt;script type=&quot;text/javascript&quot; src=&quot;js/addons-pro/stepper.min.js&quot;&gt;&lt;/script&gt;
+&lt;!-- MDBootstrap Steppers Pro  --&gt;&#10;&lt;script type=&quot;text/javascript&quot; src=&quot;js/addons-pro/steppers.min.js&quot;&gt;&lt;/script&gt;
     </code></pre>
 
   <p><strong class="font-weight-bold">Note:</strong><strong>Do not forget about initializing Steppers Pro.</strong></p>

en/jquery/web/docs/components/steppers/o.html

@@ -82,9 +82,9 @@ <h4 class="my-4"><strong>Paths and initialization code are below:</strong></h4>
         <link href="css/addons-pro/steppers.min.css" rel="stylesheet">
 
         <!-- Stepper JavaScript -->
-        <script type="text/javascript" src="js/addons-pro/stepper.js"></script>
+        <script type="text/javascript" src="js/addons-pro/steppers.js"></script>
         <!-- Stepper JavaScript - minified -->
-        <script type="text/javascript" src="js/addons-pro/stepper.min.js"></script>
+        <script type="text/javascript" src="js/addons-pro/steppers.min.js"></script>
       </code>
 
       <code data-lang="js" data-name="JavaScript">

en/jquery/web/docs/css/animations/js.html

@@ -1,48 +1,46 @@
 <script>
-  function testAnim(x) {
-    $('#animationSandbox').removeClass().addClass(x + ' animated').one(
-      'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
-      function () {
-        $(this).removeClass();
-      });
-  };
-
   $(document).ready(function () {
+    function testAnim(x) {
+      $('#animationSandbox').removeClass().addClass(x + ' animated').one(
+        'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
+        function () {
+          $(this).removeClass();
+        });
+    };
+
     $('.js--triggerAnimation').click(function (e) {
       e.preventDefault();
       var anim = $('.js--animations').val();
       testAnim(anim);
     });
 
-    $('.js--animations').change(function () {
+    $('.js--animations').change(function (e) {
+      e.stopPropagation();
       var anim = $(this).val();
       testAnim(anim);
     });
-  });
 
-  function testAnim1(x) {
-    $('#animationSandbox1').removeClass().addClass(x + ' animated' + ' bounce').one(
-      'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
-      function () {
-        $(this).removeClass();
-      });
-  };
+    function testAnim1(x) {
+      $('#animationSandbox1').removeClass().addClass(x + ' animated' + ' bounce').one(
+        'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
+        function () {
+          $(this).removeClass();
+        });
+    };
 
-  $(document).ready(function () {
     $('.js--triggerAnimation').click(function (e) {
       e.preventDefault();
       var anim = $('.js--animations').val();
       testAnim1(anim);
     });
 
-    $('.js--animations').change(function () {
+    $('.js--animations').change(function (e) {
+      e.stopPropagation();
       var anim = $(this).val();
       testAnim1(anim);
     });
-  });
 
-  $(document).ready(function () {
-    $('select').material_select();
+    $('select').materialSelect();
     wow = new WOW({
       boxClass: 'wow', // default
       animateClass: 'animated', // default
@@ -52,6 +50,7 @@
     });
     wow.init();
   });
+
 </script>
 
 <!-- Structured data: Breadcrumbs -->

en/jquery/web/docs/css/skins/o-ss.html

@@ -10,3 +10,4 @@
 <li class="nav-item"><a class="nav-link" href="#light-blue">Light blue</a></li>
 <li class="nav-item"><a class="nav-link" href="#grey">Grey</a></li>
 <li class="nav-item"><a class="nav-link" href="#custom">Add custom skin</a></li>
+<li class="nav-item"><a class="nav-link" href="#skins-description">Skins variables</a></li>