@aqua-ds/web-components
Version:
AquaDS Web Components
144 lines (139 loc) • 7.87 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { e as emitEvent } from './eventEmitter.js';
import { d as defineCustomElement$1 } from './aq-transition2.js';
var BannerState;
(function (BannerState) {
BannerState["INFO"] = "info";
BannerState["SUCCESS"] = "success";
BannerState["WARNING"] = "warning";
BannerState["DANGER"] = "danger";
})(BannerState || (BannerState = {}));
const aqBannerCss = ".aq-banner{display:-ms-inline-flexbox;display:inline-flex;width:100%;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:start;align-items:flex-start;background:var(--color-primary-lighter);border-radius:4px;-webkit-transition:0.2s ease-out;transition:0.2s ease-out;overflow:hidden}.aq-banner__transition{display:inline-block;width:100%}.aq-banner__container{-ms-flex-order:1;order:1;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:start;align-items:flex-start;padding:12px}.aq-banner__status{-ms-flex:none;flex:none;-ms-flex-order:0;order:0;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-positive:0;flex-grow:0;width:4px;background:#3f74dd;border-radius:4px 0px 0px 4px}.aq-banner__status--success{background:var(--color-success-base)}.aq-banner__status--warning{background:var(--color-warning-base)}.aq-banner__status--danger{background:var(--color-danger-base)}.aq-banner__icon{margin-top:2px;display:-ms-flexbox;display:flex;font-size:var(--font-size-m);color:var(--color-paper-darker);-ms-flex-order:0;order:0;-ms-flex-positive:0;flex-grow:0}.aq-banner__icon em,.aq-banner__icon em::before{color:var(--color-primary-base)}.aq-banner__icon--info em,.aq-banner__icon--info em::before{color:var(--color-primary-base)}.aq-banner__icon--success em,.aq-banner__icon--success em::before{color:var(--color-success-base)}.aq-banner__icon--warning em,.aq-banner__icon--warning em::before{color:var(--color-warning-base)}.aq-banner__icon--danger em,.aq-banner__icon--danger em::before{color:var(--color-danger-base)}.aq-banner__content{display:-ms-flexbox;display:flex;margin:0px 8px;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex-order:1;order:1;-ms-flex-positive:1;flex-grow:1;font-family:var(--font-family-basic)}.aq-banner__close{display:-ms-flexbox;display:flex;font-size:var(--font-size-m);color:var(--color-paper-darker);-ms-flex-order:2;order:2;-ms-flex-positive:0;flex-grow:0;cursor:pointer;margin-top:2px}.aq-banner__title{-ms-flex-order:0;order:0;font-style:normal;font-weight:600;font-size:var(--font-size-m);line-height:22px}.aq-banner__title--bottom-spacing{margin-bottom:4px}.aq-banner__text{-ms-flex-order:1;order:1;font-weight:normal;font-size:var(--font-size-s);line-height:20px}.aq-banner__actions{-ms-flex:none;flex:none;-ms-flex-order:2;order:2;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-positive:0;flex-grow:0;margin-top:16px}.aq-banner--success{background:var(--color-success-lighter)}.aq-banner--warning{background:var(--color-warning-lighter)}.aq-banner--danger{background:var(--color-danger-lighter)}.aq-banner .aq-button{margin-right:8px}.aq-banner--hidden{display:none}";
const AqBanner = /*@__PURE__*/ proxyCustomElement(class AqBanner extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.close = createEvent(this, "close", 7);
this.hasCloseIcon = true;
this.state = BannerState.INFO;
this.titleBanner = '';
this.value = true;
this.visible = true;
this.showActions = true;
}
valueChanged(newValue) {
this.visible = newValue;
if (!newValue)
this.close.emit();
emitEvent('input', this.hostElement, { value: this.value });
}
componentWillLoad() {
this.visible = this.value;
}
componentDidLoad() {
requestAnimationFrame(() => {
this.checkSlotContent();
});
}
checkSlotContent() {
const actionsSlot = this.hostElement.querySelector(`[slot='actions']`);
if (actionsSlot) {
this.showActions = true;
}
else {
this.showActions = false;
}
}
getState() {
return !this.state ? BannerState.INFO : this.state.toLowerCase();
}
getIcon() {
let icon = 'aq-icon-info-circle-fill';
if (this.state === BannerState.WARNING) {
icon = 'aq-icon-info-major-triangle-up-fill';
}
else if (this.state === BannerState.DANGER) {
icon = 'aq-icon-alert-circle-fill';
}
else if (this.state === BannerState.SUCCESS) {
icon = 'aq-icon-check-circle-fill';
}
return (h("span", { class: this.getClassIcon() }, h("em", { class: icon })));
}
handleClose() {
this.value = false;
}
getClose() {
return (this.hasCloseIcon && (h("div", { class: "aq-banner__close", onClick: () => this.handleClose() }, h("em", { class: "aq-icon-close" }))));
}
getContent() {
return (h("div", { class: "aq-banner__content" }, this.titleBanner && h("div", { class: this.getClassContent() }, this.titleBanner), h("div", { class: "aq-banner__text" }, h("slot", null)), this.showActions && (h("div", { class: "aq-banner__actions" }, h("slot", { name: "actions" })))));
}
getClassContent() {
return {
'aq-banner__title': true,
'aq-banner__title--bottom-spacing': this.titleBanner ? true : false,
};
}
getClassIcon() {
return {
'aq-button__icon': true,
[`aq-banner__icon--${this.getState()}`]: true,
};
}
getStyleClassMapp() {
return {
'aq-banner': true,
[`aq-banner--${this.state}`]: true,
};
}
getStyleClassStatus() {
return {
'aq-banner__status': true,
[`aq-banner__status--${this.getState()}`]: true,
};
}
render() {
const cssClass = this.getStyleClassMapp();
const cssClassBanner = this.getStyleClassStatus();
const icon = this.getIcon();
const content = this.getContent();
const close = this.getClose();
return (h("aq-transition", { key: '1eb6a2c078dc67b455c4b775d354b5e1652e249f', class: "aq-banner__transition", transitionType: "collapse", duration: "0.3s", visible: this.visible }, h("div", { key: '9c9abeb569947ad4897d6ab6a725bc83285e8c80', class: cssClass }, h("div", { key: '700e74bd85f2753f9c0c3a4aa1cb1de053931616', class: cssClassBanner }), h("div", { key: 'fc135b3d8b506141330c9b42e8bbcee164d9498b', class: "aq-banner__container" }, icon, content, close))));
}
get hostElement() { return this; }
static get watchers() { return {
"value": ["valueChanged"]
}; }
static get style() { return aqBannerCss; }
}, [260, "aq-banner", {
"hasCloseIcon": [4, "has-close-icon"],
"state": [1],
"titleBanner": [1, "title-banner"],
"value": [1540],
"visible": [32],
"showActions": [32]
}, undefined, {
"value": ["valueChanged"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-banner", "aq-transition"];
components.forEach(tagName => { switch (tagName) {
case "aq-banner":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqBanner);
}
break;
case "aq-transition":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqBanner as A, BannerState as B, defineCustomElement as d };