@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.3
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/dist/custom-elements.json +140 -69
- package/dist/docs/combobox/accessibility.md +71 -0
- package/dist/docs/combobox/api.md +60 -30
- package/dist/docs/combobox/combobox.md +203 -30
- package/dist/docs/combobox/examples.md +44 -0
- package/dist/docs/combobox/usage.md +28 -0
- package/dist/docs/icon/accessibility.md +5 -0
- package/dist/docs/icon/api.md +37 -0
- package/dist/docs/icon/examples.md +45 -0
- package/dist/docs/icon/icon.md +107 -0
- package/dist/docs/icon/usage.md +11 -0
- package/dist/docs/link/api.md +18 -22
- package/dist/docs/link/examples.md +75 -0
- package/dist/docs/link/link.md +111 -22
- package/dist/docs/link/usage.md +18 -0
- package/dist/index.d.ts +443 -171
- package/dist/packages/affix/affix.js +3 -3
- package/dist/packages/affix/affix.js.map +3 -3
- package/dist/packages/alert/alert.js +1 -1
- package/dist/packages/alert/alert.js.map +3 -3
- package/dist/packages/attention/attention.js.map +3 -3
- package/dist/packages/button/button.js.map +2 -2
- package/dist/packages/checkbox/checkbox.d.ts +40 -11
- package/dist/packages/checkbox/checkbox.js.map +2 -2
- package/dist/packages/checkbox-group/checkbox-group.d.ts +30 -5
- package/dist/packages/checkbox-group/checkbox-group.js.map +2 -2
- package/dist/packages/combobox/combobox.a11y.test.js +24 -0
- package/dist/packages/combobox/combobox.d.ts +65 -45
- package/dist/packages/combobox/combobox.hydration.test.js +39 -1
- package/dist/packages/combobox/combobox.js +13 -13
- package/dist/packages/combobox/combobox.js.map +3 -3
- package/dist/packages/combobox/combobox.stories.js +28 -15
- package/dist/packages/combobox/combobox.test.js +110 -0
- package/dist/packages/datepicker/datepicker.js.map +3 -3
- package/dist/packages/expandable/expandable.js +2 -2
- package/dist/packages/expandable/expandable.js.map +3 -3
- package/dist/packages/icon/icon.d.ts +13 -3
- package/dist/packages/icon/icon.js +2 -2
- package/dist/packages/icon/icon.js.map +3 -3
- package/dist/packages/icon/icon.react.stories.d.ts +1 -1
- package/dist/packages/icon/react.d.ts +2 -2
- package/dist/packages/link/link.d.ts +15 -16
- package/dist/packages/link/link.js.map +2 -2
- package/dist/packages/modal-header/modal-header.js +1 -1
- package/dist/packages/modal-header/modal-header.js.map +3 -3
- package/dist/packages/pagination/pagination.js.map +3 -3
- package/dist/packages/pill/pill.js.map +3 -3
- package/dist/packages/select/select.js.map +3 -3
- package/dist/packages/step/step.js +1 -1
- package/dist/packages/step/step.js.map +3 -3
- package/dist/packages/toast/toast.js +3 -3
- package/dist/packages/toast/toast.js.map +3 -3
- package/dist/packages/toast/toast.stories.d.ts +1 -5
- package/dist/packages/toast/toast.stories.js +0 -17
- package/dist/web-types.json +129 -72
- package/package.json +1 -1
|
@@ -1,11 +1,19 @@
|
|
|
1
1
|
import { LitElement, TemplateResult } from 'lit';
|
|
2
|
-
export declare class
|
|
2
|
+
export declare class WarpIcon extends LitElement {
|
|
3
3
|
static styles: import("lit").CSSResult[];
|
|
4
4
|
/** Icon filename (without .svg) */
|
|
5
5
|
name: string;
|
|
6
|
-
/**
|
|
6
|
+
/**
|
|
7
|
+
* Size: small, medium, large or pixel value (e.g. "32px").
|
|
8
|
+
*
|
|
9
|
+
* @default "medium"
|
|
10
|
+
*/
|
|
7
11
|
size: 'small' | 'medium' | 'large' | string;
|
|
8
|
-
/**
|
|
12
|
+
/**
|
|
13
|
+
* Locale used for `<title>` text.
|
|
14
|
+
*
|
|
15
|
+
* Reads the `lang` attribute from `<html>`, falls back to 'en'.
|
|
16
|
+
*/
|
|
9
17
|
locale: string;
|
|
10
18
|
/** Parsed SVG element (not reflected as attribute) */
|
|
11
19
|
private svg;
|
|
@@ -20,3 +28,5 @@ export declare class WIcon extends LitElement {
|
|
|
20
28
|
private loadIcon;
|
|
21
29
|
render(): TemplateResult;
|
|
22
30
|
}
|
|
31
|
+
/** @deprecated Exported for backwards compatibility. Use WarpIcon. */
|
|
32
|
+
export declare const WIcon: typeof WarpIcon;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var h=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var c=(
|
|
1
|
+
var h=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var c=(i,o,e,s)=>{for(var t=s>1?void 0:s?w(o,e):o,r=i.length-1,a;r>=0;r--)(a=i[r])&&(t=(s?a(o,e,t):a(t))||t);return s&&t&&h(o,e,t),t};import{html as d,LitElement as u}from"lit";import{property as l,state as v}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{css as g}from"lit";var p=g`
|
|
2
2
|
:host {
|
|
3
3
|
display: inline-block;
|
|
4
4
|
}
|
|
@@ -23,5 +23,5 @@ var h=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var c=(n,o,e,s
|
|
|
23
23
|
--w-icon-size: 32px;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
`;var m=new Map,y='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function x(
|
|
26
|
+
`;var m=new Map,y='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function x(i,o={}){var s;let e=(s=o.responseParser)!=null?s:(t=>t.text());return m.has(i)||m.set(i,fetch(i).then(e)),m.get(i)}var n=class extends u{constructor(){super(...arguments);this.locale=document.documentElement.lang||"en";this.svg=null}async fetchIcon(e){let s=`https://assets.finn.no/pkg/eikons/v1/${this.locale}/${e}.svg`;try{let t=await x(s);return new DOMParser().parseFromString(t,"text/html").body.querySelector("svg")}catch(t){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(y,"text/html").body.firstElementChild),this.svg=e}render(){let e=this.size||"medium",s=this.name||"",t={"w-icon":!0,"w-icon--s":e==="small","w-icon--m":e==="medium","w-icon--l":e==="large"},r=typeof e=="string"&&e.endsWith("px")?`--w-icon-size: ${e};`:"";return d`<div class="${f(t)}" style="${r}" part="w-${s.toLowerCase()}">${this.svg}</div>`}};n.styles=[p],c([l({type:String,reflect:!0})],n.prototype,"name",2),c([l({type:String,reflect:!0})],n.prototype,"size",2),c([l({type:String,reflect:!0,useDefault:!0})],n.prototype,"locale",2),c([v()],n.prototype,"svg",2);var M=n;customElements.get("w-icon")||customElements.define("w-icon",n);export{M as WIcon,n as WarpIcon};
|
|
27
27
|
//# sourceMappingURL=icon.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../packages/icon/icon.ts", "../../../packages/icon/style.ts"],
|
|
4
|
-
"sourcesContent": ["import { html, LitElement, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './style.js';\n\n// Generic parser for fetch responses\ntype ResponseParser<T> = (response: Response) => Promise<T>;\n\ninterface CacheFetchOptions<T> {\n responseParser?: ResponseParser<T>;\n}\n\nconst _fetchMap = new Map<string, Promise<any>>();\nconst ERROR_SVG = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"></svg>';\n\n/**\n * A minimal in-memory map to de-duplicate Fetch API media requests.\n *\n * @param uri - Resource URL\n * @param options - Optional parser for the response\n * @returns Promise of parsed response\n */\nfunction cacheFetch<T = string>(uri: string, options: CacheFetchOptions<T> = {}): Promise<T> {\n const parser = options.responseParser ?? ((res: Response) => res.text() as Promise<any>);\n if (!_fetchMap.has(uri)) {\n _fetchMap.set(uri, fetch(uri).then(parser));\n }\n return _fetchMap.get(uri) as Promise<T>;\n}\n\nexport class
|
|
5
|
-
"mappings": "wMAAA,OAAS,QAAAA,EAAM,cAAAC,MAAkC,MACjD,OAAS,YAAAC,EAAU,SAAAC,MAAa,oBAChC,OAAS,YAAAC,MAAgB,8BCFzB,OAAS,OAAAC,MAAW,MAEb,IAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EDUtB,IAAME,EAAY,IAAI,IAChBC,EAAY,qEASlB,SAASC,EAAuBC,EAAaC,EAAgC,CAAC,EAAe,CAtB7F,IAAAC,EAuBE,IAAMC,GAASD,EAAAD,EAAQ,iBAAR,KAAAC,GAA4BE,GAAkBA,EAAI,KAAK,GACtE,OAAKP,EAAU,IAAIG,CAAG,GACpBH,EAAU,IAAIG,EAAK,MAAMA,CAAG,EAAE,KAAKG,CAAM,CAAC,EAErCN,EAAU,IAAIG,CAAG,CAC1B,CAEO,IAAMK,EAAN,
|
|
6
|
-
"names": ["html", "LitElement", "property", "state", "classMap", "css", "styles", "_fetchMap", "ERROR_SVG", "cacheFetch", "uri", "options", "_a", "parser", "res", "
|
|
4
|
+
"sourcesContent": ["import { html, LitElement, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './style.js';\n\n// Generic parser for fetch responses\ntype ResponseParser<T> = (response: Response) => Promise<T>;\n\ninterface CacheFetchOptions<T> {\n responseParser?: ResponseParser<T>;\n}\n\nconst _fetchMap = new Map<string, Promise<any>>();\nconst ERROR_SVG = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"></svg>';\n\n/**\n * A minimal in-memory map to de-duplicate Fetch API media requests.\n *\n * @param uri - Resource URL\n * @param options - Optional parser for the response\n * @returns Promise of parsed response\n */\nfunction cacheFetch<T = string>(uri: string, options: CacheFetchOptions<T> = {}): Promise<T> {\n const parser = options.responseParser ?? ((res: Response) => res.text() as Promise<any>);\n if (!_fetchMap.has(uri)) {\n _fetchMap.set(uri, fetch(uri).then(parser));\n }\n return _fetchMap.get(uri) as Promise<T>;\n}\n\nexport class WarpIcon extends LitElement {\n static styles = [styles];\n\n /** Icon filename (without .svg) */\n @property({ type: String, reflect: true })\n name!: string;\n\n /** \n * Size: small, medium, large or pixel value (e.g. \"32px\").\n * \n * @default \"medium\"\n */\n @property({ type: String, reflect: true })\n size: 'small' | 'medium' | 'large' | string;\n\n /** \n * Locale used for `<title>` text.\n * \n * Reads the `lang` attribute from `<html>`, falls back to 'en'. \n */\n @property({ type: String, reflect: true, useDefault: true })\n locale: string = document.documentElement.lang || 'en';\n\n /** Parsed SVG element (not reflected as attribute) */\n @state()\n private svg: SVGElement | null = null;\n\n /**\n * Fetch an icon SVG from the CDN, with caching\n * @param iconName - Name of the icon file\n * @returns SVGElement or null on failure\n */\n private async fetchIcon(iconName: string): Promise<SVGElement | null> {\n const uri = `https://assets.finn.no/pkg/eikons/v1/${this.locale}/${iconName}.svg`;\n try {\n const svgText = await cacheFetch<string>(uri);\n const doc = new DOMParser().parseFromString(svgText, 'text/html');\n return doc.body.querySelector('svg');\n } catch {\n return null;\n }\n }\n\n protected firstUpdated(): void {\n this.loadIcon();\n }\n\n protected updated(changedProps: Map<string, unknown>): void {\n if (changedProps.has('name') || changedProps.has('locale')) {\n this.loadIcon();\n }\n }\n\n private async loadIcon(): Promise<void> {\n if (!this.name) {\n this.svg = null;\n return;\n }\n\n let iconEl = await this.fetchIcon(this.name);\n if (!iconEl) {\n const doc = new DOMParser().parseFromString(ERROR_SVG, 'text/html');\n iconEl = doc.body.firstElementChild as SVGElement;\n }\n this.svg = iconEl;\n }\n\n render(): TemplateResult {\n const size = this.size || 'medium';\n const name = this.name || '';\n const classes = {\n 'w-icon': true,\n 'w-icon--s': size === 'small',\n 'w-icon--m': size === 'medium',\n 'w-icon--l': size === 'large',\n };\n const customStyle = typeof size === 'string' && size.endsWith('px') ? `--w-icon-size: ${size};` : '';\n return html`<div class=\"${classMap(classes)}\" style=\"${customStyle}\" part=\"w-${name.toLowerCase()}\">${this.svg}</div>`;\n }\n}\n\n/** @deprecated Exported for backwards compatibility. Use WarpIcon. */\nexport const WIcon = WarpIcon;\n\nif (!customElements.get('w-icon')) {\n customElements.define('w-icon', WarpIcon);\n}\n", "import { css } from 'lit';\n\nexport const styles = css`\n:host {\n display: inline-block;\n}\n.w-icon {\n --_w-icon-size: var(--w-icon-size, 24px);\n height: var(--_w-icon-size);\n width: var(--_w-icon-size);\n display: flex;\n}\n.w-icon svg {\n pointer-events: none;\n height: var(--_w-icon-size);\n width: var(--_w-icon-size);\n}\n.w-icon--s {\n --w-icon-size: 16px;\n}\n.w-icon--m {\n --w-icon-size: 24px;\n}\n.w-icon--l {\n --w-icon-size: 32px;\n}\n\n`;\n"],
|
|
5
|
+
"mappings": "wMAAA,OAAS,QAAAA,EAAM,cAAAC,MAAkC,MACjD,OAAS,YAAAC,EAAU,SAAAC,MAAa,oBAChC,OAAS,YAAAC,MAAgB,8BCFzB,OAAS,OAAAC,MAAW,MAEb,IAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EDUtB,IAAME,EAAY,IAAI,IAChBC,EAAY,qEASlB,SAASC,EAAuBC,EAAaC,EAAgC,CAAC,EAAe,CAtB7F,IAAAC,EAuBE,IAAMC,GAASD,EAAAD,EAAQ,iBAAR,KAAAC,GAA4BE,GAAkBA,EAAI,KAAK,GACtE,OAAKP,EAAU,IAAIG,CAAG,GACpBH,EAAU,IAAIG,EAAK,MAAMA,CAAG,EAAE,KAAKG,CAAM,CAAC,EAErCN,EAAU,IAAIG,CAAG,CAC1B,CAEO,IAAMK,EAAN,cAAuBC,CAAW,CAAlC,kCAqBL,YAAiB,SAAS,gBAAgB,MAAQ,KAIlD,KAAQ,IAAyB,KAOjC,MAAc,UAAUC,EAA8C,CACpE,IAAMP,EAAM,wCAAwC,KAAK,MAAM,IAAIO,CAAQ,OAC3E,GAAI,CACF,IAAMC,EAAU,MAAMT,EAAmBC,CAAG,EAE5C,OADY,IAAI,UAAU,EAAE,gBAAgBQ,EAAS,WAAW,EACrD,KAAK,cAAc,KAAK,CACrC,OAAQC,EAAA,CACN,OAAO,IACT,CACF,CAEU,cAAqB,CAC7B,KAAK,SAAS,CAChB,CAEU,QAAQC,EAA0C,EACtDA,EAAa,IAAI,MAAM,GAAKA,EAAa,IAAI,QAAQ,IACvD,KAAK,SAAS,CAElB,CAEA,MAAc,UAA0B,CACtC,GAAI,CAAC,KAAK,KAAM,CACd,KAAK,IAAM,KACX,MACF,CAEA,IAAIC,EAAS,MAAM,KAAK,UAAU,KAAK,IAAI,EACtCA,IAEHA,EADY,IAAI,UAAU,EAAE,gBAAgBb,EAAW,WAAW,EACrD,KAAK,mBAEpB,KAAK,IAAMa,CACb,CAEA,QAAyB,CACvB,IAAMC,EAAO,KAAK,MAAQ,SACpBC,EAAO,KAAK,MAAQ,GACpBC,EAAU,CACd,SAAU,GACV,YAAaF,IAAS,QACtB,YAAaA,IAAS,SACtB,YAAaA,IAAS,OACxB,EACMG,EAAc,OAAOH,GAAS,UAAYA,EAAK,SAAS,IAAI,EAAI,kBAAkBA,CAAI,IAAM,GAClG,OAAOI,gBAAmBC,EAASH,CAAO,CAAC,YAAYC,CAAW,aAAaF,EAAK,YAAY,CAAC,KAAK,KAAK,GAAG,QAChH,CACF,EA/EaR,EACJ,OAAS,CAACa,CAAM,EAIvBC,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAJ9Bf,EAKX,oBAQAc,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAZ9Bf,EAaX,oBAQAc,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,GAAM,WAAY,EAAK,CAAC,GApBhDf,EAqBX,sBAIQc,EAAA,CADPE,EAAM,GAxBIhB,EAyBH,mBAyDH,IAAMiB,EAAQjB,EAEhB,eAAe,IAAI,QAAQ,GAC9B,eAAe,OAAO,SAAUA,CAAQ",
|
|
6
|
+
"names": ["html", "LitElement", "property", "state", "classMap", "css", "styles", "_fetchMap", "ERROR_SVG", "cacheFetch", "uri", "options", "_a", "parser", "res", "WarpIcon", "LitElement", "iconName", "svgText", "e", "changedProps", "iconEl", "size", "name", "classes", "customStyle", "html", "classMap", "styles", "__decorateClass", "property", "state", "WIcon"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const Icon: import("@lit/react").ReactWebComponent<
|
|
1
|
+
import { WarpIcon } from './icon.js';
|
|
2
|
+
export declare const Icon: import("@lit/react").ReactWebComponent<WarpIcon, {}>;
|
|
@@ -6,6 +6,7 @@ type ButtonVariant = 'primary' | 'secondary' | 'negative' | 'negativeQuiet' | 'u
|
|
|
6
6
|
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
|
|
7
7
|
*/
|
|
8
8
|
declare class WarpLink extends LitElement {
|
|
9
|
+
/** @internal */
|
|
9
10
|
static shadowRootOptions: {
|
|
10
11
|
delegatesFocus: boolean;
|
|
11
12
|
clonable?: boolean;
|
|
@@ -15,43 +16,41 @@ declare class WarpLink extends LitElement {
|
|
|
15
16
|
slotAssignment?: SlotAssignmentMode;
|
|
16
17
|
};
|
|
17
18
|
/**
|
|
18
|
-
*
|
|
19
|
-
* @description
|
|
19
|
+
* Focus the link after it is rendered
|
|
20
20
|
*/
|
|
21
21
|
autofocus: boolean;
|
|
22
22
|
/**
|
|
23
|
-
*
|
|
24
|
-
*
|
|
23
|
+
* Visual style for the link/button.
|
|
24
|
+
*
|
|
25
|
+
* @throws {Error} Throws an error if an unsupported value is provided.
|
|
25
26
|
*/
|
|
26
27
|
variant: ButtonVariant;
|
|
27
28
|
/**
|
|
28
|
-
*
|
|
29
|
-
* @description
|
|
29
|
+
* Render a smaller version
|
|
30
30
|
*/
|
|
31
31
|
small: boolean;
|
|
32
32
|
/**
|
|
33
|
-
*
|
|
34
|
-
* @description
|
|
33
|
+
* The URL the link points to
|
|
35
34
|
*/
|
|
36
35
|
href: string;
|
|
37
36
|
/**
|
|
38
|
-
*
|
|
39
|
-
*
|
|
37
|
+
* Applies disabled styling, but you need to disable clicks on your own.
|
|
38
|
+
*
|
|
39
|
+
* The component renders an `<a>` element; `disabled` affects styling, but does not inherently prevent navigation. If you need to fully disable interaction, omit `href` and/or prevent default click behavior.
|
|
40
40
|
*/
|
|
41
41
|
disabled: boolean;
|
|
42
42
|
/**
|
|
43
|
-
*
|
|
44
|
-
* @description
|
|
43
|
+
* Where to display the linked URL (e.g. `_blank`)
|
|
45
44
|
*/
|
|
46
45
|
target: string;
|
|
47
46
|
/**
|
|
48
|
-
*
|
|
49
|
-
*
|
|
47
|
+
* Relationship of the linked URL.
|
|
48
|
+
*
|
|
49
|
+
* If `target="_blank"` and `rel` is not provided, the component uses `noopener`.
|
|
50
50
|
*/
|
|
51
51
|
rel: string;
|
|
52
52
|
/**
|
|
53
|
-
*
|
|
54
|
-
* @description
|
|
53
|
+
* Makes the link take up the full width of its parent
|
|
55
54
|
*/
|
|
56
55
|
fullWidth: boolean;
|
|
57
56
|
static styles: import("lit").CSSResult[];
|