-
- Custom dark band with custom broadcast variables
-
+
+
+
diff --git a/elements/pfe-cta/src/pfe-cta.html b/elements/pfe-cta/src/pfe-cta.html
index 26e58a523b..0b7e0777f4 100644
--- a/elements/pfe-cta/src/pfe-cta.html
+++ b/elements/pfe-cta/src/pfe-cta.html
@@ -1,13 +1,4 @@
- ${this.defaultStyle ? ` ` : ``}
+ ${this.isDefault ? ` ` : ``}
diff --git a/elements/pfe-cta/src/pfe-cta.js b/elements/pfe-cta/src/pfe-cta.js
index f8a54f1d43..c368ac3dbf 100644
--- a/elements/pfe-cta/src/pfe-cta.js
+++ b/elements/pfe-cta/src/pfe-cta.js
@@ -17,7 +17,7 @@ class PfeCta extends PFElement {
return "pfe-cta.json";
}
- get defaultStyle() {
+ get isDefault() {
return this.hasAttribute("pfe-priority") ? false : true;
}
@@ -26,10 +26,24 @@ class PfeCta extends PFElement {
return PFElement.PfeTypes.Content;
}
+ static get events() {
+ return {
+ select: `${this.tag}:select`
+ };
+ }
+
static get observedAttributes() {
return ["pfe-priority", "pfe-color", "pfe-variant"];
}
+ click(event) {
+ this.emitEvent(PfeCta.events.select, {
+ detail: Object.assign(this.data, {
+ originEvent: event
+ })
+ });
+ }
+
constructor() {
super(PfeCta);
this.cta = null;
@@ -37,6 +51,8 @@ class PfeCta extends PFElement {
this._init = this._init.bind(this);
this._focusHandler = this._focusHandler.bind(this);
this._blurHandler = this._blurHandler.bind(this);
+ this._clickHandler = this._clickHandler.bind(this);
+ this._keyupHandler = this._keyupHandler.bind(this);
}
connectedCallback() {
@@ -61,6 +77,8 @@ class PfeCta extends PFElement {
if (this.cta) {
this.cta.removeEventListener("focus", this._focusHandler);
this.cta.removeEventListener("blur", this._blurHandler);
+ this.cta.removeEventListener("click", this._clickHandler);
+ this.cta.removeEventListener("keyup", this._keyupHandler);
}
}
@@ -79,26 +97,24 @@ class PfeCta extends PFElement {
// Initialize the component
_init() {
- // Get the first child of the web component (light DOM)
- const firstChild = this.children[0];
const supportedTags = ["a", "button"]; // add input later
let supportedTag = false;
// If the first child does not exist or that child is not a supported tag
- if (firstChild) {
+ if (this.firstElementChild) {
supportedTags.forEach(tag => {
- if (firstChild.tagName.toLowerCase() === tag) {
+ if (this.firstElementChild.tagName.toLowerCase() === tag) {
supportedTag = true;
}
});
}
- if (!firstChild || !supportedTag) {
+ if (!this.firstElementChild || !supportedTag) {
console.warn(
`${PfeCta.tag}: The first child in the light DOM must be a supported call-to-action tag (
,