npm - @nanoporetech-digital/components - Versions diffs - 2.1.3 → 2.2.1 - Mend

@nanoporetech-digital/components 2.1.3 → 2.2.1

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 (199) hide show

package/dist/nano-components/p-d6569144.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/file-upload/file-upload.scss?tag=nano-file-upload&encapsulation=scoped","src/components/file-upload/file-upload.tsx"],"names":["fileUploadCss","fileInputIds","getDataTransfer","DataTransfer","_a","ClipboardEvent","clipboardData","_b","FileUpload","[object Object]","hostRef","this","fileInputId","canChangeFileList","removeFiles","errorMessage","isDragging","fileList","maxFileSize","maxFiles","placeholder","hideLabel","required","disabled","clearInput","showInlineError","validateOn","_invalid","onClearClick","value","onBlur","hasFocus","validate","nanoBlur","emit","onFocus","nanoFocus","ev","inputEl","setCustomValidity","error","validity","valid","validationMessage","forEach","fileItem","checkFileSize","file","size","checkFileType","type","accept","length","nanoValidate","isValid","originalEvent","onInvalid","preventDefault","onFileChoose","e","files","target","addNewFiles","onFileRemoveFileClick","push","closest","classList","remove","onFileRemoveAnim","filter","find","rmFile","onInputChange","nanoChange","onDragStop","stopPropagation","onDragStart","onDrop","dataTransfer","FileUploadInput","eleType","listId","labelId","moreId","hasHelperSlot","h","class","htmlFor","id","onDragEnd","onDragLeave","onDragEnter","onDragOver","label","hasLabelSlot","name","tabindex","onClick","aria-labelledby","multiple","undefined","ref","input","publicInputEl","onChange","onReset","tabIndex","button","dropArea","map","key","onAnimationEnd","_","content","placement","iconName","href","location","arrToFileList","setTimeout","invalid","Array","from","objectURL","URL","createObjectURL","val","validateFirst","focus","Promise","resolve","message","composedPath","every","node","host","i","len","items","add","match","mo","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","querySelectorAll","querySelector","newFiles","findFile","slotChangeObserver","Host","file-upload","file-upload--dragging","file-upload--focus","file-upload--invalid"],"mappings":"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","sourcesContent":["@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 #{$color-blue--faded};\n * @prop --drop-text: Default value #{$color-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-height: 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: #{$color-blue--faded};\n --drop-text: #{darken($color-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, 1em);\n --btn-padding-end: var(--nano-btn-padding-end, 1em);\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 display: none;\n }\n\n &__error,\n &__help,\n &__more,\n &__label {\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__more {\n height: 1em;\n\n @include margin(\n calc(var(--label-padding) / 2),\n 0,\n var(--label-padding),\n 3px\n );\n\n position: relative;\n }\n\n &__error,\n &__help {\n top: 0;\n left: 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 width: 100%;\n display: inline-block;\n }\n\n &__drop-area {\n background-color: var(--drop-bg);\n color: var(--drop-text);\n min-height: 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: #{$color-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: rgba(var(--drop-border-tint), 0.5);\n border-style: dashed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 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: rgba(var(--drop-border--invalid), 1);\n }\n\n .file-upload--dragging & {\n top: 5px;\n bottom: 5px;\n left: 5px;\n right: 5px;\n }\n }\n\n span {\n color: rgba(var(--drop-border-tint), 1);\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 top: -4px;\n }\n\n &-item {\n width: 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: white;\n border-radius: 5px;\n padding: 5px 5px;\n margin-right: 2px;\n display: block;\n width: 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: white;\n border-radius: 5px;\n margin: 2px;\n }\n\n .list-error {\n --color: rgba(var(--drop-border--invalid), 1);\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-width: 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 @include margin(0);\n\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 width: 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 @include margin(0, 0, 0, 0.4rem);\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-width: 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 {\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 = null;\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 this.nanoChange.emit({ value: this.value, files: this.files });\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 @Watch('maxFiles')\n @Watch('maxFileSize')\n @Watch('capture')\n @Watch('accept')\n @Watch('required')\n @Watch('disabled')\n @Watch('validateOn')\n @Watch('fileList')\n protected shouldValidate() {\n if (!this.inputEl) return;\n setTimeout(() => {\n if (this.validateOn === 'dirty') this.validate();\n }, 20);\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 /* 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. @readonly /\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\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 emptry 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) this.validate();\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 }\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 // Private methods\n\n private onClearClick = () => {\n this.value = '';\n };\n\n private onBlur = () => {\n this.hasFocus = false;\n if (this.validateOn === 'dirty') this.validate();\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 (var 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 = (ev?: Event) => {\n this.errorMessage = null;\n this.inputEl.setCustomValidity('');\n let error: string;\n\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n if (!this.inputEl.validity.valid) {\n if (this.showInlineError)\n this.errorMessage = 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 if (!this.errorMessage && error) this.errorMessage = error;\n fileItem.validationMessage = error;\n fileItem.valid = !error;\n });\n if (this.fileList.length > this.maxFiles)\n this.errorMessage = `Maxinum number of files exceeded (${this.maxFiles})`;\n }\n\n if (!!this.errorMessage) {\n this._invalid = true;\n this.inputEl.setCustomValidity(this.errorMessage);\n } else {\n this._invalid = false;\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 this.validate(ev);\n if (this.showInlineError) ev.preventDefault();\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 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 <div\n class={`file-upload__label ${\n this.hideLabel \|\| eleType !== 'drop' ? 'visually-hide' : ''\n }`}\n >\n {this.label && this.label}\n {!this.label && this.hasLabelSlot && <slot name=\"label\" />}\n </div>\n {eleType === 'drop' && (\n <div class=\"file-upload__drop-area\">\n Drap and drop or <span>browse</span>\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 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 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 ? (\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"]}
1	+ {"version":3,"sources":["src/components/file-upload/file-upload.scss?tag=nano-file-upload&encapsulation=scoped","src/components/file-upload/file-upload.tsx"],"names":["fileUploadCss","fileInputIds","getDataTransfer","DataTransfer","_a","ClipboardEvent","clipboardData","_b","FileUpload","[object Object]","hostRef","this","fileInputId","canChangeFileList","removeFiles","errorMessage","isDragging","fileList","maxFileSize","maxFiles","placeholder","hideLabel","required","disabled","clearInput","showInlineError","validateOn","_invalid","onClearClick","value","onBlur","hasFocus","validate","nanoBlur","emit","onFocus","nanoFocus","ev","inputEl","setCustomValidity","error","validity","valid","validationMessage","forEach","fileItem","checkFileSize","file","size","checkFileType","type","accept","length","nanoValidate","isValid","originalEvent","onInvalid","preventDefault","onFileChoose","e","files","target","addNewFiles","onFileRemoveFileClick","push","closest","classList","remove","onFileRemoveAnim","filter","find","rmFile","onInputChange","nanoChange","onDragStop","stopPropagation","onDragStart","onDrop","dataTransfer","FileUploadInput","eleType","listId","labelId","moreId","hasHelperSlot","h","class","htmlFor","id","onDragEnd","onDragLeave","onDragEnter","onDragOver","label","hasLabelSlot","name","tabindex","onClick","aria-labelledby","multiple","undefined","ref","input","publicInputEl","onChange","onReset","tabIndex","button","dropArea","map","key","onAnimationEnd","_","content","placement","iconName","href","location","arrToFileList","setTimeout","invalid","Array","from","objectURL","URL","createObjectURL","val","validateFirst","focus","Promise","resolve","message","composedPath","every","node","host","i","len","items","add","match","mo","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","querySelectorAll","querySelector","newFiles","findFile","slotChangeObserver","Host","file-upload","file-upload--dragging","file-upload--focus","file-upload--invalid"],"mappings":"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","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-height: 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, 1em);\n --btn-padding-end: var(--nano-btn-padding-end, 1em);\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 display: none;\n }\n\n &__error,\n &__help,\n &__more,\n &__label {\n display: block;\n width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__more {\n height: 1em;\n\n @include margin(\n calc(var(--label-padding) / 2),\n 0,\n var(--label-padding),\n 3px\n );\n\n position: relative;\n }\n\n &__error,\n &__help {\n top: 0;\n left: 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 width: 100%;\n display: inline-block;\n }\n\n &__drop-area {\n background-color: var(--drop-bg);\n color: var(--drop-text);\n min-height: 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: rgba(var(--drop-border-tint), 0.5);\n border-style: dashed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 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: rgba(var(--drop-border--invalid), 1);\n }\n\n .file-upload--dragging & {\n top: 5px;\n bottom: 5px;\n left: 5px;\n right: 5px;\n }\n }\n\n span {\n color: rgba(var(--drop-border-tint), 1);\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 top: -4px;\n }\n\n &-item {\n width: 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: white;\n border-radius: 5px;\n padding: 5px 5px;\n margin-right: 2px;\n display: block;\n width: 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: white;\n border-radius: 5px;\n margin: 2px;\n }\n\n .list-error {\n --color: rgba(var(--drop-border--invalid), 1);\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-width: 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 @include margin(0);\n\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 width: 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 @include margin(0, 0, 0, 0.4rem);\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-width: 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 {\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 = null;\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 this.nanoChange.emit({ value: this.value, files: this.files });\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 @Watch('maxFiles')\n @Watch('maxFileSize')\n @Watch('capture')\n @Watch('accept')\n @Watch('required')\n @Watch('disabled')\n @Watch('validateOn')\n @Watch('fileList')\n protected shouldValidate() {\n if (!this.inputEl) return;\n setTimeout(() => {\n if (this.validateOn === 'dirty') this.validate();\n }, 20);\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 /* 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. @readonly /\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\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 emptry 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) this.validate();\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 }\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 // Private methods\n\n private onClearClick = () => {\n this.value = '';\n };\n\n private onBlur = () => {\n this.hasFocus = false;\n if (this.validateOn === 'dirty') this.validate();\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 (var 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 = (ev?: Event) => {\n this.errorMessage = null;\n this.inputEl.setCustomValidity('');\n let error: string;\n\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n if (!this.inputEl.validity.valid) {\n if (this.showInlineError)\n this.errorMessage = 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 if (!this.errorMessage && error) this.errorMessage = error;\n fileItem.validationMessage = error;\n fileItem.valid = !error;\n });\n if (this.fileList.length > this.maxFiles)\n this.errorMessage = `Maxinum number of files exceeded (${this.maxFiles})`;\n }\n\n if (!!this.errorMessage) {\n this._invalid = true;\n this.inputEl.setCustomValidity(this.errorMessage);\n } else {\n this._invalid = false;\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 this.validate(ev);\n if (this.showInlineError) ev.preventDefault();\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 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 <div\n class={`file-upload__label ${\n this.hideLabel \|\| eleType !== 'drop' ? 'visually-hide' : ''\n }`}\n >\n {this.label && this.label}\n {!this.label && this.hasLabelSlot && <slot name=\"label\" />}\n </div>\n {eleType === 'drop' && (\n <div class=\"file-upload__drop-area\">\n Drap and drop or <span>browse</span>\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 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 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 ? (\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"]}

package/dist/nano-components/p-d9f2dda5.entry.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as i,c as t,h as e,e as s,g as n}from"./p-ab5813a7.js";import{c as o,r}from"./p-289aa03f.js";import{d as h}from"./p-1da5f8df.js";function a(i,t){function e(e){const s=i.getBoundingClientRect();const n=i.ownerDocument.defaultView;const o=s.left+n.pageXOffset;const r=s.top+n.pageYOffset;const h=e.pageX-o;const a=e.pageY-r;t(h,a)}function s(){document.removeEventListener("pointermove",e);document.removeEventListener("pointerup",s)}document.addEventListener("pointermove",e,{passive:true});document.addEventListener("pointerup",s)}const d=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--divider-width:12px;--divider-hit-area:14px;--min:0%;--max:100%;--background-color:#e4e6e8;--content-color:#918b86;display:-ms-grid;display:grid}.start,.end{overflow:hidden}.divider{-webkit-box-flex:0;-ms-flex:0 0 var(--divider-width);flex:0 0 var(--divider-width);display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--background-color);color:var(--content-color);z-index:1;font-size:0.8rem}.divider:focus{outline:none}:host(:not([disabled])) .divider:focus-visible{background-color:var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}:host([disabled]) .divider{cursor:not-allowed}:host(:not([vertical],[disabled])) .divider{cursor:col-resize}:host(:not([vertical])) .divider::after{display:-webkit-box;display:-ms-flexbox;display:flex;content:"";position:absolute;height:100%;left:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);width:var(--divider-hit-area)}:host([vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host([vertical]:not([disabled])) .divider{cursor:row-resize}:host([vertical]) .divider::after{content:"";position:absolute;width:100%;top:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);height:var(--divider-hit-area)}';let l=class{constructor(e){i(this,e);this.nanoReposition=t(this,"nanoReposition",7);this.nanoDragging=t(this,"nanoDragging",7);this.isAnimating=false;this.didLoad=false;this._shouldAnimate=true;this.vertical=false;this.disabled=false;this.snapThreshold=12;this.animationDuration=.6;this.handleDrag=i=>{if(this.disabled){return}i.preventDefault();a(this.host,((i,t)=>{let e=this.vertical?t:i;this.nanoDragging.emit(e);if(this.primary==="end"){e=this.size-e}if(this.snap){const i=this.snap.split(" ");i.forEach((i=>{let t;if(i.endsWith("%")){t=this.size*(parseFloat(i)/100)}else{t=parseFloat(i)}if(e>=t-this.snapThreshold&&e<=t+this.snapThreshold){e=t}}))}this.shouldAnimate=false;this.position=o(this.pixelsToPercentage(e),0,100);r((()=>this.shouldAnimate=true))}))};this.handleKeyDown=i=>{if(this.disabled){return}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(i.key)){let t=this.position;const e=(i.shiftKey?10:1)*(this.primary==="end"?-1:1);i.preventDefault();if(i.key==="ArrowLeft"&&!this.vertical||i.key==="ArrowUp"&&this.vertical){t-=e}if(i.key==="ArrowRight"&&!this.vertical||i.key==="ArrowDown"&&this.vertical){t+=e}if(i.key==="Home"){t=this.primary==="end"?100:0}if(i.key==="End"){t=this.primary==="end"?0:100}this.shouldAnimate=false;this.position=o(t,0,100);r((()=>this.shouldAnimate=true))}};this.handleResize=()=>{if(!this.didLoad||this.isAnimating)return;if(this.primary){this.shouldAnimate=false;this.position=this.pixelsToPercentage(this.cachedPositionInPixels);r((()=>this.shouldAnimate=true))}};this.handlePositionChange=h(this.handlePositionChange.bind(this),100)}get size(){const{width:i,height:t}=this.host.getBoundingClientRect();return this.vertical?t:i}get shouldAnimate(){return this.didLoad&&this._shouldAnimate}set shouldAnimate(i){this._shouldAnimate=i}get position(){return this._position}set position(i){i=Math.min(Math.max(i,0),100);if(isNaN(i)||i===this._position)return;if(this.shouldAnimate&&this.animationDuration>0&&!isNaN(this.position)){this.animatePosition(i);return}this._position=i}handlePositionChange(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.positionInPixels=this.percentageToPixels(this.position);this.nanoReposition.emit()}handlePositionInPixelsChange(){this.position=this.pixelsToPercentage(this.positionInPixels)}animatePosition(i){if(this.isAnimating)return;const t=this.animationDuration;const e=60;const s=this.position;const n=i-s;let o=s;let h=0;function a(i,t,e,s){if((i/=s/2)<1)return e/2*i*i+t;else return-e/2*(--i*(i-2)-1)+t}const d=()=>{h+=1/e;o=a(h,s,n,t);if(i>s&&o>=i||i<s&&o<=i){this.position=i;this.shouldAnimate=true;this.isAnimating=false;return}this.position=o;r(d)};this.shouldAnimate=false;this.isAnimating=true;r(d)}percentageToPixels(i){return this.size*(i/100)}pixelsToPercentage(i){return i/this.size*100}attachRO(){this.detachRO();this.ro=new ResizeObserver((()=>this.handleResize()));this.ro.observe(this.host)}detachRO(){if(!this.ro)return;this.ro.unobserve(this.host);this.ro=undefined}componentDidLoad(){if(this.positionInPixels)this.handlePositionInPixelsChange();setTimeout((()=>this.didLoad=true))}connectedCallback(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.attachRO()}disconnectedCallback(){this.detachRO()}componentDidRender(){r((()=>{if(typeof this.position==="undefined"){this.position=50}}))}render(){if(typeof this.position==="undefined")return;const i={};const t=this.vertical?"gridTemplateRows":"gridTemplateColumns";const n=`\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;const o="auto";if(this.primary==="end"){i[t]=`${o} var(--divider-width) ${n}`}else{i[t]=`${n} var(--divider-width) ${o}`}return e(s,{style:i},e("div",{part:"panel start",class:"start"},e("slot",{name:"start"})),e("div",{part:"divider",class:"divider",tabindex:this.disabled?undefined:"0",role:"separator","aria-label":"Resize",onKeyDown:this.handleKeyDown,onMouseDown:this.handleDrag,onTouchStart:this.handleDrag},e("slot",{name:"handle"},!this.disabled&&this.vertical?e("nano-icon",{slot:"handle",name:"solid/grip-lines"}):e("nano-icon",{slot:"handle",name:"solid/grip-lines-vertical"}))),e("div",{part:"panel end",class:"end"},e("slot",{name:"end"})))}get host(){return n(this)}static get watchers(){return{position:["handlePositionChange"],positionInPixels:["handlePositionInPixelsChange"]}}};l.style=d;export{l as nano_split_pane};
+//# sourceMappingURL=p-d9f2dda5.entry.js.map

package/dist/nano-components/p-d9f2dda5.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/utils/drag.ts","src/components/split-pane/split-pane.scss?tag=nano-split-pane&encapsulation=shadow","src/components/split-pane/split-pane.tsx"],"names":["drag","container","onMove","move","pointerEvent","dims","getBoundingClientRect","defaultView","ownerDocument","offsetX","left","pageXOffset","offsetY","top","pageYOffset","x","pageX","y","pageY","stop","document","removeEventListener","addEventListener","passive","splitPaneCss","SplitPane","[object Object]","hostRef","this","isAnimating","didLoad","_shouldAnimate","vertical","disabled","snapThreshold","animationDuration","handleDrag","e","preventDefault","host","newPositionInPixels","nanoDragging","emit","primary","size","snap","snaps","split","forEach","value","snapPoint","endsWith","parseFloat","shouldAnimate","position","clamp","pixelsToPercentage","raf","handleKeyDown","event","includes","key","newPosition","incr","shiftKey","handleResize","cachedPositionInPixels","handlePositionChange","debounce","bind","width","height","sa","_position","pos","Math","min","max","isNaN","animatePosition","percentageToPixels","positionInPixels","nanoReposition","end","duration","fps","start","distance","time","easeInOutQuad","t","s","d","go","detachRO","ro","ResizeObserver","observe","unobserve","undefined","handlePositionInPixelsChange","setTimeout","attachRO","styles","gridTemplate","secondary","h","Host","style","part","class","name","tabindex","role","aria-label","onKeyDown","onMouseDown","onTouchStart","slot"],"mappings":"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","sourcesContent":["export function drag(\n container: HTMLElement,\n onMove: (x: number, y: number) => void\n) {\n function move(pointerEvent: PointerEvent) {\n const dims = container.getBoundingClientRect();\n const defaultView = container.ownerDocument.defaultView!;\n const offsetX = dims.left + defaultView.pageXOffset;\n const offsetY = dims.top + defaultView.pageYOffset;\n const x = pointerEvent.pageX - offsetX;\n const y = pointerEvent.pageY - offsetY;\n\n onMove(x, y);\n }\n\n function stop() {\n document.removeEventListener('pointermove', move);\n document.removeEventListener('pointerup', stop);\n }\n\n document.addEventListener('pointermove', move, { passive: true });\n document.addEventListener('pointerup', stop);\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /**\n * @prop --divider-width: The width of the visible divider. Default 4px.\n * @prop --divider-hit-area: The invisible region around the divider where dragging can occur. This is\n * usually wider than the divider to facilitate easier dragging. Default 12px.\n * @prop --min: The minimum allowed size of the primary panel. Default 0.\n * @prop --max: The maximum allowed size of the primary panel. Default 100%.\n * @prop --background-color: Handle background. Default #{map.get($colors, lightgrey)}.\n * @prop --content-color: Handle color. Default #{map.get($colors, dimgrey)}.\n */\n --divider-width: 12px;\n --divider-hit-area: 14px;\n --min: 0%;\n --max: 100%;\n --background-color: #{map.get($colors, lightgrey)};\n --content-color: #{map.get($colors, dimgrey)};\n\n display: grid;\n}\n\n.start,\n.end {\n overflow: hidden;\n}\n\n.divider {\n flex: 0 0 var(--divider-width);\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n background-color: var(--background-color);\n color: var(--content-color);\n z-index: 1;\n font-size: 0.8rem;\n}\n\n.divider:focus {\n outline: none;\n}\n\n:host(:not([disabled])) .divider:focus-visible {\n background-color: #{$control-focus-color};\n}\n\n:host([disabled]) .divider {\n cursor: not-allowed;\n}\n\n/* Horizontal */\n:host(:not([vertical], [disabled])) .divider {\n cursor: col-resize;\n}\n\n:host(:not([vertical])) .divider::after {\n display: flex;\n content: '';\n position: absolute;\n height: 100%;\n left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n width: var(--divider-hit-area);\n}\n\n/* Vertical */\n:host([vertical]) {\n flex-direction: column;\n}\n\n:host([vertical]:not([disabled])) .divider {\n cursor: row-resize;\n}\n\n:host([vertical]) .divider::after {\n content: '';\n position: absolute;\n width: 100%;\n top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n height: var(--divider-hit-area);\n}\n","import {\n Prop,\n Component,\n Watch,\n Event,\n EventEmitter,\n ComponentInterface,\n Element,\n Host,\n h,\n} from '@stencil/core';\nimport { clamp, raf, debounce } from '../../utils';\nimport { drag } from '../../utils/drag';\n\n/**\n * Split panes display two adjacent panels, allowing the user to reposition them.\n *\n * @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n *\n * @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n */\n@Component({\n tag: 'nano-split-pane',\n styleUrl: 'split-pane.scss',\n shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n @Element() host: HTMLNanoSplitPaneElement;\n private cachedPositionInPixels: number;\n private ro: ResizeObserver;\n private isAnimating = false;\n private didLoad = false;\n\n private get size() {\n const { width, height } = this.host.getBoundingClientRect();\n return this.vertical ? height : width;\n }\n\n private get shouldAnimate() {\n return this.didLoad && this._shouldAnimate;\n }\n private set shouldAnimate(sa: boolean) {\n this._shouldAnimate = sa;\n }\n private _shouldAnimate: boolean = true;\n\n constructor() {\n this.handlePositionChange = debounce(\n this.handlePositionChange.bind(this),\n 100\n );\n }\n\n /**\n * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n * container's initial size.\n */\n @Prop()\n get position() {\n return this._position;\n }\n set position(pos: number) {\n // override too high / low\n pos = Math.min(Math.max(pos, 0), 100);\n if (isNaN(pos) || pos === this._position) return;\n\n if (\n this.shouldAnimate &&\n this.animationDuration > 0 &&\n !isNaN(this.position)\n ) {\n this.animatePosition(pos);\n return;\n }\n this._position = pos;\n }\n private _position: number;\n\n // eslint-disable-next-line @stencil/no-unused-watch\n @Watch('position')\n handlePositionChange() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.positionInPixels = this.percentageToPixels(this.position);\n this.nanoReposition.emit();\n }\n\n /**\n * The current position of the divider from the primary panel's edge in pixels.\n */\n @Prop({ mutable: true }) positionInPixels: number;\n\n @Watch('positionInPixels')\n handlePositionInPixelsChange() {\n this.position = this.pixelsToPercentage(this.positionInPixels);\n }\n\n /** Draws the split panel in a vertical orientation with the start and end panels stacked. */\n @Prop({ reflect: true }) vertical = false;\n\n /** Disables resizing. Note that the position may still change as a result of resizing the host element. */\n @Prop({ reflect: true }) disabled = false;\n\n /**\n * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n * host element is resized.\n */\n @Prop() primary?: 'start' | 'end';\n\n /**\n * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n * `\"100px 50%\"`.\n */\n @Prop() snap?: string;\n\n /** How close the divider must be to a snap point until snapping occurs. */\n @Prop() snapThreshold = 12;\n\n /** When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. */\n @Prop() animationDuration = 0.6;\n\n /** Emitted when the divider's position changes. */\n @Event() nanoReposition: EventEmitter;\n\n /** Emitted when the divider is being dragged. */\n @Event() nanoDragging: EventEmitter<number>;\n\n // Private logic\n\n private animatePosition(end: number) {\n if (this.isAnimating) return;\n\n const duration = this.animationDuration; // seconds\n const fps = 60;\n const start = this.position;\n const distance = end - start;\n\n let position = start;\n let time = 0;\n\n function easeInOutQuad(t: number, s: number, e: number, d: number) {\n if ((t /= d / 2) < 1) return (e / 2) * t * t + s;\n else return (-e / 2) * (--t * (t - 2) - 1) + s;\n }\n\n const go = () => {\n time += 1 / fps;\n position = easeInOutQuad(time, start, distance, duration);\n\n if (\n (end > start && position >= end) ||\n (end < start && position <= end)\n ) {\n this.position = end;\n this.shouldAnimate = true;\n this.isAnimating = false;\n return;\n }\n this.position = position;\n raf(go);\n };\n\n this.shouldAnimate = false;\n this.isAnimating = true;\n raf(go);\n }\n\n private percentageToPixels(value: number) {\n return this.size * (value / 100);\n }\n\n private pixelsToPercentage(value: number) {\n return (value / this.size) * 100;\n }\n\n private attachRO() {\n this.detachRO();\n this.ro = new ResizeObserver(() => this.handleResize());\n this.ro.observe(this.host);\n }\n\n private detachRO() {\n if (!this.ro) return;\n this.ro.unobserve(this.host);\n this.ro = undefined;\n }\n\n // Event handlers\n\n private handleDrag = (e: Event) => {\n if (this.disabled) {\n return;\n }\n\n // Prevent text selection when dragging\n e.preventDefault();\n\n drag(this.host, (x, y) => {\n let newPositionInPixels = this.vertical ? y : x;\n\n this.nanoDragging.emit(newPositionInPixels);\n\n // Flip for end panels\n if (this.primary === 'end') {\n newPositionInPixels = this.size - newPositionInPixels;\n }\n\n // Check snap points\n if (this.snap) {\n const snaps = this.snap.split(' ');\n\n snaps.forEach((value) => {\n let snapPoint: number;\n\n if (value.endsWith('%')) {\n snapPoint = this.size * (parseFloat(value) / 100);\n } else {\n snapPoint = parseFloat(value);\n }\n\n if (\n newPositionInPixels >= snapPoint - this.snapThreshold &&\n newPositionInPixels <= snapPoint + this.snapThreshold\n ) {\n newPositionInPixels = snapPoint;\n }\n });\n }\n this.shouldAnimate = false;\n this.position = clamp(\n this.pixelsToPercentage(newPositionInPixels),\n 0,\n 100\n );\n raf(() => (this.shouldAnimate = true));\n });\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) {\n return;\n }\n\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n let newPosition = this.position;\n const incr =\n (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n event.preventDefault();\n\n if (\n (event.key === 'ArrowLeft' && !this.vertical) ||\n (event.key === 'ArrowUp' && this.vertical)\n ) {\n newPosition -= incr;\n }\n\n if (\n (event.key === 'ArrowRight' && !this.vertical) ||\n (event.key === 'ArrowDown' && this.vertical)\n ) {\n newPosition += incr;\n }\n\n if (event.key === 'Home') {\n newPosition = this.primary === 'end' ? 100 : 0;\n }\n\n if (event.key === 'End') {\n newPosition = this.primary === 'end' ? 0 : 100;\n }\n\n this.shouldAnimate = false;\n\n this.position = clamp(newPosition, 0, 100);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n private handleResize = () => {\n if (!this.didLoad || this.isAnimating) return;\n\n // Resize when a primary panel is set\n if (this.primary) {\n this.shouldAnimate = false;\n this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n raf(() => (this.shouldAnimate = true));\n }\n };\n\n componentDidLoad(): void {\n if (this.positionInPixels) this.handlePositionInPixelsChange();\n setTimeout(() => (this.didLoad = true));\n }\n\n connectedCallback() {\n this.cachedPositionInPixels = this.percentageToPixels(this.position);\n this.attachRO();\n }\n\n disconnectedCallback() {\n this.detachRO();\n }\n\n componentDidRender(): void {\n // bit hacky ... because we use getter / setter for position, there's a render *before* `position` is passed in via attribute\n // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n // so - wait a render, see if there's a position passed in via attribute, *then* set default if not\n raf(() => {\n if (typeof this.position === 'undefined') {\n this.position = 50;\n }\n });\n }\n\n render() {\n if (typeof this.position === 'undefined') return;\n const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n {};\n const gridTemplate = this.vertical\n ? 'gridTemplateRows'\n : 'gridTemplateColumns';\n const primary = `\n clamp(\n 0%,\n clamp(\n var(--min),\n ${this.position}% - var(--divider-width) / 2,\n var(--max)\n ),\n calc(100% - var(--divider-width))\n )\n `;\n const secondary = 'auto';\n\n if (this.primary === 'end') {\n styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n } else {\n styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n }\n\n return (\n <Host style={styles}>\n <div part=\"panel start\" class=\"start\">\n <slot name=\"start\"></slot>\n </div>\n <div\n part=\"divider\"\n class=\"divider\"\n tabindex={this.disabled ? undefined : '0'}\n role=\"separator\"\n aria-label=\"Resize\"\n onKeyDown={this.handleKeyDown}\n onMouseDown={this.handleDrag}\n onTouchStart={this.handleDrag}\n >\n <slot name=\"handle\">\n {!this.disabled && this.vertical ? (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n ) : (\n <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n )}\n </slot>\n </div>\n <div part=\"panel end\" class=\"end\">\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/nano-components/p-e11bd40d.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.tsx"],"names":["detailsCss","Details","[object Object]","hostRef","this","slideId","slideIds","stateChanging","isLoading","label","open","noHandle","iconRotation","onKeyDown","ev","key","onMouseDown","show","hide","nanoClosed","emit","displayTransition","contentEl","then","style","height","nanoOpened","contentArea","scrollHeight","readTask","writeTask","ro","ResizeObserver","resize","observe","hasStartSlot","el","querySelector","hasEndSlot","setTimeout","attachRO","mo","MutationObserver","childList","subtree","attributes","disconnect","h","Host","class","Object","assign","createColorClasses","color","loaded","aria-controls","aria-expanded","display","transform","name","ref","div","tabindex","id"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --padding: Default to 1em;\n\n * @prop --btn-padding: Defaults to var(--padding);\n * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{$color-offwhite});\n\n * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n * @prop --content-bg-color: Defaults to transparent;\n * @prop --content-text-color: Defaults to #455556;\n * @prop --content-transition: Defaults to height .2s ease-out;\n\n * @prop --border-width: Defaults to none;\n * @prop --border-color: Defaults to none;\n * @prop --border-style: Defaults to none;\n * @prop --border-radius: Defaults to none;\n * @prop --box-shadow: Defaults to none;\n * @prop --focus-style: Defaults to #{$control-focus-style}\n /\n\n @include text-inherit();\n\n --padding: 1em;\n --btn-padding: var(--padding);\n --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n --btn-bg-color--hover: var(--nano-color-tint, #{$color-offwhite});\n --btn-text-color: var(--nano-color-base, #455556);\n --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n --content-bg-color: transparent;\n --content-text-color: #455556;\n --content-transition: height 0.2s ease-out;\n --border-width: none;\n --border-color: none;\n --border-style: none;\n --border-radius: none;\n --box-shadow: none;\n --focus-style: #{$control-focus-style};\n\n display: block;\n border-style: var(--border-style);\n border-width: var(--border-width-dims);\n border-color: var(--border-color);\n border-radius: var(--border-radius-dims);\n box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n .open .content {\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n }\n}\n\n:host(:first-of-type) {\n --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n --border-radius-dims: var(--border-radius);\n --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-text-color--open:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n --btn-text-color--hover:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n}\n\nbutton {\n @include input-cover;\n\n padding: var(--btn-padding);\n text-align: inherit;\n position: relative;\n font-size: 1em;\n margin: 0;\n transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n display: flex;\n align-items: center;\n background: var(--btn-bg-color);\n color: var(--btn-text-color);\n border-radius: var(--border-radius-dims);\n\n &:focus {\n box-shadow: var(--focus-style);\n outline: none;\n position: relative;\n z-index: 1;\n }\n\n :hover & {\n background: var(--btn-bg-color--hover);\n color: var(--btn-text-color--hover);\n }\n\n .open & {\n background: var(--btn-bg-color--open);\n color: var(--btn-text-color--open);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .label {\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n flex: 1;\n display: inline-block;\n }\n\n .icon {\n line-height: 0;\n flex-direction: column;\n justify-content: center;\n display: inline-block;\n color: currentColor;\n transition: 0.3s ease transform;\n transform-origin: center;\n\n &--start {\n @include margin(0, var(--padding), 0, 0);\n }\n\n &--end {\n @include margin(0, 0, 0, var(--padding));\n }\n\n ::slotted(nano-icon) {\n --color: 'currentColor';\n }\n }\n}\n\n.content {\n color: var(--content-text-color);\n background: var(--content-bg-color);\n height: 0;\n overflow: hidden;\n transition: 0.2s ease border-radius;\n outline: none;\n\n .loaded & {\n transition: var(--content-transition), 0.2s ease border-radius;\n }\n\n > {\n opacity: 0;\n transition: opacity 0.2s ease-out;\n\n .open & {\n opacity: 1;\n }\n }\n\n &__area {\n padding: var(--padding);\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n h,\n Element,\n Watch,\n Host,\n State,\n writeTask,\n readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils';\n\n/*\n A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n /\n/\n @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n /\n@Component({\n tag: 'nano-details',\n styleUrl: 'details.scss',\n shadow: true,\n})\nexport class Details {\n private hasStartSlot: boolean;\n private hasEndSlot: boolean;\n private slideId = `nano-details-${slideIds++}`;\n private mo?: MutationObserver;\n private ro?: ResizeObserver;\n private contentArea: HTMLDivElement;\n private stateChanging: boolean = false;\n\n @State() isLoading = true;\n\n @Element() private el: HTMLNanoDetailsElement;\n\n private contentEl: HTMLElement;\n\n /\n Button / handle text to be used if no complex markup required.\n * Otherwise use label slot.\n /\n @Prop() label: string = '';\n\n /\n Should item be open on load\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Have no handle - you will need to control the hiding / showing of content with script\n /\n @Prop() noHandle: boolean = false;\n\n /\n Icon slot rotation amount (degrees) on open\n /\n @Prop() iconRotation: number = 90;\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Emitted when the component opens.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n /\n @Event() nanoOpened: EventEmitter;\n\n /\n Emitted when the component closes.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoClosed: EventEmitter;\n\n @Watch('open')\n toggleClick() {\n this.stateChanging = true;\n if (this.open) this.show();\n else this.hide();\n }\n\n private onKeyDown = (ev: KeyboardEvent) => {\n switch (ev.key) {\n case 'Enter':\n case ' ':\n this.open = !this.open;\n break;\n }\n };\n\n private onMouseDown = () => {\n if (this.stateChanging) return;\n this.open = !this.open;\n };\n\n private hide() {\n this.nanoClosed.emit(this.open);\n displayTransition(this.contentEl, 'is-shown', false).then(\n () => (this.stateChanging = false)\n );\n this.contentEl.style.height = '0px';\n }\n\n private show() {\n this.nanoOpened.emit();\n displayTransition(this.contentEl, 'is-shown', true).then(() => {\n this.stateChanging = false;\n });\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n }\n\n private resize() {\n if (\n !this.open \|\|\n !this.contentArea \|\|\n !this.contentEl \|\|\n this.stateChanging\n )\n return;\n readTask(() => {\n if (this.contentArea.scrollHeight > 0) {\n writeTask(() => {\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n });\n }\n });\n }\n\n private attachRO() {\n if (this.ro \|\| !this.contentArea) return;\n\n const ro = (this.ro = new ResizeObserver(() => this.resize()));\n ro.observe(this.contentArea);\n }\n\n componentWillLoad() {\n this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n setTimeout(() => {\n this.isLoading = false;\n }, 100);\n }\n\n componentDidLoad() {\n if (this.open) {\n // disable animation on start\n setTimeout(() => {\n this.show();\n }, 0);\n }\n this.attachRO();\n }\n\n connectedCallback() {\n const mo = (this.mo = new MutationObserver(() => this.resize()));\n mo.observe(this.el, { childList: true, subtree: true, attributes: false });\n this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <div\n class={{\n open: this.open,\n loaded: !this.isLoading,\n }}\n >\n <button\n onKeyDown={this.onKeyDown}\n onMouseDown={this.onMouseDown}\n aria-controls={this.slideId}\n aria-expanded={this.open ? 'true' : 'false'}\n style={{ display: this.noHandle ? 'none' : '' }}\n >\n {this.hasStartSlot ? (\n <span\n class=\"icon icon--start\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-start\" />\n </span>\n ) : (\n ''\n )}\n <div class=\"label\">\n {this.label ? this.label : <slot name=\"label\" />}\n </div>\n {this.hasEndSlot ? (\n <span\n class=\"icon icon--end\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-end\" />\n </span>\n ) : (\n ''\n )}\n </button>\n <div\n class=\"content\"\n ref={(div) => (this.contentEl = div)}\n tabindex=\"-1\"\n id={this.slideId}\n >\n <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\nlet slideIds = 0;\n"]}
1	+ {"version":3,"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.tsx"],"names":["detailsCss","Details","[object Object]","hostRef","this","slideId","slideIds","stateChanging","isLoading","label","open","noHandle","iconRotation","onKeyDown","ev","key","onMouseDown","show","hide","nanoClosed","emit","displayTransition","contentEl","then","style","height","nanoOpened","contentArea","scrollHeight","readTask","writeTask","ro","ResizeObserver","resize","observe","hasStartSlot","el","querySelector","hasEndSlot","setTimeout","attachRO","mo","MutationObserver","childList","subtree","attributes","disconnect","h","Host","class","Object","assign","createColorClasses","color","loaded","aria-controls","aria-expanded","display","transform","name","ref","div","tabindex","id"],"mappings":";;;qLAAA,MAAMA,EAAa,+wKCgCNC,EAAO,MALpBC,YAAAC,2FAQUC,KAAAC,QAAU,gBAAgBC,MAI1BF,KAAAG,cAAyB,MAExBH,KAAAI,UAAY,KAUbJ,KAAAK,MAAgB,GAKgBL,KAAAM,KAAgB,MAKhDN,KAAAO,SAAoB,MAKpBP,KAAAQ,aAAuB,GA0BvBR,KAAAS,UAAaC,IACnB,OAAQA,EAAGC,KACT,IAAK,QACL,IAAK,IACHX,KAAKM,MAAQN,KAAKM,KAClB,QAIEN,KAAAY,YAAc,KACpB,GAAIZ,KAAKG,cAAe,OACxBH,KAAKM,MAAQN,KAAKM,MAjBpBR,cACEE,KAAKG,cAAgB,KACrB,GAAIH,KAAKM,KAAMN,KAAKa,YACfb,KAAKc,OAiBJhB,OACNE,KAAKe,WAAWC,KAAKhB,KAAKM,MAC1BW,EAAkBjB,KAAKkB,UAAW,WAAY,OAAOC,MACnD,IAAOnB,KAAKG,cAAgB,QAE9BH,KAAKkB,UAAUE,MAAMC,OAAS,MAGxBvB,OACNE,KAAKsB,WAAWN,OAChBC,EAAkBjB,KAAKkB,UAAW,WAAY,MAAMC,MAAK,KACvDnB,KAAKG,cAAgB,SAEvBH,KAAKkB,UAAUE,MAAMC,OAASrB,KAAKuB,YAAYC,aAAe,KAGxD1B,SACN,IACGE,KAAKM,OACLN,KAAKuB,cACLvB,KAAKkB,WACNlB,KAAKG,cAEL,OACFsB,GAAS,KACP,GAAIzB,KAAKuB,YAAYC,aAAe,EAAG,CACrCE,GAAU,KACR1B,KAAKkB,UAAUE,MAAMC,OAASrB,KAAKuB,YAAYC,aAAe,YAM9D1B,WACN,GAAIE,KAAK2B,KAAO3B,KAAKuB,YAAa,OAElC,MAAMI,EAAM3B,KAAK2B,GAAK,IAAIC,GAAe,IAAM5B,KAAK6B,WACpDF,EAAGG,QAAQ9B,KAAKuB,aAGlBzB,oBACEE,KAAK+B,eAAiB/B,KAAKgC,GAAGC,cAAc,uBAC5CjC,KAAKkC,aAAelC,KAAKgC,GAAGC,cAAc,qBAC1CE,YAAW,KACTnC,KAAKI,UAAY,QAChB,KAGLN,mBACE,GAAIE,KAAKM,KAAM,CAEb6B,YAAW,KACTnC,KAAKa,SACJ,GAELb,KAAKoC,WAGPtC,oBACE,MAAMuC,EAAMrC,KAAKqC,GAAK,IAAIC,kBAAiB,IAAMtC,KAAK6B,WACtDQ,EAAGP,QAAQ9B,KAAKgC,GAAI,CAAEO,UAAW,KAAMC,QAAS,KAAMC,WAAY,QAClEzC,KAAKoC,WAGPtC,uBACE,GAAIE,KAAKqC,GAAIrC,KAAKqC,GAAGK,aACrB,GAAI1C,KAAK2B,GAAI3B,KAAK2B,GAAGe,aAGvB5C,SACE,OACE6C,EAACC,EAAI,CAACC,MAAKC,OAAAC,OAAA,GAAOC,EAAmBhD,KAAKiD,SACxCN,EAAA,MAAA,CACEE,MAAO,CACLvC,KAAMN,KAAKM,KACX4C,QAASlD,KAAKI,YAGhBuC,EAAA,SAAA,CACElC,UAAWT,KAAKS,UAChBG,YAAaZ,KAAKY,YAAWuC,gBACdnD,KAAKC,QAAOmD,gBACZpD,KAAKM,KAAO,OAAS,QACpCc,MAAO,CAAEiC,QAASrD,KAAKO,SAAW,OAAS,KAE1CP,KAAK+B,aACJY,EAAA,OAAA,CACEE,MAAM,mBACNzB,MAAO,CACLkC,UAAWtD,KAAKM,KAAO,UAAUN,KAAKQ,mBAAqB,KAG7DmC,EAAA,OAAA,CAAMY,KAAK,gBACN,GAITZ,EAAA,MAAA,CAAKE,MAAM,SACR7C,KAAKK,MAAQL,KAAKK,MAAQsC,EAAA,OAAA,CAAMY,KAAK,WAEvCvD,KAAKkC,WACJS,EAAA,OAAA,CACEE,MAAM,iBACNzB,MAAO,CACLkC,UAAWtD,KAAKM,KAAO,UAAUN,KAAKQ,mBAAqB,KAG7DmC,EAAA,OAAA,CAAMY,KAAK,cACN,IAKXZ,EAAA,MAAA,CACEE,MAAM,UACNW,IAAMC,GAASzD,KAAKkB,UAAYuC,EAChCC,SAAS,KACTC,GAAI3D,KAAKC,SAET0C,EAAA,MAAA,CAAKa,IAAMC,GAASzD,KAAKuB,YAAckC,EAAMZ,MAAM,iBACjDF,EAAA,OAAA,uFASd,IAAIzC,EAAW","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --padding: Default to 1em;\n\n * @prop --btn-padding: Defaults to var(--padding);\n * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get($colors, offwhite)});\n\n * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n * @prop --content-bg-color: Defaults to transparent;\n * @prop --content-text-color: Defaults to #455556;\n * @prop --content-transition: Defaults to height .2s ease-out;\n\n * @prop --border-width: Defaults to none;\n * @prop --border-color: Defaults to none;\n * @prop --border-style: Defaults to none;\n * @prop --border-radius: Defaults to none;\n * @prop --box-shadow: Defaults to none;\n * @prop --focus-style: Defaults to #{$control-focus-style}\n /\n\n @include text-inherit();\n\n --padding: 1em;\n --btn-padding: var(--padding);\n --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n --btn-bg-color--hover: var(--nano-color-tint, #{map.get($colors, offwhite)});\n --btn-text-color: var(--nano-color-base, #455556);\n --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n --content-bg-color: transparent;\n --content-text-color: #455556;\n --content-transition: height 0.2s ease-out;\n --border-width: none;\n --border-color: none;\n --border-style: none;\n --border-radius: none;\n --box-shadow: none;\n --focus-style: #{$control-focus-style};\n\n display: block;\n border-style: var(--border-style);\n border-width: var(--border-width-dims);\n border-color: var(--border-color);\n border-radius: var(--border-radius-dims);\n box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n .open .content {\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n }\n}\n\n:host(:first-of-type) {\n --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n --border-radius-dims: var(--border-radius);\n --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n --btn-text-color--open:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n --btn-text-color--hover:\n var(\n --nano-color-contrast,\n #{nano-color(primary, contrast)}\n );\n}\n\nbutton {\n @include input-cover;\n\n padding: var(--btn-padding);\n text-align: inherit;\n position: relative;\n font-size: 1em;\n margin: 0;\n transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n display: flex;\n align-items: center;\n background: var(--btn-bg-color);\n color: var(--btn-text-color);\n border-radius: var(--border-radius-dims);\n\n &:focus {\n box-shadow: var(--focus-style);\n outline: none;\n position: relative;\n z-index: 1;\n }\n\n :hover & {\n background: var(--btn-bg-color--hover);\n color: var(--btn-text-color--hover);\n }\n\n .open & {\n background: var(--btn-bg-color--open);\n color: var(--btn-text-color--open);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .label {\n width: 100%;\n max-width: 100%;\n max-height: 100%;\n flex: 1;\n display: inline-block;\n }\n\n .icon {\n line-height: 0;\n flex-direction: column;\n justify-content: center;\n display: inline-block;\n color: currentColor;\n transition: 0.3s ease transform;\n transform-origin: center;\n\n &--start {\n @include margin(0, var(--padding), 0, 0);\n }\n\n &--end {\n @include margin(0, 0, 0, var(--padding));\n }\n\n ::slotted(nano-icon) {\n --color: 'currentColor';\n }\n }\n}\n\n.content {\n color: var(--content-text-color);\n background: var(--content-bg-color);\n height: 0;\n overflow: hidden;\n transition: 0.2s ease border-radius;\n outline: none;\n\n .loaded & {\n transition: var(--content-transition), 0.2s ease border-radius;\n }\n\n > {\n opacity: 0;\n transition: opacity 0.2s ease-out;\n\n .open & {\n opacity: 1;\n }\n }\n\n &__area {\n padding: var(--padding);\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n Prop,\n h,\n Element,\n Watch,\n Host,\n State,\n writeTask,\n readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils';\n\n/*\n A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n /\n/\n @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n /\n@Component({\n tag: 'nano-details',\n styleUrl: 'details.scss',\n shadow: true,\n})\nexport class Details {\n private hasStartSlot: boolean;\n private hasEndSlot: boolean;\n private slideId = `nano-details-${slideIds++}`;\n private mo?: MutationObserver;\n private ro?: ResizeObserver;\n private contentArea: HTMLDivElement;\n private stateChanging: boolean = false;\n\n @State() isLoading = true;\n\n @Element() private el: HTMLNanoDetailsElement;\n\n private contentEl: HTMLElement;\n\n /\n Button / handle text to be used if no complex markup required.\n * Otherwise use label slot.\n /\n @Prop() label: string = '';\n\n /\n Should item be open on load\n /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /\n Have no handle - you will need to control the hiding / showing of content with script\n /\n @Prop() noHandle: boolean = false;\n\n /\n Icon slot rotation amount (degrees) on open\n /\n @Prop() iconRotation: number = 90;\n\n /\n Color to use from your application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Emitted when the component opens.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n /\n @Event() nanoOpened: EventEmitter;\n\n /\n Emitted when the component closes.\n * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n */\n @Event() nanoClosed: EventEmitter;\n\n @Watch('open')\n toggleClick() {\n this.stateChanging = true;\n if (this.open) this.show();\n else this.hide();\n }\n\n private onKeyDown = (ev: KeyboardEvent) => {\n switch (ev.key) {\n case 'Enter':\n case ' ':\n this.open = !this.open;\n break;\n }\n };\n\n private onMouseDown = () => {\n if (this.stateChanging) return;\n this.open = !this.open;\n };\n\n private hide() {\n this.nanoClosed.emit(this.open);\n displayTransition(this.contentEl, 'is-shown', false).then(\n () => (this.stateChanging = false)\n );\n this.contentEl.style.height = '0px';\n }\n\n private show() {\n this.nanoOpened.emit();\n displayTransition(this.contentEl, 'is-shown', true).then(() => {\n this.stateChanging = false;\n });\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n }\n\n private resize() {\n if (\n !this.open \|\|\n !this.contentArea \|\|\n !this.contentEl \|\|\n this.stateChanging\n )\n return;\n readTask(() => {\n if (this.contentArea.scrollHeight > 0) {\n writeTask(() => {\n this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n });\n }\n });\n }\n\n private attachRO() {\n if (this.ro \|\| !this.contentArea) return;\n\n const ro = (this.ro = new ResizeObserver(() => this.resize()));\n ro.observe(this.contentArea);\n }\n\n componentWillLoad() {\n this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n setTimeout(() => {\n this.isLoading = false;\n }, 100);\n }\n\n componentDidLoad() {\n if (this.open) {\n // disable animation on start\n setTimeout(() => {\n this.show();\n }, 0);\n }\n this.attachRO();\n }\n\n connectedCallback() {\n const mo = (this.mo = new MutationObserver(() => this.resize()));\n mo.observe(this.el, { childList: true, subtree: true, attributes: false });\n this.attachRO();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host class={{ ...createColorClasses(this.color) }}>\n <div\n class={{\n open: this.open,\n loaded: !this.isLoading,\n }}\n >\n <button\n onKeyDown={this.onKeyDown}\n onMouseDown={this.onMouseDown}\n aria-controls={this.slideId}\n aria-expanded={this.open ? 'true' : 'false'}\n style={{ display: this.noHandle ? 'none' : '' }}\n >\n {this.hasStartSlot ? (\n <span\n class=\"icon icon--start\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-start\" />\n </span>\n ) : (\n ''\n )}\n <div class=\"label\">\n {this.label ? this.label : <slot name=\"label\" />}\n </div>\n {this.hasEndSlot ? (\n <span\n class=\"icon icon--end\"\n style={{\n transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n }}\n >\n <slot name=\"icon-end\" />\n </span>\n ) : (\n ''\n )}\n </button>\n <div\n class=\"content\"\n ref={(div) => (this.contentEl = div)}\n tabindex=\"-1\"\n id={this.slideId}\n >\n <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n <slot />\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\nlet slideIds = 0;\n"]}

package/dist/nano-components/p-e15be516.system.entry.js.map CHANGED Viewed

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