@travelopia/web-components 0.6.6 → 0.6.7

package/dist/declarations.d.ts

@@ -1057,3 +1057,82 @@ export class TPTabsElement extends HTMLElement {
     setCurrentTab(tabId?: string): void;
 }
 
+/**
+ * TP Toggle Attribute.
+ */
+export class TPToggleAttributeElement extends HTMLElement {
+    /**
+     * Constructor.
+     */
+    constructor();
+    /**
+     * Update.
+     */
+    update(): void;
+    /**
+     * Get event.
+     *
+     * @return {string} The event.
+     */
+    getEvent(): string;
+    /**
+     * Trigger has fired the event.
+     *
+     * @param {HTMLElement} trigger Trigger element.
+     * @param {string}      value   The value of the trigger.
+     */
+    triggerFired(trigger: HTMLElement, value?: string | null): void;
+    /**
+     * Toggle target based on value set on this component.
+     *
+     * @param {string} value Trigger's value.
+     */
+    toggleTargetBasedOnValueAttribute(value?: string): void;
+    /**
+     * Toggle group based on value set on trigger.
+     *
+     * @param {string} value Trigger's value.
+     */
+    toggleTargetGroupBasedOnTriggerValue(value?: string): void;
+    /**
+     * Toggle group based on value set on trigger.
+     *
+     * @param {string} value Trigger's value.
+     */
+    toggleTargetBasedOnTriggerValue(value?: string): void;
+    /**
+     * Toggle the target's value on or off.
+     *
+     * @param {string} type Either `on` or `off`.
+     */
+    toggleTargetAttribute(type?: string): void;
+    /**
+     * Get target element.
+     */
+    getTargetElement(): HTMLElement | null;
+    /**
+     * Get attribute name to toggle.
+     *
+     * @return {string} The attribute name.
+     */
+    getAttributeName(): string;
+    /**
+     * Get attribute value once it is toggled.
+     *
+     * @return {string} The attribute value.
+     */
+    getAttributeValue(): string;
+    /**
+     * Un-toggle the target's group.
+     */
+    unToggleGroup(): void;
+    /**
+     * Get group elements.
+     */
+    getGroupElements(): NodeListOf<HTMLElement> | null;
+    /**
+     * Get ancestor context.
+     */
+    getAncestorContext(): Document | HTMLElement;
+}
+

package/dist/toggle-attribute/index.js

@@ -0,0 +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)})();
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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":""}

package/dist/toggle-attribute/style.css

@@ -0,0 +1 @@
+tp-toggle-attribute{display:contents}

package/package.json

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