npm - @travelopia/web-components - Versions diffs - 0.5.26 → 0.6.0 - Mend

@travelopia/web-components 0.5.26 → 0.6.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 (17) hide show

package/dist/accordion/index.js +1 -1
package/dist/accordion/index.js.map +1 -1
package/dist/declarations.d.ts +233 -54
package/dist/form/index.js +1 -1
package/dist/form/index.js.map +1 -1
package/dist/lightbox/index.js +1 -1
package/dist/lightbox/index.js.map +1 -1
package/dist/lightbox/style.css +1 -1
package/dist/modal/index.js +1 -1
package/dist/modal/index.js.map +1 -1
package/dist/multi-select/index.js +1 -1
package/dist/multi-select/index.js.map +1 -1
package/dist/slider/index.js +1 -1
package/dist/slider/index.js.map +1 -1
package/dist/tabs/index.js +1 -1
package/dist/tabs/index.js.map +1 -1
package/package.json +1 -1

package/dist/form/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dist/form/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/webpack/bootstrap","webpack://@travelopia/web-components/webpack/runtime/define property getters","webpack://@travelopia/web-components/webpack/runtime/hasOwnProperty shorthand","webpack://@travelopia/web-components/webpack/runtime/make namespace object","webpack://@travelopia/web-components/./src/form/utility.ts","webpack://@travelopia/web-components/./src/form/validators/required.ts","webpack://@travelopia/web-components/./src/form/validators/email.ts","webpack://@travelopia/web-components/./src/form/validators/min-length.ts","webpack://@travelopia/web-components/./src/form/validators/max-length.ts","webpack://@travelopia/web-components/./src/form/validators/no-empty-spaces.ts","webpack://@travelopia/web-components/./src/form/tp-form.ts","webpack://@travelopia/web-components/./src/form/tp-form-field.ts","webpack://@travelopia/web-components/./src/form/tp-form-error.ts","webpack://@travelopia/web-components/./src/form/tp-form-submit.ts","webpack://@travelopia/web-components/./src/form/index.ts"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","/*\n Get the error message based on its code.\n \n @param {string} error Error code.\n \n @return {string} The error message.\n /\nexport const getErrorMessage = ( error: string = '' ): string => {\n\tconst { tpFormErrors } = window;\n\tif ( ! tpFormErrors ) {\n\t\treturn '';\n\t}\n\n\tif ( '' !== error && error in tpFormErrors && 'string' === typeof tpFormErrors[ error ] ) {\n\t\treturn tpFormErrors[ error ];\n\t}\n\n\treturn '';\n};\n","/\n Internal dependencies.\n /\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/\n Name.\n /\nexport const name: string = 'required';\n\n/\n Error message.\n /\nexport const errorMessage: string = 'This field is required';\n\n/\n Validator.\n /\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\treturn '' !== field.getField()?.value ?? '';\n\t},\n\tgetErrorMessage: (): string => getErrorMessage( name ),\n};\n","/\n Internal dependencies.\n /\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/\n Name.\n /\nexport const name: string = 'email';\n\n/\n Error message.\n /\nexport const errorMessage: string = 'Please enter a valid email address';\n\n/\n Validator.\n /\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\treturn /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test( field.getField()?.value ?? '' );\n\t},\n\tgetErrorMessage: (): string => getErrorMessage( name ),\n};\n","/\n Internal dependencies.\n /\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/\n Name.\n /\nexport const name: string = 'min-length';\n\n/\n Error message.\n /\nexport const errorMessage: string = 'Must be at least %1 characters';\n\n/\n Validator.\n /\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\tconst minLength: number = parseInt( field.getAttribute( 'min-length' ) ?? '0' );\n\t\tconst value: string = field.getField()?.value ?? '';\n\n\t\treturn '' === value \|\| value.length >= minLength;\n\t},\n\tgetErrorMessage: ( field: TPFormFieldElement ): string => {\n\t\tconst error: string = getErrorMessage( name );\n\t\tconst minLength: string = field.getAttribute( 'min-length' ) ?? '';\n\n\t\treturn error.replace( '%1', minLength );\n\t},\n};\n","/\n Internal dependencies.\n /\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/\n Name.\n /\nexport const name: string = 'max-length';\n\n/\n Error message.\n /\nexport const errorMessage: string = 'Must be less than %1 characters';\n\n/\n Validator.\n /\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\tconst minLength: number = parseInt( field.getAttribute( 'max-length' ) ?? '0' );\n\t\tconst value: string = field.getField()?.value ?? '';\n\n\t\treturn '' === value \|\| value.length <= minLength;\n\t},\n\tgetErrorMessage: ( field: TPFormFieldElement ): string => {\n\t\tconst error: string = getErrorMessage( name );\n\t\tconst maxLength: string = field.getAttribute( 'max-length' ) ?? '';\n\n\t\treturn error.replace( '%1', maxLength );\n\t},\n};\n","/\n Internal dependencies.\n /\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/\n Name.\n /\nexport const name: string = 'no-empty-spaces';\n\n/\n Error message.\n /\nexport const errorMessage: string = 'This field should not contain only whitespaces';\n\n/\n Validator.\n /\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\tconst inputField = field.getField();\n\n\t\tif ( ! inputField ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// This case is not our concern. This is handled by `required` validator.\n\t\tif ( '' === inputField.value ) {\n\t\t\treturn true;\n\t\t}\n\n\t\treturn '' !== inputField.value.trim();\n\t},\n\tgetErrorMessage: (): string => getErrorMessage( name ),\n};\n","/\n Internal dependencies.\n /\nimport { TPFormFieldElement } from './tp-form-field';\nimport { TPFormSubmitElement } from './tp-form-submit';\n\n/\n TP Form.\n /\nexport class TPFormElement extends HTMLElement {\n\t/\n\t Properties.\n\t /\n\tprotected readonly form: HTMLFormElement \| null;\n\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\t\tthis.form = this.querySelector( 'form' );\n\t}\n\n\t/\n\t Connected callback.\n\t /\n\tconnectedCallback(): void {\n\t\tthis.form?.addEventListener( 'submit', this.handleFormSubmit.bind( this ) );\n\t}\n\n\t/\n\t Handle form submission.\n\t \n\t @param {Event} e Submit event.\n\t /\n\tprotected handleFormSubmit( e: SubmitEvent ): void {\n\t\tconst formValid: boolean = this.validate();\n\t\tif ( ! formValid \|\| 'yes' === this.getAttribute( 'prevent-submit' ) ) {\n\t\t\te.preventDefault();\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\n\t\tconst submit: TPFormSubmitElement \| null = this.querySelector( 'tp-form-submit' );\n\t\tif ( submit ) {\n\t\t\tif ( formValid ) {\n\t\t\t\tsubmit.setAttribute( 'submitting', 'yes' );\n\t\t\t} else {\n\t\t\t\tsubmit.removeAttribute( 'submitting' );\n\t\t\t}\n\t\t}\n\n\t\tif ( formValid ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'submit-validation-success', { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/\n\t Validate the form.\n\t \n\t @return {boolean} Whether the form is valid or not.\n\t /\n\tvalidate(): boolean {\n\t\tthis.dispatchEvent( new CustomEvent( 'validate', { bubbles: true } ) );\n\n\t\tconst fields: NodeListOf<TPFormFieldElement> \| null = this.querySelectorAll( 'tp-form-field' );\n\t\tif ( ! fields ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-success', { bubbles: true } ) );\n\t\t\treturn true;\n\t\t}\n\n\t\tlet formValid: boolean = true;\n\t\tfields.forEach( ( field: TPFormFieldElement ): void => {\n\t\t\tif ( ! field.validate() ) {\n\t\t\t\tformValid = false;\n\t\t\t}\n\t\t} );\n\n\t\tif ( formValid ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-success', { bubbles: true } ) );\n\t\t} else {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-error', { bubbles: true } ) );\n\t\t}\n\n\t\treturn formValid;\n\t}\n\n\t/\n\t Reset form validation.\n\t /\n\tresetValidation(): void {\n\t\tconst fields: NodeListOf<TPFormFieldElement> \| null = this.querySelectorAll( 'tp-form-field' );\n\t\tif ( ! fields ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfields.forEach( ( field: TPFormFieldElement ): void => {\n\t\t\tfield.removeAttribute( 'valid' );\n\t\t\tfield.removeAttribute( 'error' );\n\t\t} );\n\n\t\tconst submit: TPFormSubmitElement \| null = this.querySelector( 'tp-form-submit' );\n\t\tsubmit?.removeAttribute( 'submitting' );\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPFormErrorElement } from './tp-form-error';\n\n/\n TP Form Field.\n /\nexport class TPFormFieldElement extends HTMLElement {\n\t/\n\t Connected callback.\n\t /\n\tconnectedCallback(): void {\n\t\tconst field = this.getField();\n\t\tfield?.addEventListener( 'keyup', this.handleFieldChanged.bind( this ) );\n\t\tfield?.addEventListener( 'change', this.handleFieldChanged.bind( this ) );\n\t}\n\n\t/\n\t Update validation when the field has changed.\n\t /\n\thandleFieldChanged(): void {\n\t\tif ( this.getAttribute( 'valid' ) \|\| this.getAttribute( 'error' ) ) {\n\t\t\tthis.validate();\n\t\t}\n\t}\n\n\t/\n\t Get observed attributes.\n\t \n\t @return {Array} List of observed attributes.\n\t /\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'valid', 'error' ];\n\t}\n\n\t/\n\t Attribute changed callback.\n\t \n\t @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t /\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( ( 'valid' === name \|\| 'error' === name ) && oldValue !== newValue ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validate', { bubbles: true } ) );\n\t\t}\n\t\tthis.update();\n\t}\n\n\t/\n\t Update component.\n\t /\n\tupdate(): void {\n\t\tconst { tpFormValidators } = window;\n\t\tif ( ! tpFormValidators ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst error: string = this.getAttribute( 'error' ) ?? '';\n\t\tif ( '' !== error && error in tpFormValidators && 'function' === typeof tpFormValidators[ error ].getErrorMessage ) {\n\t\t\tthis.setErrorMessage( tpFormValidators[ error ].getErrorMessage( this ) );\n\t\t} else {\n\t\t\tthis.removeErrorMessage();\n\t\t}\n\t}\n\n\t/\n\t Get the associated field.\n\t \n\t @return {HTMLElement} The associated field for this component.\n\t /\n\tgetField(): HTMLInputElement \| HTMLSelectElement \| HTMLTextAreaElement \| null {\n\t\treturn this.querySelector( 'input,select,textarea' );\n\t}\n\n\t/\n\t Validate this field.\n\t \n\t @return {boolean} Whether this field passed validation.\n\t /\n\tvalidate(): boolean {\n\t\t// Look for validators.\n\t\tconst { tpFormValidators } = window;\n\t\tif ( ! tpFormValidators ) {\n\t\t\treturn true;\n\t\t}\n\n\t\t// Check if the field is not visible.\n\t\tif ( this.offsetWidth <= 0 \|\| this.offsetHeight <= 0 ) {\n\t\t\treturn true;\n\t\t}\n\n\t\t// Prepare error and valid status.\n\t\tlet valid: boolean = true;\n\t\tlet error: string = '';\n\t\tconst allAttributes: string[] = this.getAttributeNames();\n\n\t\t// Traverse all attributes to see if we find a matching validator.\n\t\tallAttributes.every( ( attributeName: string ): boolean => {\n\t\t\tif ( attributeName in tpFormValidators && 'function' === typeof tpFormValidators[ attributeName ].validate ) {\n\t\t\t\t// We found one, lets validate the field.\n\t\t\t\tconst isValid: boolean = tpFormValidators[ attributeName ].validate( this );\n\n\t\t\t\t// Looks like we found an error!\n\t\t\t\tif ( false === isValid ) {\n\t\t\t\t\tvalid = false;\n\t\t\t\t\terror = attributeName;\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// No error found, all good.\n\t\t\treturn true;\n\t\t} );\n\n\t\t// Check if the field is valid or not.\n\t\tif ( valid ) {\n\t\t\tthis.setAttribute( 'valid', 'yes' );\n\t\t\tthis.removeAttribute( 'error' );\n\t\t} else {\n\t\t\tthis.removeAttribute( 'valid' );\n\t\t\tthis.setAttribute( 'error', error );\n\t\t}\n\n\t\t// Return validity.\n\t\treturn valid;\n\t}\n\n\t/\n\t Set the error message.\n\t \n\t @param {string} message Error message.\n\t /\n\tsetErrorMessage( message: string = '' ): void {\n\t\tconst error: TPFormErrorElement \| null = this.querySelector( 'tp-form-error' );\n\t\tif ( error ) {\n\t\t\terror.innerHTML = message;\n\t\t} else {\n\t\t\tconst errorElement: TPFormErrorElement = document.createElement( 'tp-form-error' );\n\t\t\terrorElement.innerHTML = message;\n\t\t\tthis.appendChild( errorElement );\n\t\t}\n\n\t\tthis.dispatchEvent( new CustomEvent( 'validation-error' ) );\n\t}\n\n\t/\n\t Remove the error message.\n\t /\n\tremoveErrorMessage(): void {\n\t\tthis.querySelector( 'tp-form-error' )?.remove();\n\t\tthis.dispatchEvent( new CustomEvent( 'validation-success' ) );\n\t}\n}\n","/\n TP Form Error.\n /\nexport class TPFormErrorElement extends HTMLElement {\n}\n","/\n TP Form Submit.\n /\nexport class TPFormSubmitElement extends HTMLElement {\n\t/\n\t Get observed attributes.\n\t \n\t @return {Array} List of observed attributes.\n\t /\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'submitting-text', 'original-text', 'submitting' ];\n\t}\n\n\t/\n\t Attribute changed callback.\n\t \n\t @param {string} _name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t /\n\tattributeChangedCallback( _name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( oldValue !== newValue ) {\n\t\t\tthis.update();\n\t\t}\n\t}\n\n\t/\n\t Update this component.\n\t /\n\tupdate(): void {\n\t\t// Get submit button.\n\t\tconst submitButton: HTMLButtonElement \| null = this.querySelector( 'button[type=\"submit\"]' );\n\t\tif ( ! submitButton ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prepare submit button text.\n\t\tconst submittingText: string = this.getAttribute( 'submitting-text' ) ?? '';\n\t\tconst originalText: string = this.getAttribute( 'original-text' ) ?? submitButton.innerHTML;\n\n\t\t// Check if we are submitting.\n\t\tif ( 'yes' === this.getAttribute( 'submitting' ) ) {\n\t\t\tsubmitButton.setAttribute( 'disabled', 'disabled' );\n\t\t\tthis.setAttribute( 'original-text', originalText );\n\t\t\tsubmitButton.innerHTML = submittingText;\n\t\t} else {\n\t\t\tsubmitButton.removeAttribute( 'disabled' );\n\t\t\tthis.removeAttribute( 'submitting' );\n\t\t\tthis.removeAttribute( 'original-text' );\n\t\t\tsubmitButton.innerHTML = originalText;\n\t\t}\n\t}\n}\n","/\n Styles.\n /\nimport './style.scss';\n\n/\n Validators.\n /\nimport { TPFormValidator } from './definitions';\nimport as required from './validators/required';\nimport * as email from './validators/email';\nimport * as minLength from './validators/min-length';\nimport * as maxLength from './validators/max-length';\nimport * as noEmptySpaces from './validators/no-empty-spaces';\n\nconst validators = [\n\trequired,\n\temail,\n\tminLength,\n\tmaxLength,\n\tnoEmptySpaces,\n];\n\n/*\n Register Validators and Errors.\n /\nwindow.tpFormValidators = {};\nwindow.tpFormErrors = {};\n\nvalidators.forEach( (\n\t{ name, validator, errorMessage }: { name: string, validator: TPFormValidator, errorMessage: string }\n): void => {\n\twindow.tpFormValidators[ name ] = validator;\n\twindow.tpFormErrors[ name ] = errorMessage;\n} );\n\n/\n Components.\n /\nimport { TPFormElement } from './tp-form';\nimport { TPFormFieldElement } from './tp-form-field';\nimport { TPFormErrorElement } from './tp-form-error';\nimport { TPFormSubmitElement } from './tp-form-submit';\n\n/\n Register Components.\n */\ncustomElements.define( 'tp-form', TPFormElement );\ncustomElements.define( 'tp-form-field', TPFormFieldElement );\ncustomElements.define( 'tp-form-error', TPFormErrorElement );\ncustomElements.define( 'tp-form-submit', TPFormSubmitElement );\n\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","getErrorMessage","error","tpFormErrors","window","errorMessage","validator","validate","field","getField","test","minLength","parseInt","getAttribute","length","replace","maxLength","inputField","trim","TPFormElement","HTMLElement","constructor","super","this","form","querySelector","connectedCallback","addEventListener","handleFormSubmit","bind","e","formValid","preventDefault","stopImmediatePropagation","submit","setAttribute","removeAttribute","dispatchEvent","CustomEvent","bubbles","fields","querySelectorAll","forEach","resetValidation","TPFormFieldElement","handleFieldChanged","observedAttributes","attributeChangedCallback","name","oldValue","newValue","update","tpFormValidators","setErrorMessage","removeErrorMessage","offsetWidth","offsetHeight","valid","getAttributeNames","every","attributeName","message","innerHTML","errorElement","document","createElement","appendChild","remove","TPFormErrorElement","TPFormSubmitElement","_name","submitButton","submittingText","originalText","validators","customElements","define"],"sourceRoot":""}
1	+ {"version":3,"file":"dist/form/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/webpack/bootstrap","webpack://@travelopia/web-components/webpack/runtime/define property getters","webpack://@travelopia/web-components/webpack/runtime/hasOwnProperty shorthand","webpack://@travelopia/web-components/webpack/runtime/make namespace object","webpack://@travelopia/web-components/./src/form/utility.ts","webpack://@travelopia/web-components/./src/form/validators/required.ts","webpack://@travelopia/web-components/./src/form/validators/email.ts","webpack://@travelopia/web-components/./src/form/validators/min-length.ts","webpack://@travelopia/web-components/./src/form/validators/max-length.ts","webpack://@travelopia/web-components/./src/form/validators/no-empty-spaces.ts","webpack://@travelopia/web-components/./src/form/tp-form.ts","webpack://@travelopia/web-components/./src/form/tp-form-field.ts","webpack://@travelopia/web-components/./src/form/tp-form-error.ts","webpack://@travelopia/web-components/./src/form/tp-form-submit.ts","webpack://@travelopia/web-components/./src/form/index.ts"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","/*\n Get the error message based on its code.\n \n @param {string} error Error code.\n \n @return {string} The error message.\n /\nexport const getErrorMessage = ( error: string = '' ): string => {\n\tconst { tpFormErrors } = window;\n\tif ( ! tpFormErrors ) {\n\t\treturn '';\n\t}\n\n\tif ( '' !== error && error in tpFormErrors && 'string' === typeof tpFormErrors[ error ] ) {\n\t\treturn tpFormErrors[ error ];\n\t}\n\n\treturn '';\n};\n","/\n Internal dependencies.\n /\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/\n Name.\n /\nexport const name: string = 'required';\n\n/\n Error message.\n /\nexport const errorMessage: string = 'This field is required';\n\n/\n Validator.\n /\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\treturn '' !== field.getField()?.value ?? '';\n\t},\n\tgetErrorMessage: (): string => getErrorMessage( name ),\n};\n","/\n Internal dependencies.\n /\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/\n Name.\n /\nexport const name: string = 'email';\n\n/\n Error message.\n /\nexport const errorMessage: string = 'Please enter a valid email address';\n\n/\n Validator.\n /\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\treturn /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test( field.getField()?.value ?? '' );\n\t},\n\tgetErrorMessage: (): string => getErrorMessage( name ),\n};\n","/\n Internal dependencies.\n /\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/\n Name.\n /\nexport const name: string = 'min-length';\n\n/\n Error message.\n /\nexport const errorMessage: string = 'Must be at least %1 characters';\n\n/\n Validator.\n /\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\tconst minLength: number = parseInt( field.getAttribute( 'min-length' ) ?? '0' );\n\t\tconst value: string = field.getField()?.value ?? '';\n\n\t\treturn '' === value \|\| value.length >= minLength;\n\t},\n\tgetErrorMessage: ( field: TPFormFieldElement ): string => {\n\t\tconst error: string = getErrorMessage( name );\n\t\tconst minLength: string = field.getAttribute( 'min-length' ) ?? '';\n\n\t\treturn error.replace( '%1', minLength );\n\t},\n};\n","/\n Internal dependencies.\n /\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/\n Name.\n /\nexport const name: string = 'max-length';\n\n/\n Error message.\n /\nexport const errorMessage: string = 'Must be less than %1 characters';\n\n/\n Validator.\n /\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\tconst minLength: number = parseInt( field.getAttribute( 'max-length' ) ?? '0' );\n\t\tconst value: string = field.getField()?.value ?? '';\n\n\t\treturn '' === value \|\| value.length <= minLength;\n\t},\n\tgetErrorMessage: ( field: TPFormFieldElement ): string => {\n\t\tconst error: string = getErrorMessage( name );\n\t\tconst maxLength: string = field.getAttribute( 'max-length' ) ?? '';\n\n\t\treturn error.replace( '%1', maxLength );\n\t},\n};\n","/\n Internal dependencies.\n /\nimport { TPFormFieldElement } from '../tp-form-field';\nimport { TPFormValidator } from '../definitions';\nimport { getErrorMessage } from '../utility';\n\n/\n Name.\n /\nexport const name: string = 'no-empty-spaces';\n\n/\n Error message.\n /\nexport const errorMessage: string = 'This field should not contain only whitespaces';\n\n/\n Validator.\n /\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\tconst inputField = field.getField();\n\n\t\tif ( ! inputField ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// This case is not our concern. This is handled by `required` validator.\n\t\tif ( '' === inputField.value ) {\n\t\t\treturn true;\n\t\t}\n\n\t\treturn '' !== inputField.value.trim();\n\t},\n\tgetErrorMessage: (): string => getErrorMessage( name ),\n};\n","/\n Internal dependencies.\n /\nimport { TPFormFieldElement } from './tp-form-field';\nimport { TPFormSubmitElement } from './tp-form-submit';\n\n/\n TP Form.\n /\nexport class TPFormElement extends HTMLElement {\n\t/\n\t Properties.\n\t /\n\tprotected readonly form: HTMLFormElement \| null;\n\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\t\tthis.form = this.querySelector( 'form' );\n\t\tthis.form?.addEventListener( 'submit', this.handleFormSubmit.bind( this ) );\n\t}\n\n\t/\n\t Handle form submission.\n\t \n\t @param {Event} e Submit event.\n\t /\n\tprotected handleFormSubmit( e: SubmitEvent ): void {\n\t\tconst formValid: boolean = this.validate();\n\t\tif ( ! formValid \|\| 'yes' === this.getAttribute( 'prevent-submit' ) ) {\n\t\t\te.preventDefault();\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\n\t\tconst submit: TPFormSubmitElement \| null = this.querySelector( 'tp-form-submit' );\n\t\tif ( submit ) {\n\t\t\tif ( formValid ) {\n\t\t\t\tsubmit.setAttribute( 'submitting', 'yes' );\n\t\t\t} else {\n\t\t\t\tsubmit.removeAttribute( 'submitting' );\n\t\t\t}\n\t\t}\n\n\t\tif ( formValid ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'submit-validation-success', { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/\n\t Validate the form.\n\t \n\t @return {boolean} Whether the form is valid or not.\n\t /\n\tvalidate(): boolean {\n\t\tthis.dispatchEvent( new CustomEvent( 'validate', { bubbles: true } ) );\n\n\t\tconst fields: NodeListOf<TPFormFieldElement> \| null = this.querySelectorAll( 'tp-form-field' );\n\t\tif ( ! fields ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-success', { bubbles: true } ) );\n\t\t\treturn true;\n\t\t}\n\n\t\tlet formValid: boolean = true;\n\t\tfields.forEach( ( field: TPFormFieldElement ): void => {\n\t\t\tif ( ! field.validate() ) {\n\t\t\t\tformValid = false;\n\t\t\t}\n\t\t} );\n\n\t\tif ( formValid ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-success', { bubbles: true } ) );\n\t\t} else {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-error', { bubbles: true } ) );\n\t\t}\n\n\t\treturn formValid;\n\t}\n\n\t/\n\t Reset form validation.\n\t /\n\tresetValidation(): void {\n\t\tconst fields: NodeListOf<TPFormFieldElement> \| null = this.querySelectorAll( 'tp-form-field' );\n\t\tif ( ! fields ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfields.forEach( ( field: TPFormFieldElement ): void => {\n\t\t\tfield.removeAttribute( 'valid' );\n\t\t\tfield.removeAttribute( 'error' );\n\t\t} );\n\n\t\tconst submit: TPFormSubmitElement \| null = this.querySelector( 'tp-form-submit' );\n\t\tsubmit?.removeAttribute( 'submitting' );\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPFormErrorElement } from './tp-form-error';\n\n/\n TP Form Field.\n /\nexport class TPFormFieldElement extends HTMLElement {\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\t\tconst field = this.getField();\n\t\tfield?.addEventListener( 'keyup', this.handleFieldChanged.bind( this ) );\n\t\tfield?.addEventListener( 'change', this.handleFieldChanged.bind( this ) );\n\t}\n\n\t/\n\t Update validation when the field has changed.\n\t /\n\thandleFieldChanged(): void {\n\t\tif ( this.getAttribute( 'valid' ) \|\| this.getAttribute( 'error' ) ) {\n\t\t\tthis.validate();\n\t\t}\n\t}\n\n\t/\n\t Get observed attributes.\n\t \n\t @return {Array} List of observed attributes.\n\t /\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'valid', 'error' ];\n\t}\n\n\t/\n\t Attribute changed callback.\n\t \n\t @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t /\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( ( 'valid' === name \|\| 'error' === name ) && oldValue !== newValue ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validate', { bubbles: true } ) );\n\t\t}\n\t\tthis.update();\n\t}\n\n\t/\n\t Update component.\n\t /\n\tupdate(): void {\n\t\tconst { tpFormValidators } = window;\n\t\tif ( ! tpFormValidators ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst error: string = this.getAttribute( 'error' ) ?? '';\n\t\tif ( '' !== error && error in tpFormValidators && 'function' === typeof tpFormValidators[ error ].getErrorMessage ) {\n\t\t\tthis.setErrorMessage( tpFormValidators[ error ].getErrorMessage( this ) );\n\t\t} else {\n\t\t\tthis.removeErrorMessage();\n\t\t}\n\t}\n\n\t/\n\t Get the associated field.\n\t \n\t @return {HTMLElement} The associated field for this component.\n\t /\n\tgetField(): HTMLInputElement \| HTMLSelectElement \| HTMLTextAreaElement \| null {\n\t\treturn this.querySelector( 'input,select,textarea' );\n\t}\n\n\t/\n\t Validate this field.\n\t \n\t @return {boolean} Whether this field passed validation.\n\t /\n\tvalidate(): boolean {\n\t\t// Look for validators.\n\t\tconst { tpFormValidators } = window;\n\t\tif ( ! tpFormValidators ) {\n\t\t\treturn true;\n\t\t}\n\n\t\t// Check if the field is not visible.\n\t\tif ( this.offsetWidth <= 0 \|\| this.offsetHeight <= 0 ) {\n\t\t\treturn true;\n\t\t}\n\n\t\t// Prepare error and valid status.\n\t\tlet valid: boolean = true;\n\t\tlet error: string = '';\n\t\tconst allAttributes: string[] = this.getAttributeNames();\n\n\t\t// Traverse all attributes to see if we find a matching validator.\n\t\tallAttributes.every( ( attributeName: string ): boolean => {\n\t\t\tif ( attributeName in tpFormValidators && 'function' === typeof tpFormValidators[ attributeName ].validate ) {\n\t\t\t\t// We found one, lets validate the field.\n\t\t\t\tconst isValid: boolean = tpFormValidators[ attributeName ].validate( this );\n\n\t\t\t\t// Looks like we found an error!\n\t\t\t\tif ( false === isValid ) {\n\t\t\t\t\tvalid = false;\n\t\t\t\t\terror = attributeName;\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// No error found, all good.\n\t\t\treturn true;\n\t\t} );\n\n\t\t// Check if the field is valid or not.\n\t\tif ( valid ) {\n\t\t\tthis.setAttribute( 'valid', 'yes' );\n\t\t\tthis.removeAttribute( 'error' );\n\t\t} else {\n\t\t\tthis.removeAttribute( 'valid' );\n\t\t\tthis.setAttribute( 'error', error );\n\t\t}\n\n\t\t// Return validity.\n\t\treturn valid;\n\t}\n\n\t/\n\t Set the error message.\n\t \n\t @param {string} message Error message.\n\t /\n\tsetErrorMessage( message: string = '' ): void {\n\t\tconst error: TPFormErrorElement \| null = this.querySelector( 'tp-form-error' );\n\t\tif ( error ) {\n\t\t\terror.innerHTML = message;\n\t\t} else {\n\t\t\tconst errorElement: TPFormErrorElement = document.createElement( 'tp-form-error' );\n\t\t\terrorElement.innerHTML = message;\n\t\t\tthis.appendChild( errorElement );\n\t\t}\n\n\t\tthis.dispatchEvent( new CustomEvent( 'validation-error' ) );\n\t}\n\n\t/\n\t Remove the error message.\n\t /\n\tremoveErrorMessage(): void {\n\t\tthis.querySelector( 'tp-form-error' )?.remove();\n\t\tthis.dispatchEvent( new CustomEvent( 'validation-success' ) );\n\t}\n}\n","/\n TP Form Error.\n /\nexport class TPFormErrorElement extends HTMLElement {\n}\n","/\n TP Form Submit.\n /\nexport class TPFormSubmitElement extends HTMLElement {\n\t/\n\t Get observed attributes.\n\t \n\t @return {Array} List of observed attributes.\n\t /\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'submitting-text', 'original-text', 'submitting' ];\n\t}\n\n\t/\n\t Attribute changed callback.\n\t \n\t @param {string} _name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t /\n\tattributeChangedCallback( _name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( oldValue !== newValue ) {\n\t\t\tthis.update();\n\t\t}\n\t}\n\n\t/\n\t Update this component.\n\t /\n\tupdate(): void {\n\t\t// Get submit button.\n\t\tconst submitButton: HTMLButtonElement \| null = this.querySelector( 'button[type=\"submit\"]' );\n\t\tif ( ! submitButton ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prepare submit button text.\n\t\tconst submittingText: string = this.getAttribute( 'submitting-text' ) ?? '';\n\t\tconst originalText: string = this.getAttribute( 'original-text' ) ?? submitButton.innerHTML;\n\n\t\t// Check if we are submitting.\n\t\tif ( 'yes' === this.getAttribute( 'submitting' ) ) {\n\t\t\tsubmitButton.setAttribute( 'disabled', 'disabled' );\n\t\t\tthis.setAttribute( 'original-text', originalText );\n\t\t\tsubmitButton.innerHTML = submittingText;\n\t\t} else {\n\t\t\tsubmitButton.removeAttribute( 'disabled' );\n\t\t\tthis.removeAttribute( 'submitting' );\n\t\t\tthis.removeAttribute( 'original-text' );\n\t\t\tsubmitButton.innerHTML = originalText;\n\t\t}\n\t}\n}\n","/\n Styles.\n /\nimport './style.scss';\n\n/\n Validators.\n /\nimport { TPFormValidator } from './definitions';\nimport as required from './validators/required';\nimport * as email from './validators/email';\nimport * as minLength from './validators/min-length';\nimport * as maxLength from './validators/max-length';\nimport * as noEmptySpaces from './validators/no-empty-spaces';\n\nconst validators = [\n\trequired,\n\temail,\n\tminLength,\n\tmaxLength,\n\tnoEmptySpaces,\n];\n\n/*\n Register Validators and Errors.\n /\nwindow.tpFormValidators = {};\nwindow.tpFormErrors = {};\n\nvalidators.forEach( (\n\t{ name, validator, errorMessage }: { name: string, validator: TPFormValidator, errorMessage: string }\n): void => {\n\twindow.tpFormValidators[ name ] = validator;\n\twindow.tpFormErrors[ name ] = errorMessage;\n} );\n\n/\n Components.\n /\nimport { TPFormElement } from './tp-form';\nimport { TPFormFieldElement } from './tp-form-field';\nimport { TPFormErrorElement } from './tp-form-error';\nimport { TPFormSubmitElement } from './tp-form-submit';\n\n/\n Register Components.\n */\ncustomElements.define( 'tp-form', TPFormElement );\ncustomElements.define( 'tp-form-field', TPFormFieldElement );\ncustomElements.define( 'tp-form-error', TPFormErrorElement );\ncustomElements.define( 'tp-form-submit', TPFormSubmitElement );\n\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","getErrorMessage","error","tpFormErrors","window","errorMessage","validator","validate","field","getField","test","minLength","parseInt","getAttribute","length","replace","maxLength","inputField","trim","TPFormElement","HTMLElement","constructor","super","this","form","querySelector","addEventListener","handleFormSubmit","bind","e","formValid","preventDefault","stopImmediatePropagation","submit","setAttribute","removeAttribute","dispatchEvent","CustomEvent","bubbles","fields","querySelectorAll","forEach","resetValidation","TPFormFieldElement","handleFieldChanged","observedAttributes","attributeChangedCallback","name","oldValue","newValue","update","tpFormValidators","setErrorMessage","removeErrorMessage","offsetWidth","offsetHeight","valid","getAttributeNames","every","attributeName","message","innerHTML","errorElement","document","createElement","appendChild","remove","TPFormErrorElement","TPFormSubmitElement","_name","submitButton","submittingText","originalText","validators","customElements","define"],"sourceRoot":""}

package/dist/lightbox/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-(()=>{"use strict";class e extends HTMLElement{constructor(){super(...arguments),this.slider=null,this.modal=null}connectedCallback(){const e=this.querySelector("img");null==e||e.addEventListener("click",this.open.bind(this))}open(){const e=this.getAttribute("modal-template");if(!e)return;const t=document.querySelector(e);if(!t)return;const i=document.createElement("div");i.innerHTML=t.innerHTML.replace("{content}",this.getSliderMarkup()),this.modal=i.querySelector("tp-modal"),this.modal&&(document.body.append(this.modal),"open"in this.modal&&"function"==typeof this.modal.open&&this.modal.open(),this.modal.addEventListener("close",this.close.bind(this)))}close(){var e;null===(e=this.modal)||void 0===e||e.remove()}getSliderMarkup(){const e=this.getAttribute("group");if(!e)return"";const t=this.getAttribute("slider-template");if(!t)return"";const i=document.querySelector(t);if(!i)return"";const r=document.createElement("div");r.innerHTML=i.innerHTML;const n=r.querySelector("tp-slider"),o=r.querySelector("tp-slider-slide");if(!n||!o)return"";const l=document.querySelectorAll(`tp-lightbox[group="${e}"]`);if(!l)return"";let s="",u=-1;return l.forEach(((e,t)=>{var i;this===e&&(u=t+1),s+=o.outerHTML.replace("{media}",e.getMediaEmbed()).replace("{caption}",null!==(i=e.getAttribute("caption"))&&void 0!==i?i:"")})),o.insertAdjacentHTML("afterend",s),o.remove(),-1!==u&&n.setAttribute("current-slide",u.toString()),n.removeAttribute("initialized"),r.innerHTML}getMediaEmbed(){return this.getAttribute("image-url")?`<img src="${this.getAttribute("image-url")}" loading="lazy">`:this.getAttribute("video-url")?`<iframe src="${this.getAttribute("video-url")}"></iframe>`:""}}customElements.define("tp-lightbox",e)})();
+(()=>{"use strict";class t extends HTMLElement{constructor(){var t;super(),this.currentTemplate=null,this.currentGroup="",this.allGroups=null,null===(t=this.querySelector("dialog"))||void 0===t||t.addEventListener("click",this.handleDialogClick.bind(this))}static get observedAttributes(){return["open","index","total","close-on-overlay-click","loading"]}attributeChangedCallback(t="",e="",r=""){e!==r&&(this.dispatchEvent(new CustomEvent("change")),"index"===t&&this.triggerCurrentIndexTarget())}get template(){return this.currentTemplate}set template(t){this.currentTemplate=t,this.dispatchEvent(new CustomEvent("template-set"));const e=this.querySelector("tp-lightbox-content");if(e)if(this.currentTemplate){const t=this.currentTemplate.content.cloneNode(!0);e.replaceChildren(t),this.dispatchEvent(new CustomEvent("content-change")),setTimeout((()=>{this.prepareImageLoading(),this.prepareNavigation()}),0)}else e.innerHTML=""}get group(){return this.currentGroup}set group(t){this.currentGroup=t}get currentIndex(){var t;return parseInt(null!==(t=this.getAttribute("index"))&&void 0!==t?t:"1")}set currentIndex(t){t<1&&(t=1),this.setAttribute("index",t.toString())}triggerCurrentIndexTarget(){const t=this.getAllGroups();t&&t[this.currentIndex-1]&&t[this.currentIndex-1].trigger()}open(){const t=this.querySelector("dialog");t&&!t.open&&(""===this.group||this.allGroups||this.updateAllGroups(),t.showModal(),this.setAttribute("open","yes"))}close(){const t=this.querySelector("dialog");null==t||t.close(),this.removeAttribute("open"),this.allGroups=null}previous(){""!==this.group&&this.getAllGroups()&&this.currentIndex>1&&this.currentIndex--}next(){if(""===this.group)return;const t=this.getAllGroups();t&&this.currentIndex<t.length&&this.currentIndex++}updateAllGroups(t=null){if(t&&t.length)return this.allGroups=t,void this.setAttribute("total",this.allGroups.length.toString());this.allGroups=document.querySelectorAll(`tp-lightbox-trigger[group="${this.group}"]`),this.allGroups.length?this.setAttribute("total",this.allGroups.length.toString()):this.allGroups=null}getAllGroups(){return this.allGroups}prepareNavigation(){const t=this.querySelector("tp-lightbox-count");null==t||t.update();const e=this.querySelector("tp-lightbox-previous"),r=this.querySelector("tp-lightbox-next");if(!e&&!r)return;if(""===this.group)return null==e||e.setAttribute("disabled","yes"),void(null==r||r.setAttribute("disabled","yes"));const s=this.getAllGroups();if(!s)return null==e||e.setAttribute("disabled","yes"),void(null==r||r.setAttribute("disabled","yes"));this.currentIndex<=1?null==e||e.setAttribute("disabled","yes"):null==e||e.removeAttribute("disabled"),this.currentIndex<s.length?null==r||r.removeAttribute("disabled"):null==r||r.setAttribute("disabled","yes")}prepareImageLoading(){const t=this.querySelector("tp-lightbox-content");if(!t)return;const e=t.querySelectorAll("img");if(!e.length)return void this.removeAttribute("loading");this.setAttribute("loading","yes");let r=0;const s=e.length,i=()=>{r++,r===s&&this.removeAttribute("loading")};e.forEach((t=>{t.complete?i():t.addEventListener("load",i,{once:!0})}))}handleDialogClick(t){"yes"===this.getAttribute("close-on-overlay-click")&&this.querySelector("dialog")===t.target&&this.close()}}class e extends HTMLElement{}class r extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.close.bind(this))}close(){const t=this.closest("tp-lightbox");t&&setTimeout((()=>{t.close()}),0)}}class s extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.previous.bind(this))}previous(){if("yes"===this.getAttribute("disabled"))return;const t=this.closest("tp-lightbox");t&&setTimeout((()=>{t.previous()}),0)}}class i extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.next.bind(this))}next(){if("yes"===this.getAttribute("disabled"))return;const t=this.closest("tp-lightbox");t&&setTimeout((()=>{t.next()}),0)}}class n extends HTMLElement{static get observedAttributes(){return["format"]}get format(){var t;return null!==(t=this.getAttribute("format"))&&void 0!==t?t:"$current / $total"}set format(t){this.setAttribute("format",t)}attributeChangedCallback(){this.update()}update(){var t;const e=this.closest("tp-lightbox");if(!e)return;const r=e.currentIndex.toString(),s=null!==(t=e.getAttribute("total"))&&void 0!==t?t:"";this.innerHTML=this.format.replace("$current",r).replace("$total",s),this.setAttribute("current",r),this.setAttribute("total",s)}}class l extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.trigger.bind(this))}trigger(){var t;const e=this.getAttribute("lightbox"),r=this.querySelector("template");if(!e||!r)return;const s=document.querySelector(`#${e.toString()}`);if(!s)return;const i=null!==(t=this.getAttribute("group"))&&void 0!==t?t:"";setTimeout((()=>{if(s.template=r,s.group=i,""!==i){const t=document.querySelectorAll(`tp-lightbox-trigger[group="${i}"]`);t.length&&(s.updateAllGroups(t),t.forEach(((t,e)=>{this===t&&(s.currentIndex=e+1)})))}s.open()}),0)}}customElements.define("tp-lightbox",t),customElements.define("tp-lightbox-content",e),customElements.define("tp-lightbox-close",r),customElements.define("tp-lightbox-previous",s),customElements.define("tp-lightbox-next",i),customElements.define("tp-lightbox-count",n),customElements.define("tp-lightbox-trigger",l)})();
 //# sourceMappingURL=index.js.map

package/dist/lightbox/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dist/lightbox/index.js","mappings":"mBAGO,MAAMA,UAA0BC,YAAvC,c,oBACC,KAAAC,OAA6B,KAC7B,KAAAC,MAA4B,IAwG7B,CAtGC,iBAAAC,GACC,MAAMC,EAAiCC,KAAKC,cAAe,OAC3DF,SAAAA,EAAOG,iBAAkB,QAASF,KAAKG,KAAKC,KAAMJ,MACnD,CAEA,IAAAG,GACC,MAAME,EAAuCL,KAAKM,aAAc,kBAEhE,IAAOD,EACN,OAGD,MAAME,EAA4CC,SAASP,cAAeI,GAE1E,IAAOE,EACN,OAGD,MAAME,EAA0BD,SAASE,cAAe,OACxDD,EAAQE,UAAYJ,EAAcI,UAAUC,QAAS,YAAaZ,KAAKa,mBAEvEb,KAAKH,MAAQY,EAAQR,cAAe,YAC7BD,KAAKH,QAIZW,SAASM,KAAKC,OAAQf,KAAKH,OACtB,SAAUG,KAAKH,OAAS,mBAAsBG,KAAKH,MAAMM,MAC7DH,KAAKH,MAAMM,OAGZH,KAAKH,MAAMK,iBAAkB,QAASF,KAAKgB,MAAMZ,KAAMJ,OACxD,CAEA,KAAAgB,G,MACW,QAAV,EAAAhB,KAAKH,aAAK,SAAEoB,QACb,CAEA,eAAAJ,GACC,MAAMK,EAAuBlB,KAAKM,aAAc,SAChD,IAAOY,EACN,MAAO,GAGR,MAAMC,EAAwCnB,KAAKM,aAAc,mBACjE,IAAOa,EACN,MAAO,GAGR,MAAMC,EAA6CZ,SAASP,cAAekB,GAC3E,IAAOC,EACN,MAAO,GAGR,MAAMX,EAA0BD,SAASE,cAAe,OACxDD,EAAQE,UAAYS,EAAeT,UAEnC,MAAMf,EAA6Ba,EAAQR,cAAe,aACpDoB,EAA4BZ,EAAQR,cAAe,mBAEzD,IAAOL,IAAYyB,EAClB,MAAO,GAGR,MAAMC,EAA8Dd,SAASe,iBAAkB,sBAAuBL,OACtH,IAAOI,EACN,MAAO,GAGR,IAAIE,EAAiB,GACjBC,GAAsB,EAoB1B,OAlBAH,EAAsBI,SAAS,CAAEC,EAA6BC,K,MACxD5B,OAAS2B,IACbF,EAAaG,EAAQ,GAGtBJ,GAAUH,EAAMQ,UACdjB,QAAS,UAAWe,EAASG,iBAC7BlB,QAAS,YAA+C,QAAlC,EAAAe,EAASrB,aAAc,kBAAW,QAAI,GAAI,IAGnEe,EAAMU,mBAAoB,WAAYP,GACtCH,EAAMJ,UAEA,IAAMQ,GACX7B,EAAOoC,aAAc,gBAAiBP,EAAWQ,YAElDrC,EAAOsC,gBAAiB,eAEjBzB,EAAQE,SAChB,CAEA,aAAAmB,GACC,OAAK9B,KAAKM,aAAc,aAChB,aAAcN,KAAKM,aAAc,gCAC7BN,KAAKM,aAAc,aACvB,gBAAiBN,KAAKM,aAAc,0BAGrC,EACR,EC/FD6B,eAAeC,OAAQ,cAAe1C,E","sources":["webpack://@travelopia/web-components/./src/lightbox/tp-lightbox.ts","webpack://@travelopia/web-components/./src/lightbox/index.ts"],"sourcesContent":["/*\n TP Lightbox.\n /\nexport class TPLightboxElement extends HTMLElement {\n\tslider: HTMLElement \| null = null;\n\tmodal: HTMLElement \| null = null;\n\n\tconnectedCallback(): void {\n\t\tconst image: HTMLImageElement \| null = this.querySelector( 'img' );\n\t\timage?.addEventListener( 'click', this.open.bind( this ) );\n\t}\n\n\topen(): void {\n\t\tconst modalTemplateSelector: string \| null = this.getAttribute( 'modal-template' );\n\n\t\tif ( ! modalTemplateSelector ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst modalTemplate: HTMLTemplateElement \| null = document.querySelector( modalTemplateSelector );\n\n\t\tif ( ! modalTemplate ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst fauxDiv: HTMLDivElement = document.createElement( 'div' );\n\t\tfauxDiv.innerHTML = modalTemplate.innerHTML.replace( '{content}', this.getSliderMarkup() );\n\n\t\tthis.modal = fauxDiv.querySelector( 'tp-modal' );\n\t\tif ( ! this.modal ) {\n\t\t\treturn;\n\t\t}\n\n\t\tdocument.body.append( this.modal );\n\t\tif ( 'open' in this.modal && 'function' === typeof this.modal.open ) {\n\t\t\tthis.modal.open();\n\t\t}\n\n\t\tthis.modal.addEventListener( 'close', this.close.bind( this ) );\n\t}\n\n\tclose(): void {\n\t\tthis.modal?.remove();\n\t}\n\n\tgetSliderMarkup(): string {\n\t\tconst group: string \| null = this.getAttribute( 'group' );\n\t\tif ( ! group ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst sliderTemplateSelector: string \| null = this.getAttribute( 'slider-template' );\n\t\tif ( ! sliderTemplateSelector ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst sliderTemplate: HTMLTemplateElement \| null = document.querySelector( sliderTemplateSelector );\n\t\tif ( ! sliderTemplate ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst fauxDiv: HTMLDivElement = document.createElement( 'div' );\n\t\tfauxDiv.innerHTML = sliderTemplate.innerHTML;\n\n\t\tconst slider: HTMLElement \| null = fauxDiv.querySelector( 'tp-slider' );\n\t\tconst slide: HTMLElement \| null = fauxDiv.querySelector( 'tp-slider-slide' );\n\n\t\tif ( ! slider \|\| ! slide ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst lightboxesInThisGroup: NodeListOf<TPLightboxElement> \| null = document.querySelectorAll( `tp-lightbox[group=\"${ group }\"]` );\n\t\tif ( ! lightboxesInThisGroup ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tlet slides: string = '';\n\t\tlet slideIndex: number = -1;\n\n\t\tlightboxesInThisGroup.forEach( ( lightbox: TPLightboxElement, index: number ): void => {\n\t\t\tif ( this === lightbox ) {\n\t\t\t\tslideIndex = index + 1;\n\t\t\t}\n\n\t\t\tslides += slide.outerHTML\n\t\t\t\t.replace( '{media}', lightbox.getMediaEmbed() )\n\t\t\t\t.replace( '{caption}', lightbox.getAttribute( 'caption' ) ?? '' );\n\t\t} );\n\n\t\tslide.insertAdjacentHTML( 'afterend', slides );\n\t\tslide.remove();\n\n\t\tif ( -1 !== slideIndex ) {\n\t\t\tslider.setAttribute( 'current-slide', slideIndex.toString() );\n\t\t}\n\t\tslider.removeAttribute( 'initialized' );\n\n\t\treturn fauxDiv.innerHTML;\n\t}\n\n\tgetMediaEmbed(): string {\n\t\tif ( this.getAttribute( 'image-url' ) ) {\n\t\t\treturn `<img src=\"${ this.getAttribute( 'image-url' ) }\" loading=\"lazy\">`;\n\t\t} else if ( this.getAttribute( 'video-url' ) ) {\n\t\t\treturn `<iframe src=\"${ this.getAttribute( 'video-url' ) }\"></iframe>`;\n\t\t}\n\n\t\treturn '';\n\t}\n}\n","/\n Styles.\n /\nimport './style.scss';\n\n/\n Components.\n /\nimport { TPLightboxElement } from './tp-lightbox';\n\n/\n Register Components.\n */\ncustomElements.define( 'tp-lightbox', TPLightboxElement );\n\n"],"names":["TPLightboxElement","HTMLElement","slider","modal","connectedCallback","image","this","querySelector","addEventListener","open","bind","modalTemplateSelector","getAttribute","modalTemplate","document","fauxDiv","createElement","innerHTML","replace","getSliderMarkup","body","append","close","remove","group","sliderTemplateSelector","sliderTemplate","slide","lightboxesInThisGroup","querySelectorAll","slides","slideIndex","forEach","lightbox","index","outerHTML","getMediaEmbed","insertAdjacentHTML","setAttribute","toString","removeAttribute","customElements","define"],"sourceRoot":""}
1	+ {"version":3,"file":"dist/lightbox/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/lightbox/tp-lightbox.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-content.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-close.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-previous.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-next.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-count.ts","webpack://@travelopia/web-components/./src/lightbox/tp-lightbox-trigger.ts","webpack://@travelopia/web-components/./src/lightbox/index.ts"],"sourcesContent":["/*\n Internal dependencies.\n /\nimport { TPLightboxContentElement } from './tp-lightbox-content';\nimport { TPLightboxPreviousElement } from './tp-lightbox-previous';\nimport { TPLightboxNextElement } from './tp-lightbox-next';\nimport { TPLightboxTriggerElement } from './tp-lightbox-trigger';\nimport { TPLightboxCountElement } from './tp-lightbox-count';\n\n/\n TP Lightbox.\n /\nexport class TPLightboxElement extends HTMLElement {\n\t/\n\t Properties.\n\t /\n\tprotected currentTemplate: HTMLTemplateElement \| null = null;\n\tprotected currentGroup: string = '';\n\tprotected allGroups: NodeListOf<TPLightboxTriggerElement> \| null = null;\n\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Event listeners.\n\t\tthis.querySelector( 'dialog' )?.addEventListener( 'click', this.handleDialogClick.bind( this ) );\n\t}\n\n\t/\n\t Get observed attributes.\n\t \n\t @return {Array} List of observed attributes.\n\t /\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'open', 'index', 'total', 'close-on-overlay-click', 'loading' ];\n\t}\n\n\t/\n\t Attribute changed callback.\n\t \n\t @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t /\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\t// Prevent redundant updates.\n\t\tif ( oldValue === newValue ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.dispatchEvent( new CustomEvent( 'change' ) );\n\n\t\t// Trigger current index target if index has changed.\n\t\tif ( 'index' === name ) {\n\t\t\tthis.triggerCurrentIndexTarget();\n\t\t}\n\t}\n\n\t/\n\t Get template.\n\t /\n\tget template(): HTMLTemplateElement \| null {\n\t\treturn this.currentTemplate;\n\t}\n\n\t/\n\t Set template.\n\t \n\t @param {HTMLTemplateElement} template The template.\n\t /\n\tset template( template: HTMLTemplateElement \| null ) {\n\t\t// Set the template.\n\t\tthis.currentTemplate = template;\n\t\tthis.dispatchEvent( new CustomEvent( 'template-set' ) );\n\n\t\t// Get lightbox content element.\n\t\tconst content: TPLightboxContentElement \| null = this.querySelector( 'tp-lightbox-content' );\n\t\tif ( ! content ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have a template.\n\t\tif ( this.currentTemplate ) {\n\t\t\t// We do, update content with template's content.\n\t\t\t// We do this rather than a string to avoid script injection.\n\t\t\tconst templateContent: Node = this.currentTemplate.content.cloneNode( true );\n\t\t\tcontent.replaceChildren( templateContent );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'content-change' ) );\n\n\t\t\tsetTimeout( (): void => {\n\t\t\t\tthis.prepareImageLoading();\n\t\t\t\tthis.prepareNavigation();\n\t\t\t}, 0 );\n\t\t} else {\n\t\t\t// We don't, set content as empty.\n\t\t\tcontent.innerHTML = '';\n\t\t}\n\t}\n\n\t/\n\t Get current group.\n\t /\n\tget group(): string {\n\t\treturn this.currentGroup;\n\t}\n\n\t/\n\t Set current group.\n\t \n\t @param {string} group Group name.\n\t /\n\tset group( group: string ) {\n\t\tthis.currentGroup = group;\n\t}\n\n\t/\n\t Get current index.\n\t /\n\tget currentIndex(): number {\n\t\treturn parseInt( this.getAttribute( 'index' ) ?? '1' );\n\t}\n\n\t/\n\t Set current index.\n\t \n\t @param {number} index Current index.\n\t /\n\tset currentIndex( index: number ) {\n\t\tif ( index < 1 ) {\n\t\t\tindex = 1;\n\t\t}\n\n\t\t// Setting this attributes triggers a re-trigger.\n\t\tthis.setAttribute( 'index', index.toString() );\n\t}\n\n\t/\n\t Trigger the target that matches the current index within current group.\n\t /\n\ttriggerCurrentIndexTarget(): void {\n\t\t// Get all groups and check if current index exists within group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> \| null = this.getAllGroups();\n\t\tif ( ! allGroups \|\| ! allGroups[ this.currentIndex - 1 ] ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Trigger element within group.\n\t\tallGroups[ this.currentIndex - 1 ].trigger();\n\t}\n\n\t/\n\t Open lightbox.\n\t /\n\topen(): void {\n\t\t// Get the dialog element.\n\t\tconst dialog: HTMLDialogElement \| null = this.querySelector( 'dialog' );\n\n\t\t// Check if dialog exists or is already open.\n\t\tif ( ! dialog \|\| dialog.open ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// First, take this opportunity to update all groups (if it wasn't set from the trigger).\n\t\tif ( '' !== this.group && ! this.allGroups ) {\n\t\t\tthis.updateAllGroups();\n\t\t}\n\n\t\t// Now, show the modal.\n\t\tdialog.showModal();\n\t\tthis.setAttribute( 'open', 'yes' );\n\t}\n\n\t/\n\t Close lightbox.\n\t /\n\tclose(): void {\n\t\t// Find and close the dialog.\n\t\tconst dialog: HTMLDialogElement \| null = this.querySelector( 'dialog' );\n\t\tdialog?.close();\n\t\tthis.removeAttribute( 'open' );\n\n\t\t// Clear groups from memory.\n\t\tthis.allGroups = null;\n\t}\n\n\t/\n\t Navigate previous.\n\t /\n\tprevious(): void {\n\t\t// Check if we even have a group.\n\t\tif ( '' === this.group ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have elements within group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> \| null = this.getAllGroups();\n\t\tif ( ! allGroups ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Decrement the current index.\n\t\tif ( this.currentIndex > 1 ) {\n\t\t\tthis.currentIndex--;\n\t\t}\n\t}\n\n\t/\n\t Navigate next.\n\t /\n\tnext(): void {\n\t\t// Check if we even have a group.\n\t\tif ( '' === this.group ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have elements within group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> \| null = this.getAllGroups();\n\t\tif ( ! allGroups ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Increment the current index.\n\t\tif ( this.currentIndex < allGroups.length ) {\n\t\t\tthis.currentIndex++;\n\t\t}\n\t}\n\n\t/\n\t Update all groups and save it to memory.\n\t \n\t @param {NodeList} allGroups All groups.\n\t /\n\tupdateAllGroups( allGroups: NodeListOf<TPLightboxTriggerElement> \| null = null ): void {\n\t\tif ( allGroups && allGroups.length ) {\n\t\t\tthis.allGroups = allGroups;\n\t\t\tthis.setAttribute( 'total', this.allGroups.length.toString() );\n\t\t\treturn;\n\t\t}\n\n\t\tthis.allGroups = document.querySelectorAll( `tp-lightbox-trigger[group=\"${ this.group }\"]` );\n\t\tif ( ! this.allGroups.length ) {\n\t\t\tthis.allGroups = null;\n\t\t} else {\n\t\t\tthis.setAttribute( 'total', this.allGroups.length.toString() );\n\t\t}\n\t}\n\n\t/\n\t Get all groups from memory.\n\t /\n\tgetAllGroups(): NodeListOf<TPLightboxTriggerElement> \| null {\n\t\treturn this.allGroups;\n\t}\n\n\t/\n\t Prepare navigation.\n\t /\n\tprepareNavigation(): void {\n\t\t// Update counter.\n\t\tconst count: TPLightboxCountElement \| null = this.querySelector( 'tp-lightbox-count' );\n\t\tcount?.update();\n\n\t\t// Get previous and next elements.\n\t\tconst previous: TPLightboxPreviousElement \| null = this.querySelector( 'tp-lightbox-previous' );\n\t\tconst next: TPLightboxNextElement \| null = this.querySelector( 'tp-lightbox-next' );\n\n\t\t// Bail early if we don't have either.\n\t\tif ( ! previous && ! next ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have a group.\n\t\tif ( '' === this.group ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\t\t\treturn;\n\t\t}\n\n\t\t// Check if we have elements within the group.\n\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> \| null = this.getAllGroups();\n\t\tif ( ! allGroups ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\t\t\treturn;\n\t\t}\n\n\t\t// Enable / disable previous navigation.\n\t\tif ( this.currentIndex <= 1 ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\t\t} else {\n\t\t\tprevious?.removeAttribute( 'disabled' );\n\t\t}\n\n\t\t// Enable / disable next navigation.\n\t\tif ( this.currentIndex < allGroups.length ) {\n\t\t\tnext?.removeAttribute( 'disabled' );\n\t\t} else {\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\t\t}\n\t}\n\n\t/\n\t Prepare image loading.\n\t /\n\tprepareImageLoading(): void {\n\t\t// Get lightbox content element.\n\t\tconst content: TPLightboxContentElement \| null = this.querySelector( 'tp-lightbox-content' );\n\t\tif ( ! content ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Bail if there are no images within current content.\n\t\tconst images: NodeListOf<HTMLImageElement> = content.querySelectorAll( 'img' );\n\t\tif ( ! images.length ) {\n\t\t\tthis.removeAttribute( 'loading' );\n\t\t\treturn;\n\t\t}\n\n\t\t// Start off by setting the state as loading.\n\t\tthis.setAttribute( 'loading', 'yes' );\n\n\t\t// Prepare increment variables.\n\t\tlet counter: number = 0;\n\t\tconst totalImages: number = images.length;\n\n\t\t/\n\t\t Increment counter.\n\t\t /\n\t\tconst incrementLoadingCounter = (): void => {\n\t\t\tcounter++;\n\n\t\t\t// Remove loading attribute once all images have loaded.\n\t\t\tif ( counter === totalImages ) {\n\t\t\t\tthis.removeAttribute( 'loading' );\n\t\t\t}\n\t\t};\n\n\t\t// Check if images have loaded, else add an event listener.\n\t\timages.forEach( ( image: HTMLImageElement ): void => {\n\t\t\tif ( image.complete ) {\n\t\t\t\tincrementLoadingCounter();\n\t\t\t} else {\n\t\t\t\timage.addEventListener( 'load', incrementLoadingCounter, { once: true } );\n\t\t\t}\n\t\t} );\n\t}\n\n\t/\n\t Handle when the dialog is clicked.\n\t \n\t @param {Event} e Click event.\n\t /\n\thandleDialogClick( e: MouseEvent ): void {\n\t\tif (\n\t\t\t'yes' === this.getAttribute( 'close-on-overlay-click' ) &&\n\t\t\tthis.querySelector( 'dialog' ) === e.target\n\t\t) {\n\t\t\tthis.close();\n\t\t}\n\t}\n}\n","/\n TP Lightbox Content.\n /\nexport class TPLightboxContentElement extends HTMLElement {\n}\n","/\n Internal dependencies.\n /\nimport { TPLightboxElement } from './tp-lightbox';\n\n/\n TP Lightbox Close.\n /\nexport class TPLightboxCloseElement extends HTMLElement {\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.close.bind( this ) );\n\t}\n\n\t/\n\t Close the lightbox.\n\t /\n\tclose(): void {\n\t\tconst lightbox: TPLightboxElement \| null = this.closest( 'tp-lightbox' );\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\tlightbox.close();\n\t\t\t}, 0 );\n\t\t}\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPLightboxElement } from './tp-lightbox';\n\n/\n TP Lightbox Close.\n /\nexport class TPLightboxPreviousElement extends HTMLElement {\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.previous.bind( this ) );\n\t}\n\n\t/\n\t Navigate previous.\n\t /\n\tprevious(): void {\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst lightbox: TPLightboxElement \| null = this.closest( 'tp-lightbox' );\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\tlightbox.previous();\n\t\t\t}, 0 );\n\t\t}\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPLightboxElement } from './tp-lightbox';\n\n/\n TP Lightbox Close.\n /\nexport class TPLightboxNextElement extends HTMLElement {\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.next.bind( this ) );\n\t}\n\n\t/\n\t Navigate next.\n\t /\n\tnext(): void {\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst lightbox: TPLightboxElement \| null = this.closest( 'tp-lightbox' );\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\tlightbox.next();\n\t\t\t}, 0 );\n\t\t}\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPLightboxElement } from './tp-lightbox';\n\n/\n TP Slider Count.\n /\nexport class TPLightboxCountElement extends HTMLElement {\n\t/\n\t Get observed attributes.\n\t \n\t @return {Array} Observed attributes.\n\t /\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'format' ];\n\t}\n\n\t/\n\t Get format.\n\t \n\t @return {string} Format.\n\t /\n\tget format(): string {\n\t\treturn this.getAttribute( 'format' ) ?? '$current / $total';\n\t}\n\n\t/\n\t Set format.\n\t \n\t @param {string} format Format.\n\t /\n\tset format( format: string ) {\n\t\tthis.setAttribute( 'format', format );\n\t}\n\n\t/\n\t Attribute changed callback.\n\t /\n\tattributeChangedCallback(): void {\n\t\tthis.update();\n\t}\n\n\t/\n\t Update component.\n\t /\n\tupdate(): void {\n\t\tconst lightbox: TPLightboxElement \| null = this.closest( 'tp-lightbox' );\n\t\tif ( ! lightbox ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst current: string = lightbox.currentIndex.toString();\n\t\tconst total: string = lightbox.getAttribute( 'total' ) ?? '';\n\n\t\tthis.innerHTML =\n\t\t\tthis.format\n\t\t\t\t.replace( '$current', current )\n\t\t\t\t.replace( '$total', total );\n\n\t\tthis.setAttribute( 'current', current );\n\t\tthis.setAttribute( 'total', total );\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPLightboxElement } from './tp-lightbox';\n\n/\n TP Lightbox Trigger.\n /\nexport class TPLightboxTriggerElement extends HTMLElement {\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.trigger.bind( this ) );\n\t}\n\n\t/\n\t Trigger the lightbox.\n\t /\n\ttrigger(): void {\n\t\t// Get lightbox ID and template.\n\t\tconst lightboxId: string \| null = this.getAttribute( 'lightbox' );\n\t\tconst template: HTMLTemplateElement \| null = this.querySelector( 'template' );\n\n\t\t// We can't proceed without them.\n\t\tif ( ! lightboxId \|\| ! template ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the lightbox.\n\t\tconst lightbox: TPLightboxElement \| null = document.querySelector( `#${ lightboxId.toString() }` );\n\t\tif ( ! lightbox ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Check to see if we have a group.\n\t\tconst group: string = this.getAttribute( 'group' ) ?? '';\n\n\t\t// Yield to main thread.\n\t\tsetTimeout( (): void => {\n\t\t\t// Prepare lightbox.\n\t\t\tlightbox.template = template;\n\t\t\tlightbox.group = group;\n\n\t\t\t// Set index and group if we have them.\n\t\t\tif ( '' !== group ) {\n\t\t\t\tconst allGroups: NodeListOf<TPLightboxTriggerElement> = document.querySelectorAll( `tp-lightbox-trigger[group=\"${ group }\"]` );\n\t\t\t\tif ( allGroups.length ) {\n\t\t\t\t\t// Update all groups.\n\t\t\t\t\t// We do this when we're opening a lightbox, or navigating.\n\t\t\t\t\t// This allows consumers to inject elements at any point.\n\t\t\t\t\tlightbox.updateAllGroups( allGroups );\n\n\t\t\t\t\t// Get current trigger's index within the group.\n\t\t\t\t\tallGroups.forEach( ( triggerElement: TPLightboxTriggerElement, index: number ): void => {\n\t\t\t\t\t\tif ( this === triggerElement ) {\n\t\t\t\t\t\t\tlightbox.currentIndex = index + 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// All done, lets open the lightbox.\n\t\t\tlightbox.open();\n\t\t}, 0 );\n\t}\n}\n","/\n Styles.\n /\nimport './style.scss';\n\n/\n Components.\n /\nimport { TPLightboxElement } from './tp-lightbox';\nimport { TPLightboxContentElement } from './tp-lightbox-content';\nimport { TPLightboxCloseElement } from './tp-lightbox-close';\nimport { TPLightboxPreviousElement } from './tp-lightbox-previous';\nimport { TPLightboxNextElement } from './tp-lightbox-next';\nimport { TPLightboxCountElement } from './tp-lightbox-count';\nimport { TPLightboxTriggerElement } from './tp-lightbox-trigger';\n\n/\n Register Components.\n */\ncustomElements.define( 'tp-lightbox', TPLightboxElement );\ncustomElements.define( 'tp-lightbox-content', TPLightboxContentElement );\ncustomElements.define( 'tp-lightbox-close', TPLightboxCloseElement );\ncustomElements.define( 'tp-lightbox-previous', TPLightboxPreviousElement );\ncustomElements.define( 'tp-lightbox-next', TPLightboxNextElement );\ncustomElements.define( 'tp-lightbox-count', TPLightboxCountElement );\ncustomElements.define( 'tp-lightbox-trigger', TPLightboxTriggerElement );\n"],"names":["TPLightboxElement","HTMLElement","constructor","super","currentTemplate","currentGroup","allGroups","this","querySelector","addEventListener","handleDialogClick","bind","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","triggerCurrentIndexTarget","template","content","templateContent","cloneNode","replaceChildren","setTimeout","prepareImageLoading","prepareNavigation","innerHTML","group","currentIndex","parseInt","getAttribute","index","setAttribute","toString","getAllGroups","trigger","open","dialog","updateAllGroups","showModal","close","removeAttribute","previous","next","length","document","querySelectorAll","count","update","images","counter","totalImages","incrementLoadingCounter","forEach","image","complete","once","e","target","TPLightboxContentElement","TPLightboxCloseElement","lightbox","closest","TPLightboxPreviousElement","TPLightboxNextElement","TPLightboxCountElement","format","current","total","replace","TPLightboxTriggerElement","lightboxId","triggerElement","customElements","define"],"sourceRoot":""}

package/dist/lightbox/style.css CHANGED Viewed

	@@ -1 +1 @@
1	-
1	+ :root:has(tp-lightbox dialog[open]){overflow:clip}@keyframes show-tp-lightbox{from{opacity:0}to{opacity:1}}tp-lightbox dialog{border:0;padding:0}tp-lightbox dialog[open]{animation-name:show-tp-lightbox;animation-duration:.5s;animation-timing-function:ease-in-out}tp-lightbox dialog::backdrop{background:rgba(0,0,0,.6)}tp-lightbox-content{display:block;position:relative}tp-lightbox[loading] tp-lightbox-content::after{position:absolute;content:"Loading...";z-index:5;top:50px;left:50px}

package/dist/modal/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-(()=>{"use strict";class e extends HTMLElement{constructor(){var e;super(),null===(e=document.querySelector("body"))||void 0===e||e.appendChild(this)}connectedCallback(){this.addEventListener("click",this.handleClick.bind(this))}open(){this.dispatchEvent(new CustomEvent("before-open",{bubbles:!0})),this.setAttribute("open","yes"),this.dispatchEvent(new CustomEvent("open",{bubbles:!0}))}close(){this.dispatchEvent(new CustomEvent("before-close",{bubbles:!0})),this.removeAttribute("open"),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))}handleClick(e){e.target===this&&"yes"===this.getAttribute("overlay-click-close")&&(e.preventDefault(),e.stopPropagation(),this.close())}}class t extends HTMLElement{connectedCallback(){const e=this.querySelector("button");null==e||e.addEventListener("click",this.closeModal.bind(this))}closeModal(){const e=this.closest("tp-modal");null==e||e.close()}}customElements.define("tp-modal",e),customElements.define("tp-modal-close",t)})();
+(()=>{"use strict";class e extends HTMLElement{constructor(){var e;super(),null===(e=document.querySelector("body"))||void 0===e||e.appendChild(this),this.addEventListener("click",this.handleClick.bind(this))}open(){this.dispatchEvent(new CustomEvent("before-open",{bubbles:!0})),this.setAttribute("open","yes"),this.dispatchEvent(new CustomEvent("open",{bubbles:!0}))}close(){this.dispatchEvent(new CustomEvent("before-close",{bubbles:!0})),this.removeAttribute("open"),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))}handleClick(e){e.target===this&&"yes"===this.getAttribute("overlay-click-close")&&(e.preventDefault(),e.stopPropagation(),this.close())}}class t extends HTMLElement{constructor(){super();const e=this.querySelector("button");null==e||e.addEventListener("click",this.closeModal.bind(this))}closeModal(){const e=this.closest("tp-modal");null==e||e.close()}}customElements.define("tp-modal",e),customElements.define("tp-modal-close",t)})();
 //# sourceMappingURL=index.js.map

package/dist/modal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dist/modal/index.js","mappings":"mBAGO,MAAMA,UAAuBC,YAInC,WAAAC,G,MACCC,~~QACgC~~,QAAhC,EAAAC,SAASC,cAAe,eAAQ,SAAEC,YAAaC,~~KAChD~~,~~CAKA~~,~~iBAAAC~~,~~GACCD~~,KAAKE,~~iBAAkB,QAASF,KAAKG,~~YAAYC,~~KAAMJ~~,MACxD,CAKA,~~IAAAK~~,~~GACCL~~,~~KAAKM~~,cAAe,IAAIC,YAAa,cAAe,CAAEC,SAAS,KAC/DR,~~KAAKS~~,aAAc,OAAQ,~~OAC3BT~~,~~KAAKM~~,cAAe,IAAIC,YAAa,OAAQ,CAAEC,SAAS,IACzD,CAKA,KAAAE,~~GACCV~~,~~KAAKM~~,cAAe,IAAIC,YAAa,eAAgB,CAAEC,SAAS,~~KAChER~~,~~KAAKW~~,gBAAiB,~~QACtBX~~,~~KAAKM~~,cAAe,IAAIC,YAAa,QAAS,CAAEC,SAAS,IAC1D,CAOA,WAAAL,CAAaS,GACPA,EAAEC,~~SAAWb~~,MAAQ,QAAUA,~~KAAKc~~,aAAc,yBACtDF,EAAEG,iBACFH,EAAEI,~~kBACFhB~~,~~KAAKU~~,QAEP,~~ECxCM~~,MAAMO,~~UAA4BvB~~,YAIxC,~~iBAAAO~~,~~GACC~~,~~MAAMiB~~,~~EAAmClB~~,KAAKF,cAAe,~~UAC7DoB~~,SAAAA,EAAQhB,iBAAkB,~~QAASF~~,~~KAAKmB~~,WAAWf,~~KAAMJ~~,MAC1D,CAKA,~~UAAAmB~~,GACC,MAAMC,EAA+~~BpB~~,~~KAAKqB~~,QAAS,YACnDD,SAAAA,EAAOV,OACR,~~ECTDY~~,eAAeC,OAAQ,~~WAAY9B~~,~~GACnC6B~~,eAAeC,OAAQ,iBAAkBN,E","sources":["webpack://@travelopia/web-components/./src/modal/tp-modal.ts","webpack://@travelopia/web-components/./src/modal/tp-modal-close.ts","webpack://@travelopia/web-components/./src/modal/index.ts"],"sourcesContent":["/*\n TP Modal.\n /\nexport class TPModalElement extends HTMLElement {\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\t\tdocument.querySelector( 'body' )?.appendChild( this );\n\~~t}\~~n\n\t~~/\n~~\t ~~Connected callback~~.\n\t /\n\~~tconnectedCallback(): void {\n\t\~~tthis.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/\n\t Open the modal.\n\t /\n\topen(): void {\n\t\tthis.dispatchEvent( new CustomEvent( 'before-open', { bubbles: true } ) );\n\t\tthis.setAttribute( 'open', 'yes' );\n\t\tthis.dispatchEvent( new CustomEvent( 'open', { bubbles: true } ) );\n\t}\n\n\t/\n\t Close the modal.\n\t /\n\tclose(): void {\n\t\tthis.dispatchEvent( new CustomEvent( 'before-close', { bubbles: true } ) );\n\t\tthis.removeAttribute( 'open' );\n\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t}\n\n\t/\n\t Handle when the component is clicked.\n\t \n\t @param {Event} e Event.\n\t /\n\thandleClick( e: Event ): void {\n\t\tif ( e.target === this && 'yes' === this.getAttribute( 'overlay-click-close' ) ) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tthis.close();\n\t\t}\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPModalElement } from './tp-modal';\n\n/\n TP Modal Close.\n /\nexport class TPModalCloseElement extends HTMLElement {\n\t/\n\t ~~Connected callback~~.\n\t /\n\~~tconnectedCallback~~(): ~~void~~ {\n\t\tconst button: HTMLButtonElement \| null = this.querySelector( 'button' );\n\t\tbutton?.addEventListener( 'click', this.closeModal.bind( this ) );\n\t}\n\n\t/\n\t Close the modal.\n\t /\n\tcloseModal(): void {\n\t\tconst modal: TPModalElement \| null = this.closest( 'tp-modal' );\n\t\tmodal?.close();\n\t}\n}\n","/\n Styles.\n /\nimport './style.scss';\n\n/\n Components.\n /\nimport { TPModalElement } from './tp-modal';\nimport { TPModalCloseElement } from './tp-modal-close';\n\n/\n Register Components.\n */\ncustomElements.define( 'tp-modal', TPModalElement );\ncustomElements.define( 'tp-modal-close', TPModalCloseElement );\n"],"names":["TPModalElement","HTMLElement","constructor","super","document","querySelector","appendChild","this","~~connectedCallback","~~addEventListener","handleClick","bind","open","dispatchEvent","CustomEvent","bubbles","setAttribute","close","removeAttribute","e","target","getAttribute","preventDefault","stopPropagation","TPModalCloseElement","button","closeModal","modal","closest","customElements","define"],"sourceRoot":""}
1	+ {"version":3,"file":"dist/modal/index.js","mappings":"mBAGO,MAAMA,UAAuBC,YAInC,WAAAC,G,MACCC,QAGgC,QAAhC,EAAAC,SAASC,cAAe,eAAQ,SAAEC,YAAaC,MAG/CA,KAAKC,iBAAkB,QAASD,KAAKE,YAAYC,KAAMH,MACxD,CAKA,IAAAI,GACCJ,KAAKK,cAAe,IAAIC,YAAa,cAAe,CAAEC,SAAS,KAC/DP,KAAKQ,aAAc,OAAQ,OAC3BR,KAAKK,cAAe,IAAIC,YAAa,OAAQ,CAAEC,SAAS,IACzD,CAKA,KAAAE,GACCT,KAAKK,cAAe,IAAIC,YAAa,eAAgB,CAAEC,SAAS,KAChEP,KAAKU,gBAAiB,QACtBV,KAAKK,cAAe,IAAIC,YAAa,QAAS,CAAEC,SAAS,IAC1D,CAOA,WAAAL,CAAaS,GACPA,EAAEC,SAAWZ,MAAQ,QAAUA,KAAKa,aAAc,yBACtDF,EAAEG,iBACFH,EAAEI,kBACFf,KAAKS,QAEP,ECtCM,MAAMO,UAA4BtB,YAIxC,WAAAC,GACCC,QACA,MAAMqB,EAAmCjB,KAAKF,cAAe,UAC7DmB,SAAAA,EAAQhB,iBAAkB,QAASD,KAAKkB,WAAWf,KAAMH,MAC1D,CAKA,UAAAkB,GACC,MAAMC,EAA+BnB,KAAKoB,QAAS,YACnDD,SAAAA,EAAOV,OACR,ECVDY,eAAeC,OAAQ,WAAY7B,GACnC4B,eAAeC,OAAQ,iBAAkBN,E","sources":["webpack://@travelopia/web-components/./src/modal/tp-modal.ts","webpack://@travelopia/web-components/./src/modal/tp-modal-close.ts","webpack://@travelopia/web-components/./src/modal/index.ts"],"sourcesContent":["/*\n TP Modal.\n /\nexport class TPModalElement extends HTMLElement {\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Move modal as a direct descendent of body to avoid z-index issues.\n\t\tdocument.querySelector( 'body' )?.appendChild( this );\n\n\t\t// Event listeners.\n\t\tthis.addEventListener( 'click', this.handleClick.bind( this ) );\n\t}\n\n\t/\n\t Open the modal.\n\t /\n\topen(): void {\n\t\tthis.dispatchEvent( new CustomEvent( 'before-open', { bubbles: true } ) );\n\t\tthis.setAttribute( 'open', 'yes' );\n\t\tthis.dispatchEvent( new CustomEvent( 'open', { bubbles: true } ) );\n\t}\n\n\t/\n\t Close the modal.\n\t /\n\tclose(): void {\n\t\tthis.dispatchEvent( new CustomEvent( 'before-close', { bubbles: true } ) );\n\t\tthis.removeAttribute( 'open' );\n\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t}\n\n\t/\n\t Handle when the component is clicked.\n\t \n\t @param {Event} e Event.\n\t /\n\thandleClick( e: Event ): void {\n\t\tif ( e.target === this && 'yes' === this.getAttribute( 'overlay-click-close' ) ) {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t\tthis.close();\n\t\t}\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPModalElement } from './tp-modal';\n\n/\n TP Modal Close.\n /\nexport class TPModalCloseElement extends HTMLElement {\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\t\tconst button: HTMLButtonElement \| null = this.querySelector( 'button' );\n\t\tbutton?.addEventListener( 'click', this.closeModal.bind( this ) );\n\t}\n\n\t/\n\t Close the modal.\n\t /\n\tcloseModal(): void {\n\t\tconst modal: TPModalElement \| null = this.closest( 'tp-modal' );\n\t\tmodal?.close();\n\t}\n}\n","/\n Styles.\n /\nimport './style.scss';\n\n/\n Components.\n /\nimport { TPModalElement } from './tp-modal';\nimport { TPModalCloseElement } from './tp-modal-close';\n\n/\n Register Components.\n */\ncustomElements.define( 'tp-modal', TPModalElement );\ncustomElements.define( 'tp-modal-close', TPModalCloseElement );\n"],"names":["TPModalElement","HTMLElement","constructor","super","document","querySelector","appendChild","this","addEventListener","handleClick","bind","open","dispatchEvent","CustomEvent","bubbles","setAttribute","close","removeAttribute","e","target","getAttribute","preventDefault","stopPropagation","TPModalCloseElement","button","closeModal","modal","closest","customElements","define"],"sourceRoot":""}

package/dist/multi-select/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.currentlyHighlightedOption=-1,this.keyboardEventListener=this.handleKeyboardInputs.bind(this)}connectedCallback(){document.addEventListener("click",this.handleDocumentClick.bind(this)),this.addEventListener("change",this.update.bind(this));const t=this.querySelector("tp-multi-select-options");t&&new MutationObserver(this.initialize.bind(this)).observe(t,{childList:!0,subtree:!0}),this.initialize()}static get observedAttributes(){return["open"]}attributeChangedCallback(t="",e="",l=""){e!==l&&"open"===t&&("yes"===l?(document.addEventListener("keydown",this.keyboardEventListener),this.dispatchEvent(new CustomEvent("open",{bubbles:!0}))):(this.unHighlightAllOptions(),document.removeEventListener("keydown",this.keyboardEventListener),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))))}set value(t){if(!t||!Array.isArray(t))return;const e=this.querySelectorAll("tp-multi-select-option");null==e||e.forEach((e=>{var l;t.includes(null!==(l=e.getAttribute("value"))&&void 0!==l?l:"")?e.setAttribute("selected","yes"):e.removeAttribute("selected")})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}get value(){const t=[],e=this.querySelectorAll("select option[selected]");return null==e||e.forEach((e=>{const l=e.getAttribute("value");l&&t.push(l)})),t}updateFormFieldValue(){const t=this.querySelectorAll("tp-multi-select-option"),e=this.querySelector("select");if(!t||!e)return;const l=Array.from(e.options);t.forEach((t=>{var i,s;const n=null!==(i=t.getAttribute("value"))&&void 0!==i?i:"";if(n){const i=l.find((t=>t.value===n));if("yes"===t.getAttribute("selected"))if(i)i.setAttribute("selected","selected");else{const l=document.createElement("option");l.setAttribute("value",null!==(s=t.getAttribute("value"))&&void 0!==s?s:""),l.setAttribute("selected","selected"),null==e||e.append(l)}else null==i||i.remove()}})),e.dispatchEvent(new Event("change"))}update(){this.updateFormFieldValue();const t=this.value;0!==t.length?this.setAttribute("selected","yes"):this.removeAttribute("selected");const e=this.querySelector("tp-multi-select-status");e&&(t.length>0?e.setAttribute("total",t.length.toString()):e.removeAttribute("total"))}handleDocumentClick(t){this===t.target||this.contains(t.target)||this.removeAttribute("open")}initialize(){var t;let e=this.querySelector("select");e?e.innerHTML="":(e=document.createElement("select"),e.setAttribute("name",null!==(t=this.getAttribute("name"))&&void 0!==t?t:""),"no"!==this.getAttribute("multiple")&&e.setAttribute("multiple","multiple"),this.append(e)),this.update()}select(t=""){if("no"===this.getAttribute("multiple")&&(this.unSelectAll(),""===t))return void("yes"===this.getAttribute("close-on-select")&&this.removeAttribute("open"));const e=this.querySelectorAll(`tp-multi-select-option[value="${t}"]`);null==e||e.forEach((t=>{"yes"!==t.getAttribute("disabled")&&t.setAttribute("selected","yes")}));const l=this.querySelector("tp-multi-select-search");null==l||l.clear(),null==l||l.focus(),"yes"===this.getAttribute("close-on-select")&&this.removeAttribute("open"),this.update()}selectAll(){const t=this.querySelectorAll("tp-multi-select-option");null==t||t.forEach((t=>{"yes"!==t.getAttribute("disabled")&&t.setAttribute("selected","yes")})),this.update()}unSelect(t=""){const e=this.querySelectorAll(`tp-multi-select-option[value="${t}"]`);null==e||e.forEach((t=>{t.removeAttribute("selected")})),this.update()}unSelectAll(){const t=this.querySelectorAll("tp-multi-select-option");null==t||t.forEach((t=>{t.removeAttribute("selected")})),this.update()}handleKeyboardInputs(t){switch(t.key){case"ArrowDown":t.preventDefault(),this.highlightNextOption();break;case"ArrowUp":t.preventDefault(),this.highlightPreviousOption();break;case"Enter":this.toggleHighlightedOption();break;case"Escape":this.unHighlightAllOptions(),this.removeAttribute("open")}}highlightNextOption(){const t=this.querySelectorAll('tp-multi-select-option:not([hidden="yes"])');if(!t)return void(this.currentlyHighlightedOption=-1);let e=this.currentlyHighlightedOption+1;for(;e<t.length&&"yes"===t[e].getAttribute("disabled");)e++;e!==t.length&&(-1!==this.currentlyHighlightedOption&&t[this.currentlyHighlightedOption].removeAttribute("highlighted"),t[e].setAttribute("highlighted","yes"),t[e].scrollIntoView({behavior:"smooth",block:"nearest"}),this.currentlyHighlightedOption=e)}highlightPreviousOption(){const t=this.querySelectorAll('tp-multi-select-option:not([hidden="yes"])');if(!t)return void(this.currentlyHighlightedOption=-1);let e=this.currentlyHighlightedOption-1;for(;e>=0&&"yes"===t[e].getAttribute("disabled");)e--;e<0||(0!==this.currentlyHighlightedOption&&t[this.currentlyHighlightedOption].removeAttribute("highlighted"),t[e].setAttribute("highlighted","yes"),t[e].scrollIntoView({behavior:"smooth",block:"nearest"}),this.currentlyHighlightedOption=e)}toggleHighlightedOption(){const t=this.querySelector('tp-multi-select-option[highlighted="yes"]');null==t||t.toggle(null)}unHighlightAllOptions(){this.currentlyHighlightedOption=-1;const t=this.querySelectorAll("tp-multi-select-option");t&&t.forEach((t=>{t.removeAttribute("highlighted")}))}}class e extends HTMLElement{constructor(){super(...arguments),this.initialized=!1}connectedCallback(){!0!==this.initialized&&(this.initialized=!0,this.addEventListener("click",this.toggleOpen.bind(this)))}toggleOpen(){const t=this.closest("tp-multi-select");t&&("yes"===t.getAttribute("open")?t.removeAttribute("open"):t.setAttribute("open","yes"))}}class l extends HTMLElement{}class i extends HTMLElement{static get observedAttributes(){return["total","format"]}attributeChangedCallback(t="",e="",l=""){e!==l&&this.update()}update(){var t,e,l,i;const s=null!==(t=this.getAttribute("format"))&&void 0!==t?t:"$total Selected";let n=s.replace("$total",null!==(e=this.getAttribute("total"))&&void 0!==e?e:"");if(s.includes("$value")){const t=this.closest("tp-multi-select");if(t){const e=null!==(l=t.value)&&void 0!==l?l:[];let s="";if(e.length>0){const l=t.querySelector(`tp-multi-select-option[value="${e[0]}"]`);l&&(s=null!==(i=l.getAttribute("label"))&&void 0!==i?i:"")}n=n.replace("$value",s)}}this.innerHTML=n}}class s extends HTMLElement{}class n extends HTMLElement{constructor(){super(...arguments),this.initialized=!1}connectedCallback(){!0!==this.initialized&&(this.initialized=!0,this.addEventListener("click",this.toggle.bind(this)))}toggle(t){var e;null==t||t.preventDefault(),null==t||t.stopPropagation();const l=this.closest("tp-multi-select"),i=null!==(e=this.getAttribute("value"))&&void 0!==e?e:"";"yes"!==this.getAttribute("selected")?(null==l||l.select(i),null==l||l.dispatchEvent(new CustomEvent("select",{bubbles:!0,detail:{value:i}}))):(null==l||l.unSelect(i),null==l||l.dispatchEvent(new CustomEvent("unselect",{bubbles:!0,detail:{value:i}}))),null==l||l.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}}class u extends HTMLElement{connectedCallback(){var t;const e=this.querySelector("input");e&&(e.addEventListener("keydown",this.handleKeyboardInputs.bind(this)),e.addEventListener("keyup",this.handleSearchChange.bind(this)),e.addEventListener("input",this.handleSearchChange.bind(this)),this.addEventListener("click",this.handleClick.bind(this)),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("open",this.focus.bind(this)))}handleKeyboardInputs(t){const e=this.closest("tp-multi-select"),l=this.querySelector("input");if(e&&l)switch(t.key){case"Enter":t.preventDefault();break;case"ArrowDown":e.setAttribute("open","yes");break;case"Backspace":if(0===l.value.length){const t=e.querySelector("tp-multi-select-pill:last-of-type");t&&t.removePill()}}}handleSearchChange(){var t;const e=this.closest("tp-multi-select"),l=this.querySelector("input"),i=null===(t=this.closest("tp-multi-select"))||void 0===t?void 0:t.querySelectorAll("tp-multi-select-option");if(!e||!l||!i)return;let s=0;i.forEach((t=>{var e;(null===(e=t.getAttribute("label"))||void 0===e?void 0:e.toLowerCase().match(new RegExp(`.*${l.value.toLowerCase().replace(/\s/g,".*")}.*`)))?(t.removeAttribute("hidden"),s++):t.setAttribute("hidden","yes")})),""===l.value?l.removeAttribute("style"):(l.style.width=`${l.value.length+2}ch`,e.setAttribute("open","yes")),e.setAttribute("visible-options",s.toString())}handleClick(t){var e;t.preventDefault(),t.stopPropagation(),this.dispatchEvent(new CustomEvent("multi-select-opened")),document.dispatchEvent(new Event("click")),null===(e=this.closest("tp-multi-select"))||void 0===e||e.setAttribute("open","yes")}clear(){const t=this.querySelector("input");t&&(t.value="",t.dispatchEvent(new Event("change")))}focus(){var t;this.handleSearchChange(),null===(t=this.querySelector("input"))||void 0===t||t.focus()}}class o extends HTMLElement{connectedCallback(){var t;null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleButtonClick.bind(this))}handleButtonClick(t){null==t||t.preventDefault(),null==t||t.stopPropagation(),this.removePill()}removePill(){var t;const e=this.closest("tp-multi-select");e&&this.getAttribute("value")&&(e.unSelect(null!==(t=this.getAttribute("value"))&&void 0!==t?t:""),e.dispatchEvent(new CustomEvent("unselect",{bubbles:!0})),e.dispatchEvent(new CustomEvent("change",{bubbles:!0})))}}class c extends HTMLElement{connectedCallback(){var t,e,l;null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("change",this.update.bind(this)),null===(l=null===(e=this.closest("tp-multi-select"))||void 0===e?void 0:e.querySelector("select"))||void 0===l||l.addEventListener("change",(()=>this.update())),this.update()}update(){var t;const e=this.closest("tp-multi-select");if(!e)return;const l=this.querySelectorAll("tp-multi-select-pill"),i=null!==(t=e.value)&&void 0!==t?t:[],s=[];l.forEach((t=>{var e;const l=null!==(e=t.getAttribute("value"))&&void 0!==e?e:"";""!==l&&(s.push(l),i.includes(l)||t.remove())})),i.filter((t=>!s.includes(t))).forEach((t=>{var l;if(""===t)return;const i=e.querySelector(`tp-multi-select-option[value="${t}"]`);if(!i)return;const s=document.createElement("tp-multi-select-pill");s.setAttribute("value",t),s.innerHTML=`\n\t\t\t<span>${null!==(l=i.getAttribute("label"))&&void 0!==l?l:""}</span>\n\t\t\t<button type="button">x</button>\n\t\t\t`,this.appendChild(s)}))}}class r extends HTMLElement{connectedCallback(){var t;null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("change",this.handleValueChanged.bind(this)),this.addEventListener("click",this.toggleSelectAll.bind(this))}handleValueChanged(){var t,e;const l=this.closest("tp-multi-select"),i=null==l?void 0:l.querySelectorAll("tp-multi-select-option");l&&i&&(Array.from(i).filter((t=>"yes"!==t.getAttribute("disabled"))).length===l.value.length?(this.setAttribute("selected","yes"),this.innerHTML=null!==(t=this.getAttribute("unselect-text"))&&void 0!==t?t:""):(this.removeAttribute("selected"),this.innerHTML=null!==(e=this.getAttribute("select-text"))&&void 0!==e?e:""))}toggleSelectAll(){const t=this.closest("tp-multi-select");t&&("yes"!==this.getAttribute("selected")?(t.selectAll(),t.dispatchEvent(new CustomEvent("select-all",{bubbles:!0}))):(t.unSelectAll(),t.dispatchEvent(new CustomEvent("unselect-all",{bubbles:!0}))),t.dispatchEvent(new CustomEvent("change",{bubbles:!0})))}}customElements.define("tp-multi-select",t),customElements.define("tp-multi-select-field",e),customElements.define("tp-multi-select-placeholder",l),customElements.define("tp-multi-select-status",i),customElements.define("tp-multi-select-options",s),customElements.define("tp-multi-select-option",n),customElements.define("tp-multi-select-search",u),customElements.define("tp-multi-select-pill",o),customElements.define("tp-multi-select-pills",c),customElements.define("tp-multi-select-select-all",r)})();
+(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.currentlyHighlightedOption=-1,this.keyboardEventListener=this.handleKeyboardInputs.bind(this),document.addEventListener("click",this.handleDocumentClick.bind(this)),this.addEventListener("change",this.update.bind(this));const t=this.querySelector("tp-multi-select-options");t&&new MutationObserver(this.initialize.bind(this)).observe(t,{childList:!0,subtree:!0}),this.initialize()}static get observedAttributes(){return["open"]}attributeChangedCallback(t="",e="",l=""){e!==l&&"open"===t&&("yes"===l?(document.addEventListener("keydown",this.keyboardEventListener),this.dispatchEvent(new CustomEvent("open",{bubbles:!0}))):(this.unHighlightAllOptions(),document.removeEventListener("keydown",this.keyboardEventListener),this.dispatchEvent(new CustomEvent("close",{bubbles:!0}))))}set value(t){if(!t||!Array.isArray(t))return;const e=this.querySelectorAll("tp-multi-select-option");null==e||e.forEach((e=>{var l;t.includes(null!==(l=e.getAttribute("value"))&&void 0!==l?l:"")?e.setAttribute("selected","yes"):e.removeAttribute("selected")})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}get value(){const t=[],e=this.querySelectorAll("select option[selected]");return null==e||e.forEach((e=>{const l=e.getAttribute("value");l&&t.push(l)})),t}updateFormFieldValue(){const t=this.querySelectorAll("tp-multi-select-option"),e=this.querySelector("select");if(!t||!e)return;const l=Array.from(e.options);t.forEach((t=>{var i,s;const n=null!==(i=t.getAttribute("value"))&&void 0!==i?i:"";if(n){const i=l.find((t=>t.value===n));if("yes"===t.getAttribute("selected"))if(i)i.setAttribute("selected","selected");else{const l=document.createElement("option");l.setAttribute("value",null!==(s=t.getAttribute("value"))&&void 0!==s?s:""),l.setAttribute("selected","selected"),null==e||e.append(l)}else null==i||i.remove()}})),e.dispatchEvent(new Event("change"))}update(){this.updateFormFieldValue();const t=this.value;0!==t.length?this.setAttribute("selected","yes"):this.removeAttribute("selected");const e=this.querySelector("tp-multi-select-status");e&&(t.length>0?e.setAttribute("total",t.length.toString()):e.removeAttribute("total"))}handleDocumentClick(t){this===t.target||this.contains(t.target)||this.removeAttribute("open")}initialize(){var t;let e=this.querySelector("select");e?e.innerHTML="":(e=document.createElement("select"),e.setAttribute("name",null!==(t=this.getAttribute("name"))&&void 0!==t?t:""),"no"!==this.getAttribute("multiple")&&e.setAttribute("multiple","multiple"),this.append(e)),this.update()}select(t=""){if("no"===this.getAttribute("multiple")&&(this.unSelectAll(),""===t))return void("yes"===this.getAttribute("close-on-select")&&this.removeAttribute("open"));const e=this.querySelectorAll(`tp-multi-select-option[value="${t}"]`);null==e||e.forEach((t=>{"yes"!==t.getAttribute("disabled")&&t.setAttribute("selected","yes")}));const l=this.querySelector("tp-multi-select-search");null==l||l.clear(),null==l||l.focus(),"yes"===this.getAttribute("close-on-select")&&this.removeAttribute("open"),this.update()}selectAll(){const t=this.querySelectorAll("tp-multi-select-option");null==t||t.forEach((t=>{"yes"!==t.getAttribute("disabled")&&t.setAttribute("selected","yes")})),this.update()}unSelect(t=""){const e=this.querySelectorAll(`tp-multi-select-option[value="${t}"]`);null==e||e.forEach((t=>{t.removeAttribute("selected")})),this.update()}unSelectAll(){const t=this.querySelectorAll("tp-multi-select-option");null==t||t.forEach((t=>{t.removeAttribute("selected")})),this.update()}handleKeyboardInputs(t){switch(t.key){case"ArrowDown":t.preventDefault(),this.highlightNextOption();break;case"ArrowUp":t.preventDefault(),this.highlightPreviousOption();break;case"Enter":this.toggleHighlightedOption();break;case"Escape":this.unHighlightAllOptions(),this.removeAttribute("open")}}highlightNextOption(){const t=this.querySelectorAll('tp-multi-select-option:not([hidden="yes"])');if(!t)return void(this.currentlyHighlightedOption=-1);let e=this.currentlyHighlightedOption+1;for(;e<t.length&&"yes"===t[e].getAttribute("disabled");)e++;e!==t.length&&(-1!==this.currentlyHighlightedOption&&t[this.currentlyHighlightedOption].removeAttribute("highlighted"),t[e].setAttribute("highlighted","yes"),t[e].scrollIntoView({behavior:"smooth",block:"nearest"}),this.currentlyHighlightedOption=e)}highlightPreviousOption(){const t=this.querySelectorAll('tp-multi-select-option:not([hidden="yes"])');if(!t)return void(this.currentlyHighlightedOption=-1);let e=this.currentlyHighlightedOption-1;for(;e>=0&&"yes"===t[e].getAttribute("disabled");)e--;e<0||(0!==this.currentlyHighlightedOption&&t[this.currentlyHighlightedOption].removeAttribute("highlighted"),t[e].setAttribute("highlighted","yes"),t[e].scrollIntoView({behavior:"smooth",block:"nearest"}),this.currentlyHighlightedOption=e)}toggleHighlightedOption(){const t=this.querySelector('tp-multi-select-option[highlighted="yes"]');null==t||t.toggle(null)}unHighlightAllOptions(){this.currentlyHighlightedOption=-1;const t=this.querySelectorAll("tp-multi-select-option");t&&t.forEach((t=>{t.removeAttribute("highlighted")}))}}class e extends HTMLElement{constructor(){super(),this.addEventListener("click",this.toggleOpen.bind(this))}toggleOpen(){const t=this.closest("tp-multi-select");t&&("yes"===t.getAttribute("open")?t.removeAttribute("open"):t.setAttribute("open","yes"))}}class l extends HTMLElement{}class i extends HTMLElement{static get observedAttributes(){return["total","format"]}attributeChangedCallback(t="",e="",l=""){e!==l&&this.update()}update(){var t,e,l,i;const s=null!==(t=this.getAttribute("format"))&&void 0!==t?t:"$total Selected";let n=s.replace("$total",null!==(e=this.getAttribute("total"))&&void 0!==e?e:"");if(s.includes("$value")){const t=this.closest("tp-multi-select");if(t){const e=null!==(l=t.value)&&void 0!==l?l:[];let s="";if(e.length>0){const l=t.querySelector(`tp-multi-select-option[value="${e[0]}"]`);l&&(s=null!==(i=l.getAttribute("label"))&&void 0!==i?i:"")}n=n.replace("$value",s)}}this.innerHTML=n}}class s extends HTMLElement{}class n extends HTMLElement{constructor(){super(),this.addEventListener("click",this.toggle.bind(this))}toggle(t){var e;null==t||t.preventDefault(),null==t||t.stopPropagation();const l=this.closest("tp-multi-select"),i=null!==(e=this.getAttribute("value"))&&void 0!==e?e:"";"yes"!==this.getAttribute("selected")?(null==l||l.select(i),null==l||l.dispatchEvent(new CustomEvent("select",{bubbles:!0,detail:{value:i}}))):(null==l||l.unSelect(i),null==l||l.dispatchEvent(new CustomEvent("unselect",{bubbles:!0,detail:{value:i}}))),null==l||l.dispatchEvent(new CustomEvent("change",{bubbles:!0}))}}class u extends HTMLElement{constructor(){var t;super();const e=this.querySelector("input");e&&(e.addEventListener("keydown",this.handleKeyboardInputs.bind(this)),e.addEventListener("keyup",this.handleSearchChange.bind(this)),e.addEventListener("input",this.handleSearchChange.bind(this)),this.addEventListener("click",this.handleClick.bind(this)),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("open",this.focus.bind(this)))}handleKeyboardInputs(t){const e=this.closest("tp-multi-select"),l=this.querySelector("input");if(e&&l)switch(t.key){case"Enter":t.preventDefault();break;case"ArrowDown":e.setAttribute("open","yes");break;case"Backspace":if(0===l.value.length){const t=e.querySelector("tp-multi-select-pill:last-of-type");t&&t.removePill()}}}handleSearchChange(){var t;const e=this.closest("tp-multi-select"),l=this.querySelector("input"),i=null===(t=this.closest("tp-multi-select"))||void 0===t?void 0:t.querySelectorAll("tp-multi-select-option");if(!e||!l||!i)return;let s=0;i.forEach((t=>{var e;(null===(e=t.getAttribute("label"))||void 0===e?void 0:e.toLowerCase().match(new RegExp(`.*${l.value.toLowerCase().replace(/\s/g,".*")}.*`)))?(t.removeAttribute("hidden"),s++):t.setAttribute("hidden","yes")})),""===l.value?l.removeAttribute("style"):(l.style.width=`${l.value.length+2}ch`,e.setAttribute("open","yes")),e.setAttribute("visible-options",s.toString())}handleClick(t){var e;t.preventDefault(),t.stopPropagation(),this.dispatchEvent(new CustomEvent("multi-select-opened")),document.dispatchEvent(new Event("click")),null===(e=this.closest("tp-multi-select"))||void 0===e||e.setAttribute("open","yes")}clear(){const t=this.querySelector("input");t&&(t.value="",t.dispatchEvent(new Event("change")))}focus(){var t;this.handleSearchChange(),null===(t=this.querySelector("input"))||void 0===t||t.focus()}}class o extends HTMLElement{constructor(){var t;super(),null===(t=this.querySelector("button"))||void 0===t||t.addEventListener("click",this.handleButtonClick.bind(this))}handleButtonClick(t){null==t||t.preventDefault(),null==t||t.stopPropagation(),this.removePill()}removePill(){var t;const e=this.closest("tp-multi-select");e&&this.getAttribute("value")&&(e.unSelect(null!==(t=this.getAttribute("value"))&&void 0!==t?t:""),e.dispatchEvent(new CustomEvent("unselect",{bubbles:!0})),e.dispatchEvent(new CustomEvent("change",{bubbles:!0})))}}class r extends HTMLElement{constructor(){var t,e,l;super(),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("change",this.update.bind(this)),null===(l=null===(e=this.closest("tp-multi-select"))||void 0===e?void 0:e.querySelector("select"))||void 0===l||l.addEventListener("change",(()=>this.update())),this.update()}update(){var t;const e=this.closest("tp-multi-select");if(!e)return;const l=this.querySelectorAll("tp-multi-select-pill"),i=null!==(t=e.value)&&void 0!==t?t:[],s=[];l.forEach((t=>{var e;const l=null!==(e=t.getAttribute("value"))&&void 0!==e?e:"";""!==l&&(s.push(l),i.includes(l)||t.remove())})),i.filter((t=>!s.includes(t))).forEach((t=>{var l;if(""===t)return;const i=e.querySelector(`tp-multi-select-option[value="${t}"]`);if(!i)return;const s=document.createElement("tp-multi-select-pill");s.setAttribute("value",t),s.innerHTML=`\n\t\t\t<span>${null!==(l=i.getAttribute("label"))&&void 0!==l?l:""}</span>\n\t\t\t<button type="button">x</button>\n\t\t\t`,this.appendChild(s)}))}}class c extends HTMLElement{constructor(){var t;super(),null===(t=this.closest("tp-multi-select"))||void 0===t||t.addEventListener("change",this.handleValueChanged.bind(this)),this.addEventListener("click",this.toggleSelectAll.bind(this))}handleValueChanged(){var t,e;const l=this.closest("tp-multi-select"),i=null==l?void 0:l.querySelectorAll("tp-multi-select-option");l&&i&&(Array.from(i).filter((t=>"yes"!==t.getAttribute("disabled"))).length===l.value.length?(this.setAttribute("selected","yes"),this.innerHTML=null!==(t=this.getAttribute("unselect-text"))&&void 0!==t?t:""):(this.removeAttribute("selected"),this.innerHTML=null!==(e=this.getAttribute("select-text"))&&void 0!==e?e:""))}toggleSelectAll(){const t=this.closest("tp-multi-select");t&&("yes"!==this.getAttribute("selected")?(t.selectAll(),t.dispatchEvent(new CustomEvent("select-all",{bubbles:!0}))):(t.unSelectAll(),t.dispatchEvent(new CustomEvent("unselect-all",{bubbles:!0}))),t.dispatchEvent(new CustomEvent("change",{bubbles:!0})))}}customElements.define("tp-multi-select",t),customElements.define("tp-multi-select-field",e),customElements.define("tp-multi-select-placeholder",l),customElements.define("tp-multi-select-status",i),customElements.define("tp-multi-select-options",s),customElements.define("tp-multi-select-option",n),customElements.define("tp-multi-select-search",u),customElements.define("tp-multi-select-pill",o),customElements.define("tp-multi-select-pills",r),customElements.define("tp-multi-select-select-all",c)})();
 //# sourceMappingURL=index.js.map

package/dist/multi-select/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dist/multi-select/index.js","mappings":"mBAWO,MAAMA,UAA6BC,YAUzC,WAAAC,GACCC,QAPD,KAAAC,4BAAsC,EAQrCC,KAAKC,sBAAwBD,KAAKE,qBAAqBC,KAAMH,KAC9D,CAKA,iBAAAI,GAECC,SAASC,iBAAkB,QAASN,KAAKO,oBAAoBJ,KAAMH,OACnEA,KAAKM,iBAAkB,SAAUN,KAAKQ,OAAOL,KAAMH,OAGnD,MAAMS,EAA8CT,KAAKU,cAAe,2BACnED,GACuC,IAAIE,iBAAkBX,KAAKY,WAAWT,KAAMH,OACtEa,QAASJ,EAAS,CAAEK,WAAW,EAAMC,SAAS,IAIhEf,KAAKY,YACN,CAOA,6BAAWI,GACV,MAAO,CAAE,OACV,CASA,wBAAAC,CAA0BC,EAAe,GAAIC,EAAmB,GAAIC,EAAmB,IACjFD,IAAaC,GAIb,SAAWF,IACV,QAAUE,GACdf,SAASC,iBAAkB,UAAWN,KAAKC,uBAC3CD,KAAKqB,cAAe,IAAIC,YAAa,OAAQ,CAAEC,SAAS,OAExDvB,KAAKwB,wBACLnB,SAASoB,oBAAqB,UAAWzB,KAAKC,uBAC9CD,KAAKqB,cAAe,IAAIC,YAAa,QAAS,CAAEC,SAAS,MAG5D,CAOA,SAAIG,CAAOA,GACV,IAAOA,IAAWC,MAAMC,QAASF,GAChC,OAGD,MAAMG,EAA+D7B,KAAK8B,iBAAkB,0BAC5FD,SAAAA,EAAeE,SAAWC,I,MACpBN,EAAMO,SAAwC,QAA9B,EAAAD,EAAOE,aAAc,gBAAS,QAAI,IACtDF,EAAOG,aAAc,WAAY,OAEjCH,EAAOI,gBAAiB,W,IAI1BpC,KAAKqB,cAAe,IAAIC,YAAa,SAAU,CAAEC,SAAS,IAC3D,CAOA,SAAIG,GACH,MAAMA,EAAkB,GAElBW,EAAwDrC,KAAK8B,iBAAkB,2BAOrF,OANAO,SAAAA,EAAiBN,SAAWC,IAC3B,MAAMM,EAAcN,EAAOE,aAAc,SACpCI,GACJZ,EAAMa,KAAMD,E,IAGPZ,CACR,CAKU,oBAAAc,GAET,MAAMC,EAAuEzC,KAAK8B,iBAAkB,0BAC9FY,EAAwC1C,KAAKU,cAAe,UAElE,IAAO+B,IAA2BC,EACjC,OAGD,MAAMC,EAAqChB,MAAMiB,KAAMF,EAAYjC,SAGnEgC,EAAsBV,SAAWC,I,QAChC,MAAMM,EAA4C,QAA9B,EAAAN,EAAOE,aAAc,gBAAS,QAAI,GACtD,GAAKI,EAAc,CAClB,MAAMO,EAAsDF,EAAcG,MAAQC,GAAkBA,EAAarB,QAAUY,IAE3H,GAAK,QAAUN,EAAOE,aAAc,YACnC,GAAKW,EACJA,EAAqBV,aAAc,WAAY,gBACzC,CACN,MAAMa,EAA+B3C,SAAS4C,cAAe,UAC7DD,EAAUb,aAAc,QAAuC,QAA9B,EAAAH,EAAOE,aAAc,gBAAS,QAAI,IACnEc,EAAUb,aAAc,WAAY,YACpCO,SAAAA,EAAaQ,OAAQF,E,MAGtBH,SAAAA,EAAsBM,Q,KAMzBT,EAAYrB,cAAe,IAAI+B,MAAO,UACvC,CAKA,MAAA5C,GAECR,KAAKwC,uBAGL,MAAMd,EAAkB1B,KAAK0B,MAGxB,IAAMA,EAAM2B,OAChBrD,KAAKmC,aAAc,WAAY,OAE/BnC,KAAKoC,gBAAiB,YAIvB,MAAMkB,EAA4CtD,KAAKU,cAAe,0BACjE4C,IACC5B,EAAM2B,OAAS,EACnBC,EAAOnB,aAAc,QAAST,EAAM2B,OAAOE,YAE3CD,EAAOlB,gBAAiB,SAG3B,CAOU,mBAAA7B,CAAqBiD,GACzBxD,OAASwD,EAAEC,QAAYzD,KAAK0D,SAAUF,EAAEC,SAC5CzD,KAAKoC,gBAAiB,OAExB,CAKA,UAAAxB,G,MAEC,IAAI+C,EAA0C3D,KAAKU,cAAe,UAC3DiD,EAUNA,EAAcC,UAAY,IAT1BD,EAAgBtD,SAAS4C,cAAe,UACxCU,EAAcxB,aAAc,OAAmC,QAA3B,EAAAnC,KAAKkC,aAAc,eAAQ,QAAI,IAE9D,OAASlC,KAAKkC,aAAc,aAChCyB,EAAcxB,aAAc,WAAY,YAGzCnC,KAAKkD,OAAQS,IAMd3D,KAAKQ,QACN,CAOA,MAAAqD,CAAQnC,EAAgB,IAEvB,GAAK,OAAS1B,KAAKkC,aAAc,cAEhClC,KAAK8D,cAGA,KAAOpC,GAIX,YAHK,QAAU1B,KAAKkC,aAAc,oBACjClC,KAAKoC,gBAAiB,SAOzB,MAAMK,EAAuEzC,KAAK8B,iBAAkB,iCAAkCJ,OACtIe,SAAAA,EAAuBV,SAAWC,IAC5B,QAAUA,EAAOE,aAAc,aACnCF,EAAOG,aAAc,WAAY,M,IAKnC,MAAM4B,EAA4C/D,KAAKU,cAAe,0BACtEqD,SAAAA,EAAQC,QACRD,SAAAA,EAAQE,QAGH,QAAUjE,KAAKkC,aAAc,oBACjClC,KAAKoC,gBAAiB,QAEvBpC,KAAKQ,QACN,CAKA,SAAA0D,GACC,MAAMrC,EAA+D7B,KAAK8B,iBAAkB,0BAC5FD,SAAAA,EAAeE,SAAWC,IACpB,QAAUA,EAAOE,aAAc,aACnCF,EAAOG,aAAc,WAAY,M,IAGnCnC,KAAKQ,QACN,CAOA,QAAA2D,CAAUzC,EAAgB,IACzB,MAAMe,EAAuEzC,KAAK8B,iBAAkB,iCAAkCJ,OACtIe,SAAAA,EAAuBV,SAAWC,IACjCA,EAAOI,gBAAiB,WAAY,IAErCpC,KAAKQ,QACN,CAKA,WAAAsD,GACC,MAAMrB,EAAuEzC,KAAK8B,iBAAkB,0BACpGW,SAAAA,EAAuBV,SAAWC,IACjCA,EAAOI,gBAAiB,WAAY,IAErCpC,KAAKQ,QACN,CAOA,oBAAAN,CAAsBsD,GACrB,OAASA,EAAEY,KACV,IAAK,YACJZ,EAAEa,iBACFrE,KAAKsE,sBACL,MACD,IAAK,UACJd,EAAEa,iBACFrE,KAAKuE,0BACL,MACD,IAAK,QACJvE,KAAKwE,0BACL,MACD,IAAK,SACJxE,KAAKwB,wBACLxB,KAAKoC,gBAAiB,QAGzB,CAKA,mBAAAkC,GAEC,MAAM7D,EAAyDT,KAAK8B,iBAAkB,8CACtF,IAAOrB,EAEN,YADAT,KAAKD,4BAA8B,GAKpC,IAAI0E,EAAsBzE,KAAKD,2BAA6B,EAG5D,KAAQ0E,EAAsBhE,EAAQ4C,QAAwE,QAA9D5C,EAASgE,GAAsBvC,aAAc,aAC5FuC,IAIIA,IAAwBhE,EAAQ4C,UAKK,IAArCrD,KAAKD,4BACTU,EAAST,KAAKD,4BAA6BqC,gBAAiB,eAI7D3B,EAASgE,GAAsBtC,aAAc,cAAe,OAG5D1B,EAASgE,GAAsBC,eAAgB,CAAEC,SAAU,SAAUC,MAAO,YAG5E5E,KAAKD,2BAA6B0E,EACnC,CAKA,uBAAAF,GAEC,MAAM9D,EAAyDT,KAAK8B,iBAAkB,8CACtF,IAAOrB,EAEN,YADAT,KAAKD,4BAA8B,GAKpC,IAAI8E,EAA0B7E,KAAKD,2BAA6B,EAGhE,KAAQ8E,GAA2B,GAAuE,QAAlEpE,EAASoE,GAA0B3C,aAAc,aACxF2C,IAIIA,EAA0B,IAKU,IAApC7E,KAAKD,4BACTU,EAAST,KAAKD,4BAA6BqC,gBAAiB,eAI7D3B,EAASoE,GAA0B1C,aAAc,cAAe,OAGhE1B,EAASoE,GAA0BH,eAAgB,CAAEC,SAAU,SAAUC,MAAO,YAGhF5E,KAAKD,2BAA6B8E,EACnC,CAKA,uBAAAL,GACC,MAAMxC,EAA4ChC,KAAKU,cAAe,6CACtEsB,SAAAA,EAAQ8C,OAAQ,KACjB,CAKA,qBAAAtD,GACCxB,KAAKD,4BAA8B,EAEnC,MAAMU,EAAyDT,KAAK8B,iBAAkB,0BACjFrB,GACJA,EAAQsB,SAAWC,IAClBA,EAAOI,gBAAiB,cAAe,GAG1C,EC3ZM,MAAM2C,UAAkCnF,YAA/C,c,oBAIS,KAAAoF,aAAuB,CAgChC,CA3BC,iBAAA5E,IAEM,IAASJ,KAAKgF,cAKnBhF,KAAKgF,aAAc,EAEnBhF,KAAKM,iBAAkB,QAASN,KAAKiF,WAAW9E,KAAMH,OACvD,CAKA,UAAAiF,GACC,MAAMC,EAA2ClF,KAAKmF,QAAS,mBACxDD,IAIF,QAAUA,EAAYhD,aAAc,QACxCgD,EAAY9C,gBAAiB,QAE7B8C,EAAY/C,aAAc,OAAQ,OAEpC,ECxCM,MAAMiD,UAAwCxF,aCM9C,MAAMyF,UAAmCzF,YAM/C,6BAAWoB,GACV,MAAO,CAAE,QAAS,SACnB,CASA,wBAAAC,CAA0BqE,EAAgB,GAAInE,EAAmB,GAAIC,EAAmB,IAClFD,IAAaC,GACjBpB,KAAKQ,QAEP,CAKA,MAAAA,G,YACC,MAAM+E,EAA8C,QAA7B,EAAAvF,KAAKkC,aAAc,iBAAU,QAAI,kBACxD,IAAIsD,EAAeD,EAAOE,QAAS,SAAsC,QAA5B,EAAAzF,KAAKkC,aAAc,gBAAS,QAAI,IAE7E,GAAKqD,EAAOtD,SAAU,UAAa,CAClC,MAAMiD,EAA2ClF,KAAKmF,QAAS,mBAC/D,GAAKD,EAAc,CAClB,MAAMxD,EAAmC,QAAjB,EAAAwD,EAAYxD,aAAK,QAAI,GAC7C,IAAI+D,EAAkB,GAEtB,GAAK/D,EAAM2B,OAAS,EAAI,CACvB,MAAMrB,EAA4CkD,EAAYxE,cAAe,iCAAkCgB,EAAO,QACjHM,IACJyD,EAAwC,QAA9B,EAAAzD,EAAOE,aAAc,gBAAS,QAAI,G,CAI9CsD,EAAOA,EAAKC,QAAS,SAAUA,E,EAIjCzF,KAAK4D,UAAY4B,CAClB,ECtDM,MAAME,UAAoC9F,aCK1C,MAAM+F,UAAmC/F,YAAhD,c,oBAIS,KAAAoF,aAAuB,CA4ChC,CAvCC,iBAAA5E,IAEM,IAASJ,KAAKgF,cAKnBhF,KAAKgF,aAAc,EAEnBhF,KAAKM,iBAAkB,QAASN,KAAK8E,OAAO3E,KAAMH,OACnD,CAOA,MAAA8E,CAAQtB,G,MACPA,SAAAA,EAAGa,iBACHb,SAAAA,EAAGoC,kBAEH,MAAMV,EAA2ClF,KAAKmF,QAAS,mBACzDzD,EAA4C,QAA5B,EAAA1B,KAAKkC,aAAc,gBAAS,QAAI,GAEjD,QAAUlC,KAAKkC,aAAc,aACjCgD,SAAAA,EAAarB,OAAQnC,GACrBwD,SAAAA,EAAa7D,cAAe,IAAIC,YAAa,SAAU,CACtDC,SAAS,EACTsE,OAAQ,CAAEnE,cAGXwD,SAAAA,EAAaf,SAAUzC,GACvBwD,SAAAA,EAAa7D,cAAe,IAAIC,YAAa,WAAY,CACxDC,SAAS,EACTsE,OAAQ,CAAEnE,aAGZwD,SAAAA,EAAa7D,cAAe,IAAIC,YAAa,SAAU,CAAEC,SAAS,IACnE,EC7CM,MAAMuE,UAAmClG,YAI/C,iBAAAQ,G,MACC,MAAM2F,EAAiC/F,KAAKU,cAAe,SACpDqF,IAIPA,EAAMzF,iBAAkB,UAAWN,KAAKE,qBAAqBC,KAAMH,OACnE+F,EAAMzF,iBAAkB,QAASN,KAAKgG,mBAAmB7F,KAAMH,OAC/D+F,EAAMzF,iBAAkB,QAASN,KAAKgG,mBAAmB7F,KAAMH,OAC/DA,KAAKM,iBAAkB,QAASN,KAAKiG,YAAY9F,KAAMH,OACtB,QAAjC,EAAAA,KAAKmF,QAAS,0BAAmB,SAAE7E,iBAAkB,OAAQN,KAAKiE,MAAM9D,KAAMH,OAC/E,CAOA,oBAAAE,CAAsBsD,GACrB,MAAM0B,EAA2ClF,KAAKmF,QAAS,mBACzDpB,EAAkC/D,KAAKU,cAAe,SAC5D,GAAOwE,GAAiBnB,EAIxB,OAASP,EAAEY,KACV,IAAK,QACJZ,EAAEa,iBACF,MACD,IAAK,YACJa,EAAY/C,aAAc,OAAQ,OAClC,MACD,IAAK,YACJ,GAAK,IAAM4B,EAAOrC,MAAM2B,OAAS,CAChC,MAAM6C,EAAwChB,EAAYxE,cAAe,qCACpEwF,GACJA,EAAKC,Y,EAKV,CAKU,kBAAAH,G,MAET,MAAMd,EAA2ClF,KAAKmF,QAAS,mBACzDpB,EAAkC/D,KAAKU,cAAe,SACtDD,EAA+F,QAAjC,EAAAT,KAAKmF,QAAS,0BAAmB,eAAErD,iBAAkB,0BACzH,IAAOoD,IAAiBnB,IAAYtD,EACnC,OAGD,IAAI2F,EAAqB,EAEzB3F,EAAQsB,SAAWC,I,OACiB,QAA9B,EAAAA,EAAOE,aAAc,gBAAS,eAAEmE,cAAcC,MAAO,IAAIC,OAAQ,KAAMxC,EAAOrC,MAAM2E,cAAcZ,QAAS,MAAO,cACtHzD,EAAOI,gBAAiB,UACxBgE,KAEApE,EAAOG,aAAc,SAAU,M,IAK5B,KAAO4B,EAAOrC,MAClBqC,EAAO3B,gBAAiB,UAExB2B,EAAOyC,MAAMC,MAAQ,GAAI1C,EAAOrC,MAAM2B,OAAS,MAC/C6B,EAAY/C,aAAc,OAAQ,QAGnC+C,EAAY/C,aAAc,kBAAmBiE,EAAmB7C,WACjE,CAOU,WAAA0C,CAAazC,G,MAEtBA,EAAEa,iBACFb,EAAEoC,kBAGF5F,KAAKqB,cAAe,IAAIC,YAAa,wBACrCjB,SAASgB,cAAe,IAAI+B,MAAO,UAGF,QAAjC,EAAApD,KAAKmF,QAAS,0BAAmB,SAAEhD,aAAc,OAAQ,MAC1D,CAKA,KAAA6B,GACC,MAAMD,EAAkC/D,KAAKU,cAAe,SACvDqD,IACJA,EAAOrC,MAAQ,GACfqC,EAAO1C,cAAe,IAAI+B,MAAO,WAEnC,CAKA,KAAAa,G,MAECjE,KAAKgG,qBAGwB,QAA7B,EAAAhG,KAAKU,cAAe,gBAAS,SAAEuD,OAChC,ECzHM,MAAMyC,UAAiC9G,YAI7C,iBAAAQ,G,MAC+B,QAA9B,EAAAJ,KAAKU,cAAe,iBAAU,SAAEJ,iBAAkB,QAASN,KAAK2G,kBAAkBxG,KAAMH,MACzF,CAMA,iBAAA2G,CAAmBnD,GAClBA,SAAAA,EAAGa,iBACHb,SAAAA,EAAGoC,kBACH5F,KAAKmG,YACN,CAKA,UAAAA,G,MACC,MAAMjB,EAA2ClF,KAAKmF,QAAS,mBAC1DD,GAAelF,KAAKkC,aAAc,WACtCgD,EAAYf,SAAsC,QAA5B,EAAAnE,KAAKkC,aAAc,gBAAS,QAAI,IACtDgD,EAAY7D,cAAe,IAAIC,YAAa,WAAY,CAAEC,SAAS,KACnE2D,EAAY7D,cAAe,IAAIC,YAAa,SAAU,CAAEC,SAAS,KAEnE,EC1BM,MAAMqF,UAAkChH,YAI9C,iBAAAQ,G,UAEkC,QAAjC,EAAAJ,KAAKmF,QAAS,0BAAmB,SAAE7E,iBAAkB,SAAUN,KAAKQ,OAAOL,KAAMH,OACrB,QAA5D,EAAiC,QAAjC,EAAAA,KAAKmF,QAAS,0BAAmB,eAAEzE,cAAe,iBAAU,SAAEJ,iBAAkB,UAAU,IAAQN,KAAKQ,WAGvGR,KAAKQ,QACN,CAKA,MAAAA,G,MAEC,MAAM0E,EAA2ClF,KAAKmF,QAAS,mBAC/D,IAAOD,EACN,OAID,MAAM2B,EAAqD7G,KAAK8B,iBAAkB,wBAC5EgF,EAAoC,QAAjB,EAAA5B,EAAYxD,aAAK,QAAI,GACxCqF,EAAuB,GAG7BF,EAAM9E,SAAWmE,I,MAChB,MAAMc,EAAgD,QAA5B,EAAAd,EAAKhE,aAAc,gBAAS,QAAI,GAErD,KAAO8E,IAIZD,EAAWxE,KAAMyE,GAEVF,EAAO7E,SAAU+E,IACvBd,EAAK/C,S,IAKyB2D,EAAOG,QAAUvF,IAAqBqF,EAAW9E,SAAUP,KAC7EK,SAAWiF,I,MACxB,GAAK,KAAOA,EACX,OAGD,MAAME,EAAuDhC,EAAYxE,cAAe,iCAAkCsG,OAC1H,IAAOE,EACN,OAGD,MAAMC,EAAuB9G,SAAS4C,cAAe,wBACrDkE,EAAQhF,aAAc,QAAS6E,GAC/BG,EAAQvD,UAAY,iBAC8B,QAAzC,EAAAsD,EAAkBhF,aAAc,gBAAS,QAAI,4DAGtDlC,KAAKoH,YAAaD,EAAS,GAE7B,EChEM,MAAME,UAAsCzH,YAIlD,iBAAAQ,G,MACkC,QAAjC,EAAAJ,KAAKmF,QAAS,0BAAmB,SAAE7E,iBAAkB,SAAUN,KAAKsH,mBAAmBnH,KAAMH,OAC7FA,KAAKM,iBAAkB,QAASN,KAAKuH,gBAAgBpH,KAAMH,MAC5D,CAKA,kBAAAsH,G,QACC,MAAMpC,EAA2ClF,KAAKmF,QAAS,mBACzD1E,EAAqEyE,aAAW,EAAXA,EAAapD,iBAAkB,0BACnGoD,GAAiBzE,IAInBkB,MAAMiB,KAAMnC,GAAUwG,QAAUO,GAA0D,QAA1CA,EAAWtF,aAAc,cAAyBmB,SAAW6B,EAAYxD,MAAM2B,QACnIrD,KAAKmC,aAAc,WAAY,OAC/BnC,KAAK4D,UAAgD,QAApC,EAAA5D,KAAKkC,aAAc,wBAAiB,QAAI,KAEzDlC,KAAKoC,gBAAiB,YACtBpC,KAAK4D,UAA8C,QAAlC,EAAA5D,KAAKkC,aAAc,sBAAe,QAAI,IAEzD,CAKA,eAAAqF,GACC,MAAMrC,EAA2ClF,KAAKmF,QAAS,mBACxDD,IAIF,QAAUlF,KAAKkC,aAAc,aACjCgD,EAAYhB,YACZgB,EAAY7D,cAAe,IAAIC,YAAa,aAAc,CAAEC,SAAS,OAErE2D,EAAYpB,cACZoB,EAAY7D,cAAe,IAAIC,YAAa,eAAgB,CAAEC,SAAS,MAExE2D,EAAY7D,cAAe,IAAIC,YAAa,SAAU,CAAEC,SAAS,KAClE,EChCDkG,eAAeC,OAAQ,kBAAmB/H,GAC1C8H,eAAeC,OAAQ,wBAAyB3C,GAChD0C,eAAeC,OAAQ,8BAA+BtC,GACtDqC,eAAeC,OAAQ,yBAA0BrC,GACjDoC,eAAeC,OAAQ,0BAA2BhC,GAClD+B,eAAeC,OAAQ,yBAA0B/B,GACjD8B,eAAeC,OAAQ,yBAA0B5B,GACjD2B,eAAeC,OAAQ,uBAAwBhB,GAC/Ce,eAAeC,OAAQ,wBAAyBd,GAChDa,eAAeC,OAAQ,6BAA8BL,E","sources":["webpack://@travelopia/web-components/./src/multi-select/tp-multi-select.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-field.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-placeholder.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-status.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-options.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-option.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-search.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-pill.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-pills.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-select-all.ts","webpack://@travelopia/web-components/./src/multi-select/index.ts"],"sourcesContent":["/*\n Internal dependencies.\n /\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectStatusElement } from './tp-multi-select-status';\nimport { TPMultiSelectOptionsElement } from './tp-multi-select-options';\nimport { TPMultiSelectSearchElement } from './tp-multi-select-search';\n\n/\n TP Multi Select.\n /\nexport class TPMultiSelectElement extends HTMLElement {\n\t/\n\t Properties.\n\t /\n\tcurrentlyHighlightedOption: number = -1;\n\tprotected keyboardEventListener: EventListener;\n\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\t\tthis.keyboardEventListener = this.handleKeyboardInputs.bind( this ) as EventListener;\n\t}\n\n\t/\n\t Connected callback.\n\t /\n\tconnectedCallback(): void {\n\t\t// Events.\n\t\tdocument.addEventListener( 'click', this.handleDocumentClick.bind( this ) );\n\t\tthis.addEventListener( 'change', this.update.bind( this ) );\n\n\t\t// Listen for dynamic changes to the option values.\n\t\tconst options: TPMultiSelectOptionsElement \| null = this.querySelector( 'tp-multi-select-options' );\n\t\tif ( options ) {\n\t\t\tconst mutationObserver: MutationObserver = new MutationObserver( this.initialize.bind( this ) );\n\t\t\tmutationObserver.observe( options, { childList: true, subtree: true } );\n\t\t}\n\n\t\t// Initialize component.\n\t\tthis.initialize();\n\t}\n\n\t/\n\t Get observed attributes.\n\t \n\t @return {Array} List of observed attributes.\n\t /\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'open' ];\n\t}\n\n\t/\n\t Attribute changed callback.\n\t \n\t @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t /\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( oldValue === newValue ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'open' === name ) {\n\t\t\tif ( 'yes' === newValue ) {\n\t\t\t\tdocument.addEventListener( 'keydown', this.keyboardEventListener );\n\t\t\t\tthis.dispatchEvent( new CustomEvent( 'open', { bubbles: true } ) );\n\t\t\t} else {\n\t\t\t\tthis.unHighlightAllOptions();\n\t\t\t\tdocument.removeEventListener( 'keydown', this.keyboardEventListener );\n\t\t\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Set the value of this component.\n\t \n\t @param {Array} value Value.\n\t /\n\tset value( value: string[] ) {\n\t\tif ( ! value \|\| ! Array.isArray( value ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst styledOptions: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( value.includes( option.getAttribute( 'value' ) ?? '' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t} else {\n\t\t\t\toption.removeAttribute( 'selected' );\n\t\t\t}\n\t\t} );\n\n\t\tthis.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n\n\t/\n\t Get the value of this component.\n\t \n\t @return {Array} Value of this component.\n\t /\n\tget value(): string[] {\n\t\tconst value: string[] = [];\n\n\t\tconst selectedOptions: NodeListOf<HTMLOptionElement> \| null = this.querySelectorAll( 'select option[selected]' );\n\t\tselectedOptions?.forEach( ( option: HTMLOptionElement ) => {\n\t\t\tconst optionValue = option.getAttribute( 'value' );\n\t\t\tif ( optionValue ) {\n\t\t\t\tvalue.push( optionValue );\n\t\t\t}\n\t\t} );\n\t\treturn value;\n\t}\n\n\t/\n\t Update the value of the select field.\n\t /\n\tprotected updateFormFieldValue(): void {\n\t\t// Get options.\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( `tp-multi-select-option` );\n\t\tconst selectField: HTMLSelectElement \| null = this.querySelector( 'select' );\n\n\t\tif ( ! styledSelectedOptions \|\| ! selectField ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst selectOptions: HTMLOptionElement[] = Array.from( selectField.options );\n\n\t\t// Traverse options.\n\t\tstyledSelectedOptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tconst optionValue = option.getAttribute( 'value' ) ?? '';\n\t\t\tif ( optionValue ) {\n\t\t\t\tconst matchingSelectOption: HTMLOptionElement \| undefined = selectOptions.find( ( selectOption ) => selectOption.value === optionValue );\n\n\t\t\t\tif ( 'yes' === option.getAttribute( 'selected' ) ) {\n\t\t\t\t\tif ( matchingSelectOption ) {\n\t\t\t\t\t\tmatchingSelectOption.setAttribute( 'selected', 'selected' );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tconst newOption: HTMLOptionElement = document.createElement( 'option' );\n\t\t\t\t\t\tnewOption.setAttribute( 'value', option.getAttribute( 'value' ) ?? '' );\n\t\t\t\t\t\tnewOption.setAttribute( 'selected', 'selected' );\n\t\t\t\t\t\tselectField?.append( newOption );\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tmatchingSelectOption?.remove();\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\n\t\t// Dispatch events.\n\t\tselectField.dispatchEvent( new Event( 'change' ) );\n\t}\n\n\t/\n\t Update component and sub-components.\n\t /\n\tupdate(): void {\n\t\t// First, update field value.\n\t\tthis.updateFormFieldValue();\n\n\t\t// Get value.\n\t\tconst value: string[] = this.value;\n\n\t\t// Toggle selected attribute.\n\t\tif ( 0 !== value.length ) {\n\t\t\tthis.setAttribute( 'selected', 'yes' );\n\t\t} else {\n\t\t\tthis.removeAttribute( 'selected' );\n\t\t}\n\n\t\t// Update status.\n\t\tconst status: TPMultiSelectStatusElement \| null = this.querySelector( 'tp-multi-select-status' );\n\t\tif ( status ) {\n\t\t\tif ( value.length > 0 ) {\n\t\t\t\tstatus.setAttribute( 'total', value.length.toString() );\n\t\t\t} else {\n\t\t\t\tstatus.removeAttribute( 'total' );\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Handle clicking the document.\n\t \n\t @param {Event} e Event.\n\t /\n\tprotected handleDocumentClick( e: Event ): void {\n\t\tif ( this !== e.target && ! this.contains( e.target as Node ) ) {\n\t\t\tthis.removeAttribute( 'open' );\n\t\t}\n\t}\n\n\t/\n\t Initialize component.\n\t /\n\tinitialize(): void {\n\t\t// Create select element (if it doesn't already exist).\n\t\tlet selectElement: HTMLSelectElement \| null = this.querySelector( 'select' );\n\t\tif ( ! selectElement ) {\n\t\t\tselectElement = document.createElement( 'select' );\n\t\t\tselectElement.setAttribute( 'name', this.getAttribute( 'name' ) ?? '' );\n\n\t\t\tif ( 'no' !== this.getAttribute( 'multiple' ) ) {\n\t\t\t\tselectElement.setAttribute( 'multiple', 'multiple' );\n\t\t\t}\n\n\t\t\tthis.append( selectElement );\n\t\t} else {\n\t\t\tselectElement.innerHTML = '';\n\t\t}\n\n\t\t// Update components for selected options.\n\t\tthis.update();\n\t}\n\n\t/\n\t Select a value.\n\t \n\t @param {string} value Value to select.\n\t /\n\tselect( value: string = '' ): void {\n\t\t// Stuff for single-select.\n\t\tif ( 'no' === this.getAttribute( 'multiple' ) ) {\n\t\t\t// First, unselect everything.\n\t\t\tthis.unSelectAll();\n\n\t\t\t// If the value is blank, don't do anything else.\n\t\t\tif ( '' === value ) {\n\t\t\t\tif ( 'yes' === this.getAttribute( 'close-on-select' ) ) {\n\t\t\t\t\tthis.removeAttribute( 'open' );\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// Select all options.\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( `tp-multi-select-option[value=\"${ value }\"]` );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( 'yes' !== option.getAttribute( 'disabled' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t}\n\t\t} );\n\n\t\t// Search stuff.\n\t\tconst search: TPMultiSelectSearchElement \| null = this.querySelector( 'tp-multi-select-search' );\n\t\tsearch?.clear();\n\t\tsearch?.focus();\n\n\t\t// Close the field, if applicable.\n\t\tif ( 'yes' === this.getAttribute( 'close-on-select' ) ) {\n\t\t\tthis.removeAttribute( 'open' );\n\t\t}\n\t\tthis.update();\n\t}\n\n\t/\n\t Select all values.\n\t /\n\tselectAll(): void {\n\t\tconst styledOptions: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( 'yes' !== option.getAttribute( 'disabled' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t}\n\t\t} );\n\t\tthis.update();\n\t}\n\n\t/\n\t Un-select a value.\n\t \n\t @param {string} value Value to unselect.\n\t /\n\tunSelect( value: string = '' ): void {\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( `tp-multi-select-option[value=\"${ value }\"]` );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\toption.removeAttribute( 'selected' );\n\t\t} );\n\t\tthis.update();\n\t}\n\n\t/\n\t Un-select all values.\n\t /\n\tunSelectAll(): void {\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\toption.removeAttribute( 'selected' );\n\t\t} );\n\t\tthis.update();\n\t}\n\n\t/\n\t Handle keyboard inputs.\n\t \n\t @param {Event} e Keyboard event.\n\t /\n\thandleKeyboardInputs( e: KeyboardEvent ): void {\n\t\tswitch ( e.key ) {\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.highlightNextOption();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.highlightPreviousOption();\n\t\t\t\tbreak;\n\t\t\tcase 'Enter':\n\t\t\t\tthis.toggleHighlightedOption();\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tthis.unHighlightAllOptions();\n\t\t\t\tthis.removeAttribute( 'open' );\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/\n\t Highlight the next option.\n\t /\n\thighlightNextOption(): void {\n\t\t// Get options.\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( 'tp-multi-select-option:not([hidden=\"yes\"])' );\n\t\tif ( ! options ) {\n\t\t\tthis.currentlyHighlightedOption = -1;\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the next option to be highlighted. Assume next option is the favorable option.\n\t\tlet nextToBeHighlighted = this.currentlyHighlightedOption + 1;\n\n\t\t// Keep iterating to skip over disabled options until we find a suitable option.\n\t\twhile ( nextToBeHighlighted < options.length && options[ nextToBeHighlighted ].getAttribute( 'disabled' ) === 'yes' ) {\n\t\t\tnextToBeHighlighted++;\n\t\t}\n\n\t\t// If there are no more options to highlight, exit. Here, the last highlighted option keeps highlighted.\n\t\tif ( nextToBeHighlighted === options.length ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove highlight from the current option, if any.\n\t\tif ( this.currentlyHighlightedOption !== -1 ) {\n\t\t\toptions[ this.currentlyHighlightedOption ].removeAttribute( 'highlighted' );\n\t\t}\n\n\t\t// Highlight the found option.\n\t\toptions[ nextToBeHighlighted ].setAttribute( 'highlighted', 'yes' );\n\n\t\t// Scroll the highlighted option into view with smooth behavior.\n\t\toptions[ nextToBeHighlighted ].scrollIntoView( { behavior: 'smooth', block: 'nearest' } );\n\n\t\t// Update the currentlyHighlightedOption for the next iteration.\n\t\tthis.currentlyHighlightedOption = nextToBeHighlighted;\n\t}\n\n\t/\n\t Highlight previous option.\n\t /\n\thighlightPreviousOption(): void {\n\t\t// Get options.\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( 'tp-multi-select-option:not([hidden=\"yes\"])' );\n\t\tif ( ! options ) {\n\t\t\tthis.currentlyHighlightedOption = -1;\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the previous option to be highlighted. Assume previous option is the favorable option.\n\t\tlet previousToBeHighlighted = this.currentlyHighlightedOption - 1;\n\n\t\t// Keep iterating to skip over disabled options until we find a suitable option.\n\t\twhile ( previousToBeHighlighted >= 0 && options[ previousToBeHighlighted ].getAttribute( 'disabled' ) === 'yes' ) {\n\t\t\tpreviousToBeHighlighted--;\n\t\t}\n\n\t\t// If there are no more options to highlight, exit.\n\t\tif ( previousToBeHighlighted < 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove highlight from the current option, if any.\n\t\tif ( this.currentlyHighlightedOption !== 0 ) {\n\t\t\toptions[ this.currentlyHighlightedOption ].removeAttribute( 'highlighted' );\n\t\t}\n\n\t\t// Highlight the found option.\n\t\toptions[ previousToBeHighlighted ].setAttribute( 'highlighted', 'yes' );\n\n\t\t// Scroll the highlighted option into view with smooth behavior.\n\t\toptions[ previousToBeHighlighted ].scrollIntoView( { behavior: 'smooth', block: 'nearest' } );\n\n\t\t// Update the currentlyHighlightedOption for the next iteration.\n\t\tthis.currentlyHighlightedOption = previousToBeHighlighted;\n\t}\n\n\t/\n\t Toggle highlighted option.\n\t /\n\ttoggleHighlightedOption(): void {\n\t\tconst option: TPMultiSelectOptionElement \| null = this.querySelector( `tp-multi-select-option[highlighted=\"yes\"]` );\n\t\toption?.toggle( null );\n\t}\n\n\t/\n\t Un-highlight all options.\n\t /\n\tunHighlightAllOptions(): void {\n\t\tthis.currentlyHighlightedOption = -1;\n\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tif ( options ) {\n\t\t\toptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\t\toption.removeAttribute( 'highlighted' );\n\t\t\t} );\n\t\t}\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/\n TP Multi Select Field.\n /\nexport class TPMultiSelectFieldElement extends HTMLElement {\n\t/\n\t Properties.\n\t /\n\tprivate initialized: boolean = false;\n\n\t/\n\t Connected callback.\n\t /\n\tconnectedCallback(): void {\n\t\t// Return early if already initialized.\n\t\tif ( true === this.initialized ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set initialized flag to true.\n\t\tthis.initialized = true;\n\n\t\tthis.addEventListener( 'click', this.toggleOpen.bind( this ) );\n\t}\n\n\t/\n\t Toggle opening this component.\n\t /\n\ttoggleOpen(): void {\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tif ( ! multiSelect ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'yes' === multiSelect.getAttribute( 'open' ) ) {\n\t\t\tmultiSelect.removeAttribute( 'open' );\n\t\t} else {\n\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t}\n\t}\n}\n","/\n TP Multi Select Placeholder.\n /\nexport class TPMultiSelectPlaceholderElement extends HTMLElement {\n}\n","/\n Internal dependencies.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/\n TP Multi Select Status.\n /\nexport class TPMultiSelectStatusElement extends HTMLElement {\n\t/\n\t Get observed attributes.\n\t \n\t @return {Array} List of observed attributes.\n\t /\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'total', 'format' ];\n\t}\n\n\t/\n\t Attribute changed callback.\n\t \n\t @param {string} _name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t /\n\tattributeChangedCallback( _name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( oldValue !== newValue ) {\n\t\t\tthis.update();\n\t\t}\n\t}\n\n\t/\n\t Update this component.\n\t /\n\tupdate(): void {\n\t\tconst format: string = this.getAttribute( 'format' ) ?? '$total Selected';\n\t\tlet html: string = format.replace( '$total', this.getAttribute( 'total' ) ?? '' );\n\n\t\tif ( format.includes( '$value' ) ) {\n\t\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\t\tif ( multiSelect ) {\n\t\t\t\tconst value: string[] = multiSelect.value ?? [];\n\t\t\t\tlet replace: string = '';\n\n\t\t\t\tif ( value.length > 0 ) {\n\t\t\t\t\tconst option: TPMultiSelectOptionElement \| null = multiSelect.querySelector( `tp-multi-select-option[value=\"${ value[ 0 ] }\"]` );\n\t\t\t\t\tif ( option ) {\n\t\t\t\t\t\treplace = option.getAttribute( 'label' ) ?? '';\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\thtml = html.replace( '$value', replace );\n\t\t\t}\n\t\t}\n\n\t\tthis.innerHTML = html;\n\t}\n}\n","/\n TP Multi Select Options.\n /\nexport class TPMultiSelectOptionsElement extends HTMLElement {\n}\n","/\n Internal dependencies.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/\n TP Multi Select Option.\n /\nexport class TPMultiSelectOptionElement extends HTMLElement {\n\t/\n\t Properties.\n\t /\n\tprivate initialized: boolean = false;\n\n\t/\n\t Connected callback.\n\t /\n\tconnectedCallback(): void {\n\t\t// Return early if already initialized.\n\t\tif ( true === this.initialized ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set initialized flag to true.\n\t\tthis.initialized = true;\n\n\t\tthis.addEventListener( 'click', this.toggle.bind( this ) );\n\t}\n\n\t/\n\t Select / un-select this option.\n\t \n\t @param {Event} e Click event.\n\t /\n\ttoggle( e: Event \| null ): void {\n\t\te?.preventDefault();\n\t\te?.stopPropagation();\n\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tconst value: string = this.getAttribute( 'value' ) ?? '';\n\n\t\tif ( 'yes' !== this.getAttribute( 'selected' ) ) {\n\t\t\tmultiSelect?.select( value );\n\t\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'select', {\n\t\t\t\tbubbles: true,\n\t\t\t\tdetail: { value },\n\t\t\t} ) );\n\t\t} else {\n\t\t\tmultiSelect?.unSelect( value );\n\t\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'unselect', {\n\t\t\t\tbubbles: true,\n\t\t\t\tdetail: { value },\n\t\t\t} ) );\n\t\t}\n\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\n\n/\n TP Multi Select Search.\n /\nexport class TPMultiSelectSearchElement extends HTMLElement {\n\t/\n\t Connected callback.\n\t /\n\tconnectedCallback(): void {\n\t\tconst input: HTMLInputElement \| null = this.querySelector( 'input' );\n\t\tif ( ! input ) {\n\t\t\treturn;\n\t\t}\n\n\t\tinput.addEventListener( 'keydown', this.handleKeyboardInputs.bind( this ) );\n\t\tinput.addEventListener( 'keyup', this.handleSearchChange.bind( this ) );\n\t\tinput.addEventListener( 'input', this.handleSearchChange.bind( this ) );\n\t\tthis.addEventListener( 'click', this.handleClick.bind( this ) );\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'open', this.focus.bind( this ) );\n\t}\n\n\t/\n\t Handle keyboard inputs.\n\t \n\t @param {Event} e Keyboard event.\n\t /\n\thandleKeyboardInputs( e: KeyboardEvent ): void {\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tconst search: HTMLInputElement \| null = this.querySelector( 'input' );\n\t\tif ( ! multiSelect \|\| ! search ) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( e.key ) {\n\t\t\tcase 'Enter':\n\t\t\t\te.preventDefault(); // Prevent inadvertent form submits.\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t\t\tbreak;\n\t\t\tcase 'Backspace':\n\t\t\t\tif ( 0 === search.value.length ) {\n\t\t\t\t\tconst pill: TPMultiSelectPillElement \| null = multiSelect.querySelector( 'tp-multi-select-pill:last-of-type' );\n\t\t\t\t\tif ( pill ) {\n\t\t\t\t\t\tpill.removePill();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/\n\t Handle search field value changed.\n\t /\n\tprotected handleSearchChange(): void {\n\t\t// Get search field and options.\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tconst search: HTMLInputElement \| null = this.querySelector( 'input' );\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> \| undefined = this.closest( 'tp-multi-select' )?.querySelectorAll( 'tp-multi-select-option' );\n\t\tif ( ! multiSelect \|\| ! search \|\| ! options ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet matchedOptionCount = 0;\n\t\t// Hide and show options based on search.\n\t\toptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( option.getAttribute( 'label' )?.toLowerCase().match( new RegExp( `.${ search.value.toLowerCase().replace( /\\s/g, '.' ) }.` ) ) ) {\n\t\t\t\toption.removeAttribute( 'hidden' );\n\t\t\t\tmatchedOptionCount++;\n\t\t\t} else {\n\t\t\t\toption.setAttribute( 'hidden', 'yes' );\n\t\t\t}\n\t\t} );\n\n\t\t// Resize input width.\n\t\tif ( '' === search.value ) {\n\t\t\tsearch.removeAttribute( 'style' );\n\t\t} else {\n\t\t\tsearch.style.width = `${ search.value.length + 2 }ch`;\n\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t}\n\n\t\tmultiSelect.setAttribute( 'visible-options', matchedOptionCount.toString() );\n\t}\n\n\t/*\n\t Handle click.\n\t \n\t @param {Event} e Click event.\n\t /\n\tprotected handleClick( e: Event ): void {\n\t\t// First, prevent propagation to avoid document.click set on `tp-multi-select`.\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\t// Now send the event so other stuff can work as per normal, and another event for good measure.\n\t\tthis.dispatchEvent( new CustomEvent( 'multi-select-opened' ) );\n\t\tdocument.dispatchEvent( new Event( 'click' ) );\n\n\t\t// Open multi select.\n\t\tthis.closest( 'tp-multi-select' )?.setAttribute( 'open', 'yes' );\n\t}\n\n\t/\n\t Clear the search field.\n\t /\n\tclear(): void {\n\t\tconst search: HTMLInputElement \| null = this.querySelector( 'input' );\n\t\tif ( search ) {\n\t\t\tsearch.value = '';\n\t\t\tsearch.dispatchEvent( new Event( 'change' ) );\n\t\t}\n\t}\n\n\t/\n\t Set focus on the search field.\n\t /\n\tfocus(): void {\n\t\t// When it's focused, use search change to ensure the results are refreshed.\n\t\tthis.handleSearchChange();\n\n\t\t// Focus on input.\n\t\tthis.querySelector( 'input' )?.focus();\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/\n TP Multi Select Pill.\n /\nexport class TPMultiSelectPillElement extends HTMLElement {\n\t/\n\t Connected callback.\n\t /\n\tconnectedCallback(): void {\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleButtonClick.bind( this ) );\n\t}\n\t/\n\t Handle button click.\n\t \n\t @param {Event} e Click event.\n\t /\n\thandleButtonClick( e: Event \| null ): void {\n\t\te?.preventDefault();\n\t\te?.stopPropagation();\n\t\tthis.removePill();\n\t}\n\n\t/\n\t Remove this pill.\n\t /\n\tremovePill(): void {\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tif ( multiSelect && this.getAttribute( 'value' ) ) {\n\t\t\tmultiSelect.unSelect( this.getAttribute( 'value' ) ?? '' );\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'unselect', { bubbles: true } ) );\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t\t}\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/\n TP Multi Select Pills.\n /\nexport class TPMultiSelectPillsElement extends HTMLElement {\n\t/\n\t Connected callback.\n\t /\n\tconnectedCallback(): void {\n\t\t// Events.\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'change', this.update.bind( this ) );\n\t\tthis.closest( 'tp-multi-select' )?.querySelector( 'select' )?.addEventListener( 'change', ( () => this.update() ) as EventListener );\n\n\t\t// Update.\n\t\tthis.update();\n\t}\n\n\t/\n\t Update this component.\n\t /\n\tupdate(): void {\n\t\t// Get multi-select.\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tif ( ! multiSelect ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Determine pills.\n\t\tconst pills: NodeListOf<TPMultiSelectPillElement> \| null = this.querySelectorAll( 'tp-multi-select-pill' );\n\t\tconst values: string[] = multiSelect.value ?? [];\n\t\tconst pillValues: string[] = [];\n\n\t\t// Remove pills that shouldn't exist.\n\t\tpills.forEach( ( pill: TPMultiSelectPillElement ): void => {\n\t\t\tconst pillValue: string = pill.getAttribute( 'value' ) ?? '';\n\n\t\t\tif ( '' === pillValue ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tpillValues.push( pillValue );\n\n\t\t\tif ( ! values.includes( pillValue ) ) {\n\t\t\t\tpill.remove();\n\t\t\t}\n\t\t} );\n\n\t\t// Create new pills.\n\t\tconst pillsToCreate: string[] = values.filter( ( value: string ) => ! pillValues.includes( value ) );\n\t\tpillsToCreate.forEach( ( pillValue: string ): void => {\n\t\t\tif ( '' === pillValue ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst multiSelectOption: TPMultiSelectOptionElement \| null = multiSelect.querySelector( `tp-multi-select-option[value=\"${ pillValue }\"]` );\n\t\t\tif ( ! multiSelectOption ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst newPill: HTMLElement = document.createElement( 'tp-multi-select-pill' );\n\t\t\tnewPill.setAttribute( 'value', pillValue );\n\t\t\tnewPill.innerHTML = `\n\t\t\t<span>${ multiSelectOption.getAttribute( 'label' ) ?? '' }</span>\n\t\t\t<button type=\"button\">x</button>\n\t\t\t`;\n\t\t\tthis.appendChild( newPill );\n\t\t} );\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/\n TP Multi Select Select All.\n /\nexport class TPMultiSelectSelectAllElement extends HTMLElement {\n\t/\n\t Connected callback.\n\t /\n\tconnectedCallback(): void {\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'change', this.handleValueChanged.bind( this ) );\n\t\tthis.addEventListener( 'click', this.toggleSelectAll.bind( this ) );\n\t}\n\n\t/\n\t Handle value changed.\n\t /\n\thandleValueChanged(): void {\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> \| null \| undefined = multiSelect?.querySelectorAll( 'tp-multi-select-option' );\n\t\tif ( ! multiSelect \|\| ! options ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( Array.from( options ).filter( ( optionNode ) => optionNode.getAttribute( 'disabled' ) !== 'yes' ).length === multiSelect.value.length ) {\n\t\t\tthis.setAttribute( 'selected', 'yes' );\n\t\t\tthis.innerHTML = this.getAttribute( 'unselect-text' ) ?? '';\n\t\t} else {\n\t\t\tthis.removeAttribute( 'selected' );\n\t\t\tthis.innerHTML = this.getAttribute( 'select-text' ) ?? '';\n\t\t}\n\t}\n\n\t/\n\t Toggle select all.\n\t /\n\ttoggleSelectAll(): void {\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tif ( ! multiSelect ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'yes' !== this.getAttribute( 'selected' ) ) {\n\t\t\tmultiSelect.selectAll();\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'select-all', { bubbles: true } ) );\n\t\t} else {\n\t\t\tmultiSelect.unSelectAll();\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'unselect-all', { bubbles: true } ) );\n\t\t}\n\t\tmultiSelect.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n}\n","/\n Styles.\n /\nimport './style.scss';\n\n/\n Components.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectFieldElement } from './tp-multi-select-field';\nimport { TPMultiSelectPlaceholderElement } from './tp-multi-select-placeholder';\nimport { TPMultiSelectStatusElement } from './tp-multi-select-status';\nimport { TPMultiSelectOptionsElement } from './tp-multi-select-options';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectSearchElement } from './tp-multi-select-search';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\nimport { TPMultiSelectPillsElement } from './tp-multi-select-pills';\nimport { TPMultiSelectSelectAllElement } from './tp-multi-select-select-all';\n\n/\n Register Components.\n */\ncustomElements.define( 'tp-multi-select', TPMultiSelectElement );\ncustomElements.define( 'tp-multi-select-field', TPMultiSelectFieldElement );\ncustomElements.define( 'tp-multi-select-placeholder', TPMultiSelectPlaceholderElement );\ncustomElements.define( 'tp-multi-select-status', TPMultiSelectStatusElement );\ncustomElements.define( 'tp-multi-select-options', TPMultiSelectOptionsElement );\ncustomElements.define( 'tp-multi-select-option', TPMultiSelectOptionElement );\ncustomElements.define( 'tp-multi-select-search', TPMultiSelectSearchElement );\ncustomElements.define( 'tp-multi-select-pill', TPMultiSelectPillElement );\ncustomElements.define( 'tp-multi-select-pills', TPMultiSelectPillsElement );\ncustomElements.define( 'tp-multi-select-select-all', TPMultiSelectSelectAllElement );\n"],"names":["TPMultiSelectElement","HTMLElement","constructor","super","currentlyHighlightedOption","this","keyboardEventListener","handleKeyboardInputs","bind","connectedCallback","document","addEventListener","handleDocumentClick","update","options","querySelector","MutationObserver","initialize","observe","childList","subtree","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","unHighlightAllOptions","removeEventListener","value","Array","isArray","styledOptions","querySelectorAll","forEach","option","includes","getAttribute","setAttribute","removeAttribute","selectedOptions","optionValue","push","updateFormFieldValue","styledSelectedOptions","selectField","selectOptions","from","matchingSelectOption","find","selectOption","newOption","createElement","append","remove","Event","length","status","toString","e","target","contains","selectElement","innerHTML","select","unSelectAll","search","clear","focus","selectAll","unSelect","key","preventDefault","highlightNextOption","highlightPreviousOption","toggleHighlightedOption","nextToBeHighlighted","scrollIntoView","behavior","block","previousToBeHighlighted","toggle","TPMultiSelectFieldElement","initialized","toggleOpen","multiSelect","closest","TPMultiSelectPlaceholderElement","TPMultiSelectStatusElement","_name","format","html","replace","TPMultiSelectOptionsElement","TPMultiSelectOptionElement","stopPropagation","detail","TPMultiSelectSearchElement","input","handleSearchChange","handleClick","pill","removePill","matchedOptionCount","toLowerCase","match","RegExp","style","width","TPMultiSelectPillElement","handleButtonClick","TPMultiSelectPillsElement","pills","values","pillValues","pillValue","filter","multiSelectOption","newPill","appendChild","TPMultiSelectSelectAllElement","handleValueChanged","toggleSelectAll","optionNode","customElements","define"],"sourceRoot":""}
1	+ {"version":3,"file":"dist/multi-select/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/multi-select/tp-multi-select.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-field.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-placeholder.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-status.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-options.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-option.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-search.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-pill.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-pills.ts","webpack://@travelopia/web-components/./src/multi-select/tp-multi-select-select-all.ts","webpack://@travelopia/web-components/./src/multi-select/index.ts"],"sourcesContent":["/*\n Internal dependencies.\n /\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectStatusElement } from './tp-multi-select-status';\nimport { TPMultiSelectOptionsElement } from './tp-multi-select-options';\nimport { TPMultiSelectSearchElement } from './tp-multi-select-search';\n\n/\n TP Multi Select.\n /\nexport class TPMultiSelectElement extends HTMLElement {\n\t/\n\t Properties.\n\t /\n\tcurrentlyHighlightedOption: number = -1;\n\tprotected keyboardEventListener: EventListener;\n\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.keyboardEventListener = this.handleKeyboardInputs.bind( this ) as EventListener;\n\t\tdocument.addEventListener( 'click', this.handleDocumentClick.bind( this ) );\n\t\tthis.addEventListener( 'change', this.update.bind( this ) );\n\n\t\t// Listen for dynamic changes to the option values.\n\t\tconst options: TPMultiSelectOptionsElement \| null = this.querySelector( 'tp-multi-select-options' );\n\t\tif ( options ) {\n\t\t\tconst mutationObserver: MutationObserver = new MutationObserver( this.initialize.bind( this ) );\n\t\t\tmutationObserver.observe( options, { childList: true, subtree: true } );\n\t\t}\n\n\t\t// Initialize component.\n\t\tthis.initialize();\n\t}\n\n\t/\n\t Get observed attributes.\n\t \n\t @return {Array} List of observed attributes.\n\t /\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'open' ];\n\t}\n\n\t/\n\t Attribute changed callback.\n\t \n\t @param {string} name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t /\n\tattributeChangedCallback( name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( oldValue === newValue ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'open' === name ) {\n\t\t\tif ( 'yes' === newValue ) {\n\t\t\t\tdocument.addEventListener( 'keydown', this.keyboardEventListener );\n\t\t\t\tthis.dispatchEvent( new CustomEvent( 'open', { bubbles: true } ) );\n\t\t\t} else {\n\t\t\t\tthis.unHighlightAllOptions();\n\t\t\t\tdocument.removeEventListener( 'keydown', this.keyboardEventListener );\n\t\t\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Set the value of this component.\n\t \n\t @param {Array} value Value.\n\t /\n\tset value( value: string[] ) {\n\t\tif ( ! value \|\| ! Array.isArray( value ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst styledOptions: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( value.includes( option.getAttribute( 'value' ) ?? '' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t} else {\n\t\t\t\toption.removeAttribute( 'selected' );\n\t\t\t}\n\t\t} );\n\n\t\tthis.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n\n\t/\n\t Get the value of this component.\n\t \n\t @return {Array} Value of this component.\n\t /\n\tget value(): string[] {\n\t\tconst value: string[] = [];\n\n\t\tconst selectedOptions: NodeListOf<HTMLOptionElement> \| null = this.querySelectorAll( 'select option[selected]' );\n\t\tselectedOptions?.forEach( ( option: HTMLOptionElement ) => {\n\t\t\tconst optionValue = option.getAttribute( 'value' );\n\t\t\tif ( optionValue ) {\n\t\t\t\tvalue.push( optionValue );\n\t\t\t}\n\t\t} );\n\t\treturn value;\n\t}\n\n\t/\n\t Update the value of the select field.\n\t /\n\tprotected updateFormFieldValue(): void {\n\t\t// Get options.\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( `tp-multi-select-option` );\n\t\tconst selectField: HTMLSelectElement \| null = this.querySelector( 'select' );\n\n\t\tif ( ! styledSelectedOptions \|\| ! selectField ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst selectOptions: HTMLOptionElement[] = Array.from( selectField.options );\n\n\t\t// Traverse options.\n\t\tstyledSelectedOptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tconst optionValue = option.getAttribute( 'value' ) ?? '';\n\t\t\tif ( optionValue ) {\n\t\t\t\tconst matchingSelectOption: HTMLOptionElement \| undefined = selectOptions.find( ( selectOption ) => selectOption.value === optionValue );\n\n\t\t\t\tif ( 'yes' === option.getAttribute( 'selected' ) ) {\n\t\t\t\t\tif ( matchingSelectOption ) {\n\t\t\t\t\t\tmatchingSelectOption.setAttribute( 'selected', 'selected' );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tconst newOption: HTMLOptionElement = document.createElement( 'option' );\n\t\t\t\t\t\tnewOption.setAttribute( 'value', option.getAttribute( 'value' ) ?? '' );\n\t\t\t\t\t\tnewOption.setAttribute( 'selected', 'selected' );\n\t\t\t\t\t\tselectField?.append( newOption );\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tmatchingSelectOption?.remove();\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\n\t\t// Dispatch events.\n\t\tselectField.dispatchEvent( new Event( 'change' ) );\n\t}\n\n\t/\n\t Update component and sub-components.\n\t /\n\tupdate(): void {\n\t\t// First, update field value.\n\t\tthis.updateFormFieldValue();\n\n\t\t// Get value.\n\t\tconst value: string[] = this.value;\n\n\t\t// Toggle selected attribute.\n\t\tif ( 0 !== value.length ) {\n\t\t\tthis.setAttribute( 'selected', 'yes' );\n\t\t} else {\n\t\t\tthis.removeAttribute( 'selected' );\n\t\t}\n\n\t\t// Update status.\n\t\tconst status: TPMultiSelectStatusElement \| null = this.querySelector( 'tp-multi-select-status' );\n\t\tif ( status ) {\n\t\t\tif ( value.length > 0 ) {\n\t\t\t\tstatus.setAttribute( 'total', value.length.toString() );\n\t\t\t} else {\n\t\t\t\tstatus.removeAttribute( 'total' );\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Handle clicking the document.\n\t \n\t @param {Event} e Event.\n\t /\n\tprotected handleDocumentClick( e: Event ): void {\n\t\tif ( this !== e.target && ! this.contains( e.target as Node ) ) {\n\t\t\tthis.removeAttribute( 'open' );\n\t\t}\n\t}\n\n\t/\n\t Initialize component.\n\t /\n\tinitialize(): void {\n\t\t// Create select element (if it doesn't already exist).\n\t\tlet selectElement: HTMLSelectElement \| null = this.querySelector( 'select' );\n\t\tif ( ! selectElement ) {\n\t\t\tselectElement = document.createElement( 'select' );\n\t\t\tselectElement.setAttribute( 'name', this.getAttribute( 'name' ) ?? '' );\n\n\t\t\tif ( 'no' !== this.getAttribute( 'multiple' ) ) {\n\t\t\t\tselectElement.setAttribute( 'multiple', 'multiple' );\n\t\t\t}\n\n\t\t\tthis.append( selectElement );\n\t\t} else {\n\t\t\tselectElement.innerHTML = '';\n\t\t}\n\n\t\t// Update components for selected options.\n\t\tthis.update();\n\t}\n\n\t/\n\t Select a value.\n\t \n\t @param {string} value Value to select.\n\t /\n\tselect( value: string = '' ): void {\n\t\t// Stuff for single-select.\n\t\tif ( 'no' === this.getAttribute( 'multiple' ) ) {\n\t\t\t// First, unselect everything.\n\t\t\tthis.unSelectAll();\n\n\t\t\t// If the value is blank, don't do anything else.\n\t\t\tif ( '' === value ) {\n\t\t\t\tif ( 'yes' === this.getAttribute( 'close-on-select' ) ) {\n\t\t\t\t\tthis.removeAttribute( 'open' );\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// Select all options.\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( `tp-multi-select-option[value=\"${ value }\"]` );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( 'yes' !== option.getAttribute( 'disabled' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t}\n\t\t} );\n\n\t\t// Search stuff.\n\t\tconst search: TPMultiSelectSearchElement \| null = this.querySelector( 'tp-multi-select-search' );\n\t\tsearch?.clear();\n\t\tsearch?.focus();\n\n\t\t// Close the field, if applicable.\n\t\tif ( 'yes' === this.getAttribute( 'close-on-select' ) ) {\n\t\t\tthis.removeAttribute( 'open' );\n\t\t}\n\t\tthis.update();\n\t}\n\n\t/\n\t Select all values.\n\t /\n\tselectAll(): void {\n\t\tconst styledOptions: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( 'yes' !== option.getAttribute( 'disabled' ) ) {\n\t\t\t\toption.setAttribute( 'selected', 'yes' );\n\t\t\t}\n\t\t} );\n\t\tthis.update();\n\t}\n\n\t/\n\t Un-select a value.\n\t \n\t @param {string} value Value to unselect.\n\t /\n\tunSelect( value: string = '' ): void {\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( `tp-multi-select-option[value=\"${ value }\"]` );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\toption.removeAttribute( 'selected' );\n\t\t} );\n\t\tthis.update();\n\t}\n\n\t/\n\t Un-select all values.\n\t /\n\tunSelectAll(): void {\n\t\tconst styledSelectedOptions: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tstyledSelectedOptions?.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\toption.removeAttribute( 'selected' );\n\t\t} );\n\t\tthis.update();\n\t}\n\n\t/\n\t Handle keyboard inputs.\n\t \n\t @param {Event} e Keyboard event.\n\t /\n\thandleKeyboardInputs( e: KeyboardEvent ): void {\n\t\tswitch ( e.key ) {\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.highlightNextOption();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.highlightPreviousOption();\n\t\t\t\tbreak;\n\t\t\tcase 'Enter':\n\t\t\t\tthis.toggleHighlightedOption();\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tthis.unHighlightAllOptions();\n\t\t\t\tthis.removeAttribute( 'open' );\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/\n\t Highlight the next option.\n\t /\n\thighlightNextOption(): void {\n\t\t// Get options.\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( 'tp-multi-select-option:not([hidden=\"yes\"])' );\n\t\tif ( ! options ) {\n\t\t\tthis.currentlyHighlightedOption = -1;\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the next option to be highlighted. Assume next option is the favorable option.\n\t\tlet nextToBeHighlighted = this.currentlyHighlightedOption + 1;\n\n\t\t// Keep iterating to skip over disabled options until we find a suitable option.\n\t\twhile ( nextToBeHighlighted < options.length && options[ nextToBeHighlighted ].getAttribute( 'disabled' ) === 'yes' ) {\n\t\t\tnextToBeHighlighted++;\n\t\t}\n\n\t\t// If there are no more options to highlight, exit. Here, the last highlighted option keeps highlighted.\n\t\tif ( nextToBeHighlighted === options.length ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove highlight from the current option, if any.\n\t\tif ( this.currentlyHighlightedOption !== -1 ) {\n\t\t\toptions[ this.currentlyHighlightedOption ].removeAttribute( 'highlighted' );\n\t\t}\n\n\t\t// Highlight the found option.\n\t\toptions[ nextToBeHighlighted ].setAttribute( 'highlighted', 'yes' );\n\n\t\t// Scroll the highlighted option into view with smooth behavior.\n\t\toptions[ nextToBeHighlighted ].scrollIntoView( { behavior: 'smooth', block: 'nearest' } );\n\n\t\t// Update the currentlyHighlightedOption for the next iteration.\n\t\tthis.currentlyHighlightedOption = nextToBeHighlighted;\n\t}\n\n\t/\n\t Highlight previous option.\n\t /\n\thighlightPreviousOption(): void {\n\t\t// Get options.\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( 'tp-multi-select-option:not([hidden=\"yes\"])' );\n\t\tif ( ! options ) {\n\t\t\tthis.currentlyHighlightedOption = -1;\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the previous option to be highlighted. Assume previous option is the favorable option.\n\t\tlet previousToBeHighlighted = this.currentlyHighlightedOption - 1;\n\n\t\t// Keep iterating to skip over disabled options until we find a suitable option.\n\t\twhile ( previousToBeHighlighted >= 0 && options[ previousToBeHighlighted ].getAttribute( 'disabled' ) === 'yes' ) {\n\t\t\tpreviousToBeHighlighted--;\n\t\t}\n\n\t\t// If there are no more options to highlight, exit.\n\t\tif ( previousToBeHighlighted < 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove highlight from the current option, if any.\n\t\tif ( this.currentlyHighlightedOption !== 0 ) {\n\t\t\toptions[ this.currentlyHighlightedOption ].removeAttribute( 'highlighted' );\n\t\t}\n\n\t\t// Highlight the found option.\n\t\toptions[ previousToBeHighlighted ].setAttribute( 'highlighted', 'yes' );\n\n\t\t// Scroll the highlighted option into view with smooth behavior.\n\t\toptions[ previousToBeHighlighted ].scrollIntoView( { behavior: 'smooth', block: 'nearest' } );\n\n\t\t// Update the currentlyHighlightedOption for the next iteration.\n\t\tthis.currentlyHighlightedOption = previousToBeHighlighted;\n\t}\n\n\t/\n\t Toggle highlighted option.\n\t /\n\ttoggleHighlightedOption(): void {\n\t\tconst option: TPMultiSelectOptionElement \| null = this.querySelector( `tp-multi-select-option[highlighted=\"yes\"]` );\n\t\toption?.toggle( null );\n\t}\n\n\t/\n\t Un-highlight all options.\n\t /\n\tunHighlightAllOptions(): void {\n\t\tthis.currentlyHighlightedOption = -1;\n\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> \| null = this.querySelectorAll( 'tp-multi-select-option' );\n\t\tif ( options ) {\n\t\t\toptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\t\toption.removeAttribute( 'highlighted' );\n\t\t\t} );\n\t\t}\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/\n TP Multi Select Field.\n /\nexport class TPMultiSelectFieldElement extends HTMLElement {\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener( 'click', this.toggleOpen.bind( this ) );\n\t}\n\n\t/\n\t Toggle opening this component.\n\t /\n\ttoggleOpen(): void {\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tif ( ! multiSelect ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'yes' === multiSelect.getAttribute( 'open' ) ) {\n\t\t\tmultiSelect.removeAttribute( 'open' );\n\t\t} else {\n\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t}\n\t}\n}\n","/\n TP Multi Select Placeholder.\n /\nexport class TPMultiSelectPlaceholderElement extends HTMLElement {\n}\n","/\n Internal dependencies.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/\n TP Multi Select Status.\n /\nexport class TPMultiSelectStatusElement extends HTMLElement {\n\t/\n\t Get observed attributes.\n\t \n\t @return {Array} List of observed attributes.\n\t /\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'total', 'format' ];\n\t}\n\n\t/\n\t Attribute changed callback.\n\t \n\t @param {string} _name Attribute name.\n\t * @param {string} oldValue Old value.\n\t * @param {string} newValue New value.\n\t /\n\tattributeChangedCallback( _name: string = '', oldValue: string = '', newValue: string = '' ): void {\n\t\tif ( oldValue !== newValue ) {\n\t\t\tthis.update();\n\t\t}\n\t}\n\n\t/\n\t Update this component.\n\t /\n\tupdate(): void {\n\t\tconst format: string = this.getAttribute( 'format' ) ?? '$total Selected';\n\t\tlet html: string = format.replace( '$total', this.getAttribute( 'total' ) ?? '' );\n\n\t\tif ( format.includes( '$value' ) ) {\n\t\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\t\tif ( multiSelect ) {\n\t\t\t\tconst value: string[] = multiSelect.value ?? [];\n\t\t\t\tlet replace: string = '';\n\n\t\t\t\tif ( value.length > 0 ) {\n\t\t\t\t\tconst option: TPMultiSelectOptionElement \| null = multiSelect.querySelector( `tp-multi-select-option[value=\"${ value[ 0 ] }\"]` );\n\t\t\t\t\tif ( option ) {\n\t\t\t\t\t\treplace = option.getAttribute( 'label' ) ?? '';\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\thtml = html.replace( '$value', replace );\n\t\t\t}\n\t\t}\n\n\t\tthis.innerHTML = html;\n\t}\n}\n","/\n TP Multi Select Options.\n /\nexport class TPMultiSelectOptionsElement extends HTMLElement {\n}\n","/\n Internal dependencies.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/\n TP Multi Select Option.\n /\nexport class TPMultiSelectOptionElement extends HTMLElement {\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener( 'click', this.toggle.bind( this ) );\n\t}\n\n\t/\n\t Select / un-select this option.\n\t \n\t @param {Event} e Click event.\n\t /\n\ttoggle( e: Event \| null ): void {\n\t\te?.preventDefault();\n\t\te?.stopPropagation();\n\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tconst value: string = this.getAttribute( 'value' ) ?? '';\n\n\t\tif ( 'yes' !== this.getAttribute( 'selected' ) ) {\n\t\t\tmultiSelect?.select( value );\n\t\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'select', {\n\t\t\t\tbubbles: true,\n\t\t\t\tdetail: { value },\n\t\t\t} ) );\n\t\t} else {\n\t\t\tmultiSelect?.unSelect( value );\n\t\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'unselect', {\n\t\t\t\tbubbles: true,\n\t\t\t\tdetail: { value },\n\t\t\t} ) );\n\t\t}\n\t\tmultiSelect?.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\n\n/\n TP Multi Select Search.\n /\nexport class TPMultiSelectSearchElement extends HTMLElement {\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\n\t\tconst input: HTMLInputElement \| null = this.querySelector( 'input' );\n\t\tif ( ! input ) {\n\t\t\treturn;\n\t\t}\n\n\t\tinput.addEventListener( 'keydown', this.handleKeyboardInputs.bind( this ) );\n\t\tinput.addEventListener( 'keyup', this.handleSearchChange.bind( this ) );\n\t\tinput.addEventListener( 'input', this.handleSearchChange.bind( this ) );\n\t\tthis.addEventListener( 'click', this.handleClick.bind( this ) );\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'open', this.focus.bind( this ) );\n\t}\n\n\t/\n\t Handle keyboard inputs.\n\t \n\t @param {Event} e Keyboard event.\n\t /\n\thandleKeyboardInputs( e: KeyboardEvent ): void {\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tconst search: HTMLInputElement \| null = this.querySelector( 'input' );\n\t\tif ( ! multiSelect \|\| ! search ) {\n\t\t\treturn;\n\t\t}\n\n\t\tswitch ( e.key ) {\n\t\t\tcase 'Enter':\n\t\t\t\te.preventDefault(); // Prevent inadvertent form submits.\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t\t\tbreak;\n\t\t\tcase 'Backspace':\n\t\t\t\tif ( 0 === search.value.length ) {\n\t\t\t\t\tconst pill: TPMultiSelectPillElement \| null = multiSelect.querySelector( 'tp-multi-select-pill:last-of-type' );\n\t\t\t\t\tif ( pill ) {\n\t\t\t\t\t\tpill.removePill();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t/\n\t Handle search field value changed.\n\t /\n\tprotected handleSearchChange(): void {\n\t\t// Get search field and options.\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tconst search: HTMLInputElement \| null = this.querySelector( 'input' );\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> \| undefined = this.closest( 'tp-multi-select' )?.querySelectorAll( 'tp-multi-select-option' );\n\t\tif ( ! multiSelect \|\| ! search \|\| ! options ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet matchedOptionCount = 0;\n\t\t// Hide and show options based on search.\n\t\toptions.forEach( ( option: TPMultiSelectOptionElement ): void => {\n\t\t\tif ( option.getAttribute( 'label' )?.toLowerCase().match( new RegExp( `.${ search.value.toLowerCase().replace( /\\s/g, '.' ) }.` ) ) ) {\n\t\t\t\toption.removeAttribute( 'hidden' );\n\t\t\t\tmatchedOptionCount++;\n\t\t\t} else {\n\t\t\t\toption.setAttribute( 'hidden', 'yes' );\n\t\t\t}\n\t\t} );\n\n\t\t// Resize input width.\n\t\tif ( '' === search.value ) {\n\t\t\tsearch.removeAttribute( 'style' );\n\t\t} else {\n\t\t\tsearch.style.width = `${ search.value.length + 2 }ch`;\n\t\t\tmultiSelect.setAttribute( 'open', 'yes' );\n\t\t}\n\n\t\tmultiSelect.setAttribute( 'visible-options', matchedOptionCount.toString() );\n\t}\n\n\t/*\n\t Handle click.\n\t \n\t @param {Event} e Click event.\n\t /\n\tprotected handleClick( e: Event ): void {\n\t\t// First, prevent propagation to avoid document.click set on `tp-multi-select`.\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\n\t\t// Now send the event so other stuff can work as per normal, and another event for good measure.\n\t\tthis.dispatchEvent( new CustomEvent( 'multi-select-opened' ) );\n\t\tdocument.dispatchEvent( new Event( 'click' ) );\n\n\t\t// Open multi select.\n\t\tthis.closest( 'tp-multi-select' )?.setAttribute( 'open', 'yes' );\n\t}\n\n\t/\n\t Clear the search field.\n\t /\n\tclear(): void {\n\t\tconst search: HTMLInputElement \| null = this.querySelector( 'input' );\n\t\tif ( search ) {\n\t\t\tsearch.value = '';\n\t\t\tsearch.dispatchEvent( new Event( 'change' ) );\n\t\t}\n\t}\n\n\t/\n\t Set focus on the search field.\n\t /\n\tfocus(): void {\n\t\t// When it's focused, use search change to ensure the results are refreshed.\n\t\tthis.handleSearchChange();\n\n\t\t// Focus on input.\n\t\tthis.querySelector( 'input' )?.focus();\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\n\n/\n TP Multi Select Pill.\n /\nexport class TPMultiSelectPillElement extends HTMLElement {\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.handleButtonClick.bind( this ) );\n\t}\n\n\t/\n\t Handle button click.\n\t \n\t @param {Event} e Click event.\n\t /\n\thandleButtonClick( e: Event \| null ): void {\n\t\te?.preventDefault();\n\t\te?.stopPropagation();\n\t\tthis.removePill();\n\t}\n\n\t/\n\t Remove this pill.\n\t /\n\tremovePill(): void {\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tif ( multiSelect && this.getAttribute( 'value' ) ) {\n\t\t\tmultiSelect.unSelect( this.getAttribute( 'value' ) ?? '' );\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'unselect', { bubbles: true } ) );\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t\t}\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/\n TP Multi Select Pills.\n /\nexport class TPMultiSelectPillsElement extends HTMLElement {\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\n\t\t// Events.\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'change', this.update.bind( this ) );\n\t\tthis.closest( 'tp-multi-select' )?.querySelector( 'select' )?.addEventListener( 'change', ( () => this.update() ) as EventListener );\n\n\t\t// Update.\n\t\tthis.update();\n\t}\n\n\t/\n\t Update this component.\n\t /\n\tupdate(): void {\n\t\t// Get multi-select.\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tif ( ! multiSelect ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Determine pills.\n\t\tconst pills: NodeListOf<TPMultiSelectPillElement> \| null = this.querySelectorAll( 'tp-multi-select-pill' );\n\t\tconst values: string[] = multiSelect.value ?? [];\n\t\tconst pillValues: string[] = [];\n\n\t\t// Remove pills that shouldn't exist.\n\t\tpills.forEach( ( pill: TPMultiSelectPillElement ): void => {\n\t\t\tconst pillValue: string = pill.getAttribute( 'value' ) ?? '';\n\n\t\t\tif ( '' === pillValue ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tpillValues.push( pillValue );\n\n\t\t\tif ( ! values.includes( pillValue ) ) {\n\t\t\t\tpill.remove();\n\t\t\t}\n\t\t} );\n\n\t\t// Create new pills.\n\t\tconst pillsToCreate: string[] = values.filter( ( value: string ) => ! pillValues.includes( value ) );\n\t\tpillsToCreate.forEach( ( pillValue: string ): void => {\n\t\t\tif ( '' === pillValue ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst multiSelectOption: TPMultiSelectOptionElement \| null = multiSelect.querySelector( `tp-multi-select-option[value=\"${ pillValue }\"]` );\n\t\t\tif ( ! multiSelectOption ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst newPill: HTMLElement = document.createElement( 'tp-multi-select-pill' );\n\t\t\tnewPill.setAttribute( 'value', pillValue );\n\t\t\tnewPill.innerHTML = `\n\t\t\t<span>${ multiSelectOption.getAttribute( 'label' ) ?? '' }</span>\n\t\t\t<button type=\"button\">x</button>\n\t\t\t`;\n\t\t\tthis.appendChild( newPill );\n\t\t} );\n\t}\n}\n","/\n Internal dependencies.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\n\n/\n TP Multi Select Select All.\n /\nexport class TPMultiSelectSelectAllElement extends HTMLElement {\n\t/\n\t Constructor.\n\t /\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.closest( 'tp-multi-select' )?.addEventListener( 'change', this.handleValueChanged.bind( this ) );\n\t\tthis.addEventListener( 'click', this.toggleSelectAll.bind( this ) );\n\t}\n\n\t/\n\t Handle value changed.\n\t /\n\thandleValueChanged(): void {\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tconst options: NodeListOf<TPMultiSelectOptionElement> \| null \| undefined = multiSelect?.querySelectorAll( 'tp-multi-select-option' );\n\t\tif ( ! multiSelect \|\| ! options ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( Array.from( options ).filter( ( optionNode ) => optionNode.getAttribute( 'disabled' ) !== 'yes' ).length === multiSelect.value.length ) {\n\t\t\tthis.setAttribute( 'selected', 'yes' );\n\t\t\tthis.innerHTML = this.getAttribute( 'unselect-text' ) ?? '';\n\t\t} else {\n\t\t\tthis.removeAttribute( 'selected' );\n\t\t\tthis.innerHTML = this.getAttribute( 'select-text' ) ?? '';\n\t\t}\n\t}\n\n\t/\n\t Toggle select all.\n\t /\n\ttoggleSelectAll(): void {\n\t\tconst multiSelect: TPMultiSelectElement \| null = this.closest( 'tp-multi-select' );\n\t\tif ( ! multiSelect ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'yes' !== this.getAttribute( 'selected' ) ) {\n\t\t\tmultiSelect.selectAll();\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'select-all', { bubbles: true } ) );\n\t\t} else {\n\t\t\tmultiSelect.unSelectAll();\n\t\t\tmultiSelect.dispatchEvent( new CustomEvent( 'unselect-all', { bubbles: true } ) );\n\t\t}\n\t\tmultiSelect.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t}\n}\n","/\n Styles.\n /\nimport './style.scss';\n\n/\n Components.\n /\nimport { TPMultiSelectElement } from './tp-multi-select';\nimport { TPMultiSelectFieldElement } from './tp-multi-select-field';\nimport { TPMultiSelectPlaceholderElement } from './tp-multi-select-placeholder';\nimport { TPMultiSelectStatusElement } from './tp-multi-select-status';\nimport { TPMultiSelectOptionsElement } from './tp-multi-select-options';\nimport { TPMultiSelectOptionElement } from './tp-multi-select-option';\nimport { TPMultiSelectSearchElement } from './tp-multi-select-search';\nimport { TPMultiSelectPillElement } from './tp-multi-select-pill';\nimport { TPMultiSelectPillsElement } from './tp-multi-select-pills';\nimport { TPMultiSelectSelectAllElement } from './tp-multi-select-select-all';\n\n/\n Register Components.\n */\ncustomElements.define( 'tp-multi-select', TPMultiSelectElement );\ncustomElements.define( 'tp-multi-select-field', TPMultiSelectFieldElement );\ncustomElements.define( 'tp-multi-select-placeholder', TPMultiSelectPlaceholderElement );\ncustomElements.define( 'tp-multi-select-status', TPMultiSelectStatusElement );\ncustomElements.define( 'tp-multi-select-options', TPMultiSelectOptionsElement );\ncustomElements.define( 'tp-multi-select-option', TPMultiSelectOptionElement );\ncustomElements.define( 'tp-multi-select-search', TPMultiSelectSearchElement );\ncustomElements.define( 'tp-multi-select-pill', TPMultiSelectPillElement );\ncustomElements.define( 'tp-multi-select-pills', TPMultiSelectPillsElement );\ncustomElements.define( 'tp-multi-select-select-all', TPMultiSelectSelectAllElement );\n"],"names":["TPMultiSelectElement","HTMLElement","constructor","super","currentlyHighlightedOption","this","keyboardEventListener","handleKeyboardInputs","bind","document","addEventListener","handleDocumentClick","update","options","querySelector","MutationObserver","initialize","observe","childList","subtree","observedAttributes","attributeChangedCallback","name","oldValue","newValue","dispatchEvent","CustomEvent","bubbles","unHighlightAllOptions","removeEventListener","value","Array","isArray","styledOptions","querySelectorAll","forEach","option","includes","getAttribute","setAttribute","removeAttribute","selectedOptions","optionValue","push","updateFormFieldValue","styledSelectedOptions","selectField","selectOptions","from","matchingSelectOption","find","selectOption","newOption","createElement","append","remove","Event","length","status","toString","e","target","contains","selectElement","innerHTML","select","unSelectAll","search","clear","focus","selectAll","unSelect","key","preventDefault","highlightNextOption","highlightPreviousOption","toggleHighlightedOption","nextToBeHighlighted","scrollIntoView","behavior","block","previousToBeHighlighted","toggle","TPMultiSelectFieldElement","toggleOpen","multiSelect","closest","TPMultiSelectPlaceholderElement","TPMultiSelectStatusElement","_name","format","html","replace","TPMultiSelectOptionsElement","TPMultiSelectOptionElement","stopPropagation","detail","TPMultiSelectSearchElement","input","handleSearchChange","handleClick","pill","removePill","matchedOptionCount","toLowerCase","match","RegExp","style","width","TPMultiSelectPillElement","handleButtonClick","TPMultiSelectPillsElement","pills","values","pillValues","pillValue","filter","multiSelectOption","newPill","appendChild","TPMultiSelectSelectAllElement","handleValueChanged","toggleSelectAll","optionNode","customElements","define"],"sourceRoot":""}