Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@patternfly/pfe-accordion
Advanced tools
@patternfly/pfe-accordion - npm Package Compare versions
Comparing version 1.0.0-prerelease.8 to 1.0.0-prerelease.9
@@ -7,3 +7,3 @@ { | ||
| }, | ||
| "version": "1.0.0-prerelease.8", | ||
| "version": "1.0.0-prerelease.9", | ||
| "publishConfig": { | ||
@@ -28,7 +28,7 @@ "access": "public" | ||
| "dependencies": { | ||
| "@patternfly/pfe-sass": "^1.0.0-prerelease.8", | ||
| "@patternfly/pfelement": "^1.0.0-prerelease.8" | ||
| "@patternfly/pfe-sass": "^1.0.0-prerelease.9", | ||
| "@patternfly/pfelement": "^1.0.0-prerelease.9" | ||
| }, | ||
| "generator-pfelement-version": "0.5.5", | ||
| "gitHead": "d60adb94c4945f22c939f7806cf7d0718987bddb" | ||
| "gitHead": "2afa7eb77db4973d5d46090414a4d12932cc735b" | ||
| } |
@@ -1,669 +0,2 @@ | ||
| import PFElement from "../pfelement/pfelement.js"; | ||
| /* | ||
| * Copyright 2019 Red Hat, Inc. | ||
| * | ||
| * Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| * of this software and associated documentation files (the "Software"), to deal | ||
| * in the Software without restriction, including without limitation the rights | ||
| * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| * copies of the Software, and to permit persons to whom the Software is | ||
| * furnished to do so, subject to the following conditions: | ||
| * | ||
| * The above copyright notice and this permission notice shall be included in | ||
| * all copies or substantial portions of the Software. | ||
| * | ||
| * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| * SOFTWARE. | ||
| * | ||
| */ | ||
| // https://tc39.github.io/ecma262/#sec-array.prototype.findIndex | ||
| if (!Array.prototype.findIndex) { | ||
| Object.defineProperty(Array.prototype, "findIndex", { | ||
| value: function(predicate) { | ||
| // 1. Let O be ? ToObject(this value). | ||
| if (this == null) { | ||
| throw new TypeError('"this" is null or not defined'); | ||
| } | ||
| var o = Object(this); | ||
| // 2. Let len be ? ToLength(? Get(O, "length")). | ||
| var len = o.length >>> 0; | ||
| // 3. If IsCallable(predicate) is false, throw a TypeError exception. | ||
| if (typeof predicate !== "function") { | ||
| throw new TypeError("predicate must be a function"); | ||
| } | ||
| // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. | ||
| var thisArg = arguments[1]; | ||
| // 5. Let k be 0. | ||
| var k = 0; | ||
| // 6. Repeat, while k < len | ||
| while (k < len) { | ||
| // a. Let Pk be ! ToString(k). | ||
| // b. Let kValue be ? Get(O, Pk). | ||
| // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). | ||
| // d. If testResult is true, return k. | ||
| var kValue = o[k]; | ||
| if (predicate.call(thisArg, kValue, k, o)) { | ||
| return k; | ||
| } | ||
| // e. Increase k by 1. | ||
| k++; | ||
| } | ||
| // 7. Return -1. | ||
| return -1; | ||
| } | ||
| }); | ||
| } | ||
| function generateId() { | ||
| return Math.random() | ||
| .toString(36) | ||
| .substr(2, 9); | ||
| } | ||
| class PfeAccordion extends PFElement { | ||
| get html() { | ||
| return ` | ||
| <style> | ||
| :host { | ||
| display: block; | ||
| position: relative; | ||
| overflow: hidden; | ||
| margin: 0; } | ||
| </style> | ||
| <slot></slot>`; | ||
| } | ||
| static get tag() { | ||
| return "pfe-accordion"; | ||
| } | ||
| get styleUrl() { | ||
| return "pfe-accordion.scss"; | ||
| } | ||
| get templateUrl() { | ||
| return "pfe-accordion.html"; | ||
| } | ||
| static get observedAttributes() { | ||
| return ["theme", "color"]; | ||
| } | ||
| static get cascadingAttributes() { | ||
| return { | ||
| color: "pfe-accordion-header" | ||
| }; | ||
| } | ||
| constructor() { | ||
| super(PfeAccordion); | ||
| } | ||
| connectedCallback() { | ||
| super.connectedCallback(); | ||
| this.setAttribute("role", "presentation"); | ||
| this.setAttribute("defined", ""); | ||
| this.addEventListener(`${PfeAccordion.tag}:change`, this._changeHandler); | ||
| this.addEventListener("keydown", this._keydownHandler); | ||
| Promise.all([ | ||
| customElements.whenDefined(PfeAccordionHeader.tag), | ||
| customElements.whenDefined(PfeAccordionPanel.tag) | ||
| ]).then(this._linkPanels()); | ||
| } | ||
| disconnectedCallback() { | ||
| this.removeEventListener(`${PfeAccordion.tag}:change`, this._changeHandler); | ||
| this.removeEventListener("keydown", this._keydownHandler); | ||
| } | ||
| attributeChangedCallback(attr, oldVal, newVal) { | ||
| super.attributeChangedCallback(attr, oldVal, newVal); | ||
| if (attr === "color") { | ||
| const headers = this.querySelectorAll(PfeAccordionHeader.tag); | ||
| if (newVal === "striped") { | ||
| [...headers].forEach((header, index) => { | ||
| const headerClass = index % 2 ? "even" : "odd"; | ||
| header.classList.add(headerClass); | ||
| }); | ||
| } else { | ||
| [...headers].forEach((header, index) => { | ||
| header.classList.remove("even", "odd"); | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| toggle(index) { | ||
| const headers = this._allHeaders(); | ||
| const panels = this._allPanels(); | ||
| const header = headers[index]; | ||
| const panel = panels[index]; | ||
| if (!header || !panel) { | ||
| return; | ||
| } | ||
| if (!header.expanded) { | ||
| this._expandHeader(header); | ||
| this._expandPanel(panel); | ||
| } else { | ||
| this._collapseHeader(header); | ||
| this._collapsePanel(panel); | ||
| } | ||
| } | ||
| expand(index) { | ||
| const headers = this._allHeaders(); | ||
| const panels = this._allPanels(); | ||
| const header = headers[index]; | ||
| const panel = panels[index]; | ||
| if (!header || !panel) { | ||
| return; | ||
| } | ||
| this._expandHeader(header); | ||
| this._expandPanel(panel); | ||
| } | ||
| expandAll() { | ||
| const headers = this._allHeaders(); | ||
| const panels = this._allPanels(); | ||
| headers.forEach(header => this._expandHeader(header)); | ||
| panels.forEach(panel => this._expandPanel(panel)); | ||
| } | ||
| collapse(index) { | ||
| const headers = this._allHeaders(); | ||
| const panels = this._allPanels(); | ||
| const header = headers[index]; | ||
| const panel = panels[index]; | ||
| if (!header || !panel) { | ||
| return; | ||
| } | ||
| this._collapseHeader(header); | ||
| this._collapsePanel(panel); | ||
| } | ||
| collapseAll() { | ||
| const headers = this._allHeaders(); | ||
| const panels = this._allPanels(); | ||
| headers.forEach(header => this._collapseHeader(header)); | ||
| panels.forEach(panel => this._collapsePanel(panel)); | ||
| } | ||
| _linkPanels() { | ||
| const headers = this._allHeaders(); | ||
| headers.forEach(header => { | ||
| const panel = this._panelForHeader(header); | ||
| header.setAttribute("aria-controls", panel.id); | ||
| panel.setAttribute("aria-labelledby", header.id); | ||
| }); | ||
| } | ||
| _changeHandler(evt) { | ||
| if (this.classList.contains("animating")) { | ||
| return; | ||
| } | ||
| const header = evt.target; | ||
| const panel = evt.target.nextElementSibling; | ||
| if (evt.detail.expanded) { | ||
| this._expandHeader(header); | ||
| this._expandPanel(panel); | ||
| } else { | ||
| this._collapseHeader(header); | ||
| this._collapsePanel(panel); | ||
| } | ||
| } | ||
| _toggle(header, panel) {} | ||
| _expandHeader(header) { | ||
| header.expanded = true; | ||
| } | ||
| _expandPanel(panel) { | ||
| if (panel.expanded) { | ||
| return; | ||
| } | ||
| panel.expanded = true; | ||
| const height = panel.getBoundingClientRect().height; | ||
| this._animate(panel, 0, height); | ||
| } | ||
| _collapseHeader(header) { | ||
| header.expanded = false; | ||
| } | ||
| _collapsePanel(panel) { | ||
| if (!panel.expanded) { | ||
| return; | ||
| } | ||
| const height = panel.getBoundingClientRect().height; | ||
| panel.expanded = false; | ||
| this._animate(panel, height, 0); | ||
| } | ||
| _animate(panel, start, end) { | ||
| panel.classList.add("animating"); | ||
| panel.style.height = `${start}px`; | ||
| requestAnimationFrame(() => { | ||
| requestAnimationFrame(() => { | ||
| panel.style.height = `${end}px`; | ||
| panel.classList.add("animating"); | ||
| panel.addEventListener("transitionend", this._transitionEndHandler); | ||
| }); | ||
| }); | ||
| } | ||
| _keydownHandler(evt) { | ||
| const currentHeader = evt.target; | ||
| if (!this._isHeader(currentHeader)) { | ||
| return; | ||
| } | ||
| let newHeader; | ||
| switch (evt.key) { | ||
| case "ArrowDown": | ||
| case "Down": | ||
| case "ArrowRight": | ||
| case "Right": | ||
| newHeader = this._nextHeader(); | ||
| break; | ||
| case "ArrowUp": | ||
| case "Up": | ||
| case "ArrowLeft": | ||
| case "Left": | ||
| newHeader = this._previousHeader(); | ||
| break; | ||
| case "Home": | ||
| newHeader = this._firstHeader(); | ||
| break; | ||
| case "End": | ||
| newHeader = this._lastHeader(); | ||
| break; | ||
| default: | ||
| return; | ||
| } | ||
| newHeader.shadowRoot.querySelector("button").focus(); | ||
| } | ||
| _transitionEndHandler(evt) { | ||
| evt.target.style.height = ""; | ||
| evt.target.classList.remove("animating"); | ||
| evt.target.removeEventListener("transitionend", this._transitionEndHandler); | ||
| } | ||
| _allHeaders() { | ||
| return [...this.querySelectorAll(PfeAccordionHeader.tag)]; | ||
| } | ||
| _allPanels() { | ||
| return [...this.querySelectorAll(PfeAccordionPanel.tag)]; | ||
| } | ||
| _panelForHeader(header) { | ||
| const next = header.nextElementSibling; | ||
| if (next.tagName.toLowerCase() !== PfeAccordionPanel.tag) { | ||
| console.error( | ||
| `${PfeAccordion.tag}: Sibling element to a header needs to be a panel` | ||
| ); | ||
| return; | ||
| } | ||
| return next; | ||
| } | ||
| _previousHeader() { | ||
| const headers = this._allHeaders(); | ||
| let newIndex = | ||
| headers.findIndex(header => header === document.activeElement) - 1; | ||
| return headers[(newIndex + headers.length) % headers.length]; | ||
| } | ||
| _nextHeader() { | ||
| const headers = this._allHeaders(); | ||
| let newIndex = | ||
| headers.findIndex(header => header === document.activeElement) + 1; | ||
| return headers[newIndex % headers.length]; | ||
| } | ||
| _firstHeader() { | ||
| const headers = this._allHeaders(); | ||
| return headers[0]; | ||
| } | ||
| _lastHeader() { | ||
| const headers = this._allHeaders(); | ||
| return headers[headers.length - 1]; | ||
| } | ||
| _isHeader(element) { | ||
| return element.tagName.toLowerCase() === PfeAccordionHeader.tag; | ||
| } | ||
| } | ||
| class PfeAccordionHeader extends PFElement { | ||
| get html() { | ||
| return ` | ||
| <style> | ||
| :host { | ||
| --pfe-accordion--main: var(--pfe-theme--color--surface--lighter, #ececec); | ||
| --pfe-accordion--aux: var(--pfe-theme--color--surface--lighter--text, #333); | ||
| --pfe-accordion--focus: var(--pfe-theme--color--surface--lighter--link--focus, #003366); | ||
| display: block; | ||
| background: var(--pfe-accordion--main); | ||
| color: var(--pfe-accordion--aux); } | ||
| :host button { | ||
| padding: calc(var(--pfe-theme--container-spacer, 1rem) * 0.75); | ||
| margin: 0; | ||
| width: 100%; | ||
| height: auto; | ||
| border: 1px solid transparent; | ||
| font-family: inherit; | ||
| font-size: var(--pfe-theme--font-size, 16px); | ||
| line-height: 1.5; | ||
| text-align: left; | ||
| background: none; | ||
| cursor: pointer; | ||
| color: var(--pfe-accordion--aux); } | ||
| :host button:focus { | ||
| outline: 1px solid var(--pfe-accordion--focus); } | ||
| :host button::-moz-focus-inner { | ||
| border: 0; } | ||
| :host button[aria-expanded] { | ||
| position: relative; | ||
| display: block; | ||
| font-weight: normal; | ||
| padding-left: calc(var(--pfe-theme--container-spacer, 1rem) * 2.5); } | ||
| :host button[aria-expanded="false"]::before { | ||
| content: ""; | ||
| position: absolute; | ||
| left: var(--pfe-theme--container-spacer, 1rem); | ||
| top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.5935em); | ||
| display: block; | ||
| border-style: solid; | ||
| border-width: 0.15em 0.15em 0 0; | ||
| height: 0.313em; | ||
| width: 0.313em; | ||
| text-align: center; | ||
| transition: transform 0.15s; | ||
| transform: rotate(45deg); } | ||
| :host button[aria-expanded="true"]::before { | ||
| content: ""; | ||
| position: absolute; | ||
| left: var(--pfe-theme--container-spacer, 1rem); | ||
| top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.5935em); | ||
| display: block; | ||
| width: 0.313em; | ||
| height: 0.313em; | ||
| border-style: solid; | ||
| border-width: 0.15em 0.15em 0 0; | ||
| text-align: center; | ||
| transition: all 0.15s; | ||
| transform: rotate(135deg); } | ||
| :host(.animating) { | ||
| transition: transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)); } | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| margin: 1px; } | ||
| :host([color="lightest"]), | ||
| :host([color="striped"].even) { | ||
| --pfe-accordion--main: var(--pfe-theme--color--surface--lightest, #fff); | ||
| --pfe-accordion--aux: var(--pfe-theme--color--surface--lightest--text, #333); | ||
| --pfe-accordion--focus: var(--pfe-theme--color--surface--lightest--link--focus, #003366); } | ||
| :host([color="lightest"]) button[aria-expanded="true"], | ||
| :host([color="striped"].even) button[aria-expanded="true"] { | ||
| border-top-color: var(--pfe-theme--color--surface--border--lightest, #ececec); | ||
| border-left-color: var(--pfe-theme--color--surface--border--lightest, #ececec); | ||
| border-right-color: var(--pfe-theme--color--surface--border--lightest, #ececec); } | ||
| :host([color="base"]) { | ||
| --pfe-accordion--main: var(--pfe-theme--color--surface--base, #dfdfdf); | ||
| --pfe-accordion--aux: var(--pfe-theme--color--surface--base--text, #333); | ||
| --pfe-accordion--focus: var(--pfe-theme--color--surface--base--link--focus, #00305b); } | ||
| :host([color="dark"]) { | ||
| --pfe-accordion--main: var(--pfe-theme--color--surface--darker, #464646); | ||
| --pfe-accordion--aux: var(--pfe-theme--color--surface--darker--text, #fff); | ||
| --pfe-accordion--focus: var(--pfe-theme--color--surface--darker--link--focus, #cce6ff); } | ||
| :host([color="darkest"]) { | ||
| --pfe-accordion--main: var(--pfe-theme--color--surface--darkest, #131313); | ||
| --pfe-accordion--aux: var(--pfe-theme--color--surface--darkest--text, #fff); | ||
| --pfe-accordion--focus: var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff); } | ||
| :host([color="accent"]) { | ||
| --pfe-accordion--main: var(--pfe-theme--color--surface--accent, #fe460d); | ||
| --pfe-accordion--aux: var(--pfe-theme--color--surface--accent--text, #fff); | ||
| --pfe-accordion--focus: var(--pfe-theme--color--surface--accent--link--focus, #cce6ff); } | ||
| :host([color="complement"]) { | ||
| --pfe-accordion--main: var(--pfe-theme--color--surface--complement, #0477a4); | ||
| --pfe-accordion--aux: var(--pfe-theme--color--surface--complement--text, #fff); | ||
| --pfe-accordion--focus: var(--pfe-theme--color--surface--complement--link--focus, #cce6ff); } | ||
| </style> | ||
| <button aria-expanded="false" role="tab"></button>`; | ||
| } | ||
| static get tag() { | ||
| return "pfe-accordion-header"; | ||
| } | ||
| get styleUrl() { | ||
| return "pfe-accordion-header.scss"; | ||
| } | ||
| get templateUrl() { | ||
| return "pfe-accordion-header.html"; | ||
| } | ||
| static get observedAttributes() { | ||
| return ["aria-expanded"]; | ||
| } | ||
| constructor() { | ||
| super(PfeAccordionHeader); | ||
| this._clickHandler = this._clickHandler.bind(this); | ||
| } | ||
| connectedCallback() { | ||
| super.connectedCallback(); | ||
| if (!this.hasAttribute("role")) { | ||
| this.setAttribute("role", "header"); | ||
| } | ||
| if (!this.id) { | ||
| this.id = `${PfeAccordionHeader.tag}-${generateId()}`; | ||
| } | ||
| this.button = this.shadowRoot.querySelector("button"); | ||
| const child = this.children[0]; | ||
| let isHeaderTag = false; | ||
| if (child) { | ||
| switch (child.tagName) { | ||
| case "H1": | ||
| case "H2": | ||
| case "H3": | ||
| case "H4": | ||
| case "H5": | ||
| case "H6": | ||
| isHeaderTag = true; | ||
| break; | ||
| } | ||
| const wrapperTag = document.createElement(child.tagName); | ||
| this.button.innerText = child.innerText; | ||
| wrapperTag.appendChild(this.button); | ||
| this.shadowRoot.appendChild(wrapperTag); | ||
| } else { | ||
| this.button.innerText = this.textContent.trim(); | ||
| } | ||
| if (!isHeaderTag) { | ||
| console.warn( | ||
| `${ | ||
| PfeAccordionHeader.tag | ||
| }: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)` | ||
| ); | ||
| } | ||
| this.addEventListener("click", this._clickHandler); | ||
| } | ||
| disconnectedCallback() { | ||
| this.removeEventListener("click", this._clickHandler); | ||
| } | ||
| get expanded() { | ||
| return this.hasAttribute("aria-expanded"); | ||
| } | ||
| set expanded(val) { | ||
| val = Boolean(val); | ||
| if (val) { | ||
| this.setAttribute("aria-expanded", true); | ||
| this.button.setAttribute("aria-expanded", true); | ||
| } else { | ||
| this.removeAttribute("aria-expanded"); | ||
| this.button.setAttribute("aria-expanded", false); | ||
| } | ||
| } | ||
| _clickHandler(event) { | ||
| this.dispatchEvent( | ||
| new CustomEvent(`${PfeAccordion.tag}:change`, { | ||
| detail: { expanded: !this.expanded }, | ||
| bubbles: true | ||
| }) | ||
| ); | ||
| } | ||
| } | ||
| class PfeAccordionPanel extends PFElement { | ||
| get html() { | ||
| return ` | ||
| <style> | ||
| :host { | ||
| display: none; | ||
| overflow: hidden; | ||
| background: var(--pfe-theme--color--surface--lightest, #fff); | ||
| will-change: height; } | ||
| :host([expanded]) { | ||
| display: block; | ||
| position: relative; } | ||
| :host(.animating) { | ||
| display: block; | ||
| transition: height 0.3s ease-in-out; } | ||
| .container { | ||
| margin: 0 1px; | ||
| border: 1px solid var(--pfe-theme--color--surface--border--lightest, #ececec); | ||
| border-top: none; | ||
| padding: var(--pfe-theme--container-spacer, 1rem); } | ||
| </style> | ||
| <div tabindex="-1" role="tabpanel"> | ||
| <div class="container"> | ||
| <slot></slot> | ||
| </div> | ||
| </div>`; | ||
| } | ||
| static get tag() { | ||
| return "pfe-accordion-panel"; | ||
| } | ||
| get styleUrl() { | ||
| return "pfe-accordion-panel.scss"; | ||
| } | ||
| get templateUrl() { | ||
| return "pfe-accordion-panel.html"; | ||
| } | ||
| constructor() { | ||
| super(PfeAccordionPanel); | ||
| } | ||
| connectedCallback() { | ||
| super.connectedCallback(); | ||
| if (!this.hasAttribute("role")) { | ||
| this.setAttribute("role", "region"); | ||
| } | ||
| if (!this.id) { | ||
| this.id = `${PfeAccordionPanel.tag}-${generateId()}`; | ||
| } | ||
| } | ||
| get expanded() { | ||
| return this.hasAttribute("expanded"); | ||
| } | ||
| set expanded(val) { | ||
| const value = Boolean(val); | ||
| if (value) { | ||
| this.setAttribute("expanded", ""); | ||
| } else { | ||
| this.removeAttribute("expanded"); | ||
| } | ||
| } | ||
| } | ||
| PFElement.create(PfeAccordionHeader); | ||
| PFElement.create(PfeAccordionPanel); | ||
| PFElement.create(PfeAccordion); | ||
| export default PfeAccordion; | ||
| import e from"../pfelement/pfelement.js";function t(){return Math.random().toString(36).substr(2,9)}Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),n=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var a=arguments[1],r=0;r<n;){var o=t[r];if(e.call(a,o,r,t))return r;r++}return-1}});class n extends e{get html(){return"<style>:host {\n display: block;\n position: relative;\n overflow: hidden;\n margin: 0; }</style>\n<slot></slot>"}static get tag(){return"pfe-accordion"}get styleUrl(){return"pfe-accordion.scss"}get templateUrl(){return"pfe-accordion.html"}static get observedAttributes(){return["theme","color"]}static get cascadingAttributes(){return{color:"pfe-accordion-header"}}constructor(){super(n)}connectedCallback(){super.connectedCallback(),this.setAttribute("role","presentation"),this.setAttribute("defined",""),this.addEventListener(`${n.tag}:change`,this._changeHandler),this.addEventListener("keydown",this._keydownHandler),Promise.all([customElements.whenDefined(a.tag),customElements.whenDefined(r.tag)]).then(this._linkPanels())}disconnectedCallback(){this.removeEventListener(`${n.tag}:change`,this._changeHandler),this.removeEventListener("keydown",this._keydownHandler)}attributeChangedCallback(e,t,n){if(super.attributeChangedCallback(e,t,n),"color"===e){const e=this.querySelectorAll(a.tag);"striped"===n?[...e].forEach((e,t)=>{const n=t%2?"even":"odd";e.classList.add(n)}):[...e].forEach((e,t)=>{e.classList.remove("even","odd")})}}toggle(e){const t=this._allHeaders(),n=this._allPanels(),a=t[e],r=n[e];a&&r&&(a.expanded?(this._collapseHeader(a),this._collapsePanel(r)):(this._expandHeader(a),this._expandPanel(r)))}expand(e){const t=this._allHeaders(),n=this._allPanels(),a=t[e],r=n[e];a&&r&&(this._expandHeader(a),this._expandPanel(r))}expandAll(){const e=this._allHeaders(),t=this._allPanels();e.forEach(e=>this._expandHeader(e)),t.forEach(e=>this._expandPanel(e))}collapse(e){const t=this._allHeaders(),n=this._allPanels(),a=t[e],r=n[e];a&&r&&(this._collapseHeader(a),this._collapsePanel(r))}collapseAll(){const e=this._allHeaders(),t=this._allPanels();e.forEach(e=>this._collapseHeader(e)),t.forEach(e=>this._collapsePanel(e))}_linkPanels(){this._allHeaders().forEach(e=>{const t=this._panelForHeader(e);e.setAttribute("aria-controls",t.id),t.setAttribute("aria-labelledby",e.id)})}_changeHandler(e){if(this.classList.contains("animating"))return;const t=e.target,n=e.target.nextElementSibling;e.detail.expanded?(this._expandHeader(t),this._expandPanel(n)):(this._collapseHeader(t),this._collapsePanel(n))}_toggle(e,t){}_expandHeader(e){e.expanded=!0}_expandPanel(e){if(e.expanded)return;e.expanded=!0;const t=e.getBoundingClientRect().height;this._animate(e,0,t)}_collapseHeader(e){e.expanded=!1}_collapsePanel(e){if(!e.expanded)return;const t=e.getBoundingClientRect().height;e.expanded=!1,this._animate(e,t,0)}_animate(e,t,n){e.classList.add("animating"),e.style.height=`${t}px`,requestAnimationFrame(()=>{requestAnimationFrame(()=>{e.style.height=`${n}px`,e.classList.add("animating"),e.addEventListener("transitionend",this._transitionEndHandler)})})}_keydownHandler(e){const t=e.target;if(!this._isHeader(t))return;let n;switch(e.key){case"ArrowDown":case"Down":case"ArrowRight":case"Right":n=this._nextHeader();break;case"ArrowUp":case"Up":case"ArrowLeft":case"Left":n=this._previousHeader();break;case"Home":n=this._firstHeader();break;case"End":n=this._lastHeader();break;default:return}n.shadowRoot.querySelector("button").focus()}_transitionEndHandler(e){e.target.style.height="",e.target.classList.remove("animating"),e.target.removeEventListener("transitionend",this._transitionEndHandler)}_allHeaders(){return[...this.querySelectorAll(a.tag)]}_allPanels(){return[...this.querySelectorAll(r.tag)]}_panelForHeader(e){const t=e.nextElementSibling;if(t.tagName.toLowerCase()===r.tag)return t;console.error(`${n.tag}: Sibling element to a header needs to be a panel`)}_previousHeader(){const e=this._allHeaders();let t=e.findIndex(e=>e===document.activeElement)-1;return e[(t+e.length)%e.length]}_nextHeader(){const e=this._allHeaders();let t=e.findIndex(e=>e===document.activeElement)+1;return e[t%e.length]}_firstHeader(){return this._allHeaders()[0]}_lastHeader(){const e=this._allHeaders();return e[e.length-1]}_isHeader(e){return e.tagName.toLowerCase()===a.tag}}class a extends e{get html(){return'<style>:host {\n --pfe-accordion--main: var(--pfe-theme--color--surface--lighter, #ececec);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--lighter--text, #333);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--lighter--link--focus, #003366);\n display: block;\n background: var(--pfe-accordion--main);\n color: var(--pfe-accordion--aux); }\n :host button {\n padding: calc(var(--pfe-theme--container-spacer, 1rem) * 0.75);\n margin: 0;\n width: 100%;\n height: auto;\n border: 1px solid transparent;\n font-family: inherit;\n font-size: var(--pfe-theme--font-size, 16px);\n line-height: 1.5;\n text-align: left;\n background: none;\n cursor: pointer;\n color: var(--pfe-accordion--aux); }\n :host button:focus {\n outline: 1px solid var(--pfe-accordion--focus); }\n :host button::-moz-focus-inner {\n border: 0; }\n :host button[aria-expanded] {\n position: relative;\n display: block;\n font-weight: normal;\n padding-left: calc(var(--pfe-theme--container-spacer, 1rem) * 2.5); }\n :host button[aria-expanded="false"]::before {\n content: "";\n position: absolute;\n left: var(--pfe-theme--container-spacer, 1rem);\n top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.5935em);\n display: block;\n border-style: solid;\n border-width: 0.15em 0.15em 0 0;\n height: 0.313em;\n width: 0.313em;\n text-align: center;\n transition: transform 0.15s;\n transform: rotate(45deg); }\n :host button[aria-expanded="true"]::before {\n content: "";\n position: absolute;\n left: var(--pfe-theme--container-spacer, 1rem);\n top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.5935em);\n display: block;\n width: 0.313em;\n height: 0.313em;\n border-style: solid;\n border-width: 0.15em 0.15em 0 0;\n text-align: center;\n transition: all 0.15s;\n transform: rotate(135deg); }\n\n:host(.animating) {\n transition: transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)); }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin: 1px; }\n\n:host([color="lightest"]),\n:host([color="striped"].even) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--lightest--text, #333);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--lightest--link--focus, #003366); }\n :host([color="lightest"]) button[aria-expanded="true"],\n :host([color="striped"].even) button[aria-expanded="true"] {\n border-top-color: var(--pfe-theme--color--surface--border--lightest, #ececec);\n border-left-color: var(--pfe-theme--color--surface--border--lightest, #ececec);\n border-right-color: var(--pfe-theme--color--surface--border--lightest, #ececec); }\n\n:host([color="base"]) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--base, #dfdfdf);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--base--text, #333);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--base--link--focus, #00305b); }\n\n:host([color="dark"]) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--darker, #464646);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--darker--text, #fff);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--darker--link--focus, #cce6ff); }\n\n:host([color="darkest"]) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--darkest, #131313);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--darkest--text, #fff);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff); }\n\n:host([color="accent"]) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--accent, #fe460d);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--accent--text, #fff);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--accent--link--focus, #cce6ff); }\n\n:host([color="complement"]) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--complement, #0477a4);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--complement--text, #fff);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--complement--link--focus, #cce6ff); }</style>\n<button aria-expanded="false" role="tab"></button>'}static get tag(){return"pfe-accordion-header"}get styleUrl(){return"pfe-accordion-header.scss"}get templateUrl(){return"pfe-accordion-header.html"}static get observedAttributes(){return["aria-expanded"]}constructor(){super(a),this._clickHandler=this._clickHandler.bind(this)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","header"),this.id||(this.id=`${a.tag}-${t()}`),this.button=this.shadowRoot.querySelector("button");const e=this.children[0];let n=!1;if(e){switch(e.tagName){case"H1":case"H2":case"H3":case"H4":case"H5":case"H6":n=!0}const t=document.createElement(e.tagName);this.button.innerText=e.innerText,t.appendChild(this.button),this.shadowRoot.appendChild(t)}else this.button.innerText=this.textContent.trim();n||console.warn(`${a.tag}: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`),this.addEventListener("click",this._clickHandler)}disconnectedCallback(){this.removeEventListener("click",this._clickHandler)}get expanded(){return this.hasAttribute("aria-expanded")}set expanded(e){(e=Boolean(e))?(this.setAttribute("aria-expanded",!0),this.button.setAttribute("aria-expanded",!0)):(this.removeAttribute("aria-expanded"),this.button.setAttribute("aria-expanded",!1))}_clickHandler(e){this.dispatchEvent(new CustomEvent(`${n.tag}:change`,{detail:{expanded:!this.expanded},bubbles:!0}))}}class r extends e{get html(){return'<style>:host {\n display: none;\n overflow: hidden;\n background: var(--pfe-theme--color--surface--lightest, #fff);\n will-change: height; }\n\n:host([expanded]) {\n display: block;\n position: relative; }\n\n:host(.animating) {\n display: block;\n transition: height 0.3s ease-in-out; }\n\n.container {\n margin: 0 1px;\n border: 1px solid var(--pfe-theme--color--surface--border--lightest, #ececec);\n border-top: none;\n padding: var(--pfe-theme--container-spacer, 1rem); }</style>\n<div tabindex="-1" role="tabpanel">\n <div class="container">\n <slot></slot>\n </div>\n</div>'}static get tag(){return"pfe-accordion-panel"}get styleUrl(){return"pfe-accordion-panel.scss"}get templateUrl(){return"pfe-accordion-panel.html"}constructor(){super(r)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","region"),this.id||(this.id=`${r.tag}-${t()}`)}get expanded(){return this.hasAttribute("expanded")}set expanded(e){Boolean(e)?this.setAttribute("expanded",""):this.removeAttribute("expanded")}}e.create(a),e.create(r),e.create(n);export default n; | ||
| //# sourceMappingURL=pfe-accordion.js.map |
@@ -1,2 +0,2 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../pfelement/pfelement.umd")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd"],t):e.PfeAccordion=t(e.PFElement)}(this,function(n){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n;var o=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(){function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}}(),c=function e(t,n,r){null===t&&(t=Function.prototype);var a=Object.getOwnPropertyDescriptor(t,n);if(void 0===a){var o=Object.getPrototypeOf(t);return null===o?void 0:e(o,n,r)}if("value"in a)return a.value;var i=a.get;return void 0!==i?i.call(r):void 0},l=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},s=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},d=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)};function a(){return Math.random().toString(36).substr(2,9)}Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),n=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var r=arguments[1],a=0;a<n;){var o=t[a];if(e.call(r,o,a,t))return a;a++}return-1}});var t=function(e){function a(){return o(this,a),s(this,(a.__proto__||Object.getPrototypeOf(a)).call(this,a))}return l(a,n),i(a,[{key:"html",get:function(){return"\n<style>\n:host {\n display: block;\n position: relative;\n overflow: hidden;\n margin: 0; }\n</style>\n<slot></slot>"}},{key:"styleUrl",get:function(){return"pfe-accordion.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion.html"}}],[{key:"tag",get:function(){return"pfe-accordion"}},{key:"observedAttributes",get:function(){return["theme","color"]}},{key:"cascadingAttributes",get:function(){return{color:"pfe-accordion-header"}}}]),i(a,[{key:"connectedCallback",value:function(){c(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"connectedCallback",this).call(this),this.setAttribute("role","presentation"),this.setAttribute("defined",""),this.addEventListener(a.tag+":change",this._changeHandler),this.addEventListener("keydown",this._keydownHandler),Promise.all([customElements.whenDefined(f.tag),customElements.whenDefined(r.tag)]).then(this._linkPanels())}},{key:"disconnectedCallback",value:function(){this.removeEventListener(a.tag+":change",this._changeHandler),this.removeEventListener("keydown",this._keydownHandler)}},{key:"attributeChangedCallback",value:function(e,t,n){if(c(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"attributeChangedCallback",this).call(this,e,t,n),"color"===e){var r=this.querySelectorAll(f.tag);"striped"===n?[].concat(d(r)).forEach(function(e,t){var n=t%2?"even":"odd";e.classList.add(n)}):[].concat(d(r)).forEach(function(e,t){e.classList.remove("even","odd")})}}},{key:"toggle",value:function(e){var t=this._allHeaders(),n=this._allPanels(),r=t[e],a=n[e];r&&a&&(r.expanded?(this._collapseHeader(r),this._collapsePanel(a)):(this._expandHeader(r),this._expandPanel(a)))}},{key:"expand",value:function(e){var t=this._allHeaders(),n=this._allPanels(),r=t[e],a=n[e];r&&a&&(this._expandHeader(r),this._expandPanel(a))}},{key:"expandAll",value:function(){var t=this,e=this._allHeaders(),n=this._allPanels();e.forEach(function(e){return t._expandHeader(e)}),n.forEach(function(e){return t._expandPanel(e)})}},{key:"collapse",value:function(e){var t=this._allHeaders(),n=this._allPanels(),r=t[e],a=n[e];r&&a&&(this._collapseHeader(r),this._collapsePanel(a))}},{key:"collapseAll",value:function(){var t=this,e=this._allHeaders(),n=this._allPanels();e.forEach(function(e){return t._collapseHeader(e)}),n.forEach(function(e){return t._collapsePanel(e)})}},{key:"_linkPanels",value:function(){var n=this;this._allHeaders().forEach(function(e){var t=n._panelForHeader(e);e.setAttribute("aria-controls",t.id),t.setAttribute("aria-labelledby",e.id)})}},{key:"_changeHandler",value:function(e){if(!this.classList.contains("animating")){var t=e.target,n=e.target.nextElementSibling;e.detail.expanded?(this._expandHeader(t),this._expandPanel(n)):(this._collapseHeader(t),this._collapsePanel(n))}}},{key:"_toggle",value:function(e,t){}},{key:"_expandHeader",value:function(e){e.expanded=!0}},{key:"_expandPanel",value:function(e){if(!e.expanded){e.expanded=!0;var t=e.getBoundingClientRect().height;this._animate(e,0,t)}}},{key:"_collapseHeader",value:function(e){e.expanded=!1}},{key:"_collapsePanel",value:function(e){if(e.expanded){var t=e.getBoundingClientRect().height;e.expanded=!1,this._animate(e,t,0)}}},{key:"_animate",value:function(e,t,n){var r=this;e.classList.add("animating"),e.style.height=t+"px",requestAnimationFrame(function(){requestAnimationFrame(function(){e.style.height=n+"px",e.classList.add("animating"),e.addEventListener("transitionend",r._transitionEndHandler)})})}},{key:"_keydownHandler",value:function(e){var t=e.target;if(this._isHeader(t)){var n=void 0;switch(e.key){case"ArrowDown":case"Down":case"ArrowRight":case"Right":n=this._nextHeader();break;case"ArrowUp":case"Up":case"ArrowLeft":case"Left":n=this._previousHeader();break;case"Home":n=this._firstHeader();break;case"End":n=this._lastHeader();break;default:return}n.shadowRoot.querySelector("button").focus()}}},{key:"_transitionEndHandler",value:function(e){e.target.style.height="",e.target.classList.remove("animating"),e.target.removeEventListener("transitionend",this._transitionEndHandler)}},{key:"_allHeaders",value:function(){return[].concat(d(this.querySelectorAll(f.tag)))}},{key:"_allPanels",value:function(){return[].concat(d(this.querySelectorAll(r.tag)))}},{key:"_panelForHeader",value:function(e){var t=e.nextElementSibling;if(t.tagName.toLowerCase()===r.tag)return t;console.error(a.tag+": Sibling element to a header needs to be a panel")}},{key:"_previousHeader",value:function(){var e=this._allHeaders(),t=e.findIndex(function(e){return e===document.activeElement})-1;return e[(t+e.length)%e.length]}},{key:"_nextHeader",value:function(){var e=this._allHeaders(),t=e.findIndex(function(e){return e===document.activeElement})+1;return e[t%e.length]}},{key:"_firstHeader",value:function(){return this._allHeaders()[0]}},{key:"_lastHeader",value:function(){var e=this._allHeaders();return e[e.length-1]}},{key:"_isHeader",value:function(e){return e.tagName.toLowerCase()===f.tag}}]),a}(),f=function(e){function r(){o(this,r);var e=s(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,r));return e._clickHandler=e._clickHandler.bind(e),e}return l(r,n),i(r,[{key:"html",get:function(){return'\n<style>\n:host {\n --pfe-accordion--main: var(--pfe-theme--color--surface--lighter, #ececec);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--lighter--text, #333);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--lighter--link--focus, #003366);\n display: block;\n background: var(--pfe-accordion--main);\n color: var(--pfe-accordion--aux); }\n :host button {\n padding: calc(var(--pfe-theme--container-spacer, 1rem) * 0.75);\n margin: 0;\n width: 100%;\n height: auto;\n border: 1px solid transparent;\n font-family: inherit;\n font-size: var(--pfe-theme--font-size, 16px);\n line-height: 1.5;\n text-align: left;\n background: none;\n cursor: pointer;\n color: var(--pfe-accordion--aux); }\n :host button:focus {\n outline: 1px solid var(--pfe-accordion--focus); }\n :host button::-moz-focus-inner {\n border: 0; }\n :host button[aria-expanded] {\n position: relative;\n display: block;\n font-weight: normal;\n padding-left: calc(var(--pfe-theme--container-spacer, 1rem) * 2.5); }\n :host button[aria-expanded="false"]::before {\n content: "";\n position: absolute;\n left: var(--pfe-theme--container-spacer, 1rem);\n top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.5935em);\n display: block;\n border-style: solid;\n border-width: 0.15em 0.15em 0 0;\n height: 0.313em;\n width: 0.313em;\n text-align: center;\n transition: transform 0.15s;\n transform: rotate(45deg); }\n :host button[aria-expanded="true"]::before {\n content: "";\n position: absolute;\n left: var(--pfe-theme--container-spacer, 1rem);\n top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.5935em);\n display: block;\n width: 0.313em;\n height: 0.313em;\n border-style: solid;\n border-width: 0.15em 0.15em 0 0;\n text-align: center;\n transition: all 0.15s;\n transform: rotate(135deg); }\n\n:host(.animating) {\n transition: transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)); }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin: 1px; }\n\n:host([color="lightest"]),\n:host([color="striped"].even) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--lightest--text, #333);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--lightest--link--focus, #003366); }\n :host([color="lightest"]) button[aria-expanded="true"],\n :host([color="striped"].even) button[aria-expanded="true"] {\n border-top-color: var(--pfe-theme--color--surface--border--lightest, #ececec);\n border-left-color: var(--pfe-theme--color--surface--border--lightest, #ececec);\n border-right-color: var(--pfe-theme--color--surface--border--lightest, #ececec); }\n\n:host([color="base"]) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--base, #dfdfdf);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--base--text, #333);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--base--link--focus, #00305b); }\n\n:host([color="dark"]) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--darker, #464646);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--darker--text, #fff);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--darker--link--focus, #cce6ff); }\n\n:host([color="darkest"]) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--darkest, #131313);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--darkest--text, #fff);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff); }\n\n:host([color="accent"]) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--accent, #fe460d);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--accent--text, #fff);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--accent--link--focus, #cce6ff); }\n\n:host([color="complement"]) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--complement, #0477a4);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--complement--text, #fff);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--complement--link--focus, #cce6ff); }\n</style>\n<button aria-expanded="false" role="tab"></button>'}},{key:"styleUrl",get:function(){return"pfe-accordion-header.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion-header.html"}}],[{key:"tag",get:function(){return"pfe-accordion-header"}},{key:"observedAttributes",get:function(){return["aria-expanded"]}}]),i(r,[{key:"connectedCallback",value:function(){c(r.prototype.__proto__||Object.getPrototypeOf(r.prototype),"connectedCallback",this).call(this),this.hasAttribute("role")||this.setAttribute("role","header"),this.id||(this.id=r.tag+"-"+a()),this.button=this.shadowRoot.querySelector("button");var e=this.children[0],t=!1;if(e){switch(e.tagName){case"H1":case"H2":case"H3":case"H4":case"H5":case"H6":t=!0}var n=document.createElement(e.tagName);this.button.innerText=e.innerText,n.appendChild(this.button),this.shadowRoot.appendChild(n)}else this.button.innerText=this.textContent.trim();t||console.warn(r.tag+": The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)"),this.addEventListener("click",this._clickHandler)}},{key:"disconnectedCallback",value:function(){this.removeEventListener("click",this._clickHandler)}},{key:"_clickHandler",value:function(e){this.dispatchEvent(new CustomEvent(t.tag+":change",{detail:{expanded:!this.expanded},bubbles:!0}))}},{key:"expanded",get:function(){return this.hasAttribute("aria-expanded")},set:function(e){(e=Boolean(e))?(this.setAttribute("aria-expanded",!0),this.button.setAttribute("aria-expanded",!0)):(this.removeAttribute("aria-expanded"),this.button.setAttribute("aria-expanded",!1))}}]),r}(),r=function(e){function t(){return o(this,t),s(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,t))}return l(t,n),i(t,[{key:"html",get:function(){return'\n<style>\n:host {\n display: none;\n overflow: hidden;\n background: var(--pfe-theme--color--surface--lightest, #fff);\n will-change: height; }\n\n:host([expanded]) {\n display: block;\n position: relative; }\n\n:host(.animating) {\n display: block;\n transition: height 0.3s ease-in-out; }\n\n.container {\n margin: 0 1px;\n border: 1px solid var(--pfe-theme--color--surface--border--lightest, #ececec);\n border-top: none;\n padding: var(--pfe-theme--container-spacer, 1rem); }\n</style>\n<div tabindex="-1" role="tabpanel">\n <div class="container">\n <slot></slot>\n </div>\n</div>'}},{key:"styleUrl",get:function(){return"pfe-accordion-panel.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion-panel.html"}}],[{key:"tag",get:function(){return"pfe-accordion-panel"}}]),i(t,[{key:"connectedCallback",value:function(){c(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this).call(this),this.hasAttribute("role")||this.setAttribute("role","region"),this.id||(this.id=t.tag+"-"+a())}},{key:"expanded",get:function(){return this.hasAttribute("expanded")},set:function(e){Boolean(e)?this.setAttribute("expanded",""):this.removeAttribute("expanded")}}]),t}();return n.create(f),n.create(r),n.create(t),t}); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../pfelement/pfelement.umd")):"function"==typeof define&&define.amd?define(["../pfelement/pfelement.umd"],t):e.PfeAccordion=t(e.PFElement)}(this,function(n){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n;var o=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(){function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}}(),c=function e(t,n,r){null===t&&(t=Function.prototype);var a=Object.getOwnPropertyDescriptor(t,n);if(void 0===a){var o=Object.getPrototypeOf(t);return null===o?void 0:e(o,n,r)}if("value"in a)return a.value;var i=a.get;return void 0!==i?i.call(r):void 0},l=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},s=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},d=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)};function a(){return Math.random().toString(36).substr(2,9)}Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(e){if(null==this)throw new TypeError('"this" is null or not defined');var t=Object(this),n=t.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var r=arguments[1],a=0;a<n;){var o=t[a];if(e.call(r,o,a,t))return a;a++}return-1}});var t=function(e){function a(){return o(this,a),s(this,(a.__proto__||Object.getPrototypeOf(a)).call(this,a))}return l(a,n),i(a,[{key:"html",get:function(){return"<style>:host {\n display: block;\n position: relative;\n overflow: hidden;\n margin: 0; }</style>\n<slot></slot>"}},{key:"styleUrl",get:function(){return"pfe-accordion.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion.html"}}],[{key:"tag",get:function(){return"pfe-accordion"}},{key:"observedAttributes",get:function(){return["theme","color"]}},{key:"cascadingAttributes",get:function(){return{color:"pfe-accordion-header"}}}]),i(a,[{key:"connectedCallback",value:function(){c(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"connectedCallback",this).call(this),this.setAttribute("role","presentation"),this.setAttribute("defined",""),this.addEventListener(a.tag+":change",this._changeHandler),this.addEventListener("keydown",this._keydownHandler),Promise.all([customElements.whenDefined(f.tag),customElements.whenDefined(r.tag)]).then(this._linkPanels())}},{key:"disconnectedCallback",value:function(){this.removeEventListener(a.tag+":change",this._changeHandler),this.removeEventListener("keydown",this._keydownHandler)}},{key:"attributeChangedCallback",value:function(e,t,n){if(c(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"attributeChangedCallback",this).call(this,e,t,n),"color"===e){var r=this.querySelectorAll(f.tag);"striped"===n?[].concat(d(r)).forEach(function(e,t){var n=t%2?"even":"odd";e.classList.add(n)}):[].concat(d(r)).forEach(function(e,t){e.classList.remove("even","odd")})}}},{key:"toggle",value:function(e){var t=this._allHeaders(),n=this._allPanels(),r=t[e],a=n[e];r&&a&&(r.expanded?(this._collapseHeader(r),this._collapsePanel(a)):(this._expandHeader(r),this._expandPanel(a)))}},{key:"expand",value:function(e){var t=this._allHeaders(),n=this._allPanels(),r=t[e],a=n[e];r&&a&&(this._expandHeader(r),this._expandPanel(a))}},{key:"expandAll",value:function(){var t=this,e=this._allHeaders(),n=this._allPanels();e.forEach(function(e){return t._expandHeader(e)}),n.forEach(function(e){return t._expandPanel(e)})}},{key:"collapse",value:function(e){var t=this._allHeaders(),n=this._allPanels(),r=t[e],a=n[e];r&&a&&(this._collapseHeader(r),this._collapsePanel(a))}},{key:"collapseAll",value:function(){var t=this,e=this._allHeaders(),n=this._allPanels();e.forEach(function(e){return t._collapseHeader(e)}),n.forEach(function(e){return t._collapsePanel(e)})}},{key:"_linkPanels",value:function(){var n=this;this._allHeaders().forEach(function(e){var t=n._panelForHeader(e);e.setAttribute("aria-controls",t.id),t.setAttribute("aria-labelledby",e.id)})}},{key:"_changeHandler",value:function(e){if(!this.classList.contains("animating")){var t=e.target,n=e.target.nextElementSibling;e.detail.expanded?(this._expandHeader(t),this._expandPanel(n)):(this._collapseHeader(t),this._collapsePanel(n))}}},{key:"_toggle",value:function(e,t){}},{key:"_expandHeader",value:function(e){e.expanded=!0}},{key:"_expandPanel",value:function(e){if(!e.expanded){e.expanded=!0;var t=e.getBoundingClientRect().height;this._animate(e,0,t)}}},{key:"_collapseHeader",value:function(e){e.expanded=!1}},{key:"_collapsePanel",value:function(e){if(e.expanded){var t=e.getBoundingClientRect().height;e.expanded=!1,this._animate(e,t,0)}}},{key:"_animate",value:function(e,t,n){var r=this;e.classList.add("animating"),e.style.height=t+"px",requestAnimationFrame(function(){requestAnimationFrame(function(){e.style.height=n+"px",e.classList.add("animating"),e.addEventListener("transitionend",r._transitionEndHandler)})})}},{key:"_keydownHandler",value:function(e){var t=e.target;if(this._isHeader(t)){var n=void 0;switch(e.key){case"ArrowDown":case"Down":case"ArrowRight":case"Right":n=this._nextHeader();break;case"ArrowUp":case"Up":case"ArrowLeft":case"Left":n=this._previousHeader();break;case"Home":n=this._firstHeader();break;case"End":n=this._lastHeader();break;default:return}n.shadowRoot.querySelector("button").focus()}}},{key:"_transitionEndHandler",value:function(e){e.target.style.height="",e.target.classList.remove("animating"),e.target.removeEventListener("transitionend",this._transitionEndHandler)}},{key:"_allHeaders",value:function(){return[].concat(d(this.querySelectorAll(f.tag)))}},{key:"_allPanels",value:function(){return[].concat(d(this.querySelectorAll(r.tag)))}},{key:"_panelForHeader",value:function(e){var t=e.nextElementSibling;if(t.tagName.toLowerCase()===r.tag)return t;console.error(a.tag+": Sibling element to a header needs to be a panel")}},{key:"_previousHeader",value:function(){var e=this._allHeaders(),t=e.findIndex(function(e){return e===document.activeElement})-1;return e[(t+e.length)%e.length]}},{key:"_nextHeader",value:function(){var e=this._allHeaders(),t=e.findIndex(function(e){return e===document.activeElement})+1;return e[t%e.length]}},{key:"_firstHeader",value:function(){return this._allHeaders()[0]}},{key:"_lastHeader",value:function(){var e=this._allHeaders();return e[e.length-1]}},{key:"_isHeader",value:function(e){return e.tagName.toLowerCase()===f.tag}}]),a}(),f=function(e){function r(){o(this,r);var e=s(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,r));return e._clickHandler=e._clickHandler.bind(e),e}return l(r,n),i(r,[{key:"html",get:function(){return'<style>:host {\n --pfe-accordion--main: var(--pfe-theme--color--surface--lighter, #ececec);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--lighter--text, #333);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--lighter--link--focus, #003366);\n display: block;\n background: var(--pfe-accordion--main);\n color: var(--pfe-accordion--aux); }\n :host button {\n padding: calc(var(--pfe-theme--container-spacer, 1rem) * 0.75);\n margin: 0;\n width: 100%;\n height: auto;\n border: 1px solid transparent;\n font-family: inherit;\n font-size: var(--pfe-theme--font-size, 16px);\n line-height: 1.5;\n text-align: left;\n background: none;\n cursor: pointer;\n color: var(--pfe-accordion--aux); }\n :host button:focus {\n outline: 1px solid var(--pfe-accordion--focus); }\n :host button::-moz-focus-inner {\n border: 0; }\n :host button[aria-expanded] {\n position: relative;\n display: block;\n font-weight: normal;\n padding-left: calc(var(--pfe-theme--container-spacer, 1rem) * 2.5); }\n :host button[aria-expanded="false"]::before {\n content: "";\n position: absolute;\n left: var(--pfe-theme--container-spacer, 1rem);\n top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.5935em);\n display: block;\n border-style: solid;\n border-width: 0.15em 0.15em 0 0;\n height: 0.313em;\n width: 0.313em;\n text-align: center;\n transition: transform 0.15s;\n transform: rotate(45deg); }\n :host button[aria-expanded="true"]::before {\n content: "";\n position: absolute;\n left: var(--pfe-theme--container-spacer, 1rem);\n top: calc((var(--pfe-theme--container-spacer, 1rem) * 0.75) + 0.5935em);\n display: block;\n width: 0.313em;\n height: 0.313em;\n border-style: solid;\n border-width: 0.15em 0.15em 0 0;\n text-align: center;\n transition: all 0.15s;\n transform: rotate(135deg); }\n\n:host(.animating) {\n transition: transform 0.3s var(--pfe-theme--animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946)); }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin: 1px; }\n\n:host([color="lightest"]),\n:host([color="striped"].even) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--lightest, #fff);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--lightest--text, #333);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--lightest--link--focus, #003366); }\n :host([color="lightest"]) button[aria-expanded="true"],\n :host([color="striped"].even) button[aria-expanded="true"] {\n border-top-color: var(--pfe-theme--color--surface--border--lightest, #ececec);\n border-left-color: var(--pfe-theme--color--surface--border--lightest, #ececec);\n border-right-color: var(--pfe-theme--color--surface--border--lightest, #ececec); }\n\n:host([color="base"]) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--base, #dfdfdf);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--base--text, #333);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--base--link--focus, #00305b); }\n\n:host([color="dark"]) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--darker, #464646);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--darker--text, #fff);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--darker--link--focus, #cce6ff); }\n\n:host([color="darkest"]) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--darkest, #131313);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--darkest--text, #fff);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--darkest--link--focus, #cce6ff); }\n\n:host([color="accent"]) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--accent, #fe460d);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--accent--text, #fff);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--accent--link--focus, #cce6ff); }\n\n:host([color="complement"]) {\n --pfe-accordion--main: var(--pfe-theme--color--surface--complement, #0477a4);\n --pfe-accordion--aux: var(--pfe-theme--color--surface--complement--text, #fff);\n --pfe-accordion--focus: var(--pfe-theme--color--surface--complement--link--focus, #cce6ff); }</style>\n<button aria-expanded="false" role="tab"></button>'}},{key:"styleUrl",get:function(){return"pfe-accordion-header.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion-header.html"}}],[{key:"tag",get:function(){return"pfe-accordion-header"}},{key:"observedAttributes",get:function(){return["aria-expanded"]}}]),i(r,[{key:"connectedCallback",value:function(){c(r.prototype.__proto__||Object.getPrototypeOf(r.prototype),"connectedCallback",this).call(this),this.hasAttribute("role")||this.setAttribute("role","header"),this.id||(this.id=r.tag+"-"+a()),this.button=this.shadowRoot.querySelector("button");var e=this.children[0],t=!1;if(e){switch(e.tagName){case"H1":case"H2":case"H3":case"H4":case"H5":case"H6":t=!0}var n=document.createElement(e.tagName);this.button.innerText=e.innerText,n.appendChild(this.button),this.shadowRoot.appendChild(n)}else this.button.innerText=this.textContent.trim();t||console.warn(r.tag+": The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)"),this.addEventListener("click",this._clickHandler)}},{key:"disconnectedCallback",value:function(){this.removeEventListener("click",this._clickHandler)}},{key:"_clickHandler",value:function(e){this.dispatchEvent(new CustomEvent(t.tag+":change",{detail:{expanded:!this.expanded},bubbles:!0}))}},{key:"expanded",get:function(){return this.hasAttribute("aria-expanded")},set:function(e){(e=Boolean(e))?(this.setAttribute("aria-expanded",!0),this.button.setAttribute("aria-expanded",!0)):(this.removeAttribute("aria-expanded"),this.button.setAttribute("aria-expanded",!1))}}]),r}(),r=function(e){function t(){return o(this,t),s(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,t))}return l(t,n),i(t,[{key:"html",get:function(){return'<style>:host {\n display: none;\n overflow: hidden;\n background: var(--pfe-theme--color--surface--lightest, #fff);\n will-change: height; }\n\n:host([expanded]) {\n display: block;\n position: relative; }\n\n:host(.animating) {\n display: block;\n transition: height 0.3s ease-in-out; }\n\n.container {\n margin: 0 1px;\n border: 1px solid var(--pfe-theme--color--surface--border--lightest, #ececec);\n border-top: none;\n padding: var(--pfe-theme--container-spacer, 1rem); }</style>\n<div tabindex="-1" role="tabpanel">\n <div class="container">\n <slot></slot>\n </div>\n</div>'}},{key:"styleUrl",get:function(){return"pfe-accordion-panel.scss"}},{key:"templateUrl",get:function(){return"pfe-accordion-panel.html"}}],[{key:"tag",get:function(){return"pfe-accordion-panel"}}]),i(t,[{key:"connectedCallback",value:function(){c(t.prototype.__proto__||Object.getPrototypeOf(t.prototype),"connectedCallback",this).call(this),this.hasAttribute("role")||this.setAttribute("role","region"),this.id||(this.id=t.tag+"-"+a())}},{key:"expanded",get:function(){return this.hasAttribute("expanded")},set:function(e){Boolean(e)?this.setAttribute("expanded",""):this.removeAttribute("expanded")}}]),t}();return n.create(f),n.create(r),n.create(t),t}); | ||
| //# sourceMappingURL=pfe-accordion.umd.js.map |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-8.04%
122909
- Lines of code
- decreased by-47.54%
565
- Number of low supply chain risk alerts
- increased by50%
3
- Number of medium supply chain risk alerts
- increased byInfinity%
1