@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
68 lines (63 loc) • 3.95 kB
JavaScript
/*!
* © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
*/
import { h, proxyCustomElement, HTMLElement, Host, transformTag } 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
*/
/**
* @license
* Copyright (c) Peculiar Ventures, LLC.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
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:calc(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:calc(var(--pv-size-base) * 2);margin-bottom:var(--pv-size-base)}.group_title.sc-peculiar-button-menu{line-height:calc(var(--pv-size-base) * 6);padding:0 calc(var(--pv-size-base) * 2)}`;
const ButtonMenu = /*@__PURE__*/ proxyCustomElement(class ButtonMenu extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.groups = [];
this.open = false;
this.handleClick = () => {
this.open = !this.open;
};
}
render() {
return (h(Host, { key: '66dd03eaa8d6e1f6dee3d9782390e094c5804b4a', class: { is_shown: this.open } }, h(Button, { key: 'ba4e5601321b4e778937f6386a8a5220e28f5809', class: "button_popover", startIcon: h(ActionsIcon, null), onClick: this.handleClick }), h("div", { key: 'ed4d374f4a4982a24665e1cb60eaa57428ba0e4e', 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 buttonMenuCss(); }
}, [258, "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(transformTag(tagName))) {
customElements.define(transformTag(tagName), ButtonMenu);
}
break;
} });
}
export { ButtonMenu as B, defineCustomElement as d };
//# sourceMappingURL=button-menu.js.map
//# sourceMappingURL=button-menu.js.map