@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/mixins/TextFieldMixin.js

@@ -11,13 +11,13 @@ export default function TextFieldMixin(Base) {
   return Base
     .mixin(DensityMixin)
     .mixin(ShapeMixin)
-    .extend()
     .set({
       stateLayer: true,
     })
     .observe({
       type: { empty: 'text' },
       icon: 'string',
+      iconVariation: 'string',
       label: 'string',
       filled: 'boolean',
       outlined: 'boolean',
@@ -25,12 +25,13 @@ export default function TextFieldMixin(Base) {
       inputSuffix: 'string',
       trailingIcon: 'string',
       trailingIconInk: 'string',
+      trailingIconLabel: 'string',
       supporting: 'string',
       error: 'string',
       placeholder: { nullParser: String }, // DOMString
     })
     .observe({
-      erroredState({ error, _invalid }) { return Boolean(error || _invalid); },
+      erroredState({ error, _invalid, _userInteracted }) { return _userInteracted && Boolean(error || _invalid); },
     })
     .expressions({
       computePlaceholder({ filled, outlined, label, placeholder }) {
@@ -38,12 +39,12 @@ export default function TextFieldMixin(Base) {
         return placeholder ?? label;
       },
 
-      shouldShowSupporting({ _invalid, error, supporting }) {
-        return _invalid || ((error ?? supporting) != null);
+      shouldShowSupporting({ erroredState, supporting }) {
+        return erroredState || (supporting != null);
       },
 
-      computeSupportingText({ error, _validationMessage, supporting }) {
-        return (error || _validationMessage || supporting) ?? '';
+      computeSupportingText({ error, erroredState, _validationMessage, supporting }) {
+        return (error || (erroredState && _validationMessage) || supporting) ?? '';
       },
 
       populatedState({ value, _badInput }) {
@@ -53,70 +54,65 @@ export default function TextFieldMixin(Base) {
         return label && (filled || outlined);
       },
     })
-    .on({
-      composed({ template, html, inline }) {
-        const { control, label: labelElement, outline, shape, outlineLeft, outlineRight, state } = this.refs;
-        control.setAttribute('placeholder', '{computePlaceholder}');
-        control.setAttribute('aria-label', '{label}');
-        control.setAttribute('input-suffix', '{inputSuffix}');
-        control.setAttribute('errored', '{erroredState}');
-        control.removeAttribute('aria-labelledby');
-        control.classList.add('inline');
-
-        labelElement.classList.add('shape');
-        labelElement.setAttribute('filled', '{filled}');
-        labelElement.setAttribute('color', '{color}');
-        labelElement.setAttribute('icon', '{icon}');
-        labelElement.setAttribute('shape-style', '{shapeStyle}');
-        labelElement.setAttribute('trailingIcon', '{trailingIcon}');
-        labelElement.setAttribute('populated', '{populatedState}');
-        labelElement.setAttribute('outlined', '{outlined}');
-        labelElement.setAttribute('focused', '{focusedState}');
-        labelElement.setAttribute('label', '{label}');
-        labelElement.setAttribute('shape-top', inline(({ shapeTop, filled }) => shapeTop || filled));
-        labelElement.append(
-          state,
-          outline,
-          html`
-            <mdw-icon _if={icon} id=icon aria-hidden=true disabled={disabledState}>{icon}</mdw-icon>
-            <span _if={inputPrefix} class=inline id=prefix aria-hidden=true focused={focusedState} populated={populatedState}>{inputPrefix}</span>
-            <span _if={inputSuffix} class=inline id=suffix aria-hidden=true focused={focusedState} populated={populatedState}>{inputSuffix}</span>
-            <mdw-icon _if={trailingIcon} id=trailing-icon ink={trailingIconInk} aria-hidden=true disabled={disabledState}>{trailingIcon}</mdw-icon>
-            <div id=indicator _if={filled} focused={focusedState} hovered={hoveredState} errored={erroredState} disabled={disabledState} ></div>
-          `,
-        );
-
-        outline.setAttribute('label', '{label}');
-        outline.setAttribute('invalid', '{invalid}');
-        outline.setAttribute('errored', '{erroredState}');
-        outlineLeft.after(html`
-          <div id=gap _if={label} label={label} populated={populatedState} focused={focusedState}>
-            <div id=gap-slot focused={focusedState}></div>
-            <span id=gap-label>{label}</span>
-          </div>
-        `);
-
-        outlineLeft.setAttribute('focused', '{focusedState}');
-        outlineRight.setAttribute('focused', '{focusedState}');
-
-        shape.remove();
-        state.setAttribute('_if', '{!outlined}');
-
-        template.append(html`
-          <div id=label-text _if={_showLabelText} aria-hidden=true
-            outlined={outlined}
-            populated={populatedState}
-            focused={focusedState}
-            icon={icon}
-            trailing-icon={trailingIcon}
-            disabled={disabledState}
-            errored={erroredState}>{label}</div>
-          <div _if={shouldShowSupporting} id=supporting disabled={disabledState} errored={erroredState}>
-            {computeSupportingText}
-            <slot id=supporting-slot name=supporting></slot>
-          </div>
-        `);
+    .expressions({
+      _shapeShapeTop({ shapeTop, filled }) {
+        return shapeTop || filled;
+      },
+      computedIconVariation({ iconVariation, outlined }) {
+        return iconVariation ?? (outlined ? null : 'filled');
       },
+    })
+    .html`
+      <div id=shape role=none filled={filled} icon={icon} trailing-icon={trailingIcon}
+      populated={populatedState} focused={focusedState} label={label} outlined={outlined}
+      shape-top={_shapeShapeTop}>
+        <mdw-icon mdw-if={icon} id=icon aria-hidden=true disabled={disabledState} icon={icon} variation={computedIconVariation}></mdw-icon>
+        <div id=inline role=none filled={filled} icon={icon} trailing-icon={trailingIcon}
+          populated={populatedState} focused={focusedState} label={label} outlined={outlined}>
+          <span mdw-if={inputPrefix} class=inline id=prefix aria-hidden=true focused={focusedState} populated={populatedState}>{inputPrefix}</span>
+          <span mdw-if={inputSuffix} class=inline id=suffix aria-hidden=true focused={focusedState} populated={populatedState}>{inputSuffix}</span>
+        </div>
+        <mdw-icon-button tabindex=-1 disabled={disabledState} mdw-if={trailingIcon} id=trailing-icon ink={trailingIconInk} disabled={disabledState} icon={trailingIcon}>{trailingIconLabel}</mdw-icon-button>
+        <div mdw-if={filled} id=indicator aria-hidden=true focused={focusedState} hovered={hoveredState} errored={erroredState} disabled={disabledState}></div>
+      </div>
+      <div id=label-text mdw-if={_showLabelText} aria-hidden=true
+        outlined={outlined}
+        populated={populatedState}
+        focused={focusedState}
+        icon={icon}
+        trailing-icon={trailingIcon}
+        disabled={disabledState}
+        errored={erroredState}>{label}</div>
+      <div mdw-if={shouldShowSupporting} id=supporting disabled={disabledState} errored={erroredState}>
+        {computeSupportingText}
+        <slot id=supporting-slot name=supporting></slot>
+      </div>
+      
+    `
+    .recompose(({ html, refs: { control, outline, state, shape, inline } }) => {
+      control.setAttribute('placeholder', '{computePlaceholder}');
+      control.setAttribute('aria-label', '{label}');
+      control.setAttribute('input-suffix', '{inputSuffix}');
+      control.setAttribute('errored', '{erroredState}');
+      control.setAttribute('aria-describedby', 'supporting');
+      control.removeAttribute('aria-labelledby');
+      control.classList.add('inline');
+
+      state.setAttribute('mdw-if', '{!outlined}');
+      outline.append(html`
+        <div id=outline-left class=outline-section focused={focusedState}></div>
+        <div id=gap label={label} populated={populatedState} focused={focusedState}>
+          <div id=gap-slot focused={focusedState}></div>
+          <span id=gap-label>{label}</span>
+        </div>
+        <div id=outline-right class=outline-section focused={focusedState}></div>
+      `);
+      outline.setAttribute('label', '{label}');
+      outline.setAttribute('errored', '{erroredState}');
+      shape.prepend(outline, state);
+      inline.prepend(control);
+    })
+    .on({
       sizeChanged(oldValue, newValue) {
         this.refs.control.style.setProperty('--size', `${newValue}ch`);
       },
@@ -162,13 +158,15 @@ export default function TextFieldMixin(Base) {
 
         --descriptor-opacity: 0.5;
         --mdw-ink: var(--mdw-color__primary);
-        --mdw-bg: var(--mdw-color__surface-variant);
+        --mdw-bg: var(--mdw-color__surface-container-highest);
 
         --mdw-type__font: var(--mdw-typescale__body-large__font);
         --mdw-type__letter-spacing: var(--mdw-typescale__body-large__letter-spacing);
 
         display: inline-block;
 
+        border-radius: 0;
+
         /* State layer */
         color: rgb(var(--mdw-color__on-surface));
 
@@ -176,48 +174,35 @@ export default function TextFieldMixin(Base) {
         letter-spacing: var(--mdw-type__letter-spacing);
       }
 
-      :host([icon]) {
-        --padding-inline-start: 12px;
-      }
-
-      :host([trailing-icon]) {
-        --padding-inline-end: 12px;
-      }
-
       :host(:is([color], [ink])) {
         background-color: transparent;
         color: rgb(var(--mdw-color__on-surface));
       }
 
       /** Guard against bleed */
-      :host([label][outlined]) {
+      #shape[label][outlined] {
         --mdw-shape__size__top-start-size: min(var(--mdw-shape__size), 12px);
         --mdw-shape__size__bottom-start-size: min(var(--mdw-shape__size), 12px);
         --mdw-shape__size__top-end-size: min(var(--mdw-shape__size), 12px);
         --mdw-shape__size__bottom-end-size: min(var(--mdw-shape__size), 12px);
       }
 
-      #label[label][outlined] {
-        -webkit-mask-box-image-width: min(var(--mdw-shape__size), 12px);
-      }
-
-      #label {
+      #shape {
         position: relative;
 
         display: flex;
 
-        align-items: center;
-        overflow: visible;
-
-        padding-inline-start: 16px;
-        padding-inline-end: 16px;
-
         cursor: inherit;
 
         z-index: 0;
 
         background-color: transparent;
 
+        border-start-start-radius: calc(var(--mdw-shape__size__top-start-size));
+        border-start-end-radius: calc(var(--mdw-shape__size__top-end-size));
+        border-end-start-radius: calc(var(--mdw-shape__size__bottom-start-size));
+        border-end-end-radius: calc(var(--mdw-shape__size__bottom-end-size));
+
         font-weight: inherit;
         font-size: inherit;
         line-height: inherit;
@@ -227,12 +212,34 @@ export default function TextFieldMixin(Base) {
         transition: none 200ms cubic-bezier(0.0, 0.0, 0.2, 1);
       }
 
-      #label:is([filled],[color]) {
+      #inline {
+        display: flex;
+
+        align-items: center;
+        overflow: visible;
+
+        flex: 1;
+        padding-block: var(--control__margin-top) var(--control__margin-bottom);
+
+        cursor: inherit;
+
+        font-weight: inherit;
+        font-size: inherit;
+        line-height: inherit;
+        font-family: inherit;
+        letter-spacing: inherit;
+
+        transition: none 200ms cubic-bezier(0.0, 0.0, 0.2, 1);
+      }
+
+      
+
+      #shape:where([filled],[color]) {
         background-color: rgb(var(--mdw-bg));
         color: rgb(var(--mdw-color__on-surface));
       }
 
-      #label[outlined] {
+      #shape[outlined] {
         background-color: transparent;
       }
 
@@ -245,22 +252,13 @@ export default function TextFieldMixin(Base) {
         color: rgb(var(--mdw-ink))
       }
 
-      #label[icon] {
-        padding-inline-start: 12px;
-      }
-
-      #label[trailing-icon] {
-        padding-inline-end: 12px;
-      }
-
-      #label[focused] {
+      #shape[focused] {
         transition: none 100ms cubic-bezier(0.4, 0.0, 1, 1);
       }
 
-      #label[shape-top] {
+      #shape[shape-top] {
         --mdw-shape__size__bottom-start-size: 0px;
         --mdw-shape__size__bottom-end-size: 0px;
-        --mdw-shape__mask: linear-gradient(transparent 50%, black 50%);
       }
 
       #prefix,
@@ -285,16 +283,15 @@ export default function TextFieldMixin(Base) {
         inset: auto;
         align-self: flex-start;
 
-        display: inline;
+        display: inline-block;
 
         box-sizing: border-box;
 
         block-size: auto;
-        min-block-size: none;
+        min-block-size: 0;
         inline-size: 100%;
-        min-inline-size: none;
+        min-inline-size: 0;
         flex: 1;
-        border-block-start: solid var(--control__margin-top) transparent;
         border-block-end: solid var(--control__margin-bottom) transparent;
         padding-block: var(--control__padding-top) var(--control__padding-bottom);
 
@@ -304,7 +301,7 @@ export default function TextFieldMixin(Base) {
 
         transform: none;
 
-        visibility: visible;
+        visibility: inherit;
 
         background-color: transparent;
         border-color: transparent;
@@ -316,6 +313,7 @@ export default function TextFieldMixin(Base) {
         line-height: inherit;
         font-family: inherit;
         letter-spacing: inherit;
+        text-align: initial;
 
         transition-duration: inherit;
         transition-property: color;
@@ -325,7 +323,6 @@ export default function TextFieldMixin(Base) {
       #suffix,
       #prefix {
         /* Symmetrical to allow centering */
-        margin-block: var(--control__margin-top) var(--control__margin-bottom);
         padding-block: var(--control__padding-top) var(--control__padding-bottom);
       }
 
@@ -350,7 +347,7 @@ export default function TextFieldMixin(Base) {
       #icon {
         order: -2;
 
-        margin-inline-end: 16px;
+        margin-inline-start: 12px;
 
         font-size: 24px;
       }
@@ -366,7 +363,8 @@ export default function TextFieldMixin(Base) {
       #trailing-icon {
         order: 2;
 
-        margin-inline-start: 16px;
+        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+        margin-inline-end: 12px;
       }
 
       #indicator {
@@ -473,6 +471,31 @@ export default function TextFieldMixin(Base) {
 
       /** Outlined **/
 
+      #outline {
+        position: absolute;
+        inset: 0;
+
+        border-style: solid;
+        border-width: 0px;
+
+        pointer-events: none;
+
+        border-color: currentColor;
+        border-radius: inherit;
+        color: rgb(var(--mdw-color__outline));
+      }
+
+      #outline:is([pressed],[focused]) {
+        color: rgb(var(--mdw-ink));
+
+        transition-delay: 0;
+        transition-duration: 0;
+      }
+      
+      #outline[disabled] {
+        color: rgba(var(--mdw-color__on-surface), 0.12);
+      }
+
       #outline::before {
         content: none;
       }
@@ -609,73 +632,6 @@ export default function TextFieldMixin(Base) {
         border-block-start-width: 2px;
       }
 
-      @supports(-webkit-mask-box-image: none) {
-        #outline[focused] {
-          /** Fake 2px outline */
-          filter:
-            drop-shadow(1px 0px 0px currentColor)
-            drop-shadow(0px 1px 0px currentColor)
-            drop-shadow(-1px 0px 0px currentColor)
-            drop-shadow(0px -1px 0px currentColor);
-        }
-
-        #outline::before {
-          content: '';
-
-          position: absolute;
-          inset: 0;
-
-          grid-column: calc(2 - var(--mdw-dir, 1)) / span 1;
-          /* stylelint-disable-next-line liberty/use-logical-spec */
-          margin-right: -0.99px;
-          border: none;
-
-          background-color: currentColor;
-          -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
-            8 fill /
-            auto
-            stretch;
-          -webkit-mask-box-image-width: auto 0 auto auto;
-        }
-
-        #outline::after {
-          grid-column: calc(2 + var(--mdw-dir, 1)) / span 1;
-          grid-row: 1;
-
-          /* stylelint-disable-next-line liberty/use-logical-spec */
-          margin-left: -0.99px;
-          -webkit-mask-box-image-width: auto auto auto 0;
-        }
-
-        .outline-section {
-          border: none;
-        }
-
-        #gap::after {
-          border: none;
-
-          background-color: currentColor;
-          -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
-            8 fill /
-            auto
-            stretch;
-          -webkit-mask-box-image-width: 0 0 auto 0;
-        }
-
-        #gap-slot::before,
-        #gap-slot::after {
-          border: none;
-
-          background-color: currentColor;
-
-          -webkit-mask-box-image: var(--mdw-shape__mask-image__edges)
-            8 fill /
-            auto
-            stretch;
-          -webkit-mask-box-image-width: auto 0 0 0;
-        }
-      }
-
       #gap-slot::before {
         /* stylelint-disable-next-line liberty/use-logical-spec */
         margin-right: -0.99px;
@@ -701,7 +657,7 @@ export default function TextFieldMixin(Base) {
         padding: 0;
       }
 
-      #label[label][filled] {
+      #inline[label][filled] {
         align-items: flex-start;
       }
 
@@ -753,8 +709,8 @@ export default function TextFieldMixin(Base) {
       }
 
       /* stylelint-disable-next-line selector-max-compound-selectors */
-      #label[disabled],
-      #label[disabled] #control {
+      #shape[disabled],
+      #shape[disabled] #control {
         cursor: not-allowed;
       }
 
@@ -778,7 +734,7 @@ export default function TextFieldMixin(Base) {
         color: rgba(var(--mdw-color__on-surface), 0.38);
       }
 
-      #label[disabled] {
+      #shape[disabled] {
         background-color: rgba(var(--mdw-color__on-surface), calc(0.04));
         color: rgba(var(--mdw-color__on-surface), 0.38);
       }
@@ -787,7 +743,7 @@ export default function TextFieldMixin(Base) {
         color: rgba(var(--mdw-color__on-surface), 0.38);
       }
 
-      #label[disabled][outlined] {
+      #shape[disabled][outlined] {
         background-color: transparent;
       }