v4web-components/dist/stencil-library/p-9df4b3ad.entry.js

Stencil Component Starter

import{r as e,h as o,g as r}from"./p-c2aeec95.js";const t=".v4-tabs{display:flex;justify-content:space-between;overflow-x:auto}.v4-tab{display:flex;align-items:center;justify-content:center;padding-top:var(--lab-ds-semantic-selectable-space-padding-sm);padding-bottom:var(--lab-ds-semantic-selectable-space-padding-sm);padding-left:var(--lab-ds-semantic-selectable-space-padding-m);padding-right:var(--lab-ds-semantic-selectable-space-padding-m);width:100%;font:var(--lab-ds-semantic-typography-body-none-decoration-p3-regular);color:var(--lab-ds-semantic-color-fg-default);background-color:rgba(0, 0, 0, 0);white-space:nowrap;border-style:solid;border-radius:var(--lab-ds-semantic-container-border-radius-none);border-color:var(--lab-ds-semantic-selectable-color-border-default);border-bottom-width:var(--lab-ds-semantic-selectable-border-width-s);border-top:none;border-left:none;border-right:none}.v4-tab:disabled{border-color:var(--lab-ds-semantic-selectable-color-border-disabled);opacity:var(--lab-ds-core-opacity-80);color:var(--lab-ds-semantic-color-fg-disabled);cursor:not-allowed;pointer-events:none}.more-items{justify-content:flex-start;padding-right:var(--lab-ds-semantic-selectable-space-padding-s);gap:var(--lab-ds-semantic-selectable-space-gap-s);width:9.25rem;height:100%}.inline:not(.disabled) .more-items.selected{border-top:none;border-left:none;border-right:none;color:var(--lab-ds-semantic-selectable-color-primary-default);border-bottom-color:var(--lab-ds-semantic-selectable-color-primary-default);border-bottom-width:var(--lab-ds-semantic-selectable-border-width-m)}.contained:not(.disabled) .more-items.selected{border-bottom:none;border-left:none;border-right:none;border-top:solid;color:var(--lab-ds-semantic-color-fg-default);background-color:var(--lab-ds-semantic-selectable-color-bg-default);border-top-color:var(--lab-ds-semantic-selectable-color-primary-default);border-top-width:var(--lab-ds-semantic-selectable-border-width-m);border-radius:var(--lab-ds-semantic-selectable-border-radius-xxs)}.inline:not(.disabled) .v4-tab:hover{background-color:var(--lab-ds-semantic-selectable-color-bg-hover);border-color:var(--lab-ds-semantic-selectable-color-primary-hover);font:var(--lab-ds-semantic-typography-body-none-decoration-p3-bold)}.contained:not(.disabled) .v4-tab:hover{color:var(--lab-ds-semantic-color-fg-default);border-top:solid;background-color:var(--lab-ds-semantic-selectable-color-bg-hover);border-top-color:var(--lab-ds-semantic-selectable-color-primary-hover);border-top-width:var(--lab-ds-semantic-selectable-border-width-m);border-radius:var(--lab-ds-semantic-selectable-border-radius-xxs);border-bottom-left-radius:0;border-bottom-right-radius:0}.contained:not(.disabled) .v4-tab:active{outline:none;border-style:solid;border-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-width:var(--lab-ds-semantic-selectable-border-width-s)}.inline:not(.disabled) .v4-tab:active{outline:none;border-style:solid;border-color:var(--lab-ds-semantic-selectable-color-primary-focus);border-width:var(--lab-ds-semantic-selectable-border-width-s);border-radius:var(--lab-ds-semantic-selectable-border-radius-xxs)}.inline .v4-tab.selected{border-top:none;border-left:none;border-right:none;font:var(--lab-ds-semantic-typography-body-none-decoration-p3-bold);color:var(--lab-ds-semantic-selectable-color-primary-default);border-bottom-color:var(--lab-ds-semantic-selectable-color-primary-default);border-bottom-width:var(--lab-ds-semantic-selectable-border-width-m)}.contained .v4-tab.selected{border-left:none;border-right:none;border-top:solid;font:var(--lab-ds-semantic-typography-body-none-decoration-p3-bold);border-top-color:var(--lab-ds-semantic-selectable-color-primary-default);border-top-width:var(--lab-ds-semantic-selectable-border-width-m);border-bottom-width:var(--lab-ds-semantic-selectable-border-width-s);border-bottom-color:var(--lab-ds-semantic-selectable-color-border-default);border-radius:var(--lab-ds-semantic-selectable-border-radius-xxs);border-bottom-left-radius:0;border-bottom-right-radius:0}.more-items-content{position:absolute;width:9.25rem;justify-content:flex-start;background-color:var(--lab-ds-semantic-selectable-color-bg-default);box-shadow:var(--lab-ds-semantic-selectable-shadow-m)}.disabled .v4-tab{border-color:var(--lab-ds-semantic-selectable-color-border-disabled);opacity:var(--lab-ds-core-opacity-80);color:var(--lab-ds-semantic-color-fg-disabled)}";const a=class{constructor(o){e(this,o);this.tabs=undefined;this.tabsColapsed=[];this.value=undefined;this.selectedTab=undefined;this.type="inline";this.disabled=false;this.openMoreItems=false}handleSelectedValueEmit(e){if(this.disabled||(e===null||e===void 0?void 0:e.disabled))return;this.selectedTab=e.key;e.event()}checkForClickOutside(e){if(this.el.contains(e.target)){return}this.openMoreItems=false}componentDidLoad(){this.selectedTab=this.value}watchValue(e){this.selectedTab=e}render(){var e,r,t,a,l;if(((e=this.tabs)===null||e===void 0?void 0:e.length)>5){(r=this.tabs)===null||r===void 0?void 0:r.forEach(((e,o)=>{if(o<5){return}else{this.tabsColapsed=[...this.tabsColapsed,{title:e.title,key:e.key,event:()=>e.event(),disabled:(e===null||e===void 0?void 0:e.disabled)||false}];delete this.tabs[o]}}))}return o("div",{class:`v4-tabs ${this.type} ${this.disabled?"disabled":""}`},(t=this.tabs)===null||t===void 0?void 0:t.map((e=>o("button",{class:`v4-tab ${this.selectedTab===e.key?"selected":""}`,onClick:()=>{this.handleSelectedValueEmit(e)},disabled:this.disabled||(e===null||e===void 0?void 0:e.disabled)},e.title))),((a=this.tabsColapsed)===null||a===void 0?void 0:a.length)>0&&o("div",null,o("button",{class:`v4-tab more-items ${this.openMoreItems?"selected":""}`,onClick:()=>{if(this.disabled)return;this.openMoreItems=!this.openMoreItems}},"Mais",o("lab-ds-icon-not-selectable",{icon:"more_vert",size:"small"})),this.openMoreItems&&o("div",{class:"more-items-content"},(l=this.tabsColapsed)===null||l===void 0?void 0:l.map((e=>o("button",{class:`v4-tab ${this.value===e.key?"selected":""}`,onClick:()=>{this.handleSelectedValueEmit(e)},disabled:this.disabled||(e===null||e===void 0?void 0:e.disabled)},e.title))))))}get el(){return r(this)}static get watchers(){return{value:["watchValue"]}}};a.style=t;export{a as lab_ds_tab};
//# sourceMappingURL=p-9df4b3ad.entry.js.map