@shortfuse/materialdesignweb 0.4.0 → 0.5.0

package/components/textfield/_theme.scss

@@ -1,299 +1,264 @@
-// https://material.io/archive/guidelines/components/text-fields.html#text-fields-states
+/* https://material.io/archive/guidelines/components/text-fields.html#text-fields-states */
 
-@use '../../core/theme/_mixins.scss' as theme;
 @use '../../core/_platform.scss' as platform;
 
-$themeValues: (
-  
-  text-color:                         theme.$foreground,
-  default-text-opacity:               theme.$high-opacity,
-  secondary-text-opacity:             theme.$medium-opacity,
-  disabled-opacity:                   theme.$inactive-opacity,
-
-  placeholder-color__focus:           (('foreground-light', 0.42), ('foreground-dark', 0.50)),
-  filled-disabled-border-color:       (('foreground-light', 0.10), ('foreground-dark', 0.30)),
-  filled-disabled-background-color:   (('foreground-light', 0.03), ('foreground-dark', 0.05)),
-  fill-color:                         (('foreground-light', 0.06), ('foreground-dark', 0.10)),
-  fill-color__hover:                  (('foreground-light', 0.12), ('foreground-dark', 0.20)),
-  border-line-color:                  (('foreground-light', 0.42), ('foreground-dark', 0.70)),
-  border-line-color__hover:           (('foreground-light', 0.87), ('foreground-dark', 1.00)),
-
-  warn-color:                         (('warn', 'A700', 1.00), ('warn', 'A200', 1.00)),
-  warn-color__selection:              (('warn', 'A700', 0.20), ('warn', 'A200', 0.40)),
-
-  selection-opacity:                  (0.08 + 0.12, 0.16 + 0.24),
-) !default;
-
-@function getThemeValue($key, $type) {
-  @return theme.getThemeValue('textfield', $themeValues, $key, $type);
+.mdw-theme {
+  --mdw-textfield__text-rgb: var(--mdw-ink-default);
+  --mdw-textfield__default-text-opacity: var(--mdw-high-opacity);
+  --mdw-textfield__secondary-text-opacity: var(--mdw-medium-opacity);
+  --mdw-textfield__disabled-opacity: var(--mdw-inactive-opacity);
 }
 
-@mixin addThemeRules($type: 'var') {
-  .mdw-textfield[mdw-outlined] {
-    &:active > .mdw-textfield__input:not(:disabled),
-    & > .mdw-textfield__input:not(:disabled):focus {
-      & ~ .mdw-textfield__border {
-          color: inherit;
-      }
-    }
+.mdw-theme[mdw-light] {
+  --mdw-textfield__placeholder-color__focus: RGBA(var(--mdw-ink-default), 0.42);
+  --mdw-textfield__filled-disabled-border-color: RGBA(var(--mdw-ink-default), 0.10);
+  --mdw-textfield__filled-disabled-background-color: RGBA(var(--mdw-ink-default), 0.03);
+  --mdw-textfield__fill-color: RGBA(var(--mdw-ink-default), 0.06);
+  --mdw-textfield__fill-color__hover: RGBA(var(--mdw-ink-default), 0.12);
+  --mdw-textfield__border-line-color: RGBA(var(--mdw-ink-default), 0.42);
+  --mdw-textfield__border-line-color__hover: RGBA(var(--mdw-ink-default), 0.87);
 
-    &,
-    &[mdw-ink] {
-      &:active > .mdw-textfield__input:not(:disabled),
-      & > .mdw-textfield__input:not(:disabled):focus {
-        &:invalid {
-          & ~ .mdw-textfield__border,
-          & ~ .mdw-textfield__border::before {
-            color: RGBA(getThemeValue("warn-color", $type));
-          }
-        }
-      }
-    }
-  }
+  --mdw-textfield__warn-color: RGBA(var(--mdw-alias-warn-A700), 1.00);
+  --mdw-textfield__warn-color__selection: RGBA(var(--mdw-alias-warn-A700), 0.20);
+
+  --mdw-textfield__selection-opacity: #{0.08 + 0.12};
+
+  --mdw-textfield__date-picker-filter: none;
+}
+
+.mdw-theme[mdw-dark] {
+  --mdw-textfield__placeholder-color__focus: RGBA(var(--mdw-ink-default), 0.50);
+  --mdw-textfield__filled-disabled-border-color: RGBA(var(--mdw-ink-default), 0.30);
+  --mdw-textfield__filled-disabled-background-color: RGBA(var(--mdw-ink-default), 0.05);
+  --mdw-textfield__fill-color: RGBA(var(--mdw-ink-default), 0.10);
+  --mdw-textfield__fill-color__hover: RGBA(var(--mdw-ink-default), 0.20);
+  --mdw-textfield__border-line-color: RGBA(var(--mdw-ink-default), 0.70);
+  --mdw-textfield__border-line-color__hover: RGBA(var(--mdw-ink-default), 1.00);
+
+  --mdw-textfield__warn-color: RGBA(var(--mdw-alias-warn-A200), 1.00);
+  --mdw-textfield__warn-color__selection: RGBA(var(--mdw-alias-warn-A200), 0.40);
 
-  .mdw-textfield__error-text {
-    color: RGBA(getThemeValue("warn-color", $type));
+  --mdw-textfield__selection-opacity: #{0.16 + 0.24};
+  --mdw-textfield__date-picker-filter: invert(1);
+}
+
+.mdw-textfield[mdw-outlined] {
+  &:active > .mdw-textfield__input:not(:disabled),
+  & > .mdw-textfield__input:not(:disabled):focus {
+    & ~ .mdw-textfield__border {
+      color: inherit;
+    }
   }
 
-  .mdw-textfield {
-    // Focus
+  &,
+  &[mdw-ink] {
     &:active > .mdw-textfield__input:not(:disabled),
-    & > .mdw-textfield__input:not(:disabled):active,
     & > .mdw-textfield__input:not(:disabled):focus {
-      @if($type == 'var') {
-        &::selection {
-          background-color: RGBA(var(--mdw-ink), getThemeValue("selection-opacity", $type));
+      &:invalid {
+        & ~ .mdw-textfield__border,
+        & ~ .mdw-textfield__border::before {
+          color: var(--mdw-textfield__warn-color);
         }
       }
+    }
+  }
+}
 
-      & ~ .mdw-textfield__border {
-        border-bottom-color: inherit;
-        color: inherit;
-      }
-      & ~ .mdw-textfield__border .mdw-textfield__label {
-        color: inherit;
-      }
+.mdw-textfield__error-text {
+  color: var(--mdw-textfield__warn-color);
+}
 
-      & ~ .mdw-textfield__border::before {
-        color: inherit;
-      }
+.mdw-textfield {
+  // Focus
+  &:active > .mdw-textfield__input:not(:disabled),
+  & > .mdw-textfield__input:not(:disabled):active,
+  & > .mdw-textfield__input:not(:disabled):focus {
+    &::selection {
+      background-color: RGBA(var(--mdw-ink), var(--mdw-textfield__selection-opacity));
     }
 
-    &:active > .mdw-textfield__input:not(:disabled):invalid,
-    & > .mdw-textfield__input:not(:disabled):focus:invalid {
-      caret-color: RGBA(getThemeValue("warn-color", $type));
+    & ~ .mdw-textfield__border {
+      border-block-end-color: inherit;
+      color: inherit;
+    }
 
-      &::selection {
-        background-color: RGBA(getThemeValue("warn-color__selection", $type));
-      }
+    & ~ .mdw-textfield__border .mdw-textfield__label {
+      color: inherit;
+    }
 
-      & ~ .mdw-textfield__border {
-        border-bottom-color: currentColor;
-        color: RGBA(getThemeValue("warn-color", $type));
-      }
+    & ~ .mdw-textfield__border::before {
+      color: inherit;
+    }
+  }
 
-      & ~ .mdw-textfield__border .mdw-textfield__label {
-        // color: getThemeValue("warn-color", $type);
-      }
+  &:active > .mdw-textfield__input:not(:disabled):invalid,
+  & > .mdw-textfield__input:not(:disabled):focus:invalid {
+    caret-color: var(--mdw-textfield__warn-color);
 
-      & ~ .mdw-textfield__border::after {
-        color: RGBA(getThemeValue("warn-color", $type));
-      }
+    &::selection {
+      background-color: var(--mdw-textfield__warn-color__selection);
+    }
 
+    & ~ .mdw-textfield__border {
+      border-block-end-color: currentColor;
+      color: var(--mdw-textfield__warn-color);
     }
-  }
 
-  .mdw-textfield__signifier,
-  .mdw-textfield__label,
-  .mdw-textfield__prefix,
-  .mdw-textfield__suffix {
-    color: RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
-  }
+    & ~ .mdw-textfield__border .mdw-textfield__label {
+      // color: var(--mdw-textfield__warn-color);
+    }
 
-  .mdw-textfield__icon[mdw-dropdown] {
-    color: RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
-  }
+    & ~ .mdw-textfield__border::after {
+      color: var(--mdw-textfield__warn-color);
+    }
 
-  .mdw-textfield[mdw-value-empty] > input.mdw-textfield__input:not(:focus) {
-    color: transparent;
   }
+}
 
-  input.mdw-textfield__input:not(:focus):placeholder-shown {
-    color: transparent;
-  }
+.mdw-textfield__signifier,
+.mdw-textfield__label,
+.mdw-textfield__prefix,
+.mdw-textfield__suffix {
+  color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
+}
 
-  .mdw-textfield__input::selection {
-    // color: inherit;
-  }
+.mdw-textfield__icon[mdw-dropdown] {
+  color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
+}
 
-  .mdw-textfield__input::placeholder {
-    color: RGBA(getThemeValue("placeholder-color__focus", $type));
-  }
+.mdw-textfield[mdw-value-empty] > input.mdw-textfield__input:not(:focus) {
+  color: transparent;
+}
 
-  .mdw-textfield__input:-ms-input-placeholder {
-    color: RGBA(getThemeValue("placeholder-color__focus", $type)) !important;
-  }
+input.mdw-textfield__input:not(:focus):placeholder-shown {
+  color: transparent;
+}
 
-  .mdw-textfield__input::-ms-input-placeholder {
-    color: RGBA(getThemeValue("placeholder-color__focus", $type)) !important;
-  }
+.mdw-textfield__input::-webkit-calendar-picker-indicator {
+  filter: var(--mdw-textfield__date-picker-filter);
+}
 
-  .mdw-textfield__input {
-    color: RGBA(getThemeValue("text-color", $type), getThemeValue("default-text-opacity", $type));
-    @if ($type == 'var') {
-      caret-color: RGBA(var(--mdw-ink));
-    } @else {
-      caret-color: inherit;
-    }
+.mdw-textfield__input::selection {
+  // color: inherit;
+}
 
-    // Disabled
-    &:disabled,
-    &[aria-disabled="true"] {
-      &,
-      & ~ .mdw-textfield__border,
-      & ~ .mdw-textfield__border .mdw-textfield__label,
-      & ~ .mdw-textfield__signifier,
-      & ~ .mdw-textfield__prefix,
-      & ~ .mdw-textfield__suffix,
-      & ~ .mdw-textfield__icon {
-        color: RGBA(getThemeValue("text-color", $type), getThemeValue("disabled-opacity", $type));
-      }
-    }
+.mdw-textfield__input::placeholder {
+  color: var(--mdw-textfield__placeholder-color__focus);
+}
 
-    // Hover
-    &:not(:focus):hover:not(:disabled):not(:active) ~ .mdw-textfield__border,
-    &:not(:focus):not(:disabled):not(:active) ~ .mdw-textfield__border:hover {
-      color: RGBA(getThemeValue("border-line-color__hover", $type));
-    }
-    
-    &:not(:focus) {
-      /* Rules must be separated for IE11 support */
-      &:placeholder-shown ~ .mdw-textfield__prefix,
-      &:placeholder-shown ~ .mdw-textfield__suffix {
-        color: transparent;
-      }
+.mdw-textfield__input {
+  caret-color: RGBA(var(--mdw-ink));
 
-      .mdw-textfield[mdw-value-empty] > & ~ .mdw-textfield__prefix,
-      .mdw-textfield[mdw-value-empty] > & ~ .mdw-textfield__suffix {
-        color: transparent;
-      }
+  color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__default-text-opacity));
+
+  // Disabled
+  &:disabled,
+  &[aria-disabled="true"] {
+    &,
+    & ~ .mdw-textfield__border,
+    & ~ .mdw-textfield__border .mdw-textfield__label,
+    & ~ .mdw-textfield__signifier,
+    & ~ .mdw-textfield__prefix,
+    & ~ .mdw-textfield__suffix,
+    & ~ .mdw-textfield__icon {
+      color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__disabled-opacity));
     }
   }
 
-  select.mdw-textfield__input {
-    // Firefox focusring styling workaround
-    // https://dxr.mozilla.org/mozilla-central/source/browser/components/extensions/extension.css
-    .mdw-textfield[mdw-value-empty] > & {
-      color: RGBA(getThemeValue("placeholder-color__focus", $type));
-
-      &:focus {
-        color: RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
-      }
-
-      &:-moz-focusring {
-        color: transparent;
-        text-shadow: 0 0 0 RGBA(getThemeValue("placeholder-color__focus", $type));
-      }
+  // Hover
+  &:not(:focus):hover:not(:disabled):not(:active) ~ .mdw-textfield__border,
+  &:not(:focus):not(:disabled):not(:active) ~ .mdw-textfield__border:hover {
+    color: var(--mdw-textfield__border-line-color__hover);
+  }
 
-      &:focus:-moz-focusring {
-        color: transparent;
-        text-shadow: 0 0 0 RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
-      }
+  &:not(:focus) {
+    /* Rules must be separated for IE11 support */
+    &:placeholder-shown ~ .mdw-textfield__prefix,
+    &:placeholder-shown ~ .mdw-textfield__suffix {
+      color: transparent;
     }
 
-    &:-moz-focusring {
+    .mdw-textfield[mdw-value-empty] > & ~ .mdw-textfield__prefix,
+    .mdw-textfield[mdw-value-empty] > & ~ .mdw-textfield__suffix {
       color: transparent;
-      text-shadow: 0 0 0 RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
     }
+  }
+}
 
-    // On MS Browsers, color rule represents the dropdown popup's foreground color
-    @include platform.ifEdge() {
-      color: #000;
-    }
-    @media screen and (-ms-high-contrast: none) {
-      color: #000;
-    }
-    @media screen and (-ms-high-contrast: active) {
-      color: #fff;
+select.mdw-textfield__input {
+  // Firefox focusring styling workaround
+  // https://dxr.mozilla.org/mozilla-central/source/browser/components/extensions/extension.css
+  .mdw-textfield[mdw-value-empty] > & {
+    color: var(--mdw-textfield__placeholder-color__focus);
+
+    &:focus {
+      color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
     }
-    
 
-    // ::ms-value represents the closed state color
-    &::-ms-value {
-      background: transparent;
-      color: RGBA(getThemeValue("text-color", $type), getThemeValue("default-text-opacity", $type));
+    &:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 var(--mdw-textfield__placeholder-color__focus);
     }
 
-    // Dropdown caret
-    &::-ms-expand {
-      display: none;
+    &:focus:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
     }
   }
-  
-  .mdw-textfield__border {
-    color: RGBA(getThemeValue("border-line-color", $type));
-  }
 
-  .mdw-textfield__helper-text {
-    color: RGBA(getThemeValue("text-color", $type), getThemeValue("secondary-text-opacity", $type));
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
   }
 
+}
 
-  .mdw-textfield__input:disabled ~ .mdw-textfield__helper-text {
-    color: RGBA(getThemeValue("text-color", $type), getThemeValue("disabled-opacity", $type));
-  }
-
-  .mdw-textfield__input:focus:invalid ~ .mdw-textfield__helper-text {
-    color: transparent;
-  }
+.mdw-textfield__border {
+  color: var(--mdw-textfield__border-line-color);
+}
 
-  .mdw-textfield {
-    @if ($type != 'var') {
-      caret-color: currentColor;
-    }
+.mdw-textfield__helper-text {
+  color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__secondary-text-opacity));
+}
 
-    &:not([mdw-solo]) > .mdw-textfield__input:not(:focus)::placeholder {
-      color: transparent;
-    }
+.mdw-textfield__input:disabled ~ .mdw-textfield__helper-text {
+  color: RGBA(var(--mdw-textfield__text-rgb), var(--mdw-textfield__disabled-opacity));
+}
 
-    &:not([mdw-solo]) > .mdw-textfield__input:not(:focus):-ms-input-placeholder {
-      color: transparent !important;
-    }
+.mdw-textfield__input:focus:invalid ~ .mdw-textfield__helper-text {
+  color: transparent;
+}
 
-    &:not([mdw-solo]) > .mdw-textfield__input:not(:focus)::-ms-input-placeholder {
-      color: transparent !important;
-    }
+.mdw-textfield {
+  &:not([mdw-solo]) > .mdw-textfield__input:not(:focus)::placeholder {
+    color: transparent;
+  }
 
-    .mdw-textfield__input:not(:focus) ~ .mdw-textfield__border {
-      color: RGBA(getThemeValue("border-line-color", $type));
-    }
-    
-    .mdw-textfield__input:disabled ~ .mdw-textfield__border {
-      background-color: RGBA(getThemeValue("filled-disabled-background-color", $type));
-      color: RGBA(getThemeValue("filled-disabled-border-color", $type));
-    }
+  &:not([mdw-solo]) > .mdw-textfield__input:not(:focus):-ms-input-placeholder {
+    color: transparent !important;
+  }
 
-    &:not([mdw-outlined]) > .mdw-textfield__border {
-      background-color: RGBA(getThemeValue("fill-color", $type));
-    }
+  &:not([mdw-solo]) > .mdw-textfield__input:not(:focus)::-ms-input-placeholder {
+    color: transparent !important;
+  }
 
-    &:not([mdw-outlined]) > .mdw-textfield__input:not(:disabled) {
-      & ~ .mdw-textfield__border:hover,
-      &:hover ~ .mdw-textfield__border {
-        background-color: RGBA(getThemeValue("fill-color__hover", $type));
-      }
-    }
+  .mdw-textfield__input:not(:focus) ~ .mdw-textfield__border {
+    color: var(--mdw-textfield__border-line-color);
   }
-}
 
+  .mdw-textfield__input:disabled ~ .mdw-textfield__border {
+    background-color: var(--mdw-textfield__filled-disabled-background-color);
+    color: var(--mdw-textfield__filled-disabled-border-color);
+  }
 
-@include theme.addComponentFallbackRules('light') {
-  @include addThemeRules('light');
-}
-@include theme.addComponentFallbackRules('dark') {
-  @include addThemeRules('dark');
-}
+  &:not([mdw-outlined]) > .mdw-textfield__border {
+    background-color: var(--mdw-textfield__fill-color);
+  }
 
-@include theme.addComponentCSSVariableRules('textfield', $themeValues) {
-  @include addThemeRules();
+  &:not([mdw-outlined]) > .mdw-textfield__input:not(:disabled) {
+    & ~ .mdw-textfield__border:hover,
+    &:hover ~ .mdw-textfield__border {
+      background-color: var(--mdw-textfield__fill-color__hover);
+    }
+  }
 }

package/components/textfield/index.js

@@ -1,5 +1,3 @@
-import { getPassiveEventListenerOption } from '../../core/dom.js';
-
 /**
  * @param {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} inputElement
  * @return {void}
@@ -22,7 +20,6 @@ export function updateInputEmptyState(inputElement) {
  */
 export function updateTextAreaSize(inputElement) {
   const previousRowsAttrValue = inputElement.getAttribute('rows');
-  // eslint-disable-next-line no-param-reassign
   inputElement.rows = 1;
   const { height, paddingTop } = window.getComputedStyle(inputElement);
   if (!height || height === 'auto') {
@@ -33,9 +30,8 @@ export function updateTextAreaSize(inputElement) {
     }
     return -1;
   }
-  const heightPx = parseInt(height.replace('px', ''), 10);
-  const paddingTopPx = parseInt(paddingTop.replace('px', ''), 10);
-  // eslint-disable-next-line no-param-reassign
+  const heightPx = Number.parseInt(height.replace('px', ''), 10);
+  const paddingTopPx = Number.parseInt(paddingTop.replace('px', ''), 10);
   inputElement.rows = Math.floor((inputElement.scrollHeight - paddingTopPx) / heightPx);
   return heightPx;
 }
@@ -45,8 +41,7 @@ export function updateTextAreaSize(inputElement) {
  * @return {void}
  */
 export function onInput(event) {
-  /** @type {HTMLInputElement|HTMLTextAreaElement} */
-  const inputElement = (event.currentTarget);
+  const inputElement = /** @type {HTMLInputElement|HTMLTextAreaElement} */ (event.currentTarget);
   if (inputElement.parentElement.hasAttribute('mdw-autosize')) {
     updateTextAreaSize(/** @type {HTMLTextAreaElement} */ (inputElement));
   }
@@ -58,8 +53,7 @@ export function onInput(event) {
  * @return {string|Date|number}
  */
 export function getValue(textfieldElement) {
-  /** @type {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} */
-  const input = (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
+  const input = /** @type {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} */ (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
   if ((input instanceof HTMLTextAreaElement) || (input instanceof HTMLSelectElement)) {
     return input.value;
   }
@@ -83,12 +77,11 @@ export function getValue(textfieldElement) {
 
 /**
  * @param {Element} textfieldElement
- * @param {string|Date|number} [value]
+ * @param {string|Date|number|null} [value]
  * @return {void}
  */
 export function setValue(textfieldElement, value) {
-  /** @type {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} */
-  const input = (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
+  const input = /** @type {HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement} */ (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
   if (value == null) {
     input.value = null;
   } else if (input instanceof HTMLTextAreaElement || input instanceof HTMLSelectElement) {
@@ -147,10 +140,9 @@ export function setValue(textfieldElement, value) {
  * @return {void}
  */
 export function attach(textfieldElement) {
-  /** @type {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} */
-  const input = (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
+  const input = /** @type {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} */ (textfieldElement.getElementsByClassName('mdw-textfield__input')[0]);
   if (input) {
-    input.addEventListener('input', onInput, getPassiveEventListenerOption());
+    input.addEventListener('input', onInput, { passive: true });
     onInput({ currentTarget: input });
   }
 }