@warp-ds/elements 2.2.0-next.15 → 2.2.0-next.17
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/README.md +190 -18
- package/dist/custom-elements.json +9 -9
- package/dist/index.d.ts +110 -0
- package/dist/packages/affix/index.d.ts +0 -5
- package/dist/packages/affix/index.js +5 -5
- package/dist/packages/affix/index.js.map +1 -1
- package/dist/packages/alert/index.d.ts +0 -5
- package/dist/packages/alert/index.js +3 -3
- package/dist/packages/alert/index.js.map +1 -1
- package/dist/packages/badge/index.d.ts +0 -5
- package/dist/packages/badge/index.js.map +1 -1
- package/dist/packages/box/index.d.ts +0 -5
- package/dist/packages/box/index.js.map +1 -1
- package/dist/packages/breadcrumbs/index.d.ts +0 -5
- package/dist/packages/breadcrumbs/index.js +2 -2
- package/dist/packages/breadcrumbs/index.js.map +1 -1
- package/dist/packages/button/button.test.js +1 -0
- package/dist/packages/button/index.d.ts +0 -5
- package/dist/packages/button/index.js +7 -7
- package/dist/packages/button/index.js.map +3 -3
- package/dist/packages/card/index.d.ts +0 -5
- package/dist/packages/card/index.js +3 -3
- package/dist/packages/card/index.js.map +1 -1
- package/dist/packages/combobox/index.d.ts +0 -5
- package/dist/packages/combobox/index.js +3 -3
- package/dist/packages/combobox/index.js.map +1 -1
- package/dist/packages/datepicker/datepicker.d.ts +0 -5
- package/dist/packages/datepicker/datepicker.js.map +1 -1
- package/dist/packages/datepicker/datepicker.stories.d.ts +1 -0
- package/dist/packages/datepicker/datepicker.stories.js +1 -0
- package/dist/packages/datepicker/index.js.map +1 -1
- package/dist/packages/dead-toggle/index.d.ts +0 -5
- package/dist/packages/dead-toggle/index.js +2 -2
- package/dist/packages/dead-toggle/index.js.map +1 -1
- package/dist/packages/expandable/index.d.ts +0 -5
- package/dist/packages/expandable/index.js +3 -3
- package/dist/packages/expandable/index.js.map +1 -1
- package/dist/packages/link/index.d.ts +0 -5
- package/dist/packages/link/index.js +1 -1
- package/dist/packages/link/index.js.map +1 -1
- package/dist/packages/modal/index.js +7 -7
- package/dist/packages/modal/index.js.map +1 -1
- package/dist/packages/modal/modal-footer.d.ts +0 -5
- package/dist/packages/modal/modal-footer.js.map +1 -1
- package/dist/packages/modal/modal-header.d.ts +0 -5
- package/dist/packages/modal/modal-header.js +2 -2
- package/dist/packages/modal/modal-header.js.map +1 -1
- package/dist/packages/modal/modal-main.d.ts +0 -5
- package/dist/packages/modal/modal-main.js.map +1 -1
- package/dist/packages/pageindicator/index.d.ts +2 -6
- package/dist/packages/pageindicator/index.js +4 -4
- package/dist/packages/pageindicator/index.js.map +2 -2
- package/dist/packages/pagination/index.d.ts +0 -5
- package/dist/packages/pagination/index.js +6 -6
- package/dist/packages/pagination/index.js.map +1 -1
- package/dist/packages/pill/index.d.ts +0 -5
- package/dist/packages/pill/index.js +3 -3
- package/dist/packages/pill/index.js.map +1 -1
- package/dist/packages/rip-and-tear-checkbox/index.d.ts +1 -6
- package/dist/packages/rip-and-tear-checkbox/index.js.map +1 -1
- package/dist/packages/rip-and-tear-radio/index.d.ts +1 -8
- package/dist/packages/rip-and-tear-radio/index.js +4 -4
- package/dist/packages/rip-and-tear-radio/index.js.map +2 -2
- package/dist/packages/select/index.d.ts +0 -5
- package/dist/packages/select/index.js +4 -4
- package/dist/packages/select/index.js.map +2 -2
- package/dist/packages/slider/index.js +9 -9
- package/dist/packages/slider/index.js.map +2 -2
- package/dist/packages/slider/slider-thumb.d.ts +0 -5
- package/dist/packages/slider/slider-thumb.js +15 -15
- package/dist/packages/slider/slider-thumb.js.map +2 -2
- package/dist/packages/slider/slider.d.ts +0 -5
- package/dist/packages/slider/slider.js +2 -2
- package/dist/packages/slider/slider.js.map +1 -1
- package/dist/packages/steps/index.d.ts +0 -6
- package/dist/packages/steps/index.js +5 -5
- package/dist/packages/steps/index.js.map +1 -1
- package/dist/packages/switch/index.d.ts +0 -5
- package/dist/packages/switch/index.js.map +1 -1
- package/dist/packages/tabs/index.js +4 -4
- package/dist/packages/tabs/index.js.map +1 -1
- package/dist/packages/tabs/tab.d.ts +0 -5
- package/dist/packages/textfield/index.d.ts +0 -5
- package/dist/packages/textfield/index.js +4 -4
- package/dist/packages/textfield/index.js.map +2 -2
- package/dist/web-types.json +1 -1
- package/package.json +9 -12
package/README.md
CHANGED
|
@@ -14,35 +14,103 @@ start by reviewing the [contributing guidelines](CONTRIBUTING.md).
|
|
|
14
14
|
|
|
15
15
|
### Installation
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
Warp custom elements are supplied by the Eik CDN.
|
|
18
|
+
In addition, you can install the `@warp-ds/elements` package to get intellisense
|
|
19
|
+
in your editor.
|
|
18
20
|
|
|
19
|
-
####
|
|
21
|
+
#### Step 1.
|
|
20
22
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
+
Add the following script and style to the very top of your document head to ensure performant loading
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/elements/2.2.0-next.13/styles.css" crossorigin />
|
|
27
|
+
<script src="https://assets.finn.no/pkg/@warp-ds/elements/2.2.0-next.13/index.js" type="module"></script>
|
|
23
28
|
```
|
|
24
29
|
|
|
25
|
-
####
|
|
30
|
+
#### Step 2.
|
|
26
31
|
|
|
27
|
-
|
|
28
|
-
|
|
32
|
+
Be sure to preload whichever brand fonts you need for a page and load the correct font file:
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<!-- Finn example -->
|
|
36
|
+
<link rel="preload" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/FINNTypeAlleTegn-Light.woff2" as="font" type="font/woff2" crossorigin>
|
|
37
|
+
<link rel="preload" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/FINNTypeAlleTegn-Medium.woff2" as="font" type="font/woff2" crossorigin>
|
|
38
|
+
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/finn-no.css" crossorigin>
|
|
29
39
|
```
|
|
30
40
|
|
|
31
|
-
|
|
41
|
+
```html
|
|
42
|
+
<!-- Tori example -->
|
|
43
|
+
<link rel="preload" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/ToriSans-Regular.woff2" as="font" type="font/woff2" crossorigin>
|
|
44
|
+
<link rel="preload" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/ToriSans-Bold.woff2" as="font" type="font/woff2" crossorigin>
|
|
45
|
+
<link rel="preload" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/ToriSans-Italic.woff2" as="font" type="font/woff2" crossorigin>
|
|
46
|
+
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/tori-fi.css" crossorigin>
|
|
47
|
+
```
|
|
32
48
|
|
|
33
49
|
```html
|
|
34
|
-
|
|
50
|
+
<!-- DBA example -->
|
|
51
|
+
<link rel="preload" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/ProximaNova-Regular.woff2" as="font" type="font/woff2" crossorigin>
|
|
52
|
+
<link rel="preload" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/ProximaNova-Bold.woff2" as="font" type="font/woff2" crossorigin>
|
|
53
|
+
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/dba-dk.css" crossorigin>
|
|
35
54
|
```
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<!-- Blocket example -->
|
|
58
|
+
<link rel="preload" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/BlocketSans-Regular.woff2" as="font" type="font/woff2" crossorigin>
|
|
59
|
+
<link rel="preload" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/BlocketSans-Bold.woff2" as="font" type="font/woff2" crossorigin>
|
|
60
|
+
<link rel="preload" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/BlocketSans-Medium.woff2" as="font" type="font/woff2" crossorigin>
|
|
61
|
+
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/blocket-se.css" crossorigin>
|
|
40
62
|
```
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
63
|
+
|
|
64
|
+
#### Step 3.
|
|
65
|
+
|
|
66
|
+
You'll also want to load Warp tokens and resets CSS files to ensure consistent and correct styling for the brand.
|
|
67
|
+
|
|
68
|
+
```html
|
|
69
|
+
<!-- Finn example -->
|
|
70
|
+
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/v2/tokens/finn-no.css" crossorigin>
|
|
71
|
+
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/v2/resets.css" crossorigin>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
```html
|
|
75
|
+
<!-- Tori example -->
|
|
76
|
+
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/v2/tokens/tori-fi.css" crossorigin>
|
|
77
|
+
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/v2/resets.css" crossorigin>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<!-- DBA example -->
|
|
82
|
+
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/v2/tokens/dba-dk.css" crossorigin>
|
|
83
|
+
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/v2/resets.css" crossorigin>
|
|
44
84
|
```
|
|
45
85
|
|
|
86
|
+
```html
|
|
87
|
+
<!-- Blocket example -->
|
|
88
|
+
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/v2/tokens/blocket-se.css" crossorigin>
|
|
89
|
+
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/v2/resets.css" crossorigin>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
#### Step 4.
|
|
93
|
+
|
|
94
|
+
Next, to add intellisense to your editor install `@warp-ds/elements` by using npm/pnpm. See the Editor integration below.
|
|
95
|
+
|
|
96
|
+
##### Install using npm
|
|
97
|
+
|
|
98
|
+
```sh
|
|
99
|
+
npm install @warp-ds/elements
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
##### Install using pnpm
|
|
103
|
+
|
|
104
|
+
```sh
|
|
105
|
+
pnpm add @warp-ds/elements
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
And then head on down to the editor configuration section below to complete setup.
|
|
109
|
+
|
|
110
|
+
### Using Warp elements with Borealis
|
|
111
|
+
|
|
112
|
+
If you are using Borealis modules from the Web Platform Team (and you should be) and keeping your app dependencies up to date (and you should be), then steps 2 and 3 are already taken care of for you, you just need to do steps 1 and 4.
|
|
113
|
+
|
|
46
114
|
### Documentation
|
|
47
115
|
|
|
48
116
|
For information on the components available in the package and how to use them,
|
|
@@ -54,7 +122,17 @@ see the [Warp Design System documentation](https://warp-ds.github.io/tech-docs/)
|
|
|
54
122
|
|
|
55
123
|
This module includes [Custom HTML and CSS data for Visual Studio Code](https://code.visualstudio.com/blogs/2020/02/24/custom-data-format).
|
|
56
124
|
|
|
57
|
-
|
|
125
|
+
##### Using Warp Elements in a plain HTML page
|
|
126
|
+
|
|
127
|
+
When developing, install Warp Elements locally using npm
|
|
128
|
+
|
|
129
|
+
```
|
|
130
|
+
npm install @warp-ds/elements
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Add the following snippet to settings.json in vscode to tell it about Warp components
|
|
134
|
+
|
|
135
|
+
.vscode/settings.json
|
|
58
136
|
|
|
59
137
|
```json
|
|
60
138
|
{
|
|
@@ -67,16 +145,110 @@ Add this to your `settings.json` and restart VS Code to get IntelliSense and inl
|
|
|
67
145
|
}
|
|
68
146
|
```
|
|
69
147
|
|
|
148
|
+
restart vscode
|
|
149
|
+
|
|
150
|
+
Now, inside any .html files, you will get intellisense when using Warp Elements
|
|
151
|
+
|
|
152
|
+
```html
|
|
153
|
+
<w-button variant=""><w-button>
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
##### Using Warp Elements in JavaScript template literals
|
|
157
|
+
|
|
158
|
+
IntelliSense in JavaScript strings is not supported without additional plugins and syntax, such as comment hints (`/* html */`) or a tagged template literal similar to Lit.
|
|
159
|
+
|
|
160
|
+
##### Using Warp Elements in Lit html tagged template literals
|
|
161
|
+
|
|
162
|
+
When developing, install Warp Elements locally using npm
|
|
163
|
+
|
|
164
|
+
```
|
|
165
|
+
npm install @warp-ds/elements
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
Add the following snippet to settings.json in vscode to tell it about Warp components
|
|
169
|
+
|
|
170
|
+
.vscode/settings.json
|
|
171
|
+
|
|
172
|
+
```json
|
|
173
|
+
{
|
|
174
|
+
"html.customData": [
|
|
175
|
+
"./node_modules/@warp-ds/elements/dist/vscode.html-custom-data.json"
|
|
176
|
+
],
|
|
177
|
+
"css.customData": [
|
|
178
|
+
"./node_modules/@warp-ds/elements/dist/vscode.css-custom-data.json"
|
|
179
|
+
]
|
|
180
|
+
}
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
Install the lit-plugin vscode extension and restart vscode
|
|
184
|
+
|
|
185
|
+
Now, inside any html`` tagged template literals, you will get intellisense when using Warp Elements.
|
|
186
|
+
|
|
187
|
+
```html
|
|
188
|
+
<w-button variant=""><w-button>
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
##### Using Warp Elements in a React app, v19 or later
|
|
192
|
+
|
|
193
|
+
```
|
|
194
|
+
npm install @warp-ds/elements
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
Now, inside your react components, you will get intellisense when using Warp Elements.
|
|
198
|
+
|
|
199
|
+
```html
|
|
200
|
+
<w-button variant=""><w-button>
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
##### Using Warp Elements in a React app, v18 or earlier
|
|
204
|
+
|
|
205
|
+
React 18 and earlier do not support custom elements.
|
|
206
|
+
|
|
207
|
+
If you are on React 18 or early, we strongly urge you to please consider upgrading to React v19.
|
|
208
|
+
|
|
209
|
+
If you cannot upgrade right away, Warp supplies custom element wrappers to add backwards compatibility. Use them like so:
|
|
210
|
+
|
|
211
|
+
```
|
|
212
|
+
npm install @warp-ds/elements
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
Wherever you need to use a component in your app, import the appropriate element from the React namespace
|
|
216
|
+
|
|
217
|
+
```js
|
|
218
|
+
import { Button } from "@warp-ds/elements/react/button";
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
and use the component
|
|
222
|
+
|
|
223
|
+
```js
|
|
224
|
+
<Button variant="primary"></Button>
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
you should get intellisense when using Warp Elements.
|
|
228
|
+
|
|
70
229
|
#### JetBrains products
|
|
71
230
|
|
|
72
231
|
We ship `web-types.json` which should get picked up automatically by JetBrains IDEA and similar products.
|
|
73
232
|
|
|
74
233
|
You should see code completions and inline docs for Warp elements when writing HTML.
|
|
75
234
|
|
|
235
|
+
### Ensure elements are ready (and avoid CLS and FOUCE)
|
|
236
|
+
|
|
237
|
+
To avoid issues like CLS (cumulative layout shift) and FOUCE (flash of unstyled custom elements), its important that Warp Elements is loaded before the page is rendered. For this reason, elements should not be bundled into the rest of your client side application and code and should be loaded in the document head, as early as possible (see installation above). When this is done correctly, elements will be loaded and ready about the same time as the rest of the page styles and wont cause delays in page load times. However, due to the way browsers work, a page render will occur without the components and an immediate re-render will occur with the components. This causes things to jump around on the page which in turn impacts lighthouse and other performance scores. Warp elements ships with a tool to prevent the initial render without components and only do the second, with components, render. This tool is called Warp Cloak and its usage is described below.
|
|
238
|
+
|
|
239
|
+
#### The Warp cloaking device
|
|
240
|
+
|
|
241
|
+
To use the Warp cloaking device to avoid CLS and FOUCE, simply add the warp-cloak class to your pages body, html or a wrapper div that contains all the pages visible elements (including the header and footer)
|
|
242
|
+
|
|
243
|
+
```html
|
|
244
|
+
<body class="warp-cloak">
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
That's it, your components should render just 1x, fully ready with no CLS and FOUCE.
|
|
76
248
|
|
|
77
249
|
## Releases
|
|
78
250
|
|
|
79
|
-
This project is continuously published to [NPM](https://www.npmjs.com/package/@warp-ds/elements) and [Eik](https://assets.finn.no/pkg/@warp-ds/elements) using a `next` tag (e.g. `
|
|
251
|
+
This project is continuously published to [NPM](https://www.npmjs.com/package/@warp-ds/elements) and [Eik](https://assets.finn.no/pkg/@warp-ds/elements) using a `next` tag (e.g. `2.2.0-next.13`).
|
|
80
252
|
Anyone needing to use the latest changes of this package can point to the `next` version while waiting for the stable release.
|
|
81
253
|
|
|
82
254
|
## Changelog
|
|
@@ -2528,7 +2528,7 @@
|
|
|
2528
2528
|
"name": "*",
|
|
2529
2529
|
"declaration": {
|
|
2530
2530
|
"name": "*",
|
|
2531
|
-
"
|
|
2531
|
+
"module": "packages/datepicker/datepicker.js"
|
|
2532
2532
|
}
|
|
2533
2533
|
}
|
|
2534
2534
|
]
|
|
@@ -3425,16 +3425,16 @@
|
|
|
3425
3425
|
],
|
|
3426
3426
|
"exports": [
|
|
3427
3427
|
{
|
|
3428
|
-
"kind": "
|
|
3429
|
-
"name": "
|
|
3428
|
+
"kind": "custom-element-definition",
|
|
3429
|
+
"name": "w-pageindicator",
|
|
3430
3430
|
"declaration": {
|
|
3431
3431
|
"name": "WarpPageIndicator",
|
|
3432
3432
|
"module": "packages/pageindicator/index.ts"
|
|
3433
3433
|
}
|
|
3434
3434
|
},
|
|
3435
3435
|
{
|
|
3436
|
-
"kind": "
|
|
3437
|
-
"name": "
|
|
3436
|
+
"kind": "js",
|
|
3437
|
+
"name": "WarpPageIndicator",
|
|
3438
3438
|
"declaration": {
|
|
3439
3439
|
"name": "WarpPageIndicator",
|
|
3440
3440
|
"module": "packages/pageindicator/index.ts"
|
|
@@ -3794,7 +3794,7 @@
|
|
|
3794
3794
|
"type": {
|
|
3795
3795
|
"text": "object"
|
|
3796
3796
|
},
|
|
3797
|
-
"default": "{ base: 'block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current', default: 's-text s-bg pl-8 border-1 s-border hover:s-border-hover active:s-border-active', disabled: 's-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none', invalid: 's-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!', readOnly: 's-text bg-transparent pl-0 border-0 pointer-events-none before:hidden', wrapper: 'relative', selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `, chevron: 'block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer', chevronDisabled: 'opacity-25', }"
|
|
3797
|
+
"default": "{ base: 'block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current', default: 's-text s-bg pl-8 border-1 s-border-strong hover:s-border-strong-hover active:s-border-active', disabled: 's-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none', invalid: 's-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!', readOnly: 's-text bg-transparent pl-0 border-0 pointer-events-none before:hidden', wrapper: 'relative', selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `, chevron: 'block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer', chevronDisabled: 'opacity-25', }"
|
|
3798
3798
|
},
|
|
3799
3799
|
{
|
|
3800
3800
|
"kind": "variable",
|
|
@@ -4123,7 +4123,7 @@
|
|
|
4123
4123
|
"type": {
|
|
4124
4124
|
"text": "object"
|
|
4125
4125
|
},
|
|
4126
|
-
"default": "{ // input classes base: 'block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current', // true default: 'border-1 s-text s-bg s-border hover:s-border-hover active:s-border-selected', // !isInvalid && !isDisabled && !isReadOnly disabled: 'border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none', // !isInvalid && isDisabled && !isReadOnly invalid: 'border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!', // isInvalid && !isDisabled && !isReadOnly readOnly: 'pl-0 bg-transparent pointer-events-none', // !isInvalid && !isDisabled && isReadOnly placeholder: 'placeholder:s-text-placeholder', suffix: 'pr-40', prefix: 'pl-[var(--w-prefix-width,_40px)]', // textarea classes textArea: 'min-h-[42] sm:min-h-[45]', }"
|
|
4126
|
+
"default": "{ // input classes base: 'block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current', // true default: 'border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected', // !isInvalid && !isDisabled && !isReadOnly disabled: 'border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none', // !isInvalid && isDisabled && !isReadOnly invalid: 'border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!', // isInvalid && !isDisabled && !isReadOnly readOnly: 'pl-0 bg-transparent pointer-events-none', // !isInvalid && !isDisabled && isReadOnly placeholder: 'placeholder:s-text-placeholder', suffix: 'pr-40', prefix: 'pl-[var(--w-prefix-width,_40px)]', // textarea classes textArea: 'min-h-[42] sm:min-h-[45]', }"
|
|
4127
4127
|
},
|
|
4128
4128
|
{
|
|
4129
4129
|
"kind": "variable",
|
|
@@ -5095,7 +5095,7 @@
|
|
|
5095
5095
|
"name": "*",
|
|
5096
5096
|
"declaration": {
|
|
5097
5097
|
"name": "*",
|
|
5098
|
-
"
|
|
5098
|
+
"module": "packages/slider/slider.js"
|
|
5099
5099
|
}
|
|
5100
5100
|
},
|
|
5101
5101
|
{
|
|
@@ -5103,7 +5103,7 @@
|
|
|
5103
5103
|
"name": "*",
|
|
5104
5104
|
"declaration": {
|
|
5105
5105
|
"name": "*",
|
|
5106
|
-
"
|
|
5106
|
+
"module": "packages/slider/slider-thumb.js"
|
|
5107
5107
|
}
|
|
5108
5108
|
}
|
|
5109
5109
|
]
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import { WarpAffix } from './packages/affix/index';
|
|
2
|
+
import { WarpAlert } from './packages/alert/index';
|
|
3
|
+
import { WarpAttention } from './packages/attention/index';
|
|
4
|
+
import { WarpBadge } from './packages/badge/index';
|
|
5
|
+
import { WarpBox } from './packages/box/index';
|
|
6
|
+
import { WarpBreadcrumbs } from './packages/breadcrumbs/index';
|
|
7
|
+
import { WarpButton } from './packages/button/index';
|
|
8
|
+
import { WarpCard } from './packages/card/index';
|
|
9
|
+
import { WarpCombobox } from './packages/combobox/index';
|
|
10
|
+
import { WarpDatepicker } from './packages/datepicker/datepicker';
|
|
11
|
+
import { WarpDeadToggle } from './packages/dead-toggle/index';
|
|
12
|
+
import { WarpExpandable } from './packages/expandable/index';
|
|
13
|
+
import { WarpLink } from './packages/link/index';
|
|
14
|
+
import { ModalFooter } from './packages/modal/modal-footer';
|
|
15
|
+
import { ModalHeader } from './packages/modal/modal-header';
|
|
16
|
+
import { ModalMain } from './packages/modal/modal-main';
|
|
17
|
+
import { WarpPageIndicator } from './packages/pageindicator/index';
|
|
18
|
+
import { WarpPagination } from './packages/pagination/index';
|
|
19
|
+
import { WarpPill } from './packages/pill/index';
|
|
20
|
+
import { WCheckbox } from './packages/rip-and-tear-checkbox/checkbox';
|
|
21
|
+
import { WRadio } from './packages/rip-and-tear-radio/radio';
|
|
22
|
+
import { WRadioGroup } from './packages/rip-and-tear-radio/radio-group';
|
|
23
|
+
import { WarpSelect } from './packages/select/index';
|
|
24
|
+
import { WarpSlider } from './packages/slider/slider';
|
|
25
|
+
import { WarpSliderThumb } from './packages/slider/slider-thumb';
|
|
26
|
+
import { WarpSteps, WarpStep } from './packages/steps/index';
|
|
27
|
+
import { WarpSwitch } from './packages/switch/index';
|
|
28
|
+
import { WarpTab, WarpTabs, WarpTabPanel } from './packages/tabs/index';
|
|
29
|
+
import { WarpTextField } from './packages/textfield/index';
|
|
30
|
+
import { WarpToastContainer, WarpToast } from './packages/toast/index';
|
|
31
|
+
|
|
32
|
+
declare global {
|
|
33
|
+
interface HTMLElementTagNameMap {
|
|
34
|
+
'w-badge': WarpBadge;
|
|
35
|
+
'w-affix': WarpAffix;
|
|
36
|
+
'w-alert': WarpAlert;
|
|
37
|
+
'w-attention': WarpAttention;
|
|
38
|
+
'w-box': WarpBox;
|
|
39
|
+
'w-breadcrumbs': WarpBreadcrumbs;
|
|
40
|
+
'w-button': WarpButton;
|
|
41
|
+
'w-card': WarpCard;
|
|
42
|
+
'w-combobox': WarpCombobox;
|
|
43
|
+
'w-datepicker': WarpDatepicker;
|
|
44
|
+
'w-dead-toggle': WarpDeadToggle;
|
|
45
|
+
'w-expandable': WarpExpandable;
|
|
46
|
+
'w-link': WarpLink;
|
|
47
|
+
'w-modal': ModalMain;
|
|
48
|
+
'w-modal-header': ModalHeader;
|
|
49
|
+
'w-modal-footer': ModalFooter;
|
|
50
|
+
'w-pageindicator': WarpPageIndicator;
|
|
51
|
+
'w-pagination': WarpPagination;
|
|
52
|
+
'w-pill': WarpPill;
|
|
53
|
+
'w-checkbox': WCheckbox;
|
|
54
|
+
'w-radio': WRadio;
|
|
55
|
+
'w-radio-group': WRadioGroup;
|
|
56
|
+
'w-select': WarpSelect;
|
|
57
|
+
'w-slider': WarpSlider;
|
|
58
|
+
'w-slider-thumb': WarpSliderThumb;
|
|
59
|
+
'w-steps': WarpSteps;
|
|
60
|
+
'w-step': WarpStep;
|
|
61
|
+
'w-switch': WarpSwitch;
|
|
62
|
+
'w-tab': WarpTab;
|
|
63
|
+
'w-tabs': WarpTabs;
|
|
64
|
+
'w-tab-panel': WarpTabPanel;
|
|
65
|
+
'w-textfield': WarpTextField;
|
|
66
|
+
'w-toast-container': WarpToastContainer;
|
|
67
|
+
'w-toast': WarpToast;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
declare module 'react/jsx-runtime' {
|
|
72
|
+
namespace JSX {
|
|
73
|
+
interface IntrinsicElements {
|
|
74
|
+
'w-badge': WarpBadge;
|
|
75
|
+
'w-affix': WarpAffix;
|
|
76
|
+
'w-alert': WarpAlert;
|
|
77
|
+
'w-attention': WarpAttention;
|
|
78
|
+
'w-box': WarpBox;
|
|
79
|
+
'w-breadcrumbs': WarpBreadcrumbs;
|
|
80
|
+
'w-button': WarpButton;
|
|
81
|
+
'w-card': WarpCard;
|
|
82
|
+
'w-combobox': WarpCombobox;
|
|
83
|
+
'w-datepicker': WarpDatepicker;
|
|
84
|
+
'w-dead-toggle': WarpDeadToggle;
|
|
85
|
+
'w-expandable': WarpExpandable;
|
|
86
|
+
'w-link': WarpLink;
|
|
87
|
+
'w-modal': ModalMain;
|
|
88
|
+
'w-modal-header': ModalHeader;
|
|
89
|
+
'w-modal-footer': ModalFooter;
|
|
90
|
+
'w-pageindicator': WarpPageIndicator;
|
|
91
|
+
'w-pagination': WarpPagination;
|
|
92
|
+
'w-pill': WarpPill;
|
|
93
|
+
'w-checkbox': WCheckbox;
|
|
94
|
+
'w-radio': WRadio;
|
|
95
|
+
'w-radio-group': WRadioGroup;
|
|
96
|
+
'w-select': WarpSelect;
|
|
97
|
+
'w-slider': WarpSlider;
|
|
98
|
+
'w-slider-thumb': WarpSliderThumb;
|
|
99
|
+
'w-steps': WarpSteps;
|
|
100
|
+
'w-step': WarpStep;
|
|
101
|
+
'w-switch': WarpSwitch;
|
|
102
|
+
'w-tab': WarpTab;
|
|
103
|
+
'w-tabs': WarpTabs;
|
|
104
|
+
'w-tab-panel': WarpTabPanel;
|
|
105
|
+
'w-textfield': WarpTextField;
|
|
106
|
+
'w-toast-container': WarpToastContainer;
|
|
107
|
+
'w-toast': WarpToast;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var be=Object.create;var S=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var pe=Object.getOwnPropertyNames;var ue=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var R=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports);var he=(r,e,o,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of pe(e))!ge.call(r,a)&&a!==o&&S(r,a,{get:()=>e[a],enumerable:!(t=A(e,a))||t.enumerable});return r};var me=(r,e,o)=>(o=r!=null?be(ue(r)):{},he(e||!r||!r.__esModule?S(o,"default",{value:r,enumerable:!0}):o,r));var x=(r,e,o,t)=>{for(var a=t>1?void 0:t?A(e,o):e,s=r.length-1,i;s>=0;s--)(i=r[s])&&(a=(t?i(e,o,a):i(a))||a);return t&&a&&S(e,o,a),a};var
|
|
2
|
-
`],["r","\r"],["t"," "],["v","\v"],["0","\0"]]);function ze(r){return _e.get(r)||r}var Ee=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function q(r,e=!1){return r.replace(Ee,function(o,t,a,s,i,n,l,d,h){if(t!==void 0)return"\\";if(a!==void 0)return we(a);if(s!==void 0)return ke(s);if(i!==void 0)return J(i,n);if(l!==void 0)return J(l);if(d==="0")return"\0";if(d!==void 0)return ye(d,!e);if(h!==void 0)return ze(h);throw new SyntaxError(c.errorMessages.get(c.ErrorType.EndOfString))})}p.unraw=q;p.default=q});import{html as L,LitElement as cr}from"lit";var N=function(){for(var r=[],e=arguments.length;e--;)r[e]=arguments[e];return r.reduce(function(o,t){return o.concat(typeof t=="string"?t:Array.isArray(t)?N.apply(void 0,t):typeof t=="object"&&t?Object.keys(t).map(function(a){return t[a]?a:""}):"")},[]).join(" ")};import{property as
|
|
1
|
+
var be=Object.create;var S=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var pe=Object.getOwnPropertyNames;var ue=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var R=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports);var he=(r,e,o,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of pe(e))!ge.call(r,a)&&a!==o&&S(r,a,{get:()=>e[a],enumerable:!(t=A(e,a))||t.enumerable});return r};var me=(r,e,o)=>(o=r!=null?be(ue(r)):{},he(e||!r||!r.__esModule?S(o,"default",{value:r,enumerable:!0}):o,r));var x=(r,e,o,t)=>{for(var a=t>1?void 0:t?A(e,o):e,s=r.length-1,i;s>=0;s--)(i=r[s])&&(a=(t?i(e,o,a):i(a))||a);return t&&a&&S(e,o,a),a};var H=R(v=>{"use strict";Object.defineProperty(v,"__esModule",{value:!0});v.errorMessages=v.ErrorType=void 0;var w;(function(r){r.MalformedUnicode="MALFORMED_UNICODE",r.MalformedHexadecimal="MALFORMED_HEXADECIMAL",r.CodePointLimit="CODE_POINT_LIMIT",r.OctalDeprecation="OCTAL_DEPRECATION",r.EndOfString="END_OF_STRING"})(w=v.ErrorType||(v.ErrorType={}));v.errorMessages=new Map([[w.MalformedUnicode,"malformed Unicode character escape sequence"],[w.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[w.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[w.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[w.EndOfString,"malformed escape sequence at end of string"]])});var K=R(p=>{"use strict";Object.defineProperty(p,"__esModule",{value:!0});p.unraw=p.errorMessages=p.ErrorType=void 0;var c=H();Object.defineProperty(p,"ErrorType",{enumerable:!0,get:function(){return c.ErrorType}});Object.defineProperty(p,"errorMessages",{enumerable:!0,get:function(){return c.errorMessages}});function fe(r){return!r.match(/[^a-f0-9]/i)?parseInt(r,16):NaN}function _(r,e,o){let t=fe(r);if(Number.isNaN(t)||o!==void 0&&o!==r.length)throw new SyntaxError(c.errorMessages.get(e));return t}function we(r){let e=_(r,c.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function J(r,e){let o=_(r,c.ErrorType.MalformedUnicode,4);if(e!==void 0){let t=_(e,c.ErrorType.MalformedUnicode,4);return String.fromCharCode(o,t)}return String.fromCharCode(o)}function xe(r){return r.charAt(0)==="{"&&r.charAt(r.length-1)==="}"}function ke(r){if(!xe(r))throw new SyntaxError(c.errorMessages.get(c.ErrorType.MalformedUnicode));let e=r.slice(1,-1),o=_(e,c.ErrorType.MalformedUnicode);try{return String.fromCodePoint(o)}catch(t){throw t instanceof RangeError?new SyntaxError(c.errorMessages.get(c.ErrorType.CodePointLimit)):t}}function ye(r,e=!1){if(e)throw new SyntaxError(c.errorMessages.get(c.ErrorType.OctalDeprecation));let o=parseInt(r,8);return String.fromCharCode(o)}var _e=new Map([["b","\b"],["f","\f"],["n",`
|
|
2
|
+
`],["r","\r"],["t"," "],["v","\v"],["0","\0"]]);function ze(r){return _e.get(r)||r}var Ee=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function q(r,e=!1){return r.replace(Ee,function(o,t,a,s,i,n,l,d,h){if(t!==void 0)return"\\";if(a!==void 0)return we(a);if(s!==void 0)return ke(s);if(i!==void 0)return J(i,n);if(l!==void 0)return J(l);if(d==="0")return"\0";if(d!==void 0)return ye(d,!e);if(h!==void 0)return ze(h);throw new SyntaxError(c.errorMessages.get(c.ErrorType.EndOfString))})}p.unraw=q;p.default=q});import{html as L,LitElement as cr}from"lit";var N=function(){for(var r=[],e=arguments.length;e--;)r[e]=arguments[e];return r.reduce(function(o,t){return o.concat(typeof t=="string"?t:Array.isArray(t)?N.apply(void 0,t):typeof t=="object"&&t?Object.keys(t).map(function(a){return t[a]?a:""}):"")},[]).join(" ")};import{property as C}from"lit/decorators.js";import{ifDefined as le}from"lit/directives/if-defined.js";import{css as U}from"lit";var X=U`
|
|
3
3
|
*,
|
|
4
4
|
:before,
|
|
5
5
|
:after {
|
|
@@ -2438,7 +2438,7 @@ var be=Object.create;var S=Object.defineProperty;var A=Object.getOwnPropertyDesc
|
|
|
2438
2438
|
display: none
|
|
2439
2439
|
}
|
|
2440
2440
|
}
|
|
2441
|
-
`;import{css as ve}from"lit";var
|
|
2441
|
+
`;import{css as ve}from"lit";var Z=ve`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.rounded-4{border-radius:4px}.block{display:block}.flex{display:flex}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.items-center{align-items:center}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.justify-center{justify-content:center}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-text{color:var(--w-s-color-text)}.w-40{width:4rem}.w-max{width:max-content}.pb-0{padding-bottom:0}.pl-12{padding-left:1.2rem}.pr-12{padding-right:1.2rem}.cursor-default{cursor:default}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}`;import{LitElement as Be}from"lit";import{unsafeStatic as Ye,html as Pe}from"lit/static-html.js";var Q=me(K(),1);var u=r=>typeof r=="string",Le=r=>typeof r=="function",G=new Map,W="en";function I(r){return[...Array.isArray(r)?r:[r],W]}function T(r,e,o){let t=I(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 z(()=>E("date",t,o),()=>new Intl.DateTimeFormat(t,a)).format(u(e)?new Date(e):e)}function Ce(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 T(r,e,t)}function j(r,e,o){let t=I(r);return z(()=>E("number",t,o),()=>new Intl.NumberFormat(t,o)).format(e)}function V(r,e,o,{offset:t=0,...a}){var n,l;let s=I(r),i=e?z(()=>E("plural-ordinal",s),()=>new Intl.PluralRules(s,{type:"ordinal"})):z(()=>E("plural-cardinal",s),()=>new Intl.PluralRules(s,{type:"cardinal"}));return(l=(n=a[o])!=null?n:a[i.select(o-t)])!=null?l:a.other}function z(r,e){let o=r(),t=G.get(o);return t||(t=e(),G.set(o,t)),t}function E(r,e,o){let t=e.join("-");return`${r}-${t}-${JSON.stringify(o)}`}var ee=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,re="%__lingui_octothorpe__%",Me=(r,e,o={})=>{let t=e||r,a=i=>typeof i=="object"?i:o[i],s=(i,n)=>{let l=Object.keys(o).length?a("number"):void 0,d=j(t,i,l);return n.replace(new RegExp(re,"g"),d)};return{plural:(i,n)=>{let{offset:l=0}=n,d=V(t,!1,i,n);return s(i-l,d)},selectordinal:(i,n)=>{let{offset:l=0}=n,d=V(t,!0,i,n);return s(i-l,d)},select:Oe,number:(i,n)=>j(t,i,a(n)||{style:n}),date:(i,n)=>T(t,i,a(n)||n),time:(i,n)=>Ce(t,i,a(n)||n)}},Oe=(r,e)=>{var o;return(o=e[r])!=null?o:e.other};function Se(r,e,o){return(t={},a)=>{let s=Me(e,o,a),i=(l,d=!1)=>Array.isArray(l)?l.reduce((h,k)=>{if(k==="#"&&d)return h+re;if(u(k))return h+k;let[P,m,$]=k,M={};m==="plural"||m==="selectordinal"||m==="select"?Object.entries($).forEach(([O,de])=>{M[O]=i(de,m==="plural"||m==="selectordinal")}):M=$;let y;if(m){let O=s[m];y=O(t[P],M)}else y=t[P];return y==null?h:h+y},""):l,n=i(r);return u(n)&&ee.test(n)?(0,Q.unraw)(n):u(n)?n:n?String(n):""}}var Ne=Object.defineProperty,je=(r,e,o)=>e in r?Ne(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,De=(r,e,o)=>(je(r,typeof e!="symbol"?e+"":e,o),o),D=class{constructor(){De(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}},Fe=Object.defineProperty,Ie=(r,e,o)=>e in r?Fe(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,f=(r,e,o)=>(Ie(r,typeof e!="symbol"?e+"":e,o),o),F=class extends D{constructor(e){var o;super(),f(this,"_locale",""),f(this,"_locales"),f(this,"_localeData",{}),f(this,"_messages",{}),f(this,"_missing"),f(this,"_messageCompiler"),f(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:W,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=""),u(e)||(o=e.values||o,a=e.message,e=e.id);let s=this.messages[e],i=s===void 0,n=this._missing;if(n&&i)return Le(n)?n(this._locale,e):n;i&&this.emit("missing",{id:e,locale:this._locale});let l=s||a||e;return u(l)&&(this._messageCompiler?l=this._messageCompiler(l):console.warn(`Uncompiled message detected! Message:
|
|
2442
2442
|
|
|
2443
2443
|
> ${l}
|
|
2444
2444
|
|
|
@@ -2446,7 +2446,7 @@ That means you use raw catalog or your catalog doesn't have a translation for th
|
|
|
2446
2446
|
ICU features such as interpolation and plurals will not work properly for that message.
|
|
2447
2447
|
|
|
2448
2448
|
Please compile your catalog first.
|
|
2449
|
-
`)),u(l)&&ee.test(l)?JSON.parse(`"${l}"`):u(l)?l:Se(l,this._locale,this._locales)(o,t==null?void 0:t.formats)}date(e,o){return
|
|
2449
|
+
`)),u(l)&&ee.test(l)?JSON.parse(`"${l}"`):u(l)?l:Se(l,this._locale,this._locales)(o,t==null?void 0:t.formats)}date(e,o){return T(this._locales||this._locale,e,o)}number(e,o){return j(this._locales||this._locale,e,o)}};function Te(r={}){return new F(r)}var b=Te();var $e=JSON.parse('{"icon.title.search":["Forst\xF8rrelsesglass"]}'),Ae=JSON.parse('{"icon.title.search":["Magnifying glass"]}'),Re=JSON.parse('{"icon.title.search":["Suurennuslasi"]}'),Ue=JSON.parse('{"icon.title.search":["Forst\xF8rrelsesglas"]}'),Xe=JSON.parse('{"icon.title.search":["F\xF6rstoringsglas"]}'),oe=["en","nb","fi","da","sv"],te="en",Ze=()=>{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},ae=()=>{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":te},B=r=>oe.find(e=>r===e||r.toLowerCase().includes(e))||ae();function He(){var r;if(typeof window=="undefined"){let e=Ze();return B(e)}try{let e=(r=document==null?void 0:document.documentElement)==null?void 0:r.lang,o=ae();return oe.includes(e)?B(e!=null?e:o):(console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname"),B(o))}catch(e){return console.warn("could not detect locale, falling back to source locale",e),te}}var Je=(r,e,o,t,a,s)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?s:e,qe=(r,e,o,t,a)=>{let s=He(),i=Je(s,r,e,o,t,a);b.load(s,i),b.activate(s)};qe(Ae,$e,Re,Ue,Xe);var Ke=class extends Be{render(){let r=b.t({message:"Magnifying glass",id:"icon.title.search",comment:"Title for search icon"});return Pe`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-search-16-part">${Ye(`<title>${r}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.905 12.102A6.042 6.042 0 1 0 4.18.981a6.042 6.042 0 0 0 4.726 11.121Zm1.909-1.289L15.5 15.5"></path></svg>`}};customElements.get("w-icon-search-16")||customElements.define("w-icon-search-16",Ke);import{LitElement as Ge}from"lit";import{unsafeStatic as Ve,html as Qe}from"lit/static-html.js";var We=JSON.parse('{"icon.title.close":["Kryss"]}'),er=JSON.parse('{"icon.title.close":["Cross"]}'),rr=JSON.parse('{"icon.title.close":["Rasti"]}'),or=JSON.parse('{"icon.title.close":["Kryds"]}'),tr=JSON.parse('{"icon.title.close":["Kryss"]}'),ie=["en","nb","fi","da","sv"],ne="en",ar=()=>{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},se=()=>{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":ne},Y=r=>ie.find(e=>r===e||r.toLowerCase().includes(e))||se();function ir(){var r;if(typeof window=="undefined"){let e=ar();return Y(e)}try{let e=(r=document==null?void 0:document.documentElement)==null?void 0:r.lang,o=se();return ie.includes(e)?Y(e!=null?e:o):(console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname"),Y(o))}catch(e){return console.warn("could not detect locale, falling back to source locale",e),ne}}var nr=(r,e,o,t,a,s)=>r==="nb"?o:r==="fi"?t:r==="da"?a:r==="sv"?s:e,sr=(r,e,o,t,a)=>{let s=ir(),i=nr(s,r,e,o,t,a);b.load(s,i),b.activate(s)};sr(er,We,rr,or,tr);var lr=class extends Ge{render(){let r=b.t({message:"Cross",id:"icon.title.close",comment:"Title for close icon"});return Qe`<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">${Ve(`<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",lr);var ce="absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ",dr={wrapper:ce+"right-0",wrapperWithLabel:"w-max pr-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs s-text"},br={wrapper:ce+"left-0",wrapperWithLabel:"w-max pl-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs s-text"},g=class extends cr{constructor(){super(...arguments);this.clear=!1;this.search=!1}get _classBase(){return this.slot==="suffix"?dr:br}get _classes(){return N([this._classBase.wrapper,this.label?this._classBase.wrapperWithLabel:this._classBase.wrapperWithIcon])}get _searchButton(){return L`
|
|
2450
2450
|
<button aria-label="${le(this.ariaLabel)}" class="${this._classes}" type="submit">
|
|
2451
2451
|
<w-icon-search-16></w-icon-search-16>
|
|
2452
2452
|
</button>
|
|
@@ -2458,5 +2458,5 @@ Please compile your catalog first.
|
|
|
2458
2458
|
<div class="${this._classes}">
|
|
2459
2459
|
<span class="${this._classBase.label}">${this.label}</span>
|
|
2460
2460
|
</div>
|
|
2461
|
-
`}get _markup(){if(this.label)return this._text;if(this.search)return this._searchButton;if(this.clear)return this._clearButton}render(){return L`${this._markup}`}};g.styles=[X,
|
|
2461
|
+
`}get _markup(){if(this.label)return this._text;if(this.search)return this._searchButton;if(this.clear)return this._clearButton}render(){return L`${this._markup}`}};g.styles=[X,Z],x([C({attribute:"aria-label"})],g.prototype,"ariaLabel",2),x([C({type:Boolean})],g.prototype,"clear",2),x([C({type:Boolean})],g.prototype,"search",2),x([C()],g.prototype,"label",2);customElements.get("w-affix")||customElements.define("w-affix",g);export{g as WarpAffix,br as ccPrefix,dr as ccSuffix};
|
|
2462
2462
|
//# sourceMappingURL=index.js.map
|