@warp-ds/elements 2.10.0-next.14 → 2.10.0-next.15

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

@@ -3,11 +3,11 @@ import React from 'react';
 import { Button } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "type" | "name" | "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "commandfor" | "command" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "type" | "name" | "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "command" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "commandfor" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
         fullWidth?: boolean;
         iconOnly?: boolean;
     } & React.RefAttributes<import("./button").WarpButton>): React.JSX.Element;
-    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "type" | "name" | "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "commandfor" | "command" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "type" | "name" | "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "command" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "commandfor" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
         fullWidth?: boolean;
         iconOnly?: boolean;
     } & React.RefAttributes<import("./button").WarpButton>>;

package/dist/packages/button/button.test.js

@@ -48,7 +48,6 @@ test('calling focus on w-button focuses the button inside the shadow root', asyn
     const component = html `<w-button>This is a button</w-button>`;
     const page = render(component);
     await expect.element(page.getByRole('button')).toBeVisible();
-    // @ts-expect-error if we import and type using WarpButton, the test fails which is nonsense so I've opted to simply ignore this error.
     page.container.querySelector('w-button').focus();
     await vi.waitFor(() => page.container.querySelector(':focus').tagName === 'BUTTON');
 });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { WarpButton } from './button.js';
-export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpButton>, "value" | "form" | "small" | "type" | "name" | "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "commandfor" | "command" | "_handleButtonClick"> & {} & Partial<Omit<WarpButton, keyof HTMLElement>> & React.RefAttributes<WarpButton>, "ref">, "full-width" | "icon-only"> & {
+export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpButton>, "value" | "form" | "small" | "type" | "name" | "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "command" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "commandfor" | "_handleButtonClick"> & {} & Partial<Omit<WarpButton, keyof HTMLElement>> & React.RefAttributes<WarpButton>, "ref">, "full-width" | "icon-only"> & {
     fullWidth?: boolean;
     iconOnly?: boolean;
 } & React.RefAttributes<WarpButton>>;

package/dist/packages/datepicker/datepicker.js

@@ -31,7 +31,7 @@ Please compile your catalog first.
   --w-icon-size: 32px;
 }
 
-`;var et=new Map,Zn='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function ei(r,t={}){let e=t.responseParser??(o=>o.text());return et.has(r)||et.set(r,fetch(r).then(e)),et.get(r)}var A=class extends Bn{constructor(){super(...arguments);this.locale=document.documentElement.lang||"en";this.svg=null}async fetchIcon(e){let o=`https://assets.finn.no/pkg/eikons/v1/${this.locale}/${e}.svg`;try{let a=await ei(o);return new DOMParser().parseFromString(a,"text/html").body.querySelector("svg")}catch{return null}}firstUpdated(){this.loadIcon()}updated(e){(e.has("name")||e.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let e=await this.fetchIcon(this.name);e||(e=new DOMParser().parseFromString(Zn,"text/html").body.firstElementChild),this.svg=e}render(){let e=this.size||"medium",o=this.name||"",a={"w-icon":!0,"w-icon--s":e==="small","w-icon--m":e==="medium","w-icon--l":e==="large"},n=typeof e=="string"&&e.endsWith("px")?`--w-icon-size: ${e};`:"";return Gn`<div class="${Un(a)}" style="${n}" part="w-${o.toLowerCase()}">${this.svg}</div>`}};A.styles=[Pr],k([Ze({type:String,reflect:!0})],A.prototype,"name",2),k([Ze({type:String,reflect:!0})],A.prototype,"size",2),k([Ze({type:String,reflect:!0,useDefault:!0})],A.prototype,"locale",2),k([Jn()],A.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",A);var ti=["en","nb","fi","da","sv"],tt="en",Ce=r=>ti.find(t=>r===t||r.toLowerCase().includes(t))||tt;function R(){if(typeof window>"u"){let r=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return Ce(r)}try{let r=Cr(document);if(r)return Ce(r);let t=ni();if(t)return Ce(t);let e=Cr(Er());return e?Ce(e):tt}catch(r){return console.warn("could not detect locale, falling back to source locale",r),tt}}var Wr=(r,t,e,o,a)=>{W.load("en",r),W.load("nb",t),W.load("fi",e),W.load("da",o),W.load("sv",a);let n=R();W.activate(n),Fr(),oi()},ri="warp-i18n-change";function Fr(){typeof window>"u"||window.dispatchEvent(new Event(ri))}var Or=!1;function oi(){if(Or||typeof window>"u"||!document?.documentElement)return;Or=!0;let r=()=>{let a=R();W.locale!==a&&(W.activate(a),Fr())},t=new MutationObserver(a=>{for(let n of a)if(n.type==="attributes"&&n.attributeName==="lang"){r();break}});t.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let e=Er();e&&e.documentElement&&e!==document&&t.observe(e.documentElement,{attributes:!0,attributeFilter:["lang"]});let o=ai();o&&t.observe(o,{attributes:!0,attributeFilter:["lang"]})}function Er(){try{return window.parent?.document??null}catch{return null}}function Cr(r){try{return r?.documentElement?.lang??""}catch{return""}}function ai(){try{return window.frameElement??null}catch{return null}}function ni(){try{return window.frameElement?.getAttribute?.("lang")??""}catch{return""}}import{css as ii}from"lit";import{unsafeCSS as si}from"lit";var zr=ii`
+`;var et=new Map,Zn='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function ei(r,t={}){let e=t.responseParser??(o=>o.text());return et.has(r)||et.set(r,fetch(r).then(e)),et.get(r)}var A=class extends Bn{constructor(){super(...arguments);this.locale=document.documentElement.lang||"en";this.svg=null}async fetchIcon(e){let o=`https://assets.finn.no/pkg/eikons/~1/${this.locale}/${e}.svg`;try{let a=await ei(o);return new DOMParser().parseFromString(a,"text/html").body.querySelector("svg")}catch{return null}}firstUpdated(){this.loadIcon()}updated(e){(e.has("name")||e.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let e=await this.fetchIcon(this.name);e||(e=new DOMParser().parseFromString(Zn,"text/html").body.firstElementChild),this.svg=e}render(){let e=this.size||"medium",o=this.name||"",a={"w-icon":!0,"w-icon--s":e==="small","w-icon--m":e==="medium","w-icon--l":e==="large"},n=typeof e=="string"&&e.endsWith("px")?`--w-icon-size: ${e};`:"";return Gn`<div class="${Un(a)}" style="${n}" part="w-${o.toLowerCase()}">${this.svg}</div>`}};A.styles=[Pr],k([Ze({type:String,reflect:!0})],A.prototype,"name",2),k([Ze({type:String,reflect:!0})],A.prototype,"size",2),k([Ze({type:String,reflect:!0,useDefault:!0})],A.prototype,"locale",2),k([Jn()],A.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",A);var ti=["en","nb","fi","da","sv"],tt="en",Ce=r=>ti.find(t=>r===t||r.toLowerCase().includes(t))||tt;function R(){if(typeof window>"u"){let r=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return Ce(r)}try{let r=Cr(document);if(r)return Ce(r);let t=ni();if(t)return Ce(t);let e=Cr(Er());return e?Ce(e):tt}catch(r){return console.warn("could not detect locale, falling back to source locale",r),tt}}var Wr=(r,t,e,o,a)=>{W.load("en",r),W.load("nb",t),W.load("fi",e),W.load("da",o),W.load("sv",a);let n=R();W.activate(n),Fr(),oi()},ri="warp-i18n-change";function Fr(){typeof window>"u"||window.dispatchEvent(new Event(ri))}var Or=!1;function oi(){if(Or||typeof window>"u"||!document?.documentElement)return;Or=!0;let r=()=>{let a=R();W.locale!==a&&(W.activate(a),Fr())},t=new MutationObserver(a=>{for(let n of a)if(n.type==="attributes"&&n.attributeName==="lang"){r();break}});t.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let e=Er();e&&e.documentElement&&e!==document&&t.observe(e.documentElement,{attributes:!0,attributeFilter:["lang"]});let o=ai();o&&t.observe(o,{attributes:!0,attributeFilter:["lang"]})}function Er(){try{return window.parent?.document??null}catch{return null}}function Cr(r){try{return r?.documentElement?.lang??""}catch{return""}}function ai(){try{return window.frameElement??null}catch{return null}}function ni(){try{return window.frameElement?.getAttribute?.("lang")??""}catch{return""}}import{css as ii}from"lit";import{unsafeCSS as si}from"lit";var zr=ii`
   *,
   :before,
   :after {