@muonic/muon 0.0.2-beta.0

package/components/inputter/src/inputter-component.js

@@ -0,0 +1,227 @@
+import { html, MuonElement, ScopedElementsMixin, classMap, styleMap, ifDefined } from '@muonic/muon';
+import {
+  INPUTTER_CONFIG_TYPE,
+  INPUTTER_CONFIG_DISABLED,
+  INPUTTER_DETAIL_TOGGLE_OPEN,
+  INPUTTER_DETAIL_TOGGLE_CLOSE,
+  INPUTTER_DETAIL_TOGGLE_POSITION,
+  INPUTTER_VALIDATION_WARNING_ICON,
+  INPUTTER_FIELD_DATE_ICON,
+  INPUTTER_FIELD_SELECT_ICON,
+  INPUTTER_FIELD_SEARCH_ICON
+} from '@muon/tokens';
+import { ValidationMixin } from '@muon/mixins/validation-mixin';
+import { MaskMixin } from '@muon/mixins/mask-mixin';
+import { DetailMixin } from '@muon/mixins/detail-mixin';
+import { Icon } from '@muon/components/icon';
+import styles from './inputter-styles.css';
+import detailStyles from './inputter-styles-detail.css';
+import slottedStyles from './inputter-styles.slotted.css';
+
+/**
+ * A component to allow for user inputs of type text, radio, checkbox, select,
+ * date, tel, number, textarea, search.
+ *
+ * @element inputter
+ */
+
+export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(MuonElement))) {
+
+  static get properties() {
+    return {
+      helper: { type: String },
+      isHelperOpen: { type: Boolean }
+    };
+  }
+
+  /* eslint-disable no-use-before-define */
+  static get scopedElements() {
+    return {
+      'inputter-detail': InputterDetail,
+      'inputter-icon': Icon
+    };
+  }
+  /* eslint-enable no-use-before-define */
+
+  static get styles() {
+    return styles;
+  }
+
+  get slottedStyles() {
+    return slottedStyles;
+  }
+
+  constructor() {
+    super();
+
+    this.type = INPUTTER_CONFIG_TYPE;
+    this.isHelperOpen = false;
+  }
+
+  _onChange(changeEvent) {
+    this._pristine = false;
+    changeEvent.stopPropagation();
+    let value = this._processFormChangeValue(this._slottedValue);
+    if (ifDefined(this.mask)) {
+      value = this._processMaskChangeValue(value);
+    }
+    if (value !== this.value) {
+      this.value = value;
+      this._fireChangeEvent();
+    }
+    if (this.validation) {
+      this.validate();
+    }
+  }
+
+  _onBlur(blurEvent) {
+    this._pristine = false;
+    super._onBlur(blurEvent);
+    if (this.validation) {
+      this.validate();
+    }
+  }
+
+  _onInput(inputEvent) {
+    this._pristine = false;
+    inputEvent.stopPropagation();
+    let value = this._slottedValue;
+    if (ifDefined(this.mask)) {
+      value = this._processMaskInputValue(value);
+    }
+
+    if (this.mask || this.validation) {
+      if (value !== this.value) {
+        this.value = value;
+        this._fireChangeEvent();
+      }
+    }
+    if (this.validation) {
+      this.validate();
+    }
+  }
+
+  get _addValidationIcon() {
+    return html`
+      <inputter-icon name="${INPUTTER_VALIDATION_WARNING_ICON}" class="icon"></inputter-icon>
+    `;
+  }
+
+  /**
+   * A method to check availability of tip details slot.
+   *
+   * @returns {boolean} - Availability of tip details slot.
+   * @private
+   */
+  get __isTipDetailAvailable() {
+    return !!this.querySelector('[slot="tip-details"]');
+  }
+
+  /**
+   * A method to get helper template.
+   *
+   * @returns {object} TemplateResult - helper template.
+   * @protected
+   * @override
+   */
+  get _addHelper() {
+    if (this.helper) {
+      if (this.__isTipDetailAvailable) {
+        return html`
+          <inputter-detail ?open="${this.isHelperOpen}">
+            <div slot="heading">${this.helper}</div>
+            <slot name="tip-details"></slot>
+          </inputter-detail>
+        `;
+      } else {
+        return html`
+          <div class="helper">${this.helper}</div>
+        `;
+      }
+    }
+
+    return undefined;
+  }
+
+  get _inputTypeIcon() {
+    if (this._isSelect) {
+      return INPUTTER_FIELD_SELECT_ICON;
+    } else if (this._inputType === this._inputTypes.SEARCH) {
+      return INPUTTER_FIELD_SEARCH_ICON;
+    } else if (this._inputType === this._inputTypes.DATE) {
+      return INPUTTER_FIELD_DATE_ICON;
+    }
+
+    return undefined;
+  }
+
+  get _addInputTypeIcon() {
+    const icon = this._inputTypeIcon;
+    return icon ? html`<inputter-icon name="${icon}"></inputter-icon>` : undefined;
+  }
+
+  get _hasDisabled() {
+    if (INPUTTER_CONFIG_DISABLED) {
+      for (let i = 0; i < this._slottedInputs?.length; i++) {
+        if (this._slottedInputs[i].disabled) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  get standardTemplate() {
+    const classes = {
+      inputter: true,
+      select: this._isSelect,
+      'has-mask': this.mask,
+      radio: this._inputType === this._inputTypes.RADIO,
+      checkbox: this._inputType === this._inputTypes.CHECKBOX,
+      search: this._inputType === this._inputTypes.SEARCH,
+      date: this._inputType === this._inputTypes.DATE,
+      'has-disabled': this._hasDisabled
+    };
+
+    let styles = {};
+    if (this.mask) {
+      styles = {
+        '--maxlength': this.mask.length
+      };
+    }
+
+    return html`
+      <div class="${classMap(classes)}" style="${styleMap(styles)}">
+        ${this._isMultiple ? this._addHeading : this._addLabel}
+        ${this._addHelper}
+        <div class="wrapper">
+          ${super.standardTemplate}
+          ${this._addMask}
+          ${this._addInputTypeIcon}
+        </div>
+      </div>
+      ${this._addValidationMessage}
+    `;
+  }
+}
+
+/**
+ * InputterDetail component to handle helper text.
+ *
+ * @element inputter-detail
+ * @private
+ */
+
+class InputterDetail extends DetailMixin(MuonElement) {
+
+  static get styles() {
+    return detailStyles;
+  }
+
+  constructor() {
+    super();
+    this._toggleOpen = INPUTTER_DETAIL_TOGGLE_OPEN;
+    this._toggleClose = INPUTTER_DETAIL_TOGGLE_CLOSE;
+    this._togglePosition = INPUTTER_DETAIL_TOGGLE_POSITION;
+  }
+}

package/components/inputter/src/inputter-styles-detail.css

@@ -0,0 +1,59 @@
+@import "@muonic/muon/css/default.css";
+
+:host {
+  & summary {
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+
+  & .details {
+    color: $INPUTTER_DETAIL_COLOR;
+    margin-block-start: $INPUTTER_DETAIL_MARGIN_BLOCK;
+  }
+
+  & .toggle {
+    width: $INPUTTER_DETAIL_ICON_SIZE;
+    height: $INPUTTER_DETAIL_ICON_SIZE;
+    flex-shrink: 0;
+  }
+
+  & .heading {
+    display: flex;
+    align-items: center;
+    column-gap: $INPUTTER_DETAIL_HEADING_GAP;
+    width: fit-content;
+    cursor: pointer;
+    font-size: 14px;
+    margin-block-start: $INPUTTER_DETAIL_HEADING_MARGIN_BLOCK;
+
+    &:hover {
+      text-decoration: underline;
+      color: $INPUTTER_DETAIL_HOVER_COLOR;
+    }
+
+    & :focus:not(:focus-visible) {
+      /*
+        https://matthiasott.com/notes/focus-visible-is-here and
+        https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+      */
+      outline-style: none;
+    }
+
+    &:focus-visible {
+      outline-color: $INPUTTER_DETAIL_FOCUS_OUTLINE_COLOR;
+      outline-style: solid;
+      outline-width: 3px;
+      outline-offset: 0;
+    }
+  }
+
+  & .content {
+    margin-block-start: $INPUTTER_DETAIL_CONTENT_MARGIN_BLOCK;
+    padding-inline-start: $INPUTTER_DETAIL_CONTENT_PADDING_INLINE;
+    font-size: 12px;
+    border-inline-start-style: solid;
+    border-inline-start-width: 3px;
+    border-inline-start-color: $INPUTTER_DETAIL_BORDER_COLOR;
+  }
+}

package/components/inputter/src/inputter-styles.css

@@ -0,0 +1,305 @@
+@import "@muonic/muon/css/default.css";
+
+:host {
+  display: block;
+
+  & ::slotted(label) {
+    color: $INPUTTER_LABEL_COLOR;
+  }
+
+  & ::slotted(*)::placeholder {
+    color: $INPUTTER_PLACEHOLDER_COLOR;
+    opacity: 1; /* NOTE: This overrides the Firefox user agent style of `opacity: 0.54;` */
+  }
+
+  & ::slotted(:is(
+  input[type="date"],
+  input[type="email"],
+  input[type="number"],
+  input[type="password"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="text"],
+  select,
+  textarea)) {
+    margin: 0; /* NOTE: remove `margin: 2px` Safari user agent */
+    padding-block-start: $INPUTTER_FIELD_PADDING_BLOCK;
+    padding-block-end: $INPUTTER_FIELD_PADDING_BLOCK;
+    padding-inline-start: $INPUTTER_FIELD_PADDING_INLINE;
+    padding-inline-end: $INPUTTER_FIELD_PADDING_INLINE;
+    color: $INPUTTER_FIELD_COLOR;
+    background-color: $INPUTTER_FIELD_BACKGROUND_COLOR;
+    border-width: 2px;
+    border-style: solid;
+    border-color: $INPUTTER_FIELD_BORDER_COLOR;
+    border-radius: 0;
+    font-family: $INPUTTER_FIELD_FONT_FAMILY;
+    font-size: $INPUTTER_FIELD_FONT_SIZE;
+  }
+
+  & ::slotted(:is(
+  input[type="date"]:hover,
+  input[type="email"]:hover,
+  input[type="number"]:hover,
+  input[type="password"]:hover,
+  input[type="search"]:hover,
+  input[type="tel"]:hover,
+  input[type="text"]:hover,
+  select:hover,
+  textarea:hover)) {
+    border-color: $INPUTTER_HOVER_BORDER_COLOR;
+    color: $INPUTTER_HOVER_COLOR;
+  }
+
+  & ::slotted(:is(
+  input[type="date"]:focus,
+  input[type="email"]:focus,
+  input[type="number"]:focus,
+  input[type="password"]:focus,
+  input[type="search"]:focus,
+  input[type="tel"]:focus,
+  input[type="text"]:focus,
+  select:focus,
+  textarea:focus)) {
+    border-color: $INPUTTER_FOCUS_BORDER_COLOR;
+    color: $INPUTTER_FOCUS_COLOR;
+    outline-color: $INPUTTER_FOCUS_OUTLINE_COLOR;
+    outline-offset: 0;
+    outline-style: solid;
+    outline-width: 3px;
+  }
+
+  & .has-disabled {
+    & ::slotted(:is(
+    input[type="date"]:disabled,
+    input[type="email"]:disabled,
+    input[type="number"]:disabled,
+    input[type="password"]:disabled,
+    input[type="search"]:disabled,
+    input[type="tel"]:disabled,
+    input[type="text"]:disabled,
+    select:disabled,
+    textarea:disabled)) {
+      pointer-events: none;
+      color: $INPUTTER_DISABLED_COLOR;
+      background-color: $INPUTTER_DISABLED_BACKGROUND_COLOR;
+      border-color: $INPUTTER_DISABLED_BORDER_COLOR;
+    }
+
+    & ::slotted(*:disabled)::placeholder {
+      color: $INPUTTER_DISABLED_PLACEHOLDER_COLOR;
+    }
+  }
+
+  & .wrapper {
+    margin-block-start: $INPUTTER_FIELD_MARGIN_BLOCK;
+    max-width: fit-content;
+    position: relative;
+  }
+
+  & .checkbox,
+  & .radio {
+    & .wrapper {
+      display: grid; /* NOTE: using `grid` to control the layout of `<input>` and `<label>` */
+      line-height: 1.2; /* NOTE: setting `line-height` here to control the position of the checkbox and radio input */
+      grid-template-columns: $INPUTTER_MULTIPLE_SIZE auto;
+      column-gap: $INPUTTER_MULTIPLE_GAP;
+      row-gap: $INPUTTER_MULTIPLE_GAP;
+    }
+
+    & ::slotted(:is(
+    input[type="checkbox"],
+    input[type="radio"])) {
+      margin: 0; /* NOTE: remove user agent default margin */
+      appearance: none; /* NOTE: remove the user agent visual styles for checkbox and radio */
+      background-color: $INPUTTER_MULTIPLE_BACKGROUND_COLOR;
+      font: inherit; /* NOTE: inheiting font to ensure the use of `em` produces the desired outcome */
+      width: $INPUTTER_MULTIPLE_SIZE;
+      height: $INPUTTER_MULTIPLE_SIZE;
+      border-width: 0.125em; /* NOTE: equal to 2px when font-size is 16px */
+      border-style: solid;
+      border-color: $INPUTTER_MULTIPLE_BORDER_COLOR;
+      display: grid; /* NOTE: setting `display: grid` to position the `::before` */
+      place-content: center; /* NOTE: placing the content of grid in the centre */
+    }
+
+    & ::slotted(:is(
+    input[type="checkbox"]:hover,
+    input[type="radio"]:hover)) {
+      border-color: $INPUTTER_HOVER_BORDER_COLOR;
+    }
+
+    & ::slotted(:is(
+    input[type="checkbox"]:focus-visible,
+    input[type="radio"]:focus-visible)) {
+      border-color: $INPUTTER_FOCUS_BORDER_COLOR;
+      outline-color: $INPUTTER_FOCUS_OUTLINE_COLOR;
+      outline-offset: 0;
+      outline-style: solid;
+      outline-width: 3px;
+    }
+
+    &.has-disabled {
+      & ::slotted(:is(
+      input[type="checkbox"]:disabled,
+      input[type="radio"]:disabled)) {
+        pointer-events: none;
+        background-color: $INPUTTER_DISABLED_BACKGROUND_COLOR;
+        border-color: $INPUTTER_DISABLED_BORDER_COLOR;
+      }
+    }
+
+    & ::slotted(input[type="checkbox"]) {
+      border-radius: 0.1875em; /* NOTE: equal to 3px when font-size is 16px */
+    }
+
+    & ::slotted(input[type="radio"]) {
+      border-radius: 50%;
+    }
+
+    & ::slotted(input[type="radio"]:checked)::before {
+      display: block;
+      content: "";
+      width: 0;
+      height: 0;
+      border-width: 0.25em;
+      border-style: solid;
+      border-color: $INPUTTER_MULTIPLE_BORDER_COLOR;
+      border-radius: 50%;
+    }
+
+    & ::slotted(input[type="checkbox"]:checked)::before {
+      display: block;
+      content: "";
+      width: 0.25em;
+      height: 0.5em;
+      border-width: 0.125em;
+      border-style: solid;
+      border-color: $INPUTTER_MULTIPLE_BORDER_COLOR;
+      border-top: unset;
+      border-right-style: solid;
+      border-bottom-style: solid;
+      border-left: unset;
+      transform: translateY(-10%) rotate(45deg);
+    }
+
+    & ::slotted(label) {
+      display: block;
+      width: fit-content;
+    }
+
+    & ::slotted(label:hover) {
+      color: $INPUTTER_HOVER_COLOR;
+    }
+  }
+
+  /* stylelint-disable no-descending-specificity */
+  & ::slotted(:is(
+  select,
+  input[type="date"])) {
+    appearance: none; /* NOTE: remove the user agent visual styles */
+    padding-inline-end: $INPUTTER_FIELD_ICON_SPACER;
+  }
+
+  & ::slotted(input[type="search"]) {
+    padding-inline-start: $INPUTTER_FIELD_ICON_SPACER;
+  }
+
+  & ::slotted(textarea) {
+    display: block; /* NOTE: this is to remove the additional space at the bottom of `textarea` */
+  }
+  /* stylelint-enable no-descending-specificity */
+
+  & .date,
+  & .search,
+  & .select {
+    & .wrapper {
+      & inputter-icon {
+        pointer-events: none;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: $INPUTTER_FIELD_ICON_SIZE;
+        height: $INPUTTER_FIELD_ICON_SIZE;
+      }
+    }
+  }
+
+  & .date,
+  & .select {
+    & .wrapper {
+      & inputter-icon {
+        right: calc($INPUTTER_FIELD_PADDING_INLINE + 2px); /* NOTE: the 2px is the width of the border */
+      }
+    }
+  }
+
+  & .search {
+    & .wrapper {
+      & inputter-icon {
+        left: calc($INPUTTER_FIELD_PADDING_INLINE + 2px); /* NOTE: the 2px is the width of the border */
+      }
+    }
+  }
+
+  & .has-mask {
+    position: relative;
+
+    & .input-mask,
+    & ::slotted(:is(
+      input[type="email"],
+      input[type="number"],
+      input[type="search"],
+      input[type="tel"],
+      input[type="text"])) {
+      width: calc((var(--maxlength)) * 1ch);
+      font-family: $INPUTTER_MASK_FONT_FAMILY;
+    }
+
+    & .input-mask {
+      padding-block-start: $INPUTTER_FIELD_PADDING_BLOCK;
+      padding-block-end: $INPUTTER_FIELD_PADDING_BLOCK;
+      padding-inline-start: $INPUTTER_FIELD_PADDING_INLINE;
+      padding-inline-end: $INPUTTER_FIELD_PADDING_INLINE;
+      border-width: 2px;
+      border-style: solid;
+      border-color: transparent;
+      border-radius: 0;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      color: $INPUTTER_MASK_COLOR;
+      pointer-events: none;
+      white-space: pre;
+      line-height: normal;
+      text-align: start;
+    }
+
+    & ::slotted(input[type="text"]) {
+      font-weight: $INPUTTER_MASK_FONT_WEIGHT;
+    }
+  }
+
+  & .validation {
+    display: flex;
+    align-items: center;
+    column-gap: $INPUTTER_VALIDATION_GAP;
+    width: fit-content;
+    margin-block-start: $INPUTTER_VALIDATION_MARGIN_BLOCK;
+    color: $INPUTTER_VALIDATION_WARNING_COLOR;
+    font-size: 14px;
+
+    & .icon {
+      width: $INPUTTER_VALIDATION_ICON_SIZE;
+      flex-shrink: 0;
+    }
+  }
+
+  & .helper {
+    margin-block-start: $INPUTTER_DETAIL_HEADING_MARGIN_BLOCK;
+    color: $INPUTTER_DETAIL_COLOR;
+    font-size: 14px;
+  }
+}

package/components/inputter/src/inputter-styles.slotted.css

@@ -0,0 +1,64 @@
+:host {
+  /* NOTE: targeting Safari only */
+  @media not all and (min-resolution: 0.001dpcm) {
+    /*
+      NOTE: These styles are duplicated from inputter-styles.css
+      due to this bug in Webkit: https://bugs.webkit.org/show_bug.cgi?id=223814
+    */
+    & input[type="radio"] {
+      &:checked {
+        &::before {
+          display: block;
+          content: "";
+          width: 0;
+          height: 0;
+          border-width: 0.25em;
+          border-style: solid;
+          border-color: $INPUTTER_MULTIPLE_BORDER_COLOR;
+          border-radius: 50%;
+        }
+      }
+    }
+
+    & input[type="checkbox"] {
+      &:checked {
+        &::before {
+          display: block;
+          content: "";
+          width: 0.25em;
+          height: 0.5em;
+          border-width: 0.125em;
+          border-style: solid;
+          border-color: $INPUTTER_MULTIPLE_BORDER_COLOR;
+          border-top: unset;
+          border-right-style: solid;
+          border-bottom-style: solid;
+          border-left: unset;
+          transform: translateY(-10%) rotate(45deg);
+        }
+      }
+    }
+  }
+
+  & input[type="date"] {
+    &::-webkit-datetime-edit,
+    &::-webkit-datetime-edit-fields-wrapper,
+    &::-webkit-datetime-edit-day-field,
+    &::-webkit-datetime-edit-month-field,
+    &::-webkit-datetime-edit-year-field {
+      padding-block-start: 0; /* NOTE: these pseudo elements have padding applied by the user agent */
+      padding-block-end: 0;
+    }
+
+    &::-webkit-calendar-picker-indicator {
+      opacity: 0; /* NOTE: icon defined: `$INPUTTER_FIELD_DATE` `display: none` removes the clickable element Chrome */
+      margin-inline-start: 0; /* NOTE: margin and position styles, increase the clickable area of this element Chrome */
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      height: auto;
+      width: 2rem;
+    }
+  }
+}