@aqua-ds/web-components
Version:
AquaDS Web Components
113 lines (108 loc) • 6.27 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { e as emitEvent } from './eventEmitter.js';
const aqCollapseHeaderCss = ".aq-collapse-header{position:relative;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;cursor:pointer;background:var(--color-white);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:var(--spacing-size-medium) var(--spacing-size-large) var(--spacing-size-medium) var(--spacing-size-minor);-ms-flex-align:center;align-items:center;border-radius:var(--spacing-size-minor)}.aq-collapse-header--active{border-radius:var(--spacing-size-minor) var(--spacing-size-minor) 0px 0px;border-bottom:var(--spacing-size-basic) solid var(--color-paper-light)}.aq-collapse-header__icon{display:-ms-flexbox;display:flex;position:relative;width:var(--spacing-size-big);height:var(--spacing-size-big)}.aq-collapse-header__icon em[class^=aq-icon]{font-size:var(--font-size-m)}.aq-collapse-header__icon em{color:var(--color-ink-base);position:absolute;top:var(--spacing-size-moderate);right:var(--spacing-size-short);-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:0.2s ease;transition:0.2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.aq-collapse-header__icon--active em{-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.aq-collapse-header__left{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:center;justify-content:center}.aq-collapse-header__right>*[slot=title],.aq-collapse-header__subtitle>*[slot=title],.aq-collapse-header__title>*[slot=title]{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}";
const AqCollapseHeader$1 = /*@__PURE__*/ proxyCustomElement(class AqCollapseHeader extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.disableToggle = false;
this.visible = false;
this.isActive = false;
this.showBorder = false;
}
onIsActiveChange() {
this.getShowDivider();
}
async getShowDivider() {
const collapse = this.el.closest('aq-collapse');
const isGroup = await collapse?.getGroupDivider();
const isIndividual = await collapse?.getIndividualDivider();
this.showBorder = (this.isActive && isGroup && !isIndividual) || (this.isActive && !isGroup && isIndividual);
}
get getHeaderStyles() {
return {
'aq-collapse-header': true,
'aq-collapse-header--active': this.showBorder,
};
}
get getHeaderIconStyle() {
return {
'aq-collapse-header__icon': true,
'aq-collapse-header__icon--active': this.isActive,
};
}
async toggle(permission, e) {
if (!permission)
this.onClick(e);
if (!this.collapseContext)
return;
if (this.disableToggle && this.isActive)
return;
if (permission) {
this.collapseContext.toggle();
return;
}
this.collapseContext.toggle();
}
async updateActive(active) {
this.isActive = active;
}
onClick(event) {
emitEvent('click', this.el, { event }, event);
}
componentWillLoad() {
const getContext = async () => {
this.collapseContext = this.el.closest('aq-collapse');
if (this.collapseContext) {
this.collapseContext.registerHeader(this);
}
};
getContext();
this.onIsActiveChange();
}
selfClick(event, permission) {
if (event.target === event.currentTarget)
this.toggle(permission, event);
}
clickStop(event, permission) {
event.stopPropagation();
this.toggle(permission, event);
}
render() {
const headerStyles = this.getHeaderStyles;
const headerIconStyle = this.getHeaderIconStyle;
return (h("div", { key: '49f34e5fb7d2c5f0fd7c4b5381eb5e2ea90f3f9f', class: headerStyles, onClick: evt => this.selfClick(evt, false) }, h("div", { key: 'cf886d2aae8be9e6f7149ba9cfeb5797a78c40cf', class: headerIconStyle, onClick: evt => this.clickStop(evt, true) }, h("em", { key: '94ce4ddddadd7d33d1d1cadb61db48ae976185a9', class: "aq-icon-chevron-down" })), h("div", { key: '92749ebbf11fe88a075d3a4fe44e831692313fbd', class: "aq-collapse-header__left", onClick: (e) => this.toggle(false, e) }, h("div", { key: '45a50f97de53beddb6301828ff9f031a9af29854', class: "aq-collapse-header__title" }, h("slot", { key: '2586b7c9da0d5af1a8013e5c66ea3103e7e860ca', name: "title" }, h("slot", { key: 'bbffa966c79f74fa6d2a94f0ddbaf7b64fdf2cd1' }, "slot default"))), h("div", { key: 'fa5e26cbf60561acb735be7998ac3f96827d63ad', class: "aq-collapse-header__subtitle" }, h("slot", { key: '7b6b7a82e1f65393e1cf66d547e60c035fd20074', name: "subtitle" }))), h("div", { key: '7e6b18c1ef8faafcd0e5145560ca159cd90f6150', class: "aq-collapse-header__right" }, h("slot", { key: 'cfc3bb6231842b3a698bce7e786796afc3426ee5', name: "options" }))));
}
get el() { return this; }
static get watchers() { return {
"isActive": ["onIsActiveChange"]
}; }
static get style() { return aqCollapseHeaderCss; }
}, [260, "aq-collapse-header", {
"disableToggle": [4, "disable-toggle"],
"visible": [32],
"isActive": [32],
"showBorder": [32],
"toggle": [64],
"updateActive": [64]
}, undefined, {
"isActive": ["onIsActiveChange"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-collapse-header"];
components.forEach(tagName => { switch (tagName) {
case "aq-collapse-header":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqCollapseHeader$1);
}
break;
} });
}
const AqCollapseHeader = AqCollapseHeader$1;
const defineCustomElement = defineCustomElement$1;
export { AqCollapseHeader, defineCustomElement };