@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/mixins/TextFieldMixin.js

@@ -0,0 +1,121 @@
+import '../components/Icon.js';
+import DensityMixin from './DensityMixin.js';
+import ShapeMixin from './ShapeMixin.js';
+import styles from './TextFieldMixin.css' assert { type: 'css' };
+
+/** @typedef {import('../core/CustomElement.js').default} CustomElement */
+
+/**
+ * @param {ReturnType<import('./ControlMixin.js').default>} Base
+ */
+export default function TextFieldMixin(Base) {
+  return Base
+    .mixin(DensityMixin)
+    .mixin(ShapeMixin)
+    .extend()
+    .css(styles)
+    .set({
+      stateLayer: true,
+    })
+    .observe({
+      type: { empty: 'text' },
+      icon: 'string',
+      label: 'string',
+      filled: 'boolean',
+      outlined: 'boolean',
+      inputPrefix: 'string',
+      inputSuffix: 'string',
+      trailingIcon: 'string',
+      trailingIconInk: 'string',
+      supporting: 'string',
+      error: 'string',
+      placeholder: { nullParser: String }, // DOMString
+    })
+    .observe({
+      erroredState({ error, _invalid }) { return Boolean(error || _invalid); },
+    })
+    .expressions({
+      computePlaceholder({ filled, outlined, label, placeholder }) {
+        if (filled || outlined) return placeholder;
+        return placeholder ?? label;
+      },
+
+      shouldShowSupporting({ _invalid, error, supporting }) {
+        return _invalid || ((error ?? supporting) != null);
+      },
+
+      computeSupportingText({ error, _validationMessage, supporting }) {
+        return (error || _validationMessage || supporting) ?? '';
+      },
+
+      populatedState({ value, _badInput }) {
+        return !!value || _badInput;
+      },
+    })
+    .on({
+      composed({ template, html, inline }) {
+        const { control, label: labelElement, outline, shape, outlineLeft, outlineRight, state } = this.refs;
+        control.setAttribute('type', 'text');
+        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(html`
+          ${state}
+          ${outline}
+          <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('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=${({ label, filled, outlined }) => label && (filled || outlined)} 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>
+        `);
+      },
+      sizeChanged(oldValue, newValue) {
+        this.refs.control.style.setProperty('--size', `${newValue}ch`);
+      },
+    });
+}

package/mixins/ThemableMixin.css

@@ -0,0 +1,204 @@
+:host([color="primary"]) {
+  --mdw-bg: var(--mdw-color__primary);
+  --mdw-ink: var(--mdw-color__on-primary);
+}
+
+:host([color="primary-container"]) {
+  --mdw-bg: var(--mdw-color__primary-container);
+  --mdw-ink: var(--mdw-color__on-primary-container);
+}
+
+:host([color="secondary"]) {
+  --mdw-bg: var(--mdw-color__secondary);
+  --mdw-ink: var(--mdw-color__on-secondary);
+}
+
+:host([color="secondary-container"]) {
+  --mdw-bg: var(--mdw-color__secondary-container);
+  --mdw-ink: var(--mdw-color__on-secondary-container);
+}
+
+:host([color="tertiary"]) {
+  --mdw-bg: var(--mdw-color__tertiary);
+  --mdw-ink: var(--mdw-color__on-tertiary);
+}
+
+:host([color="tertiary-container"]) {
+  --mdw-bg: var(--mdw-color__tertiary-container);
+  --mdw-ink: var(--mdw-color__on-tertiary-container);
+}
+
+:host([color="error"]) {
+  --mdw-bg: var(--mdw-color__error);
+  --mdw-ink: var(--mdw-color__on-error);
+}
+
+:host([color="error-container"]) {
+  --mdw-bg: var(--mdw-color__error-container);
+  --mdw-ink: var(--mdw-color__on-error-container);
+}
+
+:host([color="background"]) {
+  --mdw-bg: var(--mdw-color__background);
+  --mdw-ink: var(--mdw-color__on-background);
+}
+
+:host([color^="surface"]) {
+  --mdw-bg: var(--mdw-color__surface);
+  --mdw-ink: var(--mdw-color__on-surface);
+}
+
+/* Quality-of-life */
+:host([color="surface-primary"]) {
+  --mdw-ink: var(--mdw-color__primary);
+}
+
+:host([color$="variant"]) {
+  --mdw-bg: var(--mdw-color__surface-variant);
+  --mdw-ink: var(--mdw-color__on-surface-variant);
+}
+
+:host([color^="inverse"]) {
+  --mdw-bg: var(--mdw-color__inverse-surface);
+  --mdw-ink: var(--mdw-color__inverse-on-surface);
+}
+
+:host([color="inverse-primary"]) {
+  --mdw-ink: var(--mdw-color__inverse-primary);
+}
+
+:host([color][disabled]) {
+  /* background-color: rgba(var(--mdw-color__on-surface), 0.12); */
+  /* color: rgba(var(--mdw-color__on-surface), 0.38); */
+}
+
+:host([ink="inverse-primary"]) {
+  --mdw-ink: var(--mdw-color__inverse-primary);
+}
+
+:host([ink="primary"]) {
+  --mdw-ink: var(--mdw-color__primary);
+}
+
+:host([ink="on-primary-container"]) {
+  --mdw-ink: var(--mdw-color__on-primary-container);
+}
+
+:host([ink="secondary"]) {
+  --mdw-ink: var(--mdw-color__secondary);
+}
+
+:host([ink="on-secondary-container"]) {
+  --mdw-ink: var(--mdw-color__on-secondary-container);
+}
+
+:host([ink="tertiary"]) {
+  --mdw-ink: var(--mdw-color__tertiary);
+}
+
+:host([ink="on-tertiary-container"]) {
+  --mdw-ink: var(--mdw-color__on-tertiary-container);
+}
+
+:host([ink="error"]) {
+  --mdw-ink: var(--mdw-color__error);
+}
+
+:host([ink="outline"]) {
+  --mdw-ink: var(--mdw-color__outline);
+}
+
+:host([ink="on-surface"]) {
+  --mdw-ink: var(--mdw-color__on-surface);
+}
+
+:host([ink="surface-variant"]) {
+  --mdw-ink: var(--mdw-color__surface-variant);
+}
+
+:host([ink="on-surface-variant"]) {
+  --mdw-ink: var(--mdw-color__on-surface-variant);
+}
+
+:host([ink="inverse-on-surface"]) {
+  --mdw-ink: var(--mdw-color__inverse-on-surface);
+}
+
+:host([ink="inherit"]) {
+  --mdw-ink: inherit;
+}
+
+:host([type-style|="display"]) {
+  --mdw-type__font: var(--mdw-typescale__display-large__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__display-large__letter-spacing);
+}
+
+:host([type-style="display-medium"]) {
+  --mdw-type__font: var(--mdw-typescale__display-medium__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__display-medium__letter-spacing);
+}
+
+:host([type-style="display-small"]) {
+  --mdw-type__font: var(--mdw-typescale__display-small__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__display-small__letter-spacing);
+}
+
+:host([type-style|="headline"]) {
+  --mdw-type__font: var(--mdw-typescale__headline-large__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__headline-large__letter-spacing);
+}
+
+:host([type-style="headline-medium"]) {
+  --mdw-type__font: var(--mdw-typescale__headline-medium__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__headline-medium__letter-spacing);
+}
+
+:host([type-style="headline-small"]) {
+  --mdw-type__font: var(--mdw-typescale__headline-small__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__headline-small__letter-spacing);
+}
+
+:host([type-style|="title"]) {
+  --mdw-type__font: var(--mdw-typescale__title-large__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__title-large__letter-spacing);
+}
+
+:host([type-style="title-medium"]) {
+  --mdw-type__font: var(--mdw-typescale__title-medium__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__title-medium__letter-spacing);
+}
+
+:host([type-style="title-small"]) {
+  --mdw-type__font: var(--mdw-typescale__title-small__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__title-small__letter-spacing);
+}
+
+:host([type-style|="label"]) {
+  --mdw-type__font: var(--mdw-typescale__label-large__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
+}
+
+:host([type-style="label-medium"]) {
+  --mdw-type__font: var(--mdw-typescale__label-medium__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
+}
+
+:host([type-style="label-small"]) {
+  --mdw-type__font: var(--mdw-typescale__label-small__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__label-small__letter-spacing);
+}
+
+:host([type-style|="body"]) {
+  --mdw-type__font: var(--mdw-typescale__body-large__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__body-large__letter-spacing);
+}
+
+:host([type-style="body-medium"]) {
+  --mdw-type__font: var(--mdw-typescale__body-medium__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
+}
+
+:host([type-style="body-small"]) {
+  --mdw-type__font: var(--mdw-typescale__body-small__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__body-small__letter-spacing);
+}

package/mixins/ThemableMixin.js

@@ -0,0 +1,16 @@
+import styles from './ThemableMixin.css' assert { type: 'css' };
+
+/**
+ * @param {typeof import('../core/CustomElement.js').default} Base
+ */
+export default function ThemableMixin(Base) {
+  return Base
+    .extend()
+    .observe({
+      color: 'string',
+      ink: 'string',
+      block: 'boolean',
+      typeStyle: 'string',
+    })
+    .css(styles);
+}

package/mixins/TooltipTriggerMixin.css

@@ -0,0 +1,27 @@
+#tooltip {
+  position:absolute;
+
+  overflow: hidden;
+
+  box-sizing: content-box;
+
+  block-size: 0;
+  inline-size: 0;
+  margin: 0;
+  padding: 0;
+
+  transform: none;
+}
+
+#tooltip[open] {
+  display: block;
+
+  block-size: auto;
+  inline-size: auto;
+
+  cursor: default;
+  pointer-events:auto;
+
+  opacity: 0;
+  transform: none;
+}