@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/components/TextArea.js

@@ -0,0 +1,229 @@
+import CustomElement from '../core/CustomElement.js';
+import ControlMixin from '../mixins/ControlMixin.js';
+import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
+import StateMixin from '../mixins/StateMixin.js';
+import TextFieldMixin from '../mixins/TextFieldMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import styles from './TextArea.css' assert { type: 'css' };
+
+/** @implements {HTMLTextAreaElement} */
+export default class TextArea extends CustomElement
+  .mixin(ThemableMixin)
+  .mixin(StateMixin)
+  .mixin(ControlMixin)
+  .mixin(TextFieldMixin)
+  .mixin(ResizeObserverMixin) {
+  static { this.autoRegister('mdw-textarea'); }
+
+  static {
+    this.css(styles);
+    this.childEvents({ slot: { slotchange: 'onSlotChange' } });
+    this.on({
+      composed() {
+        const { control } = this.refs;
+        control.setAttribute('input-prefix', '{input-prefix}');
+        control.setAttribute('input-suffix', '{input-suffix}');
+        control.setAttribute('minrows', '{minrows}');
+        control.setAttribute('fixed', '{fixed}');
+        control.setAttribute('icon', '{icon}');
+        control.setAttribute('maxrows', '{maxrows}');
+      },
+      defaultValueAttrChanged(oldValue, newValue) {
+        this.defaultValue = newValue;
+      },
+      defaultValueChanged() {
+        this._value = this.#textarea.value;
+        this.resize();
+      },
+      _maxHeightChanged(oldValue, newValue) {
+        this.#textarea.style.setProperty('max-height', newValue);
+      },
+      _lineHeightChanged(oldValue, newValue) {
+        this.refs.label.style.setProperty('--line-height', newValue);
+      },
+      minRowsChanged(oldValue, newValue) {
+        this.refs.label.style.setProperty('--min-rows', `${newValue || 'none'}`);
+        this.resize();
+      },
+      maxRowsChanged(oldValue, newValue) {
+        this.refs.label.style.setProperty('--max-rows', `${newValue || 'none'}`);
+        this.resize();
+      },
+      rowsChanged() {
+        this.resize();
+      },
+    });
+  }
+
+  static supportsCSSLineHeightUnit = CSS.supports('height', '1lh');
+
+  static controlTagName = 'textarea';
+
+  static controlVoidElement = false;
+
+  static clonedContentAttributes = [
+    ...super.clonedContentAttributes,
+    'cols',
+    'dirname',
+    'maxlength',
+    'minlength',
+    'placeholder',
+    'rows',
+  ];
+
+  #updatingSlot = false;
+
+  #textarea = /** @type {HTMLTextAreaElement} */ (this.refs.control);
+
+  static {
+    if (TextArea.supportsCSSLineHeightUnit) {
+      this.childEvents({
+        control: {
+          input() {
+            this.resize();
+          },
+        },
+      });
+    }
+  }
+
+  /**
+   * @param {Event & {currentTarget:HTMLSlotElement}} event
+   * @return {void}
+   */
+  onSlotChange({ currentTarget }) {
+    const textarea = /** @type {HTMLTextAreaElement} */ (this.refs.control);
+    const previousValue = textarea.defaultValue;
+    textarea.replaceChildren(
+      ...currentTarget.assignedNodes().map((child) => child.cloneNode(true)),
+    );
+
+    const newValue = textarea.defaultValue;
+    if (previousValue !== newValue) {
+      this.propChangedCallback('defaultValue', previousValue, newValue);
+    }
+  }
+
+  /** @return {number} */
+  resize() {
+    const textarea = this.#textarea;
+    textarea.style.removeProperty('height');
+
+    // if (this.placeholder) textarea.removeAttribute('placeholder');
+
+    if (!TextArea.supportsCSSLineHeightUnit) {
+      const { lineHeight } = window.getComputedStyle(textarea);
+      this._lineHeight = lineHeight;
+    }
+
+    if (this.minRows > 1 && textarea.rows < this.minRows) {
+      textarea.rows = this.minRows;
+    } else if (this.maxRows && textarea.rows > this.maxRows) {
+      textarea.rows = this.maxRows;
+    }
+    if (!this.fixed) {
+      while (textarea.scrollHeight > textarea.clientHeight) {
+        if (this.maxRows && textarea.rows === this.maxRows) break;
+        const lastClientHeight = textarea.clientHeight;
+        textarea.rows++;
+        if (lastClientHeight === textarea.clientHeight) {
+          textarea.rows--;
+          break;
+        }
+      }
+      while (textarea.scrollHeight === textarea.clientHeight) {
+        if (textarea.rows === 1) break;
+        if (this.minRows > 1 && textarea.rows === this.minRows) break;
+        const lastClientHeight = textarea.clientHeight;
+        textarea.rows--;
+        if ((lastClientHeight === textarea.clientHeight)
+        || (textarea.scrollHeight > textarea.clientHeight)) {
+          textarea.rows++;
+          break;
+        }
+      }
+    }
+
+    if (textarea.selectionEnd === textarea.value.length) {
+      textarea.scrollTop = textarea.scrollHeight;
+    }
+
+    this.rows = textarea.rows;
+    // if (this.placeholder) textarea.setAttribute('placeholder', this.placeholder);
+    return this.rows;
+  }
+
+  formResetCallback() {
+    this.#textarea.value = this.defaultValue;
+    this._value = this.#textarea.value;
+    super.formResetCallback();
+  }
+
+  get updatingSlot() { return this.#updatingSlot; }
+
+  get defaultValue() {
+    return this.#textarea.defaultValue;
+  }
+
+  set defaultValue(value) {
+    const previousValue = this.#textarea.defaultValue;
+    this.#textarea.defaultValue = value;
+    if (previousValue !== this.#textarea.defaultValue) {
+      this.propChangedCallback('defaultValue', previousValue, this.defaultValue);
+    }
+    this.textContent = this.#textarea.defaultValue;
+  }
+
+  // @ts-ignore @override
+
+  get type() { return 'textarea'; }
+
+  get textLength() { return this.#textarea.textLength; }
+
+  get select() { return this.#textarea.select; }
+
+  get selectionDirection() { return this.#textarea.selectionDirection; }
+
+  set selectionDirection(value) { this.#textarea.selectionDirection = value; }
+
+  get selectionStart() { return this.#textarea.selectionStart; }
+
+  set selectionStart(value) { this.#textarea.selectionStart = value; }
+
+  get selectionEnd() { return this.#textarea.selectionEnd; }
+
+  set selectionEnd(value) { this.#textarea.selectionEnd = value; }
+
+  get setRangeText() { return this.#textarea.setRangeText; }
+
+  get setSelectionRange() { return this.#textarea.setSelectionRange; }
+
+  /** @param {ResizeObserverEntry} entry */
+  onResizeObserved(entry) {
+    super.onResizeObserved(entry);
+    this.resize();
+  }
+}
+
+TextArea.propList.delete('type');
+
+TextArea.prototype._maxHeight = TextArea.prop('_maxHeight');
+TextArea.prototype.fixed = TextArea.prop('fixed', { type: 'boolean' });
+TextArea.prototype.minRows = TextArea.prop('minRows', { attr: 'minrows', type: 'integer', empty: 0 });
+TextArea.prototype.maxRows = TextArea.prop('maxRows', { attr: 'maxrows', type: 'integer', empty: 0 });
+TextArea.prototype._lineHeight = TextArea.prop('_lineHeight');
+
+// https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element
+
+const DOMString = { nullParser: String };
+TextArea.prototype.cols = TextArea.prop('cols', { type: 'integer', empty: 0 });
+TextArea.prototype.dirName = TextArea.prop('dirName', { attr: 'dirname', ...DOMString });
+TextArea.prototype.maxLength = TextArea.prop('maxLength', { attr: 'maxlength', type: 'integer', empty: 0 });
+TextArea.prototype.minLength = TextArea.prop('minLength', { attr: 'minlength', type: 'integer', empty: 0 });
+TextArea.prototype.placeholder = TextArea.prop('placeholder', DOMString);
+TextArea.prototype.rows = TextArea.prop('rows', { type: 'integer', empty: 1 });
+TextArea.prototype.wrap = TextArea.prop('wrap', DOMString);
+
+// Not in spec, but plays nice with HTML linters
+TextArea.prototype.defaultValueAttr = TextArea.prop('defaultValueAttr', { attr: 'value', ...DOMString });

package/components/Title.css

@@ -0,0 +1,14 @@
+:host {
+  font: var(--mdw-typescale__title-large__font);
+  letter-spacing: var(--mdw-typescale__title-large__letter-spacing);
+}
+
+:host([size="medium"]) {
+  font: var(--mdw-typescale__title-medium__font);
+  letter-spacing: var(--mdw-typescale__title-medium__letter-spacing);
+}
+
+:host([size="small"]) {
+  font: var(--mdw-typescale__title-small__font);
+  letter-spacing: var(--mdw-typescale__title-small__letter-spacing);
+}

package/components/Title.js

@@ -0,0 +1,15 @@
+import Headline from './Headline.js';
+import styles from './Title.css' assert { type: 'css' };
+
+export default Headline
+  .extend()
+  .css(styles)
+  .expressions({
+    computeAriaLevel({ ariaLevel, size }) {
+      if (ariaLevel) return ariaLevel;
+      if (size === 'medium') return '5';
+      if (size === 'small') return '6';
+      return '4';
+    },
+  })
+  .autoRegister('mdw-title');

package/components/Tooltip.css

@@ -0,0 +1,40 @@
+/* https://m2.material.io/components/tooltips */
+
+:host {
+  --mdw-shape__size: var(--mdw-shape__extra-small);
+  --mdw-ink: var(--mdw-color__on-surface-variant);
+  --mdw-shape__bg: rgb(var(--mdw-color__surface-variant));
+  display: block;
+  vertical-align: middle;
+
+  box-sizing: border-box;
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  margin-inline: auto;
+  padding-block: 4px;
+  padding-inline: 8px;
+
+  pointer-events: none;
+
+  opacity: 0;
+  transform: scale(0);
+  z-index: 24;
+
+  font: var(--mdw-typescale__label-medium__font);
+  letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
+
+  transition: transform 200ms, opacity 200ms;
+
+}
+
+:host([touch]) {
+  padding-block: 6px;
+  padding-inline: 16px;
+
+  font: var(--mdw-typescale__label-large__font);
+  letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
+}
+
+:host([open]) {
+  opacity: 1;
+  transform: scale(1);
+}

package/components/Tooltip.js

@@ -0,0 +1,22 @@
+import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+
+import Surface from './Surface.js';
+import styles from './Tooltip.css' assert { type: 'css' };
+
+export default Surface
+  .mixin(AriaReflectorMixin)
+  .extend()
+  .set({
+    _ariaRole: 'tooltip',
+  })
+  .css(styles)
+  .observe({
+    open: {
+      type: 'boolean',
+      changedCallback(oldValue, newValue) {
+        this.updateAriaProperty('ariaHidden', newValue ? 'true' : 'false');
+      },
+    },
+    touch: 'boolean',
+  })
+  .autoRegister('mdw-tooltip');

package/components/TopAppBar.css

@@ -0,0 +1,209 @@
+/* https://m3.material.io/components/bottom-app-bar/specs */
+
+:host {
+  --mdw-bg: var(--mdw-color__surface);
+  --mdw-ink: var(--mdw-color__on-surface);
+  --mdw-surface__tint: var(--mdw-surface__tint__0);
+  --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
+  display: contents;
+
+  z-index:2;
+}
+
+#surface {
+  position: sticky;
+  inset-block-start: 0;
+
+  display: grid;
+
+  align-items: center;
+  gap: 12px;
+  grid-auto-flow: row;
+  grid-template-rows: minmax(64px,min-content);
+  grid-template-columns: minmax(auto,1fr) minmax(0,auto) minmax(auto,1fr);
+  overflow-x: clip; /* Clip oversized touch targets to avoid scroll-bars */
+  overflow-y: visible;
+
+  box-sizing: border-box;
+  inline-size: 100%;
+  max-inline-size: 100%;
+
+  /* 16px from icon */
+  /* inset = (button.width / 2) - (icon.width / 2) */
+  /* paddingInline = 16px - inset */
+  /* paddingInlineStart = 16px - ((48px / 2) - (24px / 2)) */
+  /* paddingInlineEnd = 16px - ((48px / 2) - (30px / 2)) */
+
+  padding-inline: 4px;
+
+  pointer-events: auto;
+
+  filter: none; /* Never receive shadow */
+
+  z-index: 5;
+  /* inset-inline: 0; */
+
+  background-color: rgb(var(--mdw-bg));
+  color: rgb(var(--mdw-ink));
+
+  transition: grid-template-columns 100ms;
+
+}
+
+#surface-tint {
+  position: 0;
+
+  z-index: 1;
+}
+
+#leading {
+  justify-self: flex-start;
+
+  display: flex;
+  align-items: center;
+
+  grid-column: 1;
+  grid-row: 1;
+}
+
+#headline {
+  display: inline-block;
+
+  overflow: clip hidden;
+
+  max-inline-size: 100%;
+
+  grid-column: 2;
+  grid-row: 1;
+
+  font: var(--mdw-typescale__title-large__font);
+  letter-spacing: var(--mdw-typescale__title-large__letter-spacing);
+
+  text-overflow: ellipsis;
+  text-transform: none;
+  white-space: nowrap;
+  word-break: break-word;
+
+  transition-duration: 200ms;
+  transition-property: transform, opacity, color, background-color;
+}
+
+#trailing {
+  justify-self: flex-end;
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: flex-end;
+
+  grid-column: 3;
+  grid-row: 1;
+
+  color: var(--mdw-color__on-surface-variant);
+}
+
+/* Medium */
+#companion {
+  position: relative;
+
+  display: flex;
+  align-items: flex-end;
+
+  /**
+   * Total Height = 112px
+   * Bar = 12 + 40 + 12 (64)
+   * Companion = 112px - 64
+   * Companion Bottom = 20px
+   * Companion = 28px
+   * Shift up = 1lh - 28px
+   */
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  margin-block-start: calc(28px - var(--mdw-typescale__headline-small__line-height));
+  padding-block-end: 20px;
+
+  padding-inline: 16px;
+
+  background-color: rgb(var(--mdw-bg));
+  box-shadow: none;
+
+  font: var(--mdw-typescale__headline-small__font);
+  letter-spacing: var(--mdw-typescale__headline-small__letter-spacing);
+  white-space: nowrap;
+}
+
+#companion[size="large"] {
+  /**
+   * Total Height = 152px
+   * Bar = 12 + 40 + 12 (64)
+   * Companion = 152px - 64
+   * Companion Bottom = 20px
+   * Companion = 68px
+   * Shift up = 2lh - 68px
+   */
+
+  min-block-size: calc(2 * var(--mdw-typescale__headline-medium__line-height));
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  margin-block-start: calc(68px - (2 * var(--mdw-typescale__headline-medium__line-height)));
+
+  font: var(--mdw-typescale__headline-medium__font);
+  letter-spacing: var(--mdw-typescale__headline-medium__letter-spacing);
+  white-space: normal;
+}
+
+@supports(width: 1lh) {
+  #companion {
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+    margin-block-start: calc(28px - 1lh);
+  }
+
+  #companion[size="large"] {
+    min-block-size: 2lh;
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+    margin-block-start: calc(68px - 2lh);
+  }
+}
+
+#companion-slot {
+  display: block;
+  overflow-x: clip;
+  overflow-y: hidden;
+
+  text-overflow: ellipsis;
+  text-transform: none;
+  word-break: break-word;
+}
+
+#companion-slot[size="large"] {
+  max-block-size: calc(2 * var(--mdw-typescale__headline-medium__line-height));
+}
+
+@supports(-webkit-line-clamp: 2) {
+  #companion-slot[size="large"] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+
+    max-block-size: none;
+  }
+}
+
+#surface[hide-on-scroll] {
+  position: relative;
+
+  inset-block-start: 0;
+
+  transform: translateY(0);
+
+  will-change: transform, position;
+}
+
+#surface[size="small"] {
+  gap: 4px;
+  grid-template-columns: auto 1fr auto;
+}
+
+#headline:is([size="medium"],[size="large"]) {
+  opacity: 0;
+
+  will-change: opacity;
+}