@aqua-ds/web-components
Version:
AquaDS Web Components
169 lines (165 loc) • 8.58 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { e as emitEvent } from './eventEmitter.js';
import { d as defineCustomElement$d } from './aq-button2.js';
import { d as defineCustomElement$c } from './aq-checkbox2.js';
import { d as defineCustomElement$b } from './aq-dropdown2.js';
import { d as defineCustomElement$a } from './aq-dropdown-item2.js';
import { d as defineCustomElement$9 } from './aq-helper-text2.js';
import { d as defineCustomElement$8 } from './aq-label2.js';
import { d as defineCustomElement$7 } from './aq-list-menu-host.js';
import { d as defineCustomElement$6 } from './aq-popover2.js';
import { d as defineCustomElement$5 } from './aq-search-bar2.js';
import { d as defineCustomElement$4 } from './aq-subheading2.js';
import { d as defineCustomElement$3 } from './aq-text-field2.js';
import { d as defineCustomElement$2 } from './aq-tooltip2.js';
import { d as defineCustomElement$1 } from './aq-virtual-list2.js';
const aqTableToolbarCss = ".aq-table__toolbar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;min-height:var(--spacing-size-big);padding:var(--spacing-size-short) 0}.aq-table__toolbar .aq-text-field{-ms-flex-direction:row;flex-direction:row}.aq-table__toolbar--right,.aq-table__toolbar--left,.aq-table__toolbar-filters{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--spacing-size-basic)}.aq-table__toolbar--right .toolbar-widget .aq-button,.aq-table__toolbar--left .toolbar-widget .aq-button,.aq-table__toolbar-filters .toolbar-widget .aq-button{padding:var(--spacing-size-medium);width:var(--spacing-size-big);height:var(--spacing-size-big)}.aq-table__toolbar--left>:nth-child(1){margin-right:var(--spacing-size-short)}.aq-table__toolbar--left .aq-subheading{-ms-flex-align:center;align-items:center}.aq-table__toolbar-icon{margin-right:var(--spacing-size-basic)}";
const AqTableToolbar = /*@__PURE__*/ proxyCustomElement(class AqTableToolbar extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.enableHeader = createEvent(this, "enableHeader", 7);
this.queryFilter = createEvent(this, "queryFilter", 7);
this.selectColumn = createEvent(this, "selectColumn", 7);
this.hasHeader = true;
this.options = [];
this.localOptions = [];
this.titleSlot = null;
this.headerLeftSlot = null;
this.headerRightSlot = null;
}
setTitleSlot(el) {
this.titleSlot = el;
this.checkContent();
}
setHeaderLeftSlot(el) {
this.headerLeftSlot = el;
this.checkContent();
}
setHeaderRightSlot(el) {
this.headerRightSlot = el;
this.checkContent();
}
handleSelection({ checked, item }) {
emitEvent('selectColumn', this.host, { checked, item });
}
checkContent() {
const isContentEnable = this.hasHeader || (!!this.headerLeftSlot && !!this.headerRightSlot && !!this.titleSlot);
if (!!isContentEnable)
this.enableHeader.emit(isContentEnable);
}
setFilter(event) {
this.queryFilter.emit(event.detail.value);
}
get getOptions() {
return this.options;
}
get hasTitle() {
return !!this.title;
}
get hasTitleIcon() {
return !!this.titleIcon;
}
get getTitleIconClass() {
return {
'aq-table__toolbar-icon': true,
[`${this.titleIcon}`]: !!this.titleIcon,
};
}
componentWillLoad() {
this.checkContent();
}
render() {
return (h(Host, { key: '7cfa5dc775379ff222588e777b55057b99c1d7fc' }, h("div", { key: '88116af58283fb57d2e9cd8935edc6db975576ec', class: "aq-table__toolbar" }, h("div", { key: '3d8dbb32b8c9b1d23ed8e1287dd7742153c43431', class: "aq-table__toolbar--left" }, this.hasTitle && (h("aq-subheading", { key: '607ed1c937f1bab5d21d919a59a76f46c80e5e52', info: this.titleTooltip }, h("span", { key: '75a9d29c9eb8c49ad113d6227cb8e2bc41da2b72', slot: "text" }, this.hasTitleIcon && h("em", { key: '34c86f770eb74dc557b4220557f5bee96ac5d3a6', class: this.getTitleIconClass }), this.title))), h("slot", { key: '21199cd795e79d2d3aa0fd1f9998c5d03d2402c8', ref: el => this.setHeaderLeftSlot(el), name: "header-left" })), h("div", { key: 'a61234833eb52ef4bef152edb589cc2bc9756bf4', class: "aq-table__toolbar--right" }, h("div", { key: '03db5066a86db686b2df3de0d385f35343cd7c6c', class: "aq-table__toolbar-filters" }, h("aq-search-bar", { key: '800752cdfaf18c94ec564eab030f22fdd25df894', class: "toolbar-widget", placeholder: "This is a placeholder button", "is-button": true, onAqInput: event => this.setFilter(event) }), h("aq-dropdown", { key: '1a57f2a97f4efd9edbff707b6f827100bb33d585', class: "toolbar-widget", placement: "bottom-end", "popover-width": "100", "is-disabled": false }, h("aq-button", { key: '0cc3eca598cc1204c698faff86b3ee597e48e6ea', slot: "activator" }, h("em", { key: '9f73ad5a19610dcbb96edae9e1847af8eb11d09b', class: "aq-icon-table" })), h("div", { slot: "content", key: "headerDropdown" }, this.getOptions.map((item) => (h("aq-dropdown-item", { class: "dropdown_item" }, h("span", null, "\u00A0"), h("aq-checkbox", { onChange: ({ detail }) => this.handleSelection({ checked: detail.checked, item }), id: item, name: item, label: item }))))))), h("slot", { key: '826b5e49ec6c210c65295cc7b70f17b889dfffc8', ref: el => this.setHeaderRightSlot(el), name: "header-right" })))));
}
get host() { return this; }
static get style() { return aqTableToolbarCss; }
}, [260, "aq-table-toolbar", {
"hasHeader": [4, "has-header"],
"options": [16],
"title": [1],
"titleTooltip": [1, "title-tooltip"],
"titleIcon": [1, "title-icon"],
"localOptions": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-table-toolbar", "aq-button", "aq-checkbox", "aq-dropdown", "aq-dropdown-item", "aq-helper-text", "aq-label", "aq-list-menu", "aq-popover", "aq-search-bar", "aq-subheading", "aq-text-field", "aq-tooltip", "aq-virtual-list"];
components.forEach(tagName => { switch (tagName) {
case "aq-table-toolbar":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqTableToolbar);
}
break;
case "aq-button":
if (!customElements.get(tagName)) {
defineCustomElement$d();
}
break;
case "aq-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$c();
}
break;
case "aq-dropdown":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "aq-dropdown-item":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "aq-helper-text":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "aq-label":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "aq-list-menu":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "aq-popover":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "aq-search-bar":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "aq-subheading":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-text-field":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "aq-virtual-list":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqTableToolbar as A, defineCustomElement as d };