npm - @nanoporetech-digital/components - Versions diffs - 6.6.1 → 6.8.0 - Mend

@nanoporetech-digital/components 6.6.1 → 6.8.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 (186) hide show

package/dist/nano-components/nano-file-upload.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["fileUploadCss","fileInputIds","getDataTransfer","DataTransfer","ClipboardEvent","clipboardData","FileUpload","this","fileInputId","canChangeFileList","removeFiles","onClearClick","value","onBlur","hasFocus","validate","validateOn","showInlineValidation","nanoBlur","emit","onFocus","nanoFocus","errorMessage","inputEl","setCustomValidity","error","validity","valid","validationMessage","fileList","forEach","fileItem","checkFileSize","file","size","maxFileSize","checkFileType","type","accept","length","maxFiles","onInvalid","ev","showInlineError","preventDefault","onFileChoose","e","files","target","addNewFiles","onFileRemoveFileClick","push","closest","classList","remove","onFileRemoveAnim","filter","find","rmFile","f","location","URL","revokeObjectURL","onInputChange","nanoChange","onDragStop","stopPropagation","isDragging","onDragStart","onDrop","dataTransfer","FileUploadInput","eleType","listId","labelId","moreId","hasHelperSlot","h","class","htmlFor","id","onDragEnd","onDragLeave","onDragEnter","onDragOver","label","hasLabelSlot","hideLabel","name","placeholder","clearInput","disabled","tabindex","onClick","multiple","undefined","form","ref","input","publicInputEl","onChange","onReset","tabIndex","required","button","dropArea","map","key","onAnimationEnd","_","content","placement","iconName","href","fileListChange","arrToFileList","setTimeout","shouldValidate","requestAnimationFrame","invalid","_invalid","validityMessage","Array","from","objectURL","createObjectURL","fs","val","async","validateFirst","isValid","focus","getInputElement","Promise","resolve","message","globalClickHandler","composedPath","every","node","host","globalKeydownHandler","document","querySelector","i","len","items","add","match","nanoValidate","originalEvent","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","querySelectorAll","newFiles","findFile","disconnectedCallback","componentDidLoad","componentWillLoad","render","Host"],"sources":["./src/components/file-upload/file-upload.scss?tag=nano-file-upload&encapsulation=scoped","./src/components/file-upload/file-upload.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/button';\n\n:host {\n /*\n @prop --invalid-msg-color: Default value #{nano-color(danger, base)};\n * @prop --invalid-msg-font-size: Default value #{$input-help-font-size};\n\n * @prop --help-msg-color: Default value #{$input-help-color};\n\n * @prop --label-color: Default value #{$label-color};\n * @prop --label-color--invalid: Default value #{$label-color-invalid};\n * @prop --label-font-size: Default value #{$label-font-size};\n * @prop --label-padding: Default value #{$input-padding-bottom};\n * @prop --label-color--invalid: Default value #{$label-color-invalid};\n\n * @prop --drop-bg: Default value #{map.get($colors, blue--faded)};\n * @prop --drop-text: Default value #{map.get($colors, dimgrey)};\n * @prop --drop-height: Default value 3.5em;\n * @prop --drop-border-tint: Default value #{nano-color(primary, base, null, true)};\n * @prop --drop-border-width: Default value 2px;\n * @prop --drop-border-radius: Default value 5px;\n * @prop --drop-bg--invalid: Default value #{$input-background-color--invalid};\n * @prop --drop-border--invalid: Default value #{nano-color(danger, base, null, true)};\n\n * @prop --btn-bg: Default value #{nano-color(primary, base)};\n * @prop --btn-text: Default value #{nano-color(primary, contrast)};\n * @prop --btn-icon-size: Default value var(--nano-btn-icon-size, 1.4em);\n * @prop --btn-padding-top: Default value var(--nano-btn-padding-top, .5em);\n * @prop --btn-padding-bottom: Default value var(--nano-btn-padding-bottom, .5em);\n * @prop --btn-padding-start: Default value var(--nano-btn-padding-start, 1em);\n * @prop --btn-padding-end: Default value var(--nano-btn-padding-end, 1em);\n /\n\n min-block-size: 1rem;\n display: block;\n\n --invalid-msg-color: #{nano-color(danger, base)};\n --invalid-msg-font-size: #{$input-help-font-size};\n --help-msg-color: #{$input-help-color};\n --label-color: #{$label-color};\n --label-font-size: #{$label-font-size};\n --label-padding: #{$input-padding-bottom};\n --label-color--invalid: #{$label-color-invalid};\n --drop-bg: #{map.get($colors, blue--faded)};\n --drop-text: #{darken(map.get($colors, dimgrey), 11%)};\n --drop-height: 3.5em;\n --drop-border-tint: #{nano-color(primary, base, null, true)};\n --drop-border-width: 2px;\n --drop-border-radius: 5px;\n --drop-bg--invalid: #{$input-background-color--invalid};\n --drop-border--invalid: #{nano-color(danger, base, null, true)};\n --btn-bg: #{nano-color(primary, base)};\n --btn-text: #{nano-color(primary, contrast)};\n --btn-icon-size: var(--nano-btn-icon-size, 1.4em);\n --btn-padding-top: var(--nano-btn-padding-top, 0.5em);\n --btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5em);\n --btn-padding-start: var(--nano-btn-padding-start, 1rem);\n --btn-padding-end: var(--nano-btn-padding-end, 1rem);\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n {\n pointer-events: none !important;\n }\n}\n\n.file-upload {\n $self: &;\n\n /* Common /\n\n &__label {\n font-size: var(--label-font-size);\n padding: 0 0 var(--label-padding);\n margin: 0;\n line-height: 1;\n\n :host([invalid]:not([invalid='false'])) & {\n color: var(--label-color--invalid);\n }\n }\n\n &__input {\n @include visually-hide();\n }\n\n &__error,\n &__help,\n &__more,\n &__label {\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__more {\n block-size: 1em;\n margin-block: calc(var(--label-padding) / 2) var(--label-padding);\n margin-inline: 3px 0;\n position: relative;\n }\n\n &__error,\n &__help {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n\n .file-upload--invalid & {\n opacity: 1;\n }\n }\n\n &__error {\n color: var(--invalid-msg-color);\n font-stretch: condensed;\n opacity: 0;\n\n .file-upload--invalid & {\n opacity: 1;\n }\n }\n\n &__help {\n font-style: italic;\n opacity: 1;\n color: var(--help-msg-color);\n\n .file-upload--invalid & {\n opacity: 0;\n }\n }\n\n / Drop area / Multi file upload /\n\n &__drop {\n position: relative;\n inline-size: 100%;\n display: inline-block;\n }\n\n &__drop-area {\n flex-direction: column;\n background-color: var(--drop-bg);\n color: var(--drop-text);\n min-block-size: var(--drop-height);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.9em;\n position: relative;\n transition: background-color 0.15s ease-in-out;\n padding: 0.5rem;\n\n :host([disabled]:not([disabled='false'])) & {\n opacity: 0.7;\n }\n\n .file-upload--invalid & {\n background-color: var(--drop-bg--invalid);\n }\n\n .file-upload--dragging & {\n background-color: #{map.get($colors, white)};\n }\n\n &::after {\n content: '';\n position: absolute;\n border-radius: var(--drop-border-radius);\n border-width: var(--drop-border-width);\n border-color: rgb(var(--drop-border-tint) / 50%);\n border-style: dashed;\n inset: 0;\n transition:\n top 0.1s ease-in-out,\n bottom 0.1s ease-in-out,\n left 0.1s ease-in-out,\n right 0.1s ease-in-out;\n\n .file-upload--invalid & {\n border-color: rgb(var(--drop-border--invalid) / 100%);\n }\n\n .file-upload--dragging & {\n inset: 5px;\n }\n }\n\n span {\n color: rgb(var(--drop-border-tint) / 100%);\n text-decoration: underline;\n border-radius: 2px;\n z-index: 1;\n cursor: pointer;\n position: relative;\n\n .file-upload--focus & {\n box-shadow: #{$control-focus-style};\n }\n }\n }\n\n &__list {\n list-style: none;\n margin: 0;\n padding: 0;\n\n &-wrap {\n position: relative;\n inset-block-start: -4px;\n }\n\n &-item {\n inline-size: 100%;\n margin: 0 0 2px;\n display: flex;\n align-items: center;\n transform: translateZ(0);\n animation: hideListItem 0.3s ease-in-out forwards;\n\n @keyframes hideListItem {\n 0% {\n opacity: 1;\n transform: translateY(0);\n transform: translateZ(0);\n }\n\n 100% {\n opacity: 0;\n transform: translateY(10px);\n transform: translateZ(0);\n }\n }\n\n &--active {\n animation: showListItem 0.3s ease-in-out forwards;\n\n @keyframes showListItem {\n 0% {\n opacity: 0;\n transform: translateY(10px);\n transform: translateZ(0);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n transform: translateZ(0);\n }\n }\n }\n }\n\n .list-title {\n background: var(--nano-color-blue--faded);\n border-radius: 5px;\n padding: 5px;\n margin-inline-end: 2px;\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-size: 0.9em;\n color: var(--help-msg-color);\n }\n\n .list-button {\n background: var(--nano-color-blue--faded);\n border-radius: 5px;\n margin: 2px;\n }\n\n .list-error {\n --color: rgb(var(--drop-border--invalid) / 100%);\n }\n }\n\n / Button display / Single file upload /\n\n &__button {\n @include button-base;\n @include button-standard(\n var(--btn-bg),\n var(--btn-text),\n #{nano-color(primary, shade)}\n );\n\n --nano-btn-icon-size: var(--btn-icon-size);\n --nano-btn-line-height: var(--btn-icon-size);\n --nano-btn-padding-top: var(--btn-padding-top);\n --nano-btn-padding-bottom: var(--btn-padding-bottom);\n --nano-btn-padding-start: var(--btn-padding-start);\n --nano-btn-padding-end: var(--btn-padding-end);\n\n max-inline-size: 100%;\n font-size: 0.9em;\n\n :host([disabled]:not([disabled='false'])) & {\n opacity: 0.4;\n }\n\n .file-upload--dragging & {\n --nano-btn-border-style: dashed;\n }\n #{$self}__clear-btn {\n margin: 0;\n font-size: inherit;\n padding: 0;\n border: 0;\n outline: none;\n background-color: transparent;\n display: flex;\n align-items: stretch;\n inline-size: auto;\n color: var(--clear-btn-color);\n\n :host(.is-invalid) & {\n color: var(--clear-btn-color--invalid);\n }\n\n nano-icon {\n margin-inline: 0.4rem 0;\n margin-block: 0;\n }\n }\n #{$self}__btn-content {\n display: flex;\n align-items: center;\n\n span {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-inline-size: 0;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n Host,\n Element,\n ComponentInterface,\n State,\n Event,\n EventEmitter,\n Watch,\n VNode,\n Method,\n Listen,\n} from '@stencil/core';\nimport type {\n ControlValidity,\n ControlValidityEventDetail,\n FileInputChangeEventDetail,\n FileWithUrl,\n} from '../../interface';\n\nlet fileInputIds = 0;\n\nlet getDataTransfer = () => new DataTransfer();\ntry {\n getDataTransfer();\n} catch {\n try {\n getDataTransfer = () => new ClipboardEvent('').clipboardData;\n getDataTransfer();\n } catch {\n getDataTransfer = null;\n }\n}\n\ninterface FileValidation {\n file: File;\n valid: boolean;\n validationMessage?: string;\n location?: string;\n}\n/\n A better UI experience for `input type=\"file\"` form controls.\n \n - Drag and Drop\n * - Validation options\n * - Preview and manage multiple files\n /\n@Component({\n tag: 'nano-file-upload',\n styleUrl: 'file-upload.scss',\n scoped: true,\n})\nexport class FileUpload implements ComponentInterface {\n private inputEl: HTMLInputElement;\n private publicInputEl: HTMLInputElement;\n private mo!: MutationObserver;\n private fileInputId = `nano-file-upload-${fileInputIds++}`;\n private canChangeFileList = !!getDataTransfer;\n private removeFiles: FileValidation[] = [];\n\n @State() hasHelperSlot: boolean;\n @State() hasLabelSlot: boolean;\n @State() errorMessage: string = '';\n @State() isDragging = false;\n @State() fileList: FileValidation[] = [];\n @Watch('fileList')\n fileListChange() {\n if (this.canChangeFileList) {\n this.publicInputEl.value = '';\n this.inputEl.files = this.arrToFileList(\n this.fileList.map((file) => file.file)\n );\n setTimeout(() => {\n this.nanoChange.emit({ value: this.value, files: this.files });\n }, 20);\n }\n }\n @State() hasFocus: boolean;\n\n @Element() host: HTMLNanoFileUploadElement;\n\n // public props\n\n /* Name of the form control. Submitted with the form as part of a name/value pair. /\n @Prop() name!: string;\n\n /* The accept attribute value is a string that defines the file types the file input should accept.\n * E.g. for a MS Word file: `.doc, .docx,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document` /\n @Prop() accept?: string;\n\n /* Specifies which camera to use for capture of image or video data. `user` for the user-facing camera and/or microphone.\n * `environment` specifies the the outward-facing camera and/or microphone. If the requested facing mode isn't available,\n * the user agent may fall back to its preferred default mode. /\n @Prop() capture?: 'user' \| 'environment';\n\n /* The maximum file size allowed per file (Megabytes) /\n @Prop() maxFileSize: number = 1;\n\n /* The maximum file size allowed per file (bytes). /\n @Prop() maxFiles: number = 1;\n\n /* String to place within a label element. /\n @Prop() label!: string;\n\n /* Placeholder only used within single file uploads. /\n @Prop() placeholder: string = 'Choose a file...';\n\n /* Visually hide the label - but make it accessible. /\n @Prop() hideLabel?: boolean = false;\n\n /* If `true`, the user must select a file to upload before submitting a form. /\n @Prop() required = false;\n\n /* If `true`, the user cannot interact with the select. /\n @Prop({ reflect: true }) disabled = false;\n\n /* If `true`, a clear icon will appear in the input when there is a value.\n * Clicking it clears the input. Only used within single file uploads. /\n @Prop() clearInput = false;\n\n /* Whether to show validation errors underneath input /\n @Prop({ reflect: true }) showInlineError = true;\n\n /* When should the field perform validation /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submit';\n\n /* The form element to associate with this input (its form owner). Must be the id of a form. /\n @Prop() form?: string \| null;\n\n @Watch('maxFiles')\n @Watch('maxFileSize')\n @Watch('capture')\n @Watch('accept')\n @Watch('required')\n @Watch('disabled')\n @Watch('fileList')\n protected shouldValidate() {\n if (!this.inputEl) return;\n\n this.validate();\n requestAnimationFrame(() => {\n if (this.validateOn === 'dirty') this.showInlineValidation();\n });\n }\n\n @State() _invalid = false;\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 @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n\n /\n Current validation message - if any. @readonly\n /\n @Prop()\n get validityMessage() {\n if (!this.inputEl) return '';\n return this.inputEl.validationMessage;\n }\n\n /* A File array that lists every selected file.\n * Has an added `objectURL` property returning a `DOMString`\n * containing an object URL that can be used to reference the contents of the specified source\n * This list has no more than one member unless the multiple attribute is specified /\n @Prop()\n get files(): FileWithUrl[] {\n return this.inputEl\n ? Array.from(this.inputEl.files).map((file: FileWithUrl) => {\n file.objectURL = URL.createObjectURL(file);\n return file;\n })\n : [];\n }\n set files(fs: FileWithUrl[]) {\n this.addNewFiles(this.arrToFileList(fs));\n }\n\n /* A file input's value attribute contains a DOMString that represents the path to the selected file(s).\n * If the user selected multiple files, the value represents the first file in the list of files they selected.\n * You can reset the file-upload control by setting the value to an empty string e.g. `var input.value = ''` /\n @Prop()\n get value() {\n return this.inputEl ? this.inputEl.value : '';\n }\n set value(val: string) {\n if (val === '' && this.inputEl) {\n this.fileList = [];\n this.inputEl.value = '';\n }\n }\n\n // Events\n\n /* Emitted when the value has changed. /\n @Event() nanoChange!: EventEmitter<FileInputChangeEventDetail>;\n\n /* Emited when the checkbox is focused /\n @Event() nanoFocus: EventEmitter;\n\n /* Emited when the checkbox is blurred /\n @Event() nanoBlur: EventEmitter;\n\n /* Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`. /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // Public methods\n\n /* Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }` /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n if (validateFirst) {\n this.validate();\n this.showInlineValidation();\n }\n return {\n isValid: !this.invalid,\n errorMessage: this.inputEl.validationMessage,\n };\n }\n\n /* Sets focus on the specified `nano-input`. Use this method instead of the global\n * `input.focus()`. /\n @Method()\n async setFocus() {\n if (this.inputEl) this.inputEl.focus();\n }\n\n /* @returns the native `<input>` element used under the hood /\n @Method()\n getInputElement(): Promise<HTMLInputElement \| HTMLTextAreaElement> {\n return Promise.resolve(this.inputEl!);\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 * @param message */\n @Method()\n async showError(message: string) {\n if (this.inputEl) {\n this.inputEl.setCustomValidity(message);\n this.validate();\n this.showInlineValidation();\n }\n }\n\n // Listeners\n\n @Listen('click', { target: 'window' })\n globalClickHandler(e: Event) {\n if (!this.hasFocus) return;\n if (e.composedPath().every((node) => node !== this.host)) this.onBlur();\n }\n\n @Listen('keydown', { target: 'window' })\n globalKeydownHandler(e: KeyboardEvent) {\n if (!this.hasFocus \|\| e.key !== 'Tab') return;\n if (e.target !== this.inputEl) this.onBlur();\n }\n\n @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.host.closest('form');\n if (!form \|\| e.target !== this.host.closest('form')) return;\n\n this.value = '';\n }\n\n // Private methods\n\n private onClearClick = () => {\n this.value = '';\n };\n\n private onBlur = () => {\n this.hasFocus = false;\n this.validate();\n if (this.validateOn === 'dirty') this.showInlineValidation();\n this.nanoBlur.emit();\n };\n\n private onFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private arrToFileList(files: File[]): FileList {\n const fileList = getDataTransfer();\n for (let i = 0, len = files.length; i < len; i++)\n fileList.items.add(files[i]);\n return fileList.files;\n }\n\n private checkFileSize(size: number): boolean {\n return size / 1000000 <= this.maxFileSize;\n }\n\n private checkFileType(type: string): boolean {\n if (!this.accept) return true;\n return this.accept.match(type) && this.accept.match(type).length > 0;\n }\n\n private validate = () => {\n this.errorMessage = '';\n this.inputEl.setCustomValidity('');\n let error: string;\n\n if (!this.inputEl.validity.valid) {\n error = this.inputEl.validationMessage;\n } else {\n this.fileList.forEach((fileItem) => {\n error = null;\n if (!this.checkFileSize(fileItem.file.size)) {\n error =\n 'Maximum file size exceeded. Max file size is ' +\n this.maxFileSize +\n 'Mb';\n } else if (!this.checkFileType(fileItem.file.type))\n error = `File type is not allowed (${this.accept})`;\n\n fileItem.validationMessage = error;\n fileItem.valid = !error;\n });\n if (this.fileList.length > this.maxFiles)\n error = `Maxinum number of files exceeded (${this.maxFiles})`;\n }\n\n if (!!error) this.inputEl.setCustomValidity(error);\n };\n\n private showInlineValidation(ev?: Event) {\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n this._invalid = false;\n this.errorMessage = '';\n\n if (!this.inputEl.validity.valid) {\n this.errorMessage = this.inputEl.validationMessage;\n this._invalid = true;\n }\n\n this.nanoValidate.emit({\n isValid: !this._invalid,\n errorMessage: this.inputEl.validationMessage,\n originalEvent: ev,\n });\n }\n\n private slotChangeObserver() {\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true, subtree: true });\n }\n\n private processSlottedContent() {\n // see if we have slot content\n this.hasLabelSlot = !!this.host.querySelectorAll('[slot=\"label\"]');\n this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n }\n\n private addNewFiles(files: FileList) {\n const fileList: FileValidation[] = Array.from(files).map((file) => {\n return {\n file: file,\n location: URL.createObjectURL(file),\n valid: true,\n validationMessage: null,\n };\n });\n\n // if we have a list and we're in a browser that can amend files\n // append files to the list, otherwise replace\n if (this.canChangeFileList && this.maxFiles > 1) {\n const newFiles = fileList.filter(\n (findFile) =>\n !this.fileList.find((file) => file.file.name === findFile.file.name)\n );\n this.fileList = [...this.fileList, ...newFiles];\n } else this.fileList = fileList;\n }\n\n // event handlers & hooks\n\n private onInvalid = (ev: Event) => {\n if (this.showInlineError) ev.preventDefault();\n this.validate();\n this.showInlineValidation(ev);\n };\n\n private onFileChoose = (e: Event) => {\n const files = (e.target as HTMLInputElement).files;\n if (files && files.length)\n this.addNewFiles((e.target as HTMLInputElement).files);\n };\n\n private onFileRemoveFileClick = (e: Event, file: FileValidation) => {\n if (!this.canChangeFileList) return;\n this.removeFiles.push(file);\n\n (e.target as HTMLElement)\n .closest('.file-upload__list-item--active')\n .classList.remove('file-upload__list-item--active');\n };\n\n private onFileRemoveAnim = () => {\n if (!this.canChangeFileList \|\| !this.removeFiles.length) return;\n this.fileList = this.fileList.filter(\n (fileItem) => !this.removeFiles.find((rmFile) => rmFile === fileItem)\n );\n try {\n this.removeFiles.forEach((f) =>\n f.location ? URL.revokeObjectURL(f.location) : ''\n );\n } catch (e) {}\n this.removeFiles = [];\n };\n\n private onInputChange = () => {\n this.nanoChange.emit({ value: this.value, files: this.files });\n };\n\n private onDragStop = (e: DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n this.isDragging = false;\n };\n\n private onDragStart = (e: DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n this.isDragging = true;\n };\n\n private onDrop = (e: DragEvent) => {\n this.onDragStop(e);\n if (e.dataTransfer.files && e.dataTransfer.files.length)\n this.addNewFiles(e.dataTransfer.files);\n };\n\n // Component lifecycle\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private FileUploadInput = (\n eleType: 'drop' \| 'btn',\n listId?: string\n ): VNode[] => {\n const labelId = this.fileInputId + '-lbl';\n const moreId =\n this.showInlineError \|\| this.hasHelperSlot\n ? this.fileInputId + '-more'\n : '';\n\n return [\n <div class={'file-upload__' + eleType + '-wrap'}>\n <label\n class={`file-upload__` + eleType}\n htmlFor={this.fileInputId}\n id={labelId}\n onDrop={(e) => {\n this.onDrop(e);\n this.onDragStop(e);\n }}\n onDragEnd={this.onDragStop}\n onDragLeave={this.onDragStop}\n onDragEnter={this.onDragStart}\n onDragOver={this.onDragStart}\n >\n {(!!this.label \|\| (this.hasLabelSlot && eleType !== 'drop')) && (\n <div\n class={`file-upload__label ${\n this.hideLabel ? 'visually-hide' : ''\n }`}\n >\n {!!this.label && !!this.label.length ? this.label : ''}\n {!this.label && this.hasLabelSlot && eleType !== 'drop' && (\n <slot name=\"label\" />\n )}\n </div>\n )}\n {eleType === 'drop' && (\n <div class=\"file-upload__drop-area\">\n <div>{this.hasLabelSlot && <slot name=\"label\" />}</div>\n <div>\n Drag and drop or <span>browse</span>\n </div>\n </div>\n )}\n {eleType === 'btn' && (\n <div\n class={`file-upload__button button--keyline button--icon-start ${\n this.hasFocus ? 'button--focus' : ''\n }`}\n >\n <div class={`file-upload__btn-content`}>\n <nano-icon name=\"regular/cloud-upload\" />\n <span>\n {!!this.fileList.length\n ? this.fileList[0].file.name\n : this.placeholder}\n </span>\n {!!this.value && this.clearInput && !this.disabled && (\n <button\n type=\"button\"\n class=\"icon file-upload__clear-btn\"\n tabindex=\"-1\"\n onClick={this.onClearClick}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n </button>\n )}\n </div>\n </div>\n )}\n <input\n aria-labelledby={labelId + ' ' + moreId + ' ' + listId}\n type=\"file\"\n id={this.fileInputId}\n accept={this.accept}\n class=\"file-upload__input\"\n multiple={this.maxFiles > 1}\n disabled={this.disabled}\n name={this.canChangeFileList ? undefined : this.name}\n form={this.form}\n ref={(input) => {\n if (this.canChangeFileList) {\n this.publicInputEl = input;\n return;\n }\n this.inputEl = input;\n }}\n onChange={this.onFileChoose}\n onFocus={this.onFocus}\n onReset={this.onInputChange}\n />\n </label>\n <input\n name={!this.canChangeFileList ? undefined : this.name}\n form={this.form}\n ref={(input) => {\n if (!this.canChangeFileList) return;\n this.inputEl = input;\n }}\n type=\"file\"\n id={this.fileInputId + '-hidden'}\n tabIndex={-1}\n multiple={true}\n class=\"file-upload__input\"\n disabled={this.disabled}\n required={this.required}\n accept={this.accept}\n onInvalid={this.onInvalid}\n onChange={this.onInputChange}\n />\n </div>,\n this.showInlineError \|\| this.hasHelperSlot ? (\n <div class=\"file-upload__more\" id={moreId}>\n {this.showInlineError && !!this.errorMessage.length ? (\n <div class=\"file-upload__error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"file-upload__help\">\n <slot name=\"helper\" />\n </div>\n </div>\n ) : (\n ''\n ),\n ];\n };\n\n private button = (): VNode[] => {\n return this.FileUploadInput('btn');\n };\n\n private dropArea = (): VNode[] => {\n const listId = this.fileInputId + '-list';\n return [\n this.FileUploadInput('drop', listId),\n <output class=\"file-upload__list-wrap\" id={listId}>\n {!!this.fileList && this.fileList.length > 0 && (\n <ul class=\"file-upload__list list\">\n {this.fileList.map((file) => {\n return (\n <li\n key={file.file.name}\n class=\"file-upload__list-item file-upload__list-item--active list-item\"\n onAnimationEnd={(_) => this.onFileRemoveAnim()}\n >\n <span class=\"list-title\">{file.file.name}</span>\n {!file.valid && (\n <nano-tooltip\n content={file.validationMessage}\n placement=\"left\"\n >\n <nano-icon-button\n class=\"list-button list-error\"\n iconName=\"light/exclamation-triangle\"\n label=\"File error\"\n />\n </nano-tooltip>\n )}\n {this.canChangeFileList && (\n <nano-icon-button\n class=\"list-button list-button--view\"\n type=\"button\"\n iconName=\"light/eye\"\n label=\"View file\"\n target=\"_blank\"\n href={file.location}\n />\n )}\n {this.canChangeFileList && (\n <nano-icon-button\n onClick={(e) => this.onFileRemoveFileClick(e, file)}\n class=\"list-button list-button--remove\"\n iconName=\"light/times\"\n label=\"Remove file\"\n />\n )}\n </li>\n );\n })}\n </ul>\n )}\n </output>,\n ];\n };\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'file-upload': true,\n 'file-upload--dragging': this.isDragging,\n 'file-upload--focus': this.hasFocus,\n 'file-upload--invalid': this._invalid,\n }}\n >\n {this.maxFiles > 1 ? <this.dropArea /> : <this.button />}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["fileUploadCss","fileInputIds","getDataTransfer","DataTransfer","ClipboardEvent","clipboardData","FileUpload","this","fileInputId","canChangeFileList","removeFiles","onClearClick","value","onBlur","hasFocus","validate","validateOn","showInlineValidation","nanoBlur","emit","onFocus","nanoFocus","errorMessage","inputEl","setCustomValidity","error","validity","valid","validationMessage","fileList","forEach","fileItem","checkFileSize","file","size","maxFileSize","checkFileType","type","accept","length","maxFiles","onInvalid","ev","showInlineError","preventDefault","onFileChoose","e","files","target","addNewFiles","onFileRemoveFileClick","push","closest","classList","remove","onFileRemoveAnim","filter","find","rmFile","f","location","URL","revokeObjectURL","onInputChange","nanoChange","onDragStop","stopPropagation","isDragging","onDragStart","onDrop","dataTransfer","FileUploadInput","eleType","listId","labelId","moreId","hasHelperSlot","h","class","htmlFor","id","onDragEnd","onDragLeave","onDragEnter","onDragOver","label","hasLabelSlot","hideLabel","name","placeholder","clearInput","disabled","tabindex","onClick","multiple","undefined","form","ref","input","publicInputEl","onChange","onReset","tabIndex","required","button","dropArea","map","key","onAnimationEnd","_","content","placement","iconName","href","fileListChange","arrToFileList","setTimeout","shouldValidate","requestAnimationFrame","invalid","_invalid","validityMessage","Array","from","objectURL","createObjectURL","fs","val","async","validateFirst","isValid","focus","getInputElement","Promise","resolve","message","globalClickHandler","composedPath","every","node","host","globalKeydownHandler","document","querySelector","i","len","items","add","match","nanoValidate","originalEvent","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","querySelectorAll","newFiles","findFile","disconnectedCallback","componentDidLoad","componentWillLoad","render","Host"],"sources":["./src/components/file-upload/file-upload.scss?tag=nano-file-upload&encapsulation=scoped","./src/components/file-upload/file-upload.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/button';\n\n:host {\n /*\n @prop --invalid-msg-color: Default value #{nano-color(danger, base)};\n * @prop --invalid-msg-font-size: Default value #{$input-help-font-size};\n\n * @prop --help-msg-color: Default value #{$input-help-color};\n\n * @prop --label-color: Default value #{$label-color};\n * @prop --label-color--invalid: Default value #{$label-color-invalid};\n * @prop --label-font-size: Default value #{$label-font-size};\n * @prop --label-padding: Default value #{$input-padding-bottom};\n * @prop --label-color--invalid: Default value #{$label-color-invalid};\n\n * @prop --drop-bg: Default value #{map.get($colors, blue--faded)};\n * @prop --drop-text: Default value #{map.get($colors, dimgrey)};\n * @prop --drop-height: Default value 3.5em;\n * @prop --drop-border-tint: Default value #{nano-color(primary, base, null, true)};\n * @prop --drop-border-width: Default value 2px;\n * @prop --drop-border-radius: Default value 5px;\n * @prop --drop-bg--invalid: Default value #{$input-background-color--invalid};\n * @prop --drop-border--invalid: Default value #{nano-color(danger, base, null, true)};\n\n * @prop --btn-bg: Default value #{nano-color(primary, base)};\n * @prop --btn-text: Default value #{nano-color(primary, contrast)};\n * @prop --btn-icon-size: Default value var(--nano-btn-icon-size, 1.4em);\n * @prop --btn-padding-top: Default value var(--nano-btn-padding-top, .5em);\n * @prop --btn-padding-bottom: Default value var(--nano-btn-padding-bottom, .5em);\n * @prop --btn-padding-start: Default value var(--nano-btn-padding-start, 1em);\n * @prop --btn-padding-end: Default value var(--nano-btn-padding-end, 1em);\n /\n\n min-block-size: 1rem;\n display: block;\n\n --invalid-msg-color: #{nano-color(danger, base)};\n --invalid-msg-font-size: #{$input-help-font-size};\n --help-msg-color: #{$input-help-color};\n --label-color: #{$label-color};\n --label-font-size: #{$label-font-size};\n --label-padding: #{$input-padding-bottom};\n --label-color--invalid: #{$label-color-invalid};\n --drop-bg: #{map.get($colors, blue--faded)};\n --drop-text: #{darken(map.get($colors, dimgrey), 11%)};\n --drop-height: 3.5em;\n --drop-border-tint: #{nano-color(primary, base, null, true)};\n --drop-border-width: 2px;\n --drop-border-radius: 5px;\n --drop-bg--invalid: #{$input-background-color--invalid};\n --drop-border--invalid: #{nano-color(danger, base, null, true)};\n --btn-bg: #{nano-color(primary, base)};\n --btn-text: #{nano-color(primary, contrast)};\n --btn-icon-size: var(--nano-btn-icon-size, 1.4em);\n --btn-padding-top: var(--nano-btn-padding-top, 0.5em);\n --btn-padding-bottom: var(--nano-btn-padding-bottom, 0.5em);\n --btn-padding-start: var(--nano-btn-padding-start, 1rem);\n --btn-padding-end: var(--nano-btn-padding-end, 1rem);\n}\n\n:host([disabled]:not([disabled='false'])) {\n opacity: 0.7;\n\n {\n pointer-events: none !important;\n }\n}\n\n.file-upload {\n $self: &;\n\n /* Common /\n\n &__label {\n font-size: var(--label-font-size);\n padding: 0 0 var(--label-padding);\n margin: 0;\n line-height: 1;\n\n :host([invalid]:not([invalid='false'])) & {\n color: var(--label-color--invalid);\n }\n }\n\n &__input {\n @include visually-hide();\n }\n\n &__error,\n &__help,\n &__more,\n &__label {\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__more {\n block-size: 1em;\n margin-block: calc(var(--label-padding) / 2) var(--label-padding);\n margin-inline: 3px 0;\n position: relative;\n }\n\n &__error,\n &__help {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n\n .file-upload--invalid & {\n opacity: 1;\n }\n }\n\n &__error {\n color: var(--invalid-msg-color);\n opacity: 0;\n\n .file-upload--invalid & {\n opacity: 1;\n }\n }\n\n &__help {\n font-style: italic;\n opacity: 1;\n color: var(--help-msg-color);\n\n .file-upload--invalid & {\n opacity: 0;\n }\n }\n\n / Drop area / Multi file upload /\n\n &__drop {\n position: relative;\n inline-size: 100%;\n display: inline-block;\n }\n\n &__drop-area {\n flex-direction: column;\n background-color: var(--drop-bg);\n color: var(--drop-text);\n min-block-size: var(--drop-height);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.9em;\n position: relative;\n transition: background-color 0.15s ease-in-out;\n padding: 0.5rem;\n\n :host([disabled]:not([disabled='false'])) & {\n opacity: 0.7;\n }\n\n .file-upload--invalid & {\n background-color: var(--drop-bg--invalid);\n }\n\n .file-upload--dragging & {\n background-color: #{map.get($colors, white)};\n }\n\n &::after {\n content: '';\n position: absolute;\n border-radius: var(--drop-border-radius);\n border-width: var(--drop-border-width);\n border-color: rgb(var(--drop-border-tint) / 50%);\n border-style: dashed;\n inset: 0;\n transition:\n top 0.1s ease-in-out,\n bottom 0.1s ease-in-out,\n left 0.1s ease-in-out,\n right 0.1s ease-in-out;\n\n .file-upload--invalid & {\n border-color: rgb(var(--drop-border--invalid) / 100%);\n }\n\n .file-upload--dragging & {\n inset: 5px;\n }\n }\n\n span {\n color: rgb(var(--drop-border-tint) / 100%);\n text-decoration: underline;\n border-radius: 2px;\n z-index: 1;\n cursor: pointer;\n position: relative;\n\n .file-upload--focus & {\n box-shadow: #{$control-focus-style};\n }\n }\n }\n\n &__list {\n list-style: none;\n margin: 0;\n padding: 0;\n\n &-wrap {\n position: relative;\n inset-block-start: -4px;\n }\n\n &-item {\n inline-size: 100%;\n margin: 0 0 2px;\n display: flex;\n align-items: center;\n transform: translateZ(0);\n animation: hideListItem 0.3s ease-in-out forwards;\n\n @keyframes hideListItem {\n 0% {\n opacity: 1;\n transform: translateY(0);\n transform: translateZ(0);\n }\n\n 100% {\n opacity: 0;\n transform: translateY(10px);\n transform: translateZ(0);\n }\n }\n\n &--active {\n animation: showListItem 0.3s ease-in-out forwards;\n\n @keyframes showListItem {\n 0% {\n opacity: 0;\n transform: translateY(10px);\n transform: translateZ(0);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n transform: translateZ(0);\n }\n }\n }\n }\n\n .list-title {\n background: var(--nano-color-blue--faded);\n border-radius: 5px;\n padding: 5px;\n margin-inline-end: 2px;\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n font-size: 0.9em;\n color: var(--help-msg-color);\n }\n\n .list-button {\n background: var(--nano-color-blue--faded);\n border-radius: 5px;\n margin: 2px;\n }\n\n .list-error {\n --color: rgb(var(--drop-border--invalid) / 100%);\n }\n }\n\n / Button display / Single file upload /\n\n &__button {\n @include button-base;\n @include button-standard(\n var(--btn-bg),\n var(--btn-text),\n #{nano-color(primary, shade)}\n );\n\n --nano-btn-icon-size: var(--btn-icon-size);\n --nano-btn-line-height: var(--btn-icon-size);\n --nano-btn-padding-top: var(--btn-padding-top);\n --nano-btn-padding-bottom: var(--btn-padding-bottom);\n --nano-btn-padding-start: var(--btn-padding-start);\n --nano-btn-padding-end: var(--btn-padding-end);\n\n max-inline-size: 100%;\n font-size: 0.9em;\n\n :host([disabled]:not([disabled='false'])) & {\n opacity: 0.4;\n }\n\n .file-upload--dragging & {\n --nano-btn-border-style: dashed;\n }\n #{$self}__clear-btn {\n margin: 0;\n font-size: inherit;\n padding: 0;\n border: 0;\n outline: none;\n background-color: transparent;\n display: flex;\n align-items: stretch;\n inline-size: auto;\n color: var(--clear-btn-color);\n\n :host(.is-invalid) & {\n color: var(--clear-btn-color--invalid);\n }\n\n nano-icon {\n margin-inline: 0.4rem 0;\n margin-block: 0;\n }\n }\n #{$self}__btn-content {\n display: flex;\n align-items: center;\n\n span {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-inline-size: 0;\n }\n }\n }\n}\n","import {\n Component,\n Prop,\n h,\n Host,\n Element,\n ComponentInterface,\n State,\n Event,\n EventEmitter,\n Watch,\n VNode,\n Method,\n Listen,\n} from '@stencil/core';\nimport type {\n ControlValidity,\n ControlValidityEventDetail,\n FileInputChangeEventDetail,\n FileWithUrl,\n} from '../../interface';\n\nlet fileInputIds = 0;\n\nlet getDataTransfer = () => new DataTransfer();\ntry {\n getDataTransfer();\n} catch {\n try {\n getDataTransfer = () => new ClipboardEvent('').clipboardData;\n getDataTransfer();\n } catch {\n getDataTransfer = null;\n }\n}\n\ninterface FileValidation {\n file: File;\n valid: boolean;\n validationMessage?: string;\n location?: string;\n}\n/\n A better UI experience for `input type=\"file\"` form controls.\n \n - Drag and Drop\n * - Validation options\n * - Preview and manage multiple files\n /\n@Component({\n tag: 'nano-file-upload',\n styleUrl: 'file-upload.scss',\n scoped: true,\n})\nexport class FileUpload implements ComponentInterface {\n private inputEl: HTMLInputElement;\n private publicInputEl: HTMLInputElement;\n private mo!: MutationObserver;\n private fileInputId = `nano-file-upload-${fileInputIds++}`;\n private canChangeFileList = !!getDataTransfer;\n private removeFiles: FileValidation[] = [];\n\n @State() hasHelperSlot: boolean;\n @State() hasLabelSlot: boolean;\n @State() errorMessage: string = '';\n @State() isDragging = false;\n @State() fileList: FileValidation[] = [];\n @Watch('fileList')\n fileListChange() {\n if (this.canChangeFileList) {\n this.publicInputEl.value = '';\n this.inputEl.files = this.arrToFileList(\n this.fileList.map((file) => file.file)\n );\n setTimeout(() => {\n this.nanoChange.emit({ value: this.value, files: this.files });\n }, 20);\n }\n }\n @State() hasFocus: boolean;\n\n @Element() host: HTMLNanoFileUploadElement;\n\n // public props\n\n /* Name of the form control. Submitted with the form as part of a name/value pair. /\n @Prop() name!: string;\n\n /* The accept attribute value is a string that defines the file types the file input should accept.\n * E.g. for a MS Word file: `.doc, .docx,application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document` /\n @Prop() accept?: string;\n\n /* Specifies which camera to use for capture of image or video data. `user` for the user-facing camera and/or microphone.\n * `environment` specifies the the outward-facing camera and/or microphone. If the requested facing mode isn't available,\n * the user agent may fall back to its preferred default mode. /\n @Prop() capture?: 'user' \| 'environment';\n\n /* The maximum file size allowed per file (Megabytes) /\n @Prop() maxFileSize: number = 1;\n\n /* The maximum file size allowed per file (bytes). /\n @Prop() maxFiles: number = 1;\n\n /* String to place within a label element. /\n @Prop() label!: string;\n\n /* Placeholder only used within single file uploads. /\n @Prop() placeholder: string = 'Choose a file...';\n\n /* Visually hide the label - but make it accessible. /\n @Prop() hideLabel?: boolean = false;\n\n /* If `true`, the user must select a file to upload before submitting a form. /\n @Prop() required = false;\n\n /* If `true`, the user cannot interact with the select. /\n @Prop({ reflect: true }) disabled = false;\n\n /* If `true`, a clear icon will appear in the input when there is a value.\n * Clicking it clears the input. Only used within single file uploads. /\n @Prop() clearInput = false;\n\n /* Whether to show validation errors underneath input /\n @Prop({ reflect: true }) showInlineError = true;\n\n /* When should the field perform validation /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submit';\n\n /* The form element to associate with this input (its form owner). Must be the id of a form. /\n @Prop() form?: string \| null;\n\n @Watch('maxFiles')\n @Watch('maxFileSize')\n @Watch('capture')\n @Watch('accept')\n @Watch('required')\n @Watch('disabled')\n @Watch('fileList')\n protected shouldValidate() {\n if (!this.inputEl) return;\n\n this.validate();\n requestAnimationFrame(() => {\n if (this.validateOn === 'dirty') this.showInlineValidation();\n });\n }\n\n @State() _invalid = false;\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 @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n\n /\n Current validation message - if any. @readonly\n /\n @Prop()\n get validityMessage() {\n if (!this.inputEl) return '';\n return this.inputEl.validationMessage;\n }\n\n /* A File array that lists every selected file.\n * Has an added `objectURL` property returning a `DOMString`\n * containing an object URL that can be used to reference the contents of the specified source\n * This list has no more than one member unless the multiple attribute is specified /\n @Prop()\n get files(): FileWithUrl[] {\n return this.inputEl\n ? Array.from(this.inputEl.files).map((file: FileWithUrl) => {\n file.objectURL = URL.createObjectURL(file);\n return file;\n })\n : [];\n }\n set files(fs: FileWithUrl[]) {\n this.addNewFiles(this.arrToFileList(fs));\n }\n\n /* A file input's value attribute contains a DOMString that represents the path to the selected file(s).\n * If the user selected multiple files, the value represents the first file in the list of files they selected.\n * You can reset the file-upload control by setting the value to an empty string e.g. `var input.value = ''` /\n @Prop()\n get value() {\n return this.inputEl ? this.inputEl.value : '';\n }\n set value(val: string) {\n if (val === '' && this.inputEl) {\n this.fileList = [];\n this.inputEl.value = '';\n }\n }\n\n // Events\n\n /* Emitted when the value has changed. /\n @Event() nanoChange!: EventEmitter<FileInputChangeEventDetail>;\n\n /* Emited when the checkbox is focused /\n @Event() nanoFocus: EventEmitter;\n\n /* Emited when the checkbox is blurred /\n @Event() nanoBlur: EventEmitter;\n\n /* Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`. /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // Public methods\n\n /* Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }` /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n if (validateFirst) {\n this.validate();\n this.showInlineValidation();\n }\n return {\n isValid: !this.invalid,\n errorMessage: this.inputEl.validationMessage,\n };\n }\n\n /* Sets focus on the specified `nano-input`. Use this method instead of the global\n * `input.focus()`. /\n @Method()\n async setFocus() {\n if (this.inputEl) this.inputEl.focus();\n }\n\n /* @returns the native `<input>` element used under the hood /\n @Method()\n getInputElement(): Promise<HTMLInputElement \| HTMLTextAreaElement> {\n return Promise.resolve(this.inputEl!);\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 * @param message */\n @Method()\n async showError(message: string) {\n if (this.inputEl) {\n this.inputEl.setCustomValidity(message);\n this.validate();\n this.showInlineValidation();\n }\n }\n\n // Listeners\n\n @Listen('click', { target: 'window' })\n globalClickHandler(e: Event) {\n if (!this.hasFocus) return;\n if (e.composedPath().every((node) => node !== this.host)) this.onBlur();\n }\n\n @Listen('keydown', { target: 'window' })\n globalKeydownHandler(e: KeyboardEvent) {\n if (!this.hasFocus \|\| e.key !== 'Tab') return;\n if (e.target !== this.inputEl) this.onBlur();\n }\n\n @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.host.closest('form');\n if (!form \|\| e.target !== this.host.closest('form')) return;\n\n this.value = '';\n }\n\n // Private methods\n\n private onClearClick = () => {\n this.value = '';\n };\n\n private onBlur = () => {\n this.hasFocus = false;\n this.validate();\n if (this.validateOn === 'dirty') this.showInlineValidation();\n this.nanoBlur.emit();\n };\n\n private onFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private arrToFileList(files: File[]): FileList {\n const fileList = getDataTransfer();\n for (let i = 0, len = files.length; i < len; i++)\n fileList.items.add(files[i]);\n return fileList.files;\n }\n\n private checkFileSize(size: number): boolean {\n return size / 1000000 <= this.maxFileSize;\n }\n\n private checkFileType(type: string): boolean {\n if (!this.accept) return true;\n return this.accept.match(type) && this.accept.match(type).length > 0;\n }\n\n private validate = () => {\n this.errorMessage = '';\n this.inputEl.setCustomValidity('');\n let error: string;\n\n if (!this.inputEl.validity.valid) {\n error = this.inputEl.validationMessage;\n } else {\n this.fileList.forEach((fileItem) => {\n error = null;\n if (!this.checkFileSize(fileItem.file.size)) {\n error =\n 'Maximum file size exceeded. Max file size is ' +\n this.maxFileSize +\n 'Mb';\n } else if (!this.checkFileType(fileItem.file.type))\n error = `File type is not allowed (${this.accept})`;\n\n fileItem.validationMessage = error;\n fileItem.valid = !error;\n });\n if (this.fileList.length > this.maxFiles)\n error = `Maxinum number of files exceeded (${this.maxFiles})`;\n }\n\n if (!!error) this.inputEl.setCustomValidity(error);\n };\n\n private showInlineValidation(ev?: Event) {\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n this._invalid = false;\n this.errorMessage = '';\n\n if (!this.inputEl.validity.valid) {\n this.errorMessage = this.inputEl.validationMessage;\n this._invalid = true;\n }\n\n this.nanoValidate.emit({\n isValid: !this._invalid,\n errorMessage: this.inputEl.validationMessage,\n originalEvent: ev,\n });\n }\n\n private slotChangeObserver() {\n if (this.mo) this.mo.disconnect();\n const mo = (this.mo = new MutationObserver(() =>\n this.processSlottedContent()\n ));\n mo.observe(this.host, { childList: true, subtree: true });\n }\n\n private processSlottedContent() {\n // see if we have slot content\n this.hasLabelSlot = !!this.host.querySelectorAll('[slot=\"label\"]');\n this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n }\n\n private addNewFiles(files: FileList) {\n const fileList: FileValidation[] = Array.from(files).map((file) => {\n return {\n file: file,\n location: URL.createObjectURL(file),\n valid: true,\n validationMessage: null,\n };\n });\n\n // if we have a list and we're in a browser that can amend files\n // append files to the list, otherwise replace\n if (this.canChangeFileList && this.maxFiles > 1) {\n const newFiles = fileList.filter(\n (findFile) =>\n !this.fileList.find((file) => file.file.name === findFile.file.name)\n );\n this.fileList = [...this.fileList, ...newFiles];\n } else this.fileList = fileList;\n }\n\n // event handlers & hooks\n\n private onInvalid = (ev: Event) => {\n if (this.showInlineError) ev.preventDefault();\n this.validate();\n this.showInlineValidation(ev);\n };\n\n private onFileChoose = (e: Event) => {\n const files = (e.target as HTMLInputElement).files;\n if (files && files.length)\n this.addNewFiles((e.target as HTMLInputElement).files);\n };\n\n private onFileRemoveFileClick = (e: Event, file: FileValidation) => {\n if (!this.canChangeFileList) return;\n this.removeFiles.push(file);\n\n (e.target as HTMLElement)\n .closest('.file-upload__list-item--active')\n .classList.remove('file-upload__list-item--active');\n };\n\n private onFileRemoveAnim = () => {\n if (!this.canChangeFileList \|\| !this.removeFiles.length) return;\n this.fileList = this.fileList.filter(\n (fileItem) => !this.removeFiles.find((rmFile) => rmFile === fileItem)\n );\n try {\n this.removeFiles.forEach((f) =>\n f.location ? URL.revokeObjectURL(f.location) : ''\n );\n } catch (e) {}\n this.removeFiles = [];\n };\n\n private onInputChange = () => {\n this.nanoChange.emit({ value: this.value, files: this.files });\n };\n\n private onDragStop = (e: DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n this.isDragging = false;\n };\n\n private onDragStart = (e: DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n this.isDragging = true;\n };\n\n private onDrop = (e: DragEvent) => {\n this.onDragStop(e);\n if (e.dataTransfer.files && e.dataTransfer.files.length)\n this.addNewFiles(e.dataTransfer.files);\n };\n\n // Component lifecycle\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n }\n\n componentDidLoad() {\n this.slotChangeObserver();\n }\n\n componentWillLoad() {\n this.processSlottedContent();\n }\n\n private FileUploadInput = (\n eleType: 'drop' \| 'btn',\n listId?: string\n ): VNode[] => {\n const labelId = this.fileInputId + '-lbl';\n const moreId =\n this.showInlineError \|\| this.hasHelperSlot\n ? this.fileInputId + '-more'\n : '';\n\n return [\n <div class={'file-upload__' + eleType + '-wrap'}>\n <label\n class={`file-upload__` + eleType}\n htmlFor={this.fileInputId}\n id={labelId}\n onDrop={(e) => {\n this.onDrop(e);\n this.onDragStop(e);\n }}\n onDragEnd={this.onDragStop}\n onDragLeave={this.onDragStop}\n onDragEnter={this.onDragStart}\n onDragOver={this.onDragStart}\n >\n {(!!this.label \|\| (this.hasLabelSlot && eleType !== 'drop')) && (\n <div\n class={`file-upload__label ${\n this.hideLabel ? 'visually-hide' : ''\n }`}\n >\n {!!this.label && !!this.label.length ? this.label : ''}\n {!this.label && this.hasLabelSlot && eleType !== 'drop' && (\n <slot name=\"label\" />\n )}\n </div>\n )}\n {eleType === 'drop' && (\n <div class=\"file-upload__drop-area\">\n <div>{this.hasLabelSlot && <slot name=\"label\" />}</div>\n <div>\n Drag and drop or <span>browse</span>\n </div>\n </div>\n )}\n {eleType === 'btn' && (\n <div\n class={`file-upload__button button--keyline button--icon-start ${\n this.hasFocus ? 'button--focus' : ''\n }`}\n >\n <div class={`file-upload__btn-content`}>\n <nano-icon name=\"regular/cloud-upload\" />\n <span>\n {!!this.fileList.length\n ? this.fileList[0].file.name\n : this.placeholder}\n </span>\n {!!this.value && this.clearInput && !this.disabled && (\n <button\n type=\"button\"\n class=\"icon file-upload__clear-btn\"\n tabindex=\"-1\"\n onClick={this.onClearClick}\n >\n <nano-icon name=\"light/times\"></nano-icon>\n </button>\n )}\n </div>\n </div>\n )}\n <input\n aria-labelledby={labelId + ' ' + moreId + ' ' + listId}\n type=\"file\"\n id={this.fileInputId}\n accept={this.accept}\n class=\"file-upload__input\"\n multiple={this.maxFiles > 1}\n disabled={this.disabled}\n name={this.canChangeFileList ? undefined : this.name}\n form={this.form}\n ref={(input) => {\n if (this.canChangeFileList) {\n this.publicInputEl = input;\n return;\n }\n this.inputEl = input;\n }}\n onChange={this.onFileChoose}\n onFocus={this.onFocus}\n onReset={this.onInputChange}\n />\n </label>\n <input\n name={!this.canChangeFileList ? undefined : this.name}\n form={this.form}\n ref={(input) => {\n if (!this.canChangeFileList) return;\n this.inputEl = input;\n }}\n type=\"file\"\n id={this.fileInputId + '-hidden'}\n tabIndex={-1}\n multiple={true}\n class=\"file-upload__input\"\n disabled={this.disabled}\n required={this.required}\n accept={this.accept}\n onInvalid={this.onInvalid}\n onChange={this.onInputChange}\n />\n </div>,\n this.showInlineError \|\| this.hasHelperSlot ? (\n <div class=\"file-upload__more\" id={moreId}>\n {this.showInlineError && !!this.errorMessage.length ? (\n <div class=\"file-upload__error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"file-upload__help\">\n <slot name=\"helper\" />\n </div>\n </div>\n ) : (\n ''\n ),\n ];\n };\n\n private button = (): VNode[] => {\n return this.FileUploadInput('btn');\n };\n\n private dropArea = (): VNode[] => {\n const listId = this.fileInputId + '-list';\n return [\n this.FileUploadInput('drop', listId),\n <output class=\"file-upload__list-wrap\" id={listId}>\n {!!this.fileList && this.fileList.length > 0 && (\n <ul class=\"file-upload__list list\">\n {this.fileList.map((file) => {\n return (\n <li\n key={file.file.name}\n class=\"file-upload__list-item file-upload__list-item--active list-item\"\n onAnimationEnd={(_) => this.onFileRemoveAnim()}\n >\n <span class=\"list-title\">{file.file.name}</span>\n {!file.valid && (\n <nano-tooltip\n content={file.validationMessage}\n placement=\"left\"\n >\n <nano-icon-button\n class=\"list-button list-error\"\n iconName=\"light/exclamation-triangle\"\n label=\"File error\"\n />\n </nano-tooltip>\n )}\n {this.canChangeFileList && (\n <nano-icon-button\n class=\"list-button list-button--view\"\n type=\"button\"\n iconName=\"light/eye\"\n label=\"View file\"\n target=\"_blank\"\n href={file.location}\n />\n )}\n {this.canChangeFileList && (\n <nano-icon-button\n onClick={(e) => this.onFileRemoveFileClick(e, file)}\n class=\"list-button list-button--remove\"\n iconName=\"light/times\"\n label=\"Remove file\"\n />\n )}\n </li>\n );\n })}\n </ul>\n )}\n </output>,\n ];\n };\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'file-upload': true,\n 'file-upload--dragging': this.isDragging,\n 'file-upload--focus': this.hasFocus,\n 'file-upload--invalid': this._invalid,\n }}\n >\n {this.maxFiles > 1 ? <this.dropArea /> : <this.button />}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/nano-components/nano-global-nav-user-profile_3.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as n,h as t,i as e,c as s,a as i,g as o}from"./index-9695db0a.js";import{b as a,g as l,c as r}from"./dom-8599fac1.js";import{d as c}from"./transitions-5aecdeeb.js";import{g as h}from"./tabbable-26a66a22.js";import{g as d}from"./active-element-75b7c8a0.js";import{c as u}from"./theme-931bd452.js";import{d as p,a as b}from"./throttle-ac4fcefa.js";import{F as f,a as m}from"./form-control-0bfcc7ea.js";const v=class{constructor(t){n(this,t);this.myAccountUser=undefined;this.userProfileUrl=undefined}render(){return!!this.myAccountUser&&t("a",{href:this.userProfileUrl,class:"user-profile"},t("div",{class:"left"},t("div",{class:"avatar-container"},t("img",{class:"avatar",src:this.myAccountUser?.small_avatar_url,alt:"User Avatar",height:75,width:75}),this.myAccountUser.is_nanopore_user&&t("img",{class:"logo-small",src:e(`../nano-assets/ont-wheel-light.svg`),alt:"Nanopore Logo"})),t("div",{class:"user-details"},t("span",{class:"name"},this.myAccountUser.name),t("span",{class:"bio"},this.myAccountUser.job_title," at ",this.myAccountUser.company))),t("div",{class:"right"},t("div",{class:"chevron-right"},t("nano-icon",{slot:"icon-end",name:"light/chevron-right"}))))}};const g=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important;border-radius:inherit}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch: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-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(nano-icon[slot=icon-start]){padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){padding-inline:var(--padding-start) 0}:host .link ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end)}:host .link,:host button,:host a{border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-inline:0 var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-block-size:100%;inset-block-start:0;inset-inline-start:0;inline-size:100%;z-index:1;opacity:0;transition:opacity 0.3s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translate3d(100%, 0, 0)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translate3d(0, 0, 0);transition:opacity 0.3s ease, transform 0.3s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:"";background-color:#0c5a71;block-size:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}:host(.nano-global-nav-bar) .selected button::before,:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-block:calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);padding-inline:var(--padding-start) 0;display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-menu-drawer) .text{padding-inline:0 var(--padding-end);text-align:start;flex:0 1 auto;min-inline-size:130px;inline-size:130px}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);inline-size:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-inline-size:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);block-size:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;inline-size:var(--secondary-width, 400px);max-inline-size:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:"";display:block;position:absolute;inline-size:6px;block-size:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){:host(.nano-menu-drawer) .notification::after{inline-size:7px;block-size:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}';const _=class{constructor(t){n(this,t);this.nanoClose=s(this,"nanoClose",7);this.nanoOpen=s(this,"nanoOpen",7);this.nanoOpening=s(this,"nanoOpening",7);this.nanoClosing=s(this,"nanoClosing",7);this.nanoBlur=s(this,"nanoBlur",7);this.nanoFocus=s(this,"nanoFocus",7);this.hasSecondarySlot=false;this.animating=false;this.closeSecondary=async()=>{if(!this.hasSecondarySlot||!this.didOpen)return;this.open=false;await c(this.secondaryDiv,{className:"open",show:false});this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});this.didOpen=false};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}if(!this.hasSecondarySlot||this.didOpen)return;this.open=true;await c(this.secondaryDiv,{className:"open",show:true});this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});this.didOpen=true};this.toggleSecondary=()=>{if(!this.hasSecondarySlot)return;if(this.didOpen)this.closeSecondary();else this.openSecondary()};this.handleFocus=()=>{this.hasFocus=true;if(this.href&&!this.animating&&this.hasSecondarySlot)this.openSecondary();this.nanoFocus.emit()};this.handleHostBlur=()=>{if(this.animating)return;this.el.removeAttribute("tabindex");this.hasFocus=false;this.nanoBlur.emit()};this.handleHostClick=n=>{if(!this.hasAnchorEle)return;const t=n.target.closest("a, button");if(!t)this.btn.click()};this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let n=0;if(a(this.el,".secondary-open.has-secondary").length)n=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((async()=>await this.openSecondary()),n);this.animating=false};this.handleMouseLeave=()=>{if(!this.href)return;clearTimeout(this.waitShow);this.fromHover=true;this.animating=true;this.waitHide=window.setTimeout((async()=>await this.closeSecondary()),300);this.animating=false};this.handleClick=()=>{this.fromHover=false;if(this.hasSecondarySlot)this.toggleSecondary()};this.hasAnchorEle=false;this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;this.hasFocus=false;this.href=null;this.target="_self";this.disabled=false;this.open=false;this.selected=false;this.secondaryActiveWidth=0;this.secondaryFallback=()=>{};this.closeOnBlur=true;this.notification=false}async setFocus(){if(!this.btn)return;this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(!this.hasSecondarySlot)return;if(!this.didOpen){setTimeout((()=>{if(!this.fromHover&&(!document.activeElement||document.activeElement===document.body))this.btn.focus({preventScroll:true});this.el.tabIndex=null;this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{if(!this.fromHover){const n=new window.IntersectionObserver((t=>{if(t[0].boundingClientRect.top<0){this.secondaryDiv.scrollIntoView({behavior:"smooth"})}n.disconnect()}),{threshold:1});n.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});const t=h(this.secondaryDiv,true);if(t[0])t[0].focus();this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}handleClose(n){if(!this.didOpen||!this.hasSecondarySlot||!this.closeOnBlur)return;if(!n.composedPath().some((n=>n===this.secondaryDiv)))this.toggleSecondary()}connectedCallback(){const n=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!n;const t=l(this.el,"a, button")[0];this.hasAnchorEle=!!t;if(t){this.href=t.href?t.href:null;this.btn=t;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}this.isInGlobalNav=false;this.isInMenuDrawer=false;this.globalNavEle=this.el.closest("nano-global-nav");this.isInMenuDrawer=!!this.el.closest("nano-menu-drawer");this.isInMenu=!!this.el.closest("nano-menu");this.isInGlobalNav=this.el.parentElement===this.globalNavEle||!!this.el.closest(".global-nav")}componentDidLoad(){this.openChange()}disconnectedCallback(){this.btn.removeEventListener("click",this.toggleSecondary);this.btn.removeEventListener("focus",this.handleFocus);this.btn.removeEventListener("blur",this.handleHostBlur)}render(){return t(i,{class:{"has-secondary":this.hasSecondarySlot,"secondary-open":this.open,selected:this.selected,"has-focus":this.hasFocus,disabled:this.disabled,"nano-global-nav":this.isInGlobalNav,"nano-menu-drawer":this.isInMenuDrawer,"nano-menu":this.isInMenu},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:this.el.closest('[role="menu"]')?"menuitem":undefined},t("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected},part:"ctrl-wrapper"},this.href&&!this.hasAnchorEle&&!this.disabled&&t("a",{part:"ctrl ctrl--anchor",target:this.target,ref:n=>this.btn=n,href:this.href,onFocus:this.handleFocus,class:{notification:this.notification}},t("slot",{name:"icon-start"}),t("span",{class:"text"},t("slot",null)),t("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&t("button",{part:"ctrl ctrl--button",ref:n=>this.btn=n,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled,class:{notification:this.notification}},t("slot",{name:"icon-start"}),t("span",{class:"text"},t("slot",null)),t("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&t("div",{class:"link"},t("slot",{name:"icon-start"}),t("slot",null),t("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&t("div",{class:"secondary-menu",ref:n=>this.secondaryDiv=n,tabIndex:-1},t("div",{class:"secondary-menu-content",part:"secondary-wrapper"},t("slot",{name:"secondary"})),t("div",{class:"secondary-menu-mask",onClick:this.closeSecondary,part:"secondary-mask"}))))}get el(){return o(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};_.style=g;const y='.sc-nano-select-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n[disabled].sc-nano-select-h:not([disabled=false]) {\n  opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-select {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n  display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n  display: block;\n  inline-size: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n  clip: rect(1px, 1px, 1px, 1px);\n  -webkit-clip-path: inset(50%);\n          clip-path: inset(50%);\n  block-size: 1px;\n  inline-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1.15em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n  opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 50%;\n}\n.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-select {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  -webkit-appearance: none;\n          appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: 0.9em;\n  opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  opacity: 0.5;\n}\n.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n  block-size: 1em;\n  position: relative;\n  margin-block: 4px var(--padding-bottom);\n  margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n  font-stretch: condensed;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--focus);\n  border: var(--input-border-style--focus);\n  border-width: var(--input-border-width);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid-focus);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: stretch;\n  inline-size: auto;\n}\n\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  padding-inline: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  font-size: 1em;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s > *, [disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  -webkit-appearance: none;\n          appearance: none;\n  align-items: center;\n  overflow: hidden;\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-select-h {\n  \n  --placeholder-color: var(--nano-input-placeholder-color, initial);\n  --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n  --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n  --color--focus-rgb:\n    var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0 116 149)\n    );\n  --input-font-size: var(--nano-input-font-size, 0.87em);\n  --input-text-color: var(--nano-input-text-color, #4a4a4a);\n  --input-border-width: var(--nano-input-border-width, 1px);\n  --input-border-hint-width: 3px;\n  --input-border-color: var(--nano-input-border-color, #e4e6e8);\n  --input-border-radius: var(--nano-input-border-radius, 0);\n  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n  --input-bg-color: var(--nano-input-background-color, #fff);\n  --input-bg-color--focus: var(--input-bg-color);\n  --input-bg-color--invalid: var(--nano-input-background-color, white);\n  --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n  --help-msg-color: var(--nano-input-help-color, #616d6e);\n  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n  --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-input-label-color, "currentcolor");\n  --label-color--focus: var(--label-color);\n  --label-color--invalid: var(--nano-input-label-color-invalid, "currentcolor");\n  --label-font-size: var(--nano-input-label-color, 1em);\n  --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n  \n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  font-family: var(--nano-font-family, inherit);\n  display: block;\n}\n\n.nano-color.sc-nano-select-h {\n  --input-border-style--focus:\n    var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n  color: var(--nano-color-base);\n}\n\nnano-item.sc-nano-select-h:not(.item-label), nano-item:not(.item-label) .sc-nano-select-h {\n  --padding-start: 0;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n  pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n  display: none;\n}\n\n.select__native-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  -webkit-appearance: none;\n          appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  \n  \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::-moz-selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: var(--placeholder-font-style);\n  font-weight: var(--placeholder-font-weight);\n  opacity: var(--placeholder-opacity);\n  line-height: inherit;\n  min-block-size: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n  background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n          appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n  box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n  display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) var(--padding-bottom);\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n  padding-block-start: 1.8em;\n}\n.masked.sc-nano-select-h .select__native-input.sc-nano-select {\n  opacity: 0;\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-block-size: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n  padding-block: 0 var(--padding-bottom);\n  padding-inline: 0 0;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  overflow: hidden;\n  align-items: flex-start;\n}\n.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select {\n  padding-block-start: 1em;\n}\n.select__multi-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-bottom) 0;\n  min-inline-size: 50px;\n  inline-size: 100%;\n  max-block-size: 100%;\n  -webkit-appearance: none;\n          appearance: none;\n  border: 0;\n  outline: none;\n  display: inline-block;\n  background: transparent;\n  flex: 0;\n  position: relative;\n  box-sizing: border-box;\n  line-height: calc(2.5em - var(--padding-bottom));\n  block-size: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:last-child {\n  flex: 1;\n}\n.select__multi-value.sc-nano-select {\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: var(--padding-start) -3px;\n  background: rgb(var(--multi-input-value-bg)/80%);\n  color: var(--multi-input-value-text-color);\n  border: 1px solid;\n  border-color: var(--multi-input-value-border);\n  padding: 0.35em 0.5em;\n  display: flex;\n  align-items: center;\n  font-size: var(--input-font-size);\n  letter-spacing: 1px;\n  max-block-size: calc(2.5em - 8px);\n  max-inline-size: calc(100% - 8px);\n  border-radius: 4px;\n}\n.select__multi-value--closable.sc-nano-select {\n  padding-inline-end: 0;\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-inline-size: 100%;\n  overflow: hidden;\n}\n.select__multi-value-remove.sc-nano-select {\n  background-position: center;\n  padding-inline-start: 0.5em;\n  margin: 0;\n  color: inherit;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  -webkit-appearance: none;\n          appearance: none;\n  display: flex;\n  align-items: center;\n  inset-block-start: 0;\n  font-size: 1em;\n}\n.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select {\n  --color: var(--multi-input-value-text-color);\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  inline-size: calc(100% - (1em + var(--padding-start) * 2));\n}\n.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n}\n.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(21%);\n  inset-block-start: 0;\n}\n\n.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 {\n  pointer-events: auto;\n}';let x=0;const w=class{get inputCtrl(){return this._inputCtrl}set inputCtrl(n){if(n===this._inputCtrl)return;this._inputCtrl=n;this.setDataListOpts()}get selectWrap(){return this._selectWrap}set selectWrap(n){if(this._selectWrap===n)return;this._selectWrap=n;this.setDataListOpts()}get datalist(){return this._datalist}set datalist(n){if(this._datalist===n)return;this._datalist=n;this.setDataListOpts()}constructor(t){n(this,t);this.nanoChange=s(this,"nanoChange",7);this.nanoBlur=s(this,"nanoBlur",7);this.nanoFocus=s(this,"nanoFocus",7);this.nanoDidLoad=s(this,"nanoDidLoad",7);this.nanoDidUnload=s(this,"nanoDidUnload",7);this.nanoSearchChange=s(this,"nanoSearchChange",7);this.nanoValidate=s(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${x++}`;this.rtl=false;this.onInit=true;this.customError="";this._value=this.multiple?[]:"";this._options=[];this.customValidate=()=>{if(!this.nativeSelect||!!this.customError||!this.nativeSelect["setCustomValidity"])return;this.nativeSelect.setCustomValidity("");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=n=>{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:n})};this.handleInvalid=n=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(this.showInlineError)n.preventDefault();requestAnimationFrame((()=>this.showInlineValidation(n)))};this.setValue=n=>{n.preventDefault();if(!this.multiple){this.value=n.detail.value;return}if(this.value&&this.value.length&&this.value.includes(n.detail.value))return;if(this.max&&this.value.length===this.max)return;if(Number.isNaN(this._maxValuesVisible)||this.value.length<=this._maxValuesVisible){this.currInsertIndex++}this.value=[...this.value.slice(0,this.currInsertIndex),n.detail.value,...this.value.slice(this.currInsertIndex)];this.inputSearchVal=""};this.removeValue=n=>{if(!this.multiple||!this.value.length)return;if(!n)n=this.value[this.value.length-1];this.value=this.value.filter((t=>t!==n));if(Number.isNaN(this._maxValuesVisible)||this.value.length<=this._maxValuesVisible){this.currInsertIndex--}this.setFocus()};this.setOptions=()=>{if(!this.datalist||!this.datalist.activeOptions||!this.datalist.activeOptions.length)return;this._elementOptions=this.datalist.activeOptions.map((n=>{const{value:t,selected:e,label:s,filterMeta:i}=n;return{value:t,selected:e,label:s,filterMeta:i}}));this.customValidate()};this.handleDocumentKeyDown=n=>{if(!this.multiple||!this.hasFocus)return;if(!this.inputSearchVal){let t;switch(n.key){case"Backspace":if(this.inputCtrl.previousElementSibling)t=this.inputCtrl.previousElementSibling;else break;this.removeValue(t.dataset.value||null);break;case"Delete":if(this.inputCtrl.nextElementSibling)t=this.inputCtrl.nextElementSibling;else break;this.removeValue(t.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;if(n.key==="ArrowLeft"&&this.inputCtrl.previousSibling)this.currInsertIndex--;if(n.key==="ArrowRight"&&this.inputCtrl.nextSibling)this.currInsertIndex++;setTimeout((()=>{this.inputCtrl.focus()}),20);n.preventDefault();break}}};this.onBlur=()=>{this.hasFocus=false;requestAnimationFrame((()=>{if(this.validateOn==="dirty"&&!this.hasFocus)this.showInlineValidation()}));this.nanoBlur.emit();if(!this.allowCustomValues&&this.multiple){this.inputSearchVal="";const n=new window.Event("change");this.inputCtrl.dispatchEvent(n)}};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.clearSelectValue=n=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&n){n.preventDefault();n.stopPropagation()}if(this.multiple){this.value=[];this.currInsertIndex=-1}else this.value="";this.inputCtrl.value="";const t=new window.Event("change");this.inputCtrl.dispatchEvent(t)};this.onClick=()=>{this.setFocus()};this.onDragStart=n=>{const t=n.target;this.dragVal=t.dataset.value};this.onDragEnd=n=>{this.dragVal=null;n.preventDefault()};this.onDragLeave=n=>{const t=n.target;const e=t.dataset&&t.dataset.value?t.dataset.value:null;if(!e||this.dragVal===e||!this.value.includes(this.dragVal)){n.preventDefault();return}const s=this.value.indexOf(e);const i=this.value.indexOf(this.dragVal);const o=this.value;const a=o[s];o[s]=o[i];o[i]=a;this.value=[...o]};this.onMultiInput=n=>{this.inputSearchVal=n.target.value.trim();this.nanoSearchChange.emit({value:n.target.value.trim()})};this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.inputSearchVal="";this._invalid=false;this.color=undefined;this.autofocus=false;this.disabled=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.label=undefined;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.maxValuesVisible=3;this.name=this.selectId+"-name";this.placeholder=undefined;this.readonly=false;this.required=false;this.size=undefined;this.max=undefined;this.min=undefined;this.form=undefined;this.allowCustomValues=false;this._elementOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.valueTagTemplate=undefined;this.showInlineValidation=p(this.showInlineValidation,50)}get invalid(){return this._invalid}get validityMessage(){if(!this.nativeSelect)return"";return this.nativeSelect.validationMessage}watchMaxValuesVisible(){if(!this.multiple)return;this._maxValuesVisible=this.maxValuesVisible===false?NaN:Number(this.maxValuesVisible);if(!Number.isNaN(this._maxValuesVisible)){if(this.currInsertIndex>this._maxValuesVisible){this.currInsertIndex=this._maxValuesVisible}}else{this.currInsertIndex=this.value.length-1}}get value(){return this._value}set value(n){if(!!n&&!!this._value){if(JSON.stringify(n)===JSON.stringify(this._value))return}if(typeof n==="string"){if(this.multiple)this._value=n.split(",");else this._value=n}else if(Array.isArray(n)){if(this.multiple)this._value=n;else this._value=n[0]}}get options(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._elementOptions.map((n=>{const{value:t,selected:e,label:s,filterMeta:i}=n;return{value:t,selected:e,label:s,filterMeta:i}}))}set options(n){this._options=n.map((n=>{if(typeof n==="string")return{value:n,label:n};else return n}))}debounceChanged(){this.nanoSearchChange=b(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()}valueChanged(){this.customValidate();if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}requestAnimationFrame((()=>{this.shouldValidate();this.nanoChange.emit({value:this.value})}))}setDataListOpts(){if(!this.datalist||!this.selectWrap)return;this.datalist.input=this.inputCtrl;const n=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig={...n,...this.dropDownConfig,tetherTo:this.selectWrap}}async reportValidity(n){return new Promise((t=>{if(n){this.customValidate();this.showInlineValidation()}setTimeout((()=>{t({isValid:!this._invalid,errorMessage:this.nativeSelect.validationMessage})}),50)}))}async setFocus(){if(!this.inputCtrl)return;this.inputCtrl.focus();setTimeout((()=>this.inputCtrl.click()),50)}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(n){if(this.nativeSelect){this.customError=n;this.nativeSelect.setCustomValidity(n);this.showInlineValidation()}}get valArray(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value}isValidValues(){return this.valArray.find((n=>this.options.find((t=>t.value===n))))}slotChangeObserver(){if(!window["MutationObserver"])return;const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]')}getOptionWithValue(n){let t;const e=this.datalist?.activeOptions?.length?this.datalist.activeOptions:this.options;const s=e.find(((e,s)=>{t=s;return!e.disabled&&e.value?.length&&e.value===n}));return[s,t]}getLabel(n){const t=this.getOptionWithValue(n)[0];return t&&t.label?t.label:n}onReset(n){const t=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!t||n.target!==this.el.closest("form"))return;this.clearSelectValue()}handleBlur(n){if(!this.hasFocus)return;const t=n;let e;requestAnimationFrame((()=>{if(t.key){if(t.key!=="Tab")return;e=d()}else e=n.target;if(r(this.el.tagName.toLowerCase(),e)!==this.el){this.onBlur()}}))}connectedCallback(){this.debounceChanged();this.watchMaxValuesVisible();this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}));if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.customValidate();this.setDataListOpts();requestAnimationFrame((()=>this.onInit=false))}componentWillLoad(){this.processSlottedContent()}render(){const n=this.selectId+"-lbl";const e=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";const s=this.hasHelperEndSlot?this.selectId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const o=(({el:n,floatLabel:t,label:e,errorMessage:s,showInlineError:i,hasHelperSlot:o,hasHelperEndSlot:a,hasLabelSlot:l,hideLabel:r,placeholder:c,rtl:h})=>({el:n,floatLabel:t,label:e,errorMessage:s,showInlineError:i,hasHelperSlot:o,hasHelperEndSlot:a,hasLabelSlot:l,hideLabel:r,placeholder:c,rtl:h}))(this);const a={...o,labelId:n,moreId:e,helperEndId:s,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId};const l=(({readonly:n,disabled:t})=>({readonly:n,disabled:t,clearControl:this.clearSelect}))(this);return t(i,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:{...u(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}},t(f,{...a},t(m,{...l,onClearText:this.clearSelectValue,control:this.el,ref:n=>this.selectWrap=n,endValueSlot:t("slot",{name:"down-arrow"},t("nano-icon",{slot:"value-end",name:"light/chevron-down"}))},this.multiple&&t("div",{class:"select__multi-wrap select"},this.multipleValues(n,e,s)),!this.multiple&&[this.mask&&t("div",{class:"select__mask"},this.getLabel(this.value)),t("input",{id:this.selectId,class:"select__native-input",ref:n=>this.inputCtrl=n,"aria-labelledby":n+" "+e+" "+s,disabled:this.disabled,form:this.form,placeholder:this.placeholder,readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&t("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:n=>this.datalist=n,selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:n=>{n.preventDefault();this.removeValue(n.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&t("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:()=>this.inputCtrl.focus()},t("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),t("slot",null)),t("select",{id:this.selectId+"-hidden",class:"select__native-ctrl",ref:n=>this.nativeSelect=n,"aria-labelledby":n+" "+e+" "+s,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((n=>t("option",{value:n,selected:true},n))),!this.allowCustomValues&&this.options.map((n=>t("option",{value:n.value,selected:this.valArray.includes(n.value),disabled:n.disabled,label:n.label},this.valArray.includes(n.value))))))}multipleValues(n,e,s){const i=t("input",{class:"select__multi-input",id:this.selectId,ref:n=>this.inputCtrl=n,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.value.length?this.placeholder:"","aria-labelledby":n+" "+e+" "+s});if(!this.value.length)return i;const o=[];this.value.forEach(((n,e)=>{if(!Number.isNaN(this._maxValuesVisible)&&e>this._maxValuesVisible)return;let s;if(e===this._maxValuesVisible){s=t("span",{"data-value":n,class:"select__multi-value"},t("span",null,"+",this.value.length-this._maxValuesVisible))}else{s=t("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,onDragOver:n=>n.preventDefault(),draggable:true,"data-value":n,ref:n=>this.valueItems.push(n),class:"select__multi-value select__multi-value--closable"},this.valueTagTemplate?t("span",{innerHTML:this.valueTagTemplate?this.valueTagTemplate(...this.getOptionWithValue(n)):undefined}):t("span",null,this.getLabel(n)),t("button",{class:"select__multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(n)},onMouseUp:()=>{this.removeValue(n)}},t("nano-icon",{name:"light/times"})))}if(e===0&&this.currInsertIndex<0){o.push(i,s)}else if(e===this.currInsertIndex){o.push(s,i)}else{o.push(s)}}));return o}get el(){return o(this)}static get watchers(){return{maxValuesVisible:["watchMaxValuesVisible"],debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};w.style=y;export{v as nano_global_nav_user_profile,_ as nano_nav_item,w as nano_select};
+import{r as n,h as t,i as e,c as s,a as i,g as o}from"./index-9695db0a.js";import{b as a,g as l,c as r}from"./dom-8599fac1.js";import{d as c}from"./transitions-5aecdeeb.js";import{g as h}from"./tabbable-26a66a22.js";import{g as d}from"./active-element-75b7c8a0.js";import{c as u}from"./theme-931bd452.js";import{d as p,a as b}from"./throttle-ac4fcefa.js";import{F as f,a as m}from"./form-control-0bfcc7ea.js";const v=class{constructor(t){n(this,t);this.myAccountUser=undefined;this.userProfileUrl=undefined}render(){return!!this.myAccountUser&&t("a",{href:this.userProfileUrl,class:"user-profile"},t("div",{class:"left"},t("div",{class:"avatar-container"},t("img",{class:"avatar",src:this.myAccountUser?.small_avatar_url,alt:"User Avatar",height:75,width:75}),this.myAccountUser.is_nanopore_user&&t("img",{class:"logo-small",src:e(`../nano-assets/ont-wheel-light.svg`),alt:"Nanopore Logo"})),t("div",{class:"user-details"},t("span",{class:"name"},this.myAccountUser.name),t("span",{class:"bio"},this.myAccountUser.job_title," at ",this.myAccountUser.company))),t("div",{class:"right"},t("div",{class:"chevron-right"},t("nano-icon",{slot:"icon-end",name:"light/chevron-right"}))))}};const g=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin);outline:none !important}:host .nav-item,:host .link{outline:none !important;border-radius:inherit}:host ::slotted(*),:host *{box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none;margin:0}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-stretch: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-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color);line-height:inherit;outline:none !important}:host ::slotted(nano-icon[slot=icon-start]){padding-inline-end:var(--padding-end)}:host ::slotted(nano-icon[slot=icon-end]){padding-inline-start:var(--padding-start)}:host .link ::slotted(nano-icon[slot=icon-start]){padding-inline:var(--padding-start) 0}:host .link ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end)}:host .link,:host button,:host a{border-block-end:var(--border-bottom);display:flex;align-items:center;border-radius:inherit}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus-visible,:host a:focus-visible{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-inline:0 var(--padding-end);flex:1}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){flex:1}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, currentcolor);min-block-size:100%;inset-block-start:0;inset-inline-start:0;inline-size:100%;z-index:1;opacity:0;transition:opacity 0.3s ease, transform 0.3s ease;background-color:var(--secondary-bg-color, white);transform:translate3d(100%, 0, 0)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;transform:translate3d(0, 0, 0);transition:opacity 0.3s ease, transform 0.3s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-inline:0 var(--padding-end);padding-block:0;font-size:10px;flex:0 0 10px;pointer-events:none}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{transform:translateX(0)}:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){box-shadow:none}:host(.nano-menu) .secondary-menu-content{padding-inline:var(--secondary-padding-start) var(--secondary-padding-end);padding-block:var(--secondary-padding-top) var(--secondary-padding-bottom)}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:flex;align-items:center;cursor:pointer}:host(.nano-global-nav-bar) .text{flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-inline:var(--padding-end) 0;margin-block:0}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-inline:0 var(--padding-start);margin-block:0}:host(.nano-global-nav-bar) ::slotted(a),:host(.nano-global-nav-bar) button{position:relative}:host(.nano-global-nav-bar) ::slotted(a)::before,:host(.nano-global-nav-bar) button::before{content:"";background-color:#0c5a71;block-size:9px;inset-inline:0 5px;inset-block-end:-22px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}:host(.nano-global-nav-bar) .selected button::before,:host(.nano-global-nav-bar) .secondary-open button::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.selected) ::slotted(a)::before{transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.7}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;transition:transform 0.3s ease;transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);inset-inline:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-block:calc(var(--padding-top) / 2) calc(var(--padding-bottom) / 2);padding-inline:var(--padding-start) 0;display:flex;justify-content:flex-start;flex-direction:row;align-items:center;color:currentcolor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;inline-size:100%}:host(.nano-menu-drawer) .text{padding-inline:0 var(--padding-end);text-align:start;flex:0 1 auto;min-inline-size:130px;inline-size:130px}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-inline:0 var(--padding-end);padding-block:0;font-size:var(--icon-size);inline-size:var(--icon-size);flex:0 0 var(--icon-size)}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding:0 var(--padding-end) 0 0;font-size:10px;flex:0 0 20px;min-inline-size:20px}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);block-size:100vh;inset-inline:auto 0;inset-block:0;transform:translateX(0);z-index:-1;transition:transform 0.3s ease, opacity 0.2s ease;overflow-y:auto;inline-size:var(--secondary-width, 400px);max-inline-size:62vw;opacity:1;padding-inline:var(--secondary-padding-start, var(--padding-start)) var(--secondary-padding-end, var(--padding-end));padding-block:var(--secondary-padding-top, var(--padding-top)) var(--secondary-padding-bottom, var(--padding-bottom))}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{transform:translateX(100%)}:host(.nano-menu-drawer) .notification{position:relative}:host(.nano-menu-drawer) .notification::after{content:"";display:block;position:absolute;inline-size:6px;block-size:6px;background-color:#ef4135;inset-inline-start:10px;inset-block-start:7px;border-radius:50%}@media (min-width: 52em){:host(.nano-menu-drawer) .notification::after{inline-size:7px;block-size:7px;inset-inline-start:8px;inset-block-start:5px}}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{transform:translateX(-100%);opacity:1}';const _=class{constructor(t){n(this,t);this.nanoClose=s(this,"nanoClose",7);this.nanoOpen=s(this,"nanoOpen",7);this.nanoOpening=s(this,"nanoOpening",7);this.nanoClosing=s(this,"nanoClosing",7);this.nanoBlur=s(this,"nanoBlur",7);this.nanoFocus=s(this,"nanoFocus",7);this.hasSecondarySlot=false;this.animating=false;this.closeSecondary=async()=>{if(!this.hasSecondarySlot||!this.didOpen)return;this.open=false;await c(this.secondaryDiv,{className:"open",show:false});this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});this.didOpen=false};this.openSecondary=async()=>{if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return}if(!this.hasSecondarySlot||this.didOpen)return;this.open=true;await c(this.secondaryDiv,{className:"open",show:true});this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});this.didOpen=true};this.toggleSecondary=()=>{if(!this.hasSecondarySlot)return;if(this.didOpen)this.closeSecondary();else this.openSecondary()};this.handleFocus=()=>{this.hasFocus=true;if(this.href&&!this.animating&&this.hasSecondarySlot)this.openSecondary();this.nanoFocus.emit()};this.handleHostBlur=()=>{if(this.animating)return;this.el.removeAttribute("tabindex");this.hasFocus=false;this.nanoBlur.emit()};this.handleHostClick=n=>{if(!this.hasAnchorEle)return;const t=n.target.closest("a, button");if(!t)this.btn.click()};this.handleMouseEnter=async()=>{if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return;let n=0;if(a(this.el,".secondary-open.has-secondary").length)n=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((async()=>await this.openSecondary()),n);this.animating=false};this.handleMouseLeave=()=>{if(!this.href)return;clearTimeout(this.waitShow);this.fromHover=true;this.animating=true;this.waitHide=window.setTimeout((async()=>await this.closeSecondary()),300);this.animating=false};this.handleClick=()=>{this.fromHover=false;if(this.hasSecondarySlot)this.toggleSecondary()};this.hasAnchorEle=false;this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;this.hasFocus=false;this.href=null;this.target="_self";this.disabled=false;this.open=false;this.selected=false;this.secondaryActiveWidth=0;this.secondaryFallback=()=>{};this.closeOnBlur=true;this.notification=false}async setFocus(){if(!this.btn)return;this.btn.focus()}openChange(){this.open?this.openSecondary():this.closeSecondary()}didOpenChange(){if(!this.hasSecondarySlot)return;if(!this.didOpen){setTimeout((()=>{if(!this.fromHover&&(!document.activeElement||document.activeElement===document.body))this.btn.focus({preventScroll:true});this.el.tabIndex=null;this.nanoClose.emit({secondaryMenu:this.secondaryDiv})}),50)}else{if(!this.fromHover){const n=new window.IntersectionObserver((t=>{if(t[0].boundingClientRect.top<0){this.secondaryDiv.scrollIntoView({behavior:"smooth"})}n.disconnect()}),{threshold:1});n.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});const t=h(this.secondaryDiv,true);if(t[0])t[0].focus();this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}}handleClose(n){if(!this.didOpen||!this.hasSecondarySlot||!this.closeOnBlur)return;if(!n.composedPath().some((n=>n===this.secondaryDiv)))this.toggleSecondary()}connectedCallback(){const n=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!n;const t=l(this.el,"a, button")[0];this.hasAnchorEle=!!t;if(t){this.href=t.href?t.href:null;this.btn=t;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}this.isInGlobalNav=false;this.isInMenuDrawer=false;this.globalNavEle=this.el.closest("nano-global-nav");this.isInMenuDrawer=!!this.el.closest("nano-menu-drawer");this.isInMenu=!!this.el.closest("nano-menu");this.isInGlobalNav=this.el.parentElement===this.globalNavEle||!!this.el.closest(".global-nav")}componentDidLoad(){this.openChange()}disconnectedCallback(){this.btn.removeEventListener("click",this.toggleSecondary);this.btn.removeEventListener("focus",this.handleFocus);this.btn.removeEventListener("blur",this.handleHostBlur)}render(){return t(i,{class:{"has-secondary":this.hasSecondarySlot,"secondary-open":this.open,selected:this.selected,"has-focus":this.hasFocus,disabled:this.disabled,"nano-global-nav":this.isInGlobalNav,"nano-menu-drawer":this.isInMenuDrawer,"nano-menu":this.isInMenu},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:this.el.closest('[role="menu"]')?"menuitem":undefined},t("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected},part:"ctrl-wrapper"},this.href&&!this.hasAnchorEle&&!this.disabled&&t("a",{part:"ctrl ctrl--anchor",target:this.target,ref:n=>this.btn=n,href:this.href,onFocus:this.handleFocus,class:{notification:this.notification}},t("slot",{name:"icon-start"}),t("span",{class:"text"},t("slot",null)),t("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&t("button",{part:"ctrl ctrl--button",ref:n=>this.btn=n,onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled,class:{notification:this.notification}},t("slot",{name:"icon-start"}),t("span",{class:"text"},t("slot",null)),t("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&t("div",{class:"link"},t("slot",{name:"icon-start"}),t("slot",null),t("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&t("div",{class:"secondary-menu",ref:n=>this.secondaryDiv=n,tabIndex:-1},t("div",{class:"secondary-menu-content",part:"secondary-wrapper"},t("slot",{name:"secondary"})),t("div",{class:"secondary-menu-mask",onClick:this.closeSecondary,part:"secondary-mask"}))))}get el(){return o(this)}static get watchers(){return{open:["openChange"],didOpen:["didOpenChange"]}}};_.style=g;const y='.sc-nano-select-h {\n  box-sizing: border-box;\n}\n\n*.sc-nano-select, *.sc-nano-select::before, *.sc-nano-select::after {\n  box-sizing: border-box;\n}\n[hidden].sc-nano-select {\n  display: none !important;\n}\n[disabled].sc-nano-select-h:not([disabled=false]) {\n  opacity: 0.5;\n}\n\n.form-ctrl.sc-nano-select {\n  min-inline-size: 100%;\n  display: block;\n}\n.form-ctrl.has-helper-end.sc-nano-select {\n  display: flex;\n  gap: 1rem;\n  container-type: inline-size;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__wrapper.sc-nano-select {\n  flex: 1 1 100%;\n}\n.form-ctrl.has-helper-end.sc-nano-select .form-ctrl__helper-end.sc-nano-select {\n  display: none;\n}\n@container (min-width: 350px) {\n  .form-ctrl.has-helper-end .form-ctrl__helper-end {\n    display: block !important;\n  }\n  .form-ctrl.has-helper-end .form-ctrl__helper {\n    display: none !important;\n  }\n}\n\n.form-ctrl__wrapper.sc-nano-select {\n  display: block;\n}\n\nlabel.sc-nano-select, .form-ctrl__more.sc-nano-select, .form-ctrl__error.sc-nano-select, .form-ctrl__helper.sc-nano-select {\n  display: block;\n  inline-size: 100%;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\nlabel.visually-hide.sc-nano-select, .form-ctrl__more.visually-hide.sc-nano-select, .form-ctrl__error.visually-hide.sc-nano-select, .form-ctrl__helper.visually-hide.sc-nano-select {\n  clip: rect(1px, 1px, 1px, 1px);\n  -webkit-clip-path: inset(50%);\n          clip-path: inset(50%);\n  block-size: 1px;\n  inline-size: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) 0;\n  color: var(--label-color);\n  position: absolute;\n  font-size: 1.15em;\n  transform: translateY(-50%);\n  transform-origin: top left;\n  inset-block-start: 50%;\n  transition: all 0.125s ease-in;\n  opacity: 1;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n  opacity: 0.7;\n}\n.form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select, .has-value.sc-nano-select-h .form-ctrl__float-label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  opacity: 1;\n}\n.form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 50%;\n}\n.has-focus.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n.has-value.sc-nano-select-h .form-ctrl__textarea.sc-nano-select .form-ctrl__float-label.sc-nano-select {\n  inset-block-start: 0;\n  transform: translateY(38%);\n}\n\n.form-ctrl__label.sc-nano-select {\n  color: var(--label-color);\n  font-size: var(--label-font-size);\n  padding-block-end: var(--padding-bottom);\n  line-height: 1;\n  display: flex;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-wrap.sc-nano-select {\n  flex: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  margin-block: unset;\n  margin-inline: 0 5px;\n  opacity: 0;\n  -webkit-appearance: none;\n          appearance: none;\n  transition: 0.3s ease opacity;\n  font-size: 0.9em;\n}\n.form-ctrl__label.sc-nano-select .form-ctrl__label-charcount.sc-nano-select {\n  margin-block: unset;\n  margin-inline: auto 0;\n  font-size: 0.9em;\n  opacity: 0.5;\n}\n.has-value.sc-nano-select-h .form-ctrl__label.sc-nano-select .form-ctrl__label-placeholder.sc-nano-select {\n  opacity: 0.5;\n}\n.has-focus.sc-nano-select-h .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--focus);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__label.sc-nano-select {\n  color: var(--label-color--invalid);\n}\n\n.has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 0;\n  transition: opacity 0.125s ease-in;\n}\n.has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__multi-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .select__native-input.sc-nano-select, .has-focus.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select, .has-value.sc-nano-select-h .has-float-label.sc-nano-select .input__native-ctrl.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__more.sc-nano-select {\n  block-size: 1em;\n  position: relative;\n  margin-block: 4px var(--padding-bottom);\n  margin-inline: 3px 0;\n}\n\n.form-ctrl__helper.sc-nano-select, .form-ctrl__error.sc-nano-select {\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  position: absolute;\n  font-size: var(--invalid-msg-font-size);\n  line-height: 1.2;\n  transition: 0.3s ease-out opacity;\n}\n\n.form-ctrl__helper.sc-nano-select {\n  font-style: italic;\n  color: var(--help-msg-color);\n}\n[show-inline-error].sc-nano-select-h:not([show-inline-error=false]):not([disabled]).is-invalid .form-ctrl__helper.sc-nano-select {\n  opacity: 0;\n}\n\n.form-ctrl__helper-end.sc-nano-select {\n  flex: 1 1 30%;\n  min-inline-size: 150px;\n  font-size: var(--invalid-msg-font-size);\n  color: var(--help-msg-color);\n  font-style: italic;\n}\n\n.form-ctrl__error.sc-nano-select {\n  opacity: 0;\n  color: var(--invalid-msg-color);\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__error.sc-nano-select {\n  opacity: 1;\n}\n\n.form-ctrl__input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  border-radius: var(--input-border-radius);\n  inline-size: 100%;\n  padding: 0 !important;\n  position: relative;\n  flex: 1 0 auto;\n  display: flex;\n  background: var(--input-bg-color);\n  border: var(--input-border-style);\n  border-width: var(--input-border-width);\n  font-size: var(--input-font-size);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.has-focus.sc-nano-select-h .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--focus);\n  border: var(--input-border-style--focus);\n  border-width: var(--input-border-width);\n  padding-inline-start: calc(var(--input-border-hint-width) - var(--input-border-width)) !important;\n}\n.is-invalid.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n.is-invalid.has-focus.sc-nano-select-h:not([disabled]) .form-ctrl__input.sc-nano-select {\n  background: var(--input-bg-color--invalid);\n  border: var(--input-border-style--invalid-focus);\n  border-width: var(--input-border-width);\n  border-inline-start: var(--input-border-style--invalid-focus) var(--input-border-hint-width);\n  padding-inline-start: 0 !important;\n}\n\n.form-ctrl__input-wrap.sc-nano-select {\n  display: flex;\n  align-items: stretch;\n  flex: 1;\n  max-inline-size: 100%;\n}\n\n.form-ctrl__clear-btn.sc-nano-select, .form-ctrl__slot-end.sc-nano-select, .form-ctrl__slot-start.sc-nano-select, .form-ctrl__slot-value-end.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  margin-block: 0;\n  margin-inline: 0;\n  font-size: 1em;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  display: flex;\n  align-items: stretch;\n  inline-size: auto;\n}\n\n.has-float-label.sc-nano-select .form-ctrl__slot-start.sc-nano-select {\n  display: none;\n}\n\n.form-ctrl__slot-start.sc-nano-select-s > *, .form-ctrl__slot-start .sc-nano-select-s > *, .form-ctrl__slot-end.sc-nano-select-s > *, .form-ctrl__slot-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  --nano-icon-size: 1.4em;\n  padding-inline: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  font-size: 1em;\n  align-items: center;\n  display: flex;\n  block-size: 100%;\n  z-index: 1;\n}\n.sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select-s > *, .sc-nano-select-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-select-s > *, [disabled].sc-nano-select-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__slot-value-end.sc-nano-select-s > *, .form-ctrl__slot-value-end .sc-nano-select-s > *, .form-ctrl__slot-value-end.sc-nano-select *.sc-nano-select {\n  pointer-events: none;\n}\n\n.form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color);\n  padding: 0;\n  opacity: 0;\n  inline-size: 0;\n  -webkit-appearance: none;\n          appearance: none;\n  align-items: center;\n  overflow: hidden;\n}\n.is-invalid.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  color: var(--clear-btn-color--invalid);\n}\n.has-value.sc-nano-select-h .form-ctrl__clear-btn.sc-nano-select {\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  opacity: 1;\n  inline-size: auto;\n}\n.form-ctrl__clear-btn.sc-nano-select:hover {\n  color: var(--clear-btn-color--hover);\n}\n\n.sc-nano-select-h {\n  \n  --placeholder-color: var(--nano-input-placeholder-color, initial);\n  --placeholder-font-style: var(--nano-input-placeholder-style, initial);\n  --placeholder-font-weight: var(--nano-input-placeholder-weight, initial);\n  --placeholder-opacity: var(--nano-input-placeholder-opacity, 0.5);\n  --padding-top: var(--nano-input-padding-top, var(--nano-input-padding, 8px));\n  --padding-end: var(--nano-input-padding-end, var(--nano-input-padding, 8px));\n  --padding-bottom: var(--nano-input-padding-bottom, var(--nano-input-padding, 6px));\n  --padding-start: var(--nano-input-padding-start, var(--nano-input-padding, 8px));\n  --color-invalid: var(--nano-color-danger-rgb, 239 65 53);\n  --color--focus-rgb:\n    var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0 116 149)\n    );\n  --input-font-size: var(--nano-input-font-size, 0.87em);\n  --input-text-color: var(--nano-input-text-color, #4a4a4a);\n  --input-border-width: var(--nano-input-border-width, 1px);\n  --input-border-hint-width: 3px;\n  --input-border-color: var(--nano-input-border-color, #e4e6e8);\n  --input-border-radius: var(--nano-input-border-radius, 0);\n  --input-border-style: var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);\n  --input-border-style--focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);\n  --input-border-style--invalid: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);\n  --input-border-style--invalid-focus: var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);\n  --input-bg-color: var(--nano-input-background-color, #fff);\n  --input-bg-color--focus: var(--input-bg-color);\n  --input-bg-color--invalid: var(--nano-input-background-color, white);\n  --invalid-msg-color: rgb(var(--color-invalid) / 100%);\n  --invalid-msg-font-size: var(--nano-input-help-font-size, 0.75em);\n  --help-msg-color: var(--nano-input-help-color, #616d6e);\n  --clear-btn-color: var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));\n  --clear-btn-color--hover: rgb(var(--color--focus-rgb) / 100%);\n  --clear-btn-color--invalid: rgb(var(--color-invalid) / 100%);\n  --label-color: var(--nano-input-label-color, "currentcolor");\n  --label-color--focus: var(--label-color);\n  --label-color--invalid: var(--nano-input-label-color-invalid, "currentcolor");\n  --label-font-size: var(--nano-input-label-color, 1em);\n  --multi-input-value-bg: var(--nano-input-tag-bg, 186 220 240);\n  --multi-input-value-text-color: var(--nano-input-tag-color, #455556);\n  --multi-input-value-border: var(--nano-input-tag-color, #badcf0);\n  \n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  font-family: var(--nano-font-family, inherit);\n  display: block;\n}\n\n.nano-color.sc-nano-select-h {\n  --input-border-style--focus:\n    var(--nano-input-border-style, solid) var(\n      --nano-color-tint,\n      var(--nano-color-primary-tint, #2689a5)\n    );\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n  color: var(--nano-color-base);\n}\n\nnano-item.sc-nano-select-h:not(.item-label), nano-item:not(.item-label) .sc-nano-select-h {\n  --padding-start: 0;\n}\n\n[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select {\n  pointer-events: none !important;\n}\n\nselect.sc-nano-select {\n  display: none;\n}\n\n.select__native-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding: unset;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  -webkit-appearance: none;\n          appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n  line-height: 2.5em;\n  \n  \n}\n.has-float-label.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 2.1em;\n  min-block-size: 2.1em;\n  padding-block-start: 1.4em;\n}\n.select__native-input.sc-nano-select::selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::-moz-selection {\n  background: transparent;\n}\n.select__native-input.sc-nano-select::placeholder {\n  color: var(--placeholder-color);\n  font-family: inherit;\n  font-style: var(--placeholder-font-style);\n  font-weight: var(--placeholder-font-weight);\n  opacity: var(--placeholder-opacity);\n  line-height: inherit;\n  min-block-size: initial;\n}\n.select__native-input.sc-nano-select::-moz-placeholder {\n  line-height: 2.8em;\n  text-overflow: ellipsis;\n}\n.select__native-input.sc-nano-select:-webkit-autofill {\n  background-color: transparent;\n}\n.select__native-input.sc-nano-select::-webkit-search-decoration, .select__native-input.sc-nano-select::-webkit-search-cancel-button, .select__native-input.sc-nano-select::-webkit-search-results-button, .select__native-input.sc-nano-select::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n          appearance: none;\n}\n.select__native-input.sc-nano-select:invalid {\n  box-shadow: none;\n}\n.select__native-input.sc-nano-select::-ms-clear, .select__native-input.sc-nano-select::-ms-reveal {\n  display: none;\n}\n.select__native-input.resizable.sc-nano-select {\n  resize: vertical;\n  overflow: auto;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select {\n  line-height: 1.5em;\n  padding-block: var(--padding-top) var(--padding-bottom);\n  white-space: pre-wrap;\n}\n.form-ctrl__textarea.sc-nano-select .select__native-input.sc-nano-select::placeholder {\n  line-height: 1.5em;\n}\n.has-float-label.textarea.sc-nano-select .select__native-input.sc-nano-select {\n  padding-block-start: 1.8em;\n}\n.masked.sc-nano-select-h .select__native-input.sc-nano-select {\n  opacity: 0;\n  position: absolute;\n  inset-inline-start: 0;\n  inset-block-start: 0;\n}\n\n.select__mask.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: 0;\n  border-radius: var(--input-border-radius);\n  pointer-events: none;\n  line-height: 2.5em;\n  min-block-size: 2.5em;\n}\n\n.select__multi-wrap.sc-nano-select {\n  padding-block: 0 var(--padding-bottom);\n  padding-inline: 0 0;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  overflow: hidden;\n  align-items: flex-start;\n}\n.has-float-label.sc-nano-select-h .select__multi-wrap.sc-nano-select {\n  padding-block-start: 1em;\n}\n.select__multi-input.sc-nano-select {\n  font-family: inherit;\n  font-size: inherit;\n  font-stretch: inherit;\n  font-style: inherit;\n  font-weight: inherit;\n  letter-spacing: inherit;\n  text-decoration: inherit;\n  text-overflow: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  white-space: inherit;\n  color: inherit;\n  padding-inline: var(--padding-start) var(--padding-end);\n  padding-block: var(--padding-bottom) 0;\n  min-inline-size: 50px;\n  inline-size: 100%;\n  max-block-size: 100%;\n  -webkit-appearance: none;\n          appearance: none;\n  border: 0;\n  outline: none;\n  display: inline-block;\n  background: transparent;\n  flex: 0;\n  position: relative;\n  box-sizing: border-box;\n  line-height: calc(2.5em - var(--padding-bottom));\n  block-size: calc(2.5em - var(--padding-bottom));\n}\n.select__multi-input.sc-nano-select:last-child {\n  flex: 1;\n}\n.select__multi-value.sc-nano-select {\n  margin-block: var(--padding-bottom) 0;\n  margin-inline: var(--padding-start) -3px;\n  background: rgb(var(--multi-input-value-bg)/80%);\n  color: var(--multi-input-value-text-color);\n  border: 1px solid;\n  border-color: var(--multi-input-value-border);\n  padding: 0.35em 0.5em;\n  display: flex;\n  align-items: center;\n  font-size: var(--input-font-size);\n  letter-spacing: 1px;\n  max-block-size: calc(2.5em - 8px);\n  max-inline-size: calc(100% - 8px);\n  border-radius: 4px;\n}\n.select__multi-value--closable.sc-nano-select {\n  padding-inline-end: 0;\n}\n.select__multi-value.sc-nano-select span.sc-nano-select {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-inline-size: 100%;\n  overflow: hidden;\n}\n.select__multi-value-remove.sc-nano-select {\n  background-position: center;\n  padding-inline-start: 0.5em;\n  margin: 0;\n  color: inherit;\n  border: 0;\n  outline: none;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  -webkit-appearance: none;\n          appearance: none;\n  display: flex;\n  align-items: center;\n  inset-block-start: 0;\n  font-size: 1em;\n}\n.select__multi-value-remove.sc-nano-select nano-icon.sc-nano-select {\n  --color: var(--multi-input-value-text-color);\n}\n\n.form-ctrl__float-label.sc-nano-select {\n  inline-size: calc(100% - (1em + var(--padding-start) * 2));\n}\n.has-focus.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(-110%);\n  font-size: 0.8em;\n}\n.has-value.has-multiple.sc-nano-select-h .form-ctrl__float-label.sc-nano-select {\n  transform: translateY(21%);\n  inset-block-start: 0;\n}\n\n.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 {\n  pointer-events: auto;\n}';let x=0;const w=class{get inputCtrl(){return this._inputCtrl}set inputCtrl(n){if(n===this._inputCtrl)return;this._inputCtrl=n;this.setDataListOpts()}get selectWrap(){return this._selectWrap}set selectWrap(n){if(this._selectWrap===n)return;this._selectWrap=n;this.setDataListOpts()}get datalist(){return this._datalist}set datalist(n){if(this._datalist===n)return;this._datalist=n;this.setDataListOpts()}constructor(t){n(this,t);this.nanoChange=s(this,"nanoChange",7);this.nanoBlur=s(this,"nanoBlur",7);this.nanoFocus=s(this,"nanoFocus",7);this.nanoDidLoad=s(this,"nanoDidLoad",7);this.nanoDidUnload=s(this,"nanoDidUnload",7);this.nanoSearchChange=s(this,"nanoSearchChange",7);this.nanoValidate=s(this,"nanoValidate",7);this.valueItems=[];this.selectId=`nano-select-${x++}`;this.rtl=false;this.onInit=true;this.customError="";this._value=this.multiple?[]:"";this._options=[];this.customValidate=()=>{if(!this.nativeSelect||!!this.customError||!this.nativeSelect["setCustomValidity"])return;this.nativeSelect.setCustomValidity("");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=n=>{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:n})};this.handleInvalid=n=>{this._invalid=true;if(this.validateOn==="submit"){this._invalid=this.showErrorMsg=this.customValidate()}if(this.showInlineError)n.preventDefault();requestAnimationFrame((()=>this.showInlineValidation(n)))};this.setValue=n=>{n.preventDefault();if(!this.multiple){this.value=n.detail.value;return}if(this.value&&this.value.length&&this.value.includes(n.detail.value))return;if(this.max&&this.value.length===this.max)return;if(Number.isNaN(this._maxValuesVisible)||this.value.length<=this._maxValuesVisible){this.currInsertIndex++}this.value=[...this.value.slice(0,this.currInsertIndex),n.detail.value,...this.value.slice(this.currInsertIndex)];this.inputSearchVal=""};this.removeValue=n=>{if(!this.multiple||!this.value.length)return;if(!n)n=this.value[this.value.length-1];this.value=this.value.filter((t=>t!==n));if(Number.isNaN(this._maxValuesVisible)||this.value.length<=this._maxValuesVisible){this.currInsertIndex--}this.setFocus()};this.setOptions=()=>{if(!this.datalist||!this.datalist.activeOptions||!this.datalist.activeOptions.length)return;this._elementOptions=this.datalist.activeOptions.map((n=>{const{value:t,selected:e,label:s,filterMeta:i}=n;return{value:t,selected:e,label:s,filterMeta:i}}));this.customValidate()};this.handleDocumentKeyDown=n=>{if(!this.multiple||!this.hasFocus)return;if(!this.inputSearchVal){let t;switch(n.key){case"Backspace":if(this.inputCtrl.previousElementSibling)t=this.inputCtrl.previousElementSibling;else break;this.removeValue(t.dataset.value||null);break;case"Delete":if(this.inputCtrl.nextElementSibling)t=this.inputCtrl.nextElementSibling;else break;this.removeValue(t.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!this.value.length)break;if(n.key==="ArrowLeft"&&this.inputCtrl.previousSibling)this.currInsertIndex--;if(n.key==="ArrowRight"&&this.inputCtrl.nextSibling)this.currInsertIndex++;setTimeout((()=>{this.inputCtrl.focus()}),20);n.preventDefault();break}}};this.onBlur=()=>{this.hasFocus=false;requestAnimationFrame((()=>{if(this.validateOn==="dirty"&&!this.hasFocus)this.showInlineValidation()}));this.nanoBlur.emit();if(!this.allowCustomValues&&this.multiple){this.inputSearchVal="";const n=new window.Event("change");this.inputCtrl.dispatchEvent(n)}};this.onFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.clearSelectValue=n=>{if(this.clearSelect&&!this.readonly&&!this.disabled&&n){n.preventDefault();n.stopPropagation()}if(this.multiple){this.value=[];this.currInsertIndex=-1}else this.value="";this.inputCtrl.value="";const t=new window.Event("change");this.inputCtrl.dispatchEvent(t)};this.onClick=()=>{this.setFocus()};this.onDragStart=n=>{const t=n.target;this.dragVal=t.dataset.value};this.onDragEnd=n=>{this.dragVal=null;n.preventDefault()};this.onDragLeave=n=>{const t=n.target;const e=t.dataset&&t.dataset.value?t.dataset.value:null;if(!e||this.dragVal===e||!this.value.includes(this.dragVal)){n.preventDefault();return}const s=this.value.indexOf(e);const i=this.value.indexOf(this.dragVal);const o=this.value;const a=o[s];o[s]=o[i];o[i]=a;this.value=[...o]};this.onMultiInput=n=>{this.inputSearchVal=n.target.value.trim();this.nanoSearchChange.emit({value:n.target.value.trim()})};this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.inputSearchVal="";this._invalid=false;this.color=undefined;this.autofocus=false;this.disabled=false;this.validateOn="submitThenDirty";this.showInlineError=true;this.label=undefined;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.maxValuesVisible=3;this.name=this.selectId+"-name";this.placeholder=undefined;this.readonly=false;this.required=false;this.size=undefined;this.max=undefined;this.min=undefined;this.form=undefined;this.allowCustomValues=false;this._elementOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.valueTagTemplate=undefined;this.showInlineValidation=p(this.showInlineValidation,50)}get invalid(){return this._invalid}get validityMessage(){if(!this.nativeSelect)return"";return this.nativeSelect.validationMessage}watchMaxValuesVisible(){if(!this.multiple)return;this._maxValuesVisible=this.maxValuesVisible===false?NaN:Number(this.maxValuesVisible);if(!Number.isNaN(this._maxValuesVisible)){if(this.currInsertIndex>this._maxValuesVisible){this.currInsertIndex=this._maxValuesVisible}}else{this.currInsertIndex=this.value.length-1}}get value(){return this._value}set value(n){if(!!n&&!!this._value){if(JSON.stringify(n)===JSON.stringify(this._value))return}if(typeof n==="string"){if(this.multiple)this._value=n.split(",");else this._value=n}else if(Array.isArray(n)){if(this.multiple)this._value=n;else this._value=n[0]}}get options(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._elementOptions.map((n=>{const{value:t,selected:e,label:s,filterMeta:i}=n;return{value:t,selected:e,label:s,filterMeta:i}}))}set options(n){this._options=n.map((n=>{if(typeof n==="string")return{value:n,label:n};else return n}))}debounceChanged(){this.nanoSearchChange=b(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()}valueChanged(){this.customValidate();if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}requestAnimationFrame((()=>{this.shouldValidate();this.nanoChange.emit({value:this.value})}))}setDataListOpts(){if(!this.datalist||!this.selectWrap)return;this.datalist.input=this.inputCtrl;const n=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig={...n,...this.dropDownConfig,tetherTo:this.selectWrap}}async reportValidity(n){return new Promise((t=>{if(n){this.customValidate();this.showInlineValidation()}setTimeout((()=>{t({isValid:!this._invalid,errorMessage:this.nativeSelect.validationMessage})}),50)}))}async setFocus(){if(!this.inputCtrl)return;this.inputCtrl.focus();setTimeout((()=>this.inputCtrl.click()),50)}getSelectElement(){return Promise.resolve(this.nativeSelect)}async showError(n){if(this.nativeSelect){this.customError=n;this.nativeSelect.setCustomValidity(n);this.showInlineValidation()}}get valArray(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value}isValidValues(){return this.valArray.find((n=>this.options.find((t=>t.value===n))))}slotChangeObserver(){if(!window["MutationObserver"])return;const n=this.mo=new MutationObserver((()=>this.processSlottedContent()));n.observe(this.el,{childList:true,subtree:true})}processSlottedContent(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]')}getOptionWithValue(n){let t;const e=this.datalist?.activeOptions?.length?this.datalist.activeOptions:this.options;const s=e.find(((e,s)=>{t=s;return!e.disabled&&e.value?.length&&e.value===n}));return[s,t]}getLabel(n){const t=this.getOptionWithValue(n)[0];return t&&t.label?t.label:n}onReset(n){const t=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!t||n.target!==this.el.closest("form"))return;this.clearSelectValue()}handleBlur(n){if(!this.hasFocus)return;const t=n;let e;requestAnimationFrame((()=>{if(t.key){if(t.key!=="Tab")return;e=d()}else e=n.target;if(r(this.el.tagName.toLowerCase(),e)!==this.el){this.onBlur()}}))}connectedCallback(){this.debounceChanged();this.watchMaxValuesVisible();this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}disconnectedCallback(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}));if(this.mo)this.mo.disconnect()}componentDidLoad(){this.slotChangeObserver();this.customValidate();this.setDataListOpts();requestAnimationFrame((()=>this.onInit=false))}componentWillLoad(){this.processSlottedContent()}render(){const n=this.selectId+"-lbl";const e=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";const s=this.hasHelperEndSlot?this.selectId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];const o=(({el:n,floatLabel:t,label:e,errorMessage:s,showInlineError:i,hasHelperSlot:o,hasHelperEndSlot:a,hasLabelSlot:l,hideLabel:r,placeholder:c,rtl:h})=>({el:n,floatLabel:t,label:e,errorMessage:s,showInlineError:i,hasHelperSlot:o,hasHelperEndSlot:a,hasLabelSlot:l,hideLabel:r,placeholder:c,rtl:h}))(this);const a={...o,labelId:n,moreId:e,helperEndId:s,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId};const l=(({readonly:n,disabled:t})=>({readonly:n,disabled:t,clearControl:this.clearSelect}))(this);return t(i,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:{...u(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}},t(f,{...a},t(m,{...l,onClearText:this.clearSelectValue,control:this.el,ref:n=>this.selectWrap=n,endValueSlot:t("slot",{name:"down-arrow"},t("nano-icon",{slot:"value-end",name:"light/chevron-down"}))},this.multiple&&t("div",{class:"select__multi-wrap select"},this.multipleValues(n,e,s)),!this.multiple&&[this.mask&&t("div",{class:"select__mask"},this.getLabel(this.value)),t("input",{id:this.selectId,class:"select__native-input",ref:n=>this.inputCtrl=n,"aria-labelledby":n+" "+e+" "+s,disabled:this.disabled,form:this.form,placeholder:this.placeholder,readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&t("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:n=>this.datalist=n,selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:n=>{n.preventDefault();this.removeValue(n.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&t("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:()=>this.inputCtrl.focus()},t("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),t("slot",null)),t("select",{id:this.selectId+"-hidden",class:"select__native-ctrl",ref:n=>this.nativeSelect=n,"aria-labelledby":n+" "+e+" "+s,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((n=>t("option",{value:n,selected:true},n))),!this.allowCustomValues&&this.options.map((n=>t("option",{value:n.value,selected:this.valArray.includes(n.value),disabled:n.disabled,label:n.label},this.valArray.includes(n.value))))))}multipleValues(n,e,s){const i=t("input",{class:"select__multi-input",id:this.selectId,ref:n=>this.inputCtrl=n,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.value.length?this.placeholder:"","aria-labelledby":n+" "+e+" "+s});if(!this.value.length)return i;const o=[];this.value.forEach(((n,e)=>{if(!Number.isNaN(this._maxValuesVisible)&&e>this._maxValuesVisible)return;let s;if(e===this._maxValuesVisible){s=t("span",{"data-value":n,class:"select__multi-value"},t("span",null,"+",this.value.length-this._maxValuesVisible))}else{s=t("span",{onDragStart:this.onDragStart,onDragLeave:this.onDragLeave,onDragEnd:this.onDragEnd,onDragOver:n=>n.preventDefault(),draggable:true,"data-value":n,ref:n=>this.valueItems.push(n),class:"select__multi-value select__multi-value--closable"},this.valueTagTemplate?t("span",{innerHTML:this.valueTagTemplate?this.valueTagTemplate(...this.getOptionWithValue(n)):undefined}):t("span",null,this.getLabel(n)),t("button",{class:"select__multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:()=>{this.removeValue(n)},onMouseUp:()=>{this.removeValue(n)}},t("nano-icon",{name:"light/times"})))}if(e===0&&this.currInsertIndex<0){o.push(i,s)}else if(e===this.currInsertIndex){o.push(s,i)}else{o.push(s)}}));return o}get el(){return o(this)}static get watchers(){return{maxValuesVisible:["watchMaxValuesVisible"],debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}}};w.style=y;export{v as nano_global_nav_user_profile,_ as nano_nav_item,w as nano_select};
 //# sourceMappingURL=nano-global-nav-user-profile_3.entry.js.map