Skip to content

Instantly share code, notes, and snippets.

@heyMP

heyMP/index.html

Created January 31, 2023 02:32
Show Gist options
  • Save heyMP/d30bd30d8e1b6f33b329fc0ecda31ba7 to your computer and use it in GitHub Desktop.
Save heyMP/d30bd30d8e1b6f33b329fc0ecda31ba7 to your computer and use it in GitHub Desktop.
Download ZIP
Footer with no existing dependencies example
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="/rhds-lightdom.css" rel="stylesheet">
</head>
<body>
<rh-global-footer>
<h3 slot="links-primary" data-analytics-text="Red Hat legal and privacy links" hidden>Red Hat legal and privacy links</h3>
<ul slot="links-primary" data-analytics-region="page-footer-bottom-primary">
<li><a href="https://redhat.com/en/about/company" data-analytics-category="Footer|Corporate" data-analytics-text="About Red Hat">About Red Hat</a></li>
<li><a href="https://redhat.com/en/jobs" data-analytics-category="Footer|Corporate" data-analytics-text="Jobs">Jobs</a></li>
<li><a href="https://redhat.com/en/events" data-analytics-category="Footer|Corporate" data-analytics-text="Events">Events</a></li>
<li><a href="https://redhat.com/en/about/office-locations" data-analytics-category="Footer|Corporate" data-analytics-text="Locations">Locations</a></li>
<li><a href="https://redhat.com/en/contact" data-analytics-category="Footer|Corporate" data-analytics-text="Contact Red Hat">Contact Red Hat</a></li>
<li><a href="https://redhat.com/en/blog" data-analytics-category="Footer|Corporate" data-analytics-text="Red Hat Blog">Red Hat Blog</a></li>
<li><a href="https://redhat.com/en/about/our-culture/diversity-equity-inclusion/statement" data-analytics-category="Footer|Corporate" data-analytics-text="Diversity equity and inclusion">Diversity, equity, and inclusion</a></li>
<li><a href="https://coolstuff.redhat.com/" data-analytics-category="Footer|Corporate" data-analytics-text="Cool Stuff Store">Cool Stuff Store</a></li>
<li><a href="https://www.redhat.com/en/summit" data-analytics-category="Footer|Corporate" data-analytics-text="Red Hat Summit">Red Hat Summit</a></li>
</ul>
<rh-footer-copyright slot="links-secondary">© 2022 Red Hat, Inc.</rh-footer-copyright>
<h3 slot="links-secondary" data-analytics-text="Red Hat legal and privacy links" hidden>Red Hat legal and privacy links</h3>
<ul slot="links-secondary" data-analytics-region="page-footer-bottom-secondary">
<li><a href="https://redhat.com/en/about/privacy-policy" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Privacy statement">Privacy statement</a></li>
<li><a href="https://redhat.com/en/about/terms-use" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Terms of use">Terms of use</a></li>
<li><a href="https://redhat.com/en/about/all-policies-guidelines" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="All policies and guidelines">All policies and guidelines</a></li>
<li><a href="https://redhat.com/en/about/digital-accessibility" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Digital accessibility" class="active">Digital accessibility</a></li>
<!-- If your website supports trustarc include this item to add Cookie Preferences to your site. -->
<!-- <li><span id="teconsent"> </span></li> -->
</ul>
</rh-global-footer>
<script type="module" src="/rhds-bundle.js"></script>
</body>
</html>
Raw
rhds-bundle.js
function t(t,e,o,r){var i,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,r);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(n=(s<3?i(n):s>3?i(e,o,n):i(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n}function e(t,e,o,r){if("a"===o&&!r)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!r:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===o?r:"a"===o?r.call(t):r?r.value:e.get(t)}function o(t,e,o){if("function"!=typeof o?.value)throw new TypeError(`Only methods can be decorated with @bound. <${e??t.name}> is not a method!`);return{configurable:!0,get(){let t=o.value.bind(this);return Object.defineProperty(this,e,{value:t,configurable:!0,writable:!0}),t}}}var r=class{constructor(t){if(this.host=t,r.instances.get(t))return r.instances.get(t);t.addController(this),r.instances.set(t,this)}get prefix(){return`[${this.host.localName}${this.host.id?`#${this.host.id}`:""}]`}static debugLog(t=null){try{return null!==t&&(r.logDebug=!!t,localStorage.pfeLog=!!t),"true"===localStorage.pfeLog}catch{return r.logDebug}}static log(...t){r.debugLog()&&console.log(...t)}static warn(...t){console.warn(...t)}static error(...t){console.error([...t].join(" "))}log(...t){r.log(this.prefix,...t)}warn(...t){r.warn(this.prefix,...t)}error(...t){r.error(this.prefix,...t)}hostConnected(){this.log("connected")}},i=r;i.instances=new WeakMap;var s=Object.defineProperty,n=Object.getOwnPropertyDescriptor,a=(t,e,o,r)=>{for(var i,a=r>1?void 0:r?n(e,o):e,l=t.length-1;l>=0;l--)(i=t[l])&&(a=(r?i(e,o,a):i(a))||a);return r&&a&&s(e,o,a),a};var l=class{constructor(t,...e){if(this.host=t,this.nodes=new Map,this.firstUpdated=!1,this.mo=new MutationObserver(this.onMutation),this.deprecations={},this.logger=new i(this.host),function(t){return 1===t.length&&"object"==typeof t[0]&&null!==t[0]}(e)){let[{slots:t,deprecations:o}]=e;this.slotNames=t,this.deprecations=o??{}}else e.length>=1?(this.slotNames=e,this.deprecations={}):this.slotNames=[null];t.addController(this)}hostConnected(){this.host.addEventListener("slotchange",this.onSlotChange),this.firstUpdated=!1,this.mo.observe(this.host,{childList:!0}),this.init()}hostUpdated(){this.firstUpdated||(this.slotNames.forEach(this.initSlot),this.firstUpdated=!0)}hostDisconnected(){this.mo.disconnect()}hasSlotted(...t){return t.length?t.some((t=>this.nodes.get(t)?.hasContent??!1)):(this.logger.warn("Please provide at least one slot name for which to search."),!1)}getSlotted(...t){return t.length?t.flatMap((t=>this.nodes.get(t)?.elements??[])):this.nodes.get(l.anonymous)?.elements??[]}onSlotChange(t){let e=t.target.name;this.initSlot(e),this.host.requestUpdate()}async onMutation(t){let e=[];for(let{addedNodes:o,removedNodes:r}of t)for(let t of[...o,...r])t instanceof HTMLElement&&t.slot&&(this.initSlot(t.slot),e.push(t.slot));e.length&&this.host.requestUpdate()}getChildrenForSlot(t){return Array.from(this.host.children).filter((t=>e=>t===h.anonymous?!e.hasAttribute("slot"):e.getAttribute("slot")===t)(t))}initSlot(t){let e=t||l.anonymous,o=this.nodes.get(e)?.slot?.assignedElements?.()??this.getChildrenForSlot(e),r=t?`slot[name="${t}"]`:"slot:not([name])",i=this.host.shadowRoot?.querySelector?.(r)??null,s=!!o.length;this.nodes.set(e,{elements:o,name:t??"",hasContent:s,slot:i}),this.logger.log(t,s)}init(){this.nodes.clear(),this.slotNames.forEach(this.initSlot),Object.values(this.deprecations).forEach(this.initSlot),this.host.requestUpdate()}},h=l;h.anonymous=Symbol("anonymous slot"),a([o],h.prototype,"onSlotChange",1),a([o],h.prototype,"onMutation",1),a([o],h.prototype,"initSlot",1),a([o],h.prototype,"init",1);
/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const d=window,c=d.ShadowRoot&&(void 0===d.ShadyCSS||d.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,p=Symbol(),u=new WeakMap;class f{constructor(t,e,o){if(this._$cssResult$=!0,o!==p)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(c&&void 0===t){const o=void 0!==e&&1===e.length;o&&(t=u.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),o&&u.set(e,t))}return t}toString(){return this.cssText}}const g=t=>new f("string"==typeof t?t:t+"",void 0,p),v=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,o,r)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(o)+t[r+1]),t[0]);return new f(o,t,p)},m=c?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const o of t.cssRules)e+=o.cssText;return g(e)})(t):t
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/;var y;const b=window,x=b.trustedTypes,$=x?x.emptyScript:"",k=b.reactiveElementPolyfillSupport,_={toAttribute(t,e){switch(e){case Boolean:t=t?$:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let o=t;switch(e){case Boolean:o=null!==t;break;case Number:o=null===t?null:Number(t);break;case Object:case Array:try{o=JSON.parse(t)}catch(t){o=null}}return o}},w=(t,e)=>e!==t&&(e==e||t==t),A={attribute:!0,type:String,converter:_,reflect:!1,hasChanged:w};class S extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u()}static addInitializer(t){var e;null!==(e=this.h)&&void 0!==e||(this.h=[]),this.h.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,o)=>{const r=this._$Ep(o,e);void 0!==r&&(this._$Ev.set(r,o),t.push(r))})),t}static createProperty(t,e=A){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const o="symbol"==typeof t?Symbol():"__"+t,r=this.getPropertyDescriptor(t,o,e);void 0!==r&&Object.defineProperty(this.prototype,t,r)}}static getPropertyDescriptor(t,e,o){return{get(){return this[e]},set(r){const i=this[t];this[e]=r,this.requestUpdate(t,i,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||A}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const o of e)this.createProperty(o,t[o])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const o=new Set(t.flat(1/0).reverse());for(const t of o)e.unshift(m(t))}else void 0!==t&&e.push(m(t));return e}static _$Ep(t,e){const o=e.attribute;return!1===o?void 0:"string"==typeof o?o:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this._$E_=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(t=this.constructor.h)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,o;(null!==(e=this._$ES)&&void 0!==e?e:this._$ES=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(o=t.hostConnected)||void 0===o||o.call(t))}removeController(t){var e;null===(e=this._$ES)||void 0===e||e.splice(this._$ES.indexOf(t)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this._$Ei.set(e,this[e]),delete this[e])}))}createRenderRoot(){var t;const e=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return((t,e)=>{c?t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):e.forEach((e=>{const o=document.createElement("style"),r=d.litNonce;void 0!==r&&o.setAttribute("nonce",r),o.textContent=e.cssText,t.appendChild(o)}))})(e,this.constructor.elementStyles),e}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)}))}attributeChangedCallback(t,e,o){this._$AK(t,o)}_$EO(t,e,o=A){var r;const i=this.constructor._$Ep(t,o);if(void 0!==i&&!0===o.reflect){const s=(void 0!==(null===(r=o.converter)||void 0===r?void 0:r.toAttribute)?o.converter:_).toAttribute(e,o.type);this._$El=t,null==s?this.removeAttribute(i):this.setAttribute(i,s),this._$El=null}}_$AK(t,e){var o;const r=this.constructor,i=r._$Ev.get(t);if(void 0!==i&&this._$El!==i){const t=r.getPropertyOptions(i),s="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(o=t.converter)||void 0===o?void 0:o.fromAttribute)?t.converter:_;this._$El=i,this[i]=s.fromAttribute(e,t.type),this._$El=null}}requestUpdate(t,e,o){let r=!0;void 0!==t&&(((o=o||this.constructor.getPropertyOptions(t)).hasChanged||w)(this[t],e)?(this._$AL.has(t)||this._$AL.set(t,e),!0===o.reflect&&this._$El!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,o))):r=!1),!this.isUpdatePending&&r&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach(((t,e)=>this[e]=t)),this._$Ei=void 0);let e=!1;const o=this._$AL;try{e=this.shouldUpdate(o),e?(this.willUpdate(o),null===(t=this._$ES)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(o)):this._$Ek()}catch(t){throw e=!1,this._$Ek(),t}e&&this._$AE(o)}willUpdate(t){}_$AE(t){var e;null===(e=this._$ES)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(t){return!0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,e)=>this._$EO(e,this[e],t))),this._$EC=void 0),this._$Ek()}updated(t){}firstUpdated(t){}}
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var E;S.finalized=!0,S.elementProperties=new Map,S.elementStyles=[],S.shadowRootOptions={mode:"open"},null==k||k({ReactiveElement:S}),(null!==(y=b.reactiveElementVersions)&&void 0!==y?y:b.reactiveElementVersions=[]).push("1.4.1");const C=window,M=C.trustedTypes,N=M?M.createPolicy("lit-html",{createHTML:t=>t}):void 0,P=`lit$${(Math.random()+"").slice(9)}$`,T="?"+P,U=`<${T}>`,H=document,O=(t="")=>H.createComment(t),R=t=>null===t||"object"!=typeof t&&"function"!=typeof t,z=Array.isArray,j=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,L=/-->/g,D=/>/g,B=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),I=/'/g,V=/"/g,q=/^(?:script|style|textarea|title)$/i,W=(t=>(e,...o)=>({_$litType$:t,strings:e,values:o}))(1),F=Symbol.for("lit-noChange"),K=Symbol.for("lit-nothing"),J=new WeakMap,Z=H.createTreeWalker(H,129,null,!1),X=(t,e)=>{const o=t.length-1,r=[];let i,s=2===e?"<svg>":"",n=j;for(let e=0;e<o;e++){const o=t[e];let a,l,h=-1,d=0;for(;d<o.length&&(n.lastIndex=d,l=n.exec(o),null!==l);)d=n.lastIndex,n===j?"!--"===l[1]?n=L:void 0!==l[1]?n=D:void 0!==l[2]?(q.test(l[2])&&(i=RegExp("</"+l[2],"g")),n=B):void 0!==l[3]&&(n=B):n===B?">"===l[0]?(n=null!=i?i:j,h=-1):void 0===l[1]?h=-2:(h=n.lastIndex-l[2].length,a=l[1],n=void 0===l[3]?B:'"'===l[3]?V:I):n===V||n===I?n=B:n===L||n===D?n=j:(n=B,i=void 0);const c=n===B&&t[e+1].startsWith("/>")?" ":"";s+=n===j?o+U:h>=0?(r.push(a),o.slice(0,h)+"$lit$"+o.slice(h)+P+c):o+P+(-2===h?(r.push(void 0),e):c)}const a=s+(t[o]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==N?N.createHTML(a):a,r]};class Q{constructor({strings:t,_$litType$:e},o){let r;this.parts=[];let i=0,s=0;const n=t.length-1,a=this.parts,[l,h]=X(t,e);if(this.el=Q.createElement(l,o),Z.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(r=Z.nextNode())&&a.length<n;){if(1===r.nodeType){if(r.hasAttributes()){const t=[];for(const e of r.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(P)){const o=h[s++];if(t.push(e),void 0!==o){const t=r.getAttribute(o.toLowerCase()+"$lit$").split(P),e=/([.?@])?(.*)/.exec(o);a.push({type:1,index:i,name:e[2],strings:t,ctor:"."===e[1]?ot:"?"===e[1]?it:"@"===e[1]?st:et})}else a.push({type:6,index:i})}for(const e of t)r.removeAttribute(e)}if(q.test(r.tagName)){const t=r.textContent.split(P),e=t.length-1;if(e>0){r.textContent=M?M.emptyScript:"";for(let o=0;o<e;o++)r.append(t[o],O()),Z.nextNode(),a.push({type:2,index:++i});r.append(t[e],O())}}}else if(8===r.nodeType)if(r.data===T)a.push({type:2,index:i});else{let t=-1;for(;-1!==(t=r.data.indexOf(P,t+1));)a.push({type:7,index:i}),t+=P.length-1}i++}}static createElement(t,e){const o=H.createElement("template");return o.innerHTML=t,o}}function Y(t,e,o=t,r){var i,s,n,a;if(e===F)return e;let l=void 0!==r?null===(i=o._$Co)||void 0===i?void 0:i[r]:o._$Cl;const h=R(e)?void 0:e._$litDirective$;return(null==l?void 0:l.constructor)!==h&&(null===(s=null==l?void 0:l._$AO)||void 0===s||s.call(l,!1),void 0===h?l=void 0:(l=new h(t),l._$AT(t,o,r)),void 0!==r?(null!==(n=(a=o)._$Co)&&void 0!==n?n:a._$Co=[])[r]=l:o._$Cl=l),void 0!==l&&(e=Y(t,l._$AS(t,e.values),l,r)),e}class G{constructor(t,e){this.u=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}v(t){var e;const{el:{content:o},parts:r}=this._$AD,i=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:H).importNode(o,!0);Z.currentNode=i;let s=Z.nextNode(),n=0,a=0,l=r[0];for(;void 0!==l;){if(n===l.index){let e;2===l.type?e=new tt(s,s.nextSibling,this,t):1===l.type?e=new l.ctor(s,l.name,l.strings,this,t):6===l.type&&(e=new nt(s,this,t)),this.u.push(e),l=r[++a]}n!==(null==l?void 0:l.index)&&(s=Z.nextNode(),n++)}return i}p(t){let e=0;for(const o of this.u)void 0!==o&&(void 0!==o.strings?(o._$AI(t,o,e),e+=o.strings.length-2):o._$AI(t[e])),e++}}class tt{constructor(t,e,o,r){var i;this.type=2,this._$AH=K,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=o,this.options=r,this._$Cm=null===(i=null==r?void 0:r.isConnected)||void 0===i||i}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cm}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Y(this,t,e),R(t)?t===K||null==t||""===t?(this._$AH!==K&&this._$AR(),this._$AH=K):t!==this._$AH&&t!==F&&this.g(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>z(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.k(t):this.g(t)}O(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}g(t){this._$AH!==K&&R(this._$AH)?this._$AA.nextSibling.data=t:this.T(H.createTextNode(t)),this._$AH=t}$(t){var e;const{values:o,_$litType$:r}=t,i="number"==typeof r?this._$AC(t):(void 0===r.el&&(r.el=Q.createElement(r.h,this.options)),r);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===i)this._$AH.p(o);else{const t=new G(i,this),e=t.v(this.options);t.p(o),this.T(e),this._$AH=t}}_$AC(t){let e=J.get(t.strings);return void 0===e&&J.set(t.strings,e=new Q(t)),e}k(t){z(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let o,r=0;for(const i of t)r===e.length?e.push(o=new tt(this.O(O()),this.O(O()),this,this.options)):o=e[r],o._$AI(i),r++;r<e.length&&(this._$AR(o&&o._$AB.nextSibling,r),e.length=r)}_$AR(t=this._$AA.nextSibling,e){var o;for(null===(o=this._$AP)||void 0===o||o.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cm=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class et{constructor(t,e,o,r,i){this.type=1,this._$AH=K,this._$AN=void 0,this.element=t,this.name=e,this._$AM=r,this.options=i,o.length>2||""!==o[0]||""!==o[1]?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=K}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,o,r){const i=this.strings;let s=!1;if(void 0===i)t=Y(this,t,e,0),s=!R(t)||t!==this._$AH&&t!==F,s&&(this._$AH=t);else{const r=t;let n,a;for(t=i[0],n=0;n<i.length-1;n++)a=Y(this,r[o+n],e,n),a===F&&(a=this._$AH[n]),s||(s=!R(a)||a!==this._$AH[n]),a===K?t=K:t!==K&&(t+=(null!=a?a:"")+i[n+1]),this._$AH[n]=a}s&&!r&&this.j(t)}j(t){t===K?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class ot extends et{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===K?void 0:t}}const rt=M?M.emptyScript:"";class it extends et{constructor(){super(...arguments),this.type=4}j(t){t&&t!==K?this.element.setAttribute(this.name,rt):this.element.removeAttribute(this.name)}}class st extends et{constructor(t,e,o,r,i){super(t,e,o,r,i),this.type=5}_$AI(t,e=this){var o;if((t=null!==(o=Y(this,t,e,0))&&void 0!==o?o:K)===F)return;const r=this._$AH,i=t===K&&r!==K||t.capture!==r.capture||t.once!==r.once||t.passive!==r.passive,s=t!==K&&(r===K||i);i&&this.element.removeEventListener(this.name,this,r),s&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,o;"function"==typeof this._$AH?this._$AH.call(null!==(o=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==o?o:this.element,t):this._$AH.handleEvent(t)}}class nt{constructor(t,e,o){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(t){Y(this,t)}}const at=C.litHtmlPolyfillSupport;null==at||at(Q,tt),(null!==(E=C.litHtmlVersions)&&void 0!==E?E:C.litHtmlVersions=[]).push("2.4.0");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var lt,ht;class dt extends S{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,e;const o=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=o.firstChild),o}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,o)=>{var r,i;const s=null!==(r=null==o?void 0:o.renderBefore)&&void 0!==r?r:e;let n=s._$litPart$;if(void 0===n){const t=null!==(i=null==o?void 0:o.renderBefore)&&void 0!==i?i:null;s._$litPart$=n=new tt(e.insertBefore(O(),t),t,void 0,null!=o?o:{})}return n._$AI(t),n})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return F}}dt.finalized=!0,dt._$litElement$=!0,null===(lt=globalThis.litElementHydrateSupport)||void 0===lt||lt.call(globalThis,{LitElement:dt});const ct=globalThis.litElementPolyfillSupport;null==ct||ct({LitElement:dt}),(null!==(ht=globalThis.litElementVersions)&&void 0!==ht?ht:globalThis.litElementVersions=[]).push("3.2.2");
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const pt=t=>e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:o,elements:r}=e;return{kind:o,elements:r,finisher(e){customElements.define(t,e)}}})(t,e)
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/,ut=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(o){o.createProperty(e.key,t)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this))},finisher(o){o.createProperty(e.key,t)}};
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
var ft;null===(ft=window.HTMLSlotElement)||void 0===ft||ft.prototype.assignedElements;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/
const gt=1;class vt{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,o){this._$Ct=t,this._$AM=e,this._$Ci=o}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
/**
* @license
* Copyright 2018 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/const mt=(t=>(...e)=>({_$litDirective$:t,values:e}))(class extends vt{constructor(t){var e;if(super(t),t.type!==gt||"class"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((e=>t[e])).join(" ")+" "}update(t,[e]){var o,r;if(void 0===this.nt){this.nt=new Set,void 0!==t.strings&&(this.st=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in e)e[t]&&!(null===(o=this.st)||void 0===o?void 0:o.has(t))&&this.nt.add(t);return this.render(e)}const i=t.element.classList;this.nt.forEach((t=>{t in e||(i.remove(t),this.nt.delete(t))}));for(const t in e){const o=!!e[t];o===this.nt.has(t)||(null===(r=this.st)||void 0===r?void 0:r.has(t))||(o?(i.add(t),this.nt.add(t)):(i.remove(t),this.nt.delete(t)))}return F}});const yt=v`:host(:is([on=dark])) { --context: dark; }
:host(:is([on=light])) { --context: light; }
:host(:is([on=saturated])) { --context: saturated; }
/**
* It's important for \`color-palette\` to take precedence over \`on\`
* when setting \`--context\`, because a \`dark\` card that's on a \`light\`
* background must create a new \`dark\` context for its descendents
*/
:host(:is([color-palette=darker],[color-palette=darkest])) {
--context: dark;
--rh-context-text: var(--rh-context-dark-color-text, #fff);
--rh-context-text-muted: var(--rh-context-dark-color-text-muted, #d2d2d2);
--rh-context-link: var(--rh-context-dark-color-text-link, #73bcf7);
--rh-context-link-hover: var(--rh-context-dark-color-text-link-hover, #bee1f4);
--rh-context-link-focus: var(--rh-context-dark-color-text-link-focus, #bee1f4);
--rh-context-link-visited: var(--rh-context-dark-color-text-link-visited, #a18fff);
--rh-context-link-visited-hover: var(--rh-context-dark-color-text-link-visited-hover, #cbc1ff);
/* --rh-context-link-decoration: var(--rh-theme--link-decoration--on-dark, none); */
/* --rh-context-link-decoration-hover: var(--rh-theme--link-decoration-hover--on-dark, underline); */
/* --rh-context-link-decoration-focus: var(--rh-theme--link-decoration-focus--on-dark, underline); */
/* --rh-context-link-decoration--visited: var(--rh-theme--link-decoration--visited--on-dark, none); */
}
:host(:is([color-palette=lighter],[color-palette=lightest],[color-palette=base])) {
--context: light;
--rh-context-text: var(--rh-context-light-color-text, #151515);
--rh-context-text-muted: var(--rh-context-light-color-text-muted, #6a6e73);
--rh-context-link: var(--rh-context-light-color-text-link, #06c);
--rh-context-link-hover: var(--rh-context-light-color-text-link-hover, #004080);
--rh-context-link-focus: var(--rh-context-light-color-text-link-focus, #004080);
--rh-context-link-visited: var(--rh-context-light-color-text-link-visited, #6753ac);
--rh-context-link-visited-hover: var(--rh-context-light-color-text-link-visited-hover, #1f0066);
/* --rh-context-link-decoration: var(--rh-theme--link-decoration, none); */
/* --rh-context-link-decoration-hover: var(--rh-theme--link-decoration-hover, underline); */
/* --rh-context-link-decoration-focus: var(--rh-theme--link-decoration-focus, underline); */
/* --rh-context-link-decoration--visited: var(--rh-theme--link-decoration--visited, none); */
}
/* FIXME: Saturated colours TBD */
/* :host(:is([color-palette=accent],[color-palette=complement],[color-palette=saturated])) { */
/* --context: saturated; */
/* --rh-context-text: var(--rh-theme--color--text--on-saturated, #fff); */
/* --rh-context-text-muted: var(--rh-theme--color--text-muted--on-saturated, #d2d2d2); */
/* --rh-context-link: var(--rh-theme--color--link-on-saturated, #fff); */
/* --rh-context-link-hover: var(--rh-theme--color--link-hover--on-saturated, #fafafa); */
/* --rh-context-link-focus: var(--rh-theme--color--link-focus--on-saturated, #fafafa); */
/* --rh-context-link-visited: var(--rh-theme--color--link-visited--on-saturated, #d2d2d2); */
/* --rh-context-link-decoration: var(--rh-theme--link-decoration--on-saturated, underline); */
/* --rh-context-link-decoration-hover: var(--rh-theme--link-decoration-hover--on-saturated, underline); */
/* --rh-context-link-decoration-focus: var(--rh-theme--link-decoration-focus--on-saturated, underline); */
/* --rh-context-link-decoration--visited: var(--rh-theme--link-decoration--visited--on-saturated, underline); */
/* } */
:host(:is([color-palette=lightest])) {
--rh-context-background-color: var(--rh-color-surface-lighest, #fff);
}
:host(:is([color-palette=lighter])) {
--rh-context-background-color: var(--rh-color-surface-lighter, #f5f5f5);
}
:host(:is([color-palette=base])) {
--rh-context-background-color: var(--rh-color-surface-lighest, #fff);
}
:host(:is([color-palette=darker])) {
--rh-context-background-color: var(--rh-color-surface-darker, #212427);
}
:host(:is([color-palette=darkest])) {
--rh-context-background-color: var(--rh-color-surface-darkest, #151515);
}
/* FIXME: Saturated colors TBD */
/* :host(:is([color-palette=complement])) { */
/* --rh-context-background-color: var(--rh-color-surface-complement, #004368); */
/* } */
/**/
/* :host(:is([color-palette=accent])) { */
/* --rh-context-background-color: var(--rh-color-surface-accent, #00659c); */
/* } */
/* QUESTION: should be specified per component? */
/* :host(:is([color-palette])) { */
/* background-color: var(--rh-context-background-color, var(--rh-color-surface-base)); */
/* } */
`;var bt,xt;const $t=new Map;class kt{constructor(t,e){var o;this.host=t,this.prefix="rh-",this.last=null,this.prefix=e?.prefix??"rh-",this.context={name:`${this.prefix}-color-context`,initialValue:o},this.logger=new i(t),this.styleController=new class{constructor(t,e){this.host=t,this.styles=e,this.stylesAdopted=!1,t.addController(this)}hostConnected(){if(this.stylesAdopted||!(this.host.renderRoot instanceof ShadowRoot))return;let t=[this.styles].flatMap((t=>m(t))).filter((t=>!!t));c?this.host.renderRoot.adoptedStyleSheets=[...t.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)),...this.host.renderRoot.adoptedStyleSheets??[]]:t.forEach((t=>{let e=document.createElement("style"),o=window.litNonce;void 0!==o&&e.setAttribute("nonce",o),e.textContent=t.cssText,this.host.renderRoot.appendChild(e)})),this.stylesAdopted=!0}}(t,yt),t.addController(this)}}class _t extends kt{constructor(t,e){super(t,e),bt.add(this),this.callbacks=new Set,this.mo=new MutationObserver((()=>this.update(this.contextVariable))),this.style=window.getComputedStyle(t),this.attribute=e?.attribute??"color-palette"}get contextVariable(){return this.style.getPropertyValue("--context").trim()||null}hostConnected(){this.host.addEventListener("context-request",(t=>e(this,bt,"m",xt).call(this,t))),this.mo.observe(this.host,{attributes:!0,attributeFilter:[this.attribute,"on"]}),this.update(this.contextVariable);for(const[t,e]of $t)t.dispatchEvent(e)}hostDisconnected(){this.callbacks.forEach((t=>this.callbacks.delete(t))),this.mo.disconnect()}isColorContextEvent(t){return t.target!==this.host&&t.context.name===`${this.prefix}-color-context`}update(t){for(const e of this.callbacks)e(t)}}bt=new WeakSet,xt=function(t){this.isColorContextEvent(t)&&(t.stopPropagation(),t.callback(this.contextVariable),t.multiple&&this.callbacks.add(t.callback))};const wt=v`:host {
/* apply sensible defaults based on redhat standards. */
color: var(--rh-color-white, #ffffff);
font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Overpass, Helvetica, Arial, sans-serif) !important;
line-height: var(--rh-line-height-body-text, 1.5);
font-weight: var(--_font-weight);
font-size: initial;
display: flex;
flex-direction: column;
}
footer,
.global-base {
--_icon-color: var(--rh-footer-icon-color, var(--rh-color-black-500, #8a8d90));
--_icon-color-hover: var(--rh-footer-icon-color-hover, var(--rh-color-black-400, #b8bbbe));
--_border-color: var(--rh-footer-border-color, var(--rh-color-black-600, #6a6e73));
--_accent-color: var(--rh-footer-accent-color, var(--rh-color-brand-red-on-light, #ee0000));
--_section-side-gap: var(--rh-footer-section-side-gap, var(--rh-space-2xl, 32px));
--_accordion-background: var(--rh-color-white, #ffffff);
--_logo-width: var(--rh-size-icon-04, 40px);
--_font-weight: var(--rh-font-weight-body-text-regular, 400);
/* Style Accordions */
--pfe-accordion--Color: var(--_accordion-background);
--pfe-accordion--Color--expanded: var(--_accordion-background);
--pfe-accordion--Color--active: var(--_accordion-background);
--pfe-accordion--BackgroundColor: transparent;
--pfe-accordion--BackgroundColor--active: transparent;
--pfe-accordion--BackgroundColor--expanded: var(--rh-color-surface-darkest, #151515);
--pfe-accordion--BorderColor: var(--_border-color);
--pfe-accordion--FontSize--header: initial;
--pfe-accordion--FontWeight--header: var(--_font-weight);
--pfe-accordion--accent--expanded: var(--_accent-color);
--pfe-accordion--accent--active: var(--_accent-color);
}
pfe-accordion {
--pfe-context-background-color: transparent;
}
* {
box-sizing: border-box;
}
::slotted(:is(h1,h2,h3,h4,h5,h6)) {
font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Overpass, Helvetica, Arial, sans-serif) !important;
}
/**
* Debugging
*/
:host([debug]) *:not(.spacer, .base, a, svg) {
/* make sure we have some */
min-height: var(--rh-length-xl, 24px);
position: relative;
outline: var(--rh-length-3xs, 2px) dotted red;
}
:host([debug]) *:not(.spacer, .base, a, svg):after {
content: attr(part);
display: block;
position: absolute;
color: white;
background-color: darkslategray;
padding: var(--rh-space-xs, 4px);
top: 0;
right: 0;
font-family: var(--rh-font-family-code, RedHatMono, "Red Hat Mono", "Courier New", Courier, monospace);
font-size: var(--rh-font-size-code-xs, 0.75rem);
}
/**
* Regions
*/
.section {
padding: var(--rh-space-2xl, 32px) var(--_section-side-gap);
}
.header {
background-color: var(--rh-color-surface-darker, #212427);
/* children should flex wrap on mobile */
display: flex;
flex-wrap: wrap;
gap: var(--rh-space-2xl, 32px);
align-items: center;
position: relative;
}
.header:after {
display: block;
content: "";
background-color: var(--_border-color);
height: var(--rh-length-4xs, 1px);
position: absolute;
bottom: 0;
width: calc(100% - var(--_section-side-gap) * 2);
left: var(--_section-side-gap);
}
.header-primary {
flex: 1 1 auto;
}
.header-secondary {
/* secondary should be push to the end */
/* of the line on mobile */
flex: 0 1 auto;
}
.main {
background-color: var(--rh-color-surface-darker, #212427);
display: grid;
gap: var(--rh-space-2xl, 32px);
}
.main-secondary {
display: grid;
gap: var(--pf-global--spacer--xl, 32px);
place-items: baseline;
place-content: start;
}
.global-base {
--rh-footer-link-font-size: var(--rh-font-size-body-text-xs, 0.75rem);
/* reduce the line-height for global links */
line-height: 100%;
background-color: var(--rh-color-surface-darkest, #151515);
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"logo"
"primary"
"spacer"
"secondary"
"tertiary";
gap: var(--rh-space-2xl, 32px) var(--rh-space-xl, 24px);
}
.global-logo {
grid-area: logo;
width: var(--_logo-width);
}
.global-logo-image {
fill: var(--_icon-color);
}
.global-logo-image:is(:hover, :focus-within) {
fill: var(--_icon-color-hover);
}
.global-primary {
grid-area: primary;
}
.global-secondary {
grid-area: secondary;
color: var(--rh-color-text-secondary-on-dark, #d2d2d2);
display: flex;
flex-direction: column;
gap: var(--rh-space-lg, 16px);
justify-content: space-between;
}
.global-tertiary {
grid-area: tertiary;
display: grid;
justify-content: start;
align-items: start;
}
.global-links-primary {
display: flex;
flex-direction: column;
gap: var(--rh-space-md, 8px) var(--rh-space-xl, 24px);
}
.global-links-secondary {
display: flex;
flex-direction: column;
gap: var(--rh-space-md, 8px) var(--rh-space-xl, 24px);
}
/* reduce the font size of the content in these regions */
:is(.global-primary, .global-secondary, .global-tertiary) ::slotted(*) {
font-size: var(--rh-font-size-body-text-xs, 0.75rem);
}
.logo {
/* fix wierd problem where there is extra space below logo */
line-height: 0px;
}
.social-links {
display: flex;
margin-inline-start: 0;
padding-inline-start: 0;
}
.social-links rh-footer-links,
.social-links slot::slotted(rh-footer-links) {
display: flex;
flex-direction: row;
gap: var(--rh-space-xl, 24px);
}
:is(.links, .global-links-primary, .global-links-secondary) ::slotted(ul) {
padding: 0;
margin: 0;
display: contents;
}
.isMobile .links {
--rh-footer-link-header-font-size: var(--rh-font-size-body-text-lg, 1.125rem);
}
.isMobile .links ::slotted(ul) {
--rh-footer-link-font-size: 1em;
display: grid;
grid-template-columns: 1fr;
gap: calc(var(--rh-space-2xl, 32px) / 2);
}
[part="base"]:not(.isMobile) .links {
display: grid;
grid-template-columns: repeat(1fr, 25%);
grid-template-rows: repeat(2, min-content auto);
grid-auto-columns: minmax(0, 1fr);
row-gap: var(--rh-space-lg, 16px);
column-gap: var(--rh-space-2xl, 32px);
grid-auto-flow: column;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(h2, h3, h4, h5, h6):nth-of-type(1)) {
grid-column: 1/2;
grid-row: 1/2;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(h2, h3, h4, h5, h6):nth-of-type(2)) {
grid-column: 2/3;
grid-row: 1/2;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(h2, h3, h4, h5, h6):nth-of-type(3)) {
grid-column: 3/4;
grid-row: 1/2;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(h2, h3, h4, h5, h6):nth-of-type(4)) {
grid-column: 4/5;
grid-row: 1/2;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(h2, h3, h4, h5, h6):nth-of-type(5)) {
grid-column: 1/2;
grid-row: 3/4;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(h2, h3, h4, h5, h6):nth-of-type(6)) {
grid-column: 2/3;
grid-row: 3/4;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(h2, h3, h4, h5, h6):nth-of-type(7)) {
grid-column: 3/4;
grid-row: 3/4;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(h2, h3, h4, h5, h6):nth-of-type(8)) {
grid-column: 4/5;
grid-row: 3/4;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(ul:nth-of-type(1))) {
grid-column: 1/2;
grid-row: 2/3;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(ul:nth-of-type(2))) {
grid-column: 2/3;
grid-row: 2/3;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(ul:nth-of-type(3))) {
grid-column: 3/4;
grid-row: 2/3;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(ul:nth-of-type(4))) {
grid-column: 4/5;
grid-row: 2/3;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(ul:nth-of-type(5))) {
grid-column: 1/2;
grid-row: 4/5;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(ul:nth-of-type(6))) {
grid-column: 2/3;
grid-row: 4/5;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(ul:nth-of-type(7))) {
grid-column: 3/4;
grid-row: 4/5;
}
[part="base"]:not(.isMobile) .links ::slotted(:is(ul:nth-of-type(8))) {
grid-column: 4/5;
grid-row: 4/5;
}
[part="base"]:not(.isMobile) .links ::slotted(ul) {
gap: var(--rh-footer-links-gap, var(--rh-space-lg, 16px));
display: flex;
flex-direction: column;
}
#footer-logo {
width: var(--_logo-width);
}
:is(.links, .global-links-primary, .global-links-secondary) ::slotted(:is(h1, h2, h3, h4, h5)) {
font-weight: var(--rh-font-weight-heading-medium, 500) !important;
margin-block: 0 !important;
font-size:
var(
--rh-footer-link-header-font-size,
var(--rh-font-size-body-text-sm, 0.875rem)
) !important;
color: var(--rh-color-white, #ffffff) !important;
}
`,At=g`320px`;g`576px`;const St=g`768px`,Et=g`992px`;g`1200px`;const Ct=g`1368px`,Mt=v`
@media screen and (min-width: ${St}) {
.global-base {
grid-template-columns: 4fr 4fr 4fr;
grid-template-areas:
'logo logo logo'
'primary primary primary'
'spacer spacer spacer'
'secondary secondary secondary';
}
.global-base:is(.hasTertiary) {
grid-template-columns: 4fr 4fr 4fr;
grid-template-areas:
'logo logo logo'
'primary primary primary'
'spacer spacer spacer'
'secondary secondary tertiary';
}
}
@media screen and (min-width: ${Et}) {
/* :not(.nothing) is a hack to match CSS specificity with :is(.hasTertiary) */
.global-base:not(.nothing) {
grid-template-columns: auto 10fr 2fr;
grid-template-rows: max-content max-content;
grid-template-areas:
'logo primary tertiary'
'logo secondary tertiary';
gap: 24px 32px;
}
.global-primary {
display: flex;
}
.main {
padding-bottom: 64px;
}
}
.spacer {
grid-area: spacer;
border-bottom: 1px solid var(--_border-color);
}
@media screen and (min-width: ${Et}) {
.spacer {
display: none;
}
}
@media screen and (min-width: ${Et}) {
.global-tertiary {
display: grid;
justify-content: flex-end;
align-items: center;
}
}
@media screen and (min-width: ${At}) {
.global-links-primary {
display: grid;
grid-template-columns: 1fr 1fr;
}
.global-links-secondary {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: ${St}) {
.global-links-primary {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.global-links-secondary {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.hasTertiary .global-links-secondary {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: ${Et}) {
.global-links-primary {
display: flex;
flex-flow: row wrap;
align-items: center;
}
}
@media screen and (min-width: ${Et}) {
:not(.hasTertiary) .global-links-secondary {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px 24px;
}
}
@media screen and (max-width: ${Et}) {
.global-logo {
grid-area: logo;
}
.global-primary {
grid-area: primary;
}
}
@media screen and (max-width: ${Et}) {
/* Equalize padding on mobile */
.section {
--_section-side-gap: var(--rh-footer-section-side-gap, var(--rh-space-2xl, 32px));
}
/* hide the header border on mobile */
.header:after {
display: none;
}
/* force the mobile links menu to go flush against the header */
.main {
padding-top: 0;
}
}
@media screen and (min-width: ${Et}) and (max-width: ${Ct}) {
/* Equalize padding on mobile */
.section {
--_section-side-gap: var(--rh-footer-section-side-gap, var(--rh-space-2xl, 32px));
}
.header,
.main {
/* switch header to use grid instead */
display: grid;
grid-template-columns: 8fr 4fr;
}
}
@media screen and (min-width: ${Ct}) {
.section {
--_section-side-gap: var(--rh-footer-section-side-gap, var(--rh-space-2xl, 32px));
}
.header,
.main {
/* switch header to use grid instead */
display: grid;
grid-template-columns: 8fr 4fr;
}
}
@media screen and (min-width: ${St}) {
.isMobile .links ::slotted(ul) {
grid-template-columns: 1fr 1fr;
}
}
`,Nt=v`:host {
flex: 1 1 auto;
display: block;
width: 100%;
}
`,Pt=(new Date).getFullYear();let Tt=class extends dt{render(){return W`<slot>&copy; ${Pt} Red Hat, Inc.</slot>`}};var Ut;Tt.styles=Nt,Tt=t([pt("rh-footer-copyright")],Tt);let Ht=class extends dt{constructor(){super(...arguments),this.colorPalette="darker",Ut.set(this,new h(this,{slots:["primary-start","primary-end","secondary-start","secondary-end","links-primary","links-secondary","tertiary"]}))}render(){const t=e(this,Ut,"f").hasSlotted("tertiary");return W`
<div class="section global-base ${mt({hasTertiary:t})}" part="section base">
<slot name="base">
<div class="global-logo" part="logo">
<slot name="logo">
<a class="global-logo-anchor"
part="logo-anchor"
href="/en"
alt="Visit Red Hat">
<svg title="Red Hat logo"
class="global-logo-image"
part="logo-image"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 192 145">
<defs>
<style>
.band {
fill: transparent;
}
</style>
</defs>
<path class="band" d="M157.77,62.61a14,14,0,0,1,.31,3.42c0,14.88-18.1,17.46-30.61,17.46C78.83,83.49,42.53,53.26,42.53,44a6.43,6.43,0,0,1,.22-1.94l-3.66,9.06a18.45,18.45,0,0,0-1.51,7.33c0,18.11,41,45.48,87.74,45.48,20.69,0,36.43-7.76,36.43-21.77,0-1.08,0-1.94-1.73-10.13Z" />
<path class="cls-1" d="M127.47,83.49c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89,8.69,103.76.5,97.51.5,91.69.5,90,8,83.06,8c-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33C22.27,52,.5,55,.5,74.22c0,31.48,74.59,70.28,133.65,70.28,45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78" />
</svg>
</a>
</slot>
</div>
<div class="global-primary" part="primary">
<slot name="primary">
<div class="global-primary-start" part="primary-start" ?hidden=${!e(this,Ut,"f").hasSlotted("primary-start")}>
<slot name="primary-start"></slot>
</div>
<div class="global-links-primary" part="links-primary" ?hidden=${!e(this,Ut,"f").hasSlotted("links-primary")}>
<slot name="links-primary"></slot>
</div>
<div class="global-primary-end" part="primary-end" ?hidden=${!e(this,Ut,"f").hasSlotted("primary-end")}>
<slot name="primary-end"></slot>
</div>
</slot>
</div>
<div class="spacer" part="spacer"></div>
<div class="global-secondary" part="secondary">
<slot name="secondary">
<div class="global-secondary-start" part="secondary-start" ?hidden=${!e(this,Ut,"f").hasSlotted("secondary-start")}>
<slot name="secondary-start"></slot>
</div>
<div class="global-links-secondary" part="links-secondary" ?hidden=${!e(this,Ut,"f").hasSlotted("links-secondary")}>
<slot name="links-secondary"></slot>
</div>
<div class="global-secondary-end" part="secondary-end" ?hidden=${!e(this,Ut,"f").hasSlotted("secondary-end")}>
<slot name="secondary-end"></slot>
</div>
</slot>
</div>
<div class="global-tertiary" part="tertiary" ?hidden=${!e(this,Ut,"f").hasSlotted("tertiary")}>
<slot name="tertiary"></slot>
</div>
</slot>
</div>
`}};var Ot;Ut=new WeakMap,Ht.styles=[wt,Mt],t([function(t,e){t.constructor.addInitializer((t=>{t.__colorContextProvider=new _t(t,Ot)}))},function(t){return(e,o)=>void 0!==o?((t,e,o)=>{e.constructor.createProperty(o,t)})(t,e,o):ut(t,e)}({reflect:!0,attribute:"color-palette"})],Ht.prototype,"colorPalette",void 0),Ht=t([pt("rh-global-footer")],Ht);
Raw
rhds-lightdom.css
/* Via pfe-base.css */
:is(rh-footer, rh-global-footer) a {
color: var(--rh-color-link-inline-on-dark, var(--rh-color-blue-200, #73bcf7));
text-decoration: none;
}
:is(rh-footer, rh-global-footer) a:hover {
color: var(--rh-color-link-inline-hover-on-dark, var(--rh-color-blue-100, #bee1f4));
text-decoration: underline;
}
:is(rh-footer, rh-global-footer) a:is(:focus, :focus-within) {
color: var(--rh-color-link-inline-focus-on-dark, var(--rh-color-blue-100, #bee1f4));
text-decoration: underline;
}
:is(rh-footer, rh-global-footer) a:visited {
color: var(--rh-color-link-inline-visited-on-dark, var(--rh-color-blue-100, #bee1f4));
text-decoration: none;
}
/* ensure links fully wrap img tags */
:is(rh-footer, rh-global-footer) a[slot^="logo"] {
display: block;
}
:is(rh-footer) a[slot^="logo"] > img {
display: block;
width: auto;
height: 100%;
height: var(--rh-size-icon-04, 40px);
}
rh-footer [slot^="links"] a {
gap: var(--rh-footer-links-gap, var(--rh-space-2xs, 8px));
}
:is(rh-footer, rh-global-footer) [slot^="links"] li {
margin: 0;
padding: 0;
display: contents;
}
:is(rh-footer, rh-global-footer) [slot^="links"] a {
display: block;
color: var(--rh-color-text-primary-on-dark, #ffffff) !important;
font-size: var(--rh-footer-link-font-size, var(--rh-font-size-body-text-sm, 0.875rem));
}
rh-global-footer [slot^="links"] a {
font-size: inherit;
}
/**
* No JS Experience
*/
rh-footer,
rh-global-footer {
/* Make these variables available at no-js time */
--_section-side-gap: var(--rh-footer-section-side-gap, var(--rh-space-2xl, 32px));
}
rh-footer:not(:defined) {
background-color: var(--rh-color-surface-darker, #212427);
width: 100%;
display: grid;
grid-template-areas:
"footer"
"global";
grid-template-rows: 1fr auto;
min-height: var(--rh-footer-nojs-min-height, 750px);
}
rh-global-footer:not(:defined):before {
grid-area: global;
}
/* Adding styles to logo */
rh-footer:not(:defined) > [slot="logo"] {
padding: var(--rh-space-2xl, 32px) var(--_section-side-gap);
}
/* A11y hide child components */
rh-footer:not(:defined) > *:not([slot="logo"], rh-global-footer),
rh-global-footer:not(:defined) > * {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
rh-global-footer:not(:defined) {
background-color: var(--rh-color-surface-darkest, #151515);
display: block;
width: 100%;
min-height: 176px;
}
:root {
--rh-font-size-text-xl: 1.125em;
--rh-line-height-body-text: 150%;
--rh-font-size-body-text-xs: 0.75em;
--rh-font-size-body-text-sm: 0.875em;
--rh-font-size-body-text-md: 1em;
--rh-font-size-body-text-lg: 1.125em;
--rh-font-size-code-xs: 0.75em;
--rh-footer-link-header-mobile-font-size: 0.875em;
}
rh-alert,
rh-blockquote,
rh-cta,
rh-dialog,
rh-footer,
rh-pagination,
rh-secondary-nav,
rh-stat,
rh-tooltip {
font-size: initial;
}
rh-footer::part(links-accordion-header) {
--rh-footer-link-header-font-size: 0.875em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment