@aqua-ds/web-components
Version:
AquaDS Web Components
82 lines (77 loc) • 5.89 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
const aqCardHeaderCss = ".aq-card-header{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;position:relative;-ms-flex-align:center;align-items:center;padding:var(--spacing-size-short) 0px;-webkit-box-shadow:inset 0px calc(-1 * var(--spacing-size-basic)) 0px var(--color-paper-light);box-shadow:inset 0px calc(-1 * var(--spacing-size-basic)) 0px var(--color-paper-light);word-break:break-word}.aq-card-header--borderless{border-bottom:0px solid transparent;-webkit-box-shadow:unset;box-shadow:unset}.aq-card-header__reorder,.aq-card-header__return-icon{left:var(--spacing-size-short);top:0px;bottom:0px;margin:auto;display:-ms-flexbox;display:flex;position:absolute;width:1.25rem;height:1.25rem}.aq-card-header__reorder em,.aq-card-header__return-icon em{font-size:var(--font-size-xl);color:var(--color-ink-base);-webkit-transition:0.2s ease;transition:0.2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.aq-card-header__reorder em{cursor:move}.aq-card-header__reorder--active em{-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.aq-card-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;margin-left:var(--spacing-size-large)}.aq-card-header__left--spaced{margin-left:var(--spacing-size-big)}.aq-card-header__left .aq-card-header__title em{font-size:var(--font-size-m);margin-right:var(--spacing-size-minor)}.aq-card-header__right,.aq-card-header__subtitle,.aq-card-header__title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:var(--spacing-size-minor)}.aq-card-header__right{margin-right:var(--spacing-size-short)}.aq-card-header__title>[slot=title]{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}";
const AqCardHeader$1 = /*@__PURE__*/ proxyCustomElement(class AqCardHeader extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.reorder = createEvent(this, "reorder", 7);
this.return = createEvent(this, "return", 7);
this.clickHeader = createEvent(this, "clickHeader", 7);
this.hasReturnIcon = false;
this.isReorder = false;
this.parentHasContent = true;
this.onClickReorder = (event) => {
event.stopPropagation();
this.reorder.emit();
};
this.onClickReturn = (event) => {
event.stopPropagation();
this.return.emit();
};
this.onClickContent = (event) => {
event.stopPropagation();
this.clickHeader.emit();
};
}
checkParentContent() {
const parentSlot = this.el.parentElement?.querySelector('aq-card-content');
this.parentHasContent = !!parentSlot;
}
componentWillLoad() {
this.checkParentContent();
}
get hasIcon() {
return this.hasReturnIcon || this.isReorder;
}
getStyleClassCardHeader() {
return {
'aq-card-header': true,
'aq-card-header--borderless': !this.parentHasContent,
};
}
getStyleClassCardHeaderLeft() {
return {
'aq-card-header__left': true,
'aq-card-header__left--spaced': this.hasIcon,
};
}
render() {
const cssClassCardHeader = this.getStyleClassCardHeader();
const cssClassCardHeaderLeft = this.getStyleClassCardHeaderLeft();
return (h(Host, { key: 'e7ec5ee4a18c594b21ad10b78e6ec59d3acf10c0' }, h("div", { key: '426ff41f9b0d4135dbf80289b0e1c7102ec7adad', class: cssClassCardHeader }, this.hasReturnIcon && !this.isReorder && (h("div", { key: 'cc52bdfd6d15c9e913ef79f8584e7aee32493e64', class: "aq-card-header__return-icon", onClick: (e) => this.onClickReturn(e) }, h("em", { key: '6ed9d8964741e3c1a8ee6155f62efa227f657562', class: "aq-icon-chevron-left" }))), this.isReorder && !this.hasReturnIcon && (h("div", { key: '87ed8c42d800ff4a407c64144d3b89eff8da3633', "aria-hidden": "true", class: "aq-card-header__reorder", onClick: (e) => this.onClickReorder(e) }, h("em", { key: '20947ffbf799b80541226b9eacd96f9d85fc12e2', class: "aq-icon-six-dots" }))), h("div", { key: '52323e21065971b7c1f0e283e0b9a14b92f7f671', class: cssClassCardHeaderLeft, onClick: (e) => this.onClickContent(e) }, h("div", { key: 'b494dba9123955a52de6a0cced247b5bea55c43b', class: "aq-card-header__title" }, h("slot", { key: '71c142b32cf4a9f148f238e7c17622cf57fe49ee', name: "title" })), h("div", { key: '5b7413a06f510b9eef4ac710688e643237e13f89', class: "aq-card-header__subtitle" }, h("slot", { key: 'd654f8ccf824e8027095ca0a34c5ed4f7992d398', name: "subtitle" }))), h("div", { key: 'c9f3ad932a9adecdcb904b6c11a45bc01f456a41', class: "aq-card-header__right" }, h("slot", { key: '241712996f0eb9402c7768cb574ba02cf0313b86', name: "options" })))));
}
get el() { return this; }
static get style() { return aqCardHeaderCss; }
}, [260, "aq-card-header", {
"hasReturnIcon": [4, "has-return-icon"],
"isReorder": [4, "is-reorder"],
"parentHasContent": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-card-header"];
components.forEach(tagName => { switch (tagName) {
case "aq-card-header":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqCardHeader$1);
}
break;
} });
}
const AqCardHeader = AqCardHeader$1;
const defineCustomElement = defineCustomElement$1;
export { AqCardHeader, defineCustomElement };