@travelopia/web-components 0.6.6 → 0.6.8
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.
package/dist/declarations.d.ts
CHANGED
|
@@ -1055,5 +1055,92 @@ export class TPTabsElement extends HTMLElement {
|
|
|
1055
1055
|
* @param {string} tabId Tab ID.
|
|
1056
1056
|
*/
|
|
1057
1057
|
setCurrentTab(tabId?: string): void;
|
|
1058
|
+
/**
|
|
1059
|
+
* Get current nested tab.
|
|
1060
|
+
*
|
|
1061
|
+
* @param {string} currentTab Tab ID.
|
|
1062
|
+
*
|
|
1063
|
+
* @return {string} If has Nested current tab or empty.
|
|
1064
|
+
*/
|
|
1065
|
+
getCurrentNestedTab(currentTab?: string): string;
|
|
1066
|
+
}
|
|
1067
|
+
|
|
1068
|
+
/**
|
|
1069
|
+
* TP Toggle Attribute.
|
|
1070
|
+
*/
|
|
1071
|
+
export class TPToggleAttributeElement extends HTMLElement {
|
|
1072
|
+
/**
|
|
1073
|
+
* Constructor.
|
|
1074
|
+
*/
|
|
1075
|
+
constructor();
|
|
1076
|
+
/**
|
|
1077
|
+
* Update.
|
|
1078
|
+
*/
|
|
1079
|
+
update(): void;
|
|
1080
|
+
/**
|
|
1081
|
+
* Get event.
|
|
1082
|
+
*
|
|
1083
|
+
* @return {string} The event.
|
|
1084
|
+
*/
|
|
1085
|
+
getEvent(): string;
|
|
1086
|
+
/**
|
|
1087
|
+
* Trigger has fired the event.
|
|
1088
|
+
*
|
|
1089
|
+
* @param {HTMLElement} trigger Trigger element.
|
|
1090
|
+
* @param {string} value The value of the trigger.
|
|
1091
|
+
*/
|
|
1092
|
+
triggerFired(trigger: HTMLElement, value?: string | null): void;
|
|
1093
|
+
/**
|
|
1094
|
+
* Toggle target based on value set on this component.
|
|
1095
|
+
*
|
|
1096
|
+
* @param {string} value Trigger's value.
|
|
1097
|
+
*/
|
|
1098
|
+
toggleTargetBasedOnValueAttribute(value?: string): void;
|
|
1099
|
+
/**
|
|
1100
|
+
* Toggle group based on value set on trigger.
|
|
1101
|
+
*
|
|
1102
|
+
* @param {string} value Trigger's value.
|
|
1103
|
+
*/
|
|
1104
|
+
toggleTargetGroupBasedOnTriggerValue(value?: string): void;
|
|
1105
|
+
/**
|
|
1106
|
+
* Toggle group based on value set on trigger.
|
|
1107
|
+
*
|
|
1108
|
+
* @param {string} value Trigger's value.
|
|
1109
|
+
*/
|
|
1110
|
+
toggleTargetBasedOnTriggerValue(value?: string): void;
|
|
1111
|
+
/**
|
|
1112
|
+
* Toggle the target's value on or off.
|
|
1113
|
+
*
|
|
1114
|
+
* @param {string} type Either `on` or `off`.
|
|
1115
|
+
*/
|
|
1116
|
+
toggleTargetAttribute(type?: string): void;
|
|
1117
|
+
/**
|
|
1118
|
+
* Get target element.
|
|
1119
|
+
*/
|
|
1120
|
+
getTargetElement(): HTMLElement | null;
|
|
1121
|
+
/**
|
|
1122
|
+
* Get attribute name to toggle.
|
|
1123
|
+
*
|
|
1124
|
+
* @return {string} The attribute name.
|
|
1125
|
+
*/
|
|
1126
|
+
getAttributeName(): string;
|
|
1127
|
+
/**
|
|
1128
|
+
* Get attribute value once it is toggled.
|
|
1129
|
+
*
|
|
1130
|
+
* @return {string} The attribute value.
|
|
1131
|
+
*/
|
|
1132
|
+
getAttributeValue(): string;
|
|
1133
|
+
/**
|
|
1134
|
+
* Un-toggle the target's group.
|
|
1135
|
+
*/
|
|
1136
|
+
unToggleGroup(): void;
|
|
1137
|
+
/**
|
|
1138
|
+
* Get group elements.
|
|
1139
|
+
*/
|
|
1140
|
+
getGroupElements(): NodeListOf<HTMLElement> | null;
|
|
1141
|
+
/**
|
|
1142
|
+
* Get ancestor context.
|
|
1143
|
+
*/
|
|
1144
|
+
getAncestorContext(): Document | HTMLElement;
|
|
1058
1145
|
}
|
|
1059
1146
|
|
package/dist/tabs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{"use strict";class t extends HTMLElement{constructor(){super();const t=this.querySelector("a");null==t||t.addEventListener("click",this.handleLinkClick.bind(this))}handleLinkClick(t){var e;const
|
|
1
|
+
(()=>{"use strict";class t extends HTMLElement{constructor(){super();const t=this.querySelector("a");null==t||t.addEventListener("click",this.handleLinkClick.bind(this))}handleLinkClick(t){var e;const r=this.closest("tp-tabs"),s=this.querySelector("a"),n=null!==(e=null==s?void 0:s.getAttribute("href"))&&void 0!==e?e:"";r&&s&&""!==n&&("yes"!==r.getAttribute("update-url")&&t.preventDefault(),r.setAttribute("current-tab",n.replace("#","")))}isCurrentTab(t=""){const e=this.querySelector("a");return`#${t}`===(null==e?void 0:e.getAttribute("href"))}}class e extends HTMLElement{}class r extends HTMLElement{}class s extends HTMLElement{constructor(){super(),this.updateTabFromUrlHash(),window.addEventListener("hashchange",this.updateTabFromUrlHash.bind(this))}static get observedAttributes(){return["current-tab","update-url","overflow"]}attributeChangedCallback(t="",e="",r=""){e!==r&&(this.update(),"current-tab"===t&&this.dispatchEvent(new CustomEvent("change",{bubbles:!0})))}update(){var t;const e=null!==(t=this.getAttribute("current-tab"))&&void 0!==t?t:"";if(!this.querySelector(`tp-tabs-tab[id="${e}"]`))return;const r=this.getCurrentNestedTab(e),s=this.querySelectorAll("tp-tabs-nav-item");s&&s.forEach((t=>{t.isCurrentTab(e)||r&&t.isCurrentTab(r)?t.setAttribute("active","yes"):t.removeAttribute("active")}));const n=this.querySelectorAll("tp-tabs-tab");n&&n.forEach((t=>{e===t.getAttribute("id")||r&&r===t.getAttribute("id")?t.setAttribute("open","yes"):t.removeAttribute("open")}))}updateTabFromUrlHash(){"yes"===this.getAttribute("update-url")&&this.setCurrentTab()}setCurrentTab(t=""){""!==t&&this.setAttribute("current-tab",t);const e=window.location.hash;if(""!==e){const t=this.querySelector(`a[href="${e}"]`),r=null==t?void 0:t.closest("tp-tabs");null==r||r.setAttribute("current-tab",e.replace("#",""))}}getCurrentNestedTab(t=""){if(""===t)return"";const e=this.querySelector(`tp-tabs-tab[id="${t}"]`),r=null==e?void 0:e.querySelector("tp-tabs"),s=null==r?void 0:r.getAttribute("current-tab");return null!=s?s:""}}customElements.define("tp-tabs-nav-item",t),customElements.define("tp-tabs-nav",e),customElements.define("tp-tabs-tab",r),customElements.define("tp-tabs",s)})();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/tabs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dist/tabs/index.js","mappings":"mBAQO,MAAMA,UAA6BC,YAIzC,WAAAC,GACCC,QAEA,MAAMC,EAAiCC,KAAKC,cAAe,KAC3DF,SAAAA,EAAMG,iBAAkB,QAASF,KAAKG,gBAAgBC,KAAMJ,MAC7D,CASU,eAAAG,CAAiBE,G,MAC1B,MAAMC,EAA6BN,KAAKO,QAAS,WAC3CR,EAAiCC,KAAKC,cAAe,KACrDO,EAA6C,QAA5B,EAAAT,aAAI,EAAJA,EAAMU,aAAc,eAAQ,QAAI,GAEhDH,GAAUP,GAAQ,KAAOS,IAI3B,QAAUF,EAAKG,aAAc,eACjCJ,EAAEK,iBAGHJ,EAAKK,aAAc,cAAeH,EAAOI,QAAS,IAAK,KACxD,CASA,YAAAC,CAAcC,EAAqB,IAClC,MAAMf,EAAiCC,KAAKC,cAAe,KAC3D,MAAO,IAAKa,OAAkBf,aAAI,EAAJA,EAAMU,aAAc,QACnD,ECjDM,MAAMM,UAAyBnB,aCA/B,MAAMoB,UAAyBpB,aCO/B,MAAMqB,UAAsBrB,YAIlC,WAAAC,GACCC,QAEAE,KAAKkB,uBACLC,OAAOjB,iBAAkB,aAAcF,KAAKkB,qBAAqBd,KAAMJ,MACxE,CAOA,6BAAWoB,GACV,MAAO,CAAE,cAAe,aAAc,WACvC,CASA,wBAAAC,CAA0BC,EAAe,GAAIC,EAAmB,GAAIC,EAAmB,IACjFD,IAAaC,IAIlBxB,KAAKyB,SAEA,gBAAkBH,GACtBtB,KAAK0B,cAAe,IAAIC,YAAa,SAAU,CAAEC,SAAS,KAE5D,CAKA,MAAAH,G,MAEC,MAAMX,EAAuD,QAAlC,EAAAd,KAAKS,aAAc,sBAAe,QAAI,GAGjE,IAAOT,KAAKC,cAAe,mBAAoBa,OAC9C,OAID,MAAMe,
|
|
1
|
+
{"version":3,"file":"dist/tabs/index.js","mappings":"mBAQO,MAAMA,UAA6BC,YAIzC,WAAAC,GACCC,QAEA,MAAMC,EAAiCC,KAAKC,cAAe,KAC3DF,SAAAA,EAAMG,iBAAkB,QAASF,KAAKG,gBAAgBC,KAAMJ,MAC7D,CASU,eAAAG,CAAiBE,G,MAC1B,MAAMC,EAA6BN,KAAKO,QAAS,WAC3CR,EAAiCC,KAAKC,cAAe,KACrDO,EAA6C,QAA5B,EAAAT,aAAI,EAAJA,EAAMU,aAAc,eAAQ,QAAI,GAEhDH,GAAUP,GAAQ,KAAOS,IAI3B,QAAUF,EAAKG,aAAc,eACjCJ,EAAEK,iBAGHJ,EAAKK,aAAc,cAAeH,EAAOI,QAAS,IAAK,KACxD,CASA,YAAAC,CAAcC,EAAqB,IAClC,MAAMf,EAAiCC,KAAKC,cAAe,KAC3D,MAAO,IAAKa,OAAkBf,aAAI,EAAJA,EAAMU,aAAc,QACnD,ECjDM,MAAMM,UAAyBnB,aCA/B,MAAMoB,UAAyBpB,aCO/B,MAAMqB,UAAsBrB,YAIlC,WAAAC,GACCC,QAEAE,KAAKkB,uBACLC,OAAOjB,iBAAkB,aAAcF,KAAKkB,qBAAqBd,KAAMJ,MACxE,CAOA,6BAAWoB,GACV,MAAO,CAAE,cAAe,aAAc,WACvC,CASA,wBAAAC,CAA0BC,EAAe,GAAIC,EAAmB,GAAIC,EAAmB,IACjFD,IAAaC,IAIlBxB,KAAKyB,SAEA,gBAAkBH,GACtBtB,KAAK0B,cAAe,IAAIC,YAAa,SAAU,CAAEC,SAAS,KAE5D,CAKA,MAAAH,G,MAEC,MAAMX,EAAuD,QAAlC,EAAAd,KAAKS,aAAc,sBAAe,QAAI,GAGjE,IAAOT,KAAKC,cAAe,mBAAoBa,OAC9C,OAID,MAAMe,EAAmB7B,KAAK8B,oBAAqBhB,GAG7CiB,EAA6C/B,KAAKgC,iBAAkB,oBACrED,GACJA,EAASE,SAAWC,IACdA,EAAQrB,aAAcC,IAAkBe,GAAoBK,EAAQrB,aAAcgB,GACtFK,EAAQvB,aAAc,SAAU,OAEhCuB,EAAQC,gBAAiB,S,IAM5B,MAAM7B,EAAqCN,KAAKgC,iBAAkB,eAC7D1B,GACJA,EAAK2B,SAAWG,IACVtB,IAAesB,EAAI3B,aAAc,OAAYoB,GAAoBA,IAAqBO,EAAI3B,aAAc,MAC5G2B,EAAIzB,aAAc,OAAQ,OAE1ByB,EAAID,gBAAiB,O,GAIzB,CAKA,oBAAAjB,GACM,QAAUlB,KAAKS,aAAc,eAKlCT,KAAKqC,eACN,CAOA,aAAAA,CAAeC,EAAgB,IACzB,KAAOA,GACXtC,KAAKW,aAAc,cAAe2B,GAInC,MAAMC,EAAkBpB,OAAOqB,SAASC,KACxC,GAAK,KAAOF,EAAU,CACrB,MAAMG,EAAwC1C,KAAKC,cAAe,WAAYsC,OACxEzB,EAAa4B,aAAW,EAAXA,EAAanC,QAAS,WACzCO,SAAAA,EAAYH,aAAc,cAAe4B,EAAQ3B,QAAS,IAAK,I,CAEjE,CASA,mBAAAkB,CAAqBhB,EAAqB,IACzC,GAAK,KAAOA,EACX,MAAO,GAGR,MAAM6B,EAAoB3C,KAAKC,cAAe,mBAAoBa,OAC5D8B,EAA0BD,aAAiB,EAAjBA,EAAmB1C,cAAe,WAC5D4B,EAAmBe,aAAuB,EAAvBA,EAAyBnC,aAAc,eAEhE,OAAOoB,QAAAA,EAAoB,EAC5B,ECxHDgB,eAAeC,OAAQ,mBAAoBnD,GAC3CkD,eAAeC,OAAQ,cAAe/B,GACtC8B,eAAeC,OAAQ,cAAe9B,GACtC6B,eAAeC,OAAQ,UAAW7B,E","sources":["webpack://@travelopia/web-components/./src/tabs/tp-tabs-nav-item.ts","webpack://@travelopia/web-components/./src/tabs/tp-tabs-nav.ts","webpack://@travelopia/web-components/./src/tabs/tp-tabs-tab.ts","webpack://@travelopia/web-components/./src/tabs/tp-tabs.ts","webpack://@travelopia/web-components/./src/tabs/index.ts"],"sourcesContent":["/**\n * Internal dependencies.\n */\nimport { TPTabsElement } from './tp-tabs';\n\n/**\n * TP Tabs Nav Item Element.\n */\nexport class TPTabsNavItemElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\tconst link: HTMLAnchorElement | null = this.querySelector( 'a' );\n\t\tlink?.addEventListener( 'click', this.handleLinkClick.bind( this ) );\n\t}\n\n\t/**\n\t * Handle link click.\n\t *\n\t * @param {Event} e Click event.\n\t *\n\t * @protected\n\t */\n\tprotected handleLinkClick( e: Event ): void {\n\t\tconst tabs: TPTabsElement | null = this.closest( 'tp-tabs' );\n\t\tconst link: HTMLAnchorElement | null = this.querySelector( 'a' );\n\t\tconst anchor: string = link?.getAttribute( 'href' ) ?? '';\n\n\t\tif ( ! tabs || ! link || '' === anchor ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( 'yes' !== tabs.getAttribute( 'update-url' ) ) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\ttabs.setAttribute( 'current-tab', anchor.replace( '#', '' ) );\n\t}\n\n\t/**\n\t * Check if this component contains the link to the current tab.\n\t *\n\t * @param {string} currentTab Current tab ID.\n\t *\n\t * @return {boolean} Whether it is the current tab or not.\n\t */\n\tisCurrentTab( currentTab: string = '' ): boolean {\n\t\tconst link: HTMLAnchorElement | null = this.querySelector( 'a' );\n\t\treturn `#${ currentTab }` === link?.getAttribute( 'href' );\n\t}\n}\n","/**\n * TP Tabs Nav Element.\n */\nexport class TPTabsNavElement extends HTMLElement {\n}\n","/**\n * TP Tabs Tab Element.\n */\nexport class TPTabsTabElement extends HTMLElement {\n}\n","/**\n * Internal dependencies.\n */\n\nimport { TPTabsNavItemElement } from './tp-tabs-nav-item';\nimport { TPTabsTabElement } from './tp-tabs-tab';\n\n/**\n * TP Tabs.\n */\nexport class TPTabsElement extends HTMLElement {\n\t/**\n\t * Constructor.\n\t */\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.updateTabFromUrlHash();\n\t\twindow.addEventListener( 'hashchange', this.updateTabFromUrlHash.bind( this ) );\n\t}\n\n\t/**\n\t * Get observed attributes.\n\t *\n\t * @return {Array} List of observed attributes.\n\t */\n\tstatic get observedAttributes(): string[] {\n\t\treturn [ 'current-tab', 'update-url', 'overflow' ];\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 ( 'current-tab' === name ) {\n\t\t\tthis.dispatchEvent( new CustomEvent( 'change', { bubbles: true } ) );\n\t\t}\n\t}\n\n\t/**\n\t * Update this component.\n\t */\n\tupdate(): void {\n\t\t// Get current tab.\n\t\tconst currentTab: string = this.getAttribute( 'current-tab' ) ?? '';\n\n\t\t// Check if current tab exists.\n\t\tif ( ! this.querySelector( `tp-tabs-tab[id=\"${ currentTab }\"]` ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Get current nested tab if has.\n\t\tconst currentNestedTab = this.getCurrentNestedTab( currentTab );\n\n\t\t// Update nav items.\n\t\tconst navItems: NodeListOf<TPTabsNavItemElement> = this.querySelectorAll( 'tp-tabs-nav-item' );\n\t\tif ( navItems ) {\n\t\t\tnavItems.forEach( ( navItem: TPTabsNavItemElement ): void => {\n\t\t\t\tif ( navItem.isCurrentTab( currentTab ) || ( currentNestedTab && navItem.isCurrentTab( currentNestedTab ) ) ) {\n\t\t\t\t\tnavItem.setAttribute( 'active', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\tnavItem.removeAttribute( 'active' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\t// Update tabs.\n\t\tconst tabs: NodeListOf<TPTabsTabElement> = this.querySelectorAll( 'tp-tabs-tab' );\n\t\tif ( tabs ) {\n\t\t\ttabs.forEach( ( tab: TPTabsTabElement ): void => {\n\t\t\t\tif ( currentTab === tab.getAttribute( 'id' ) || ( currentNestedTab && currentNestedTab === tab.getAttribute( 'id' ) ) ) {\n\t\t\t\t\ttab.setAttribute( 'open', 'yes' );\n\t\t\t\t} else {\n\t\t\t\t\ttab.removeAttribute( 'open' );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}\n\n\t/**\n\t * Update tab from URL hash.\n\t */\n\tupdateTabFromUrlHash(): void {\n\t\tif ( 'yes' !== this.getAttribute( 'update-url' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set current assiociated tab.\n\t\tthis.setCurrentTab();\n\t}\n\n\t/**\n\t * Set current tab.\n\t *\n\t * @param {string} tabId Tab ID.\n\t */\n\tsetCurrentTab( tabId: string = '' ): void {\n\t\tif ( '' !== tabId ) {\n\t\t\tthis.setAttribute( 'current-tab', tabId );\n\t\t}\n\n\t\t// Set current tab based on current url hash.\n\t\tconst urlHash: string = window.location.hash;\n\t\tif ( '' !== urlHash ) {\n\t\t\tconst currentLink: HTMLAnchorElement | null = this.querySelector( `a[href=\"${ urlHash }\"]` );\n\t\t\tconst currentTab = currentLink?.closest( 'tp-tabs' );\n\t\t\tcurrentTab?.setAttribute( 'current-tab', urlHash.replace( '#', '' ) );\n\t\t}\n\t}\n\n\t/**\n\t * Get current nested tab.\n\t *\n\t * @param {string} currentTab Tab ID.\n\t *\n\t * @return {string} If has Nested current tab or empty.\n\t */\n\tgetCurrentNestedTab( currentTab: string = '' ): string {\n\t\tif ( '' === currentTab ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst currentTabElement = this.querySelector( `tp-tabs-tab[id=\"${ currentTab }\"]` );\n\t\tconst currentNestedTabElement = currentTabElement?.querySelector( 'tp-tabs' );\n\t\tconst currentNestedTab = currentNestedTabElement?.getAttribute( 'current-tab' );\n\n\t\treturn currentNestedTab ?? '';\n\t}\n}\n","/**\n * Styles.\n */\nimport './style.scss';\n\n/**\n * Components.\n */\nimport { TPTabsNavItemElement } from './tp-tabs-nav-item';\nimport { TPTabsNavElement } from './tp-tabs-nav';\nimport { TPTabsTabElement } from './tp-tabs-tab';\nimport { TPTabsElement } from './tp-tabs';\n\n/**\n * Register Components.\n */\n\ncustomElements.define( 'tp-tabs-nav-item', TPTabsNavItemElement );\ncustomElements.define( 'tp-tabs-nav', TPTabsNavElement );\ncustomElements.define( 'tp-tabs-tab', TPTabsTabElement );\ncustomElements.define( 'tp-tabs', TPTabsElement );\n"],"names":["TPTabsNavItemElement","HTMLElement","constructor","super","link","this","querySelector","addEventListener","handleLinkClick","bind","e","tabs","closest","anchor","getAttribute","preventDefault","setAttribute","replace","isCurrentTab","currentTab","TPTabsNavElement","TPTabsTabElement","TPTabsElement","updateTabFromUrlHash","window","observedAttributes","attributeChangedCallback","name","oldValue","newValue","update","dispatchEvent","CustomEvent","bubbles","currentNestedTab","getCurrentNestedTab","navItems","querySelectorAll","forEach","navItem","removeAttribute","tab","setCurrentTab","tabId","urlHash","location","hash","currentLink","currentTabElement","currentNestedTabElement","customElements","define"],"sourceRoot":""}
|
|
@@ -0,0 +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 > *",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)})();
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +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":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
tp-toggle-attribute{display:contents}
|