@warp-ds/elements 2.4.0-next.7 → 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/api.js.map +2 -2
- package/dist/custom-elements.json +64 -118
- package/dist/index.d.ts +39 -65
- package/dist/packages/alert/react.js +1 -1
- package/dist/packages/attention/attention.js +14 -14
- package/dist/packages/attention/attention.js.map +3 -3
- package/dist/packages/attention/attention.react.stories.d.ts +1 -1
- package/dist/packages/attention/react.js +1 -1
- package/dist/packages/badge/badge.react.stories.d.ts +1 -1
- package/dist/packages/badge/react.js +1 -1
- package/dist/packages/box/box.react.stories.d.ts +1 -1
- package/dist/packages/box/react.js +1 -1
- package/dist/packages/breadcrumbs/breadcrumbs.react.stories.d.ts +1 -1
- package/dist/packages/breadcrumbs/react.js +1 -1
- package/dist/packages/button/button.js +11 -11
- package/dist/packages/button/button.js.map +3 -3
- package/dist/packages/button/button.react.stories.d.ts +1 -1
- package/dist/packages/button/react.js +1 -1
- package/dist/packages/card/card.react.stories.d.ts +1 -1
- package/dist/packages/card/react.js +1 -1
- package/dist/packages/combobox/combobox.js.map +1 -1
- package/dist/packages/combobox/combobox.react.stories.d.ts +1 -1
- package/dist/packages/combobox/react.js +1 -1
- package/dist/packages/datepicker/datepicker.react.stories.d.ts +1 -1
- package/dist/packages/datepicker/react.js +1 -1
- package/dist/packages/dead-toggle/dead-toggle.react.stories.d.ts +1 -1
- package/dist/packages/dead-toggle/react.js +1 -1
- package/dist/packages/expandable/expandable.react.stories.d.ts +1 -1
- package/dist/packages/expandable/react.js +1 -1
- package/dist/packages/link/link.js +2 -2
- package/dist/packages/link/link.js.map +2 -2
- package/dist/packages/link/link.react.stories.d.ts +1 -1
- package/dist/packages/link/react.js +1 -1
- package/dist/packages/link/styles.js +2 -2
- package/dist/packages/modal/modal.stories.d.ts +3 -2
- package/dist/packages/modal/react.d.ts +1 -1
- package/dist/packages/modal/react.js +2 -2
- package/dist/packages/modal-footer/modal-footer.js +4 -4
- package/dist/packages/modal-footer/modal-footer.js.map +4 -4
- package/dist/packages/modal-footer/react.js +1 -1
- package/dist/packages/modal-header/modal-header.js +4 -4
- package/dist/packages/modal-header/modal-header.js.map +4 -4
- package/dist/packages/modal-header/react.js +1 -1
- package/dist/packages/page-indicator/page-indicator.react.stories.d.ts +1 -1
- package/dist/packages/page-indicator/react.js +1 -1
- package/dist/packages/pagination/pagination.js +4 -4
- package/dist/packages/pagination/pagination.js.map +4 -4
- package/dist/packages/pagination/pagination.react.stories.d.ts +1 -1
- package/dist/packages/pagination/react.js +1 -1
- package/dist/packages/pill/pill.react.stories.d.ts +1 -1
- package/dist/packages/pill/react.js +1 -1
- package/dist/packages/radio/radio.js +120 -120
- package/dist/packages/radio/radio.js.map +4 -4
- package/dist/packages/radio/react.js +1 -1
- package/dist/packages/radio-group/radio-group.js +112 -112
- package/dist/packages/radio-group/radio-group.js.map +4 -4
- package/dist/packages/radio-group/react.js +1 -1
- package/dist/packages/select/react.js +1 -1
- package/dist/packages/select/select.js +2 -2
- package/dist/packages/select/select.js.map +4 -4
- package/dist/packages/select/select.react.stories.d.ts +1 -1
- package/dist/packages/select/select.react.stories.js +1 -1
- package/dist/packages/slider/index.d.ts +1 -1
- package/dist/packages/slider/index.js +1 -1
- package/dist/packages/slider/react.js +1 -1
- package/dist/packages/slider/slider.js +5 -5
- package/dist/packages/slider/slider.js.map +4 -4
- package/dist/packages/slider-thumb/react.js +1 -1
- package/dist/packages/slider-thumb/slider-thumb.js +14 -14
- package/dist/packages/slider-thumb/slider-thumb.js.map +4 -4
- package/dist/packages/step/react.js +1 -1
- package/dist/packages/step/step.js +4 -4
- package/dist/packages/step/step.js.map +4 -4
- package/dist/packages/step-indicator/index.d.ts +1 -1
- package/dist/packages/step-indicator/index.js +1 -1
- package/dist/packages/step-indicator/react.js +1 -1
- package/dist/packages/step-indicator/step-indicator.js.map +2 -2
- package/dist/packages/switch/react.js +1 -1
- package/dist/packages/switch/switch.test.js +1 -1
- package/dist/packages/tab/react.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/react.js +1 -1
- package/dist/packages/tabs/react.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 +14 -1
- package/dist/packages/tabs/tabs.react.stories.js +45 -24
- package/dist/packages/tabs/tabs.stories.d.ts +4 -5
- package/dist/packages/tabs/tabs.stories.js +51 -29
- package/dist/packages/textarea/react.js +1 -1
- package/dist/packages/textarea/textarea.react.stories.d.ts +1 -1
- package/dist/packages/textfield/react.js +1 -1
- package/dist/packages/textfield/textfield.react.stories.d.ts +1 -1
- package/dist/packages/toast/index.d.ts +1 -1
- package/dist/packages/toast/index.js +1 -1
- package/dist/web-types.json +19 -34
- package/package.json +19 -18
|
@@ -8,113 +8,7 @@ var X=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=i=>{thro
|
|
|
8
8
|
:host *::after {
|
|
9
9
|
box-sizing: inherit !important;
|
|
10
10
|
}
|
|
11
|
-
`;var f,g=class extends Z{constructor(){super();A(this,f,!1);this.initialReflectedProperties=new Map;this.customStates={set:(e,r)=>{var t;(t=this.internals)!=null&&t.states&&(r?this.internals.states.add(e):this.internals.states.delete(e))},has:e=>{var r;return(r=this.internals)!=null&&r.states?this.internals.states.has(e):!1}};try{this.internals=this.attachInternals()}catch(r){console.error("Element internals are not supported in your browser. Consider using a polyfill")}this.customStates.set("wa-defined",!0);let e=this.constructor;for(let[r,t]of e.elementProperties)t.default==="inherit"&&t.initial!==void 0&&typeof r=="string"&&this.customStates.set(`initial-${r}-${t.initial}`,!0)}static get styles(){let e=Array.isArray(this.css)?this.css:this.css?[this.css]:[];return[L,...e].map(r=>typeof r=="string"?$(r):r)}attributeChangedCallback(e,r,t){S(this,f)||(this.constructor.elementProperties.forEach((a,s)=>{a.reflect&&this[s]!=null&&this.initialReflectedProperties.set(s,this[s])}),R(this,f,!0)),super.attributeChangedCallback(e,r,t)}willUpdate(e){super.willUpdate(e),this.initialReflectedProperties.forEach((r,t)=>{e.has(t)&&this[t]==null&&(this[t]=r)})}relayNativeEvent(e,r){e.stopImmediatePropagation(),this.dispatchEvent(new e.constructor(e.type,{...e,...r}))}};f=new WeakMap,n([T()],g.prototype,"dir",2),n([T()],g.prototype,"lang",2);var I=()=>({observedAttributes:["custom-error"],checkValidity(i){let o={message:"",isValid:!0,invalidKeys:[]};return i.customError&&(o.message=i.customError,o.isValid=!1,o.invalidKeys=["customError"]),o}});var x=class extends Event{constructor(){super("w-invalid",{bubbles:!0,cancelable:!1,composed:!0})}};var c=class extends g{constructor(){super();this.name=null;this.disabled=!1;this.required=!1;this.assumeInteractionOn=["input"];this.validators=[];this.valueHasChanged=!1;this.hasInteracted=!1;this.customError=null;this.emittedEvents=[];this.emitInvalid=e=>{e.target===this&&(this.hasInteracted=!0,this.dispatchEvent(new x))};this.handleInteraction=e=>{var t;let r=this.emittedEvents;r.includes(e.type)||r.push(e.type),r.length===((t=this.assumeInteractionOn)==null?void 0:t.length)&&(this.hasInteracted=!0)};E||this.addEventListener("invalid",this.emitInvalid)}static get validators(){return[I()]}static get observedAttributes(){let e=new Set(super.observedAttributes||[]);for(let r of this.validators)if(r.observedAttributes)for(let t of r.observedAttributes)e.add(t);return[...e]}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.assumeInteractionOn.forEach(e=>{this.addEventListener(e,this.handleInteraction)})}firstUpdated(...e){super.firstUpdated(...e),this.updateValidity()}willUpdate(e){if(!E&&e.has("customError")&&(this.customError||(this.customError=null),this.setCustomValidity(this.customError||"")),e.has("value")||e.has("disabled")){let r=this.value;if(Array.isArray(r)){if(this.name){let t=new FormData;for(let a of r)t.append(this.name,a);this.setValue(t,t)}}else this.setValue(r,r)}e.has("disabled")&&(this.customStates.set("disabled",this.disabled),(this.hasAttribute("disabled")||!E&&!this.matches(":disabled"))&&this.toggleAttribute("disabled",this.disabled)),this.updateValidity(),super.willUpdate(e)}get labels(){return this.internals.labels}getForm(){return this.internals.form}get validity(){return this.internals.validity}get willValidate(){return this.internals.willValidate}get validationMessage(){return this.internals.validationMessage}checkValidity(){return this.updateValidity(),this.internals.checkValidity()}reportValidity(){return this.updateValidity(),this.hasInteracted=!0,this.internals.reportValidity()}get validationTarget(){return this.input||void 0}setValidity(...e){let r=e[0],t=e[1],a=e[2];a||(a=this.validationTarget),this.internals.setValidity(r,t,a||void 0),this.requestUpdate("validity"),this.setCustomStates()}setCustomStates(){let e=!!this.required,r=this.internals.validity.valid,t=this.hasInteracted;this.customStates.set("required",e),this.customStates.set("optional",!e),this.customStates.set("invalid",!r),this.customStates.set("valid",r),this.customStates.set("user-invalid",!r&&t),this.customStates.set("user-valid",r&&t)}setCustomValidity(e){if(!e){this.customError=null,this.setValidity({});return}this.customError=e,this.setValidity({customError:!0},e,this.validationTarget)}formResetCallback(){this.resetValidity(),this.hasInteracted=!1,this.valueHasChanged=!1,this.emittedEvents=[],this.updateValidity()}formDisabledCallback(e){this.disabled=e,this.updateValidity()}formStateRestoreCallback(e,r){this.value=e,r==="restore"&&this.resetValidity(),this.updateValidity()}setValue(...e){let[r,t]=e;this.internals.setFormValue(r,t)}get allValidators(){let e=this.constructor.validators||[],r=this.validators||[];return[...e,...r]}resetValidity(){this.setCustomValidity(""),this.setValidity({})}updateValidity(){if(this.disabled||this.hasAttribute("disabled")||!this.willValidate){this.resetValidity();return}let e=this.allValidators;if(!(e!=null&&e.length))return;let r={customError:!!this.customError},t=this.validationTarget||this.input||void 0,a="";for(let s of e){let{isValid:l,message:v,invalidKeys:h}=s.checkValidity(this);l||(a||(a=v),(h==null?void 0:h.length)>=0&&h.forEach(k=>r[k]=!0))}a||(a=this.validationMessage),this.setValidity(r,a,t)}};c.formAssociated=!0,n([m({reflect:!0})],c.prototype,"name",2),n([m({type:Boolean})],c.prototype,"disabled",2),n([m({state:!0,attribute:!1})],c.prototype,"valueHasChanged",2),n([m({state:!0,attribute:!1})],c.prototype,"hasInteracted",2),n([m({attribute:"custom-error",reflect:!0})],c.prototype,"customError",2),n([m({attribute:!1,state:!0,type:Object})],c.prototype,"validity",1);var M="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";var H=(i=21)=>{let o="",e=crypto.getRandomValues(new Uint8Array(i|=0));for(;i--;)o+=M[e[i]&63];return o};function q(i=""){return`${i}${H()}`}import{html as J}from"lit";import{property as w,state as j}from"lit/decorators.js";import{css as
|
|
12
|
-
[part~='label'] {
|
|
13
|
-
display: block;
|
|
14
|
-
font-size: var(--w-font-size-m);
|
|
15
|
-
line-height: var(--w-line-height-m);
|
|
16
|
-
user-select: none;
|
|
17
|
-
cursor: pointer;
|
|
18
|
-
}
|
|
19
|
-
.wrapper {
|
|
20
|
-
display: grid;
|
|
21
|
-
grid-template-columns: 2rem max-content;
|
|
22
|
-
gap: 8px;
|
|
23
|
-
}
|
|
24
|
-
.hide-toggle {
|
|
25
|
-
position: absolute;
|
|
26
|
-
padding: 0;
|
|
27
|
-
margin: 0;
|
|
28
|
-
opacity: 0;
|
|
29
|
-
pointer-events: none;
|
|
30
|
-
inset: 0;
|
|
31
|
-
}
|
|
32
|
-
.control {
|
|
33
|
-
display: block;
|
|
34
|
-
border-width: 1px;
|
|
35
|
-
transition-property: all;
|
|
36
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
37
|
-
transition-duration: 150ms;
|
|
38
|
-
cursor: pointer;
|
|
39
|
-
appearance: none;
|
|
40
|
-
user-select: none;
|
|
41
|
-
flex-shrink: 0;
|
|
42
|
-
height: 2rem;
|
|
43
|
-
width: 2rem;
|
|
44
|
-
background-color: var(--w-s-color-background);
|
|
45
|
-
border-color: var(--w-s-color-border-strong);
|
|
46
|
-
color: var(--w-s-color-icon-inverted);
|
|
47
|
-
font-weight: 700;
|
|
48
|
-
text-align: center;
|
|
49
|
-
line-height: var(--w-line-height-xs);
|
|
50
|
-
font-size: var(--w-font-size-m);
|
|
51
|
-
}
|
|
52
|
-
.checkbox {
|
|
53
|
-
position: relative;
|
|
54
|
-
}
|
|
55
|
-
:host([type='checkbox']) .control {
|
|
56
|
-
border-radius: 4px;
|
|
57
|
-
}
|
|
58
|
-
.checkbox:has(:checked, :indeterminate),
|
|
59
|
-
:host([type='checkbox'][checked]) .control,
|
|
60
|
-
:host([type='checkbox'][indeterminate]) .control {
|
|
61
|
-
background-color: var(--w-s-color-background-primary);
|
|
62
|
-
border-color: var(--w-s-color-border-primary);
|
|
63
|
-
}
|
|
64
|
-
.checkbox:has(:checked),
|
|
65
|
-
:host([type='checkbox'][checked]) .control {
|
|
66
|
-
background-image: var(--w-icon-toggle-checked);
|
|
67
|
-
background-position: center;
|
|
68
|
-
}
|
|
69
|
-
:host([type='radio']) .control,
|
|
70
|
-
:host([role='radio']) .control {
|
|
71
|
-
border-radius: 50%;
|
|
72
|
-
}
|
|
73
|
-
:host([type='radio'][checked]) .control,
|
|
74
|
-
/* :state is newly available, so we set an attribute in radio for compat */
|
|
75
|
-
:host([role='radio'][checked-ui]) .control,
|
|
76
|
-
:host([role='radio']:state(checked)) .control {
|
|
77
|
-
border-color: var(--w-s-color-border-selected);
|
|
78
|
-
border-width: 0.6rem;
|
|
79
|
-
}
|
|
80
|
-
.checkbox:has(:invalid),
|
|
81
|
-
:host([invalid]) .control {
|
|
82
|
-
border-color: var(--w-s-color-border-negative) !important;
|
|
83
|
-
}
|
|
84
|
-
/* handles invalid checkbox state inside w-checkbox */
|
|
85
|
-
.checkbox:has(:checked, :indeterminate):has(:invalid),
|
|
86
|
-
/* allows invalid to be set on the w-checkbox element */
|
|
87
|
-
:host([invalid]) .checkbox:has(:checked, :indeterminate),
|
|
88
|
-
:host([type='checkbox'][invalid][checked]) .control,
|
|
89
|
-
:host([type='checkbox'][invalid][indeterminate]) .control {
|
|
90
|
-
background-color: var(--w-s-color-background-negative);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
:host(:focus-visible) {
|
|
94
|
-
outline: none;
|
|
95
|
-
}
|
|
96
|
-
.checkbox:has(> input:focus-visible:not(:disabled)),
|
|
97
|
-
:host(:focus-visible) .control {
|
|
98
|
-
outline: 2px solid var(--w-s-color-border-focus);
|
|
99
|
-
outline-offset: var(--w-outline-offset, 1px);
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
:host([type='radio'][disabled]) .control,
|
|
103
|
-
/* :state is newly available, so we set an attribute in radio for compat */
|
|
104
|
-
:host([role='radio'][disabled-ui]) .control,
|
|
105
|
-
:host([role='radio']:state(disabled)) .control,
|
|
106
|
-
:host([type='checkbox'][disabled]) .control,
|
|
107
|
-
.checkbox:has(> input:disabled) {
|
|
108
|
-
border-color: var(--w-s-color-border-disabled);
|
|
109
|
-
background-color: var(--w-s-color-background-disabled-subtle);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
:host([type='checkbox'][disabled][checked]) .control,
|
|
113
|
-
:host([type='checkbox'][disabled][indeterminate]) .control,
|
|
114
|
-
.checkbox:has(:checked, :indeterminate):has(> input:disabled) {
|
|
115
|
-
background-color: var(--w-s-color-background-disabled);
|
|
116
|
-
}
|
|
117
|
-
`;import{css as Y}from"lit";var N=Y`
|
|
11
|
+
`;var f,g=class extends Z{constructor(){super();A(this,f,!1);this.initialReflectedProperties=new Map;this.customStates={set:(e,r)=>{var t;(t=this.internals)!=null&&t.states&&(r?this.internals.states.add(e):this.internals.states.delete(e))},has:e=>{var r;return(r=this.internals)!=null&&r.states?this.internals.states.has(e):!1}};try{this.internals=this.attachInternals()}catch(r){console.error("Element internals are not supported in your browser. Consider using a polyfill")}this.customStates.set("wa-defined",!0);let e=this.constructor;for(let[r,t]of e.elementProperties)t.default==="inherit"&&t.initial!==void 0&&typeof r=="string"&&this.customStates.set(`initial-${r}-${t.initial}`,!0)}static get styles(){let e=Array.isArray(this.css)?this.css:this.css?[this.css]:[];return[L,...e].map(r=>typeof r=="string"?$(r):r)}attributeChangedCallback(e,r,t){S(this,f)||(this.constructor.elementProperties.forEach((a,s)=>{a.reflect&&this[s]!=null&&this.initialReflectedProperties.set(s,this[s])}),R(this,f,!0)),super.attributeChangedCallback(e,r,t)}willUpdate(e){super.willUpdate(e),this.initialReflectedProperties.forEach((r,t)=>{e.has(t)&&this[t]==null&&(this[t]=r)})}relayNativeEvent(e,r){e.stopImmediatePropagation(),this.dispatchEvent(new e.constructor(e.type,{...e,...r}))}};f=new WeakMap,n([T()],g.prototype,"dir",2),n([T()],g.prototype,"lang",2);var I=()=>({observedAttributes:["custom-error"],checkValidity(i){let o={message:"",isValid:!0,invalidKeys:[]};return i.customError&&(o.message=i.customError,o.isValid=!1,o.invalidKeys=["customError"]),o}});var x=class extends Event{constructor(){super("w-invalid",{bubbles:!0,cancelable:!1,composed:!0})}};var c=class extends g{constructor(){super();this.name=null;this.disabled=!1;this.required=!1;this.assumeInteractionOn=["input"];this.validators=[];this.valueHasChanged=!1;this.hasInteracted=!1;this.customError=null;this.emittedEvents=[];this.emitInvalid=e=>{e.target===this&&(this.hasInteracted=!0,this.dispatchEvent(new x))};this.handleInteraction=e=>{var t;let r=this.emittedEvents;r.includes(e.type)||r.push(e.type),r.length===((t=this.assumeInteractionOn)==null?void 0:t.length)&&(this.hasInteracted=!0)};E||this.addEventListener("invalid",this.emitInvalid)}static get validators(){return[I()]}static get observedAttributes(){let e=new Set(super.observedAttributes||[]);for(let r of this.validators)if(r.observedAttributes)for(let t of r.observedAttributes)e.add(t);return[...e]}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.assumeInteractionOn.forEach(e=>{this.addEventListener(e,this.handleInteraction)})}firstUpdated(...e){super.firstUpdated(...e),this.updateValidity()}willUpdate(e){if(!E&&e.has("customError")&&(this.customError||(this.customError=null),this.setCustomValidity(this.customError||"")),e.has("value")||e.has("disabled")){let r=this.value;if(Array.isArray(r)){if(this.name){let t=new FormData;for(let a of r)t.append(this.name,a);this.setValue(t,t)}}else this.setValue(r,r)}e.has("disabled")&&(this.customStates.set("disabled",this.disabled),(this.hasAttribute("disabled")||!E&&!this.matches(":disabled"))&&this.toggleAttribute("disabled",this.disabled)),this.updateValidity(),super.willUpdate(e)}get labels(){return this.internals.labels}getForm(){return this.internals.form}get validity(){return this.internals.validity}get willValidate(){return this.internals.willValidate}get validationMessage(){return this.internals.validationMessage}checkValidity(){return this.updateValidity(),this.internals.checkValidity()}reportValidity(){return this.updateValidity(),this.hasInteracted=!0,this.internals.reportValidity()}get validationTarget(){return this.input||void 0}setValidity(...e){let r=e[0],t=e[1],a=e[2];a||(a=this.validationTarget),this.internals.setValidity(r,t,a||void 0),this.requestUpdate("validity"),this.setCustomStates()}setCustomStates(){let e=!!this.required,r=this.internals.validity.valid,t=this.hasInteracted;this.customStates.set("required",e),this.customStates.set("optional",!e),this.customStates.set("invalid",!r),this.customStates.set("valid",r),this.customStates.set("user-invalid",!r&&t),this.customStates.set("user-valid",r&&t)}setCustomValidity(e){if(!e){this.customError=null,this.setValidity({});return}this.customError=e,this.setValidity({customError:!0},e,this.validationTarget)}formResetCallback(){this.resetValidity(),this.hasInteracted=!1,this.valueHasChanged=!1,this.emittedEvents=[],this.updateValidity()}formDisabledCallback(e){this.disabled=e,this.updateValidity()}formStateRestoreCallback(e,r){this.value=e,r==="restore"&&this.resetValidity(),this.updateValidity()}setValue(...e){let[r,t]=e;this.internals.setFormValue(r,t)}get allValidators(){let e=this.constructor.validators||[],r=this.validators||[];return[...e,...r]}resetValidity(){this.setCustomValidity(""),this.setValidity({})}updateValidity(){if(this.disabled||this.hasAttribute("disabled")||!this.willValidate){this.resetValidity();return}let e=this.allValidators;if(!(e!=null&&e.length))return;let r={customError:!!this.customError},t=this.validationTarget||this.input||void 0,a="";for(let s of e){let{isValid:l,message:v,invalidKeys:h}=s.checkValidity(this);l||(a||(a=v),(h==null?void 0:h.length)>=0&&h.forEach(k=>r[k]=!0))}a||(a=this.validationMessage),this.setValidity(r,a,t)}};c.formAssociated=!0,n([m({reflect:!0})],c.prototype,"name",2),n([m({type:Boolean})],c.prototype,"disabled",2),n([m({state:!0,attribute:!1})],c.prototype,"valueHasChanged",2),n([m({state:!0,attribute:!1})],c.prototype,"hasInteracted",2),n([m({attribute:"custom-error",reflect:!0})],c.prototype,"customError",2),n([m({attribute:!1,state:!0,type:Object})],c.prototype,"validity",1);var M="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";var H=(i=21)=>{let o="",e=crypto.getRandomValues(new Uint8Array(i|=0));for(;i--;)o+=M[e[i]&63];return o};function q(i=""){return`${i}${H()}`}import{html as J}from"lit";import{property as w,state as j}from"lit/decorators.js";import{css as D}from"lit";var Y=D`
|
|
118
12
|
*,
|
|
119
13
|
:before,
|
|
120
14
|
:after {
|
|
@@ -387,7 +281,7 @@ var X=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=i=>{thro
|
|
|
387
281
|
svg {
|
|
388
282
|
pointer-events: none;
|
|
389
283
|
}
|
|
390
|
-
`,
|
|
284
|
+
`,ze=D`*, :before, :after {
|
|
391
285
|
--w-rotate: 0;
|
|
392
286
|
--w-rotate-x: 0;
|
|
393
287
|
--w-rotate-y: 0;
|
|
@@ -2553,12 +2447,118 @@ var X=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=i=>{thro
|
|
|
2553
2447
|
display: none
|
|
2554
2448
|
}
|
|
2555
2449
|
}
|
|
2556
|
-
`;
|
|
2450
|
+
`;import{css as K}from"lit";var N=K`
|
|
2451
|
+
[part~='label'] {
|
|
2452
|
+
display: block;
|
|
2453
|
+
font-size: var(--w-font-size-m);
|
|
2454
|
+
line-height: var(--w-line-height-m);
|
|
2455
|
+
user-select: none;
|
|
2456
|
+
cursor: pointer;
|
|
2457
|
+
}
|
|
2458
|
+
.wrapper {
|
|
2459
|
+
display: grid;
|
|
2460
|
+
grid-template-columns: 2rem max-content;
|
|
2461
|
+
gap: 8px;
|
|
2462
|
+
}
|
|
2463
|
+
.hide-toggle {
|
|
2464
|
+
position: absolute;
|
|
2465
|
+
padding: 0;
|
|
2466
|
+
margin: 0;
|
|
2467
|
+
opacity: 0;
|
|
2468
|
+
pointer-events: none;
|
|
2469
|
+
inset: 0;
|
|
2470
|
+
}
|
|
2471
|
+
.control {
|
|
2472
|
+
display: block;
|
|
2473
|
+
border-width: 1px;
|
|
2474
|
+
transition-property: all;
|
|
2475
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2476
|
+
transition-duration: 150ms;
|
|
2477
|
+
cursor: pointer;
|
|
2478
|
+
appearance: none;
|
|
2479
|
+
user-select: none;
|
|
2480
|
+
flex-shrink: 0;
|
|
2481
|
+
height: 2rem;
|
|
2482
|
+
width: 2rem;
|
|
2483
|
+
background-color: var(--w-s-color-background);
|
|
2484
|
+
border-color: var(--w-s-color-border-strong);
|
|
2485
|
+
color: var(--w-s-color-icon-inverted);
|
|
2486
|
+
font-weight: 700;
|
|
2487
|
+
text-align: center;
|
|
2488
|
+
line-height: var(--w-line-height-xs);
|
|
2489
|
+
font-size: var(--w-font-size-m);
|
|
2490
|
+
}
|
|
2491
|
+
.checkbox {
|
|
2492
|
+
position: relative;
|
|
2493
|
+
}
|
|
2494
|
+
:host([type='checkbox']) .control {
|
|
2495
|
+
border-radius: 4px;
|
|
2496
|
+
}
|
|
2497
|
+
.checkbox:has(:checked, :indeterminate),
|
|
2498
|
+
:host([type='checkbox'][checked]) .control,
|
|
2499
|
+
:host([type='checkbox'][indeterminate]) .control {
|
|
2500
|
+
background-color: var(--w-s-color-background-primary);
|
|
2501
|
+
border-color: var(--w-s-color-border-primary);
|
|
2502
|
+
}
|
|
2503
|
+
.checkbox:has(:checked),
|
|
2504
|
+
:host([type='checkbox'][checked]) .control {
|
|
2505
|
+
background-image: var(--w-icon-toggle-checked);
|
|
2506
|
+
background-position: center;
|
|
2507
|
+
}
|
|
2508
|
+
:host([type='radio']) .control,
|
|
2509
|
+
:host([role='radio']) .control {
|
|
2510
|
+
border-radius: 50%;
|
|
2511
|
+
}
|
|
2512
|
+
:host([type='radio'][checked]) .control,
|
|
2513
|
+
/* :state is newly available, so we set an attribute in radio for compat */
|
|
2514
|
+
:host([role='radio'][checked-ui]) .control,
|
|
2515
|
+
:host([role='radio']:state(checked)) .control {
|
|
2516
|
+
border-color: var(--w-s-color-border-selected);
|
|
2517
|
+
border-width: 0.6rem;
|
|
2518
|
+
}
|
|
2519
|
+
.checkbox:has(:invalid),
|
|
2520
|
+
:host([invalid]) .control {
|
|
2521
|
+
border-color: var(--w-s-color-border-negative) !important;
|
|
2522
|
+
}
|
|
2523
|
+
/* handles invalid checkbox state inside w-checkbox */
|
|
2524
|
+
.checkbox:has(:checked, :indeterminate):has(:invalid),
|
|
2525
|
+
/* allows invalid to be set on the w-checkbox element */
|
|
2526
|
+
:host([invalid]) .checkbox:has(:checked, :indeterminate),
|
|
2527
|
+
:host([type='checkbox'][invalid][checked]) .control,
|
|
2528
|
+
:host([type='checkbox'][invalid][indeterminate]) .control {
|
|
2529
|
+
background-color: var(--w-s-color-background-negative);
|
|
2530
|
+
}
|
|
2531
|
+
|
|
2532
|
+
:host(:focus-visible) {
|
|
2533
|
+
outline: none;
|
|
2534
|
+
}
|
|
2535
|
+
.checkbox:has(> input:focus-visible:not(:disabled)),
|
|
2536
|
+
:host(:focus-visible) .control {
|
|
2537
|
+
outline: 2px solid var(--w-s-color-border-focus);
|
|
2538
|
+
outline-offset: var(--w-outline-offset, 1px);
|
|
2539
|
+
}
|
|
2540
|
+
|
|
2541
|
+
:host([type='radio'][disabled]) .control,
|
|
2542
|
+
/* :state is newly available, so we set an attribute in radio for compat */
|
|
2543
|
+
:host([role='radio'][disabled-ui]) .control,
|
|
2544
|
+
:host([role='radio']:state(disabled)) .control,
|
|
2545
|
+
:host([type='checkbox'][disabled]) .control,
|
|
2546
|
+
.checkbox:has(> input:disabled) {
|
|
2547
|
+
border-color: var(--w-s-color-border-disabled);
|
|
2548
|
+
background-color: var(--w-s-color-background-disabled-subtle);
|
|
2549
|
+
}
|
|
2550
|
+
|
|
2551
|
+
:host([type='checkbox'][disabled][checked]) .control,
|
|
2552
|
+
:host([type='checkbox'][disabled][indeterminate]) .control,
|
|
2553
|
+
.checkbox:has(:checked, :indeterminate):has(> input:disabled) {
|
|
2554
|
+
background-color: var(--w-s-color-background-disabled);
|
|
2555
|
+
}
|
|
2556
|
+
`;var b=class extends c{constructor(){super();this.checked=!1;this.forceDisabled=!1;this.form=null;this.appearance="default";this.size="medium";this.disabled=!1;this.handleClick=()=>{!this.disabled&&!this.forceDisabled&&(this.checked=!0)};this.addEventListener("click",this.handleClick)}connectedCallback(){super.connectedCallback(),this.setInitialAttributes()}setInitialAttributes(){this.setAttribute("role","radio"),this.tabIndex=0,this.setAttribute("aria-disabled",this.disabled||this.forceDisabled?"true":"false")}updated(e){if(super.updated(e),e.has("checked")&&(this.customStates.set("checked",this.checked),this[this.checked?"setAttribute":"removeAttribute"]("checked-ui",""),this.setAttribute("aria-checked",this.checked?"true":"false"),!this.disabled&&!this.forceDisabled&&(this.tabIndex=this.checked?0:-1)),e.has("disabled")||e.has("forceDisabled")){let r=this.disabled||this.forceDisabled;this.customStates.set("disabled",r),this[r?"setAttribute":"removeAttribute"]("disabled-ui",""),this.setAttribute("aria-disabled",r?"true":"false"),r?this.tabIndex=-1:this.tabIndex=this.checked?0:-1}}setValue(){}render(){return J`
|
|
2557
2557
|
<div class="wrapper">
|
|
2558
2558
|
<div part="control" class="control"></div>
|
|
2559
2559
|
<slot part="label" class="label"></slot>
|
|
2560
2560
|
</div>
|
|
2561
|
-
`}};b.css=[N
|
|
2561
|
+
`}};b.css=[Y,N],n([j()],b.prototype,"checked",2),n([j()],b.prototype,"forceDisabled",2),n([w({reflect:!0})],b.prototype,"form",2),n([w({reflect:!0})],b.prototype,"value",2),n([w({reflect:!0})],b.prototype,"appearance",2),n([w({reflect:!0})],b.prototype,"size",2),n([w({type:Boolean})],b.prototype,"disabled",2);customElements.get("w-radio")||customElements.define("w-radio",b);var _=(i={})=>{let{validationElement:o,validationProperty:e}=i;o||(o=Object.assign(document.createElement("input"),{required:!0})),e||(e="value");let r={observedAttributes:["required"],message:o.validationMessage,checkValidity(t){var h;let a={message:"",isValid:!0,invalidKeys:[]};return((h=t.required)!=null?h:t.hasAttribute("required"))&&!t[e]&&(a.message=typeof r.message=="function"?r.message(t):r.message||"",a.isValid=!1,a.invalidKeys.push("valueMissing")),a}};return r};var y=class{constructor(o,...e){this.slotNames=[];this.handleSlotChange=o=>{let e=o.target;(this.slotNames.includes("[default]")&&!e.name||e.name&&this.slotNames.includes(e.name))&&this.host.requestUpdate()};(this.host=o).addController(this),this.slotNames=e}hasDefaultSlot(){return[...this.host.childNodes].some(o=>{var e;if(o.nodeType===Node.TEXT_NODE&&((e=o.textContent)==null?void 0:e.trim())!=="")return!0;if(o.nodeType===Node.ELEMENT_NODE){let r=o;if(r.tagName.toLowerCase()==="w-visually-hidden")return!1;if(!r.hasAttribute("slot"))return!0}return!1})}hasNamedSlot(o){return this.host.querySelector(`:scope > [slot="${o}"]`)!==null}test(o){return o==="[default]"?this.hasDefaultSlot():this.hasNamedSlot(o)}hostConnected(){var o;(o=this.host.shadowRoot)==null||o.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){var o;(o=this.host.shadowRoot)==null||o.removeEventListener("slotchange",this.handleSlotChange)}};import{css as Q}from"lit";var U=Q`
|
|
2562
2562
|
:host {
|
|
2563
2563
|
display: block;
|
|
2564
2564
|
}
|
|
@@ -2615,7 +2615,7 @@ var X=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=i=>{thro
|
|
|
2615
2615
|
gap: 0;
|
|
2616
2616
|
}
|
|
2617
2617
|
}
|
|
2618
|
-
`;var
|
|
2618
|
+
`;var d=class extends c{constructor(){super();this.hasSlotController=new y(this,"hint","label");this.hasRadioButtons=!1;this.label="";this.hint="";this.name=null;this.disabled=!1;this.orientation="vertical";this._value=null;this.defaultValue=this.getAttribute("value")||null;this.size="medium";this.required=!1;this.withLabel=!1;this.withHint=!1;this.handleRadioClick=e=>{let r=e.target.closest("w-radio");if(!r||r.disabled||r.forceDisabled||this.disabled)return;let t=this.value;this.value=r.value,r.checked=!0;let a=this.getAllRadios();for(let s of a)r!==s&&(s.checked=!1,s.setAttribute("tabindex","-1"));this.value!==t&&this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))})};this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleRadioClick)}static get validators(){let e=[_({validationElement:Object.assign(document.createElement("input"),{required:!0,type:"radio",name:q("__w-radio")})})];return[...super.validators,...e]}get value(){var e;return this.valueHasChanged?this._value:(e=this._value)!=null?e:this.defaultValue}set value(e){typeof e=="number"&&(e=String(e)),this.valueHasChanged=!0,this._value=e}get validationTarget(){let e=this.querySelector(":is(w-radio):not([disabled])");if(e)return e}updated(e){(e.has("disabled")||e.has("value"))&&this.syncRadioElements()}formResetCallback(...e){this.value=this.defaultValue,super.formResetCallback(...e),this.syncRadioElements()}getAllRadios(){return[...this.querySelectorAll("w-radio")]}handleLabelClick(){this.focus()}async syncRadioElements(){let e=this.getAllRadios(),r=!1;if(e.forEach((t,a)=>{t.appearance==="button"&&(r=!0),t.setAttribute("size",this.size),t.toggleAttribute("data-w-radio-horizontal",this.orientation!=="vertical"),t.toggleAttribute("data-w-radio-vertical",this.orientation==="vertical"),t.toggleAttribute("data-w-radio-first",a===0),t.toggleAttribute("data-w-radio-inner",a!==0&&a!==e.length-1),t.toggleAttribute("data-w-radio-last",a===e.length-1),t.forceDisabled=this.disabled}),this.hasRadioButtons=r,await Promise.all(e.map(async t=>{await t.updateComplete,!t.disabled&&t.value===this.value?t.checked=!0:t.checked=!1})),this.disabled)e.forEach(t=>{t.tabIndex=-1});else{let t=e.filter(s=>!s.disabled),a=t.find(s=>s.checked);t.length>0&&(a?t.forEach(s=>{s.tabIndex=s.checked?0:-1}):t.forEach((s,l)=>{s.tabIndex=l===0?0:-1})),e.filter(s=>s.disabled).forEach(s=>{s.tabIndex=-1})}}handleKeyDown(e){var h,k,z;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(e.key)||this.disabled)return;let r=this.getAllRadios().filter(p=>!p.disabled);if(r.length<=0)return;e.preventDefault();let t=this.value,a=(h=r.find(p=>p.checked))!=null?h:r[0],s=e.key===" "?0:["ArrowUp","ArrowLeft"].includes(e.key)?-1:1,l=r.indexOf(a)+s;l||(l=0),l<0&&(l=r.length-1),l>r.length-1&&(l=0);let v=r.some(p=>p.tagName.toLowerCase()==="w-radio-button");this.getAllRadios().forEach(p=>{p.checked=!1,v||p.setAttribute("tabindex","-1")}),this.value=r[l].value,r[l].checked=!0,v?(z=(k=r[l].shadowRoot)==null?void 0:k.querySelector("button"))==null||z.focus():(r[l].setAttribute("tabindex","0"),r[l].focus()),this.value!==t&&this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),e.preventDefault()}focus(e){if(this.disabled)return;let r=this.getAllRadios(),t=r.find(l=>l.checked),a=r.find(l=>!l.disabled),s=t||a;s&&s.focus(e)}render(){let e=this.hasUpdated?this.hasSlotController.test("label"):this.withLabel,r=this.hasUpdated?this.hasSlotController.test("hint"):this.withHint,t=this.label?!0:!!e,a=this.hint?!0:!!r;return G`
|
|
2619
2619
|
<fieldset
|
|
2620
2620
|
part="form-control"
|
|
2621
2621
|
class=${O({"form-control":!0,"form-control-radio-group":!0,"form-control-has-label":t,"has-radio-buttons":this.hasRadioButtons})}
|
|
@@ -2644,5 +2644,5 @@ var X=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=i=>{thro
|
|
|
2644
2644
|
>${this.hint}</slot
|
|
2645
2645
|
>
|
|
2646
2646
|
</fieldset>
|
|
2647
|
-
`}};d.css=[
|
|
2647
|
+
`}};d.css=[U],d.shadowRootOptions={...c.shadowRootOptions,delegatesFocus:!0},n([F()],d.prototype,"hasRadioButtons",2),n([W("slot:not([name])")],d.prototype,"defaultSlot",2),n([u()],d.prototype,"label",2),n([u({attribute:"hint"})],d.prototype,"hint",2),n([u({reflect:!0})],d.prototype,"name",2),n([u({type:Boolean,reflect:!0})],d.prototype,"disabled",2),n([u({reflect:!0})],d.prototype,"orientation",2),n([F()],d.prototype,"value",1),n([u({attribute:"value",reflect:!0})],d.prototype,"defaultValue",2),n([u({reflect:!0})],d.prototype,"size",2),n([u({type:Boolean,reflect:!0})],d.prototype,"required",2),n([u({type:Boolean,attribute:"with-label"})],d.prototype,"withLabel",2),n([u({type:Boolean,attribute:"with-hint"})],d.prototype,"withHint",2);customElements.get("w-radio-group")||customElements.define("w-radio-group",d);export{d as WRadioGroup};
|
|
2648
2648
|
//# sourceMappingURL=radio-group.js.map
|