@warp-ds/elements 2.3.0-next.10 → 2.3.0-next.12
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 +205 -11
- package/dist/index.d.ts +41 -11
- package/dist/packages/combobox/combobox.react.stories.d.ts +1 -1
- package/dist/packages/select/index.d.ts +25 -5
- package/dist/packages/select/index.js +14 -13
- package/dist/packages/select/index.js.map +2 -2
- package/dist/packages/select/select.react.stories.d.ts +1 -1
- package/dist/packages/select/select.stories.d.ts +1 -1
- package/dist/packages/select/select.stories.js +3 -4
- package/dist/packages/slider/slider-thumb.d.ts +11 -7
- package/dist/packages/slider/slider-thumb.js +57 -33
- package/dist/packages/slider/slider-thumb.js.map +3 -3
- package/dist/packages/slider/slider.d.ts +5 -1
- package/dist/packages/slider/slider.js +37 -13
- package/dist/packages/slider/slider.js.map +3 -3
- package/dist/packages/slider/slider.stories.js +134 -39
- package/dist/packages/textarea/textarea.react.stories.d.ts +1 -1
- package/dist/packages/textfield/index.js +1 -1
- package/dist/packages/textfield/index.js.map +2 -2
- package/dist/packages/textfield/textfield.react.stories.d.ts +1 -1
- package/dist/web-types.json +71 -12
- package/package.json +1 -1
|
@@ -27,6 +27,8 @@ declare class WarpSlider extends WarpSlider_base {
|
|
|
27
27
|
*/
|
|
28
28
|
label: string;
|
|
29
29
|
disabled: boolean;
|
|
30
|
+
allowValuesOutsideRange: boolean;
|
|
31
|
+
helpText: string;
|
|
30
32
|
invalid: boolean;
|
|
31
33
|
/** Ensures a child slider thumb has a value before allowing the containing form to submit. */
|
|
32
34
|
required: boolean;
|
|
@@ -38,7 +40,9 @@ declare class WarpSlider extends WarpSlider_base {
|
|
|
38
40
|
/** Suffix used in text input fields and for the min and max values of the slider. */
|
|
39
41
|
suffix: string;
|
|
40
42
|
/** Function to format the to- and from labels and value in the slider thumb tooltip. */
|
|
41
|
-
formatter: (value: string) => string;
|
|
43
|
+
formatter: (value: string, type: 'to' | 'from') => string;
|
|
44
|
+
get edgeMin(): string;
|
|
45
|
+
get edgeMax(): string;
|
|
42
46
|
connectedCallback(): Promise<void>;
|
|
43
47
|
updated(changedProperties: PropertyValues<this>): void;
|
|
44
48
|
render(): import("lit").TemplateResult<1>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var U=l=>{throw TypeError(l)};var p=(l,o,e,r)=>{for(var i=r>1?void 0:r?ae(o,e):o,t=l.length-1,u;t>=0;t--)(u=l[t])&&(i=(r?u(o,e,i):u(i))||i);return r&&i&&te(o,e,i),i};var ie=(l,o,e)=>o.has(l)||U("Cannot "+e);var B=(l,o,e)=>o.has(l)?U("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(l):o.set(l,e);var v=(l,o,e)=>(ie(l,o,"access private method"),e);var n=function(l,o,e,r){if(e==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof o=="function"?l!==o||!r:!o.has(l))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?r:e==="a"?r.call(l):r?r.value:o.get(l)},b=function(l,o,e,r,i){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof o=="function"?l!==o||!i:!o.has(l))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?i.call(l,e):i?i.value=e:o.set(l,e),e};function G(l){var o,e,r,i,t,u,k,P,f,j,A,R,S,C,E,y,q,N,O;class oe extends l{constructor(...a){var s,c,h;super(...a),o.add(this),this.internals=this.attachInternals(),e.set(this,!1),r.set(this,!1),i.set(this,!1),t.set(this,void 0),u.set(this,void 0),k.set(this,!0),f.set(this,""),j.set(this,()=>{b(this,i,!0,"f"),b(this,e,!0,"f"),n(this,o,"m",y).call(this)}),A.set(this,()=>{b(this,e,!1,"f"),n(this,o,"m",q).call(this,this.shouldFormValueUpdate()?n(this,f,"f"):""),!this.validity.valid&&n(this,i,"f")&&b(this,r,!0,"f");let x=n(this,o,"m",y).call(this);this.validationMessageCallback&&this.validationMessageCallback(x?this.internals.validationMessage:"")}),R.set(this,()=>{var x;n(this,k,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),b(this,k,!1,"f")),b(this,i,!0,"f"),b(this,r,!0,"f"),n(this,o,"m",y).call(this),(x=this===null||this===void 0?void 0:this.validationMessageCallback)===null||x===void 0||x.call(this,this.showError?this.internals.validationMessage:"")}),S.set(this,void 0),C.set(this,!1),E.set(this,Promise.resolve()),(s=this.addEventListener)===null||s===void 0||s.call(this,"focus",n(this,j,"f")),(c=this.addEventListener)===null||c===void 0||c.call(this,"blur",n(this,A,"f")),(h=this.addEventListener)===null||h===void 0||h.call(this,"invalid",n(this,R,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let a=this.validators.map(h=>h.attribute).flat(),s=super.observedAttributes||[];return[...new Set([...s,...a])]}static getValidator(a){return this.validators.find(s=>s.attribute===a)||null}static getValidators(a){return this.validators.filter(s=>{var c;if(s.attribute===a||!((c=s.attribute)===null||c===void 0)&&c.includes(a))return!0})}get form(){return this.internals.form}get showError(){return n(this,o,"m",y).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(a,s,c){var h;(h=super.attributeChangedCallback)===null||h===void 0||h.call(this,a,s,c);let V=this.constructor.getValidators(a);V!=null&&V.length&&this.validationTarget&&this.setValue(n(this,f,"f"))}setValue(a){var s;b(this,r,!1,"f"),(s=this.validationMessageCallback)===null||s===void 0||s.call(this,""),b(this,f,a,"f");let h=this.shouldFormValueUpdate()?a:null;this.internals.setFormValue(h),n(this,o,"m",q).call(this,h),this.valueChangedCallback&&this.valueChangedCallback(h),n(this,o,"m",y).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(a=>a(n(this,E,"f")))}formResetCallback(){var a,s;b(this,i,!1,"f"),b(this,r,!1,"f"),n(this,o,"m",y).call(this),(a=this.resetFormControl)===null||a===void 0||a.call(this),(s=this.validationMessageCallback)===null||s===void 0||s.call(this,n(this,o,"m",y).call(this)?this.validationMessage:"")}}return e=new WeakMap,r=new WeakMap,i=new WeakMap,t=new WeakMap,u=new WeakMap,k=new WeakMap,f=new WeakMap,j=new WeakMap,A=new WeakMap,R=new WeakMap,S=new WeakMap,C=new WeakMap,E=new WeakMap,o=new WeakSet,P=function(){let a=this.getRootNode(),s=`${this.localName}[name="${this.getAttribute("name")}"]`;return a.querySelectorAll(s)},y=function(){if(this.hasAttribute("disabled"))return!1;let a=n(this,r,"f")||n(this,i,"f")&&!this.validity.valid&&!n(this,e,"f");return a&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),a},q=function(a){let s=this.constructor,c={},h=s.validators,x=[],V=h.some(m=>m.isValid instanceof Promise);n(this,C,"f")||(b(this,E,new Promise(m=>{b(this,S,m,"f")}),"f"),b(this,C,!0,"f")),n(this,t,"f")&&(n(this,t,"f").abort(),b(this,u,n(this,t,"f"),"f"));let T=new AbortController;b(this,t,T,"f");let M,L=!1;h.length&&(h.forEach(m=>{let X=m.key||"customError",_=m.isValid(this,a,T.signal);_ instanceof Promise?(x.push(_),_.then(W=>{W!=null&&(c[X]=!W,M=n(this,o,"m",O).call(this,m,a),n(this,o,"m",N).call(this,c,M))})):(c[X]=!_,this.validity[X]!==!_&&(L=!0),!_&&!M&&(M=n(this,o,"m",O).call(this,m,a)))}),Promise.allSettled(x).then(()=>{var m;T!=null&&T.signal.aborted||(b(this,C,!1,"f"),(m=n(this,S,"f"))===null||m===void 0||m.call(this))}),(L||!V)&&n(this,o,"m",N).call(this,c,M))},N=function(a,s){if(this.validationTarget)this.internals.setValidity(a,s,this.validationTarget),b(this,k,!1,"f");else{if(this.internals.setValidity(a,s),this.internals.validity.valid)return;b(this,k,!0,"f")}},O=function(a,s){if(this.validityCallback){let c=this.validityCallback(a.key||"customError");if(c)return c}return a.message instanceof Function?a.message(this,s):a.message},oe}import{html as $,LitElement as K,nothing as Y}from"lit";import{property as w}from"lit/decorators.js";import{css as H}from"lit";var D=H`
|
|
2
2
|
*,
|
|
3
3
|
:before,
|
|
4
4
|
:after {
|
|
@@ -271,7 +271,7 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var N=l=>{th
|
|
|
271
271
|
svg {
|
|
272
272
|
pointer-events: none;
|
|
273
273
|
}
|
|
274
|
-
`,
|
|
274
|
+
`,be=H`*, :before, :after {
|
|
275
275
|
--w-rotate: 0;
|
|
276
276
|
--w-rotate-x: 0;
|
|
277
277
|
--w-rotate-y: 0;
|
|
@@ -2437,7 +2437,7 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var N=l=>{th
|
|
|
2437
2437
|
display: none
|
|
2438
2438
|
}
|
|
2439
2439
|
}
|
|
2440
|
-
`;import{css as
|
|
2440
|
+
`;import{css as se}from"lit";var J=se`
|
|
2441
2441
|
.w-slider {
|
|
2442
2442
|
position: relative;
|
|
2443
2443
|
border: none;
|
|
@@ -2569,19 +2569,43 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var N=l=>{th
|
|
|
2569
2569
|
bottom: 0;
|
|
2570
2570
|
grid-area: slider;
|
|
2571
2571
|
}
|
|
2572
|
-
`;var
|
|
2573
|
-
<fieldset
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2572
|
+
`;var d,z,Q,ee,re,Z,I,g=class extends G(K){constructor(){super(...arguments);B(this,d);this.disabled=!1;this.allowValuesOutsideRange=!1;this.helpText="";this.invalid=!1;this.required=!1}get edgeMin(){return this.allowValuesOutsideRange?(Number(this.min)-1).toString():this.min}get edgeMax(){return this.allowValuesOutsideRange?(Number(this.max)+1).toString():this.max}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.step&&this.style.setProperty("--step",String(this.step)),this.style.setProperty("--min",this.edgeMin),this.style.setProperty("--max",this.max),this.markers&&this.style.setProperty("--markers",String(this.markers)),v(this,d,z).call(this)}updated(e){(e.has("disabled")||e.has("invalid")||e.has("required")||e.has("min")||e.has("step")||e.has("max")||e.has("suffix")||e.has("formatter"))&&v(this,d,z).call(this)}render(){return $`
|
|
2573
|
+
<fieldset
|
|
2574
|
+
id="fieldset"
|
|
2575
|
+
class="w-slider"
|
|
2576
|
+
@input="${v(this,d,Q)}"
|
|
2577
|
+
@slidervalidity="${v(this,d,re)}"
|
|
2578
|
+
aria-invalid="${this.invalid?"true":Y}"
|
|
2579
|
+
aria-describedby="${this.invalid?"error-slot":Y}"
|
|
2580
|
+
>
|
|
2581
|
+
${this.label?$`<legend class="w-slider__label">
|
|
2582
|
+
<slot id="label" name="label">${this.label}</slot>
|
|
2583
|
+
</legend>`:Y}
|
|
2577
2584
|
<slot class="w-slider__description" name="description"></slot>
|
|
2578
|
-
${this.markers
|
|
2585
|
+
${this.markers?$`<div class="w-slider__markers"></div>`:Y}
|
|
2579
2586
|
<div class="w-slider__range">
|
|
2580
2587
|
<div class="w-slider__active-range"></div>
|
|
2581
2588
|
</div>
|
|
2582
|
-
<slot
|
|
2583
|
-
|
|
2584
|
-
|
|
2589
|
+
<slot
|
|
2590
|
+
class="w-slider__slider"
|
|
2591
|
+
@slotchange=${v(this,d,z)}
|
|
2592
|
+
></slot>
|
|
2593
|
+
<slot
|
|
2594
|
+
class="w-slider__slider"
|
|
2595
|
+
name="from"
|
|
2596
|
+
@slotchange=${v(this,d,z)}
|
|
2597
|
+
></slot>
|
|
2598
|
+
<slot
|
|
2599
|
+
class="w-slider__slider"
|
|
2600
|
+
name="to"
|
|
2601
|
+
@slotchange=${v(this,d,z)}
|
|
2602
|
+
></slot>
|
|
2603
|
+
<slot
|
|
2604
|
+
class="w-slider__error"
|
|
2605
|
+
id="error-slot"
|
|
2606
|
+
name="error"
|
|
2607
|
+
aria-describes="fieldset"
|
|
2608
|
+
></slot>
|
|
2585
2609
|
</fieldset>
|
|
2586
|
-
`}};
|
|
2610
|
+
`}};d=new WeakSet,z=function(){let e=this.querySelectorAll("w-slider-thumb"),r=!1;for(let t of e.values())t.min=this.edgeMin,t.max=this.edgeMax,t.step=this.step,t.suffix=this.suffix,t.required=this.required,t.formatter=this.formatter,t.allowValuesOutsideRange=this.allowValuesOutsideRange,t.ariaLabel||(t.slot||(t.ariaLabel=this.label),t.slot==="from"&&(t.ariaLabel=`${this.label} min`),t.slot==="to"&&(t.ariaLabel=`${this.label} max`)),(t.slot==="from"||t.slot==="to")&&(r=!0),t.disabled=this.disabled,t.invalid=this.invalid,v(this,d,I).call(this,t);let i=this.shadowRoot.querySelector("fieldset");r?(i.style.setProperty("--active-range-inline-start-padding","var(--w-slider-thumb-size)"),i.style.setProperty("--active-range-inline-end-padding","var(--w-slider-thumb-size)")):i.style.setProperty("--active-range-border-radius","4px")},Q=function(e){let r=e.target;v(this,d,I).call(this,r),r.slot&&v(this,d,ee).call(this)},ee=function(){let e,r,i=this.querySelectorAll("w-slider-thumb");for(let f of i.values())f.slot==="from"&&(e=f),f.slot==="to"&&(r=f);if(!e||!r||!e.invalid&&!r.invalid)return;let t=e.shadowRoot.querySelector("w-textfield"),u=r.shadowRoot.querySelector("w-textfield"),k=Number(t.value)<=Number(u.value),P=Number(u.value)>=Number(t.value);k&&P&&(e.invalid=!1,r.invalid=!1,e.value!==t.value&&(e.value=t.value),r.value!==u.value&&(r.value=u.value))},re=function(e){if(e.stopPropagation(),e.detail.invalid)this.invalid=!0;else{let r=!1,i=this.querySelectorAll("w-slider-thumb");for(let t of i.values())t.invalid&&(r=!0);this.invalid=r}},Z=function(e,r){return(r.value===void 0||r.value===null)&&(r.value=this.allowValuesOutsideRange?"":e),r.value===""?e:r.value},I=function(e){let r=e.slot;r||this.style.setProperty("--from","0"),r==="from"&&this.style.setProperty("--from",v(this,d,Z).call(this,this.edgeMin,e)),(!r||r==="to")&&this.style.setProperty("--to",v(this,d,Z).call(this,this.edgeMax,e))},g.shadowRootOptions={...K.shadowRootOptions,delegatesFocus:!0},g.styles=[D,J],p([w({reflect:!0})],g.prototype,"label",2),p([w({type:Boolean,reflect:!0})],g.prototype,"disabled",2),p([w({type:Boolean,attribute:"allow-values-outside-range"})],g.prototype,"allowValuesOutsideRange",2),p([w({reflect:!0})],g.prototype,"helpText",2),p([w({type:Boolean,reflect:!0})],g.prototype,"invalid",2),p([w({type:Boolean,reflect:!0})],g.prototype,"required",2),p([w({reflect:!0})],g.prototype,"min",2),p([w({reflect:!0})],g.prototype,"max",2),p([w({type:Number,reflect:!0})],g.prototype,"markers",2),p([w({type:Number,reflect:!0})],g.prototype,"step",2),p([w({reflect:!0})],g.prototype,"suffix",2),p([w({attribute:!1})],g.prototype,"formatter",2);customElements.get("w-slider")||customElements.define("w-slider",g);export{g as WarpSlider};
|
|
2587
2611
|
//# sourceMappingURL=slider.js.map
|