@oslokommune/punkt-elements 14.1.1 → 14.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +35 -0
- package/dist/booleanish-BKVonob4.cjs +1 -0
- package/dist/booleanish-C9R0tdXH.js +11 -0
- package/dist/{checkbox-BP5zOlPy.cjs → checkbox-C0TPnShf.cjs} +1 -1
- package/dist/{checkbox-CfXOh6Lw.js → checkbox-CnhA52o_.js} +1 -1
- package/dist/{combobox-BWsCkPH2.cjs → combobox-C1xwAju5.cjs} +1 -1
- package/dist/{combobox-BMznle0M.js → combobox-Dcp_fHcL.js} +2 -2
- package/dist/{datepicker-2s6FUxdi.js → datepicker-Bjb9GK1E.js} +2 -2
- package/dist/{datepicker-D1c9oP-2.cjs → datepicker-COIRRau0.cjs} +1 -1
- package/dist/index.d.ts +68 -180
- package/dist/{input-element-B0VPRK_E.js → input-element-B8M8Nppd.js} +77 -84
- package/dist/input-element-D697OAJo.cjs +1 -0
- package/dist/{input-wrapper-CAwzMR9o.js → input-wrapper-1PCXqtiu.js} +42 -49
- package/dist/{input-wrapper-DXg2N3wx.cjs → input-wrapper-CtBiAb04.cjs} +20 -20
- package/dist/pkt-checkbox.cjs +1 -1
- package/dist/pkt-checkbox.js +1 -1
- package/dist/pkt-combobox.cjs +1 -1
- package/dist/pkt-combobox.js +1 -1
- package/dist/pkt-datepicker.cjs +1 -1
- package/dist/pkt-datepicker.js +2 -2
- package/dist/pkt-header.cjs +14 -12
- package/dist/pkt-header.js +163 -155
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +8 -8
- package/dist/pkt-input-wrapper.cjs +1 -1
- package/dist/pkt-input-wrapper.js +1 -1
- package/dist/pkt-radiobutton.cjs +1 -1
- package/dist/pkt-radiobutton.js +1 -1
- package/dist/pkt-select.cjs +1 -1
- package/dist/pkt-select.js +1 -1
- package/dist/pkt-textarea.cjs +1 -1
- package/dist/pkt-textarea.js +1 -1
- package/dist/pkt-textinput.cjs +1 -1
- package/dist/pkt-textinput.js +1 -1
- package/dist/{radiobutton-BuKXgQm_.cjs → radiobutton-BkqaqO5E.cjs} +1 -1
- package/dist/{radiobutton-C_MzK8dE.js → radiobutton-Caq8-GhM.js} +1 -1
- package/dist/{select-Ds4Ws1_6.cjs → select-3dwlk22G.cjs} +1 -1
- package/dist/{select-CteaDnzz.js → select-_C-yztI0.js} +2 -2
- package/dist/{textarea-zeFp1hxO.cjs → textarea-DyUy8u7X.cjs} +1 -1
- package/dist/{textarea-D4T9yqw7.js → textarea-a6T4aJJU.js} +2 -2
- package/dist/{textinput-Cddq4eF_.js → textinput-DIuM70dd.js} +2 -2
- package/dist/{textinput-DFFL5v-U.cjs → textinput-IN3b0nSH.cjs} +1 -1
- package/package.json +2 -2
- package/src/components/accordion/accordion.ts +2 -1
- package/src/components/alert/alert.ts +2 -2
- package/src/components/button/button.ts +2 -3
- package/src/components/card/card.ts +2 -3
- package/src/components/header/header-service.ts +12 -8
- package/src/components/header/header.ts +8 -2
- package/src/components/header/index.ts +4 -1
- package/src/components/header/types.ts +33 -98
- package/src/components/heading/heading.ts +4 -3
- package/src/components/index.ts +4 -1
- package/src/components/input-wrapper/input-wrapper.ts +2 -16
- package/src/components/messagebox/messagebox.ts +2 -1
- package/src/components/progressbar/progressbar.ts +1 -1
- package/src/components/tag/tag.ts +2 -2
- package/dist/input-element-BmXkhljw.cjs +0 -1
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
"use strict";const t=require("./element-CJ_QKaki.cjs"),
|
|
2
|
-
${this.tagText?t.x`<span class=${
|
|
3
|
-
${this.optionalTag?t.x`<span class=${
|
|
4
|
-
${this.requiredTag?t.x`<span class=${
|
|
5
|
-
`,
|
|
1
|
+
"use strict";const t=require("./element-CJ_QKaki.cjs"),x=require("./pkt-slot-controller-BzddBp7z.cjs"),a=require("./ref-BFa5Utho.cjs"),y=require("./if-defined-Bc9-_I01.cjs"),b=require("./icon-MRx-m0Or.cjs"),$=require("./class-map-C_erArZz.cjs"),f=require("./utils-byXsEz1u.cjs"),I=require("./booleanish-BKVonob4.cjs"),r=require("./input-wrapper-EoSAbU-U.cjs");require("./helptext-hlcc584n.cjs");require("./alert-SvqEDHuW.cjs");var P=Object.defineProperty,W=Object.getOwnPropertyDescriptor,e=(u,p,n,o)=>{for(var s=o>1?void 0:o?W(p,n):p,i=u.length-1,l;i>=0;i--)(l=u[i])&&(s=(o?l(p,n,s):l(s))||s);return o&&s&&P(p,n,s),s};exports.PktInputWrapper=class extends t.PktElement{constructor(){super(),this.defaultSlot=a.e(),this.helptextSlot=a.e(),this.forId=f.uuidish(),this.label="",this.helptext=null,this.helptextDropdown=null,this.helptextDropdownButton=null,this.counter=r.specs.props.counter.default,this.counterCurrent=0,this.counterMaxLength=0,this.counterError=null,this.counterPosition="bottom",this.optionalTag=r.specs.props.optionalTag.default,this.optionalText=r.specs.props.optionalText.default,this.requiredTag=r.specs.props.requiredTag.default,this.requiredText=r.specs.props.requiredText.default,this.tagText=null,this.hasError=r.specs.props.hasError.default,this.errorMessage="",this.disabled=r.specs.props.disabled.default,this.inline=r.specs.props.inline.default,this.ariaDescribedby=void 0,this.hasFieldset=r.specs.props.hasFieldset.default,this.role="group",this.useWrapper=r.specs.props.useWrapper.default,this.slotController=new x.PktSlotController(this,this.defaultSlot,this.helptextSlot)}updated(p){super.updated(p)}render(){const p={"pkt-inputwrapper":!0,"pkt-inputwrapper--error":this.hasError,"pkt-inputwrapper--disabled":this.disabled,"pkt-inputwrapper--inline":this.inline},n="pkt-tag pkt-tag--small pkt-tag--thin-text",o=this.ariaDescribedby?this.ariaDescribedby:this.helptext?`${this.forId}-helptext`:t.E,s=()=>t.x`
|
|
2
|
+
${this.tagText?t.x`<span class=${n+" pkt-tag--gray"}>${this.tagText}</span>`:t.E}
|
|
3
|
+
${this.optionalTag?t.x`<span class=${n+" pkt-tag--blue-light"}>${this.optionalText}</span>`:t.E}
|
|
4
|
+
${this.requiredTag?t.x`<span class=${n+" pkt-tag--beige"}>${this.requiredText}</span>`:t.E}
|
|
5
|
+
`,i=()=>this.useWrapper?this.hasFieldset?t.x`<legend
|
|
6
6
|
class="pkt-inputwrapper__legend"
|
|
7
7
|
id="${this.forId}-label"
|
|
8
8
|
@click=${this.handleLabelClick}
|
|
9
9
|
>
|
|
10
|
-
${this.label} ${
|
|
10
|
+
${this.label} ${s()}
|
|
11
11
|
</legend>`:t.x`<label
|
|
12
12
|
class="pkt-inputwrapper__label"
|
|
13
13
|
for="${this.forId}"
|
|
14
|
-
aria-describedby="${
|
|
14
|
+
aria-describedby="${o}"
|
|
15
15
|
id="${this.forId}-label"
|
|
16
16
|
@click=${this.handleLabelClick}
|
|
17
|
-
>${this.label}${
|
|
17
|
+
>${this.label}${s()}</label
|
|
18
18
|
>`:t.x`<label
|
|
19
19
|
for="${this.forId}"
|
|
20
20
|
class="pkt-sr-only"
|
|
21
|
-
aria-describedby="${
|
|
21
|
+
aria-describedby="${o}"
|
|
22
22
|
id="${this.forId}-label"
|
|
23
23
|
>
|
|
24
24
|
${this.label}
|
|
25
|
-
</label>`,
|
|
25
|
+
</label>`,l=()=>t.x`
|
|
26
26
|
<pkt-helptext
|
|
27
|
-
class="${
|
|
27
|
+
class="${y.o(this.useWrapper?void 0:"pkt-hide")}"
|
|
28
28
|
.forId=${this.forId}
|
|
29
29
|
.helptext=${this.helptext}
|
|
30
30
|
.helptextDropdown=${this.helptextDropdown}
|
|
31
|
-
.helptextDropdownButton=${this.helptextDropdownButton||
|
|
32
|
-
@toggleHelpText=${
|
|
33
|
-
${
|
|
31
|
+
.helptextDropdownButton=${this.helptextDropdownButton||r.specs.props.helptextDropdownButton.default}
|
|
32
|
+
@toggleHelpText=${k=>{this.toggleDropdown(k)}}
|
|
33
|
+
${a.n(this.helptextSlot)}
|
|
34
34
|
name="helptext"
|
|
35
35
|
></pkt-helptext>
|
|
36
36
|
`,h=()=>this.counter?t.x`<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
|
|
@@ -43,14 +43,14 @@
|
|
|
43
43
|
aria-live="assertive"
|
|
44
44
|
aria-atomic="true"
|
|
45
45
|
>
|
|
46
|
-
${
|
|
46
|
+
${b.o(this.errorMessage)}
|
|
47
47
|
</pkt-alert>`:t.E,d=()=>t.x`
|
|
48
|
-
${
|
|
49
|
-
${
|
|
48
|
+
${i()}
|
|
49
|
+
${l()}
|
|
50
50
|
${this.counterPosition==="top"?h():t.E}
|
|
51
|
-
<div class="pkt-contents" ${
|
|
51
|
+
<div class="pkt-contents" ${a.n(this.defaultSlot)}></div>
|
|
52
52
|
${this.counterPosition==="bottom"?h():t.E}
|
|
53
53
|
${c()}
|
|
54
|
-
`,
|
|
54
|
+
`,g=()=>this.hasFieldset?t.x`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${o}">
|
|
55
55
|
${d()}
|
|
56
|
-
</fieldset>`:t.x`<div class="pkt-inputwrapper__fieldset">${d()}</div>`;return t.x`<div class=${
|
|
56
|
+
</fieldset>`:t.x`<div class="pkt-inputwrapper__fieldset">${d()}</div>`;return t.x`<div class=${$.e(p)}>${g()}</div> `}toggleDropdown(p){this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!1,detail:{isOpen:p.detail.isOpen}}))}handleLabelClick(){this.dispatchEvent(new CustomEvent("labelClick",{bubbles:!0,composed:!0,detail:"label clicked"}))}};e([t.n({type:String})],exports.PktInputWrapper.prototype,"forId",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"label",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"helptext",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"helptextDropdown",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"helptextDropdownButton",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"counter",2);e([t.n({type:Number})],exports.PktInputWrapper.prototype,"counterCurrent",2);e([t.n({type:Number})],exports.PktInputWrapper.prototype,"counterMaxLength",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"counterError",2);e([t.n({type:String,reflect:!1})],exports.PktInputWrapper.prototype,"counterPosition",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"optionalTag",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"optionalText",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"requiredTag",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"requiredText",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"tagText",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"hasError",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"errorMessage",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"disabled",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"inline",2);e([t.n({type:String})],exports.PktInputWrapper.prototype,"ariaDescribedby",2);e([t.n({type:Boolean})],exports.PktInputWrapper.prototype,"hasFieldset",2);e([t.n({type:String,reflect:!0})],exports.PktInputWrapper.prototype,"role",2);e([t.n({type:Boolean,reflect:!0,converter:I.booleanishConverter})],exports.PktInputWrapper.prototype,"useWrapper",2);exports.PktInputWrapper=e([t.t("pkt-input-wrapper")],exports.PktInputWrapper);
|
package/dist/pkt-checkbox.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./checkbox-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./checkbox-C0TPnShf.cjs"),t=e.PktCheckbox;Object.defineProperty(exports,"PktCheckbox",{enumerable:!0,get:()=>e.PktCheckbox});exports.default=t;
|
package/dist/pkt-checkbox.js
CHANGED
package/dist/pkt-combobox.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./combobox-C1xwAju5.cjs"),o=e.PktCombobox;Object.defineProperty(exports,"PktCombobox",{enumerable:!0,get:()=>e.PktCombobox});exports.default=o;
|
package/dist/pkt-combobox.js
CHANGED
package/dist/pkt-datepicker.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./datepicker-COIRRau0.cjs"),t=e.PktDatepicker;Object.defineProperty(exports,"PktDatepicker",{enumerable:!0,get:()=>e.PktDatepicker});Object.defineProperty(exports,"PktDatepickerMultiple",{enumerable:!0,get:()=>e.PktDatepickerMultiple});Object.defineProperty(exports,"PktDatepickerRange",{enumerable:!0,get:()=>e.PktDatepickerRange});Object.defineProperty(exports,"PktDatepickerSingle",{enumerable:!0,get:()=>e.PktDatepickerSingle});exports.default=t;
|
package/dist/pkt-datepicker.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { a as e } from "./datepicker-
|
|
2
|
-
import { d as p, c as i, b as c } from "./datepicker-
|
|
1
|
+
import { a as e } from "./datepicker-Bjb9GK1E.js";
|
|
2
|
+
import { d as p, c as i, b as c } from "./datepicker-Bjb9GK1E.js";
|
|
3
3
|
const a = e;
|
|
4
4
|
export {
|
|
5
5
|
e as PktDatepicker,
|
package/dist/pkt-header.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./element-CJ_QKaki.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),v=require("./if-defined-Bc9-_I01.cjs"),h=require("./ref-BFa5Utho.cjs"),d=require("./state-DSjcvzDN.cjs"),p=require("./class-map-C_erArZz.cjs");require("./button-DaM4jvhJ.cjs");require("./icon-MRx-m0Or.cjs");require("./link-Dw39h-YN.cjs");require("./textinput-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./element-CJ_QKaki.cjs"),g=require("./pkt-slot-controller-BzddBp7z.cjs"),v=require("./if-defined-Bc9-_I01.cjs"),h=require("./ref-BFa5Utho.cjs"),u=require("./booleanish-BKVonob4.cjs"),d=require("./state-DSjcvzDN.cjs"),p=require("./class-map-C_erArZz.cjs");require("./button-DaM4jvhJ.cjs");require("./icon-MRx-m0Or.cjs");require("./link-Dw39h-YN.cjs");require("./textinput-IN3b0nSH.cjs");const b=o=>typeof o.target=="string"?{title:o.title,iconName:o.iconName,href:o.target}:{title:o.title,iconName:o.iconName,onClick:o.target},f=o=>b(o),m=o=>{if(!o)return;const e=typeof o=="string"?new Date(o):o;if(!isNaN(e.getTime()))return e.toLocaleDateString("nb-NO",{day:"numeric",month:"long",year:"numeric",hour:"2-digit",minute:"2-digit"})};var y=Object.defineProperty,S=Object.getOwnPropertyDescriptor,k=(o,e,s,n)=>{for(var r=n>1?void 0:n?S(e,s):e,l=o.length-1,c;l>=0;l--)(c=o[l])&&(r=(n?c(e,s,r):c(r))||r);return n&&r&&y(e,s,r),r};exports.PktHeaderUserMenu=class extends t.PktElement{constructor(){super(...arguments),this.canChangeRepresentation=!1,this.logoutOnClick=!1}handleChangeRepresentation(){this.dispatchEvent(new CustomEvent("change-representation",{bubbles:!0,composed:!0}))}handleLogout(){this.dispatchEvent(new CustomEvent("log-out",{bubbles:!0,composed:!0}))}handleMenuItemClick(e){"onClick"in e&&typeof e.onClick=="function"&&e.onClick()}renderLinkOrButton(e,s){const n="href"in e,r=p.e({"pkt-user-menu__link":!0,"pkt-link-button":!n,"pkt-link":!n,"pkt-link--icon-left":!n,[s||""]:!!s});return n?t.x`
|
|
2
2
|
<pkt-link
|
|
3
3
|
icon-name=${e.iconName||t.E}
|
|
4
4
|
href=${e.href}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
${e.title}
|
|
9
9
|
</pkt-link>
|
|
10
10
|
`:t.x`
|
|
11
|
-
<button class=${
|
|
11
|
+
<button class=${r} type="button" @click=${()=>this.handleMenuItemClick(e)}>
|
|
12
12
|
${e.iconName?t.x`<pkt-icon
|
|
13
13
|
name=${e.iconName}
|
|
14
14
|
class="pkt-link__icon"
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
<li class="pkt-user-menu__subitem">${this.renderLinkOrButton(s)}</li>
|
|
23
23
|
`)}
|
|
24
24
|
</ul>
|
|
25
|
-
`}render(){var s;const e=(s=this.userMenu)==null?void 0:s.map(
|
|
25
|
+
`}render(){var s;const e=(s=this.userMenu)==null?void 0:s.map(f);return t.x`
|
|
26
26
|
<nav class="pkt-user-menu" aria-label="Meny for innlogget bruker">
|
|
27
27
|
<ul class="pkt-user-menu__list">
|
|
28
28
|
<!-- User section -->
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
`:t.E}
|
|
81
81
|
</ul>
|
|
82
82
|
</nav>
|
|
83
|
-
`}};k([t.n({type:Object})],exports.PktHeaderUserMenu.prototype,"user",2);k([t.n({type:String,attribute:"formatted-last-logged-in"})],exports.PktHeaderUserMenu.prototype,"formattedLastLoggedIn",2);k([t.n({type:Object})],exports.PktHeaderUserMenu.prototype,"representing",2);k([t.n({type:Array,attribute:"user-menu"})],exports.PktHeaderUserMenu.prototype,"userMenu",2);k([t.n({type:Boolean,attribute:"can-change-representation",converter:u})],exports.PktHeaderUserMenu.prototype,"canChangeRepresentation",2);k([t.n({type:Boolean,attribute:"logout-on-click",converter:u})],exports.PktHeaderUserMenu.prototype,"logoutOnClick",2);exports.PktHeaderUserMenu=k([t.t("pkt-header-user-menu")],exports.PktHeaderUserMenu);var
|
|
83
|
+
`}};k([t.n({type:Object})],exports.PktHeaderUserMenu.prototype,"user",2);k([t.n({type:String,attribute:"formatted-last-logged-in"})],exports.PktHeaderUserMenu.prototype,"formattedLastLoggedIn",2);k([t.n({type:Object})],exports.PktHeaderUserMenu.prototype,"representing",2);k([t.n({type:Array,attribute:"user-menu"})],exports.PktHeaderUserMenu.prototype,"userMenu",2);k([t.n({type:Boolean,attribute:"can-change-representation",converter:u.booleanishConverter})],exports.PktHeaderUserMenu.prototype,"canChangeRepresentation",2);k([t.n({type:Boolean,attribute:"logout-on-click",converter:u.booleanishConverter})],exports.PktHeaderUserMenu.prototype,"logoutOnClick",2);exports.PktHeaderUserMenu=k([t.t("pkt-header-user-menu")],exports.PktHeaderUserMenu);var $=Object.defineProperty,M=Object.getOwnPropertyDescriptor,i=(o,e,s,n)=>{for(var r=n>1?void 0:n?M(e,s):e,l=o.length-1,c;l>=0;l--)(c=o[l])&&(r=(n?c(e,s,r):c(r))||r);return n&&r&&$(e,s,r),r};const _="https://punkt-cdn.oslo.kommune.no/latest/logos/";exports.PktHeaderService=class extends t.PktElement{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.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=h.e(),this.headerRef=h.e(),this.userContainerRef=h.e(),this.slotContainerRef=h.e(),this.searchContainerRef=h.e(),this.slotContentRef=h.e(),this.searchMenuRef=h.e(),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)},this.handleClickOutside=e=>{const s=e.target;this.user&&this.openMenu==="user"&&!s.closest(".pkt-header-service__user-container")&&(this.openMenu="none"),this.openMenu==="slot"&&!s.closest(".pkt-header-service__slot-container")&&(this.openMenu="none"),this.openMenu==="search"&&!s.closest(".pkt-header-service__search-container")&&!s.closest(".pkt-header-service__search-input")&&(this.openMenu="none")},this.handleFocusOut=(e,s)=>{const n=e.relatedTarget;let r;switch(s){case"user":r=this.userContainerRef;break;case"slot":r=this.slotContainerRef;break;case"search":r=this.searchContainerRef;break;default:return}const l=r.value;l&&(!n||!l.contains(n))&&(this.openMenu="none")},this.handleEscapeKey=e=>{e.key==="Escape"&&this.openMenu!=="none"&&(e.preventDefault(),this.shouldRestoreFocus=!0,this.openMenu="none")},this.slotController=new g.PktSlotController(this,this.defaultSlot)}updateSlots(e){this.hasSlotContent=e.has(null)||e.has(void 0)}connectedCallback(){super.connectedCallback(),this.setupScrollListener()}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.resizeObserver)==null||e.disconnect(),window.removeEventListener("scroll",this.handleScroll),this.unlockScroll()}firstUpdated(){this.setupResizeObserver()}updated(e){if(super.updated(e),e.has("openedMenu")&&this.openedMenu!==this.openMenu&&(this.openMenu=this.openedMenu),(e.has("mobileBreakpoint")||e.has("tabletBreakpoint"))&&(this.updateIsMobile(),this.updateIsTablet()),e.has("openMenu")){const s=e.get("openMenu");this.openMenu!=="none"&&(s==="none"||s===void 0)?(document.addEventListener("mousedown",this.handleClickOutside),document.addEventListener("keydown",this.handleEscapeKey),(this.openMenu==="slot"||this.openMenu==="search")&&requestAnimationFrame(()=>{this.checkDropdownAlignment(this.openMenu)})):this.openMenu==="none"&&s!=="none"&&(document.removeEventListener("mousedown",this.handleClickOutside),document.removeEventListener("keydown",this.handleEscapeKey),this.restoreFocus())}(e.has("openMenu")||e.has("isMobile"))&&this.updateScrollLock()}setupResizeObserver(){const e=this.headerRef.value;e&&(this.componentWidth=e.offsetWidth,this.updateIsMobile(),this.updateIsTablet(),this.resizeObserver=new ResizeObserver(s=>{for(const n of s)n.borderBoxSize&&n.borderBoxSize.length>0?this.componentWidth=n.borderBoxSize[0].inlineSize:this.componentWidth=n.contentRect.width,this.updateIsMobile(),this.updateIsTablet()}),this.resizeObserver.observe(e))}updateIsMobile(){this.isMobile=this.componentWidth<this.mobileBreakpoint}updateIsTablet(){this.isTablet=this.componentWidth<this.tabletBreakpoint}updateScrollLock(){this.position==="fixed"&&this.isMobile&&this.openMenu!=="none"?this.lockScroll():this.unlockScroll()}lockScroll(){const e=document.body,s=document.documentElement;this.savedScrollY=window.scrollY||window.pageYOffset;const n=window.innerWidth-s.clientWidth;n>0&&(e.style.paddingRight=`${n}px`),e.style.position="fixed",e.style.top=`-${this.savedScrollY}px`,e.style.left="0",e.style.right="0",e.style.width="100%",e.style.overflow="hidden",s.classList.add("is-scroll-locked")}unlockScroll(){const e=document.body,s=document.documentElement;s.classList.contains("is-scroll-locked")&&(e.style.removeProperty("position"),e.style.removeProperty("top"),e.style.removeProperty("left"),e.style.removeProperty("right"),e.style.removeProperty("width"),e.style.removeProperty("overflow"),e.style.removeProperty("padding-right"),s.classList.remove("is-scroll-locked"),window.scrollTo({top:this.savedScrollY}))}setupScrollListener(){window.addEventListener("scroll",this.handleScroll)}restoreFocus(){this.shouldRestoreFocus&&this.lastFocusedElement&&document.contains(this.lastFocusedElement)&&this.lastFocusedElement.focus(),this.lastFocusedElement=null,this.shouldRestoreFocus=!1}checkDropdownAlignment(e){const s=e==="slot"?this.slotContainerRef:this.searchContainerRef,n=e==="slot"?this.slotContentRef:this.searchMenuRef;if(!s.value||!n.value||!this.isTablet||this.isMobile)return;const r=s.value.getBoundingClientRect(),l=n.value.offsetWidth,c=r.left+l>window.innerWidth;e==="slot"?this.alignSlotRight=c:this.alignSearchRight=c}handleMenuToggle(e){this.openMenu!=="none"?this.openMenu="none":(this.lastFocusedElement=document.activeElement,this.openMenu=e)}handleLogoClick(e){this.dispatchEvent(new CustomEvent("logo-click",{bubbles:!0,composed:!0,detail:{originalEvent:e}}))}handleServiceClick(e){this.dispatchEvent(new CustomEvent("service-click",{bubbles:!0,composed:!0,detail:{originalEvent:e}}))}handleLogout(){this.dispatchEvent(new CustomEvent("log-out",{bubbles:!0,composed:!0}))}handleSearch(e){this.dispatchEvent(new CustomEvent("search",{detail:{query:e},bubbles:!0,composed:!0}))}handleSearchChange(e){this.dispatchEvent(new CustomEvent("search-change",{detail:{query:e},bubbles:!0,composed:!0}))}handleSearchInputChange(e){const s=e.target.value;this.handleSearchChange(s)}handleSearchKeyDown(e){e.key==="Enter"&&this.handleSearch(e.target.value)}get formattedLastLoggedIn(){var e;return m((e=this.user)==null?void 0:e.lastLoggedIn)}get isFixed(){return this.position==="fixed"}get shouldHideOnScroll(){return this.scrollBehavior==="hide"}get showLogoutInHeader(){return this.hasLogOut&&(this.logOutButtonPlacement==="header"||this.logOutButtonPlacement==="both")}get showLogoutInUserMenu(){return this.hasLogOut&&(this.logOutButtonPlacement==="userMenu"||this.logOutButtonPlacement==="both")}renderLogo(){if(this.hideLogo)return t.E;const e=t.x`
|
|
84
84
|
<pkt-icon name="oslologo" aria-hidden="true" path=${_}></pkt-icon>
|
|
85
85
|
`;return this.logoLink&&typeof this.logoLink=="string"?t.x`
|
|
86
86
|
<span class="pkt-header-service__logo">
|
|
@@ -126,13 +126,13 @@
|
|
|
126
126
|
`:t.E}renderSlotContainer(){const e=p.e({"pkt-header-service__slot-container":!0,"is-open":this.openMenu==="slot"}),s=p.e({"pkt-header-service__slot-content":!0,"align-right":this.alignSlotRight});return t.x`
|
|
127
127
|
<div
|
|
128
128
|
class=${e}
|
|
129
|
-
@focusout=${
|
|
129
|
+
@focusout=${n=>this.handleFocusOut(n,"slot")}
|
|
130
130
|
${h.n(this.slotContainerRef)}
|
|
131
131
|
>
|
|
132
132
|
${this.isTablet&&this.hasSlotContent?t.x`
|
|
133
133
|
<pkt-button
|
|
134
134
|
skin="secondary"
|
|
135
|
-
variant
|
|
135
|
+
variant=${this.slotMenuVariant}
|
|
136
136
|
iconName="menu"
|
|
137
137
|
size=${this.isMobile?"small":"medium"}
|
|
138
138
|
state=${this.openMenu==="slot"?"active":"normal"}
|
|
@@ -141,7 +141,7 @@
|
|
|
141
141
|
aria-controls="mobile-slot-menu"
|
|
142
142
|
aria-label="Åpne meny"
|
|
143
143
|
>
|
|
144
|
-
|
|
144
|
+
${this.slotMenuText}
|
|
145
145
|
</pkt-button>
|
|
146
146
|
`:t.E}
|
|
147
147
|
<div
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
`}renderSearch(){if(!this.showSearch)return t.E;if(this.isTablet){const e=p.e({"pkt-header-service__search-container":!0,"is-open":this.openMenu==="search"}),s=p.e({"pkt-header-service__mobile-menu":!0,"is-open":this.openMenu==="search","align-right":this.alignSearchRight});return t.x`
|
|
157
157
|
<div
|
|
158
158
|
class=${e}
|
|
159
|
-
@focusout=${
|
|
159
|
+
@focusout=${n=>this.handleFocusOut(n,"search")}
|
|
160
160
|
${h.n(this.searchContainerRef)}
|
|
161
161
|
>
|
|
162
162
|
<pkt-button
|
|
@@ -185,7 +185,7 @@
|
|
|
185
185
|
autofocus
|
|
186
186
|
fullwidth
|
|
187
187
|
@input=${this.handleSearchInputChange}
|
|
188
|
-
@keydown=${
|
|
188
|
+
@keydown=${n=>{n.key==="Enter"&&this.handleSearch(n.target.value)}}
|
|
189
189
|
></pkt-textinput>
|
|
190
190
|
`:t.E}
|
|
191
191
|
</div>
|
|
@@ -205,7 +205,7 @@
|
|
|
205
205
|
`}renderUserButton(){var s;if(!this.user)return t.E;const e=p.e({"pkt-header-service__user-menu":this.isMobile===!1,"pkt-header-service__mobile-menu":this.isMobile===!0,"is-open":this.openMenu==="user"});return t.x`
|
|
206
206
|
<div
|
|
207
207
|
class="pkt-header-service__user-container"
|
|
208
|
-
@focusout=${
|
|
208
|
+
@focusout=${n=>this.handleFocusOut(n,"user")}
|
|
209
209
|
${h.n(this.userContainerRef)}
|
|
210
210
|
>
|
|
211
211
|
<pkt-button
|
|
@@ -275,7 +275,7 @@
|
|
|
275
275
|
${e}
|
|
276
276
|
<div class=${s}></div>
|
|
277
277
|
</div>
|
|
278
|
-
`}return e}};
|
|
278
|
+
`}return e}};i([t.n({type:String,attribute:"service-name"})],exports.PktHeaderService.prototype,"serviceName",2);i([t.n({type:String,attribute:"service-link"})],exports.PktHeaderService.prototype,"serviceLink",2);i([t.n({type:String,attribute:"logo-link"})],exports.PktHeaderService.prototype,"logoLink",2);i([t.n({type:String,attribute:"search-placeholder"})],exports.PktHeaderService.prototype,"searchPlaceholder",2);i([t.n({type:String,attribute:"search-value"})],exports.PktHeaderService.prototype,"searchValue",2);i([t.n({type:Number,attribute:"mobile-breakpoint"})],exports.PktHeaderService.prototype,"mobileBreakpoint",2);i([t.n({type:Number,attribute:"tablet-breakpoint"})],exports.PktHeaderService.prototype,"tabletBreakpoint",2);i([t.n({type:String,attribute:"opened-menu"})],exports.PktHeaderService.prototype,"openedMenu",2);i([t.n({type:String,attribute:"log-out-button-placement"})],exports.PktHeaderService.prototype,"logOutButtonPlacement",2);i([t.n({type:String})],exports.PktHeaderService.prototype,"position",2);i([t.n({type:String,attribute:"scroll-behavior"})],exports.PktHeaderService.prototype,"scrollBehavior",2);i([t.n({type:String,attribute:"slot-menu-variant"})],exports.PktHeaderService.prototype,"slotMenuVariant",2);i([t.n({type:String,attribute:"slot-menu-text"})],exports.PktHeaderService.prototype,"slotMenuText",2);i([t.n({type:Boolean,attribute:"hide-logo",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"hideLogo",2);i([t.n({type:Boolean,converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"compact",2);i([t.n({type:Boolean,attribute:"show-search",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"showSearch",2);i([t.n({type:Boolean,attribute:"can-change-representation",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"canChangeRepresentation",2);i([t.n({type:Boolean,attribute:"has-log-out",converter:u.booleanishConverter})],exports.PktHeaderService.prototype,"hasLogOut",2);i([t.n({type:Object})],exports.PktHeaderService.prototype,"user",2);i([t.n({type:Array,attribute:"user-menu"})],exports.PktHeaderService.prototype,"userMenu",2);i([t.n({type:Object})],exports.PktHeaderService.prototype,"representing",2);i([d.r()],exports.PktHeaderService.prototype,"isMobile",2);i([d.r()],exports.PktHeaderService.prototype,"isTablet",2);i([d.r()],exports.PktHeaderService.prototype,"openMenu",2);i([d.r()],exports.PktHeaderService.prototype,"isHidden",2);i([d.r()],exports.PktHeaderService.prototype,"componentWidth",2);i([d.r()],exports.PktHeaderService.prototype,"hasSlotContent",2);i([d.r()],exports.PktHeaderService.prototype,"alignSlotRight",2);i([d.r()],exports.PktHeaderService.prototype,"alignSearchRight",2);exports.PktHeaderService=i([t.t("pkt-header-service")],exports.PktHeaderService);var P=Object.defineProperty,C=Object.getOwnPropertyDescriptor,a=(o,e,s,n)=>{for(var r=n>1?void 0:n?C(e,s):e,l=o.length-1,c;l>=0;l--)(c=o[l])&&(r=(n?c(e,s,r):c(r))||r);return n&&r&&P(e,s,r),r};exports.PktHeader=class extends t.PktElement{constructor(){super(),this.defaultSlot=h.e(),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 g.PktSlotController(this,this.defaultSlot)}firstUpdated(e){super.firstUpdated(e),this.emitDeprecationWarnings()}emitDeprecationWarnings(){this.userMenuFooter!==void 0&&console.warn("[PktHeader] userMenuFooter is deprecated. Use userMenu instead."),this.userOptions!==void 0&&console.warn("[PktHeader] userOptions is deprecated. Use userMenu instead.")}get effectiveUserMenu(){const e=this.userMenu||[],s=this.userMenuFooter||[],n=this.userOptions||[];return s.length||n.length?[...e,...n,...s]:this.userMenu}render(){return t.x`
|
|
279
279
|
<pkt-header-service
|
|
280
280
|
service-name=${v.o(this.serviceName)}
|
|
281
281
|
service-link=${v.o(this.serviceLink)}
|
|
@@ -288,6 +288,8 @@
|
|
|
288
288
|
log-out-button-placement=${this.logOutButtonPlacement}
|
|
289
289
|
position=${this.position}
|
|
290
290
|
scroll-behavior=${this.scrollBehavior}
|
|
291
|
+
slot-menu-variant=${this.slotMenuVariant}
|
|
292
|
+
slot-menu-text=${this.slotMenuText}
|
|
291
293
|
.hideLogo=${this.hideLogo}
|
|
292
294
|
.compact=${this.compact}
|
|
293
295
|
.showSearch=${this.showSearch}
|
|
@@ -299,4 +301,4 @@
|
|
|
299
301
|
>
|
|
300
302
|
<div class="pkt-contents" ${h.n(this.defaultSlot)}></div>
|
|
301
303
|
</pkt-header-service>
|
|
302
|
-
`}};a([t.n({type:String,attribute:"service-name"})],exports.PktHeader.prototype,"serviceName",2);a([t.n({type:String,attribute:"service-link"})],exports.PktHeader.prototype,"serviceLink",2);a([t.n({type:String,attribute:"logo-link"})],exports.PktHeader.prototype,"logoLink",2);a([t.n({type:String,attribute:"search-placeholder"})],exports.PktHeader.prototype,"searchPlaceholder",2);a([t.n({type:String,attribute:"search-value"})],exports.PktHeader.prototype,"searchValue",2);a([t.n({type:Number,attribute:"mobile-breakpoint"})],exports.PktHeader.prototype,"mobileBreakpoint",2);a([t.n({type:Number,attribute:"tablet-breakpoint"})],exports.PktHeader.prototype,"tabletBreakpoint",2);a([t.n({type:String,attribute:"opened-menu"})],exports.PktHeader.prototype,"openedMenu",2);a([t.n({type:String,attribute:"log-out-button-placement"})],exports.PktHeader.prototype,"logOutButtonPlacement",2);a([t.n({type:String})],exports.PktHeader.prototype,"position",2);a([t.n({type:String,attribute:"scroll-behavior"})],exports.PktHeader.prototype,"scrollBehavior",2);a([t.n({type:Boolean,attribute:"hide-logo",converter:u})],exports.PktHeader.prototype,"hideLogo",2);a([t.n({type:Boolean,converter:u})],exports.PktHeader.prototype,"compact",2);a([t.n({type:Boolean,attribute:"show-search",converter:u})],exports.PktHeader.prototype,"showSearch",2);a([t.n({type:Boolean,attribute:"can-change-representation",converter:u})],exports.PktHeader.prototype,"canChangeRepresentation",2);a([t.n({type:Boolean,attribute:"has-log-out",converter:u})],exports.PktHeader.prototype,"hasLogOut",2);a([t.n({type:Object})],exports.PktHeader.prototype,"user",2);a([t.n({type:Array,attribute:"user-menu"})],exports.PktHeader.prototype,"userMenu",2);a([t.n({type:Object})],exports.PktHeader.prototype,"representing",2);a([t.n({type:Array,attribute:"user-menu-footer"})],exports.PktHeader.prototype,"userMenuFooter",2);a([t.n({type:Array,attribute:"user-options"})],exports.PktHeader.prototype,"userOptions",2);exports.PktHeader=a([t.t("pkt-header")],exports.PktHeader);exports.formatLastLoggedIn=m;
|
|
304
|
+
`}};a([t.n({type:String,attribute:"service-name"})],exports.PktHeader.prototype,"serviceName",2);a([t.n({type:String,attribute:"service-link"})],exports.PktHeader.prototype,"serviceLink",2);a([t.n({type:String,attribute:"logo-link"})],exports.PktHeader.prototype,"logoLink",2);a([t.n({type:String,attribute:"search-placeholder"})],exports.PktHeader.prototype,"searchPlaceholder",2);a([t.n({type:String,attribute:"search-value"})],exports.PktHeader.prototype,"searchValue",2);a([t.n({type:Number,attribute:"mobile-breakpoint"})],exports.PktHeader.prototype,"mobileBreakpoint",2);a([t.n({type:Number,attribute:"tablet-breakpoint"})],exports.PktHeader.prototype,"tabletBreakpoint",2);a([t.n({type:String,attribute:"opened-menu"})],exports.PktHeader.prototype,"openedMenu",2);a([t.n({type:String,attribute:"log-out-button-placement"})],exports.PktHeader.prototype,"logOutButtonPlacement",2);a([t.n({type:String})],exports.PktHeader.prototype,"position",2);a([t.n({type:String,attribute:"scroll-behavior"})],exports.PktHeader.prototype,"scrollBehavior",2);a([t.n({type:String,attribute:"slot-menu-variant"})],exports.PktHeader.prototype,"slotMenuVariant",2);a([t.n({type:String,attribute:"slot-menu-text"})],exports.PktHeader.prototype,"slotMenuText",2);a([t.n({type:Boolean,attribute:"hide-logo",converter:u.booleanishConverter})],exports.PktHeader.prototype,"hideLogo",2);a([t.n({type:Boolean,converter:u.booleanishConverter})],exports.PktHeader.prototype,"compact",2);a([t.n({type:Boolean,attribute:"show-search",converter:u.booleanishConverter})],exports.PktHeader.prototype,"showSearch",2);a([t.n({type:Boolean,attribute:"can-change-representation",converter:u.booleanishConverter})],exports.PktHeader.prototype,"canChangeRepresentation",2);a([t.n({type:Boolean,attribute:"has-log-out",converter:u.booleanishConverter})],exports.PktHeader.prototype,"hasLogOut",2);a([t.n({type:Object})],exports.PktHeader.prototype,"user",2);a([t.n({type:Array,attribute:"user-menu"})],exports.PktHeader.prototype,"userMenu",2);a([t.n({type:Object})],exports.PktHeader.prototype,"representing",2);a([t.n({type:Array,attribute:"user-menu-footer"})],exports.PktHeader.prototype,"userMenuFooter",2);a([t.n({type:Array,attribute:"user-options"})],exports.PktHeader.prototype,"userOptions",2);exports.PktHeader=a([t.t("pkt-header")],exports.PktHeader);exports.formatLastLoggedIn=m;
|