@warp-ds/elements 2.2.0-next.28 → 2.2.0-next.29

package/dist/packages/button/button.stories.d.ts

@@ -4,6 +4,10 @@ import './index.js';
 declare const args: Partial<WarpButton> & {
     [key: string]: any;
 };
+import "@warp-ds/icons/elements/close-16";
+import "@warp-ds/icons/elements/heart-16";
+import "@warp-ds/icons/elements/chevron-right-16";
+import "@warp-ds/icons/elements/chevron-left-16";
 declare const meta: Meta<typeof args>;
 export default meta;
 type Story = StoryObj<typeof args>;

package/dist/packages/button/button.stories.js

@@ -4,6 +4,10 @@ import { html } from 'lit';
 import { prespread } from '../../.storybook/utilities.js';
 import './index.js';
 const { events, args, argTypes } = getStorybookHelpers('w-button');
+import "@warp-ds/icons/elements/close-16";
+import "@warp-ds/icons/elements/heart-16";
+import "@warp-ds/icons/elements/chevron-right-16";
+import "@warp-ds/icons/elements/chevron-left-16";
 const meta = {
     title: 'Buttons/Button',
     render(args) {
@@ -56,7 +60,35 @@ export const Pill = {
         type: 'button',
     },
     render(args) {
-        return html `<w-button ${spread(prespread(args))}>💙</w-button>`;
+        return html `<w-button ${spread(prespread(args))}>
+        <w-icon-chevron-left-16 style="height: 16px;"></w-icon-chevron-left-16>
+      </w-button>
+      <w-button ${spread(prespread(args))}>
+        <w-icon-close-16 style="height: 16px;"></w-icon-close-16>
+      </w-button>
+      <w-button ${spread(prespread(args))}>
+        <w-icon-heart-16 style="height: 16px;"></w-icon-heart-16>
+      </w-button>
+      <w-button ${spread(prespread(args))}>
+        <w-icon-chevron-right-16
+          style="height: 16px;"
+        ></w-icon-chevron-right-16>
+      </w-button>
+      <br />
+      <w-button ${spread(prespread(args))} small="">
+        <w-icon-chevron-left-16 style="height: 16px;"></w-icon-chevron-left-16>
+      </w-button>
+      <w-button ${spread(prespread(args))} small="">
+        <w-icon-close-16 style="height: 16px;"></w-icon-close-16>
+      </w-button>
+      <w-button ${spread(prespread(args))} small="">
+        <w-icon-heart-16 style="height: 16px;"></w-icon-heart-16>
+      </w-button>
+      <w-button ${spread(prespread(args))} small="">
+        <w-icon-chevron-right-16
+          style="height: 16px;"
+        ></w-icon-chevron-right-16>
+      </w-button>`;
     },
 };
 export const Small = {

package/dist/packages/modal/index.js

@@ -2457,7 +2457,7 @@ var Pe=Object.create;var S=Object.defineProperty;var W=Object.getOwnPropertyDesc
           padding-right: 3.2rem;
         }
       }
-    `];customElements.get("w-modal-footer")||customElements.define("w-modal-footer",C);var re=(r,e)=>({dx:r.left-e.left,dy:r.top-e.top,dw:r.width/e.width,dh:r.height/e.height,first:r,last:e}),oe=({dx:r,dy:e})=>[{transform:`translate(${r}px, ${e}px)`},{transform:"none"}],te={easing:"ease",duration:300};var I=!1,Ue=typeof window!="undefined";if(Ue){let r=window.matchMedia("(prefers-reduced-motion: reduce)"),e=({matches:o})=>I=o;r.addEventListener&&r.addEventListener("change",e),e(r)}var T=class{constructor(e,{animation:o={},keyframes:t,respectReduceMotion:a=!0}={}){O(this,"first");O(this,"last");O(this,"el");this.el=e,this.first={},this.last={},this.userAnimationOptions=o,this.keyframeGenerator=t||oe,this.shouldReduceMotion=a}async when(e){this.prep();let o=await e();return await this.play(),o}prep(){this.first=this.el.getBoundingClientRect()}async play(){if(this.last=this.el.getBoundingClientRect(),!this.el.animate)return;await this.el.animate(this.keyframes,this.animationOptions).finished}get keyframes(){return this.keyframeGenerator(re(this.first,this.last))}get defaults(){return te}get mergedOptions(){return{...this.defaults,...this.userAnimationOptions}}get animationOptions(){return this.shouldReduceMotion?I?{...this.mergedOptions,duration:0}:this.mergedOptions:this.mergedOptions}};var de=Ae(se(),1);var m=r=>typeof r=="string",Qe=r=>typeof r=="function",le=new Map,pe="en";function R(r){return[...Array.isArray(r)?r:[r],pe]}function F(r,e,o){let t=R(r);o||(o="default");let a;if(typeof o=="string")switch(a={day:"numeric",month:"short",year:"numeric"},o){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=o;return B(()=>P("date",t,o),()=>new Intl.DateTimeFormat(t,a)).format(m(e)?new Date(e):e)}function er(r,e,o){let t;if(o||(o="default"),typeof o=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},o){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=o;return F(r,e,t)}function Y(r,e,o){let t=R(r);return B(()=>P("number",t,o),()=>new Intl.NumberFormat(t,o)).format(e)}function ce(r,e,o,{offset:t=0,...a}){var s,l;let i=R(r),n=e?B(()=>P("plural-ordinal",i),()=>new Intl.PluralRules(i,{type:"ordinal"})):B(()=>P("plural-cardinal",i),()=>new Intl.PluralRules(i,{type:"cardinal"}));return(l=(s=a[o])!=null?s:a[n.select(o-t)])!=null?l:a.other}function B(r,e){let o=r(),t=le.get(o);return t||(t=e(),le.set(o,t)),t}function P(r,e,o){let t=e.join("-");return`${r}-${t}-${JSON.stringify(o)}`}var ue=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,be="%__lingui_octothorpe__%",rr=(r,e,o={})=>{let t=e||r,a=n=>typeof n=="object"?n:o[n],i=(n,s)=>{let l=Object.keys(o).length?a("number"):void 0,u=Y(t,n,l);return s.replace(new RegExp(be,"g"),u)};return{plural:(n,s)=>{let{offset:l=0}=s,u=ce(t,!1,n,s);return i(n-l,u)},selectordinal:(n,s)=>{let{offset:l=0}=s,u=ce(t,!0,n,s);return i(n-l,u)},select:or,number:(n,s)=>Y(t,n,a(s)||{style:s}),date:(n,s)=>F(t,n,a(s)||s),time:(n,s)=>er(t,n,a(s)||s)}},or=(r,e)=>{var o;return(o=e[r])!=null?o:e.other};function tr(r,e,o){return(t={},a)=>{let i=rr(e,o,a),n=(l,u=!1)=>Array.isArray(l)?l.reduce((v,L)=>{if(L==="#"&&u)return v+be;if(m(L))return v+L;let[G,f,V]=L,j={};f==="plural"||f==="selectordinal"||f==="select"?Object.entries(V).forEach(([D,Be])=>{j[D]=n(Be,f==="plural"||f==="selectordinal")}):j=V;let M;if(f){let D=i[f];M=D(t[G],j)}else M=t[G];return M==null?v:v+M},""):l,s=n(r);return m(s)&&ue.test(s)?(0,de.unraw)(s):m(s)?s:s?String(s):""}}var ar=Object.defineProperty,ir=(r,e,o)=>e in r?ar(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,nr=(r,e,o)=>(ir(r,typeof e!="symbol"?e+"":e,o),o),$=class{constructor(){nr(this,"_events",{})}on(e,o){var a;var t;return(a=(t=this._events)[e])!=null||(t[e]=[]),this._events[e].push(o),()=>this.removeListener(e,o)}removeListener(e,o){let t=this._getListeners(e);if(!t)return;let a=t.indexOf(o);~a&&t.splice(a,1)}emit(e,...o){let t=this._getListeners(e);t&&t.map(a=>a.apply(this,o))}_getListeners(e){let o=this._events[e];return Array.isArray(o)?o:!1}},sr=Object.defineProperty,lr=(r,e,o)=>e in r?sr(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,x=(r,e,o)=>(lr(r,typeof e!="symbol"?e+"":e,o),o),A=class extends ${constructor(e){var o;super(),x(this,"_locale",""),x(this,"_locales"),x(this,"_localeData",{}),x(this,"_messages",{}),x(this,"_missing"),x(this,"_messageCompiler"),x(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate((o=e.locale)!=null?o:pe,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var e;return(e=this._messages[this._locale])!=null?e:{}}get localeData(){var e;return(e=this._localeData[this._locale])!=null?e:{}}_loadLocaleData(e,o){let t=this._localeData[e];t?Object.assign(t,o):this._localeData[e]=o}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,o){typeof e=="string"?this._loadLocaleData(e,o):Object.keys(e).forEach(t=>this._loadLocaleData(t,e[t])),this.emit("change")}_load(e,o){let t=this._messages[e];t?Object.assign(t,o):this._messages[e]=o}load(e,o){typeof e=="string"&&typeof o=="object"?this._load(e,o):Object.entries(e).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:e,locales:o,messages:t}){this._locale=e,this._locales=o||void 0,this._messages[this._locale]=t,this.emit("change")}activate(e,o){this._locale=e,this._locales=o,this.emit("change")}_(e,o,t){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=t==null?void 0:t.message;e||(e=""),m(e)||(o=e.values||o,a=e.message,e=e.id);let i=this.messages[e],n=i===void 0,s=this._missing;if(s&&n)return Qe(s)?s(this._locale,e):s;n&&this.emit("missing",{id:e,locale:this._locale});let l=i||a||e;return m(l)&&(this._messageCompiler?l=this._messageCompiler(l):console.warn(`Uncompiled message detected! Message:
+    `];customElements.get("w-modal-footer")||customElements.define("w-modal-footer",C);var re=(r,e)=>({dx:r.left-e.left,dy:r.top-e.top,dw:r.width/e.width,dh:r.height/e.height,first:r,last:e}),oe=({dx:r,dy:e})=>[{transform:`translate(${r}px, ${e}px)`},{transform:"none"}],te={easing:"ease",duration:300};var I=!1,Ue=typeof window!="undefined";if(Ue){let r=window.matchMedia("(prefers-reduced-motion: reduce)"),e=({matches:o})=>I=o;r.addEventListener&&r.addEventListener("change",e),e(r)}var T=class{constructor(e,{animation:o={},keyframes:t,respectReduceMotion:a=!0}={}){O(this,"first");O(this,"last");O(this,"el");this.el=e,this.first={},this.last={},this.userAnimationOptions=o,this.keyframeGenerator=t||oe,this.shouldReduceMotion=a}async when(e){this.prep();let o=await e();return await this.play(),o}prep(){this.first=this.el.getBoundingClientRect()}async play(){if(this.last=this.el.getBoundingClientRect(),!this.el.animate)return;await this.el.animate(this.keyframes,this.animationOptions).finished}get keyframes(){return this.keyframeGenerator(re(this.first,this.last))}get defaults(){return te}get mergedOptions(){return{...this.defaults,...this.userAnimationOptions}}get animationOptions(){return this.shouldReduceMotion?I?{...this.mergedOptions,duration:0}:this.mergedOptions:this.mergedOptions}};var de=Ae(se(),1);var m=r=>typeof r=="string",Qe=r=>typeof r=="function",le=new Map,pe="en";function R(r){return[...Array.isArray(r)?r:[r],pe]}function F(r,e,o){let t=R(r);o||(o="default");let a;if(typeof o=="string")switch(a={day:"numeric",month:"short",year:"numeric"},o){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=o;return B(()=>P("date",t,o),()=>new Intl.DateTimeFormat(t,a)).format(m(e)?new Date(e):e)}function er(r,e,o){let t;if(o||(o="default"),typeof o=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},o){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=o;return F(r,e,t)}function Y(r,e,o){let t=R(r);return B(()=>P("number",t,o),()=>new Intl.NumberFormat(t,o)).format(e)}function ce(r,e,o,{offset:t=0,...a}){var s,l;let i=R(r),n=e?B(()=>P("plural-ordinal",i),()=>new Intl.PluralRules(i,{type:"ordinal"})):B(()=>P("plural-cardinal",i),()=>new Intl.PluralRules(i,{type:"cardinal"}));return(l=(s=a[o])!=null?s:a[n.select(o-t)])!=null?l:a.other}function B(r,e){let o=r(),t=le.get(o);return t||(t=e(),le.set(o,t)),t}function P(r,e,o){let t=e.join("-");return`${r}-${t}-${JSON.stringify(o)}`}var ue=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,ge="%__lingui_octothorpe__%",rr=(r,e,o={})=>{let t=e||r,a=n=>typeof n=="object"?n:o[n],i=(n,s)=>{let l=Object.keys(o).length?a("number"):void 0,u=Y(t,n,l);return s.replace(new RegExp(ge,"g"),u)};return{plural:(n,s)=>{let{offset:l=0}=s,u=ce(t,!1,n,s);return i(n-l,u)},selectordinal:(n,s)=>{let{offset:l=0}=s,u=ce(t,!0,n,s);return i(n-l,u)},select:or,number:(n,s)=>Y(t,n,a(s)||{style:s}),date:(n,s)=>F(t,n,a(s)||s),time:(n,s)=>er(t,n,a(s)||s)}},or=(r,e)=>{var o;return(o=e[r])!=null?o:e.other};function tr(r,e,o){return(t={},a)=>{let i=rr(e,o,a),n=(l,u=!1)=>Array.isArray(l)?l.reduce((v,L)=>{if(L==="#"&&u)return v+ge;if(m(L))return v+L;let[G,f,V]=L,j={};f==="plural"||f==="selectordinal"||f==="select"?Object.entries(V).forEach(([D,Be])=>{j[D]=n(Be,f==="plural"||f==="selectordinal")}):j=V;let M;if(f){let D=i[f];M=D(t[G],j)}else M=t[G];return M==null?v:v+M},""):l,s=n(r);return m(s)&&ue.test(s)?(0,de.unraw)(s):m(s)?s:s?String(s):""}}var ar=Object.defineProperty,ir=(r,e,o)=>e in r?ar(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,nr=(r,e,o)=>(ir(r,typeof e!="symbol"?e+"":e,o),o),$=class{constructor(){nr(this,"_events",{})}on(e,o){var a;var t;return(a=(t=this._events)[e])!=null||(t[e]=[]),this._events[e].push(o),()=>this.removeListener(e,o)}removeListener(e,o){let t=this._getListeners(e);if(!t)return;let a=t.indexOf(o);~a&&t.splice(a,1)}emit(e,...o){let t=this._getListeners(e);t&&t.map(a=>a.apply(this,o))}_getListeners(e){let o=this._events[e];return Array.isArray(o)?o:!1}},sr=Object.defineProperty,lr=(r,e,o)=>e in r?sr(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,x=(r,e,o)=>(lr(r,typeof e!="symbol"?e+"":e,o),o),A=class extends ${constructor(e){var o;super(),x(this,"_locale",""),x(this,"_locales"),x(this,"_localeData",{}),x(this,"_messages",{}),x(this,"_missing"),x(this,"_messageCompiler"),x(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate((o=e.locale)!=null?o:pe,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var e;return(e=this._messages[this._locale])!=null?e:{}}get localeData(){var e;return(e=this._localeData[this._locale])!=null?e:{}}_loadLocaleData(e,o){let t=this._localeData[e];t?Object.assign(t,o):this._localeData[e]=o}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,o){typeof e=="string"?this._loadLocaleData(e,o):Object.keys(e).forEach(t=>this._loadLocaleData(t,e[t])),this.emit("change")}_load(e,o){let t=this._messages[e];t?Object.assign(t,o):this._messages[e]=o}load(e,o){typeof e=="string"&&typeof o=="object"?this._load(e,o):Object.entries(e).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:e,locales:o,messages:t}){this._locale=e,this._locales=o||void 0,this._messages[this._locale]=t,this.emit("change")}activate(e,o){this._locale=e,this._locales=o,this.emit("change")}_(e,o,t){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=t==null?void 0:t.message;e||(e=""),m(e)||(o=e.values||o,a=e.message,e=e.id);let i=this.messages[e],n=i===void 0,s=this._missing;if(s&&n)return Qe(s)?s(this._locale,e):s;n&&this.emit("missing",{id:e,locale:this._locale});let l=i||a||e;return m(l)&&(this._messageCompiler?l=this._messageCompiler(l):console.warn(`Uncompiled message detected! Message:
 
 > ${l}
 
@@ -2465,7 +2465,7 @@ That means you use raw catalog or your catalog doesn't have a translation for th
 ICU features such as interpolation and plurals will not work properly for that message. 
 
 Please compile your catalog first. 
-`)),m(l)&&ue.test(l)?JSON.parse(`"${l}"`):m(l)?l:tr(l,this._locale,this._locales)(o,t==null?void 0:t.formats)}date(e,o){return F(this._locales||this._locale,e,o)}number(e,o){return Y(this._locales||this._locale,e,o)}};function cr(r={}){return new A(r)}var c=cr();import{css as $r,html as J,LitElement as Ar,nothing as Me}from"lit";import{property as X,query as Rr,state as Fr}from"lit/decorators.js";import{LitElement as dr}from"lit";import{unsafeStatic as pr,html as ur}from"lit/static-html.js";var br=JSON.parse('{"icon.title.arrow-left":["Pil som peker mot venstre"]}'),gr=JSON.parse('{"icon.title.arrow-left":["Leftward-pointing arrow"]}'),hr=JSON.parse('{"icon.title.arrow-left":["Vasemmalle osoittava nuoli"]}'),mr=JSON.parse('{"icon.title.arrow-left":["Pil til venstre"]}'),vr=JSON.parse('{"icon.title.arrow-left":["Pil som pekar v\xE4nster"]}'),ge=["en","nb","fi","da","sv"],he="en",fr=()=>{var r;let e;switch((r=process==null?void 0:process.env)==null?void 0:r.NMP_BRAND){case"FINN":e="nb";break;case"TORI":e="fi";break;case"BLOCKET":e="sv";break;case"DBA":e="da";break;default:e="en"}return e},me=()=>{var r;let e=(r=document==null?void 0:document.location)==null?void 0:r.hostname;return e!=null&&e.includes("finn")?"nb":e.includes("tori")?"fi":e.includes("blocket")?"sv":e.includes("dba")?"da":he},H=r=>ge.find(e=>r===e||r.toLowerCase().includes(e))||me();function wr(){var r;if(typeof window=="undefined"){let e=fr();return H(e)}try{let e=(r=document==null?void 0:document.documentElement)==null?void 0:r.lang,o=me();return ge.includes(e)?H(e!=null?e:o):(console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname"),H(o))}catch(e){return console.warn("could not detect locale, falling back to source locale",e),he}}var xr=(r,e,o,t,a,i)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?i:e,kr=(r,e,o,t,a)=>{let i=wr(),n=xr(i,r,e,o,t,a);c.load(i,n),c.activate(i)};kr(gr,br,hr,mr,vr);var yr=class extends dr{render(){let r=c.t({message:"Leftward-pointing arrow",id:"icon.title.arrow-left",comment:"Title for table arrow left icon"});return ur`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-arrow-left-16-part">${pr(`<title>${r}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5.222 8h6.667"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.444 11.75 4.111 8l3.333-3.75"></path></svg>`}};customElements.get("w-icon-arrow-left-16")||customElements.define("w-icon-arrow-left-16",yr);import{LitElement as Er}from"lit";import{unsafeStatic as _r,html as Cr}from"lit/static-html.js";var zr=JSON.parse('{"icon.title.close":["Kryss"]}'),Lr=JSON.parse('{"icon.title.close":["Cross"]}'),Mr=JSON.parse('{"icon.title.close":["Rasti"]}'),Sr=JSON.parse('{"icon.title.close":["Kryds"]}'),Or=JSON.parse('{"icon.title.close":["Kryss"]}'),ve=["en","nb","fi","da","sv"],fe="en",Tr=()=>{var r;let e;switch((r=process==null?void 0:process.env)==null?void 0:r.NMP_BRAND){case"FINN":e="nb";break;case"TORI":e="fi";break;case"BLOCKET":e="sv";break;case"DBA":e="da";break;default:e="en"}return e},we=()=>{var r;let e=(r=document==null?void 0:document.location)==null?void 0:r.hostname;return e!=null&&e.includes("finn")?"nb":e.includes("tori")?"fi":e.includes("blocket")?"sv":e.includes("dba")?"da":fe},U=r=>ve.find(e=>r===e||r.toLowerCase().includes(e))||we();function Nr(){var r;if(typeof window=="undefined"){let e=Tr();return U(e)}try{let e=(r=document==null?void 0:document.documentElement)==null?void 0:r.lang,o=we();return ve.includes(e)?U(e!=null?e:o):(console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname"),U(o))}catch(e){return console.warn("could not detect locale, falling back to source locale",e),fe}}var Br=(r,e,o,t,a,i)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?i:e,Pr=(r,e,o,t,a)=>{let i=Nr(),n=Br(i,r,e,o,t,a);c.load(i,n),c.activate(i)};Pr(Lr,zr,Mr,Sr,Or);var jr=class extends Er{render(){let r=c.t({message:"Cross",id:"icon.title.close",comment:"Title for close icon"});return Cr`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-close-16-part">${_r(`<title>${r}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m12.5 3.5-9 9m0-9 9 9"></path></svg>`}};customElements.get("w-icon-close-16")||customElements.define("w-icon-close-16",jr);var Dr=["en","nb","fi","da","sv"],ke="en",xe=r=>Dr.find(e=>r===e||r.toLowerCase().includes(e))||ke;function Ir(){if(typeof window=="undefined"){let r=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return xe(r)}try{let r=document.documentElement.lang;return xe(r)}catch(r){return console.warn("could not detect locale, falling back to source locale",r),ke}}var Yr=(r,e,o,t,a,i)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?i:e,ye=(r,e,o,t,a)=>{let i=Ir(),n=Yr(i,r,e,o,t,a);c.load(i,n),c.activate(i)};var Ee=JSON.parse('{"modal.aria.back":["Tilbage"],"modal.aria.close":["Luk"]}');var _e=JSON.parse('{"modal.aria.back":["Back"],"modal.aria.close":["Close"]}');var Ce=JSON.parse('{"modal.aria.back":["Takaisin"],"modal.aria.close":["Sulje"]}');var ze=JSON.parse('{"modal.aria.back":["Tilbake"],"modal.aria.close":["Lukk"]}');var Le=JSON.parse('{"modal.aria.back":["Tillbaka"],"modal.aria.close":["St\xE4ng"]}');var g=class extends E(Ar){constructor(){super();this._hasTopContent=!1;ye(_e,ze,Ce,Ee,Le)}render(){return J`
+`)),m(l)&&ue.test(l)?JSON.parse(`"${l}"`):m(l)?l:tr(l,this._locale,this._locales)(o,t==null?void 0:t.formats)}date(e,o){return F(this._locales||this._locale,e,o)}number(e,o){return Y(this._locales||this._locale,e,o)}};function cr(r={}){return new A(r)}var c=cr();import{css as $r,html as J,LitElement as Ar,nothing as Me}from"lit";import{property as X,query as Rr,state as Fr}from"lit/decorators.js";import{LitElement as dr}from"lit";import{unsafeStatic as pr,html as ur}from"lit/static-html.js";var gr=JSON.parse('{"icon.title.arrow-left":["Pil som peker mot venstre"]}'),br=JSON.parse('{"icon.title.arrow-left":["Leftward-pointing arrow"]}'),hr=JSON.parse('{"icon.title.arrow-left":["Vasemmalle osoittava nuoli"]}'),mr=JSON.parse('{"icon.title.arrow-left":["Pil til venstre"]}'),vr=JSON.parse('{"icon.title.arrow-left":["Pil som pekar v\xE4nster"]}'),be=["en","nb","fi","da","sv"],he="en",fr=()=>{var r;let e;switch((r=process==null?void 0:process.env)==null?void 0:r.NMP_BRAND){case"FINN":e="nb";break;case"TORI":e="fi";break;case"BLOCKET":e="sv";break;case"DBA":e="da";break;default:e="en"}return e},me=()=>{var r;let e=(r=document==null?void 0:document.location)==null?void 0:r.hostname;return e!=null&&e.includes("finn")?"nb":e.includes("tori")?"fi":e.includes("blocket")?"sv":e.includes("dba")?"da":he},H=r=>be.find(e=>r===e||r.toLowerCase().includes(e))||me();function wr(){var r;if(typeof window=="undefined"){let e=fr();return H(e)}try{let e=(r=document==null?void 0:document.documentElement)==null?void 0:r.lang,o=me();return be.includes(e)?H(e!=null?e:o):(console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname"),H(o))}catch(e){return console.warn("could not detect locale, falling back to source locale",e),he}}var xr=(r,e,o,t,a,i)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?i:e,kr=(r,e,o,t,a)=>{let i=wr(),n=xr(i,r,e,o,t,a);c.load(i,n),c.activate(i)};kr(br,gr,hr,mr,vr);var yr=class extends dr{render(){let r=c.t({message:"Leftward-pointing arrow",id:"icon.title.arrow-left",comment:"Title for table arrow left icon"});return ur`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-arrow-left-16-part">${pr(`<title>${r}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M5.222 8h6.667"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.444 11.75 4.111 8l3.333-3.75"></path></svg>`}};customElements.get("w-icon-arrow-left-16")||customElements.define("w-icon-arrow-left-16",yr);import{LitElement as Er}from"lit";import{unsafeStatic as _r,html as Cr}from"lit/static-html.js";var zr=JSON.parse('{"icon.title.close":["Kryss"]}'),Lr=JSON.parse('{"icon.title.close":["Cross"]}'),Mr=JSON.parse('{"icon.title.close":["Rasti"]}'),Sr=JSON.parse('{"icon.title.close":["Kryds"]}'),Or=JSON.parse('{"icon.title.close":["Kryss"]}'),ve=["en","nb","fi","da","sv"],fe="en",Tr=()=>{var r;let e;switch((r=process==null?void 0:process.env)==null?void 0:r.NMP_BRAND){case"FINN":e="nb";break;case"TORI":e="fi";break;case"BLOCKET":e="sv";break;case"DBA":e="da";break;default:e="en"}return e},we=()=>{var r;let e=(r=document==null?void 0:document.location)==null?void 0:r.hostname;return e!=null&&e.includes("finn")?"nb":e.includes("tori")?"fi":e.includes("blocket")?"sv":e.includes("dba")?"da":fe},U=r=>ve.find(e=>r===e||r.toLowerCase().includes(e))||we();function Nr(){var r;if(typeof window=="undefined"){let e=Tr();return U(e)}try{let e=(r=document==null?void 0:document.documentElement)==null?void 0:r.lang,o=we();return ve.includes(e)?U(e!=null?e:o):(console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname"),U(o))}catch(e){return console.warn("could not detect locale, falling back to source locale",e),fe}}var Br=(r,e,o,t,a,i)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?i:e,Pr=(r,e,o,t,a)=>{let i=Nr(),n=Br(i,r,e,o,t,a);c.load(i,n),c.activate(i)};Pr(Lr,zr,Mr,Sr,Or);var jr=class extends Er{render(){let r=c.t({message:"Cross",id:"icon.title.close",comment:"Title for close icon"});return Cr`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-close-16-part">${_r(`<title>${r}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m12.5 3.5-9 9m0-9 9 9"></path></svg>`}};customElements.get("w-icon-close-16")||customElements.define("w-icon-close-16",jr);var Dr=["en","nb","fi","da","sv"],ke="en",xe=r=>Dr.find(e=>r===e||r.toLowerCase().includes(e))||ke;function Ir(){if(typeof window=="undefined"){let r=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return xe(r)}try{let r=document.documentElement.lang;return xe(r)}catch(r){return console.warn("could not detect locale, falling back to source locale",r),ke}}var Yr=(r,e,o,t,a,i)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?i:e,ye=(r,e,o,t,a)=>{let i=Ir(),n=Yr(i,r,e,o,t,a);c.load(i,n),c.activate(i)};var Ee=JSON.parse('{"modal.aria.back":["Tilbage"],"modal.aria.close":["Luk"]}');var _e=JSON.parse('{"modal.aria.back":["Back"],"modal.aria.close":["Close"]}');var Ce=JSON.parse('{"modal.aria.back":["Takaisin"],"modal.aria.close":["Sulje"]}');var ze=JSON.parse('{"modal.aria.back":["Tilbake"],"modal.aria.close":["Lukk"]}');var Le=JSON.parse('{"modal.aria.back":["Tillbaka"],"modal.aria.close":["St\xE4ng"]}');var b=class extends E(Ar){constructor(){super();this._hasTopContent=!1;ye(_e,ze,Ce,Ee,Le)}render(){return J`
       <div class="header">
         <slot name="top" @slotchange=${this.handleTopSlotChange}></slot>
         <div class="${this._hasTopContent?"":"header-title-bar"}">
@@ -2480,13 +2480,16 @@ Please compile your catalog first.
           class="header-button header-button-left"
           @click="${this.emitBack}">
           <w-icon-arrow-left-16 style="display: flex;"></w-icon-arrow-left-16>
-        </button>`:Me}get closeButton(){return this.noClose?Me:J`<button
-      type="button"
-      aria-label="${c._({id:"modal.aria.close",message:"Close",comment:"Aria label for the close button in modal"})}"
-      class="header-button ${this._hasTopContent?"header-close-button-on-image":"header-close-button"}"
-      @click="${this.close}">
-      <w-icon-close-16 style="display: flex;"></w-icon-close-16>
-    </button>`}emitBack(){this.dispatchEvent(new CustomEvent("backClicked",{bubbles:!0,composed:!0}))}handleTopSlotChange(o){let t=o.target.assignedElements({flatten:!0});this._hasTopContent=!!t.length}};g.styles=[k,$r`
+        </button>`:Me}get closeButton(){return this.noClose?Me:J`<div class="header-close-button-container">
+        <w-button
+            type="button"
+            aria-label="${c._({id:"modal.aria.close",message:"Close",comment:"Aria label for the close button in modal"})}"
+            variant="pill"
+            small=""
+            @click="${this.close}">
+                <w-icon-close-16 style="display: flex;"></w-icon-close-16>
+        </w-button>
+    </div>`}emitBack(){this.dispatchEvent(new CustomEvent("backClicked",{bubbles:!0,composed:!0}))}handleTopSlotChange(o){let t=o.target.assignedElements({flatten:!0});this._hasTopContent=!!t.length}};b.styles=[k,$r`
       .header {
         position: relative;
         padding-bottom: 0.8rem;
@@ -2559,30 +2562,10 @@ Please compile your catalog first.
       .header-button-left:active {
         background-color: var(--w-color-button-pill-background-active);
       }
-      .header-close-button {
-        background-color: transparent;
-        color: var(--w-s-color-icon);
-        margin-right: -0.8rem;
-      }
-      .header-close-button:hover {
-        background-color: var(--w-color-button-pill-background-hover);
-      }
-      .header-close-button:active {
-        background-color: var(--w-color-button-pill-background-active);
-      }
-      .header-close-button-on-image {
-        background-color: transparent;
-        color: var(--w-s-color-text-inverted);
-        right: 0.8rem;
-        top: 0.8rem;
+      .header-close-button-container {
         position: absolute;
-        z-index: 10;
-      }
-      .header-close-button-on-image:hover {
-        background-color: var(--w-color-button-pill-background-hover);
-      }
-      .header-close-button-on-image:active {
-        background-color: var(--w-color-button-pill-background-active);
+        right: 2rem;
+        top: 2.4rem;
       }
       @media (min-width: 480px) {
         .header-title-bar {
@@ -2599,7 +2582,7 @@ Please compile your catalog first.
           min-width: 32px;
         }
       }
-    `],p([X({type:String})],g.prototype,"title",2),p([X({type:Boolean})],g.prototype,"back",2),p([X({type:Boolean,attribute:"no-close"})],g.prototype,"noClose",2),p([Fr()],g.prototype,"_hasTopContent",2),p([Rr(".title-el")],g.prototype,"titleEl",2);customElements.get("w-modal-header")||customElements.define("w-modal-header",g);import{css as Qr,html as eo,LitElement as ro}from"lit";import{property as q,query as K}from"lit/decorators.js";var z=[],Z={documentElement:{},body:{}},Hr=Object.freeze({documentElement:{"scrollbar-gutter":"stable"},body:{overflow:"hidden",position:"relative",height:"100%"}}),Se=r=>{var e;r.touches.length>1||((e=r.preventDefault)==null||e.call(r))},Ur=r=>([e,o])=>{Z[r][e]=document[r].style[e],document[r].style[e]=o},Jr=()=>Object.entries(Hr).forEach(([r,e])=>{Object.entries(e).forEach(Ur(r))}),Xr=r=>([e,o])=>{document[r].style[e]=Z[r][e]},Zr=()=>Object.entries(Z).forEach(([r,e])=>{Object.entries(e).forEach(Xr(r))}),qr=r=>r.scrollHeight-Math.abs(r.scrollTop)===r.clientHeight;function Kr(r){let e=-1,o=t=>{if(t.targetTouches.length!==1)return;let a=t.targetTouches[0].clientY-e;return r.scrollTop===0&&a>0||qr(r)&&a<0?Se(t):(t.stopPropagation(),!0)};r.ontouchstart=t=>{t.targetTouches.length===1&&(e=t.targetTouches[0].clientY)},r.ontouchmove=o}function Gr(r){r.ontouchstart=null,r.ontouchmove=null}var Oe=r=>()=>document[r?"addEventListener":"removeEventListener"]("touchmove",Se,{passive:!1}),Vr=Oe(!0),Wr=Oe();function Te(r){if(!r)throw Error("Could not run setup, an element must be provided");z.some(e=>e===r)||(z.length||(Jr(),Vr()),Kr(r),z.push(r))}function Ne(){z.forEach(Gr),Wr(),Zr(),z=[]}var b=class extends _(ro){constructor(){super(),this.interceptEscape=this.interceptEscape.bind(this),this.closeOnBackdropClick=this.closeOnBackdropClick.bind(this),this.eventPreventer=this.eventPreventer.bind(this),this.modifyBorderRadius=this.modifyBorderRadius.bind(this)}async open(){this.dialogEl.showModal(),this.handleListeners(),Te(this.contentEl),await this.updateComplete,this.dispatchEvent(new CustomEvent("shown",{bubbles:!0,composed:!0}))}close(){this.handleListeners("removeEventListener"),this.dialogEl.classList.add("close"),this.dialogEl.addEventListener("animationend",async()=>{this.dialogEl.classList.remove("close"),this.dialogEl.close(),Ne(),await this.updateComplete,this.dispatchEvent(new CustomEvent("hidden",{bubbles:!0,composed:!0}))},{once:!0})}render(){return eo`
+    `],p([X({type:String})],b.prototype,"title",2),p([X({type:Boolean})],b.prototype,"back",2),p([X({type:Boolean,attribute:"no-close"})],b.prototype,"noClose",2),p([Fr()],b.prototype,"_hasTopContent",2),p([Rr(".title-el")],b.prototype,"titleEl",2);customElements.get("w-modal-header")||customElements.define("w-modal-header",b);import{css as Qr,html as eo,LitElement as ro}from"lit";import{property as q,query as K}from"lit/decorators.js";var z=[],Z={documentElement:{},body:{}},Hr=Object.freeze({documentElement:{"scrollbar-gutter":"stable"},body:{overflow:"hidden",position:"relative",height:"100%"}}),Se=r=>{var e;r.touches.length>1||((e=r.preventDefault)==null||e.call(r))},Ur=r=>([e,o])=>{Z[r][e]=document[r].style[e],document[r].style[e]=o},Jr=()=>Object.entries(Hr).forEach(([r,e])=>{Object.entries(e).forEach(Ur(r))}),Xr=r=>([e,o])=>{document[r].style[e]=Z[r][e]},Zr=()=>Object.entries(Z).forEach(([r,e])=>{Object.entries(e).forEach(Xr(r))}),qr=r=>r.scrollHeight-Math.abs(r.scrollTop)===r.clientHeight;function Kr(r){let e=-1,o=t=>{if(t.targetTouches.length!==1)return;let a=t.targetTouches[0].clientY-e;return r.scrollTop===0&&a>0||qr(r)&&a<0?Se(t):(t.stopPropagation(),!0)};r.ontouchstart=t=>{t.targetTouches.length===1&&(e=t.targetTouches[0].clientY)},r.ontouchmove=o}function Gr(r){r.ontouchstart=null,r.ontouchmove=null}var Oe=r=>()=>document[r?"addEventListener":"removeEventListener"]("touchmove",Se,{passive:!1}),Vr=Oe(!0),Wr=Oe();function Te(r){if(!r)throw Error("Could not run setup, an element must be provided");z.some(e=>e===r)||(z.length||(Jr(),Vr()),Kr(r),z.push(r))}function Ne(){z.forEach(Gr),Wr(),Zr(),z=[]}var g=class extends _(ro){constructor(){super(),this.interceptEscape=this.interceptEscape.bind(this),this.closeOnBackdropClick=this.closeOnBackdropClick.bind(this),this.eventPreventer=this.eventPreventer.bind(this),this.modifyBorderRadius=this.modifyBorderRadius.bind(this)}async open(){this.dialogEl.showModal(),this.handleListeners(),Te(this.contentEl),await this.updateComplete,this.dispatchEvent(new CustomEvent("shown",{bubbles:!0,composed:!0}))}close(){this.handleListeners("removeEventListener"),this.dialogEl.classList.add("close"),this.dialogEl.addEventListener("animationend",async()=>{this.dialogEl.classList.remove("close"),this.dialogEl.close(),Ne(),await this.updateComplete,this.dispatchEvent(new CustomEvent("hidden",{bubbles:!0,composed:!0}))},{once:!0})}render(){return eo`
       <dialog class="dialog-el">
         <div class="dialog-inner-el">
           <slot name="header" @slotchange="${this.handleSlotChange}"></slot>
@@ -2609,7 +2592,7 @@ Please compile your catalog first.
           <slot name="footer" @slotchange="${this.handleSlotChange}"></slot>
         </div>
       </dialog>
-    `}updated(e){e.has("show")&&this[this.show?"open":"close"]()}handleListeners(e="addEventListener"){document[e]("keydown",this.interceptEscape),this.ignoreBackdropClicks||this.dialogEl[e]("mousedown",this.closeOnBackdropClick),this.dialogEl[e]("close",this.eventPreventer),this.dialogEl[e]("cancel",this.eventPreventer),this.dialogInnerEl[e]("transitionend",this.modifyBorderRadius)}eventPreventer(e){e.preventDefault()}closeOnBackdropClick(e){this.dialogEl===e.target&&this.close()}interceptEscape(e){e.key==="Escape"&&(e.preventDefault(),this.close())}modifyBorderRadius(){this.dialogInnerEl.scrollHeight*1.02>innerHeight?this.dialogInnerEl.style.borderRadius="0px":this.dialogInnerEl.style.borderRadius=null}};b.styles=[k,Qr`
+    `}updated(e){e.has("show")&&this[this.show?"open":"close"]()}handleListeners(e="addEventListener"){document[e]("keydown",this.interceptEscape),this.ignoreBackdropClicks||this.dialogEl[e]("mousedown",this.closeOnBackdropClick),this.dialogEl[e]("close",this.eventPreventer),this.dialogEl[e]("cancel",this.eventPreventer),this.dialogInnerEl[e]("transitionend",this.modifyBorderRadius)}eventPreventer(e){e.preventDefault()}closeOnBackdropClick(e){this.dialogEl===e.target&&this.close()}interceptEscape(e){e.key==="Escape"&&(e.preventDefault(),this.close())}modifyBorderRadius(){this.dialogInnerEl.scrollHeight*1.02>innerHeight?this.dialogInnerEl.style.borderRadius="0px":this.dialogInnerEl.style.borderRadius=null}};g.styles=[k,Qr`
       .dialog-el {
         --w-modal-translate-distance: 100%;
         --w-modal-max-height: 80%;
@@ -2730,5 +2713,5 @@ Please compile your catalog first.
           background: transparent;
         }
       }
-    `],p([q({type:Boolean})],b.prototype,"show",2),p([q({type:String,attribute:"content-id"})],b.prototype,"contentId",2),p([q({type:Boolean,attribute:"ignore-backdrop-clicks"})],b.prototype,"ignoreBackdropClicks",2),p([K(".dialog-el")],b.prototype,"dialogEl",2),p([K(".dialog-inner-el")],b.prototype,"dialogInnerEl",2),p([K(".content-el")],b.prototype,"contentEl",2);customElements.get("w-modal")||customElements.define("w-modal",b);export{E as ModalCanCloseMixin,_ as ModalProvidesCanCloseToSlotsMixin,b as WarpModal,C as WarpModalFooter,g as WarpModalHeader};
+    `],p([q({type:Boolean})],g.prototype,"show",2),p([q({type:String,attribute:"content-id"})],g.prototype,"contentId",2),p([q({type:Boolean,attribute:"ignore-backdrop-clicks"})],g.prototype,"ignoreBackdropClicks",2),p([K(".dialog-el")],g.prototype,"dialogEl",2),p([K(".dialog-inner-el")],g.prototype,"dialogInnerEl",2),p([K(".content-el")],g.prototype,"contentEl",2);customElements.get("w-modal")||customElements.define("w-modal",g);export{E as ModalCanCloseMixin,_ as ModalProvidesCanCloseToSlotsMixin,g as WarpModal,C as WarpModalFooter,b as WarpModalHeader};
 //# sourceMappingURL=index.js.map