You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 lines
39 KiB
2 lines
39 KiB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("../../pfelement/dist/pfelement.umd")):"function"==typeof define&&define.amd?define(["../../pfelement/dist/pfelement.umd"],t):e.PfeTabs=t(e.PFElement)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e,Array.prototype.find||Object.defineProperty(Array.prototype,"find",{value:function(e,t){if(null==this)throw new TypeError('"this" is null or not defined');var r=Object(this),a=r.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var o=t,i=0;i<a;){var n=r[i];if(e.call(o,n,i,r))return n;i++}},configurable:!0,writable:!0}),Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(e,t){if(null==this)throw new TypeError('"this" is null or not defined');var r=Object(this),a=r.length>>>0;if("function"!=typeof e)throw new TypeError("predicate must be a function");for(var o=t,i=0;i<a;){var n=r[i];if(e.call(o,n,i,r))return i;i++}return-1},configurable:!0,writable:!0}),Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector);var t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},r=function(e,t,r){return t&&a(e.prototype,t),r&&a(e,r),e};function a(e,t){for(var r=0;r<t.length;r++){var a=t[r];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function n(e,t,r){null===e&&(e=Function.prototype);var a=Object.getOwnPropertyDescriptor(e,t);if(void 0===a){var o=Object.getPrototypeOf(e);return null===o?void 0:n(o,t,r)}if("value"in a)return a.value;var i=a.get;return void 0!==i?i.call(r):void 0}function o(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)}function l(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}var i=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=40,s=37,c=39,f=38,p=36,h=35,b=!!window.URLSearchParams,v={childList:!0,subtree:!0},u={characterData:!0,childList:!0,subtree:!0};function m(){return Math.random().toString(36).substr(2,9)}var g=(o(k,e),r(k,[{key:"html",get:function(){return'<style>@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host{color:#151515!important}}:root{--pfe-tabs--Display:block;--pfe-tabs--Padding:0;--pfe-tabs__tabs--FlexDirection:row;--pfe-tabs__tabs--Width:auto;--pfe-tabs__tabs--Padding:0;--pfe-tabs__tabs--BorderTop:0;--pfe-tabs__tabs--BorderRight:0;--pfe-tabs__tabs--BorderLeft:0;--pfe-tabs__tabs--BorderColor:var(--pfe-theme--color--surface--border, #d2d2d2);--pfe-tabs__tabs--BorderBottom:var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-tabs__tabs--BorderColor, var(--pfe-theme--color--surface--border, #d2d2d2));--pfe-tabs__panels--Width:auto}:host{display:block;display:var(--pfe-tabs--Display,block);padding:0;padding:var(--pfe-tabs--Padding,0)}:host .tabs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;flex-direction:var(--pfe-tabs__tabs--FlexDirection,row);width:auto;width:var(--pfe-tabs__tabs--Width,auto);border-top:0;border-top:var(--pfe-tabs__tabs--BorderTop,0);border-right:0;border-right:var(--pfe-tabs__tabs--BorderRight,0);border-bottom:1px solid #d2d2d2;border-bottom:var(--pfe-tabs__tabs--BorderBottom,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-tabs__tabs--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2)));border-left:0;border-left:var(--pfe-tabs__tabs--BorderLeft,0);padding:0;padding:var(--pfe-tabs__tabs--Padding,0)}:host .panels{width:auto;width:var(--pfe-tabs__panels--Width,auto)}:host(:not([vertical])[pfe-tab-align=center]) .tabs{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}@media screen and (min-width:768px){:host([vertical]){--pfe-tabs--Display:flex;--pfe-tabs__tabs--FlexDirection:column;--pfe-tabs__tabs--Width:20%;--pfe-tabs__tabs--BorderRight:var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-tabs--BorderColor);--pfe-tabs__tabs--BorderBottom:0;--pfe-tabs__panels--Width:80%;--pfe-tabs__panels--PaddingRight:var(--pfe-theme--container-padding, 16px)}}@media screen and (min-width:768px) and (-ms-high-contrast:active),screen and (min-width:768px) and (-ms-high-contrast:none){:host([vertical]){display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}:host([vertical]) .tabs{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:22.22%;border-right:1px solid #d2d2d2;border-right:1px solid var(--pfe-theme--color--surface--border,#d2d2d2);border-bottom:0}:host([vertical]) .panels{width:77.8%;padding-right:1em}}@media screen and (min-width:768px) and (-ms-high-contrast:active),screen and (min-width:768px) and (-ms-high-contrast:none){:host([vertical][pfe-variant=earth]) .tabs{padding:1em 0 0 0}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host(:not([pfe-variant=earth])){background-color:#fff;background-color:var(--pfe-theme--color--surface--lightest,#fff);color:#151515;color:var(--pfe-theme--color--text,#151515)}}:host([pfe-variant=earth]){--pfe-tabs__tabs--PaddingLeft:var(--pfe-theme--container-padding, 16px)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([pfe-variant=earth]) .tabs{padding-left:1em}}:host([on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #8476d1);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([on=light]){--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host([vertical]) .tabs-prefix,:host([vertical]) .tabs-suffix{left:0;top:0;content:" ";height:calc(16px * 2);height:calc(var(--pfe-theme--container-padding,16px) * 2);width:1px;position:relative}:host([vertical][pfe-variant=wind]) .tabs-prefix,:host([vertical][pfe-variant=wind]) .tabs-suffix{background-color:#d2d2d2;background-color:var(--pfe-tabs__tabs--BorderColor,var(--pfe-theme--color--surface--border,#d2d2d2))}:host(:not([vertical])[pfe-variant=earth]) .tabs-prefix{left:0;top:0;content:" ";height:1px;width:16px;width:var(--pfe-theme--container-padding,16px);position:relative}@media screen and (min-width:768px){:host(:not([vertical])[pfe-variant=earth]) .tabs-prefix{width:calc(16px * 2);width:calc(var(--pfe-theme--container-padding,16px) * 2)}}\n/*# sourceMappingURL=pfe-tabs.min.css.map */\n</style><div class="tabs">\n <div class="tabs-prefix"></div>\n <slot name="tab"></slot>\n <div class="tabs-suffix"></div>\n</div>\n<div class="panels">\n <slot name="panel"></slot>\n</div>'}},{key:"styleUrl",get:function(){return"pfe-tabs.scss"}},{key:"templateUrl",get:function(){return"pfe-tabs.html"}},{key:"schemaUrl",get:function(){return"pfe-tabs.json"}},{key:"selectedIndex",get:function(){return this.getAttribute("selected-index")},set:function(e){this.setAttribute("selected-index",e)}},{key:"tabHistory",get:function(){return this.hasAttribute("pfe-tab-history")}}],[{key:"version",get:function(){return"1.0.0-prerelease.55"}},{key:"properties",get:function(){return{vertical:{title:"Vertical orientation",type:"boolean",default:!1,prefixed:!1},variant:{title:"Variant",type:"string",enum:["wind","earth"],default:"wind",prefixed:!0},"tab-history":{title:"Tab history",type:"boolean",default:!1,prefixed:!0}}}},{key:"slots",get:function(){return{tab:{title:"Tab",type:"array",namedSlot:!0,items:{oneOf:[{$ref:"raw"}]}},panel:{title:"Panel",type:"array",namedSlot:!0,items:{oneOf:[{$ref:"raw"}]}}}}},{key:"tag",get:function(){return"pfe-tabs"}},{key:"observedAttributes",get:function(){return["vertical","selected-index","pfe-variant","pfe-tab-history"]}},{key:"events",get:function(){return{hiddenTab:this.tag+":hidden-tab",shownTab:this.tag+":shown-tab"}}}]),r(k,[{key:"connectedCallback",value:function(){var e=this;n(k.prototype.__proto__||Object.getPrototypeOf(k.prototype),"connectedCallback",this).call(this),this.addEventListener("keydown",this._onKeyDown),this.addEventListener("click",this._onClick),Promise.all([customElements.whenDefined(x.tag),customElements.whenDefined(y.tag)]).then(function(){e.children.length&&e._init(),e._observer.observe(e,v)})}},{key:"disconnectedCallback",value:function(){var t=this;this.removeEventListener("keydown",this._onKeyDown),this._allTabs().forEach(function(e){return e.removeEventListener("click",t._onClick)}),this._observer.disconnect(),this.tabHistory&&window.removeEventListener("popstate",this._popstateEventHandler)}},{key:"attributeChangedCallback",value:function(e,t,r){var a=this;switch(e){case"pfe-variant":"wind"===this.getAttribute("pfe-variant")?(this._allTabs().forEach(function(e){return e.setAttribute("pfe-variant","wind")}),this._allPanels().forEach(function(e){return e.setAttribute("pfe-variant","wind")})):"earth"===this.getAttribute("pfe-variant")&&(this._allTabs().forEach(function(e){return e.setAttribute("pfe-variant","earth")}),this._allPanels().forEach(function(e){return e.setAttribute("pfe-variant","earth")}));break;case"vertical":this.hasAttribute("vertical")?(this.setAttribute("aria-orientation","vertical"),this._allPanels().forEach(function(e){return e.setAttribute("vertical","")}),this._allTabs().forEach(function(e){return e.setAttribute("vertical","")})):(this.removeAttribute("aria-orientation"),this._allPanels().forEach(function(e){return e.removeAttribute("vertical")}),this._allTabs().forEach(function(e){return e.removeAttribute("vertical")}));break;case"selected-index":Promise.all([customElements.whenDefined(x.tag),customElements.whenDefined(y.tag)]).then(function(){a._linkPanels(),a.selectIndex(r),a._updateHistory=!0});break;case"pfe-tab-history":null===r?window.removeEventListener("popstate",this._popstateEventHandler):window.addEventListener("popstate",this._popstateEventHandler)}}},{key:"select",value:function(e){e&&("pfe-tab"===e.tagName.toLowerCase()?this.selectedIndex=this._getTabIndex(e):console.warn(k.tag+": the tab must be a pfe-tab element"))}},{key:"selectIndex",value:function(e){var t,r,a,o,i,n,d;void 0!==e&&(t=parseInt(e,10),(r=this._allTabs()[t])?(this.selected&&this.tabHistory&&this._updateHistory&&b&&(a=window.location.pathname,o=new URLSearchParams(window.location.search),i=window.location.hash,n=this.id||this.getAttribute("pfe-id"),d=r.id||r.getAttribute("pfe-id"),o.set(n,d),history.pushState({},"",a+"?"+o.toString()+i)),this._selectTab(r)):console.warn(k.tag+": tab "+e+" does not exist"))}},{key:"_init",value:function(e){var t=this;"tablist"!==this.getAttribute("role")&&this.setAttribute("role","tablist"),b&&new URLSearchParams(window.location.search);var r=this._getTabIndexFromURL();if(-1<r?(this._setFocus=!0,this.selectedIndex=r):this.hasAttribute("selected-index")||(this.selectedIndex=0),this._linked=!1,this._linkPanels(),e){var a=!0,o=!1,i=void 0;try{for(var n,d=e[Symbol.iterator]();!(a=(n=d.next()).done);a=!0){var s=n.value;"childList"===s.type&&s.addedNodes.length&&[].concat(l(s.addedNodes)).forEach(function(e){e.tagName&&(e.tagName.toLowerCase()!==x.tag&&e.tagName.toLowerCase()!==y.tag||t.variant.value&&e.setAttribute("pfe-variant",t.variant.value))})}}catch(e){o=!0,i=e}finally{try{!a&&d.return&&d.return()}finally{if(o)throw i}}}}},{key:"_linkPanels",value:function(){var r=this;this._linked||(window.ShadyCSS&&this._observer.disconnect(),this._allTabs().forEach(function(e){var t=e.nextElementSibling;"pfe-tab-panel"===t.tagName.toLowerCase()?(e.setAttribute("aria-controls",t.pfeId),t.setAttribute("aria-labelledby",e.pfeId),e.addEventListener("click",r._onClick)):console.warn(k.tag+": tab #"+e.pfeId+" is not a sibling of a <pfe-tab-panel>")}),this._linked=!0,window.ShadyCSS&&this._observer.observe(this,v))}},{key:"_allPanels",value:function(){return[].concat(l(this.children)).filter(function(e){return e.matches("pfe-tab-panel")})}},{key:"_allTabs",value:function(){return[].concat(l(this.children)).filter(function(e){return e.matches("pfe-tab")})}},{key:"_panelForTab",value:function(e){var t=e.getAttribute("aria-controls");return this.querySelector('[pfe-id="'+t+'"]')}},{key:"_prevTab",value:function(){var e=this._allTabs(),t=e.findIndex(function(e){return e.selected})-1;return e[(t+e.length)%e.length]}},{key:"_firstTab",value:function(){return this._allTabs()[0]}},{key:"_lastTab",value:function(){var e=this._allTabs();return e[e.length-1]}},{key:"_nextTab",value:function(){var e=this._allTabs(),t=e.findIndex(function(e){return e.selected})+1;return e[t%e.length]}},{key:"_getTabIndex",value:function(t){return this._allTabs().findIndex(function(e){return e.pfeId===t.pfeId})}},{key:"reset",value:function(){var e=this._allTabs(),t=this._allPanels();e.forEach(function(e){return e.selected=!1}),t.forEach(function(e){return e.hidden=!0})}},{key:"_selectTab",value:function(e){this.reset();var t=this._panelForTab(e),r=!1;if(!t)throw new Error("No panel with pfeId "+t.pfeId);this.selected&&this.selected!==e&&(r=!0,this.emitEvent(k.events.hiddenTab,{detail:{tab:this.selected}})),e.selected=!0,t.hidden=!1,this._allTabs().findIndex(function(e){return e.selected}),this.selected=e,r&&(this._setFocus&&e.focus(),this.emitEvent(k.events.shownTab,{detail:{tab:this.selected}})),this._setFocus=!1}},{key:"_onKeyDown",value:function(t){if(this._allTabs().find(function(e){return e===t.target})&&!t.altKey){var e=void 0;switch(t.keyCode){case s:case f:e=this._prevTab();break;case c:case d:e=this._nextTab();break;case p:e=this._firstTab();break;case h:e=this._lastTab();break;default:return}t.preventDefault(),this.selectedIndex=this._getTabIndex(e),this._setFocus=!0}}},{key:"_onClick",value:function(t){this._allTabs().find(function(e){return e===t.currentTarget})&&(this.selectedIndex=this._getTabIndex(t.currentTarget))}},{key:"_getTabIndexFromURL",value:function(){var e,t,r=void 0,a=-1;return b&&(e=(r=new URLSearchParams(window.location.search)).has(""+this.id)||r.has(this.getAttribute("pfe-id"))||r.has("pfe-"+this.id),r&&e&&(t=r.get(""+this.id)||r.get(this.getAttribute("pfe-id"))||r.get("pfe-"+this.id),a=this._allTabs().findIndex(function(e){return(e.id||e.getAttribute("pfe-id"))===t}))),a}},{key:"_popstateEventHandler",value:function(){var e=this._getTabIndexFromURL();this._updateHistory=!1,this.selectedIndex=-1<e?e:0}}]),k);function k(){t(this,k);var e=i(this,(k.__proto__||Object.getPrototypeOf(k)).call(this,k));return e._linked=!1,e._init=e._init.bind(e),e._onClick=e._onClick.bind(e),e._linkPanels=e._linkPanels.bind(e),e._popstateEventHandler=e._popstateEventHandler.bind(e),e._observer=new MutationObserver(e._init),e._updateHistory=!0,e}var x=(o(_,e),r(_,[{key:"html",get:function(){return'<style>:host{text-align:left;position:relative;display:block;margin:0 0 calc(1px * -1);margin:var(--pfe-tabs__tab--Margin,0 0 calc(var(--pfe-theme--ui--border-width,1px) * -1));padding:16px calc(16px * 2) 16px calc(16px * 2);padding:var(--pfe-tabs__tab--PaddingTop,var(--pfe-theme--container-padding,16px)) var(--pfe-tabs__tab--PaddingRight,calc(var(--pfe-theme--container-padding,16px) * 2)) var(--pfe-tabs__tab--PaddingBottom,var(--pfe-theme--container-padding,16px)) var(--pfe-tabs__tab--PaddingLeft,calc(var(--pfe-theme--container-padding,16px) * 2));border-style:solid;border-style:var(--pfe-theme--ui--border-style,solid);border-width:1px;border-width:var(--pfe-theme--ui--border-width,1px);border-color:transparent;border-bottom-width:3px;border-bottom-width:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px));background-color:transparent;background-color:var(--pfe-tabs--BackgroundColor,transparent);cursor:pointer;text-align:center;text-align:var(--pfe-tabs__tab--TextAlign,center);text-transform:none;text-transform:var(--pfe-tabs__tab--TextTransform,none);font-family:Overpass,Overpass,Helvetica,helvetica,arial,sans-serif;font-family:var(--pfe-theme--font-family, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);font-weight:500;font-weight:var(--pfe-theme--font-weight--normal,500);font-size:16px;font-size:var(--pfe-tabs__tab--FontSize,var(--pfe-theme--font-size,16px))}:host .pfe-tab{display:inline-block}:host .pfe-tab *{font-size:inherit;font-weight:inherit;margin:0;color:#6a6e73;color:var(--pfe-tabs--Color,var(--pfe-theme--color--text--muted,#6a6e73))}:host(:hover){border-bottom-color:#b8bbbe;border-bottom-color:var(--pfe-tabs--BorderColor--hover,#b8bbbe)}:host(:hover) .pfe-tab *{color:#151515;color:var(--pfe-tabs--Color--focus,var(--pfe-tabs--focus,var(--pfe-theme--color--text,#151515)))}:host(:active){border-bottom-color:#b8bbbe;border-bottom-color:var(--pfe-tabs--BorderColor--hover,#b8bbbe)}:host(:active) .pfe-tab *{color:#151515;color:var(--pfe-tabs--Color--focus,var(--pfe-tabs--focus,var(--pfe-theme--color--text,#151515)))}:host(:focus){border-bottom-color:#b8bbbe;border-bottom-color:var(--pfe-tabs--BorderColor--hover,#b8bbbe)}:host(:focus) .pfe-tab *{color:#151515;color:var(--pfe-tabs--Color--focus,var(--pfe-tabs--focus,var(--pfe-theme--color--text,#151515)))}:host([aria-selected=true]){border-bottom-color:#06c;border-bottom-color:var(--pfe-tabs--BorderColor,var(--pfe-tabs--highlight,var(--pfe-theme--color--ui-accent,#06c)))}:host([aria-selected=true]) .pfe-tab *{color:#151515;color:var(--pfe-tabs--Color--focus,var(--pfe-tabs--focus,var(--pfe-theme--color--text,#151515)))}:host([pfe-variant=earth][vertical]) .pfe-tab{display:inline-block}@media screen and (min-width:768px){:host([vertical]){border-bottom-color:transparent;border-bottom-width:0;border-left-color:#d2d2d2;border-left-color:var(--pfe-theme--color--surface--border,#d2d2d2);border-left-width:1px;border-left-width:var(--pfe-theme--ui--border-width,1px);padding:16px;padding:var(--pfe-theme--container-padding,16px);--pfe-tabs--Margin:0 calc(var(--pfe-theme--ui--border-width, 1px) * -1) 0 0}:host([vertical][aria-selected=true]){border-left-color:#06c;border-left-color:var(--pfe-tabs--BorderColor,var(--pfe-tabs--highlight,var(--pfe-theme--color--ui-accent,#06c)));border-left-width:3px}:host([vertical][pfe-variant=wind]){border-left:1px solid #d2d2d2;border-left:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2);text-align:left!important}:host([vertical][pfe-variant=wind][aria-selected=true]){border-right:3px solid transparent;border-right:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px)) var(--pfe-theme--ui--border-style,solid) transparent;border-left:3px solid #06c;border-left:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-tabs--BorderColor,var(--pfe-tabs--highlight,var(--pfe-theme--color--ui-accent,#06c)));padding-left:calc(16px - 2px);padding-left:calc(var(--pfe-theme--container-padding,16px) - 2px)}:host([vertical][pfe-variant=wind][aria-selected=false]){border-right:3px solid transparent;border-right:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px)) var(--pfe-theme--ui--border-style,solid) transparent}:host([vertical][pfe-variant=wind][aria-selected=false]:hover){border-right:3px solid transparent;border-right:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px)) var(--pfe-theme--ui--border-style,solid) transparent;border-bottom:0;border-left:3px solid #b8bbbe;border-left:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px)) var(--pfe-theme--ui--border-style,solid) var(--pfe-tabs--BorderColor--hover,#b8bbbe);padding-left:calc(16px - 2px);padding-left:calc(var(--pfe-theme--container-padding,16px) - 2px)}}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([pfe-variant=earth]){background-color:#f0f0f0;color:#6a6e73}}:host(:not([vertical])[pfe-variant=earth]:not([aria-selected=true]):first-of-type){border-left-color:transparent}:host(:not([vertical])[pfe-variant=earth]:not([aria-selected=true]):last-of-type){border-right-color:transparent}:host([pfe-variant=earth][aria-selected=false]){background-color:#f0f0f0;background-color:var(--pfe-tabs--BackgroundColor--inactive,var(--pfe-theme--color--surface--lighter,#f0f0f0));border-color:#d2d2d2;border-color:var(--pfe-theme--color--surface--border,#d2d2d2);border-top-width:3px;border-top-width:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px));border-top-color:transparent;border-bottom-color:#b8bbbe;border-bottom-color:var(--pfe-tabs--BorderColor--hover,#b8bbbe);border-bottom-width:1px;border-bottom-width:var(--pfe-theme--ui--border-width,1px)}:host([pfe-variant=earth][aria-selected=false]:hover){border-top-color:#b8bbbe;border-top-color:var(--pfe-tabs--BorderColor--hover,#b8bbbe)}:host([pfe-variant=earth][aria-selected=true]){background-color:#fff;background-color:var(--pfe-tabs--BackgroundColor,var(--pfe-theme--color--surface--lightest,#fff));border-bottom:0;border-left-color:#d2d2d2;border-left-color:var(--pfe-theme--color--surface--border,#d2d2d2);border-right-color:#d2d2d2;border-right-color:var(--pfe-theme--color--surface--border,#d2d2d2);border-top:solid #06c 3px;border-top:solid var(--pfe-tabs--BorderColor,var(--pfe-tabs--highlight,var(--pfe-theme--color--ui-accent,#06c))) var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px))}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([pfe-variant=earth][aria-selected=true]){color:#6a6e73;background-color:#fff;border-left:1px solid #d2d2d2;border-top:3px solid #06c;border-top:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px)) solid var(--pfe-tabs--BorderColor,var(--pfe-tabs--highlight,var(--pfe-theme--color--ui-accent,#06c)));border-bottom:0}}:host([pfe-variant=earth][aria-selected=true]:last-of-type){border-right:1px solid #d2d2d2;border-right:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2)}@media screen and (min-width:768px){:host([vertical][pfe-variant=earth]){border-top:1px solid #d2d2d2;border-top:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2);border-bottom:1px solid #d2d2d2;border-bottom:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2);border-left-width:3px;border-left-width:var(--pfe-theme--ui--border-width--active,3px);text-align:left}:host([vertical][pfe-variant=earth][aria-selected=false]:first-of-type){border-top-color:transparent;border-left:3px solid transparent;border-left:var(--pfe-tabs--BorderWidth,var(--pfe-theme--ui--border-width--active,3px)) var(--pfe-theme--ui--border-style,solid) transparent}:host([vertical][pfe-variant=earth][aria-selected=false]:last-of-type){border-bottom-color:transparent}:host([vertical][pfe-variant=earth][aria-selected=false]){border-right:0;border-bottom-color:transparent;border-left-color:transparent}:host([vertical][pfe-variant=earth][aria-selected=false]:hover){border-left-color:#b8bbbe;border-left-color:var(--pfe-tabs--BorderColor--hover,#b8bbbe);border-top-color:#d2d2d2;border-top-color:var(--pfe-theme--color--surface--border,#d2d2d2)}:host([vertical][pfe-variant=earth][aria-selected=false]:first-of-type:hover){border-left-color:#d2d2d2;border-left-color:var(--pfe-theme--color--surface--border,#d2d2d2);border-top-color:transparent}:host([vertical][pfe-variant=earth][aria-selected=true]){border-top-color:#d2d2d2;border-top-color:var(--pfe-theme--color--surface--border,#d2d2d2);border-left-color:#06c;border-left-color:var(--pfe-tabs--BorderColor,var(--pfe-tabs--highlight,var(--pfe-theme--color--ui-accent,#06c)));border-right-color:transparent;margin-right:-1px}}:host([on=dark][pfe-variant=earth]){--pfe-tabs--Color:var(--pfe-theme--color--text--on-dark, #fff);--pfe-tabs--Color--focus:var(--pfe-theme--color--text--on-dark, #fff);border-right-color:#6a6e73;border-right-color:var(--pfe-theme--color--surface--border--darker,#6a6e73);border-left-color:#6a6e73;border-left-color:var(--pfe-theme--color--surface--border--darker,#6a6e73)}:host([on=dark][pfe-variant=earth][aria-selected=false]){--pfe-tabs--Color:var(--pfe-theme--color--text--muted--on-dark, #d2d2d2);--pfe-tabs--BackgroundColor--inactive:var(--pfe-theme--color--surface--darker, #3c3f42)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([on=dark][pfe-variant=earth][aria-selected=false]){background-color:#fff!important;background-color:var(--pfe-theme--color--surface--lightest,#fff)!important}:host([on=dark][pfe-variant=earth][aria-selected=false]) .pfe-tab *{color:#151515!important}}:host([on=dark][pfe-variant=earth][aria-selected=true]){--pfe-tabs--Color--focus:var(--pfe-theme--color--text--on-dark, #fff);--pfe-tabs--BackgroundColor:var(--pfe-theme--color--surface--darkest, #151515)}:host([pfe-variant=earth][on=saturated][aria-selected=false]){--pfe-tabs--BackgroundColor:var(--pfe-theme--color--surface--lighter, #f0f0f0)}:host([pfe-variant=earth][on=saturated][aria-selected=true]){--pfe-tabs--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff)}:host([on=saturated][pfe-variant=wind]){--pfe-tabs--Color:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-tabs--Color--focus:var(--pfe-theme--color--text--on-saturated, #fff)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([on=saturated][pfe-variant=wind]){background-color:transparent}:host([on=saturated][pfe-variant=wind]) .pfe-tab *{color:#151515!important}}:host([on=saturated][pfe-variant=wind][aria-selected=true]){--pfe-tabs--Color--focus:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-tabs--BorderColor:var(--pfe-theme--color--ui-base--on-saturated, #fff)}:host([on=saturated][pfe-variant=wind][aria-selected=false]){--pfe-tabs--Color:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2)}:host([on=saturated][pfe-variant=wind][aria-selected=false]:hover){--pfe-tabs--BorderColor:var(--pfe-theme--color--surface--border, #d2d2d2)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([on=saturated][pfe-variant=wind][aria-selected=true]:last-of-type){border-left:0!important}}:host([on=dark][pfe-variant=wind]){--pfe-tabs--Color:var(--pfe-theme--color--text--on-dark, #fff);--pfe-tabs--Color--focus:var(--pfe-theme--color--text--on-dark, #fff)}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([on=dark][pfe-variant=wind]) .pfe-tab *{color:#151515!important}}:host([on=dark][pfe-variant=wind][aria-selected=false]){--pfe-tabs--Color:var(--pfe-theme--color--text--muted--on-saturated, #d2d2d2)}:host([on=dark][pfe-variant=wind][aria-selected=false]:hover){--pfe-tabs--BorderColor:var(--pfe-theme--color--surface--lightest, #fff);border-bottom-color:#f0f0f0;border-bottom-color:var(--pfe-theme--color--surface--base,#f0f0f0);--pfe-tabs__tab--BorderBottom:var(--pfe-tabs--BorderWidth, var(--pfe-theme--ui--border-width--active, 3px)) var(--pfe-theme--ui--border-style, solid) var(--pfe-theme--color--surface--border, #d2d2d2)}:host([on=dark][pfe-variant=wind][vertical][aria-selected=false]:hover){border-bottom-color:transparent}\n/*# sourceMappingURL=pfe-tab.min.css.map */\n</style><span class="pfe-tab"></span>'}},{key:"styleUrl",get:function(){return"pfe-tab.scss"}},{key:"templateUrl",get:function(){return"pfe-tab.html"}},{key:"selected",set:function(e){e=Boolean(e),this.setAttribute("aria-selected",e)},get:function(){return"true"===this.getAttribute("aria-selected")}},{key:"pfeId",get:function(){return this.getAttribute("pfe-id")},set:function(e){e&&this.setAttribute("pfe-id",e)}}],[{key:"version",get:function(){return"1.0.0-prerelease.55"}},{key:"tag",get:function(){return"pfe-tab"}},{key:"observedAttributes",get:function(){return["aria-selected"]}}]),r(_,[{key:"connectedCallback",value:function(){n(_.prototype.__proto__||Object.getPrototypeOf(_.prototype),"connectedCallback",this).call(this),this._tabItem=this.shadowRoot.querySelector("."+this.tag),(this.children.length||this.textContent.trim().length)&&this._init(),this._observer.observe(this,u)}},{key:"attributeChangedCallback",value:function(){var e=Boolean(this.selected);this.setAttribute("tabindex",e?0:-1)}},{key:"disconnectedCallback",value:function(){this._observer.disconnect()}},{key:"_init",value:function(){window.ShadyCSS&&this._observer.disconnect(),this._setTabContent(),this.pfeId||(this.pfeId=_.tag+"-"+m()),"tab"!==this.getAttribute("role")&&this.setAttribute("role","tab"),this.hasAttribute("aria-selected")||this.setAttribute("aria-selected","false"),this.hasAttribute("tabindex")||this.setAttribute("tabindex",-1),this.parentNode.hasAttribute("vertical")&&this.setAttribute("vertical",""),window.ShadyCSS&&this._observer.observe(this,u)}},{key:"_setTabContent",value:function(){var e,t,r=this.textContent.trim().replace(/\s+/g," ");r?(e="",0<this.children.length&&this.firstElementChild&&this.firstElementChild.tagName.match(/^H[1-6]/)&&(e=this.firstElementChild.tagName.toLowerCase()),t=document.createElement("h3"),0<e.length&&(t=document.createElement(e)),t.textContent=r,this._tabItem.innerHTML="",this._tabItem.appendChild(t)):console.warn(this.tag+": There does not appear to be any content in the tab region.")}}]),_);function _(){t(this,_);var e=i(this,(_.__proto__||Object.getPrototypeOf(_)).call(this,_));return e._tabItem,e._init=e._init.bind(e),e._setTabContent=e._setTabContent.bind(e),e._observer=new MutationObserver(e._init),e}var y=(o(w,e),r(w,[{key:"html",get:function(){return'<style>:host{display:block;color:#3c3f42;color:var(--pfe-broadcasted--text,#3c3f42)}:host(:focus){outline:0}:host [tabindex]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%}:host .container{margin:0;width:100%;background-color:transparent;background-color:var(--pfe-tabs__panel--BackgroundColor,transparent);border-top:0;border-top:var(--pfe-tabs__panel--BorderTop,0);border-right:0;border-right:var(--pfe-tabs__panel--BorderRight,0);border-bottom:0;border-bottom:var(--pfe-tabs__panel--BorderBottom,0);border-left:0;border-left:var(--pfe-tabs__panel--BorderLeft,0);padding:16px;padding:var(--pfe-tabs__panel--Padding,var(--pfe-theme--container-spacer,16px))}@media screen and (min-width:768px){:host .container{padding:calc(16px * 2);padding:calc(var(--pfe-tabs__panel--Padding,var(--pfe-theme--container-spacer,16px)) * 2)}}@media screen and (min-width:992px){:host .container{padding:calc(16px * 3);padding:calc(var(--pfe-tabs__panel--Padding,var(--pfe-theme--container-spacer,16px)) * 3)}}@media screen and (min-width:1200px){:host .container{padding:calc(16px * 4);padding:calc(var(--pfe-tabs__panel--Padding,var(--pfe-theme--container-spacer,16px)) * 4)}}:host .container::after{clear:both;content:"";display:table}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host .container{padding:1em;background-color:#fff!important;color:#151515!important}}:host([hidden]){display:none}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){:host([pfe-variant=earth]) .container{background-color:#fff;padding:1em;border-right:1px solid #d2d2d2;border-bottom:1px solid #d2d2d2;border-left:1px solid #d2d2d2}}@media screen and (min-width:768px){:host([pfe-variant=wind][vertical]){padding-top:0;padding-bottom:0;padding-right:0}}@media screen and (min-width:768px) and (-ms-high-contrast:active),screen and (min-width:768px) and (-ms-high-contrast:none){:host([pfe-variant=wind][vertical]) .container{padding:1em 0 1em 2em}}@media screen and (min-width:768px){:host([pfe-variant=earth][vertical]){border-top:0;border-left:1px solid #d2d2d2;border-left:var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-theme--color--surface--border,#d2d2d2);height:100%}}@media screen and (min-width:768px) and (-ms-high-contrast:active),screen and (min-width:768px) and (-ms-high-contrast:none){:host([pfe-variant=earth][vertical]) .container{border-top:1px solid #d2d2d2}}:host([pfe-variant=earth][on=dark]){--pfe-tabs__panel--BackgroundColor:var(--pfe-theme--color--surface--darkest, #151515);--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}:host([pfe-variant=earth][on=saturated]){--pfe-tabs__panel--BackgroundColor:var(--pfe-theme--color--surface--lightest, #fff);--pfe-broadcasted--text:var(--pfe-theme--color--text, #151515);--pfe-broadcasted--link:var(--pfe-theme--color--link, #06c);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover, #004080);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus, #004080);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited, #6753ac);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited, none)}:host([pfe-variant=wind][on=saturated]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-saturated, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-saturated, #fff);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-saturated, #fafafa);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-saturated, #fafafa);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-saturated, #8476d1);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-saturated, underline);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-saturated, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-saturated, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-saturated, underline)}:host([pfe-variant=wind][on=dark]){--pfe-broadcasted--text:var(--pfe-theme--color--text--on-dark, #fff);--pfe-broadcasted--link:var(--pfe-theme--color--link--on-dark, #73bcf7);--pfe-broadcasted--link--hover:var(--pfe-theme--color--link--hover--on-dark, #bee1f4);--pfe-broadcasted--link--focus:var(--pfe-theme--color--link--focus--on-dark, #bee1f4);--pfe-broadcasted--link--visited:var(--pfe-theme--color--link--visited--on-dark, #bee1f4);--pfe-broadcasted--link-decoration:var(--pfe-theme--link-decoration--on-dark, none);--pfe-broadcasted--link-decoration--hover:var(--pfe-theme--link-decoration--hover--on-dark, underline);--pfe-broadcasted--link-decoration--focus:var(--pfe-theme--link-decoration--focus--on-dark, underline);--pfe-broadcasted--link-decoration--visited:var(--pfe-theme--link-decoration--visited--on-dark, none)}\n/*# sourceMappingURL=pfe-tab-panel.min.css.map */\n</style><div tabindex="-1" role="tabpanel">\n <div class="container">\n <slot></slot>\n </div>\n</div>'}},{key:"styleUrl",get:function(){return"pfe-tab-panel.scss"}},{key:"templateUrl",get:function(){return"pfe-tab-panel.html"}},{key:"pfeId",get:function(){return this.getAttribute("pfe-id")},set:function(e){e&&this.setAttribute("pfe-id",e)}}],[{key:"version",get:function(){return"1.0.0-prerelease.55"}},{key:"tag",get:function(){return"pfe-tab-panel"}}]),r(w,[{key:"connectedCallback",value:function(){n(w.prototype.__proto__||Object.getPrototypeOf(w.prototype),"connectedCallback",this).call(this),this._init(),this._observer.observe(this,v)}},{key:"disconnectedCallback",value:function(){this._observer.disconnect()}},{key:"_init",value:function(){window.ShadyCSS&&this._observer.disconnect(),this.pfeId||(this.pfeId=w.tag+"-"+m()),"tabpanel"!==this.getAttribute("role")&&this.setAttribute("role","tabpanel"),this.hasAttribute("tabindex")||this.setAttribute("tabindex",0),"true"!==this.previousElementSibling.getAttribute("aria-selected")&&(this.hidden=!0),window.ShadyCSS&&this._observer.observe(this,v)}}]),w);function w(){t(this,w);var e=i(this,(w.__proto__||Object.getPrototypeOf(w)).call(this,w));return e._init=e._init.bind(e),e._observer=new MutationObserver(e._init),e}return e.create(x),e.create(y),e.create(g),g});
|
|
//# sourceMappingURL=pfe-tabs.umd.min.js.map
|