@oslokommune/punkt-elements 14.1.1 → 14.3.0

package/dist/pkt-header.js

@@ -1,21 +1,15 @@
-import { P as _, E as c, x as n, n as s, a as M } from "./element-CRDRygXu.js";
+import { P as _, E as u, x as n, n as s, a as M } from "./element-CRDRygXu.js";
 import { P as S } from "./pkt-slot-controller-BPGj-LC5.js";
 import { o as $ } from "./if-defined-BWZGb3bh.js";
-import { e as k, n as v } from "./ref-Xa5dbh--.js";
+import { e as v, n as k } from "./ref-Xa5dbh--.js";
+import { b as d } from "./booleanish-C9R0tdXH.js";
 import { r as f } from "./state-DS_kr2Fy.js";
-import { e as m } from "./class-map-wy7PUk0P.js";
+import { e as g } from "./class-map-wy7PUk0P.js";
 import "./button-CjXih_Nx.js";
 import "./icon-BB7e5iQN.js";
 import "./link-BboUBUcg.js";
-import "./textinput-Cddq4eF_.js";
-const d = {
-  fromAttribute(e) {
-    return e == null ? !1 : e === "" || e === "true" || e === !0 ? !0 : e === "false" || e === !1 ? !1 : !!e;
-  },
-  toAttribute(e) {
-    return e ? "true" : "false";
-  }
-}, C = (e) => typeof e.target == "string" ? { title: e.title, iconName: e.iconName, href: e.target } : { title: e.title, iconName: e.iconName, onClick: e.target }, L = (e) => {
+import "./textinput-DIuM70dd.js";
+const C = (e) => typeof e.target == "string" ? { title: e.title, iconName: e.iconName, href: e.target } : { title: e.title, iconName: e.iconName, onClick: e.target }, L = (e) => C(e), w = (e) => {
   if (!e) return;
   const t = typeof e == "string" ? new Date(e) : e;
   if (!isNaN(t.getTime()))
@@ -27,10 +21,10 @@ const d = {
       minute: "2-digit"
     });
 };
-var w = Object.defineProperty, O = Object.getOwnPropertyDescriptor, y = (e, t, i, l) => {
-  for (var r = l > 1 ? void 0 : l ? O(t, i) : t, p = e.length - 1, g; p >= 0; p--)
-    (g = e[p]) && (r = (l ? g(t, i, r) : g(r)) || r);
-  return l && r && w(t, i, r), r;
+var O = Object.defineProperty, R = Object.getOwnPropertyDescriptor, y = (e, t, i, c) => {
+  for (var a = c > 1 ? void 0 : c ? R(t, i) : t, p = e.length - 1, m; p >= 0; p--)
+    (m = e[p]) && (a = (c ? m(t, i, a) : m(a)) || a);
+  return c && a && O(t, i, a), a;
 };
 let b = class extends _ {
   constructor() {
@@ -56,7 +50,7 @@ let b = class extends _ {
     "onClick" in e && typeof e.onClick == "function" && e.onClick();
   }
   renderLinkOrButton(e, t) {
-    const i = "href" in e, l = m({
+    const i = "href" in e, c = g({
       "pkt-user-menu__link": !0,
       "pkt-link-button": !i,
       "pkt-link": !i,
@@ -65,7 +59,7 @@ let b = class extends _ {
     });
     return i ? n`
         <pkt-link
-          icon-name=${e.iconName || c}
+          icon-name=${e.iconName || u}
           href=${e.href}
           aria-hidden="true"
           class="pkt-user-menu__link ${t || ""}"
@@ -73,12 +67,12 @@ let b = class extends _ {
           ${e.title}
         </pkt-link>
       ` : n`
-      <button class=${l} type="button" @click=${() => this.handleMenuItemClick(e)}>
+      <button class=${c} type="button" @click=${() => this.handleMenuItemClick(e)}>
         ${e.iconName ? n`<pkt-icon
               name=${e.iconName}
               class="pkt-link__icon"
               aria-hidden="true"
-            ></pkt-icon>` : c}
+            ></pkt-icon>` : u}
         ${e.title}
       </button>
     `;
@@ -96,7 +90,7 @@ let b = class extends _ {
   }
   render() {
     var t;
-    const e = (t = this.userMenu) == null ? void 0 : t.map(C);
+    const e = (t = this.userMenu) == null ? void 0 : t.map(L);
     return n`
       <nav class="pkt-user-menu" aria-label="Meny for innlogget bruker">
         <ul class="pkt-user-menu__list">
@@ -109,14 +103,14 @@ let b = class extends _ {
                         <div class="pkt-user-menu__last-logged-in">
                           Sist pålogget: <time>${this.formattedLastLoggedIn}</time>
                         </div>
-                      ` : c}
+                      ` : u}
                 </li>
-              ` : c}
+              ` : u}
 
           <!-- User menu items -->
           ${e && e.length > 0 ? n`
                 <li class="pkt-user-menu__item">${this.renderLinkSection(e)}</li>
-              ` : c}
+              ` : u}
 
           <!-- Representing section -->
           ${this.representing ? n`
@@ -125,7 +119,7 @@ let b = class extends _ {
                   <div class="pkt-user-menu__name" translate="no">${this.representing.name}</div>
                   ${this.representing.orgNumber ? n`<div class="pkt-user-menu__org-number">
                         Org.nr. ${this.representing.orgNumber}
-                      </div>` : c}
+                      </div>` : u}
                   ${this.canChangeRepresentation ? n`
                         <ul class="pkt-user-menu__sublist mt-size-16">
                           <li class="pkt-user-menu__subitem">
@@ -136,9 +130,9 @@ let b = class extends _ {
     })}
                           </li>
                         </ul>
-                      ` : c}
+                      ` : u}
                 </li>
-              ` : c}
+              ` : u}
 
           <!-- Change representation without representing object -->
           ${!this.representing && this.canChangeRepresentation ? n`
@@ -153,7 +147,7 @@ let b = class extends _ {
                     </li>
                   </ul>
                 </li>
-              ` : c}
+              ` : u}
 
           <!-- Logout -->
           ${this.logoutOnClick ? n`
@@ -164,7 +158,7 @@ let b = class extends _ {
       onClick: () => this.handleLogout()
     })}
                 </li>
-              ` : c}
+              ` : u}
         </ul>
       </nav>
     `;
@@ -195,15 +189,15 @@ y([
 b = y([
   M("pkt-header-user-menu")
 ], b);
-var R = Object.defineProperty, B = Object.getOwnPropertyDescriptor, a = (e, t, i, l) => {
-  for (var r = l > 1 ? void 0 : l ? B(t, i) : t, p = e.length - 1, g; p >= 0; p--)
-    (g = e[p]) && (r = (l ? g(t, i, r) : g(r)) || r);
-  return l && r && R(t, i, r), r;
+var B = Object.defineProperty, E = Object.getOwnPropertyDescriptor, r = (e, t, i, c) => {
+  for (var a = c > 1 ? void 0 : c ? E(t, i) : t, p = e.length - 1, m; p >= 0; p--)
+    (m = e[p]) && (a = (c ? m(t, i, a) : m(a)) || a);
+  return c && a && B(t, i, a), a;
 };
-const E = "https://punkt-cdn.oslo.kommune.no/latest/logos/";
+const P = "https://punkt-cdn.oslo.kommune.no/latest/logos/";
 let o = class extends _ {
   constructor() {
-    super(), this.searchPlaceholder = "Søk", this.searchValue = "", this.mobileBreakpoint = 768, this.tabletBreakpoint = 1280, this.openedMenu = "none", this.logOutButtonPlacement = "none", this.position = "fixed", this.scrollBehavior = "hide", this.hideLogo = !1, this.compact = !1, this.showSearch = !1, this.canChangeRepresentation = !1, this.hasLogOut = !1, this.isMobile = !1, this.isTablet = !1, this.openMenu = "none", this.isHidden = !1, this.componentWidth = typeof window < "u" ? window.innerWidth : 0, this.hasSlotContent = !1, this.alignSlotRight = !1, this.alignSearchRight = !1, this.defaultSlot = k(), this.headerRef = k(), this.userContainerRef = k(), this.slotContainerRef = k(), this.searchContainerRef = k(), this.slotContentRef = k(), this.searchMenuRef = k(), this.lastScrollPosition = 0, this.savedScrollY = 0, this.lastFocusedElement = null, this.shouldRestoreFocus = !1, this.handleScroll = () => {
+    super(), this.searchPlaceholder = "Søk", this.searchValue = "", this.mobileBreakpoint = 768, this.tabletBreakpoint = 1280, this.openedMenu = "none", this.logOutButtonPlacement = "none", this.position = "fixed", this.scrollBehavior = "hide", this.slotMenuVariant = "icon-only", this.slotMenuText = "Meny", this.hideLogo = !1, this.compact = !1, this.showSearch = !1, this.canChangeRepresentation = !1, this.hasLogOut = !1, this.isMobile = !1, this.isTablet = !1, this.openMenu = "none", this.isHidden = !1, this.componentWidth = typeof window < "u" ? window.innerWidth : 0, this.hasSlotContent = !1, this.alignSlotRight = !1, this.alignSearchRight = !1, this.defaultSlot = v(), this.headerRef = v(), this.userContainerRef = v(), this.slotContainerRef = v(), this.searchContainerRef = v(), this.slotContentRef = v(), this.searchMenuRef = v(), this.lastScrollPosition = 0, this.savedScrollY = 0, this.lastFocusedElement = null, this.shouldRestoreFocus = !1, this.handleScroll = () => {
       if (!this.shouldHideOnScroll) return;
       const e = window.pageYOffset || document.documentElement.scrollTop;
       e < 0 || Math.abs(e - this.lastScrollPosition) < 60 || (this.isHidden = e > this.lastScrollPosition, this.lastScrollPosition = e);
@@ -212,22 +206,22 @@ let o = class extends _ {
       this.user && this.openMenu === "user" && !t.closest(".pkt-header-service__user-container") && (this.openMenu = "none"), this.openMenu === "slot" && !t.closest(".pkt-header-service__slot-container") && (this.openMenu = "none"), this.openMenu === "search" && !t.closest(".pkt-header-service__search-container") && !t.closest(".pkt-header-service__search-input") && (this.openMenu = "none");
     }, this.handleFocusOut = (e, t) => {
       const i = e.relatedTarget;
-      let l;
+      let c;
       switch (t) {
         case "user":
-          l = this.userContainerRef;
+          c = this.userContainerRef;
           break;
         case "slot":
-          l = this.slotContainerRef;
+          c = this.slotContainerRef;
           break;
         case "search":
-          l = this.searchContainerRef;
+          c = this.searchContainerRef;
           break;
         default:
           return;
       }
-      const r = l.value;
-      r && (!i || !r.contains(i)) && (this.openMenu = "none");
+      const a = c.value;
+      a && (!i || !a.contains(i)) && (this.openMenu = "none");
     }, this.handleEscapeKey = (e) => {
       e.key === "Escape" && this.openMenu !== "none" && (e.preventDefault(), this.shouldRestoreFocus = !0, this.openMenu = "none");
     }, this.slotController = new S(this, this.defaultSlot);
@@ -289,7 +283,7 @@ let o = class extends _ {
   checkDropdownAlignment(e) {
     const t = e === "slot" ? this.slotContainerRef : this.searchContainerRef, i = e === "slot" ? this.slotContentRef : this.searchMenuRef;
     if (!t.value || !i.value || !this.isTablet || this.isMobile) return;
-    const l = t.value.getBoundingClientRect(), r = i.value.offsetWidth, p = l.left + r > window.innerWidth;
+    const c = t.value.getBoundingClientRect(), a = i.value.offsetWidth, p = c.left + a > window.innerWidth;
     e === "slot" ? this.alignSlotRight = p : this.alignSearchRight = p;
   }
   handleMenuToggle(e) {
@@ -348,7 +342,7 @@ let o = class extends _ {
   }
   get formattedLastLoggedIn() {
     var e;
-    return L((e = this.user) == null ? void 0 : e.lastLoggedIn);
+    return w((e = this.user) == null ? void 0 : e.lastLoggedIn);
   }
   get isFixed() {
     return this.position === "fixed";
@@ -363,9 +357,9 @@ let o = class extends _ {
     return this.hasLogOut && (this.logOutButtonPlacement === "userMenu" || this.logOutButtonPlacement === "both");
   }
   renderLogo() {
-    if (this.hideLogo) return c;
+    if (this.hideLogo) return u;
     const e = n`
-      <pkt-icon name="oslologo" aria-hidden="true" path=${E}></pkt-icon>
+      <pkt-icon name="oslologo" aria-hidden="true" path=${P}></pkt-icon>
     `;
     return this.logoLink && typeof this.logoLink == "string" ? n`
         <span class="pkt-header-service__logo">
@@ -411,13 +405,13 @@ let o = class extends _ {
       <span class="pkt-header-service__service-name" @click=${this.handleServiceClick}>
         <span class="pkt-header-service__service-link">${this.serviceName}</span>
       </span>
-    ` : c;
+    ` : u;
   }
   renderSlotContainer() {
-    const e = m({
+    const e = g({
       "pkt-header-service__slot-container": !0,
       "is-open": this.openMenu === "slot"
-    }), t = m({
+    }), t = g({
       "pkt-header-service__slot-content": !0,
       "align-right": this.alignSlotRight
     });
@@ -425,12 +419,12 @@ let o = class extends _ {
       <div
         class=${e}
         @focusout=${(i) => this.handleFocusOut(i, "slot")}
-        ${v(this.slotContainerRef)}
+        ${k(this.slotContainerRef)}
       >
         ${this.isTablet && this.hasSlotContent ? n`
               <pkt-button
                 skin="secondary"
-                variant="icon-only"
+                variant=${this.slotMenuVariant}
                 iconName="menu"
                 size=${this.isMobile ? "small" : "medium"}
                 state=${this.openMenu === "slot" ? "active" : "normal"}
@@ -439,27 +433,27 @@ let o = class extends _ {
                 aria-controls="mobile-slot-menu"
                 aria-label="Åpne meny"
               >
-                Meny
+                ${this.slotMenuText}
               </pkt-button>
-            ` : c}
+            ` : u}
         <div
           class=${t}
           id="mobile-slot-menu"
-          role=${this.isTablet ? "menu" : c}
-          aria-label=${this.isTablet ? "Meny" : c}
-          ${v(this.slotContentRef)}
-          ${v(this.defaultSlot)}
+          role=${this.isTablet ? "menu" : u}
+          aria-label=${this.isTablet ? "Meny" : u}
+          ${k(this.slotContentRef)}
+          ${k(this.defaultSlot)}
         ></div>
       </div>
     `;
   }
   renderSearch() {
-    if (!this.showSearch) return c;
+    if (!this.showSearch) return u;
     if (this.isTablet) {
-      const e = m({
+      const e = g({
         "pkt-header-service__search-container": !0,
         "is-open": this.openMenu === "search"
-      }), t = m({
+      }), t = g({
         "pkt-header-service__mobile-menu": !0,
         "is-open": this.openMenu === "search",
         "align-right": this.alignSearchRight
@@ -468,7 +462,7 @@ let o = class extends _ {
         <div
           class=${e}
           @focusout=${(i) => this.handleFocusOut(i, "search")}
-          ${v(this.searchContainerRef)}
+          ${k(this.searchContainerRef)}
         >
           <pkt-button
             skin="secondary"
@@ -483,7 +477,7 @@ let o = class extends _ {
           >
             Søk
           </pkt-button>
-          <div class=${t} ${v(this.searchMenuRef)}>
+          <div class=${t} ${k(this.searchMenuRef)}>
             ${this.openMenu === "search" ? n`
                   <pkt-textinput
                     id="mobile-search-menu"
@@ -500,7 +494,7 @@ let o = class extends _ {
         i.key === "Enter" && this.handleSearch(i.target.value);
       }}
                   ></pkt-textinput>
-                ` : c}
+                ` : u}
           </div>
         </div>
       `;
@@ -521,8 +515,8 @@ let o = class extends _ {
   }
   renderUserButton() {
     var t;
-    if (!this.user) return c;
-    const e = m({
+    if (!this.user) return u;
+    const e = g({
       "pkt-header-service__user-menu": this.isMobile === !1,
       "pkt-header-service__mobile-menu": this.isMobile === !0,
       "is-open": this.openMenu === "user"
@@ -531,10 +525,10 @@ let o = class extends _ {
       <div
         class="pkt-header-service__user-container"
         @focusout=${(i) => this.handleFocusOut(i, "user")}
-        ${v(this.userContainerRef)}
+        ${k(this.userContainerRef)}
       >
         <pkt-button
-          class=${m({
+          class=${g({
       "pkt-header-service__user-button": !0,
       "pkt-header-service__user-button--mobile": this.isMobile
     })}
@@ -553,7 +547,7 @@ let o = class extends _ {
               <div class=${e}>
                 <pkt-header-user-menu
                   .user=${this.user}
-                  formatted-last-logged-in=${this.formattedLastLoggedIn || c}
+                  formatted-last-logged-in=${this.formattedLastLoggedIn || u}
                   .representing=${this.representing}
                   .userMenu=${this.userMenu}
                   ?can-change-representation=${this.canChangeRepresentation}
@@ -564,12 +558,12 @@ let o = class extends _ {
                   @log-out=${this.handleLogout}
                 ></pkt-header-user-menu>
               </div>
-            ` : c}
+            ` : u}
       </div>
     `;
   }
   renderHeader() {
-    const e = m({
+    const e = g({
       "pkt-header-service": !0,
       "pkt-header-service--compact": this.compact,
       "pkt-header-service--mobile": this.isMobile,
@@ -577,12 +571,12 @@ let o = class extends _ {
       "pkt-header-service--fixed": this.isFixed,
       "pkt-header-service--scroll-to-hide": this.shouldHideOnScroll,
       "pkt-header-service--hidden": this.isHidden
-    }), t = m({
+    }), t = g({
       "pkt-header-service__logo-area": !0,
       "pkt-header-service__logo-area--without-service": !this.serviceName
     });
     return n`
-      <header class=${e} ${v(this.headerRef)}>
+      <header class=${e} ${k(this.headerRef)}>
         <div class=${t}>${this.renderLogo()} ${this.renderServiceName()}</div>
 
         <div class="pkt-header-service__content">
@@ -597,7 +591,7 @@ let o = class extends _ {
                 >
                   Logg ut
                 </pkt-button>
-              ` : c}
+              ` : u}
         </div>
 
         <div class="pkt-header-service__user">
@@ -612,7 +606,7 @@ let o = class extends _ {
                 >
                   Logg ut
                 </pkt-button>
-              ` : c}
+              ` : u}
         </div>
       </header>
     `;
@@ -620,7 +614,7 @@ let o = class extends _ {
   render() {
     const e = this.renderHeader();
     if (this.isFixed) {
-      const t = m({
+      const t = g({
         "pkt-header-service-spacer": !0,
         "pkt-header-service-spacer--compact": this.compact,
         "pkt-header-service-spacer--has-user": !!this.user,
@@ -636,102 +630,108 @@ let o = class extends _ {
     return e;
   }
 };
-a([
+r([
   s({ type: String, attribute: "service-name" })
 ], o.prototype, "serviceName", 2);
-a([
+r([
   s({ type: String, attribute: "service-link" })
 ], o.prototype, "serviceLink", 2);
-a([
+r([
   s({ type: String, attribute: "logo-link" })
 ], o.prototype, "logoLink", 2);
-a([
+r([
   s({ type: String, attribute: "search-placeholder" })
 ], o.prototype, "searchPlaceholder", 2);
-a([
+r([
   s({ type: String, attribute: "search-value" })
 ], o.prototype, "searchValue", 2);
-a([
+r([
   s({ type: Number, attribute: "mobile-breakpoint" })
 ], o.prototype, "mobileBreakpoint", 2);
-a([
+r([
   s({ type: Number, attribute: "tablet-breakpoint" })
 ], o.prototype, "tabletBreakpoint", 2);
-a([
+r([
   s({ type: String, attribute: "opened-menu" })
 ], o.prototype, "openedMenu", 2);
-a([
+r([
   s({ type: String, attribute: "log-out-button-placement" })
 ], o.prototype, "logOutButtonPlacement", 2);
-a([
+r([
   s({ type: String })
 ], o.prototype, "position", 2);
-a([
+r([
   s({ type: String, attribute: "scroll-behavior" })
 ], o.prototype, "scrollBehavior", 2);
-a([
+r([
+  s({ type: String, attribute: "slot-menu-variant" })
+], o.prototype, "slotMenuVariant", 2);
+r([
+  s({ type: String, attribute: "slot-menu-text" })
+], o.prototype, "slotMenuText", 2);
+r([
   s({ type: Boolean, attribute: "hide-logo", converter: d })
 ], o.prototype, "hideLogo", 2);
-a([
+r([
   s({ type: Boolean, converter: d })
 ], o.prototype, "compact", 2);
-a([
+r([
   s({ type: Boolean, attribute: "show-search", converter: d })
 ], o.prototype, "showSearch", 2);
-a([
+r([
   s({
     type: Boolean,
     attribute: "can-change-representation",
     converter: d
   })
 ], o.prototype, "canChangeRepresentation", 2);
-a([
+r([
   s({ type: Boolean, attribute: "has-log-out", converter: d })
 ], o.prototype, "hasLogOut", 2);
-a([
+r([
   s({ type: Object })
 ], o.prototype, "user", 2);
-a([
+r([
   s({ type: Array, attribute: "user-menu" })
 ], o.prototype, "userMenu", 2);
-a([
+r([
   s({ type: Object })
 ], o.prototype, "representing", 2);
-a([
+r([
   f()
 ], o.prototype, "isMobile", 2);
-a([
+r([
   f()
 ], o.prototype, "isTablet", 2);
-a([
+r([
   f()
 ], o.prototype, "openMenu", 2);
-a([
+r([
   f()
 ], o.prototype, "isHidden", 2);
-a([
+r([
   f()
 ], o.prototype, "componentWidth", 2);
-a([
+r([
   f()
 ], o.prototype, "hasSlotContent", 2);
-a([
+r([
   f()
 ], o.prototype, "alignSlotRight", 2);
-a([
+r([
   f()
 ], o.prototype, "alignSearchRight", 2);
-o = a([
+o = r([
   M("pkt-header-service")
 ], o);
-var P = Object.defineProperty, N = Object.getOwnPropertyDescriptor, u = (e, t, i, l) => {
-  for (var r = l > 1 ? void 0 : l ? N(t, i) : t, p = e.length - 1, g; p >= 0; p--)
-    (g = e[p]) && (r = (l ? g(t, i, r) : g(r)) || r);
-  return l && r && P(t, i, r), r;
+var x = Object.defineProperty, N = Object.getOwnPropertyDescriptor, h = (e, t, i, c) => {
+  for (var a = c > 1 ? void 0 : c ? N(t, i) : t, p = e.length - 1, m; p >= 0; p--)
+    (m = e[p]) && (a = (c ? m(t, i, a) : m(a)) || a);
+  return c && a && x(t, i, a), a;
 };
-let h = class extends _ {
+let l = class extends _ {
   constructor() {
-    super(), this.defaultSlot = k(), this.searchPlaceholder = "Søk", this.searchValue = "", this.mobileBreakpoint = 768, this.tabletBreakpoint = 1280, this.openedMenu = "none", this.logOutButtonPlacement = "none", this.position = "fixed", this.scrollBehavior = "hide", this.hideLogo = !1, this.compact = !1, this.showSearch = !1, this.canChangeRepresentation = !1, this.hasLogOut = !1, this.slotController = new S(this, this.defaultSlot);
+    super(), this.defaultSlot = v(), this.searchPlaceholder = "Søk", this.searchValue = "", this.mobileBreakpoint = 768, this.tabletBreakpoint = 1280, this.openedMenu = "none", this.logOutButtonPlacement = "none", this.position = "fixed", this.scrollBehavior = "hide", this.slotMenuVariant = "icon-only", this.slotMenuText = "Meny", this.hideLogo = !1, this.compact = !1, this.showSearch = !1, this.canChangeRepresentation = !1, this.hasLogOut = !1, this.slotController = new S(this, this.defaultSlot);
   }
   firstUpdated(e) {
     super.firstUpdated(e), this.emitDeprecationWarnings();
@@ -760,6 +760,8 @@ let h = class extends _ {
         log-out-button-placement=${this.logOutButtonPlacement}
         position=${this.position}
         scroll-behavior=${this.scrollBehavior}
+        slot-menu-variant=${this.slotMenuVariant}
+        slot-menu-text=${this.slotMenuText}
         .hideLogo=${this.hideLogo}
         .compact=${this.compact}
         .showSearch=${this.showSearch}
@@ -769,84 +771,90 @@ let h = class extends _ {
         .userMenu=${this.effectiveUserMenu}
         .representing=${this.representing}
       >
-        <div class="pkt-contents" ${v(this.defaultSlot)}></div>
+        <div class="pkt-contents" ${k(this.defaultSlot)}></div>
       </pkt-header-service>
     `;
   }
 };
-u([
+h([
   s({ type: String, attribute: "service-name" })
-], h.prototype, "serviceName", 2);
-u([
+], l.prototype, "serviceName", 2);
+h([
   s({ type: String, attribute: "service-link" })
-], h.prototype, "serviceLink", 2);
-u([
+], l.prototype, "serviceLink", 2);
+h([
   s({ type: String, attribute: "logo-link" })
-], h.prototype, "logoLink", 2);
-u([
+], l.prototype, "logoLink", 2);
+h([
   s({ type: String, attribute: "search-placeholder" })
-], h.prototype, "searchPlaceholder", 2);
-u([
+], l.prototype, "searchPlaceholder", 2);
+h([
   s({ type: String, attribute: "search-value" })
-], h.prototype, "searchValue", 2);
-u([
+], l.prototype, "searchValue", 2);
+h([
   s({ type: Number, attribute: "mobile-breakpoint" })
-], h.prototype, "mobileBreakpoint", 2);
-u([
+], l.prototype, "mobileBreakpoint", 2);
+h([
   s({ type: Number, attribute: "tablet-breakpoint" })
-], h.prototype, "tabletBreakpoint", 2);
-u([
+], l.prototype, "tabletBreakpoint", 2);
+h([
   s({ type: String, attribute: "opened-menu" })
-], h.prototype, "openedMenu", 2);
-u([
+], l.prototype, "openedMenu", 2);
+h([
   s({ type: String, attribute: "log-out-button-placement" })
-], h.prototype, "logOutButtonPlacement", 2);
-u([
+], l.prototype, "logOutButtonPlacement", 2);
+h([
   s({ type: String })
-], h.prototype, "position", 2);
-u([
+], l.prototype, "position", 2);
+h([
   s({ type: String, attribute: "scroll-behavior" })
-], h.prototype, "scrollBehavior", 2);
-u([
+], l.prototype, "scrollBehavior", 2);
+h([
+  s({ type: String, attribute: "slot-menu-variant" })
+], l.prototype, "slotMenuVariant", 2);
+h([
+  s({ type: String, attribute: "slot-menu-text" })
+], l.prototype, "slotMenuText", 2);
+h([
   s({ type: Boolean, attribute: "hide-logo", converter: d })
-], h.prototype, "hideLogo", 2);
-u([
+], l.prototype, "hideLogo", 2);
+h([
   s({ type: Boolean, converter: d })
-], h.prototype, "compact", 2);
-u([
+], l.prototype, "compact", 2);
+h([
   s({ type: Boolean, attribute: "show-search", converter: d })
-], h.prototype, "showSearch", 2);
-u([
+], l.prototype, "showSearch", 2);
+h([
   s({
     type: Boolean,
     attribute: "can-change-representation",
     converter: d
   })
-], h.prototype, "canChangeRepresentation", 2);
-u([
+], l.prototype, "canChangeRepresentation", 2);
+h([
   s({ type: Boolean, attribute: "has-log-out", converter: d })
-], h.prototype, "hasLogOut", 2);
-u([
+], l.prototype, "hasLogOut", 2);
+h([
   s({ type: Object })
-], h.prototype, "user", 2);
-u([
+], l.prototype, "user", 2);
+h([
   s({ type: Array, attribute: "user-menu" })
-], h.prototype, "userMenu", 2);
-u([
+], l.prototype, "userMenu", 2);
+h([
   s({ type: Object })
-], h.prototype, "representing", 2);
-u([
+], l.prototype, "representing", 2);
+h([
   s({ type: Array, attribute: "user-menu-footer" })
-], h.prototype, "userMenuFooter", 2);
-u([
+], l.prototype, "userMenuFooter", 2);
+h([
   s({ type: Array, attribute: "user-options" })
-], h.prototype, "userOptions", 2);
-h = u([
+], l.prototype, "userOptions", 2);
+l = h([
   M("pkt-header")
-], h);
+], l);
 export {
-  h as PktHeader,
+  l as PktHeader,
   o as PktHeaderService,
   b as PktHeaderUserMenu,
-  L as formatLastLoggedIn
+  w as formatLastLoggedIn
 };