@travelopia/web-components 0.7.0 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.update()}update(){var t;const e=null!==(t=this.getAttribute("trigger"))&&void 0!==t?t:":scope > *",i=this.querySelectorAll(e);i&&i.forEach((t=>t.addEventListener(this.getEvent(),(()=>{let e=null;["INPUT","SELECT","TEXTAREA"].includes(t.tagName)&&"value"in t&&"string"==typeof t.value&&(e=t.value),this.triggerFired(t,e)}))))}triggerFired(t,e=null){t&&(this.dispatchEvent(new CustomEvent("triggered")),e||""===e?this.hasAttribute("value")?this.toggleByValueAttribute(e):this.toggleByTargetDataValue(e):this.toggleWithoutValue())}toggleByValueAttribute(t=""){
|
|
1
|
+
(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.update()}update(){var t;const e=null!==(t=this.getAttribute("trigger"))&&void 0!==t?t:":scope > *",i=this.querySelectorAll(e);i&&i.forEach((t=>t.addEventListener(this.getEvent(),(()=>{let e=null;["INPUT","SELECT","TEXTAREA"].includes(t.tagName)&&"value"in t&&"string"==typeof t.value&&(e=t.value),this.triggerFired(t,e)}))))}triggerFired(t,e=null){t&&(this.dispatchEvent(new CustomEvent("triggered")),e||""===e?this.hasAttribute("value")||this.hasAttribute("non-empty-value")?this.toggleByValueAttribute(e):this.toggleByTargetDataValue(e):this.toggleWithoutValue())}toggleByValueAttribute(t=""){const e=this.getTargetElements();if(!e)return;let i=[];const r=this.getAttribute("value"),g=this.hasAttribute("non-empty-value");(r||g)&&(r&&(i=r.split(",")),e.forEach((e=>{i.length&&i.includes(t)||g&&t?this.toggleTargetAttribute(e,"on"):this.toggleTargetAttribute(e,"off")})))}toggleByTargetDataValue(t=""){const e=this.getTargetElements();e&&e.forEach((e=>{const i=e.getAttribute("data-toggle-value"),r=e.hasAttribute("data-toggle-non-empty-value");if(!i&&!r)return;let g=[];i&&(g=i.split(",")),g.length&&g.includes(t)||r&&t?this.toggleTargetAttribute(e,"on"):this.toggleTargetAttribute(e,"off")}))}toggleWithoutValue(){const t=this.getTargetElements();t&&t.forEach((t=>{this.toggleTargetAttribute(t)}))}toggleTargetAttribute(t=null,e=""){t&&("on"===e?(t.setAttribute(this.getAttributeName(),this.getAttributeValue()),this.dispatchEvent(new CustomEvent("toggled-on"))):"off"===e?(t.removeAttribute(this.getAttributeName()),this.dispatchEvent(new CustomEvent("toggled-off"))):(t.toggleAttribute(this.getAttributeName()),this.dispatchEvent(new CustomEvent("toggled"))))}getTargetElements(){var t;const e=null!==(t=this.getAttribute("target"))&&void 0!==t?t:"";return""===e?null:this.getAncestorContext().querySelectorAll(e)}getAttributeName(){var t;return null!==(t=this.getAttribute("attribute"))&&void 0!==t?t:"toggled"}getAttributeValue(){var t;return null!==(t=this.getAttribute("attribute-value"))&&void 0!==t?t:"yes"}getEvent(){var t;return null!==(t=this.getAttribute("event"))&&void 0!==t?t:"change"}getAncestorContext(){var t;let e=document;const i=null!==(t=this.getAttribute("closest-ancestor"))&&void 0!==t?t:"";if(""!==i){const t=this.closest(i);t&&(e=t)}return e}}customElements.define("tp-toggle-attribute",t)})();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dist/toggle-attribute/index.js","mappings":"mBAGO,MAAMA,UAAiCC,YAI7C,WAAAC,GAECC,QAGAC,KAAKC,QACN,CAKA,MAAAA,G,MAEC,MAAMC,EAAwD,QAA9B,EAAAF,KAAKG,aAAc,kBAAW,QAAI,aAC5DC,EAA2CJ,KAAKK,iBAAkBH,GAGjEE,GAMPA,EAASE,SAAWC,GAA0BA,EAAQC,iBAAkBR,KAAKS,YAAY,KAExF,IAAIC,EAAuB,KAGtB,CAAE,QAAS,SAAU,YAAaC,SAAUJ,EAAQK,UAAe,UAAWL,GAAa,iBAAoBA,EAAQG,QAC3HA,EAAQH,EAAQG,OAIjBV,KAAKa,aAAcN,EAASG,EAAO,KAErC,CAQA,YAAAG,CAAcN,EAAsBG,EAAuB,MAEnDH,IAMPP,KAAKc,cAAe,IAAIC,YAAa,cAGhCL,GAAS,KAAOA,EAEfV,KAAKgB,aAAc,SACvBhB,KAAKiB,uBAAwBP,GAE7BV,KAAKkB,wBAAyBR,GAI/BV,KAAKmB,qBAEP,CAOA,sBAAAF,CAAwBP,EAAgB,I,MAEvC,MAAMU,GAAiD,QAA5B,EAAApB,KAAKG,aAAc,gBAAS,QAAI,IAAKkB,MAAO,KAGjEC,EAAiBtB,KAAKuB,oBAGnBH,EAAOI,QAAUF,GAM1BA,EAAehB,SAAWmB,IAEpBL,EAAOT,SAAUD,GACrBV,KAAK0B,sBAAuBD,EAAQ,MAEpCzB,KAAK0B,sBAAuBD,EAAQ,M,GAGvC,CAOA,uBAAAP,CAAyBR,EAAgB,IAExC,MAAMY,EAAiBtB,KAAKuB,oBAGrBD,GAMPA,EAAehB,SAAWmB,I,MAEzB,MAAML,GAA+D,QAA1C,EAAAK,EAAOtB,aAAc,4BAAqB,QAAI,IAAKkB,MAAO,KAG9ED,EAAOI,SAMTJ,EAAOT,SAAUD,GACrBV,KAAK0B,sBAAuBD,EAAQ,MAEpCzB,KAAK0B,sBAAuBD,EAAQ,O,GAGvC,CAKA,kBAAAN,GAEC,MAAMG,EAAiBtB,KAAKuB,oBAGrBD,GAMPA,EAAehB,SAAWmB,IAEzBzB,KAAK0B,sBAAuBD,EAAQ,GAEtC,CAQA,qBAAAC,CAAuBD,EAA6B,KAAME,EAAe,IAEjEF,IAMF,OAASE,GACbF,EAAOG,aAAc5B,KAAK6B,mBAAoB7B,KAAK8B,qBACnD9B,KAAKc,cAAe,IAAIC,YAAa,gBAC1B,QAAUY,GACrBF,EAAOM,gBAAiB/B,KAAK6B,oBAC7B7B,KAAKc,cAAe,IAAIC,YAAa,kBAErCU,EAAOO,gBAAiBhC,KAAK6B,oBAC7B7B,KAAKc,cAAe,IAAIC,YAAa,aAEvC,CAKA,iBAAAQ,G,MAEC,MAAMU,EAAsD,QAA7B,EAAAjC,KAAKG,aAAc,iBAAU,QAAI,GAGhE,MAAK,KAAO8B,EAEJ,KAIDjC,KAAKkC,qBAAqB7B,iBAAkB4B,EACpD,CAOA,gBAAAJ,G,MAEC,OAAuC,QAAhC,EAAA7B,KAAKG,aAAc,oBAAa,QAAI,SAC5C,CAOA,iBAAA2B,G,MAEC,OAA6C,QAAtC,EAAA9B,KAAKG,aAAc,0BAAmB,QAAI,KAClD,CAOA,QAAAM,G,MAEC,OAAmC,QAA5B,EAAAT,KAAKG,aAAc,gBAAS,QAAI,QACxC,CAKA,kBAAA+B,G,MAEC,IAAIC,EAAkCC,SAOtC,MAAMC,EAAiE,QAAvC,EAAArC,KAAKG,aAAc,2BAAoB,QAAI,GAG3E,GAAK,KAAOkC,EAAkB,CAC7B,MAAMC,EAAqCtC,KAAKuC,QAASF,GAGpDC,IACJH,EAAUG,E,CAKZ,OAAOH,CACR,ECpPDK,eAAeC,OAAQ,sBAAuB7C,E","sources":["webpack://@travelopia/web-components/./src/toggle-attribute/tp-toggle-attribute.ts","webpack://@travelopia/web-components/./src/toggle-attribute/index.ts"],"sourcesContent":["/**\n * TP Toggle Attribute.\n */\nexport class TPToggleAttributeElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Call the parent constructor.\n\t\tsuper();\n\n\t\t// Call the update function to set up event listeners.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update.\n\t */\n\tupdate(): void {\n\t\t// Get trigger elements.\n\t\tconst triggerSelector: string = this.getAttribute( 'trigger' ) ?? ':scope > *';\n\t\tconst triggers: NodeListOf<HTMLElement> | null = this.querySelectorAll( triggerSelector );\n\n\t\t// Exit the function if no triggers are found.\n\t\tif ( ! triggers ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check for value.\n\t\ttriggers.forEach( ( trigger: HTMLElement ) => trigger.addEventListener( this.getEvent(), (): void => {\n\t\t\t// Set value.\n\t\t\tlet value: string | null = null;\n\n\t\t\t// Check if we have a value.\n\t\t\tif ( [ 'INPUT', 'SELECT', 'TEXTAREA' ].includes( trigger.tagName ) && ( 'value' in trigger ) && 'string' === typeof trigger.value ) {\n\t\t\t\tvalue = trigger.value;\n\t\t\t}\n\n\t\t\t// Call the triggerFired function with the trigger element and its value.\n\t\t\tthis.triggerFired( trigger, value );\n\t\t} ) );\n\t}\n\n\t/**\n\t * Trigger has fired the event.\n\t *\n\t * @param {HTMLElement} trigger Trigger element.\n\t * @param {string} value The value of the trigger.\n\t */\n\ttriggerFired( trigger: HTMLElement, value: string | null = null ): void {\n\t\t// Check if we have a trigger.\n\t\tif ( ! trigger ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Dispatch event.\n\t\tthis.dispatchEvent( new CustomEvent( 'triggered' ) );\n\n\t\t// Check if trigger has a value, example: form inputs.\n\t\tif ( value || '' === value ) {\n\t\t\t// Check if we have a value.\n\t\t\tif ( this.hasAttribute( 'value' ) ) {\n\t\t\t\tthis.toggleByValueAttribute( value );\n\t\t\t} else {\n\t\t\t\tthis.toggleByTargetDataValue( value );\n\t\t\t}\n\t\t} else {\n\t\t\t// Trigger does not have a value, example: buttons.\n\t\t\tthis.toggleWithoutValue();\n\t\t}\n\t}\n\n\t/**\n\t * Toggle target based on value attribute set on this component.\n\t *\n\t * @param {string} value Trigger's value.\n\t */\n\ttoggleByValueAttribute( value: string = '' ): void {\n\t\t// Get value to listen for.\n\t\tconst values: string[] = ( this.getAttribute( 'value' ) ?? '' ).split( ',' );\n\n\t\t// Get the target elements.\n\t\tconst targetElements = this.getTargetElements();\n\n\t\t// Check if we can continue\n\t\tif ( ! ( values.length && targetElements ) ) {\n\t\t\t// We can't.\n\t\t\treturn;\n\t\t}\n\n\t\t// Toggle the target elements.\n\t\ttargetElements.forEach( ( target ) => {\n\t\t\t// Toggle the target's attribute if the target and trigger have the same value.\n\t\t\tif ( values.includes( value ) ) {\n\t\t\t\tthis.toggleTargetAttribute( target, 'on' );\n\t\t\t} else {\n\t\t\t\tthis.toggleTargetAttribute( target, 'off' );\n\t\t\t}\n\t\t} );\n\t}\n\n\t/**\n\t * Toggle target based on `data-toggle-value` set on target.\n\t *\n\t * @param {string} value Trigger's value.\n\t */\n\ttoggleByTargetDataValue( value: string = '' ): void {\n\t\t// Get the target elements.\n\t\tconst targetElements = this.getTargetElements();\n\n\t\t// Check if we can continue\n\t\tif ( ! targetElements ) {\n\t\t\t// We can't.\n\t\t\treturn;\n\t\t}\n\n\t\t// Toggle the target elements.\n\t\ttargetElements.forEach( ( target: HTMLElement ): void => {\n\t\t\t// Get values.\n\t\t\tconst values: string[] = ( target.getAttribute( 'data-toggle-value' ) ?? '' ).split( ',' );\n\n\t\t\t// Check if we can continue\n\t\t\tif ( ! values.length ) {\n\t\t\t\t// We can't.\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Toggle on element attribute if it matches value.\n\t\t\tif ( values.includes( value ) ) {\n\t\t\t\tthis.toggleTargetAttribute( target, 'on' );\n\t\t\t} else {\n\t\t\t\tthis.toggleTargetAttribute( target, 'off' );\n\t\t\t}\n\t\t} );\n\t}\n\n\t/**\n\t * Toggle the target without any value.\n\t */\n\ttoggleWithoutValue(): void {\n\t\t// Get the target elements.\n\t\tconst targetElements = this.getTargetElements();\n\n\t\t// Check if we can continue\n\t\tif ( ! targetElements ) {\n\t\t\t// We can't.\n\t\t\treturn;\n\t\t}\n\n\t\t// Toggle the target elements.\n\t\ttargetElements.forEach( ( target: HTMLElement ): void => {\n\t\t\t// Toggle on element attribute if it matches the value.\n\t\t\tthis.toggleTargetAttribute( target );\n\t\t} );\n\t}\n\n\t/**\n\t * Toggle the target's value on or off.\n\t *\n\t * @param {HTMLElement} target The target element.\n\t * @param {string} type Either `on` or `off`.\n\t */\n\ttoggleTargetAttribute( target: HTMLElement | null = null, type: string = '' ): void {\n\t\t// Check if target exists.\n\t\tif ( ! target ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Next toggle attribute on or off.\n\t\tif ( 'on' === type ) {\n\t\t\ttarget.setAttribute( this.getAttributeName(), this.getAttributeValue() );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'toggled-on' ) );\n\t\t} else if ( 'off' === type ) {\n\t\t\ttarget.removeAttribute( this.getAttributeName() );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'toggled-off' ) );\n\t\t} else {\n\t\t\ttarget.toggleAttribute( this.getAttributeName() );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'toggled' ) );\n\t\t}\n\t}\n\n\t/**\n\t * Get target element.\n\t */\n\tgetTargetElements(): NodeListOf<HTMLElement> | null {\n\t\t// Get target selector.\n\t\tconst targetSelector: string = this.getAttribute( 'target' ) ?? '';\n\n\t\t// Check if we have a target selector.\n\t\tif ( '' === targetSelector ) {\n\t\t\t// Return null if no target selector is provided.\n\t\t\treturn null;\n\t\t}\n\n\t\t// Return the target.\n\t\treturn this.getAncestorContext().querySelectorAll( targetSelector );\n\t}\n\n\t/**\n\t * Get attribute name to toggle.\n\t *\n\t * @return {string} The attribute name.\n\t */\n\tgetAttributeName(): string {\n\t\t// Return the attribute name from the 'attribute' attribute or default to 'toggled'.\n\t\treturn this.getAttribute( 'attribute' ) ?? 'toggled';\n\t}\n\n\t/**\n\t * Get attribute value once it is toggled.\n\t *\n\t * @return {string} The attribute value.\n\t */\n\tgetAttributeValue(): string {\n\t\t// Return the attribute value from the 'attribute-value' attribute or default to 'yes'.\n\t\treturn this.getAttribute( 'attribute-value' ) ?? 'yes';\n\t}\n\n\t/**\n\t * Get event.\n\t *\n\t * @return {string} The event.\n\t */\n\tgetEvent(): string {\n\t\t// Return the event type from the 'event' attribute or default to 'change'.\n\t\treturn this.getAttribute( 'event' ) ?? 'change';\n\t}\n\n\t/**\n\t * Get ancestor context.\n\t */\n\tgetAncestorContext(): Document | HTMLElement {\n\t\t// Set default context.\n\t\tlet context: Document | HTMLElement = document;\n\n\t\t// Check for closest ancestor attribute.\n\n\t\t// If set, the context will be the closest target ancestor.\n\n\t\t// Note: The target's ancestor must also be this element's ancestor!\n\t\tconst closestSelector: string = this.getAttribute( 'closest-ancestor' ) ?? '';\n\n\t\t// Find the closest ancestor matching the selector.\n\t\tif ( '' !== closestSelector ) {\n\t\t\tconst closestContext: HTMLElement | null = this.closest( closestSelector );\n\n\t\t\t// Check if we can continue\n\t\t\tif ( closestContext ) {\n\t\t\t\tcontext = closestContext;\n\t\t\t}\n\t\t}\n\n\t\t// Return context.\n\t\treturn context;\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPToggleAttributeElement } from './tp-toggle-attribute';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-toggle-attribute', TPToggleAttributeElement );\n"],"names":["TPToggleAttributeElement","HTMLElement","constructor","super","this","update","triggerSelector","getAttribute","triggers","querySelectorAll","forEach","trigger","addEventListener","getEvent","value","includes","tagName","triggerFired","dispatchEvent","CustomEvent","hasAttribute","toggleByValueAttribute","toggleByTargetDataValue","toggleWithoutValue","values","split","targetElements","getTargetElements","length","target","toggleTargetAttribute","type","setAttribute","getAttributeName","getAttributeValue","removeAttribute","toggleAttribute","targetSelector","getAncestorContext","context","document","closestSelector","closestContext","closest","customElements","define"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"dist/toggle-attribute/index.js","mappings":"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","sources":["webpack://@travelopia/web-components/./src/toggle-attribute/tp-toggle-attribute.ts","webpack://@travelopia/web-components/./src/toggle-attribute/index.ts"],"sourcesContent":["/**\n * TP Toggle Attribute.\n */\nexport class TPToggleAttributeElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\t// Call the parent constructor.\n\t\tsuper();\n\n\t\t// Call the update function to set up event listeners.\n\t\tthis.update();\n\t}\n\n\t/**\n\t * Update.\n\t */\n\tupdate(): void {\n\t\t// Get trigger elements.\n\t\tconst triggerSelector: string = this.getAttribute( 'trigger' ) ?? ':scope > *';\n\t\tconst triggers: NodeListOf<HTMLElement> = this.querySelectorAll( triggerSelector );\n\n\t\t// Exit the function if no triggers are found.\n\t\tif ( ! triggers ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Check for value.\n\t\ttriggers.forEach( ( trigger: HTMLElement ) => trigger.addEventListener( this.getEvent(), (): void => {\n\t\t\t// Set value.\n\t\t\tlet value: string | null = null;\n\n\t\t\t// Check if we have a value.\n\t\t\tif ( [ 'INPUT', 'SELECT', 'TEXTAREA' ].includes( trigger.tagName ) && ( 'value' in trigger ) && 'string' === typeof trigger.value ) {\n\t\t\t\tvalue = trigger.value;\n\t\t\t}\n\n\t\t\t// Call the triggerFired function with the trigger element and its value.\n\t\t\tthis.triggerFired( trigger, value );\n\t\t} ) );\n\t}\n\n\t/**\n\t * Trigger has fired the event.\n\t *\n\t * @param {HTMLElement} trigger Trigger element.\n\t * @param {string} value The value of the trigger.\n\t */\n\ttriggerFired( trigger: HTMLElement, value: string | null = null ): void {\n\t\t// Check if we have a trigger.\n\t\tif ( ! trigger ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Dispatch event.\n\t\tthis.dispatchEvent( new CustomEvent( 'triggered' ) );\n\n\t\t// Check if trigger has a value, example: form inputs.\n\t\tif ( value || '' === value ) {\n\t\t\t// Check if we have a value.\n\t\t\tif ( this.hasAttribute( 'value' ) || this.hasAttribute( 'non-empty-value' ) ) {\n\t\t\t\tthis.toggleByValueAttribute( value );\n\t\t\t} else {\n\t\t\t\tthis.toggleByTargetDataValue( value );\n\t\t\t}\n\t\t} else {\n\t\t\t// Trigger does not have a value, example: buttons.\n\t\t\tthis.toggleWithoutValue();\n\t\t}\n\t}\n\n\t/**\n\t * Toggle target based on value attribute set on this component.\n\t *\n\t * @param {string} value Trigger's value.\n\t */\n\ttoggleByValueAttribute( value: string = '' ): void {\n\t\t// Get the target elements.\n\t\tconst targetElements = this.getTargetElements();\n\n\t\t// Check if we can continue\n\t\tif ( ! targetElements ) {\n\t\t\t// We can't.\n\t\t\treturn;\n\t\t}\n\n\t\t// Initialize values.\n\t\tlet values: string[] = [];\n\n\t\t// Get value to listen for.\n\t\tconst valuesAttribute = this.getAttribute( 'value' );\n\t\tconst nonEmptyValuesAttribute = this.hasAttribute( 'non-empty-value' );\n\n\t\t// Can we proceed?\n\t\tif ( ! valuesAttribute && ! nonEmptyValuesAttribute ) {\n\t\t\t// Nope.\n\t\t\treturn;\n\t\t}\n\n\t\t// Do we have the values attribute?\n\t\tif ( valuesAttribute ) {\n\t\t\t// Yes, split it.\n\t\t\tvalues = valuesAttribute.split( ',' );\n\t\t}\n\n\t\t// Toggle the target elements.\n\t\ttargetElements.forEach( ( target ) => {\n\t\t\t// Toggle the target's attribute if the target and trigger have the same value.\n\t\t\tif ( ( values.length && values.includes( value ) ) || ( nonEmptyValuesAttribute && value ) ) {\n\t\t\t\tthis.toggleTargetAttribute( target, 'on' );\n\t\t\t} else {\n\t\t\t\tthis.toggleTargetAttribute( target, 'off' );\n\t\t\t}\n\t\t} );\n\t}\n\n\t/**\n\t * Toggle target based on `data-toggle-value` set on target.\n\t *\n\t * @param {string} value Trigger's value.\n\t */\n\ttoggleByTargetDataValue( value: string = '' ): void {\n\t\t// Get the target elements.\n\t\tconst targetElements = this.getTargetElements();\n\n\t\t// Check if we can continue\n\t\tif ( ! targetElements ) {\n\t\t\t// We can't.\n\t\t\treturn;\n\t\t}\n\n\t\t// Toggle the target elements.\n\t\ttargetElements.forEach( ( target: HTMLElement ): void => {\n\t\t\t// Get values and split them. Set an empty array otherwise.\n\t\t\tconst valuesAttribute = target.getAttribute( 'data-toggle-value' );\n\t\t\tconst nonEmptyValuesAttribute = target.hasAttribute( 'data-toggle-non-empty-value' );\n\n\t\t\t// Can we proceed?\n\t\t\tif ( ! valuesAttribute && ! nonEmptyValuesAttribute ) {\n\t\t\t\t// Nope, bail.\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Initialize values.\n\t\t\tlet values: string[] = [];\n\n\t\t\t// Null check.\n\t\t\tif ( valuesAttribute ) {\n\t\t\t\t// Assign the values.\n\t\t\t\tvalues = valuesAttribute.split( ',' );\n\t\t\t}\n\n\t\t\t// Toggle on element attribute if it matches value or it does not have a data-toggle-value attribute in which case it will match with all non empty values.\n\t\t\tif ( ( values.length && values.includes( value ) ) || ( nonEmptyValuesAttribute && value ) ) {\n\t\t\t\tthis.toggleTargetAttribute( target, 'on' );\n\t\t\t} else {\n\t\t\t\tthis.toggleTargetAttribute( target, 'off' );\n\t\t\t}\n\t\t} );\n\t}\n\n\t/**\n\t * Toggle the target without any value.\n\t */\n\ttoggleWithoutValue(): void {\n\t\t// Get the target elements.\n\t\tconst targetElements = this.getTargetElements();\n\n\t\t// Check if we can continue\n\t\tif ( ! targetElements ) {\n\t\t\t// We can't.\n\t\t\treturn;\n\t\t}\n\n\t\t// Toggle the target elements.\n\t\ttargetElements.forEach( ( target: HTMLElement ): void => {\n\t\t\t// Toggle on element attribute if it matches the value.\n\t\t\tthis.toggleTargetAttribute( target );\n\t\t} );\n\t}\n\n\t/**\n\t * Toggle the target's value on or off.\n\t *\n\t * @param {HTMLElement} target The target element.\n\t * @param {string} type Either `on` or `off`.\n\t */\n\ttoggleTargetAttribute( target: HTMLElement | null = null, type: string = '' ): void {\n\t\t// Check if target exists.\n\t\tif ( ! target ) {\n\t\t\t// Early return.\n\t\t\treturn;\n\t\t}\n\n\t\t// Next toggle attribute on or off.\n\t\tif ( 'on' === type ) {\n\t\t\ttarget.setAttribute( this.getAttributeName(), this.getAttributeValue() );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'toggled-on' ) );\n\t\t} else if ( 'off' === type ) {\n\t\t\ttarget.removeAttribute( this.getAttributeName() );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'toggled-off' ) );\n\t\t} else {\n\t\t\ttarget.toggleAttribute( this.getAttributeName() );\n\t\t\tthis.dispatchEvent( new CustomEvent( 'toggled' ) );\n\t\t}\n\t}\n\n\t/**\n\t * Get target element.\n\t */\n\tgetTargetElements(): NodeListOf<HTMLElement> | null {\n\t\t// Get target selector.\n\t\tconst targetSelector: string = this.getAttribute( 'target' ) ?? '';\n\n\t\t// Check if we have a target selector.\n\t\tif ( '' === targetSelector ) {\n\t\t\t// Return null if no target selector is provided.\n\t\t\treturn null;\n\t\t}\n\n\t\t// Return the target.\n\t\treturn this.getAncestorContext().querySelectorAll( targetSelector );\n\t}\n\n\t/**\n\t * Get attribute name to toggle.\n\t *\n\t * @return {string} The attribute name.\n\t */\n\tgetAttributeName(): string {\n\t\t// Return the attribute name from the 'attribute' attribute or default to 'toggled'.\n\t\treturn this.getAttribute( 'attribute' ) ?? 'toggled';\n\t}\n\n\t/**\n\t * Get attribute value once it is toggled.\n\t *\n\t * @return {string} The attribute value.\n\t */\n\tgetAttributeValue(): string {\n\t\t// Return the attribute value from the 'attribute-value' attribute or default to 'yes'.\n\t\treturn this.getAttribute( 'attribute-value' ) ?? 'yes';\n\t}\n\n\t/**\n\t * Get event.\n\t *\n\t * @return {string} The event.\n\t */\n\tgetEvent(): string {\n\t\t// Return the event type from the 'event' attribute or default to 'change'.\n\t\treturn this.getAttribute( 'event' ) ?? 'change';\n\t}\n\n\t/**\n\t * Get ancestor context.\n\t */\n\tgetAncestorContext(): Document | HTMLElement {\n\t\t// Set default context.\n\t\tlet context: Document | HTMLElement = document;\n\n\t\t// Check for closest ancestor attribute.\n\n\t\t// If set, the context will be the closest target ancestor.\n\n\t\t// Note: The target's ancestor must also be this element's ancestor!\n\t\tconst closestSelector: string = this.getAttribute( 'closest-ancestor' ) ?? '';\n\n\t\t// Find the closest ancestor matching the selector.\n\t\tif ( '' !== closestSelector ) {\n\t\t\tconst closestContext: HTMLElement | null = this.closest( closestSelector );\n\n\t\t\t// Check if we can continue\n\t\t\tif ( closestContext ) {\n\t\t\t\tcontext = closestContext;\n\t\t\t}\n\t\t}\n\n\t\t// Return context.\n\t\treturn context;\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPToggleAttributeElement } from './tp-toggle-attribute';\n\n/**\n * Register Components.\n */\ncustomElements.define( 'tp-toggle-attribute', TPToggleAttributeElement );\n"],"names":["TPToggleAttributeElement","HTMLElement","constructor","super","this","update","triggerSelector","getAttribute","triggers","querySelectorAll","forEach","trigger","addEventListener","getEvent","value","includes","tagName","triggerFired","dispatchEvent","CustomEvent","hasAttribute","toggleByValueAttribute","toggleByTargetDataValue","toggleWithoutValue","targetElements","getTargetElements","values","valuesAttribute","nonEmptyValuesAttribute","split","target","length","toggleTargetAttribute","type","setAttribute","getAttributeName","getAttributeValue","removeAttribute","toggleAttribute","targetSelector","getAncestorContext","context","document","closestSelector","closestContext","closest","customElements","define"],"sourceRoot":""}
|