kmaterialize 2.0.0 → 2.3.3-1.0.0

package/components/collapsible/collapsibleSpec.js

@@ -0,0 +1,240 @@
+describe('Collapsible Plugin:', () => {
+  let collapsible, accordion, popout, expandable, expandablePreselect;
+
+  const fixture = `<ul class="collapsible expandable" data-collapsible="expandable">
+  <li>
+    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+  </li>
+  <li>
+    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+  </li>
+  <li>
+    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+  </li>
+</ul>
+<ul class="collapsible expandable-preselected" data-collapsible="expandable">
+  <li>
+    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+  </li>
+  <li class="active">
+    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+  </li>
+  <li>
+    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+  </li>
+</ul>
+
+
+<ul class="collapsible accordion" data-collapsible="accordion">
+  <li>
+    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+  </li>
+  <li>
+    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+  </li>
+  <li>
+    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+  </li>
+</ul>
+
+<ul class="collapsible popout" data-collapsible="expandable">
+  <li>
+    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+  </li>
+  <li>
+    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+  </li>
+  <li>
+    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
+    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
+  </li>
+</ul>`;
+
+  beforeEach(() => {
+    XloadHtml(fixture);
+    collapsible = document.querySelectorAll('.collapsible');
+    expandable = document.querySelector('.expandable');
+    expandablePreselect = document.querySelector('.expandable-preselected');
+    accordion = document.querySelector('.accordion');
+    popout = document.querySelector('.popout');
+    M.Collapsible.init(collapsible, { inDuration: 0, outDuration: 0 });
+    M.Collapsible.init(expandable, { accordion: false, inDuration: 0, outDuration: 0 });
+    M.Collapsible.init(expandablePreselect, { accordion: false, inDuration: 0, outDuration: 0 });
+  });
+
+  afterEach(() => XunloadFixtures());
+
+  describe('collapsible', () => {
+    it('should open all items, keeping all open', (done) => {
+      // Collapsible body height should be 0 on start when hidden.
+      const headers = expandable.querySelectorAll('.collapsible-header');
+      const bodies = expandable.querySelectorAll('.collapsible-body');
+      for (let i = 0; i < bodies.length; i++) {
+        expect(bodies[i]).hasMaxHeightZero(
+          'because collapsible bodies should be hidden initially.'
+        );
+        //TODO replace with alternative for deprecated jasmine-jquery
+      }
+      // Collapsible body height should be > 0 after being opened.
+      for (let i = 0; i < headers.length; i++) {
+        click(headers[i]);
+      }
+      setTimeout(() => {
+        for (let i = 0; i < bodies.length; i++) {
+          expect(bodies[i]).notHasMaxHeightZero(
+            'because collapsible bodies not visible after being opened.'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
+        }
+        done();
+      }, 10);
+    });
+
+    it('should allow preopened sections', () => {
+      const bodies = expandablePreselect.querySelectorAll('.collapsible-body');
+      for (let i = 0; i < bodies.length; i++) {
+        const headerLi = bodies[i].parentNode;
+        if (i === 1) {
+          expect(headerLi).toHaveClass(
+            'active',
+            'because collapsible header should have active class to be preselected.'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
+          expect(bodies[i]).notHasMaxHeightZero(
+            'because collapsible bodies should be visible if preselected.'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
+        } else {
+          expect(bodies[i]).hasMaxHeightZero(
+            'because collapsible bodies should be hidden initially.'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
+        }
+      }
+    });
+
+    it('should open and close programmatically with callbacks', (done) => {
+      let openCallback = false;
+      let closeCallback = false;
+      M.Collapsible.init(expandable, {
+        accordion: false,
+        onOpenStart: () => {
+          openCallback = true;
+        },
+        onCloseStart: () => {
+          closeCallback = true;
+        },
+        inDuration: 0,
+        outDuration: 0
+      });
+      const bodies = expandable.querySelectorAll('.collapsible-body');
+      expect(openCallback).toEqual(false, 'because open callback not yet fired');
+      expect(closeCallback).toEqual(false, 'because close callback not yet fired');
+      for (let i = 0; i < bodies.length; i++) {
+        //TODO replace with alternative for deprecated jasmine-jquery
+        expect(bodies[i]).hasMaxHeightZero(
+          'because collapsible bodies should be hidden initially.'
+        );
+        const collapsibleInstance = M.Collapsible.getInstance(bodies[i].parentNode.parentNode);
+        collapsibleInstance.open(i);
+      }
+      expect(openCallback).toEqual(true, 'because open callback fired');
+      setTimeout(() => {
+        for (let i = 0; i < bodies.length; i++) {
+          expect(bodies[i]).notHasMaxHeightZero(
+            'because collapsible bodies should be visible after being opened.'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
+          M.Collapsible.getInstance(bodies[i].parentNode.parentNode).close(i);
+        }
+        expect(closeCallback).toEqual(true, 'because close callback fired');
+        setTimeout(() => {
+          for (let i = 0; i < bodies.length; i++) {
+            expect(bodies[i]).hasMaxHeightZero(
+              'because collapsible bodies should be hidden after close.'
+            ); //TODO replace with alternative for deprecated jasmine-jquery
+          }
+          done();
+        }, 10);
+      }, 10);
+    });
+  });
+
+  describe('accordion', () => {
+    it('should open first and second items, keeping only second open', (done) => {
+      // Collapsible body height should be 0 on start when hidden.
+      const firstHeader = accordion.querySelector('.collapsible-header');
+      const firstBody = accordion.querySelector('.collapsible-body');
+      const secondHeader = accordion.querySelectorAll('.collapsible-header')[1];
+      const secondBody = accordion.querySelectorAll('.collapsible-body')[1];
+      expect(firstBody).hasMaxHeightZero('because accordion bodies should be hidden initially.');
+      expect(secondBody).hasMaxHeightZero('because accordion bodies should be hidden initially.');
+      // Collapsible body height should be > 0 after being opened.
+      firstHeader.click();
+      setTimeout(() => {
+        expect(firstBody).notHasMaxHeightZero(
+          'because accordion bodies not visible after being opened.'
+        );
+        click(secondHeader);
+        setTimeout(() => {
+          expect(firstBody).hasMaxHeightZero(
+            'because accordion bodies should be hidden when another item is opened.'
+          );
+          expect(secondBody).notHasMaxHeightZero(
+            'because accordion bodies not visible after being opened.'
+          );
+          done();
+        }, 10);
+      }, 10);
+    });
+  });
+
+  describe('popout', () => {
+    it('should open first and popout', (done) => {
+      // Collapsible body height should be 0 on start when hidden.
+      const listItems = popout.querySelectorAll('li');
+      const firstHeader = popout.querySelector('.collapsible-header');
+      const firstBody = popout.querySelector('.collapsible-body');
+      expect(firstBody).hasMaxHeightZero('because accordion bodies should be hidden initially.');
+      // Expect margin to be > 0 because not popped out.
+      for (let i = 0; i < listItems.length; i++) {
+        const listItemStyles = getComputedStyle(listItems[i]);
+        const marginLeft = parseInt(listItemStyles.getPropertyValue('margin-left'));
+        const marginRight = parseInt(listItemStyles.getPropertyValue('margin-right'));
+        expect(marginLeft).toBeGreaterThan(
+          0,
+          'because closed popout items should have horizontal margins.'
+        );
+        expect(marginRight).toBeGreaterThan(
+          0,
+          'because closed popout items should have horizontal margins.'
+        );
+      }
+      // expect margin to be 0 because popped out.
+      click(firstHeader);
+      setTimeout(() => {
+        const firstStyles = getComputedStyle(listItems[0]);
+        const firstMarginLeft = parseInt(firstStyles.getPropertyValue('margin-left'));
+        const firstMarginRight = parseInt(firstStyles.getPropertyValue('margin-right'));
+        expect(firstMarginLeft).toEqual(
+          0,
+          'because opened popout items should have no horizontal margins.'
+        );
+        expect(firstMarginRight).toEqual(
+          0,
+          'because opened popout items should have no horizontal margins.'
+        );
+        expect(firstBody).notHasMaxHeightZero(
+          'because accordion bodies not visible after being opened.'
+        );
+        done();
+      }, 300);
+    });
+  });
+});

package/components/datepicker/_datepicker.scss

@@ -0,0 +1,268 @@
+@use '../../sass/mixins.module.scss' as *;
+
+.datepicker-container {
+  display: flex;
+  flex-direction: column;
+  max-width: 325px;
+  padding: 0;
+  background-color: var(--md-sys-color-inverse-on-surface);
+}
+
+.datepicker-controls {
+  display: flex;
+  justify-content: space-between;
+  width: 280px;
+  margin: 0 auto;
+
+  .selects-container {
+    display: flex;
+  }
+
+  .select-wrapper {
+    input {
+      height: 49px;
+      margin: 4px 0 0 0;
+      border-bottom: none;
+      border-radius: 4px;
+      text-align: center;
+
+      &:focus {
+        color: var(--md-sys-color-primary);
+        background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+      }
+
+      &::selection {
+        background-color: transparent;
+      }
+    }
+
+    .caret {
+      display: none;
+    }
+  }
+
+  .select-dropdown {
+    padding: 0;
+    vertical-align: middle;
+  }
+
+  .select-year input,
+  .select-month input {
+    background-color: transparent;
+  }
+
+  .select-year input {
+    width: 50px;
+  }
+
+  .select-month input {
+    width: 80px;
+  }
+
+  .month-prev,
+  .month-next {
+    display: inline-flex;
+    align-items: center;
+
+    @include btn($height: 49px);
+
+    &:focus {
+      background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
+    }
+  }
+
+  .month-prev > svg,
+  .month-next > svg {
+    fill: var(--md-sys-color-on-surface-variant);
+  }
+}
+
+.month-prev, .month-next {
+  height: 49px;
+  margin-top: 4px;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}
+
+
+/* Date Display */
+.datepicker-date-display {
+  flex: 1 auto;
+  // @removed since v2.2.1-dev regarding Material M3 standards
+  // background-color: var(--md-sys-color-primary);
+  // color:  var(--md-sys-color-on-primary);
+  padding: 20px 22px;
+  border-bottom: 1px solid var(--md-sys-color-surface-variant-light);
+  font-weight: 500;
+
+  .year-text {
+    display: block;
+    font-size: 1.5rem;
+    line-height: 25px;
+    color: var(--md-sys-color-on-primary);
+  }
+
+  .date-text {
+    display: block;
+    font-size: 2.8rem;
+    line-height: 47px;
+    font-weight: 500;
+  }
+
+  .daterange & {
+    .date-text {
+      font-size: 1.8rem;
+    }
+  }
+}
+
+
+/* Calendar */
+.datepicker-calendar-container {
+  flex: 2.5 auto;
+}
+
+.datepicker-table {
+  width: 280px;
+  font-size: 1rem;
+  margin: 0 auto;
+
+  thead {
+    border-bottom: none;
+  }
+
+  th {
+    padding: 10px 5px;
+    text-align: center;
+  }
+
+  tr {
+    border: none;
+  }
+
+  abbr {
+    text-decoration: none;
+    color: var(--md-sys-color-on-surface-variant);
+  }
+
+  .datepicker-day {
+    padding: 0;
+    color: var(--md-sys-color-on-background);
+    // border-radius: 50%;
+
+    &.is-today {
+      color: var(--md-sys-color-primary);
+    }
+
+    /*&.is-selected button {
+      background-color: var(--md-sys-color-primary);
+      color:  var(--md-sys-color-on-primary);
+    }*/
+  }
+}
+
+// @todo
+.datepicker-day.has-event {}
+// @todo
+.datepicker-day.is-inrange {}
+// @todo
+.datepicker-day.is-startrange {}
+// @todo
+.datepicker-day.is-endrange {}
+
+.datepicker-day.is-daterange-start,
+.datepicker-day.is-daterange-end,
+.datepicker-day.is-daterange {
+  position: relative;
+
+  &:before {
+    position: absolute;
+    top: 5px;
+    width: 100%;
+    height: 34px;
+    content: '';
+    background-color: var(--md-sys-color-primary-container);
+    z-index: 0;
+  }
+}
+
+.datepicker-day.is-daterange-start:before,
+.datepicker-day.is-daterange-end:before {
+  width: 50%;
+}
+
+.datepicker-day.is-daterange-start:before {
+  left: 50%;
+}
+
+.datepicker-day.is-daterange .datepicker-day-button:before {
+  background-color: var(--md-sys-color-primary-container);
+}
+
+.datepicker-day-button {
+  background-color: transparent;
+  border: none;
+  line-height: 34px;
+  display: block;
+  width: 34px;
+  border-radius: 50%;
+  margin: 5px;
+  padding: 0 5px;
+  cursor: pointer;
+  color: inherit;
+  position: relative;
+  z-index: 1;
+
+  &:hover {
+    background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 6%);
+  }
+
+  &:focus {
+    border-color: var(--md-sys-color-primary);
+  }
+
+  .is-selected & {
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
+
+    &:focus {
+      background-color: var(--md-sys-color-surface-variant);
+      color: var(--md-sys-color-primary);
+    }
+  }
+
+  &.is-outside-current-month button,
+  &.is-disabled button {
+    color: var(--md-sys-color-on-surface);
+    pointer-events: none;
+  }
+}
+
+/* Footer */
+.datepicker-footer {
+  width: 280px;
+  margin: 0 auto;
+  padding-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.datepicker-cancel,
+.datepicker-clear,
+.datepicker-today,
+.datepicker-done {
+  color: var(--md-sys-color-primary);
+  padding: 0 1rem;
+}
+
+.datepicker-clear {
+  color: var(--md-sys-color-error);
+}
+
+/* Display modes */
+.datepicker-modal {
+  max-width: calc(325px + var(--modal-padding) * 2);
+  max-height: none;
+  background-color: var(--md-sys-color-inverse-on-surface);
+}