@travelopia/web-components 0.5.26 → 0.6.1

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{connectedCallback(){var e;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{connectedCallback(){var e;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 n extends HTMLElement{connectedCallback(){var e;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 o extends HTMLElement{connectedCallback(){"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",n),customElements.define("tp-accordion-item",o)})();
+(()=>{"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 * Connected callback.\n\t */\n\tconnectedCallback(): void {\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 * Connected callback.\n\t */\n\tconnectedCallback(): void {\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 * Connected callback.\n\t */\n\tconnectedCallback(): void {\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 * Connected callbacl.\n\t */\n\tconnectedCallback(): void {\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","connectedCallback","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\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":""}

package/dist/declarations.d.ts

@@ -3,9 +3,9 @@
  */
 export class TPAccordionCollapseAllElement extends HTMLElement {
     /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Collapse All.
      */
@@ -23,9 +23,9 @@ export class TPAccordionContentElement extends HTMLElement {
  */
 export class TPAccordionExpandAllElement extends HTMLElement {
     /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Expand all.
      */
@@ -37,9 +37,9 @@ export class TPAccordionExpandAllElement extends HTMLElement {
  */
 export class TPAccordionHandleElement extends HTMLElement {
     /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Toggle accordion.
      */
@@ -51,9 +51,9 @@ export class TPAccordionHandleElement extends HTMLElement {
  */
 export class TPAccordionItemElement extends HTMLElement {
     /**
-     * Connected callbacl.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Get observed attributes.
      *
@@ -115,9 +115,9 @@ export class TPFormErrorElement extends HTMLElement {
  */
 export class TPFormFieldElement extends HTMLElement {
     /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Update validation when the field has changed.
      */
@@ -200,10 +200,6 @@ export class TPFormElement extends HTMLElement {
      * Constructor.
      */
     constructor();
-    /**
-     * Connected callback.
-     */
-    connectedCallback(): void;
     /**
      * Handle form submission.
      *
@@ -222,14 +218,213 @@ export class TPFormElement extends HTMLElement {
     resetValidation(): void;
 }
 
+/**
+ * TP Lightbox Close.
+ */
+export class TPLightboxCloseElement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Close the lightbox.
+     */
+    close(): void;
+}
+
+/**
+ * TP Lightbox Content.
+ */
+export class TPLightboxContentElement extends HTMLElement {
+}
+
+/**
+ * TP Slider Count.
+ */
+export class TPLightboxCountElement extends HTMLElement {
+    /**
+     * Get observed attributes.
+     *
+     * @return {Array} Observed attributes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Get format.
+     *
+     * @return {string} Format.
+     */
+    get format(): string;
+    /**
+     * Set format.
+     *
+     * @param {string} format Format.
+     */
+    set format(format: string);
+    /**
+     * Attribute changed callback.
+     */
+    attributeChangedCallback(): void;
+    /**
+     * Update component.
+     */
+    update(): void;
+}
+
+/**
+ * TP Lightbox Close.
+ */
+export class TPLightboxNextElement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Navigate next.
+     */
+    next(): void;
+}
+
+/**
+ * TP Lightbox Close.
+ */
+export class TPLightboxPreviousElement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Navigate previous.
+     */
+    previous(): void;
+}
+
+/**
+ * TP Lightbox Trigger.
+ */
+export class TPLightboxTriggerElement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Trigger the lightbox.
+     */
+    trigger(): void;
+}
+
+import { TPLightboxTriggerElement } from './tp-lightbox-trigger';
+/**
+ * TP Lightbox.
+ */
+export class TPLightboxElement extends HTMLElement {
+    /**
+     * Properties.
+     */
+    protected currentTemplate: HTMLTemplateElement | null;
+    protected currentGroup: string;
+    protected allGroups: NodeListOf<TPLightboxTriggerElement> | null;
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Get observed attributes.
+     *
+     * @return {Array} List of observed attributes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Attribute changed callback.
+     *
+     * @param {string} name     Attribute name.
+     * @param {string} oldValue Old value.
+     * @param {string} newValue New value.
+     */
+    attributeChangedCallback(name?: string, oldValue?: string, newValue?: string): void;
+    /**
+     * Get template.
+     */
+    get template(): HTMLTemplateElement | null;
+    /**
+     * Set template.
+     *
+     * @param {HTMLTemplateElement} template The template.
+     */
+    set template(template: HTMLTemplateElement | null);
+    /**
+     * Get current group.
+     */
+    get group(): string;
+    /**
+     * Set current group.
+     *
+     * @param {string} group Group name.
+     */
+    set group(group: string);
+    /**
+     * Get current index.
+     */
+    get currentIndex(): number;
+    /**
+     * Set current index.
+     *
+     * @param {number} index Current index.
+     */
+    set currentIndex(index: number);
+    /**
+     * Trigger the target that matches the current index within current group.
+     */
+    triggerCurrentIndexTarget(): void;
+    /**
+     * Open lightbox.
+     */
+    open(): void;
+    /**
+     * Close lightbox.
+     */
+    close(): void;
+    /**
+     * Navigate previous.
+     */
+    previous(): void;
+    /**
+     * Navigate next.
+     */
+    next(): void;
+    /**
+     * Update all groups and save it to memory.
+     *
+     * @param {NodeList} allGroups All groups.
+     */
+    updateAllGroups(allGroups?: NodeListOf<TPLightboxTriggerElement> | null): void;
+    /**
+     * Get all groups from memory.
+     */
+    getAllGroups(): NodeListOf<TPLightboxTriggerElement> | null;
+    /**
+     * Prepare navigation.
+     */
+    prepareNavigation(): void;
+    /**
+     * Prepare image loading.
+     */
+    prepareImageLoading(): void;
+    /**
+     * Handle when the dialog is clicked.
+     *
+     * @param {Event} e Click event.
+     */
+    handleDialogClick(e: MouseEvent): void;
+}
+
 /**
  * TP Modal Close.
  */
 export class TPModalCloseElement extends HTMLElement {
     /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Close the modal.
      */
@@ -244,10 +439,6 @@ export class TPModalElement extends HTMLElement {
      * Constructor.
      */
     constructor();
-    /**
-     * Connected callback.
-     */
-    connectedCallback(): void;
     /**
      * Open the modal.
      */
@@ -269,13 +460,9 @@ export class TPModalElement extends HTMLElement {
  */
 export class TPMultiSelectFieldElement extends HTMLElement {
     /**
-     * Properties.
-     */
-    private initialized;
-    /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Toggle opening this component.
      */
@@ -287,13 +474,9 @@ export class TPMultiSelectFieldElement extends HTMLElement {
  */
 export class TPMultiSelectOptionElement extends HTMLElement {
     /**
-     * Properties.
-     */
-    private initialized;
-    /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Select / un-select this option.
      *
@@ -313,9 +496,9 @@ export class TPMultiSelectOptionsElement extends HTMLElement {
  */
 export class TPMultiSelectPillElement extends HTMLElement {
     /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Handle button click.
      *
@@ -333,9 +516,9 @@ export class TPMultiSelectPillElement extends HTMLElement {
  */
 export class TPMultiSelectPillsElement extends HTMLElement {
     /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Update this component.
      */
@@ -353,9 +536,9 @@ export class TPMultiSelectPlaceholderElement extends HTMLElement {
  */
 export class TPMultiSelectSearchElement extends HTMLElement {
     /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Handle keyboard inputs.
      *
@@ -387,9 +570,9 @@ export class TPMultiSelectSearchElement extends HTMLElement {
  */
 export class TPMultiSelectSelectAllElement extends HTMLElement {
     /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Handle value changed.
      */
@@ -437,10 +620,6 @@ export class TPMultiSelectElement extends HTMLElement {
      * Constructor.
      */
     constructor();
-    /**
-     * Connected callback.
-     */
-    connectedCallback(): void;
     /**
      * Get observed attributes.
      *
@@ -534,9 +713,9 @@ export class TPMultiSelectElement extends HTMLElement {
  */
 export class TPSliderArrowElement extends HTMLElement {
     /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Handle when the button is clicked.
      */
@@ -580,9 +759,9 @@ export class TPSliderCountElement extends HTMLElement {
  */
 export class TPSliderNavItemElement extends HTMLElement {
     /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Handle when the button is clicked.
      */
@@ -606,9 +785,9 @@ export class TPSliderNavElement extends HTMLElement {
  */
 export class TPSliderSlideElement extends HTMLElement {
     /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Handle slide height change.
      */
@@ -637,6 +816,8 @@ export class TPSliderElement extends HTMLElement {
      * Properties.
      */
     protected touchStartX: number;
+    protected touchStartY: number;
+    protected swipeThreshold: number;
     protected responsiveSettings: {
         [key: string]: any;
     };
@@ -792,9 +973,9 @@ export class TPSliderElement extends HTMLElement {
  */
 export class TPTabsNavItemElement extends HTMLElement {
     /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Handle link click.
      *
@@ -833,9 +1014,9 @@ export class TPTabsTabElement extends HTMLElement {
  */
 export class TPTabsElement extends HTMLElement {
     /**
-     * Connected callback.
+     * Constructor.
      */
-    connectedCallback(): void;
+    constructor();
     /**
      * Get observed attributes.
      *

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:()=>o,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:()=>c,name:()=>h,validator:()=>b});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 a=(t="")=>{const{tpFormErrors:e}=window;return e&&""!==t&&t in e&&"string"==typeof e[t]?e[t]:""},o="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:()=>a(o)},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:()=>a(u)},h="min-length",c="Must be at least %1 characters",b={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=a(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=a(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:()=>a(E)};class M extends HTMLElement{constructor(){super(),this.form=this.querySelector("form")}connectedCallback(){var t;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{connectedCallback(){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 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)})();
 //# sourceMappingURL=index.js.map