@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.
- package/dist/custom-elements.json +17 -3
- package/dist/docs/affix/affix.md +56 -0
- package/dist/docs/affix/api.md +48 -0
- package/dist/docs/alert/accessibility.md +30 -0
- package/dist/docs/alert/alert.md +208 -0
- package/dist/docs/alert/api.md +39 -0
- package/dist/docs/alert/examples.md +84 -0
- package/dist/docs/alert/usage.md +42 -0
- package/dist/docs/attention/api.md +132 -0
- package/dist/docs/attention/attention.md +138 -0
- package/dist/docs/badge/api.md +28 -0
- package/dist/docs/badge/badge.md +36 -0
- package/dist/docs/box/api.md +52 -0
- package/dist/docs/box/box.md +60 -0
- package/dist/docs/breadcrumbs/api.md +20 -0
- package/dist/docs/breadcrumbs/breadcrumbs.md +28 -0
- package/dist/docs/button/api.md +155 -0
- package/dist/docs/button/button.md +163 -0
- package/dist/docs/card/api.md +44 -0
- package/dist/docs/card/card.md +52 -0
- package/dist/docs/combobox/api.md +132 -0
- package/dist/docs/combobox/combobox.md +140 -0
- package/dist/docs/datepicker/api.md +192 -0
- package/dist/docs/datepicker/datepicker.md +202 -0
- package/dist/docs/expandable/api.md +100 -0
- package/dist/docs/expandable/expandable.md +108 -0
- package/dist/docs/link/api.md +87 -0
- package/dist/docs/link/link.md +95 -0
- package/dist/docs/page-indicator/api.md +28 -0
- package/dist/docs/page-indicator/page-indicator.md +35 -0
- package/dist/docs/pagination/api.md +44 -0
- package/dist/docs/pagination/pagination.md +52 -0
- package/dist/docs/pill/api.md +76 -0
- package/dist/docs/pill/pill.md +84 -0
- package/dist/docs/select/api.md +116 -0
- package/dist/docs/select/select.md +124 -0
- package/dist/docs/slider/api.md +214 -0
- package/dist/docs/slider/slider.md +222 -0
- package/dist/docs/slider-thumb/api.md +116 -0
- package/dist/docs/slider-thumb/slider-thumb.md +124 -0
- package/dist/docs/step/api.md +28 -0
- package/dist/docs/step/step.md +34 -0
- package/dist/docs/step-indicator/api.md +28 -0
- package/dist/docs/step-indicator/step-indicator.md +36 -0
- package/dist/docs/switch/api.md +52 -0
- package/dist/docs/switch/switch.md +58 -0
- package/dist/docs/tab/api.md +76 -0
- package/dist/docs/tab/tab.md +84 -0
- package/dist/docs/tab-panel/api.md +21 -0
- package/dist/docs/tab-panel/tab-panel.md +30 -0
- package/dist/docs/tabs/api.md +36 -0
- package/dist/docs/tabs/tabs.md +44 -0
- package/dist/docs/textarea/api.md +156 -0
- package/dist/docs/textarea/textarea.md +164 -0
- package/dist/docs/textfield/api.md +194 -0
- package/dist/docs/textfield/textfield.md +202 -0
- package/dist/docs/toast-container/api.md +14 -0
- package/dist/docs/toast-container/toast-container.md +20 -0
- package/dist/packages/affix/affix.js +5 -5
- package/dist/packages/affix/affix.js.map +2 -2
- package/dist/packages/alert/alert.d.ts +15 -0
- package/dist/packages/alert/alert.js +6 -6
- package/dist/packages/alert/alert.js.map +2 -2
- package/dist/packages/attention/attention.js +5 -5
- package/dist/packages/attention/attention.js.map +2 -2
- package/dist/packages/datepicker/datepicker.js +1 -1
- package/dist/packages/datepicker/datepicker.js.map +2 -2
- package/dist/packages/expandable/expandable.js +7 -7
- package/dist/packages/expandable/expandable.js.map +2 -2
- package/dist/packages/icon/icon.js +2 -2
- package/dist/packages/icon/icon.js.map +2 -2
- package/dist/packages/icon/icon.test.js +14 -0
- package/dist/packages/modal-header/modal-header.js +6 -6
- package/dist/packages/modal-header/modal-header.js.map +2 -2
- package/dist/packages/pagination/pagination.js +3 -3
- package/dist/packages/pagination/pagination.js.map +2 -2
- package/dist/packages/pill/pill.js +3 -3
- package/dist/packages/pill/pill.js.map +2 -2
- package/dist/packages/select/select.js +4 -4
- package/dist/packages/select/select.js.map +2 -2
- package/dist/packages/step/step.js +4 -4
- package/dist/packages/step/step.js.map +2 -2
- package/dist/packages/toast/toast.js +4 -4
- package/dist/packages/toast/toast.js.map +2 -2
- package/dist/web-types.json +18 -5
- 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,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
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|