@warp-ds/elements 2.9.0 → 2.9.1-next.2
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 +31 -0
- package/dist/docs/box/accessibility.md +29 -0
- package/dist/docs/box/api.md +16 -11
- package/dist/docs/box/box.md +189 -11
- package/dist/docs/box/examples.md +98 -0
- package/dist/docs/box/usage.md +47 -0
- package/dist/index.d.ts +40 -20
- package/dist/packages/box/box.d.ts +15 -14
- package/dist/packages/box/box.js +6 -6
- package/dist/packages/box/box.js.map +4 -4
- package/dist/packages/box/box.react.stories.d.ts +1 -1
- package/dist/packages/box/box.stories.d.ts +1 -0
- package/dist/packages/box/box.stories.js +12 -5
- package/dist/packages/checkbox/checkbox.js +3 -3
- package/dist/packages/checkbox/checkbox.js.map +2 -2
- package/dist/packages/checkbox/checkbox.test.js +20 -0
- package/dist/packages/datepicker/datepicker.js +6 -6
- package/dist/packages/datepicker/datepicker.js.map +2 -2
- package/dist/packages/datepicker/datepicker.stories.js +8 -1
- package/dist/packages/datepicker/datepicker.test.js +23 -1
- package/dist/packages/radio/radio.js +2 -2
- package/dist/packages/radio/radio.js.map +2 -2
- package/dist/packages/radio/radio.test.js +21 -1
- package/dist/packages/radio-group/radio-group.js +5 -5
- package/dist/packages/radio-group/radio-group.js.map +2 -2
- package/dist/packages/select/select.js +10 -10
- package/dist/packages/select/select.js.map +3 -3
- package/dist/packages/select/select.stories.js +7 -5
- package/dist/packages/select/select.test.js +23 -2
- package/dist/packages/slider/slider.stories.js +6 -3
- package/dist/packages/slider-thumb/slider-thumb.js +16 -16
- package/dist/packages/slider-thumb/slider-thumb.js.map +2 -2
- package/dist/packages/textfield/textfield.js +9 -8
- package/dist/packages/textfield/textfield.js.map +3 -3
- package/dist/packages/textfield/textfield.test.js +17 -0
- package/dist/web-types.json +35 -7
- package/package.json +1 -1
|
@@ -8,11 +8,13 @@ const meta = {
|
|
|
8
8
|
title: 'Forms/Select',
|
|
9
9
|
render(args) {
|
|
10
10
|
return html `
|
|
11
|
-
<
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
<form>
|
|
12
|
+
<w-select ${spread(prespread(args))}>
|
|
13
|
+
<option value="raspberries">Raspberries</option>
|
|
14
|
+
<option value="strawberries" selected>Strawberries</option>
|
|
15
|
+
<option value="cloudberries">Cloudberries</option>
|
|
16
|
+
</w-select>
|
|
17
|
+
</form>
|
|
16
18
|
`;
|
|
17
19
|
},
|
|
18
20
|
args,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { userEvent } from '
|
|
1
|
+
import { server, userEvent } from 'vitest/browser';
|
|
2
2
|
import { html } from 'lit';
|
|
3
|
-
import { expect, test } from 'vitest';
|
|
3
|
+
import { expect, test, vi } from 'vitest';
|
|
4
4
|
import { render } from 'vitest-browser-lit';
|
|
5
5
|
import './select.js';
|
|
6
6
|
test('works in a form', async () => {
|
|
@@ -227,3 +227,24 @@ test('reflects dynamic light-DOM option selected changes into native select', as
|
|
|
227
227
|
return nativeSelect.value;
|
|
228
228
|
}).toBe('beta');
|
|
229
229
|
});
|
|
230
|
+
/* For some reason this test fails only in Chromium and only on CI. Manually tested OK in Chrome. */
|
|
231
|
+
test.skipIf(server.browser === 'chromium' && server.config.env.CI)('submits the associated form when radio has focus and user presses Enter', async () => {
|
|
232
|
+
const screen = render(html `
|
|
233
|
+
<form>
|
|
234
|
+
<w-select data-testid="select" label="Select">
|
|
235
|
+
<option value="alpha" selected>Alpha</option>
|
|
236
|
+
<option value="beta">Beta</option>
|
|
237
|
+
</w-select>
|
|
238
|
+
<button type="submit">Submit</button>
|
|
239
|
+
</form>
|
|
240
|
+
`);
|
|
241
|
+
const onSubmit = vi.fn();
|
|
242
|
+
const form = document.querySelector('form');
|
|
243
|
+
form.addEventListener('submit', (event) => {
|
|
244
|
+
event.preventDefault();
|
|
245
|
+
onSubmit();
|
|
246
|
+
});
|
|
247
|
+
await userEvent.click(screen.getByTestId('select'));
|
|
248
|
+
await userEvent.keyboard('{Enter}');
|
|
249
|
+
expect(onSubmit).toHaveBeenCalled();
|
|
250
|
+
});
|
|
@@ -21,9 +21,12 @@ export default meta;
|
|
|
21
21
|
export const Single = {
|
|
22
22
|
render() {
|
|
23
23
|
return html `
|
|
24
|
-
<
|
|
25
|
-
<w-slider
|
|
26
|
-
|
|
24
|
+
<form>
|
|
25
|
+
<w-slider label="Single" min="0" max="100">
|
|
26
|
+
<w-slider-thumb name="value"></w-slider-thumb>
|
|
27
|
+
</w-slider>
|
|
28
|
+
<input type="submit" hidden>
|
|
29
|
+
</form>
|
|
27
30
|
`;
|
|
28
31
|
},
|
|
29
32
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var Ue=Object.create;var ie=Object.defineProperty;var we=Object.getOwnPropertyDescriptor;var Re=Object.getOwnPropertyNames;var
|
|
2
|
-
`],["r","\r"],["t"," "],["v","\v"],["0","\0"]]);function er(o){return We.get(o)||o}var rr=/\\(?:(\\)|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 Ce(o,r=!1){return o.replace(rr,function(e,t,a,i,n,s,d,g,_){if(t!==void 0)return"\\";if(a!==void 0)return Ke(a);if(i!==void 0)return Je(i);if(n!==void 0)return _e(n,s);if(d!==void 0)return _e(d);if(g==="0")return"\0";if(g!==void 0)return Qe(g,!r);if(_!==void 0)return er(_);throw new SyntaxError(y.errorMessages.get(y.ErrorType.EndOfString))})}
|
|
1
|
+
var Ue=Object.create;var ie=Object.defineProperty;var we=Object.getOwnPropertyDescriptor;var Re=Object.getOwnPropertyNames;var He=Object.getPrototypeOf,Xe=Object.prototype.hasOwnProperty;var xe=o=>{throw TypeError(o)};var ke=(o,r)=>()=>(r||o((r={exports:{}}).exports,r),r.exports);var qe=(o,r,e,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of Re(r))!Xe.call(o,a)&&a!==e&&ie(o,a,{get:()=>r[a],enumerable:!(t=we(r,a))||t.enumerable});return o};var Ze=(o,r,e)=>(e=o!=null?Ue(He(o)):{},qe(r||!o||!o.__esModule?ie(e,"default",{value:o,enumerable:!0}):e,o));var p=(o,r,e,t)=>{for(var a=t>1?void 0:t?we(r,e):r,i=o.length-1,n;i>=0;i--)(n=o[i])&&(a=(t?n(r,e,a):n(a))||a);return t&&a&&ie(r,e,a),a};var se=(o,r,e)=>r.has(o)||xe("Cannot "+e);var ne=(o,r,e)=>(se(o,r,"read from private field"),e?e.call(o):r.get(o)),le=(o,r,e)=>r.has(o)?xe("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(o):r.set(o,e),de=(o,r,e,t)=>(se(o,r,"write to private field"),t?t.call(o,e):r.set(o,e),e),m=(o,r,e)=>(se(o,r,"access private method"),e);var ye=ke(O=>{"use strict";Object.defineProperty(O,"__esModule",{value:!0});O.errorMessages=O.ErrorType=void 0;var U;(function(o){o.MalformedUnicode="MALFORMED_UNICODE",o.MalformedHexadecimal="MALFORMED_HEXADECIMAL",o.CodePointLimit="CODE_POINT_LIMIT",o.OctalDeprecation="OCTAL_DEPRECATION",o.EndOfString="END_OF_STRING"})(U=O.ErrorType||(O.ErrorType={}));O.errorMessages=new Map([[U.MalformedUnicode,"malformed Unicode character escape sequence"],[U.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[U.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[U.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[U.EndOfString,"malformed escape sequence at end of string"]])});var Ee=ke(P=>{"use strict";Object.defineProperty(P,"__esModule",{value:!0});P.unraw=P.errorMessages=P.ErrorType=void 0;var y=ye();Object.defineProperty(P,"ErrorType",{enumerable:!0,get:function(){return y.ErrorType}});Object.defineProperty(P,"errorMessages",{enumerable:!0,get:function(){return y.errorMessages}});function Be(o){return!o.match(/[^a-f0-9]/i)?parseInt(o,16):NaN}function G(o,r,e){let t=Be(o);if(Number.isNaN(t)||e!==void 0&&e!==o.length)throw new SyntaxError(y.errorMessages.get(r));return t}function Ke(o){let r=G(o,y.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(r)}function _e(o,r){let e=G(o,y.ErrorType.MalformedUnicode,4);if(r!==void 0){let t=G(r,y.ErrorType.MalformedUnicode,4);return String.fromCharCode(e,t)}return String.fromCharCode(e)}function Ge(o){return o.charAt(0)==="{"&&o.charAt(o.length-1)==="}"}function Je(o){if(!Ge(o))throw new SyntaxError(y.errorMessages.get(y.ErrorType.MalformedUnicode));let r=o.slice(1,-1),e=G(r,y.ErrorType.MalformedUnicode);try{return String.fromCodePoint(e)}catch(t){throw t instanceof RangeError?new SyntaxError(y.errorMessages.get(y.ErrorType.CodePointLimit)):t}}function Qe(o,r=!1){if(r)throw new SyntaxError(y.errorMessages.get(y.ErrorType.OctalDeprecation));let e=parseInt(o,8);return String.fromCharCode(e)}var We=new Map([["b","\b"],["f","\f"],["n",`
|
|
2
|
+
`],["r","\r"],["t"," "],["v","\v"],["0","\0"]]);function er(o){return We.get(o)||o}var rr=/\\(?:(\\)|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 Ce(o,r=!1){return o.replace(rr,function(e,t,a,i,n,s,d,g,_){if(t!==void 0)return"\\";if(a!==void 0)return Ke(a);if(i!==void 0)return Je(i);if(n!==void 0)return _e(n,s);if(d!==void 0)return _e(d);if(g==="0")return"\0";if(g!==void 0)return Qe(g,!r);if(_!==void 0)return er(_);throw new SyntaxError(y.errorMessages.get(y.ErrorType.EndOfString))})}P.unraw=Ce;P.default=Ce});var Fe=Ze(Ee(),1);var L=o=>typeof o=="string",tr=o=>typeof o=="function",ze=new Map,Se="en";function be(o){return[...Array.isArray(o)?o:[o],Se]}function pe(o,r,e){let t=be(o);e||(e="default");let a;if(typeof e=="string")switch(a={day:"numeric",month:"short",year:"numeric"},e){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=e;return J(()=>Q("date",t,e),()=>new Intl.DateTimeFormat(t,a)).format(L(r)?new Date(r):r)}function or(o,r,e){let t;if(e||(e="default"),typeof e=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},e){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=e;return pe(o,r,t)}function ce(o,r,e){let t=be(o);return J(()=>Q("number",t,e),()=>new Intl.NumberFormat(t,e)).format(r)}function Me(o,r,e,{offset:t=0,...a}){var s,d;let i=be(o),n=r?J(()=>Q("plural-ordinal",i),()=>new Intl.PluralRules(i,{type:"ordinal"})):J(()=>Q("plural-cardinal",i),()=>new Intl.PluralRules(i,{type:"cardinal"}));return(d=(s=a[e])!=null?s:a[n.select(e-t)])!=null?d:a.other}function J(o,r){let e=o(),t=ze.get(e);return t||(t=r(),ze.set(e,t)),t}function Q(o,r,e){let t=r.join("-");return`${o}-${t}-${JSON.stringify(e)}`}var $e=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,Ve="%__lingui_octothorpe__%",ar=(o,r,e={})=>{let t=r||o,a=n=>typeof n=="object"?n:e[n],i=(n,s)=>{let d=Object.keys(e).length?a("number"):void 0,g=ce(t,n,d);return s.replace(new RegExp(Ve,"g"),g)};return{plural:(n,s)=>{let{offset:d=0}=s,g=Me(t,!1,n,s);return i(n-d,g)},selectordinal:(n,s)=>{let{offset:d=0}=s,g=Me(t,!0,n,s);return i(n-d,g)},select:ir,number:(n,s)=>ce(t,n,a(s)||{style:s}),date:(n,s)=>pe(t,n,a(s)||s),time:(n,s)=>or(t,n,a(s)||s)}},ir=(o,r)=>{var e;return(e=r[o])!=null?e:r.other};function sr(o,r,e){return(t={},a)=>{let i=ar(r,e,a),n=(d,g=!1)=>Array.isArray(d)?d.reduce((_,F)=>{if(F==="#"&&g)return _+Ve;if(L(F))return _+F;let[S,k,C]=F,E={};k==="plural"||k==="selectordinal"||k==="select"?Object.entries(C).forEach(([T,$])=>{E[T]=n($,k==="plural"||k==="selectordinal")}):E=C;let x;if(k){let T=i[k];x=T(t[S],E)}else x=t[S];return x==null?_:_+x},""):d,s=n(o);return L(s)&&$e.test(s)?(0,Fe.unraw)(s):L(s)?s:s?String(s):""}}var nr=Object.defineProperty,lr=(o,r,e)=>r in o?nr(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e,dr=(o,r,e)=>(lr(o,typeof r!="symbol"?r+"":r,e),e),he=class{constructor(){dr(this,"_events",{})}on(r,e){var a;var t;return(a=(t=this._events)[r])!=null||(t[r]=[]),this._events[r].push(e),()=>this.removeListener(r,e)}removeListener(r,e){let t=this._getListeners(r);if(!t)return;let a=t.indexOf(e);~a&&t.splice(a,1)}emit(r,...e){let t=this._getListeners(r);t&&t.map(a=>a.apply(this,e))}_getListeners(r){let e=this._events[r];return Array.isArray(e)?e:!1}},cr=Object.defineProperty,hr=(o,r,e)=>r in o?cr(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e,I=(o,r,e)=>(hr(o,typeof r!="symbol"?r+"":r,e),e),ue=class extends he{constructor(r){var e;super(),I(this,"_locale",""),I(this,"_locales"),I(this,"_localeData",{}),I(this,"_messages",{}),I(this,"_missing"),I(this,"_messageCompiler"),I(this,"t",this._.bind(this)),r.missing!=null&&(this._missing=r.missing),r.messages!=null&&this.load(r.messages),r.localeData!=null&&this.loadLocaleData(r.localeData),(typeof r.locale=="string"||r.locales)&&this.activate((e=r.locale)!=null?e:Se,r.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var r;return(r=this._messages[this._locale])!=null?r:{}}get localeData(){var r;return(r=this._localeData[this._locale])!=null?r:{}}_loadLocaleData(r,e){let t=this._localeData[r];t?Object.assign(t,e):this._localeData[r]=e}setMessagesCompiler(r){return this._messageCompiler=r,this}loadLocaleData(r,e){typeof r=="string"?this._loadLocaleData(r,e):Object.keys(r).forEach(t=>this._loadLocaleData(t,r[t])),this.emit("change")}_load(r,e){let t=this._messages[r];t?Object.assign(t,e):this._messages[r]=e}load(r,e){typeof r=="string"&&typeof e=="object"?this._load(r,e):Object.entries(r).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:r,locales:e,messages:t}){this._locale=r,this._locales=e||void 0,this._messages[this._locale]=t,this.emit("change")}activate(r,e){this._locale=r,this._locales=e,this.emit("change")}_(r,e,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;r||(r=""),L(r)||(e=r.values||e,a=r.message,r=r.id);let i=this.messages[r],n=i===void 0,s=this._missing;if(s&&n)return tr(s)?s(this._locale,r):s;n&&this.emit("missing",{id:r,locale:this._locale});let d=i||a||r;return L(d)&&(this._messageCompiler?d=this._messageCompiler(d):console.warn(`Uncompiled message detected! Message:
|
|
3
3
|
|
|
4
4
|
> ${d}
|
|
5
5
|
|
|
@@ -7,7 +7,7 @@ That means you use raw catalog or your catalog doesn't have a translation for th
|
|
|
7
7
|
ICU features such as interpolation and plurals will not work properly for that message.
|
|
8
8
|
|
|
9
9
|
Please compile your catalog first.
|
|
10
|
-
`)),L(d)&&$e.test(d)?JSON.parse(`"${d}"`):L(d)?d:sr(d,this._locale,this._locales)(e,t==null?void 0:t.formats)}date(r,e){return pe(this._locales||this._locale,r,e)}number(r,e){return ce(this._locales||this._locale,r,e)}};function ur(o={}){return new ue(o)}var M=ur();var u=function(o,r,e,t){if(e==="a"&&!t)throw new TypeError("Private accessor was defined without a getter");if(typeof r=="function"?o!==r||!t:!r.has(o))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?t:e==="a"?t.call(o):t?t.value:r.get(o)},v=function(o,r,e,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 r=="function"?o!==r||!a:!r.has(o))throw new TypeError("Cannot write private member to an object whose class did not declare it");return t==="a"?a.call(o,e):a?a.value=e:r.set(o,e),e};function
|
|
10
|
+
`)),L(d)&&$e.test(d)?JSON.parse(`"${d}"`):L(d)?d:sr(d,this._locale,this._locales)(e,t==null?void 0:t.formats)}date(r,e){return pe(this._locales||this._locale,r,e)}number(r,e){return ce(this._locales||this._locale,r,e)}};function ur(o={}){return new ue(o)}var M=ur();var u=function(o,r,e,t){if(e==="a"&&!t)throw new TypeError("Private accessor was defined without a getter");if(typeof r=="function"?o!==r||!t:!r.has(o))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?t:e==="a"?t.call(o):t?t.value:r.get(o)},v=function(o,r,e,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 r=="function"?o!==r||!a:!r.has(o))throw new TypeError("Cannot write private member to an object whose class did not declare it");return t==="a"?a.call(o,e):a?a.value=e:r.set(o,e),e};function Te(o){var r,e,t,a,i,n,s,d,g,_,F,S,k,C,E,x,T,$,te;class Ye extends o{constructor(...l){var h,f,w;super(...l),r.add(this),this.internals=this.attachInternals(),e.set(this,!1),t.set(this,!1),a.set(this,!1),i.set(this,void 0),n.set(this,void 0),s.set(this,!0),g.set(this,""),_.set(this,()=>{v(this,a,!0,"f"),v(this,e,!0,"f"),u(this,r,"m",x).call(this)}),F.set(this,()=>{v(this,e,!1,"f"),u(this,r,"m",T).call(this,this.shouldFormValueUpdate()?u(this,g,"f"):""),!this.validity.valid&&u(this,a,"f")&&v(this,t,!0,"f");let N=u(this,r,"m",x).call(this);this.validationMessageCallback&&this.validationMessageCallback(N?this.internals.validationMessage:"")}),S.set(this,()=>{var N;u(this,s,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),v(this,s,!1,"f")),v(this,a,!0,"f"),v(this,t,!0,"f"),u(this,r,"m",x).call(this),(N=this===null||this===void 0?void 0:this.validationMessageCallback)===null||N===void 0||N.call(this,this.showError?this.internals.validationMessage:"")}),k.set(this,void 0),C.set(this,!1),E.set(this,Promise.resolve()),(h=this.addEventListener)===null||h===void 0||h.call(this,"focus",u(this,_,"f")),(f=this.addEventListener)===null||f===void 0||f.call(this,"blur",u(this,F,"f")),(w=this.addEventListener)===null||w===void 0||w.call(this,"invalid",u(this,S,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let l=this.validators.map(w=>w.attribute).flat(),h=super.observedAttributes||[];return[...new Set([...h,...l])]}static getValidator(l){return this.validators.find(h=>h.attribute===l)||null}static getValidators(l){return this.validators.filter(h=>{var f;if(h.attribute===l||!((f=h.attribute)===null||f===void 0)&&f.includes(l))return!0})}get form(){return this.internals.form}get showError(){return u(this,r,"m",x).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(l,h,f){var w;(w=super.attributeChangedCallback)===null||w===void 0||w.call(this,l,h,f);let X=this.constructor.getValidators(l);X!=null&&X.length&&this.validationTarget&&this.setValue(u(this,g,"f"))}setValue(l){var h;v(this,t,!1,"f"),(h=this.validationMessageCallback)===null||h===void 0||h.call(this,""),v(this,g,l,"f");let w=this.shouldFormValueUpdate()?l:null;this.internals.setFormValue(w),u(this,r,"m",T).call(this,w),this.valueChangedCallback&&this.valueChangedCallback(w),u(this,r,"m",x).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(l=>l(u(this,E,"f")))}formResetCallback(){var l,h;v(this,a,!1,"f"),v(this,t,!1,"f"),u(this,r,"m",x).call(this),(l=this.resetFormControl)===null||l===void 0||l.call(this),(h=this.validationMessageCallback)===null||h===void 0||h.call(this,u(this,r,"m",x).call(this)?this.validationMessage:"")}}return e=new WeakMap,t=new WeakMap,a=new WeakMap,i=new WeakMap,n=new WeakMap,s=new WeakMap,g=new WeakMap,_=new WeakMap,F=new WeakMap,S=new WeakMap,k=new WeakMap,C=new WeakMap,E=new WeakMap,r=new WeakSet,d=function(){let l=this.getRootNode(),h=`${this.localName}[name="${this.getAttribute("name")}"]`;return l.querySelectorAll(h)},x=function(){if(this.hasAttribute("disabled"))return!1;let l=u(this,t,"f")||u(this,a,"f")&&!this.validity.valid&&!u(this,e,"f");return l&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),l},T=function(l){let h=this.constructor,f={},w=h.validators,N=[],X=w.some(z=>z.isValid instanceof Promise);u(this,C,"f")||(v(this,E,new Promise(z=>{v(this,k,z,"f")}),"f"),v(this,C,!0,"f")),u(this,i,"f")&&(u(this,i,"f").abort(),v(this,n,u(this,i,"f"),"f"));let q=new AbortController;v(this,i,q,"f");let Z,ve=!1;w.length&&(w.forEach(z=>{let oe=z.key||"customError",Y=z.isValid(this,l,q.signal);Y instanceof Promise?(N.push(Y),Y.then(ae=>{ae!=null&&(f[oe]=!ae,Z=u(this,r,"m",te).call(this,z,l),u(this,r,"m",$).call(this,f,Z))})):(f[oe]=!Y,this.validity[oe]!==!Y&&(ve=!0),!Y&&!Z&&(Z=u(this,r,"m",te).call(this,z,l)))}),Promise.allSettled(N).then(()=>{var z;q!=null&&q.signal.aborted||(v(this,C,!1,"f"),(z=u(this,k,"f"))===null||z===void 0||z.call(this))}),(ve||!X)&&u(this,r,"m",$).call(this,f,Z))},$=function(l,h){if(this.validationTarget)this.internals.setValidity(l,h,this.validationTarget),v(this,s,!1,"f");else{if(this.internals.setValidity(l,h),this.internals.validity.valid)return;v(this,s,!0,"f")}},te=function(l,h){if(this.validityCallback){let f=this.validityCallback(l.key||"customError");if(f)return f}return l.message instanceof Function?l.message(this,h):l.message},Ye}import{html as B,LitElement as Ae,nothing as A}from"lit";import{property as V,query as me,state as D}from"lit/decorators.js";import{classMap as mr}from"lit/directives/class-map.js";import{ifDefined as W}from"lit/directives/if-defined.js";import{css as br}from"lit";var Ne=br`*,: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}.hidden{display:none}.absolute{position:absolute}.relative{position:relative}.static{position:static}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`;import{css as Pe}from"lit";var De=Pe`
|
|
11
11
|
*,
|
|
12
12
|
:before,
|
|
13
13
|
:after {
|
|
@@ -280,7 +280,7 @@ Please compile your catalog first.
|
|
|
280
280
|
svg {
|
|
281
281
|
pointer-events: none;
|
|
282
282
|
}
|
|
283
|
-
`,
|
|
283
|
+
`,Er=Pe`*, :before, :after {
|
|
284
284
|
--w-rotate: 0;
|
|
285
285
|
--w-rotate-x: 0;
|
|
286
286
|
--w-rotate-y: 0;
|
|
@@ -2446,7 +2446,7 @@ Please compile your catalog first.
|
|
|
2446
2446
|
display: none
|
|
2447
2447
|
}
|
|
2448
2448
|
}
|
|
2449
|
-
`;import{css as pr}from"lit";var
|
|
2449
|
+
`;import{css as pr}from"lit";var Le=pr`
|
|
2450
2450
|
.w-slider-thumb {
|
|
2451
2451
|
position: relative;
|
|
2452
2452
|
display: grid;
|
|
@@ -2637,7 +2637,7 @@ Please compile your catalog first.
|
|
|
2637
2637
|
w-textfield {
|
|
2638
2638
|
--w-textfield-placeholder-color-text: var(--w-s-color-text);
|
|
2639
2639
|
}
|
|
2640
|
-
`;var Oe={};var j,c,ee,re,ge,R,K,fe,Ie,je,b=class extends
|
|
2640
|
+
`;var Oe={};var j,c,ee,re,ge,R,K,fe,Ie,je,b=class extends Te(Ae){constructor(){super(...arguments);le(this,c);this.disabled=!1;this.invalid=!1;this.openEnded=!1;this.suffix="";this._showTooltip=!1;this._inputHasFocus=!1;this._hiddenTextfield=!1;le(this,j,null);this.anchorPositioningStyleElement=null}resetFormControl(){this.value=ne(this,j),this.dispatchEvent(new CustomEvent("thumbreset",{bubbles:!0}))}async updateFieldAfterValidation(){let e=this.shadowRoot.querySelector("w-textfield");await m(this,c,K).call(this,e.value,!0)}async connectedCallback(){if(super.connectedCallback(),de(this,j,this.value),this.setValue(this.value),this.slot&&!this.ariaDescription&&(this.slot==="from"?this.ariaDescription=M.t({id:"slider.label.from",comment:"Accessible label for the 'from value' input field in a range slider",message:"From"}):this.slot==="to"&&(this.ariaDescription=M.t({id:"slider.label.to",comment:"Accessible label for the 'to value' input field in a range slider",message:"To"}))),"anchorName"in document.documentElement.style)await this.updateComplete;else{let a=Oe.url.substring(0,Oe.url.lastIndexOf("/"));try{let[{default:i}]=await Promise.all([import(`${a}/oddbird-css-anchor-positioning.js`),this.updateComplete]);this.anchorPositioningStyleElement||(this.anchorPositioningStyleElement=document.createElement("style"),this.shadowRoot.prepend(this.anchorPositioningStyleElement)),this.anchorPositioningStyleElement.textContent=`
|
|
2641
2641
|
/*
|
|
2642
2642
|
* The polyfill can only anchor to ::before and ::after pseudo elements, not the pseudo element slider thumb.
|
|
2643
2643
|
* We work around that by recreating a transparent version of the active range
|
|
@@ -2688,7 +2688,7 @@ Please compile your catalog first.
|
|
|
2688
2688
|
}
|
|
2689
2689
|
`,await i({roots:[this.shadowRoot],elements:[this.anchorPositioningStyleElement]})}catch(i){console.error(new Error("Error registering the CSS anchor positioning polyfill. The UI will look broken.",{cause:i}))}}let e=window.navigator.userAgent;/WebKit/.test(e)&&!/Chrome/.test(e)&&this.tooltipTarget&&this.tooltipTarget.style.setProperty("--transform-offset","var(--w-slider-thumb-size, 28px)"),m(this,c,ge).call(this)}get boundaryValue(){return this.slot==="from"?this.min:this.max}get textFieldDisplayValue(){var e;return this._inputHasFocus?this.value!==""?this.value:(e=this.range)!=null&&e.value?Math.min(Math.max(Number(this.range.value),Number(this.min)+1),Number(this.max)-1).toString():"":this.value}get tooltipDisplayValue(){var t,a;let e=0;return this.tooltipFormatter?e=this.tooltipFormatter(this.value,this.slot):this.valueFormatter?e=this.valueFormatter(this.value,this.slot):this.value===""?e=(a=(t=this.range)==null?void 0:t.value)!=null?a:this.boundaryValue:e=this.value||0,e}get ariaDescriptionText(){let e="",t=this.ariaDescription||"",a=this.value==="";return this.openEnded&&a&&(e=this.slot==="from"?M.t({id:"slider.placeholder.from",message:"Min"}):M.t({id:"slider.placeholder.to",message:"Max"})),e?`${e}, ${t}`:t}updated(e){e.has("openEnded")&&this.openEnded&&!this.placeholder&&(this.slot==="to"||this.slot===""?this.placeholder=M.t({id:"slider.placeholder.to",message:"Max",comment:"Max as in short for Maximum"}):this.slot==="from"&&(this.placeholder=M.t({id:"slider.placeholder.from",message:"Min",comment:"Min as in short for Minimum"}))),e.has("value")&&(typeof ne(this,j)=="undefined"&&typeof this.value!="undefined"&&de(this,j,this.value),this.setValue(this.value),m(this,c,ge).call(this))}render(){var t,a,i,n;let e=this.placeholder&&!this.value;return B`
|
|
2690
2690
|
<div class="w-slider-thumb">
|
|
2691
|
-
${"anchorName"in document.documentElement.style?
|
|
2691
|
+
${"anchorName"in document.documentElement.style?A:B`<div class="polyfill-range">
|
|
2692
2692
|
<div class="polyfill-active-range"></div>
|
|
2693
2693
|
</div>`}
|
|
2694
2694
|
<input
|
|
@@ -2709,13 +2709,13 @@ Please compile your catalog first.
|
|
|
2709
2709
|
@focus="${m(this,c,ee)}"
|
|
2710
2710
|
@blur="${m(this,c,re)}"
|
|
2711
2711
|
@input="${m(this,c,fe)}"
|
|
2712
|
-
@keydown="${
|
|
2712
|
+
@keydown="${m(this,c,Ie)}"
|
|
2713
2713
|
/>
|
|
2714
2714
|
|
|
2715
2715
|
${this.slot==="from"||!this.slot?B`
|
|
2716
2716
|
<span class="sr-only">
|
|
2717
2717
|
${M.t({id:"slider.label.from",message:"From"})+" "+(this.labelFormatter?this.labelFormatter("from"):this.min)+", "+M.t({id:"slider.label.to",message:"To"})+" "+(this.labelFormatter?this.labelFormatter("to"):this.max)}
|
|
2718
|
-
</span>`:
|
|
2718
|
+
</span>`:A}
|
|
2719
2719
|
|
|
2720
2720
|
<span
|
|
2721
2721
|
aria-hidden="true"
|
|
@@ -2735,19 +2735,19 @@ Please compile your catalog first.
|
|
|
2735
2735
|
aria-description="${W(this.ariaDescriptionText)}"
|
|
2736
2736
|
class="${mr({"w-slider-thumb__textfield":!0,"sr-only":this._hiddenTextfield})}"
|
|
2737
2737
|
type="number"
|
|
2738
|
-
tabindex="${this._hiddenTextfield?-1:
|
|
2738
|
+
tabindex="${this._hiddenTextfield?-1:A}"
|
|
2739
2739
|
placeholder="${this.placeholder}"
|
|
2740
2740
|
.value="${this.textFieldDisplayValue}"
|
|
2741
|
-
.formatter=${this.valueFormatter&&!e?s=>this.valueFormatter(s,this.slot):
|
|
2742
|
-
min="${this.openEnded?
|
|
2743
|
-
max="${this.openEnded?
|
|
2741
|
+
.formatter=${this.valueFormatter&&!e?s=>this.valueFormatter(s,this.slot):A}
|
|
2742
|
+
min="${this.openEnded?A:this.min}"
|
|
2743
|
+
max="${this.openEnded?A:this.max}"
|
|
2744
2744
|
step="${W(this.step)}"
|
|
2745
2745
|
?invalid="${!!this.invalid}"
|
|
2746
2746
|
@input="${m(this,c,fe)}"
|
|
2747
2747
|
@keydown="${m(this,c,je)}"
|
|
2748
2748
|
?disabled="${this.disabled}"
|
|
2749
2749
|
>
|
|
2750
|
-
${(t=this.suffix)!=null&&t?B`<w-affix slot="suffix" label="${(a=this.suffix)!=null?a:""}"></w-affix>`:
|
|
2750
|
+
${(t=this.suffix)!=null&&t?B`<w-affix slot="suffix" label="${(a=this.suffix)!=null?a:""}"></w-affix>`:A}
|
|
2751
2751
|
</w-textfield>
|
|
2752
2752
|
<w-attention
|
|
2753
2753
|
tooltip
|
|
@@ -2762,7 +2762,7 @@ Please compile your catalog first.
|
|
|
2762
2762
|
slot="target"
|
|
2763
2763
|
></output>
|
|
2764
2764
|
<span slot="message">
|
|
2765
|
-
${this.tooltipDisplayValue}${(i=this.suffix)!=null&&i?B` ${(n=this.suffix)!=null?n:""}`:
|
|
2765
|
+
${this.tooltipDisplayValue}${(i=this.suffix)!=null&&i?B` ${(n=this.suffix)!=null?n:""}`:A}
|
|
2766
2766
|
</span>
|
|
2767
2767
|
</w-attention>
|
|
2768
2768
|
|
|
@@ -2771,5 +2771,5 @@ Please compile your catalog first.
|
|
|
2771
2771
|
${this.ariaDescriptionText}
|
|
2772
2772
|
</span>
|
|
2773
2773
|
</div>
|
|
2774
|
-
`}};j=new WeakMap,c=new WeakSet,ee=function(){this._showTooltip=!0,this.shadowRoot.querySelector("w-attention").handleDone()},re=function(){this._showTooltip=!1},ge=function(){this.range&&(this.value===""?this.range.value=this.boundaryValue:this.value&&(this.range.value=this.value))},R=function(e){this.dispatchEvent(new CustomEvent("slidervalidity",{bubbles:!0,detail:{invalid:e,slot:this.slot}}))},K=async function(e,t){var _;let a=(_=this.suffix)!=null?_:"",i=Number.parseInt(e);if(this.openEnded&&!t&&this.step&&!(this.slot==="to"&&i>=Number(this.max)-1||this.slot==="from"&&i<=Number(this.min)+1)){let S=1/this.step;i=Math.round(i*S)/S,e=i.toString()}let n=Number.parseInt(this.max),s=Number.parseInt(this.min);if(!this.openEnded&&(i>n||i<s))return m(this,c,R).call(this,M.t({id:"slider.error.out_of_bounds",message:"Value must be between {min} and {max}",values:{min:`${this.min} ${a}`.trim(),max:`${this.max} ${a}`.trim()}})),{shouldCancel:!0};e===""&&this.required&&m(this,c,R).call(this,M.t({id:"slider.error.required",message:"This field is required"})),this.value=e;let d=e===this.max||e===this.min,g=!1;if(this.slot){let F=this.parentElement.querySelector('w-slider-thumb[slot="to"]'),S=this.parentElement.querySelector('w-slider-thumb[slot="from"]'),k=F.textfield.value||this.max,C=S.textfield.value||this.min,
|
|
2774
|
+
`}};j=new WeakMap,c=new WeakSet,ee=function(){this._showTooltip=!0,this.shadowRoot.querySelector("w-attention").handleDone()},re=function(){this._showTooltip=!1},ge=function(){this.range&&(this.value===""?this.range.value=this.boundaryValue:this.value&&(this.range.value=this.value))},R=function(e){this.dispatchEvent(new CustomEvent("slidervalidity",{bubbles:!0,detail:{invalid:e,slot:this.slot}}))},K=async function(e,t){var _;let a=(_=this.suffix)!=null?_:"",i=Number.parseInt(e);if(this.openEnded&&!t&&this.step&&!(this.slot==="to"&&i>=Number(this.max)-1||this.slot==="from"&&i<=Number(this.min)+1)){let S=1/this.step;i=Math.round(i*S)/S,e=i.toString()}let n=Number.parseInt(this.max),s=Number.parseInt(this.min);if(!this.openEnded&&(i>n||i<s))return m(this,c,R).call(this,M.t({id:"slider.error.out_of_bounds",message:"Value must be between {min} and {max}",values:{min:`${this.min} ${a}`.trim(),max:`${this.max} ${a}`.trim()}})),{shouldCancel:!0};e===""&&this.required&&m(this,c,R).call(this,M.t({id:"slider.error.required",message:"This field is required"})),this.value=e;let d=e===this.max||e===this.min,g=!1;if(this.slot){let F=this.parentElement.querySelector('w-slider-thumb[slot="to"]'),S=this.parentElement.querySelector('w-slider-thumb[slot="from"]'),k=F.textfield.value||this.max,C=S.textfield.value||this.min,E=Number.parseInt(k),x=Number.parseInt(C),T=M.t({id:"slider.error.overlap",message:"The maximum value cannot be less than the minimum"});if(this.slot==="from"){let $=this.openEnded&&E>n?E:Math.min(E,this.openEnded?n-1:n);i>$&&(g=!0,this.openEnded&&d?this.value=String($):this.value=k,t&&(m(this,c,R).call(this,T),await this.updateComplete,this.textfield.value=e))}else{let $=this.openEnded&&x<s?x:Math.max(Number.parseInt(C),this.openEnded?s+1:s);i<$&&(g=!0,this.openEnded&&d?this.value=String($):this.value=C,t&&(m(this,c,R).call(this,T),await this.updateComplete,this.textfield.value=e))}}return g?{shouldCancel:!0}:(m(this,c,R).call(this,""),this.range.value=Math.min(Math.max(Number(e),Number(this.min)),Number(this.max)).toString(),this.value=this.openEnded&&!t&&d?"":e,this.shadowRoot.querySelector("w-attention").handleDone(),{shouldCancel:!1})},fe=async function(e){let t=e.currentTarget.tagName==="W-TEXTFIELD";if(e instanceof CustomEvent)return;let a=e.currentTarget.value;return(await m(this,c,K).call(this,a,t)).shouldCancel?(e.preventDefault(),!1):!0},Ie=async function(e){if(e.key==="Enter"&&this.internals.form){this.internals.form.requestSubmit();return}if(!this.openEnded||e.key!=="ArrowLeft"&&e.key!=="ArrowRight")return;let t=Number(this.range.value),a=this.step||1,i;e.key==="ArrowLeft"?i=t-a:i=t+a,i=Math.min(Math.max(i,Number(this.min)),Number(this.max)),(await m(this,c,K).call(this,i.toString(),!1)).shouldCancel&&e.preventDefault()},je=async function(e){if(e.key==="Enter"&&this.internals.form){this.internals.form.requestSubmit();return}if(this.textfield.value)return;e.preventDefault();let t="";this.slot==="from"?e.key==="ArrowUp"?t=String(Number(this.min)+1)||"1":e.key==="ArrowDown"&&(t=String(Number(this.min))||"0"):e.key==="ArrowUp"?t=String(Number(this.max))||"100":e.key==="ArrowDown"&&(t=String(Number(this.max)-1)||"99"),await m(this,c,K).call(this,t,!0)},b.shadowRootOptions={...Ae.shadowRootOptions,delegatesFocus:!0},b.styles=[De,Ne,Le],p([V({attribute:"aria-label"})],b.prototype,"ariaLabel",2),p([V({attribute:"aria-description"})],b.prototype,"ariaDescription",2),p([V({reflect:!0})],b.prototype,"name",2),p([V({reflect:!0})],b.prototype,"value",2),p([V({type:Boolean,reflect:!0})],b.prototype,"disabled",2),p([V({type:Boolean,reflect:!0})],b.prototype,"invalid",2),p([V({attribute:!1,reflect:!1})],b.prototype,"openEnded",2),p([V({reflect:!0})],b.prototype,"placeholder",2),p([D()],b.prototype,"markers",2),p([D()],b.prototype,"required",2),p([D()],b.prototype,"step",2),p([D()],b.prototype,"min",2),p([D()],b.prototype,"max",2),p([D()],b.prototype,"suffix",2),p([V({attribute:!1})],b.prototype,"valueFormatter",2),p([V({attribute:!1})],b.prototype,"tooltipFormatter",2),p([V({attribute:!1})],b.prototype,"labelFormatter",2),p([me('input[type="range"]')],b.prototype,"range",2),p([me(".w-slider-thumb__tooltip-target")],b.prototype,"tooltipTarget",2),p([me("w-textfield")],b.prototype,"textfield",2),p([D()],b.prototype,"_showTooltip",2),p([D()],b.prototype,"_inputHasFocus",2),p([D()],b.prototype,"_hiddenTextfield",2);customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",b);export{b as WarpSliderThumb};
|
|
2775
2775
|
//# sourceMappingURL=slider-thumb.js.map
|