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/components/nano-file-upload.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-file-upload.js","mappings":"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","names":[],"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"],"version":3}
1	+ {"file":"nano-file-upload.js","mappings":"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","names":[],"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"],"version":3}

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

@@ -7,16 +7,15 @@ import { C as ComponentStore } from './component-store.js';
 import { d as debounce } from './throttle.js';
 import { d as displayTransition } from './transitions.js';
 import { s as searchInsight } from './search-insights.js';
-import { d as defineCustomElement$b } from './datalist.js';
-import { d as defineCustomElement$a } from './dropdown.js';
-import { d as defineCustomElement$9 } from './global-nav-user-profile.js';
-import { d as defineCustomElement$8 } from './icon.js';
-import { d as defineCustomElement$7 } from './input.js';
-import { d as defineCustomElement$6 } from './menu.js';
-import { d as defineCustomElement$5 } from './nav-item.js';
-import { d as defineCustomElement$4 } from './option.js';
-import { d as defineCustomElement$3 } from './select.js';
-import { d as defineCustomElement$2 } from './sticker.js';
+import { d as defineCustomElement$a } from './datalist.js';
+import { d as defineCustomElement$9 } from './dropdown.js';
+import { d as defineCustomElement$8 } from './global-nav-user-profile.js';
+import { d as defineCustomElement$7 } from './icon.js';
+import { d as defineCustomElement$6 } from './input.js';
+import { d as defineCustomElement$5 } from './menu.js';
+import { d as defineCustomElement$4 } from './nav-item.js';
+import { d as defineCustomElement$3 } from './option.js';
+import { d as defineCustomElement$2 } from './select.js';
 async function clientFetch(url, { body, ...customConfig } = {}) {
   const headers = {
@@ -57,7 +56,7 @@ async function clientFetch(url, { body, ...customConfig } = {}) {
   }
 }
-const globalNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.global-nav{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}.global-nav button{background:none;color:inherit;border:none}.global-nav .icon-btn{position:relative;background:none;color:inherit;border:none;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.global-nav .icon-btn nano-icon{inline-size:18px;block-size:18px}.global-nav ::slotted(nano-nav-item[slot=icon]){--padding-top:9px;--padding-bottom:9px;--padding-start:7px;--padding-end:7px;--display:flex;font-size:18px}.global-nav a{color:inherit;text-decoration:none;white-space:nowrap}.global-nav .nav-links_title{margin:8px 0 3px}.global-nav .nav-links ul{margin:0;padding:0}.global-nav .nav-links li{list-style:none}.global-nav .login-btn{display:flex;align-items:center}.global-nav .menu-btn{padding:9px var(--bar-item-spacing) 9px var(--bar-item-spacing)}.site-content{display:flex;transition:min-height 0.2s ease;position:relative;z-index:auto;align-items:stretch;flex:1}.bars{color:var(--bar-text-color);z-index:var(--nano-layer-index-menubar, 10);position:relative;max-inline-size:100%;min-inline-size:100%;box-shadow:none;transition:0.2s ease box-shadow;display:flex;flex-wrap:wrap}[stuck] .bars{box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15)}.bars::before{content:\"\";inline-size:100%;block-size:100%;z-index:-1;background:var(--bar-background);position:absolute}.main-bar{flex:1 1 100%;inline-size:-moz-fit-content;inline-size:fit-content;padding-inline:0 var(--bar-item-spacing);padding-block:var(--bar-vertical-padding);display:flex;align-items:center;justify-content:space-between;overflow-x:hidden}.main-bar:focus{outline:none}:host(.ready) .main-bar{overflow-x:visible}.main-bar>*,.main-bar ::slotted(*){transition:opacity 0.2s ease}:host(:not(.ready)) .main-bar>*,:host(:not(.ready)) .main-bar ::slotted(*){opacity:0 !important}:host(.ready) .main-bar>*,:host(.ready) .main-bar ::slotted(*){opacity:1}:host(.resizing) .main-bar>*,:host(.resizing) .main-bar ::slotted(*){opacity:0 !important}.main-bar>*{flex:0 0 auto}.main-bar>* ::slotted(nano-nav-item[slot=icon]){margin-inline-start:11px}.main-bar>* ::slotted(nano-nav-item),.main-bar>* nano-nav-item{--color-hover:var(--bar-color-focus);--secondary-bg-color:var(--bar-dropdown-bg);--secondary-color:var(--bar-dropdown-text);--bg-color-open:var(--bar-background);--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;text-decoration:none !important}.main-bar .icon-btn{margin-block:0 0;margin-inline-start:6px}:host(.threshold-2) .main-bar .icon-btn{margin-block:0 0;margin-inline-start:11px}.main-bar .menu-btn.icon-btn{margin:0 !important;border-inline-end:1.5px solid var(--bar-color-shade)}.main-bar .logo{block-size:36px;inline-size:200px;min-inline-size:200px}:host(:not(.threshold-1)) .main-bar .logo{block-size:30px}.main-bar .logo-link{margin-inline:0 0;padding-inline:var(--bar-item-spacing);display:flex;align-items:center;border:none}.main-bar .nav-links{flex:0 0 auto;display:flex;justify-content:space-around}.main-bar .nav-links ul{display:flex;justify-content:space-around}.main-bar .nav-links ::slotted(nano-nav-item),.main-bar .nav-links nano-nav-item{--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;--margin:0 var(--bar-item-spacing)}.main-bar .nav-links--main{justify-content:flex-start;letter-spacing:1.5px;font-weight:600;font-stretch:condensed;text-transform:uppercase;font-size:1.065em;margin-inline-end:auto}.main-bar .nav-links--main ::slotted(nano-nav-item){--color:var(--bar-text-color);--padding-end:3px;--padding-start:0}.main-bar .nav-links--sub{--color:var(--color, #e2e2e2);margin-inline-start:6px;justify-content:flex-end}.main-bar .login-btn{display:inline-block;border-radius:4px;background-color:var(--login-button-bg);color:var(--login-button-text);padding:3px 10px;position:relative;inset-inline-start:auto;inset-block-end:auto;margin-inline:11px 0}.main-bar .measure-ele{min-inline-size:1px;display:block;margin:0;padding:0}.sticker-trigger{background:var(--bar-background);inline-size:100%;block-size:1px;z-index:20;position:relative;display:block}.sticker-trigger:has(+.sticker-trigger){display:none}.gn-menu{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:-1;display:none;transition:z-index 0.01s ease 0.2s;block-size:100vh;inline-size:100vw;overflow-y:auto}:host(.threshold-4) .gn-menu{position:absolute;inline-size:calc(100vw - 20px)}.gn-menu.menu-full-screen{inline-size:100vw !important}.gn-menu_wrap{max-inline-size:92vw;inline-size:335px;background:var(--menu-background);color:var(--menu-text-color);padding:calc(var(--bar-vertical-padding) + 1px) 0 0;box-shadow:0 0 36px 0 rgba(0, 0, 0, 0.8);position:relative;pointer-events:all;margin-block-end:36px;opacity:0;outline:none;transition:transform 0.2s ease, opacity 0.2s ease;overflow:hidden}.gn-menu_wrap.has-promotion{padding:var(--menu-padding) 0 0}.gn-menu.open{z-index:var(--nano-layer-index-dropdown, 300);transition:z-index 0.01s ease}.gn-menu.open .gn-menu_wrap{opacity:1;transform:translate3d(0, 0, 0) !important;transition:transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s}.gn-menu_actions{padding-inline-end:calc(var(--menu-padding) / 2);display:flex;justify-content:space-between}.gn-menu_actions-counter{background:#d0021b;color:var(--menu-text-color);position:absolute;inset-block-end:4px;inset-inline:auto 0;font-size:9px;block-size:14px;line-height:14px;inline-size:auto;min-inline-size:14px;border-radius:50%;box-sizing:border-box;text-align:center;text-indent:0}.gn-menu .content-wrap{position:relative;transition:0.2s ease min-height;min-block-size:190px}.gn-menu .content--sub{padding:var(--menu-padding) 0 var(--menu-padding) 7px}.gn-menu .menu-btn{margin-inline-end:auto}.gn-menu .nav-links{display:flex;flex-wrap:wrap}.gn-menu .nav-links ::slotted(nano-nav-item),.gn-menu .nav-links nano-nav-item{--icon-size:14px;--display:inline-block;--secondary-bg-color:#001a21;--padding-top:10px;--padding-bottom:10px;--padding-end:calc(var(--menu-padding) * 2);--padding-start:calc(var(--menu-padding) + 3px);--color:var(--menu-text-color);--color-hover:var(--menu-title-text);--bg-color-hover:transparent;--bg-color-focus:#002530;--focus-outline:none;inline-size:100%}.gn-menu .nav-links .user-nav{--bg-color:var(--menu-user-panel-bg);--padding-top:9px;--padding-bottom:9px;font-weight:bold;margin:5px 0 0}.gn-menu .nav-links .user-nav ::slotted(nano-nav-item),.gn-menu .nav-links .user-nav nano-nav-item{font-weight:400;--bg-color:transparent}.gn-menu .nav-links .user-nav .content{padding:0;background-color:var(--menu-user-panel-bg)}.gn-menu .nav-links .user-nav .content--sub{padding-inline:var(--menu-padding)}.gn-menu .nav-links .user-nav .back-btn{padding-inline-start:var(--menu-padding)}.gn-menu .nav-links_title{margin:0 var(--menu-padding) 4px;border-block-end:1px solid var(--menu-hint-color);padding-block-end:8px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700}.gn-menu .nav-links_title--sites{border-block-end:none}.gn-menu .nav-links-wrap{margin:18px 0}.gn-menu .nav-links-wrap:last-child{margin-block-end:0}.gn-menu .nav-links .back-btn{border-block-start:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);display:flex;align-items:center;padding:10px 11px 10px 0;inline-size:100%;font-size:12px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:700;cursor:pointer;font-stretch:expanded}.gn-menu .nav-links .back-btn:hover{color:var(--menu-text-color)}.gn-menu .nav-links .back-btn nano-icon{margin-inline-end:10px;font-size:12px;color:var(--menu-icon-color)}.gn-menu .nav-links--sub{display:flex;flex-wrap:wrap}.gn-menu .nav-links--sub ::slotted(nano-nav-item),.gn-menu .nav-links--sub nano-nav-item{--border-bottom:none;--padding-end:var(--menu-padding);--padding-start:var(--menu-padding);--padding-top:8px;--padding-bottom:8px;margin:0;inline-size:50%;line-height:1.8}.gn-menu .nav-links--sites ::slotted(nano-nav-item),.gn-menu .nav-links--sites nano-nav-item{inline-size:100%}.gn-menu .nav-links .content{padding:8px var(--menu-padding)}.gn-menu .login-btn{padding-inline:7px var(--menu-padding);padding-block:var(--menu-padding)}.gn-menu .login-btn nano-icon{margin-inline-start:10px}.gn-menu .logout-btn{justify-content:flex-end}.gn-menu .logout-btn a{padding:0 5px}.mask{opacity:0;background:rgba(0, 0, 0, 0.3);position:fixed;inset-inline:0;inset-block-start:0;block-size:100vh;z-index:-1;transition:transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;visibility:hidden}.mask.open{opacity:1;transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;z-index:var(--nano-layer-index-mask, 10);visibility:visible}.search-btn::before{content:\"\";background-color:#0c5a71;block-size:9px;inset-inline:0 5px;inset-block-end:-20px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}.search-btn--open::before{transform:translateZ(0) scaleX(1);opacity:0.7}.search-bar{block-size:0;overflow:hidden;transition:0.2s ease height;padding:0 var(--bar-item-spacing);outline:none;max-inline-size:45em;margin-inline-start:auto;flex:1;}.search-bar .search-widget{margin:0;overflow:inherit;max-inline-size:none;max-block-size:none;min-inline-size:auto;padding-inline-end:0}.search-bar .search-widget .search-icon--search{display:none}.search-bar .search-widget .search-input{--input-border-width:2px 0 0 0;--input-bg-color:#f3f3f3;--nano-input-border-color:transparent;--nano-input-border-color--focus:var(--bar-color-shade);font-size:1.1875em}.search-bar .search-widget nano-select.search-input{--input-border-width:2px 3px 0 0;--input-bg-color:var(--bar-color-shade);--input-bg-color--focus:#f3f3f3;color:#f3f3f3}.search-bar .search-widget nano-select.search-input.has-focus{color:var(--bar-color-shade)}.search-bar .search-widget .select-input__arrow{font-size:0.75em}.search-bar .search-widget .select__mask.sc-nano-select{line-height:2.35em;min-block-size:2.35em;padding-block-start:2px}.search-bar .search-inputs{padding:0;margin:0}.search-bar .search-autocomplete{inset-block-start:100%;inline-size:100%}.search-widget{padding-inline-end:var(--bar-item-spacing);margin-inline:var(--bar-item-spacing) auto;position:relative;flex:1 1 auto;max-inline-size:500px;min-inline-size:350px;max-block-size:36px;inset-block-start:-1px}.search-inputs{display:flex;margin:0}.search-inputs input[type=submit]{display:none}.search-autocomplete{position:absolute;inset-block-start:calc(100% + 15px);inline-size:calc(100% - var(--bar-item-spacing));inset-inline-start:0;background:white;border:2px solid var(--bar-color-tint);border-radius:0 0 5px 5px;color:#4a4a4a;padding-block:calc(var(--bar-vertical-padding) / 2) 1px;padding-inline:0 0;z-index:1}.search-autocomplete-hit{padding-block:calc(var(--bar-vertical-padding) / 4);padding-inline:var(--bar-item-spacing);inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:start;line-height:1.5;cursor:pointer}.search-autocomplete-hit-scope{color:#a7b0b3;font-weight:600}.search-autocomplete-hit:hover,.search-autocomplete-hit:focus-visible{background-color:#e4e6e8}.search-autocomplete-hit:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.search-autocomplete-hit:focus{outline:none}.search-autocomplete-hit .search__highlight,.search-autocomplete-hit em{font-weight:bold;font-style:normal}.search-autocomplete-hit--no-result:hover,.search-autocomplete-hit--no-result:focus{background:none !important}.search-autocomplete-foot{margin:7px 0 0}.search-autocomplete-submit{background:none;border:none;align-self:normal;padding:9px var(--bar-item-spacing) !important;cursor:pointer;display:flex;align-items:center;color:#007495;justify-content:flex-end;inline-size:100%;text-decoration:underline;border-block-start:1px solid #e8eaea}.search-autocomplete-submit:hover,.search-autocomplete-submit:focus{background-color:#e4e6e8}nano-select.search-input{--input-border-width:0 0 2px 0;--input-text-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--padding-end:var(--bar-item-spacing);--nano-input-border-color--focus:black;font-stretch:condensed;font-weight:600;letter-spacing:1.5px;font-size:1.2em;flex:0 1 auto;inline-size:auto;display:flex;align-items:center;flex-direction:column;position:relative;inset-inline-start:1px;text-transform:uppercase}:host(:not(.ready)) nano-select.search-input{overflow:hidden;max-block-size:1em}nano-select.search-input .down-arrow{font-size:0.65em}nano-input.search-input{--clear-btn-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--input-border-width:0 0 2px 0;--placeholder-color:var(--bar-text-color);--input-text-color:var(--bar-text-color);--padding-start:21px;--nano-input-border-color--focus:black;font-size:1.2em;inline-size:206px;display:flex;align-items:center;flex-direction:column;flex:1}:host(:dir(rtl)) nano-input.search-input{--input-border-radius:5px 0 0 5px}:host-context([dir=rtl]) nano-input.search-input{--input-border-radius:5px 0 0 5px}:host(:not(.ready)) nano-input.search-input{overflow:hidden;max-block-size:1em}nano-input.search-input .search-icon{background:none;padding:0 8px;display:none;font-size:0.9em}nano-input.search-input .search-icon--show{display:flex !important}nano-input.search-input .search-icon--loader{animation:spin 1s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}nano-input.search-input .search-icon nano-icon{block-size:1.4em}.user-profile{display:flex;justify-content:space-between;align-items:center;padding:2em;background-color:var(--menu-user-profile-bg)}.user-profile .left{display:flex;align-items:center}.user-profile .avatar-container{position:relative}.user-profile .avatar-container img.avatar{border-radius:50px}.user-profile .avatar-container img.logo-small{position:absolute;block-size:30px;inline-size:30px;inset-block-end:0;inset-inline-end:0;background-color:#27586e;border-radius:10px;padding:5px}.user-profile .user-details{display:flex;flex-direction:column;margin:0 1.25em;color:white}.user-profile .user-details .name{font-size:1.25em}.user-profile .user-details .bio{margin:0.5em 0}.user-profile .user-details .kudos span{background-color:#81c7eb;color:#415958;padding:0.25em;border-radius:0.5em;font-weight:bold}.user-profile .chevron-right{font-size:1.5em;color:white}.user-links{position:relative}.user-links .icon-btn{padding-inline-end:0;font-weight:400;padding:7px}.user-links .icon-btn nano-icon{margin-inline-start:5px;inline-size:16px;block-size:16px;transform-origin:center;transition:transform 0.2s ease, color 0.2s ease}.user-links .icon-btn.open nano-icon{transform:rotate(180deg);color:#007495}.user-links-panel{display:none;position:absolute;border-radius:4px 0 4px 4px;box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.4);background-color:#568c9d;opacity:0;transform:translate3d(0, 30px, 0);transition:transform 0.2s ease, opacity 0.2s ease;inset-inline-end:0;min-inline-size:318px;z-index:2}.user-links-panel:focus{outline:none}.user-links-panel.show{opacity:1;transform:translate3d(0, calc(var(--padding) + 1px), 0)}.user-links-panel-content{padding:0 18px;display:flex;flex-direction:column;color:white}.user-links-panel-content a{padding:11px 0;border-block-end:#669dac 1px solid}.user-links-panel-content a:hover,.user-links-panel-content a:focus{color:#455556}.user-links-panel-content a:last-child{border-block-end:none}.user-links-panel-foot{background-color:#aac5cd;border-radius:0 0 4px 4px;padding:var(--padding);color:#455556;display:flex;align-items:center;font-weight:400;justify-content:space-between}.user-links-panel-foot a:hover{text-decoration:underline}.user-links-panel .user-profile{background-color:var(--bar-user-panel-bg)}:host{--bar-vertical-padding:21px;--bar-item-spacing:13px;--bar-background:white;--bar-text-color:#196c82;--bar-color-shade:rgb(12 90 113);--bar-color-tint:rgb(19 89 111);--bar-color-focus:#99a3a6;--bar-user-panel-bg:#016d86;--bar-dropdown-bg:#196c82;--bar-dropdown-text:white;--menu-background:#001a21;--menu-text-color:white;--menu-user-profile-bg:#001a21;--menu-user-panel-bg:#193037;--menu-padding:12px;--menu-hint-color:#33484d;--menu-title-text:#90c6e7;--menu-icon-color:white;--login-button-bg:#17bb75;--login-button-text:white;--padding:12px;--padding-top:var(--padding);--padding-end:var(--padding);--padding-bottom:var(--padding);--padding-start:var(--padding);display:flex;flex-direction:column;position:relative;line-height:1.5;block-size:100%;font-size:0.9375em;font-size:clamp(0.77rem, 1vw, 0.9rem)}:host input,:host select,:host button{font-family:inherit;-webkit-appearance:none;appearance:none;font-size:inherit}:host a:focus,:host button:focus{outline:none}:host a:focus-visible,:host button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
+const globalNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}.global-nav{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}.global-nav button{background:none;color:inherit;border:none}.global-nav .icon-btn{position:relative;background:none;color:inherit;border:none;align-self:normal;padding:9px 7px;cursor:pointer;display:flex;align-items:center}.global-nav .icon-btn nano-icon{inline-size:18px;block-size:18px}.global-nav ::slotted(nano-nav-item[slot=icon]){--padding-top:9px;--padding-bottom:9px;--padding-start:7px;--padding-end:7px;--display:flex;font-size:18px}.global-nav a{color:inherit;text-decoration:none;white-space:nowrap}.global-nav .nav-links_title{margin:8px 0 3px}.global-nav .nav-links ul{margin:0;padding:0}.global-nav .nav-links li{list-style:none}.global-nav .login-btn{display:flex;align-items:center}.global-nav .menu-btn{padding:9px var(--bar-item-spacing) 9px var(--bar-item-spacing)}.site-content{display:flex;transition:min-height 0.2s ease;position:relative;z-index:auto;align-items:stretch;flex:1}.bars{color:var(--bar-text-color);z-index:var(--nano-layer-index-menubar, 10);position:relative;max-inline-size:100%;min-inline-size:100%;box-shadow:none;transition:0.2s ease box-shadow;display:flex;flex-wrap:wrap}[stuck] .bars{box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15)}.bars::before{content:\"\";inline-size:100%;block-size:100%;z-index:-1;background:var(--bar-background);position:absolute}.main-bar{flex:1 1 100%;inline-size:-moz-fit-content;inline-size:fit-content;padding-inline:0 var(--bar-item-spacing);padding-block:var(--bar-vertical-padding);display:flex;align-items:center;justify-content:space-between;overflow-x:hidden}.main-bar:focus{outline:none}:host(.ready) .main-bar{overflow-x:visible}.main-bar>*,.main-bar ::slotted(*){transition:opacity 0.2s ease}:host(:not(.ready)) .main-bar>*,:host(:not(.ready)) .main-bar ::slotted(*){opacity:0 !important}:host(.ready) .main-bar>*,:host(.ready) .main-bar ::slotted(*){opacity:1}:host(.resizing) .main-bar>*,:host(.resizing) .main-bar ::slotted(*){opacity:0 !important}.main-bar>*{flex:0 0 auto}.main-bar>* ::slotted(nano-nav-item[slot=icon]){margin-inline-start:11px}.main-bar>* ::slotted(nano-nav-item),.main-bar>* nano-nav-item{--color-hover:var(--bar-color-focus);--secondary-bg-color:var(--bar-dropdown-bg);--secondary-color:var(--bar-dropdown-text);--bg-color-open:var(--bar-background);--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;text-decoration:none !important}.main-bar .icon-btn{margin-block:0 0;margin-inline-start:6px}:host(.threshold-2) .main-bar .icon-btn{margin-block:0 0;margin-inline-start:11px}.main-bar .menu-btn.icon-btn{margin:0 !important;border-inline-end:1.5px solid var(--bar-color-shade)}.main-bar .logo{block-size:36px;inline-size:200px;min-inline-size:200px}:host(:not(.threshold-1)) .main-bar .logo{block-size:30px}.main-bar .logo-link{margin-inline:0 0;padding-inline:var(--bar-item-spacing);display:flex;align-items:center;border:none}.main-bar .nav-links{flex:0 0 auto;display:flex;justify-content:space-around}.main-bar .nav-links ul{display:flex;justify-content:space-around}.main-bar .nav-links ::slotted(nano-nav-item),.main-bar .nav-links nano-nav-item{--padding-top:7px;--padding-bottom:7px;--padding-end:2px;--padding-start:2px;--margin:0 var(--bar-item-spacing)}.main-bar .nav-links--main{justify-content:flex-start;letter-spacing:1.5px;font-weight:600;text-transform:uppercase;font-size:1.065em;margin-inline-end:auto}.main-bar .nav-links--main ::slotted(nano-nav-item){--color:var(--bar-text-color);--padding-end:3px;--padding-start:0}.main-bar .nav-links--sub{--color:var(--color, #e2e2e2);margin-inline-start:6px;justify-content:flex-end}.main-bar .login-btn{display:inline-block;border-radius:4px;background-color:var(--login-button-bg);color:var(--login-button-text);padding:3px 10px;position:relative;inset-inline-start:auto;inset-block-end:auto;margin-inline:11px 0}.main-bar .measure-ele{min-inline-size:1px;display:block;margin:0;padding:0}.gn-menu{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:-1;display:none;transition:z-index 0.01s ease 0.2s;block-size:100vh;inline-size:100vw;overflow-y:auto}:host(.threshold-4) .gn-menu{position:absolute;inline-size:calc(100vw - 20px)}.gn-menu.menu-full-screen{inline-size:100vw !important}.gn-menu_wrap{max-inline-size:92vw;inline-size:335px;background:var(--menu-background);color:var(--menu-text-color);padding:calc(var(--bar-vertical-padding) + 1px) 0 0;box-shadow:0 0 36px 0 rgba(0, 0, 0, 0.8);position:relative;pointer-events:all;margin-block-end:36px;opacity:0;outline:none;transition:transform 0.2s ease, opacity 0.2s ease;overflow:hidden}.gn-menu_wrap.has-promotion{padding:var(--menu-padding) 0 0}.gn-menu.open{z-index:var(--nano-layer-index-dropdown, 300);transition:z-index 0.01s ease}.gn-menu.open .gn-menu_wrap{opacity:1;transform:translate3d(0, 0, 0) !important;transition:transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s}.gn-menu_actions{padding-inline-end:calc(var(--menu-padding) / 2);display:flex;justify-content:space-between}.gn-menu_actions-counter{background:#d0021b;color:var(--menu-text-color);position:absolute;inset-block-end:4px;inset-inline:auto 0;font-size:9px;block-size:14px;line-height:14px;inline-size:auto;min-inline-size:14px;border-radius:50%;box-sizing:border-box;text-align:center;text-indent:0}.gn-menu .content-wrap{position:relative;transition:0.2s ease min-height;min-block-size:190px}.gn-menu .content--sub{padding:var(--menu-padding) 0 var(--menu-padding) 7px}.gn-menu .menu-btn{margin-inline-end:auto}.gn-menu .nav-links{display:flex;flex-wrap:wrap}.gn-menu .nav-links ::slotted(nano-nav-item),.gn-menu .nav-links nano-nav-item{--icon-size:14px;--display:inline-block;--secondary-bg-color:#001a21;--padding-top:10px;--padding-bottom:10px;--padding-end:calc(var(--menu-padding) * 2);--padding-start:calc(var(--menu-padding) + 3px);--color:var(--menu-text-color);--color-hover:var(--menu-title-text);--bg-color-hover:transparent;--bg-color-focus:#002530;--focus-outline:none;inline-size:100%}.gn-menu .nav-links .user-nav{--bg-color:var(--menu-user-panel-bg);--padding-top:9px;--padding-bottom:9px;font-weight:bold;margin:5px 0 0}.gn-menu .nav-links .user-nav ::slotted(nano-nav-item),.gn-menu .nav-links .user-nav nano-nav-item{font-weight:400;--bg-color:transparent}.gn-menu .nav-links .user-nav .content{padding:0;background-color:var(--menu-user-panel-bg)}.gn-menu .nav-links .user-nav .content--sub{padding-inline:var(--menu-padding)}.gn-menu .nav-links .user-nav .back-btn{padding-inline-start:var(--menu-padding)}.gn-menu .nav-links_title{margin:0 var(--menu-padding) 4px;border-block-end:1px solid var(--menu-hint-color);padding-block-end:8px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:600}.gn-menu .nav-links_title--sites{border-block-end:none}.gn-menu .nav-links-wrap{margin:18px 0}.gn-menu .nav-links-wrap:last-child{margin-block-end:0}.gn-menu .nav-links .back-btn{border-block-start:1px solid var(--menu-hint-color);border-block-end:1px solid var(--menu-hint-color);display:flex;align-items:center;padding:10px 11px 10px 0;inline-size:100%;font-size:12px;text-transform:uppercase;color:var(--menu-title-text);letter-spacing:1px;font-weight:600;cursor:pointer}.gn-menu .nav-links .back-btn:hover{color:var(--menu-text-color)}.gn-menu .nav-links .back-btn nano-icon{margin-inline-end:10px;font-size:12px;color:var(--menu-icon-color)}.gn-menu .nav-links--sub{display:flex;flex-wrap:wrap}.gn-menu .nav-links--sub ::slotted(nano-nav-item),.gn-menu .nav-links--sub nano-nav-item{--border-bottom:none;--padding-end:var(--menu-padding);--padding-start:var(--menu-padding);--padding-top:8px;--padding-bottom:8px;margin:0;inline-size:50%;line-height:1.8}.gn-menu .nav-links--sites ::slotted(nano-nav-item),.gn-menu .nav-links--sites nano-nav-item{inline-size:100%}.gn-menu .nav-links .content{padding:8px var(--menu-padding)}.gn-menu .login-btn{padding-inline:7px var(--menu-padding);padding-block:var(--menu-padding)}.gn-menu .login-btn nano-icon{margin-inline-start:10px}.gn-menu .logout-btn{justify-content:flex-end}.gn-menu .logout-btn a{padding:0 5px}.mask{opacity:0;background:rgba(0, 0, 0, 0.3);position:fixed;inset-inline:0;inset-block-start:0;block-size:100vh;z-index:-1;transition:transform 0.2s ease, opacity 0.2s ease, visibility 0.01s ease 0.2s, z-index 0.01s ease 0.2s;visibility:hidden}.mask.open{opacity:1;transition:z-index 0.01s ease, visibility 0.01s ease, transform 0.2s ease 0.01s, opacity 0.2s ease 0.01s;z-index:var(--nano-layer-index-mask, 10);visibility:visible}.search-btn::before{content:\"\";background-color:#0c5a71;block-size:9px;inset-inline:0 5px;inset-block-end:-20px;position:absolute;transform:translateZ(0) scaleX(0);transform-origin:0;transition:0.2s ease transform}.search-btn--open::before{transform:translateZ(0) scaleX(1);opacity:0.7}.search-bar{block-size:0;overflow:hidden;transition:0.2s ease height;padding:0 var(--bar-item-spacing);outline:none;max-inline-size:45em;margin-inline-start:auto;flex:1;}.search-bar .search-widget{margin:0;overflow:inherit;max-inline-size:none;max-block-size:none;min-inline-size:auto;padding-inline-end:0}.search-bar .search-widget .search-icon--search{display:none}.search-bar .search-widget .search-input{--input-border-width:2px 0 0 0;--input-bg-color:#f3f3f3;--nano-input-border-color:transparent;--nano-input-border-color--focus:var(--bar-color-shade);font-size:1.1875em}.search-bar .search-widget nano-select.search-input{--input-border-width:2px 3px 0 0;--input-bg-color:var(--bar-color-shade);--input-bg-color--focus:#f3f3f3;color:#f3f3f3}.search-bar .search-widget nano-select.search-input.has-focus{color:var(--bar-color-shade)}.search-bar .search-widget .select-input__arrow{font-size:0.75em}.search-bar .search-widget .select__mask.sc-nano-select{line-height:2.35em;min-block-size:2.35em;padding-block-start:2px}.search-bar .search-inputs{padding:0;margin:0}.search-bar .search-autocomplete{inset-block-start:100%;inline-size:100%}.search-widget{padding-inline-end:var(--bar-item-spacing);margin-inline:var(--bar-item-spacing) auto;position:relative;flex:1 1 auto;max-inline-size:500px;min-inline-size:350px;max-block-size:36px;inset-block-start:-1px}.search-inputs{display:flex;margin:0}.search-inputs input[type=submit]{display:none}.search-autocomplete{position:absolute;inset-block-start:calc(100% + 15px);inline-size:calc(100% - var(--bar-item-spacing));inset-inline-start:0;background:white;border:2px solid var(--bar-color-tint);border-radius:0 0 5px 5px;color:#4a4a4a;padding-block:calc(var(--bar-vertical-padding) / 2) 1px;padding-inline:0 0;z-index:1}.search-autocomplete-hit{padding-block:calc(var(--bar-vertical-padding) / 4);padding-inline:var(--bar-item-spacing);inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;text-align:start;line-height:1.5;cursor:pointer}.search-autocomplete-hit-scope{color:#a7b0b3;font-weight:600}.search-autocomplete-hit:hover,.search-autocomplete-hit:focus-visible{background-color:#e4e6e8}.search-autocomplete-hit:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}.search-autocomplete-hit:focus{outline:none}.search-autocomplete-hit .search__highlight,.search-autocomplete-hit em{font-weight:bold;font-style:normal}.search-autocomplete-hit--no-result:hover,.search-autocomplete-hit--no-result:focus{background:none !important}.search-autocomplete-foot{margin:7px 0 0}.search-autocomplete-submit{background:none;border:none;align-self:normal;padding:9px var(--bar-item-spacing) !important;cursor:pointer;display:flex;align-items:center;color:#007495;justify-content:flex-end;inline-size:100%;text-decoration:underline;border-block-start:1px solid #e8eaea}.search-autocomplete-submit:hover,.search-autocomplete-submit:focus{background-color:#e4e6e8}nano-select.search-input{--input-border-width:0 0 2px 0;--input-text-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--padding-end:var(--bar-item-spacing);--nano-input-border-color--focus:black;font-weight:600;letter-spacing:1.5px;font-size:1.2em;flex:0 1 auto;inline-size:auto;display:flex;align-items:center;flex-direction:column;position:relative;inset-inline-start:1px;text-transform:uppercase}:host(:not(.ready)) nano-select.search-input{overflow:hidden;max-block-size:1em}nano-select.search-input .down-arrow{font-size:0.65em}nano-input.search-input{--clear-btn-color:var(--bar-text-color);--nano-input-border-color:rgb(103 138 154);--input-border-width:0 0 2px 0;--placeholder-color:var(--bar-text-color);--input-text-color:var(--bar-text-color);--padding-start:21px;--nano-input-border-color--focus:black;font-size:1.2em;inline-size:206px;display:flex;align-items:center;flex-direction:column;flex:1}:host(:dir(rtl)) nano-input.search-input{--input-border-radius:5px 0 0 5px}:host-context([dir=rtl]) nano-input.search-input{--input-border-radius:5px 0 0 5px}:host(:not(.ready)) nano-input.search-input{overflow:hidden;max-block-size:1em}nano-input.search-input .search-icon{background:none;padding:0 8px;display:none;font-size:0.9em}nano-input.search-input .search-icon--show{display:flex !important}nano-input.search-input .search-icon--loader{animation:spin 1s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}nano-input.search-input .search-icon nano-icon{block-size:1.4em}.user-profile{display:flex;justify-content:space-between;align-items:center;padding:2em;background-color:var(--menu-user-profile-bg)}.user-profile .left{display:flex;align-items:center}.user-profile .avatar-container{position:relative}.user-profile .avatar-container img.avatar{border-radius:50px}.user-profile .avatar-container img.logo-small{position:absolute;block-size:30px;inline-size:30px;inset-block-end:0;inset-inline-end:0;background-color:#27586e;border-radius:10px;padding:5px}.user-profile .user-details{display:flex;flex-direction:column;margin:0 1.25em;color:white}.user-profile .user-details .name{font-size:1.25em}.user-profile .user-details .bio{margin:0.5em 0}.user-profile .user-details .kudos span{background-color:#81c7eb;color:#415958;padding:0.25em;border-radius:0.5em;font-weight:bold}.user-profile .chevron-right{font-size:1.5em;color:white}.user-links{position:relative}.user-links .icon-btn{padding-inline-end:0;font-weight:400;padding:7px}.user-links .icon-btn nano-icon{margin-inline-start:5px;inline-size:16px;block-size:16px;transform-origin:center;transition:transform 0.2s ease, color 0.2s ease}.user-links .icon-btn.open nano-icon{transform:rotate(180deg);color:#007495}.user-links-panel{display:none;position:absolute;border-radius:4px 0 4px 4px;box-shadow:0 1px 5px 0 rgba(0, 0, 0, 0.4);background-color:#568c9d;opacity:0;transform:translate3d(0, 30px, 0);transition:transform 0.2s ease, opacity 0.2s ease;inset-inline-end:0;min-inline-size:318px;z-index:2}.user-links-panel:focus{outline:none}.user-links-panel.show{opacity:1;transform:translate3d(0, calc(var(--padding) + 1px), 0)}.user-links-panel-content{padding:0 18px;display:flex;flex-direction:column;color:white}.user-links-panel-content a{padding:11px 0;border-block-end:#669dac 1px solid}.user-links-panel-content a:hover,.user-links-panel-content a:focus{color:#455556}.user-links-panel-content a:last-child{border-block-end:none}.user-links-panel-foot{background-color:#aac5cd;border-radius:0 0 4px 4px;padding:var(--padding);color:#455556;display:flex;align-items:center;font-weight:400;justify-content:space-between}.user-links-panel-foot a:hover{text-decoration:underline}.user-links-panel .user-profile{background-color:var(--bar-user-panel-bg)}:host{--bar-vertical-padding:21px;--bar-item-spacing:13px;--bar-background:white;--bar-text-color:#196c82;--bar-color-shade:rgb(12 90 113);--bar-color-tint:rgb(19 89 111);--bar-color-focus:#99a3a6;--bar-user-panel-bg:#016d86;--bar-dropdown-bg:#196c82;--bar-dropdown-text:white;--menu-background:#001a21;--menu-text-color:white;--menu-user-profile-bg:#001a21;--menu-user-panel-bg:#193037;--menu-padding:12px;--menu-hint-color:#33484d;--menu-title-text:#90c6e7;--menu-icon-color:white;--login-button-bg:#17bb75;--login-button-text:white;--padding:12px;--padding-top:var(--padding);--padding-end:var(--padding);--padding-bottom:var(--padding);--padding-start:var(--padding);display:flex;flex-direction:column;position:relative;line-height:1.5;block-size:100%;font-size:0.9375em;font-size:clamp(0.77rem, 1vw, 0.9rem)}:host input,:host select,:host button{font-family:inherit;-webkit-appearance:none;appearance:none;font-size:inherit}:host a:focus,:host button:focus{outline:none}:host a:focus-visible,:host button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
 // the 'breakpoints' where different segments of content go into or out-of the burger / overflow menu
 const THRESHOLDBREAKS = {
@@ -194,7 +193,6 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.searchBarEl.style.height = '0px';
     };
     this.onSearchBarHidden = () => {
-      this.searchBarEl.removeEventListener('transitionend', this.onSearchBarHidden);
       this.searchBarEl.style.display = 'none';
     };
     this.onSearchInput = (ev) => {
@@ -685,12 +683,13 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (!this.searchBarEl)
       return;
     this.searchBarShown = true;
+    this.searchBarEl.removeEventListener('transitionend', this.onSearchBarHidden);
     this.searchBarEl.addEventListener('transitionend', this.onSearchBarShown);
     this.searchBarEl.style.display = 'block';
-    setTimeout(() => {
+    requestAnimationFrame(() => {
       const widgetHeight = Math.floor(this.searchBarEl.querySelector('.search-widget').scrollHeight) - 1;
       this.searchBarEl.style.height = widgetHeight.toString() + 'px';
-    }, 50);
+    });
   }
   // Algolia search
   autocompleteSnippet(hit) {
@@ -968,7 +967,7 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       (this.loggedInNavItms.length || this.hasLoggedinSlot) && (h("nav", { class: "nav-links", "aria-label": "Your user account links" }, h("nano-nav-item", { class: "nano-global-nav user-nav nano-global-nav-menu", closeOnBlur: false }, this.myAccountUser.name, h("nano-icon", { slot: "icon-end", name: "solid/chevron-right" }), h("div", { slot: "secondary" }, h("div", { class: "content" }, h("button", { class: "back-btn", onClick: this.subMenuClose }, h("nano-icon", { slot: "icon-end", name: "solid/chevron-left", "aria-label": "go back", role: "img" }), this.myAccountUser.name), !!this.myAccountUser?.small_avatar_url && (h("nano-global-nav-user-profile", { myAccountUser: this.myAccountUser, userProfileUrl: this.userProfileUrl })), h("div", { class: "content--sub" }, h("slot", { name: "loggedin", onSlotchange: this.assessSlottedContent }), this.loggedInNavItms.map((link) => {
       return (h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: link.address, target: link.target }, link.title)));
     }), h("nano-nav-item", { class: "nano-global-nav nano-global-nav-menu" }, h("a", { href: this.myAccData.urls.forgot_password +
-        this.ssoRedirect }, "Change Password")))))))), h("slot", { name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (h("div", { class: "login-btn logout-btn" }, h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), h("div", { class: "sticker-trigger" }), h("nano-sticker", { "auto-resize": "false", "break-point-max": "800", quietMode: { h: 600, w: 800 }, part: "sticker" }, h("div", { class: "bars", part: "bars" }, h("nav", { part: "main-bar", class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div) }, (this.hasPromotionSlot ||
+        this.ssoRedirect }, "Change Password")))))))), h("slot", { name: "promotion", onSlotchange: this.assessSlottedContent }), this.myAccData && this.myAccData.urls.logout && (h("div", { class: "login-btn logout-btn" }, h("a", { href: this.myAccData.urls.logout + this.ssoRedirect }, "Logout")))))), h("div", { class: "bars", part: "bars" }, h("nav", { part: "main-bar", class: "main-bar", "aria-label": "Main site navigation", tabindex: "-1", ref: (div) => (this.mainBarDiv = div) }, (this.hasPromotionSlot ||
       !!this.overflowSlotLen ||
       ((this.myAccData || !!this.iconSlotLen) &&
         this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.icon) ||
@@ -1021,7 +1020,7 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         'search-bar': true,
         show: this.searchBarShown,
       }, "aria-expanded": this.searchBarShown ? 'true' : 'false', role: "region", tabindex: "-1", ref: (div) => (this.searchBarEl = div), part: "search-bar" }, h("div", { class: "search-widget" }, this.showSearch && !!this.internalSearchIndeces.length && (h("div", null, searchWidget)), (!this.showSearch || !this.myAccData) &&
-      !!this.searchSlotLen && (h("slot", { name: "search", onSlotchange: this.assessSlottedContent }))))))), (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login ||
+      !!this.searchSlotLen && (h("slot", { name: "search", onSlotchange: this.assessSlottedContent })))))), (this.threshold < THRESHOLDLIMIT - THRESHOLDBREAKS.login ||
       this.menuFullScreen) && (h("div", { class: {
         mask: true,
         open: this.modalOpen,
@@ -1200,7 +1199,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["nano-global-nav", "nano-datalist", "nano-dropdown", "nano-global-nav-user-profile", "nano-icon", "nano-input", "nano-menu", "nano-nav-item", "nano-option", "nano-select", "nano-sticker"];
+  const components = ["nano-global-nav", "nano-datalist", "nano-dropdown", "nano-global-nav-user-profile", "nano-icon", "nano-input", "nano-menu", "nano-nav-item", "nano-option", "nano-select"];
   components.forEach(tagName => { switch (tagName) {
     case "nano-global-nav":
       if (!customElements.get(tagName)) {
@@ -1208,51 +1207,46 @@ function defineCustomElement$1() {
       }
       break;
     case "nano-datalist":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "nano-dropdown":
       if (!customElements.get(tagName)) {
         defineCustomElement$a();
       }
       break;
-    case "nano-global-nav-user-profile":
+    case "nano-dropdown":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }
       break;
-    case "nano-icon":
+    case "nano-global-nav-user-profile":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }
       break;
-    case "nano-input":
+    case "nano-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }
       break;
-    case "nano-menu":
+    case "nano-input":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }
       break;
-    case "nano-nav-item":
+    case "nano-menu":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }
       break;
-    case "nano-option":
+    case "nano-nav-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }
       break;
-    case "nano-select":
+    case "nano-option":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "nano-sticker":
+    case "nano-select":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }