@ptcwebops/ptcw-design 6.4.10 → 6.4.11-beta

package/dist/collection/components/ptc-subnav-v2/ptc-subnav-v2.js

@@ -1,585 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class PtcSubnavV2 {
-  constructor() {
-    this.cachedNavItems = null;
-    this.isSticky = false;
-    this.originalTop = 0;
-    this.placeholderElement = null;
-    this.measurementElement = null;
-    this.handleClickOutside = (event) => {
-      if (!this.el.contains(event.target)) {
-        this.showOverflowMenu = false;
-      }
-    };
-    this.handleKeyDown = (event) => {
-      var _a;
-      if (event.key === "Escape" && this.showOverflowMenu) {
-        this.showOverflowMenu = false;
-        (_a = this.overflowButton) === null || _a === void 0 ? void 0 : _a.focus();
-      }
-    };
-    this.handleScroll = () => {
-      // Throttle scroll events for better performance
-      if (this.scrollThrottleTimeout) {
-        return;
-      }
-      this.scrollThrottleTimeout = window.setTimeout(() => {
-        // Don't update active state if user just manually navigated
-        if (this.isManualNavigation) {
-          this.scrollThrottleTimeout = null;
-          return;
-        }
-        // Fallback scroll handler to ensure active state is updated
-        const navItems = this.getNavItems();
-        const subnavHeight = this.el.offsetHeight;
-        const scrollPosition = window.scrollY + subnavHeight + 100; // Offset for better detection
-        // Find the section that should be active based on scroll position
-        let activeSection = navItems[0].id; // Default to first section
-        for (let i = navItems.length - 1; i >= 0; i--) {
-          const section = document.getElementById(navItems[i].id);
-          if (section && section.offsetTop <= scrollPosition) {
-            activeSection = navItems[i].id;
-            break;
-          }
-        }
-        // Only update if different from current active
-        if (activeSection !== this.currentActive) {
-          this.currentActive = activeSection;
-        }
-        this.scrollThrottleTimeout = null;
-      }, 16); // ~60fps throttling
-    };
-    this.initializeStickyPosition = () => {
-      // Store the original position of the subnav
-      const rect = this.el.getBoundingClientRect();
-      this.originalTop = rect.top + window.scrollY;
-    };
-    this.handleStickyScroll = () => {
-      // Throttle sticky scroll events for better performance
-      if (this.stickyScrollTimeout) {
-        return;
-      }
-      this.stickyScrollTimeout = window.setTimeout(() => {
-        var _a;
-        const scrollY = window.scrollY;
-        // Check if we should make the subnav sticky
-        const shouldBeSticky = scrollY >= this.originalTop;
-        if (shouldBeSticky && !this.isSticky) {
-          // Store the original height before making it fixed
-          const originalHeight = this.el.offsetHeight;
-          // Create placeholder element to maintain space
-          this.placeholderElement = document.createElement("div");
-          this.placeholderElement.style.height = `${originalHeight}px`;
-          this.placeholderElement.style.width = "100%";
-          this.placeholderElement.style.pointerEvents = "none";
-          // Insert placeholder before the subnav
-          (_a = this.el.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(this.placeholderElement, this.el);
-          // Add transition class for smooth animation
-          this.el.classList.add("sticky-transition");
-          // Apply fixed positioning with smooth transition
-          this.el.style.position = "fixed";
-          this.el.style.top = "0";
-          this.el.style.left = "0";
-          this.el.style.right = "0";
-          this.el.style.width = "100%";
-          this.el.style.zIndex = "105";
-          this.el.style.transform = "translateY(0)";
-          this.isSticky = true;
-        }
-        else if (!shouldBeSticky && this.isSticky) {
-          // Remove transition class and reset transform
-          this.el.classList.remove("sticky-transition");
-          this.el.style.transform = "";
-          // Remove fixed positioning and restore original position
-          this.el.style.position = "";
-          this.el.style.top = "";
-          this.el.style.left = "";
-          this.el.style.right = "";
-          this.el.style.width = "";
-          this.el.style.zIndex = "";
-          this.isSticky = false;
-          // Remove placeholder element
-          if (this.placeholderElement) {
-            this.placeholderElement.remove();
-            this.placeholderElement = null;
-          }
-        }
-        this.stickyScrollTimeout = null;
-      }, 16); // ~60fps throttling
-    };
-    this.handleResize = () => {
-      this.navContainer && setTimeout(() => this.calculateVisibleItems(), 10);
-      // Recalculate original position on resize
-      if (!this.isSticky) {
-        this.initializeStickyPosition();
-      }
-      else if (this.placeholderElement) {
-        // Update placeholder height if sticky and resized
-        const currentHeight = this.el.offsetHeight;
-        this.placeholderElement.style.height = `${currentHeight}px`;
-        // Update originalTop based on placeholder position (layout may have changed)
-        const placeholderRect = this.placeholderElement.getBoundingClientRect();
-        this.originalTop = placeholderRect.top + window.scrollY;
-      }
-    };
-    this.setupIntersectionObserver = () => {
-      // Get all sections that correspond to our navigation items
-      const navItems = this.getNavItems();
-      // Create intersection observer
-      this.intersectionObserver = new IntersectionObserver((entries) => {
-        // Clear any existing timeout
-        if (this.scrollTimeout) {
-          clearTimeout(this.scrollTimeout);
-        }
-        // Debounce the intersection changes
-        this.scrollTimeout = window.setTimeout(() => {
-          // Don't update active state if user just manually navigated
-          if (this.isManualNavigation) {
-            return;
-          }
-          // Find all intersecting sections
-          const intersectingSections = entries.filter((entry) => entry.isIntersecting);
-          if (intersectingSections.length > 0) {
-            // Sort by intersection ratio (how much of the section is visible)
-            // and then by position (top to bottom)
-            intersectingSections.sort((a, b) => {
-              // First sort by intersection ratio (higher = more visible)
-              if (b.intersectionRatio !== a.intersectionRatio) {
-                return (b.intersectionRatio - a.intersectionRatio);
-              }
-              // If intersection ratios are equal, sort by position
-              return (a.boundingClientRect.top -
-                b.boundingClientRect.top);
-            });
-            // Get the most visible section
-            const mostVisibleSection = intersectingSections[0];
-            const sectionId = mostVisibleSection.target.id;
-            if (sectionId && sectionId !== this.currentActive) {
-              this.currentActive = sectionId;
-            }
-          }
-        }, 100); // Increased debounce time for better performance
-      }, {
-        root: null,
-        rootMargin: "-20% 0px -60% 0px",
-        threshold: [0, 0.1, 0.25, 0.5, 0.75, 1.0], // Multiple thresholds for better detection
-      });
-      // Observe all sections
-      navItems.forEach((item) => {
-        const section = document.getElementById(item.id);
-        if (section) {
-          this.intersectionObserver.observe(section);
-        }
-      });
-    };
-    this.setupResizeObserver = () => {
-      // Observe the parent element for layout changes
-      this.resizeObserver = new ResizeObserver(() => {
-        // Recalculate sticky position when parent layout changes
-        if (!this.isSticky) {
-          this.initializeStickyPosition();
-        }
-        else if (this.placeholderElement) {
-          // If sticky, update originalTop based on placeholder position
-          const placeholderRect = this.placeholderElement.getBoundingClientRect();
-          this.originalTop = placeholderRect.top + window.scrollY;
-        }
-      });
-      // Observe the element's parent or the element itself
-      if (this.el.parentElement) {
-        this.resizeObserver.observe(this.el.parentElement);
-      }
-    };
-    this.extractNavItemsFromSlots = () => {
-      const slotElement = this.el.querySelector('[slot="nav-items"]');
-      if (!slotElement)
-        return null;
-      const links = slotElement.querySelectorAll("a");
-      const items = Array.from(links)
-        .map((link) => {
-        var _a, _b;
-        return ({
-          id: ((_a = link.getAttribute("href")) === null || _a === void 0 ? void 0 : _a.substring(1)) || "",
-          label: ((_b = link.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || "",
-          title: link.getAttribute("title") || undefined,
-          trackerId: link.getAttribute("tracker-id") || undefined,
-        });
-      })
-        .filter((item) => Boolean(item.id && item.label));
-      return items.length > 0 ? items : null;
-    };
-    this.getNavItems = () => {
-      // Return cached items if available
-      if (this.cachedNavItems) {
-        return this.cachedNavItems;
-      }
-      // Extract navigation items from slots (SEO-friendly approach)
-      const slotItems = this.extractNavItemsFromSlots();
-      if (slotItems) {
-        this.cachedNavItems = slotItems;
-        return slotItems;
-      }
-      // If navItems prop is provided, parse and use it (fallback)
-      const propItems = this.parsePropNavItems();
-      if (propItems) {
-        this.cachedNavItems = propItems;
-        return propItems;
-      }
-      // Return empty array if no navigation items found
-      console.warn("No navigation items found in slots or props for ptc-subnav-v2");
-      return [];
-    };
-    this.hasActiveOverflowItem = () => {
-      return this.overflowItems.some((item) => item.id === this.currentActive);
-    };
-    this.hasSubnavMenuRightContent = () => {
-      const slotElement = this.el.querySelector('[slot="subnav-menu-right"]');
-      return Boolean(slotElement === null || slotElement === void 0 ? void 0 : slotElement.children.length);
-    };
-    this.calculateVisibleItems = () => {
-      const navItems = this.getNavItems();
-      // Handle case where no navigation items are found
-      if (navItems.length === 0) {
-        this.visibleItems = [];
-        this.overflowItems = [];
-        return;
-      }
-      // Check if we're in mobile mode (below 767px)
-      const wasMobile = this.isMobile;
-      this.isMobile = window.innerWidth <= 767;
-      // Force re-render if mobile state changed
-      if (wasMobile !== this.isMobile) {
-        this.showOverflowMenu = false; // Close any open menus when switching modes
-      }
-      if (this.isMobile) {
-        // On mobile, show only the current active item
-        const activeItem = navItems.find((item) => item.id === this.currentActive) ||
-          navItems[0];
-        this.visibleItems = [activeItem];
-        this.overflowItems = navItems.filter((item) => item.id !== activeItem.id);
-      }
-      else {
-        // Desktop behavior - calculate based on available width
-        const containerWidth = this.navContainer
-          ? this.navContainer.offsetWidth
-          : 0;
-        const buttonWidth = this.overflowButton
-          ? this.overflowButton.offsetWidth + 32
-          : 0; // 32px for gap
-        const availableWidth = containerWidth - buttonWidth - 48; // 48px for right margin
-        // Fallback if container width is not available yet
-        if (containerWidth === 0) {
-          this.visibleItems = navItems;
-          this.overflowItems = [];
-          return;
-        }
-        let visibleCount = 0;
-        let totalWidth = 0;
-        // Create or reuse measurement element
-        if (!this.measurementElement) {
-          this.measurementElement = document.createElement("div");
-          this.measurementElement.style.position = "absolute";
-          this.measurementElement.style.visibility = "hidden";
-          this.measurementElement.style.whiteSpace = "nowrap";
-          this.measurementElement.style.fontSize = "14px";
-          this.measurementElement.style.fontWeight = "700";
-          this.measurementElement.style.padding = "20px 0 20px 0";
-          document.body.appendChild(this.measurementElement);
-        }
-        for (let i = 0; i < navItems.length; i++) {
-          const item = navItems[i];
-          this.measurementElement.textContent = item.label;
-          const itemWidth = this.measurementElement.offsetWidth + 32; // 32px for gap
-          if (totalWidth + itemWidth <= availableWidth) {
-            totalWidth += itemWidth;
-            visibleCount++;
-          }
-          else {
-            break;
-          }
-        }
-        this.visibleItems = navItems.slice(0, visibleCount);
-        this.overflowItems = navItems.slice(visibleCount);
-      }
-      // Don't automatically show overflow menu - it should be closed by default
-      // this.showOverflowMenu = this.overflowItems.length > 0;
-    };
-    this.toggleOverflowMenu = () => {
-      this.showOverflowMenu = !this.showOverflowMenu;
-      // After opening, measure and decide alignment to avoid viewport overflow
-      if (!this.showOverflowMenu) {
-        return;
-      }
-      requestAnimationFrame(() => {
-        const container = this.overflowMenuContainer;
-        const dropdown = this.overflowDropdownEl;
-        if (!container || !dropdown)
-          return;
-        const containerRect = container.getBoundingClientRect();
-        // Default positioning is right: -2px inside container
-        const dropdownWidth = dropdown.offsetWidth || 0;
-        const rightEdge = containerRect.right + 2;
-        const leftEdge = rightEdge - dropdownWidth;
-        // If left edge would be off the viewport, flip to left aligned
-        this.overflowDropdownAlignLeft = leftEdge < 8; // keep a small gutter
-      });
-    };
-    this.handleNavClick = (event, section) => {
-      event.preventDefault();
-      this.currentActive = section;
-      // Set manual navigation flag to prevent intersection observer from overriding
-      this.isManualNavigation = true;
-      // Clear any existing manual navigation timeout
-      if (this.manualNavigationTimeout) {
-        clearTimeout(this.manualNavigationTimeout);
-      }
-      // Reset manual navigation flag after scroll animation completes
-      this.manualNavigationTimeout = window.setTimeout(() => {
-        this.isManualNavigation = false;
-      }, 1500); // Give enough time for smooth scroll to complete
-      // Emit custom event for parent components
-      const customEvent = new CustomEvent("sectionChange", {
-        detail: { section },
-        bubbles: true,
-        composed: true,
-      });
-      this.el.dispatchEvent(customEvent);
-      // Smooth scroll to section if it exists, accounting for sticky nav height
-      const targetElement = document.querySelector(`#${section}`);
-      if (targetElement) {
-        // Get the sticky nav height
-        const navHeight = this.el.offsetHeight;
-        // Calculate the target position with offset
-        const targetPosition = targetElement.getBoundingClientRect().top +
-          window.scrollY -
-          navHeight;
-        // Smooth scroll to the adjusted position
-        window.scrollTo({
-          top: targetPosition,
-          behavior: "smooth",
-        });
-      }
-    };
-    this.activeSection = "overview";
-    this.navItems = "";
-    this.currentActive = "overview";
-    this.visibleItems = [];
-    this.overflowItems = [];
-    this.showOverflowMenu = false;
-    this.overflowDropdownAlignLeft = false;
-    this.isMobile = false;
-    this.isManualNavigation = false;
-  }
-  componentWillLoad() {
-    this.currentActive = this.activeSection;
-  }
-  componentDidLoad() {
-    this.bindEventHandlers();
-    this.handleResize();
-    this.addEventListeners();
-    this.setupIntersectionObserver();
-    this.setupResizeObserver();
-    this.initializeStickyPosition();
-  }
-  bindEventHandlers() {
-    this.boundHandleResize = this.handleResize.bind(this);
-    this.boundHandleClickOutside = this.handleClickOutside.bind(this);
-    this.boundHandleScroll = this.handleScroll.bind(this);
-    this.boundHandleKeyDown = this.handleKeyDown.bind(this);
-    this.boundHandleStickyScroll = this.handleStickyScroll.bind(this);
-  }
-  addEventListeners() {
-    window.addEventListener("resize", this.boundHandleResize);
-    document.addEventListener("click", this.boundHandleClickOutside);
-    document.addEventListener("keydown", this.boundHandleKeyDown);
-    window.addEventListener("scroll", this.boundHandleScroll, {
-      passive: true,
-    });
-    window.addEventListener("scroll", this.boundHandleStickyScroll, {
-      passive: true,
-    });
-  }
-  disconnectedCallback() {
-    this.removeEventListeners();
-    this.cleanupTimeouts();
-    this.cleanupIntersectionObserver();
-    this.cleanupResizeObserver();
-    this.cleanupElements();
-  }
-  removeEventListeners() {
-    window.removeEventListener("resize", this.boundHandleResize);
-    document.removeEventListener("click", this.boundHandleClickOutside);
-    document.removeEventListener("keydown", this.boundHandleKeyDown);
-    window.removeEventListener("scroll", this.boundHandleScroll);
-    window.removeEventListener("scroll", this.boundHandleStickyScroll);
-  }
-  cleanupTimeouts() {
-    if (this.scrollTimeout)
-      clearTimeout(this.scrollTimeout);
-    if (this.scrollThrottleTimeout)
-      clearTimeout(this.scrollThrottleTimeout);
-    if (this.manualNavigationTimeout)
-      clearTimeout(this.manualNavigationTimeout);
-    if (this.stickyScrollTimeout)
-      clearTimeout(this.stickyScrollTimeout);
-  }
-  cleanupIntersectionObserver() {
-    if (this.intersectionObserver) {
-      this.intersectionObserver.disconnect();
-    }
-  }
-  cleanupResizeObserver() {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-    }
-  }
-  cleanupElements() {
-    if (this.placeholderElement) {
-      this.placeholderElement.remove();
-      this.placeholderElement = null;
-    }
-    if (this.measurementElement) {
-      this.measurementElement.remove();
-      this.measurementElement = null;
-    }
-  }
-  parsePropNavItems() {
-    var _a;
-    if (!((_a = this.navItems) === null || _a === void 0 ? void 0 : _a.trim()))
-      return null;
-    try {
-      const parsedItems = JSON.parse(this.navItems);
-      if (Array.isArray(parsedItems) && parsedItems.length > 0) {
-        const validItems = parsedItems.filter((item) => Boolean(item &&
-          typeof item.id === "string" &&
-          typeof item.label === "string"));
-        return validItems.length > 0 ? validItems : null;
-      }
-    }
-    catch (error) {
-      console.warn("Invalid navItems JSON provided to ptc-subnav-v2:", error);
-    }
-    return null;
-  }
-  render() {
-    const navItems = this.getNavItems();
-    const hasRightContent = this.hasSubnavMenuRightContent();
-    const selectedMobileItem = this.isMobile
-      ? navItems.find((item) => item.id === this.currentActive) ||
-        navItems[0]
-      : null;
-    // If no navigation items, don't render the navigation
-    if (navItems.length === 0) {
-      return (h(Host, null, h("div", { class: `subnav-container ${!hasRightContent ? "full-width" : ""}` }, hasRightContent && (h("div", { class: "subnav-menu-right" }, h("slot", { name: "subnav-menu-right" }))))));
-    }
-    return (h(Host, null, h("div", { class: `subnav-container ${!hasRightContent ? "full-width" : ""}` }, h("nav", { class: `subnav-menu-left ${!hasRightContent ? "full-width" : ""}`, role: "navigation", "aria-label": "Sub navigation", ref: (el) => (this.navContainer = el) }, this.isMobile ? (
-    // Mobile layout - dropdown with arrows
-    h("div", { class: "mobile-dropdown-container" }, h("button", { class: "mobile-dropdown-button", onClick: this.toggleOverflowMenu, onKeyDown: (e) => {
-        if (e.key === "Enter" ||
-          e.key === " ") {
-          e.preventDefault();
-          this.toggleOverflowMenu();
-        }
-      }, "aria-expanded": this.showOverflowMenu, "aria-haspopup": "true", "aria-label": `${(selectedMobileItem === null || selectedMobileItem === void 0 ? void 0 : selectedMobileItem.label) || "Select Section"} - Choose navigation section`, "tracker-id": "mobile-dropdown-button", ref: (el) => (this.overflowButton = el) }, h("span", { class: "mobile-selected-item" }, (selectedMobileItem === null || selectedMobileItem === void 0 ? void 0 : selectedMobileItem.label) ||
-      "Select Section"), h("span", { class: `mobile-arrow ${this.showOverflowMenu ? "rotated" : ""}`, "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", "aria-hidden": "true" }, h("path", { d: "M1 1.5L5.94975 6.44975L10.8995 1.5", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))), this.showOverflowMenu && (h("ul", { class: "mobile-dropdown", role: "menu", "aria-label": "Navigation sections" }, navItems.map((item) => (h("li", { key: item.id, class: "mf-listen", id: item.trackerId ||
-        `mobile-nav-${item.id}` }, h("a", { href: `#${item.id}`, class: `mobile-dropdown-item  ${this.currentActive ===
-        item.id
-        ? "active"
-        : ""}`, role: "menuitem", "aria-current": this.currentActive ===
-        item.id
-        ? "page"
-        : undefined, title: item.title || "", onClick: (e) => {
-        this.handleNavClick(e, item.id);
-        this.showOverflowMenu = false;
-      } }, item.label)))))))) : (
-    // Desktop layout - original behavior
-    h("ul", { class: "desktop-menu" }, this.visibleItems.map((item) => (h("li", { key: item.id, class: "mf-listen", id: item.trackerId || `nav-${item.id}` }, h("a", { href: `#${item.id}`, class: this.currentActive === item.id
-        ? "active"
-        : "", title: item.title || "", onClick: (e) => this.handleNavClick(e, item.id), "aria-current": this.currentActive === item.id
-        ? "page"
-        : undefined }, item.label)))), this.overflowItems.length > 0 && (h("li", { class: "overflow-menu-container mf-listen", id: "overflow-menu", ref: (el) => (this.overflowMenuContainer = el) }, h("button", { class: `overflow-button ${this.hasActiveOverflowItem() ? "selected-active" : ""}`, onClick: this.toggleOverflowMenu, onKeyDown: (e) => {
-        if (e.key === "Enter" ||
-          e.key === " ") {
-          e.preventDefault();
-          this.toggleOverflowMenu();
-        }
-      }, "aria-expanded": this.showOverflowMenu, "aria-haspopup": "true", "aria-label": "Show more navigation items", "tracker-id": "overflow-button", ref: (el) => (this.overflowButton = el) }, h("span", { class: "overflow-dots", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "1.25", cy: "5", r: "1.25", fill: "#617480" }), h("circle", { cx: "5", cy: "5", r: "1.25", fill: "#617480" }), h("circle", { cx: "8.75", cy: "5", r: "1.25", fill: "#617480" })))), this.showOverflowMenu && (h("div", { class: `overflow-dropdown ${this.overflowDropdownAlignLeft ? "align-left" : "align-right"}`, role: "menu", "aria-label": "Additional navigation sections", ref: (el) => (this.overflowDropdownEl =
-        el) }, this.overflowItems.map((item) => (h("a", { key: item.id, href: `#${item.id}`, class: `mf-listen ${this
-        .currentActive ===
-        item.id
-        ? "active"
-        : ""}`, title: item.title || "", "tracker-id": item.trackerId ||
-        `overflow-link-${item.id}`, role: "menuitem", onClick: (e) => {
-        this.handleNavClick(e, item.id);
-        this.showOverflowMenu = false;
-      }, "aria-current": this
-        .currentActive ===
-        item.id
-        ? "page"
-        : undefined }, item.label)))))))))), hasRightContent && (h("div", { class: "subnav-menu-right" }, h("slot", { name: "subnav-menu-right" }))))));
-  }
-  static get is() { return "ptc-subnav-v2"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-subnav-v2.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-subnav-v2.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "activeSection": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "active-section",
-        "reflect": false,
-        "defaultValue": "\"overview\""
-      },
-      "navItems": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "nav-items",
-        "reflect": false,
-        "defaultValue": "\"\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "currentActive": {},
-      "visibleItems": {},
-      "overflowItems": {},
-      "showOverflowMenu": {},
-      "overflowDropdownAlignLeft": {},
-      "isMobile": {},
-      "isManualNavigation": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-}