@travelopia/web-components 0.6.9 → 0.7.0

package/dist/accordion/index.js

@@ -1,2 +1,2 @@
-(()=>{"use strict";class e extends HTMLElement{static get observedAttributes(){return["collapse-all","expand-all"]}attributeChangedCallback(e="",t="",s=""){t!==s&&(this.update(),"yes"!==s||"collapse-all"!==e&&"expand-all"!==e||this.dispatchEvent(new CustomEvent(e,{bubbles:!0})))}update(){const e=this.querySelectorAll("tp-accordion-item");if(!e)return;let t="";"yes"===this.getAttribute("expand-all")?t="expand-all":"yes"===this.getAttribute("collapse-all")&&(t="collapse-all"),""!==t&&e.forEach((e=>{"expand-all"===t?e.setAttribute("open","yes"):"collapse-all"===t&&e.removeAttribute("open")}))}}class t extends HTMLElement{}class s extends HTMLElement{constructor(){var e;super(),null===(e=this.querySelector("button"))||void 0===e||e.addEventListener("click",this.toggle.bind(this))}toggle(){const e=this.closest("tp-accordion-item");e&&("yes"!==e.getAttribute("open")?e.setAttribute("open","yes"):e.removeAttribute("open"))}}class l extends HTMLElement{constructor(){var e;super(),null===(e=this.querySelector("button"))||void 0===e||e.addEventListener("click",(()=>this.collapseAll()))}collapseAll(){const e=this.closest("tp-accordion");e&&(e.removeAttribute("expand-all"),e.setAttribute("collapse-all","yes"))}}class o extends HTMLElement{constructor(){var e;super(),null===(e=this.querySelector("button"))||void 0===e||e.addEventListener("click",this.expandAll.bind(this))}expandAll(){const e=this.closest("tp-accordion");e&&(e.setAttribute("expand-all","yes"),e.removeAttribute("collapse-all"))}}class n extends HTMLElement{constructor(){super(),"yes"===this.getAttribute("open-by-default")&&this.setAttribute("open","yes")}static get observedAttributes(){return["open"]}attributeChangedCallback(e,t,s){t!==s&&"open"===e&&("yes"===s?this.open():this.close(),this.removeAttribute("open-by-default"))}open(){const e=this.querySelector("tp-accordion-content");e&&(this.dispatchEvent(new CustomEvent("before-open",{bubbles:!0})),((e,t=300,s=(()=>{}))=>{e.style.height=`${e.scrollHeight}px`,setTimeout((()=>{e.style.height="auto",s&&s()}),t)})(e,600),this.dispatchEvent(new CustomEvent("open",{bubbles:!0})))}close(){const e=this.querySelector("tp-accordion-content");e&&(this.dispatchEvent(new CustomEvent("before-close",{bubbles:!0})),((e,t=300,s=(()=>{}))=>{e.style.height=`${e.scrollHeight}px`,e.offsetHeight,e.style.height="0px",setTimeout((()=>{e.style.height="0px",s&&s()}),t)})(e,600),this.dispatchEvent(new CustomEvent("close",{bubbles:!0})))}}customElements.define("tp-accordion",e),customElements.define("tp-accordion-content",t),customElements.define("tp-accordion-handle",s),customElements.define("tp-accordion-collapse-all",l),customElements.define("tp-accordion-expand-all",o),customElements.define("tp-accordion-item",n)})();
+(()=>{"use strict";class e extends HTMLElement{static get observedAttributes(){return["collapse-all","expand-all"]}attributeChangedCallback(e="",t="",s=""){t!==s&&(this.update(),"yes"!==s||"collapse-all"!==e&&"expand-all"!==e||this.dispatchEvent(new CustomEvent(e,{bubbles:!0})))}update(){const e=this.querySelectorAll("tp-accordion-item");if(!e)return;let t="";"yes"===this.getAttribute("expand-all")?t="expand-all":"yes"===this.getAttribute("collapse-all")&&(t="collapse-all"),""!==t&&e.forEach((e=>{"expand-all"===t?e.setAttribute("open","yes"):"collapse-all"===t&&e.removeAttribute("open")}))}}class t extends HTMLElement{}class s extends HTMLElement{constructor(){var e;super(),null===(e=this.querySelector("button"))||void 0===e||e.addEventListener("click",this.toggle.bind(this))}toggle(){const e=this.closest("tp-accordion-item");e&&("yes"!==e.getAttribute("open")?e.setAttribute("open","yes"):e.removeAttribute("open"))}}class l extends HTMLElement{constructor(){var e;super(),null===(e=this.querySelector("button"))||void 0===e||e.addEventListener("click",(()=>this.collapseAll()))}collapseAll(){const e=this.closest("tp-accordion");e&&(e.removeAttribute("expand-all"),e.setAttribute("collapse-all","yes"))}}class o extends HTMLElement{constructor(){var e;super(),null===(e=this.querySelector("button"))||void 0===e||e.addEventListener("click",this.expandAll.bind(this))}expandAll(){const e=this.closest("tp-accordion");e&&(e.setAttribute("expand-all","yes"),e.removeAttribute("collapse-all"))}}class n extends HTMLElement{constructor(){super(),"yes"===this.getAttribute("open-by-default")&&this.setAttribute("open","yes")}static get observedAttributes(){return["open"]}attributeChangedCallback(e,t,s){t!==s&&"open"===e&&("yes"===s?this.open():this.close(),this.removeAttribute("open-by-default"))}open(){const e=this.querySelector("tp-accordion-content");e&&(this.dispatchEvent(new CustomEvent("before-open",{bubbles:!0})),((e,t=300,s=()=>{})=>{e.style.height=`${e.scrollHeight}px`,setTimeout((()=>{e.style.height="auto",s&&s()}),t)})(e,600),this.dispatchEvent(new CustomEvent("open",{bubbles:!0})))}close(){const e=this.querySelector("tp-accordion-content");e&&(this.dispatchEvent(new CustomEvent("before-close",{bubbles:!0})),((e,t=300,s=()=>{})=>{e.style.height=`${e.scrollHeight}px`,e.offsetHeight,e.style.height="0px",setTimeout((()=>{e.style.height="0px",s&&s()}),t)})(e,600),this.dispatchEvent(new CustomEvent("close",{bubbles:!0})))}}customElements.define("tp-accordion",e),customElements.define("tp-accordion-content",t),customElements.define("tp-accordion-handle",s),customElements.define("tp-accordion-collapse-all",l),customElements.define("tp-accordion-expand-all",o),customElements.define("tp-accordion-item",n)})();
 //# sourceMappingURL=index.js.map

package/dist/accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"dist/accordion/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/accordion/tp-accordion.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-content.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-handle.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-collapse-all.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-expand-all.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-item.ts","webpack://@travelopia/web-components/./src/utility.ts","webpack://@travelopia/web-components/./src/accordion/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPAccordionItemElement } from './tp-accordion-item';\n\n/**\n * TP Accordion.\n */\nexport class TPAccordionElement 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 [ 'collapse-all', 'expand-all' ];\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\tthis.update();\n\n\t\tif ( 'yes' === newValue && ( 'collapse-all' === name || 'expand-all' === name ) ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( name, { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/**\n\t * Update.\n\t */\n\tupdate(): void {\n\t\t// Get accordion items.\n\t\tconst accordionItems: NodeListOf<TPAccordionItemElement> = this.querySelectorAll( 'tp-accordion-item' );\n\t\tif ( ! accordionItems ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Determine action.\n\t\tlet action: string = '';\n\t\tif ( 'yes' === this.getAttribute( 'expand-all' ) ) {\n\t\t\taction = 'expand-all';\n\t\t} else if ( 'yes' === this.getAttribute( 'collapse-all' ) ) {\n\t\t\taction = 'collapse-all';\n\t\t}\n\n\t\t// Check if we have an action.\n\t\tif ( '' === action ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Expand or collapse accordion items.\n\t\taccordionItems.forEach( ( accordionItem: TPAccordionItemElement ): void => {\n\t\t\tif ( 'expand-all' === action ) {\n\t\t\t\taccordionItem.setAttribute( 'open', 'yes' );\n\t\t\t} else if ( 'collapse-all' === action ) {\n\t\t\t\taccordionItem.removeAttribute( 'open' );\n\t\t\t}\n\t\t} );\n\t}\n}\n","/**\n * TP Accordion Content.\n */\nexport class TPAccordionContentElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionItemElement } from './tp-accordion-item';\n\n/**\n * TP Accordion Handle.\n */\nexport class TPAccordionHandleElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.toggle.bind( this ) );\n\t}\n\n\t/**\n\t * Toggle accordion.\n\t */\n\ttoggle(): void {\n\t\tconst accordionItem: TPAccordionItemElement | null = this.closest( 'tp-accordion-item' );\n\t\tif ( ! accordionItem ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'yes' !== accordionItem.getAttribute( 'open' ) ) {\n\t\t\taccordionItem.setAttribute( 'open', 'yes' );\n\t\t} else {\n\t\t\taccordionItem.removeAttribute( 'open' );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionElement } from './tp-accordion';\n\n/**\n * TP Accordion Collapse All.\n */\nexport class TPAccordionCollapseAllElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', () => this.collapseAll() );\n\t}\n\n\t/**\n\t * Collapse All.\n\t */\n\tcollapseAll(): void {\n\t\t// Get accordion element.\n\t\tconst accordion: TPAccordionElement | null = this.closest( 'tp-accordion' );\n\t\tif ( ! accordion ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set attributes for expand-all and collapse-all.\n\t\taccordion.removeAttribute( 'expand-all' );\n\t\taccordion.setAttribute( 'collapse-all', 'yes' );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionElement } from './tp-accordion';\n\n/**\n * TP Accordion Expand All.\n */\nexport class TPAccordionExpandAllElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.expandAll.bind( this ) );\n\t}\n\n\t/**\n\t * Expand all.\n\t */\n\texpandAll() {\n\t\t// Get accordion.\n\t\tconst accordion: TPAccordionElement | null = this.closest( 'tp-accordion' );\n\t\tif ( ! accordion ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set attributes for expand-all and collapse-all.\n\t\taccordion.setAttribute( 'expand-all', 'yes' );\n\t\taccordion.removeAttribute( 'collapse-all' );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionContentElement } from './tp-accordion-content';\nimport { slideElementDown, slideElementUp } from '../utility';\n\n/**\n * TP Accordion Item.\n */\nexport class TPAccordionItemElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\tif ( 'yes' === this.getAttribute( 'open-by-default' ) ) {\n\t\t\tthis.setAttribute( 'open', 'yes' );\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 [ 'open' ];\n\t}\n\n\t/**\n\t * Attributes callback.\n\t *\n\t * Fired on attribute change.\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 || 'open' !== name ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'yes' === newValue ) {\n\t\t\tthis.open();\n\t\t} else {\n\t\t\tthis.close();\n\t\t}\n\n\t\tthis.removeAttribute( 'open-by-default' );\n\t}\n\n\t/**\n\t * Open accordion item.\n\t */\n\topen(): void {\n\t\tconst content: TPAccordionContentElement | null = this.querySelector( 'tp-accordion-content' );\n\t\tif ( content ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'before-open', { bubbles: true } ) );\n\t\t\tslideElementDown( content, 600 );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'open', { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/**\n\t * Close accordion item.\n\t */\n\tclose(): void {\n\t\tconst content: TPAccordionContentElement | null = this.querySelector( 'tp-accordion-content' );\n\t\tif ( content ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'before-close', { bubbles: true } ) );\n\t\t\tslideElementUp( content, 600 );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t\t}\n\t}\n}\n","/**\n * Utility functions.\n */\n\n/**\n * Slide element down.\n *\n * @param {HTMLElement|null} element  Target element.\n * @param {number}           duration Animation duration.\n * @param {Function}         callback Callback function.\n */\nexport const slideElementDown = ( element: HTMLElement, duration: number = 300, callback: Function = () => {} ) => { // eslint-disable-line\n\t// Get element height.\n\telement.style.height = `${ element.scrollHeight }px`;\n\n\t// Set timeout.\n\tsetTimeout( () => {\n\t\t// Set element's height.\n\t\telement.style.height = 'auto';\n\n\t\t// If callback is available, call the function.\n\t\tif ( callback ) {\n\t\t\tcallback();\n\t\t}\n\t}, duration );\n};\n\n/**\n * Slide element up.\n *\n * @param {HTMLElement|null} element  Target element.\n * @param {number}           duration Animation duration.\n * @param {Function}         callback Callback function.\n */\nexport const slideElementUp = ( element: HTMLElement, duration: number = 300, callback: Function = () => {} ) => { // eslint-disable-line\n\t// Get element height.\n\telement.style.height = `${ element.scrollHeight }px`;\n\telement.offsetHeight; // eslint-disable-line\n\telement.style.height = '0px';\n\n\t// Set timeout.\n\tsetTimeout( () => {\n\t\t// Set element's height.\n\t\telement.style.height = '0px';\n\n\t\t// If callback is available, call the function.\n\t\tif ( callback ) {\n\t\t\tcallback();\n\t\t}\n\t}, duration );\n};\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPAccordionElement } from './tp-accordion';\nimport { TPAccordionContentElement } from './tp-accordion-content';\nimport { TPAccordionHandleElement } from './tp-accordion-handle';\nimport { TPAccordionCollapseAllElement } from './tp-accordion-collapse-all';\nimport { TPAccordionExpandAllElement } from './tp-accordion-expand-all';\nimport { TPAccordionItemElement } from './tp-accordion-item';\n\n/**\n * Initialize.\n */\ncustomElements.define( 'tp-accordion', TPAccordionElement );\ncustomElements.define( 'tp-accordion-content', TPAccordionContentElement );\ncustomElements.define( 'tp-accordion-handle', TPAccordionHandleElement );\ncustomElements.define( 'tp-accordion-collapse-all', TPAccordionCollapseAllElement );\ncustomElements.define( 'tp-accordion-expand-all', TPAccordionExpandAllElement );\ncustomElements.define( 'tp-accordion-item', TPAccordionItemElement );\n"],"names":["TPAccordionElement","HTMLElement","observedAttributes","attributeChangedCallback","name","oldValue","newValue","this","update","dispatchEvent","CustomEvent","bubbles","accordionItems","querySelectorAll","action","getAttribute","forEach","accordionItem","setAttribute","removeAttribute","TPAccordionContentElement","TPAccordionHandleElement","constructor","super","querySelector","addEventListener","toggle","bind","closest","TPAccordionCollapseAllElement","collapseAll","accordion","TPAccordionExpandAllElement","expandAll","TPAccordionItemElement","open","close","content","element","duration","callback","style","height","scrollHeight","setTimeout","slideElementDown","offsetHeight","slideElementUp","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"dist/accordion/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/accordion/tp-accordion.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-content.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-handle.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-collapse-all.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-expand-all.ts","webpack://@travelopia/web-components/./src/accordion/tp-accordion-item.ts","webpack://@travelopia/web-components/./src/utility.ts","webpack://@travelopia/web-components/./src/accordion/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPAccordionItemElement } from './tp-accordion-item';\n\n/**\n * TP Accordion.\n */\nexport class TPAccordionElement 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\t// Attributes observed in the TPAccordionItemElement web-component.\n\t\treturn [ 'collapse-all', 'expand-all' ];\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// To check if observed attributes are changed.\n\n\t\t//Early return if no change in attributes.\n\t\tif ( oldValue === newValue ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Update initially according to the value present in expand-all or collapse all.\n\t\tthis.update();\n\n\t\t// If attribute value is changed then open and close according to the name of event.\n\t\tif ( 'yes' === newValue && ( 'collapse-all' === name || 'expand-all' === name ) ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( name, { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/**\n\t * Update.\n\t */\n\tupdate(): void {\n\t\t// Get accordion items.\n\t\tconst accordionItems: NodeListOf<TPAccordionItemElement> = this.querySelectorAll( 'tp-accordion-item' );\n\n\t\t//Early return if accordion items are not present.\n\t\tif ( ! accordionItems ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initialize action variable.\n\t\tlet action: string = '';\n\n\t\t// Determine action.\n\t\tif ( 'yes' === this.getAttribute( 'expand-all' ) ) {\n\t\t\taction = 'expand-all';\n\t\t} else if ( 'yes' === this.getAttribute( 'collapse-all' ) ) {\n\t\t\taction = 'collapse-all';\n\t\t}\n\n\t\t// Check if we have an action.\n\t\tif ( '' === action ) {\n\t\t\t// Return if action is not present.\n\t\t\treturn;\n\t\t}\n\n\t\t// Expand or collapse accordion items.\n\t\taccordionItems.forEach( ( accordionItem: TPAccordionItemElement ): void => {\n\t\t\t// Conditionally expand or collapse each item.\n\t\t\tif ( 'expand-all' === action ) {\n\t\t\t\taccordionItem.setAttribute( 'open', 'yes' );\n\t\t\t} else if ( 'collapse-all' === action ) {\n\t\t\t\taccordionItem.removeAttribute( 'open' );\n\t\t\t}\n\t\t} );\n\t}\n}\n","/**\n * TP Accordion Content.\n */\nexport class TPAccordionContentElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionItemElement } from './tp-accordion-item';\n\n/**\n * TP Accordion Handle.\n */\nexport class TPAccordionHandleElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.toggle.bind( this ) );\n\t}\n\n\t/**\n\t * Toggle accordion.\n\t */\n\ttoggle(): void {\n\t\t// Variables.\n\t\tconst accordionItem: TPAccordionItemElement | null = this.closest( 'tp-accordion-item' );\n\n\t\t// Terminates if accordion item is not present.\n\t\tif ( ! accordionItem ) {\n\t\t\t//Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// If accordion item is open.\n\t\tif ( 'yes' !== accordionItem.getAttribute( 'open' ) ) {\n\t\t\taccordionItem.setAttribute( 'open', 'yes' );\n\t\t} else {\n\t\t\taccordionItem.removeAttribute( 'open' );\n\t\t}\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionElement } from './tp-accordion';\n\n/**\n * TP Accordion Collapse All.\n */\nexport class TPAccordionCollapseAllElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', () => this.collapseAll() );\n\t}\n\n\t/**\n\t * Collapse All.\n\t */\n\tcollapseAll(): void {\n\t\t// Get accordion element.\n\t\tconst accordion: TPAccordionElement | null = this.closest( 'tp-accordion' );\n\n\t\t// Terminates the function if accordion is not available.\n\t\tif ( ! accordion ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set attributes for expand-all and collapse-all.\n\t\taccordion.removeAttribute( 'expand-all' );\n\t\taccordion.setAttribute( 'collapse-all', 'yes' );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionElement } from './tp-accordion';\n\n/**\n * TP Accordion Expand All.\n */\nexport class TPAccordionExpandAllElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\t\tthis.querySelector( 'button' )?.addEventListener( 'click', this.expandAll.bind( this ) );\n\t}\n\n\t/**\n\t * Expand all.\n\t */\n\texpandAll() {\n\t\t// Get accordion.\n\t\tconst accordion: TPAccordionElement | null = this.closest( 'tp-accordion' );\n\n\t\t// Terminates if accordion is not present.\n\t\tif ( ! accordion ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Set attributes for expand-all and collapse-all.\n\t\taccordion.setAttribute( 'expand-all', 'yes' );\n\t\taccordion.removeAttribute( 'collapse-all' );\n\t}\n}\n","/**\n * Internal dependencies.\n */\nimport { TPAccordionContentElement } from './tp-accordion-content';\nimport { slideElementDown, slideElementUp } from '../utility';\n\n/**\n * TP Accordion Item.\n */\nexport class TPAccordionItemElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Check if by default accordion item is open.\n\t\tif ( 'yes' === this.getAttribute( 'open-by-default' ) ) {\n\t\t\tthis.setAttribute( 'open', 'yes' );\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\t// Attributes observed in the TPAccordionItemElement web-component.\n\t\treturn [ 'open' ];\n\t}\n\n\t/**\n\t * Attributes callback.\n\t *\n\t * Fired on attribute change.\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// To check if observed attributes are changed.\n\n\t\t//Early return if no change in attributes.\n\t\tif ( oldValue === newValue || 'open' !== name ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Conditionally open or close based on changed value.\n\t\tif ( 'yes' === newValue ) {\n\t\t\tthis.open();\n\t\t} else {\n\t\t\tthis.close();\n\t\t}\n\n\t\t// Removing default value.\n\t\tthis.removeAttribute( 'open-by-default' );\n\t}\n\n\t/**\n\t * Open accordion item.\n\t */\n\topen(): void {\n\t\t// Initializing variables.\n\t\tconst content: TPAccordionContentElement | null = this.querySelector( 'tp-accordion-content' );\n\n\t\t// Open the accordion.\n\t\tif ( content ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'before-open', { bubbles: true } ) );\n\t\t\tslideElementDown( content, 600 );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'open', { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/**\n\t * Close accordion item.\n\t */\n\tclose(): void {\n\t\t// Initializing variables.\n\t\tconst content: TPAccordionContentElement | null = this.querySelector( 'tp-accordion-content' );\n\n\t\t// Close the accordion.\n\t\tif ( content ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'before-close', { bubbles: true } ) );\n\t\t\tslideElementUp( content, 600 );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'close', { bubbles: true } ) );\n\t\t}\n\t}\n}\n","/**\n * Utility functions.\n */\n\n/**\n * Slide element down.\n *\n * @param {HTMLElement|null} element  Target element.\n * @param {number}           duration Animation duration.\n * @param {Function}         callback Callback function.\n */\nexport const slideElementDown = ( element: HTMLElement, duration: number = 300, callback: Function = () => {} ) => { // eslint-disable-line\n\t// Get element height.\n\telement.style.height = `${ element.scrollHeight }px`;\n\n\t// Set timeout.\n\tsetTimeout( () => {\n\t\t// Set element's height.\n\t\telement.style.height = 'auto';\n\n\t\t// If callback is available, call the function.\n\t\tif ( callback ) {\n\t\t\tcallback();\n\t\t}\n\t}, duration );\n};\n\n/**\n * Slide element up.\n *\n * @param {HTMLElement|null} element  Target element.\n * @param {number}           duration Animation duration.\n * @param {Function}         callback Callback function.\n */\nexport const slideElementUp = ( element: HTMLElement, duration: number = 300, callback: Function = () => {} ) => { // eslint-disable-line\n\t// Get element height.\n\telement.style.height = `${ element.scrollHeight }px`;\n\telement.offsetHeight; // eslint-disable-line\n\telement.style.height = '0px';\n\n\t// Set timeout.\n\tsetTimeout( () => {\n\t\t// Set element's height.\n\t\telement.style.height = '0px';\n\n\t\t// If callback is available, call the function.\n\t\tif ( callback ) {\n\t\t\tcallback();\n\t\t}\n\t}, duration );\n};\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPAccordionElement } from './tp-accordion';\nimport { TPAccordionContentElement } from './tp-accordion-content';\nimport { TPAccordionHandleElement } from './tp-accordion-handle';\nimport { TPAccordionCollapseAllElement } from './tp-accordion-collapse-all';\nimport { TPAccordionExpandAllElement } from './tp-accordion-expand-all';\nimport { TPAccordionItemElement } from './tp-accordion-item';\n\n/**\n * Initialize.\n */\ncustomElements.define( 'tp-accordion', TPAccordionElement );\ncustomElements.define( 'tp-accordion-content', TPAccordionContentElement );\ncustomElements.define( 'tp-accordion-handle', TPAccordionHandleElement );\ncustomElements.define( 'tp-accordion-collapse-all', TPAccordionCollapseAllElement );\ncustomElements.define( 'tp-accordion-expand-all', TPAccordionExpandAllElement );\ncustomElements.define( 'tp-accordion-item', TPAccordionItemElement );\n"],"names":["TPAccordionElement","HTMLElement","observedAttributes","attributeChangedCallback","name","oldValue","newValue","this","update","dispatchEvent","CustomEvent","bubbles","accordionItems","querySelectorAll","action","getAttribute","forEach","accordionItem","setAttribute","removeAttribute","TPAccordionContentElement","TPAccordionHandleElement","constructor","super","querySelector","addEventListener","toggle","bind","closest","TPAccordionCollapseAllElement","collapseAll","accordion","TPAccordionExpandAllElement","expandAll","TPAccordionItemElement","open","close","content","element","duration","callback","style","height","scrollHeight","setTimeout","slideElementDown","offsetHeight","slideElementUp","customElements","define"],"sourceRoot":""}

package/dist/declarations.d.ts

@@ -718,6 +718,102 @@ export class TPMultiSelectElement extends HTMLElement {
     unHighlightAllOptions(): void;
 }
 
+/**
+ * TP Number Spinner Decrement Element.
+ */
+export class TPNumberSpinnerDecrement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Decrement the value.
+     */
+    decrement(): void;
+}
+
+/**
+ * TP Number Spinner Increment Element.
+ */
+export class TPNumberSpinnerIncrement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Increment the value.
+     */
+    increment(): void;
+}
+
+/**
+ * TP Number Spinner Input.
+ */
+export class TPNumberSpinnerInput extends HTMLElement {
+}
+
+/**
+ * TP Number Spinner Element.
+ */
+export class TPNumberSpinner extends HTMLElement {
+    /**
+     * Get minimum value.
+     *
+     * @return {number|null} The minimum value.
+     */
+    get min(): number | null;
+    /**
+     * Set minimum value.
+     *
+     * @param {number} min Minimum value.
+     */
+    set min(min: number);
+    /**
+     * Get maximum value.
+     *
+     * @return {number|null} The maximum value.
+     */
+    get max(): number | null;
+    /**
+     * Set maximum value.
+     *
+     * @param {number} max Maximum value.
+     */
+    set max(max: number);
+    /**
+     * Get current step.
+     *
+     * @return {number} Current step.
+     */
+    get step(): number;
+    /**
+     * Set current step.
+     *
+     * @param {number} step Current step.
+     */
+    set step(step: number);
+    /**
+     * Get value.
+     *
+     * @return {number} The value.
+     */
+    get value(): number;
+    /**
+     * Set current value.
+     *
+     * @param {number} value Current value.
+     */
+    set value(value: number);
+    /**
+     * Increment.
+     */
+    increment(): void;
+    /**
+     * Decrement.
+     */
+    decrement(): void;
+}
+
 /**
  * TP Slider Arrow.
  */
@@ -764,10 +860,18 @@ export class TPSliderCountElement extends HTMLElement {
     update(): void;
 }
 
+/**
+ * Internal dependencies.
+ */
+import { TPSliderElement } from './tp-slider';
 /**
  * TP Slider Nav Item.
  */
 export class TPSliderNavItemElement extends HTMLElement {
+    /**
+     * Properties.
+     */
+    protected slider: TPSliderElement | null;
     /**
      * Constructor.
      */
@@ -939,7 +1043,7 @@ export class TPSliderElement extends HTMLElement {
     getArrow(selector: string): TPSliderArrowElement | null;
     /**
      * Update stuff when any attribute has changed.
-     * Example: Update subcomponents.
+     * Example: Update sub-components.
      */
     update(): void;
     /**
@@ -1016,9 +1120,6 @@ export class TPTabsNavElement extends HTMLElement {
 export class TPTabsTabElement extends HTMLElement {
 }
 
-/**
- * Internal dependencies.
- */
 /**
  * TP Tabs.
  */

package/dist/form/index.js

@@ -1,2 +1,2 @@
-(()=>{"use strict";var t={d:(e,r)=>{for(var i in r)t.o(r,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:r[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{errorMessage:()=>l,name:()=>a,validator:()=>d});var r={};t.r(r),t.d(r,{errorMessage:()=>v,name:()=>u,validator:()=>m});var i={};t.r(i),t.d(i,{errorMessage:()=>b,name:()=>h,validator:()=>c});var s={};t.r(s),t.d(s,{errorMessage:()=>p,name:()=>g,validator:()=>f});var n={};t.r(n),t.d(n,{errorMessage:()=>y,name:()=>E,validator:()=>A});const o=(t="")=>{const{tpFormErrors:e}=window;return e&&""!==t&&t in e&&"string"==typeof e[t]?e[t]:""},a="required",l="This field is required",d={validate:t=>{var e,r;return null!==(r=""!==(null===(e=t.getField())||void 0===e?void 0:e.value))&&void 0!==r?r:""},getErrorMessage:()=>o(a)},u="email",v="Please enter a valid email address",m={validate:t=>{var e,r;return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(null!==(r=null===(e=t.getField())||void 0===e?void 0:e.value)&&void 0!==r?r:"")},getErrorMessage:()=>o(u)},h="min-length",b="Must be at least %1 characters",c={validate:t=>{var e,r,i;const s=parseInt(null!==(e=t.getAttribute("min-length"))&&void 0!==e?e:"0"),n=null!==(i=null===(r=t.getField())||void 0===r?void 0:r.value)&&void 0!==i?i:"";return""===n||n.length>=s},getErrorMessage:t=>{var e;const r=o(h),i=null!==(e=t.getAttribute("min-length"))&&void 0!==e?e:"";return r.replace("%1",i)}},g="max-length",p="Must be less than %1 characters",f={validate:t=>{var e,r,i;const s=parseInt(null!==(e=t.getAttribute("max-length"))&&void 0!==e?e:"0"),n=null!==(i=null===(r=t.getField())||void 0===r?void 0:r.value)&&void 0!==i?i:"";return""===n||n.length<=s},getErrorMessage:t=>{var e;const r=o(g),i=null!==(e=t.getAttribute("max-length"))&&void 0!==e?e:"";return r.replace("%1",i)}},E="no-empty-spaces",y="This field should not contain only whitespaces",A={validate:t=>{const e=t.getField();return!!e&&(""===e.value||""!==e.value.trim())},getErrorMessage:()=>o(E)};class M extends HTMLElement{constructor(){var t;super(),this.form=this.querySelector("form"),null===(t=this.form)||void 0===t||t.addEventListener("submit",this.handleFormSubmit.bind(this))}handleFormSubmit(t){const e=this.validate();e&&"yes"!==this.getAttribute("prevent-submit")||(t.preventDefault(),t.stopImmediatePropagation());const r=this.querySelector("tp-form-submit");r&&(e?r.setAttribute("submitting","yes"):r.removeAttribute("submitting")),e&&this.dispatchEvent(new CustomEvent("submit-validation-success",{bubbles:!0}))}validate(){this.dispatchEvent(new CustomEvent("validate",{bubbles:!0}));const t=this.querySelectorAll("tp-form-field");if(!t)return this.dispatchEvent(new CustomEvent("validation-success",{bubbles:!0})),!0;let e=!0;return t.forEach((t=>{t.validate()||(e=!1)})),e?this.dispatchEvent(new CustomEvent("validation-success",{bubbles:!0})):this.dispatchEvent(new CustomEvent("validation-error",{bubbles:!0})),e}resetValidation(){const t=this.querySelectorAll("tp-form-field");if(!t)return;t.forEach((t=>{t.removeAttribute("valid"),t.removeAttribute("error")}));const e=this.querySelector("tp-form-submit");null==e||e.removeAttribute("submitting")}}class w extends HTMLElement{constructor(){super();const t=this.getField();null==t||t.addEventListener("keyup",this.handleFieldChanged.bind(this)),null==t||t.addEventListener("change",this.handleFieldChanged.bind(this))}handleFieldChanged(){(this.getAttribute("valid")||this.getAttribute("error"))&&this.validate()}static get observedAttributes(){return["valid","error"]}attributeChangedCallback(t="",e="",r=""){"valid"!==t&&"error"!==t||e===r||this.dispatchEvent(new CustomEvent("validate",{bubbles:!0})),this.update()}update(){var t;const{tpFormValidators:e}=window;if(!e)return;const r=null!==(t=this.getAttribute("error"))&&void 0!==t?t:"";""!==r&&r in e&&"function"==typeof e[r].getErrorMessage?this.setErrorMessage(e[r].getErrorMessage(this)):this.removeErrorMessage()}getField(){return this.querySelector("input,select,textarea")}validate(){const{tpFormValidators:t}=window;if(!t)return!0;if(this.offsetWidth<=0||this.offsetHeight<=0)return!0;let e=!0,r="";return this.getAttributeNames().every((i=>!(i in t)||"function"!=typeof t[i].validate||!1!==t[i].validate(this)||(e=!1,r=i,!1))),e?(this.setAttribute("valid","yes"),this.removeAttribute("error")):(this.removeAttribute("valid"),this.setAttribute("error",r)),e}setErrorMessage(t=""){const e=this.querySelector("tp-form-error");if(e)e.innerHTML=t;else{const e=document.createElement("tp-form-error");e.innerHTML=t,this.appendChild(e)}this.dispatchEvent(new CustomEvent("validation-error"))}removeErrorMessage(){var t;null===(t=this.querySelector("tp-form-error"))||void 0===t||t.remove(),this.dispatchEvent(new CustomEvent("validation-success"))}}class F extends HTMLElement{}class C extends HTMLElement{static get observedAttributes(){return["submitting-text","original-text","submitting"]}attributeChangedCallback(t="",e="",r=""){e!==r&&this.update()}update(){var t,e;const r=this.querySelector('button[type="submit"]');if(!r)return;const i=null!==(t=this.getAttribute("submitting-text"))&&void 0!==t?t:"",s=null!==(e=this.getAttribute("original-text"))&&void 0!==e?e:r.innerHTML;"yes"===this.getAttribute("submitting")?(r.setAttribute("disabled","disabled"),this.setAttribute("original-text",s),r.innerHTML=i):(r.removeAttribute("disabled"),this.removeAttribute("submitting"),this.removeAttribute("original-text"),r.innerHTML=s)}}const S=[e,r,i,s,n];window.tpFormValidators={},window.tpFormErrors={},S.forEach((({name:t,validator:e,errorMessage:r})=>{window.tpFormValidators[t]=e,window.tpFormErrors[t]=r})),customElements.define("tp-form",M),customElements.define("tp-form-field",w),customElements.define("tp-form-error",F),customElements.define("tp-form-submit",C)})();
+(()=>{"use strict";var t={d:(e,r)=>{for(var i in r)t.o(r,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:r[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{errorMessage:()=>l,name:()=>a,validator:()=>d});var r={};t.r(r),t.d(r,{errorMessage:()=>v,name:()=>u,validator:()=>m});var i={};t.r(i),t.d(i,{errorMessage:()=>b,name:()=>h,validator:()=>c});var s={};t.r(s),t.d(s,{errorMessage:()=>p,name:()=>g,validator:()=>f});var n={};t.r(n),t.d(n,{errorMessage:()=>y,name:()=>E,validator:()=>A});const o=(t="")=>{const{tpFormErrors:e}=window;return e&&""!==t&&t in e&&"string"==typeof e[t]?e[t]:""},a="required",l="This field is required",d={validate:t=>{var e,r;return null!==(r=""!==(null===(e=t.getField())||void 0===e?void 0:e.value))&&void 0!==r?r:""},getErrorMessage:()=>o(a)},u="email",v="Please enter a valid email address",m={validate:t=>{var e,r;return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(null!==(r=null===(e=t.getField())||void 0===e?void 0:e.value)&&void 0!==r?r:"")},getErrorMessage:()=>o(u)},h="min-length",b="Must be at least %1 characters",c={validate:t=>{var e,r,i;const s=parseInt(null!==(e=t.getAttribute("min-length"))&&void 0!==e?e:"0"),n=null!==(i=null===(r=t.getField())||void 0===r?void 0:r.value)&&void 0!==i?i:"";return""===n||n.length>=s},getErrorMessage:t=>{var e;const r=o(h),i=null!==(e=t.getAttribute("min-length"))&&void 0!==e?e:"";return r.replace("%1",i)}},g="max-length",p="Must be less than %1 characters",f={validate:t=>{var e,r,i;const s=parseInt(null!==(e=t.getAttribute("max-length"))&&void 0!==e?e:"0"),n=null!==(i=null===(r=t.getField())||void 0===r?void 0:r.value)&&void 0!==i?i:"";return""===n||n.length<=s},getErrorMessage:t=>{var e;const r=o(g),i=null!==(e=t.getAttribute("max-length"))&&void 0!==e?e:"";return r.replace("%1",i)}},E="no-empty-spaces",y="This field should not contain only white-spaces",A={validate:t=>{const e=t.getField();return!!e&&(""===e.value||""!==e.value.trim())},getErrorMessage:()=>o(E)};class M extends HTMLElement{constructor(){var t;super(),this.form=this.querySelector("form"),null===(t=this.form)||void 0===t||t.addEventListener("submit",this.handleFormSubmit.bind(this))}handleFormSubmit(t){const e=this.validate();e&&"yes"!==this.getAttribute("prevent-submit")||(t.preventDefault(),t.stopImmediatePropagation());const r=this.querySelector("tp-form-submit");r&&(e?r.setAttribute("submitting","yes"):r.removeAttribute("submitting")),e&&this.dispatchEvent(new CustomEvent("submit-validation-success",{bubbles:!0}))}validate(){this.dispatchEvent(new CustomEvent("validate",{bubbles:!0}));const t=this.querySelectorAll("tp-form-field");if(!t)return this.dispatchEvent(new CustomEvent("validation-success",{bubbles:!0})),!0;let e=!0;return t.forEach((t=>{t.validate()||(e=!1)})),e?this.dispatchEvent(new CustomEvent("validation-success",{bubbles:!0})):this.dispatchEvent(new CustomEvent("validation-error",{bubbles:!0})),e}resetValidation(){const t=this.querySelectorAll("tp-form-field");if(!t)return;t.forEach((t=>{t.removeAttribute("valid"),t.removeAttribute("error")}));const e=this.querySelector("tp-form-submit");null==e||e.removeAttribute("submitting")}}class w extends HTMLElement{constructor(){super();const t=this.getField();null==t||t.addEventListener("keyup",this.handleFieldChanged.bind(this)),null==t||t.addEventListener("change",this.handleFieldChanged.bind(this))}handleFieldChanged(){(this.getAttribute("valid")||this.getAttribute("error"))&&this.validate()}static get observedAttributes(){return["valid","error"]}attributeChangedCallback(t="",e="",r=""){"valid"!==t&&"error"!==t||e===r||this.dispatchEvent(new CustomEvent("validate",{bubbles:!0})),this.update()}update(){var t;const{tpFormValidators:e}=window;if(!e)return;const r=null!==(t=this.getAttribute("error"))&&void 0!==t?t:"";""!==r&&r in e&&"function"==typeof e[r].getErrorMessage?this.setErrorMessage(e[r].getErrorMessage(this)):this.removeErrorMessage()}getField(){return this.querySelector("input,select,textarea")}validate(){const{tpFormValidators:t}=window;if(!t)return!0;if(this.offsetWidth<=0||this.offsetHeight<=0)return!0;let e=!0,r="";return this.getAttributeNames().every((i=>!(i in t)||"function"!=typeof t[i].validate||!1!==t[i].validate(this)||(e=!1,r=i,!1))),e?(this.setAttribute("valid","yes"),this.removeAttribute("error")):(this.removeAttribute("valid"),this.setAttribute("error",r)),e}setErrorMessage(t=""){const e=this.querySelector("tp-form-error");if(e)e.innerHTML=t;else{const e=document.createElement("tp-form-error");e.innerHTML=t,this.appendChild(e)}this.dispatchEvent(new CustomEvent("validation-error"))}removeErrorMessage(){var t;null===(t=this.querySelector("tp-form-error"))||void 0===t||t.remove(),this.dispatchEvent(new CustomEvent("validation-success"))}}class F extends HTMLElement{}class C extends HTMLElement{static get observedAttributes(){return["submitting-text","original-text","submitting"]}attributeChangedCallback(t="",e="",r=""){e!==r&&this.update()}update(){var t,e;const r=this.querySelector('button[type="submit"]');if(!r)return;const i=null!==(t=this.getAttribute("submitting-text"))&&void 0!==t?t:"",s=null!==(e=this.getAttribute("original-text"))&&void 0!==e?e:r.innerHTML;"yes"===this.getAttribute("submitting")?(r.setAttribute("disabled","disabled"),this.setAttribute("original-text",s),r.innerHTML=i):(r.removeAttribute("disabled"),this.removeAttribute("submitting"),this.removeAttribute("original-text"),r.innerHTML=s)}}const S=[e,r,i,s,n];window.tpFormValidators={},window.tpFormErrors={},S.forEach((({name:t,validator:e,errorMessage:r})=>{window.tpFormValidators[t]=e,window.tpFormErrors[t]=r})),customElements.define("tp-form",M),customElements.define("tp-form-field",w),customElements.define("tp-form-error",F),customElements.define("tp-form-submit",C)})();
 //# sourceMappingURL=index.js.map

package/dist/form/index.js.map

@@ -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\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":""}
+{"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\t// Check if tpFormErrors exist in the window object.\n\tconst { tpFormErrors } = window;\n\n\t// If tpFormErrors does not exist.\n\tif ( ! tpFormErrors ) {\n\t\t// Return an empty string.\n\t\treturn '';\n\t}\n\n\t// Check if the error exists and has a corresponding error message.\n\tif ( '' !== error && error in tpFormErrors && 'string' === typeof tpFormErrors[ error ] ) {\n\t\t// Return the error message.\n\t\treturn tpFormErrors[ error ];\n\t}\n\n\t// Return an empty string.\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\t// Validate.\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\t// Check if the field is empty.\n\t\treturn '' !== field.getField()?.value ?? '';\n\t},\n\n\t// Get error message.\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\t// Boolean value to determine if the field is valid or not.\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\t// Get min length and value.\n\t\tconst minLength: number = parseInt( field.getAttribute( 'min-length' ) ?? '0' );\n\t\tconst value: string = field.getField()?.value ?? '';\n\n\t\t// Validate.\n\t\treturn '' === value || value.length >= minLength;\n\t},\n\tgetErrorMessage: ( field: TPFormFieldElement ): string => {\n\t\t// Get error message.\n\t\tconst error: string = getErrorMessage( name );\n\t\tconst minLength: string = field.getAttribute( 'min-length' ) ?? '';\n\n\t\t// Return error message.\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\t// Get max length and value.\n\t\tconst minLength: number = parseInt( field.getAttribute( 'max-length' ) ?? '0' );\n\t\tconst value: string = field.getField()?.value ?? '';\n\n\t\t// Validate.\n\t\treturn '' === value || value.length <= minLength;\n\t},\n\tgetErrorMessage: ( field: TPFormFieldElement ): string => {\n\t\t// Get error message.\n\t\tconst error: string = getErrorMessage( name );\n\t\tconst maxLength: string = field.getAttribute( 'max-length' ) ?? '';\n\n\t\t// Return error message.\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 white-spaces';\n\n/**\n * Validator.\n */\nexport const validator: TPFormValidator = {\n\tvalidate: ( field: TPFormFieldElement ): boolean => {\n\t\t// Check if the field is empty.\n\t\tconst inputField = field.getField();\n\n\t\t// If no field is found return false.\n\t\tif ( ! inputField ) {\n\t\t\t// Return false.\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\t// Return true.\n\t\t\treturn true;\n\t\t}\n\n\t\t// Return true if field is not empty.\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\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get form.\n\t\tthis.form = this.querySelector( 'form' );\n\n\t\t// Add event listeners.\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\t// Validate the form.\n\t\tconst formValid: boolean = this.validate();\n\n\t\t// Prevent form submission if it's invalid.\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\t// Get submit button.\n\t\tconst submit: TPFormSubmitElement | null = this.querySelector( 'tp-form-submit' );\n\n\t\t// If present.\n\t\tif ( submit ) {\n\t\t\t// Check if form is valid.\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\t// If form is valid then dispatch a custom 'submit-validation-success' event.\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\t// Dispatch a custom 'validate' event.\n\t\tthis.dispatchEvent( new CustomEvent( 'validate', { bubbles: true } ) );\n\n\t\t// Get the form fields.\n\t\tconst fields: NodeListOf<TPFormFieldElement> | null = this.querySelectorAll( 'tp-form-field' );\n\n\t\t// If no fields are found, return true indicating validation passed.\n\t\tif ( ! fields ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validation-success', { bubbles: true } ) );\n\n\t\t\t// Return true indicating validation passed.\n\t\t\treturn true;\n\t\t}\n\n\t\t// Check if all fields are valid.\n\t\tlet formValid: boolean = true;\n\t\tfields.forEach( ( field: TPFormFieldElement ): void => {\n\t\t\t// Validate the field.\n\t\t\tif ( ! field.validate() ) {\n\t\t\t\tformValid = false;\n\t\t\t}\n\t\t} );\n\n\t\t// If form is valid then dispatch a custom 'validation-success' event else send a custom 'validation-error' event.\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\t// Return whether the form is valid or not.\n\t\treturn formValid;\n\t}\n\n\t/**\n\t * Reset form validation.\n\t */\n\tresetValidation(): void {\n\t\t// Get the form fields.\n\t\tconst fields: NodeListOf<TPFormFieldElement> | null = this.querySelectorAll( 'tp-form-field' );\n\n\t\t// If no fields are found.\n\t\tif ( ! fields ) {\n\t\t\t// Exit the function.\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove 'valid' and 'error' attributes from all fields.\n\t\tfields.forEach( ( field: TPFormFieldElement ): void => {\n\t\t\t// Remove 'valid' and 'error' attribute.\n\t\t\tfield.removeAttribute( 'valid' );\n\t\t\tfield.removeAttribute( 'error' );\n\t\t} );\n\n\t\t// Get submit button.\n\t\tconst submit: TPFormSubmitElement | null = this.querySelector( 'tp-form-submit' );\n\n\t\t// Remove 'submitting' attribute from submit button.\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\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Get field.\n\t\tconst field = this.getField();\n\n\t\t// Add event listeners.\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\t// Validate the field again if 'valid' or 'error' attribute is present.\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\t// Attributes observed in the TPFormFieldElement web-component.\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\t// Check if the observed attributes 'valid' or 'error' have changed.\n\n\t\t// Dispatch a custom 'validate' event.\n\t\tif ( ( 'valid' === name || 'error' === name ) && oldValue !== newValue ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'validate', { bubbles: true } ) );\n\t\t}\n\n\t\t// Update the component after the attribute change.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\t// Check if tpFormValidators exist in the window object.\n\t\tconst { tpFormValidators } = window;\n\n\t\t// Exit the function if validators are not available.\n\t\tif ( ! tpFormValidators ) {\n\t\t\t//Early return\n\t\t\treturn;\n\t\t}\n\n\t\t// Get the 'error' attribute value.\n\t\tconst error: string = this.getAttribute( 'error' ) ?? '';\n\n\t\t// Check if the error exists and has a corresponding error message function.\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\t// Return the associated field by querying input, select, or textarea elements.\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// Retrieve tpFormValidators from the window object.\n\t\tconst { tpFormValidators } = window;\n\n\t\t// Exit the function if validators are not available.\n\t\tif ( ! tpFormValidators ) {\n\t\t\t// If no validators are found, return true indicating validation passed.\n\t\t\treturn true;\n\t\t}\n\n\t\t// Check if the field is visible.\n\t\tif ( this.offsetWidth <= 0 || this.offsetHeight <= 0 ) {\n\t\t\t// If the field is not visible, return true indicating validation passed.\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\t// Check if the attribute is a validator.\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\n\t\t\t\t\t// return false;\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\t// Look for an existing tp-form-error element.\n\t\tconst error: TPFormErrorElement | null = this.querySelector( 'tp-form-error' );\n\n\t\t// If found, update its innerHTML with the error message. Otherwise, create a new tp-form-error element and append it to the component.\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\t// Dispatch a custom 'validation-error' event.\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\t// Find and remove the tp-form-error element.\n\t\tthis.querySelector( 'tp-form-error' )?.remove();\n\n\t\t// Dispatch a custom 'validation-success' event.\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\t// Attributes observed in the TPFormSubmitElement web-component.\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\t// Update component if attribute has changed.\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\n\t\t// Check if we have a submit button.\n\t\tif ( ! submitButton ) {\n\t\t\t// No, we don't. Exit.\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 */\n\n// Import validators.\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\n// Prepare validators.\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\n// Register validators.\nvalidators.forEach( (\n\t{ name, validator, errorMessage }: { name: string, validator: TPFormValidator, errorMessage: string }\n): void => {\n\t// Assigning validators and error messages to various fields.\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"],"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.map

@@ -1 +1 @@
-{"version":3,"file":"dist/lightbox/index.js","mappings":"mBAYO,MAAMA,UAA0BC,YAWtC,WAAAC,G,MACCC,QARS,KAAAC,gBAA8C,KAC9C,KAAAC,aAAuB,GACvB,KAAAC,UAAyD,KASpC,QAA9B,EAAAC,KAAKC,cAAe,iBAAU,SAAEC,iBAAkB,QAASF,KAAKG,kBAAkBC,KAAMJ,MACzF,CAOA,6BAAWK,GACV,MAAO,CAAE,OAAQ,QAAS,QAAS,yBAA0B,UAC9D,CASA,wBAAAC,CAA0BC,EAAe,GAAIC,EAAmB,GAAIC,EAAmB,IAEjFD,IAAaC,IAIlBT,KAAKU,cAAe,IAAIC,YAAa,WAGhC,UAAYJ,GAChBP,KAAKY,4BAEP,CAKA,YAAIC,GACH,OAAOb,KAAKH,eACb,CAOA,YAAIgB,CAAUA,GAEbb,KAAKH,gBAAkBgB,EACvBb,KAAKU,cAAe,IAAIC,YAAa,iBAGrC,MAAMG,EAA2Cd,KAAKC,cAAe,uBACrE,GAAOa,EAKP,GAAKd,KAAKH,gBAAkB,CAG3B,MAAMkB,EAAwBf,KAAKH,gBAAgBiB,QAAQE,WAAW,GACtEF,EAAQG,gBAAiBF,GACzBf,KAAKU,cAAe,IAAIC,YAAa,mBAErCO,YAAY,KACXlB,KAAKmB,sBACLnB,KAAKoB,mBAAmB,GACtB,E,MAGHN,EAAQO,UAAY,EAEtB,CAKA,SAAIC,GACH,OAAOtB,KAAKF,YACb,CAOA,SAAIwB,CAAOA,GACVtB,KAAKF,aAAewB,CACrB,CAKA,gBAAIC,G,MACH,OAAOC,SAAsC,QAA5B,EAAAxB,KAAKyB,aAAc,gBAAS,QAAI,IAClD,CAOA,gBAAIF,CAAcG,GACZA,EAAQ,IACZA,EAAQ,GAIT1B,KAAK2B,aAAc,QAASD,EAAME,WACnC,CAKA,yBAAAhB,GAEC,MAAMb,EAAyDC,KAAK6B,eAC7D9B,GAAeA,EAAWC,KAAKuB,aAAe,IAKrDxB,EAAWC,KAAKuB,aAAe,GAAIO,SACpC,CAKA,IAAAC,GAEC,MAAMC,EAAmChC,KAAKC,cAAe,UAGtD+B,IAAUA,EAAOD,OAKnB,KAAO/B,KAAKsB,OAAWtB,KAAKD,WAChCC,KAAKiC,kBAIND,EAAOE,YACPlC,KAAK2B,aAAc,OAAQ,OAC5B,CAKA,KAAAQ,GAEC,MAAMH,EAAmChC,KAAKC,cAAe,UAC7D+B,SAAAA,EAAQG,QACRnC,KAAKoC,gBAAiB,QAGtBpC,KAAKD,UAAY,IAClB,CAKA,QAAAsC,GAEM,KAAOrC,KAAKsB,OAK8CtB,KAAK6B,gBAM/D7B,KAAKuB,aAAe,GACxBvB,KAAKuB,cAEP,CAKA,IAAAe,GAEC,GAAK,KAAOtC,KAAKsB,MAChB,OAID,MAAMvB,EAAyDC,KAAK6B,eAC7D9B,GAKFC,KAAKuB,aAAexB,EAAUwC,QAClCvC,KAAKuB,cAEP,CAOA,eAAAU,CAAiBlC,EAAyD,MACzE,GAAKA,GAAaA,EAAUwC,OAG3B,OAFAvC,KAAKD,UAAYA,OACjBC,KAAK2B,aAAc,QAAS3B,KAAKD,UAAUwC,OAAOX,YAInD5B,KAAKD,UAAYyC,SAASC,iBAAkB,8BAA+BzC,KAAKsB,WACzEtB,KAAKD,UAAUwC,OAGrBvC,KAAK2B,aAAc,QAAS3B,KAAKD,UAAUwC,OAAOX,YAFlD5B,KAAKD,UAAY,IAInB,CAKA,YAAA8B,GACC,OAAO7B,KAAKD,SACb,CAKA,iBAAAqB,GAEC,MAAMsB,EAAuC1C,KAAKC,cAAe,qBACjEyC,SAAAA,EAAOC,SAGP,MAAMN,EAA6CrC,KAAKC,cAAe,wBACjEqC,EAAqCtC,KAAKC,cAAe,oBAG/D,IAAOoC,IAAcC,EACpB,OAID,GAAK,KAAOtC,KAAKsB,MAGhB,OAFAe,SAAAA,EAAUV,aAAc,WAAY,YACpCW,SAAAA,EAAMX,aAAc,WAAY,QAKjC,MAAM5B,EAAyDC,KAAK6B,eACpE,IAAO9B,EAGN,OAFAsC,SAAAA,EAAUV,aAAc,WAAY,YACpCW,SAAAA,EAAMX,aAAc,WAAY,QAK5B3B,KAAKuB,cAAgB,EACzBc,SAAAA,EAAUV,aAAc,WAAY,OAEpCU,SAAAA,EAAUD,gBAAiB,YAIvBpC,KAAKuB,aAAexB,EAAUwC,OAClCD,SAAAA,EAAMF,gBAAiB,YAEvBE,SAAAA,EAAMX,aAAc,WAAY,MAElC,CAKA,mBAAAR,GAEC,MAAML,EAA2Cd,KAAKC,cAAe,uBACrE,IAAOa,EACN,OAID,MAAM8B,EAAuC9B,EAAQ2B,iBAAkB,OACvE,IAAOG,EAAOL,OAEb,YADAvC,KAAKoC,gBAAiB,WAKvBpC,KAAK2B,aAAc,UAAW,OAG9B,IAAIkB,EAAkB,EACtB,MAAMC,EAAsBF,EAAOL,OAK7BQ,EAA0B,KAC/BF,IAGKA,IAAYC,GAChB9C,KAAKoC,gBAAiB,U,EAKxBQ,EAAOI,SAAWC,IACZA,EAAMC,SACVH,IAEAE,EAAM/C,iBAAkB,OAAQ6C,EAAyB,CAAEI,MAAM,G,GAGpE,CAOA,iBAAAhD,CAAmBiD,GAEjB,QAAUpD,KAAKyB,aAAc,2BAC7BzB,KAAKC,cAAe,YAAemD,EAAEC,QAErCrD,KAAKmC,OAEP,ECtWM,MAAMmB,UAAiC5D,aCKvC,MAAM6D,UAA+B7D,YAI3C,WAAAC,G,MACCC,QAG8B,QAA9B,EAAAI,KAAKC,cAAe,iBAAU,SAAEC,iBAAkB,QAASF,KAAKmC,MAAM/B,KAAMJ,MAC7E,CAKA,KAAAmC,GACC,MAAMqB,EAAqCxD,KAAKyD,QAAS,eACpDD,GACJtC,YAAY,KACXsC,EAASrB,OAAO,GACd,EAEL,ECrBM,MAAMuB,UAAkChE,YAI9C,WAAAC,G,MACCC,QAG8B,QAA9B,EAAAI,KAAKC,cAAe,iBAAU,SAAEC,iBAAkB,QAASF,KAAKqC,SAASjC,KAAMJ,MAChF,CAKA,QAAAqC,GACC,GAAK,QAAUrC,KAAKyB,aAAc,YACjC,OAGD,MAAM+B,EAAqCxD,KAAKyD,QAAS,eACpDD,GACJtC,YAAY,KACXsC,EAASnB,UAAU,GACjB,EAEL,ECzBM,MAAMsB,UAA8BjE,YAI1C,WAAAC,G,MACCC,QAG8B,QAA9B,EAAAI,KAAKC,cAAe,iBAAU,SAAEC,iBAAkB,QAASF,KAAKsC,KAAKlC,KAAMJ,MAC5E,CAKA,IAAAsC,GACC,GAAK,QAAUtC,KAAKyB,aAAc,YACjC,OAGD,MAAM+B,EAAqCxD,KAAKyD,QAAS,eACpDD,GACJtC,YAAY,KACXsC,EAASlB,MAAM,GACb,EAEL,ECzBM,MAAMsB,UAA+BlE,YAM3C,6BAAWW,GACV,MAAO,CAAE,SACV,CAOA,UAAIwD,G,MACH,OAAoC,QAA7B,EAAA7D,KAAKyB,aAAc,iBAAU,QAAI,mBACzC,CAOA,UAAIoC,CAAQA,GACX7D,KAAK2B,aAAc,SAAUkC,EAC9B,CAKA,wBAAAvD,GACCN,KAAK2C,QACN,CAKA,MAAAA,G,MACC,MAAMa,EAAqCxD,KAAKyD,QAAS,eACzD,IAAOD,EACN,OAGD,MAAMM,EAAkBN,EAASjC,aAAaK,WACxCmC,EAAgD,QAAhC,EAAAP,EAAS/B,aAAc,gBAAS,QAAI,GAE1DzB,KAAKqB,UACJrB,KAAK6D,OACHG,QAAS,WAAYF,GACrBE,QAAS,SAAUD,GAEtB/D,KAAK2B,aAAc,UAAWmC,GAC9B9D,KAAK2B,aAAc,QAASoC,EAC7B,ECtDM,MAAME,UAAiCvE,YAI7C,WAAAC,G,MACCC,QAG8B,QAA9B,EAAAI,KAAKC,cAAe,iBAAU,SAAEC,iBAAkB,QAASF,KAAK8B,QAAQ1B,KAAMJ,MAC/E,CAKA,OAAA8B,G,MAEC,MAAMoC,EAA4BlE,KAAKyB,aAAc,YAC/CZ,EAAuCb,KAAKC,cAAe,YAGjE,IAAOiE,IAAgBrD,EACtB,OAID,MAAM2C,EAAqChB,SAASvC,cAAe,IAAKiE,EAAWtC,cACnF,IAAO4B,EACN,OAID,MAAMlC,EAA4C,QAA5B,EAAAtB,KAAKyB,aAAc,gBAAS,QAAI,GAGtDP,YAAY,KAMX,GAJAsC,EAAS3C,SAAWA,EACpB2C,EAASlC,MAAQA,EAGZ,KAAOA,EAAQ,CACnB,MAAMvB,EAAkDyC,SAASC,iBAAkB,8BAA+BnB,OAC7GvB,EAAUwC,SAIdiB,EAASvB,gBAAiBlC,GAG1BA,EAAUiD,SAAS,CAAEmB,EAA0CzC,KACzD1B,OAASmE,IACbX,EAASjC,aAAeG,EAAQ,E,KAOpC8B,EAASzB,MAAM,GACb,EACJ,ECjDDqC,eAAeC,OAAQ,cAAe5E,GACtC2E,eAAeC,OAAQ,sBAAuBf,GAC9Cc,eAAeC,OAAQ,oBAAqBd,GAC5Ca,eAAeC,OAAQ,uBAAwBX,GAC/CU,eAAeC,OAAQ,mBAAoBV,GAC3CS,eAAeC,OAAQ,oBAAqBT,GAC5CQ,eAAeC,OAAQ,sBAAuBJ,E","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":""}
+{"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\t// Initialize parent.\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\t// Attributes to observe.\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\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Trigger change event.\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\t// Return current template.\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\n\t\t// Check if we have a content.\n\t\tif ( ! content ) {\n\t\t\t// No we don't. Exit.\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/**\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\t */\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\t// Prepare image loading.\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// We do, prepare image loading.\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\t// Return current group.\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\t// Set current group.\n\t\tthis.currentGroup = group;\n\t}\n\n\t/**\n\t * Get current index.\n\t */\n\tget currentIndex(): number {\n\t\t// Return current index.\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\t// Set current index.\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\n\t\t// Bail early if we don't have groups.\n\t\tif ( ! allGroups || ! allGroups[ this.currentIndex - 1 ] ) {\n\t\t\t// No we don't. Exit.\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\t// Yes it is, Exit.\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\t// No we don't. Exit.\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\n\t\t// Bail early if we don't have groups.\n\t\tif ( ! allGroups ) {\n\t\t\t// No we don't. Exit.\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\t// No we don't. Exit.\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\n\t\t// Bail early if we don't have groups.\n\t\tif ( ! allGroups ) {\n\t\t\t// No we don't. Exit.\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\t// Update all groups.\n\t\tif ( allGroups && allGroups.length ) {\n\t\t\tthis.allGroups = allGroups;\n\t\t\tthis.setAttribute( 'total', this.allGroups.length.toString() );\n\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get all groups.\n\t\tthis.allGroups = document.querySelectorAll( `tp-lightbox-trigger[group=\"${ this.group }\"]` );\n\n\t\t// Update total.\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\t// Return all groups.\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\t// Exit.\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\n\t\t\t// Exit.\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\n\t\t// Disable if we don't have any.\n\t\tif ( ! allGroups ) {\n\t\t\tprevious?.setAttribute( 'disabled', 'yes' );\n\t\t\tnext?.setAttribute( 'disabled', 'yes' );\n\n\t\t\t// Exit.\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\n\t\t// Bail early if we don't have content.\n\t\tif ( ! content ) {\n\t\t\t// Exit.\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\n\t\t// Exit early if there are no images.\n\t\tif ( ! images.length ) {\n\t\t\tthis.removeAttribute( 'loading' );\n\n\t\t\t// Exit.\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\t// Increment\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\t// Check if image has loaded.\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\t// Close on overlay click.\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\t// Initialize parent.\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\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// Close the lightbox.\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\t// Initialize parent.\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\t// Check if we are disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// No we don't. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// Previous.\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\t// Initialize parent.\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\t// Check if next is disabled.\n\t\tif ( 'yes' === this.getAttribute( 'disabled' ) ) {\n\t\t\t// Yes it is. Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( lightbox ) {\n\t\t\tsetTimeout( (): void => {\n\t\t\t\t// Initiate next.\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\t// Attributes to observe.\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\t// Get format.\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\t// Set the 'format' attribute value.\n\t\tthis.setAttribute( 'format', format );\n\t}\n\n\t/**\n\t * Attribute changed callback.\n\t */\n\tattributeChangedCallback(): void {\n\t\t// On change of format attribute, update the component.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update component.\n\t */\n\tupdate(): void {\n\t\t// Get lightbox.\n\t\tconst lightbox: TPLightboxElement | null = this.closest( 'tp-lightbox' );\n\n\t\t// Check if we have a lightbox.\n\t\tif ( ! lightbox ) {\n\t\t\t// Exit.\n\t\t\treturn;\n\t\t}\n\n\t\t// Get current and total.\n\t\tconst current: string = lightbox.currentIndex.toString();\n\t\tconst total: string = lightbox.getAttribute( 'total' ) ?? '';\n\n\t\t// Update variables in format attribute.\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\t// Update current and total attributes.\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\t// Initialize parent.\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\t// Exit.\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\n\t\t// Check to see if we have a lightbox.\n\t\tif ( ! lightbox ) {\n\t\t\t// Exit.\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\n\t\t\t\t// Update all groups.\n\t\t\t\tif ( allGroups.length ) {\n\t\t\t\t\t/**\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\t */\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\t// Update current index.\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/modal/index.js.map

@@ -1 +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":""}
+{"version":3,"file":"dist/modal/index.js","mappings":"mBAGO,MAAMA,UAAuBC,YAInC,WAAAC,G,MAECC,QAGgC,QAAhC,EAAAC,SAASC,cAAe,eAAQ,SAAEC,YAAaC,MAG/CA,KAAKC,iBAAkB,QAASD,KAAKE,YAAYC,KAAMH,MACxD,CAKA,IAAAI,GAECJ,KAAKK,cAAe,IAAIC,YAAa,cAAe,CAAEC,SAAS,KAC/DP,KAAKQ,aAAc,OAAQ,OAC3BR,KAAKK,cAAe,IAAIC,YAAa,OAAQ,CAAEC,SAAS,IACzD,CAKA,KAAAE,GAECT,KAAKK,cAAe,IAAIC,YAAa,eAAgB,CAAEC,SAAS,KAChEP,KAAKU,gBAAiB,QACtBV,KAAKK,cAAe,IAAIC,YAAa,QAAS,CAAEC,SAAS,IAC1D,CAOA,WAAAL,CAAaS,GAEPA,EAAEC,SAAWZ,MAAQ,QAAUA,KAAKa,aAAc,yBACtDF,EAAEG,iBACFH,EAAEI,kBACFf,KAAKS,QAEP,EC1CM,MAAMO,UAA4BtB,YAIxC,WAAAC,GAECC,QAGA,MAAMqB,EAAmCjB,KAAKF,cAAe,UAC7DmB,SAAAA,EAAQhB,iBAAkB,QAASD,KAAKkB,WAAWf,KAAMH,MAC1D,CAKA,UAAAkB,GAEC,MAAMC,EAA+BnB,KAAKoB,QAAS,YACnDD,SAAAA,EAAOV,OACR,ECdDY,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\t// Initialize parent.\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\t// Dispatch events and set attribute.\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\t// Dispatch events and remove attribute.\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\t// Close on overlay click.\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\t// Initialize parent.\n\t\tsuper();\n\n\t\t// Add event listener.\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\t// Get modal and apply close method.\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":""}