kmaterialize 2.0.0 → 2.3.3-1.0.0

package/components/tabs/tabsSpec.js

@@ -0,0 +1,180 @@
+describe('Tabs Plugin', () => {
+  const fixture = `<div class="row">
+  <div class="col s12">
+    <ul class="tabs normal">
+      <li class="tab col s3"><a href="#test1">Test 1</a></li>
+      <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
+      <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
+      <li class="tab col s3"><a href="#test4">Test 4</a></li>
+      <li class="tab col s3"><a href="#test5">Test 4</a></li>
+      <li class="tab col s3"><a href="#test6">Test 4</a></li>
+      <li class="tab col s3"><a href="#test7">Test 4</a></li>
+      <li class="tab col s3"><a href="#test8">Test 4</a></li>
+    </ul>
+  </div>
+  <div id="test1" class="col s12">Test 1</div>
+  <div id="test2" class="col s12">Test 2</div>
+  <div id="test3" class="col s12">Test 3</div>
+  <div id="test4" class="col s12">Test 4</div>
+  <div id="test5" class="col s12">Test 1</div>
+  <div id="test6" class="col s12">Test 2</div>
+  <div id="test7" class="col s12">Test 3</div>
+  <div id="test8" class="col s12">Test 4</div>
+</div>`;
+
+  beforeEach(() => {
+    XloadHtml(fixture);
+    const normalTabs = document.querySelector('.tabs.normal');
+    M.Tabs.init(normalTabs, { duration: 0 });
+    window.location.hash = '';
+    //HACK the tabs init function not fully initializing. it restores state even after element has been removed from DOM, even after using tabInstance.destroy()
+    M.Tabs.getInstance(normalTabs).select('test2');
+  });
+  afterEach(() => XunloadFixtures());
+
+  describe('Tabs', () => {
+    it('should open to active tab', () => {
+      const normalTabs = document.querySelector('.tabs.normal');
+      const activeTab = normalTabs.querySelector('.active');
+      const activeTabHash = activeTab.getAttribute('href');
+      const tabLinks = normalTabs.querySelectorAll('.tab a');
+      for (let i = 0; i < tabLinks.length; i++) {
+        const tabHash = tabLinks[i].getAttribute('href');
+        if (tabHash === activeTabHash) {
+          expect(document.querySelector(tabHash)).toBeVisible(
+            'active tab content should be visible by default'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
+        } else {
+          expect(document.querySelector(tabHash)).toBeHidden(
+            'Tab content should be hidden by default'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
+        }
+      }
+      const indicator = normalTabs.querySelector('.indicator');
+      expect(indicator).toExist('Indicator should be generated');
+      // expect(Math.abs(indicator.offset().left - activeTab.offset().left)).toBeLessThan(1, 'Indicator should be at active tab by default.');
+    });
+
+    it('should switch to clicked tab', (done) => {
+      const normalTabs = document.querySelector('.tabs.normal');
+      const activeTab = normalTabs.querySelector('.active');
+      const activeTabHash = activeTab.getAttribute('href');
+      const disabledTab = normalTabs.querySelector('.disabled a');
+      const disabledTabHash = disabledTab.getAttribute('href');
+      const firstTab = normalTabs.querySelector('.tab a');
+      const firstTabHash = firstTab.getAttribute('href');
+      const indicator = normalTabs.querySelector('.indicator');
+      expect(indicator).toExist('Indicator should be generated');
+      // expect(Math.abs(indicator.offset().left - activeTab.offset().left)).toBeLessThan(1, 'Indicator should be at active tab by default.');
+      click(disabledTab);
+      setTimeout(() => {
+        expect(document.querySelector(activeTabHash)).toBeVisible(
+          'Clicking disabled should not change tabs.'
+        ); //TODO replace with alternative for deprecated jasmine-jquery
+        expect(document.querySelector(disabledTabHash)).toBeHidden(
+          'Clicking disabled should not change tabs.'
+        ); //TODO replace with alternative for deprecated jasmine-jquery
+
+        click(firstTab);
+
+        setTimeout(() => {
+          expect(document.querySelector(activeTabHash)).toBeHidden(
+            'Clicking tab should switch to that tab.'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
+          expect(document.querySelector(firstTabHash)).toBeVisible(
+            'Clicking tab should switch to that tab.'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
+          expect(indicator.offsetLeft).toEqual(
+            firstTab.offsetLeft,
+            'Indicator should move to clicked tab.'
+          );
+          done();
+        }, 10); // 400
+      }, 10); // 400
+    });
+
+    it("shouldn't hide active tab if clicked while active", (done) => {
+      const normalTabs = document.querySelector('.tabs.normal');
+      const activeTab = normalTabs.querySelector('.active');
+      const activeTabHash = activeTab.getAttribute('href');
+      const indicator = normalTabs.querySelector('.indicator');
+      expect(indicator).toExist('Indicator should be generated');
+      click(activeTab);
+      setTimeout(() => {
+        expect(document.querySelector(activeTabHash)).toBeVisible(
+          'Clicking active tab while active should not hide it.'
+        );
+        done();
+      }, 5); // 400
+    });
+
+    it('should horizontally scroll when too many tabs', (done) => {
+      let tabsScrollWidth = 0;
+      const normalTabs = document.querySelector('.tabs.normal');
+      normalTabs.style.width = '400px';
+      const tabs = normalTabs.querySelectorAll('.tab');
+      for (let i = 0; i < tabs.length; i++) {
+        setTimeout(() => {
+          tabsScrollWidth += tabs[i].offsetWidth;
+        }, 0);
+      }
+
+      setTimeout(() => {
+        expect(tabsScrollWidth).toBeGreaterThan(
+          normalTabs.offsetWidth,
+          'Scroll width should exceed tabs width'
+        );
+        done();
+      }, 5); // 400
+    });
+
+    it('should programmatically switch tabs', (done) => {
+      const normalTabs = document.querySelector('.tabs.normal');
+      const activeTab = normalTabs.querySelector('.active');
+      const activeTabHash = activeTab.getAttribute('href');
+      const firstTab = normalTabs.querySelector('li a');
+      const firstTabHash = firstTab.getAttribute('href');
+      const indicator = normalTabs.querySelector('.indicator');
+      const tabs = normalTabs.querySelectorAll('.tab a');
+      for (let i = 0; i < tabs.length; i++) {
+        const tabHash = tabs[i].getAttribute('href');
+        if (tabHash === activeTabHash) {
+          expect(document.querySelector(tabHash)).toBeVisible(
+            'active tab content should be visible by default'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
+        } else {
+          expect(document.querySelector(tabHash)).toBeHidden(
+            'Tab content should be hidden by default'
+          ); //TODO replace with alternative for deprecated jasmine-jquery
+        }
+      }
+
+      M.Tabs.getInstance(normalTabs).select('test1');
+
+      setTimeout(() => {
+        expect(document.querySelector(activeTabHash)).toBeHidden(
+          'Clicking tab should switch to that tab.'
+        ); //TODO replace with alternative for deprecated jasmine-jquery
+        expect(document.querySelector(firstTabHash)).toBeVisible(
+          'Clicking tab should switch to that tab.'
+        ); //TODO replace with alternative for deprecated jasmine-jquery
+        expect(indicator.offsetLeft).toEqual(
+          firstTab.offsetLeft,
+          'Indicator should move to clicked tab.'
+        );
+        done();
+      }, 5); // 400
+    });
+
+    it("shouldn't error if tab has no associated content", (done) => {
+      document.querySelector('#test8').remove();
+      const tabNoContent = document.querySelector('[href="#test8"]');
+      expect(tabNoContent).toNotHaveClass('active', 'Tab should not be selected');
+      click(tabNoContent);
+      setTimeout(() => {
+        expect(tabNoContent).toHaveClass('active', 'Tab should be selected even with no content');
+        done();
+      }, 10); // 400
+    });
+  });
+});

package/components/textfield/_file-input.scss

@@ -0,0 +1,41 @@
+.file-field {
+  display: grid;
+  grid-template-columns: min-content auto;
+  gap: 10px;
+  //position: relative;
+
+  .file-path-wrapper {
+    overflow: hidden;
+  }
+
+  input.file-path { width: 100%; }
+
+  .btn {
+    height: 3rem;
+    line-height: 3rem;
+  }
+
+  span {
+    cursor: pointer;
+  }
+
+  input[type=file] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;    
+    cursor: pointer;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    font-size: 20px;    
+    filter: alpha(opacity=0);
+
+    // Needed to override webkit button
+    &::-webkit-file-upload-button {
+      display: none;
+    }
+  }
+}

package/components/textfield/_input-fields.scss

@@ -0,0 +1,368 @@
+@use '../../sass/variables' as *;
+
+/* Style Placeholders */
+::placeholder {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+/* Text inputs */
+input:not([type]):not(.browser-default),
+input[type=text]:not(.browser-default),
+input[type=password]:not(.browser-default),
+input[type=email]:not(.browser-default),
+input[type=url]:not(.browser-default),
+input[type=time]:not(.browser-default),
+input[type=date]:not(.browser-default),
+input[type=datetime]:not(.browser-default),
+input[type=datetime-local]:not(.browser-default),
+input[type=month]:not(.browser-default),
+input[type=tel]:not(.browser-default),
+input[type=number]:not(.browser-default),
+input[type=search]:not(.browser-default),
+textarea.materialize-textarea {
+  outline: none;
+  color: var(--md-sys-color-on-background);
+  width: 100%;
+  font-size: $md_sys_typescale_body-large_size; //16px; // => 16 dp
+  height: 56px; // 56dp
+  background-color: transparent;
+}
+
+%invalid-input-style {
+  border-bottom: 2px solid var(--md-sys-color-error);
+  box-shadow: 0 1px 0 0 var(--md-sys-color-error);
+}
+
+%hidden-text > span {
+  display: none
+}
+
+%custom-error-message {
+  content: attr(data-error);
+  color: var(--md-sys-color-error);
+}
+
+.input-field {
+  --input-color: var(--md-sys-color-primary);
+
+  position: relative;
+  clear: both;
+
+  // Default
+
+  input, textarea {
+    box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/
+    padding: 0 16px;
+    padding-top: 20px;
+    //background-color: transparent; //background-color: var(--md-sys-color-surface);
+    border: none; // reset
+    border-radius: 4px; // md.sys.shape.corner.extra-small.top
+    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    &:focus:not([readonly]) {
+      border-bottom: 2px solid var(--input-color);
+      padding-top: 20px + 1px; // add border-width
+    }
+
+    &:disabled, &[readonly="readonly"] {
+      color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+      border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
+      background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 4%);
+    }
+
+    // Label
+    &:focus:not([readonly]) + label {
+      color: var(--input-color);
+    }
+    &:focus:not([readonly]) + label,
+    &:not([placeholder=' ']) + label,
+    &:not(:placeholder-shown) + label {
+      //font-size: 12px; // md.sys.typescale.body-small.size
+      // https://stackoverflow.com/questions/34717492/css-transition-font-size-avoid-jittering-wiggling
+      transform: scale(calc(12 / 16));
+      top: 8px;
+    }
+
+    &:disabled + label, &[readonly="readonly"] + label {
+      color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+    }
+
+    // Hide helper text on data message
+    &.invalid ~ .supporting-text[data-error] {
+      @extend %hidden-text;
+    }
+
+    // Invalid Input Style
+    &.invalid {
+      @extend %invalid-input-style;
+    }
+
+    // Custom Error message
+    &.invalid ~ .supporting-text:after {
+      @extend %custom-error-message;
+    }
+
+    &.invalid ~ label,
+    &:focus.invalid ~ label {
+      color: var(--md-sys-color-error);
+    }
+  }
+
+  input::placeholder {
+    user-select: none;
+  }
+
+  & > label {
+    color: var(--md-sys-color-on-surface-variant);
+    user-select: none;
+    font-size: 16px;
+    position: absolute;
+    left: 16px;
+    top: 16px;
+    cursor: text;
+    transform-origin: top left;
+    transition:
+      left 0.2s ease-out,
+      top 0.2s ease-out,
+      transform 0.2s ease-out
+    ;
+  }
+
+  // Sub-Infos
+
+  .supporting-text {
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: 12px;
+    padding: 0 16px;
+    margin-top: 4px;
+  }
+
+  .character-counter {
+    color: var(--md-sys-color-on-surface-variant);
+    font-size: 12px;
+    float: right;
+    padding: 0 16px;
+    margin-top: 4px;
+  }
+
+  .prefix {
+    position: absolute;
+    left: 12px;
+    top: 16px;
+    user-select: none;
+    display: flex;
+    align-self: center;
+  }
+
+  .suffix {
+    position: absolute;
+    right: 12px;
+    top: 16px;
+    user-select: none;
+  }
+
+  .prefix ~ input, .prefix ~ textarea {
+    padding-left: calc(12px + 24px + 16px);
+  }
+  .suffix ~ input, .suffix ~ textarea {
+    padding-right: calc(12px + 24px + 16px);
+  }
+  .prefix ~ label {
+    left: calc(12px + 24px + 16px);
+  }
+
+  // Outlined
+
+  // todo: use this approach for floating labels with outline
+  // https://dev.to/icyjoseph/use-more-html-elements-floating-from-field-37o9
+
+  &.outlined {
+
+    input, textarea {
+      padding-top: 0;
+      background-color: transparent; //(--md-sys-color-background);
+      border: 1px solid var(--md-sys-color-on-surface-variant);
+      border-radius: 4px; // md.sys.shape.corner.extra-small
+
+      &:focus:not([readonly]) {
+        border: 2px solid var(--input-color);
+        padding-top: 0;
+        margin-left: -1px; // subtract border-width
+
+      }
+
+      // Label
+      &:focus:not([readonly]) + label {
+        color: var(--input-color);
+      }
+      &:focus:not([readonly]) + label,
+      &:not([placeholder=' ']) + label,
+      &:not(:placeholder-shown) + label {
+        top: -8px;
+        left: 16px;
+        margin-left: -4px;
+        padding: 0 4px;
+        // A solid chip behind the label masks the border line running
+        // through the text, giving the classic outlined-field notch cut.
+        // Transparent (the old value) let the border show straight through.
+        background-color: var(--md-sys-color-surface);
+      }
+
+      &:disabled, &[readonly="readonly"] {
+        color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+        border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
+      }
+    }
+  }
+
+  // Error
+  &.error {
+    // ".error" alone is also the MD3 color-token utility class (a solid
+    // error-colored background). Reset it here so a "error" state modifier
+    // on an .input-field doesn't paint the whole container red - only the
+    // border/label/text below should pick up the error color.
+    background-color: transparent;
+
+    input, textarea {
+      border-color: var(--md-sys-color-error);
+    }
+    input:focus:not([readonly]), textarea:focus:not([readonly]) {
+      border-color: var(--md-sys-color-error);
+    }
+    input:focus:not([readonly]) + label, textarea:focus:not([readonly]) + label {
+      color: var(--md-sys-color-error);
+    }
+    label {
+      color: var(--md-sys-color-error);
+    }
+    .supporting-text {
+      color: var(--md-sys-color-error);
+    }
+    .suffix {
+      color: var(--md-sys-color-error);
+    }
+  }
+}
+
+/* Inline */
+.inline {
+  display: inline-block;
+}
+
+/* Search Field */
+.searchbar {
+  .prefix {
+    position: absolute;
+    padding-left: 1rem;
+    top: 0;
+    user-select: none;
+    display: flex;
+    align-self: center;
+  }
+
+  & > input {
+    border-width: 0;
+    background-color: transparent;
+    padding-left: 3rem;
+  }
+}
+.searchbar.has-sidebar {
+  margin-left: 0;
+  @media #{$large-and-up} {
+    margin-left: 300px;
+  }
+}
+
+/*
+.input-field input[type=search] {
+  display: block;
+  line-height: inherit;
+
+  .nav-wrapper & {
+    height: inherit;
+    padding-left: 4rem;
+    width: calc(100% - 4rem);
+    border: 0;
+    box-shadow: none;
+  }
+  &:focus:not(.browser-default) {
+    border: 0;
+    box-shadow: none;
+  }
+  & + .label-icon {
+    transform: none;
+    left: 1rem;
+  }
+}
+*/
+
+/* Textarea */
+// Default textarea
+textarea {
+  width: 100%;
+  height: 3rem;
+  background-color: transparent;
+
+  &.materialize-textarea {
+    padding-top: 26px !important;
+    padding-bottom: 4px !important;
+    line-height: normal;
+    overflow-y: hidden; /* prevents scroll bar flash */
+    resize: none;
+    min-height: 3rem;
+    box-sizing: border-box;
+  }
+}
+
+// For textarea autoresize
+.hiddendiv {
+  visibility: hidden;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
+  padding-top: 1.2rem; /* prevents text jump on Enter keypress */
+  // Reduces repaints
+  position: absolute;
+  top: 0;
+  z-index: -1;
+}
+
+/* Autocomplete Items */
+.autocomplete-content {
+  li {
+    .highlight {
+      color: var(--md-sys-color-on-background);
+    }
+
+    img {
+      height: $dropdown-item-height - 10;
+      width: $dropdown-item-height - 10;
+      margin: 5px 15px;
+    }
+  }
+}
+
+/* Datepicker date input fields */
+.datepicker-date-input {
+  position: relative;
+  text-indent: -9999px;
+
+  &::after {
+    display: block;
+    position: absolute;
+    top: 1.10rem;
+    content: attr(data-date);
+    color: var(--input-color);
+    text-indent: 0;
+  }
+
+  &:focus-visible {
+    text-indent: 0;
+  }
+
+  &:focus-visible:after {
+    text-indent: -9999px;
+  }
+}

package/components/textfield/_select.scss

@@ -0,0 +1,104 @@
+@use '../../sass/variables' as *;
+
+select.browser-default {
+  opacity: 1;
+  color: var(--md-sys-color-on-background);
+}
+
+// TODO: Change to ".select" and not use tag name directly
+// Keep selects useable without javascript
+
+select {
+  background-color: var(--md-sys-color-surface);
+  width: 100%;
+  padding: 5px;
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: 2px;
+  height: 3rem;
+}
+
+.select-wrapper:focus-within {
+  outline: 2px solid var(--md-sys-color-primary);
+  border-radius: 4px;
+}
+
+.select-wrapper {
+  position: relative;
+
+  .caret {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    z-index: 0;
+    fill: var(--md-sys-color-on-background);
+    pointer-events: none;
+  }
+
+  // Hide select with overflow hidden instead of using display none
+  // (this prevents form validation errors with hidden form elements)
+  .hide-select {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    z-index: -1;
+  }
+}
+
+select:disabled {
+  color: var(--md-sys-color-on-surface);
+}
+
+.select-wrapper.disabled {
+  + label {
+    color: var(--md-sys-color-on-surface);
+  }
+  .caret {
+    fill: var(--md-sys-color-on-surface);
+  }
+}
+
+.select-wrapper input.select-dropdown:disabled {
+  color: var(--md-sys-color-on-surface);
+  cursor: default;
+  user-select: none;
+}
+
+.select-wrapper i {
+  color: var(--md-sys-color-on-surface);
+}
+
+.select-dropdown li.disabled,
+.select-dropdown li.disabled > span,
+.select-dropdown li.optgroup {
+  color: var(--md-sys-color-on-surface);
+  //background-color: transparent;
+}
+
+// Icons
+.select-dropdown li {
+  img {
+    height: $dropdown-item-height - 10;
+    width: $dropdown-item-height - 10;
+    margin: 5px 15px;
+    object-fit: cover;
+    float: right;
+  }
+}
+
+// Optgroup styles
+.select-dropdown li.optgroup {
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+  &.selected > span {
+    color: var(--md-sys-color-on-background);
+  }
+  & > span {
+    color: var(--md-sys-color-on-surface-variant);
+  }
+  & ~ li.optgroup-option {
+    padding-left: 1rem;
+  }
+}