@warp-ds/elements 2.9.0-next.2 → 2.9.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.
Files changed (86) hide show
  1. package/dist/custom-elements.json +17 -3
  2. package/dist/docs/affix/affix.md +56 -0
  3. package/dist/docs/affix/api.md +48 -0
  4. package/dist/docs/alert/accessibility.md +30 -0
  5. package/dist/docs/alert/alert.md +208 -0
  6. package/dist/docs/alert/api.md +39 -0
  7. package/dist/docs/alert/examples.md +84 -0
  8. package/dist/docs/alert/usage.md +42 -0
  9. package/dist/docs/attention/api.md +132 -0
  10. package/dist/docs/attention/attention.md +138 -0
  11. package/dist/docs/badge/api.md +28 -0
  12. package/dist/docs/badge/badge.md +36 -0
  13. package/dist/docs/box/api.md +52 -0
  14. package/dist/docs/box/box.md +60 -0
  15. package/dist/docs/breadcrumbs/api.md +20 -0
  16. package/dist/docs/breadcrumbs/breadcrumbs.md +28 -0
  17. package/dist/docs/button/api.md +155 -0
  18. package/dist/docs/button/button.md +163 -0
  19. package/dist/docs/card/api.md +44 -0
  20. package/dist/docs/card/card.md +52 -0
  21. package/dist/docs/combobox/api.md +132 -0
  22. package/dist/docs/combobox/combobox.md +140 -0
  23. package/dist/docs/datepicker/api.md +192 -0
  24. package/dist/docs/datepicker/datepicker.md +202 -0
  25. package/dist/docs/expandable/api.md +100 -0
  26. package/dist/docs/expandable/expandable.md +108 -0
  27. package/dist/docs/link/api.md +87 -0
  28. package/dist/docs/link/link.md +95 -0
  29. package/dist/docs/page-indicator/api.md +28 -0
  30. package/dist/docs/page-indicator/page-indicator.md +35 -0
  31. package/dist/docs/pagination/api.md +44 -0
  32. package/dist/docs/pagination/pagination.md +52 -0
  33. package/dist/docs/pill/api.md +76 -0
  34. package/dist/docs/pill/pill.md +84 -0
  35. package/dist/docs/select/api.md +116 -0
  36. package/dist/docs/select/select.md +124 -0
  37. package/dist/docs/slider/api.md +214 -0
  38. package/dist/docs/slider/slider.md +222 -0
  39. package/dist/docs/slider-thumb/api.md +116 -0
  40. package/dist/docs/slider-thumb/slider-thumb.md +124 -0
  41. package/dist/docs/step/api.md +28 -0
  42. package/dist/docs/step/step.md +34 -0
  43. package/dist/docs/step-indicator/api.md +28 -0
  44. package/dist/docs/step-indicator/step-indicator.md +36 -0
  45. package/dist/docs/switch/api.md +52 -0
  46. package/dist/docs/switch/switch.md +58 -0
  47. package/dist/docs/tab/api.md +76 -0
  48. package/dist/docs/tab/tab.md +84 -0
  49. package/dist/docs/tab-panel/api.md +21 -0
  50. package/dist/docs/tab-panel/tab-panel.md +30 -0
  51. package/dist/docs/tabs/api.md +36 -0
  52. package/dist/docs/tabs/tabs.md +44 -0
  53. package/dist/docs/textarea/api.md +156 -0
  54. package/dist/docs/textarea/textarea.md +164 -0
  55. package/dist/docs/textfield/api.md +194 -0
  56. package/dist/docs/textfield/textfield.md +202 -0
  57. package/dist/docs/toast-container/api.md +14 -0
  58. package/dist/docs/toast-container/toast-container.md +20 -0
  59. package/dist/packages/affix/affix.js +5 -5
  60. package/dist/packages/affix/affix.js.map +2 -2
  61. package/dist/packages/alert/alert.d.ts +15 -0
  62. package/dist/packages/alert/alert.js +6 -6
  63. package/dist/packages/alert/alert.js.map +2 -2
  64. package/dist/packages/attention/attention.js +5 -5
  65. package/dist/packages/attention/attention.js.map +2 -2
  66. package/dist/packages/datepicker/datepicker.js +1 -1
  67. package/dist/packages/datepicker/datepicker.js.map +2 -2
  68. package/dist/packages/expandable/expandable.js +7 -7
  69. package/dist/packages/expandable/expandable.js.map +2 -2
  70. package/dist/packages/icon/icon.js +2 -2
  71. package/dist/packages/icon/icon.js.map +2 -2
  72. package/dist/packages/icon/icon.test.js +14 -0
  73. package/dist/packages/modal-header/modal-header.js +6 -6
  74. package/dist/packages/modal-header/modal-header.js.map +2 -2
  75. package/dist/packages/pagination/pagination.js +3 -3
  76. package/dist/packages/pagination/pagination.js.map +2 -2
  77. package/dist/packages/pill/pill.js +3 -3
  78. package/dist/packages/pill/pill.js.map +2 -2
  79. package/dist/packages/select/select.js +4 -4
  80. package/dist/packages/select/select.js.map +2 -2
  81. package/dist/packages/step/step.js +4 -4
  82. package/dist/packages/step/step.js.map +2 -2
  83. package/dist/packages/toast/toast.js +4 -4
  84. package/dist/packages/toast/toast.js.map +2 -2
  85. package/dist/web-types.json +18 -5
  86. package/package.json +7 -2
@@ -0,0 +1,202 @@
1
+ # TextField (w-textfield)
2
+
3
+ ## Description
4
+
5
+ A single line text input element.
6
+
7
+ [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
8
+
9
+ ## API Documentation
10
+
11
+ ### Properties
12
+
13
+ | Name | Type | Default | Summary |
14
+ |-|-|-|-|
15
+ | shadowRootOptions | `object` | `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }` | - |
16
+ | disabled | `boolean` | `false` | - |
17
+ | invalid | `boolean` | `false` | - |
18
+ | id | `string` | `-` | - |
19
+ | label | `string` | `-` | - |
20
+ | helpText | `string` | `-` | - |
21
+ | size | `string` | `-` | - |
22
+ | max | `number` | `-` | - |
23
+ | min | `number` | `-` | - |
24
+ | minLength | `number` | `-` | - |
25
+ | maxLength | `number` | `-` | - |
26
+ | pattern | `string` | `-` | - |
27
+ | placeholder | `string` | `-` | - |
28
+ | readOnly | `boolean` | `false` | - |
29
+ | readonly | `boolean` | `false` | - |
30
+ | required | `boolean` | `false` | - |
31
+ | type | `string` | `-` | - |
32
+ | value | `string` | `-` | - |
33
+ | name | `string` | `-` | - |
34
+ | step | `number` | `-` | - |
35
+ | autocomplete | `string | undefined` | `-` | - |
36
+ | formatter | `(value: string) => string` | `-` | - |
37
+
38
+ ### Property Details
39
+
40
+ #### shadowRootOptions
41
+
42
+
43
+
44
+ - Type: `object`
45
+ - Default: `{ ...LitElement.shadowRootOptions, delegatesFocus: true, }`
46
+
47
+ #### disabled
48
+
49
+
50
+
51
+ - Type: `boolean`
52
+ - Default: `false`
53
+
54
+ #### invalid
55
+
56
+
57
+
58
+ - Type: `boolean`
59
+ - Default: `false`
60
+
61
+ #### id
62
+
63
+
64
+
65
+ - Type: `string`
66
+ - Default: `-`
67
+
68
+ #### label
69
+
70
+
71
+
72
+ - Type: `string`
73
+ - Default: `-`
74
+
75
+ #### helpText
76
+
77
+
78
+
79
+ - Type: `string`
80
+ - Default: `-`
81
+
82
+ #### size
83
+
84
+
85
+
86
+ - Type: `string`
87
+ - Default: `-`
88
+
89
+ #### max
90
+
91
+
92
+
93
+ - Type: `number`
94
+ - Default: `-`
95
+
96
+ #### min
97
+
98
+
99
+
100
+ - Type: `number`
101
+ - Default: `-`
102
+
103
+ #### minLength
104
+
105
+
106
+
107
+ - Type: `number`
108
+ - Default: `-`
109
+
110
+ #### maxLength
111
+
112
+
113
+
114
+ - Type: `number`
115
+ - Default: `-`
116
+
117
+ #### pattern
118
+
119
+
120
+
121
+ - Type: `string`
122
+ - Default: `-`
123
+
124
+ #### placeholder
125
+
126
+
127
+
128
+ - Type: `string`
129
+ - Default: `-`
130
+
131
+ #### readOnly
132
+
133
+
134
+
135
+ - Type: `boolean`
136
+ - Default: `false`
137
+
138
+ #### readonly
139
+
140
+
141
+
142
+ - Type: `boolean`
143
+ - Default: `false`
144
+
145
+ #### required
146
+
147
+
148
+
149
+ - Type: `boolean`
150
+ - Default: `false`
151
+
152
+ #### type
153
+
154
+
155
+
156
+ - Type: `string`
157
+ - Default: `-`
158
+
159
+ #### value
160
+
161
+
162
+
163
+ - Type: `string`
164
+ - Default: `-`
165
+
166
+ #### name
167
+
168
+
169
+
170
+ - Type: `string`
171
+ - Default: `-`
172
+
173
+ #### step
174
+
175
+
176
+
177
+ - Type: `number`
178
+ - Default: `-`
179
+
180
+ #### autocomplete
181
+
182
+
183
+
184
+ - Type: `string | undefined`
185
+ - Default: `-`
186
+
187
+ #### formatter
188
+
189
+ Function to format value when the input field.
190
+
191
+ Only active when the input field does not have focus,
192
+ similar to the accessible input masking example from Filament Group
193
+
194
+ https://css-tricks.com/input-masking/
195
+ https://filamentgroup.github.io/politespace/demo/demo.html
196
+
197
+ - Type: `(value: string) => string`
198
+ - Default: `-`
199
+
200
+ ### Types
201
+
202
+ No types documented.
@@ -0,0 +1,14 @@
1
+ ## API Documentation
2
+
3
+ ### Properties
4
+
5
+ | Name | Type | Default | Summary |
6
+ |-|-|-|-|
7
+
8
+ ### Property Details
9
+
10
+ No public fields documented.
11
+
12
+ ### Types
13
+
14
+ No types documented.
@@ -0,0 +1,20 @@
1
+ # ToastContainer (w-toast-container)
2
+
3
+ ## Description
4
+
5
+
6
+
7
+ ## API Documentation
8
+
9
+ ### Properties
10
+
11
+ | Name | Type | Default | Summary |
12
+ |-|-|-|-|
13
+
14
+ ### Property Details
15
+
16
+ No public fields documented.
17
+
18
+ ### Types
19
+
20
+ No types documented.
@@ -1,4 +1,4 @@
1
- var L=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var i=(e,o,r,t)=>{for(var a=t>1?void 0:t?E(o,r):o,n=e.length-1,c;n>=0;n--)(c=e[n])&&(a=(t?c(o,r,a):c(a))||a);return t&&a&&L(o,r,a),a};var g=function(){for(var e=[],o=arguments.length;o--;)e[o]=arguments[o];return e.reduce(function(r,t){return r.concat(typeof t=="string"?t:Array.isArray(t)?g.apply(void 0,t):typeof t=="object"&&t?Object.keys(t).map(function(a){return t[a]?a:""}):"")},[]).join(" ")};import{html as b,LitElement as F}from"lit";import{property as p}from"lit/decorators.js";import{ifDefined as z}from"lit/directives/if-defined.js";import{css as w}from"lit";var f=w`
1
+ var E=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var i=(e,o,r,t)=>{for(var a=t>1?void 0:t?L(o,r):o,l=e.length-1,p;l>=0;l--)(p=e[l])&&(a=(t?p(o,r,a):p(a))||a);return t&&a&&E(o,r,a),a};var g=function(){for(var e=[],o=arguments.length;o--;)e[o]=arguments[o];return e.reduce(function(r,t){return r.concat(typeof t=="string"?t:Array.isArray(t)?g.apply(void 0,t):typeof t=="object"&&t?Object.keys(t).map(function(a){return t[a]?a:""}):"")},[]).join(" ")};import{html as d,LitElement as F}from"lit";import{property as b}from"lit/decorators.js";import{ifDefined as z}from"lit/directives/if-defined.js";import{css as w}from"lit";var f=w`
2
2
  *,
3
3
  :before,
4
4
  :after {
@@ -2462,17 +2462,17 @@ var L=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var i=(e,o,r,t
2462
2462
  --w-icon-size: 32px;
2463
2463
  }
2464
2464
 
2465
- `;var v=new Map,T='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function X(e,o={}){var t;let r=(t=o.responseParser)!=null?t:(a=>a.text());return v.has(e)||v.set(e,fetch(e).then(r)),v.get(e)}var s=class extends S{constructor(){super(...arguments);this.svg=null}async fetchIcon(r){let a=`https://assets.finn.no/pkg/eikons/v1/${this.locale||"en"}/${r}.svg`;try{let n=await X(a);return new DOMParser().parseFromString(n,"text/html").body.querySelector("svg")}catch(n){return null}}firstUpdated(){this.loadIcon()}updated(r){(r.has("name")||r.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let r=await this.fetchIcon(this.name);r||(r=new DOMParser().parseFromString(T,"text/html").body.firstElementChild),this.svg=r}render(){let r=this.size||"medium",t=this.name||"",a={"w-icon":!0,"w-icon--s":r==="small","w-icon--m":r==="medium","w-icon--l":r==="large"},n=typeof r=="string"&&r.endsWith("px")?`--w-icon-size: ${r};`:"";return j`<div class="${P(a)}" style="${n}" part="w-${t.toLowerCase()}">${this.svg}</div>`}};s.styles=[k],i([u({type:String,reflect:!0})],s.prototype,"name",2),i([u({type:String,reflect:!0})],s.prototype,"size",2),i([u({type:String,reflect:!0})],s.prototype,"locale",2),i([$()],s.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",s);var Z=["en","nb","fi","da","sv"],h="en",d=e=>Z.find(o=>e===o||e.toLowerCase().includes(o))||h;function m(){if(typeof window=="undefined"){let e=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return d(e)}try{let e=y(document);if(e)return d(e);let o=C();if(o)return d(o);let r=y(B());return r?d(r):h}catch(e){return console.warn("could not detect locale, falling back to source locale",e),h}}function B(){var e,o;try{return(o=(e=window.parent)==null?void 0:e.document)!=null?o:null}catch(r){return null}}function y(e){var o,r;try{return(r=(o=e==null?void 0:e.documentElement)==null?void 0:o.lang)!=null?r:""}catch(t){return""}}function C(){var e,o,r;try{return(r=(o=(e=window.frameElement)==null?void 0:e.getAttribute)==null?void 0:o.call(e,"lang"))!=null?r:""}catch(t){return""}}var _="absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ",O={wrapper:_+"right-0",wrapperWithLabel:"w-max pr-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs s-text"},R={wrapper:_+"left-0",wrapperWithLabel:"w-max pl-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs s-text"},l=class extends F{constructor(){super(...arguments);this.clear=!1;this.search=!1}get _classBase(){return this.slot==="suffix"?O:R}get _classes(){return g([this._classBase.wrapper,this.label?this._classBase.wrapperWithLabel:this._classBase.wrapperWithIcon])}get _searchButton(){return b`
2465
+ `;var v=new Map,T='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"></svg>';function X(e,o={}){var t;let r=(t=o.responseParser)!=null?t:(a=>a.text());return v.has(e)||v.set(e,fetch(e).then(r)),v.get(e)}var n=class extends S{constructor(){super(...arguments);this.locale=document.documentElement.lang||"en";this.svg=null}async fetchIcon(r){let t=`https://assets.finn.no/pkg/eikons/v1/${this.locale}/${r}.svg`;try{let a=await X(t);return new DOMParser().parseFromString(a,"text/html").body.querySelector("svg")}catch(a){return null}}firstUpdated(){this.loadIcon()}updated(r){(r.has("name")||r.has("locale"))&&this.loadIcon()}async loadIcon(){if(!this.name){this.svg=null;return}let r=await this.fetchIcon(this.name);r||(r=new DOMParser().parseFromString(T,"text/html").body.firstElementChild),this.svg=r}render(){let r=this.size||"medium",t=this.name||"",a={"w-icon":!0,"w-icon--s":r==="small","w-icon--m":r==="medium","w-icon--l":r==="large"},l=typeof r=="string"&&r.endsWith("px")?`--w-icon-size: ${r};`:"";return j`<div class="${P(a)}" style="${l}" part="w-${t.toLowerCase()}">${this.svg}</div>`}};n.styles=[k],i([u({type:String,reflect:!0})],n.prototype,"name",2),i([u({type:String,reflect:!0})],n.prototype,"size",2),i([u({type:String,reflect:!0,useDefault:!0})],n.prototype,"locale",2),i([$()],n.prototype,"svg",2);customElements.get("w-icon")||customElements.define("w-icon",n);var Z=["en","nb","fi","da","sv"],h="en",c=e=>Z.find(o=>e===o||e.toLowerCase().includes(o))||h;function m(){if(typeof window=="undefined"){let e=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return c(e)}try{let e=y(document);if(e)return c(e);let o=C();if(o)return c(o);let r=y(B());return r?c(r):h}catch(e){return console.warn("could not detect locale, falling back to source locale",e),h}}function B(){var e,o;try{return(o=(e=window.parent)==null?void 0:e.document)!=null?o:null}catch(r){return null}}function y(e){var o,r;try{return(r=(o=e==null?void 0:e.documentElement)==null?void 0:o.lang)!=null?r:""}catch(t){return""}}function C(){var e,o,r;try{return(r=(o=(e=window.frameElement)==null?void 0:e.getAttribute)==null?void 0:o.call(e,"lang"))!=null?r:""}catch(t){return""}}var _="absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ",D={wrapper:_+"right-0",wrapperWithLabel:"w-max pr-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs s-text"},O={wrapper:_+"left-0",wrapperWithLabel:"w-max pl-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs s-text"},s=class extends F{constructor(){super(...arguments);this.clear=!1;this.search=!1}get _classBase(){return this.slot==="suffix"?D:O}get _classes(){return g([this._classBase.wrapper,this.label?this._classBase.wrapperWithLabel:this._classBase.wrapperWithIcon])}get _searchButton(){return d`
2466
2466
  <button aria-label="${z(this.ariaLabel)}" class="${this._classes}" type="submit">
2467
2467
  <w-icon name="Search" size="small" locale="${m()}" class="flex"></w-icon>
2468
2468
  </button>
2469
- `}get _clearButton(){return b`
2469
+ `}get _clearButton(){return d`
2470
2470
  <button aria-label="${z(this.ariaLabel)}" class="${this._classes}" type="reset">
2471
2471
  <w-icon name="Close" size="small" locale="${m()}" class="flex"></w-icon>
2472
2472
  </button>
2473
- `}get _text(){return b`
2473
+ `}get _text(){return d`
2474
2474
  <div class="${this._classes}">
2475
2475
  <span class="${this._classBase.label}">${this.label}</span>
2476
2476
  </div>
2477
- `}get _markup(){if(this.label)return this._text;if(this.search)return this._searchButton;if(this.clear)return this._clearButton}render(){return b`${this._markup}`}};l.styles=[f,x],i([p({attribute:"aria-label"})],l.prototype,"ariaLabel",2),i([p({type:Boolean})],l.prototype,"clear",2),i([p({type:Boolean})],l.prototype,"search",2),i([p()],l.prototype,"label",2);customElements.get("w-affix")||customElements.define("w-affix",l);export{l as WarpAffix};
2477
+ `}get _markup(){if(this.label)return this._text;if(this.search)return this._searchButton;if(this.clear)return this._clearButton}render(){return d`${this._markup}`}};s.styles=[f,x],i([b({attribute:"aria-label"})],s.prototype,"ariaLabel",2),i([b({type:Boolean})],s.prototype,"clear",2),i([b({type:Boolean})],s.prototype,"search",2),i([b()],s.prototype,"label",2);customElements.get("w-affix")||customElements.define("w-affix",s);export{s as WarpAffix};
2478
2478
  //# sourceMappingURL=affix.js.map