@warp-ds/elements 2.9.1-next.3 → 2.9.1-next.4

package/dist/packages/slider-thumb/slider-thumb.d.ts

@@ -5,10 +5,13 @@ declare const WarpSliderThumb_base: import("@open-wc/form-control").Constructor<
 /**
  * Component to place inside a `<w-slider>`.
  *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+ * @parent w-slider
+ * @event {CustomEvent} slidervalidity - Internal event used by (and stopped by) `w-slider`.
+ * @event {CustomEvent} thumbreset - Internal event used by (and stopped by) `w-slider`.
  */
 declare class WarpSliderThumb extends WarpSliderThumb_base {
     #private;
+    /** @internal */
     static shadowRootOptions: {
         delegatesFocus: boolean;
         clonable?: boolean;
@@ -19,43 +22,37 @@ declare class WarpSliderThumb extends WarpSliderThumb_base {
     };
     static styles: import("lit").CSSResult[];
     /**
-     * @summary
-     * @description
+     * Label for the range input.
+     *
+     * @default `label` from `w-slider`
      */
     ariaLabel: string;
     /**
-     * @summary
-     * @description
+     * Contextual information for assistive technology, should it be needed
      */
     ariaDescription: string;
     /**
-     * @summary
-     * @description
+     * The name of this input field in the form. The canonical source of the value is the text field.
      */
     name: string;
     /**
-     * @summary
-     * @description
+     * The initial value, if any
      */
     value: string;
-    /** @internal Set by `<w-slider>`
-     * @summary
-     * @description
+    /**
+     * @internal Set by `<w-slider>`
      */
     disabled: boolean;
-    /** @internal Set by `<w-slider>`
-     * @summary
-     * @description
+    /**
+     * @internal Set by `<w-slider>`
      */
     invalid: boolean;
-    /** @internal Set by `<w-slider>`
-     * @summary
-     * @description
+    /**
+     * @internal Set by `<w-slider>`
      */
     openEnded: boolean;
     /**
-     * @summary
-     * @description
+     * Placeholder in empty text fields
      */
     placeholder: string;
     /** @internal Set by `<w-slider>` */
@@ -70,19 +67,16 @@ declare class WarpSliderThumb extends WarpSliderThumb_base {
     max: string;
     /** @internal Set by `<w-slider>` */
     suffix: string;
-    /** @internal Formatter for the tooltip and input mask values. Set by `<w-slider>`.
-     * @summary
-     * @description
+    /**
+     * @internal Formatter for the tooltip and input mask values. Set by `<w-slider>`.
      */
     valueFormatter: (value: string, slot: SliderSlot) => string;
-    /** @internal Replaces {@link valueFormatter} for the tooltip. Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. Set by `<w-slider>`.
-     * @summary
-     * @description
+    /**
+     * @internal Replaces {@link valueFormatter} for the tooltip. Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip. Set by `<w-slider>`.
      */
     tooltipFormatter: (value: string, slot: SliderSlot) => string;
-    /** @internal Formatter for the min and max labels below the range. Set by `<w-slider>`.
-     * @summary
-     * @description
+    /**
+     * @internal Formatter for the min and max labels below the range. Set by `<w-slider>`.
      */
     labelFormatter: (slot: SliderSlot) => string;
     /** @internal */
@@ -105,11 +99,22 @@ declare class WarpSliderThumb extends WarpSliderThumb_base {
     anchorPositioningStyleElement: HTMLStyleElement | null;
     updateFieldAfterValidation(): Promise<void>;
     connectedCallback(): Promise<void>;
+    /**
+     * The boundary value for this thumb (min for 'from', max for 'to' or default)
+     * @internal
+     */
     get boundaryValue(): string;
-    /** Value to display in the textfield (shows boundary when focused on empty value) */
+    /**
+     * Value to display in the textfield (shows boundary when focused on empty value)
+     * @internal
+     */
     get textFieldDisplayValue(): string;
-    /** Value to display in the tooltip */
+    /**
+     * Value to display in the tooltip
+     * @internal
+     */
     get tooltipDisplayValue(): string | number;
+    /** @internal */
     get ariaDescriptionText(): string;
     updated(changedProperties: PropertyValues<this>): void;
     render(): import("lit").TemplateResult<1>;

package/dist/packages/slider-thumb/slider-thumb.js

@@ -2770,5 +2770,5 @@ Please compile your catalog first.
           ${this.ariaDescriptionText}
         </span>
       </div>
-    `}};T=new WeakMap,d=new WeakSet,B=function(){this._showTooltip=!0,this.shadowRoot.querySelector("w-attention").handleDone()},G=function(){this._showTooltip=!1},ce=function(){this.range&&(this.value===""?this.range.value=this.boundaryValue:this.value&&(this.range.value=this.value))},Y=function(e){this.dispatchEvent(new CustomEvent("slidervalidity",{bubbles:!0,detail:{invalid:e,slot:this.slot}}))},U=async function(e,t){var E;let a=(E=this.suffix)!=null?E:"",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 M=1/this.step;i=Math.round(i*M)/M,e=i.toString()}let n=Number.parseInt(this.max),s=Number.parseInt(this.min);if(!this.openEnded&&(i>n||i<s))return m(this,d,Y).call(this,C.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,d,Y).call(this,C.t({id:"slider.error.required",message:"This field is required"})),this.value=e;let c=e===this.max||e===this.min,f=!1;if(this.slot){let F=this.parentElement.querySelector('w-slider-thumb[slot="to"]'),M=this.parentElement.querySelector('w-slider-thumb[slot="from"]'),k=F.textfield.value||this.max,y=M.textfield.value||this.min,_=Number.parseInt(k),x=Number.parseInt(y),S=C.t({id:"slider.error.overlap",message:"The maximum value cannot be less than the minimum"});if(this.slot==="from"){let V=this.openEnded&&_>n?_:Math.min(_,this.openEnded?n-1:n);i>V&&(f=!0,this.openEnded&&c?this.value=String(V):this.value=k,t&&(m(this,d,Y).call(this,S),await this.updateComplete,this.textfield.value=e))}else{let V=this.openEnded&&x<s?x:Math.max(Number.parseInt(y),this.openEnded?s+1:s);i<V&&(f=!0,this.openEnded&&c?this.value=String(V):this.value=y,t&&(m(this,d,Y).call(this,S),await this.updateComplete,this.textfield.value=e))}}return f?{shouldCancel:!0}:(m(this,d,Y).call(this,""),this.range.value=Math.min(Math.max(Number(e),Number(this.min)),Number(this.max)).toString(),this.value=this.openEnded&&!t&&c?"":e,this.shadowRoot.querySelector("w-attention").handleDone(),{shouldCancel:!1})},he=async function(e){let t=e.currentTarget.tagName==="W-TEXTFIELD";if(e instanceof CustomEvent)return;let a=e.currentTarget.value;return(await m(this,d,U).call(this,a,t)).shouldCancel?(e.preventDefault(),!1):!0},Fe=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,d,U).call(this,i.toString(),!1)).shouldCancel&&e.preventDefault()},Me=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,d,U).call(this,t,!0)},b.shadowRootOptions={...Ce.shadowRootOptions,delegatesFocus:!0},b.styles=[_e,ke,ze],p([$({attribute:"aria-label"})],b.prototype,"ariaLabel",2),p([$({attribute:"aria-description"})],b.prototype,"ariaDescription",2),p([$({reflect:!0})],b.prototype,"name",2),p([$({reflect:!0})],b.prototype,"value",2),p([$({type:Boolean,reflect:!0})],b.prototype,"disabled",2),p([$({type:Boolean,reflect:!0})],b.prototype,"invalid",2),p([$({attribute:!1,reflect:!1})],b.prototype,"openEnded",2),p([$({reflect:!0})],b.prototype,"placeholder",2),p([N()],b.prototype,"markers",2),p([N()],b.prototype,"required",2),p([N()],b.prototype,"step",2),p([N()],b.prototype,"min",2),p([N()],b.prototype,"max",2),p([N()],b.prototype,"suffix",2),p([$({attribute:!1})],b.prototype,"valueFormatter",2),p([$({attribute:!1})],b.prototype,"tooltipFormatter",2),p([$({attribute:!1})],b.prototype,"labelFormatter",2),p([de('input[type="range"]')],b.prototype,"range",2),p([de(".w-slider-thumb__tooltip-target")],b.prototype,"tooltipTarget",2),p([de("w-textfield")],b.prototype,"textfield",2),p([N()],b.prototype,"_showTooltip",2),p([N()],b.prototype,"_inputHasFocus",2),p([N()],b.prototype,"_hiddenTextfield",2);customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",b);export{b as WarpSliderThumb};
+    `}};T=new WeakMap,d=new WeakSet,B=function(){this._showTooltip=!0,this.shadowRoot.querySelector("w-attention").handleDone()},G=function(){this._showTooltip=!1},ce=function(){this.range&&(this.value===""?this.range.value=this.boundaryValue:this.value&&(this.range.value=this.value))},Y=function(e){this.dispatchEvent(new CustomEvent("slidervalidity",{bubbles:!0,detail:{invalid:e,slot:this.slot}}))},U=async function(e,t){var E;let a=(E=this.suffix)!=null?E:"",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 M=1/this.step;i=Math.round(i*M)/M,e=i.toString()}let n=Number.parseInt(this.max),s=Number.parseInt(this.min);if(!this.openEnded&&(i>n||i<s))return m(this,d,Y).call(this,C.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,d,Y).call(this,C.t({id:"slider.error.required",message:"This field is required"})),this.value=e;let c=e===this.max||e===this.min,f=!1;if(this.slot){let F=this.parentElement.querySelector('w-slider-thumb[slot="to"]'),M=this.parentElement.querySelector('w-slider-thumb[slot="from"]'),k=F.textfield.value||this.max,y=M.textfield.value||this.min,_=Number.parseInt(k),x=Number.parseInt(y),S=C.t({id:"slider.error.overlap",message:"The maximum value cannot be less than the minimum"});if(this.slot==="from"){let V=this.openEnded&&_>n?_:Math.min(_,this.openEnded?n-1:n);i>V&&(f=!0,this.openEnded&&c?this.value=String(V):this.value=k,t&&(m(this,d,Y).call(this,S),await this.updateComplete,this.textfield.value=e))}else{let V=this.openEnded&&x<s?x:Math.max(Number.parseInt(y),this.openEnded?s+1:s);i<V&&(f=!0,this.openEnded&&c?this.value=String(V):this.value=y,t&&(m(this,d,Y).call(this,S),await this.updateComplete,this.textfield.value=e))}}return f?{shouldCancel:!0}:(m(this,d,Y).call(this,""),this.range.value=Math.min(Math.max(Number(e),Number(this.min)),Number(this.max)).toString(),this.value=this.openEnded&&!t&&c?"":e,this.shadowRoot.querySelector("w-attention").handleDone(),{shouldCancel:!1})},he=async function(e){let t=e.currentTarget.tagName==="W-TEXTFIELD";if(e instanceof CustomEvent)return;let a=e.currentTarget.value;return(await m(this,d,U).call(this,a,t)).shouldCancel?(e.preventDefault(),!1):!0},Fe=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,d,U).call(this,i.toString(),!1)).shouldCancel&&e.preventDefault()},Me=async function(e){if(e.key==="Enter"&&this.internals.form){this.internals.form.requestSubmit();return}if(this.textfield.value)return;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"),t&&(e.preventDefault(),await m(this,d,U).call(this,t,!0))},b.shadowRootOptions={...Ce.shadowRootOptions,delegatesFocus:!0},b.styles=[_e,ke,ze],p([$({attribute:"aria-label"})],b.prototype,"ariaLabel",2),p([$({attribute:"aria-description"})],b.prototype,"ariaDescription",2),p([$({reflect:!0})],b.prototype,"name",2),p([$({reflect:!0})],b.prototype,"value",2),p([$({type:Boolean,reflect:!0})],b.prototype,"disabled",2),p([$({type:Boolean,reflect:!0})],b.prototype,"invalid",2),p([$({attribute:!1,reflect:!1})],b.prototype,"openEnded",2),p([$({reflect:!0})],b.prototype,"placeholder",2),p([N()],b.prototype,"markers",2),p([N()],b.prototype,"required",2),p([N()],b.prototype,"step",2),p([N()],b.prototype,"min",2),p([N()],b.prototype,"max",2),p([N()],b.prototype,"suffix",2),p([$({attribute:!1})],b.prototype,"valueFormatter",2),p([$({attribute:!1})],b.prototype,"tooltipFormatter",2),p([$({attribute:!1})],b.prototype,"labelFormatter",2),p([de('input[type="range"]')],b.prototype,"range",2),p([de(".w-slider-thumb__tooltip-target")],b.prototype,"tooltipTarget",2),p([de("w-textfield")],b.prototype,"textfield",2),p([N()],b.prototype,"_showTooltip",2),p([N()],b.prototype,"_inputHasFocus",2),p([N()],b.prototype,"_hiddenTextfield",2);customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",b);export{b as WarpSliderThumb};
 //# sourceMappingURL=slider-thumb.js.map