@stories-js/core/dist/esm-es5/stories-tab-button.entry.js

Stories web components to build stories

/*!
 * (C) StoriesJS https://storiesjs.org - GPL-2.0 License
 */
import{r as registerInstance,i as createEvent,h,c as Host,g as getElement}from"./index-49238f69.js";var tabButtonCss=':host{--background-focused-opacity:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;outline:none;background:pink;color:var(--color)}.button-native{border-radius:inherit;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;height:100%;border:0;outline:none;background:transparent;text-decoration:none;cursor:pointer;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-drag:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:inherit;align-items:inherit;-ms-flex-pack:inherit;justify-content:inherit;height:100%;z-index:1}:host(.stories-focused) .button-native{color:var(--color-focused)}:host(.stories-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){a:hover{color:var(--color-selected)}}:host(.tab-selected){color:var(--color-selected)}:host(.tab-hidden){display:none !important}:host(.tab-disabled){pointer-events:none;opacity:0.4}::slotted(stories-label),::slotted(stories-icon){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}::slotted(stories-label){-ms-flex-order:0;order:0}::slotted(stories-icon){-ms-flex-order:-1;order:-1;height:1em}:host(.tab-has-label-only) ::slotted(stories-label){white-space:normal}::slotted(stories-badge){-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;z-index:1}:host(.tab-layout-icon-start){-ms-flex-direction:row;flex-direction:row}:host(.tab-layout-icon-end){-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.tab-layout-icon-bottom){-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.tab-layout-icon-hide) ::slotted(stories-icon){display:none}:host(.tab-layout-label-hide) ::slotted(stories-label){display:none}';var TabButton=function(){function t(t){var e=this;registerInstance(this,t);this.storiesTabButtonClick=createEvent(this,"storiesTabButtonClick",7);this.disabled=false;this.layout="icon-start";this.selected=false;this.onKeyUp=function(t){if(t.key==="Enter"||t.key===" "){e.selectTab(t)}};this.onClick=function(t){e.selectTab(t)}}t.prototype.onTabBarChanged=function(t){var e=t.target;var i=this.el.parentElement;if(t.composedPath&&t.composedPath().includes(i)||e&&e.contains(this.el)){this.selected=this.tab===t.detail.tab}};t.prototype.selectTab=function(t){if(this.tab!==undefined){if(!this.disabled){this.storiesTabButtonClick.emit({tab:this.tab,selected:this.selected})}t.preventDefault()}};Object.defineProperty(t.prototype,"hasLabel",{get:function(){return!!this.el.querySelector("stories-label")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"hasIcon",{get:function(){return!!this.el.querySelector("stories-icon")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"tabIndex",{get:function(){if(this.disabled){return-1}var t=this.el.hasAttribute("tabindex");if(t){return this.el.getAttribute("tabindex")}return 0},enumerable:false,configurable:true});t.prototype.render=function(){var t;var e=this,i=e.disabled,n=e.hasIcon,o=e.hasLabel,r=e.tabIndex,a=e.layout,s=e.selected,l=e.tab;return h(Host,{"aria-selected":s?"true":null,class:(t={"tab-selected":s,"tab-disabled":i,"tab-has-label":o,"tab-has-icon":n,"tab-has-label-only":o&&!n,"tab-has-icon-only":n&&!o},t["tab-layout-".concat(a)]=true,t),id:l!==undefined?"tab-button-".concat(l):null,onClick:this.onClick,onKeyup:this.onKeyUp,role:"tab",tabindex:r},h("a",{href:"#",tabIndex:-1,class:"button-native",part:"native"},h("span",{class:"button-inner"},h("slot",null))))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();TabButton.style=tabButtonCss;export{TabButton as stories_tab_button};
//# sourceMappingURL=stories-tab-button.entry.js.map