@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
61 lines (56 loc) • 3.67 kB
JavaScript
/*!
* © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
*/
import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
import { B as Button } from './button.js';
import { T as Typography } from './typography.js';
/*!
* © Peculiar Ventures https://peculiarventures.com/ - MIT License
*/
const ActionsIcon = (props) => {
const { color = 'gray-10' } = props;
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "30", height: "31", fill: "none" }, h("path", { fill: `var(--pv-color-${color})`, d: "M15 13.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm14 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" })));
};
const buttonMenuCss = ".sc-peculiar-button-menu-h{display:-ms-inline-flexbox;display:inline-flex;position:relative}.is_shown.sc-peculiar-button-menu-h .button_popover.sc-peculiar-button-menu:before{position:fixed;width:100%;height:100%;top:0;left:0;content:\"\"}.is_shown.sc-peculiar-button-menu-h .popover.sc-peculiar-button-menu{display:block}.popover.sc-peculiar-button-menu{min-width:200px;position:absolute;top:100%;right:0;border-radius:4px;z-index:1;-webkit-box-shadow:var(--pv-shadow-light-medium);box-shadow:var(--pv-shadow-light-medium);background:var(--pv-color-white);padding:var(--pv-size-base-2) 0;margin:var(--pv-size-base) 0;display:none}.button_option.sc-peculiar-button-menu{width:100%;-ms-flex-pack:start;justify-content:flex-start;border-radius:0}.group.sc-peculiar-button-menu:not(:last-child){border-bottom:1px solid var(--pv-color-gray-5);padding-bottom:var(--pv-size-base-2);margin-bottom:var(--pv-size-base)}.group_title.sc-peculiar-button-menu{line-height:var(--pv-size-base-6);padding:0 var(--pv-size-base-2)}";
const PeculiarButtonMenuStyle0 = buttonMenuCss;
const ButtonMenu = /*@__PURE__*/ proxyCustomElement(class ButtonMenu extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.handleClick = () => {
this.open = !this.open;
};
this.groups = [];
this.open = false;
}
render() {
return (h(Host, { key: '484c56eb147ee97b4be9d9c0c324a6192be5d1b4', class: {
is_shown: this.open,
} }, h(Button, { key: '00b7864c569169633c30a69f26185891ba9c39d1', class: "button_popover", onClick: this.handleClick, startIcon: h(ActionsIcon, null) }), h("div", { key: 'afe0500732f053c8b22c65ec11bd2010546fc5e6', role: "dialog", tabIndex: -1, class: "popover", "aria-hidden": String(this.open) }, this.groups.map((group) => (h("div", { class: "group" }, h(Typography, { variant: "c2", color: "gray-9", class: "group_title" }, group.title), group.options.map((option) => (h(Button, { class: "button_option", startIcon: option.startIcon, href: option.href, onClick: (event) => {
event.stopPropagation();
this.handleClick();
if (option.onClick) {
option.onClick(event);
}
} }, option.text)))))))));
}
static get style() { return PeculiarButtonMenuStyle0; }
}, [2, "peculiar-button-menu", {
"groups": [16],
"open": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["peculiar-button-menu"];
components.forEach(tagName => { switch (tagName) {
case "peculiar-button-menu":
if (!customElements.get(tagName)) {
customElements.define(tagName, ButtonMenu);
}
break;
} });
}
export { ButtonMenu as B, defineCustomElement as d };
//# sourceMappingURL=button-menu.js.map