@warp-ds/elements 2.10.0-next.20 → 2.10.0-next.21
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 +38 -0
- package/dist/docs/slider/api.md +16 -0
- package/dist/docs/slider/slider.md +16 -0
- package/dist/index.d.ts +8 -0
- package/dist/packages/checkbox-group/checkbox-group.js +6 -6
- package/dist/packages/checkbox-group/checkbox-group.js.map +2 -2
- package/dist/packages/checkbox-group/checkbox-group.test.js +93 -6
- package/dist/packages/combobox/combobox.test.js +101 -0
- package/dist/packages/radio-group/radio-group.js +1 -1
- package/dist/packages/radio-group/radio-group.js.map +2 -2
- package/dist/packages/radio-group/radio-group.test.js +78 -9
- package/dist/packages/select/locales/da/messages.mjs +1 -1
- package/dist/packages/select/locales/en/messages.mjs +1 -1
- package/dist/packages/select/locales/fi/messages.mjs +1 -1
- package/dist/packages/select/locales/nb/messages.mjs +1 -1
- package/dist/packages/select/locales/sv/messages.mjs +1 -1
- package/dist/packages/select/select.js +5 -5
- package/dist/packages/select/select.js.map +2 -2
- package/dist/packages/select/select.test.js +52 -0
- package/dist/packages/slider/locales/da/messages.mjs +1 -1
- package/dist/packages/slider/locales/en/messages.mjs +1 -1
- package/dist/packages/slider/locales/fi/messages.mjs +1 -1
- package/dist/packages/slider/locales/nb/messages.mjs +1 -1
- package/dist/packages/slider/locales/sv/messages.mjs +1 -1
- package/dist/packages/slider/react.d.ts +1 -1
- package/dist/packages/slider/slider.d.ts +8 -0
- package/dist/packages/slider/slider.js +52 -13
- package/dist/packages/slider/slider.js.map +3 -3
- package/dist/packages/slider/slider.react.stories.d.ts +1 -1
- package/dist/packages/slider/slider.stories.d.ts +2 -0
- package/dist/packages/slider/slider.stories.js +36 -0
- package/dist/packages/slider/slider.test.js +107 -0
- package/dist/packages/textarea/locales/da/messages.mjs +1 -1
- package/dist/packages/textarea/locales/en/messages.mjs +1 -1
- package/dist/packages/textarea/locales/fi/messages.mjs +1 -1
- package/dist/packages/textarea/locales/nb/messages.mjs +1 -1
- package/dist/packages/textarea/locales/sv/messages.mjs +1 -1
- package/dist/packages/textarea/textarea.d.ts +1 -0
- package/dist/packages/textarea/textarea.js +20 -20
- package/dist/packages/textarea/textarea.js.map +4 -4
- package/dist/packages/textarea/textarea.test.js +73 -0
- package/dist/packages/textfield/locales/da/messages.mjs +1 -1
- package/dist/packages/textfield/locales/en/messages.mjs +1 -1
- package/dist/packages/textfield/locales/fi/messages.mjs +1 -1
- package/dist/packages/textfield/locales/nb/messages.mjs +1 -1
- package/dist/packages/textfield/locales/sv/messages.mjs +1 -1
- package/dist/packages/textfield/textfield.js +11 -11
- package/dist/packages/textfield/textfield.js.map +2 -2
- package/dist/packages/textfield/textfield.test.js +71 -0
- package/dist/web-types.json +13 -2
- package/eik/index.js +11 -11
- package/package.json +1 -1
|
@@ -1,8 +1,15 @@
|
|
|
1
|
+
import { i18n } from "@lingui/core";
|
|
1
2
|
import { userEvent } from "vitest/browser";
|
|
2
3
|
import { html } from "lit";
|
|
3
4
|
import { expect, test, vi } from "vitest";
|
|
4
5
|
import { render } from "vitest-browser-lit";
|
|
5
6
|
import "./textarea.js";
|
|
7
|
+
import { messages } from "./locales/en/messages.mjs";
|
|
8
|
+
import { messages as nbMessages } from "./locales/nb/messages.mjs";
|
|
9
|
+
// Initialize i18n with English locale for tests
|
|
10
|
+
i18n.load("en", messages);
|
|
11
|
+
i18n.load("nb", nbMessages);
|
|
12
|
+
i18n.activate("en");
|
|
6
13
|
test("renders the textarea", async () => {
|
|
7
14
|
const component = html `<w-textarea label="Test label"></w-textarea>`;
|
|
8
15
|
const page = render(component);
|
|
@@ -209,3 +216,69 @@ test("restores original help text when validation passes", async () => {
|
|
|
209
216
|
await expect.poll(() => wTextArea.invalid).toBe(false);
|
|
210
217
|
await expect.poll(() => wTextArea.helpText).toBe("Enter your message");
|
|
211
218
|
});
|
|
219
|
+
test("renders optional indicator as 'Optional' without parentheses", async () => {
|
|
220
|
+
const page = render(html `<w-textarea label="Message" optional></w-textarea>`);
|
|
221
|
+
await expect.element(page.getByText("Optional")).toBeVisible();
|
|
222
|
+
expect(page.getByText("(optional)").query()).toBeNull();
|
|
223
|
+
});
|
|
224
|
+
test("does not render optional indicator when both required and optional are set", async () => {
|
|
225
|
+
const page = render(html `<w-textarea label="Message" required optional></w-textarea>`);
|
|
226
|
+
await expect.element(page.getByText("Message")).toBeVisible();
|
|
227
|
+
expect(page.getByText("Optional").query()).toBeNull();
|
|
228
|
+
});
|
|
229
|
+
test("includes optional indicator in the accessible name", async () => {
|
|
230
|
+
const page = render(html `<w-textarea label="Message" optional></w-textarea>`);
|
|
231
|
+
await expect
|
|
232
|
+
.element(page.getByRole("textbox", { name: /Message.*Optional/ }))
|
|
233
|
+
.toBeVisible();
|
|
234
|
+
});
|
|
235
|
+
test("removes optional indicator when required is added dynamically", async () => {
|
|
236
|
+
const page = render(html `<w-textarea
|
|
237
|
+
label="Message"
|
|
238
|
+
optional
|
|
239
|
+
data-testid="field"
|
|
240
|
+
></w-textarea>`);
|
|
241
|
+
await expect.element(page.getByText("Optional")).toBeVisible();
|
|
242
|
+
const el = page.getByTestId("field").element();
|
|
243
|
+
el.required = true;
|
|
244
|
+
await el.updateComplete;
|
|
245
|
+
expect(page.getByText("Optional").query()).toBeNull();
|
|
246
|
+
});
|
|
247
|
+
test("shows optional indicator when required is removed dynamically", async () => {
|
|
248
|
+
const page = render(html `<w-textarea
|
|
249
|
+
label="Message"
|
|
250
|
+
required
|
|
251
|
+
optional
|
|
252
|
+
data-testid="field"
|
|
253
|
+
></w-textarea>`);
|
|
254
|
+
expect(page.getByText("Optional").query()).toBeNull();
|
|
255
|
+
const el = page.getByTestId("field").element();
|
|
256
|
+
el.required = false;
|
|
257
|
+
await el.updateComplete;
|
|
258
|
+
await expect.element(page.getByText("Optional")).toBeVisible();
|
|
259
|
+
});
|
|
260
|
+
test("does not render optional indicator when there is no label", async () => {
|
|
261
|
+
const page = render(html `<w-textarea aria-label="Message" optional></w-textarea>`);
|
|
262
|
+
await expect.element(page.getByLabelText("Message")).toBeVisible();
|
|
263
|
+
expect(page.getByText("Optional").query()).toBeNull();
|
|
264
|
+
});
|
|
265
|
+
test("excludes optional indicator from accessible name when required suppresses it", async () => {
|
|
266
|
+
const page = render(html `<w-textarea label="Message" required optional></w-textarea>`);
|
|
267
|
+
const textarea = page.getByRole("textbox", { name: "Message" });
|
|
268
|
+
await expect.element(textarea).toBeVisible();
|
|
269
|
+
// Verify "Optional" is not part of the accessible name
|
|
270
|
+
expect(page.getByRole("textbox", { name: /Optional/ }).query()).toBeNull();
|
|
271
|
+
});
|
|
272
|
+
test("renders localized optional text based on active locale", async () => {
|
|
273
|
+
const originalLang = document.documentElement.lang;
|
|
274
|
+
document.documentElement.lang = "nb";
|
|
275
|
+
const page = render(html `<w-textarea
|
|
276
|
+
label="Message"
|
|
277
|
+
optional
|
|
278
|
+
data-testid="field"
|
|
279
|
+
></w-textarea>`);
|
|
280
|
+
const el = page.getByTestId("field").element();
|
|
281
|
+
await el.updateComplete;
|
|
282
|
+
await expect.element(page.getByText("Valgfri")).toBeVisible();
|
|
283
|
+
document.documentElement.lang = originalLang;
|
|
284
|
+
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*eslint-disable*/ export const messages = JSON.parse("{\"textfield.label.optional\":[\"
|
|
1
|
+
/*eslint-disable*/ export const messages = JSON.parse("{\"textfield.label.optional\":[\"Valgfri\"]}");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*eslint-disable*/ export const messages = JSON.parse("{\"textfield.label.optional\":[\"
|
|
1
|
+
/*eslint-disable*/ export const messages = JSON.parse("{\"textfield.label.optional\":[\"Optional\"]}");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*eslint-disable*/ export const messages = JSON.parse("{\"textfield.label.optional\":[\"
|
|
1
|
+
/*eslint-disable*/ export const messages = JSON.parse("{\"textfield.label.optional\":[\"Valinnainen\"]}");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*eslint-disable*/ export const messages = JSON.parse("{\"textfield.label.optional\":[\"
|
|
1
|
+
/*eslint-disable*/ export const messages = JSON.parse("{\"textfield.label.optional\":[\"Valgfri\"]}");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*eslint-disable*/ export const messages = JSON.parse("{\"textfield.label.optional\":[\"
|
|
1
|
+
/*eslint-disable*/ export const messages = JSON.parse("{\"textfield.label.optional\":[\"Valfritt\"]}");
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var je=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var ie=o=>{throw TypeError(o)};var p=(o,e,r,t)=>{for(var a=t>1?void 0:t?Ie(e,r):e,l=o.length-1,s;l>=0;l--)(s=o[l])&&(a=(t?s(e,r,a):s(a))||a);return t&&a&&je(e,r,a),a};var G=(o,e,r)=>e.has(o)||ie("Cannot "+r);var ne=(o,e,r)=>(G(o,e,"read from private field"),r?r.call(o):e.get(o)),J=(o,e,r)=>e.has(o)?ie("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,r),se=(o,e,r,t)=>(G(o,e,"write to private field"),t?t.call(o,r):e.set(o,r),r),le=(o,e,r)=>(G(o,e,"access private method"),r);var K=function(){for(var o=[],e=arguments.length;e--;)o[e]=arguments[e];return o.reduce(function(r,t){return r.concat(typeof t=="string"?t:Array.isArray(t)?K.apply(void 0,t):typeof t=="object"&&t?Object.keys(t).map(function(a){return t[a]?a:""}):"")},[]).join(" ")};var L=o=>typeof o=="string",Ye=o=>typeof o=="function",de=new Map,he="en";function re(o){return[...Array.isArray(o)?o:[o],he]}function te(o,e,r){let t=re(o);r||(r="default");let a;if(typeof r=="string")switch(a={day:"numeric",month:"short",year:"numeric"},r){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=r;return X(()=>Z("date",t,r),()=>new Intl.DateTimeFormat(t,a)).format(L(e)?new Date(e):e)}function De(o,e,r){let t;if(r||(r="default"),typeof r=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=r;return te(o,e,t)}function Q(o,e,r){let t=re(o);return X(()=>Z("number",t,r),()=>new Intl.NumberFormat(t,r)).format(e)}function ce(o,e,r,{offset:t=0,...a}){let l=re(o),s=e?X(()=>Z("plural-ordinal",l),()=>new Intl.PluralRules(l,{type:"ordinal"})):X(()=>Z("plural-cardinal",l),()=>new Intl.PluralRules(l,{type:"cardinal"}));return a[r]??a[s.select(r-t)]??a.other}function X(o,e){let r=o(),t=de.get(r);return t||(t=e(),de.set(r,t)),t}function Z(o,e,r){let t=e.join("-");return`${o}-${t}-${JSON.stringify(r)}`}var pe=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,ue=o=>o.replace(/\\u([a-fA-F0-9]{4})|\\x([a-fA-F0-9]{2})/g,(e,r,t)=>{if(r){let a=parseInt(r,16);return String.fromCharCode(a)}else{let a=parseInt(t,16);return String.fromCharCode(a)}}),be="%__lingui_octothorpe__%",He=(o,e,r={})=>{let t=e||o,a=s=>typeof s=="object"?s:r[s],l=(s,n)=>{let b=Object.keys(r).length?a("number"):void 0,f=Q(t,s,b);return n.replace(new RegExp(be,"g"),f)};return{plural:(s,n)=>{let{offset:b=0}=n,f=ce(t,!1,s,n);return l(s-b,f)},selectordinal:(s,n)=>{let{offset:b=0}=n,f=ce(t,!0,s,n);return l(s-b,f)},select:Xe,number:(s,n)=>Q(t,s,a(n)||{style:n}),date:(s,n)=>te(t,s,a(n)||n),time:(s,n)=>De(t,s,a(n)||n)}},Xe=(o,e)=>e[o]??e.other;function Ze(o,e,r){return(t={},a)=>{let l=He(e,r,a),s=(b,f=!1)=>Array.isArray(b)?b.reduce((C,M)=>{if(M==="#"&&f)return C+be;if(L(M))return C+M;let[
|
|
1
|
+
var je=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var ie=o=>{throw TypeError(o)};var p=(o,e,r,t)=>{for(var a=t>1?void 0:t?Ie(e,r):e,l=o.length-1,s;l>=0;l--)(s=o[l])&&(a=(t?s(e,r,a):s(a))||a);return t&&a&&je(e,r,a),a};var G=(o,e,r)=>e.has(o)||ie("Cannot "+r);var ne=(o,e,r)=>(G(o,e,"read from private field"),r?r.call(o):e.get(o)),J=(o,e,r)=>e.has(o)?ie("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,r),se=(o,e,r,t)=>(G(o,e,"write to private field"),t?t.call(o,r):e.set(o,r),r),le=(o,e,r)=>(G(o,e,"access private method"),r);var K=function(){for(var o=[],e=arguments.length;e--;)o[e]=arguments[e];return o.reduce(function(r,t){return r.concat(typeof t=="string"?t:Array.isArray(t)?K.apply(void 0,t):typeof t=="object"&&t?Object.keys(t).map(function(a){return t[a]?a:""}):"")},[]).join(" ")};var L=o=>typeof o=="string",Ye=o=>typeof o=="function",de=new Map,he="en";function re(o){return[...Array.isArray(o)?o:[o],he]}function te(o,e,r){let t=re(o);r||(r="default");let a;if(typeof r=="string")switch(a={day:"numeric",month:"short",year:"numeric"},r){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=r;return X(()=>Z("date",t,r),()=>new Intl.DateTimeFormat(t,a)).format(L(e)?new Date(e):e)}function De(o,e,r){let t;if(r||(r="default"),typeof r=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=r;return te(o,e,t)}function Q(o,e,r){let t=re(o);return X(()=>Z("number",t,r),()=>new Intl.NumberFormat(t,r)).format(e)}function ce(o,e,r,{offset:t=0,...a}){let l=re(o),s=e?X(()=>Z("plural-ordinal",l),()=>new Intl.PluralRules(l,{type:"ordinal"})):X(()=>Z("plural-cardinal",l),()=>new Intl.PluralRules(l,{type:"cardinal"}));return a[r]??a[s.select(r-t)]??a.other}function X(o,e){let r=o(),t=de.get(r);return t||(t=e(),de.set(r,t)),t}function Z(o,e,r){let t=e.join("-");return`${o}-${t}-${JSON.stringify(r)}`}var pe=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,ue=o=>o.replace(/\\u([a-fA-F0-9]{4})|\\x([a-fA-F0-9]{2})/g,(e,r,t)=>{if(r){let a=parseInt(r,16);return String.fromCharCode(a)}else{let a=parseInt(t,16);return String.fromCharCode(a)}}),be="%__lingui_octothorpe__%",He=(o,e,r={})=>{let t=e||o,a=s=>typeof s=="object"?s:r[s],l=(s,n)=>{let b=Object.keys(r).length?a("number"):void 0,f=Q(t,s,b);return n.replace(new RegExp(be,"g"),f)};return{plural:(s,n)=>{let{offset:b=0}=n,f=ce(t,!1,s,n);return l(s-b,f)},selectordinal:(s,n)=>{let{offset:b=0}=n,f=ce(t,!0,s,n);return l(s-b,f)},select:Xe,number:(s,n)=>Q(t,s,a(n)||{style:n}),date:(s,n)=>te(t,s,a(n)||n),time:(s,n)=>De(t,s,a(n)||n)}},Xe=(o,e)=>e[o]??e.other;function Ze(o,e,r){return(t={},a)=>{let l=He(e,r,a),s=(b,f=!1)=>Array.isArray(b)?b.reduce((C,M)=>{if(M==="#"&&f)return C+be;if(L(M))return C+M;let[O,y,E]=M,S={};y==="plural"||y==="selectordinal"||y==="select"?Object.entries(E).forEach(([$,N])=>{S[$]=s(N,y==="plural"||y==="selectordinal")}):S=E;let w;if(y){let $=l[y];w=$(t[O],S)}else w=t[O];return w==null?C:C+w},""):b,n=s(o);return L(n)&&pe.test(n)?ue(n):L(n)?n:n?String(n):""}}var Re=Object.defineProperty,qe=(o,e,r)=>e in o?Re(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,Ue=(o,e,r)=>(qe(o,typeof e!="symbol"?e+"":e,r),r),W=class{constructor(){Ue(this,"_events",{})}on(e,r){var t;return(t=this._events)[e]??(t[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let t=this._getListeners(e);if(!t)return;let a=t.indexOf(r);~a&&t.splice(a,1)}emit(e,...r){let t=this._getListeners(e);t&&t.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},Te=Object.defineProperty,Be=(o,e,r)=>e in o?Te(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,V=(o,e,r)=>(Be(o,typeof e!="symbol"?e+"":e,r),r),ee=class extends W{constructor(e){super(),V(this,"_locale",""),V(this,"_locales"),V(this,"_localeData",{}),V(this,"_messages",{}),V(this,"_missing"),V(this,"_messageCompiler"),V(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(e.locale??he,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){return this._messages[this._locale]??{}}get localeData(){return this._localeData[this._locale]??{}}_loadLocaleData(e,r){let t=this._localeData[e];t?Object.assign(t,r):this._localeData[e]=r}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,r){typeof e=="string"?this._loadLocaleData(e,r):Object.keys(e).forEach(t=>this._loadLocaleData(t,e[t])),this.emit("change")}_load(e,r){let t=this._messages[e];t?Object.assign(t,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:t}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=t,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,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?.message;e||(e=""),L(e)||(r=e.values||r,a=e.message,e=e.id);let l=this.messages[e],s=l===void 0,n=this._missing;if(n&&s)return Ye(n)?n(this._locale,e):n;s&&this.emit("missing",{id:e,locale:this._locale});let b=l||a||e;return L(b)&&(this._messageCompiler?b=this._messageCompiler(b):console.warn(`Uncompiled message detected! Message:
|
|
2
2
|
|
|
3
3
|
> ${b}
|
|
4
4
|
|
|
@@ -6,7 +6,7 @@ That means you use raw catalog or your catalog doesn't have a translation for th
|
|
|
6
6
|
ICU features such as interpolation and plurals will not work properly for that message.
|
|
7
7
|
|
|
8
8
|
Please compile your catalog first.
|
|
9
|
-
`)),L(b)&&pe.test(b)?ue(b):L(b)?b:Ze(b,this._locale,this._locales)(r,t?.formats)}date(e,r){return te(this._locales||this._locale,e,r)}number(e,r){return Q(this._locales||this._locale,e,r)}};function Ge(o={}){return new ee(o)}var _=Ge();var h=function(o,e,r,t){if(r==="a"&&!t)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?o!==e||!t:!e.has(o))throw new TypeError("Cannot read private member from an object whose class did not declare it");return r==="m"?t:r==="a"?t.call(o):t?t.value:e.get(o)},
|
|
9
|
+
`)),L(b)&&pe.test(b)?ue(b):L(b)?b:Ze(b,this._locale,this._locales)(r,t?.formats)}date(e,r){return te(this._locales||this._locale,e,r)}number(e,r){return Q(this._locales||this._locale,e,r)}};function Ge(o={}){return new ee(o)}var _=Ge();var h=function(o,e,r,t){if(r==="a"&&!t)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?o!==e||!t:!e.has(o))throw new TypeError("Cannot read private member from an object whose class did not declare it");return r==="m"?t:r==="a"?t.call(o):t?t.value:e.get(o)},m=function(o,e,r,t,a){if(t==="m")throw new TypeError("Private method is not writable");if(t==="a"&&!a)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?o!==e||!a:!e.has(o))throw new TypeError("Cannot write private member to an object whose class did not declare it");return t==="a"?a.call(o,r):a?a.value=r:e.set(o,r),r};function ge(o){var e,r,t,a,l,s,n,b,f,C,M,O,y,E,S,w,$,N,U;class Ae extends o{constructor(...i){var c,g,v;super(...i),e.add(this),this.internals=this.attachInternals(),r.set(this,!1),t.set(this,!1),a.set(this,!1),l.set(this,void 0),s.set(this,void 0),n.set(this,!0),f.set(this,""),C.set(this,()=>{m(this,a,!0,"f"),m(this,r,!0,"f"),h(this,e,"m",w).call(this)}),M.set(this,()=>{m(this,r,!1,"f"),h(this,e,"m",$).call(this,this.shouldFormValueUpdate()?h(this,f,"f"):""),!this.validity.valid&&h(this,a,"f")&&m(this,t,!0,"f");let z=h(this,e,"m",w).call(this);this.validationMessageCallback&&this.validationMessageCallback(z?this.internals.validationMessage:"")}),O.set(this,()=>{var z;h(this,n,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),m(this,n,!1,"f")),m(this,a,!0,"f"),m(this,t,!0,"f"),h(this,e,"m",w).call(this),(z=this===null||this===void 0?void 0:this.validationMessageCallback)===null||z===void 0||z.call(this,this.showError?this.internals.validationMessage:"")}),y.set(this,void 0),E.set(this,!1),S.set(this,Promise.resolve()),(c=this.addEventListener)===null||c===void 0||c.call(this,"focus",h(this,C,"f")),(g=this.addEventListener)===null||g===void 0||g.call(this,"blur",h(this,M,"f")),(v=this.addEventListener)===null||v===void 0||v.call(this,"invalid",h(this,O,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let i=this.validators.map(v=>v.attribute).flat(),c=super.observedAttributes||[];return[...new Set([...c,...i])]}static getValidator(i){return this.validators.find(c=>c.attribute===i)||null}static getValidators(i){return this.validators.filter(c=>{var g;if(c.attribute===i||!((g=c.attribute)===null||g===void 0)&&g.includes(i))return!0})}get form(){return this.internals.form}get showError(){return h(this,e,"m",w).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(i,c,g){var v;(v=super.attributeChangedCallback)===null||v===void 0||v.call(this,i,c,g);let j=this.constructor.getValidators(i);j?.length&&this.validationTarget&&this.setValue(h(this,f,"f"))}setValue(i){var c;m(this,t,!1,"f"),(c=this.validationMessageCallback)===null||c===void 0||c.call(this,""),m(this,f,i,"f");let v=this.shouldFormValueUpdate()?i:null;this.internals.setFormValue(v),h(this,e,"m",$).call(this,v),this.valueChangedCallback&&this.valueChangedCallback(v),h(this,e,"m",w).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(i=>i(h(this,S,"f")))}formResetCallback(){var i,c;m(this,a,!1,"f"),m(this,t,!1,"f"),h(this,e,"m",w).call(this),(i=this.resetFormControl)===null||i===void 0||i.call(this),(c=this.validationMessageCallback)===null||c===void 0||c.call(this,h(this,e,"m",w).call(this)?this.validationMessage:"")}}return r=new WeakMap,t=new WeakMap,a=new WeakMap,l=new WeakMap,s=new WeakMap,n=new WeakMap,f=new WeakMap,C=new WeakMap,M=new WeakMap,O=new WeakMap,y=new WeakMap,E=new WeakMap,S=new WeakMap,e=new WeakSet,b=function(){let i=this.getRootNode(),c=`${this.localName}[name="${this.getAttribute("name")}"]`;return i.querySelectorAll(c)},w=function(){if(this.hasAttribute("disabled"))return!1;let i=h(this,t,"f")||h(this,a,"f")&&!this.validity.valid&&!h(this,r,"f");return i&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),i},$=function(i){let c=this.constructor,g={},v=c.validators,z=[],j=v.some(k=>k.isValid instanceof Promise);h(this,E,"f")||(m(this,S,new Promise(k=>{m(this,y,k,"f")}),"f"),m(this,E,!0,"f")),h(this,l,"f")&&(h(this,l,"f").abort(),m(this,s,h(this,l,"f"),"f"));let I=new AbortController;m(this,l,I,"f");let Y,ae=!1;v.length&&(v.forEach(k=>{let T=k.key||"customError",F=k.isValid(this,i,I.signal);F instanceof Promise?(z.push(F),F.then(B=>{B!=null&&(g[T]=!B,Y=h(this,e,"m",U).call(this,k,i),h(this,e,"m",N).call(this,g,Y))})):(g[T]=!F,this.validity[T]!==!F&&(ae=!0),!F&&!Y&&(Y=h(this,e,"m",U).call(this,k,i)))}),Promise.allSettled(z).then(()=>{var k;I?.signal.aborted||(m(this,E,!1,"f"),(k=h(this,y,"f"))===null||k===void 0||k.call(this))}),(ae||!j)&&h(this,e,"m",N).call(this,g,Y))},N=function(i,c){if(this.validationTarget)this.internals.setValidity(i,c,this.validationTarget),m(this,n,!1,"f");else{if(this.internals.setValidity(i,c),this.internals.validity.valid)return;m(this,n,!0,"f")}},U=function(i,c){if(this.validityCallback){let g=this.validityCallback(i.key||"customError");if(g)return g}return i.message instanceof Function?i.message(this,c):i.message},Ae}import{html as D,LitElement as Oe,nothing as Fe}from"lit";import{property as u,query as ir}from"lit/decorators.js";import{classMap as nr}from"lit/directives/class-map.js";import{ifDefined as x}from"lit/directives/if-defined.js";var Je=["en","nb","fi","da","sv"],oe="en",R=o=>Je.find(e=>o===e||o.toLowerCase().includes(e))||oe;function fe(){if(typeof window>"u"){let o=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return R(o)}try{let o=ve(document);if(o)return R(o);let e=er();if(e)return R(e);let r=ve(ye());return r?R(r):oe}catch(o){return console.warn("could not detect locale, falling back to source locale",o),oe}}var we=(o,e,r,t,a)=>{_.load("en",o),_.load("nb",e),_.load("fi",r),_.load("da",t),_.load("sv",a);let l=fe();_.activate(l),xe(),Qe()},Ke="warp-i18n-change";function xe(){typeof window>"u"||window.dispatchEvent(new Event(Ke))}var me=!1;function Qe(){if(me||typeof window>"u"||!document?.documentElement)return;me=!0;let o=()=>{let a=fe();_.locale!==a&&(_.activate(a),xe())},e=new MutationObserver(a=>{for(let l of a)if(l.type==="attributes"&&l.attributeName==="lang"){o();break}});e.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let r=ye();r&&r.documentElement&&r!==document&&e.observe(r.documentElement,{attributes:!0,attributeFilter:["lang"]});let t=We();t&&e.observe(t,{attributes:!0,attributeFilter:["lang"]})}function ye(){try{return window.parent?.document??null}catch{return null}}function ve(o){try{return o?.documentElement?.lang??""}catch{return""}}function We(){try{return window.frameElement??null}catch{return null}}function er(){try{return window.frameElement?.getAttribute?.("lang")??""}catch{return""}}import{css as rr}from"lit";import{unsafeCSS as tr}from"lit";var ke=rr`
|
|
10
10
|
*,
|
|
11
11
|
:before,
|
|
12
12
|
:after {
|
|
@@ -279,7 +279,7 @@ Please compile your catalog first.
|
|
|
279
279
|
svg {
|
|
280
280
|
pointer-events: none;
|
|
281
281
|
}
|
|
282
|
-
`,
|
|
282
|
+
`,vr=tr(`*, :before, :after {
|
|
283
283
|
--w-rotate: 0;
|
|
284
284
|
--w-rotate-x: 0;
|
|
285
285
|
--w-rotate-y: 0;
|
|
@@ -2445,7 +2445,7 @@ Please compile your catalog first.
|
|
|
2445
2445
|
display: none
|
|
2446
2446
|
}
|
|
2447
2447
|
}
|
|
2448
|
-
`);var _e=JSON.parse('{"textfield.label.optional":["
|
|
2448
|
+
`);var _e=JSON.parse('{"textfield.label.optional":["Valgfri"]}');var ze=JSON.parse('{"textfield.label.optional":["Optional"]}');var Ce=JSON.parse('{"textfield.label.optional":["Valinnainen"]}');var Me=JSON.parse('{"textfield.label.optional":["Valgfri"]}');var Ee=JSON.parse('{"textfield.label.optional":["Valfritt"]}');import{css as or}from"lit";var Se=or`
|
|
2449
2449
|
.w-textfield {
|
|
2450
2450
|
--_input-padding-top: 12px;
|
|
2451
2451
|
--_input-padding-left: 8px;
|
|
@@ -2581,17 +2581,17 @@ Please compile your catalog first.
|
|
|
2581
2581
|
display: var(--_help-text-display);
|
|
2582
2582
|
color: var(--_help-text-color);
|
|
2583
2583
|
}
|
|
2584
|
-
`;var P={base:"block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current",default:"border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected",disabled:"border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none",invalid:"border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!",readOnly:"pl-0 bg-transparent pointer-events-none",placeholder:"placeholder:s-text-placeholder",suffix:"pr-40",prefix:"pl-[var(--w-prefix-width,_40px)]",textArea:"min-h-[42] sm:min-h-[45]"},q,
|
|
2585
|
-
>${this.label}${this.optional?D` <span>
|
|
2586
|
-
${_._({id:"textfield.label.optional",message:"
|
|
2587
|
-
</span>`:
|
|
2584
|
+
`;var P={base:"block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current",default:"border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected",disabled:"border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none",invalid:"border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!",readOnly:"pl-0 bg-transparent pointer-events-none",placeholder:"placeholder:s-text-placeholder",suffix:"pr-40",prefix:"pl-[var(--w-prefix-width,_40px)]",textArea:"min-h-[42] sm:min-h-[45]"},q,Ne,H,d=class extends ge(Oe){constructor(){super();J(this,q);this.disabled=!1;this.invalid=!1;this.optional=!1;this.readOnly=!1;this.readonly=!1;this.required=!1;this._hasPrefix=!1;this._hasSuffix=!1;J(this,H);we(ze,Me,Ce,_e,Ee)}updated(r){r.has("value")&&typeof this.value<"u"&&(this.setValue(this.value),this.formatter&&this.mask&&(this.mask.innerText=this.formatter(this.value)))}firstUpdated(){se(this,H,this.value)}resetFormControl(){this.value=ne(this,H)}get _inputstyles(){return K([P.base,this._hasSuffix&&P.suffix,this._hasPrefix&&P.prefix,!this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&P.default,this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&P.invalid,!this.invalid&&this.disabled&&!(this.readonly||this.readOnly)&&P.disabled,!this.invalid&&!this.disabled&&(this.readonly||this.readOnly)&&P.readOnly])}get _helptextstyles(){return"help-text"}get _label(){if(this.label)return D`<label for="${this._id}"
|
|
2585
|
+
>${this.label}${this.label.length&&this.optional&&!this.required?D` <span>
|
|
2586
|
+
${_._({id:"textfield.label.optional",message:"Optional",comment:"Shown behind label when marked as optional"})}
|
|
2587
|
+
</span>`:Fe}</label
|
|
2588
2588
|
>`}get _helpId(){if(this.helpText)return`${this._id}__hint`}get _id(){return"textfield"}get _error(){if(this.invalid&&this._helpId)return this._helpId}handler(r){let{name:t,value:a}=r.currentTarget;this.value=a;let l=new CustomEvent(r.type,{detail:{name:t,value:a,target:r.target}});this.dispatchEvent(l)}prefixSlotChange(){this.renderRoot.querySelector("slot[name=prefix]").assignedElements().length&&(this._hasPrefix=!0)}suffixSlotChange(){this.renderRoot.querySelector("slot[name=suffix]").assignedElements().length&&(this._hasSuffix=!0)}render(){return D`
|
|
2589
2589
|
${this._label}
|
|
2590
2590
|
<div
|
|
2591
2591
|
class="${nr({"w-textfield":!0,"w-textfield--has-prefix":this._hasPrefix,"w-textfield--has-suffix":this._hasSuffix})}"
|
|
2592
2592
|
>
|
|
2593
2593
|
<div class="w-textfield__input-wrapper">
|
|
2594
|
-
${this.formatter?D`<div class="w-textfield__mask"></div>`:
|
|
2594
|
+
${this.formatter?D`<div class="w-textfield__mask"></div>`:Fe}
|
|
2595
2595
|
<input
|
|
2596
2596
|
part="input"
|
|
2597
2597
|
class="${this._inputstyles}"
|
|
@@ -2618,7 +2618,7 @@ Please compile your catalog first.
|
|
|
2618
2618
|
@change="${this.handler}"
|
|
2619
2619
|
@input="${this.handler}"
|
|
2620
2620
|
@focus="${this.handler}"
|
|
2621
|
-
@keydown="${le(this,q,
|
|
2621
|
+
@keydown="${le(this,q,Ne)}"
|
|
2622
2622
|
/>
|
|
2623
2623
|
</div>
|
|
2624
2624
|
<slot @slotchange="${this.prefixSlotChange}" name="prefix"></slot>
|
|
@@ -2628,5 +2628,5 @@ Please compile your catalog first.
|
|
|
2628
2628
|
${this.helpText&&D`<div class="${this._helptextstyles}" id="${this._helpId}">
|
|
2629
2629
|
${this.helpText}
|
|
2630
2630
|
</div>`}
|
|
2631
|
-
`}};q=new WeakSet,
|
|
2631
|
+
`}};q=new WeakSet,Ne=function(r){r.key==="Enter"&&this.internals.form&&this.internals.form.requestSubmit()},H=new WeakMap,d.shadowRootOptions={...Oe.shadowRootOptions,delegatesFocus:!0},d.styles=[ke,Le,Se,Ve,Pe],p([u({type:Boolean,reflect:!0})],d.prototype,"disabled",2),p([u({type:Boolean,reflect:!0})],d.prototype,"invalid",2),p([u({type:String,reflect:!0})],d.prototype,"label",2),p([u({type:String,reflect:!0,attribute:"help-text"})],d.prototype,"helpText",2),p([u({type:Boolean,reflect:!0})],d.prototype,"optional",2),p([u({type:String,reflect:!0})],d.prototype,"size",2),p([u({type:Number,reflect:!0})],d.prototype,"max",2),p([u({type:Number,reflect:!0})],d.prototype,"min",2),p([u({type:Number,reflect:!0,attribute:"min-length"})],d.prototype,"minLength",2),p([u({type:Number,reflect:!0})],d.prototype,"minlength",2),p([u({type:Number,reflect:!0,attribute:"max-length"})],d.prototype,"maxLength",2),p([u({type:Number,reflect:!0})],d.prototype,"maxlength",2),p([u({type:String,reflect:!0})],d.prototype,"pattern",2),p([u({type:String,reflect:!0})],d.prototype,"placeholder",2),p([u({type:Boolean,reflect:!0,attribute:"read-only"})],d.prototype,"readOnly",2),p([u({type:Boolean,reflect:!0})],d.prototype,"readonly",2),p([u({type:Boolean,reflect:!0})],d.prototype,"required",2),p([u({type:String,reflect:!0})],d.prototype,"type",2),p([u({type:String,reflect:!0})],d.prototype,"value",2),p([u({type:String,reflect:!0})],d.prototype,"name",2),p([u({type:Number,reflect:!0})],d.prototype,"step",2),p([u({type:String,reflect:!0})],d.prototype,"autocomplete",2),p([u({attribute:!1})],d.prototype,"formatter",2),p([ir(".w-textfield__mask")],d.prototype,"mask",2),p([u({type:Boolean})],d.prototype,"_hasPrefix",2),p([u({type:Boolean})],d.prototype,"_hasSuffix",2);customElements.get("w-textfield")||customElements.define("w-textfield",d);export{d as WarpTextField};
|
|
2632
2632
|
//# sourceMappingURL=textfield.js.map
|