@nanoporetech-digital/components 1.15.6 → 2.0.0

package/dist/components/select.js

@@ -0,0 +1,667 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, Build, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { r as raf } from './index2.js';
+import { F as FormControlWrap, a as FormControl } from './form-control.js';
+import { d as defineCustomElement$5 } from './datalist.js';
+import { d as defineCustomElement$4 } from './dropdown.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './menu.js';
+import { d as defineCustomElement$1 } from './option.js';
+import { a as debounceEvent } from './throttle.js';
+import { c as closestElement } from './dom.js';
+import { c as createColorClasses } from './theme.js';
+import { g as getActiveElement } from './active-element.js';
+
+const selectCss = ".sc-nano-select-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-select{display:none !important}label.sc-nano-select,.more.sc-nano-select,.error.sc-nano-select,.helper.sc-nano-select{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.more.visually-hide.sc-nano-select,.error.visually-hide.sc-nano-select,.helper.visually-hide.sc-nano-select{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}.placeholder-as-label.sc-nano-select{padding-left:var(--padding-start);padding-right:0;padding-top:0;padding-bottom:0;color:var(--label-color);position:absolute;font-size:1.4em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:0.7}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.placeholder-as-label.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}.is-invalid.sc-nano-select-h .placeholder-as-label.sc-nano-select{color:var(--invalid-msg-color)}.has-value.sc-nano-select-h .placeholder-as-label.sc-nano-select{-webkit-transform:translateY(-120%);transform:translateY(-120%);font-size:0.9em}.textarea.sc-nano-select .placeholder-as-label.sc-nano-select{top:50%}.has-focus.sc-nano-select-h .textarea.sc-nano-select .placeholder-as-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-select-h .textarea.sc-nano-select .placeholder-as-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.label.sc-nano-select .label-placeholder.sc-nano-select{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.label.sc-nano-select .placeholder.sc-nano-select{margin-left:0;margin-right:5px;margin-top:0;margin-bottom:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.label.sc-nano-select .placeholder.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}.label.sc-nano-select .charcount.sc-nano-select{margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0;font-size:0.9em;opacity:0.5}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.label.sc-nano-select .charcount.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}.has-value.sc-nano-select-h .label.sc-nano-select .placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .label.sc-nano-select{color:var(--label-color--invalid)}.more.sc-nano-select{height:1em;margin-left:3px;margin-right:0;margin-top:4px;margin-bottom:var(--padding-bottom);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.more.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.helper.sc-nano-select,.error.sc-nano-select{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .helper.sc-nano-select{opacity:0}.error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .error.sc-nano-select{opacity:1}.input.sc-nano-select{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);width:100%;padding:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size)}.has-focus.sc-nano-select-h .input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width)}.is-invalid.sc-nano-select-h .input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width)}.is-invalid.has-focus.sc-nano-select-h .input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width)}.native-input-wrap.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.input-clear-icon.sc-nano-select,.end.sc-nano-select,.start.sc-nano-select,.value-end.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;--nano-icon-size:1.4em;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-select .start.sc-nano-select{display:none}.start.sc-nano-select-s>*,.start .sc-nano-select-s>*,.end.sc-nano-select-s>*,.end .sc-nano-select-s>*,.value-end.sc-nano-select-s>*,.value-end .sc-nano-select-s>*,.value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;font-size:1em;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.start.sc-nano-select-s>*,.start .sc-nano-select-s>*,.end.sc-nano-select-s>*,.end .sc-nano-select-s>*,.value-end.sc-nano-select-s>*,.value-end .sc-nano-select-s>*,.value-end.sc-nano-select *.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.sc-nano-select-h[disabled]:not([disabled=false]) .start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.value-end.sc-nano-select-s>*,.value-end .sc-nano-select-s>*,.value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.input-clear-icon.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .input-clear-icon.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .input-clear-icon.sc-nano-select{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;opacity:1;width:auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.has-value.sc-nano-select-h .input-clear-icon.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.input-clear-icon.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--input-border-width-sh, var(--nano-input-border-width, 2px));--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #fac6c3);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, #fee8de);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, \"currentColor\");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, \"currentColor\");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #90c6e7);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:inline-block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.native-input.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:2.5em;min-height:2.5em;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;cursor:default}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.native-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.native-input.sc-nano-select::-moz-selection{background:transparent}.native-input.sc-nano-select::selection{background:transparent}.native-input.sc-nano-select::-moz-selection{background:transparent}.native-input[disabled].sc-nano-select{opacity:0.4}.native-input.sc-nano-select::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.native-input.sc-nano-select::-webkit-search-decoration,.native-input.sc-nano-select::-webkit-search-cancel-button,.native-input.sc-nano-select::-webkit-search-results-button,.native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.native-input.sc-nano-select:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-nano-select::-ms-clear,.native-input.sc-nano-select::-ms-reveal{display:none}.native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.textarea.sc-nano-select .native-input.sc-nano-select{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);white-space:pre-wrap}.textarea.sc-nano-select .native-input.sc-nano-select::-webkit-input-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select::-moz-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select:-ms-input-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select::-ms-input-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.sc-nano-select .native-input.sc-nano-select{padding-top:1.4em}.has-float-label.textarea.sc-nano-select .native-input.sc-nano-select{padding-top:1.8em}.legacy.sc-nano-select .native-input.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.masked.sc-nano-select-h .native-input.sc-nano-select{opacity:0;position:absolute;left:0;top:0}.select-mask.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;pointer-events:none;line-height:2.5em;min-height:2.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select-mask.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.multi-wrap.sc-nano-select{padding-left:0;padding-right:0;padding-top:0;padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%}.has-float-label.sc-nano-select-h .multi-wrap.sc-nano-select{padding-top:1.3em}.multi-input.sc-nano-select{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) / 2);padding-bottom:0;min-width:50px;max-width:100%;max-height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;-webkit-box-flex:0;-ms-flex:0;flex:0;position:relative;min-height:calc(2.78em - var(--padding-top));-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.legacy.sc-nano-select-h .multi-input.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.multi-input.sc-nano-select:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.multi-value.sc-nano-select{margin-left:4px;margin-right:0;margin-top:4px;margin-bottom:0;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.3em 0.5em;border-radius:3px;line-height:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--input-font-size);font-weight:600;letter-spacing:1px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-value.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0}}.multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1.4}.multi-value-remove.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:0.5em;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0;font-size:1em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-value-remove.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0.5em;padding-inline-start:0.5em;-webkit-padding-end:0;padding-inline-end:0}}.multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.has-focus.has-multiple.sc-nano-select-h .placeholder-as-label.sc-nano-select{-webkit-transform:translateY(-120%);transform:translateY(-120%);font-size:0.9em}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}";
+
+let selectIds = 0;
+let Select = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.nanoChange = createEvent(this, "nanoChange", 7);
+    this.nanoBlur = createEvent(this, "nanoBlur", 7);
+    this.nanoFocus = createEvent(this, "nanoFocus", 7);
+    this.nanoDidLoad = createEvent(this, "nanoDidLoad", 7);
+    this.nanoDidUnload = createEvent(this, "nanoDidUnload", 7);
+    this.nanoSearchChange = createEvent(this, "nanoSearchChange", 7);
+    this.nanoValidate = createEvent(this, "nanoValidate", 7);
+    this.valueItems = [];
+    this.selectId = `nano-select-${selectIds++}`;
+    this.rtl = false;
+    this.onInit = true;
+    this.isLegacy = 'registerElement' in document;
+    this.currInsertIndex = -1;
+    this.showErrorMsg = false;
+    this.errorMessage = '';
+    this.hasFocus = false;
+    this.hasLabelSlot = false;
+    this.hasHelperSlot = false;
+    this.inputSearchVal = '';
+    this._invalid = false;
+    /**
+     * This Boolean attribute lets you specify that a form control should have select focus when the page loads.
+     */
+    this.autofocus = false;
+    /**
+     * If `true`, the user cannot interact with the select.
+     */
+    this.disabled = false;
+    /**
+     * When should the field perform validation
+     */
+    this.validateOn = 'submit';
+    /**
+     * Whether to show validation errors underneath input
+     */
+    this.showInlineError = true;
+    /**
+     * Visually hide the label - but make it accessible.
+     */
+    this.hideLabel = false;
+    /**
+     * Enable floating label behaviour. Will disable placeholder if set.
+     */
+    this.floatLabel = false;
+    /**
+     * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored.
+     */
+    this.multiple = false;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = this.selectId + '-name';
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    this.readonly = false;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    this.required = false;
+    /**
+     * in multiple mode, allow users to enter their own values
+     */
+    this.allowCustomValues = false;
+    this._value = this.multiple ? [] : '';
+    this._options = [];
+    this._eOptions = [];
+    /**
+     * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.
+     */
+    this.clearSelect = false;
+    /**
+     * Hide the native select element and cover with a value 'mask'.
+     * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple="true".
+     */
+    this.mask = false;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.
+     */
+    this.debounce = 0;
+    /** nano-dropdown config options you can pass to the nested dropdown component */
+    this.dropDownConfig = {};
+    this.customValidate = () => {
+      this.nativeSelect.setCustomValidity('');
+      // add custom validations 'cos html5 validations are a bit rubbish on selects
+      if (this.required && !this.valArray.length) {
+        this.nativeSelect.setCustomValidity('Please fill in this field.');
+        return true;
+      }
+      if (this.valArray.length &&
+        !this.allowCustomValues &&
+        !this.isValidValues()) {
+        this.nativeSelect.setCustomValidity('Please choose an item from this field.');
+        return true;
+      }
+      if (this.max && this.valArray.length > this.max) {
+        this.nativeSelect.setCustomValidity(`Only up to ${this.max} values are allowed.`);
+        return true;
+      }
+      if (this.min && this.valArray.length < this.min) {
+        this.nativeSelect.setCustomValidity(`You must select a minimum of ${this.min} values.`);
+        return true;
+      }
+      return false;
+    };
+    this.showInlineValidation = (ev) => {
+      if (this.validateOn === 'submitThenDirty')
+        this.validateOn = 'dirty';
+      this._invalid = false;
+      this.showErrorMsg = false;
+      this.errorMessage = '';
+      if (!this.nativeSelect.validity.valid) {
+        this.errorMessage = this.nativeSelect.validationMessage;
+        this._invalid = true;
+        this.showErrorMsg = true;
+      }
+      this.nanoValidate.emit({
+        isValid: !this.invalid,
+        errorMessage: this.errorMessage,
+        originalEvent: ev,
+      });
+    };
+    this.handleInvalid = (ev) => {
+      this._invalid = true;
+      if (this.validateOn === 'submit')
+        this._invalid = this.showErrorMsg = this.customValidate();
+      if (this.showInlineError)
+        ev.preventDefault();
+      setTimeout((_) => this.showInlineValidation(ev), 20);
+    };
+    this.setValue = (e) => {
+      e.preventDefault();
+      if (!this.multiple) {
+        this.value = e.detail.value;
+        this.inputCtrl.focus();
+        return;
+      }
+      if (this.value && this.value.length && this.value.includes(e.detail.value))
+        return;
+      if (this.max && this.value.length === this.max)
+        return;
+      this.currInsertIndex++;
+      this.value = [
+        ...this.value.slice(0, this.currInsertIndex),
+        e.detail.value,
+        ...this.value.slice(this.currInsertIndex),
+      ];
+      this.inputSearchVal = '';
+      // this.selectWrap.clientWidth; // force reflow
+    };
+    this.removeValue = (toFind) => {
+      if (!this.multiple || !this.value.length)
+        return;
+      if (!toFind)
+        toFind = this.value[this.value.length - 1];
+      this.value = this.value.filter((val) => val !== toFind);
+      this.currInsertIndex--;
+      // this.selectWrap.clientWidth; // force reflow
+      this.setFocus();
+    };
+    this.setOptions = () => {
+      if (!this.datalist ||
+        !this.datalist.activeOptions ||
+        !this.datalist.activeOptions.length)
+        return;
+      this._eOptions = this.datalist.activeOptions.map((ao) => {
+        const { value, selected, label, filterMeta } = ao;
+        return { value, selected, label, filterMeta };
+      });
+    };
+    this.handleDocumentKeyDown = (ev) => {
+      if (!this.multiple || !this.hasFocus)
+        return;
+      if (!this.inputSearchVal) {
+        let rm;
+        switch (ev.key) {
+          case 'Backspace':
+            if (this.inputCtrl.previousElementSibling)
+              rm = this.inputCtrl.previousElementSibling;
+            else
+              break;
+            this.removeValue(rm.dataset.value || null);
+            break;
+          case 'Delete':
+            if (this.inputCtrl.nextElementSibling)
+              rm = this.inputCtrl.nextElementSibling;
+            else
+              break;
+            this.removeValue(rm.dataset.value || null);
+            break;
+          case 'ArrowLeft':
+          case 'ArrowRight':
+            if (!this.value.length)
+              break;
+            if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)
+              this.currInsertIndex--;
+            if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)
+              this.currInsertIndex++;
+            setTimeout(() => {
+              this.inputCtrl.focus();
+            }, 20);
+            ev.preventDefault();
+            break;
+        }
+      }
+    };
+    this.onBlur = () => {
+      this.hasFocus = false;
+      setTimeout(() => {
+        if (this.validateOn === 'dirty' && !this.hasFocus)
+          this.showInlineValidation();
+      }, 20);
+      this.nanoBlur.emit();
+      if (!this.allowCustomValues && this.multiple)
+        this.inputSearchVal = '';
+    };
+    this.onFocus = () => {
+      this.hasFocus = true;
+      this.nanoFocus.emit();
+    };
+    this.clearSelectValue = (ev) => {
+      if (this.clearSelect && !this.readonly && !this.disabled && ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+      if (this.multiple) {
+        this.value = [];
+        this.currInsertIndex = -1;
+      }
+      else
+        this.value = '';
+      this.inputCtrl.value = '';
+      const event = new window.Event('change');
+      this.inputCtrl.dispatchEvent(event);
+    };
+    this.onClick = () => {
+      this.setFocus();
+    };
+    /* Multi event handlers */
+    this.onDragStart = (ev) => {
+      let ele = ev.target;
+      this.dragVal = ele.dataset.value;
+    };
+    this.onDragEnd = (ev) => {
+      this.dragVal = null;
+      ev.preventDefault();
+    };
+    this.onDragLeave = (ev) => {
+      let ele = ev.target;
+      let spanVal = ele.dataset && ele.dataset.value ? ele.dataset.value : null;
+      if (!spanVal ||
+        this.dragVal === spanVal ||
+        !this.value.includes(this.dragVal)) {
+        ev.preventDefault();
+        return;
+      }
+      let to = this.value.indexOf(spanVal);
+      let from = this.value.indexOf(this.dragVal);
+      let tmpArr = this.value;
+      let tmpVal = tmpArr[to];
+      tmpArr[to] = tmpArr[from];
+      tmpArr[from] = tmpVal;
+      this.value = [...tmpArr];
+    };
+    this.onMultiInput = (ev) => {
+      this.inputSearchVal = ev.target.value.trim();
+      this.nanoSearchChange.emit({ value: ev.target.value.trim() });
+    };
+  }
+  get selectWrap() {
+    return this._selectWrap;
+  }
+  set selectWrap(ele) {
+    if (this._selectWrap === ele)
+      return;
+    this._selectWrap = ele;
+    this.setDataListOpts();
+  }
+  get datalist() {
+    return this._datalist;
+  }
+  set datalist(ele) {
+    if (this._datalist === ele)
+      return;
+    this._datalist = ele;
+    this.setDataListOpts();
+  }
+  /**
+   * 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.
+   */
+  get invalid() {
+    return this._invalid;
+  }
+  /**
+   * The value of the select.
+   */
+  get value() {
+    return this._value;
+  }
+  set value(val) {
+    if (typeof val === 'string') {
+      if (this.multiple)
+        this._value = val.split(',');
+      else
+        this._value = val;
+    }
+    else if (Array.isArray(val)) {
+      if (this.multiple)
+        this._value = val;
+      else
+        this._value = val[0];
+    }
+  }
+  /**
+   * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or
+   * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.
+   * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`
+   * Regardless - reading `options` will return the current component options - slotted or otherwise
+   */
+  get options() {
+    if (this._options.length)
+      return this._options;
+    if (!this.datalist || !this.datalist.activeOptions)
+      return [];
+    return this._eOptions.map((ao) => {
+      const { value, selected, label, filterMeta } = ao;
+      return { value, selected, label, filterMeta };
+    });
+  }
+  set options(opts) {
+    this._options = opts.map((opt) => {
+      if (typeof opt === 'string')
+        return { value: opt, label: opt };
+      else
+        return opt;
+    });
+  }
+  debounceChanged() {
+    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);
+  }
+  shouldValidate() {
+    if (this.onInit)
+      return;
+    if (this.invalid)
+      this.showErrorMsg = this._invalid = false;
+    this.customValidate();
+    if (this.validateOn !== 'dirty')
+      return;
+    this.showInlineValidation();
+  }
+  /**
+   * Update the native select element when the value changes
+   */
+  // eslint-disable-next-line @stencil/no-unused-watch
+  valueChanged() {
+    if (this.onInit) {
+      if (this.multiple)
+        this.currInsertIndex = this.value.length - 1;
+      return;
+    }
+    setTimeout((_) => this.shouldValidate(), 20);
+    this.nanoChange.emit({ value: this.value });
+  }
+  setDataListOpts() {
+    if (!this.datalist || !this.selectWrap)
+      return;
+    const currDWConfig = this.datalist.dropDownConfig || {};
+    this.datalist.dropDownConfig = Object.assign(Object.assign(Object.assign({}, currDWConfig), this.dropDownConfig), { tetherTo: this.selectWrap });
+    this.datalist.input = this.inputCtrl;
+  }
+  // Public Methods
+  /**
+   * Get the current state of the control.
+   * @param validateFirst - perform validation first before reporting
+   * @returns `{ isValid: boolean, errorMessage: string }`
+   */
+  async reportValidity(validateFirst) {
+    if (validateFirst)
+      this.showInlineValidation();
+    return {
+      isValid: !this.invalid,
+      errorMessage: this.errorMessage,
+    };
+  }
+  /**
+   * Sets focus on the specified `nano-select`. Use this method instead of the global
+   * `select.focus()`.
+   */
+  async setFocus() {
+    this.inputCtrl.focus();
+    setTimeout(() => this.inputCtrl.click(), 50);
+  }
+  /**
+   * Returns the native `<select>` element used under the hood.
+   */
+  getSelectElement() {
+    return Promise.resolve(this.nativeSelect);
+  }
+  /**
+   * 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.nativeSelect) {
+      this.nativeSelect.setCustomValidity(message);
+      this.showInlineValidation();
+    }
+  }
+  /* Logic */
+  get valArray() {
+    return typeof this.value === 'string'
+      ? this.value.length
+        ? [this.value]
+        : []
+      : this.value;
+  }
+  isValidValues() {
+    return this.valArray.find((val) => this.options.find((opt) => opt.value === val));
+  }
+  slotChangeObserver() {
+    const mo = (this.mo = new MutationObserver(() => this.processSlottedContent()));
+    mo.observe(this.el, { childList: true, subtree: true });
+  }
+  processSlottedContent() {
+    // see if we have label / helper content
+    this.hasLabelSlot = !!this.el.querySelectorAll('[slot="label"]').length;
+    this.hasHelperSlot = !!this.el.querySelector('[slot="helper"]');
+    // breaking change introduced in v2. Rm in v3
+    if (!!this.el.querySelector('select:not([class*="sc-nano-select"]) option')) {
+      console.warn('nesting `<option>` elements was removed in v2. Please update your code to use `<nano-option>` elements instead.', this.el);
+    }
+    // breaking change introduced in v2. Rm in v3
+    if (!!this.el.querySelector('[slot="legacy"]')) {
+      console.warn('The `legacy` slot has been removed. Please update your code', this.el);
+    }
+  }
+  getLabel(toFind) {
+    let label = this.options.find((opt) => {
+      var _a;
+      return !opt.disabled && ((_a = opt.value) === null || _a === void 0 ? void 0 : _a.length) && opt.value === toFind;
+    });
+    return label && label.label ? label.label : toFind;
+  }
+  /* Event handling */
+  handleBlur(e) {
+    if (!this.hasFocus)
+      return;
+    const kev = e;
+    let target;
+    raf(() => {
+      if (kev.key) {
+        if (kev.key !== 'Tab')
+          return;
+        target = getActiveElement();
+      }
+      else
+        target = e.target;
+      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {
+        this.onBlur();
+      }
+    });
+  }
+  /* Stencil Component lifecycle hooks */
+  connectedCallback() {
+    this.debounceChanged();
+    if (!Build.isBrowser)
+      return;
+    this.el.dispatchEvent(new CustomEvent('nanoDidLoad', {
+      detail: this.el,
+    }));
+  }
+  disconnectedCallback() {
+    document.dispatchEvent(new CustomEvent('nanoDidUnload', {
+      detail: this.el,
+    }));
+    if (!Build.isBrowser)
+      return;
+    if (this.mo)
+      this.mo.disconnect();
+  }
+  componentDidLoad() {
+    this.slotChangeObserver();
+    this.customValidate();
+    this.setDataListOpts();
+    raf(() => (this.onInit = false));
+  }
+  componentWillLoad() {
+    this.processSlottedContent();
+  }
+  render() {
+    const labelId = this.selectId + '-lbl';
+    const moreId = this.showInlineError || this.hasHelperSlot
+      ? this.selectId + '-moreId'
+      : '';
+    this.rtl = this.el.ownerDocument.dir === 'rtl';
+    this.valueItems = [];
+    const compWrapOptions = (({ el, floatLabel, label, errorMessage, showInlineError, hasHelperSlot, hasLabelSlot, hideLabel, placeholder, rtl, }) => ({
+      el,
+      floatLabel,
+      label,
+      errorMessage,
+      showInlineError,
+      hasHelperSlot,
+      hasLabelSlot,
+      hideLabel,
+      placeholder,
+      rtl,
+    }))(this);
+    const wrapOptions = Object.assign(Object.assign({}, compWrapOptions), { labelId,
+      moreId, hasValue: !!this.value.length || !!this.inputSearchVal.length, controlId: this.selectId });
+    const controlOptions = (({ readonly, disabled }) => ({
+      readonly,
+      disabled,
+      clearControl: this.clearSelect,
+    }))(this);
+    return (h(Host, { type: this.multiple ? 'select-multiple' : 'select-one', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': !!this.value.length || !!this.inputSearchVal.length, 'has-focus': this.hasFocus, 'is-invalid': this.invalid, 'has-label': this.label !== null && !this.floatLabel, 'has-float-label': this.label !== null && this.floatLabel, rtl: this.rtl, 'has-multiple': this.multiple, 'has-clr-btn': this.clearSelect, masked: this.mask, legacy: this.isLegacy }) }, h(FormControlWrap, Object.assign({}, wrapOptions), h(FormControl, Object.assign({}, controlOptions, { onClearText: this.clearSelectValue, control: this.el, ref: (el) => (this.selectWrap = el), endValueSlot: h("slot", { name: "down-arrow" }, h("nano-icon", { slot: "value-end", name: "light/chevron-down" })) }), this.multiple && (h("div", { class: "multi-wrap" }, this.multipleValues(labelId, moreId))), !this.multiple && [
+      this.mask && (h("div", { class: "select-mask" }, this.getLabel(this.value))),
+      h("input", { id: this.selectId, class: "native-input", ref: (input) => (this.inputCtrl = input), "aria-labelledby": labelId + ' ' + moreId, disabled: this.disabled, form: this.form, placeholder: !this.floatLabel && this.placeholder ? this.placeholder : '', readOnly: true, required: this.required, value: this.getLabel(this.value), onFocus: this.onFocus }),
+    ])), !this.readonly && !this.disabled && (h("nano-datalist", { onNanoOptionsUpdated: this.setOptions, ref: (el) => (this.datalist = el), selected: this.valArray, type: this.multiple ? 'selctMulti' : 'select', onNanoSelect: this.setValue, onNanoDeselect: (e) => {
+        e.preventDefault();
+        this.removeValue(e.detail.value);
+      }, options: this._options.length ? this._options : undefined }, this.allowCustomValues && this.multiple && !!this.inputSearchVal && (h("nano-option", { slot: "list-top", value: this.inputSearchVal, selected: false, label: this.inputSearchVal, onNanoSelect: () => this.inputCtrl.focus() }, h("span", { slot: "check-icon" }), "Add '", this.inputSearchVal, "'")), h("slot", null))), h("select", { id: this.selectId + '-hidden', class: "native-select", ref: (select) => (this.nativeSelect = select), "aria-labelledby": labelId + ' ' + moreId, disabled: this.disabled, form: this.form, multiple: this.multiple, name: this.name, required: this.required, onInvalid: this.handleInvalid }, this.allowCustomValues &&
+      this.valArray.map((val) => {
+        return (h("option", { value: val, selected: true }, val));
+      }), !this.allowCustomValues &&
+      this.options.map((opt) => {
+        return (h("option", { value: opt.value, selected: this.valArray.includes(opt.value), disabled: opt.disabled, label: opt.label }, this.valArray.includes(opt.value)));
+      }))));
+  }
+  multipleValues(labelId, moreId) {
+    let input = (h("input", { class: "multi-input", id: this.selectId, ref: (input) => (this.inputCtrl = input), readOnly: this.readonly, disabled: this.disabled, autoFocus: this.autofocus, autocomplete: "off", onKeyDown: this.handleDocumentKeyDown, onInput: this.onMultiInput, value: this.inputSearchVal, onTouchStart: this.onClick, onMouseDown: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder && !this.floatLabel && !this.value.length
+        ? this.placeholder
+        : '', "aria-labelledby": labelId + ' ' + moreId }));
+    if (!this.value.length)
+      return input;
+    return this.value.map((val, i) => {
+      let toReturn = (h("span", { onDragStart: this.onDragStart, onDragLeave: this.onDragLeave, onDragEnd: this.onDragEnd, onDragOver: (e) => e.preventDefault(), draggable: true, "data-value": val, ref: (span) => this.valueItems.push(span), class: "multi-value" }, h("span", null, this.getLabel(val)), h("button", { class: "multi-value-remove", type: "button", tabindex: "-1", onTouchEnd: () => {
+          this.removeValue(val);
+        }, onMouseUp: () => {
+          this.removeValue(val);
+        } }, h("nano-icon", { name: "light/times" }))));
+      if (i === 0 && this.currInsertIndex < 0)
+        toReturn = [input, toReturn];
+      else if (i === this.currInsertIndex)
+        toReturn = [toReturn, input];
+      return toReturn;
+    });
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "debounce": ["debounceChanged"],
+    "required": ["shouldValidate"],
+    "disabled": ["shouldValidate"],
+    "min": ["shouldValidate"],
+    "max": ["shouldValidate"],
+    "validateOn": ["shouldValidate"],
+    "readonly": ["shouldValidate"],
+    "value": ["valueChanged"],
+    "dropDownConfig": ["setDataListOpts"]
+  }; }
+  static get style() { return selectCss; }
+};
+Select = /*@__PURE__*/ proxyCustomElement(Select, [6, "nano-select", {
+    "invalid": [2564],
+    "color": [1],
+    "autofocus": [4],
+    "disabled": [516],
+    "validateOn": [1025, "validate-on"],
+    "showInlineError": [516, "show-inline-error"],
+    "label": [1],
+    "hideLabel": [4, "hide-label"],
+    "floatLabel": [4, "float-label"],
+    "multiple": [4],
+    "name": [1],
+    "placeholder": [1],
+    "readonly": [516],
+    "required": [4],
+    "size": [2],
+    "max": [2],
+    "min": [2],
+    "form": [1],
+    "allowCustomValues": [4, "allow-custom-values"],
+    "value": [6145],
+    "options": [6160],
+    "clearSelect": [4, "clear-select"],
+    "mask": [4],
+    "debounce": [2],
+    "dropDownConfig": [1040],
+    "currInsertIndex": [32],
+    "showErrorMsg": [32],
+    "errorMessage": [32],
+    "hasFocus": [32],
+    "hasLabelSlot": [32],
+    "hasHelperSlot": [32],
+    "inputSearchVal": [32],
+    "_eOptions": [32],
+    "reportValidity": [64],
+    "setFocus": [64],
+    "getSelectElement": [64],
+    "showError": [64]
+  }, [[17, "mousedown", "handleBlur"], [0, "keydown", "handleBlur"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-select", "nano-datalist", "nano-dropdown", "nano-icon", "nano-menu", "nano-option"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Select);
+      }
+      break;
+    case "nano-datalist":
+      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-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "nano-option":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { Select as S, defineCustomElement as d };
+
+//# sourceMappingURL=select.js.map