@aqua-ds/web-components
Version:
AquaDS Web Components
140 lines (135 loc) • 9.83 kB
JavaScript
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './aq-badge2.js';
import { V as VisualState } from './VisualStates.js';
const aqTabCss = ".aq-tab{-ms-flex:none;flex:none;position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;background:var(--color-paper-lighter);min-width:4.6875rem;height:auto;border:none;color:var(--color-ink-lighter);border-radius:var(--spacing-size-minor) var(--spacing-size-minor) 0px 0px;-webkit-transition:background-color 0.2s, -webkit-box-shadow 0.2s;transition:background-color 0.2s, -webkit-box-shadow 0.2s;transition:box-shadow 0.2s, background-color 0.2s;transition:box-shadow 0.2s, background-color 0.2s, -webkit-box-shadow 0.2s;margin:0 var(--spacing-size-minor);padding:0;cursor:pointer}.aq-tab__button{background-color:var(--color-paper-lighter);border-color:var(--color-paper-lighter);padding:0px}.aq-tab__button:hover{color:var(--color-ink-base);background:var(--color-white);-webkit-box-shadow:var(--shadow-basic);box-shadow:var(--shadow-basic)}.aq-tab__button:focus{-webkit-box-shadow:var(--shadow-focus);box-shadow:var(--shadow-focus);background:var(--color-white)}.aq-tab__button:active{background:var(--color-white);-webkit-box-shadow:var(--shadow-active);box-shadow:var(--shadow-active)}.aq-tab__button:disabled{cursor:default;pointer-events:none;color:var(--color-paper-base)}.aq-tab__button:disabled .aq-helper-text{color:var(--color-paper-base)}.aq-tab__text{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:var(--font-family-basic);font-style:normal;font-weight:var(--font-weight-semi-bold);font-size:var(--font-size-s);line-height:var(--font-line-height-7)}.aq-tab__badge{margin-right:var(--spacing-size-minor)}.aq-tab__draggable{margin-left:var(--spacing-size-minor);color:var(--color-paper-darker);display:-ms-inline-flexbox;display:inline-flex}.aq-tab__draggable~.aq-tab__text{margin-left:0}.aq-tab__content{display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;-ms-flex-direction:column;flex-direction:column;padding:var(--spacing-size-short) var(--spacing-size-medium);border-top-right-radius:var(--spacing-size-minor);border-top-left-radius:var(--spacing-size-minor);-ms-flex-positive:1;flex-grow:1}.aq-tab__content--justify{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.aq-tab__content .aq-badge{overflow:hidden;white-space:nowrap;display:block;text-overflow:ellipsis}.aq-tab__content [class^=aq-icon-]{margin-right:var(--spacing-size-small);margin-top:var(--spacing-size-small);font-size:var(--font-size-m)}.aq-tab__sublabel{overflow:auto}.aq-tab--selected{color:var(--color-ink-base);background:var(--color-white)}.aq-tab--selected .aq-tab__content{padding:var(--spacing-size-short) var(--spacing-size-medium)}.aq-tab__selected-bar{height:var(--spacing-size-minor);background-color:var(--color-primary-base);position:absolute;width:0;bottom:0px;-webkit-transition:width 0.2s ease-in;transition:width 0.2s ease-in}.aq-tab__selected-bar--active{width:100%}.aq-tab-group__tabs--vertical aq-tab.hydrated{width:100%}.aq-tab-group__tabs--vertical .aq-tab__container{display:-ms-flexbox;display:flex;width:100%}.aq-tab-group__tabs--vertical .aq-tab{display:-ms-flexbox;display:flex;border-radius:var(--spacing-size-minor) 0px 0px var(--spacing-size-minor);margin:0 var(--spacing-size-basic) var(--spacing-size-minor) 0;-ms-flex:0 1 auto;flex:0 1 auto;width:100%}.aq-tab-group__tabs--vertical .aq-tab--selected .aq-tab__content{padding:var(--spacing-size-short) var(--spacing-size-medium);border-width:var(--spacing-size-basic) 0px var(--spacing-size-basic) 0px;border-radius:0}.aq-tab-group__tabs--vertical .aq-tab--selected .aq-tab__content [class^=aq-icon-]{margin-right:var(--spacing-size-small);margin-top:var(--spacing-size-small);font-size:var(--font-size-m)}.aq-tab-group__tabs--vertical .aq-tab__content{-ms-flex-order:1;order:1;-ms-flex-positive:1;flex-grow:1}.aq-tab-group__tabs--vertical .aq-tab__selected-bar{width:var(--spacing-size-minor);height:0;display:-ms-flexbox;display:flex;-ms-flex-order:0;order:0;position:relative;left:0px;border-radius:var(--spacing-size-minor) 0px 0px var(--spacing-size-minor);-webkit-transition:height 0.2s ease-in;transition:height 0.2s ease-in}.aq-tab-group__tabs--vertical .aq-tab__selected-bar--active{height:100%}";
const AqTab$1 = /*@__PURE__*/ proxyCustomElement(class AqTab extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.text = '';
this.state = VisualState.DEFAULT;
this.icon = '';
this.number = 0;
this.customClass = '';
this.isDraggable = false;
this.isDisabled = false;
this.index = 1;
this.selectedIndex = 0;
}
get isActive() {
return this.selectedIndex === this.index;
}
get isText() {
return this.text?.length > 0;
}
get getNumber() {
return this.number > 0;
}
getClassAqTabText() {
return {
'aq-tab__text': true,
'aq-tab__badge': this.getNumber,
};
}
getClassIcon() {
return {
[this.icon]: true,
'aq-tab__content__icon': true,
};
}
getClassAqButton() {
return {
'aq-tab__button': true,
'aq-tab': true,
'aq-tab--selected': this.isActive,
};
}
isIcon() {
return this.icon && this.icon !== '';
}
getIcon() {
const cssClassIcon = this.getClassIcon();
return this.isIcon && h("em", { class: cssClassIcon });
}
getClassSelected() {
return {
'aq-tab__selected-bar': true,
'aq-tab__selected-bar--active': this.isActive,
};
}
clickTab(event) {
const tabGroup = this.el.closest('aq-tab-group');
if (!tabGroup)
return;
const sibling = tabGroup.querySelectorAll('aq-tab-items')[0];
if (sibling) {
sibling.updateSelectTab(this.index);
}
tabGroup.clickTab?.(this.index);
event?.stopPropagation();
}
async updateSelectTab(val) {
if (!this.isDisabled)
this.selectedIndex = val;
}
async connectedCallback() {
const parentElement = this.el.closest('aq-tab-group');
if (parentElement) {
this.index = await parentElement.registerTab?.(this.el);
parentElement.addEventListener('tapGroupChange', this.handleStepChange.bind(this));
}
if (this.isDisabled) {
const Tabs = parentElement.querySelectorAll('aq-tab');
this.selectedIndex = this.index + 1;
Tabs[this.index].updateSelectTab(this.selectedIndex);
}
if (this.selectedIndex === 0)
this.selectedIndex = 1;
}
handleStepChange(event) {
this.selectedIndex = event.detail;
}
render() {
const cssClassAqTabText = this.getClassAqTabText();
const cssClassAqButton = this.getClassAqButton();
const cssClassSelected = this.getClassSelected();
const icon = this.getIcon();
return (h(Host, { key: 'd1c97398abf6b52b9009190a72e776ca02a4b663' }, h("div", { key: 'cc1762f226d13cce18393884b9c9c1d78efd2e58', class: "aq-tab__container" }, h("div", { key: '31b006dfa6c0858c50ffa8c7308e8c648f9ed4a5', class: "aq-tab__sublabel" }, h("slot", { key: '2c3bb2030440963a4d5d5067eaedaef95074c00d', name: "subtitle" })), h("button", { key: '17c863a7ac3c8963b1d6708715eb98cc87541355', type: "button", disabled: this.isDisabled, class: cssClassAqButton, onClick: event => this.clickTab(event) }, this.isDraggable && (h("span", { key: '5cea34473d4d7b1efd9bfc350c9194d317a04148', class: "aq-tab__draggable" }, h("em", { key: '8a95bbf61b34dd40421f40898ec76b1adad5b664', class: "aq-icon-six-dots" }))), h("div", { key: 'cf0c3e32eac4bdc91cadc1d59a6a1f090a1ba4e4', class: "aq-tab__content" }, h("div", { key: 'c49211cd6ca8153c05ee7109c1650388d629e4df', class: "aq-tab__content--justify" }, h("div", { key: '7fa250e37cf627ea39dddfaf73d02573b750fdaf', class: cssClassAqTabText }, icon, h("slot", { key: '14526bebf29205c57183ca4326837dfb5d992ba4' })), this.getNumber && h("aq-badge", { key: '298ce319b4a003e2ecdf9c8ad044f9f83f630486', isDisabled: this.isDisabled, state: this.state, customClass: this.customClass }, this.number.toString())), h("slot", { key: 'a45422cbf3328d815c4d8dee704db7c9856b94ee', name: "subtitle" })), h("div", { key: '0b987230d57fd210ed29787fbd849ca952a25107', class: cssClassSelected })))));
}
get el() { return this; }
static get style() { return aqTabCss; }
}, [260, "aq-tab", {
"text": [1],
"state": [1],
"icon": [1],
"number": [2],
"customClass": [1, "custom-class"],
"isDraggable": [4, "is-draggable"],
"isDisabled": [4, "is-disabled"],
"index": [32],
"selectedIndex": [32],
"updateSelectTab": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-tab", "aq-badge"];
components.forEach(tagName => { switch (tagName) {
case "aq-tab":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqTab$1);
}
break;
case "aq-badge":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const AqTab = AqTab$1;
const defineCustomElement = defineCustomElement$1;
export { AqTab, defineCustomElement };