@warp-ds/elements 2.3.0-next.2 → 2.3.0-next.20
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 +715 -28
- package/dist/index.d.ts +150 -19
- package/dist/packages/affix/index.js.map +2 -2
- package/dist/packages/affix/react.d.ts +1 -1
- package/dist/packages/alert/index.js.map +2 -2
- package/dist/packages/alert/react.d.ts +1 -1
- package/dist/packages/attention/attention.stories.js +4 -1
- package/dist/packages/attention/index.js +5 -5
- package/dist/packages/attention/index.js.map +2 -2
- package/dist/packages/attention/react.d.ts +1 -1
- package/dist/packages/attention/styles.js +1 -1
- package/dist/packages/badge/index.js.map +2 -2
- package/dist/packages/badge/react.d.ts +1 -1
- package/dist/packages/box/index.js.map +2 -2
- package/dist/packages/box/react.d.ts +1 -1
- package/dist/packages/breadcrumbs/index.js.map +2 -2
- package/dist/packages/breadcrumbs/react.d.ts +1 -1
- package/dist/packages/button/button.stories.d.ts +4 -4
- package/dist/packages/button/button.stories.js +4 -4
- package/dist/packages/button/index.js +3 -3
- package/dist/packages/button/index.js.map +2 -2
- package/dist/packages/button/react.d.ts +1 -1
- package/dist/packages/card/index.js.map +2 -2
- package/dist/packages/card/react.d.ts +1 -1
- package/dist/packages/combobox/combobox.react.stories.d.ts +1 -1
- package/dist/packages/combobox/index.js.map +2 -2
- package/dist/packages/combobox/react.d.ts +1 -1
- package/dist/packages/datepicker/react.d.ts +1 -1
- package/dist/packages/dead-toggle/index.js +2 -3
- package/dist/packages/dead-toggle/index.js.map +2 -2
- package/dist/packages/dead-toggle/react.d.ts +1 -1
- package/dist/packages/expandable/index.js.map +2 -2
- package/dist/packages/expandable/react.d.ts +1 -1
- package/dist/packages/link/index.js +3 -3
- package/dist/packages/link/index.js.map +1 -1
- package/dist/packages/link/react.d.ts +1 -1
- package/dist/packages/link/styles.js +3 -3
- package/dist/packages/modal/index.js.map +2 -2
- package/dist/packages/modal/modal-header.js.map +2 -2
- package/dist/packages/modal/modal.stories.d.ts +3 -3
- package/dist/packages/modal/modal.stories.js +32 -32
- package/dist/packages/modal/react.d.ts +1 -1
- package/dist/packages/pageindicator/react.d.ts +1 -1
- package/dist/packages/pagination/index.js.map +2 -2
- package/dist/packages/pagination/react.d.ts +1 -1
- package/dist/packages/pill/index.js.map +2 -2
- package/dist/packages/pill/react.d.ts +1 -1
- package/dist/packages/rip-and-tear-checkbox/checkbox-group.d.ts +10 -0
- package/dist/packages/rip-and-tear-checkbox/checkbox-group.js +7 -0
- package/dist/packages/rip-and-tear-checkbox/checkbox-group.js.map +7 -0
- package/dist/packages/rip-and-tear-checkbox/checkbox.js +2 -3
- package/dist/packages/rip-and-tear-checkbox/checkbox.js.map +2 -2
- package/dist/packages/rip-and-tear-checkbox/checkbox.stories.d.ts +3 -0
- package/dist/packages/rip-and-tear-checkbox/checkbox.stories.js +14 -0
- package/dist/packages/rip-and-tear-checkbox/index.js +2 -0
- package/dist/packages/rip-and-tear-checkbox/react.d.ts +3 -1
- package/dist/packages/rip-and-tear-checkbox/react.js +5 -0
- package/dist/packages/rip-and-tear-radio/radio-group.js +2 -3
- package/dist/packages/rip-and-tear-radio/radio-group.js.map +2 -2
- package/dist/packages/rip-and-tear-radio/radio.js +2 -3
- package/dist/packages/rip-and-tear-radio/radio.js.map +2 -2
- package/dist/packages/rip-and-tear-radio/radio.stories.js +2 -3
- package/dist/packages/rip-and-tear-radio/radio.stories.js.map +2 -2
- package/dist/packages/rip-and-tear-radio/react.d.ts +2 -2
- 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/react.d.ts +1 -1
- 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/react.d.ts +2 -2
- package/dist/packages/slider/slider-thumb.d.ts +11 -7
- package/dist/packages/slider/slider-thumb.js +92 -49
- package/dist/packages/slider/slider-thumb.js.map +4 -4
- package/dist/packages/slider/slider.d.ts +10 -1
- package/dist/packages/slider/slider.js +99 -31
- package/dist/packages/slider/slider.js.map +3 -3
- package/dist/packages/slider/slider.react.stories.d.ts +1 -0
- package/dist/packages/slider/slider.react.stories.js +22 -0
- package/dist/packages/slider/slider.stories.d.ts +3 -0
- package/dist/packages/slider/slider.stories.js +240 -33
- package/dist/packages/slider/styles/w-slider-thumb.styles.js +24 -16
- package/dist/packages/slider/styles/w-slider.styles.js +65 -18
- package/dist/packages/steps/index.d.ts +3 -2
- package/dist/packages/steps/index.js +8 -8
- package/dist/packages/steps/index.js.map +3 -3
- package/dist/packages/steps/react.d.ts +2 -2
- package/dist/packages/steps/react.js +2 -2
- package/dist/packages/steps/steps.react.stories.d.ts +4 -4
- package/dist/packages/steps/steps.react.stories.js +11 -11
- package/dist/packages/steps/steps.stories.js +16 -16
- package/dist/packages/switch/index.js +4 -3
- package/dist/packages/switch/index.js.map +2 -2
- package/dist/packages/switch/react.d.ts +1 -1
- package/dist/packages/switch/styles.js +1 -1
- package/dist/packages/tabs/tab.js +4 -3
- package/dist/packages/tabs/tab.js.map +2 -2
- package/dist/packages/tabs/tabs.js +5 -5
- package/dist/packages/tabs/tabs.js.map +3 -3
- package/dist/packages/tabs/tabs.stories.d.ts +3 -0
- package/dist/packages/tabs/tabs.stories.js +16 -7
- package/dist/packages/textarea/index.d.ts +1 -0
- package/dist/packages/textarea/index.js +1 -0
- package/dist/packages/textarea/locales/da/messages.d.mts +1 -0
- package/dist/packages/textarea/locales/da/messages.mjs +1 -0
- package/dist/packages/textarea/locales/en/messages.d.mts +1 -0
- package/dist/packages/textarea/locales/en/messages.mjs +1 -0
- package/dist/packages/textarea/locales/fi/messages.d.mts +1 -0
- package/dist/packages/textarea/locales/fi/messages.mjs +1 -0
- package/dist/packages/textarea/locales/nb/messages.d.mts +1 -0
- package/dist/packages/textarea/locales/nb/messages.mjs +1 -0
- package/dist/packages/textarea/locales/sv/messages.d.mts +1 -0
- package/dist/packages/textarea/locales/sv/messages.mjs +1 -0
- package/dist/packages/textarea/react.d.ts +11 -0
- package/dist/packages/textarea/react.js +21 -0
- package/dist/packages/textarea/styles.d.ts +1 -0
- package/dist/packages/textarea/styles.js +2 -0
- package/dist/packages/textarea/textarea.d.ts +48 -0
- package/dist/packages/textarea/textarea.js +2475 -0
- package/dist/packages/textarea/textarea.js.map +7 -0
- package/dist/packages/textarea/textarea.react.stories.d.ts +33 -0
- package/dist/packages/textarea/textarea.react.stories.js +41 -0
- package/dist/packages/textarea/textarea.stories.d.ts +19 -0
- package/dist/packages/textarea/textarea.stories.js +85 -0
- package/dist/packages/textarea/textarea.test.d.ts +1 -0
- package/dist/packages/textarea/textarea.test.js +49 -0
- package/dist/packages/textfield/index.d.ts +3 -0
- package/dist/packages/textfield/index.js +17 -16
- package/dist/packages/textfield/index.js.map +2 -2
- package/dist/packages/textfield/react.d.ts +1 -1
- package/dist/packages/textfield/textfield.react.stories.d.ts +1 -1
- package/dist/packages/toggle-styles.js +2 -3
- package/dist/web-types.json +128 -15
- package/package.json +201 -12
|
@@ -24,11 +24,14 @@ declare class WarpTextField extends WarpTextField_base {
|
|
|
24
24
|
maxLength: number;
|
|
25
25
|
pattern: string;
|
|
26
26
|
placeholder: string;
|
|
27
|
+
/** @deprecated Use the native readonly attribute instead. */
|
|
27
28
|
readOnly: boolean;
|
|
29
|
+
readonly: boolean;
|
|
28
30
|
required: boolean;
|
|
29
31
|
type: string;
|
|
30
32
|
value: string;
|
|
31
33
|
name: string;
|
|
34
|
+
step: number;
|
|
32
35
|
/**
|
|
33
36
|
* Function to format value when the input field.
|
|
34
37
|
*
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r)=>{for(var
|
|
1
|
+
var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r)=>{for(var s=r>1?void 0:r?Q(o,i):o,g=h.length-1,w;g>=0;g--)(w=h[g])&&(s=(r?w(o,i,s):w(s))||s);return r&&s&&K(o,i,s),s};var Y=function(){for(var h=[],o=arguments.length;o--;)h[o]=arguments[o];return h.reduce(function(i,r){return i.concat(typeof r=="string"?r:Array.isArray(r)?Y.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(s){return r[s]?s:""}):"")},[]).join(" ")};var a=function(h,o,i,r){if(i==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof o=="function"?h!==o||!r:!o.has(h))throw new TypeError("Cannot read private member from an object whose class did not declare it");return i==="m"?r:i==="a"?r.call(h):r?r.value:o.get(h)},b=function(h,o,i,r,s){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!s)throw new TypeError("Private accessor was defined without a setter");if(typeof o=="function"?h!==o||!s:!o.has(h))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?s.call(h,i):s?s.value=i:o.set(h,i),i};function B(h){var o,i,r,s,g,w,k,T,_,P,A,F,V,z,E,f,L,X,O;class J extends h{constructor(...e){var t,c,p;super(...e),o.add(this),this.internals=this.attachInternals(),i.set(this,!1),r.set(this,!1),s.set(this,!1),g.set(this,void 0),w.set(this,void 0),k.set(this,!0),_.set(this,""),P.set(this,()=>{b(this,s,!0,"f"),b(this,i,!0,"f"),a(this,o,"m",f).call(this)}),A.set(this,()=>{b(this,i,!1,"f"),a(this,o,"m",L).call(this,this.shouldFormValueUpdate()?a(this,_,"f"):""),!this.validity.valid&&a(this,s,"f")&&b(this,r,!0,"f");let m=a(this,o,"m",f).call(this);this.validationMessageCallback&&this.validationMessageCallback(m?this.internals.validationMessage:"")}),F.set(this,()=>{var m;a(this,k,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),b(this,k,!1,"f")),b(this,s,!0,"f"),b(this,r,!0,"f"),a(this,o,"m",f).call(this),(m=this===null||this===void 0?void 0:this.validationMessageCallback)===null||m===void 0||m.call(this,this.showError?this.internals.validationMessage:"")}),V.set(this,void 0),z.set(this,!1),E.set(this,Promise.resolve()),(t=this.addEventListener)===null||t===void 0||t.call(this,"focus",a(this,P,"f")),(c=this.addEventListener)===null||c===void 0||c.call(this,"blur",a(this,A,"f")),(p=this.addEventListener)===null||p===void 0||p.call(this,"invalid",a(this,F,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let e=this.validators.map(p=>p.attribute).flat(),t=super.observedAttributes||[];return[...new Set([...t,...e])]}static getValidator(e){return this.validators.find(t=>t.attribute===e)||null}static getValidators(e){return this.validators.filter(t=>{var c;if(t.attribute===e||!((c=t.attribute)===null||c===void 0)&&c.includes(e))return!0})}get form(){return this.internals.form}get showError(){return a(this,o,"m",f).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(e,t,c){var p;(p=super.attributeChangedCallback)===null||p===void 0||p.call(this,e,t,c);let $=this.constructor.getValidators(e);$!=null&&$.length&&this.validationTarget&&this.setValue(a(this,_,"f"))}setValue(e){var t;b(this,r,!1,"f"),(t=this.validationMessageCallback)===null||t===void 0||t.call(this,""),b(this,_,e,"f");let p=this.shouldFormValueUpdate()?e:null;this.internals.setFormValue(p),a(this,o,"m",L).call(this,p),this.valueChangedCallback&&this.valueChangedCallback(p),a(this,o,"m",f).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(e=>e(a(this,E,"f")))}formResetCallback(){var e,t;b(this,s,!1,"f"),b(this,r,!1,"f"),a(this,o,"m",f).call(this),(e=this.resetFormControl)===null||e===void 0||e.call(this),(t=this.validationMessageCallback)===null||t===void 0||t.call(this,a(this,o,"m",f).call(this)?this.validationMessage:"")}}return i=new WeakMap,r=new WeakMap,s=new WeakMap,g=new WeakMap,w=new WeakMap,k=new WeakMap,_=new WeakMap,P=new WeakMap,A=new WeakMap,F=new WeakMap,V=new WeakMap,z=new WeakMap,E=new WeakMap,o=new WeakSet,T=function(){let e=this.getRootNode(),t=`${this.localName}[name="${this.getAttribute("name")}"]`;return e.querySelectorAll(t)},f=function(){if(this.hasAttribute("disabled"))return!1;let e=a(this,r,"f")||a(this,s,"f")&&!this.validity.valid&&!a(this,i,"f");return e&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),e},L=function(e){let t=this.constructor,c={},p=t.validators,m=[],$=p.some(u=>u.isValid instanceof Promise);a(this,z,"f")||(b(this,E,new Promise(u=>{b(this,V,u,"f")}),"f"),b(this,z,!0,"f")),a(this,g,"f")&&(a(this,g,"f").abort(),b(this,w,a(this,g,"f"),"f"));let M=new AbortController;b(this,g,M,"f");let S,q=!1;p.length&&(p.forEach(u=>{let Z=u.key||"customError",y=u.isValid(this,e,M.signal);y instanceof Promise?(m.push(y),y.then(N=>{N!=null&&(c[Z]=!N,S=a(this,o,"m",O).call(this,u,e),a(this,o,"m",X).call(this,c,S))})):(c[Z]=!y,this.validity[Z]!==!y&&(q=!0),!y&&!S&&(S=a(this,o,"m",O).call(this,u,e)))}),Promise.allSettled(m).then(()=>{var u;M!=null&&M.signal.aborted||(b(this,z,!1,"f"),(u=a(this,V,"f"))===null||u===void 0||u.call(this))}),(q||!$)&&a(this,o,"m",X).call(this,c,S))},X=function(e,t){if(this.validationTarget)this.internals.setValidity(e,t,this.validationTarget),b(this,k,!1,"f");else{if(this.internals.setValidity(e,t),this.internals.validity.valid)return;b(this,k,!0,"f")}},O=function(e,t){if(this.validityCallback){let c=this.validityCallback(e.key||"customError");if(c)return c}return e.message instanceof Function?e.message(this,t):e.message},J}import{html as j,LitElement as G,nothing as re}from"lit";import{property as d,query as oe}from"lit/decorators.js";import{classMap as te}from"lit/directives/class-map.js";import{ifDefined as v}from"lit/directives/if-defined.js";import{css as R}from"lit";var H=R`
|
|
2
2
|
*,
|
|
3
3
|
:before,
|
|
4
4
|
:after {
|
|
@@ -271,7 +271,7 @@ var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r
|
|
|
271
271
|
svg {
|
|
272
272
|
pointer-events: none;
|
|
273
273
|
}
|
|
274
|
-
`,ce=
|
|
274
|
+
`,ce=R`*, :before, :after {
|
|
275
275
|
--w-rotate: 0;
|
|
276
276
|
--w-rotate-x: 0;
|
|
277
277
|
--w-rotate-y: 0;
|
|
@@ -2489,7 +2489,7 @@ var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r
|
|
|
2489
2489
|
text-overflow: ellipsis;
|
|
2490
2490
|
z-index: 1;
|
|
2491
2491
|
}
|
|
2492
|
-
`;import{css as ee}from"lit";var D=ee`*,: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}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none{pointer-events:none}.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}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;var x={base:"block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current",default:"border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected",disabled:"border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none",invalid:"border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!",readOnly:"pl-0 bg-transparent pointer-events-none",placeholder:"placeholder:s-text-placeholder",suffix:"pr-40",prefix:"pl-[var(--w-prefix-width,_40px)]",textArea:"min-h-[42] sm:min-h-[45]"},ae={base:"antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",optional:"pl-8 font-normal text-s s-text-subtle"},
|
|
2492
|
+
`;import{css as ee}from"lit";var D=ee`*,: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}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none{pointer-events:none}.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}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;var x={base:"block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current",default:"border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected",disabled:"border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none",invalid:"border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!",readOnly:"pl-0 bg-transparent pointer-events-none",placeholder:"placeholder:s-text-placeholder",suffix:"pr-40",prefix:"pl-[var(--w-prefix-width,_40px)]",textArea:"min-h-[42] sm:min-h-[45]"},ae={base:"antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",optional:"pl-8 font-normal text-s s-text-subtle"},I={base:"text-xs mt-4 block",color:"s-text-subtle",colorInvalid:"s-text-negative"},n=class extends B(G){constructor(){super(...arguments);this.type="text";this._hasPrefix=!1;this._hasSuffix=!1}updated(i){i.has("value")&&(this.setValue(this.value),this.formatter&&(this.mask.innerText=this.formatter(this.value)))}get _inputstyles(){return Y([x.base,this._hasSuffix&&x.suffix,this._hasPrefix&&x.prefix,!this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.default,this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&x.invalid,!this.invalid&&this.disabled&&!(this.readonly||this.readOnly)&&x.disabled,!this.invalid&&!this.disabled&&(this.readonly||this.readOnly)&&x.readOnly])}get _helptextstyles(){return Y([I.base,this.invalid?I.colorInvalid:I.color])}get _label(){if(this.label)return j`<label for="${this._id}" class=${ae.base}>${this.label}</label>`}get _helpId(){if(this.helpText)return`${this._id}__hint`}get _id(){return"textfield"}get _error(){if(this.invalid&&this._helpId)return this._helpId}handler(i){let{name:r,value:s}=i.currentTarget;this.value=s;let g=new CustomEvent(i.type,{detail:{name:r,value:s,target:i.target}});this.dispatchEvent(g)}prefixSlotChange(){this.renderRoot.querySelector("slot[name=prefix]").assignedElements().length&&(this._hasPrefix=!0)}suffixSlotChange(){this.renderRoot.querySelector("slot[name=suffix]").assignedElements().length&&(this._hasSuffix=!0)}render(){return j`
|
|
2493
2493
|
${this._label}
|
|
2494
2494
|
<div
|
|
2495
2495
|
class="${te({"w-textfield":!0,"w-textfield--has-prefix":this._hasPrefix,"w-textfield--has-suffix":this._hasSuffix})}">
|
|
@@ -2499,22 +2499,23 @@ var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r
|
|
|
2499
2499
|
<input
|
|
2500
2500
|
class="${this._inputstyles}"
|
|
2501
2501
|
type="${this.type}"
|
|
2502
|
-
min="${
|
|
2503
|
-
max="${
|
|
2504
|
-
size="${
|
|
2505
|
-
minlength="${
|
|
2506
|
-
maxlength="${
|
|
2507
|
-
name="${
|
|
2508
|
-
pattern="${
|
|
2509
|
-
placeholder="${
|
|
2502
|
+
min="${v(this.min)}"
|
|
2503
|
+
max="${v(this.max)}"
|
|
2504
|
+
size="${v(this.size)}"
|
|
2505
|
+
minlength="${v(this.minLength)}"
|
|
2506
|
+
maxlength="${v(this.maxLength)}"
|
|
2507
|
+
name="${v(this.name)}"
|
|
2508
|
+
pattern="${v(this.pattern)}"
|
|
2509
|
+
placeholder="${v(this.placeholder)}"
|
|
2510
2510
|
.value="${this.value||""}"
|
|
2511
|
-
aria-describedby="${
|
|
2512
|
-
aria-errormessage="${
|
|
2513
|
-
aria-invalid="${
|
|
2511
|
+
aria-describedby="${v(this._helpId||(this.ariaDescription?"aria-description":void 0))}"
|
|
2512
|
+
aria-errormessage="${v(this._error)}"
|
|
2513
|
+
aria-invalid="${v(this.invalid)}"
|
|
2514
2514
|
id="${this._id}"
|
|
2515
2515
|
?disabled="${this.disabled}"
|
|
2516
|
-
?readonly="${this.readOnly}"
|
|
2516
|
+
?readonly="${this.readonly||this.readOnly}"
|
|
2517
2517
|
?required="${this.required}"
|
|
2518
|
+
step="${v(this.step)}"
|
|
2518
2519
|
@blur="${this.handler}"
|
|
2519
2520
|
@change="${this.handler}"
|
|
2520
2521
|
@input="${this.handler}"
|
|
@@ -2524,5 +2525,5 @@ var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var l=(h,o,i,r
|
|
|
2524
2525
|
</div>
|
|
2525
2526
|
<span class="sr-only" id="aria-description">${this.ariaDescription}</span>
|
|
2526
2527
|
${this.helpText&&j`<div class="${this._helptextstyles}" id="${this._helpId}">${this.helpText}</div>`}
|
|
2527
|
-
`}};
|
|
2528
|
+
`}};n.shadowRootOptions={...G.shadowRootOptions,delegatesFocus:!0},n.styles=[H,D,U],l([d({type:Boolean,reflect:!0})],n.prototype,"disabled",2),l([d({type:Boolean,reflect:!0})],n.prototype,"invalid",2),l([d({type:String,reflect:!0})],n.prototype,"id",2),l([d({type:String,reflect:!0})],n.prototype,"label",2),l([d({type:String,reflect:!0,attribute:"help-text"})],n.prototype,"helpText",2),l([d({type:String,reflect:!0})],n.prototype,"size",2),l([d({type:Number,reflect:!0})],n.prototype,"max",2),l([d({type:Number,reflect:!0})],n.prototype,"min",2),l([d({type:Number,reflect:!0,attribute:"min-length"})],n.prototype,"minLength",2),l([d({type:Number,reflect:!0,attribute:"max-length"})],n.prototype,"maxLength",2),l([d({type:String,reflect:!0})],n.prototype,"pattern",2),l([d({type:String,reflect:!0})],n.prototype,"placeholder",2),l([d({type:Boolean,reflect:!0,attribute:"read-only"})],n.prototype,"readOnly",2),l([d({type:Boolean,reflect:!0})],n.prototype,"readonly",2),l([d({type:Boolean,reflect:!0})],n.prototype,"required",2),l([d({type:String,reflect:!0})],n.prototype,"type",2),l([d({type:String,reflect:!0})],n.prototype,"value",2),l([d({type:String,reflect:!0})],n.prototype,"name",2),l([d({type:Number,reflect:!0})],n.prototype,"step",2),l([d({attribute:!1})],n.prototype,"formatter",2),l([oe(".w-textfield__mask")],n.prototype,"mask",2),l([d({type:Boolean})],n.prototype,"_hasPrefix",2),l([d({type:Boolean})],n.prototype,"_hasSuffix",2);customElements.get("w-textfield")||customElements.define("w-textfield",n);export{n as WarpTextField};
|
|
2528
2529
|
//# sourceMappingURL=index.js.map
|