@aqua-ds/web-components
Version:
AquaDS Web Components
122 lines (117 loc) • 7.56 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { P as Popover } from './popover.js';
const POPOVER_CONFIG = {
trigger: 'click',
placement: 'right',
maxWidth: 'none',
theme: 'aqua',
arrow: false,
customMount: instance => {
console.log('My own mount function', instance);
},
};
const aqPopoverCss = ":host{display:block}.tippy-box[data-theme~=aqua]{-webkit-filter:drop-shadow(0px 8px 12px rgba(19, 19, 22, 0.15));filter:drop-shadow(0px 8px 12px rgba(19, 19, 22, 0.15));font-family:\"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;-webkit-box-shadow:0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);box-shadow:0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);background-color:white;border-radius:4px;padding:8px 0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;color:black}.aq-popover__header{display:-ms-flexbox;display:flex;position:relative;padding:12px;font-size:16px;line-height:22px;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-align:center;align-items:center}.aq-popover__header span{color:#333333;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.aq-popover__header [class^=mui-icon-]{cursor:unset;font-size:20px;padding:4px}.aq-popover__header [class^=aq-icon-]{cursor:unset;font-size:16px;padding:4px}.aq-popover__header [class$=close]{cursor:pointer}.aq-popover__body{padding:12px;width:100%;overflow:auto;-ms-flex-order:1;order:1}.aq-popover__body--wo-padding{padding:0}.aq-popover__header-left{position:absolute;right:12px}.aq-popover__footer{width:100%;-ms-flex-order:1;order:1}.aq-popover__footer-content{padding:12px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between}.aq-popover__backdrop{position:fixed;background-color:#000;opacity:0.1;top:0;right:0;bottom:0;left:0;z-index:1148}.aq-popover[data-popper-placement*=bottom] .aq-popover__arrow{top:0;width:0;height:0;border-left:1.1em solid transparent;border-right:1.1em solid transparent;border-bottom:1.1em solid rgba(95, 95, 95, 0.2);-webkit-filter:drop-shadow(0px -1px 1px rgba(19, 19, 22, 0.15));filter:drop-shadow(0px -1px 1px rgba(19, 19, 22, 0.15));margin-top:-1.1em}.aq-popover[data-popper-placement*=bottom] .aq-popover__arrow:before{border-width:0 1em 1em 1em;margin-left:-1em;margin-top:0.1em;border-color:transparent transparent white transparent}.aq-popover[data-popper-placement*=top] .aq-popover__arrow{bottom:0;width:0;height:0;border-left:1.1em solid transparent;border-right:1.1em solid transparent;border-top:1.1em solid rgba(95, 95, 95, 0.2);-webkit-filter:drop-shadow(0px 2px 1px rgba(19, 19, 22, 0.15));filter:drop-shadow(0px 2px 1px rgba(19, 19, 22, 0.15));margin-bottom:-1.1em}.aq-popover[data-popper-placement*=top] .aq-popover__arrow:before{border-width:1em 1em 0 1em;margin-top:-1.1em;margin-left:-1em;border-color:white transparent transparent transparent}.aq-popover[data-popper-placement*=right] .aq-popover__arrow{left:0;width:0;height:0;border-top:1.1em solid transparent;border-bottom:1.1em solid transparent;border-right:1.1em solid rgba(95, 95, 95, 0.2);-webkit-filter:drop-shadow(-2px 0px 1px rgba(19, 19, 22, 0.15));filter:drop-shadow(-2px 0px 1px rgba(19, 19, 22, 0.15));margin-left:-1.1em}.aq-popover[data-popper-placement*=right] .aq-popover__arrow:before{border-width:1em 1em 1em 0;margin-top:-1em;margin-left:0.1em;border-color:transparent white transparent transparent}.aq-popover[data-popper-placement*=left] .aq-popover__arrow{right:0;width:0;height:0;border-top:1.1em solid transparent;border-bottom:1.1em solid transparent;border-left:1.1em solid rgba(95, 95, 95, 0.2);margin-right:-1.1em}.aq-popover[data-popper-placement*=left] .aq-popover__arrow:before{border-width:1em 0 1em 1em;margin-top:-1em;margin-left:-1.1em;border-color:transparent transparent transparent white}.aq-popover .aq-popover__arrow{position:absolute;font-size:7px;width:3em;height:3em;-webkit-filter:drop-shadow(0px 2px 4px rgba(19, 19, 22, 0.15));filter:drop-shadow(0px 2px 4px rgba(19, 19, 22, 0.15))}.aq-popover .aq-popover__arrow:before{content:\"\";margin:auto;display:block;width:0;height:0;border-style:solid}.aq-popover .aq-button{margin-left:8px}.aq-popover__backdrop{position:fixed;background-color:#000;opacity:0.1;top:0;right:0;bottom:0;left:0;z-index:1048}";
const AqPopover = /*@__PURE__*/ proxyCustomElement(class AqPopover extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.aqshow = createEvent(this, "aqshow", 7);
this.aqhide = createEvent(this, "aqhide", 7);
this.config = POPOVER_CONFIG;
this.disabled = false;
this.localConfig = POPOVER_CONFIG;
}
onConfigChange(newVal) {
this.localConfig = newVal;
}
onTriggerChange() {
this.getSlot();
this.createPopover();
}
onDisabledChange() {
this.getSlot();
this.createPopover();
}
async setInstance() {
if (!this.disabled && !!this.slot) {
this.instance = new Popover(this.trigger);
const config = {
content: this.slot,
...this.localConfig,
...this.config,
};
this.buildPopoverInstance(config);
}
}
createPopover() {
this.setDefaultConfig();
this.setInstance();
}
buildPopoverInstance(config) {
this.popoverConfig = this.instance.buildInstance({ ...config });
}
setDefaultConfig() {
this.localConfig = {
...POPOVER_CONFIG,
onShow: instance => {
this.aqshow.emit(instance);
},
onHide: () => {
this.aqhide.emit();
},
...this.config,
};
}
setElement(el) {
this.slot = el;
}
getSlot() {
const slot = this.element;
if (slot instanceof HTMLElement) {
this.setElement(slot);
}
else {
console.error('Popover: no se encontró el slot válido para popover', slot);
}
}
componentDidLoad() {
this.createPopover();
}
render() {
this.getSlot();
return (h(Host, { key: '058b810bdaeed2476068ace46a0bd20f9c8e3616', class: "aq-popover" }, h("div", { key: '6e513e88058332588d42df349fa612e8d8f9d340' }, this.disabled ? h("slot", { name: "popover" }) : null)));
}
get element() { return this; }
static get watchers() { return {
"config": ["onConfigChange"],
"trigger": ["onTriggerChange"],
"disabled": ["onDisabledChange"]
}; }
static get style() { return aqPopoverCss; }
}, [260, "aq-popover", {
"trigger": [16],
"config": [16],
"disabled": [4],
"slot": [32],
"setInstance": [64]
}, undefined, {
"config": ["onConfigChange"],
"trigger": ["onTriggerChange"],
"disabled": ["onDisabledChange"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-popover"];
components.forEach(tagName => { switch (tagName) {
case "aq-popover":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqPopover);
}
break;
} });
}
export { AqPopover as A, defineCustomElement as d };