diff --git a/.gitignore b/.gitignore index b1668eb..2264825 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ keycloak.json .idea +node_modules diff --git a/README.md b/README.md new file mode 100644 index 0000000..7f13ec4 --- /dev/null +++ b/README.md @@ -0,0 +1,54 @@ +# arcade.redhat.com + +## Updating the site + +### Initial setup + +You'll need nodejs and npm installed, then: + +``` +npm install +npm start +``` + +### Editing content + +Page content is stored in `content.toml` and injected into `index-template.html` using the [squirrelly](https://squirrelly.js.org/) template engine. + +To update content on the site, open `content.toml` with your favorite text editor. + +After editing, run `npm run build` to rebuild index.html. Commit the changes (including the rebuilt index.html), and submit a PR. + +#### Hero content + +The `[site]` section contains top-level arcade.redhat.com content. + + +#### Adding/editing the games list + +The series of `[games.*]` sections contain content for each game listed on the arcade. The ordering of the games on arcade.redhat.com will match the ordering of the entries within `content.toml`. + +To add a new game, paste the following into `content.toml`, then edit the title, description, etc to reflect the information about the game being added. + +```toml +[games.name] +title = "Game Title" +play = "URL to play the game" +contribute = "URL to contribute to the game" +thumb = "URL to a thumbnail for the game" +description = """ +Multi-line description of the game. Can include HTML. +""" +``` + +Note, remember to replace the `name` in `[games.name]` with a shorthand or acronym for your game. See the other games' entries for examples. + +After editing, remember to run `npm run build` to rebuild index.html. + +#### Changing layout and styles + +The styles are in `styles.css`, which gets bundled with esbuild into `./build/styles.css`. The styles are fairly simple, so there's no need yet for a preprocessor. Most of the styles come from [PatternFly Elements](https://patternflyelements.com/). + +The layout is stored in `index-template.html`. During the build, the `content.toml` data gets injected into the template, and the result is written to `index.html`. Don't edit `index.html` directly. + + diff --git a/arcade.js b/arcade.js new file mode 100644 index 0000000..0a80963 --- /dev/null +++ b/arcade.js @@ -0,0 +1,5 @@ +import "@patternfly/pfe-cta"; +import "@patternfly/pfe-navigation"; +import "@patternfly/pfe-icon"; +import "@patternfly/pfe-card"; +import "@patternfly/pfe-band"; diff --git a/auth.js b/auth.js deleted file mode 100644 index 7c47a82..0000000 --- a/auth.js +++ /dev/null @@ -1,69 +0,0 @@ -const keycloak = new Keycloak(); - -window.kc = keycloak; - -keycloak.init().success(async function(authenticated) { - console.log(`[auth] initialized keycloak.js`); - - let name = localStorage.getItem("arcade-username"); - - let storedToken; - - try { - storedToken = JSON.parse(localStorage.getItem("arcade-token")); - } catch (e) { - console.error(`Couldn't decode stored token.`); - return; - } - - // if there's no stored token, and we aren't authenticated, log in - if (!storedToken && !authenticated) { - console.log(`[auth] no user token found; logging in`); - keycloak.login(); - } - - // if we're authenticated but the token hasn't been stored yet - if (authenticated && !storedToken) { - console.log(`[auth] logged in, storing user token`); - name = keycloak.tokenParsed.preferred_username || (keycloak.tokenParsed.email || "").replace(/@.*/, "") - localStorage.setItem("arcade-username", name); - localStorage.setItem("arcade-token", JSON.stringify(keycloak.tokenParsed)); - } - - if (name) { - // if the token is stored locally, retrieve it and copy the username into a - console.log(`[auth] passing username ${name} to PAE`); - if (name) { - document.querySelector("#username").innerText = `, ${name},`; - } - - document.body.removeAttribute("unauthenticated"); - console.log(`[auth] name cached, no need to auth`); - return; - } - - if (authenticated) { - - // if a redirectTo parameter exists, navigate to it - const url = new URL(location); - const redirectTo = url.searchParams.get("redirectTo"); - - if (redirectTo) { - console.log(`redirect requested, destination: ${redirectTo}`); - const redirectUrl = new URL(redirectTo, location.origin); - const sameOrigin = location.origin === redirectUrl.origin; - - if (sameOrigin) { - console.log(`redirect is valid, off we go`); - location.replace(redirectTo); - } - else { - console.error(`redirect is not same-origin, politely declining to redirect`); - } - } - - } - -}).error(function() { - console.log('failed to initialize'); -}); diff --git a/bash.jpg b/bash.jpg new file mode 100644 index 0000000..0a4a534 Binary files /dev/null and b/bash.jpg differ diff --git a/bash.png b/bash.png deleted file mode 100644 index 3896567..0000000 Binary files a/bash.png and /dev/null differ diff --git a/build.js b/build.js new file mode 100755 index 0000000..d0a44bf --- /dev/null +++ b/build.js @@ -0,0 +1,28 @@ +import sqrl from "squirrelly"; +import fs from "fs"; +import toml from "toml"; +import marked from "marked"; + +// don't auto-escpae HTML tags coming from content.toml +sqrl.defaultConfig.autoEscape = false; + +// load html template + +const html = fs.readFileSync("index-template.html"); + +// load and parse content.toml file + +const content = toml.parse(fs.readFileSync("content.toml", "utf8")); + +// apply markdown transformation to `description` fields in the content + +content.site.description = marked(content.site.description); +for (let game of Object.values(content.games)) { + game.description = marked(game.description); +} + +// inject content into template + +const output = sqrl.render(html.toString(), content, {useWith: true}); + +fs.writeFileSync("index.html", output); diff --git a/build/arcade.js b/build/arcade.js new file mode 100644 index 0000000..d13f732 --- /dev/null +++ b/build/arcade.js @@ -0,0 +1,98 @@ +(()=>{var z=Object.defineProperty;var k=Object.getOwnPropertySymbols;var S=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var x=(n,e,t)=>e in n?z(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,u=(n,e)=>{for(var t in e||(e={}))S.call(e,t)&&x(n,t,e[t]);if(k)for(var t of k(e))P.call(e,t)&&x(n,t,e[t]);return n};var w=()=>null;function A(){w("[reveal] elements ready, revealing the body"),window.document.body.removeAttribute("unresolved")}function L(n){w=n;let e=window.WebComponents,t=e&&window.WebComponents.ready;!e||t?y():window.addEventListener("WebComponentsReady",y)}function y(){w("[reveal] web components ready"),A()}function E(n){return[String,Number,Boolean].includes(n.type||String)}function $(n){return n.hasOwnProperty("default")&&n.default.constructor===n.type}Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{value:function(n,e){if(this==null)throw new TypeError('"this" is null or not defined');var t=Object(this),r=t.length>>>0;if(r===0)return!1;var a=e|0,o=Math.max(a>=0?a:r-Math.abs(a),0);function i(s,l){return s===l||typeof s=="number"&&typeof l=="number"&&isNaN(s)&&isNaN(l)}for(;o0?e|0:0;return this.substring(t,t+n.length)===n}});Element.prototype.closest||(Element.prototype.closest=function(n){var e=this;do{if(e.matches(n))return e;e=e.parentElement||e.parentNode}while(e!==null&&e.nodeType===1);return null});Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector);var h="pfe",c=class extends HTMLElement{static debugLog(e=null){if(e!==null)try{localStorage.pfeLog=!!e}catch(t){return c._debugLog=!!e,c._debugLog}return localStorage.pfeLog==="true"||c._debugLog}static trackPerformance(e=null){return e!==null&&(c._trackPerformance=!!e),c._trackPerformance}static get config(){return window.PfeConfig||{}}static log(...e){c.debugLog()&&console.log(...e)}log(...e){c.log(`[${this.tag}${this.id?`#${this.id}`:""}]`,...e)}static warn(...e){console.warn(...e)}warn(...e){c.warn(`[${this.tag}${this.id?`#${this.id}`:""}]`,...e)}static error(...e){throw new Error([...e].join(" "))}error(...e){c.error(`[${this.tag}${this.id?`#${this.id}`:""}]`,...e)}static get PfeTypes(){return{Container:"container",Content:"content",Combo:"combo"}}static get version(){return"1.9.3"}get version(){return this._pfeClass.version}static get properties(){return{pfelement:{title:"Upgraded flag",type:Boolean,default:!0,observer:"_upgradeObserver"},on:{title:"Context",description:"Describes the visual context (backgrounds).",type:String,values:["light","dark","saturated"],default:e=>e.contextVariable,observer:"_onObserver"},context:{title:"Context hook",description:"Lets you override the system-set context.",type:String,values:["light","dark","saturated"],observer:"_contextObserver"},oldTheme:{type:String,values:["light","dark","saturated"],alias:"context",attr:"pfe-theme"},_style:{title:"Custom styles",type:String,attr:"style",observer:"_inlineStyleObserver"},type:{title:"Component type",type:String,values:["container","content","combo"]}}}static get observedAttributes(){let e=this.allProperties;if(e)return[...Object.keys(e).filter(r=>e[r].observer||e[r].cascade||e[r].alias).map(r=>this._convertPropNameToAttrName(r))]}get randomId(){return`${h}-`+Math.random().toString(36).substr(2,9)}set contextVariable(e){this.cssVariable("context",e)}get contextVariable(){return this.cssVariable("context")||this.cssVariable("theme")}hasLightDOM(){return this.children.length||this.textContent.trim().length}hasSlot(e){if(!e){this.warn("Please provide at least one slot name for which to search.");return}switch(typeof e){case"string":return[...this.children].filter(t=>t.hasAttribute("slot")&&t.getAttribute("slot")===e).length>0;case"array":return e.reduce(t=>[...this.children].filter(r=>r.hasAttribute("slot")&&r.getAttribute("slot")===t).length>0);default:this.warn("Did not recognize the type of the name provided to hasSlot; this funciton can accept a string or an array.");return}}getSlot(e="unassigned"){return e!=="unassigned"?[...this.children].filter(t=>t.hasAttribute("slot")&&t.getAttribute("slot")===e):[...this.children].filter(t=>!t.hasAttribute("slot"))}cssVariable(e,t,r=this){return e=e.substr(0,2)!=="--"?"--"+e:e,t?(r.style.setProperty(e,t),t):window.getComputedStyle(r).getPropertyValue(e).trim()||null}contextUpdate(){let e=[...this.querySelectorAll("*")].filter(a=>a.tagName.toLowerCase().slice(0,4)===`${h}-`).filter(a=>{if(a.parentElement)return a.parentElement.closest(`[${this._pfeClass._getCache("prop2attr").pfelement}]`)===this}),t=[...this.shadowRoot.querySelectorAll("*")].filter(a=>a.tagName.toLowerCase().slice(0,4)===`${h}-`).filter(a=>a.parentElement&&a.parentElement.closest(`[${this._pfeClass._getCache("prop2attr").pfelement}]`)?a.parentElement.closest(`[${this._pfeClass._getCache("prop2attr").pfelement}]`)===this:a.getRootNode().host===this),r=e.concat(t);r.length!==0&&r.map(a=>{this.log(`Update context of ${a.tagName.toLowerCase()}`),Promise.all([customElements.whenDefined(a.tagName.toLowerCase())]).then(()=>{a.resetContext(this.on)})})}resetContext(e){if(this.isIE11)return;let t=this.context||this.contextVariable||e;this.on===t||!this.on&&!t||(this.log(`Resetting context from ${this.on} to ${t||"null"}`),this.on=t)}constructor(e,{type:t=null,delayRender:r=!1}={}){super();this._pfeClass=e,this.tag=e.tag,this._parseObserver=this._parseObserver.bind(this),this.isIE11=/MSIE|Trident|Edge\//.test(window.navigator.userAgent),this.id?this.id.startsWith("pfe-")&&!this.id.startsWith(this.tag)?this._markId=this.id.replace("pfe",this.tag):this._markId=`${this.tag}-${this.id}`:this._markId=this.randomId.replace("pfe",this.tag),this._markCount=0,this.schemaProps=e.schemaProperties,this.slots=e.slots,this.template=document.createElement("template"),t&&this._pfeClass.allProperties.type&&(this._pfeClass.allProperties.type.default=t),this._initializeProperties(),this.attachShadow({mode:"open"}),this._rendered=!1,r||this.render()}connectedCallback(){this._initializeAttributeDefaults(),window.ShadyCSS&&window.ShadyCSS.styleElement(this),typeof this.slots=="object"&&(this._slotsObserver=new MutationObserver(()=>this._initializeSlots(this.tag,this.slots)),this._initializeSlots(this.tag,this.slots))}disconnectedCallback(){this._cascadeObserver&&this._cascadeObserver.disconnect(),this._slotsObserver&&this._slotsObserver.disconnect()}attributeChangedCallback(e,t,r){if(!this._pfeClass.allProperties)return;let a=this._pfeClass._attr2prop(e),o=this._pfeClass.allProperties[a];if(o){if(o.alias){let i=this._pfeClass.allProperties[o.alias],s=this._pfeClass._prop2attr(o.alias);this.getAttribute(s)!==r&&(this[o.alias]=this._castPropertyValue(i,r))}o.observer&&this[o.observer](this._castPropertyValue(o,t),this._castPropertyValue(o,r)),o.cascade&&this._copyAttribute(e,this._pfeClass._convertSelectorsToArray(o.cascade))}}render(){if(this.shadowRoot.innerHTML="",this.template.innerHTML=this.html,window.ShadyCSS&&window.ShadyCSS.prepareTemplate(this.template,this.tag),this.shadowRoot.appendChild(this.template.content.cloneNode(!0)),this.log("render"),this.cascadeProperties(),this.contextUpdate(),c.trackPerformance())try{performance.mark(`${this._markId}-rendered`),this._markCount<1&&(this._markCount=this._markCount+1,performance.measure(`${this._markId}-from-navigation-to-first-render`,void 0,`${this._markId}-rendered`),performance.measure(`${this._markId}-from-defined-to-first-render`,`${this._markId}-defined`,`${this._markId}-rendered`))}catch(e){this.log("Performance marks are not supported by this browser.")}typeof this.slots=="object"&&this._slotsObserver&&this._slotsObserver.observe(this,{childList:!0}),this._cascadeObserver&&this._cascadeObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this._rendered=!0}emitEvent(e,{bubbles:t=!0,cancelable:r=!1,composed:a=!0,detail:o={}}={}){o?this.log(`Custom event: ${e}`,o):this.log(`Custom event: ${e}`),this.dispatchEvent(new CustomEvent(e,{bubbles:t,cancelable:r,composed:a,detail:o}))}cascadeProperties(e){let t=this._pfeClass._getCache("cascadingProperties");if(t){this._cascadeObserver&&this._cascadeObserver.disconnect();let r=Object.keys(t);if(e&&(r=[],[...e].forEach(a=>{Object.keys(t).map(o=>{a.matches&&a.matches(o)&&r.push(o)})})),r){let a=r.filter(o=>o.slice(0,h.length+1)===`${h}-`).map(o=>customElements.whenDefined(o));a?Promise.all(a).then(()=>{this._copyAttributes(r,t)}):this._copyAttributes(r,t)}this._rendered&&this._cascadeObserver&&this._cascadeObserver.observe(this,{attributes:!0,childList:!0,subtree:!0})}}_upgradeObserver(){this.classList.add("PFElement")}_contextObserver(e,t){t&&(e&&e!==t||!e)&&(this.log("Running the context observer"),this.on=t,this.cssVariable("context",t))}_onObserver(e,t){(e&&e!==t||t&&!e)&&(this.log("Context update"),this.contextUpdate())}_inlineStyleObserver(e,t){if(e!==t)if(!t)this.resetContext();else{this.log(`Style observer activated on ${this.tag}`,`${t||"null"}`);let a=/--[\w|-]*(?:context|theme):\s*(?:\"*(light|dark|saturated)\"*)/gi.exec(t);if(!a)return;let o=a[1];o!==this.on&&!this.context&&(this.on=o)}}_parseObserver(e){for(let t of e)t.type==="childList"&&t.addedNodes.length&&this.cascadeProperties(t.addedNodes)}static _validateProperties(){for(let e in this.allProperties){let t=this.allProperties[e];E(t)||this.error(`Property "${e}" on ${this.name} must have type String, Number, or Boolean.`),/^[a-z_]/.test(e)||this.error(`Property ${this.name}.${e} defined, but prop names must begin with a lower-case letter or an underscore`);let r=typeof t.default=="function";t.default&&!$(t)&&!r&&this.error(`[${this.name}] The default value \`${t.default}\` does not match the assigned type ${t.type.name} for the '${e}' property`)}}_castPropertyValue(e,t){switch(e.type){case Number:return{[t]:Number(t),null:null,NaN:NaN,undefined:void 0}[t];case Boolean:return t!==null;case String:return{[t]:t,undefined:void 0}[t];default:return t}}_assignValueToAttribute(e,t,r){let a=e.type===Boolean&&!r,o=r===null,i=typeof r=="undefined";a||o||i?this.removeAttribute(t):e.type===Boolean&&typeof r=="boolean"?this.setAttribute(t,""):(e.values&&this._validateAttributeValue(e,t,r),this.setAttribute(t,r))}_initializeSlots(e,t){this.log("Validate slots..."),this._slotsObserver&&this._slotsObserver.disconnect(),Object.keys(t).forEach(r=>{let a=t[r];if(typeof a=="object"){let o=!1,i=[];a.namedSlot?(i=this.getSlot(`${e}--${r}`),i.length>0&&(a.nodes=i,o=!0),i=this.getSlot(`${r}`),i.length>0&&(a.nodes=i,o=!0)):(i=[...this.children].filter(s=>!s.hasAttribute("slot")),i.length>0&&(a.nodes=i,o=!0)),o?this.setAttribute(`has_${r}`,""):this.removeAttribute(`has_${r}`)}}),this.log("Slots validated."),this._slotsObserver&&this._slotsObserver.observe(this,{childList:!0})}_initializeProperties(){let e=this._pfeClass.allProperties,t=!1;Object.keys(e).length>0&&this.log("Initialize properties");for(let r in e){let a=e[r];if(typeof this[r]!="undefined")this.log(`Property "${r}" on ${this.constructor.name} cannot be defined because the property name is reserved`);else{let o=this._pfeClass._prop2attr(r);a.cascade&&(t=!0),Object.defineProperty(this,r,{get:()=>{let i=this.getAttribute(o);return this._castPropertyValue(a,i)},set:i=>(this._assignValueToAttribute(a,o,i),i),writeable:!0,enumerable:!0,configurable:!1})}}t&&(this._cascadeObserver=new MutationObserver(this._parseObserver))}_initializeAttributeDefaults(){let e=this._pfeClass.allProperties;for(let t in e){let r=e[t],a=this._pfeClass._prop2attr(t);if(r.hasOwnProperty("default")){let o=r.default;typeof r.default=="function"&&(o=r.default(this)),this.hasAttribute(a)||this._assignValueToAttribute(r,a,o)}}}_validateAttributeValue(e,t,r){return Array.isArray(e.values)&&e.values.length>0&&!e.values.includes(r)&&this.warn(`${r} is not a valid value for ${t}. Please provide one of the following values: ${e.values.join(", ")}`),r}static _prop2attr(e){return this._getCache("prop2attr")[e]}static _attr2prop(e){return this._getCache("attr2prop")[e]}static _convertPropNameToAttrName(e){let t=this.allProperties[e];return t.attr?t.attr:e.replace(/^_/,"").replace(/^[A-Z]/,r=>r.toLowerCase()).replace(/[A-Z]/g,r=>`-${r.toLowerCase()}`)}static _convertAttrNameToPropName(e){for(let r in this.allProperties)if(this.allProperties[r].attr===e)return r;return e.replace(/-([A-Za-z])/g,r=>r[1].toUpperCase())}_copyAttributes(e,t){e.forEach(r=>{t[r].forEach(a=>{this._copyAttribute(a,r)})})}_copyAttribute(e,t){let r=[...this.querySelectorAll(t),...this.shadowRoot.querySelectorAll(t)],a=this.getAttribute(e),o=a==null?"removeAttribute":"setAttribute";for(let i of r)i[o](e,a)}static _convertSelectorsToArray(e){if(e){if(typeof e=="string")return e.split(",");if(typeof e=="object")return e;this.warn(`selectors should be provided as a string, array, or object; received: ${typeof e}.`)}}static _parsePropertiesForCascade(e){let t={};for(let[r,a]of Object.entries(e)){let o=this._convertSelectorsToArray(a.cascade);o&&o.map(i=>{let s=this._prop2attr(r);t[i]?t[i].push(s):t[i]=[s]})}return t}static create(e){if(e._createCache(),e._populateCache(e),e._validateProperties(),window.customElements.define(e.tag,e),c.trackPerformance())try{performance.mark(`${this._markId}-defined`)}catch(t){this.log("Performance marks are not supported by this browser.")}}static _createCache(){this._cache={properties:{},globalProperties:{},componentProperties:{},cascadingProperties:{},attr2prop:{},prop2attr:{}}}static _setCache(e,t){this._cache[e]=t}static _getCache(e){return e?this._cache[e]:this._cache}static _populateCache(e){let t=u(u({},e.properties),c.properties);e._setCache("componentProperties",e.properties),e._setCache("globalProperties",c.properties),e._setCache("properties",t);let r={},a={};for(let i in t){let s=this._convertPropNameToAttrName(i);r[i]=s,a[s]=i}e._setCache("attr2prop",a),e._setCache("prop2attr",r);let o=this._parsePropertiesForCascade(t);Object.keys(o)&&e._setCache("cascadingProperties",o)}static get allProperties(){return this._getCache("properties")}static get cascadingProperties(){return this._getCache("cascadingProperties")}};L(c.log);var d=c;typeof Object.assign!="function"&&Object.defineProperty(Object,"assign",{value:function(e,t){if(e==null)throw new TypeError("Cannot convert undefined or null to object");for(var r=Object(e),a=1;a.pfe-cta--wrapper button,.pfe-cta--wrapper input,::slotted(button),::slotted(input){background-color:transparent;border:none;margin:0;padding:0;text-align:left}:host{display:inline-block;position:relative;z-index:0;vertical-align:middle;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content;max-width:var(--pfe-cta--MaxWidth,-webkit-max-content);max-width:var(--pfe-cta--MaxWidth,-moz-max-content);max-width:var(--pfe-cta--MaxWidth,max-content);background-color:transparent;background-color:var(--pfe-cta--BackgroundColor,transparent);border-radius:0;border-radius:var(--pfe-cta--BorderRadius,0);border:1px solid transparent;border:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-cta--BorderColor,transparent);cursor:pointer}::slotted(*){white-space:normal;display:inline;padding:.6rem 0!important;padding:var(--pfe-cta--Padding,.6rem 0)!important;color:#06c!important;color:var(--pfe-cta--Color,var(--pfe-broadcasted--link,#06c))!important;font-family:"Red Hat Display",RedHatDisplay,Overpass,Overpass,Arial,sans-serif;font-family:var(--pfe-cta--FontFamily, var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif));font-size:1.125rem;font-size:var(--pfe-cta--FontSize,var(--pf-global--FontSize--lg,1.125rem));font-weight:700;font-weight:var(--pfe-cta--FontWeight,var(--pfe-theme--font-weight--bold,700));line-height:1.5;line-height:var(--pfe-cta--LineHeight,var(--pfe-theme--line-height,1.5));text-decoration:none!important;-webkit-text-decoration:var(--pfe-cta--TextDecoration,none)!important;text-decoration:var(--pfe-cta--TextDecoration,none)!important}:host([priority]) ::slotted(*){font-size:1rem;font-size:var(--pfe-cta--FontSize--priority,var(--pf-global--FontSize--md,1rem));text-align:center}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([priority]) ::slotted(*) a{color:#06c!important;color:var(--pfe-cta--Color,var(--pfe-broadcasted--link,#06c))!important}}:host([aria-disabled=true]) ::slotted(*){cursor:default!important;font-size:1rem;font-size:var(--pfe-cta--FontSize,var(--pf-global--FontSize--md,1rem))}:host([aria-disabled=true]) ::slotted(*),:host([priority]) ::slotted(*){padding:1rem calc(1rem * 2)!important;padding:var(--pfe-cta--Padding,var(--pfe-theme--container-padding,1rem) calc(var(--pfe-theme--container-padding,1rem) * 2))!important}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([aria-disabled=true]) ::slotted(*),:host([priority]) ::slotted(*){padding:1rem 2rem!important}}:host(:not([aria-disabled=true])) ::slotted(:focus),:host(:not([aria-disabled=true]).focus-within),:host(:not([aria-disabled=true]).focus-within) ::slotted(*),:host(:not([aria-disabled=true]):focus){outline:0!important}.pfe-cta--wrapper{display:block;white-space:nowrap;min-width:100%}:host([aria-disabled=true]) .pfe-cta--wrapper,:host([priority]) .pfe-cta--wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:100%}@media all and (min--moz-device-pixel-ratio:0){:host(:not([priority]):not([aria-disabled=true])) .pfe-cta--wrapper{max-width:calc(100% - 1ch - 13px);max-width:calc(100% - 1ch - var(--pfe-cta__arrow--size,13px))}}.pfe-cta--inner{display:block;height:calc(100% - 4px);width:calc(100% - 4px);-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;top:2px;left:2px;z-index:-1;border:1px solid transparent;border:var(--pfe-theme--surface--border-width,1px) var(--pfe-theme--surface--border-style,solid) var(--pfe-cta__inner--BorderColor,transparent);border-radius:2px;outline:0}.pfe-cta--arrow{display:inline;display:var(--pfe-cta__arrow--Display,inline);padding:0 3px;padding:var(--pfe-cta__arrow--Padding,0 3px);fill:#06c;fill:var(--pfe-cta--Color,var(--pfe-broadcasted--link,#06c));width:13px;width:var(--pfe-cta__arrow--size,13px);height:13px;height:var(--pfe-cta__arrow--size,13px);-webkit-transition:padding .3s cubic-bezier(.465,.183,.153,.946);transition:padding .3s cubic-bezier(.465,.183,.153,.946);-webkit-transition:padding var(--pfe-theme--animation-speed,.3s) var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));transition:padding var(--pfe-theme--animation-speed,.3s) var(--pfe-theme--animation-timing,cubic-bezier(.465,.183,.153,.946));margin-bottom:-1px}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.pfe-cta--arrow{width:18px}}@supports (-ms-ime-align:auto){.pfe-cta--arrow{width:18px}}:host([priority]) svg{display:none}:host([priority=primary]){--pfe-cta--BorderRadius:var(--pfe-theme--ui--border-radius, 2px);--pfe-cta--BackgroundColor:var(--pfe-theme--color--ui-accent, #06c);--pfe-cta--BorderColor:var(--pfe-theme--color--ui-accent, #06c);--pfe-cta--Color:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta--BackgroundColor--hover:var(--pfe-theme--color--ui-accent--hover, #004080);--pfe-cta--BorderColor--hover:var(--pfe-theme--color--ui-accent--hover, #004080);--pfe-cta--Color--hover:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta--BackgroundColor--focus:var(--pfe-theme--color--ui-accent, #06c);--pfe-cta--BorderColor--focus:var(--pfe-theme--color--ui-accent, #06c);--pfe-cta--Color--focus:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta__arrow--Display:none;--pfe-cta__inner--BorderColor--focus:var(--pfe-theme--color--ui-accent--text, #fff)}:host([priority=secondary]){--pfe-cta--BorderRadius:var(--pfe-theme--ui--border-radius, 2px);--pfe-cta--BackgroundColor:transparent;--pfe-cta--BorderColor:var(--pfe-broadcasted--text, #3c3f42);--pfe-cta--Color:var(--pfe-broadcasted--text, #3c3f42);--pfe-cta--BackgroundColor--hover:var(--pfe-broadcasted--text, #3c3f42);--pfe-cta--BorderColor--hover:var(--pfe-broadcasted--text, #3c3f42);--pfe-cta--Color--hover:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--BackgroundColor--focus:var(--pfe-theme--color--surface--lighter, #f0f0f0);--pfe-cta--BorderColor--focus:var(--pfe-theme--color--ui-base, #6a6e73);--pfe-cta--Color--focus:var(--pfe-theme--color--ui-base, #6a6e73);--pfe-cta__arrow--Display:none;--pfe-cta__inner--BorderColor--focus:var(--pfe-theme--color--ui-base, #6a6e73)}:host([priority=primary][on=dark]),:host([priority=primary][on=saturated]){--pfe-cta--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-cta--BorderColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-cta--Color:var(--pfe-theme--color--text, #151515);--pfe-cta--BackgroundColor--hover:var(--pfe-theme--color--surface--lighter, #f0f0f0);--pfe-cta--BorderColor--hover:var(--pfe-theme--color--surface--lighter, #f0f0f0);--pfe-cta--Color--hover:var(--pfe-theme--color--text, #151515);--pfe-cta--BackgroundColor--focus:var(--pfe-theme--color--surface--lightest, #fff);--pfe-cta--BorderColor--focus:var(--pfe-theme--color--surface--lightest, #fff);--pfe-cta--Color--focus:var(--pfe-theme--color--text, #151515);--pfe-cta__inner--BorderColor--focus:var(--pfe-theme--color--surface--darkest, #151515)}:host([priority=secondary][on=dark]),:host([priority=secondary][on=saturated]){--pfe-cta--BackgroundColor:transparent;--pfe-cta--BorderColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-cta--Color:var(--pfe-theme--color--text--on-dark, #fff);--pfe-cta--BackgroundColor--hover:var(--pfe-theme--color--surface--lighter, #f0f0f0);--pfe-cta--BorderColor--hover:var(--pfe-theme--color--surface--lighter, #f0f0f0);--pfe-cta--Color--hover:var(--pfe-theme--color--text, #151515);--pfe-cta--BackgroundColor--focus:var(--pfe-theme--color--surface--lightest, #fff);--pfe-cta--BorderColor--focus:var(--pfe-theme--color--surface--lightest, #fff);--pfe-cta--Color--focus:var(--pfe-theme--color--text, #151515);--pfe-cta__inner--BorderColor--focus:var(--pfe-theme--color--surface--darkest, #151515)}:host([priority=secondary][color=accent]){--pfe-cta--BackgroundColor:transparent;--pfe-cta--BorderColor:var(--pfe-theme--color--ui-accent, #06c);--pfe-cta--Color:var(--pfe-theme--color--ui-accent, #06c);--pfe-cta--BackgroundColor--hover:var(--pfe-theme--color--ui-accent, #06c);--pfe-cta--BorderColor--hover:var(--pfe-theme--color--ui-accent, #06c);--pfe-cta--Color--hover:var(--pfe-theme--color--ui-accent--text, #fff);--pfe-cta--BackgroundColor--focus:var(--pfe-theme--color--surface--lighter, #f0f0f0);--pfe-cta--BorderColor--focus:var(--pfe-theme--color--ui-accent, #06c);--pfe-cta--Color--focus:var(--pfe-theme--color--ui-accent, #06c);--pfe-cta__inner--BorderColor--focus:var(--pfe-theme--color--ui-accent, #06c)}:host([priority=primary][color=base]){--pfe-cta--BackgroundColor:var(--pfe-theme--color--ui-base, #6a6e73);--pfe-cta--BorderColor:var(--pfe-theme--color--ui-base, #6a6e73);--pfe-cta--Color:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--BackgroundColor--hover:var(--pfe-theme--color--ui-base--hover, #151515);--pfe-cta--BorderColor--hover:var(--pfe-theme--color--ui-base--hover, #151515);--pfe-cta--Color--hover:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--BackgroundColor--focus:var(--pfe-theme--color--ui-base, #6a6e73);--pfe-cta--BorderColor--focus:var(--pfe-theme--color--surface--darker, #3c3f42);--pfe-cta--Color--focus:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta__inner--BorderColor--focus:var(--pfe-theme--color--ui-base--text, #fff)}:host([priority=secondary][color=base]){--pfe-cta--BackgroundColor:transparent;--pfe-cta--BorderColor:var(--pfe-theme--color--ui-base, #6a6e73);--pfe-cta--Color:var(--pfe-theme--color--ui-base, #6a6e73);--pfe-cta--BackgroundColor--hover:var(--pfe-theme--color--ui-base--hover, #151515);--pfe-cta--BorderColor--hover:var(--pfe-theme--color--ui-base--hover, #151515);--pfe-cta--Color--hover:var(--pfe-theme--color--ui-base--text, #fff);--pfe-cta--BackgroundColor--focus:rgba(40, 151, 240, 0.2);--pfe-cta--BorderColor--focus:var(--pfe-theme--color--ui-base, #6a6e73);--pfe-cta--Color--focus:var(--pfe-theme--color--ui-base, #6a6e73);--pfe-cta__inner--BorderColor--focus:var(--pfe-theme--color--ui-base, #6a6e73)}:host([priority=secondary][variant=wind]){--pfe-cta--BackgroundColor:transparent;--pfe-cta--BorderColor:var(--pfe-theme--color--surface--border, #d2d2d2);--pfe-cta--Color:var(--pfe-broadcasted--link, #06c);--pfe-cta--FontWeight:var(--pfe-theme--font-weight--normal, 400);--pfe-cta--BackgroundColor--hover:var(--pfe-theme--color--surface--border--lightest, #f5f5f5);--pfe-cta--BorderColor--hover:var(--pfe-theme--color--surface--border, #d2d2d2);--pfe-cta--Color--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-cta--TextDecoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-cta--Color--focus:var(--pfe-theme--color--link--hover, #004080);--pfe-cta--BorderColor--focus:var(--pfe-theme--color--surface--border, #d2d2d2);--pfe-cta__inner--BorderColor--focus:var(--pfe-cta--BorderColor--focus, transparent)}:host([aria-disabled=true]){--pfe-cta__arrow--Display:none;--pfe-cta--BackgroundColor:var(--pfe-theme--color--ui-disabled, #d2d2d2);--pfe-cta--BorderColor:var(--pfe-theme--color--ui-disabled, #d2d2d2);--pfe-cta--Color:var(--pfe-theme--color--ui-disabled--text, #6a6e73)}:host(:not([aria-disabled=true]).focus-within),:host(:not([aria-disabled=true]):focus){--pfe-cta--BackgroundColor:var(--pfe-cta--BackgroundColor--focus, rgba(40, 151, 240, 0.2));--pfe-cta--BorderColor:var(--pfe-cta--BorderColor--focus, transparent);--pfe-cta--Color:var(--pfe-cta--Color--focus, var(--pfe-broadcasted--link--focus, #004080));--pfe-cta--TextDecoration:var(--pfe-cta--TextDecoration--focus, none);--pfe-cta__inner--BorderColor:var(--pfe-cta__inner--BorderColor--focus, transparent)}:host(:not([aria-disabled=true])) ::slotted(:hover),:host(:not([aria-disabled=true]):hover){--pfe-cta--BackgroundColor:var(--pfe-cta--BackgroundColor--hover, transparent);--pfe-cta--BorderColor:var(--pfe-cta--BorderColor--hover, transparent);--pfe-cta--Color:var(--pfe-cta--Color--hover, var(--pfe-broadcasted--link--hover, #004080));--pfe-cta--TextDecoration:var(--pfe-cta--TextDecoration--hover, none);--pfe-cta__inner--BorderColor:var(--pfe-cta__inner--BorderColor--hover, transparent);--pfe-cta__arrow--Padding:0 0 0 6px} /*# sourceMappingURL=pfe-cta.min.css.map */ + + ${this.isDefault?`  + `:""} + +`}static get schemaProperties(){return{priority:{title:"Priority",type:"string",prefixed:!0,enum:["primary","secondary"],observer:"_basicAttributeChanged"},color:{title:"Color",type:"string",prefixed:!0,enum:["accent","base","complement","lightest"],observer:"_basicAttributeChanged"},variant:{title:"Style variant",type:"string",prefixed:!0,enum:["wind"],observer:"_basicAttributeChanged"}}}static get slots(){return{link:{title:"Link",type:"array",maxItems:1,namedSlot:!1,items:{oneOf:[{$ref:"a"},{$ref:"button"}]}}}}static get tag(){return"pfe-cta"}get styleUrl(){return"pfe-cta.scss"}get templateUrl(){return"pfe-cta.html"}get schemaUrl(){return"pfe-cta.json"}get isDefault(){return!this.hasAttribute("priority")}static get PfeType(){return d.PfeTypes.Content}static get events(){return{select:`${this.tag}:select`}}static get properties(){return{priority:{title:"Priority",type:String,values:["primary","secondary"]},oldPriority:{alias:"priority",attr:"pfe-priority"},color:{title:"Color",type:String,values:["accent","base","complement","lightest"]},oldColor:{alias:"color",attr:"pfe-color"},variant:{title:"Style variant",type:String,values:["wind"]},oldVariant:{alias:"variant",attr:"pfe-variant"}}}click(e){this.emitEvent(m.events.select,{detail:Object.assign(this.data,{originEvent:e})})}constructor(){super(m);this.cta=null,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(){super.connectedCallback(),this._slot=this.shadowRoot.querySelector("slot"),this._slot.addEventListener("slotchange",this._init),this.hasLightDOM()&&this._init()}disconnectedCallback(){super.disconnectedCallback(),this._slot.removeEventListener("slotchange",this._init),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))}_init(){let e=["a","button"],t=!1;this.firstElementChild&&e.forEach(r=>{this.firstElementChild.tagName.toLowerCase()===r&&(t=!0)}),!this.firstElementChild||!t?this.warn("The first child in the light DOM must be a supported call-to-action tag (,