chore: pull changes

sass/components/_badges.scss

@@ -53,6 +53,11 @@ nav ul a span.badge {
 
 .collapsible span.badge {
   margin-left: auto;
+
+  &.leading {
+    margin-right: 7px;
+    order: -1;
+  }
 }
 
 .collapsible .active span.badge:not(.new) {

sass/components/_cards.scss

@@ -19,9 +19,6 @@
   .card-title {
     font-size: 24px;
     font-weight: 300;
-    &.activator {
-      cursor: pointer;
-    }
   }
 
   // Card Sizes
@@ -32,13 +29,16 @@
       max-height: 60%;
       overflow: hidden;
     }
+
     .card-image + .card-content {
       max-height: 40%;
     }
+
     .card-content {
       max-height: 100%;
       overflow: hidden;
     }
+
     .card-action {
       position: absolute;
       bottom: 0;
@@ -77,6 +77,7 @@
 
     .card-image {
       max-width: 50%;
+
       img {
         border-radius: 2px 0 0 2px;
         max-width: 100%;
@@ -108,9 +109,6 @@
     }
   }
 
-
-
-
   .card-image {
     position: relative;
 
@@ -134,6 +132,15 @@
       max-width: 100%;
       padding: 24px;
     }
+
+    .activator {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top:0;
+      bottom: 0;
+      cursor: pointer;
+    }
   }
 
   .card-content {
@@ -143,6 +150,7 @@
     p {
       margin: 0;
     }
+
     .card-title {
       display: block;
       line-height: 32px;
@@ -151,6 +159,10 @@
       i {
         line-height: 32px;
       }
+
+      &.activator {
+        cursor: pointer;
+      }
     }
   }
 

sass/components/_collapsible.scss

@@ -31,20 +31,26 @@
 }
 
 .collapsible-header::after {
-  content: '▾';
-  text-align: right;
-  margin-right: 0.25rem;
-  width: 100%;
+  content: '\e5cf';
+  margin-left: .5rem;
+  font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Symbols Sharp', 'Material Icons';
+  font-size: 25px;
+  line-height: .9;
+  -webkit-font-smoothing: antialiased;
 }
+
 .active .collapsible-header::after {
-  content: "▴";
+  content: '\e5ce';
 }
 
-
 .keyboard-focused .collapsible-header:focus {
   background-color: rgba(0, 0, 0, 0.12);
 }
 
+.collapsible-header-content {
+  flex-grow: 1;
+}
+
 .collapsible-body {
   max-height: 0;
   border-bottom: 1px solid var(--md-sys-color-outline-variant);

spec/tests/datepicker/datepickerSpec.js

@@ -104,5 +104,24 @@ describe('Datepicker Plugin', () => {
         done();
       }, 10);
     });
+
+    it('should have multiple input fields if multiple select option is enabled and multiple dates are selected', (done) => {
+      const input = document.querySelector('#datepickerInput');
+      M.Datepicker.init(input, { isMultipleSelection: true });
+      const datepicker = M.Datepicker.getInstance(input);
+      datepicker.open();
+      setTimeout(() => {
+        for (let i = 1; i < 4; i++) {
+          setTimeout(() => {
+            document.querySelector(`.datepicker-modal button[data-day="${i}"]`).click();
+          }, i * 10);
+        }
+        setTimeout(() => {
+          document.querySelector('.datepicker-done').click();
+          expect(document.querySelectorAll('.datepicker').length === 3).toEqual(true);
+          done();
+        }, 40);
+      }, 10);
+    });
   });
 });

spec/tests/taptarget/taptargetSpec.js

@@ -0,0 +1,99 @@
+/* eslint-disable no-undef */
+
+describe('TapTarget', () => {
+  const fixture = `<div class="tap-target-container">
+  <a id="tap-target-link" class="waves-effect waves-light btn btn-floating toggle-tap-target"><i class="material-icons">menu</i></a>
+  <div class="tap-target" data-target="tap-target-link">
+      <div class="tap-target-content">
+          <div class="tap-target-inner-wrapper">
+              <h5>Feature Discovery</h5>
+              <p>Some incredible text here</p>
+          </div>
+      </div>
+  </div>
+</div>`;
+
+  beforeEach(() => XloadHtml(fixture));
+  afterEach(() => XunloadFixtures());
+
+  describe('tap target plugin', () => {
+    afterEach(() => {
+      if (M.TapTarget._taptargets.length) {
+        M.TapTarget.getInstance(document.querySelector('.tap-target')).destroy();
+      }
+    });
+
+    it('should be able to initialize', (done) => {
+      expect(M.TapTarget._taptargets.length).toEqual(0, 'no tap targets initialized');
+      M.TapTarget.init(document.querySelectorAll('.tap-target'));
+      expect(M.TapTarget._taptargets.length).toEqual(1, 'there should be 1 tap target initialization');
+      done();
+    });
+
+    it('should be hidden on initialization', (done) => {
+      const tapTargetElem = document.querySelector('.tap-target');
+      M.TapTarget.init(tapTargetElem);
+      setTimeout(() => {
+        expect(tapTargetElem).not.toBeVisible('taptarget was not hidden on initialization');
+        done();
+      }, 10);
+    });
+
+    it('should open by click interaction on the data-target element', (done) => {
+      const tapTargetElem = document.querySelector('.tap-target');
+      M.TapTarget.init(tapTargetElem);
+      click(document.querySelector('.toggle-tap-target'));
+      setTimeout(() => {
+        expect(tapTargetElem).toBeVisible('taptarget was not visible after click interaction');
+        done();
+      }, 10);
+    });
+
+    it('should close by click interaction on the data-target element', (done) => {
+      const tapTargetElem = document.querySelector('.tap-target');
+      const toggleTapTargetElem = document.querySelector('.toggle-tap-target');
+      M.TapTarget.init(tapTargetElem);
+      click(toggleTapTargetElem);
+      setTimeout(() => {
+        click(toggleTapTargetElem);
+        setTimeout(() => {
+          expect(tapTargetElem).not.toBeVisible('taptarget was not hidden after click interaction');
+          done();
+        }, 400);
+      }, 400);
+    });
+
+    it('should have working callbacks', (done) => {
+      const toggleTapTargetElem = document.querySelector('.toggle-tap-target');
+      let opened = false;
+      let closed = false;
+      M.TapTarget.init(document.querySelector('.tap-target'), {
+        onOpen: () => {
+          opened = true;
+        },
+        onClose: () => {
+          closed = true;
+        },
+      });
+      click(toggleTapTargetElem);
+      expect(opened).toEqual(true, 'opened variable should be true after method callback');
+      setTimeout(() => {
+        click(toggleTapTargetElem);
+        expect(closed).toEqual(true, 'closed variable should be true after method callback');
+      }, 400);
+      done();
+    });
+
+    it('should destroy correctly', function(done) {
+      const tapTargetElem = document.querySelector('.tap-target');
+      expect(M.TapTarget._taptargets.length).toEqual(0, 'no tap targets initialized');
+      M.TapTarget.init(tapTargetElem);
+      expect(M.TapTarget._taptargets.length).toEqual(1, 'there should be 1 tap target initialization');
+      M.TapTarget.getInstance(tapTargetElem).destroy();
+      setTimeout(() => {
+        expect(M.TapTarget._taptargets.length).toEqual(0, 'no tap targets initialized');
+        done();
+      }, 10);
+    });
+  });
+});