tenable-universal-layout 0.0.1-security → 7.7.12

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

@@ -0,0 +1,60 @@
+"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.NotificationBadge = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const MobxLitElement_1 = require("../../../../libs/MobxLitElement");
+/**
+ * @slot Default - Use to add child content
+ *
+ * @csspart base - The component's internal wrapper.
+ */
+let NotificationBadge = class NotificationBadge extends MobxLitElement_1.MobxLitElement {
+    render() {
+        return (0, lit_1.html) `
+      <div part="base" class="tenable-notification-badge">
+        <div>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+exports.NotificationBadge = NotificationBadge;
+NotificationBadge.styles = (0, lit_1.css) `
+    :host {
+      position: absolute;
+      top: -5px;
+      // left: 20px;
+    }
+
+    .tenable-notification-badge {
+      position: absolute;
+      background-color: var(--tenb-colors-icon-status-bad);
+      border: 0;
+      border-radius: 100px;
+      box-sizing: border-box;
+      color: var(--tenb-colors-text-white);
+      cursor: pointer;
+      text-align: center;
+      vertical-align: center;
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    .tenable-notification-badge div {
+      padding-top: 3px;
+      font-family: var(--tenb-fonts-base);
+      font-size: var(--tenb-fontSizes-12);
+    }
+  `;
+exports.NotificationBadge = NotificationBadge = __decorate([
+    (0, decorators_js_1.customElement)('tenable-notification-badge')
+], NotificationBadge);
+//# sourceMappingURL=NotificationBadge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBadge.js","sourceRoot":"","sources":["../../../../../src/components/GlobalHeader/views/NotificationBadge/NotificationBadge.ts"],"names":[],"mappings":";;;;;;;;;AAAA,6BAA+B;AAC/B,qDAAiD;AACjD,0DAAsD;AAEtD;;;;GAIG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,+BAAc;IA6BnD,MAAM;QACJ,OAAO,IAAA,UAAI,EAAA;;;;;;KAMV,CAAA;IACH,CAAC;;AArCU,8CAAiB;AACrB,wBAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BlB,AA1BY,CA0BZ;4BA3BU,iBAAiB;IAD7B,IAAA,6BAAa,EAAC,4BAA4B,CAAC;GAC/B,iBAAiB,CAsC7B"}

package/dist/components/GlobalHeader/views/Notifications/NotificationPanel.d.ts

@@ -0,0 +1,19 @@
+import { MobxLitElement } from '../../../../libs/MobxLitElement';
+/**
+ * @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-body - The panel body wrapper
+ */
+export declare class NotificationsPanel extends MobxLitElement {
+    static styles: import("lit").CSSResult[];
+    panelTitle: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tenable-universal-header-notifications-panel': NotificationsPanel;
+    }
+}

package/dist/components/GlobalHeader/views/Notifications/NotificationPanel.js

@@ -0,0 +1,50 @@
+"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.NotificationsPanel = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const MobxLitElement_1 = require("../../../../libs/MobxLitElement");
+const styles_1 = require("./styles");
+/**
+ * @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-body - The panel body wrapper
+ */
+let NotificationsPanel = class NotificationsPanel extends MobxLitElement_1.MobxLitElement {
+    constructor() {
+        super(...arguments);
+        this.panelTitle = 'Notifications';
+    }
+    render() {
+        return (0, lit_1.html) `
+      <tenable-universal-header-action-panel part="base">
+        <tenable-universal-header-action-panel-header part="panel-header">
+          <tenable-heading3 part="panel-header-title"
+            >${this.panelTitle}</tenable-heading3
+          >
+        </tenable-universal-header-action-panel-header>
+        <tenable-universal-header-action-panel-body part="panel-body">
+          <slot></slot>
+        </tenable-universal-header-action-panel-body>
+      </tenable-universal-header-action-panel>
+    `;
+    }
+};
+exports.NotificationsPanel = NotificationsPanel;
+NotificationsPanel.styles = [styles_1.notificationsMenuStyles];
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], NotificationsPanel.prototype, "panelTitle", void 0);
+exports.NotificationsPanel = NotificationsPanel = __decorate([
+    (0, decorators_js_1.customElement)('tenable-universal-header-notifications-panel')
+], NotificationsPanel);
+//# sourceMappingURL=NotificationPanel.js.map

package/dist/components/GlobalHeader/views/Notifications/NotificationPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationPanel.js","sourceRoot":"","sources":["../../../../../src/components/GlobalHeader/views/Notifications/NotificationPanel.ts"],"names":[],"mappings":";;;;;;;;;AAAA,6BAA0B;AAC1B,qDAA2D;AAC3D,0DAAsD;AACtD,qCAAkD;AAElD;;;;;;;GAOG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,+BAAc;IAA/C;;QAIL,eAAU,GAAG,eAAe,CAAA;IAgB9B,CAAC;IAdC,MAAM;QACJ,OAAO,IAAA,UAAI,EAAA;;;;eAIA,IAAI,CAAC,UAAU;;;;;;;KAOzB,CAAA;IACH,CAAC;;AAnBU,gDAAkB;AACtB,yBAAM,GAAG,CAAC,gCAAuB,CAAC,AAA5B,CAA4B;AAGzC;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACC;6BAJjB,kBAAkB;IAD9B,IAAA,6BAAa,EAAC,8CAA8C,CAAC;GACjD,kBAAkB,CAoB9B"}

package/dist/components/GlobalHeader/views/Notifications/NotificationsAction.d.ts

@@ -0,0 +1,22 @@
+import { MobxLitElement } from '../../../../libs/MobxLitElement';
+import type { TenablePopoverEvents } from '../PopOver/PopOverEvent';
+/**
+ * @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 NotificationsAction extends MobxLitElement {
+    popover: any;
+    notificationCount: number;
+    private _actionController;
+    onPopoverTriggerClicked: (event: TenablePopoverEvents) => void;
+    renderBadge: () => import("lit-html").TemplateResult<1> | undefined;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tenable-universal-header-notifications-action': NotificationsAction;
+    }
+}

package/dist/components/GlobalHeader/views/Notifications/NotificationsAction.js

@@ -0,0 +1,96 @@
+"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.NotificationsAction = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const MobxLitElement_1 = require("../../../../libs/MobxLitElement");
+const types_1 = require("../../../../stores/StoreTelemetry/types");
+const tul_1 = require("../../../../types/tul");
+const uuid_1 = require("../../utils/uuid");
+const ActionController_1 = require("../ActionPanel/ActionController");
+const id = 'universal-header-notifications-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 NotificationsAction = class NotificationsAction extends MobxLitElement_1.MobxLitElement {
+    constructor() {
+        super(...arguments);
+        this.notificationCount = 0;
+        this._actionController = new ActionController_1.ActionController(this);
+        this.onPopoverTriggerClicked = (event) => {
+            var _a, _b;
+            const { storeRoot, storeTelemetry } = this.__getStores();
+            this._actionController.onPopoverTriggerClicked(this, this.popover);
+            const tulEvent = {
+                eventName: tul_1.TulEvent.onTulEventNotificationClick,
+                detail: {
+                    nativeEvent: event,
+                    tulApi: storeRoot.tulApi
+                }
+            };
+            this.__dispatchTulEvent(tulEvent);
+            (_b = (_a = storeRoot.environment.config.app.handlers) === null || _a === void 0 ? void 0 : _a.onTulNotificationsClick) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                tulEvent
+            });
+            storeTelemetry.trackTelemetry(types_1.EventType.NotificationClicked);
+        };
+        this.renderBadge = () => {
+            if (this.notificationCount > 0) {
+                return (0, lit_1.html) `<tenable-notification-badge
+        >${this.notificationCount}</tenable-notification-badge
+      >`;
+            }
+        };
+    }
+    render() {
+        return (0, lit_1.html) `
+      <tenable-popover
+        part="base"
+        id="${popoverId}"
+        label="Notifications Menu"
+        ?is-open=${this._actionController.isMenuOpen}
+        @tenable-popover-anchor-clicked=${this.onPopoverTriggerClicked}
+      >
+        <tenable-floating-button
+          class="notification__trigger"
+          ?selected=${this._actionController.isMenuOpen}
+          .allowSelectedClick=${true}
+          id="notifications-menu-button"
+          aria-label="Notifications"
+          aria-haspopup="true"
+          slot="anchor"
+          part="trigger"
+        >
+          <tenable-bell color="brand" size="medium"></tenable-bell>
+
+          ${this.renderBadge()}
+        </tenable-floating-button>
+
+        <slot></slot>
+      </tenable-popover>
+    `;
+    }
+};
+exports.NotificationsAction = NotificationsAction;
+__decorate([
+    (0, decorators_js_1.query)(`#${popoverId}`)
+], NotificationsAction.prototype, "popover", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Number })
+], NotificationsAction.prototype, "notificationCount", void 0);
+exports.NotificationsAction = NotificationsAction = __decorate([
+    (0, decorators_js_1.customElement)('tenable-universal-header-notifications-action')
+], NotificationsAction);
+//# sourceMappingURL=NotificationsAction.js.map

package/dist/components/GlobalHeader/views/Notifications/NotificationsAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationsAction.js","sourceRoot":"","sources":["../../../../../src/components/GlobalHeader/views/Notifications/NotificationsAction.ts"],"names":[],"mappings":";;;;;;;;;AAAA,6BAA0B;AAC1B,qDAAkE;AAClE,0DAAsD;AACtD,yDAAyD;AAEzD,qCAAsC;AACtC,2CAAuC;AACvC,sEAAkE;AAGlE,MAAM,EAAE,GAAG,uCAAuC,CAAA;AAClD,MAAM,QAAQ,GAAG,GAAG,IAAA,WAAI,GAAE,EAAE,CAAA;AAC5B,MAAM,SAAS,GAAG,GAAG,EAAE,IAAI,QAAQ,EAAE,CAAA;AAErC;;;;;;GAMG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,+BAAc;IAAhD;;QAKL,sBAAiB,GAAG,CAAC,CAAA;QAEb,sBAAiB,GAAG,IAAI,mCAAgB,CAAC,IAAI,CAAC,CAAA;QAEtD,4BAAuB,GAAG,CAAC,KAA2B,EAAE,EAAE;;YACxD,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;YAExD,IAAI,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAA;YAElE,MAAM,QAAQ,GAAiC;gBAC7C,SAAS,EAAE,cAAQ,CAAC,2BAA2B;gBAC/C,MAAM,EAAE;oBACN,WAAW,EAAE,KAAK;oBAClB,MAAM,EAAE,SAAS,CAAC,MAAM;iBACzB;aACF,CAAA;YAED,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAA;YAEjC,MAAA,MAAA,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,0CAAE,uBAAuB,mDAAG;gBACnE,QAAQ;aACT,CAAC,CAAA;YAEF,cAAc,CAAC,cAAc,CAAC,iBAAS,CAAC,mBAAmB,CAAC,CAAA;QAC9D,CAAC,CAAA;QAED,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,IAAI,CAAC,iBAAiB,GAAG,CAAC,EAAE,CAAC;gBAC/B,OAAO,IAAA,UAAI,EAAA;WACN,IAAI,CAAC,iBAAiB;QACzB,CAAA;YACJ,CAAC;QACH,CAAC,CAAA;IA8BH,CAAC;IA5BC,MAAM;QACJ,OAAO,IAAA,UAAI,EAAA;;;cAGD,SAAS;;mBAEJ,IAAI,CAAC,iBAAiB,CAAC,UAAU;0CACV,IAAI,CAAC,uBAAuB;;;;sBAIhD,IAAI,CAAC,iBAAiB,CAAC,UAAU;gCACvB,IAAI;;;;;;;;;YASxB,IAAI,CAAC,WAAW,EAAE;;;;;KAKzB,CAAA;IACH,CAAC;CACF,CAAA;AAnEY,kDAAmB;AAE9B;IADC,IAAA,qBAAK,EAAC,IAAI,SAAS,EAAE,CAAC;oDACX;AAGZ;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DACN;8BALV,mBAAmB;IAD/B,IAAA,6BAAa,EAAC,+CAA+C,CAAC;GAClD,mBAAmB,CAmE/B"}

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.notificationsMenuStyles = void 0;
+const lit_1 = require("lit");
+exports.notificationsMenuStyles = (0, lit_1.css) `
+  #notifications-view {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    gap: 16px 16px;
+    margin: 16px;
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

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

package/dist/components/GlobalHeader/views/PopOver/PopOver.d.ts

@@ -0,0 +1,43 @@
+import { type Placement } from '@floating-ui/dom';
+import { type Maybe } from '@productive-codebases/toolbox';
+import { MobxLitElement } from '../../../../libs/MobxLitElement';
+/**
+ * @slot Default - Use to add child content
+ *
+ * @csspart base - The component's internal wrapper.
+ */
+export declare class Popover extends MobxLitElement {
+    static styles: import("lit").CSSResult[];
+    anchorId: string;
+    dialogId: string;
+    anchorSelector: string;
+    disabled: boolean;
+    hasPopup: string;
+    isFixed: boolean;
+    isOpen: boolean;
+    label: string;
+    placement: Placement;
+    private _cleanup;
+    get anchor(): Maybe<Element | null>;
+    get dialog(): HTMLElement;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    updated(changedProps: Map<string, unknown>): Promise<void>;
+    openPopover(): void;
+    closePopover(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Private
+     */
+    private _startPositioner;
+    private _stopPositioner;
+    private _reposition;
+    private _onSlotChange;
+    private _handleAnchorClicked;
+    private _handleDialogClicked;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tenable-popover': Popover;
+    }
+}

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

@@ -0,0 +1,292 @@
+"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;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = void 0;
+const dom_1 = require("@floating-ui/dom");
+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 MobxLitElement_1 = require("../../../../libs/MobxLitElement");
+const PopOverEvent_1 = require("./PopOverEvent");
+const styles_1 = require("./styles");
+/**
+ * @slot Default - Use to add child content
+ *
+ * @csspart base - The component's internal wrapper.
+ */
+let Popover = class Popover extends MobxLitElement_1.MobxLitElement {
+    constructor() {
+        super(...arguments);
+        // A unique id for the anchor container element; It's used for targeting accessibility attributes
+        this.anchorId = '';
+        // A unique id for the dialog container element; It's used for targeting accessibility attributes
+        this.dialogId = '';
+        // A selector string that points to a specific element in the anchor slot
+        this.anchorSelector = '';
+        // Indicates if the popover is disabled and should ignore any click events in the anchor or dialog slots
+        this.disabled = false;
+        // Indicates the type of dialog content that the popover controls (used for accessibility)
+        this.hasPopup = 'menu';
+        // Indicates if the popover dialog should be fixed positioned.
+        this.isFixed = false;
+        // Indicates if the popover is open or closed
+        this.isOpen = false;
+        // Sets an accessibility attribute that labels the popover trigger
+        this.label = '';
+        // Defines the placement of the popover dialog content
+        this.placement = 'bottom-end';
+    }
+    // The slotted anchor element
+    get anchor() {
+        let slottedAnchorEl = this.querySelector('[slot="anchor"]');
+        // If the slotted anchor element is itself a slot element, retrieve the first assigned element in that slot
+        if (slottedAnchorEl instanceof HTMLSlotElement) {
+            slottedAnchorEl = slottedAnchorEl.assignedElements({
+                flatten: true
+            })[0];
+        }
+        // If an anchor selector is specified, search the shadowRoot of the slotted anchor element based on the selector
+        if (this.anchorSelector) {
+            // Search the light DOM first
+            let results = slottedAnchorEl === null || slottedAnchorEl === void 0 ? void 0 : slottedAnchorEl.querySelector(this.anchorSelector);
+            // Then search the shadow DOM
+            if (!results && (slottedAnchorEl === null || slottedAnchorEl === void 0 ? void 0 : slottedAnchorEl.shadowRoot)) {
+                results = slottedAnchorEl.shadowRoot.querySelector(this.anchorSelector);
+            }
+            return results !== null && results !== void 0 ? results : null;
+        }
+        // If not, return the slotted anchor element
+        return slottedAnchorEl;
+    }
+    // The dialog container element
+    get dialog() {
+        var _a;
+        return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tenable-popover__dialog');
+    }
+    connectedCallback() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.connectedCallback.call(this);
+            // Prepare unique ids for the anchor and dialog based on the id set on the popover
+            this.anchorId = `${this.id}-anchor`;
+            this.dialogId = `${this.id}-dialog`;
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Stop the positioner when the component disconnects
+        this._stopPositioner();
+    }
+    updated(changedProps) {
+        const _super = Object.create(null, {
+            updated: { get: () => super.updated }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.updated.call(this, changedProps);
+            // If isOpened change, start or stop the dialog positioner
+            if (changedProps.has('isOpen')) {
+                if (this.isOpen) {
+                    this._startPositioner();
+                }
+                else {
+                    this._stopPositioner();
+                }
+            }
+            // If the popover is open, regardless of what property changed, recalculate the popover position
+            // just in case that property change shifted the anchor's size/position
+            if (this.isOpen) {
+                yield this.updateComplete;
+                this._reposition();
+            }
+        });
+    }
+    // Opens the popover
+    openPopover() {
+        this.isOpen = true;
+    }
+    // Closes the popover
+    closePopover() {
+        this.isOpen = false;
+    }
+    render() {
+        return (0, lit_1.html) `
+      <div
+        aria-controls=${this.dialogId}
+        aria-expanded=${this.isOpen}
+        aria-haspopup=${Boolean(this.hasPopup)}
+        aria-label=${this.label}
+        class="tenb-popover__anchor"
+        @click=${this._handleAnchorClicked}
+        id=${this.anchorId}
+        part="anchor"
+        role="button"
+      >
+        <slot name="anchor" @slotchange=${this._onSlotChange}></slot>
+      </div>
+      <div
+        aria-labeledby=${this.anchorId}
+        class=${(0, class_map_js_1.classMap)({
+            'tenable-popover__dialog': true,
+            fixed: this.isFixed,
+            open: this.isOpen
+        })}
+        @click=${this._handleDialogClicked}
+        id=${this.dialogId}
+        part="dialog"
+        role="dialog"
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+    /**
+     * Private
+     */
+    // Starts the dialog positioner
+    _startPositioner() {
+        // Cannot start the positioner if there is no anchor to target
+        if (!this.anchor) {
+            return;
+        }
+        this._cleanup = (0, dom_1.autoUpdate)(this.anchor, this.dialog, () => this._reposition(), {
+            elementResize: false // Without this, Bit will throw an error because ResizeObserver is undefined
+        });
+    }
+    // Stops the positioner
+    _stopPositioner() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise(resolve => {
+                // If the cleanup function is defined, run it and resolve the promise in the next animation frame
+                // Otherwise, resolve immediately
+                if (this._cleanup) {
+                    this._cleanup();
+                    this._cleanup = undefined;
+                    requestAnimationFrame(() => resolve());
+                }
+                else {
+                    resolve();
+                }
+            });
+        });
+    }
+    // Repositions the dialog context
+    _reposition() {
+        // If the popover is not opened or anchor/dialog is not defined, exit early
+        if (!this.isOpen || !this.anchor || !this.dialog) {
+            return;
+        }
+        (0, dom_1.computePosition)(this.anchor, this.dialog, {
+            placement: this.placement,
+            middleware: [
+                (0, dom_1.flip)({
+                    fallbackStrategy: 'initialPlacement'
+                }),
+                (0, dom_1.offset)(5),
+                (0, dom_1.shift)()
+            ],
+            strategy: this.isFixed ? 'fixed' : 'absolute'
+        }).then(({ x, y }) => {
+            this.dialog.style.left = `${x}px`;
+            this.dialog.style.top = `${y}px`;
+        });
+    }
+    // Handles slot changes by re-starting the positioner
+    _onSlotChange() {
+        this._startPositioner();
+    }
+    // Handles anchor clicks by dispatching a popover anchor clicked event
+    _handleAnchorClicked(event) {
+        // If configured with an anchor selector, if the event target's path does not match the selector, do nothing
+        if (this.anchorSelector) {
+            const path = event.composedPath();
+            if (!path.some(elm => { var _a; return (_a = elm.matches) === null || _a === void 0 ? void 0 : _a.call(elm, this.anchorSelector); })) {
+                return;
+            }
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        // If disabled, exit early
+        if (this.disabled) {
+            return;
+        }
+        const payload = {
+            detail: {
+                isOpen: !this.isOpen,
+                popoverId: this.id,
+                nativeEvent: event
+            }
+        };
+        const onAnchorClicked = new PopOverEvent_1.TenablePopoverEvents(PopOverEvent_1.TenablePopoverEvents.TENABLE_POPOVER_ANCHOR_CLICKED, payload);
+        this.dispatchEvent(onAnchorClicked);
+    }
+    // Handles dialog clicks by dispatching a popover dialog clicked event
+    _handleDialogClicked(event) {
+        const hasLinkInAncestor = event.composedPath().some(path => {
+            return 'tagName' in path
+                ? path.tagName.toLowerCase() === 'a'
+                : false;
+        });
+        // The click event must be allowed to propagate in order for parent components to pick up the event
+        // Without it, the universal navigation will not toggle the open/close icon at the top of the panel correctly
+        // On the other hand, we avoid using preventDefault because it blocks the link
+        if (!hasLinkInAncestor) {
+            event.preventDefault();
+        }
+        // If disabled, exit early
+        if (this.disabled) {
+            return;
+        }
+        const payload = {
+            detail: {
+                isOpen: !this.isOpen,
+                popoverId: this.id,
+                nativeEvent: event
+            }
+        };
+        const onAnchorClicked = new PopOverEvent_1.TenablePopoverEvents(PopOverEvent_1.TenablePopoverEvents.TENABLE_POPOVER_DIALOG_CLICKED, payload);
+        this.dispatchEvent(onAnchorClicked);
+    }
+};
+exports.Popover = Popover;
+Popover.styles = [styles_1.popoverStyles];
+__decorate([
+    (0, decorators_js_1.property)({ attribute: 'anchor-selector' })
+], Popover.prototype, "anchorSelector", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ reflect: true, type: Boolean })
+], Popover.prototype, "disabled", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: 'has-popup', reflect: true })
+], Popover.prototype, "hasPopup", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, attribute: 'is-fixed', reflect: true })
+], Popover.prototype, "isFixed", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, attribute: 'is-open', reflect: true })
+], Popover.prototype, "isOpen", void 0);
+__decorate([
+    (0, decorators_js_1.property)()
+], Popover.prototype, "label", void 0);
+__decorate([
+    (0, decorators_js_1.property)()
+], Popover.prototype, "placement", void 0);
+exports.Popover = Popover = __decorate([
+    (0, decorators_js_1.customElement)('tenable-popover')
+], Popover);
+//# sourceMappingURL=PopOver.js.map

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

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

package/dist/components/GlobalHeader/views/PopOver/PopOverEvent.d.ts

@@ -0,0 +1,13 @@
+import { TenableBaseEvent } from '../BaseEvent';
+type Payload = {
+    detail: {
+        popoverId: string;
+        isOpen: boolean;
+        nativeEvent: Event;
+    };
+};
+export declare class TenablePopoverEvents extends TenableBaseEvent<Payload> {
+    static TENABLE_POPOVER_ANCHOR_CLICKED: string;
+    static TENABLE_POPOVER_DIALOG_CLICKED: string;
+}
+export {};

package/dist/components/GlobalHeader/views/PopOver/PopOverEvent.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TenablePopoverEvents = void 0;
+const BaseEvent_1 = require("../BaseEvent");
+class TenablePopoverEvents extends BaseEvent_1.TenableBaseEvent {
+}
+exports.TenablePopoverEvents = TenablePopoverEvents;
+TenablePopoverEvents.TENABLE_POPOVER_ANCHOR_CLICKED = 'tenable-popover-anchor-clicked';
+TenablePopoverEvents.TENABLE_POPOVER_DIALOG_CLICKED = 'tenable-popover-dialog-clicked';
+//# sourceMappingURL=PopOverEvent.js.map