@travelopia/web-components 0.6.8 → 0.6.9

package/dist/declarations.d.ts

@@ -1077,12 +1077,6 @@ export class TPToggleAttributeElement extends HTMLElement {
      * Update.
      */
     update(): void;
-    /**
-     * Get event.
-     *
-     * @return {string} The event.
-     */
-    getEvent(): string;
     /**
      * Trigger has fired the event.
      *
@@ -1091,33 +1085,32 @@ export class TPToggleAttributeElement extends HTMLElement {
      */
     triggerFired(trigger: HTMLElement, value?: string | null): void;
     /**
-     * Toggle target based on value set on this component.
+     * Toggle target based on value attribute set on this component.
      *
      * @param {string} value Trigger's value.
      */
-    toggleTargetBasedOnValueAttribute(value?: string): void;
+    toggleByValueAttribute(value?: string): void;
     /**
-     * Toggle group based on value set on trigger.
+     * Toggle target based on `data-toggle-value` set on target.
      *
      * @param {string} value Trigger's value.
      */
-    toggleTargetGroupBasedOnTriggerValue(value?: string): void;
+    toggleByTargetDataValue(value?: string): void;
     /**
-     * Toggle group based on value set on trigger.
-     *
-     * @param {string} value Trigger's value.
+     * Toggle the target without any value.
      */
-    toggleTargetBasedOnTriggerValue(value?: string): void;
+    toggleWithoutValue(): void;
     /**
      * Toggle the target's value on or off.
      *
-     * @param {string} type Either `on` or `off`.
+     * @param {HTMLElement} target The target element.
+     * @param {string}      type   Either `on` or `off`.
      */
-    toggleTargetAttribute(type?: string): void;
+    toggleTargetAttribute(target?: HTMLElement | null, type?: string): void;
     /**
      * Get target element.
      */
-    getTargetElement(): HTMLElement | null;
+    getTargetElements(): NodeListOf<HTMLElement> | null;
     /**
      * Get attribute name to toggle.
      *
@@ -1131,13 +1124,11 @@ export class TPToggleAttributeElement extends HTMLElement {
      */
     getAttributeValue(): string;
     /**
-     * Un-toggle the target's group.
-     */
-    unToggleGroup(): void;
-    /**
-     * Get group elements.
+     * Get event.
+     *
+     * @return {string} The event.
      */
-    getGroupElements(): NodeListOf<HTMLElement> | null;
+    getEvent(): string;
     /**
      * Get ancestor context.
      */

package/dist/toggle-attribute/index.js

@@ -1,2 +1,2 @@
-(()=>{"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 > *",r=this.querySelectorAll(e);r&&r.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)}))))}getEvent(){var t;return null!==(t=this.getAttribute("event"))&&void 0!==t?t:"change"}triggerFired(t,e=null){t&&(this.dispatchEvent(new CustomEvent("triggered")),e||""===e?this.hasAttribute("value")?this.toggleTargetBasedOnValueAttribute(e):this.hasAttribute("group")?this.toggleTargetGroupBasedOnTriggerValue(e):this.toggleTargetBasedOnTriggerValue(e):this.toggleTargetAttribute())}toggleTargetBasedOnValueAttribute(t=""){var e;const r=null!==(e=this.getAttribute("value"))&&void 0!==e?e:"";""!==r&&(t===r?this.toggleTargetAttribute("on"):this.toggleTargetAttribute("off"))}toggleTargetGroupBasedOnTriggerValue(t=""){const e=this.getGroupElements();e&&e.forEach((e=>{t===e.getAttribute("data-toggle-value")?e.setAttribute(this.getAttributeName(),this.getAttributeValue()):e.removeAttribute(this.getAttributeName())}))}toggleTargetBasedOnTriggerValue(t=""){const e=this.getTargetElement();e&&(this.unToggleGroup(),e.getAttribute("data-toggle-value")===t?e.setAttribute(this.getAttributeName(),this.getAttributeValue()):e.removeAttribute(this.getAttributeName()))}toggleTargetAttribute(t=""){const e=this.getTargetElement();e&&(this.unToggleGroup(),"on"===t?(e.setAttribute(this.getAttributeName(),this.getAttributeValue()),this.dispatchEvent(new CustomEvent("toggled-on"))):"off"===t?(e.removeAttribute(this.getAttributeName()),this.dispatchEvent(new CustomEvent("toggled-off"))):(e.toggleAttribute(this.getAttributeName()),this.dispatchEvent(new CustomEvent("toggled"))))}getTargetElement(){var t;const e=null!==(t=this.getAttribute("target"))&&void 0!==t?t:"";return""===e?null:this.getAncestorContext().querySelector(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"}unToggleGroup(){const t=this.getGroupElements();if(!t)return;const e=this.getAttributeName();t.forEach((t=>t.removeAttribute(e)))}getGroupElements(){const t=this.getAttribute("group");return t?this.getAncestorContext().querySelectorAll(`[data-toggle-group=${t}]`):null}getAncestorContext(){var t;let e=document;const r=null!==(t=this.getAttribute("closest-ancestor"))&&void 0!==t?t:"";if(""!==r){const t=this.closest(r);t&&(e=t)}return e}}customElements.define("tp-toggle-attribute",t)})();
+(()=>{"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=""){var e;const i=(null!==(e=this.getAttribute("value"))&&void 0!==e?e:"").split(","),r=this.getTargetElements();i.length&&r&&r.forEach((e=>{i.includes(t)?this.toggleTargetAttribute(e,"on"):this.toggleTargetAttribute(e,"off")}))}toggleByTargetDataValue(t=""){const e=this.getTargetElements();e&&e.forEach((e=>{var i;const r=(null!==(i=e.getAttribute("data-toggle-value"))&&void 0!==i?i:"").split(",");r.length&&(r.includes(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)})();
 //# sourceMappingURL=index.js.map

package/dist/toggle-attribute/index.js.map

@@ -1 +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\tsuper();\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\t\tif ( ! triggers ) {\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\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\tthis.triggerFired( trigger, value );\n\t\t} ) );\n\t}\n\n\t/**\n\t * Get event.\n\t *\n\t * @return {string} The event.\n\t */\n\tgetEvent(): string {\n\t\treturn this.getAttribute( 'event' ) ?? 'change';\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\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.toggleTargetBasedOnValueAttribute( value );\n\t\t\t} else if ( this.hasAttribute( 'group' ) ) {\n\t\t\t\tthis.toggleTargetGroupBasedOnTriggerValue( value );\n\t\t\t} else {\n\t\t\t\tthis.toggleTargetBasedOnTriggerValue( 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.toggleTargetAttribute();\n\t\t}\n\t}\n\n\t/**\n\t * Toggle target based on value set on this component.\n\t *\n\t * @param {string} value Trigger's value.\n\t */\n\ttoggleTargetBasedOnValueAttribute( value: string = '' ): void {\n\t\t// Get value to listen for.\n\t\tconst valueAttribute: string = this.getAttribute( 'value' ) ?? '';\n\t\tif ( '' === valueAttribute ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Toggle the target's attribute if the target and trigger have the same value.\n\t\tif ( value === valueAttribute ) {\n\t\t\tthis.toggleTargetAttribute( 'on' );\n\t\t} else {\n\t\t\tthis.toggleTargetAttribute( 'off' );\n\t\t}\n\t}\n\n\t/**\n\t * Toggle group based on value set on trigger.\n\t *\n\t * @param {string} value Trigger's value.\n\t */\n\ttoggleTargetGroupBasedOnTriggerValue( value: string = '' ): void {\n\t\t// Get group elements.\n\t\tconst groupElements: NodeListOf<HTMLElement> | null = this.getGroupElements();\n\t\tif ( ! groupElements ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Traverse group elements.\n\t\tgroupElements.forEach( ( element: HTMLElement ): void => {\n\t\t\t// Toggle on element attribute if it matches the value.\n\t\t\tif ( value === element.getAttribute( 'data-toggle-value' ) ) {\n\t\t\t\telement.setAttribute( this.getAttributeName(), this.getAttributeValue() );\n\t\t\t} else {\n\t\t\t\telement.removeAttribute( this.getAttributeName() );\n\t\t\t}\n\t\t} );\n\t}\n\n\t/**\n\t * Toggle group based on value set on trigger.\n\t *\n\t * @param {string} value Trigger's value.\n\t */\n\ttoggleTargetBasedOnTriggerValue( value: string = '' ): void {\n\t\t// Get target.\n\t\tconst target: HTMLElement | null = this.getTargetElement();\n\t\tif ( ! target ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// First, un-toggle group, if it exists.\n\t\tthis.unToggleGroup();\n\n\t\t// Next toggle attribute on or off.\n\t\tif ( target.getAttribute( 'data-toggle-value' ) === value ) {\n\t\t\ttarget.setAttribute( this.getAttributeName(), this.getAttributeValue() );\n\t\t} else {\n\t\t\ttarget.removeAttribute( this.getAttributeName() );\n\t\t}\n\t}\n\n\t/**\n\t * Toggle the target's value on or off.\n\t *\n\t * @param {string} type Either `on` or `off`.\n\t */\n\ttoggleTargetAttribute( type: string = '' ): void {\n\t\t// Get target.\n\t\tconst target: HTMLElement | null = this.getTargetElement();\n\t\tif ( ! target ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// First, un-toggle group, if it exists.\n\t\tthis.unToggleGroup();\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\tgetTargetElement(): HTMLElement | null {\n\t\t// Get target selector.\n\t\tconst targetSelector: string = this.getAttribute( 'target' ) ?? '';\n\t\tif ( '' === targetSelector ) {\n\t\t\treturn null;\n\t\t}\n\n\t\t// Return the target.\n\t\treturn this.getAncestorContext().querySelector( 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\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\treturn this.getAttribute( 'attribute-value' ) ?? 'yes';\n\t}\n\n\t/**\n\t * Un-toggle the target's group.\n\t */\n\tunToggleGroup(): void {\n\t\t// Get group elements.\n\t\tconst groupElements: NodeListOf<HTMLElement> | null = this.getGroupElements();\n\t\tif ( ! groupElements ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove attribute from this group.\n\t\tconst attributeName: string = this.getAttributeName();\n\t\tgroupElements.forEach( ( element: HTMLElement ) => element.removeAttribute( attributeName ) );\n\t}\n\n\t/**\n\t * Get group elements.\n\t */\n\tgetGroupElements(): NodeListOf<HTMLElement> | null {\n\t\t// Get group name.\n\t\tconst groupName: string | null = this.getAttribute( 'group' );\n\t\tif ( ! groupName ) {\n\t\t\treturn null;\n\t\t}\n\n\t\t// Get group elements.\n\t\treturn this.getAncestorContext().querySelectorAll( `[data-toggle-group=${ groupName }]` );\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\t\t// If set, the context will be the closest target ancestor.\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\t\tif ( '' !== closestSelector ) {\n\t\t\tconst closestContext: HTMLElement | null = this.closest( closestSelector );\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","toggleTargetBasedOnValueAttribute","toggleTargetGroupBasedOnTriggerValue","toggleTargetBasedOnTriggerValue","toggleTargetAttribute","valueAttribute","groupElements","getGroupElements","element","setAttribute","getAttributeName","getAttributeValue","removeAttribute","target","getTargetElement","unToggleGroup","type","toggleAttribute","targetSelector","getAncestorContext","querySelector","attributeName","groupName","context","document","closestSelector","closestContext","closest","customElements","define"],"sourceRoot":""}
+{"version":3,"file":"dist/toggle-attribute/index.js","mappings":"mBAGO,MAAMA,UAAiCC,YAI7C,WAAAC,GACCC,QACAC,KAAKC,QACN,CAKA,MAAAA,G,MAEC,MAAMC,EAAwD,QAA9B,EAAAF,KAAKG,aAAc,kBAAW,QAAI,aAC5DC,EAA2CJ,KAAKK,iBAAkBH,GACjEE,GAKPA,EAASE,SAAWC,GAA0BA,EAAQC,iBAAkBR,KAAKS,YAAY,KACxF,IAAIC,EAAuB,KAGtB,CAAE,QAAS,SAAU,YAAaC,SAAUJ,EAAQK,UAAe,UAAWL,GAAa,iBAAoBA,EAAQG,QAC3HA,EAAQH,EAAQG,OAGjBV,KAAKa,aAAcN,EAASG,EAAO,KAErC,CAQA,YAAAG,CAAcN,EAAsBG,EAAuB,MAEnDH,IAKPP,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,GAK1BA,EAAehB,SAAWmB,IAEpBL,EAAOT,SAAUD,GACrBV,KAAK0B,sBAAuBD,EAAQ,MAEpCzB,KAAK0B,sBAAuBD,EAAQ,M,GAGvC,CAOA,uBAAAP,CAAyBR,EAAgB,IAExC,MAAMY,EAAiBtB,KAAKuB,oBAGrBD,GAKPA,EAAehB,SAAWmB,I,MAEzB,MAAML,GAA+D,QAA1C,EAAAK,EAAOtB,aAAc,4BAAqB,QAAI,IAAKkB,MAAO,KAG9ED,EAAOI,SAKTJ,EAAOT,SAAUD,GACrBV,KAAK0B,sBAAuBD,EAAQ,MAEpCzB,KAAK0B,sBAAuBD,EAAQ,O,GAGvC,CAKA,kBAAAN,GAEC,MAAMG,EAAiBtB,KAAKuB,oBAGrBD,GAKPA,EAAehB,SAAWmB,IAEzBzB,KAAK0B,sBAAuBD,EAAQ,GAEtC,CAQA,qBAAAC,CAAuBD,EAA6B,KAAME,EAAe,IAEjEF,IAKF,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,GAChE,MAAK,KAAO8B,EACJ,KAIDjC,KAAKkC,qBAAqB7B,iBAAkB4B,EACpD,CAOA,gBAAAJ,G,MACC,OAAuC,QAAhC,EAAA7B,KAAKG,aAAc,oBAAa,QAAI,SAC5C,CAOA,iBAAA2B,G,MACC,OAA6C,QAAtC,EAAA9B,KAAKG,aAAc,0BAAmB,QAAI,KAClD,CAOA,QAAAM,G,MACC,OAAmC,QAA5B,EAAAT,KAAKG,aAAc,gBAAS,QAAI,QACxC,CAKA,kBAAA+B,G,MAEC,IAAIC,EAAkCC,SAKtC,MAAMC,EAAiE,QAAvC,EAAArC,KAAKG,aAAc,2BAAoB,QAAI,GAC3E,GAAK,KAAOkC,EAAkB,CAC7B,MAAMC,EAAqCtC,KAAKuC,QAASF,GACpDC,IACJH,EAAUG,E,CAKZ,OAAOH,CACR,EC1NDK,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\tsuper();\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\t\tif ( ! triggers ) {\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\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\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\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\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\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\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\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\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\t\tif ( '' === targetSelector ) {\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\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\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\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\t\t// If set, the context will be the closest target ancestor.\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\t\tif ( '' !== closestSelector ) {\n\t\t\tconst closestContext: HTMLElement | null = this.closest( closestSelector );\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":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@travelopia/web-components",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "description": "Accessible web components for the modern web",
   "files": [
     "dist"