@travelopia/web-components 0.6.7 → 0.6.9
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,6 +1055,14 @@ 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;
|
|
1058
1066
|
}
|
|
1059
1067
|
|
|
1060
1068
|
/**
|
|
@@ -1069,12 +1077,6 @@ export class TPToggleAttributeElement extends HTMLElement {
|
|
|
1069
1077
|
* Update.
|
|
1070
1078
|
*/
|
|
1071
1079
|
update(): void;
|
|
1072
|
-
/**
|
|
1073
|
-
* Get event.
|
|
1074
|
-
*
|
|
1075
|
-
* @return {string} The event.
|
|
1076
|
-
*/
|
|
1077
|
-
getEvent(): string;
|
|
1078
1080
|
/**
|
|
1079
1081
|
* Trigger has fired the event.
|
|
1080
1082
|
*
|
|
@@ -1083,33 +1085,32 @@ export class TPToggleAttributeElement extends HTMLElement {
|
|
|
1083
1085
|
*/
|
|
1084
1086
|
triggerFired(trigger: HTMLElement, value?: string | null): void;
|
|
1085
1087
|
/**
|
|
1086
|
-
* Toggle target based on value set on this component.
|
|
1088
|
+
* Toggle target based on value attribute set on this component.
|
|
1087
1089
|
*
|
|
1088
1090
|
* @param {string} value Trigger's value.
|
|
1089
1091
|
*/
|
|
1090
|
-
|
|
1092
|
+
toggleByValueAttribute(value?: string): void;
|
|
1091
1093
|
/**
|
|
1092
|
-
* Toggle
|
|
1094
|
+
* Toggle target based on `data-toggle-value` set on target.
|
|
1093
1095
|
*
|
|
1094
1096
|
* @param {string} value Trigger's value.
|
|
1095
1097
|
*/
|
|
1096
|
-
|
|
1098
|
+
toggleByTargetDataValue(value?: string): void;
|
|
1097
1099
|
/**
|
|
1098
|
-
* Toggle
|
|
1099
|
-
*
|
|
1100
|
-
* @param {string} value Trigger's value.
|
|
1100
|
+
* Toggle the target without any value.
|
|
1101
1101
|
*/
|
|
1102
|
-
|
|
1102
|
+
toggleWithoutValue(): void;
|
|
1103
1103
|
/**
|
|
1104
1104
|
* Toggle the target's value on or off.
|
|
1105
1105
|
*
|
|
1106
|
-
* @param {
|
|
1106
|
+
* @param {HTMLElement} target The target element.
|
|
1107
|
+
* @param {string} type Either `on` or `off`.
|
|
1107
1108
|
*/
|
|
1108
|
-
toggleTargetAttribute(type?: string): void;
|
|
1109
|
+
toggleTargetAttribute(target?: HTMLElement | null, type?: string): void;
|
|
1109
1110
|
/**
|
|
1110
1111
|
* Get target element.
|
|
1111
1112
|
*/
|
|
1112
|
-
|
|
1113
|
+
getTargetElements(): NodeListOf<HTMLElement> | null;
|
|
1113
1114
|
/**
|
|
1114
1115
|
* Get attribute name to toggle.
|
|
1115
1116
|
*
|
|
@@ -1123,13 +1124,11 @@ export class TPToggleAttributeElement extends HTMLElement {
|
|
|
1123
1124
|
*/
|
|
1124
1125
|
getAttributeValue(): string;
|
|
1125
1126
|
/**
|
|
1126
|
-
*
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
/**
|
|
1130
|
-
* Get group elements.
|
|
1127
|
+
* Get event.
|
|
1128
|
+
*
|
|
1129
|
+
* @return {string} The event.
|
|
1131
1130
|
*/
|
|
1132
|
-
|
|
1131
|
+
getEvent(): string;
|
|
1133
1132
|
/**
|
|
1134
1133
|
* Get ancestor context.
|
|
1135
1134
|
*/
|
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":""}
|
|
@@ -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 > *",
|
|
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=""){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)})();
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +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":""}
|
|
1
|
+
{"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":""}
|