npm - @nanoporetech-digital/components - Versions diffs - 3.0.0 → 3.1.0 - Mend

@nanoporetech-digital/components 3.0.0 → 3.1.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 (171) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["src/components/field-validator/field-validator.tsx"],"names":["FieldValidator","this","allFields","nanoFieldSelector","hasSetStore","internalValidate","handleStoreChange","async","key","newVal","found","find","field","getName","tagName","includes","type","storeToFields","fileStateEqual","value","validateOn","dirty","validateAllFields","_valid","activeForm","checkValidity","nanoPayloadChange","emit","_store","state","handleFieldChange","ev","nanoFields","target","_dirty","fieldsToStore","handlePlainFieldChange","plainFields","handleFormInvalid","preventDefault","submitted","submitForm","scrollToFirstInvalid","nanoInvalid","handleSubmit","e","[object Object]","userForm","_activeForm","form","removeEventListener","addEventListener","forEach","cbg","closest","valid","store","payload","showValidation","validationState","v","name","pf","nf","validationMessage","validityMessage","length","invalid","fields","f","push","Object","entries","val","validity","Promise","all","map","err","setFieldError","mo","MutationObserver","_entries","host","querySelector","setupFields","observe","childList","attributes","attributeFilter","subtree","getAttribute","Array","from","querySelectorAll","extraFieldSelector","filter","validateOnChange","fieldName","cbs","cb","checked","isArray","ff","files","init","currentArr","JSON","stringify","validation","res","msg","validityState","validityTarget","reduce","memo","validate","undefined","showError","setError","setCustomValidity","scrollToInvalid","setTimeout","invalidField","scrollIntoView","behavior","block","nanoSubmit","defaultPrevented","submit","createStore","requestAnimationFrame","attachSlotObserver","on","disconnect","reset","h","Host","ref"],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n Host,\n Element,\n ComponentInterface,\n State,\n Watch,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport { createStore, ObservableMap } from '@stencil/store';\nimport type {\n NanoFormEles,\n PlainFormEles,\n NanoFormEvent,\n ValidationState,\n ValidatorValueStore,\n PlainFormEvent,\n} from '../../interface';\n\n/*\n A toolbox for `nano-...` form fields and form validation.\n * - Easy to add validation across field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n * - Easy access to whole form and individual field validity states\n * - Easy access to form data payload\n * = Access to 2-way, data bound reactive store\n * - Scroll to invalid field on submit\n /\n@Component({\n tag: 'nano-field-validator',\n})\nexport class FieldValidator implements ComponentInterface {\n // Internal State\n\n @Element() host: HTMLNanoFieldValidatorElement;\n @State() submitted = false;\n @State() userForm: HTMLFormElement;\n @Watch('userForm')\n userFormChange() {\n if (!!this.userForm) this.activeForm = this.userForm;\n }\n\n private get activeForm() {\n return this._activeForm;\n }\n private set activeForm(form: HTMLFormElement) {\n // manages event listners on whatever form is used (slotted on created here)\n if (!form) return;\n\n if (this._activeForm) {\n this._activeForm.removeEventListener(\n 'invalid',\n this.handleFormInvalid,\n true\n );\n }\n form.addEventListener('invalid', this.handleFormInvalid, true);\n this._activeForm = form;\n }\n private _activeForm: HTMLFormElement;\n private mo: MutationObserver;\n private allFields: Array<NanoFormEles \| PlainFormEles> = [];\n private nanoFields: NanoFormEles[];\n private plainFields: PlainFormEles[];\n private nanoFieldSelector = `\n nano-input,\n nano-select,\n nano-file-upload,\n nano-date-input,\n nano-checkbox\n `;\n private hasSetStore = false;\n\n // annoyingly, whenever we attempt to `checkValidty()` it fires `invalid` events.\n // this is used to prevent infinite loops / multiple calls\n private internalValidate = false;\n\n // Public API\n\n /* When should the fields perform validation. Will override / sync all nested `nano-...` controls /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submitThenDirty';\n\n /* Sync up validateOn with all fields /\n @Watch('validateOn')\n validateOnChange() {\n this.nanoFields.forEach((field) => {\n if (field.tagName === 'NANO-CHECKBOX') {\n const cbg = field.closest('nano-checkbox-group');\n if (cbg) cbg.validateOn = this.validateOn;\n } else {\n (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).validateOn =\n this.validateOn;\n }\n });\n }\n\n /* Tries to scroll to the first invalid field on submit /\n @Prop() scrollToInvalid = true;\n\n /* Returns true if any nested fields have been changed @readonly /\n @Prop({ reflect: true })\n get dirty() {\n return this._dirty;\n }\n @State() _dirty = false;\n\n /* Returns true if all the nested fields are currently valid @readonly /\n @Prop({ reflect: true })\n get valid() {\n return this._valid;\n }\n @State() _valid: boolean;\n\n /* The current form state as a stencil store. /\n @Prop() get store(): ObservableMap<ValidatorValueStore> {\n return this._store;\n }\n @State() _store: ObservableMap<ValidatorValueStore>;\n\n /* The current form payload as a reactive proxy. @readonly /\n @Prop()\n get payload() {\n return this._store.state;\n }\n\n /* Returns true if validation errors will be displayed to the user. @readonly /\n @Prop()\n get showValidation() {\n return (this.validateOn === 'dirty' && this.dirty) \|\| this.submitted;\n }\n\n /* Get the current validation state of all form fields. @readonly\n * ```\n {\n fields: NanoFormEles[];\n valid: boolean;\n validityMessage: string;\n dirty: boolean;\n name: string \| number;\n value: any;\n }[]\n ```\n /\n @Prop()\n get validationState(): ValidationState[] {\n // TODO - migrate nano-fields away from using proprietary methods in a bid to be closer to the spec\n\n // this is big and ugly.\n // why? Cos' it must unify checking validity state for both\n // `nano-...` and plain form fields.\n const validationState: ValidationState[] = [];\n\n this.allFields.forEach(async (field) => {\n const found = validationState.find((v) => v.name === this.getName(field));\n let pf: PlainFormEles;\n let nf: NanoFormEles;\n\n if (found) {\n if ((field as PlainFormEles).validationMessage) {\n pf = field as PlainFormEles;\n found.validityMessage = pf.validationMessage.length\n ? pf.validationMessage\n : found.validityMessage;\n this.internalValidate = true;\n if (found.valid && !pf.checkValidity()) found.valid = false;\n this.internalValidate = false;\n } else if ((field as NanoFormEles).validityMessage) {\n nf = field as NanoFormEles;\n found.validityMessage = nf.validityMessage.length\n ? nf.validityMessage\n : nf.validityMessage;\n if (found.valid && nf.invalid) found.valid = false;\n }\n if (!found.fields.find((f) => f === field)) found.fields.push(field);\n }\n\n let valid: boolean;\n let validityMessage: string;\n\n if ((field as PlainFormEles).checkValidity) {\n pf = field as PlainFormEles;\n this.internalValidate = true;\n valid = pf.checkValidity();\n this.internalValidate = false;\n validityMessage = pf.validationMessage;\n } else {\n nf = field as NanoFormEles;\n valid = !nf.invalid;\n validityMessage = nf.validityMessage;\n }\n\n validationState.push({\n fields: [field],\n name: this.getName(field),\n value: this._store.state[this.getName(field)],\n dirty: false,\n valid,\n validityMessage,\n });\n });\n\n return validationState;\n }\n\n /* By default, `nano-field-validator` will also track all native form field elements.\n * You can add extra web-component form fields to listen to\n * (as long as they match the standard form field spec) by using the `fieldSelector` prop.\n /\n @Prop() extraFieldSelector: string = 'input, select, textarea';\n\n /* A validation callback method.\n * @param field - The field name currently being evaluated\n * @param value - The value of the field currently being evaluated\n * @param fields - an array of all currently observered form fields and values\n * @returns field names mapped to an object of status message and validity e.g.\n * ```js\n * {field1: {msg: `This is invalid!`}, field2: {msg: `This is valid!`, valid: true}}\n * ```\n /\n @Prop() validation: (\n field: string,\n value: string,\n fields: ValidatorValueStore\n ) => { [errorMsg: string]: { fields?: string[]; valid?: boolean } };\n\n /\n Sets the state of the form using an object of key / value pairs.\n * @param state - the state to load in the store\n /\n @Method()\n async setStore(state: ValidatorValueStore) {\n this.hasSetStore = true;\n Object.entries(state).forEach(([key, val]) => {\n this.store.state[key] = val;\n });\n }\n\n /\n Sets custom validity for all / some form fields.\n * @param validity - a validity object of `{fieldName: errorString}` pairs. Set as an empty string to clear the error.\n /\n @Method()\n async setCustomValidity(validity: { [key: string]: string }) {\n return await Promise.all(\n Object.entries(validity).map(async ([key, err]) => {\n const field = this.allFields.find((f) => this.getName(f) === key);\n if (!!field) await this.setFieldError(field, err);\n })\n );\n }\n\n /\n Clear all custom validation.\n * @returns a promise, resolved when all errors are cleared\n /\n @Method()\n async resetValidity() {\n return await Promise.all(\n this.allFields.map(async (field) => await this.setFieldError(field, ''))\n );\n }\n\n /* Fired whenever the payload changes /\n @Event() nanoPayloadChange: EventEmitter<ValidatorValueStore>;\n\n /\n Fired on valid form submission.\n * Note: if you wish to prevent a form from submitting, instead\n * of using / preventing the native `submit` event, use this event\n * ```js\n * ele.addEventListener('nanoSubmit', (e) => {\n * e.preventDefault()\n * })\n * ```\n /\n @Event() nanoSubmit: EventEmitter;\n\n /* Fire on invalid form submission attempt /\n @Event() nanoInvalid: EventEmitter;\n\n // private methods\n\n @Watch('extraFieldSelector')\n attachSlotObserver() {\n if (!!this.mo) return;\n const mo = (this.mo = new MutationObserver((_entries) => {\n const form = this.host.querySelector('form');\n if (form && form !== this.activeForm) this.activeForm = form;\n this.setupFields();\n }));\n mo.observe(this.host, {\n childList: true,\n attributes: true,\n attributeFilter: ['name'],\n subtree: true,\n });\n }\n\n /\n During spec tests, mockelement props aren't set - only attributes.\n * This irons out that kink\n * @param field\n * @returns the fields name prop or attr\n /\n private getName(field: PlainFormEles \| NanoFormEles) {\n return field.name \|\| field.getAttribute('name');\n }\n\n /* Checks for new `nano-...` fields and adds them to our watch array and value store /\n private setupFields() {\n let nanoFields = Array.from(\n this.host.querySelectorAll<NanoFormEles>(this.nanoFieldSelector)\n );\n\n let plainFields = Array.from(\n this.host.querySelectorAll<PlainFormEles>(this.extraFieldSelector)\n ).filter((e) => !e.closest(this.nanoFieldSelector));\n\n nanoFields = nanoFields.filter(\n (f) => !!this.getName(f) && !!this.getName(f).length\n );\n plainFields = plainFields.filter(\n (f) => !!this.getName(f) && !!this.getName(f).length\n );\n\n // do we have any currently un-watched fields?\n if (\n ![...nanoFields, ...plainFields].filter(\n (f) => !this.allFields.includes(f)\n ).length\n )\n return;\n\n // setup the initial store state / refresh on new fields\n this.nanoFields = nanoFields;\n this.plainFields = plainFields;\n this.allFields = [...nanoFields, ...plainFields];\n\n this.storeToFields(this.allFields);\n\n this.validateOnChange();\n this.fieldsToStore(this.allFields, true);\n this.nanoPayloadChange.emit(this._store.state);\n }\n\n private storeToFields(fields: Array<NanoFormEles \| PlainFormEles>) {\n fields.forEach((field) => {\n const fieldName = this.getName(field);\n if (\n !fieldName.length \|\|\n typeof this._store.state[fieldName] === 'undefined'\n )\n return;\n\n if (\n field.tagName === 'NANO-CHECKBOX' \|\|\n ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n ) {\n const cbs = this.allFields.filter(\n (f) => this.getName(field) === this.getName(f)\n ) as HTMLNanoCheckboxElement[];\n if (\n cbs[0].type === 'radio' \|\|\n cbs[0].type === 'segment' \|\|\n cbs[0].type === 'segment-pill'\n ) {\n // single radio type control\n cbs.forEach((cb) => {\n if (this._store.state[fieldName] === cb.value) cb.checked = true;\n else cb.checked = false;\n });\n } else if (Array.isArray(this._store.state[fieldName])) {\n // multiple checkbox like controls\n cbs.forEach((cb) => {\n if (this._store.state[fieldName].includes(cb.value))\n cb.checked = true;\n else cb.checked = false;\n });\n } else {\n // single checkbox like control\n cbs.forEach((cb) => {\n if (this._store.state[fieldName] === cb.value) cb.checked = true;\n else cb.checked = false;\n });\n }\n return;\n }\n\n if (field.tagName === 'NANO-FILE-UPLOAD') {\n const ff = field as HTMLNanoFileUploadElement;\n // this can only work if the field is empty rn... a one-time deal\n if (!ff.files?.length) ff.files = this._store.state[fieldName];\n return;\n }\n\n // default\n field.value = this._store.state[fieldName];\n });\n }\n\n /* Loops through all `nano-...` fields and extracts their values into our store /\n private fieldsToStore(\n fields: Array<NanoFormEles \| PlainFormEles>,\n init = false\n ) {\n fields.forEach((field) => {\n const fieldName = this.getName(field);\n if (!fieldName.length) return;\n\n if (!!this._store.state[fieldName] && this.hasSetStore && init) {\n // a new field is being added\n // but we already have a value for it\n // via a store that has been actively set\n // so let's not overwrite it\n return;\n }\n\n if (\n field.tagName === 'NANO-CHECKBOX' \|\|\n ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n ) {\n const cb = field as HTMLNanoCheckboxElement;\n\n if (\n cb.type === 'radio' \|\|\n cb.type === 'segment' \|\|\n cb.type === 'segment-pill'\n ) {\n // radio type control - only one can be checked\n if (cb.checked) this._store.state[fieldName] = cb.value;\n } else if (\n this.allFields.filter(\n (f) =>\n this.getName(f) === fieldName &&\n (f.tagName === 'NANO-CHECKBOX' \|\|\n (f as HTMLInputElement).type === 'checkbox')\n ).length > 1\n ) {\n // multiple checkbox type control\n const currentArr = Array.isArray(this._store.state[fieldName])\n ? this._store.state[fieldName]\n : [];\n if (cb.checked) {\n // checked\n if (!this._store.state[fieldName].includes(cb.value)) {\n this._store.state[fieldName] = [...currentArr, cb.value];\n }\n } else {\n // unchecked\n this._store.state[fieldName] = currentArr.filter(\n (v) => v !== cb.value\n );\n }\n } else {\n // single checkbox - on or off\n if (cb.checked) this._store.state[fieldName] = cb.value;\n else this._store.state[fieldName] = '';\n }\n return;\n }\n\n if (field.tagName === 'NANO-FILE-UPLOAD') {\n const ff = field as HTMLNanoFileUploadElement;\n if (!this.fileStateEqual(fieldName, ff))\n this._store.state[fieldName] = ff.files;\n\n return;\n }\n\n // default\n this._store.state[fieldName] = field.value;\n });\n }\n\n /\n Tries to ascertain whether the current model\n * value is the same as the `nano-file-upload` value\n * @param fieldName - the key to access from the data store\n * @param field - the nano-file-upload field to assess against\n * @returns true for equal, false for not equal\n /\n private fileStateEqual(\n fieldName: string \| number,\n field: HTMLNanoFileUploadElement\n ) {\n return (\n JSON.stringify(this._store.state[fieldName]) ===\n JSON.stringify(field.files) \|\|\n this._store.state[fieldName] == field.files\n );\n }\n\n /\n Checks for user defined validations\n * @param key - current key of the data model to validate\n * @param newVal - the newly set, incoming value to validate\n /\n private async validate(key: string \| number, newVal: any) {\n if (!this.validation) return;\n\n const res = this.validation(key as string, newVal, this._store.state);\n\n // no nothing - return\n if (!res) return;\n\n // stencil public methods are async\n // so we must coerce our validation\n // collection loop into a promise\n await Promise.all(\n Object.entries(res).map(async ([msg, validityState]) => {\n return validityState.fields.map(async (fieldName) => {\n // switch on/off validation messages\n const field = this.allFields.find(\n (f) => this.getName(f) === fieldName\n );\n let validityTarget:\n \| PlainFormEles\n \| NanoFormEles\n \| HTMLNanoCheckboxGroupElement = field;\n\n if (field.tagName === 'NANO-CHECKBOX') {\n // if we have a checkbox-group, set the validation message there\n const cbg = field.closest('nano-checkbox-group');\n validityTarget = cbg \|\| field;\n }\n\n if (\n ((validityTarget as NanoFormEles).validityMessage \|\|\n (validityTarget as PlainFormEles).validationMessage) === msg &&\n validityState.valid\n ) {\n // status is now valid - clear the error\n await this.setFieldError(validityTarget, '');\n } else if (!validityState.valid) {\n // status is invalid. Set the error\n await this.setFieldError(validityTarget, msg);\n }\n });\n })\n );\n }\n\n /* Loops through all store entries and checks custom validation /\n private async validateAllFields() {\n // This forces our loop to `await` and finish sequentially ... silly async stencil methods\n await Object.entries(this._store.state).reduce(\n async (memo, [key, value]) => {\n await memo;\n await this.validate(key, value);\n },\n undefined as any\n );\n }\n\n /\n Utility to smooth out setting error messages\n * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)\n * @param field\n * @param msg\n /\n private async setFieldError(\n field: NanoFormEles \| HTMLNanoCheckboxGroupElement \| PlainFormEles,\n msg: string\n ) {\n if (field['showError']) {\n await (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).showError(\n msg\n );\n } else if (field['setError'])\n await (field as HTMLNanoCheckboxElement).setError(msg);\n else (field as PlainFormEles).setCustomValidity(msg);\n }\n\n private scrollToFirstInvalid() {\n if (!this.scrollToInvalid) return;\n\n setTimeout(() => {\n const invalidField = this.validationState.find((f) => !f.valid);\n if (!invalidField) return;\n invalidField.fields[0].scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n });\n }, 200);\n }\n\n private submitForm() {\n const nanoSubmit = this.nanoSubmit.emit();\n if (nanoSubmit.defaultPrevented) return;\n this.activeForm.submit();\n }\n\n // Event handlers\n\n /\n Fired whenever store values change and potentially checks validity\n * @param key - the key of the store that's just changed\n * @param newVal - the incoming, new value\n /\n private handleStoreChange = async (key: string \| number, newVal: any) => {\n const found = this.allFields.find((field) => this.getName(field) === key);\n\n // field update has come programmatically (not from ui),\n // so let's update the underlying ui field\n if (\n found &&\n (found.tagName === 'NANO-CHECKBOX' \|\|\n ['radio', 'checkbox'].includes((found as HTMLInputElement).type))\n ) {\n // it's a cb - always change\n this.storeToFields([found]);\n } else if (\n found &&\n ((found.tagName === 'NANO-FILE-UPLOAD' &&\n !this.fileStateEqual(key, found as HTMLNanoFileUploadElement)) \|\|\n (found.tagName !== 'NANO-FILE-UPLOAD' && found.value !== newVal))\n ) {\n // not a cb. Only change if value is different\n this.storeToFields([found]);\n }\n\n if (this.validateOn === 'dirty' && this.dirty) {\n this.internalValidate = true;\n await this.validateAllFields();\n this._valid = this.activeForm.checkValidity();\n this.internalValidate = false;\n }\n this.nanoPayloadChange.emit(this._store.state);\n };\n\n /\n Handles nano field value changes and passes to store\n * @param ev - the incoming change event\n /\n private handleFieldChange = (ev: NanoFormEvent) => {\n if (!this.nanoFields.includes(ev.target)) return;\n this._dirty = true;\n this.fieldsToStore([ev.target]);\n };\n\n /\n Handles non-nano field value changes and passes to store\n * @param ev - the incoming change event\n /\n private handlePlainFieldChange = (ev: PlainFormEvent) => {\n if (!this.plainFields.includes(ev.target)) return;\n this.fieldsToStore([ev.target]);\n };\n\n /\n Handles default field validation events\n * @param ev - the invalid event\n /\n private handleFormInvalid = async (ev: Event & { target: PlainFormEles }) => {\n // if it's a non-nano field, we'll let default html5 validation do it's thing\n if (!this.plainFields.includes(ev.target)) {\n ev.preventDefault();\n }\n\n this._valid = false;\n\n // whenever `checkValidity` is called, this handler is in-turn called.\n // this flag is used to stop infinite loops\n if (this.internalValidate) return;\n\n // a submit must have happened to if 'submitThenDirty' turn on 'dirty' checking now\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.submitted = true;\n\n await this.validateAllFields();\n this.internalValidate = true;\n this._valid = this.activeForm.checkValidity();\n this.internalValidate = false;\n\n // kinda insane...but if we're only validating on submit, then if the form is currently\n // in an invalid state, when submitting, it will fire an invalid event and not\n // submit the form. So let's test to make sure it is really invalid, and submit if not\n if (this.validateOn === 'submit') {\n if (this._valid) {\n this.submitForm();\n return;\n }\n }\n\n this.scrollToFirstInvalid();\n this.nanoInvalid.emit();\n };\n\n /\n stops default form submission, checks if valid, then submits manually\n * @param e - a submit event from the nested form element\n */\n private handleSubmit = async (e: Event) => {\n e.preventDefault();\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.submitted = true;\n await this.validateAllFields();\n\n this.internalValidate = true;\n this._valid = this.activeForm.checkValidity();\n this.internalValidate = false;\n\n if (!this._valid) {\n this.scrollToFirstInvalid();\n return;\n }\n this.submitForm();\n };\n\n connectedCallback(): void {\n this.userForm = this.host.querySelector('form');\n this._store = createStore<ValidatorValueStore>({});\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n this.setupFields();\n this.attachSlotObserver();\n\n this.host.addEventListener('nanoChange', this.handleFieldChange);\n this.host.addEventListener('input', this.handlePlainFieldChange);\n this.host.addEventListener('change', this.handlePlainFieldChange);\n this.host.addEventListener('submit', this.handleSubmit);\n this._store.on('set', this.handleStoreChange);\n });\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n\n this.host.removeEventListener('nanoChange', this.handleFieldChange);\n this.host.removeEventListener('input', this.handlePlainFieldChange);\n this.host.removeEventListener('change', this.handlePlainFieldChange);\n this.host.removeEventListener('submit', this.handleSubmit);\n this._store.reset();\n\n if (this.activeForm)\n this.activeForm.removeEventListener(\n 'invalid',\n this.handleFormInvalid,\n true\n );\n }\n\n render() {\n return (\n <Host>\n {this.userForm && <slot />}\n {!this.userForm && (\n <form ref={(f) => (this.activeForm = f)}>\n <slot />\n </form>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["src/components/field-validator/field-validator.tsx"],"names":["FieldValidator","this","allFields","nanoFieldSelector","hasSetStore","internalValidate","handleStoreChange","async","key","newVal","found","find","field","getName","tagName","includes","type","storeToFields","fileStateEqual","value","validateOn","dirty","validateAllFields","_valid","activeForm","checkValidity","nanoPayloadChange","emit","_store","state","handleFieldChange","ev","nanoFields","target","_dirty","fieldsToStore","handlePlainFieldChange","plainFields","handleFormInvalid","preventDefault","submitted","submitForm","scrollToFirstInvalid","nanoInvalid","handleSubmit","e","[object Object]","userForm","_activeForm","form","removeEventListener","addEventListener","forEach","cbg","closest","valid","store","payload","showValidation","validationState","v","name","pf","nf","validationMessage","validityMessage","length","invalid","fields","f","push","Object","entries","val","validity","Promise","all","map","err","setFieldError","mo","MutationObserver","_entries","host","querySelector","setupFields","observe","childList","attributes","attributeFilter","subtree","getAttribute","Array","from","querySelectorAll","extraFieldSelector","filter","validateOnChange","fieldName","cbs","cb","checked","isArray","ff","files","init","currentArr","JSON","stringify","validation","res","msg","validityState","validityTarget","reduce","memo","validate","undefined","showError","setError","setCustomValidity","scrollToInvalid","setTimeout","invalidField","scrollIntoView","behavior","block","nanoSubmit","defaultPrevented","submit","createStore","requestAnimationFrame","attachSlotObserver","on","disconnect","reset","h","Host","ref"],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n Host,\n Element,\n ComponentInterface,\n State,\n Watch,\n Event,\n EventEmitter,\n Method,\n} from '@stencil/core';\nimport { createStore, ObservableMap } from '@stencil/store';\nimport type {\n NanoFormEles,\n PlainFormEles,\n NanoFormEvent,\n ValidationState,\n ValidatorValueStore,\n PlainFormEvent,\n} from '../../interface';\n\n/*\n A toolbox for `nano-...` form fields and form validation.\n * - Easy to add validation across field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n * - Easy access to whole form and individual field validity states\n * - Easy access to form data payload\n * = Access to 2-way, data bound reactive store\n * - Scroll to invalid field on submit\n /\n@Component({\n tag: 'nano-field-validator',\n})\nexport class FieldValidator implements ComponentInterface {\n // Internal State\n\n @Element() host: HTMLNanoFieldValidatorElement;\n @State() submitted = false;\n @State() userForm: HTMLFormElement;\n @Watch('userForm')\n userFormChange() {\n if (!!this.userForm) this.activeForm = this.userForm;\n }\n\n private get activeForm() {\n return this._activeForm;\n }\n private set activeForm(form: HTMLFormElement) {\n // manages event listners on whatever form is used (slotted on created here)\n if (!form) return;\n\n if (this._activeForm) {\n this._activeForm.removeEventListener(\n 'invalid',\n this.handleFormInvalid,\n true\n );\n }\n form.addEventListener('invalid', this.handleFormInvalid, true);\n this._activeForm = form;\n }\n private _activeForm: HTMLFormElement;\n private mo: MutationObserver;\n private allFields: Array<NanoFormEles \| PlainFormEles> = [];\n private nanoFields: NanoFormEles[];\n private plainFields: PlainFormEles[];\n private nanoFieldSelector = `\n nano-input,\n nano-select,\n nano-file-upload,\n nano-date-input,\n nano-checkbox\n `;\n private hasSetStore = false;\n\n // annoyingly, whenever we attempt to `checkValidty()` it fires `invalid` events.\n // this is used to prevent infinite loops / multiple calls\n private internalValidate = false;\n\n // Public API\n\n /* When should the fields perform validation. Will override / sync all nested `nano-...` controls /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submitThenDirty';\n\n /* Sync up validateOn with all fields /\n @Watch('validateOn')\n validateOnChange() {\n this.nanoFields.forEach((field) => {\n if (field.tagName === 'NANO-CHECKBOX') {\n const cbg = field.closest('nano-checkbox-group');\n if (cbg) cbg.validateOn = this.validateOn;\n } else {\n (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).validateOn =\n this.validateOn;\n }\n });\n }\n\n /* Tries to scroll to the first invalid field on submit /\n @Prop() scrollToInvalid = true;\n\n /* Returns true if any nested fields have been changed @readonly /\n @Prop({ reflect: true })\n get dirty() {\n return this._dirty;\n }\n @State() _dirty = false;\n\n /* Returns true if all the nested fields are currently valid @readonly /\n @Prop({ reflect: true })\n get valid() {\n return this._valid;\n }\n @State() _valid: boolean;\n\n /* The current form state as a stencil store. /\n @Prop() get store(): ObservableMap<ValidatorValueStore> {\n return this._store;\n }\n @State() _store: ObservableMap<ValidatorValueStore>;\n\n /* The current form payload as a reactive proxy. @readonly /\n @Prop()\n get payload() {\n return this._store.state;\n }\n\n /* Returns true if validation errors will be displayed to the user. @readonly /\n @Prop()\n get showValidation() {\n return (this.validateOn === 'dirty' && this.dirty) \|\| this.submitted;\n }\n\n /* Get the current validation state of all form fields. @readonly\n * ```\n {\n fields: NanoFormEles[];\n valid: boolean;\n validityMessage: string;\n dirty: boolean;\n name: string \| number;\n value: any;\n }[]\n ```\n /\n @Prop()\n get validationState(): ValidationState[] {\n // TODO - migrate nano-fields away from using proprietary methods in a bid to be closer to the spec\n\n // this is big and ugly.\n // why? Cos' it must unify checking validity state for both\n // `nano-...` and plain form fields.\n const validationState: ValidationState[] = [];\n\n this.allFields.forEach(async (field) => {\n const found = validationState.find((v) => v.name === this.getName(field));\n let pf: PlainFormEles;\n let nf: NanoFormEles;\n\n if (found) {\n if ((field as PlainFormEles).validationMessage) {\n // non-nano fields\n pf = field as PlainFormEles;\n found.validityMessage = pf.validationMessage.length\n ? pf.validationMessage\n : found.validityMessage;\n this.internalValidate = true;\n if (found.valid && !pf.checkValidity()) found.valid = false;\n this.internalValidate = false;\n } else if ((field as NanoFormEles).validityMessage) {\n // nano-... fields\n nf = field as NanoFormEles;\n found.validityMessage = nf.validityMessage.length\n ? nf.validityMessage\n : nf.validityMessage;\n if (found.valid && nf.invalid) found.valid = false;\n }\n if (!found.fields.find((f) => f === field)) found.fields.push(field);\n }\n\n let valid: boolean;\n let validityMessage: string;\n\n if ((field as PlainFormEles).checkValidity) {\n pf = field as PlainFormEles;\n this.internalValidate = true;\n valid = pf.checkValidity();\n this.internalValidate = false;\n validityMessage = pf.validationMessage;\n } else {\n nf = field as NanoFormEles;\n valid = !nf.invalid;\n validityMessage = nf.validityMessage;\n }\n\n validationState.push({\n fields: [field],\n name: this.getName(field),\n value: this._store.state[this.getName(field)],\n dirty: false,\n valid,\n validityMessage,\n });\n });\n\n return validationState;\n }\n\n /* By default, `nano-field-validator` will also track all native form field elements.\n * You can add extra web-component form fields to listen to\n * (as long as they match the standard form field spec) by using the `fieldSelector` prop.\n /\n @Prop() extraFieldSelector: string = 'input, select, textarea';\n\n /* A validation callback method.\n * @param field - The field name currently being evaluated\n * @param value - The value of the field currently being evaluated\n * @param fields - an array of all currently observered form fields and values\n * @returns field names mapped to an object of status message and validity e.g.\n * ```js\n * {field1: {msg: `This is invalid!`}, field2: {msg: `This is valid!`, valid: true}}\n * ```\n /\n @Prop() validation: (\n field: string,\n value: string,\n fields: ValidatorValueStore\n ) => { [errorMsg: string]: { fields?: string[]; valid?: boolean } };\n\n /\n Sets the state of the form using an object of key / value pairs.\n * @param state - the state to load in the store\n /\n @Method()\n async setStore(state: ValidatorValueStore) {\n this.hasSetStore = true;\n Object.entries(state).forEach(([key, val]) => {\n this.store.state[key] = val;\n });\n }\n\n /\n Sets custom validity for all / some form fields.\n * @param validity - a validity object of `{fieldName: errorString}` pairs. Set as an empty string to clear the error.\n /\n @Method()\n async setCustomValidity(validity: { [key: string]: string }) {\n return await Promise.all(\n Object.entries(validity).map(async ([key, err]) => {\n const field = this.allFields.find((f) => this.getName(f) === key);\n if (!!field) await this.setFieldError(field, err);\n })\n );\n }\n\n /\n Clear all custom validation.\n * @returns a promise, resolved when all errors are cleared\n /\n @Method()\n async resetValidity() {\n return await Promise.all(\n this.allFields.map(async (field) => await this.setFieldError(field, ''))\n );\n }\n\n /* Fired whenever the payload changes /\n @Event() nanoPayloadChange: EventEmitter<ValidatorValueStore>;\n\n /\n Fired on valid form submission.\n * Note: if you wish to prevent a form from submitting, instead\n * of using / preventing the native `submit` event, use this event\n * ```js\n * ele.addEventListener('nanoSubmit', (e) => {\n * e.preventDefault()\n * })\n * ```\n /\n @Event() nanoSubmit: EventEmitter;\n\n /* Fire on invalid form submission attempt /\n @Event() nanoInvalid: EventEmitter;\n\n // private methods\n\n @Watch('extraFieldSelector')\n attachSlotObserver() {\n if (!!this.mo) return;\n const mo = (this.mo = new MutationObserver((_entries) => {\n const form = this.host.querySelector('form');\n if (form && form !== this.activeForm) this.activeForm = form;\n this.setupFields();\n }));\n mo.observe(this.host, {\n childList: true,\n attributes: true,\n attributeFilter: ['name'],\n subtree: true,\n });\n }\n\n /\n During spec tests, mockelement props aren't set - only attributes.\n * This irons out that kink\n * @param field\n * @returns the fields name prop or attr\n /\n private getName(field: PlainFormEles \| NanoFormEles) {\n return field.name \|\| field.getAttribute('name');\n }\n\n /* Checks for new `nano-...` fields and adds them to our watch array and value store /\n private setupFields() {\n let nanoFields = Array.from(\n this.host.querySelectorAll<NanoFormEles>(this.nanoFieldSelector)\n );\n\n let plainFields = Array.from(\n this.host.querySelectorAll<PlainFormEles>(this.extraFieldSelector)\n ).filter((e) => !e.closest(this.nanoFieldSelector));\n\n nanoFields = nanoFields.filter(\n (f) => !!this.getName(f) && !!this.getName(f).length\n );\n plainFields = plainFields.filter(\n (f) => !!this.getName(f) && !!this.getName(f).length\n );\n\n // do we have any currently un-watched fields?\n if (\n ![...nanoFields, ...plainFields].filter(\n (f) => !this.allFields.includes(f)\n ).length\n )\n return;\n\n // setup the initial store state / refresh on new fields\n this.nanoFields = nanoFields;\n this.plainFields = plainFields;\n this.allFields = [...nanoFields, ...plainFields];\n\n this.storeToFields(this.allFields);\n\n this.validateOnChange();\n this.fieldsToStore(this.allFields, true);\n this.nanoPayloadChange.emit(this._store.state);\n }\n\n private storeToFields(fields: Array<NanoFormEles \| PlainFormEles>) {\n fields.forEach((field) => {\n const fieldName = this.getName(field);\n if (\n !fieldName.length \|\|\n typeof this._store.state[fieldName] === 'undefined'\n )\n return;\n\n if (\n field.tagName === 'NANO-CHECKBOX' \|\|\n ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n ) {\n const cbs = this.allFields.filter(\n (f) => this.getName(field) === this.getName(f)\n ) as HTMLNanoCheckboxElement[];\n if (\n cbs[0].type === 'radio' \|\|\n cbs[0].type === 'segment' \|\|\n cbs[0].type === 'segment-pill'\n ) {\n // single radio type control\n cbs.forEach((cb) => {\n if (this._store.state[fieldName] === cb.value) cb.checked = true;\n else cb.checked = false;\n });\n } else if (Array.isArray(this._store.state[fieldName])) {\n // multiple checkbox like controls\n cbs.forEach((cb) => {\n if (this._store.state[fieldName].includes(cb.value))\n cb.checked = true;\n else cb.checked = false;\n });\n } else {\n // single checkbox like control\n cbs.forEach((cb) => {\n if (this._store.state[fieldName] === cb.value) cb.checked = true;\n else cb.checked = false;\n });\n }\n return;\n }\n\n if (field.tagName === 'NANO-FILE-UPLOAD') {\n const ff = field as HTMLNanoFileUploadElement;\n // this can only work if the field is empty rn... a one-time deal\n if (!ff.files?.length) ff.files = this._store.state[fieldName];\n return;\n }\n\n // default\n field.value = this._store.state[fieldName];\n });\n }\n\n /* Loops through all `nano-...` fields and extracts their values into our store /\n private fieldsToStore(\n fields: Array<NanoFormEles \| PlainFormEles>,\n init = false\n ) {\n fields.forEach((field) => {\n const fieldName = this.getName(field);\n if (!fieldName.length) return;\n\n if (!!this._store.state[fieldName] && this.hasSetStore && init) {\n // a new field is being added\n // but we already have a value for it\n // via a store that has been actively set\n // so let's not overwrite it\n return;\n }\n\n if (\n field.tagName === 'NANO-CHECKBOX' \|\|\n ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n ) {\n const cb = field as HTMLNanoCheckboxElement;\n\n if (\n cb.type === 'radio' \|\|\n cb.type === 'segment' \|\|\n cb.type === 'segment-pill'\n ) {\n // radio type control - only one can be checked\n if (cb.checked) this._store.state[fieldName] = cb.value;\n } else if (\n this.allFields.filter(\n (f) =>\n this.getName(f) === fieldName &&\n (f.tagName === 'NANO-CHECKBOX' \|\|\n (f as HTMLInputElement).type === 'checkbox')\n ).length > 1\n ) {\n // multiple checkbox type control\n const currentArr = Array.isArray(this._store.state[fieldName])\n ? this._store.state[fieldName]\n : [];\n if (cb.checked) {\n // checked\n if (!this._store.state[fieldName].includes(cb.value)) {\n this._store.state[fieldName] = [...currentArr, cb.value];\n }\n } else {\n // unchecked\n this._store.state[fieldName] = currentArr.filter(\n (v) => v !== cb.value\n );\n }\n } else {\n // single checkbox - on or off\n if (cb.checked) this._store.state[fieldName] = cb.value;\n else this._store.state[fieldName] = '';\n }\n return;\n }\n\n if (field.tagName === 'NANO-FILE-UPLOAD') {\n const ff = field as HTMLNanoFileUploadElement;\n if (!this.fileStateEqual(fieldName, ff))\n this._store.state[fieldName] = ff.files;\n\n return;\n }\n\n // default\n this._store.state[fieldName] = field.value;\n });\n }\n\n /\n Tries to ascertain whether the current model\n * value is the same as the `nano-file-upload` value\n * @param fieldName - the key to access from the data store\n * @param field - the nano-file-upload field to assess against\n * @returns true for equal, false for not equal\n /\n private fileStateEqual(\n fieldName: string \| number,\n field: HTMLNanoFileUploadElement\n ) {\n return (\n JSON.stringify(this._store.state[fieldName]) ===\n JSON.stringify(field.files) \|\|\n this._store.state[fieldName] == field.files\n );\n }\n\n /\n Checks for user defined validations\n * @param key - current key of the data model to validate\n * @param newVal - the newly set, incoming value to validate\n /\n private async validate(key: string \| number, newVal: any) {\n if (!this.validation) return;\n\n const res = this.validation(key as string, newVal, this._store.state);\n\n // no nothing - return\n if (!res) return;\n\n // stencil public methods are async\n // so we must coerce our validation\n // collection loop into a promise\n await Promise.all(\n Object.entries(res).map(async ([msg, validityState]) => {\n return validityState.fields.map(async (fieldName) => {\n // switch on/off validation messages\n const field = this.allFields.find(\n (f) => this.getName(f) === fieldName\n );\n let validityTarget:\n \| PlainFormEles\n \| NanoFormEles\n \| HTMLNanoCheckboxGroupElement = field;\n\n if (field.tagName === 'NANO-CHECKBOX') {\n // if we have a checkbox-group, set the validation message there\n const cbg = field.closest('nano-checkbox-group');\n validityTarget = cbg \|\| field;\n }\n\n if (\n ((validityTarget as NanoFormEles).validityMessage \|\|\n (validityTarget as PlainFormEles).validationMessage) === msg &&\n validityState.valid\n ) {\n // status is now valid - clear the error\n await this.setFieldError(validityTarget, '');\n } else if (!validityState.valid) {\n // status is invalid. Set the error\n await this.setFieldError(validityTarget, msg);\n }\n });\n })\n );\n }\n\n /* Loops through all store entries and checks custom validation /\n private async validateAllFields() {\n // This forces our loop to `await` and finish sequentially ... silly async stencil methods\n await Object.entries(this._store.state).reduce(\n async (memo, [key, value]) => {\n await memo;\n await this.validate(key, value);\n },\n undefined as any\n );\n }\n\n /\n Utility to smooth out setting error messages\n * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)\n * @param field\n * @param msg\n /\n private async setFieldError(\n field: NanoFormEles \| HTMLNanoCheckboxGroupElement \| PlainFormEles,\n msg: string\n ) {\n if (field['showError']) {\n await (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).showError(\n msg\n );\n } else if (field['setError'])\n await (field as HTMLNanoCheckboxElement).setError(msg);\n else (field as PlainFormEles).setCustomValidity(msg);\n }\n\n private scrollToFirstInvalid() {\n if (!this.scrollToInvalid) return;\n\n setTimeout(() => {\n const invalidField = this.validationState.find((f) => !f.valid);\n if (!invalidField) return;\n invalidField.fields[0].scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n });\n }, 200);\n }\n\n private submitForm() {\n const nanoSubmit = this.nanoSubmit.emit();\n if (nanoSubmit.defaultPrevented) return;\n this.activeForm.submit();\n }\n\n // Event handlers\n\n /\n Fired whenever store values change and potentially checks validity\n * @param key - the key of the store that's just changed\n * @param newVal - the incoming, new value\n /\n private handleStoreChange = async (key: string \| number, newVal: any) => {\n const found = this.allFields.find((field) => this.getName(field) === key);\n\n // field update has come programmatically (not from ui),\n // so let's update the underlying ui field\n if (\n found &&\n (found.tagName === 'NANO-CHECKBOX' \|\|\n ['radio', 'checkbox'].includes((found as HTMLInputElement).type))\n ) {\n // it's a cb - always change\n this.storeToFields([found]);\n } else if (\n found &&\n ((found.tagName === 'NANO-FILE-UPLOAD' &&\n !this.fileStateEqual(key, found as HTMLNanoFileUploadElement)) \|\|\n (found.tagName !== 'NANO-FILE-UPLOAD' && found.value !== newVal))\n ) {\n // not a cb. Only change if value is different\n this.storeToFields([found]);\n }\n\n if (this.validateOn === 'dirty' && this.dirty) {\n this.internalValidate = true;\n await this.validateAllFields();\n this._valid = this.activeForm.checkValidity();\n this.internalValidate = false;\n }\n this.nanoPayloadChange.emit(this._store.state);\n };\n\n /\n Handles nano field value changes and passes to store\n * @param ev - the incoming change event\n /\n private handleFieldChange = (ev: NanoFormEvent) => {\n if (!this.nanoFields.includes(ev.target)) return;\n this._dirty = true;\n this.fieldsToStore([ev.target]);\n };\n\n /\n Handles non-nano field value changes and passes to store\n * @param ev - the incoming change event\n /\n private handlePlainFieldChange = (ev: PlainFormEvent) => {\n if (!this.plainFields.includes(ev.target)) return;\n this.fieldsToStore([ev.target]);\n };\n\n /\n Handles default field validation events\n * @param ev - the invalid event\n /\n private handleFormInvalid = async (ev: Event & { target: PlainFormEles }) => {\n // if it's a non-nano field, we'll let default html5 validation do it's thing\n if (!this.plainFields.includes(ev.target)) {\n ev.preventDefault();\n }\n\n this._valid = false;\n\n // whenever `checkValidity` is called, this handler is in-turn called.\n // this flag is used to stop infinite loops\n if (this.internalValidate) return;\n\n // a submit must have happened to if 'submitThenDirty' turn on 'dirty' checking now\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.submitted = true;\n\n await this.validateAllFields();\n this.internalValidate = true;\n this._valid = this.activeForm.checkValidity();\n this.internalValidate = false;\n\n // kinda insane...but if we're only validating on submit, then if the form is currently\n // in an invalid state, when submitting, it will fire an invalid event and not\n // submit the form. So let's test to make sure it is really invalid, and submit if not\n if (this.validateOn === 'submit') {\n if (this._valid) {\n this.submitForm();\n return;\n }\n }\n\n this.scrollToFirstInvalid();\n this.nanoInvalid.emit();\n };\n\n /\n stops default form submission, checks if valid, then submits manually\n * @param e - a submit event from the nested form element\n */\n private handleSubmit = async (e: Event) => {\n e.preventDefault();\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.submitted = true;\n await this.validateAllFields();\n\n this.internalValidate = true;\n this._valid = this.activeForm.checkValidity();\n this.internalValidate = false;\n\n if (!this._valid) {\n this.scrollToFirstInvalid();\n return;\n }\n this.submitForm();\n };\n\n connectedCallback(): void {\n this.userForm = this.host.querySelector('form');\n this._store = createStore<ValidatorValueStore>({});\n }\n\n componentDidLoad() {\n requestAnimationFrame(() => {\n this.setupFields();\n this.attachSlotObserver();\n\n this.host.addEventListener('nanoChange', this.handleFieldChange);\n this.host.addEventListener('input', this.handlePlainFieldChange);\n this.host.addEventListener('change', this.handlePlainFieldChange);\n this.host.addEventListener('submit', this.handleSubmit);\n this._store.on('set', this.handleStoreChange);\n });\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n\n this.host.removeEventListener('nanoChange', this.handleFieldChange);\n this.host.removeEventListener('input', this.handlePlainFieldChange);\n this.host.removeEventListener('change', this.handlePlainFieldChange);\n this.host.removeEventListener('submit', this.handleSubmit);\n this._store.reset();\n\n if (this.activeForm)\n this.activeForm.removeEventListener(\n 'invalid',\n this.handleFormInvalid,\n true\n );\n }\n\n render() {\n return (\n <Host>\n {this.userForm && <slot />}\n {!this.userForm && (\n <form ref={(f) => (this.activeForm = f)}>\n <slot />\n </form>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/nano-components/p-b717f6d7.js ADDED Viewed

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{c as t}from"./p-49458cd9.js";import"./p-1fe12320.js";import"./p-ee045579.js";import"./p-9746b0a5.js";import"./p-651b3264.js";const o="table.worker";const p="stencil.table.worker";const s=new URL("p-1fd13775.js",import.meta.url).href;const r=new Blob(['importScripts("'+s+'")'],{type:"text/javascript"});const e=URL.createObjectURL(r);const c=t(e,o,p);URL.revokeObjectURL(e);export{c as worker,p as workerMsgId,o as workerName,s as workerPath};
+//# sourceMappingURL=p-b717f6d7.js.map

package/dist/nano-components/{p-b7b06e04.js.map → p-b717f6d7.js.map} RENAMED Viewed

File without changes

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

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as i,d as e,h as s,a as n,g as o}from"./p-1fe12320.js";import{d as r}from"./p-9746b0a5.js";const a=class{constructor(e){t(this,e);this.nanoResizeStateChange=i(this,"nanoResizeStateChange",7);this.assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;const t={h:new Map,w:new Map};let i=false;Object.keys(this.appliedStates).forEach((e=>{let s;if(e==="h")s=this.currentHeight;else s=this.currentWidth;this.appliedStates[e].forEach(((n,o)=>{if(s>=o&&n.applied===false){n.applied=true;t[e].set(o,n);i=true}else if(s<o&&n.applied===true){n.applied=false;t[e].set(o,n);i=true}}))}));if(i)this.applyChanges(t);else if(!this.classNames.includes("is-ready"))this.classNames=["is-ready"]};this.currentWidth=undefined;this.currentHeight=undefined;this.classNames=[];this.states=undefined}dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;if(!this.ro)this.attachRO();const t=t=>{const i=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(i[0]),dir:i[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((i=>{i=i.trim();if(i.includes(" ")){const[e,...s]=i.split(" ");const{bp:n,dir:o}=t(e);this.appliedStates[o].set(n,{states:s,applied:false})}else{const{bp:e,dir:s}=t(i);this.appliedStates[s].set(e,{applied:false})}}))}applyChanges(t){let i=[...this.classNames];Object.keys(t).forEach((e=>{t[e].forEach((t=>{if(!t.states)return;t.states.map((e=>{if(t.applied)i.push(e);else i=i.filter((t=>t!==e))}))}))}));this.classNames=["is-ready",...i];this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const i={};Object.keys(t).forEach((e=>{t[e].forEach(((t,s)=>{i[s+e]=t.applied}))}));return i}attachRO(){this.ro=new ResizeObserver((t=>{for(const i of t){this.currentWidth=i.contentRect.width;this.currentHeight=i.contentRect.height}}));this.ro.observe(this.host)}connectedCallback(){this.assessChanges=r(this.assessChanges,50)}componentDidLoad(){if(!this.states)return;if(!this.currentWidth||!this.currentHeight){e((()=>{const{width:t,height:i}=this.host.getBoundingClientRect();this.currentWidth=t;this.currentHeight=i}))}this.statesChanged()}disconnectedCallback(){if(this.ro)this.ro.disconnect()}render(){return s(n,{class:{[this.classNames.join(" ")]:true}},s("slot",null))}get host(){return o(this)}static get watchers(){return{currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"],states:["statesChanged"]}}};a.style=":host { display: inline-block } div { height: 100%; }";const h=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--base-color-rgb:var(--nano-skeleton-rgb, 228, 230, 232);--color:var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));display:block;position:relative;border-radius:0.25rem;min-block-size:1em;line-height:inherit}.skeleton{display:-webkit-box;display:-ms-flexbox;display:flex;min-inline-size:100%;min-block-size:100%;border-radius:inherit;line-height:inherit}.skeleton__indicator{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;background:var(--color);border-radius:inherit;line-height:inherit}.skeleton.animate .skeleton__indicator{background:-webkit-gradient(linear, right top, left top, from(var(--tint)), color-stop(var(--color)), color-stop(var(--color)), to(var(--tint)));background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;-webkit-animation:loader 6s ease-in-out infinite;animation:loader 6s ease-in-out infinite}@-webkit-keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes loader{0%{background-position:200% 0}to{background-position:-200% 0}}";const l=class{constructor(i){t(this,i);this.animated=true}render(){return s("div",{class:{skeleton:true,animate:this.animated}},s("div",{class:"skeleton__indicator"}," "))}};l.style=h;export{a as nano_resize_observe,l as nano_skeleton};
+//# sourceMappingURL=p-b7901427.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"names":["ResizeObserve","this","assessChanges","currentWidth","currentHeight","changedStates","h","Map","w","hasChanged","Object","keys","appliedStates","forEach","dimType","dim","state","bp","applied","set","applyChanges","classNames","includes","[object Object]","states","ro","attachRO","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","key","classes","changes","push","cl","nanoResizeStateChange","emit","toSimpleObj","stateMaps","retObj","ResizeObserver","entries","entry","contentRect","width","height","observe","host","debounce","readTask","getBoundingClientRect","statesChanged","disconnect","Host","class","join","skeletonCss","Skeleton","skeleton","animate","animated"],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Host,\n State,\n Watch,\n ComponentInterface,\n Event,\n EventEmitter,\n readTask,\n} from '@stencil/core';\nimport { debounce } from '../../utils/throttle';\nimport type { ResizeStateChangeEventDetail } from '../../interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n h: Map<number, ResizeObserverState>;\n w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names. Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * @slot - Main slot for any content.\n */\n@Component({\n tag: 'nano-resize-observe',\n shadow: true,\n styles: `:host { display: inline-block } div { height: 100%; }`,\n})\nexport class ResizeObserve implements ComponentInterface {\n private ro: ResizeObserver;\n private appliedStates: StateMaps;\n\n @Element() host: HTMLNanoResizeObserveElement;\n @State() currentWidth: number;\n @State() currentHeight: number;\n @State() classNames: string[] = [];\n\n /** string list of sizes and optional class-names. Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n * Format: `states=\"800w, 300h class1 class2\"` */\n @Prop() states: string;\n\n /** A resize break point is switched on or off */\n @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n @Watch('currentHeight')\n @Watch('currentWidth')\n dimensionChanged() {\n this.assessChanges();\n }\n\n @Watch('states')\n statesChanged() {\n if (!this.states) return;\n if (!this.ro) this.attachRO();\n\n const toBpDir = (bpDir: string) => {\n const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n };\n this.appliedStates = { h: new Map(), w: new Map() };\n\n // parse state string\n this.states.split(',').map((st) => {\n st = st.trim();\n if (st.includes(' ')) {\n const [key, ...classes] = st.split(' ');\n const { bp, dir } = toBpDir(key);\n this.appliedStates[dir as keyof StateMaps].set(bp, {\n states: classes,\n applied: false,\n });\n } else {\n const { bp, dir } = toBpDir(st);\n this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n }\n });\n }\n\n private assessChanges = () => {\n if (!this.currentWidth && !this.currentHeight) return;\n const changedStates: StateMaps = { h: new Map(), w: new Map() };\n let hasChanged = false;\n\n Object.keys(this.appliedStates).forEach((dimType) => {\n let dim: number;\n if (dimType === 'h') dim = this.currentHeight;\n else dim = this.currentWidth;\n\n this.appliedStates[dimType].forEach(\n (state: ResizeObserverState, bp: number) => {\n if (dim >= bp && state.applied === false) {\n state.applied = true;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n } else if (dim < bp && state.applied === true) {\n state.applied = false;\n changedStates[dimType].set(bp, state);\n hasChanged = true;\n }\n }\n );\n });\n if (hasChanged) this.applyChanges(changedStates);\n else if (!this.classNames.includes('is-ready'))\n this.classNames = ['is-ready'];\n };\n\n private applyChanges(changes: StateMaps) {\n let classNames = [...this.classNames];\n Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n changes[dimType].forEach((state) => {\n if (!state.states) return;\n state.states.map((st) => {\n if (state.applied) classNames.push(st);\n else classNames = classNames.filter((cl) => cl !== st);\n });\n });\n });\n this.classNames = ['is-ready', ...classNames];\n this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n }\n\n private toSimpleObj(stateMaps: StateMaps) {\n const retObj = {};\n Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n retObj[bp + dimType] = state.applied;\n });\n });\n return retObj;\n }\n\n private attachRO() {\n this.ro = new ResizeObserver((entries) => {\n for (const entry of entries) {\n this.currentWidth = entry.contentRect.width;\n this.currentHeight = entry.contentRect.height;\n }\n });\n this.ro.observe(this.host);\n }\n\n connectedCallback() {\n this.assessChanges = debounce(this.assessChanges, 50);\n }\n\n componentDidLoad() {\n if (!this.states) return;\n if (!this.currentWidth || !this.currentHeight) {\n readTask(() => {\n const { width, height } = this.host.getBoundingClientRect();\n this.currentWidth = width;\n this.currentHeight = height;\n });\n }\n this.statesChanged();\n }\n\n disconnectedCallback() {\n if (this.ro) this.ro.disconnect();\n }\n\n render() {\n return (\n <Host\n class={{\n [this.classNames.join(' ')]: true,\n }}\n >\n <slot />\n </Host>\n );\n }\n}\n","@import '../../global/style/nano-theme/components';\n\n:host {\n /**\n * @prop --base-color-rgb: default #{$skeleton-color-rgb};\n * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n */\n\n --base-color-rgb: #{$skeleton-color-rgb};\n --color: var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n --tint: var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));\n\n display: block;\n position: relative;\n border-radius: 0.25rem;\n min-block-size: 1em;\n line-height: inherit;\n}\n\n.skeleton {\n display: flex;\n min-inline-size: 100%;\n min-block-size: 100%;\n border-radius: inherit;\n line-height: inherit;\n}\n\n.skeleton__indicator {\n flex: 1 1 auto;\n background: var(--color);\n border-radius: inherit;\n line-height: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n background:\n linear-gradient(\n 270deg,\n var(--tint),\n var(--color),\n var(--color),\n var(--tint)\n );\n background-size: 400% 100%;\n animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n 0% {\n background-position: 200% 0;\n }\n\n to {\n background-position: -200% 0;\n }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n tag: 'nano-skeleton',\n styleUrl: 'skeleton.scss',\n shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n /** When `true`, the skeleton will animate. */\n @Prop() animated = true;\n\n render() {\n return (\n <div\n class={{\n skeleton: true,\n animate: this.animated,\n }}\n >\n <div class=\"skeleton__indicator\"> </div>\n </div>\n );\n }\n}\n"]}

package/dist/nano-components/{p-9f8b091a.entry.js → p-b7c3aecb.entry.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as o,d as r,w as n,h as e,a as i,g as s}from"./p-1fe12320.js";import{c as a}from"./p-7b3638b7.js";import{d}from"./p-4c6ef60b.js";const c=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--content-bg-color:transparent;--content-text-color:#455556;--content-transition:height 0.2s ease-out;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}:host(.nano-color){--btn-bg-color:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--btn-bg-color--open:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-bg-color--hover:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--btn-text-color:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-text-color--open:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--btn-text-color--hover:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    )}button{inset-block:0;inset-inline:auto;margin:0;inline-size:100%;block-size:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;margin:0;-webkit-transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims)}button::-moz-focus-inner{border:0}button:focus{-webkit-box-shadow:var(--focus-style);box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}:hover button{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open button{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}button .label{width:100%;max-width:100%;max-height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;display:inline-block}button .icon{line-height:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:inline-block;color:currentColor;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;-webkit-transform-origin:center;transform-origin:center}button .icon--start{margin-inline:0 var(--padding);margin-block:0}button .icon--end{margin-inline:var(--padding) 0;margin-block:0}button .icon ::slotted(nano-icon){--color:"currentColor"}.content{color:var(--content-text-color);background:var(--content-bg-color);height:0;overflow:hidden;-webkit-transition:0.2s ease border-radius;transition:0.2s ease border-radius;outline:none}.loaded .content{-webkit-transition:var(--content-transition), 0.2s ease border-radius;transition:var(--content-transition), 0.2s ease border-radius}.content>*{opacity:0;-webkit-transition:opacity 0.2s ease-out;transition:opacity 0.2s ease-out}.open .content>*{opacity:1}.content__area{padding:var(--padding)}';const l=class{constructor(r){t(this,r);this.nanoOpened=o(this,"nanoOpened",7);this.nanoClosed=o(this,"nanoClosed",7);this.slideId=`nano-details-${b++}`;this.stateChanging=false;this.onKeyDown=t=>{switch(t.key){case"Enter":case" ":this.open=!this.open;break}};this.onMouseDown=()=>{if(this.stateChanging)return;this.open=!this.open};this.isLoading=true;this.label="";this.open=false;this.noHandle=false;this.iconRotation=90;this.color=undefined}toggleClick(){this.stateChanging=true;if(this.open)this.show();else this.hide()}hide(){this.nanoClosed.emit(this.open);d(this.contentEl,"is-shown",false).then((()=>this.stateChanging=false));this.contentEl.style.height="0px"}show(){this.nanoOpened.emit();d(this.contentEl,"is-shown",true).then((()=>{this.stateChanging=false}));this.contentEl.style.height=this.contentArea.scrollHeight+"px"}resize(){if(!this.open||!this.contentArea||!this.contentEl||this.stateChanging)return;r((()=>{if(this.contentArea.scrollHeight>0){n((()=>{this.contentEl.style.height=this.contentArea.scrollHeight+"px"}))}}))}attachRO(){if(this.ro||!this.contentArea)return;const t=this.ro=new ResizeObserver((()=>this.resize()));t.observe(this.contentArea)}componentWillLoad(){this.hasStartSlot=!!this.el.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.el.querySelector('[slot="icon-end"]');setTimeout((()=>{this.isLoading=false}),100)}componentDidLoad(){if(this.open){setTimeout((()=>{this.show()}),0)}this.attachRO()}connectedCallback(){const t=this.mo=new MutationObserver((()=>this.resize()));t.observe(this.el,{childList:true,subtree:true,attributes:false});this.attachRO()}disconnectedCallback(){if(this.mo)this.mo.disconnect();if(this.ro)this.ro.disconnect()}render(){return e(i,{class:{...a(this.color)}},e("div",{class:{open:this.open,loaded:!this.isLoading}},e("button",{onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown,onTouchEnd:this.onMouseDown,"aria-controls":this.slideId,"aria-expanded":this.open?"true":"false",style:{display:this.noHandle?"none":""},part:"button"},this.hasStartSlot?e("span",{part:"icon--start",class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},e("slot",{name:"icon-start"})):"",e("div",{class:"label",part:"label"},this.label?this.label:e("slot",{name:"label"})),this.hasEndSlot?e("span",{part:"icon--end",class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},e("slot",{name:"icon-end"})):""),e("div",{class:"content",ref:t=>this.contentEl=t,tabindex:"-1",id:this.slideId,part:"content"},e("div",{ref:t=>this.contentArea=t,class:"content__area"},e("slot",null)))))}get el(){return s(this)}static get watchers(){return{open:["toggleClick"]}}};let b=0;l.style=c;export{l as nano_details};
-//# sourceMappingURL=p-9f8b091a.entry.js.map
+import{r as t,c as o,d as r,w as n,h as e,a as i,g as s}from"./p-1fe12320.js";import{c as a}from"./p-7b3638b7.js";import{d}from"./p-167b9165.js";const c=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--content-bg-color:transparent;--content-text-color:#455556;--content-transition:height 0.2s ease-out;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}:host(.nano-color){--btn-bg-color:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--btn-bg-color--open:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-bg-color--hover:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--btn-text-color:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-text-color--open:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--btn-text-color--hover:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    )}button{inset-block:0;inset-inline:auto;margin:0;inline-size:100%;block-size:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;margin:0;-webkit-transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims)}button::-moz-focus-inner{border:0}button:focus{-webkit-box-shadow:var(--focus-style);box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}:hover button{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open button{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}button .label{width:100%;max-width:100%;max-height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;display:inline-block}button .icon{line-height:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:inline-block;color:currentColor;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;-webkit-transform-origin:center;transform-origin:center}button .icon--start{margin-inline:0 var(--padding);margin-block:0}button .icon--end{margin-inline:var(--padding) 0;margin-block:0}button .icon ::slotted(nano-icon){--color:"currentColor"}.content{color:var(--content-text-color);background:var(--content-bg-color);height:0;overflow:hidden;-webkit-transition:0.2s ease border-radius;transition:0.2s ease border-radius;outline:none}.loaded .content{-webkit-transition:var(--content-transition), 0.2s ease border-radius;transition:var(--content-transition), 0.2s ease border-radius}.content>*{opacity:0;-webkit-transition:opacity 0.2s ease-out;transition:opacity 0.2s ease-out}.open .content>*{opacity:1}.content__area{padding:var(--padding)}';const l=class{constructor(r){t(this,r);this.nanoOpened=o(this,"nanoOpened",7);this.nanoClosed=o(this,"nanoClosed",7);this.slideId=`nano-details-${b++}`;this.stateChanging=false;this.onKeyDown=t=>{switch(t.key){case"Enter":case" ":this.open=!this.open;break}};this.onMouseDown=()=>{if(this.stateChanging)return;this.open=!this.open};this.isLoading=true;this.label="";this.open=false;this.noHandle=false;this.iconRotation=90;this.color=undefined}toggleClick(){this.stateChanging=true;if(this.open)this.show();else this.hide()}hide(){this.nanoClosed.emit(this.open);d(this.contentEl,"is-shown",false).then((()=>this.stateChanging=false));this.contentEl.style.height="0px"}show(){this.nanoOpened.emit();d(this.contentEl,"is-shown",true).then((()=>{this.stateChanging=false}));this.contentEl.style.height=this.contentArea.scrollHeight+"px"}resize(){if(!this.open||!this.contentArea||!this.contentEl||this.stateChanging)return;r((()=>{if(this.contentArea.scrollHeight>0){n((()=>{this.contentEl.style.height=this.contentArea.scrollHeight+"px"}))}}))}attachRO(){if(this.ro||!this.contentArea)return;const t=this.ro=new ResizeObserver((()=>this.resize()));t.observe(this.contentArea)}componentWillLoad(){this.hasStartSlot=!!this.el.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.el.querySelector('[slot="icon-end"]');setTimeout((()=>{this.isLoading=false}),100)}componentDidLoad(){if(this.open){setTimeout((()=>{this.show()}),0)}this.attachRO()}connectedCallback(){const t=this.mo=new MutationObserver((()=>this.resize()));t.observe(this.el,{childList:true,subtree:true,attributes:false});this.attachRO()}disconnectedCallback(){if(this.mo)this.mo.disconnect();if(this.ro)this.ro.disconnect()}render(){return e(i,{class:{...a(this.color)}},e("div",{class:{open:this.open,loaded:!this.isLoading}},e("button",{onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown,onTouchEnd:this.onMouseDown,"aria-controls":this.slideId,"aria-expanded":this.open?"true":"false",style:{display:this.noHandle?"none":""},part:"button"},this.hasStartSlot?e("span",{part:"icon--start",class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},e("slot",{name:"icon-start"})):"",e("div",{class:"label",part:"label"},this.label?this.label:e("slot",{name:"label"})),this.hasEndSlot?e("span",{part:"icon--end",class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},e("slot",{name:"icon-end"})):""),e("div",{class:"content",ref:t=>this.contentEl=t,tabindex:"-1",id:this.slideId,part:"content"},e("div",{ref:t=>this.contentArea=t,class:"content__area"},e("slot",null)))))}get el(){return s(this)}static get watchers(){return{open:["toggleClick"]}}};let b=0;l.style=c;export{l as nano_details};
+//# sourceMappingURL=p-b7c3aecb.entry.js.map

package/dist/nano-components/{p-9f8b091a.entry.js.map → p-b7c3aecb.entry.js.map} RENAMED Viewed

File without changes

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

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as n,h as a,g as e}from"./p-1fe12320.js";const t=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:inline-block;--base-color-rgb:var(--nano-indicator-rgb, 84, 140, 175);--indicator-color:var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));--track-color:var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));--overlay-color:var(--nano-layer-overlay-light, rgba(255, 255, 255, .7))}.spinner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}:host([overlay]:not([overlay=false])) .spinner{position:absolute;inset:0}:host([overlay]:not([overlay=false])) .spinner .spinner__loader,:host([overlay]:not([overlay=false])) .spinner .spinner__text{z-index:1}.spinner__overlay{background:var(--overlay-color);position:absolute;inset:0;z-index:0;-webkit-backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px));backdrop-filter:blur(var(--nano-layer-overlay-blur, 3px))}.spinner__loader{font-size:var(--spinner-scale, 1em)}.spinner__spin{display:block;margin:auto;inline-size:1em;block-size:1em;border-radius:50%;border:solid 0.1em var(--track-color);border-block-start-color:var(--indicator-color);border-inline-end-color:var(--indicator-color);border-inline-start-color:var(--indicator-color);-webkit-animation:1s linear infinite spin;animation:1s linear infinite spin}.spinner__dna{font-size:0.2286em;display:-webkit-box;display:-ms-flexbox;display:flex}.spinner__dnatrack{position:relative;padding-block:0;padding-inline:0.625em;block-size:4.375em;inline-size:0.625em;overflow:hidden}.spinner__dnatrack::before{content:"";position:absolute;inset-block-start:1.875em;inset-inline-start:50%;-webkit-transform:translateX(-50%) translateZ(0);transform:translateX(-50%) translateZ(0);inline-size:0.0625em;inline-size:max(.0625em, 1px);block-size:0.625em;background:var(--track-color);-webkit-animation:flex 1.5s linear infinite;animation:flex 1.5s linear infinite;-webkit-transform-origin:center center;transform-origin:center center}.spinner__dnatrack--2::before{-webkit-animation:flex 1.5s -1.3s linear infinite;animation:flex 1.5s -1.3s linear infinite}.spinner__dnatrack--3::before{-webkit-animation:flex 1.5s -1.1s linear infinite;animation:flex 1.5s -1.1s linear infinite}.spinner__dnatrack--4::before{-webkit-animation:flex 1.5s -0.9s linear infinite;animation:flex 1.5s -0.9s linear infinite}.spinner__dnatrack--5::before{-webkit-animation:flex 1.5s -0.75s linear infinite;animation:flex 1.5s -0.75s linear infinite}.spinner__dnadot{position:absolute;inline-size:0.5em;block-size:0.5em;border-radius:50% 50%;background:var(--indicator-color);-webkit-animation:rotate 1.5s linear infinite;animation:rotate 1.5s linear infinite;-webkit-transform-origin:center center;transform-origin:center center;inset-inline-start:50%;-webkit-transform:translateX(-50%) translateZ(0) translateY(0);transform:translateX(-50%) translateZ(0) translateY(0)}.spinner__dnadot--2{-webkit-animation:rotate 1.5s -0.75s linear infinite;animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--3{-webkit-animation:rotate 1.5s -1.3s linear infinite;animation:rotate 1.5s -1.3s linear infinite}.spinner__dnadot--4{-webkit-animation:rotate 1.5s -0.55s linear infinite;animation:rotate 1.5s -0.55s linear infinite}.spinner__dnadot--5{-webkit-animation:rotate 1.5s -1.1s linear infinite;animation:rotate 1.5s -1.1s linear infinite}.spinner__dnadot--6{-webkit-animation:rotate 1.5s -0.35s linear infinite;animation:rotate 1.5s -0.35s linear infinite}.spinner__dnadot--7{-webkit-animation:rotate 1.5s -0.9s linear infinite;animation:rotate 1.5s -0.9s linear infinite}.spinner__dnadot--8{-webkit-animation:rotate 1.5s -0.15s linear infinite;animation:rotate 1.5s -0.15s linear infinite}.spinner__dnadot--9{-webkit-animation:rotate 1.5s -0.75s linear infinite;animation:rotate 1.5s -0.75s linear infinite}.spinner__dnadot--10{-webkit-animation:rotate 1.5s 0s linear infinite;animation:rotate 1.5s 0s linear infinite}.spinner__text{text-align:center;position:relative;-webkit-margin-before:0.5em;margin-block-start:0.5em}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes rotate{0%,100%{-webkit-transform:translateX(-50%) translateY(0) scale(1);transform:translateX(-50%) translateY(0) scale(1)}25%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(2);transform:translateX(-50%) translateY(1.875em) scale(2)}50%{-webkit-transform:translateX(-50%) translateY(3.75em) scale(1);transform:translateX(-50%) translateY(3.75em) scale(1)}75%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(0.3);transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@keyframes rotate{0%,100%{-webkit-transform:translateX(-50%) translateY(0) scale(1);transform:translateX(-50%) translateY(0) scale(1)}25%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(2);transform:translateX(-50%) translateY(1.875em) scale(2)}50%{-webkit-transform:translateX(-50%) translateY(3.75em) scale(1);transform:translateX(-50%) translateY(3.75em) scale(1)}75%{-webkit-transform:translateX(-50%) translateY(1.875em) scale(0.3);transform:translateX(-50%) translateY(1.875em) scale(0.3)}}@-webkit-keyframes flex{0%,100%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}25%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}50%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}75%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}}@keyframes flex{0%,100%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}25%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}50%{-webkit-transform:translateX(-50%) scaleY(5);transform:translateX(-50%) scaleY(5)}75%{-webkit-transform:translateX(-50%) scaleY(1);transform:translateX(-50%) scaleY(1)}}';const i=class{constructor(a){n(this,a);this.hasText=false;this.type="dna";this.overlay=false}componentWillLoad(){this.hasText=!!this.el.childNodes.length}render(){return a("div",{class:"spinner","aria-busy":"true","aria-live":"polite"},a("div",{class:"spinner__loader"},this.type==="dna"&&a("div",{class:"spinner__dna"},a("div",{class:"spinner__dnatrack spinner__dnatrack--1"},a("div",{class:"spinner__dnadot spinner__dnadot--1"}),a("div",{class:"spinner__dnadot spinner__dnadot--2"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--2"},a("div",{class:"spinner__dnadot spinner__dnadot--3"}),a("div",{class:"spinner__dnadot spinner__dnadot--4"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--3"},a("div",{class:"spinner__dnadot spinner__dnadot--5"}),a("div",{class:"spinner__dnadot spinner__dnadot--6"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--4"},a("div",{class:"spinner__dnadot spinner__dnadot--7"}),a("div",{class:"spinner__dnadot spinner__dnadot--8"})),a("div",{class:"spinner__dnatrack spinner__dnatrack--5"},a("div",{class:"spinner__dnadot spinner__dnadot--9"}),a("div",{class:"spinner__dnadot spinner__dnadot--10"}))),this.type==="circle"&&a("span",{class:"spinner__spin"})),this.hasText&&a("div",{class:"spinner__text"},a("slot",null)),this.overlay&&a("div",{class:"spinner__overlay"}))}get el(){return e(this)}};i.style=t;export{i as nano_spinner};
+//# sourceMappingURL=p-d8e8d7e3.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/spinner/spinner.scss?tag=nano-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"names":["spinnerCss","Spinner","[object Object]","this","hasText","el","childNodes","length","h","class","aria-busy","aria-live","type","overlay"],"mappings":";;;kDAAA,MAAMA,EAAa,yqMCkBNC,EAAO,4CAEU,gBAGK,mBAGW,MAE5CC,oBACEC,KAAKC,UAAYD,KAAKE,GAAGC,WAAWC,OAGtCL,SACE,OACEM,EAAA,MAAA,CAAKC,MAAM,UAASC,YAAW,OAAMC,YAAW,UAC9CH,EAAA,MAAA,CAAKC,MAAM,mBACRN,KAAKS,OAAS,OACbJ,EAAA,MAAA,CAAKC,MAAM,gBACTD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,wCAEbD,EAAA,MAAA,CAAKC,MAAM,0CACTD,EAAA,MAAA,CAAKC,MAAM,uCACXD,EAAA,MAAA,CAAKC,MAAM,0CAIhBN,KAAKS,OAAS,UAAYJ,EAAA,OAAA,CAAMC,MAAM,mBAExCN,KAAKC,SACJI,EAAA,MAAA,CAAKC,MAAM,iBACTD,EAAA,OAAA,OAGHL,KAAKU,SAAWL,EAAA,MAAA,CAAKC,MAAM","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n /**\n * @prop --base-color-rgb: default #{$progress-indicator-color-rgb}\n * @prop --indicator-color: default var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));\n * @prop --track-color: default var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));\n * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size\n * @prop --overlay-color: #{$layer-overlay-light};\n */\n\n display: inline-block;\n\n // --spinner-scale: 5em;\n --base-color-rgb: #{$progress-indicator-color-rgb};\n --indicator-color: var(--nano-indicator-color, rgba(var(--base-color-rgb), 1));\n --track-color: var(--nano-track-color, rgba(var(--base-color-rgb), 0.2));\n --overlay-color: #{$layer-overlay-light};\n}\n\n.spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n :host([overlay]:not([overlay='false'])) & {\n position: absolute;\n inset: 0;\n\n .spinner__loader,\n .spinner__text {\n z-index: 1;\n }\n }\n\n &__overlay {\n background: var(--overlay-color);\n position: absolute;\n inset: 0;\n z-index: 0;\n backdrop-filter: blur(#{$layer-overlay-blur});\n }\n\n &__loader {\n font-size: var(--spinner-scale, 1em);\n }\n\n &__spin {\n display: block;\n margin: auto;\n inline-size: 1em;\n block-size: 1em;\n border-radius: 50%;\n border: solid 0.1em var(--track-color);\n border-block-start-color: var(--indicator-color);\n border-inline-end-color: var(--indicator-color);\n border-inline-start-color: var(--indicator-color);\n animation: 1s linear infinite spin;\n }\n\n &__dna {\n font-size: 0.2286em;\n display: flex;\n }\n\n &__dnatrack {\n position: relative;\n padding-block: 0;\n padding-inline: 0.625em;\n block-size: 4.375em;\n inline-size: 0.625em;\n overflow: hidden;\n\n &::before {\n content: '';\n position: absolute;\n inset-block-start: 1.875em;\n inset-inline-start: 50%;\n transform: translateX(-50%) translateZ(0);\n inline-size: 0.0625em;\n inline-size: #{'max(.0625em, 1px)'};\n block-size: 0.625em;\n background: var(--track-color);\n animation: flex 1.5s linear infinite;\n transform-origin: center center;\n }\n\n &--2::before {\n animation: flex 1.5s -1.3s linear infinite;\n }\n\n &--3::before {\n animation: flex 1.5s -1.1s linear infinite;\n }\n\n &--4::before {\n animation: flex 1.5s -0.9s linear infinite;\n }\n\n &--5::before {\n animation: flex 1.5s -0.75s linear infinite;\n }\n }\n\n &__dnadot {\n position: absolute;\n inline-size: 0.5em;\n block-size: 0.5em;\n border-radius: 50% 50%;\n background: var(--indicator-color);\n animation: rotate 1.5s linear infinite;\n transform-origin: center center;\n inset-inline-start: 50%;\n transform: translateX(-50%) translateZ(0) translateY(0);\n\n &--2 {\n animation: rotate 1.5s -0.75s linear infinite;\n }\n\n &--3 {\n animation: rotate 1.5s -1.3s linear infinite;\n }\n\n &--4 {\n animation: rotate 1.5s -0.55s linear infinite;\n }\n\n &--5 {\n animation: rotate 1.5s -1.1s linear infinite;\n }\n\n &--6 {\n animation: rotate 1.5s -0.35s linear infinite;\n }\n\n &--7 {\n animation: rotate 1.5s -0.9s linear infinite;\n }\n\n &--8 {\n animation: rotate 1.5s -0.15s linear infinite;\n }\n\n &--9 {\n animation: rotate 1.5s -0.75s linear infinite;\n }\n\n &--10 {\n animation: rotate 1.5s 0s linear infinite;\n }\n }\n\n &__text {\n text-align: center;\n position: relative;\n margin-block-start: 0.5em;\n }\n\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes rotate {\n 0%,\n 100% {\n transform: translateX(-50%) translateY(0) scale(1);\n }\n\n 25% {\n transform: translateX(-50%) translateY(1.875em) scale(2);\n }\n\n 50% {\n transform: translateX(-50%) translateY(3.75em) scale(1);\n }\n\n 75% {\n transform: translateX(-50%) translateY(1.875em) scale(0.3);\n }\n }\n\n @keyframes flex {\n 0%,\n 100% {\n transform: translateX(-50%) scaleY(5);\n }\n\n 25% {\n transform: translateX(-50%) scaleY(1);\n }\n\n 50% {\n transform: translateX(-50%) scaleY(5);\n }\n\n 75% {\n transform: translateX(-50%) scaleY(1);\n }\n }\n}\n","import {\n Component,\n h,\n ComponentInterface,\n Prop,\n Element,\n State,\n} from '@stencil/core';\n\n/**\n * Spinners are used to show the progress of an indeterminate operation.\n * @slot - Used for loading messages\n */\n@Component({\n tag: 'nano-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner implements ComponentInterface {\n @Element() el: HTMLNanoSpinnerElement;\n @State() hasText: boolean = false;\n\n /** The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders. */\n @Prop() type: 'dna' | 'circle' = 'dna';\n\n /** Displays absolutely with an overlay */\n @Prop({ reflect: true }) overlay: boolean = false;\n\n componentWillLoad() {\n this.hasText = !!this.el.childNodes.length;\n }\n\n render() {\n return (\n <div class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\">\n <div class=\"spinner__loader\">\n {this.type === 'dna' && (\n <div class=\"spinner__dna\">\n <div class=\"spinner__dnatrack spinner__dnatrack--1\">\n <div class=\"spinner__dnadot spinner__dnadot--1\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--2\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--2\">\n <div class=\"spinner__dnadot spinner__dnadot--3\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--4\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--3\">\n <div class=\"spinner__dnadot spinner__dnadot--5\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--6\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--4\">\n <div class=\"spinner__dnadot spinner__dnadot--7\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--8\"></div>\n </div>\n <div class=\"spinner__dnatrack spinner__dnatrack--5\">\n <div class=\"spinner__dnadot spinner__dnadot--9\"></div>\n <div class=\"spinner__dnadot spinner__dnadot--10\"></div>\n </div>\n </div>\n )}\n {this.type === 'circle' && <span class=\"spinner__spin\"></span>}\n </div>\n {this.hasText && (\n <div class=\"spinner__text\">\n <slot />\n </div>\n )}\n {this.overlay && <div class=\"spinner__overlay\"></div>}\n </div>\n );\n }\n}\n"]}

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

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r,h as a,g as t}from"./p-1fe12320.js";const e=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--height:1em;--track-color:rgba(var(--nano-track-rgb, 228, 230, 232), 1);--indicator-color:rgba(var(--nano-indicator-rgb, 84, 140, 175), 1);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);height:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{height:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;-webkit-transition:0.4s width, 0.4s background-color;transition:0.4s width, 0.4s background-color;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transform-origin:left;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{-webkit-animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@-webkit-keyframes indeterminate{0%{scale:1 1;-webkit-transform:translateX(-100%) translateZ(0);transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;-webkit-transform:translateX(100%) translateZ(0);transform:translateX(100%) translateZ(0)}}@keyframes indeterminate{0%{scale:1 1;-webkit-transform:translateX(-100%) translateZ(0);transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;-webkit-transform:translateX(100%) translateZ(0);transform:translateX(100%) translateZ(0)}}";const s=class{constructor(a){r(this,a);this.value=0;this.indeterminate=false;this.showPercent=false}render(){return a("div",{part:"base",class:{"progress-bar":true,"progress-bar--indeterminate":this.indeterminate},role:"progressbar",title:this.host.title||undefined,"aria-label":"Progress","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.indeterminate?null:this.value},a("div",{part:"indicator",class:"progress-bar__indicator",style:{width:`${this.value}%`}},a("span",{part:"label",class:"progress-bar__label"},a("slot",null,!this.indeterminate&&this.showPercent?`${this.value}%`:""))))}get host(){return t(this)}};s.style=e;export{s as nano_progress_bar};
+//# sourceMappingURL=p-f95a263c.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"sources":["src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"names":["progressBarCss","ProgressBar","[object Object]","h","part","class","progress-bar","progress-bar--indeterminate","this","indeterminate","role","title","host","undefined","aria-label","aria-valuemin","aria-valuemax","aria-valuenow","value","style","width","showPercent"],"mappings":";;;6CAAA,MAAMA,EAAiB,2nDCiBVC,EAAW,0CAIN,qBAGQ,uBAGF,MAEtBC,SACE,OACEC,EAAA,MAAA,CACEC,KAAK,OACLC,MAAO,CACLC,eAAgB,KAChBC,8BAA+BC,KAAKC,eAEtCC,KAAK,cACLC,MAAOH,KAAKI,KAAKD,OAASE,UAASC,aACxB,WAAUC,gBACP,IAAGC,gBACH,MAAKC,gBACJT,KAAKC,cAAgB,KAAOD,KAAKU,OAEhDf,EAAA,MAAA,CACEC,KAAK,YACLC,MAAM,0BACNc,MAAO,CACLC,MAAO,GAAGZ,KAAKU,WAGjBf,EAAA,OAAA,CAAMC,KAAK,QAAQC,MAAM,uBACvBF,EAAA,OAAA,MACIK,KAAKC,eAAiBD,KAAKa,YAAc,GAAGb,KAAKU,SAAW","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgba(#{$progress-track-color-rgb}, 1);\n * @prop --indicator-color: The indicator color. Default rgba(#{$progress-indicator-color-rgb}, 1);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n */\n:host {\n --height: 1em;\n --track-color: rgba(#{$progress-track-color-rgb}, 1);\n --indicator-color: rgba(#{$progress-indicator-color-rgb}, 1);\n --label-color: var(--nano-color-white, white);\n\n display: block;\n}\n\n.progress-bar {\n position: relative;\n background-color: var(--track-color);\n height: var(--height);\n border-radius: $layer-border-radius;\n overflow: hidden;\n}\n\n.progress-bar__indicator {\n height: 100%;\n font-size: 0.75em;\n background-color: var(--indicator-color);\n color: var(--label-color);\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n transition: 0.4s width, 0.4s background-color;\n transform: translateZ(0);\n user-select: none;\n transform-origin: left;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n 0% {\n scale: 1 1;\n transform: translateX(-100%) translateZ(0);\n }\n\n 75%,\n 100% {\n scale: 1 1;\n transform: translateX(100%) translateZ(0);\n }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n/**\n * Used to show the status of an ongoing operation.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n tag: 'nano-progress-bar',\n styleUrl: 'progress-bar.scss',\n shadow: true,\n})\nexport class ProgressBar {\n @Element() host: HTMLNanoProgressBarElement;\n\n /** The progress bar's percentage, 0 to 100. */\n @Prop() value = 0;\n\n /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n @Prop() indeterminate = false;\n\n /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot. */\n @Prop() showPercent = false;\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n 'progress-bar': true,\n 'progress-bar--indeterminate': this.indeterminate,\n }}\n role=\"progressbar\"\n title={this.host.title || undefined}\n aria-label=\"Progress\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n aria-valuenow={this.indeterminate ? null : this.value}\n >\n <div\n part=\"indicator\"\n class=\"progress-bar__indicator\"\n style={{\n width: `${this.value}%`,\n }}\n >\n <span part=\"label\" class=\"progress-bar__label\">\n <slot>\n {!this.indeterminate && this.showPercent ? `${this.value}%` : ''}\n </slot>\n </span>\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/types/components/global-nav/global-nav-interface.d.ts CHANGED Viewed

@@ -35,3 +35,46 @@ export interface MyAccountUser {
   is_nanopore_user: boolean;
   kudos: number;
 }
+export interface MyAccountData {
+  user: MyAccountUser;
+  cart: {
+    count: number;
+    url: string;
+  };
+  notifications: {
+    count: number;
+  };
+  hs: {
+    lists?: Array<number>;
+  };
+  registration: {
+    next_url: string | null;
+  };
+  links: null | MyAccountLink[];
+  urls: {
+    forgot_password: string | null;
+    logout: string | null;
+    login: string | null;
+    messages: string | null;
+    cart: string | null;
+  };
+  domains: [
+    {
+      origin: string;
+      domain: string;
+    }
+  ];
+  search: {
+    app_id: string;
+    api_key: string;
+    indeces: [
+      {
+        index: string;
+        name: string;
+        domain: string;
+        all_group?: boolean;
+        filters?: [string];
+      }
+    ];
+  };
+}

package/dist/types/components/global-nav/global-nav.d.ts CHANGED Viewed

@@ -139,7 +139,7 @@ export declare class GlobalNav implements ComponentInterface {
    */
   cartCount: number;
   /**
-   * MyAccount undread message count.
+   * MyAccount un-read message count.
    */
   msgCount: number;
   /**

package/dist/types/components/progress-bar/progress-bar.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/**
+ * Used to show the status of an ongoing operation.
+ *
+ * @slot - A label to show inside the indicator.
+ *
+ * @part base - The component's base wrapper.
+ * @part indicator - The progress bar indicator.
+ * @part label - The progress bar label.
+ */
+export declare class ProgressBar {
+  host: HTMLNanoProgressBarElement;
+  /** The progress bar's percentage, 0 to 100. */
+  value: number;
+  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
+  indeterminate: boolean;
+  /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */
+  showPercent: boolean;
+  render(): any;
+}

package/dist/types/components/table/table.children.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { FunctionalComponent } from '../../stencil-public-runtime';
+import { FunctionalComponent, VNode } from '../../stencil-public-runtime';
 import type { TableTypes } from '../../interface';
 declare type PinnedCb = (positions: {
   [key in TableTypes.Position]?: boolean;
@@ -24,6 +24,7 @@ export declare const TableColHead: FunctionalComponent<TableColHeadProps>;
 declare type TableCellProps = {
   rowIndex: number;
   colIndex: number;
+  nestedContent?: VNode;
 };
 export declare const TableCell: FunctionalComponent<TableCellProps>;
 export {};

package/dist/types/components/table/table.d.ts CHANGED Viewed

@@ -1,11 +1,19 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import type { TableTypes } from '../../interface';
 /**
- * Table
- * @slot - The tooltip's target element. Only the first element will be used as the target.
- * @slot content - The tooltip's content. Alternatively, you can use the content prop.
+ * A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.
+ * - Built-in search
+ * - Built-in column filter
+ * - Built-in column sort
+ * - Easily swap in API / async based search / filter & sort
+ * - Pin headers, footers, rows, columns
+ * - Add custom rendering at every level
+ * - Add custom properties at every level
+ *
+ * @slot caption - The table's caption. You must either use this or the `caption` attribute.
  */
 export declare class Table implements ComponentInterface {
+  constructor();
   /** The type of table. Grid type will make cells navigable by keyboard */
   type: 'grid' | 'table';
   /** A descriptive title of the table.
@@ -13,8 +21,17 @@ export declare class Table implements ComponentInterface {
   caption: string;
   /** Show the caption on-screen */
   showCaption: boolean;
+  /** Will show a loading state when true.
+   * Will be shown automatically if `rows` is a promise waiting to resolve
+   * or when performing custom filtering or sorting  */
+  get loading(): boolean;
+  set loading(l: boolean);
+  _loading: boolean;
+  private debounceSetLoading;
+  /** When loading rows asynchronously, this will render this number of placeholder rows */
+  placeholderSize: number;
   /** The data to place in the table */
-  rows: TableTypes.NanoTable['rows'];
+  rows: TableTypes.NanoTable['rows'] | Promise<TableTypes.NanoTable['rows']>;
   handleRowsChange(): void;
   /** The column config used to generate present the rows of data */
   columns: TableTypes.NanoTable['columns'];
@@ -82,7 +99,7 @@ export declare class Table implements ComponentInterface {
   nanoTblBeforeSearch: EventEmitter<{
     term: string;
   }>;
-  /** Fired after a general search */
+  /** Fired after a general / cross column search */
   nanoTblAfterSearch: EventEmitter<{
     term: string;
   }>;
@@ -108,6 +125,7 @@ export declare class Table implements ComponentInterface {
   private currentFilters;
   private currentSort;
   private tableEle;
+  private topAnchorEle;
   /** `tr` elements split into units - defined by `perPage`
     These are show / hidden for perf */
   blocks: TableTypes.TBody[];
@@ -169,8 +187,8 @@ export declare class Table implements ComponentInterface {
   /** cache the height for all active blocks for later renders */
   private setBlockHeight;
   /**
-   * Attaches an intersection observer to each rendered tbody elements
-   * shows / hides intersecting blocks' and sets heights for when their hidden
+   * Attaches an intersection observer to each rendered tbody element
+   * shows / hides intersecting blocks' and sets heights for when they're hidden
    * @param el - the tbody element to observe
    * @param blockIndex - the rendering tbody we're attaching the IO to
    */

package/dist/types/components/table/table.service.d.ts CHANGED Viewed

@@ -39,10 +39,4 @@ export declare function cellRender(rowIndex: number, colIndex: number): VNode;
  * @param col - the current column config object
  * @returns - a JSX node
  */
-export declare function colheadRender(col: TableTypes.ColumnConfig): VNode;
-/**
- * Renders a table header (within a tfoot) using a custom template if set.
- * @param col - the current column config object
- * @returns - a JSX node
- */
-export declare function colFootRender(col: TableTypes.ColumnConfig): VNode | void;
+export declare function colheadFootRender(col: TableTypes.ColumnConfig): VNode;

package/dist/types/components/table/table.store.d.ts CHANGED Viewed

@@ -9,11 +9,13 @@ export interface TableStores {
   }>;
   general: ObservableMap<{
     workerId: string;
+    scrollParent: HTMLElement;
+    host: HTMLNanoTableElement;
   }>;
 }
-export declare function generateStore(host: HTMLElement, rows: TableTypes.NanoTable['rows'], columns: TableTypes.NanoTable['columns']): Promise<TableStores>;
+export declare function generateStore(host: HTMLNanoTableElement, columns: TableTypes.NanoTable['columns'], scrollParent: HTMLElement): Promise<TableStores>;
 export declare function getStore(host: HTMLElement): TableStores;
-export declare function storeSetData(host: HTMLElement, rows: TableTypes.RowData[]): void;
+export declare function storeSetData(host: HTMLElement, rows: TableTypes.RowData[]): Promise<boolean>;
 export declare function storeSetConfig(host: HTMLElement, columns: TableTypes.ColumnConfig[]): void;
 export declare function storeSearch(host: HTMLElement, term: string): Promise<void>;
 export declare function storeFilter(host: HTMLElement, filters: TableTypes.Filter[]): Promise<void>;