@warp-ds/elements 2.4.0-next.8 → 2.4.0-next.9
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 +1 -55
- package/dist/index.d.ts +0 -26
- package/dist/packages/combobox/combobox.js +2 -1
- package/dist/packages/combobox/combobox.js.map +2 -2
- package/dist/packages/combobox/styles.js +2 -1
- package/dist/packages/step/step.js +5 -5
- package/dist/packages/step/step.js.map +2 -2
- package/dist/packages/step-indicator/step-indicator.js +1 -1
- package/dist/packages/step-indicator/step-indicator.js.map +2 -2
- package/dist/packages/step-indicator/styles.js +1 -1
- package/dist/packages/tab/tab.d.ts +1 -3
- package/dist/packages/tab/tab.js +11 -11
- package/dist/packages/tab/tab.js.map +3 -3
- package/dist/packages/tab-panel/tab-panel.js +1 -1
- package/dist/packages/tab-panel/tab-panel.js.map +2 -2
- package/dist/packages/tabs/styles.js +1 -1
- package/dist/packages/tabs/tabs.d.ts +0 -1
- package/dist/packages/tabs/tabs.js +5 -5
- package/dist/packages/tabs/tabs.js.map +3 -3
- package/dist/packages/tabs/tabs.react.stories.d.ts +13 -0
- package/dist/packages/tabs/tabs.react.stories.js +43 -22
- package/dist/packages/tabs/tabs.stories.d.ts +4 -5
- package/dist/packages/tabs/tabs.stories.js +51 -29
- package/dist/web-types.json +3 -18
- package/package.json +19 -18
- package/dist/packages/slider-thumb/styles.d.ts +0 -1
- package/dist/packages/slider-thumb/styles.js +0 -2
- package/dist/packages/toast-container/styles.d.ts +0 -1
- package/dist/packages/toast-container/styles.js +0 -2
|
@@ -6648,16 +6648,6 @@
|
|
|
6648
6648
|
"attribute": "for",
|
|
6649
6649
|
"reflects": true
|
|
6650
6650
|
},
|
|
6651
|
-
{
|
|
6652
|
-
"kind": "field",
|
|
6653
|
-
"name": "label",
|
|
6654
|
-
"type": {
|
|
6655
|
-
"text": "string"
|
|
6656
|
-
},
|
|
6657
|
-
"default": "''",
|
|
6658
|
-
"attribute": "label",
|
|
6659
|
-
"reflects": true
|
|
6660
|
-
},
|
|
6661
6651
|
{
|
|
6662
6652
|
"kind": "field",
|
|
6663
6653
|
"name": "active",
|
|
@@ -6678,16 +6668,6 @@
|
|
|
6678
6668
|
"attribute": "over",
|
|
6679
6669
|
"reflects": true
|
|
6680
6670
|
},
|
|
6681
|
-
{
|
|
6682
|
-
"kind": "field",
|
|
6683
|
-
"name": "tabClass",
|
|
6684
|
-
"type": {
|
|
6685
|
-
"text": "string"
|
|
6686
|
-
},
|
|
6687
|
-
"default": "''",
|
|
6688
|
-
"attribute": "tab-class",
|
|
6689
|
-
"reflects": true
|
|
6690
|
-
},
|
|
6691
6671
|
{
|
|
6692
6672
|
"kind": "field",
|
|
6693
6673
|
"name": "_classes",
|
|
@@ -6696,7 +6676,7 @@
|
|
|
6696
6676
|
},
|
|
6697
6677
|
{
|
|
6698
6678
|
"kind": "field",
|
|
6699
|
-
"name": "
|
|
6679
|
+
"name": "_hasIcon",
|
|
6700
6680
|
"privacy": "private",
|
|
6701
6681
|
"readonly": true
|
|
6702
6682
|
}
|
|
@@ -6710,14 +6690,6 @@
|
|
|
6710
6690
|
"default": "''",
|
|
6711
6691
|
"fieldName": "for"
|
|
6712
6692
|
},
|
|
6713
|
-
{
|
|
6714
|
-
"name": "label",
|
|
6715
|
-
"type": {
|
|
6716
|
-
"text": "string"
|
|
6717
|
-
},
|
|
6718
|
-
"default": "''",
|
|
6719
|
-
"fieldName": "label"
|
|
6720
|
-
},
|
|
6721
6693
|
{
|
|
6722
6694
|
"name": "active",
|
|
6723
6695
|
"type": {
|
|
@@ -6733,14 +6705,6 @@
|
|
|
6733
6705
|
},
|
|
6734
6706
|
"default": "false",
|
|
6735
6707
|
"fieldName": "over"
|
|
6736
|
-
},
|
|
6737
|
-
{
|
|
6738
|
-
"name": "tab-class",
|
|
6739
|
-
"type": {
|
|
6740
|
-
"text": "string"
|
|
6741
|
-
},
|
|
6742
|
-
"default": "''",
|
|
6743
|
-
"fieldName": "tabClass"
|
|
6744
6708
|
}
|
|
6745
6709
|
],
|
|
6746
6710
|
"superclass": {
|
|
@@ -6855,16 +6819,6 @@
|
|
|
6855
6819
|
"attribute": "active",
|
|
6856
6820
|
"reflects": true
|
|
6857
6821
|
},
|
|
6858
|
-
{
|
|
6859
|
-
"kind": "field",
|
|
6860
|
-
"name": "tabClass",
|
|
6861
|
-
"type": {
|
|
6862
|
-
"text": "string"
|
|
6863
|
-
},
|
|
6864
|
-
"default": "''",
|
|
6865
|
-
"attribute": "tab-class",
|
|
6866
|
-
"reflects": true
|
|
6867
|
-
},
|
|
6868
6822
|
{
|
|
6869
6823
|
"kind": "field",
|
|
6870
6824
|
"name": "tabList",
|
|
@@ -6977,14 +6931,6 @@
|
|
|
6977
6931
|
},
|
|
6978
6932
|
"default": "''",
|
|
6979
6933
|
"fieldName": "active"
|
|
6980
|
-
},
|
|
6981
|
-
{
|
|
6982
|
-
"name": "tab-class",
|
|
6983
|
-
"type": {
|
|
6984
|
-
"text": "string"
|
|
6985
|
-
},
|
|
6986
|
-
"default": "''",
|
|
6987
|
-
"fieldName": "tabClass"
|
|
6988
6934
|
}
|
|
6989
6935
|
],
|
|
6990
6936
|
"superclass": {
|
package/dist/index.d.ts
CHANGED
|
@@ -1687,30 +1687,18 @@ export type WarpTabProps = {
|
|
|
1687
1687
|
/** */
|
|
1688
1688
|
for?: WarpTab["for"];
|
|
1689
1689
|
/** */
|
|
1690
|
-
label?: WarpTab["label"];
|
|
1691
|
-
/** */
|
|
1692
1690
|
active?: WarpTab["active"];
|
|
1693
1691
|
/** */
|
|
1694
1692
|
over?: WarpTab["over"];
|
|
1695
|
-
/** */
|
|
1696
|
-
"tab-class"?: WarpTab["tabClass"];
|
|
1697
|
-
/** */
|
|
1698
|
-
tabClass?: WarpTab["tabClass"];
|
|
1699
1693
|
};
|
|
1700
1694
|
|
|
1701
1695
|
export type WarpTabSolidJsProps = {
|
|
1702
1696
|
/** */
|
|
1703
1697
|
"prop:for"?: WarpTab["for"];
|
|
1704
1698
|
/** */
|
|
1705
|
-
"prop:label"?: WarpTab["label"];
|
|
1706
|
-
/** */
|
|
1707
1699
|
"prop:active"?: WarpTab["active"];
|
|
1708
1700
|
/** */
|
|
1709
1701
|
"prop:over"?: WarpTab["over"];
|
|
1710
|
-
/** */
|
|
1711
|
-
"attr:tab-class"?: WarpTab["tabClass"];
|
|
1712
|
-
/** */
|
|
1713
|
-
"prop:tabClass"?: WarpTab["tabClass"];
|
|
1714
1702
|
|
|
1715
1703
|
/** Set the innerHTML of the element */
|
|
1716
1704
|
innerHTML?: string;
|
|
@@ -1736,10 +1724,6 @@ export type WarpTabPanelSolidJsProps = {
|
|
|
1736
1724
|
export type WarpTabsProps = {
|
|
1737
1725
|
/** */
|
|
1738
1726
|
active?: WarpTabs["active"];
|
|
1739
|
-
/** */
|
|
1740
|
-
"tab-class"?: WarpTabs["tabClass"];
|
|
1741
|
-
/** */
|
|
1742
|
-
tabClass?: WarpTabs["tabClass"];
|
|
1743
1727
|
|
|
1744
1728
|
/** */
|
|
1745
1729
|
onchange?: (e: CustomEvent) => void;
|
|
@@ -1749,10 +1733,6 @@ export type WarpTabsSolidJsProps = {
|
|
|
1749
1733
|
/** */
|
|
1750
1734
|
"prop:active"?: WarpTabs["active"];
|
|
1751
1735
|
/** */
|
|
1752
|
-
"attr:tab-class"?: WarpTabs["tabClass"];
|
|
1753
|
-
/** */
|
|
1754
|
-
"prop:tabClass"?: WarpTabs["tabClass"];
|
|
1755
|
-
/** */
|
|
1756
1736
|
"on:change"?: (e: CustomEvent) => void;
|
|
1757
1737
|
|
|
1758
1738
|
/** Set the innerHTML of the element */
|
|
@@ -2731,10 +2711,8 @@ export type CustomElements = {
|
|
|
2731
2711
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
2732
2712
|
*
|
|
2733
2713
|
* - `for`: undefined
|
|
2734
|
-
* - `label`: undefined
|
|
2735
2714
|
* - `active`: undefined
|
|
2736
2715
|
* - `over`: undefined
|
|
2737
|
-
* - `tab-class`/`tabClass`: undefined
|
|
2738
2716
|
*/
|
|
2739
2717
|
"w-tab": Partial<WarpTabProps & BaseProps<WarpTab> & BaseEvents>;
|
|
2740
2718
|
|
|
@@ -2764,7 +2742,6 @@ export type CustomElements = {
|
|
|
2764
2742
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
2765
2743
|
*
|
|
2766
2744
|
* - `active`: undefined
|
|
2767
|
-
* - `tab-class`/`tabClass`: undefined
|
|
2768
2745
|
* - `tabs`: undefined (property only) (readonly)
|
|
2769
2746
|
* - `activeTab`: undefined (property only) (readonly)
|
|
2770
2747
|
*
|
|
@@ -3786,10 +3763,8 @@ export type CustomElementsSolidJs = {
|
|
|
3786
3763
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
3787
3764
|
*
|
|
3788
3765
|
* - `for`: undefined
|
|
3789
|
-
* - `label`: undefined
|
|
3790
3766
|
* - `active`: undefined
|
|
3791
3767
|
* - `over`: undefined
|
|
3792
|
-
* - `tab-class`/`tabClass`: undefined
|
|
3793
3768
|
*/
|
|
3794
3769
|
"w-tab": Partial<
|
|
3795
3770
|
WarpTabProps & WarpTabSolidJsProps & BaseProps<WarpTab> & BaseEvents
|
|
@@ -3824,7 +3799,6 @@ export type CustomElementsSolidJs = {
|
|
|
3824
3799
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
3825
3800
|
*
|
|
3826
3801
|
* - `active`: undefined
|
|
3827
|
-
* - `tab-class`/`tabClass`: undefined
|
|
3828
3802
|
* - `tabs`: undefined (property only) (readonly)
|
|
3829
3803
|
* - `activeTab`: undefined (property only) (readonly)
|
|
3830
3804
|
*
|
|
@@ -2446,7 +2446,8 @@ Please compile your catalog first.
|
|
|
2446
2446
|
display: none
|
|
2447
2447
|
}
|
|
2448
2448
|
}
|
|
2449
|
-
`;var Fe=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," resultat"],"other":["#"," resultater"]}]],"combobox.aria.noResults":["Ingen resultater"]}');var Se=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," result"],"other":["#"," results"]}]],"combobox.aria.noResults":["No results"]}');var Ae=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," tulos"],"other":["#"," tulosta"]}]],"combobox.aria.noResults":["Ei tuloksia"]}');var Ie=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," resultat"],"other":["#"," resultater"]}]],"combobox.aria.noResults":["Ingen resultater"]}');var Te=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," resultat"],"other":["#"," resultat"]}]],"combobox.aria.noResults":["Inga resultat"]}');import{css as dr}from"lit";var $e=dr`*,: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}.rounded-8{border-radius:8px}.block{display:block}.overflow-hidden{overflow:hidden}.list-none{list-style-type:none}.left-0{left:0}.right-0{right:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.
|
|
2449
|
+
`;var Fe=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," resultat"],"other":["#"," resultater"]}]],"combobox.aria.noResults":["Ingen resultater"]}');var Se=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," result"],"other":["#"," results"]}]],"combobox.aria.noResults":["No results"]}');var Ae=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," tulos"],"other":["#"," tulosta"]}]],"combobox.aria.noResults":["Ei tuloksia"]}');var Ie=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," resultat"],"other":["#"," resultater"]}]],"combobox.aria.noResults":["Ingen resultater"]}');var Te=JSON.parse('{"combobox.aria.pluralResults":[["numResults","plural",{"one":["#"," resultat"],"other":["#"," resultat"]}]],"combobox.aria.noResults":["Inga resultat"]}');import{css as dr}from"lit";var $e=dr`*,: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}.rounded-8{border-radius:8px}.block{display:block}.overflow-hidden{overflow:hidden}.list-none{list-style-type:none}.left-0{left:0}.right-0{right:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-selected{background-color:var(--w-s-color-background-selected)}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)}.shadow-m{box-shadow:var(--w-shadow-m)}.m-0{margin:0}.p-0{padding:0}.p-8{padding:.8rem}.pb-4{padding-bottom:.4rem}.cursor-pointer{cursor:pointer}.font-bold{font-weight:700}.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}.select-none{-webkit-user-select:none;user-select:none};
|
|
2450
|
+
.z-0{z-index:0;}.z-20{z-index:20;}`;var S={wrapper:"relative z-0",base:"absolute z-20 left-0 right-0 s-bg pb-4 rounded-8 overflow-hidden shadow-m",listbox:"m-0 p-0 select-none list-none",option:"block cursor-pointer p-8",optionUnselected:"hover:s-bg-hover",optionSelected:"s-bg-selected hover:s-bg-selected-hover",textMatch:"font-bold",a11y:"sr-only"},B,h=class extends _e(ur){constructor(){super();this.options=[];this.value="";this.openOnFocus=!1;this.selectOnBlur=!0;this.matchTextSegments=!1;this.disableStaticFiltering=!1;this.invalid=!1;this.disabled=!1;this.required=!1;this.optional=!1;this.autocomplete="off";this._isOpen=!1;this._navigationOption=null;this._currentOptions=[];this._optionIdCounter=0;ue(this,B,null);Me(Se,Ie,Ae,Fe,Te)}firstUpdated(e){he(this,B,this.value)}updated(e){e.has("value")&&this.setValue(this.value)}resetFormControl(){this.value=de(this,B)}get _listboxId(){return`${this._id}-listbox`}get _id(){return"combobox"}get _helpId(){return this.helpText?`${this._id}__hint`:void 0}get _navigationValueOrInputValue(){var e;return((e=this._navigationOption)==null?void 0:e.value)||this.value}_createOptionsWithIdAndMatch(e,t){return e.map((a,i)=>({...a,id:`${this._id}-option-${this._optionIdCounter+i}`,key:a.key||a.value,currentInputValue:t}))}_getAriaText(e,t){if(!e||!t)return"";let a=e.filter(n=>n.value.toLowerCase().includes(t.toLowerCase())),i=P._({id:"combobox.aria.pluralResults",message:"{numResults, plural, one {# result} other {# results}}",comment:"Aria text for combobox when one or more results",values:{numResults:a.length}}),s=P._({id:"combobox.aria.noResults",message:"No results",comment:"Aria text for combobox when no results"});return a.length?i:s}_getOptionClasses(e){var t;return Y(S.option,((t=this._navigationOption)==null?void 0:t.id)===(e==null?void 0:e.id)?S.optionSelected:S.optionUnselected)}_handleKeyDown(e){let t=["ArrowDown","ArrowUp","PageUp","PageDown","Home","End"].includes(e.key),a=["ArrowDown","ArrowLeft","ArrowUp","ArrowRight"];if(t&&!this._isOpen){this._isOpen=!0;return}if(t&&this._isOpen){this._findAndSetActiveOption(e);return}if(!(e.altKey||e.ctrlKey||e.metaKey||e.shiftKey))switch(e.key){case"Enter":this._navigationOption&&(e.preventDefault(),this._handleSelect(this._navigationOption),requestAnimationFrame(()=>{var n,c;let i=(n=this.shadowRoot)==null?void 0:n.querySelector("w-textfield"),s=(c=i==null?void 0:i.shadowRoot)==null?void 0:c.querySelector("input");s&&(s.value=this.value)})),this._isOpen=!1;break;case"Tab":case"Delete":this._isOpen=!1;break;case"Escape":this._isOpen?this._isOpen=!1:this._handleChange(""),this._navigationOption=null;break;case"Backspace":this._handleChange(this._navigationValueOrInputValue),this._navigationOption=null,this._isOpen=!0;break;default:if(a.includes(e.key))break;this._isOpen=!0,this._navigationOption?(this._handleChange(this._navigationOption.value),this._navigationOption=null):this._handleChange(this.value);break}}_findAndSetActiveOption(e){e.preventDefault();let t=this._currentOptions.findIndex(s=>{var n;return s.id===((n=this._navigationOption)==null?void 0:n.id)}),a=t+1,i=t-1;switch(e.key){case"ArrowDown":this._navigationOption=a>this._currentOptions.length-1?null:this._currentOptions[a];break;case"ArrowUp":this._navigationOption=i===-2?this._currentOptions[this._currentOptions.length-1]:i<0?null:this._currentOptions[i];break;case"PageUp":this._navigationOption=t-10<0?this._currentOptions[0]:this._currentOptions[t-10];break;case"PageDown":this._navigationOption=t+10>this._currentOptions.length-1?this._currentOptions[this._currentOptions.length-1]:this._currentOptions[t+10];break;case"Home":this._navigationOption=this._currentOptions[0];break;case"End":this._navigationOption=this._currentOptions[this._currentOptions.length-1];break}}_handleSelect(e){this.value=e.value,this.setValue(this.value);let t=new CustomEvent("select",{detail:{value:e.value},bubbles:!0,composed:!0});this.dispatchEvent(t),this._isOpen=!1,this._navigationOption=null,this.disableStaticFiltering&&(this._currentOptions=[])}_handleChange(e){if(e===void 0)return;this.value=e;let t=new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0});this.dispatchEvent(t)}_handleFocus(){if(!this.openOnFocus)return;let e=new CustomEvent("focus",{bubbles:!0,composed:!0});this.dispatchEvent(e),this._isOpen=!0}_handleBlur(e){var i,s;let t=e.relatedTarget;if(t&&((i=this.shadowRoot)!=null&&i.contains(t)))return;if(this._isOpen=!1,this.selectOnBlur&&(this._navigationOption||!this._navigationOption&&this._currentOptions.findIndex(n=>n.value===this.value)!==-1)){let n=((s=this._navigationOption)==null?void 0:s.value)||this.value;this.value=n;let c=new CustomEvent("select",{detail:{value:n},bubbles:!0,composed:!0});this.dispatchEvent(c)}this._navigationOption=null;let a=new CustomEvent("blur",{detail:{value:this._navigationValueOrInputValue},bubbles:!0,composed:!0});this.dispatchEvent(a)}_handleOptionClick(e,t){this._handleSelect(t),requestAnimationFrame(()=>{var s,n;let a=(s=this.shadowRoot)==null?void 0:s.querySelector("w-textfield"),i=(n=a==null?void 0:a.shadowRoot)==null?void 0:n.querySelector("input");i&&(i.value=t.value)})}_handleContainerBlur(e){(!e.currentTarget||!e.currentTarget.contains(e.relatedTarget))&&(this._isOpen=!1)}_renderTextMatch(e,t){if(!this.matchTextSegments)return e;let a=e.toLowerCase().indexOf(t.currentInputValue.toLowerCase());if(a!==-1){let i=a+t.currentInputValue.length;return ae`${e.substring(0,a)}<span class="${S.textMatch}">${e.substring(a,i)}</span
|
|
2450
2451
|
>${e.substring(i)}`}return e}willUpdate(e){(e.has("options")||e.has("value")||e.has("disableStaticFiltering"))&&(this._optionIdCounter+=this.options.length,this._currentOptions=this._createOptionsWithIdAndMatch(this.options,this.value).filter(t=>this.disableStaticFiltering?!0:t.value.toLowerCase().includes(this.value.toLowerCase()))),this.disableStaticFiltering&&this._currentOptions.length&&this._currentOptions.length===1&&!this._currentOptions.some(t=>t.value===this.value)&&!this._isOpen&&(this._isOpen=!0)}render(){var e;return ae`
|
|
2451
2452
|
<div class=${Y(S.wrapper)} @blur=${this._handleContainerBlur}>
|
|
2452
2453
|
<w-textfield
|