v4web-components
Version:
Stencil Component Starter
79 lines (75 loc) • 7.34 kB
JavaScript
import { r as registerInstance, h, g as getElement } from './index-0b720089.js';
const labDsTabCss = ".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 LabDsTab = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.tabs = undefined;
this.tabsColapsed = [];
this.value = undefined;
this.selectedTab = undefined;
this.type = 'inline';
this.disabled = false;
this.openMoreItems = false;
}
handleSelectedValueEmit(data) {
if (this.disabled || (data === null || data === void 0 ? void 0 : data.disabled))
return;
this.selectedTab = data.key;
data.event();
}
checkForClickOutside(ev) {
if (this.el.contains(ev.target)) {
return;
}
this.openMoreItems = false;
}
componentDidLoad() {
this.selectedTab = this.value;
}
watchValue(newValue) {
this.selectedTab = newValue;
}
render() {
var _a, _b, _c, _d, _e;
if (((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.length) > 5) {
(_b = this.tabs) === null || _b === void 0 ? void 0 : _b.forEach((tab, index) => {
if (index < 5) {
return;
}
else {
this.tabsColapsed = [
...this.tabsColapsed,
{
title: tab.title,
key: tab.key,
event: () => tab.event(),
disabled: (tab === null || tab === void 0 ? void 0 : tab.disabled) || false,
},
];
delete this.tabs[index];
}
});
}
return (h("div", { class: `v4-tabs ${this.type} ${this.disabled ? 'disabled' : ''}` }, (_c = this.tabs) === null || _c === void 0 ? void 0 :
_c.map(tab => {
return (h("button", { class: `v4-tab ${this.selectedTab === tab.key ? 'selected' : ''}`, onClick: () => {
this.handleSelectedValueEmit(tab);
}, disabled: this.disabled || (tab === null || tab === void 0 ? void 0 : tab.disabled) }, tab.title));
}), ((_d = this.tabsColapsed) === null || _d === void 0 ? void 0 : _d.length) > 0 && (h("div", null, h("button", { class: `v4-tab more-items ${this.openMoreItems ? 'selected' : ''}`, onClick: () => {
if (this.disabled)
return;
this.openMoreItems = !this.openMoreItems;
} }, "Mais", h("lab-ds-icon-not-selectable", { icon: "more_vert", size: "small" })), this.openMoreItems && (h("div", { class: "more-items-content" }, (_e = this.tabsColapsed) === null || _e === void 0 ? void 0 : _e.map(tab => {
return (h("button", { class: `v4-tab ${this.value === tab.key ? 'selected' : ''}`, onClick: () => {
this.handleSelectedValueEmit(tab);
}, disabled: this.disabled || (tab === null || tab === void 0 ? void 0 : tab.disabled) }, tab.title));
})))))));
}
get el() { return getElement(this); }
static get watchers() { return {
"value": ["watchValue"]
}; }
};
LabDsTab.style = labDsTabCss;
export { LabDsTab as lab_ds_tab };
//# sourceMappingURL=lab-ds-tab.entry.js.map