tenable-universal-layout 0.0.1-security → 7.7.13

package/dist/components/GlobalHeader/views/UniversalNavigation/UniversalNavigation.js

@@ -0,0 +1,321 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UniversalNavigation = void 0;
+const toolbox_1 = require("@productive-codebases/toolbox");
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const class_map_js_1 = require("lit/directives/class-map.js");
+const if_defined_js_1 = require("lit/directives/if-defined.js");
+const repeat_js_1 = require("lit/directives/repeat.js");
+const MobxLitElement_1 = require("../../../../libs/MobxLitElement");
+const tul_1 = require("../../../../types/tul");
+const NavigationMenuKeyboardController_1 = require("../../controller/NavigationMenuKeyboardController");
+const renderer_1 = require("../../utils/renderer");
+const NavigationEvent_1 = require("../Header/NavigationEvent");
+const PopOverStateController_1 = require("../PopOver/PopOverStateController");
+const styles_1 = require("./styles");
+const SCROLL_INDICATOR_THRESHOLD = 16;
+/**
+ * @csspart base - The component's internal wrapper.
+ *
+ * @event {NavigationEvent} pds-universal-navigation-menu-collapsed - Dispatched when the menu is collapsed.
+ * @event {NavigationEvent} pds-universal-navigation-popover-opened - Dispatched when one of the navigation menu's popover is opened.
+ */
+let UniversalNavigation = class UniversalNavigation extends MobxLitElement_1.MobxLitElement {
+    constructor() {
+        super(...arguments);
+        this.isClosed = true;
+        this.menuItems = [];
+        this.navigationConfig = null;
+        // Indicates which menu item is currently selected based on the menu ID. It highlights that menu item in the list.
+        this.selectedMenuItem = '';
+        this.popoverOpen = null;
+        // Prevents Tooltip from being visible while closing animation is still occurring
+        this.isPanelVisible = false;
+        this.isOverflowing = false;
+        this.showTopScrollIndicator = false;
+        this.showBottomScrollIndicator = false;
+        this.popoverStateController = null;
+        this._menuKeyboardController = null;
+        this.handleKeyDown = (ev) => {
+            const code = ev.code;
+            if (code === 'Escape') {
+                ev.preventDefault();
+                this.isClosed = true;
+                this.popoverOpen = null;
+                const payload = {};
+                const options = { bubbles: true, composed: true };
+                const navigationCollapsedEvent = new NavigationEvent_1.NavigationEvent(NavigationEvent_1.NavigationEvent.UNIVERSAL_NAVIGATION_MENU_COLLAPSED, payload, options);
+                this.dispatchEvent(navigationCollapsedEvent);
+            }
+        };
+        this.handleTransitionStart = () => {
+            if (!this.isPanelVisible) {
+                this.isPanelVisible = true;
+            }
+        };
+        this.handleTransitionEnd = () => {
+            if (this.isClosed) {
+                this.isPanelVisible = false;
+            }
+        };
+        this.queryMenuItemElements = (elementName) => {
+            var _a;
+            if ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.children.length) {
+                return Array.from(this.shadowRoot.children[0].querySelectorAll(elementName));
+            }
+            return [];
+        };
+        this.closeMenu = (event) => {
+            const isNavigationButton = event
+                .composedPath()
+                .some(node => 'id' in node ? node.id === 'navigation-button' : false);
+            if (!isNavigationButton) {
+                this.isClosed = true;
+                this.popoverOpen = null;
+            }
+        };
+        this.onNavigationButtonClicked = () => {
+            this.isClosed = !this.isClosed;
+            this.popoverOpen = null;
+            // Reset selected item when user closes the menu
+            if (this._menuKeyboardController) {
+                this._menuKeyboardController.selected = 0;
+            }
+        };
+        this.onPopoverTriggerClicked = (event) => {
+            var _a;
+            const { detail: { isOpen, popoverId } } = event.payload;
+            if (!isOpen) {
+                return;
+            }
+            const clickedMenuItem = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`tenable-popover#${popoverId}`);
+            if (clickedMenuItem) {
+                const options = {
+                    detail: { hostClicked: clickedMenuItem },
+                    bubbles: true,
+                    composed: true
+                };
+                const NavItemPopoverEvent = new CustomEvent(NavigationEvent_1.NavigationEvent.UNIVERSAL_NAVIGATION_POPOVER_OPENED, options);
+                document.dispatchEvent(NavItemPopoverEvent);
+            }
+        };
+        this.renderMenuItemNoSubmenu = (item) => {
+            var _a;
+            return (0, lit_1.html) `
+      <tenable-tooltip
+        .forceHide=${!this.isClosed || this.isPanelVisible}
+        fixed
+        offset=${-4}
+        placement="right"
+        text=${item.name}
+      >
+        <tenable-navigation-menu-item
+          id="universal-navigation-menu-item-for-${tul_1.GlobalHeaderPanels.Sidebar}-${item.id}"
+          item-id=${item.id}
+          host=${tul_1.GlobalHeaderPanels.Sidebar}
+          url=${(0, if_defined_js_1.ifDefined)(item.url)}
+          label=${item.name}
+          ?selected=${this.selectedMenuItem === item.id}
+          .item=${item}
+          .labelVisible=${!this.isClosed}
+          ?newTab=${((_a = item.url) === null || _a === void 0 ? void 0 : _a.startsWith('http')) === true}
+        >
+          ${(0, renderer_1.renderIconAsString)(item.icon)}
+        </tenable-navigation-menu-item>
+      </tenable-tooltip>
+    `;
+        };
+        this.renderMenuItemWithSubmenu = (item) => {
+            var _a, _b;
+            const menuItemId = ((_a = item === null || item === void 0 ? void 0 : item.id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || 'unknown';
+            const id = `universal-navigation-menu-item-${menuItemId}`;
+            return (0, lit_1.html) `
+      <tenable-tooltip
+        .forceHide=${!this.isClosed || this.isPanelVisible}
+        fixed
+        offset=${-4}
+        placement="right"
+        text=${item.name}
+      >
+        <tenable-popover
+          id="${id}"
+          label="${item.name}"
+          is-fixed
+          ?is-open=${this.popoverOpen === id}
+          placement="right-start"
+          @tenable-popover-anchor-clicked=${this.onPopoverTriggerClicked}
+        >
+          <tenable-navigation-menu-item
+            id="universal-navigation-menu-item-for-${tul_1.GlobalHeaderPanels.Sidebar}-${item.id ||
+                'unknown'}"
+            item-id=${item.id}
+            .item=${item}
+            host=${tul_1.GlobalHeaderPanels.Sidebar}
+            ?selected=${this.selectedMenuItem === item.id}
+            ?opened=${this.popoverOpen === id}
+            .labelVisible=${!this.isClosed}
+            .hasChildren=${Number((_b = item.menuItems) === null || _b === void 0 ? void 0 : _b.length) > 0}
+            slot="anchor"
+            label=${item.name}
+          >
+            ${(0, renderer_1.renderIconAsString)(item.icon)}
+          </tenable-navigation-menu-item>
+          ${item.menuItems && item.menuItems.length > 0
+                ? (0, lit_1.html) `
+                <tenable-universal-navigation-menu-submenu
+                  .menuItems=${(0, toolbox_1.ensureArray)(item.menuItems)}
+                  item-id=${item.id}
+                  host=${tul_1.GlobalHeaderPanels.Sidebar}
+                >
+                </tenable-universal-navigation-menu-submenu>
+              `
+                : ''}
+        </tenable-popover>
+      </tenable-tooltip>
+    `;
+        };
+        this.renderMenuItem = (item) => {
+            if (item && item.menuItems && item.menuItems.length) {
+                return this.renderMenuItemWithSubmenu(item);
+            }
+            else {
+                return this.renderMenuItemNoSubmenu(item);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener(NavigationEvent_1.NavigationEvent.UNIVERSAL_NAVIGATION_BUTTON_CLICKED, this.onNavigationButtonClicked);
+        this.popoverStateController = new PopOverStateController_1.PopoverStateController(this, {
+            hasMultiplePopovers: true
+        });
+        this._menuKeyboardController = new NavigationMenuKeyboardController_1.NavigationMenuKeyboardController(this);
+        document.addEventListener('closeUniversalNavigation', this.closeMenu);
+        /**
+         * @todo Comment this if we don't want to toggle sidebar on document click
+         */
+        document.addEventListener('click', this.closeMenu);
+        this.addEventListener('keydown', this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(NavigationEvent_1.NavigationEvent.UNIVERSAL_NAVIGATION_BUTTON_CLICKED, this.onNavigationButtonClicked);
+        document.removeEventListener('closeUniversalNavigation', this.closeMenu);
+        /**
+         * @todo Comment this if we don't want to toggle sidebar on document click
+         */
+        document.removeEventListener('click', this.closeMenu);
+        this.removeEventListener('keydown', this.handleKeyDown);
+    }
+    firstUpdated() {
+        var _a, _b;
+        const animation = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tenable-universal-navigation-root');
+        animation === null || animation === void 0 ? void 0 : animation.addEventListener('transitionstart', this.handleTransitionStart);
+        animation === null || animation === void 0 ? void 0 : animation.addEventListener('transitionend', this.handleTransitionEnd);
+        // Setup event listeners required for handling overflow scroll indicators.
+        const basePart = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.children[0];
+        window === null || window === void 0 ? void 0 : window.addEventListener('resize', () => {
+            this.setOverflow();
+            this.setScrollIndicatorStates();
+        });
+        basePart === null || basePart === void 0 ? void 0 : basePart.addEventListener('scroll', () => this.setScrollIndicatorStates());
+    }
+    setOverflow() {
+        var _a;
+        const basePart = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.children[0];
+        if (basePart) {
+            this.isOverflowing = basePart.scrollHeight > basePart.clientHeight;
+        }
+    }
+    setScrollIndicatorStates() {
+        var _a;
+        const basePart = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.children[0];
+        if (basePart) {
+            this.showTopScrollIndicator =
+                this.isOverflowing && basePart.scrollTop > SCROLL_INDICATOR_THRESHOLD;
+            this.showBottomScrollIndicator =
+                this.isOverflowing &&
+                    !(basePart.scrollHeight - basePart.scrollTop <
+                        basePart.clientHeight + SCROLL_INDICATOR_THRESHOLD);
+        }
+    }
+    updated() {
+        var _a;
+        (_a = this._menuKeyboardController) === null || _a === void 0 ? void 0 : _a.initMenuItems(this.queryMenuItemElements('tenable-navigation-menu-item'));
+        // Set initial overflow/scroll indicator states.
+        this.setOverflow();
+        this.setScrollIndicatorStates();
+    }
+    render() {
+        const classes = (0, class_map_js_1.classMap)({
+            'tenable-universal-navigation-root': true,
+            'tenable-universal-navigation-root_expanded': !this.isClosed
+        });
+        const scrollTopClasses = (0, class_map_js_1.classMap)({
+            'tenable-universal-navigation-root_scroll-indicator': true,
+            'tenable-universal-navigation-root_scroll-indicator_top': true,
+            'tenable-universal-navigation-root_scroll-indicator_expanded': !this.isClosed,
+            'tenable-universal-navigation-root_scroll-indicator_hidden': !this.showTopScrollIndicator
+        });
+        const scrollBottomClasses = (0, class_map_js_1.classMap)({
+            'tenable-universal-navigation-root_scroll-indicator': true,
+            'tenable-universal-navigation-root_scroll-indicator_bottom': true,
+            'tenable-universal-navigation-root_scroll-indicator_expanded': !this.isClosed,
+            'tenable-universal-navigation-root_scroll-indicator_hidden': !this.showBottomScrollIndicator
+        });
+        return (0, lit_1.html) `
+      <div part="base" class=${classes}>
+        <div class=${scrollTopClasses}>
+          <tenable-chevron-down></tenable-chevron-down>
+        </div>
+
+        ${this.menuItems &&
+            (0, repeat_js_1.repeat)(this.menuItems, item => item.name, item => this.renderMenuItem(item))}
+
+        <div class=${scrollBottomClasses}>
+          <tenable-chevron-down></tenable-chevron-down>
+        </div>
+      </div>
+    `;
+    }
+};
+exports.UniversalNavigation = UniversalNavigation;
+UniversalNavigation.styles = [styles_1.universalNavigationStyles];
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean })
+], UniversalNavigation.prototype, "isClosed", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Array })
+], UniversalNavigation.prototype, "menuItems", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Object })
+], UniversalNavigation.prototype, "navigationConfig", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: 'selected-menu-item', reflect: true, type: String })
+], UniversalNavigation.prototype, "selectedMenuItem", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], UniversalNavigation.prototype, "popoverOpen", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], UniversalNavigation.prototype, "isPanelVisible", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], UniversalNavigation.prototype, "isOverflowing", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], UniversalNavigation.prototype, "showTopScrollIndicator", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], UniversalNavigation.prototype, "showBottomScrollIndicator", void 0);
+exports.UniversalNavigation = UniversalNavigation = __decorate([
+    (0, decorators_js_1.customElement)('tenable-universal-navigation')
+], UniversalNavigation);
+//# sourceMappingURL=UniversalNavigation.js.map

package/dist/components/GlobalHeader/views/UniversalNavigation/UniversalNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UniversalNavigation.js","sourceRoot":"","sources":["../../../../../src/components/GlobalHeader/views/UniversalNavigation/UniversalNavigation.ts"],"names":[],"mappings":"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"}

package/dist/components/GlobalHeader/views/UniversalNavigation/styles.d.ts

@@ -0,0 +1 @@
+export declare const universalNavigationStyles: import("lit").CSSResult;

package/dist/components/GlobalHeader/views/UniversalNavigation/styles.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.universalNavigationStyles = void 0;
+const lit_1 = require("lit");
+exports.universalNavigationStyles = (0, lit_1.css) `
+  :host {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    gap: 0px 0px;
+    position: absolute;
+    top: 0;
+    z-index: var(--tenb-zIndices-universal-navigation);
+  }
+
+  .tenable-universal-navigation-root {
+    background-color: var(--tenb-colors-background-component);
+    box-shadow: 0px 15px 30px -2px rgba(0, 0, 0, 0);
+    box-sizing: border-box;
+    border-right: 1px solid var(--tenb-colors-border-base);
+    color: var(--tenb-colors-text-body);
+    height: calc(100vh - var(--tenb-navigation-top-offset, 64px));
+    width: 56px;
+
+    position: absolute;
+    top: var(--tenb-navigation-top-offset, 64px);
+    left: 0px;
+    bottom: 0px;
+    overflow-y: auto;
+    overflow-x: clip;
+
+    scrollbar-width: none;
+
+    transition:
+      width 0.3s ease-in,
+      box-shadow 0.3s ease-in;
+  }
+
+  /* Scrollbar support for Safari TODO: Remove when Safari supports scrollbar-width */
+  .tenable-universal-navigation-root::-webkit-scrollbar {
+    width: 0;
+  }
+
+  .tenable-universal-navigation-root_expanded {
+    width: 300px;
+    box-shadow: 0px 15px 30px -2px rgba(0, 0, 0, 0.25);
+
+    scrollbar-width: thin;
+  }
+
+  /* Scrollbar support for Safari TODO: Remove when Safari supports scrollbar-width */
+  .tenable-universal-navigation-root_expanded::-webkit-scrollbar {
+    width: 10px;
+  }
+  .tenable-universal-navigation-root_expanded::-webkit-scrollbar-track {
+    background-color: var(--tenb-colors-background-container);
+  }
+  .tenable-universal-navigation-root_expanded::-webkit-scrollbar-thumb {
+    background-color: var(--tenb-colors-background-hover-alt);
+    border: 2px solid var(--tenb-colors-background-container);
+    border-radius: 9999px;
+  }
+
+  .tenable-universal-navigation-root_scroll-indicator {
+    position: fixed;
+    left: 0px;
+    width: 55px;
+    height: 16px;
+    z-index: var(--tenb-zIndices-universal-navigation);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--tenb-colors-background-container);
+    opacity: 1;
+
+    transition:
+      width 0.3s ease-in,
+      opacity 0.3s ease-in;
+  }
+
+  .tenable-universal-navigation-root_scroll-indicator_expanded {
+    opacity: 0;
+    width: 300px;
+  }
+
+  .tenable-universal-navigation-root_scroll-indicator_hidden {
+    opacity: 0;
+  }
+
+  .tenable-universal-navigation-root_scroll-indicator_top {
+    top: var(--tenb-navigation-top-offset, 64px);
+  }
+
+  .tenable-universal-navigation-root_scroll-indicator_top
+    > tenable-chevron-down {
+    transform: rotate(180deg);
+  }
+
+  .tenable-universal-navigation-root_scroll-indicator_bottom {
+    bottom: 0px;
+  }
+
+  tenable-popover::part(anchor) {
+    display: block;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/components/GlobalHeader/views/UniversalNavigation/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/components/GlobalHeader/views/UniversalNavigation/styles.ts"],"names":[],"mappings":";;;AAAA,6BAAyB;AAEZ,QAAA,yBAAyB,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsG3C,CAAA"}

package/dist/components/GlobalHeader/views/UserProfile/UserAction.d.ts

@@ -0,0 +1,20 @@
+import { MobxLitElement } from '../../../../libs/MobxLitElement';
+/**
+ * @slot Default - Use to render child content
+ *
+ * @csspart base - The component's internal wrapper
+ * @csspart trigger - The trigger wrapper
+ * @csspart content - The content wrapper
+ */
+export declare class UserAction extends MobxLitElement {
+    popover: any;
+    avatar: string;
+    private _actionController;
+    onPopoverTriggerClicked: () => void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tenable-universal-header-user-action': UserAction;
+    }
+}

package/dist/components/GlobalHeader/views/UserProfile/UserAction.js

@@ -0,0 +1,70 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserAction = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const MobxLitElement_1 = require("../../../../libs/MobxLitElement");
+const uuid_1 = require("../../utils/uuid");
+const ActionController_1 = require("../ActionPanel/ActionController");
+const id = 'universal-header-user-action';
+const uniqueId = `${(0, uuid_1.uuid)()}`;
+const popoverId = `${id}-${uniqueId}`;
+/**
+ * @slot Default - Use to render child content
+ *
+ * @csspart base - The component's internal wrapper
+ * @csspart trigger - The trigger wrapper
+ * @csspart content - The content wrapper
+ */
+let UserAction = class UserAction extends MobxLitElement_1.MobxLitElement {
+    constructor() {
+        super(...arguments);
+        this.avatar = '??';
+        this._actionController = new ActionController_1.ActionController(this);
+        this.onPopoverTriggerClicked = () => {
+            this._actionController.onPopoverTriggerClicked(this, this.popover);
+        };
+    }
+    render() {
+        var _a, _b;
+        return (0, lit_1.html) `
+      <tenable-popover
+        part="base"
+        id="${popoverId}"
+        label="Profile Menu"
+        ?is-open=${this._actionController.isMenuOpen}
+        @tenable-popover-anchor-clicked=${this.onPopoverTriggerClicked}
+      >
+        <tenable-avatar
+          ?selected=${this._actionController.isMenuOpen}
+          .allowSelectedClick=${true}
+          id="profile-menu-button"
+          slot="anchor"
+          part="trigger"
+          aria-label="Avatar"
+          aria-haspopup="true"
+        >
+          ${(_b = (_a = this.avatar) === null || _a === void 0 ? void 0 : _a.slice(0, 2)) === null || _b === void 0 ? void 0 : _b.toUpperCase()}
+        </tenable-avatar>
+        <slot></slot>
+      </tenable-popover>
+    `;
+    }
+};
+exports.UserAction = UserAction;
+__decorate([
+    (0, decorators_js_1.query)(`#${popoverId}`)
+], UserAction.prototype, "popover", void 0);
+__decorate([
+    (0, decorators_js_1.property)()
+], UserAction.prototype, "avatar", void 0);
+exports.UserAction = UserAction = __decorate([
+    (0, decorators_js_1.customElement)('tenable-universal-header-user-action')
+], UserAction);
+//# sourceMappingURL=UserAction.js.map

package/dist/components/GlobalHeader/views/UserProfile/UserAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserAction.js","sourceRoot":"","sources":["../../../../../src/components/GlobalHeader/views/UserProfile/UserAction.ts"],"names":[],"mappings":";;;;;;;;;AAAA,6BAA0B;AAC1B,qDAAkE;AAClE,0DAAsD;AACtD,2CAAuC;AACvC,sEAAkE;AAElE,MAAM,EAAE,GAAG,8BAA8B,CAAA;AACzC,MAAM,QAAQ,GAAG,GAAG,IAAA,WAAI,GAAE,EAAE,CAAA;AAC5B,MAAM,SAAS,GAAG,GAAG,EAAE,IAAI,QAAQ,EAAE,CAAA;AAErC;;;;;;GAMG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,+BAAc;IAAvC;;QAKL,WAAM,GAAG,IAAI,CAAA;QAEL,sBAAiB,GAAG,IAAI,mCAAgB,CAAC,IAAI,CAAC,CAAA;QAEtD,4BAAuB,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;QACpE,CAAC,CAAA;IA0BH,CAAC;IAxBC,MAAM;;QACJ,OAAO,IAAA,UAAI,EAAA;;;cAGD,SAAS;;mBAEJ,IAAI,CAAC,iBAAiB,CAAC,UAAU;0CACV,IAAI,CAAC,uBAAuB;;;sBAGhD,IAAI,CAAC,iBAAiB,CAAC,UAAU;gCACvB,IAAI;;;;;;;YAOxB,MAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,0CAAE,WAAW,EAAE;;;;KAI9C,CAAA;IACH,CAAC;CACF,CAAA;AArCY,gCAAU;AAErB;IADC,IAAA,qBAAK,EAAC,IAAI,SAAS,EAAE,CAAC;2CACX;AAGZ;IADC,IAAA,wBAAQ,GAAE;0CACE;qBALF,UAAU;IADtB,IAAA,6BAAa,EAAC,sCAAsC,CAAC;GACzC,UAAU,CAqCtB"}

package/dist/components/GlobalHeader/views/UserProfile/UserPanel.d.ts

@@ -0,0 +1,25 @@
+import { MobxLitElement } from '../../../../libs/MobxLitElement';
+import type { MenuItem } from '../../../../types/tul';
+export type UserMenuItemsProps = MenuItem[];
+/**
+ * @slot Default - Use to render child content
+ *
+ * @csspart base - The component's internal wrapper
+ * @csspart panel-header - The panel header wrapper
+ * @csspart panel-header-title - The panel header title
+ * @csspart panel-header-subtitle - The panel header subtitle
+ * @csspart panel-body - The panel body wrapper
+ */
+export declare class UserPanel extends MobxLitElement {
+    static styles: import("lit").CSSResult[];
+    panelTitle: string;
+    panelSubTitle: string;
+    menuItems: UserMenuItemsProps;
+    selectedMenuItem: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tenable-universal-header-user-panel': UserPanel;
+    }
+}