@duetds/components
Version:
This package includes Duet Core Components and related tools.
1 lines • 7.04 kB
JavaScript
import{r as t,h as e,d as s,c as a}from"./p-6403d5dc.js";const u=class{constructor(e){t(this,e)}render(){return e("div",{role:"tabpanel",class:{"duet-tab":!0,selected:this.selected}},e("slot",null))}static get style(){return".sc-duet-tab-h{display:block}.duet-tab.sc-duet-tab, .sc-duet-tab-h{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;width:100%}.duet-tab.sc-duet-tab{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:none}.duet-tab.selected.sc-duet-tab{display:block}"}},i=class{constructor(e){t(this,e),this.tabs=[],this.selected=0,this.theme="",this.margin="auto",this.padding="auto",this.handleKeyDown=t=>{const e=t.target.previousElementSibling,s=t.target.nextElementSibling;e&&(37===t.keyCode&&(t.preventDefault(),e.click(),e.focus()),38===t.keyCode&&(t.preventDefault(),e.click(),e.focus())),s&&(39===t.keyCode&&(t.preventDefault(),s.click(),s.focus()),40===t.keyCode&&(t.preventDefault(),s.click(),s.focus()))},this.refreshTabs=()=>{if(this.tabs=Array.from(this.element.querySelectorAll("duet-tab")),0===this.tabs.length)throw new Error("[duet-tabs] Must have at least one tab");this.tabs.map((t,e)=>{t.id="duet-tab-"+e,t.setAttribute("aria-labelledby","duet-tab-button-"+e),t.selected&&(this.selected=e)})},this.duetChange=s(this,"duetChange",3)}async openTab(t){if(t>=this.tabs.length)throw new Error(`[duet-tabs] Index ${t} is out of bounds of tabs length`);this.tabs=this.tabs.map((e,s)=>(e.selected=s===t,e)),this.selected=t,this.duetChange.emit({value:t,component:"duet-tab-group"})}componentWillLoad(){"default"!==this.theme&&document.documentElement.classList.contains("duet-theme-turva")&&(this.theme="turva"),this.refreshTabs(),this.element.forceUpdate()}async refresh(){this.refreshTabs()}render(){return e("div",{class:{"duet-tab-group":!0,"duet-theme-turva":"turva"===this.theme}},this.tabs.length>3?e("duet-select",{value:this.selected.toString(),expand:!0,"label-hidden":!0,theme:this.theme,onDuetChange:t=>this.openTab(Number(t.detail.value)),items:this.tabs.map((t,e)=>({label:t.label,value:e}))}):"",e("div",{role:"tablist",class:{"duet-m-0":"none"===this.margin,"duet-tab-group-tabs":!0,"duet-tab-group-hidden":this.tabs.length>3}},this.tabs.map((t,s)=>e("button",{role:"tab",id:"duet-tab-button-"+s,"aria-controls":"duet-tab-"+s,"aria-selected":t.selected?"true":"false",class:{"duet-p-0":"none"===this.padding,"duet-tab-button":!0,selected:t.selected},onClick:()=>this.openTab(s),onKeyDown:t=>this.handleKeyDown(t)},t.label))),e("div",{class:{"duet-tab-group-content":!0,"duet-m-0":"none"===this.margin}},e("slot",null)))}get element(){return a(this)}static get style(){return".sc-duet-tab-group-h{-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.duet-tab-group-tabs.sc-duet-tab-group, .sc-duet-tab-group-h{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;display:block;width:100%}.duet-tab-group-tabs.sc-duet-tab-group{margin-bottom:28px!important;padding-top:2px;list-style:none;max-width:100%}.duet-tab-group-tabs.duet-m-0.sc-duet-tab-group{margin:0!important}.duet-tab-group-tabs.duet-tab-group-hidden.sc-duet-tab-group{display:none}\@media only screen and (min-width:36em){.duet-tab-group-tabs.duet-tab-group-hidden.sc-duet-tab-group{display:block}}\@media only screen and (min-width:36em){duet-select.sc-duet-tab-group{display:none!important}}.duet-tab-button.sc-duet-tab-group{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:20px;border:2px solid #e1e3e6;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1rem;background:#fff;color:#00294d!important;border-radius:0;font-weight:600;line-height:1.1;width:100%;-webkit-transition:.15s ease;transition:.15s ease;margin-top:-2px;border-style:solid;position:relative;text-align:left;text-decoration:none;cursor:pointer;z-index:100;display:block}.duet-tab-button.duet-m-0.sc-duet-tab-group{margin:0!important}.duet-theme-turva.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group{font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;color:#111!important;border-color:#e6e6e6}.duet-tab-button.duet-p-0.sc-duet-tab-group{padding:0!important}\@media only screen and (min-width:36em){.duet-tab-button.sc-duet-tab-group{border-right:2px solid #e1e3e6;margin-left:-2px;border-radius:0;display:inline-block;width:auto}}.duet-tab-button.sc-duet-tab-group:hover{border-color:#909599;z-index:200}.duet-theme-turva.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group:hover{border-color:#757575!important}.duet-tab-button.sc-duet-tab-group:active{-webkit-transition:none;transition:none;opacity:.75}.duet-tab-button.sc-duet-tab-group:focus{outline:none;z-index:200}.user-is-tabbing.sc-duet-tab-group-h .duet-tab-button.sc-duet-tab-group:focus{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}.duet-tab-button.selected.sc-duet-tab-group{-webkit-box-shadow:none!important;box-shadow:none!important;border-color:#00294d;z-index:201;background:#00294d;color:#fff!important;outline:0}.duet-theme-turva.sc-duet-tab-group .duet-tab-button.selected.sc-duet-tab-group{color:#fff!important;border-color:#454545!important;background-color:#454545}.duet-tab-button.sc-duet-tab-group:first-child{border-top-left-radius:4px;border-top-right-radius:4px}\@media only screen and (min-width:36em){.duet-tab-button.sc-duet-tab-group:first-child{border-top-right-radius:0;border-bottom-left-radius:4px}}.duet-tab-button.sc-duet-tab-group:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}\@media only screen and (min-width:36em){.duet-tab-button.sc-duet-tab-group:last-child{border-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}}.duet-tab-group-content.sc-duet-tab-group{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1rem;color:#00294d;font-weight:400;line-height:1.5;width:100%;position:relative;text-align:left}.duet-theme-turva.sc-duet-tab-group .duet-tab-group-content.sc-duet-tab-group{font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;color:#111}"}};export{u as duet_tab,i as duet_tab_group};