tenable-universal-layout 0.0.1-security → 7.7.12

package/dist/components/GlobalHeader/views/Settings/SettingsPanel.js

@@ -0,0 +1,199 @@
+"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.SettingsPanel = void 0;
+const toolbox_1 = require("@productive-codebases/toolbox");
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.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 renderer_1 = require("../../utils/renderer");
+const PopOverStateController_1 = require("../PopOver/PopOverStateController");
+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 SettingsPanel = class SettingsPanel extends MobxLitElement_1.MobxLitElement {
+    constructor() {
+        super(...arguments);
+        this.menuItems = [];
+        this.appSpecificItems = [];
+        this.panelTitle = 'Settings';
+        // 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;
+        this.popoverStateController = null;
+        this.platformSettingsLabel = 'Platform Settings & Information';
+        this.appSettingsLabel = 'App Settings';
+        this.handleKeyDown = (ev) => {
+            const code = ev.code;
+            if (code === 'Escape') {
+                ev.preventDefault();
+                this.popoverOpen = null;
+            }
+        };
+        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.renderMenuItemNoSubmenu = (item) => {
+            var _a, _b, _c;
+            const menuItemId = ((_a = item === null || item === void 0 ? void 0 : item.id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || 'unknown';
+            const id = `universal-settings-menu-item-${menuItemId}`;
+            const { language } = this.__getStores().storeLayout;
+            const translator = this.__translator(language)('Header')('PanelSettings');
+            return (0, lit_1.html) `
+      <tenable-navigation-menu-item
+        id=${id}
+        part="panel-menu-item"
+        item-id=${item.id}
+        host=${tul_1.GlobalHeaderPanels.Settings}
+        url=${(0, if_defined_js_1.ifDefined)(item.url)}
+        label=${(_b = translator(item.name)) !== null && _b !== void 0 ? _b : item.name}
+        ?selected=${this.selectedMenuItem === item.id}
+        .item=${item}
+        ?newTab=${((_c = item.url) === null || _c === void 0 ? void 0 : _c.startsWith('http')) === true}
+      >
+        ${(0, renderer_1.renderIconAsString)(item.icon)}
+      </tenable-navigation-menu-item>
+    `;
+        };
+        this.renderMenuItemWithSubmenu = (item) => {
+            var _a, _b, _c, _d;
+            const menuItemId = ((_a = item === null || item === void 0 ? void 0 : item.id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || 'unknown';
+            const id = `universal-settings-menu-item-${menuItemId}`;
+            const { language } = this.__getStores().storeLayout;
+            const translator = this.__translator(language)('Header')('PanelSettings');
+            return (0, lit_1.html) `
+      <tenable-popover
+        id="${id}"
+        label=${(_b = translator(item.name)) !== null && _b !== void 0 ? _b : item.name}
+        is-fixed
+        placement="right-start"
+        ?is-open=${this.popoverOpen === id}
+      >
+        <tenable-navigation-menu-item
+          id="universal-navigation-menu-item-for-${tul_1.GlobalHeaderPanels.Settings}-${item.id ||
+                'unknown'}"
+          item-id=${item.id}
+          .item=${item}
+          host=${tul_1.GlobalHeaderPanels.Settings}
+          ?selected=${this.selectedMenuItem === item.id}
+          ?opened=${this.popoverOpen === id}
+          .hasChildren=${Number((_c = item.menuItems) === null || _c === void 0 ? void 0 : _c.length) > 0}
+          slot="anchor"
+          label=${(_d = translator(item.name)) !== null && _d !== void 0 ? _d : item.name}
+        >
+          ${(0, renderer_1.renderIconAsString)(item.icon)}
+        </tenable-navigation-menu-item>
+        <tenable-universal-navigation-menu-submenu
+          .menuItems=${(0, toolbox_1.ensureArray)(item.menuItems)}
+          item-id=${item.id}
+          host=${tul_1.GlobalHeaderPanels.Settings}
+        >
+        </tenable-universal-navigation-menu-submenu>
+      </tenable-popover>
+    `;
+        };
+        this.renderMenuItem = (item) => {
+            var _a;
+            return ((_a = item.menuItems) === null || _a === void 0 ? void 0 : _a.length)
+                ? this.renderMenuItemWithSubmenu(item)
+                : this.renderMenuItemNoSubmenu(item);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('keydown', this.handleKeyDown);
+        this.popoverStateController = new PopOverStateController_1.PopoverStateController(this, {
+            hasMultiplePopovers: true
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('keydown', this.handleKeyDown);
+    }
+    render() {
+        var _a, _b, _c, _d, _e;
+        const { storeRoot } = this.__getStores();
+        const hasAccessToPlatformSettings = ((_a = storeRoot.stores.storeAuthentication.session) === null || _a === void 0 ? void 0 : _a.hasAccessToPlatformSettings) && Number((_b = this.menuItems) === null || _b === void 0 ? void 0 : _b.length) > 0;
+        const hasAppSettings = Number((_c = this.appSpecificItems) === null || _c === void 0 ? void 0 : _c.length) > 0;
+        const hasBothSettings = hasAccessToPlatformSettings && hasAppSettings;
+        const noSettings = hasAccessToPlatformSettings === false && hasAppSettings === false;
+        const { language } = this.__getStores().storeLayout;
+        const translator = this.__translator(language)('Header')('PanelSettings');
+        if (noSettings) {
+            return '';
+        }
+        const filterRbacMenuItems = (_d = this.menuItems) === null || _d === void 0 ? void 0 : _d.filter(item => {
+            if (!item.rbac || !storeRoot.stores.storeAuthentication.session) {
+                return false;
+            }
+            return item.rbac(storeRoot.stores.storeAuthentication.session);
+        });
+        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"
+            >${(_e = translator(this.panelTitle)) !== null && _e !== void 0 ? _e : this.panelTitle}</tenable-heading3
+          >
+        </tenable-universal-header-action-panel-header>
+        <tenable-universal-header-action-panel-body part="panel-body">
+          ${hasAccessToPlatformSettings
+            ? (0, lit_1.html) `
+                ${filterRbacMenuItems &&
+                (0, repeat_js_1.repeat)(filterRbacMenuItems, item => item.name, item => this.renderMenuItem(item))}
+              `
+            : ''}
+          ${hasBothSettings
+            ? (0, lit_1.html) `
+                <hr class="tenable-universal-header-settings-panel-divider" />
+              `
+            : ''}
+          ${hasAppSettings
+            ? (0, lit_1.html) `
+                ${this.appSpecificItems &&
+                (0, repeat_js_1.repeat)(this.appSpecificItems, item => item.name, item => this.renderMenuItem(item))}
+              `
+            : ''}
+        </tenable-universal-header-action-panel-body>
+      </tenable-universal-header-action-panel>
+    `;
+    }
+};
+exports.SettingsPanel = SettingsPanel;
+SettingsPanel.styles = [styles_1.settingsPanelStyles];
+__decorate([
+    (0, decorators_js_1.property)({ type: Array })
+], SettingsPanel.prototype, "menuItems", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Array })
+], SettingsPanel.prototype, "appSpecificItems", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], SettingsPanel.prototype, "panelTitle", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ attribute: 'selected-menu-item', reflect: true, type: String })
+], SettingsPanel.prototype, "selectedMenuItem", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], SettingsPanel.prototype, "popoverOpen", void 0);
+exports.SettingsPanel = SettingsPanel = __decorate([
+    (0, decorators_js_1.customElement)('tenable-universal-header-settings-panel')
+], SettingsPanel);
+//# sourceMappingURL=SettingsPanel.js.map

package/dist/components/GlobalHeader/views/Settings/SettingsPanel.js.map

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

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.settingsPanelStyles = void 0;
+const lit_1 = require("lit");
+exports.settingsPanelStyles = (0, lit_1.css) `
+  .tenable-universal-header-settings-panel-divider {
+    height: 1px;
+    background-color: var(--tenb-colors-border-interactive);
+    border: none;
+    margin: 0;
+  }
+
+  tenable-universal-header-action-panel::part(base) {
+    width: 350px;
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,24 @@
+import { MobxLitElement } from '../../../../libs/MobxLitElement';
+/**
+ * @csspart base - The component's internal wrapper.
+ * @csspart input - The semantically correct HTML input type of checkbox element (hidden behind the pseudo-toggle)
+ *
+ * @event {TenableToggleSwitchEvents} tenable-universal-header-toggle-switch-change - Dispatched after the value changes from toggle-switch being clicked. Providing the new value of the toggle in the event payload.
+ */
+export declare class ToggleSwitch extends MobxLitElement {
+    static styles: import("lit").CSSResult[];
+    id: string;
+    /** Toggle switch active state */
+    checked: boolean;
+    /** Disables the toggle switch. */
+    disabled: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    onClickHandler: (ev: PointerEvent) => void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tenable-toggle-switch': ToggleSwitch;
+    }
+}

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

@@ -0,0 +1,102 @@
+"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.ToggleSwitch = 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 ToggleSwitchEvent_1 = require("../Header/ToggleSwitchEvent");
+const styles_1 = require("./styles");
+/**
+ * @csspart base - The component's internal wrapper.
+ * @csspart input - The semantically correct HTML input type of checkbox element (hidden behind the pseudo-toggle)
+ *
+ * @event {TenableToggleSwitchEvents} tenable-universal-header-toggle-switch-change - Dispatched after the value changes from toggle-switch being clicked. Providing the new value of the toggle in the event payload.
+ */
+let ToggleSwitch = class ToggleSwitch extends MobxLitElement_1.MobxLitElement {
+    constructor() {
+        super(...arguments);
+        this.id = `${(0, uuid_1.uuid)()}`;
+        /** Toggle switch active state */
+        this.checked = false;
+        /** Disables the toggle switch. */
+        this.disabled = false;
+        this.onClickHandler = (ev) => {
+            var _a, _b;
+            ev.stopImmediatePropagation();
+            const newValue = !this.checked;
+            this.checked = newValue;
+            const payload = { value: newValue };
+            const options = {
+                bubbles: true,
+                cancelable: true,
+                composed: true
+            };
+            const menuEvent = new ToggleSwitchEvent_1.TenableToggleSwitchEvents(ToggleSwitchEvent_1.TenableToggleSwitchEvents.TOGGLE_SWITCH_CHANGED, payload, options);
+            const { storeRoot, storeTelemetry } = this.__getStores();
+            const tulEvent = {
+                eventName: tul_1.TulEvent.onTulEventToggleSwitchClick,
+                detail: {
+                    nativeEvent: ev,
+                    tulApi: storeRoot.tulApi,
+                    checked: this.checked
+                }
+            };
+            this.__dispatchTulEvent(tulEvent);
+            (_b = (_a = storeRoot.environment.config.app.handlers) === null || _a === void 0 ? void 0 : _a.onTulToggleSwitchClick) === null || _b === void 0 ? void 0 : _b.call(_a, {
+                tulEvent
+            });
+            storeTelemetry.trackTelemetry(types_1.EventType.DarkModeClicked);
+            this.dispatchEvent(menuEvent);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    render() {
+        return (0, lit_1.html) `
+      <div part="base" class="tenable-toggle-switch__root">
+        <label class="tenable-toggle-switch__switch">
+          <input
+            part="input"
+            class="tenable-toggle-switch__checkbox"
+            type="checkbox"
+            id="tenable-toggle-switch-${this.id}"
+            ?disabled=${this.disabled}
+            ?checked=${this.checked}
+            @click=${this.onClickHandler}
+          />
+          <span
+            class="tenable-toggle-switch__slider tenable-toggle-switch__slider-round"
+          ></span>
+        </label>
+      </div>
+    `;
+    }
+};
+exports.ToggleSwitch = ToggleSwitch;
+ToggleSwitch.styles = [styles_1.toggleSwitchStyles];
+__decorate([
+    (0, decorators_js_1.property)()
+], ToggleSwitch.prototype, "id", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, reflect: true })
+], ToggleSwitch.prototype, "checked", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, reflect: true })
+], ToggleSwitch.prototype, "disabled", void 0);
+exports.ToggleSwitch = ToggleSwitch = __decorate([
+    (0, decorators_js_1.customElement)('tenable-toggle-switch')
+], ToggleSwitch);
+//# sourceMappingURL=ToggleSwitch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleSwitch.js","sourceRoot":"","sources":["../../../../../src/components/GlobalHeader/views/ToggleSwitch/ToggleSwitch.ts"],"names":[],"mappings":";;;;;;;;;AAAA,6BAA0B;AAC1B,qDAA2D;AAC3D,0DAAsD;AACtD,yDAAyD;AACzD,qCAAsC;AAEtC,2CAAuC;AACvC,mEAAuE;AACvE,qCAA6C;AAE7C;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,+BAAc;IAAzC;;QAIL,OAAE,GAAG,GAAG,IAAA,WAAI,GAAE,EAAE,CAAA;QAEhB,iCAAiC;QAEjC,YAAO,GAAG,KAAK,CAAA;QAEf,kCAAkC;QAElC,aAAQ,GAAG,KAAK,CAAA;QAUhB,mBAAc,GAAG,CAAC,EAAgB,EAAE,EAAE;;YACpC,EAAE,CAAC,wBAAwB,EAAE,CAAA;YAE7B,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,OAAO,CAAA;YAE9B,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAA;YAEvB,MAAM,OAAO,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAA;YACnC,MAAM,OAAO,GAAoB;gBAC/B,OAAO,EAAE,IAAI;gBACb,UAAU,EAAE,IAAI;gBAChB,QAAQ,EAAE,IAAI;aACf,CAAA;YACD,MAAM,SAAS,GAAG,IAAI,6CAAyB,CAC7C,6CAAyB,CAAC,qBAAqB,EAC/C,OAAO,EACP,OAAO,CACR,CAAA;YAED,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;YAExD,MAAM,QAAQ,GAAiC;gBAC7C,SAAS,EAAE,cAAQ,CAAC,2BAA2B;gBAC/C,MAAM,EAAE;oBACN,WAAW,EAAE,EAAE;oBACf,MAAM,EAAE,SAAS,CAAC,MAAM;oBACxB,OAAO,EAAE,IAAI,CAAC,OAAO;iBACtB;aACF,CAAA;YAED,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAA;YAEjC,MAAA,MAAA,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,0CAAE,sBAAsB,mDAAG;gBAClE,QAAQ;aACT,CAAC,CAAA;YAEF,cAAc,CAAC,cAAc,CAAC,iBAAS,CAAC,eAAe,CAAC,CAAA;YAExD,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;QAC/B,CAAC,CAAA;IAsBH,CAAC;IArEC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;IAC3B,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;IAC9B,CAAC;IA2CD,MAAM;QACJ,OAAO,IAAA,UAAI,EAAA;;;;;;;wCAOyB,IAAI,CAAC,EAAE;wBACvB,IAAI,CAAC,QAAQ;uBACd,IAAI,CAAC,OAAO;qBACd,IAAI,CAAC,cAAc;;;;;;;KAOnC,CAAA;IACH,CAAC;;AAlFU,oCAAY;AAChB,mBAAM,GAAG,CAAC,2BAAkB,CAAC,AAAvB,CAAuB;AAGpC;IADC,IAAA,wBAAQ,GAAE;wCACK;AAIhB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC5B;AAIf;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAC3B;uBAZL,YAAY;IADxB,IAAA,6BAAa,EAAC,uBAAuB,CAAC;GAC1B,YAAY,CAmFxB"}

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

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

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

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toggleSwitchStyles = void 0;
+const lit_1 = require("lit");
+exports.toggleSwitchStyles = (0, lit_1.css) `
+  :host {
+    display: inline-block;
+    width: fit-content;
+  }
+
+  .tenable-toggle-switch__root {
+    flex: 1 1 auto;
+    width: 100%;
+    margin-bottom: 8px;
+    margin-right: 8px;
+  }
+
+  /* Toggle Slider */
+
+  .tenable-toggle-switch__switch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 20px;
+  }
+
+  .tenable-toggle-switch__switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .tenable-toggle-switch__slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--tenb-colors-background-toggle-off-idle);
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+  }
+
+  .tenable-toggle-switch__slider:hover {
+    background-color: var(--tenb-colors-background-toggle-off-hover);
+  }
+
+  .tenable-toggle-switch__checkbox:disabled + .tenb-toggle-switch__slider {
+    background-color: var(--tenb-colors-background-toggle-off-disabled);
+    cursor: default;
+  }
+
+  .tenable-toggle-switch__slider:before {
+    position: absolute;
+    content: '';
+    height: 16px;
+    width: 16px;
+    left: 2px;
+    bottom: 2px;
+    background-color: var(--tenb-colors-white);
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+  }
+
+  /* Checkbox */
+
+  .tenable-toggle-switch__checkbox:checked + .tenable-toggle-switch__slider {
+    background-color: var(--tenb-colors-background-toggle-on-idle);
+  }
+
+  .tenable-toggle-switch__checkbox:checked
+    + .tenable-toggle-switch__slider:hover {
+    background-color: var(--tenb-colors-background-toggle-on-hover);
+  }
+
+  .tenable-toggle-switch__checkbox[disabled]:checked
+    + .tenable-toggle-switch__slider {
+    background-color: var(--tenb-colors-background-toggle-on-disabled);
+  }
+
+  .tenable-toggle-switch__checkbox:checked
+    + .tenable-toggle-switch__slider:before {
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+  }
+
+  /* Focus (keyboard only) */
+  .tenable-toggle-switch__checkbox:focus-visible
+    + .tenable-toggle-switch__slider {
+    outline: var(--tenb-borderWidths-outline) dashed
+      var(--tenb-colors-outline-focus);
+    outline-offset: 2px;
+  }
+
+  /* Rounded sliders */
+  .tenable-toggle-switch__slider.tenable-toggle-switch__slider-round {
+    border-radius: 100px;
+  }
+
+  .tenable-toggle-switch__slider.tenable-toggle-switch__slider-round:before {
+    border-radius: 50%;
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,42 @@
+import type { Placement as PlacementType } from '@floating-ui/dom';
+import { MobxLitElement } from '../../../../libs/MobxLitElement';
+export declare const placementOptions: PlacementType[];
+export type Placement = (typeof placementOptions)[number];
+/**
+ * @slot Default - Use to add child content.
+ * @slot text - Place custom elements in the content of the tooltip overlay.
+ *
+ * @csspart base - The component's internal wrapper.
+ * @csspart overlay - The tooltip's floating container, containing the text and arrow.
+ * @csspart arrow - The tooltip's arrow.
+ */
+export declare class Tooltip extends MobxLitElement {
+    static styles: import("lit").CSSResult[];
+    placement: Placement;
+    type: 'hover' | 'click';
+    fixed: boolean;
+    offset: number;
+    forceHide: boolean;
+    hideArrow: boolean;
+    text: string;
+    hidden: boolean;
+    private _getTooltipTrigger;
+    private _getTooltipOverlay;
+    private _getTooltipArrow;
+    private _setArrowPosition;
+    private _computePosition;
+    showTooltip: () => void;
+    hideTooltip: () => void;
+    handleClick: () => void;
+    handleMouseOver: () => void;
+    handleMouseOut: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tenable-tooltip': Tooltip;
+    }
+}