@everymatrix/general-footer-template 1.98.21 → 1.98.23

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.
Files changed (6) hide show
  1. package/dist/cjs/link-section-list.cjs.entry.js +11 -8
  2. package/dist/collection/components/link-section-list/link-section-list.css +3 -0
  3. package/dist/collection/components/link-section-list/link-section-list.js +10 -7
  4. package/dist/esm/link-section-list.entry.js +11 -8
  5. package/dist/general-footer-template/link-section-list.entry.js +1 -1
  6. package/package.json +1 -1
package/dist/cjs/link-section-list.cjs.entry.js CHANGED
@@ -14,7 +14,7 @@ const debounce = (func, delay) => {
14
14
  };
15
15
  };
16
16
 
17
- const linkSectionListCss = ":host {\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.SkeletonWrapper {\n width: 25px;\n height: 25px;\n}\n\n.LinkSectionListContainer {\n display: block;\n container-type: inline-size;\n}\n.LinkSectionListWrapper {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n grid-template-columns: 1fr;\n}\n.LinkSectionListTitle {\n font-weight: var(--emw--font-weight-semibold, 500);\n text-transform: uppercase;\n}\n.LinkSectionListDropdownHeader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n background: var(--emw--color-primary, #184026);\n color: var(--emw--color-typography, #FFFFFF);\n text-align: left;\n padding: 10px;\n border: none;\n border-radius: var(--emw--button-border-radius, 4px);\n margin-bottom: 3px;\n cursor: pointer;\n font-size: 1rem;\n}\n.LinkSectionListDropdownHeader:hover {\n color: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader:hover svg {\n fill: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader.IsOpen {\n color: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader.IsOpen svg {\n fill: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader .TriangleActive {\n transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n}\n.LinkSectionListDropdownHeader svg {\n fill: var(--emw--color-typography, #FFFFFF);\n margin-left: 8px;\n width: 16px;\n transform: rotate(-90deg);\n -webkit-transform: rotate(-90deg);\n}\n.LinkSectionListDropdownList {\n list-style: none;\n display: none;\n}\n.LinkSectionListDropdownList.open {\n display: flex;\n margin: 5px 0;\n}\n.LinkSectionListLink {\n font-weight: var(--emw--font-weight-light, 300);\n}\n\nul {\n width: fit-content;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: var(--emw--spacing-medium, 16px);\n padding-left: var(--emw--spacing-small-minus, 10px);\n font-size: var(--emw--font-size-small, 16px);\n text-transform: uppercase;\n}\nul li {\n list-style: disc;\n display: flex;\n align-items: center;\n position: relative;\n}\nul li .LinkSectionListLinkText {\n display: flex;\n gap: 5px;\n flex-direction: row;\n align-items: center;\n}\nul li .LinkSectionListLinkText span {\n text-align: center;\n cursor: pointer;\n}\n\na {\n color: inherit;\n}\n\n@container (min-width: 280px) {\n .LinkSectionListWrapper {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n@container (min-width: 650px) {\n .LinkSectionListWrapper {\n grid-gap: 2rem;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: 1fr;\n }\n}";
17
+ const linkSectionListCss = ":host {\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.SkeletonWrapper {\n width: 25px;\n height: 25px;\n}\n\n.LinkSectionListContainer {\n display: block;\n container-type: inline-size;\n}\n.LinkSectionListWrapper {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n grid-template-columns: 1fr;\n}\n.LinkSectionListTitle {\n font-weight: var(--emw--font-weight-semibold, 500);\n text-transform: uppercase;\n}\n.LinkSectionListDropdownHeader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n background: var(--emw--color-primary, #184026);\n color: var(--emw--color-typography, #FFFFFF);\n text-align: left;\n padding: 10px;\n border: none;\n border-radius: var(--emw--button-border-radius, 4px);\n margin-bottom: 3px;\n cursor: pointer;\n font-size: 1rem;\n}\n.LinkSectionListDropdownHeader:hover {\n color: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader:hover svg {\n fill: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader.IsOpen {\n color: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader.IsOpen svg {\n fill: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader .TriangleActive {\n transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n}\n.LinkSectionListDropdownHeader svg {\n fill: var(--emw--color-typography, #FFFFFF);\n margin-left: 8px;\n width: 16px;\n transform: rotate(-90deg);\n -webkit-transform: rotate(-90deg);\n}\n.LinkSectionListDropdownList {\n list-style: none;\n display: none;\n}\n.LinkSectionListDropdownList.open {\n display: flex;\n margin: 5px 0;\n}\n.LinkSectionListLink {\n font-weight: var(--emw--font-weight-light, 300);\n}\n\nul {\n width: fit-content;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: var(--emw--spacing-medium, 16px);\n padding-left: var(--emw--spacing-small-minus, 10px);\n font-size: var(--emw--font-size-small, 16px);\n text-transform: uppercase;\n}\nul li {\n list-style: disc;\n display: flex;\n align-items: center;\n position: relative;\n}\nul li .LinkSectionListLinkText {\n display: flex;\n gap: 5px;\n flex-direction: row;\n align-items: center;\n}\nul li .LinkSectionListLinkText span {\n text-align: center;\n cursor: pointer;\n}\n\na {\n color: inherit;\n}\na.LinkSectionListLink {\n text-decoration: none;\n}\n\n@container (min-width: 280px) {\n .LinkSectionListWrapper {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n@container (min-width: 650px) {\n .LinkSectionListWrapper {\n grid-gap: 2rem;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: 1fr;\n }\n}";
18
18
  const LinkSectionListStyle0 = linkSectionListCss;
19
19
 
20
20
  const LinkSectionList = class {
@@ -89,13 +89,16 @@ const LinkSectionList = class {
89
89
  }
90
90
  return obj;
91
91
  }, []);
92
- const renderLinkItems = (category) => category.links.map(link => index.h("li", { class: "LinkSectionListLink", key: link.linkName }, this.navigateViaEvent === true ? (index.h("span", null, link.linkName && link.icon ? (index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), index.h("span", { class: '' }, link.linkName, " "))) :
93
- link.linkName ?
94
- index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("span", null, link.linkName, " "))
95
- :
96
- index.h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }))))) : (index.h("a", { class: "LinkSectionListLink", href: this.createHrefLink(link), target: link.target || '_blank' }, link.linkName && link.icon ? (index.h("span", { class: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), index.h("span", null, link.linkName))) :
97
- link.linkName ? (index.h("span", { class: "LinkSectionListLinkText" }, index.h("span", null, link.linkName))) :
98
- index.h("span", { class: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))))));
92
+ const renderLinkItems = (category) => category.links.map(link => {
93
+ return index.h("li", { class: "LinkSectionListLink", key: link.linkName }, index.h("a", { class: "LinkSectionListLink", href: this.createHrefLink(link), target: link.target || '_blank', onClick: (e) => {
94
+ if (this.navigateViaEvent && e.button === 0 && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
95
+ e.preventDefault();
96
+ this.navigateLink(link);
97
+ }
98
+ }, rel: link.target === '_blank' || link.externalLink ? 'noopener noreferrer' : undefined }, link.linkName && link.icon ? (index.h("span", { class: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), index.h("span", null, link.linkName))) :
99
+ link.linkName ? (index.h("span", { class: "LinkSectionListLinkText" }, index.h("span", null, link.linkName))) :
100
+ index.h("span", { class: "LinkSectionListLinkText" }, index.h("div", { class: "ContainerImage" }, index.h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))));
101
+ });
99
102
  return index.h("div", { class: "LinkSectionListContainer" }, index.h("div", { class: `LinkSectionListWrapper ${this.accordionLinks ? (this.isMobile ? "is-mobile" : "is-desktop") : ""}` }, this.repeaterContent.categoryTitle && index.h("h2", { class: "LinkSectionListTitle" }, this.repeaterContent.categoryTitle), linkSections.map(category => this.accordionLinks ?
100
103
  (index.h("div", { class: "LinkSectionListDropdown" }, index.h("button", { type: 'button', class: `LinkSectionListDropdownHeader ${this.openCategory === category.categoryTitle ? 'IsOpen' : ''}`, onClick: () => this.toggleCategory(category.categoryTitle) }, category.categoryTitle, index.h("span", { class: this.isCategoryOpen(category.categoryTitle) ? 'TriangleActive' : 'TriangleInactive' }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "6.835", viewBox: "0 0 14 6.835" }, index.h("path", { id: "arrow", d: "M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z", transform: "translate(-274.511 -441.088)" })))), index.h("ul", { class: { 'LinkSectionListDropdownList': true, open: this.isCategoryOpen(category.categoryTitle) } }, renderLinkItems(category)))) : (index.h("ul", null, category.categoryTitle && index.h("p", null, category.categoryTitle), renderLinkItems(category))))));
101
104
  }
package/dist/collection/components/link-section-list/link-section-list.css CHANGED
@@ -103,6 +103,9 @@ ul li .LinkSectionListLinkText span {
103
103
  a {
104
104
  color: inherit;
105
105
  }
106
+ a.LinkSectionListLink {
107
+ text-decoration: none;
108
+ }
106
109
 
107
110
  @container (min-width: 280px) {
108
111
  .LinkSectionListWrapper {
package/dist/collection/components/link-section-list/link-section-list.js CHANGED
@@ -73,13 +73,16 @@ export class LinkSectionList {
73
73
  }
74
74
  return obj;
75
75
  }, []);
76
- const renderLinkItems = (category) => category.links.map(link => h("li", { class: "LinkSectionListLink", key: link.linkName }, this.navigateViaEvent === true ? (h("span", null, link.linkName && link.icon ? (h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), h("span", { class: '' }, link.linkName, " "))) :
77
- link.linkName ?
78
- h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("span", null, link.linkName, " "))
79
- :
80
- h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }))))) : (h("a", { class: "LinkSectionListLink", href: this.createHrefLink(link), target: link.target || '_blank' }, link.linkName && link.icon ? (h("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), h("span", null, link.linkName))) :
81
- link.linkName ? (h("span", { class: "LinkSectionListLinkText" }, h("span", null, link.linkName))) :
82
- h("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))))));
76
+ const renderLinkItems = (category) => category.links.map(link => {
77
+ return h("li", { class: "LinkSectionListLink", key: link.linkName }, h("a", { class: "LinkSectionListLink", href: this.createHrefLink(link), target: link.target || '_blank', onClick: (e) => {
78
+ if (this.navigateViaEvent && e.button === 0 && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
79
+ e.preventDefault();
80
+ this.navigateLink(link);
81
+ }
82
+ }, rel: link.target === '_blank' || link.externalLink ? 'noopener noreferrer' : undefined }, link.linkName && link.icon ? (h("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), h("span", null, link.linkName))) :
83
+ link.linkName ? (h("span", { class: "LinkSectionListLinkText" }, h("span", null, link.linkName))) :
84
+ h("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))));
85
+ });
83
86
  return h("div", { class: "LinkSectionListContainer" }, h("div", { class: `LinkSectionListWrapper ${this.accordionLinks ? (this.isMobile ? "is-mobile" : "is-desktop") : ""}` }, this.repeaterContent.categoryTitle && h("h2", { class: "LinkSectionListTitle" }, this.repeaterContent.categoryTitle), linkSections.map(category => this.accordionLinks ?
84
87
  (h("div", { class: "LinkSectionListDropdown" }, h("button", { type: 'button', class: `LinkSectionListDropdownHeader ${this.openCategory === category.categoryTitle ? 'IsOpen' : ''}`, onClick: () => this.toggleCategory(category.categoryTitle) }, category.categoryTitle, h("span", { class: this.isCategoryOpen(category.categoryTitle) ? 'TriangleActive' : 'TriangleInactive' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "6.835", viewBox: "0 0 14 6.835" }, h("path", { id: "arrow", d: "M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z", transform: "translate(-274.511 -441.088)" })))), h("ul", { class: { 'LinkSectionListDropdownList': true, open: this.isCategoryOpen(category.categoryTitle) } }, renderLinkItems(category)))) : (h("ul", null, category.categoryTitle && h("p", null, category.categoryTitle), renderLinkItems(category))))));
85
88
  }
package/dist/esm/link-section-list.entry.js CHANGED
@@ -10,7 +10,7 @@ const debounce = (func, delay) => {
10
10
  };
11
11
  };
12
12
 
13
- const linkSectionListCss = ":host {\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.SkeletonWrapper {\n width: 25px;\n height: 25px;\n}\n\n.LinkSectionListContainer {\n display: block;\n container-type: inline-size;\n}\n.LinkSectionListWrapper {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n grid-template-columns: 1fr;\n}\n.LinkSectionListTitle {\n font-weight: var(--emw--font-weight-semibold, 500);\n text-transform: uppercase;\n}\n.LinkSectionListDropdownHeader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n background: var(--emw--color-primary, #184026);\n color: var(--emw--color-typography, #FFFFFF);\n text-align: left;\n padding: 10px;\n border: none;\n border-radius: var(--emw--button-border-radius, 4px);\n margin-bottom: 3px;\n cursor: pointer;\n font-size: 1rem;\n}\n.LinkSectionListDropdownHeader:hover {\n color: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader:hover svg {\n fill: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader.IsOpen {\n color: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader.IsOpen svg {\n fill: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader .TriangleActive {\n transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n}\n.LinkSectionListDropdownHeader svg {\n fill: var(--emw--color-typography, #FFFFFF);\n margin-left: 8px;\n width: 16px;\n transform: rotate(-90deg);\n -webkit-transform: rotate(-90deg);\n}\n.LinkSectionListDropdownList {\n list-style: none;\n display: none;\n}\n.LinkSectionListDropdownList.open {\n display: flex;\n margin: 5px 0;\n}\n.LinkSectionListLink {\n font-weight: var(--emw--font-weight-light, 300);\n}\n\nul {\n width: fit-content;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: var(--emw--spacing-medium, 16px);\n padding-left: var(--emw--spacing-small-minus, 10px);\n font-size: var(--emw--font-size-small, 16px);\n text-transform: uppercase;\n}\nul li {\n list-style: disc;\n display: flex;\n align-items: center;\n position: relative;\n}\nul li .LinkSectionListLinkText {\n display: flex;\n gap: 5px;\n flex-direction: row;\n align-items: center;\n}\nul li .LinkSectionListLinkText span {\n text-align: center;\n cursor: pointer;\n}\n\na {\n color: inherit;\n}\n\n@container (min-width: 280px) {\n .LinkSectionListWrapper {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n@container (min-width: 650px) {\n .LinkSectionListWrapper {\n grid-gap: 2rem;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: 1fr;\n }\n}";
13
+ const linkSectionListCss = ":host {\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.SkeletonWrapper {\n width: 25px;\n height: 25px;\n}\n\n.LinkSectionListContainer {\n display: block;\n container-type: inline-size;\n}\n.LinkSectionListWrapper {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n grid-template-columns: 1fr;\n}\n.LinkSectionListTitle {\n font-weight: var(--emw--font-weight-semibold, 500);\n text-transform: uppercase;\n}\n.LinkSectionListDropdownHeader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n background: var(--emw--color-primary, #184026);\n color: var(--emw--color-typography, #FFFFFF);\n text-align: left;\n padding: 10px;\n border: none;\n border-radius: var(--emw--button-border-radius, 4px);\n margin-bottom: 3px;\n cursor: pointer;\n font-size: 1rem;\n}\n.LinkSectionListDropdownHeader:hover {\n color: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader:hover svg {\n fill: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader.IsOpen {\n color: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader.IsOpen svg {\n fill: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader .TriangleActive {\n transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n}\n.LinkSectionListDropdownHeader svg {\n fill: var(--emw--color-typography, #FFFFFF);\n margin-left: 8px;\n width: 16px;\n transform: rotate(-90deg);\n -webkit-transform: rotate(-90deg);\n}\n.LinkSectionListDropdownList {\n list-style: none;\n display: none;\n}\n.LinkSectionListDropdownList.open {\n display: flex;\n margin: 5px 0;\n}\n.LinkSectionListLink {\n font-weight: var(--emw--font-weight-light, 300);\n}\n\nul {\n width: fit-content;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: var(--emw--spacing-medium, 16px);\n padding-left: var(--emw--spacing-small-minus, 10px);\n font-size: var(--emw--font-size-small, 16px);\n text-transform: uppercase;\n}\nul li {\n list-style: disc;\n display: flex;\n align-items: center;\n position: relative;\n}\nul li .LinkSectionListLinkText {\n display: flex;\n gap: 5px;\n flex-direction: row;\n align-items: center;\n}\nul li .LinkSectionListLinkText span {\n text-align: center;\n cursor: pointer;\n}\n\na {\n color: inherit;\n}\na.LinkSectionListLink {\n text-decoration: none;\n}\n\n@container (min-width: 280px) {\n .LinkSectionListWrapper {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n@container (min-width: 650px) {\n .LinkSectionListWrapper {\n grid-gap: 2rem;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: 1fr;\n }\n}";
14
14
  const LinkSectionListStyle0 = linkSectionListCss;
15
15
 
16
16
  const LinkSectionList = class {
@@ -85,13 +85,16 @@ const LinkSectionList = class {
85
85
  }
86
86
  return obj;
87
87
  }, []);
88
- const renderLinkItems = (category) => category.links.map(link => h("li", { class: "LinkSectionListLink", key: link.linkName }, this.navigateViaEvent === true ? (h("span", null, link.linkName && link.icon ? (h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), h("span", { class: '' }, link.linkName, " "))) :
89
- link.linkName ?
90
- h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("span", null, link.linkName, " "))
91
- :
92
- h("span", { class: "LinkSectionListLinkText", onClick: () => this.navigateLink(link) }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" }))))) : (h("a", { class: "LinkSectionListLink", href: this.createHrefLink(link), target: link.target || '_blank' }, link.linkName && link.icon ? (h("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), h("span", null, link.linkName))) :
93
- link.linkName ? (h("span", { class: "LinkSectionListLinkText" }, h("span", null, link.linkName))) :
94
- h("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))))));
88
+ const renderLinkItems = (category) => category.links.map(link => {
89
+ return h("li", { class: "LinkSectionListLink", key: link.linkName }, h("a", { class: "LinkSectionListLink", href: this.createHrefLink(link), target: link.target || '_blank', onClick: (e) => {
90
+ if (this.navigateViaEvent && e.button === 0 && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
91
+ e.preventDefault();
92
+ this.navigateLink(link);
93
+ }
94
+ }, rel: link.target === '_blank' || link.externalLink ? 'noopener noreferrer' : undefined }, link.linkName && link.icon ? (h("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })), h("span", null, link.linkName))) :
95
+ link.linkName ? (h("span", { class: "LinkSectionListLinkText" }, h("span", null, link.linkName))) :
96
+ h("span", { class: "LinkSectionListLinkText" }, h("div", { class: "ContainerImage" }, h("ui-image", { class: "LinkSectionIcon", src: link.icon, alt: "icon" })))));
97
+ });
95
98
  return h("div", { class: "LinkSectionListContainer" }, h("div", { class: `LinkSectionListWrapper ${this.accordionLinks ? (this.isMobile ? "is-mobile" : "is-desktop") : ""}` }, this.repeaterContent.categoryTitle && h("h2", { class: "LinkSectionListTitle" }, this.repeaterContent.categoryTitle), linkSections.map(category => this.accordionLinks ?
96
99
  (h("div", { class: "LinkSectionListDropdown" }, h("button", { type: 'button', class: `LinkSectionListDropdownHeader ${this.openCategory === category.categoryTitle ? 'IsOpen' : ''}`, onClick: () => this.toggleCategory(category.categoryTitle) }, category.categoryTitle, h("span", { class: this.isCategoryOpen(category.categoryTitle) ? 'TriangleActive' : 'TriangleInactive' }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "6.835", viewBox: "0 0 14 6.835" }, h("path", { id: "arrow", d: "M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z", transform: "translate(-274.511 -441.088)" })))), h("ul", { class: { 'LinkSectionListDropdownList': true, open: this.isCategoryOpen(category.categoryTitle) } }, renderLinkItems(category)))) : (h("ul", null, category.categoryTitle && h("p", null, category.categoryTitle), renderLinkItems(category))))));
97
100
  }
package/dist/general-footer-template/link-section-list.entry.js CHANGED
@@ -1 +1 @@
1
- import{r as n,h as i}from"./index-2051e205.js";import{i as t}from"./utils-c4781120.js";const e=(n,i)=>function(...t){clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>{n.apply(this,t)}),i)},s=class{constructor(i){n(this,i),this.isMobile=!1,this.repeaterContent=void 0,this.baseUrl=void 0,this.language=void 0,this.navigateViaEvent=!1,this.postMessageEvent="",this.accordionLinks=!1,this.openCategory=null}componentWillLoad(){this.debouncedUpdateIsMobile=e((()=>{this.updateIsMobile()}),200),this.updateIsMobile()}onResize(){this.debouncedUpdateIsMobile()}updateIsMobile(){const n=t(),i=window.innerWidth<768;this.isMobile=n&&i}navigateLink(n){window.postMessage({type:this.postMessageEvent,path:n.linkUrl,url:n.linkUrl,target:n.target,externalLink:n.externalLink},window.location.href)}toggleCategory(n){this.isMobile&&(this.openCategory=this.openCategory===n?null:n)}isCategoryOpen(n){return!this.isMobile||this.openCategory===n}createHrefLink(n){return n.externalLink?n.linkUrl:`${this.baseUrl}/${this.language}${n.linkUrl}`}render(){var n,t;const e=null===(t=null===(n=this.repeaterContent)||void 0===n?void 0:n.content)||void 0===t?void 0:t.reduce(((n,i)=>{const t=i.linkCategory,e=i.image,s=n.find((n=>n.categoryTitle===t));return s?s.links.push({linkName:i.title,linkUrl:i.url,target:i.target,externalLink:i.isExternalLink,icon:e}):n.push({categoryTitle:t,links:[{linkName:i.title,linkUrl:i.url,target:i.target,externalLink:i.isExternalLink,icon:e}]}),n}),[]),s=n=>n.links.map((n=>i("li",{class:"LinkSectionListLink",key:n.linkName},!0===this.navigateViaEvent?i("span",null,n.linkName&&n.icon?i("span",{class:"LinkSectionListLinkText",onClick:()=>this.navigateLink(n)},i("div",{class:"ContainerImage"},i("ui-image",{class:"LinkSectionIcon",src:n.icon,alt:"icon"})),i("span",{class:""},n.linkName," ")):i("span",{class:"LinkSectionListLinkText",onClick:()=>this.navigateLink(n)},n.linkName?i("span",null,n.linkName," "):i("div",{class:"ContainerImage"},i("ui-image",{class:"LinkSectionIcon",src:n.icon,alt:"icon"})))):i("a",{class:"LinkSectionListLink",href:this.createHrefLink(n),target:n.target||"_blank"},n.linkName&&n.icon?i("span",{class:"LinkSectionListLinkText"},i("div",{class:"ContainerImage"},i("ui-image",{class:"LinkSectionIcon",src:n.icon,alt:"icon"})),i("span",null,n.linkName)):i("span",{class:"LinkSectionListLinkText"},n.linkName?i("span",null,n.linkName):i("div",{class:"ContainerImage"},i("ui-image",{class:"LinkSectionIcon",src:n.icon,alt:"icon"})))))));return i("div",{class:"LinkSectionListContainer"},i("div",{class:"LinkSectionListWrapper "+(this.accordionLinks?this.isMobile?"is-mobile":"is-desktop":"")},this.repeaterContent.categoryTitle&&i("h2",{class:"LinkSectionListTitle"},this.repeaterContent.categoryTitle),e.map((n=>this.accordionLinks?i("div",{class:"LinkSectionListDropdown"},i("button",{type:"button",class:"LinkSectionListDropdownHeader "+(this.openCategory===n.categoryTitle?"IsOpen":""),onClick:()=>this.toggleCategory(n.categoryTitle)},n.categoryTitle,i("span",{class:this.isCategoryOpen(n.categoryTitle)?"TriangleActive":"TriangleInactive"},i("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"6.835",viewBox:"0 0 14 6.835"},i("path",{id:"arrow",d:"M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z",transform:"translate(-274.511 -441.088)"})))),i("ul",{class:{LinkSectionListDropdownList:!0,open:this.isCategoryOpen(n.categoryTitle)}},s(n))):i("ul",null,n.categoryTitle&&i("p",null,n.categoryTitle),s(n))))))}};s.style=":host {\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.SkeletonWrapper {\n width: 25px;\n height: 25px;\n}\n\n.LinkSectionListContainer {\n display: block;\n container-type: inline-size;\n}\n.LinkSectionListWrapper {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n grid-template-columns: 1fr;\n}\n.LinkSectionListTitle {\n font-weight: var(--emw--font-weight-semibold, 500);\n text-transform: uppercase;\n}\n.LinkSectionListDropdownHeader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n background: var(--emw--color-primary, #184026);\n color: var(--emw--color-typography, #FFFFFF);\n text-align: left;\n padding: 10px;\n border: none;\n border-radius: var(--emw--button-border-radius, 4px);\n margin-bottom: 3px;\n cursor: pointer;\n font-size: 1rem;\n}\n.LinkSectionListDropdownHeader:hover {\n color: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader:hover svg {\n fill: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader.IsOpen {\n color: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader.IsOpen svg {\n fill: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader .TriangleActive {\n transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n}\n.LinkSectionListDropdownHeader svg {\n fill: var(--emw--color-typography, #FFFFFF);\n margin-left: 8px;\n width: 16px;\n transform: rotate(-90deg);\n -webkit-transform: rotate(-90deg);\n}\n.LinkSectionListDropdownList {\n list-style: none;\n display: none;\n}\n.LinkSectionListDropdownList.open {\n display: flex;\n margin: 5px 0;\n}\n.LinkSectionListLink {\n font-weight: var(--emw--font-weight-light, 300);\n}\n\nul {\n width: fit-content;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: var(--emw--spacing-medium, 16px);\n padding-left: var(--emw--spacing-small-minus, 10px);\n font-size: var(--emw--font-size-small, 16px);\n text-transform: uppercase;\n}\nul li {\n list-style: disc;\n display: flex;\n align-items: center;\n position: relative;\n}\nul li .LinkSectionListLinkText {\n display: flex;\n gap: 5px;\n flex-direction: row;\n align-items: center;\n}\nul li .LinkSectionListLinkText span {\n text-align: center;\n cursor: pointer;\n}\n\na {\n color: inherit;\n}\n\n@container (min-width: 280px) {\n .LinkSectionListWrapper {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n@container (min-width: 650px) {\n .LinkSectionListWrapper {\n grid-gap: 2rem;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: 1fr;\n }\n}";export{s as link_section_list}
1
+ import{r as n,h as i}from"./index-2051e205.js";import{i as t}from"./utils-c4781120.js";const e=(n,i)=>function(...t){clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>{n.apply(this,t)}),i)},o=class{constructor(i){n(this,i),this.isMobile=!1,this.repeaterContent=void 0,this.baseUrl=void 0,this.language=void 0,this.navigateViaEvent=!1,this.postMessageEvent="",this.accordionLinks=!1,this.openCategory=null}componentWillLoad(){this.debouncedUpdateIsMobile=e((()=>{this.updateIsMobile()}),200),this.updateIsMobile()}onResize(){this.debouncedUpdateIsMobile()}updateIsMobile(){const n=t(),i=window.innerWidth<768;this.isMobile=n&&i}navigateLink(n){window.postMessage({type:this.postMessageEvent,path:n.linkUrl,url:n.linkUrl,target:n.target,externalLink:n.externalLink},window.location.href)}toggleCategory(n){this.isMobile&&(this.openCategory=this.openCategory===n?null:n)}isCategoryOpen(n){return!this.isMobile||this.openCategory===n}createHrefLink(n){return n.externalLink?n.linkUrl:`${this.baseUrl}/${this.language}${n.linkUrl}`}render(){var n,t;const e=null===(t=null===(n=this.repeaterContent)||void 0===n?void 0:n.content)||void 0===t?void 0:t.reduce(((n,i)=>{const t=i.linkCategory,e=i.image,o=n.find((n=>n.categoryTitle===t));return o?o.links.push({linkName:i.title,linkUrl:i.url,target:i.target,externalLink:i.isExternalLink,icon:e}):n.push({categoryTitle:t,links:[{linkName:i.title,linkUrl:i.url,target:i.target,externalLink:i.isExternalLink,icon:e}]}),n}),[]),o=n=>n.links.map((n=>i("li",{class:"LinkSectionListLink",key:n.linkName},i("a",{class:"LinkSectionListLink",href:this.createHrefLink(n),target:n.target||"_blank",onClick:i=>{!this.navigateViaEvent||0!==i.button||i.ctrlKey||i.metaKey||i.shiftKey||(i.preventDefault(),this.navigateLink(n))},rel:"_blank"===n.target||n.externalLink?"noopener noreferrer":void 0},n.linkName&&n.icon?i("span",{class:"LinkSectionListLinkText"},i("div",{class:"ContainerImage"},i("ui-image",{class:"LinkSectionIcon",src:n.icon,alt:"icon"})),i("span",null,n.linkName)):i("span",{class:"LinkSectionListLinkText"},n.linkName?i("span",null,n.linkName):i("div",{class:"ContainerImage"},i("ui-image",{class:"LinkSectionIcon",src:n.icon,alt:"icon"})))))));return i("div",{class:"LinkSectionListContainer"},i("div",{class:"LinkSectionListWrapper "+(this.accordionLinks?this.isMobile?"is-mobile":"is-desktop":"")},this.repeaterContent.categoryTitle&&i("h2",{class:"LinkSectionListTitle"},this.repeaterContent.categoryTitle),e.map((n=>this.accordionLinks?i("div",{class:"LinkSectionListDropdown"},i("button",{type:"button",class:"LinkSectionListDropdownHeader "+(this.openCategory===n.categoryTitle?"IsOpen":""),onClick:()=>this.toggleCategory(n.categoryTitle)},n.categoryTitle,i("span",{class:this.isCategoryOpen(n.categoryTitle)?"TriangleActive":"TriangleInactive"},i("svg",{xmlns:"http://www.w3.org/2000/svg",width:"14",height:"6.835",viewBox:"0 0 14 6.835"},i("path",{id:"arrow",d:"M281.541,447.921a.488.488,0,0,0,.295-.122l6.5-5.851a.488.488,0,1,0-.65-.726l-6.176,5.556-6.176-5.556h0a.488.488,0,1,0-.65.726l6.5,5.851a.488.488,0,0,0,.355.122Z",transform:"translate(-274.511 -441.088)"})))),i("ul",{class:{LinkSectionListDropdownList:!0,open:this.isCategoryOpen(n.categoryTitle)}},o(n))):i("ul",null,n.categoryTitle&&i("p",null,n.categoryTitle),o(n))))))}};o.style=":host {\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.SkeletonWrapper {\n width: 25px;\n height: 25px;\n}\n\n.LinkSectionListContainer {\n display: block;\n container-type: inline-size;\n}\n.LinkSectionListWrapper {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n grid-template-columns: 1fr;\n}\n.LinkSectionListTitle {\n font-weight: var(--emw--font-weight-semibold, 500);\n text-transform: uppercase;\n}\n.LinkSectionListDropdownHeader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n background: var(--emw--color-primary, #184026);\n color: var(--emw--color-typography, #FFFFFF);\n text-align: left;\n padding: 10px;\n border: none;\n border-radius: var(--emw--button-border-radius, 4px);\n margin-bottom: 3px;\n cursor: pointer;\n font-size: 1rem;\n}\n.LinkSectionListDropdownHeader:hover {\n color: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader:hover svg {\n fill: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader.IsOpen {\n color: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader.IsOpen svg {\n fill: var(--emw--color-secondary, #52d004);\n}\n.LinkSectionListDropdownHeader .TriangleActive {\n transform: rotate(90deg);\n -webkit-transform: rotate(90deg);\n}\n.LinkSectionListDropdownHeader svg {\n fill: var(--emw--color-typography, #FFFFFF);\n margin-left: 8px;\n width: 16px;\n transform: rotate(-90deg);\n -webkit-transform: rotate(-90deg);\n}\n.LinkSectionListDropdownList {\n list-style: none;\n display: none;\n}\n.LinkSectionListDropdownList.open {\n display: flex;\n margin: 5px 0;\n}\n.LinkSectionListLink {\n font-weight: var(--emw--font-weight-light, 300);\n}\n\nul {\n width: fit-content;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: var(--emw--spacing-medium, 16px);\n padding-left: var(--emw--spacing-small-minus, 10px);\n font-size: var(--emw--font-size-small, 16px);\n text-transform: uppercase;\n}\nul li {\n list-style: disc;\n display: flex;\n align-items: center;\n position: relative;\n}\nul li .LinkSectionListLinkText {\n display: flex;\n gap: 5px;\n flex-direction: row;\n align-items: center;\n}\nul li .LinkSectionListLinkText span {\n text-align: center;\n cursor: pointer;\n}\n\na {\n color: inherit;\n}\na.LinkSectionListLink {\n text-decoration: none;\n}\n\n@container (min-width: 280px) {\n .LinkSectionListWrapper {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n@container (min-width: 650px) {\n .LinkSectionListWrapper {\n grid-gap: 2rem;\n grid-template-columns: repeat(4, 1fr);\n grid-template-rows: 1fr;\n }\n}";export{o as link_section_list}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/general-footer-template",
3
- "version": "1.98.21",
3
+ "version": "1.98.23",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",