blob: 1f82f808c3c73b60ae465455a176c353cfbc5895 [file] [log] [blame]
var h=class{constructor(e){this.el=e;this.setActive=e=>{this.activeIndex=(e+this.slides.length)%this.slides.length,this.el.setAttribute("data-slide-index",String(this.activeIndex));for(let t of this.dots)t.classList.remove("go-Carousel-dot--active");this.dots[this.activeIndex].classList.add("go-Carousel-dot--active");for(let t of this.slides)t.setAttribute("aria-hidden","true");this.slides[this.activeIndex].removeAttribute("aria-hidden"),this.liveRegion.textContent="Slide "+(this.activeIndex+1)+" of "+this.slides.length};var t;this.slides=Array.from(e.querySelectorAll(".go-Carousel-slide")),this.dots=[],this.liveRegion=document.createElement("div"),this.activeIndex=Number((t=e.getAttribute("data-slide-index"))!=null?t:0),this.initSlides(),this.initArrows(),this.initDots(),this.initLiveRegion()}initSlides(){for(let[e,t]of this.slides.entries())e!==this.activeIndex&&t.setAttribute("aria-hidden","true")}initArrows(){var t,i;let e=document.createElement("ul");e.classList.add("go-Carousel-arrows"),e.innerHTML=`
<li>
<button class="go-Carousel-prevSlide" aria-label="Go to previous slide">
<img class="go-Icon" height="24" width="24" src="/static/shared/icon/arrow_left_gm_grey_24dp.svg" alt="">
</button>
</li>
<li>
<button class="go-Carousel-nextSlide" aria-label="Go to next slide">
<img class="go-Icon" height="24" width="24" src="/static/shared/icon/arrow_right_gm_grey_24dp.svg" alt="">
</button>
</li>
`,(t=e.querySelector(".go-Carousel-prevSlide"))==null||t.addEventListener("click",()=>this.setActive(this.activeIndex-1)),(i=e.querySelector(".go-Carousel-nextSlide"))==null||i.addEventListener("click",()=>this.setActive(this.activeIndex+1)),this.el.append(e)}initDots(){let e=document.createElement("ul");e.classList.add("go-Carousel-dots");for(let t=0;t<this.slides.length;t++){let i=document.createElement("li"),s=document.createElement("button");s.classList.add("go-Carousel-dot"),t===this.activeIndex&&s.classList.add("go-Carousel-dot--active"),s.innerHTML=`<span class="go-Carousel-obscured">Slide ${t+1}</span>`,s.addEventListener("click",()=>this.setActive(t)),i.append(s),e.append(i),this.dots.push(s)}this.el.append(e)}initLiveRegion(){this.liveRegion.setAttribute("aria-live","polite"),this.liveRegion.setAttribute("aria-atomic","true"),this.liveRegion.setAttribute("class","go-Carousel-obscured"),this.liveRegion.textContent=`Slide ${this.activeIndex+1} of ${this.slides.length}`,this.el.appendChild(this.liveRegion)}};var u=class{constructor(e){this.el=e;this.el.addEventListener("change",t=>{let i=t.target,s=i.value;i.value.startsWith("/")||(s="/"+s),window.location.href=s})}};function m(l){let e=document.createElement("label");e.classList.add("go-Label"),e.setAttribute("aria-label","Menu");let t=document.createElement("select");t.classList.add("go-Select","js-selectNav"),e.appendChild(t);let i=document.createElement("optgroup");i.label="Outline",t.appendChild(i);let s={},r;for(let n of l.treeitems){if(Number(n.depth)>4)continue;n.groupTreeitem?(r=s[n.groupTreeitem.label],r||(r=s[n.groupTreeitem.label]=document.createElement("optgroup"),r.label=n.groupTreeitem.label,t.appendChild(r))):r=i;let a=document.createElement("option");a.label=n.label,a.textContent=n.label,a.value=n.el.href.replace(window.location.origin,"").replace("/",""),r.appendChild(a)}return l.addObserver(n=>{var d;let a=n.el.hash,o=(d=t.querySelector(`[value$="${a}"]`))==null?void 0:d.value;o&&(t.value=o)},50),e}var c=class{constructor(e){this.el=e;this.handleResize=()=>{this.el.style.setProperty("--js-tree-height","100vh"),this.el.style.setProperty("--js-tree-height",this.el.clientHeight+"px")};this.treeitems=[],this.firstChars=[],this.firstTreeitem=null,this.lastTreeitem=null,this.observerCallbacks=[],this.init()}init(){this.handleResize(),window.addEventListener("resize",this.handleResize),this.findTreeItems(),this.updateVisibleTreeitems(),this.observeTargets(),this.firstTreeitem&&(this.firstTreeitem.el.tabIndex=0)}observeTargets(){this.addObserver(i=>{this.expandTreeitem(i),this.setSelected(i)});let e=new Map,t=new IntersectionObserver(i=>{for(let s of i)e.set(s.target.id,s.isIntersecting||s.intersectionRatio===1);for(let[s,r]of e)if(r){let n=this.treeitems.find(a=>{var o;return(o=a.el)==null?void 0:o.href.endsWith(`#${s}`)});if(n)for(let a of this.observerCallbacks)a(n);break}},{threshold:1,rootMargin:"-60px 0px 0px 0px"});for(let i of this.treeitems.map(s=>s.el.getAttribute("href")))if(i){let s=i.replace(window.location.origin,"").replace("/","").replace("#",""),r=document.getElementById(s);r&&t.observe(r)}}addObserver(e,t=200){this.observerCallbacks.push(g(e,t))}setFocusToNextItem(e){let t=null;for(let i=e.index+1;i<this.treeitems.length;i++){let s=this.treeitems[i];if(s.isVisible){t=s;break}}t&&this.setFocusToItem(t)}setFocusToPreviousItem(e){let t=null;for(let i=e.index-1;i>-1;i--){let s=this.treeitems[i];if(s.isVisible){t=s;break}}t&&this.setFocusToItem(t)}setFocusToParentItem(e){e.groupTreeitem&&this.setFocusToItem(e.groupTreeitem)}setFocusToFirstItem(){this.firstTreeitem&&this.setFocusToItem(this.firstTreeitem)}setFocusToLastItem(){this.lastTreeitem&&this.setFocusToItem(this.lastTreeitem)}setSelected(e){var t;for(let i of this.el.querySelectorAll('[aria-expanded="true"]'))i!==e.el&&((t=i.nextElementSibling)!=null&&t.contains(e.el)||i.setAttribute("aria-expanded","false"));for(let i of this.el.querySelectorAll("[aria-selected]"))i!==e.el&&i.setAttribute("aria-selected","false");e.el.setAttribute("aria-selected","true"),this.updateVisibleTreeitems(),this.setFocusToItem(e,!1)}expandTreeitem(e){let t=e;for(;t;)t.isExpandable&&t.el.setAttribute("aria-expanded","true"),t=t.groupTreeitem;this.updateVisibleTreeitems()}expandAllSiblingItems(e){for(let t of this.treeitems)t.groupTreeitem===e.groupTreeitem&&t.isExpandable&&this.expandTreeitem(t)}collapseTreeitem(e){let t=null;e.isExpanded()?t=e:t=e.groupTreeitem,t&&(t.el.setAttribute("aria-expanded","false"),this.updateVisibleTreeitems(),this.setFocusToItem(t))}setFocusByFirstCharacter(e,t){let i,s;t=t.toLowerCase(),i=e.index+1,i===this.treeitems.length&&(i=0),s=this.getIndexFirstChars(i,t),s===-1&&(s=this.getIndexFirstChars(0,t)),s>-1&&this.setFocusToItem(this.treeitems[s])}findTreeItems(){let e=(t,i)=>{let s=i,r=t.firstElementChild;for(;r;)(r.tagName==="A"||r.tagName==="SPAN")&&(s=new p(r,this,i),this.treeitems.push(s),this.firstChars.push(s.label.substring(0,1).toLowerCase())),r.firstElementChild&&e(r,s),r=r.nextElementSibling};e(this.el,null),this.treeitems.map((t,i)=>t.index=i)}updateVisibleTreeitems(){this.firstTreeitem=this.treeitems[0];for(let e of this.treeitems){let t=e.groupTreeitem;for(e.isVisible=!0;t&&t.el!==this.el;)t.isExpanded()||(e.isVisible=!1),t=t.groupTreeitem;e.isVisible&&(this.lastTreeitem=e)}}setFocusToItem(e,t=!0){e.el.tabIndex=0,t&&e.el.focus();for(let i of this.treeitems)i!==e&&(i.el.tabIndex=-1)}getIndexFirstChars(e,t){for(let i=e;i<this.firstChars.length;i++)if(this.treeitems[i].isVisible&&t===this.firstChars[i])return i;return-1}},p=class{constructor(e,t,i){var n,a,o,d,f;e.tabIndex=-1,this.el=e,this.groupTreeitem=i,this.label=(a=(n=e.textContent)==null?void 0:n.trim())!=null?a:"",this.tree=t,this.depth=((i==null?void 0:i.depth)||0)+1,this.index=0;let s=e.parentElement;(s==null?void 0:s.tagName.toLowerCase())==="li"&&(s==null||s.setAttribute("role","none")),e.setAttribute("aria-level",this.depth+""),e.getAttribute("aria-label")&&(this.label=(d=(o=e==null?void 0:e.getAttribute("aria-label"))==null?void 0:o.trim())!=null?d:""),this.isExpandable=!1,this.isVisible=!1,this.isInGroup=!!i;let r=e.nextElementSibling;for(;r;){if(r.tagName.toLowerCase()=="ul"){let b=`${(f=i==null?void 0:i.label)!=null?f:""} nav group ${this.label}`.replace(/[\W_]+/g,"_");e.setAttribute("aria-owns",b),e.setAttribute("aria-expanded","false"),r.setAttribute("role","group"),r.setAttribute("id",b),this.isExpandable=!0;break}r=r.nextElementSibling}this.init()}init(){this.el.tabIndex=-1,this.el.getAttribute("role")||this.el.setAttribute("role","treeitem"),this.el.addEventListener("keydown",this.handleKeydown.bind(this)),this.el.addEventListener("click",this.handleClick.bind(this)),this.el.addEventListener("focus",this.handleFocus.bind(this)),this.el.addEventListener("blur",this.handleBlur.bind(this))}isExpanded(){return this.isExpandable?this.el.getAttribute("aria-expanded")==="true":!1}isSelected(){return this.el.getAttribute("aria-selected")==="true"}handleClick(e){e.target!==this.el&&e.target!==this.el.firstElementChild||(this.isExpandable&&(this.isExpanded()&&this.isSelected()?this.tree.collapseTreeitem(this):this.tree.expandTreeitem(this),e.stopPropagation()),this.tree.setSelected(this))}handleFocus(){var t;let e=this.el;this.isExpandable&&(e=(t=e.firstElementChild)!=null?t:e),e.classList.add("focus")}handleBlur(){var t;let e=this.el;this.isExpandable&&(e=(t=e.firstElementChild)!=null?t:e),e.classList.remove("focus")}handleKeydown(e){if(e.altKey||e.ctrlKey||e.metaKey)return;let t=!1;switch(e.key){case" ":case"Enter":this.isExpandable?(this.isExpanded()&&this.isSelected()?this.tree.collapseTreeitem(this):this.tree.expandTreeitem(this),t=!0):e.stopPropagation(),this.tree.setSelected(this);break;case"ArrowUp":this.tree.setFocusToPreviousItem(this),t=!0;break;case"ArrowDown":this.tree.setFocusToNextItem(this),t=!0;break;case"ArrowRight":this.isExpandable&&(this.isExpanded()?this.tree.setFocusToNextItem(this):this.tree.expandTreeitem(this)),t=!0;break;case"ArrowLeft":this.isExpandable&&this.isExpanded()?(this.tree.collapseTreeitem(this),t=!0):this.isInGroup&&(this.tree.setFocusToParentItem(this),t=!0);break;case"Home":this.tree.setFocusToFirstItem(),t=!0;break;case"End":this.tree.setFocusToLastItem(),t=!0;break;default:e.key.length===1&&e.key.match(/\S/)&&(e.key=="*"?this.tree.expandAllSiblingItems(this):this.tree.setFocusByFirstCharacter(this,e.key),t=!0);break}t&&(e.stopPropagation(),e.preventDefault())}};function g(l,e){let t;return(...i)=>{let s=()=>{t=null,l(...i)};t&&clearTimeout(t),t=setTimeout(s,e)}}window.addEventListener("load",()=>{var t,i;let l=document.querySelector(".js-tree");if(l){let s=new c(l),r=m(s);(t=document.querySelector(".js-mainNavMobile"))==null||t.appendChild(r)}let e=document.querySelector(".Outline .js-tree");if(e){let s=new c(e),r=m(s);(i=document.querySelector(".Outline .js-select"))==null||i.appendChild(r)}for(let s of document.querySelectorAll(".js-toggleTheme"))s.addEventListener("click",r=>{let n=r.currentTarget.getAttribute("data-value");document.documentElement.setAttribute("data-theme",String(n))});for(let s of document.querySelectorAll(".js-toggleLayout"))s.addEventListener("click",r=>{let n=r.currentTarget.getAttribute("data-value");document.documentElement.setAttribute("data-layout",String(n))});for(let s of document.querySelectorAll(".js-selectNav"))new u(s);for(let s of document.querySelectorAll(".js-carousel"))new h(s)});customElements.define("go-color",class extends HTMLElement{constructor(){var e;super(),this.style.setProperty("display","contents");let l=this.id;this.removeAttribute("id"),this.innerHTML=`
<div style="--color: var(${l});" class="GoColor-circle"></div>
<span>
<div id="${l}" class="go-textLabel GoColor-title">${l.replace("--color-","").replaceAll("-"," ")}</div>
<pre class="StringifyElement-markup">var(${l})</pre>
</span>
`,(e=this.querySelector("pre"))==null||e.addEventListener("click",()=>{navigator.clipboard.writeText(`var(${l})`)})}});customElements.define("go-icon",class extends HTMLElement{constructor(){super(),this.style.setProperty("display","contents");let l=this.getAttribute("name");this.innerHTML=`<p id="icon-${l}" class="go-textLabel GoIcon-title">${l.replaceAll("_"," ")}</p>
<stringify-el>
<img class="go-Icon" height="24" width="24" src="/static/shared/icon/${l}_gm_grey_24dp.svg" alt="">
</stringify-el>
`}});customElements.define("clone-el",class extends HTMLElement{constructor(){var t;super(),this.style.setProperty("display","contents");let l=this.getAttribute("selector");if(!l)return;let e=" "+((t=document.querySelector(l))==null?void 0:t.outerHTML);this.innerHTML=`
<stringify-el collapsed>${e}</stringify-el>
`}});customElements.define("stringify-el",class extends HTMLElement{constructor(){var i;super(),this.style.setProperty("display","contents");let l=this.innerHTML,e=this.id?` id="${this.id}"`:"";this.removeAttribute("id");let t='<pre class="StringifyElement-markup">'+v(T(l))+"</pre>";this.hasAttribute("collapsed")&&(t=`<details class="StringifyElement-details"><summary>Markup</summary>${t}</details>`),this.innerHTML=`<span${e}>${l}</span>${t}`,(i=this.querySelector("pre"))==null||i.addEventListener("click",()=>{navigator.clipboard.writeText(l)})}});function T(l){return l.split(`
`).reduce((e,t)=>{if(e.result.length===0){let i=t.indexOf("<");e.start=i===-1?0:i}return t=t.slice(e.start),t&&e.result.push(t),e},{result:[],start:0}).result.join(`
`)}function v(l){var e;return(e=l==null?void 0:l.replaceAll("<","&lt;"))==null?void 0:e.replaceAll(">","&gt;")}
/**
* @license
* Copyright 2021 The Go Authors. All rights reserved.
* Use of this source code is governed by a BSD-style
* license that can be found in the LICENSE file.
*/
//# sourceMappingURL=styleguide.js.map