@peculiar/fortify-webcomponents
Version:
Web-components for creating CSR or Certificate and viewing certificates list using Fortify
80 lines (73 loc) • 4.5 kB
JavaScript
/*!
* © Peculiar Ventures https://peculiarventures.com/ - BSD 3-Clause License
*/
import { h, r as registerInstance, H as Host, g as getElement } from './index-4c0eccab.js';
import { B as Button } from './button-e984f3b1.js';
import { T as Typography } from './typography-a2121a56.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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)))))))));
}
};
ButtonMenu.style = PeculiarButtonMenuStyle0;
const highlightWordsCss = ":host{display:inline}::slotted(mark){background-color:var(--pv-color-attention-tint-4)}";
const PeculiarHighlightWordsStyle0 = highlightWordsCss;
const HighlightWords = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.tag = 'mark';
this.search = undefined;
}
componentDidLoad() {
this.handleHighlightSearch();
}
componentDidUpdate() {
this.handleHighlightSearch();
}
handleHighlightSearch() {
const basicString = this.resetHighlightSearch(this.host.innerHTML);
let result = basicString;
if (this.search) {
const substring = new RegExp(`(${this.search})`, 'gi');
result = basicString.replace(substring, `<${this.tag}>$1</${this.tag}>`);
}
this.host.innerHTML = result;
}
resetHighlightSearch(source) {
// eslint-disable-next-line no-useless-escape
const substring = new RegExp(`<\/?${this.tag}>`, 'g');
return source.replace(substring, '');
}
render() {
return (h(Host, { key: '353abad7e2fc43ea4af75ec025e08d2ff3159ee6' }, h("slot", { key: '9ac44c0a2b95ea7a778e2d6a2909c797f8c17b6d' })));
}
get host() { return getElement(this); }
};
HighlightWords.style = PeculiarHighlightWordsStyle0;
export { ButtonMenu as peculiar_button_menu, HighlightWords as peculiar_highlight_words };
//# sourceMappingURL=peculiar-button-menu_2.entry.js.map