@nanoporetech-digital/components 1.15.6 → 2.0.0

package/dist/components/nano-date-input.js

@@ -0,0 +1,408 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { p as parseISODate, a as printISODate, d as defineCustomElement$5, c as createDate } from './date-picker.js';
+import { c as createColorClasses } from './theme.js';
+import { d as defineCustomElement$4 } from './dropdown.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './input.js';
+
+const dateInputCss = ".sc-nano-date-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{display:inline-block;width:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgba(var(--nano-color-tint-rgb), 0.56)}nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative}@media (max-width: 35.9375em){.date-field.sc-nano-date-input::before{content:\"\";position:fixed;background:rgba(0, 0, 0, 0);left:0;right:0;top:0;bottom:0;z-index:-1;-webkit-transition:z-index 0.001s ease 1s, background 0.2s ease;transition:z-index 0.001s ease 1s, background 0.2s ease}[picker-open].sc-nano-date-input-h .date-field.sc-nano-date-input::before{-webkit-transition:z-index 0.001s ease, background 0.2s ease 0.001s;transition:z-index 0.001s ease, background 0.2s ease 0.001s;background:rgba(0, 0, 0, 0.5);z-index:100}}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;width:0 !important;width:100%}.date-field__close-bar.sc-nano-date-input{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;right:-8px;top:-8px;width:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.date-field__open.sc-nano-date-input:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-moz-appearance:none;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:24px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0;width:24px}@media (min-width: 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:none}@media (min-width: 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input nano-icon.sc-nano-date-input{margin:0 auto}.date-field.sc-nano-date-input nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
+
+const DateRegxps = {
+  d: '(\\d{1,2})',
+  m: '(\\d{1,2})',
+  y: '(\\d{4})',
+};
+let inputIds = 0;
+let DateInput = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.nanoChange = createEvent(this, "nanoChange", 7);
+    this.nanoValidate = createEvent(this, "nanoValidate", 7);
+    this.directInput = false;
+    this.dateOrderIndeces = { d: 0, m: 1, y: 3 };
+    this.inputId = `nano-input-${inputIds++}`;
+    this.locale = window.navigator.languages ||
+      window.navigator.language ||
+      undefined;
+    this._invalid = false;
+    /**
+     * Whether to show a long form, confirmation date string of the one currently entered
+     */
+    this.helperText = true;
+    /**
+     * Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.
+     */
+    this.helperTextFormat = {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    };
+    /**
+     * Enable floating label behaviour. Will disable placeholder if set.
+     */
+    this.floatLabel = false;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = this.inputId;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    this.readonly = false;
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
+    this.disabled = false;
+    /**
+     * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+     */
+    this.autofocus = false;
+    /**
+     * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
+     */
+    this.clearInput = false;
+    /**
+     * Current value. Must be in IS0-8601 format: YYYY-MM-DD.
+     */
+    this.value = '';
+    /**
+     * When should the field perform validation
+     */
+    this.validateOn = 'submit';
+    /**
+     * Whether to show validation errors underneath input
+     */
+    this.showInlineError = true;
+    /**
+     * The order of the date parts for entry and display.
+     * e.g. dmy = dd mm yyyy
+     */
+    this.dateOrder = 'dmy';
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    this.required = false;
+    /**
+     * Visually hide the label - but make it accessible.
+     */
+    this.hideLabel = false;
+    /**
+     * Show a date picker. Date pickers are not very useful
+     * if the potential input is too far in the distance or past
+     * e.g. Birthdays
+     */
+    this.picker = true;
+    /**
+     * Set / read whether the picker is currently open.
+     */
+    this.pickerOpen = false;
+    /**
+     * Close the picker after a date is selected
+     */
+    this.closeAfterPicked = true;
+    // Event handlers
+    this.onInputChange = (e) => {
+      e.stopPropagation();
+      this.setValue(e.target.value);
+    };
+    this.onInputValidate = (e) => {
+      e.stopPropagation();
+      this._invalid = !e.detail.isValid;
+      this.nanoValidate.emit({
+        isValid: e.detail.isValid,
+        errorMessage: e.detail.errorMessage,
+        originalEvent: e.detail.originalEvent,
+      });
+    };
+    this.onInputKey = () => {
+      this.directInput = true;
+    };
+    this.onDatePicked = (e) => {
+      this.directInput = false;
+      this.value = e.detail.value;
+      if (this.closeAfterPicked)
+        this.pickerOpen = false;
+    };
+    this.onDropdownHide = () => {
+      setTimeout((_) => (this.pickerOpen = false), 200);
+      setTimeout((_) => this.trigger.focus(), 50);
+    };
+    this.onDropdownShow = () => {
+      setTimeout((_) => {
+        this.pickerEle.setFocus(false, this.pickerOpenSource === 'key');
+        this.pickerOpenSource = null;
+      }, 200);
+    };
+    this.onTriggerClick = () => {
+      if (!this.pickerOpen) {
+        this.pickerOpen = true;
+        this.pickerOpenSource = 'mouse';
+      }
+    };
+    this.onTriggerKey = (e) => {
+      if ([' ', 'Enter'].includes(e.key)) {
+        if (!this.pickerOpen) {
+          this.pickerOpen = true;
+          this.pickerOpenSource = 'key';
+        }
+      }
+    };
+    this.onCloseClick = () => {
+      if (this.pickerOpen)
+        this.pickerOpen = false;
+    };
+    this.onCloseKeyDown = (e) => {
+      // this ensures focus is trapped inside the picker
+      if (e.key === 'Tab' && e.shiftKey) {
+        this.pickerEle.setFocus(true);
+        e.preventDefault();
+      }
+      if (e.key === ' ' || e.key === 'Enter') {
+        if (this.pickerOpen)
+          this.pickerOpen = false;
+      }
+    };
+  }
+  // Public Api / Prop
+  /**
+   * This will be true when the control is in an invalid state.
+   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly
+   */
+  get invalid() {
+    return this._invalid;
+  }
+  handleValueChange() {
+    if (!this.directInput)
+      this.inputValue = this.formatIsoDate(this.value);
+    this.nanoChange.emit({ value: this.value, date: parseISODate(this.value) });
+    this.directInput = false;
+  }
+  handleDateOrderChange() {
+    this.setDatePattern();
+  }
+  testDateValidity() {
+    const valueDate = parseISODate(this.value);
+    let min, max, error = '';
+    if (this.value && valueDate) {
+      if (this.min && (min = parseISODate(this.min)) && valueDate < min) {
+        error =
+          'Date below the minimum: ' +
+            min.toLocaleDateString(this.locale, this.helperTextFormat);
+      }
+      else if (this.max &&
+        (max = parseISODate(this.max)) &&
+        valueDate > max) {
+        error =
+          'Date above the maximum: ' +
+            max.toLocaleDateString(this.locale, this.helperTextFormat);
+      }
+    }
+    setTimeout(async (_) => {
+      if (!this.input)
+        return;
+      const input = await this.input.getInputElement();
+      if (this.value.length && !valueDate)
+        error = 'Please enter a valid date';
+      input.setCustomValidity(error);
+      if (this.input.validateOn === 'dirty') {
+        this.input.showError(error);
+      }
+    }, 100);
+  }
+  handlePickerOpenChange() {
+    this.dropdown.open = this.pickerOpen;
+  }
+  // Methods
+  /**
+   * Get the current state of the control.
+   * @param validateFirst - perform validation first before reporting
+   * @returns `{ isValid: boolean, errorMessage: string }`
+   */
+  async reportValidity(validateFirst) {
+    return await this.input.reportValidity(validateFirst);
+  }
+  /**
+   * Sets focus on the child `nano-input`.
+   */
+  async setFocus() {
+    if (this.input)
+      this.input.setFocus();
+  }
+  /**
+   * Returns the native `<input>` element used under the hood.
+   */
+  async getInputElement() {
+    return await this.input.getInputElement();
+  }
+  /**
+   * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.
+   */
+  async showError(message) {
+    if (!this.input)
+      return;
+    this.input.showError(message);
+  }
+  // Private logic
+  // set the regexp input pattern and placeholder (if necessary)
+  setDatePattern() {
+    let dateRegexOrdered = [];
+    let dateStrOrd = [];
+    Array.from(this.dateOrder).map((datepart, i) => {
+      dateRegexOrdered.push(DateRegxps[datepart]);
+      this.dateOrderIndeces[datepart] = i;
+      dateStrOrd.push(datepart === 'y' ? 'yyyy' : datepart + datepart);
+    });
+    this.pattern = dateRegexOrdered.join('\\W+');
+    if (!this.placeholder && this.placeholder !== 'false')
+      this.placeholder = dateStrOrd.join(' ');
+  }
+  // set the public facing date string
+  formatIsoDate(isoDate) {
+    let dateRegexOrdered = [];
+    Array.from('ymd').map((datepart) => dateRegexOrdered.push(DateRegxps[datepart]));
+    const matches = isoDate.match(new RegExp(dateRegexOrdered.join('\\W+')));
+    if (!matches)
+      return '';
+    let formatted = [];
+    formatted[this.dateOrderIndeces.d] = matches[3];
+    formatted[this.dateOrderIndeces.m] = matches[2];
+    formatted[this.dateOrderIndeces.y] = matches[1];
+    return formatted.join(' ');
+  }
+  // on manual user entry, set the value that will be sent with the form field
+  setValue(inputValue) {
+    const matches = inputValue.match(new RegExp(this.pattern));
+    // it's an invalid date, but we still need to set it
+    if (!matches) {
+      this.value = inputValue;
+      return;
+    }
+    let date = createDate(matches[this.dateOrderIndeces.y + 1], matches[this.dateOrderIndeces.m + 1], matches[this.dateOrderIndeces.d + 1]);
+    if (!date) {
+      // last ditch attempt - see if the browser can get something
+      date = new Date(inputValue);
+      // it's definitely an invalid date, but set it anyway for validation messages
+      if (!date) {
+        this.value = inputValue;
+        return;
+      }
+    }
+    const dateStr = printISODate(date);
+    this.value = dateStr;
+    return dateStr;
+  }
+  connectedCallback() {
+    this.setDatePattern();
+    this.handleValueChange();
+  }
+  componentDidLoad() {
+    if (!this.pickerCloseBtn || !this.picker)
+      return;
+    this.pickerEle.firstFocusEle = this.pickerCloseBtn;
+    this.dropdown.tetherTo = this.trigger;
+    setTimeout((_) => this.handlePickerOpenChange(), 300);
+  }
+  render() {
+    this.locale =
+      navigator.languages || navigator.language || undefined;
+    let placement = this.host.ownerDocument.dir === 'rtl'
+      ? 'bottom-start'
+      : 'bottom-end';
+    const valueDate = parseISODate(this.value);
+    const hasHelperSlot = !!this.host.querySelector('[slot="helper"]');
+    return (h(Host, { class: Object.assign({}, createColorClasses(this.color)) }, h("div", { class: "date-field" }, h("nano-input", { class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearInput: this.clearInput || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric' }, h("slot", { name: "start", slot: "start" }), h("slot", { name: "label" }), h("slot", { name: "end", slot: "end" }), this.picker && [
+      h("button", { slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, h("nano-icon", { name: "light/calendar-alt" })),
+      h("nano-dropdown", { slot: "end", placement: placement, onNanoHide: this.onDropdownHide, onNanoShow: this.onDropdownShow, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown) }, h("div", null, h("div", { class: "date-field__close-bar" }, h("button", { class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { name: "light/times" }), h("span", { class: "vhidden" }, "Close window"))), h("nano-date-picker", { onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined }))),
+    ], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { slot: "helper" }, h("span", { class: { vhidden: !!this.value.length } }, h("slot", { name: "helper" })), this.helperText && !!valueDate && (h("span", null, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { type: "hidden", value: this.value, name: this.name }))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "value": ["handleValueChange", "testDateValidity"],
+    "dateOrder": ["handleDateOrderChange"],
+    "min": ["testDateValidity"],
+    "max": ["testDateValidity"],
+    "pickerOpen": ["handlePickerOpenChange"]
+  }; }
+  static get style() { return dateInputCss; }
+};
+DateInput = /*@__PURE__*/ proxyCustomElement(DateInput, [6, "nano-date-input", {
+    "invalid": [2564],
+    "helperText": [4, "helper-text"],
+    "helperTextFormat": [16],
+    "floatLabel": [4, "float-label"],
+    "name": [1],
+    "readonly": [4],
+    "size": [2],
+    "form": [1],
+    "firstDayOfWeek": [2, "first-day-of-week"],
+    "localization": [16],
+    "disabled": [4],
+    "color": [1],
+    "autofocus": [4],
+    "clearInput": [4, "clear-input"],
+    "label": [1],
+    "placeholder": [1025],
+    "value": [1537],
+    "validateOn": [1, "validate-on"],
+    "showInlineError": [516, "show-inline-error"],
+    "dateOrder": [1, "date-order"],
+    "required": [4],
+    "min": [1],
+    "max": [1],
+    "hideLabel": [4, "hide-label"],
+    "picker": [4],
+    "initialPickerDate": [1, "initial-picker-date"],
+    "pickerOpen": [1540, "picker-open"],
+    "closeAfterPicked": [4, "close-after-picked"],
+    "pattern": [32],
+    "inputValue": [32],
+    "_invalid": [32],
+    "reportValidity": [64],
+    "setFocus": [64],
+    "getInputElement": [64],
+    "showError": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-date-input", "nano-date-picker", "nano-dropdown", "nano-icon", "nano-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-date-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DateInput);
+      }
+      break;
+    case "nano-date-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "nano-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "nano-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "nano-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const NanoDateInput = DateInput;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoDateInput, defineCustomElement };
+
+//# sourceMappingURL=nano-date-input.js.map

package/dist/components/nano-date-input.js.map

@@ -0,0 +1 @@
+{"file":"nano-date-input.js","mappings":"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","names":[],"sources":["./src/components/date-input/date-input.scss?tag=nano-date-input&encapsulation=scoped","./src/components/date-input/date-input.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/form';\n@import '../../global/style/utilities/globals';\n\n:host {\n  /**\n   * @prop --focus-shadow: defaults to #{$control-focus-style};\n   * @prop --open-btn-color: defaults to #{$button-bg-color};\n   * @prop --open-btn-border: defaults to none;\n   * @prop --close-btn-color: defaults to #{$color-celsius};\n   * @prop --picker-base-size: Base font size of the date picker component. Defaults to 16px;\n   */\n\n  display: inline-block;\n  width: 100%;\n\n  --focus-shadow: #{$control-focus-style};\n  --open-btn-color: #{$button-bg-color};\n  --open-btn-border: none;\n  --close-btn-color: #{$button-bg-color};\n  --picker-base-size: 16px;\n}\n\n:host(.nano-color) {\n  --focus-shadow: #{$control-focus-size current-color(tint, 0.56)};\n}\n\nnano-icon {\n  pointer-events: none;\n}\n\n.date-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  @media (max-width: 35.9375em) {\n    &::before {\n      content: '';\n      position: fixed;\n      background: rgba(0, 0, 0, 0);\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      z-index: -1;\n      transition: z-index 0.001s ease 1s, background 0.2s ease;\n\n      :host([picker-open]) & {\n        transition: z-index 0.001s ease, background 0.2s ease 0.001s;\n        background: rgba(0, 0, 0, 0.5);\n        z-index: 100;\n      }\n    }\n  }\n\n  &__dropdown {\n    --padding: 0;\n    --overflow: visible;\n\n    padding: 0 !important;\n    width: 0 !important;\n    width: 100%;\n  }\n\n  &__close-bar {\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    border: 0;\n    margin: 0;\n    overflow: visible;\n    padding: 0;\n    position: absolute;\n    right: -8px;\n    top: -8px;\n    width: auto;\n    z-index: 1;\n  }\n\n  &__open {\n    background: var(--open-btn-color);\n    border: var(--open-btn-border);\n    margin: 0;\n    appearance: none;\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n    }\n  }\n\n  &__close {\n    -webkit-appearance: none;\n    align-items: center;\n    appearance: none;\n    background: var(--close-btn-color);\n    border: 0;\n    border-radius: 50%;\n    cursor: pointer;\n    display: flex;\n    height: 24px;\n    justify-content: center;\n    padding: 0;\n    width: 24px;\n\n    @media (min-width: 36em) {\n      opacity: 0;\n    }\n\n    &:focus {\n      box-shadow: var(--focus-shadow);\n      outline: none;\n\n      @media (min-width: 36em) {\n        opacity: 1;\n      }\n    }\n\n    nano-icon {\n      margin: 0 auto;\n    }\n  }\n\n  nano-date-picker {\n    font-size: var(--picker-base-size);\n  }\n}\n\n.vhidden {\n  @include visually-hide();\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  h,\n  Prop,\n  Watch,\n  State,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n} from '@stencil/core';\nimport {\n  createDate,\n  DaysOfWeek,\n  printISODate,\n  parseISODate,\n} from '../../utils/date-utils';\n\nimport {\n  PickerChangeEvent,\n  DateInputChangeEventDetail,\n  Color,\n  LocalDateOpts,\n  DuetLocalizedText,\n  ControlValidity,\n  ControlValidityEventDetail,\n} from '../../interface';\nimport { createColorClasses } from '../../utils';\n\nconst DateRegxps = {\n  d: '(\\\\d{1,2})',\n  m: '(\\\\d{1,2})',\n  y: '(\\\\d{4})',\n};\n\nlet inputIds = 0;\n\n/**\n * The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.\n *\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot start - input start slot\n * @slot end - input end slot\n */\n@Component({\n  tag: 'nano-date-input',\n  styleUrl: 'date-input.scss',\n  scoped: true,\n})\nexport class DateInput implements ComponentInterface {\n  private pickerEle!: HTMLNanoDatePickerElement;\n  private trigger!: HTMLButtonElement;\n  private pickerCloseBtn!: HTMLButtonElement;\n  private dropdown!: HTMLNanoDropdownElement;\n  private input: HTMLNanoInputElement;\n  private pickerOpenSource: 'key' | 'mouse';\n\n  private directInput = false;\n  private dateOrderIndeces = { d: 0, m: 1, y: 3 };\n  private inputId = `nano-input-${inputIds++}`;\n  private locale =\n    (window.navigator.languages as string[]) ||\n    window.navigator.language ||\n    undefined;\n\n  @Element() host: HTMLNanoDateInputElement;\n\n  // Private state\n\n  @State() pattern!: string;\n  @State() inputValue: string;\n\n  // Public Api / Prop\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Whether to show a long form, confirmation date string of the one currently entered\n   */\n  @Prop() helperText: boolean = true;\n\n  /**\n   * Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.\n   */\n  @Prop() helperTextFormat: LocalDateOpts = {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n  };\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * The initial size (number of characters) of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @Prop() firstDayOfWeek?: DaysOfWeek;\n\n  /**\n   * Button labels, day names, month names, etc, used for localization.\n   * Default is English.\n   */\n  @Prop() localization?: DuetLocalizedText;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n   */\n  @Prop() clearInput = false;\n\n  /**\n   * String to place within a label element. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Instructional text that shows before the input has a value.\n   * The pattern prop will be used to create a placeholder automatically if unused.\n   */\n  @Prop({ mutable: true }) placeholder: string;\n\n  /**\n   * Current value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  @Watch('value')\n  handleValueChange() {\n    if (!this.directInput) this.inputValue = this.formatIsoDate(this.value);\n    this.nanoChange.emit({ value: this.value, date: parseISODate(this.value) });\n    this.directInput = false;\n  }\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop() validateOn?: 'dirty' | 'submit' | 'submitThenDirty' = 'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * The order of the date parts for entry and display.\n   * e.g. dmy = dd mm yyyy\n   */\n  @Prop() dateOrder: 'dmy' | 'mdy' | 'ymd' | 'dym' = 'dmy';\n\n  @Watch('dateOrder')\n  handleDateOrderChange() {\n    this.setDatePattern();\n  }\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() min?: string;\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() max?: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  @Watch('min')\n  @Watch('max')\n  @Watch('value')\n  testDateValidity() {\n    const valueDate = parseISODate(this.value);\n    let min: Date,\n      max: Date,\n      error: string = '';\n\n    if (this.value && valueDate) {\n      if (this.min && (min = parseISODate(this.min)) && valueDate < min) {\n        error =\n          'Date below the minimum: ' +\n          min.toLocaleDateString(this.locale, this.helperTextFormat);\n      } else if (\n        this.max &&\n        (max = parseISODate(this.max)) &&\n        valueDate > max\n      ) {\n        error =\n          'Date above the maximum: ' +\n          max.toLocaleDateString(this.locale, this.helperTextFormat);\n      }\n    }\n\n    setTimeout(async (_) => {\n      if (!this.input) return;\n      const input = await this.input.getInputElement();\n      if (this.value.length && !valueDate) error = 'Please enter a valid date';\n\n      input.setCustomValidity(error);\n      if (this.input.validateOn === 'dirty') {\n        this.input.showError(error);\n      }\n    }, 100);\n  }\n\n  /**\n   * Show a date picker. Date pickers are not very useful\n   * if the potential input is too far in the distance or past\n   * e.g. Birthdays\n   */\n  @Prop() picker: boolean = true;\n\n  /**\n   * Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\n   * Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @Prop() initialPickerDate?: string;\n\n  /**\n   * Set / read whether the picker is currently open.\n   */\n  @Prop({ reflect: true, mutable: true }) pickerOpen: boolean = false;\n\n  @Watch('pickerOpen')\n  handlePickerOpenChange() {\n    this.dropdown.open = this.pickerOpen;\n  }\n\n  /**\n   * Close the picker after a date is selected\n   */\n  @Prop() closeAfterPicked: boolean = true;\n\n  // Event emitters\n\n  /**\n   * Event emitted when a date is selected.\n   */\n  @Event() nanoChange: EventEmitter<DateInputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return await this.input.reportValidity(validateFirst);\n  }\n\n  /**\n   * Sets focus on the child `nano-input`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) this.input.setFocus();\n  }\n\n  /**\n   * Returns the native `<input>` element used under the hood.\n   */\n  @Method()\n  async getInputElement() {\n    return await this.input.getInputElement();\n  }\n\n  /**\n   * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (!this.input) return;\n    this.input.showError(message);\n  }\n\n  // Event handlers\n\n  private onInputChange = (\n    e: CustomEvent & {\n      target: HTMLInputElement;\n    }\n  ) => {\n    e.stopPropagation();\n    this.setValue(e.target.value);\n  };\n\n  private onInputValidate = (e: CustomEvent<ControlValidityEventDetail>) => {\n    e.stopPropagation();\n    this._invalid = !e.detail.isValid;\n    this.nanoValidate.emit({\n      isValid: e.detail.isValid,\n      errorMessage: e.detail.errorMessage,\n      originalEvent: e.detail.originalEvent,\n    });\n  };\n\n  private onInputKey = () => {\n    this.directInput = true;\n  };\n\n  private onDatePicked = (e: { detail: PickerChangeEvent }) => {\n    this.directInput = false;\n    this.value = e.detail.value;\n    if (this.closeAfterPicked) this.pickerOpen = false;\n  };\n\n  private onDropdownHide = () => {\n    setTimeout((_) => (this.pickerOpen = false), 200);\n    setTimeout((_) => this.trigger.focus(), 50);\n  };\n\n  private onDropdownShow = () => {\n    setTimeout((_) => {\n      this.pickerEle.setFocus(false, this.pickerOpenSource === 'key');\n      this.pickerOpenSource = null;\n    }, 200);\n  };\n\n  private onTriggerClick = () => {\n    if (!this.pickerOpen) {\n      this.pickerOpen = true;\n      this.pickerOpenSource = 'mouse';\n    }\n  };\n\n  private onTriggerKey = (e: KeyboardEvent) => {\n    if ([' ', 'Enter'].includes(e.key)) {\n      if (!this.pickerOpen) {\n        this.pickerOpen = true;\n        this.pickerOpenSource = 'key';\n      }\n    }\n  };\n\n  private onCloseClick = () => {\n    if (this.pickerOpen) this.pickerOpen = false;\n  };\n\n  private onCloseKeyDown = (e: KeyboardEvent) => {\n    // this ensures focus is trapped inside the picker\n    if (e.key === 'Tab' && e.shiftKey) {\n      this.pickerEle.setFocus(true);\n      e.preventDefault();\n    }\n    if (e.key === ' ' || e.key === 'Enter') {\n      if (this.pickerOpen) this.pickerOpen = false;\n    }\n  };\n\n  // Private logic\n\n  // set the regexp input pattern and placeholder (if necessary)\n  private setDatePattern() {\n    let dateRegexOrdered = [];\n    let dateStrOrd = [];\n    Array.from(this.dateOrder).map((datepart, i) => {\n      dateRegexOrdered.push(DateRegxps[datepart]);\n      this.dateOrderIndeces[datepart] = i;\n      dateStrOrd.push(datepart === 'y' ? 'yyyy' : datepart + datepart);\n    });\n    this.pattern = dateRegexOrdered.join('\\\\W+');\n\n    if (!this.placeholder && this.placeholder !== 'false')\n      this.placeholder = dateStrOrd.join(' ');\n  }\n\n  // set the public facing date string\n  private formatIsoDate(isoDate: string) {\n    let dateRegexOrdered = [];\n    Array.from('ymd').map((datepart) =>\n      dateRegexOrdered.push(DateRegxps[datepart])\n    );\n    const matches = isoDate.match(new RegExp(dateRegexOrdered.join('\\\\W+')));\n    if (!matches) return '';\n\n    let formatted = [];\n    formatted[this.dateOrderIndeces.d] = matches[3];\n    formatted[this.dateOrderIndeces.m] = matches[2];\n    formatted[this.dateOrderIndeces.y] = matches[1];\n\n    return formatted.join(' ');\n  }\n\n  // on manual user entry, set the value that will be sent with the form field\n  private setValue(inputValue: string) {\n    const matches = inputValue.match(new RegExp(this.pattern));\n\n    // it's an invalid date, but we still need to set it\n    if (!matches) {\n      this.value = inputValue;\n      return;\n    }\n\n    let date = createDate(\n      matches[this.dateOrderIndeces.y + 1],\n      matches[this.dateOrderIndeces.m + 1],\n      matches[this.dateOrderIndeces.d + 1]\n    );\n\n    if (!date) {\n      // last ditch attempt - see if the browser can get something\n      date = new Date(inputValue);\n\n      // it's definitely an invalid date, but set it anyway for validation messages\n      if (!date) {\n        this.value = inputValue;\n        return;\n      }\n    }\n\n    const dateStr = printISODate(date);\n    this.value = dateStr;\n    return dateStr;\n  }\n\n  connectedCallback() {\n    this.setDatePattern();\n    this.handleValueChange();\n  }\n\n  componentDidLoad() {\n    if (!this.pickerCloseBtn || !this.picker) return;\n    this.pickerEle.firstFocusEle = this.pickerCloseBtn;\n    this.dropdown.tetherTo = this.trigger;\n    setTimeout((_) => this.handlePickerOpenChange(), 300);\n  }\n\n  render() {\n    this.locale =\n      (navigator.languages as string[]) || navigator.language || undefined;\n    let placement: 'bottom-start' | 'bottom-end' =\n      (this.host.ownerDocument as Document).dir === 'rtl'\n        ? 'bottom-start'\n        : 'bottom-end';\n    const valueDate = parseISODate(this.value);\n    const hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div class=\"date-field\">\n          <nano-input\n            class=\"date-field__input\"\n            slot=\"trigger\"\n            required={this.required || undefined}\n            showInlineError={this.showInlineError}\n            validateOn={this.validateOn}\n            placeholder={\n              this.placeholder !== 'false' ? this.placeholder : undefined\n            }\n            pattern={this.pattern}\n            label={this.label}\n            disabled={this.disabled || undefined}\n            color={this.color || undefined}\n            autofocus={this.autofocus || undefined}\n            clearInput={this.clearInput || undefined}\n            onNanoChange={this.onInputChange}\n            onNanoInput={this.onInputKey}\n            onNanoValidate={this.onInputValidate}\n            name=\"\"\n            form={this.form || undefined}\n            size={this.size || undefined}\n            readonly={this.readonly}\n            value={this.inputValue}\n            ref={(input) => (this.input = input)}\n            floatLabel={this.floatLabel}\n            hideLabel={this.hideLabel}\n            inputmode={'numeric'}\n          >\n            <slot name=\"start\" slot=\"start\" />\n            <slot name=\"label\" />\n            <slot name=\"end\" slot=\"end\" />\n            {this.picker && [\n              <button\n                slot=\"end\"\n                class=\"date-field__open\"\n                type=\"button\"\n                onKeyDown={this.onTriggerKey}\n                onClick={this.onTriggerClick}\n                ref={(trigger) => (this.trigger = trigger)}\n                disabled={this.disabled || this.readonly}\n              >\n                <nano-icon name=\"light/calendar-alt\"></nano-icon>\n              </button>,\n\n              <nano-dropdown\n                slot=\"end\"\n                placement={placement}\n                onNanoHide={this.onDropdownHide}\n                onNanoShow={this.onDropdownShow}\n                dialogTitle=\"Choose a date\"\n                class=\"date-field__dropdown\"\n                ref={(dropdown) => (this.dropdown = dropdown)}\n              >\n                <div>\n                  <div class=\"date-field__close-bar\">\n                    <button\n                      class=\"date-field__close\"\n                      type=\"button\"\n                      onMouseDown={this.onCloseClick}\n                      onKeyDown={this.onCloseKeyDown}\n                      ref={(pickerClose) => (this.pickerCloseBtn = pickerClose)}\n                    >\n                      <nano-icon name=\"light/times\"></nano-icon>\n                      <span class=\"vhidden\">Close window</span>\n                    </button>\n                  </div>\n                  <nano-date-picker\n                    onNanoDatePicked={this.onDatePicked}\n                    min={this.min || undefined}\n                    max={this.max || undefined}\n                    is-modal={true}\n                    ref={(picker) => (this.pickerEle = picker)}\n                    localization={this.localization}\n                    selectedDate={this.value || this.initialPickerDate}\n                    firstDayOfWeek={this.firstDayOfWeek}\n                    color={this.color || undefined}\n                  ></nano-date-picker>\n                </div>\n              </nano-dropdown>,\n            ]}\n            {(hasHelperSlot || this.helperText || this.showInlineError) && (\n              <span slot=\"helper\">\n                <span class={{ vhidden: !!this.value.length }}>\n                  <slot name=\"helper\" />\n                </span>\n                {this.helperText && !!valueDate && (\n                  <span>\n                    {valueDate.toLocaleDateString(\n                      this.locale,\n                      this.helperTextFormat\n                    )}\n                  </span>\n                )}\n              </span>\n            )}\n          </nano-input>\n          <input type=\"hidden\" value={this.value} name={this.name} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-date-picker.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/scss.vars";
+
+interface NanoDatePicker extends Components.NanoDatePicker, HTMLElement {}
+export const NanoDatePicker: {
+  prototype: NanoDatePicker;
+  new (): NanoDatePicker;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/nano-date-picker.js

@@ -0,0 +1,11 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { D as DatePicker, d as defineCustomElement$1 } from './date-picker.js';
+
+const NanoDatePicker = DatePicker;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoDatePicker, defineCustomElement };
+
+//# sourceMappingURL=nano-date-picker.js.map

package/dist/components/nano-date-picker.js.map

@@ -0,0 +1 @@
+{"file":"nano-date-picker.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-details.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/scss.vars";
+
+interface NanoDetails extends Components.NanoDetails, HTMLElement {}
+export const NanoDetails: {
+  prototype: NanoDetails;
+  new (): NanoDetails;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;