npm - @nanoporetech-digital/components - Versions diffs - 2.1.4 → 2.3.0 - Mend

@nanoporetech-digital/components 2.1.4 → 2.3.0

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

Files changed (258) 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-e01adaa3.entry.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as o,h as i,e as r,g as s}from"./p-ab5813a7.js";import{P as e}from"./p-4b7cd30c.js";import"./p-289aa03f.js";const n=':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{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-width:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));-webkit-transform:translateY(10px) translateZ(0);transform:translateY(10px) translateZ(0);-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;-webkit-transition-delay:var(--hide-delay);transition-delay:var(--hide-delay);-webkit-transition-duration:var(--hide-duration);transition-duration:var(--hide-duration);-webkit-transition-timing-function:var(--hide-timing-function);transition-timing-function:var(--hide-timing-function);white-space:normal}.tooltip-arrow{content:"";position:absolute;width:0;height:0;color:black;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);pointer-events:none}.tooltip-positioner[data-popper-placement^=top] .tooltip{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transform:translateY(-10px) translateZ(0);transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{-webkit-transform-origin:top;transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{-webkit-transform-origin:right;transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{-webkit-transform-origin:left;transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:var(--show-delay);transition-delay:var(--show-delay);-webkit-transition-duration:var(--show-duration);transition-duration:var(--show-duration);-webkit-transition-timing-function:var(--show-timing-function);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{bottom:100%;left:calc(50% - 5px);border-bottom:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{top:100%;left:calc(50% - 5px);border-top:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{top:calc(50% - 5px);left:100%;border-left:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{top:auto;bottom:5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{top:calc(50% - 5px);right:100%;border-right:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{top:auto;bottom:5px}';let a=0;let p=class{constructor(i){t(this,i);this.nanoShow=o(this,"nanoShow",7);this.nanoAfterShow=o(this,"nanoAfterShow",7);this.nanoHide=o(this,"nanoHide",7);this.nanoAfterHide=o(this,"nanoAfterHide",7);this.componentId=`tooltip-${++a}`;this.isVisible=false;this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus";this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{this.target=this.getTarget()};this.handleTTSlotChange=()=>{const t=this.host.querySelector(`[id="${this.componentId}"]`)||this.host.shadowRoot.getElementById(this.componentId);Array.from(this.host.querySelectorAll('[slot="content"]')).filter((o=>o!==t)).forEach((o=>{t.appendChild(o)}))}}get target(){return this._target}set target(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-describedby")}t.setAttribute("aria-describedby",this.componentId);this._target=t}handleOpenChange(){this.open?this.show():this.hide()}async show(){if(this.isVisible){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;this.popover.show()}async hide(){if(!this.isVisible){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;this.popover.hide()}getTarget(){const t=[...Array.from(this.host.children)].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}componentDidLoad(){this.target=this.getTarget();this.popover=new e(this.target,this.tooltipPositioner);this.syncOptions();const t=this.host.shadowRoot.getElementById(this.componentId);t.slot="content";this.host.appendChild(t);this.handleTTSlotChange();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){this.popover.destroy()}render(){return i(r,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},i("slot",{onSlotchange:this.handleSlotChange}),!this.disabled&&i("div",{ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},i("div",{part:"base",ref:t=>this.tooltip=t,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{name:"content",onSlotchange:this.handleTTSlotChange},i("div",{id:this.componentId},this.content)),i("div",{class:"tooltip-arrow","data-popper-arrow":true}))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"]}}};p.style=n;export{p as nano_tooltip};
+//# sourceMappingURL=p-e01adaa3.entry.js.map

package/dist/nano-components/{p-17bf76c4.entry.js.map → p-e01adaa3.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"names":["tooltipCss","id","Tooltip","[object Object]","hostRef","this","componentId","isVisible","content","placement","disabled","distance","open","skidding","trigger","handleBlur","hasTrigger","hide","handleClick","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","target","getTarget","handleTTSlotChange","contentDiv","host","querySelector","shadowRoot","getElementById","Array","from","querySelectorAll","filter","elm","forEach","appendChild","_target","newTarget","removeAttribute","setAttribute","slShow","nanoShow","emit","defaultPrevented","popover","slHide","nanoHide","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","split","includes","setOptions","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","Popover","tooltipPositioner","syncOptions","ele","slot","hidden","destroy","h","Host","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onClick","onSlotchange","ref","class","part","tooltip--open","role","aria-hidden","name","data-popper-arrow"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/*\n @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n /\n:host {\n --max-width: 20rem;\n --hide-delay: 0s;\n --hide-duration: 0.125s;\n --hide-timing-function: ease;\n --show-delay: 0.125s;\n --show-duration: 0.125s;\n --show-timing-function: ease;\n\n / autoprefixer: ignore next /\n display: contents;\n}\n\n.tooltip {\n $self: &;\n\n max-width: var(--max-width);\n border-radius: #{$tooltip-border-radius};\n background-color: black;\n font-size: #{$tooltip-fontsize};\n line-height: 1.5;\n color: white;\n opacity: 0;\n padding: #{$tooltip-padding};\n transform: translateY(10px) translateZ(0);\n transform-origin: bottom;\n transition-property: opacity, transform;\n transition-delay: var(--hide-delay);\n transition-duration: var(--hide-duration);\n transition-timing-function: var(--hide-timing-function);\n white-space: normal;\n\n &-arrow {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n color: black;\n transition: 0.2s ease transform;\n }\n\n &-positioner {\n position: absolute;\n z-index: #{$layer-index-tooltip};\n pointer-events: none;\n\n &[data-popper-placement^='top'] #{$self} {\n transform-origin: bottom;\n transform: translateY(-10px) translateZ(0);\n }\n\n &[data-popper-placement^='bottom'] #{$self} {\n transform-origin: top;\n }\n\n &[data-popper-placement^='left'] #{$self} {\n transform-origin: right;\n }\n\n &[data-popper-placement^='right'] #{$self} {\n transform-origin: left;\n }\n\n &.popover-visible #{$self} {\n opacity: 1;\n transform: none;\n transition-delay: var(--show-delay);\n transition-duration: var(--show-duration);\n transition-timing-function: var(--show-timing-function);\n }\n\n // Arrow + bottom\n &[data-popper-placement^='bottom'] #{$self}-arrow {\n bottom: 100%;\n left: calc(50% - #{$tooltip-arrow-size});\n border-bottom: #{$tooltip-arrow-size} solid;\n border-left: #{$tooltip-arrow-size} solid transparent;\n border-right: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='bottom-start'] #{$self}-arrow {\n left: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='bottom-end'] #{$self}-arrow {\n right: #{$tooltip-arrow-offset};\n left: auto;\n }\n\n // Arrow + top\n &[data-popper-placement^='top'] #{$self}-arrow {\n top: 100%;\n left: calc(50% - #{$tooltip-arrow-size});\n border-top: #{$tooltip-arrow-size} solid;\n border-left: #{$tooltip-arrow-size} solid transparent;\n border-right: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='top-start'] #{$self}-arrow {\n left: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='top-end'] #{$self}-arrow {\n right: #{$tooltip-arrow-offset};\n left: auto;\n }\n\n // Arrow + left\n &[data-popper-placement^='left'] #{$self}-arrow {\n top: calc(50% - #{$tooltip-arrow-size});\n left: 100%;\n border-left: #{$tooltip-arrow-size} solid;\n border-top: #{$tooltip-arrow-size} solid transparent;\n border-bottom: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='left-start'] #{$self}-arrow {\n top: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='left-end'] #{$self}-arrow {\n top: auto;\n bottom: #{$tooltip-arrow-offset};\n }\n\n // Arrow + right\n &[data-popper-placement^='right'] #{$self}-arrow {\n top: calc(50% - #{$tooltip-arrow-size});\n right: 100%;\n border-right: #{$tooltip-arrow-size} solid;\n border-top: #{$tooltip-arrow-size} solid transparent;\n border-bottom: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='right-start'] #{$self}-arrow {\n top: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='right-end'] #{$self}-arrow {\n top: auto;\n bottom: #{$tooltip-arrow-offset};\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n Watch,\n h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/\n Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n /\n@Component({\n tag: 'nano-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip {\n private componentId = `tooltip-${++id}`;\n private isVisible = false;\n private popover: Popover;\n private tooltipPositioner: HTMLElement;\n private tooltip: any;\n\n private _target: HTMLElement;\n private get target() {\n return this._target;\n }\n private set target(newTarget) {\n if (newTarget !== this._target && this._target) {\n this._target.removeAttribute('aria-describedby');\n }\n newTarget.setAttribute('aria-describedby', this.componentId);\n this._target = newTarget;\n }\n\n @Element() host: HTMLNanoTooltipElement;\n\n /* The tooltip's content. Alternatively, you can use the content slot. /\n @Prop() content = '';\n\n /\n The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n /\n @Prop() placement:\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end' = 'top';\n\n /* Set to true to disable the tooltip so it won't show when triggered. /\n @Prop() disabled = false;\n\n /* The distance in pixels from which to offset the tooltip away from its target. /\n @Prop() distance = 10;\n\n /* Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* The distance in pixels from which to offset the tooltip along its target. /\n @Prop() skidding = 0;\n\n /\n Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n /\n @Prop() trigger: string = 'hover focus';\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n // Events\n\n /* Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the tooltip has shown and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the tooltip has hidden and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n // Public methods\n\n /* Shows the tooltip. /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible) {\n return;\n }\n\n const slShow = this.nanoShow.emit();\n if (slShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n this.popover.show();\n }\n\n /* Hides the tooltip. */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const slHide = this.nanoHide.emit();\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.isVisible = false;\n this.open = false;\n this.popover.hide();\n }\n\n // Private methods\n\n private getTarget() {\n // Get the first child that isn't a <style> or content slot\n const target = [...Array.from(this.host.children)].find(\n (el) =>\n el.tagName.toLowerCase() !== 'style' &&\n el.getAttribute('slot') !== 'content'\n ) as HTMLElement;\n\n if (!target) {\n throw new Error('Invalid tooltip target: no child element was found.');\n }\n\n return target;\n }\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n private syncOptions() {\n this.popover.setOptions({\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.tooltip,\n onAfterHide: () => this.nanoAfterHide.emit(),\n onAfterShow: () => this.nanoAfterShow.emit(),\n });\n }\n\n // Event Handlers\n\n private handleBlur = () => {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n };\n\n private handleClick = () => {\n if (this.hasTrigger('click')) {\n this.open ? this.hide() : this.show();\n }\n };\n\n private handleFocus = () => {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n };\n\n private handleMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.show();\n }\n };\n\n private handleMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.target = this.getTarget();\n };\n\n private handleTTSlotChange = () => {\n const contentDiv =\n this.host.querySelector(`[id=\"${this.componentId}\"]`) \|\|\n this.host.shadowRoot.getElementById(this.componentId);\n Array.from(this.host.querySelectorAll('[slot=\"content\"]'))\n .filter((elm) => elm !== contentDiv)\n .forEach((elm) => {\n contentDiv.appendChild(elm);\n });\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n this.target = this.getTarget();\n this.popover = new Popover(this.target, this.tooltipPositioner);\n this.syncOptions();\n\n const ele = this.host.shadowRoot.getElementById(this.componentId);\n ele.slot = 'content';\n this.host.appendChild(ele);\n this.handleTTSlotChange();\n\n // Show on init if open\n this.tooltipPositioner.hidden = !this.open;\n if (this.open) {\n this.show();\n }\n }\n\n componentDidUpdate() {\n this.syncOptions();\n }\n\n disconnectedCallback() {\n this.popover.destroy();\n }\n\n render() {\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n onMouseOver={this.handleMouseOver}\n onMouseOut={this.handleMouseOut}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n >\n <slot onSlotchange={this.handleSlotChange} />\n\n {!this.disabled && (\n <div\n ref={(el) => (this.tooltipPositioner = el)}\n class=\"tooltip-positioner\"\n >\n <div\n part=\"base\"\n ref={(el) => (this.tooltip = el)}\n class={{\n tooltip: true,\n 'tooltip--open': this.open,\n }}\n role=\"tooltip\"\n aria-hidden={this.open ? 'false' : 'true'}\n >\n <slot name=\"content\" onSlotchange={this.handleTTSlotChange}>\n <div id={this.componentId}>{this.content}</div>\n </slot>\n <div class=\"tooltip-arrow\" data-popper-arrow></div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"names":["tooltipCss","id","Tooltip","[object Object]","hostRef","this","componentId","isVisible","content","placement","disabled","distance","open","skidding","trigger","handleBlur","hasTrigger","hide","handleClick","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","target","getTarget","handleTTSlotChange","contentDiv","host","querySelector","shadowRoot","getElementById","Array","from","querySelectorAll","filter","elm","forEach","appendChild","_target","newTarget","removeAttribute","setAttribute","slShow","nanoShow","emit","defaultPrevented","popover","slHide","nanoHide","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","split","includes","setOptions","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","Popover","tooltipPositioner","syncOptions","ele","slot","hidden","destroy","h","Host","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onClick","onSlotchange","ref","class","part","tooltip--open","role","aria-hidden","name","data-popper-arrow"],"mappings":";;;4HAAA,MAAMA,EAAa,4zHCanB,IAAIC,EAAK,MAYIC,EAAO,MALpBC,YAAAC,6KAMUC,KAAAC,YAAc,aAAaL,IAC3BI,KAAAE,UAAY,MAoBZF,KAAAG,QAAU,GAMVH,KAAAI,UAYS,MAGTJ,KAAAK,SAAW,MAGXL,KAAAM,SAAW,GAGqBN,KAAAO,KAAO,MAGvCP,KAAAQ,SAAW,EAOXR,KAAAS,QAAkB,cAgGlBT,KAAAU,WAAa,KACnB,GAAIV,KAAKW,WAAW,SAAU,CAC5BX,KAAKY,SAIDZ,KAAAa,YAAc,KACpB,GAAIb,KAAKW,WAAW,SAAU,CAC5BX,KAAKO,KAAOP,KAAKY,OAASZ,KAAKc,SAI3Bd,KAAAe,YAAc,KACpB,GAAIf,KAAKW,WAAW,SAAU,CAC5BX,KAAKc,SAIDd,KAAAgB,cAAiBC,IAEvB,GAAIjB,KAAKO,MAAQU,EAAMC,MAAQ,SAAU,CACvCD,EAAME,kBACNnB,KAAKY,SAIDZ,KAAAoB,gBAAkB,KACxB,GAAIpB,KAAKW,WAAW,SAAU,CAC5BX,KAAKc,SAIDd,KAAAqB,eAAiB,KACvB,GAAIrB,KAAKW,WAAW,SAAU,CAC5BX,KAAKY,SAIDZ,KAAAsB,iBAAmB,KACzBtB,KAAKuB,OAASvB,KAAKwB,aAGbxB,KAAAyB,mBAAqB,KAC3B,MAAMC,EACJ1B,KAAK2B,KAAKC,cAAc,QAAQ5B,KAAKC,kBACrCD,KAAK2B,KAAKE,WAAWC,eAAe9B,KAAKC,aAC3C8B,MAAMC,KAAKhC,KAAK2B,KAAKM,iBAAiB,qBACnCC,QAAQC,GAAQA,IAAQT,IACxBU,SAASD,IACRT,EAAWW,YAAYF,OApM7BZ,aACE,OAAOvB,KAAKsC,QAEdf,WAAmBgB,GACjB,GAAIA,IAAcvC,KAAKsC,SAAWtC,KAAKsC,QAAS,CAC9CtC,KAAKsC,QAAQE,gBAAgB,oBAE/BD,EAAUE,aAAa,mBAAoBzC,KAAKC,aAChDD,KAAKsC,QAAUC,EA8CjBzC,mBACEE,KAAKO,KAAOP,KAAKc,OAASd,KAAKY,OAqBjCd,aAEE,GAAIE,KAAKE,UAAW,CAClB,OAGF,MAAMwC,EAAS1C,KAAK2C,SAASC,OAC7B,GAAIF,EAAOG,iBAAkB,CAC3B7C,KAAKO,KAAO,MACZ,OAGFP,KAAKE,UAAY,KACjBF,KAAKO,KAAO,KACZP,KAAK8C,QAAQhC,OAKfhB,aAEE,IAAKE,KAAKE,UAAW,CACnB,OAGF,MAAM6C,EAAS/C,KAAKgD,SAASJ,OAC7B,GAAIG,EAAOF,iBAAkB,CAC3B7C,KAAKO,KAAO,KACZ,OAGFP,KAAKE,UAAY,MACjBF,KAAKO,KAAO,MACZP,KAAK8C,QAAQlC,OAKPd,YAEN,MAAMyB,EAAS,IAAIQ,MAAMC,KAAKhC,KAAK2B,KAAKsB,WAAWC,MAChDC,GACCA,EAAGC,QAAQC,gBAAkB,SAC7BF,EAAGG,aAAa,UAAY,YAGhC,IAAK/B,EAAQ,CACX,MAAM,IAAIgC,MAAM,uDAGlB,OAAOhC,EAGDzB,WAAW0D,GACjB,MAAMC,EAAWzD,KAAKS,QAAQiD,MAAM,KACpC,OAAOD,EAASE,SAASH,GAGnB1D,cACNE,KAAK8C,QAAQc,WAAW,CACtBxD,UAAWJ,KAAKI,UAChBE,SAAUN,KAAKM,SACfE,SAAUR,KAAKQ,SACfqD,kBAAmB7D,KAAK8D,QACxBC,YAAa,IAAM/D,KAAKgE,cAAcpB,OACtCqB,YAAa,IAAMjE,KAAKkE,cAActB,SA6D1C9C,mBACEE,KAAKuB,OAASvB,KAAKwB,YACnBxB,KAAK8C,QAAU,IAAIqB,EAAQnE,KAAKuB,OAAQvB,KAAKoE,mBAC7CpE,KAAKqE,cAEL,MAAMC,EAAMtE,KAAK2B,KAAKE,WAAWC,eAAe9B,KAAKC,aACrDqE,EAAIC,KAAO,UACXvE,KAAK2B,KAAKU,YAAYiC,GACtBtE,KAAKyB,qBAGLzB,KAAKoE,kBAAkBI,QAAUxE,KAAKO,KACtC,GAAIP,KAAKO,KAAM,CACbP,KAAKc,QAIThB,qBACEE,KAAKqE,cAGPvE,uBACEE,KAAK8C,QAAQ2B,UAGf3E,SACE,OACE4E,EAACC,EAAI,CACHC,UAAW5E,KAAKgB,cAChB6D,YAAa7E,KAAKoB,gBAClB0D,WAAY9E,KAAKqB,eACjB0D,OAAQ/E,KAAKU,WACbsE,QAAShF,KAAKe,YACdkE,QAASjF,KAAKa,aAEd6D,EAAA,OAAA,CAAMQ,aAAclF,KAAKsB,oBAEvBtB,KAAKK,UACLqE,EAAA,MAAA,CACES,IAAMhC,GAAQnD,KAAKoE,kBAAoBjB,EACvCiC,MAAM,sBAENV,EAAA,MAAA,CACEW,KAAK,OACLF,IAAMhC,GAAQnD,KAAK8D,QAAUX,EAC7BiC,MAAO,CACLtB,QAAS,KACTwB,gBAAiBtF,KAAKO,MAExBgF,KAAK,UAASC,cACDxF,KAAKO,KAAO,QAAU,QAEnCmE,EAAA,OAAA,CAAMe,KAAK,UAAUP,aAAclF,KAAKyB,oBACtCiD,EAAA,MAAA,CAAK9E,GAAII,KAAKC,aAAcD,KAAKG,UAEnCuE,EAAA,MAAA,CAAKU,MAAM,gBAAeM,oBAAA","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/*\n @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n /\n:host {\n --max-width: 20rem;\n --hide-delay: 0s;\n --hide-duration: 0.125s;\n --hide-timing-function: ease;\n --show-delay: 0.125s;\n --show-duration: 0.125s;\n --show-timing-function: ease;\n\n / autoprefixer: ignore next /\n display: contents;\n}\n\n.tooltip {\n $self: &;\n\n max-width: var(--max-width);\n border-radius: #{$tooltip-border-radius};\n background-color: black;\n font-size: #{$tooltip-fontsize};\n line-height: 1.5;\n color: white;\n opacity: 0;\n padding: #{$tooltip-padding};\n transform: translateY(10px) translateZ(0);\n transform-origin: bottom;\n transition-property: opacity, transform;\n transition-delay: var(--hide-delay);\n transition-duration: var(--hide-duration);\n transition-timing-function: var(--hide-timing-function);\n white-space: normal;\n\n &-arrow {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n color: black;\n transition: 0.2s ease transform;\n }\n\n &-positioner {\n position: absolute;\n z-index: #{$layer-index-tooltip};\n pointer-events: none;\n\n &[data-popper-placement^='top'] #{$self} {\n transform-origin: bottom;\n transform: translateY(-10px) translateZ(0);\n }\n\n &[data-popper-placement^='bottom'] #{$self} {\n transform-origin: top;\n }\n\n &[data-popper-placement^='left'] #{$self} {\n transform-origin: right;\n }\n\n &[data-popper-placement^='right'] #{$self} {\n transform-origin: left;\n }\n\n &.popover-visible #{$self} {\n opacity: 1;\n transform: none;\n transition-delay: var(--show-delay);\n transition-duration: var(--show-duration);\n transition-timing-function: var(--show-timing-function);\n }\n\n // Arrow + bottom\n &[data-popper-placement^='bottom'] #{$self}-arrow {\n bottom: 100%;\n left: calc(50% - #{$tooltip-arrow-size});\n border-bottom: #{$tooltip-arrow-size} solid;\n border-left: #{$tooltip-arrow-size} solid transparent;\n border-right: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='bottom-start'] #{$self}-arrow {\n left: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='bottom-end'] #{$self}-arrow {\n right: #{$tooltip-arrow-offset};\n left: auto;\n }\n\n // Arrow + top\n &[data-popper-placement^='top'] #{$self}-arrow {\n top: 100%;\n left: calc(50% - #{$tooltip-arrow-size});\n border-top: #{$tooltip-arrow-size} solid;\n border-left: #{$tooltip-arrow-size} solid transparent;\n border-right: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='top-start'] #{$self}-arrow {\n left: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='top-end'] #{$self}-arrow {\n right: #{$tooltip-arrow-offset};\n left: auto;\n }\n\n // Arrow + left\n &[data-popper-placement^='left'] #{$self}-arrow {\n top: calc(50% - #{$tooltip-arrow-size});\n left: 100%;\n border-left: #{$tooltip-arrow-size} solid;\n border-top: #{$tooltip-arrow-size} solid transparent;\n border-bottom: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='left-start'] #{$self}-arrow {\n top: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='left-end'] #{$self}-arrow {\n top: auto;\n bottom: #{$tooltip-arrow-offset};\n }\n\n // Arrow + right\n &[data-popper-placement^='right'] #{$self}-arrow {\n top: calc(50% - #{$tooltip-arrow-size});\n right: 100%;\n border-right: #{$tooltip-arrow-size} solid;\n border-top: #{$tooltip-arrow-size} solid transparent;\n border-bottom: #{$tooltip-arrow-size} solid transparent;\n }\n\n &[data-popper-placement='right-start'] #{$self}-arrow {\n top: #{$tooltip-arrow-offset};\n }\n\n &[data-popper-placement='right-end'] #{$self}-arrow {\n top: auto;\n bottom: #{$tooltip-arrow-offset};\n }\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n Watch,\n h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/\n Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n /\n@Component({\n tag: 'nano-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip {\n private componentId = `tooltip-${++id}`;\n private isVisible = false;\n private popover: Popover;\n private tooltipPositioner: HTMLElement;\n private tooltip: any;\n\n private _target: HTMLElement;\n private get target() {\n return this._target;\n }\n private set target(newTarget) {\n if (newTarget !== this._target && this._target) {\n this._target.removeAttribute('aria-describedby');\n }\n newTarget.setAttribute('aria-describedby', this.componentId);\n this._target = newTarget;\n }\n\n @Element() host: HTMLNanoTooltipElement;\n\n /* The tooltip's content. Alternatively, you can use the content slot. /\n @Prop() content = '';\n\n /\n The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n /\n @Prop() placement:\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end' = 'top';\n\n /* Set to true to disable the tooltip so it won't show when triggered. /\n @Prop() disabled = false;\n\n /* The distance in pixels from which to offset the tooltip away from its target. /\n @Prop() distance = 10;\n\n /* Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* The distance in pixels from which to offset the tooltip along its target. /\n @Prop() skidding = 0;\n\n /\n Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n /\n @Prop() trigger: string = 'hover focus';\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n // Events\n\n /* Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the tooltip has shown and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the tooltip has hidden and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n // Public methods\n\n /* Shows the tooltip. /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible) {\n return;\n }\n\n const slShow = this.nanoShow.emit();\n if (slShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n this.popover.show();\n }\n\n /* Hides the tooltip. */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const slHide = this.nanoHide.emit();\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.isVisible = false;\n this.open = false;\n this.popover.hide();\n }\n\n // Private methods\n\n private getTarget() {\n // Get the first child that isn't a <style> or content slot\n const target = [...Array.from(this.host.children)].find(\n (el) =>\n el.tagName.toLowerCase() !== 'style' &&\n el.getAttribute('slot') !== 'content'\n ) as HTMLElement;\n\n if (!target) {\n throw new Error('Invalid tooltip target: no child element was found.');\n }\n\n return target;\n }\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n private syncOptions() {\n this.popover.setOptions({\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.tooltip,\n onAfterHide: () => this.nanoAfterHide.emit(),\n onAfterShow: () => this.nanoAfterShow.emit(),\n });\n }\n\n // Event Handlers\n\n private handleBlur = () => {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n };\n\n private handleClick = () => {\n if (this.hasTrigger('click')) {\n this.open ? this.hide() : this.show();\n }\n };\n\n private handleFocus = () => {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n };\n\n private handleMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.show();\n }\n };\n\n private handleMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.target = this.getTarget();\n };\n\n private handleTTSlotChange = () => {\n const contentDiv =\n this.host.querySelector(`[id=\"${this.componentId}\"]`) \|\|\n this.host.shadowRoot.getElementById(this.componentId);\n Array.from(this.host.querySelectorAll('[slot=\"content\"]'))\n .filter((elm) => elm !== contentDiv)\n .forEach((elm) => {\n contentDiv.appendChild(elm);\n });\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n this.target = this.getTarget();\n this.popover = new Popover(this.target, this.tooltipPositioner);\n this.syncOptions();\n\n const ele = this.host.shadowRoot.getElementById(this.componentId);\n ele.slot = 'content';\n this.host.appendChild(ele);\n this.handleTTSlotChange();\n\n // Show on init if open\n this.tooltipPositioner.hidden = !this.open;\n if (this.open) {\n this.show();\n }\n }\n\n componentDidUpdate() {\n this.syncOptions();\n }\n\n disconnectedCallback() {\n this.popover.destroy();\n }\n\n render() {\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n onMouseOver={this.handleMouseOver}\n onMouseOut={this.handleMouseOut}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n >\n <slot onSlotchange={this.handleSlotChange} />\n\n {!this.disabled && (\n <div\n ref={(el) => (this.tooltipPositioner = el)}\n class=\"tooltip-positioner\"\n >\n <div\n part=\"base\"\n ref={(el) => (this.tooltip = el)}\n class={{\n tooltip: true,\n 'tooltip--open': this.open,\n }}\n role=\"tooltip\"\n aria-hidden={this.open ? 'false' : 'true'}\n >\n <slot name=\"content\" onSlotchange={this.handleTTSlotChange}>\n <div id={this.componentId}>{this.content}</div>\n </slot>\n <div class=\"tooltip-arrow\" data-popper-arrow></div>\n </div>\n </div>\n )}\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":"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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/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"]}