npm - @nanoporetech-digital/components - Versions diffs - 7.9.2 → 8.0.0-alpha.0 - Mend

@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1783) hide show

package/dist/collection/components/date-input/date-input.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
@@ -12,7 +12,12 @@ const DateRegxps = {
 };
 let inputIds = 0;
 /**
- * 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.
+ * 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.
+ *
+ * @version 1.0.0
+ * @status deprecated
+ * @deprecated - use `nano-input` with `type="date"` instead.
  *
  * @slot label - if you do not set a label attribute, you can use this slot for more complex markup
  * @slot helper - helper text to accompany the form field underneath.
@@ -25,7 +30,6 @@ export class DateInput {
     pickerCloseBtn;
     dropdown;
     input;
-    pickerOpenSource;
     directInput = false;
     dateOrderIndeces = { d: 0, m: 1, y: 3 };
     inputId = `nano-input-${inputIds++}`;
@@ -110,7 +114,7 @@ export class DateInput {
     /**
      * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
      */
-    clearInput = false;
+    clearable = false;
     /**
      * String to place within a label element. Alternatively you may use a label slot.
      */
@@ -206,7 +210,7 @@ export class DateInput {
      */
     picker = true;
     /**
-     * Initial picker date. Will be to `value` if set. Will be today's date if nothing set.
+     * Initial picker date. Defaults to `value` if set and today's date if not.
      * Must be in IS0-8601 format: YYYY-MM-DD.
      */
     initialPickerDate;
@@ -308,23 +312,15 @@ export class DateInput {
         setTimeout((_) => (this.pickerOpen = false), 200);
         setTimeout((_) => this.trigger.focus(), 50);
     };
-    onDropdownShow = () => {
-        setTimeout((_) => {
-            this.pickerEle.setFocus(false, this.pickerOpenSource === 'key');
-            this.pickerOpenSource = null;
-        }, 200);
-    };
     onTriggerClick = () => {
         if (!this.pickerOpen) {
             this.pickerOpen = true;
-            this.pickerOpenSource = 'mouse';
         }
     };
     onTriggerKey = (e) => {
         if ([' ', 'Enter'].includes(e.key)) {
             if (!this.pickerOpen) {
                 this.pickerOpen = true;
-                this.pickerOpenSource = 'key';
             }
         }
     };
@@ -393,6 +389,7 @@ export class DateInput {
         return dateStr;
     }
     connectedCallback() {
+        console.warn('nano-date-input is deprecated and will be removed in a future version. Use nano-input with type="date" instead.');
         this.setDatePattern();
         this.handleValueChange();
     }
@@ -415,10 +412,10 @@ export class DateInput {
             this.dropDownConfig.tetherTo = this.trigger;
         const valueDate = parseISODate(this.value);
         const hasHelperSlot = !!this.host.querySelector('[slot="helper"]');
-        return (h(Host, { key: '10cc3a473bcaabed644824018630e99a1dc97285', class: { ...createColorClasses(this.color), 'date-input': true } }, h("div", { key: '16632dc366bed7fff25941bb12ba022b126397e6', class: "date-field" }, h("nano-input", { key: '3e6909fd765bd1ed73231fa8be5a061a8a1e032f', 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', part: "input" }, h("slot", { key: '14bb7aa556675be2c7b94d1e1dd3ec4a1d9c1b2d', name: "start", slot: "start" }), h("slot", { key: '115fc589b717c7ab2e374d03dc6f4015907b44dd', name: "label", slot: "label" }), h("slot", { key: '2d86afd1e8e25ef60568cdb8b3b9e41793ae0a66', name: "end", slot: "end" }), this.picker && [
-            h("button", { key: '741cf88ae3c4deebb58d815c053e90de4bc53d9d', 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", { key: '1706c0202aacb50e29bd77d6a21896bb0b0b18a6', name: "light/calendar-days" })),
-            h("nano-dropdown", { key: '0a9acac249c9056d89ee07df62059e04fbc5195f', slot: "end", onNanoHide: this.onDropdownHide, onNanoShow: this.onDropdownShow, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, h("div", { key: '41d05ebd55994d7cf036ed9ed03e914a53f61142' }, h("div", { key: '86175e0f4ce2278ef73cb203d1ff98a9debaf2fa', class: "date-field__close-bar" }, h("button", { key: '4a2fcac03a395e0debe269477c6af1d070dc17a3', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { key: 'ff0cdb92aaa76e6a1fb73707034a24266ea63fdf', name: "light/xmark" }), h("span", { key: '63a11831d86b83d38e598d148900da95fc1ef9f6', class: "vhidden" }, "Close window"))), h("nano-date-picker", { key: '870ab0597d916e7a75903cf5e41b3654bc6fa578', isDateDisabled: this.isDateDisabled, 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, part: "date-picker" }))),
-        ], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: 'bb51d81e5b6a1bba76687a463b43466584ccde09', slot: "helper" }, h("span", { key: '1b9ba5f2b56bb3fab5cbbda97657395eb01668df', class: { vhidden: !!this.value.length } }, h("slot", { key: 'f2cdaf86b02a54d5ef47185802df2787b0ad3fc0', name: "helper" })), this.helperText && !!valueDate && (h("span", { key: 'c90b4d9d6e687f492feeeef14f3a556ccaec2d62' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { key: '70cf184aa59cb0893ad4acc55554a63a7fa45bcf', type: "hidden", value: this.value, name: this.name }))));
+        return (h(Host, { key: 'e5387f4d921d8ec1dd46a2e80bb68b98c6d050e0', class: { ...createColorClasses(this.color), 'date-input': true } }, h("div", { key: 'ee8bbe0b2c0923cc229e639179d0c7f4819cc665', class: "date-field" }, h("nano-input", { key: '0c2062d026b56c893adba3ecc4ad545408083cd6', 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, clearable: this.clearable || 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', part: "input" }, h("slot", { key: '2faabea02873035c747b023251aa8ecd38b5eec8', name: "start", slot: "start" }), h("slot", { key: '7459e5f0c001018166fc25b40f0ebf8377d50269', name: "label", slot: "label" }), h("slot", { key: '2657702bbe0bbe221f092631c2f41e7cc296e301', name: "end", slot: "end" }), this.picker && [
+            h("button", { key: 'fa62df397158bb262bf47ae9d3607424f2b65729', 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", { key: '9cb9ea18875aabffda4ffc384a5bee81a5337420', name: "light/calendar-days" })),
+            h("nano-dropdown", { key: 'c813474e3ab6b19d53cb090e72c47ff6e850f739', slot: "end", onNanoHide: this.onDropdownHide, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, h("div", { key: 'ebc1a186d359f6d3b33a94ebf20494cfa2d90bda' }, h("div", { key: '59d1112f354d77f14240ca956ddf09a89940bb45', class: "date-field__close-bar" }, h("button", { key: 'd18615f69c49954bce85c962e99fee6c16e67451', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { key: 'ece83cc846678beed11e322c9b52afc56b46356f', name: "light/xmark" }), h("span", { key: '60a6b3c6e95972f8307dd7d0f51bfe3d48e4da00', class: "vhidden" }, "Close window"))), h("nano-date-picker", { key: 'c5efd935b37738d00def7234e7bee1a60710ea75', isDateDisabled: this.isDateDisabled, 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, part: "date-picker" }))),
+        ], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: 'c2aff5297c406107f98f07d6f3fd65fcbacbefc3', slot: "helper" }, h("span", { key: 'e429219f14b8b68e63682f83864ff8ba694c0ec1', class: { vhidden: !!this.value.length } }, h("slot", { key: '2a2f1fab799e5826dfd41070959a48962d3bc754', name: "helper" })), this.helperText && !!valueDate && (h("span", { key: 'd09144b4ef71b33dcecef9d50cb635e4d336c45d' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { key: '4d7826a5502e8574fca54bd09192be3980b0a95f', type: "hidden", value: this.value, name: this.name }))));
     }
     static get is() { return "nano-date-input"; }
     static get encapsulation() { return "scoped"; }
@@ -436,6 +433,7 @@ export class DateInput {
         return {
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -453,12 +451,12 @@ export class DateInput {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "validityMessage": {
                 "type": "string",
+                "attribute": "validity-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -476,11 +474,11 @@ export class DateInput {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "validity-message",
                 "reflect": false
             },
             "helperText": {
                 "type": "boolean",
+                "attribute": "helper-text",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -495,12 +493,12 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "helper-text",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "helperTextFormat": {
                 "type": "unknown",
+                "attribute": "helper-text-format",
                 "mutable": false,
                 "complexType": {
                     "original": "LocalDateOpts",
@@ -525,6 +523,7 @@ export class DateInput {
             },
             "floatLabel": {
                 "type": "boolean",
+                "attribute": "float-label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -539,12 +538,12 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "float-label",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -559,12 +558,12 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
             },
             "readonly": {
                 "type": "boolean",
+                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -579,12 +578,12 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "size": {
                 "type": "number",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -599,11 +598,11 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false
             },
             "form": {
                 "type": "string",
+                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -618,11 +617,11 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "form",
                 "reflect": false
             },
             "firstDayOfWeek": {
                 "type": "number",
+                "attribute": "first-day-of-week",
                 "mutable": false,
                 "complexType": {
                     "original": "DaysOfWeek",
@@ -643,11 +642,11 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "first-day-of-week",
                 "reflect": false
             },
             "localization": {
                 "type": "unknown",
+                "attribute": "localization",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLocalizedText",
@@ -671,6 +670,7 @@ export class DateInput {
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -685,16 +685,16 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
-                    "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
                     "references": {
                         "Color": {
                             "location": "import",
@@ -711,11 +711,11 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false
             },
             "autofocus": {
                 "type": "boolean",
+                "attribute": "autofocus",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -730,12 +730,12 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "autofocus",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "clearInput": {
+            "clearable": {
                 "type": "boolean",
+                "attribute": "clearable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -750,12 +750,12 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "clear-input",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -770,11 +770,11 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -789,11 +789,11 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -808,12 +808,12 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true,
                 "defaultValue": "''"
             },
             "validateOn": {
                 "type": "string",
+                "attribute": "validate-on",
                 "mutable": false,
                 "complexType": {
                     "original": "'dirty' | 'submit' | 'submitThenDirty'",
@@ -828,12 +828,12 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validate-on",
                 "reflect": false,
                 "defaultValue": "'submitThenDirty'"
             },
             "showInlineError": {
                 "type": "boolean",
+                "attribute": "show-inline-error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -848,12 +848,12 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-inline-error",
                 "reflect": true,
                 "defaultValue": "true"
             },
             "dateOrder": {
                 "type": "string",
+                "attribute": "date-order",
                 "mutable": false,
                 "complexType": {
                     "original": "'dmy' | 'mdy' | 'ymd' | 'dym'",
@@ -868,12 +868,12 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "date-order",
                 "reflect": false,
                 "defaultValue": "'dmy'"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -888,12 +888,12 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "min": {
                 "type": "string",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -908,11 +908,11 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false
             },
             "max": {
                 "type": "string",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -927,11 +927,11 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false
             },
             "hideLabel": {
                 "type": "boolean",
+                "attribute": "hide-label",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -946,12 +946,12 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-label",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "picker": {
                 "type": "boolean",
+                "attribute": "picker",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -966,12 +966,12 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "picker",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "initialPickerDate": {
                 "type": "string",
+                "attribute": "initial-picker-date",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -982,15 +982,15 @@ export class DateInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\nMust be in IS0-8601 format: YYYY-MM-DD."
+                    "text": "Initial picker date. Defaults to `value` if set and today's date if not.\nMust be in IS0-8601 format: YYYY-MM-DD."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "initial-picker-date",
                 "reflect": false
             },
             "pickerOpen": {
                 "type": "boolean",
+                "attribute": "picker-open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -1005,12 +1005,12 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "picker-open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "closeAfterPicked": {
                 "type": "boolean",
+                "attribute": "close-after-picked",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1025,12 +1025,12 @@ export class DateInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-after-picked",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "dropDownConfig": {
                 "type": "unknown",
+                "attribute": "drop-down-config",
                 "mutable": false,
                 "complexType": {
                     "original": "Partial<Dropdown>",
@@ -1059,6 +1059,7 @@ export class DateInput {
             },
             "dateValue": {
                 "type": "unknown",
+                "attribute": "date-value",
                 "mutable": false,
                 "complexType": {
                     "original": "Date",
@@ -1084,6 +1085,7 @@ export class DateInput {
             },
             "isDateDisabled": {
                 "type": "unknown",
+                "attribute": "is-date-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "DateDisabledPredicate",
@@ -1291,4 +1293,3 @@ export class DateInput {
             }];
     }
 }
-//# sourceMappingURL=date-input.js.map