@warp-ds/elements 2.2.0-next.7 → 2.2.0-next.8
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 +623 -192
- package/dist/index.d.ts +1 -0
- package/dist/index.js +350 -130
- package/dist/index.js.map +4 -4
- package/dist/packages/alert/index.js.map +1 -1
- package/dist/packages/alert/react.js.map +1 -1
- package/dist/packages/attention/index.js.map +1 -1
- package/dist/packages/button/index.d.ts +1 -0
- package/dist/packages/button/index.js +214 -9
- package/dist/packages/button/index.js.map +4 -4
- package/dist/packages/button/react.js +213 -8
- package/dist/packages/button/react.js.map +4 -4
- package/dist/packages/datepicker/DatePicker.test.d.ts +1 -0
- package/dist/packages/datepicker/datepicker.d.ts +9 -0
- package/dist/packages/datepicker/index.js +87 -83
- package/dist/packages/datepicker/index.js.map +3 -3
- package/dist/packages/datepicker/react.d.ts +2 -0
- package/dist/packages/datepicker/react.js +2805 -0
- package/dist/packages/datepicker/react.js.map +7 -0
- package/dist/packages/link/index.d.ts +39 -0
- package/dist/packages/link/index.js +2646 -0
- package/dist/packages/link/index.js.map +7 -0
- package/dist/packages/link/link.stories.d.ts +20 -0
- package/dist/packages/link/link.test.d.ts +1 -0
- package/dist/packages/link/react.d.ts +2 -0
- package/dist/packages/link/react.js +2666 -0
- package/dist/packages/link/react.js.map +7 -0
- package/dist/packages/link/styles.d.ts +1 -0
- package/dist/packages/steps/index.d.ts +43 -0
- package/dist/packages/steps/index.js +2465 -0
- package/dist/packages/steps/index.js.map +7 -0
- package/dist/packages/steps/locales/da/messages.d.mts +1 -0
- package/dist/packages/steps/locales/en/messages.d.mts +1 -0
- package/dist/packages/steps/locales/fi/messages.d.mts +1 -0
- package/dist/packages/steps/locales/nb/messages.d.mts +1 -0
- package/dist/packages/steps/locales/sv/messages.d.mts +1 -0
- package/dist/packages/steps/react.d.ts +3 -0
- package/dist/packages/steps/react.js +2485 -0
- package/dist/packages/steps/react.js.map +7 -0
- package/dist/packages/steps/steps.stories.d.ts +12 -0
- package/dist/packages/steps/styles.d.ts +1 -0
- package/dist/packages/textfield/index.js +1 -1
- package/dist/packages/textfield/index.js.map +2 -2
- package/dist/packages/textfield/react.js +1 -1
- package/dist/packages/textfield/react.js.map +2 -2
- package/dist/packages/toast/index.js.map +1 -1
- package/dist/vscode.html-custom-data.json +68 -19
- package/dist/web-types.json +133 -36
- package/package.json +11 -9
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
var
|
|
2
|
-
`],["r","\r"],["t"," "],["v","\v"],["0","\0"]]);function
|
|
1
|
+
var Ae=Object.create;var ne=Object.defineProperty;var he=Object.getOwnPropertyDescriptor;var Ne=Object.getOwnPropertyNames;var Ue=Object.getPrototypeOf,Ye=Object.prototype.hasOwnProperty;var pe=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports);var Ie=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of Ne(e))!Ye.call(t,a)&&a!==r&&ne(t,a,{get:()=>e[a],enumerable:!(o=he(e,a))||o.enumerable});return t};var Re=(t,e,r)=>(r=t!=null?Ae(Ue(t)):{},Ie(e||!t||!t.__esModule?ne(r,"default",{value:t,enumerable:!0}):r,t));var m=(t,e,r,o)=>{for(var a=o>1?void 0:o?he(e,r):e,b=t.length-1,c;b>=0;b--)(c=t[b])&&(a=(o?c(e,r,a):c(a))||a);return o&&a&&ne(e,r,a),a};var ve=pe(A=>{"use strict";Object.defineProperty(A,"__esModule",{value:!0});A.errorMessages=A.ErrorType=void 0;var I;(function(t){t.MalformedUnicode="MALFORMED_UNICODE",t.MalformedHexadecimal="MALFORMED_HEXADECIMAL",t.CodePointLimit="CODE_POINT_LIMIT",t.OctalDeprecation="OCTAL_DEPRECATION",t.EndOfString="END_OF_STRING"})(I=A.ErrorType||(A.ErrorType={}));A.errorMessages=new Map([[I.MalformedUnicode,"malformed Unicode character escape sequence"],[I.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[I.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[I.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[I.EndOfString,"malformed escape sequence at end of string"]])});var we=pe(q=>{"use strict";Object.defineProperty(q,"__esModule",{value:!0});q.unraw=q.errorMessages=q.ErrorType=void 0;var C=ve();Object.defineProperty(q,"ErrorType",{enumerable:!0,get:function(){return C.ErrorType}});Object.defineProperty(q,"errorMessages",{enumerable:!0,get:function(){return C.errorMessages}});function He(t){return!t.match(/[^a-f0-9]/i)?parseInt(t,16):NaN}function J(t,e,r){let o=He(t);if(Number.isNaN(o)||r!==void 0&&r!==t.length)throw new SyntaxError(C.errorMessages.get(e));return o}function Xe(t){let e=J(t,C.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function me(t,e){let r=J(t,C.ErrorType.MalformedUnicode,4);if(e!==void 0){let o=J(e,C.ErrorType.MalformedUnicode,4);return String.fromCharCode(r,o)}return String.fromCharCode(r)}function Ze(t){return t.charAt(0)==="{"&&t.charAt(t.length-1)==="}"}function Be(t){if(!Ze(t))throw new SyntaxError(C.errorMessages.get(C.ErrorType.MalformedUnicode));let e=t.slice(1,-1),r=J(e,C.ErrorType.MalformedUnicode);try{return String.fromCodePoint(r)}catch(o){throw o instanceof RangeError?new SyntaxError(C.errorMessages.get(C.ErrorType.CodePointLimit)):o}}function Ge(t,e=!1){if(e)throw new SyntaxError(C.errorMessages.get(C.ErrorType.OctalDeprecation));let r=parseInt(t,8);return String.fromCharCode(r)}var Je=new Map([["b","\b"],["f","\f"],["n",`
|
|
2
|
+
`],["r","\r"],["t"," "],["v","\v"],["0","\0"]]);function Ke(t){return Je.get(t)||t}var We=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function fe(t,e=!1){return t.replace(We,function(r,o,a,b,c,l,v,k,E){if(o!==void 0)return"\\";if(a!==void 0)return Xe(a);if(b!==void 0)return Be(b);if(c!==void 0)return me(c,l);if(v!==void 0)return me(v);if(k==="0")return"\0";if(k!==void 0)return Ge(k,!e);if(E!==void 0)return Ke(E);throw new SyntaxError(C.errorMessages.get(C.ErrorType.EndOfString))})}q.unraw=fe;q.default=fe});import{html as te,LitElement as xr}from"lit";var se=function(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];return t.reduce(function(r,o){return r.concat(typeof o=="string"?o:Array.isArray(o)?se.apply(void 0,o):typeof o=="object"&&o?Object.keys(o).map(function(a){return o[a]?a:""}):"")},[]).join(" ")};var ke=Re(we(),1);var O=t=>typeof t=="string",er=t=>typeof t=="function",xe=new Map,$e="en";function ue(t){return[...Array.isArray(t)?t:[t],$e]}function be(t,e,r){let o=ue(t);r||(r="default");let a;if(typeof r=="string")switch(a={day:"numeric",month:"short",year:"numeric"},r){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=r;return K(()=>W("date",o,r),()=>new Intl.DateTimeFormat(o,a)).format(O(e)?new Date(e):e)}function rr(t,e,r){let o;if(r||(r="default"),typeof r=="string")switch(o={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":o.timeZoneName="short";break;case"short":delete o.second}else o=r;return be(t,e,o)}function le(t,e,r){let o=ue(t);return K(()=>W("number",o,r),()=>new Intl.NumberFormat(o,r)).format(e)}function ye(t,e,r,{offset:o=0,...a}){var l,v;let b=ue(t),c=e?K(()=>W("plural-ordinal",b),()=>new Intl.PluralRules(b,{type:"ordinal"})):K(()=>W("plural-cardinal",b),()=>new Intl.PluralRules(b,{type:"cardinal"}));return(v=(l=a[r])!=null?l:a[c.select(r-o)])!=null?v:a.other}function K(t,e){let r=t(),o=xe.get(r);return o||(o=e(),xe.set(r,o)),o}function W(t,e,r){let o=e.join("-");return`${t}-${o}-${JSON.stringify(r)}`}var _e=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,Ce="%__lingui_octothorpe__%",tr=(t,e,r={})=>{let o=e||t,a=c=>typeof c=="object"?c:r[c],b=(c,l)=>{let v=Object.keys(r).length?a("number"):void 0,k=le(o,c,v);return l.replace(new RegExp(Ce,"g"),k)};return{plural:(c,l)=>{let{offset:v=0}=l,k=ye(o,!1,c,l);return b(c-v,k)},selectordinal:(c,l)=>{let{offset:v=0}=l,k=ye(o,!0,c,l);return b(c-v,k)},select:or,number:(c,l)=>le(o,c,a(l)||{style:l}),date:(c,l)=>be(o,c,a(l)||l),time:(c,l)=>rr(o,c,a(l)||l)}},or=(t,e)=>{var r;return(r=e[t])!=null?r:e.other};function ar(t,e,r){return(o={},a)=>{let b=tr(e,r,a),c=(v,k=!1)=>Array.isArray(v)?v.reduce((E,D)=>{if(D==="#"&&k)return E+Ce;if(O(D))return E+D;let[U,M,P]=D,T={};M==="plural"||M==="selectordinal"||M==="select"?Object.entries(P).forEach(([j,R])=>{T[j]=c(R,M==="plural"||M==="selectordinal")}):T=P;let z;if(M){let j=b[M];z=j(o[U],T)}else z=o[U];return z==null?E:E+z},""):v,l=c(t);return O(l)&&_e.test(l)?(0,ke.unraw)(l):O(l)?l:l?String(l):""}}var ir=Object.defineProperty,nr=(t,e,r)=>e in t?ir(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,sr=(t,e,r)=>(nr(t,typeof e!="symbol"?e+"":e,r),r),de=class{constructor(){sr(this,"_events",{})}on(e,r){var a;var o;return(a=(o=this._events)[e])!=null||(o[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let o=this._getListeners(e);if(!o)return;let a=o.indexOf(r);~a&&o.splice(a,1)}emit(e,...r){let o=this._getListeners(e);o&&o.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},lr=Object.defineProperty,dr=(t,e,r)=>e in t?lr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,N=(t,e,r)=>(dr(t,typeof e!="symbol"?e+"":e,r),r),ce=class extends de{constructor(e){var r;super(),N(this,"_locale",""),N(this,"_locales"),N(this,"_localeData",{}),N(this,"_messages",{}),N(this,"_missing"),N(this,"_messageCompiler"),N(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate((r=e.locale)!=null?r:$e,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var e;return(e=this._messages[this._locale])!=null?e:{}}get localeData(){var e;return(e=this._localeData[this._locale])!=null?e:{}}_loadLocaleData(e,r){let o=this._localeData[e];o?Object.assign(o,r):this._localeData[e]=r}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,r){typeof e=="string"?this._loadLocaleData(e,r):Object.keys(e).forEach(o=>this._loadLocaleData(o,e[o])),this.emit("change")}_load(e,r){let o=this._messages[e];o?Object.assign(o,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([o,a])=>this._load(o,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:o}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=o,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,o){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=o==null?void 0:o.message;e||(e=""),O(e)||(r=e.values||r,a=e.message,e=e.id);let b=this.messages[e],c=b===void 0,l=this._missing;if(l&&c)return er(l)?l(this._locale,e):l;c&&this.emit("missing",{id:e,locale:this._locale});let v=b||a||e;return O(v)&&(this._messageCompiler?v=this._messageCompiler(v):console.warn(`Uncompiled message detected! Message:
|
|
3
3
|
|
|
4
|
-
> ${
|
|
4
|
+
> ${v}
|
|
5
5
|
|
|
6
6
|
That means you use raw catalog or your catalog doesn't have a translation for the message and fallback was used.
|
|
7
7
|
ICU features such as interpolation and plurals will not work properly for that message.
|
|
8
8
|
|
|
9
9
|
Please compile your catalog first.
|
|
10
|
-
`)),
|
|
10
|
+
`)),O(v)&&_e.test(v)?JSON.parse(`"${v}"`):O(v)?v:ar(v,this._locale,this._locales)(r,o==null?void 0:o.formats)}date(e,r){return be(this._locales||this._locale,e,r)}number(e,r){return le(this._locales||this._locale,e,r)}};function cr(t={}){return new ce(t)}var G=cr();var p=function(t,e,r,o){if(r==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?t!==e||!o:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return r==="m"?o:r==="a"?o.call(t):o?o.value:e.get(t)},x=function(t,e,r,o,a){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!a)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?t!==e||!a:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?a.call(t,r):a?a.value=r:e.set(t,r),r};function ee(t){var e,r,o,a,b,c,l,v,k,E,D,U,M,P,T,z,j,R,oe;class je extends t{constructor(...u){var h,w,$;super(...u),e.add(this),this.internals=this.attachInternals(),r.set(this,!1),o.set(this,!1),a.set(this,!1),b.set(this,void 0),c.set(this,void 0),l.set(this,!0),k.set(this,""),E.set(this,()=>{x(this,a,!0,"f"),x(this,r,!0,"f"),p(this,e,"m",z).call(this)}),D.set(this,()=>{x(this,r,!1,"f"),p(this,e,"m",j).call(this,this.shouldFormValueUpdate()?p(this,k,"f"):""),!this.validity.valid&&p(this,a,"f")&&x(this,o,!0,"f");let F=p(this,e,"m",z).call(this);this.validationMessageCallback&&this.validationMessageCallback(F?this.internals.validationMessage:"")}),U.set(this,()=>{var F;p(this,l,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),x(this,l,!1,"f")),x(this,a,!0,"f"),x(this,o,!0,"f"),p(this,e,"m",z).call(this),(F=this===null||this===void 0?void 0:this.validationMessageCallback)===null||F===void 0||F.call(this,this.showError?this.internals.validationMessage:"")}),M.set(this,void 0),P.set(this,!1),T.set(this,Promise.resolve()),(h=this.addEventListener)===null||h===void 0||h.call(this,"focus",p(this,E,"f")),(w=this.addEventListener)===null||w===void 0||w.call(this,"blur",p(this,D,"f")),($=this.addEventListener)===null||$===void 0||$.call(this,"invalid",p(this,U,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let u=this.validators.map($=>$.attribute).flat(),h=super.observedAttributes||[];return[...new Set([...h,...u])]}static getValidator(u){return this.validators.find(h=>h.attribute===u)||null}static getValidators(u){return this.validators.filter(h=>{var w;if(h.attribute===u||!((w=h.attribute)===null||w===void 0)&&w.includes(u))return!0})}get form(){return this.internals.form}get showError(){return p(this,e,"m",z).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(u,h,w){var $;($=super.attributeChangedCallback)===null||$===void 0||$.call(this,u,h,w);let X=this.constructor.getValidators(u);X!=null&&X.length&&this.validationTarget&&this.setValue(p(this,k,"f"))}setValue(u){var h;x(this,o,!1,"f"),(h=this.validationMessageCallback)===null||h===void 0||h.call(this,""),x(this,k,u,"f");let $=this.shouldFormValueUpdate()?u:null;this.internals.setFormValue($),p(this,e,"m",j).call(this,$),this.valueChangedCallback&&this.valueChangedCallback($),p(this,e,"m",z).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(u=>u(p(this,T,"f")))}formResetCallback(){var u,h;x(this,a,!1,"f"),x(this,o,!1,"f"),p(this,e,"m",z).call(this),(u=this.resetFormControl)===null||u===void 0||u.call(this),(h=this.validationMessageCallback)===null||h===void 0||h.call(this,p(this,e,"m",z).call(this)?this.validationMessage:"")}}return r=new WeakMap,o=new WeakMap,a=new WeakMap,b=new WeakMap,c=new WeakMap,l=new WeakMap,k=new WeakMap,E=new WeakMap,D=new WeakMap,U=new WeakMap,M=new WeakMap,P=new WeakMap,T=new WeakMap,e=new WeakSet,v=function(){let u=this.getRootNode(),h=`${this.localName}[name="${this.getAttribute("name")}"]`;return u.querySelectorAll(h)},z=function(){if(this.hasAttribute("disabled"))return!1;let u=p(this,o,"f")||p(this,a,"f")&&!this.validity.valid&&!p(this,r,"f");return u&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),u},j=function(u){let h=this.constructor,w={},$=h.validators,F=[],X=$.some(L=>L.isValid instanceof Promise);p(this,P,"f")||(x(this,T,new Promise(L=>{x(this,M,L,"f")}),"f"),x(this,P,!0,"f")),p(this,b,"f")&&(p(this,b,"f").abort(),x(this,c,p(this,b,"f"),"f"));let Z=new AbortController;x(this,b,Z,"f");let B,ge=!1;$.length&&($.forEach(L=>{let ae=L.key||"customError",Y=L.isValid(this,u,Z.signal);Y instanceof Promise?(F.push(Y),Y.then(ie=>{ie!=null&&(w[ae]=!ie,B=p(this,e,"m",oe).call(this,L,u),p(this,e,"m",R).call(this,w,B))})):(w[ae]=!Y,this.validity[ae]!==!Y&&(ge=!0),!Y&&!B&&(B=p(this,e,"m",oe).call(this,L,u)))}),Promise.allSettled(F).then(()=>{var L;Z!=null&&Z.signal.aborted||(x(this,P,!1,"f"),(L=p(this,M,"f"))===null||L===void 0||L.call(this))}),(ge||!X)&&p(this,e,"m",R).call(this,w,B))},R=function(u,h){if(this.validationTarget)this.internals.setValidity(u,h,this.validationTarget),x(this,l,!1,"f");else{if(this.internals.setValidity(u,h),this.internals.validity.valid)return;x(this,l,!0,"f")}},oe=function(u,h){if(this.validityCallback){let w=this.validityCallback(u.key||"customError");if(w)return w}return u.message instanceof Function?u.message(this,h):u.message},je}import yr from"@warp-ds/elements-core";import{property as S}from"lit/decorators.js";var ur=["en","nb","fi","da","sv"],Se="en",ze=t=>ur.find(e=>t===e||t.toLowerCase().includes(e))||Se;function br(){if(typeof window=="undefined"){let t=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return ze(t)}try{let t=document.documentElement.lang;return ze(t)}catch(t){return console.warn("could not detect locale, falling back to source locale",t),Se}}var gr=(t,e,r,o,a,b)=>t==="nb"?r:t==="fi"?o:t==="da"?a:t==="sv"?b:e,Me=(t,e,r,o,a)=>{let b=br(),c=gr(b,t,e,r,o,a);G.load(b,c),G.activate(b)};import{html as pr,LitElement as vr}from"lit";import mr from"@warp-ds/elements-core";import{property as Q}from"lit/decorators.js";import{classMap as fr}from"lit/directives/class-map.js";import{css as Le}from"lit";var re=Le`
|
|
11
11
|
*,
|
|
12
12
|
:before,
|
|
13
13
|
:after {
|
|
@@ -280,7 +280,7 @@ Please compile your catalog first.
|
|
|
280
280
|
svg {
|
|
281
281
|
pointer-events: none;
|
|
282
282
|
}
|
|
283
|
-
`,
|
|
283
|
+
`,qr=Le`*, :before, :after {
|
|
284
284
|
--w-rotate: 0;
|
|
285
285
|
--w-rotate-x: 0;
|
|
286
286
|
--w-rotate-y: 0;
|
|
@@ -2446,15 +2446,220 @@ Please compile your catalog first.
|
|
|
2446
2446
|
display: none
|
|
2447
2447
|
}
|
|
2448
2448
|
}
|
|
2449
|
-
`;var Me=JSON.parse('{"button.aria.loading":["Indl\xE6ser..."]}');var Le=JSON.parse('{"button.aria.loading":["Loading..."]}');var Ee=JSON.parse('{"button.aria.loading":["Ladataan..."]}');var Fe=JSON.parse('{"button.aria.loading":["Laster..."]}');var De=JSON.parse('{"button.aria.loading":["Laddar ..."]}');import{css as cr}from"lit";var Qe=cr`*,: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}.text-center{text-align:center}.animate-inprogress{background-size:30px 30px;animation:3s linear infinite animate-inprogress;background-image:linear-gradient(135deg,#0000000d 25%,#0000 0 50%,#0000000d 0 75%,#0000 0,#0000)!important}@keyframes animate-inprogress{0%{background-position:0 0}to{background-position:60px 0}}.hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box}.bg-transparent{background-color:#0000}.bg-\\[--w-color-button-primary-background\\]{background-color:var(--w-color-button-primary-background)}.hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover{background-color:var(--w-color-button-pill-background-hover)}.hover\\:bg-\\[--w-color-button-primary-background-hover\\]:hover{background-color:var(--w-color-button-primary-background-hover)}.active\\:bg-\\[--w-color-button-pill-background-active\\]:active{background-color:var(--w-color-button-pill-background-active)}.active\\:bg-\\[--w-color-button-primary-background-active\\]:active{background-color:var(--w-color-button-primary-background-active)}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-transparent{border-color:#0000}.rounded-4{border-radius:4px}.rounded-8{border-radius:8px}.rounded-full{border-radius:9999px}.inline-block{display:inline-block}.inline{display:inline}.inline-flex{display:inline-flex}.hover\\:underline:hover,.focus\\:underline:focus,.active\\:underline:active{text-decoration-line:underline}.hover\\:no-underline:hover,.focus\\:no-underline:focus,.active\\:no-underline:active{text-decoration:none}.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}.items-center{align-items:center}.justify-center{justify-content:center}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-bg-negative{background-color:var(--w-s-color-background-negative)}.s-bg-subtle{background-color:var(--w-s-color-background-subtle)}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-negative-hover:hover{background-color:var(--w-s-color-background-negative-hover)}.hover\\:s-bg-negative-subtle-hover:hover{background-color:var(--w-s-color-background-negative-subtle-hover)}.active\\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.active\\:s-bg-negative-active:active{background-color:var(--w-s-color-background-negative-active)}.active\\:s-bg-negative-subtle-active:active{background-color:var(--w-s-color-background-negative-subtle-active)}.s-text{color:var(--w-s-color-text)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.s-text-link{color:var(--w-s-color-text-link)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-icon{color:var(--w-s-color-icon)}.hover\\:s-icon-hover:hover{color:var(--w-s-color-icon-hover)}.active\\:s-icon-active:active{color:var(--w-s-color-icon-active)}.s-border{border-color:var(--w-s-color-border)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.max-w-full{max-width:100%}.max-w-max{max-width:max-content}.min-h-32{min-height:3.2rem}.min-w-32{min-width:3.2rem}.w-full{width:100%}.min-h-\\[44px\\]{min-height:44px}.min-w-\\[44px\\]{min-width:44px}.p-0{padding:0}.p-4{padding:.4rem}.px-14{padding-left:1.4rem;padding-right:1.4rem}.px-16{padding-left:1.6rem;padding-right:1.6rem}.py-10{padding-top:1rem;padding-bottom:1rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.py-6{padding-top:.6rem;padding-bottom:.6rem}.py-8{padding-top:.8rem;padding-bottom:.8rem}.px-\\[15px\\]{padding-left:15px;padding-right:15px}.py-\\[11px\\]{padding-top:11px;padding-bottom:11px}.py-\\[7px\\]{padding-top:7px;padding-bottom:7px}.cursor-default{cursor:default}.font-bold{font-weight:700}.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}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-\\[24\\]{line-height:2.4rem}`;var Pe=["primary","secondary","negative","utility","pill","link"],T="font-bold focusable justify-center transition-colors ease-in-out",v={primary:"s-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]",secondary:"s-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active",utility:"s-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active",destructive:"s-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active",pill:"s-icon hover:s-icon-hover active:s-icon-active bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]",disabled:"s-text-inverted s-bg-disabled",quiet:"bg-transparent s-text-link hover:s-bg-hover active:s-bg-active",utilityQuiet:"s-text bg-transparent hover:s-bg-hover active:s-bg-active",negativeQuiet:"bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active",loading:"s-text s-bg-subtle",link:"s-text-link"},b={primary:`border-0 rounded-8 ${T}`,secondary:`border-2 rounded-8 ${T}`,utility:`border rounded-4 ${T}`,negative:`border-0 rounded-8 ${T}`,pill:`p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${T}`,link:`bg-transparent focusable ease-in-out inline active:underline hover:underline focus:underline ${v.link}`},s={xsmall:"py-6 px-16",small:"py-8 px-16",medium:"py-10 px-14",large:"py-12 px-16",utility:"py-[11px] px-[15px]",smallUtility:"py-[7px] px-[15px]",pill:"min-h-[44px] min-w-[44px]",pillSmall:"min-h-32 min-w-32",link:"p-0"},n={medium:"text-m leading-[24]",xsmall:"text-xs"},i={inProgress:`border-transparent animate-inprogress pointer-events-none ${v.loading}`,quiet:`border-0 rounded-8 ${T}`,utilityQuiet:`border-0 rounded-4 ${T}`,negativeQuiet:`border-0 rounded-8 ${T}`,isDisabled:`font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${v.disabled}`},d={secondary:`${s.medium} ${n.medium} ${b.secondary} ${v.secondary}`,secondaryHref:`${s.medium} ${n.medium} ${b.secondary} ${v.secondary}`,secondaryDisabled:`${s.medium} ${n.medium} ${b.secondary} ${i.isDisabled}`,secondarySmall:`${n.xsmall} ${s.xsmall} ${b.secondary} ${v.secondary}`,secondarySmallDisabled:`${n.xsmall} ${s.xsmall} ${b.secondary} ${i.isDisabled}`,secondaryQuiet:`${s.medium} ${n.medium} ${i.quiet} ${v.quiet}`,secondaryQuietDisabled:`${s.medium} ${n.medium} ${i.quiet} ${i.isDisabled}`,secondarySmallQuiet:`${n.xsmall} ${s.xsmall} ${i.quiet} ${v.quiet}`,secondarySmallQuietDisabled:`${n.xsmall} ${s.xsmall} ${i.quiet} ${i.isDisabled}`,secondaryLoading:`${s.medium} ${n.medium} ${b.secondary} ${i.inProgress}`,secondarySmallLoading:`${n.xsmall} ${s.xsmall} ${b.secondary} ${i.inProgress}`,secondarySmallQuietLoading:`${n.xsmall} ${s.xsmall} ${i.quiet} ${i.inProgress}`,secondaryQuietLoading:`${s.medium} ${n.medium} ${i.quiet} ${i.inProgress}`,primary:`${s.large} ${n.medium} ${b.primary} ${v.primary}`,primaryDisabled:`${s.large} ${n.medium} ${i.isDisabled} ${b.primary}`,primarySmall:`${s.small} ${n.xsmall} ${b.primary} ${v.primary}`,primarySmallDisabled:`${s.small} ${n.xsmall} ${i.isDisabled} ${b.primary} `,primaryQuiet:`${s.large} ${n.medium} ${i.quiet} ${v.quiet}`,primaryQuietDisabled:`${s.large} ${n.medium} ${i.quiet} ${i.isDisabled}`,primarySmallQuiet:`${s.small} ${n.xsmall} ${i.quiet} ${v.quiet}`,primarySmallQuietDisabled:`${s.small} ${n.xsmall} ${i.quiet} ${i.isDisabled}`,primaryLoading:`${s.large} ${n.medium} ${i.inProgress} ${b.primary}`,primarySmallLoading:`${s.small} ${n.xsmall} ${i.inProgress} ${b.primary}`,primarySmallQuietLoading:`${s.small} ${n.xsmall} ${i.quiet} ${i.inProgress} ${b.primary}`,primaryQuietLoading:`${s.large} ${n.medium} ${i.quiet} ${i.inProgress}`,utility:`${s.utility} ${n.medium} ${b.utility} ${v.utility}`,utilityDisabled:`${s.utility} ${n.medium} ${b.utility} ${i.isDisabled}`,utilityQuiet:`${s.large} ${n.medium} ${i.utilityQuiet} ${v.utilityQuiet}`,utilityQuietDisabled:`${s.large} ${n.medium} ${i.utilityQuiet} ${i.isDisabled}`,utilitySmall:`${s.smallUtility} ${n.xsmall} ${b.utility} ${v.utility}`,utilitySmallDisabled:`${s.smallUtility} ${n.xsmall} ${b.utility} ${i.isDisabled}`,utilitySmallQuiet:`${s.smallUtility} ${n.xsmall} ${i.utilityQuiet} ${v.utilityQuiet}`,utilitySmallQuietDisabled:`${s.smallUtility} ${n.xsmall} ${i.utilityQuiet} ${i.isDisabled}`,utilityLoading:`${s.large} ${n.medium} ${b.utility} ${i.inProgress}`,utilitySmallLoading:`${s.smallUtility} ${n.xsmall} ${b.utility} ${i.inProgress}`,utilityQuietLoading:`${s.large} ${n.medium} ${i.inProgress} ${i.utilityQuiet}`,utilitySmallQuietLoading:`${s.smallUtility} ${n.xsmall} ${i.inProgress} ${i.utilityQuiet}`,negative:`${s.large} ${n.medium} ${b.negative} ${v.destructive}`,negativeDisabled:`${s.large} ${n.medium} ${b.negative} ${i.isDisabled}`,negativeQuiet:`${s.large} ${n.medium} ${i.negativeQuiet} ${v.negativeQuiet}`,negativeQuietDisabled:`${s.large} ${n.medium} ${i.negativeQuiet}${i.isDisabled}`,negativeSmall:`${s.small} ${n.xsmall} ${b.negative} ${v.destructive}`,negativeSmallDisabled:`${s.small} ${n.xsmall} ${b.negative} ${i.isDisabled}`,negativeSmallQuiet:`${s.small} ${n.xsmall} ${i.negativeQuiet} ${v.negativeQuiet}`,negativeSmallQuietDisabled:`${s.small} ${n.xsmall} ${i.negativeQuiet} ${i.isDisabled}`,negativeLoading:`${s.large} ${n.medium} ${b.negative} ${i.inProgress}`,negativeSmallLoading:`${s.small} ${n.xsmall} ${i.inProgress} ${b.negative}`,negativeQuietLoading:`${s.large} ${n.medium} ${i.negativeQuiet} ${b.negative} ${i.inProgress}`,negativeSmallQuietLoading:`${s.small} ${n.xsmall} ${i.negativeQuiet} ${i.inProgress}`,pill:`${s.pill} ${n.medium} ${b.pill} ${v.pill}`,pillSmall:`${s.pillSmall} ${n.xsmall} ${b.pill} ${v.pill}`,pillLoading:`${s.pill} ${n.medium} ${b.pill} ${i.inProgress}`,pillSmallLoading:`${s.pillSmall} ${n.xsmall} ${b.pill} ${i.inProgress}`,link:`${s.link} ${n.medium} ${b.link}`,linkSmall:`${s.link} ${n.xsmall} ${b.link}`,linkAsButton:"inline-block active:no-underline hover:no-underline focus:no-underline text-center",a11y:"sr-only",fullWidth:"w-full max-w-full",contentWidth:"max-w-max"},x=class extends ke(ur){constructor(){super();this.type="button";Ce(Le,Fe,Ee,Me,De),this.variant="secondary",this.ariaValueTextLoading=Z._({id:"button.aria.loading",message:"Loading...",comment:"Screen reader message for buttons that are loading"})}updated(r){r.has("value")&&this.setValue(this.value)}connectedCallback(){if(super.connectedCallback(),!Pe.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
|
|
2450
|
-
|
|
2449
|
+
`;import{css as hr}from"lit";var Ee=hr`.w-button,
|
|
2450
|
+
.w-button--secondary {
|
|
2451
|
+
/* Local scoped variables, given the default button (the secondary variant) as a default */
|
|
2452
|
+
--_background: var(--background, var(--w-s-color-background));
|
|
2453
|
+
--_background-hover: var(--background-hover, var(--w-s-color-background-hover));
|
|
2454
|
+
--_background-active: var(--background-active, var(--w-s-color-background-active));
|
|
2455
|
+
--_text-color: var(--color, var(--w-s-color-text-link));
|
|
2456
|
+
--_border-width: var(--border-width, 2px);
|
|
2457
|
+
--_border: var(--border, var(--w-s-color-border));
|
|
2458
|
+
--_border-hover: var(--border-hover, var(--w-s-color-border-hover));
|
|
2459
|
+
--_border-active: var(--border-active, var(--w-s-color-border-active));
|
|
2460
|
+
--_border-radius: var(--border-radius, 8px);
|
|
2461
|
+
--_font-size: var(--font-size, var(--w-font-size-m));
|
|
2462
|
+
--_line-height: var(--line-height, var(--w-line-height-m));
|
|
2463
|
+
--_font-weight: var(--font-weight, bold);
|
|
2464
|
+
--_padding-x: var(--padding-x, 16px);
|
|
2465
|
+
--_padding-y: var(--padding-y, 13px);
|
|
2466
|
+
|
|
2467
|
+
/* Base setup for all buttons */
|
|
2468
|
+
display: inline-flex;
|
|
2469
|
+
justify-content: center;
|
|
2470
|
+
align-items: center;
|
|
2471
|
+
text-align: center;
|
|
2472
|
+
cursor: pointer;
|
|
2473
|
+
transition:
|
|
2474
|
+
color 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
2475
|
+
background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
2476
|
+
border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
2477
|
+
fill 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
2478
|
+
stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
2479
|
+
|
|
2480
|
+
/* Hook the local vars up to the button stuff */
|
|
2481
|
+
background-color: var(--_background);
|
|
2482
|
+
color: var(--_text-color);
|
|
2483
|
+
border: var(--_border-width) solid var(--_border);
|
|
2484
|
+
border-radius: var(--_border-radius);
|
|
2485
|
+
padding: calc(var(--_padding-y) - var(--_border-width)) calc(var(--_padding-x) - var(--_border-width));
|
|
2486
|
+
font-size: var(--_font-size);
|
|
2487
|
+
line-height: var(--_line-height);
|
|
2488
|
+
font-weight: var(--_font-weight);
|
|
2489
|
+
}
|
|
2490
|
+
|
|
2491
|
+
.w-button:hover {
|
|
2492
|
+
background-color: var(--_background-hover);
|
|
2493
|
+
border-color: var(--_border-hover);
|
|
2494
|
+
}
|
|
2495
|
+
|
|
2496
|
+
.w-button:active {
|
|
2497
|
+
background-color: var(--_background-active);
|
|
2498
|
+
border-color: var(--_border-active);
|
|
2499
|
+
}
|
|
2500
|
+
|
|
2501
|
+
.w-button:focus-visible {
|
|
2502
|
+
outline: 2px solid var(--w-s-color-border-focus);
|
|
2503
|
+
outline-offset: var(--w-outline-offset, 1px);
|
|
2504
|
+
}
|
|
2505
|
+
|
|
2506
|
+
/* Variants config */
|
|
2507
|
+
.w-button--primary {
|
|
2508
|
+
--background: var(--w-s-color-background-primary);
|
|
2509
|
+
--background-hover: var(--w-s-color-background-primary-hover);
|
|
2510
|
+
--background-active: var(--w-s-color-background-primary-active);
|
|
2511
|
+
--color: var(--w-s-color-text-inverted);
|
|
2512
|
+
--border-width: 0px;
|
|
2513
|
+
}
|
|
2514
|
+
.w-button--negative {
|
|
2515
|
+
--background: var(--w-s-color-background-negative);
|
|
2516
|
+
--background-hover: var(--w-s-color-background-negative-hover);
|
|
2517
|
+
--background-active: var(--w-s-color-background-negative-active);
|
|
2518
|
+
--color: var(--w-s-color-text-inverted);
|
|
2519
|
+
--border-width: 0px;
|
|
2520
|
+
}
|
|
2521
|
+
.w-button--negative-quiet {
|
|
2522
|
+
--background: transparent;
|
|
2523
|
+
--background-hover: var(--w-s-color-background-negative-subtle-hover);
|
|
2524
|
+
--background-active: var(--w-s-color-background-negative-subtle-active);
|
|
2525
|
+
--color: var(--w-s-color-text-negative);
|
|
2526
|
+
--border-width: 0px;
|
|
2527
|
+
}
|
|
2528
|
+
.w-button--utility {
|
|
2529
|
+
--background: var(--w-s-color-background);
|
|
2530
|
+
--background-hover: var(--w-s-color-background-hover);
|
|
2531
|
+
--background-active: var(--w-s-color-background-active);
|
|
2532
|
+
--color: var(--w-s-color-text);
|
|
2533
|
+
--border-radius: 4px;
|
|
2534
|
+
--border-width: 1px;
|
|
2535
|
+
}
|
|
2536
|
+
.w-button--utility-quiet {
|
|
2537
|
+
--background: transparent;
|
|
2538
|
+
--color: var(--w-s-color-text);
|
|
2539
|
+
--border-width: 0px;
|
|
2540
|
+
}
|
|
2541
|
+
.w-button--overlay {
|
|
2542
|
+
--background: var(--w-color-background);
|
|
2543
|
+
--background-hover: var(--w-color-background-hover);
|
|
2544
|
+
--background-active: var(--w-color-background-active);
|
|
2545
|
+
--color: var(--w-s-color-text);
|
|
2546
|
+
--border-radius: 9999px;
|
|
2547
|
+
--border-width: 0px;
|
|
2548
|
+
}
|
|
2549
|
+
.w-button--overlay-quiet {
|
|
2550
|
+
--background: transparent;
|
|
2551
|
+
--background-hover: var(--w-s-color-background-hover);
|
|
2552
|
+
--background-active: var(--w-s-color-background-active);
|
|
2553
|
+
--color: var(--w-s-color-text);
|
|
2554
|
+
--border-radius: 9999px;
|
|
2555
|
+
--border-width: 0px;
|
|
2556
|
+
}
|
|
2557
|
+
.w-button--overlay-inverted {
|
|
2558
|
+
--background: var(--w-s-color-background-inverted);
|
|
2559
|
+
--background-hover: var(--w-s-color-background-inverted-hover);
|
|
2560
|
+
--background-active: var(--w-s-color-background-inverted-active);
|
|
2561
|
+
--color: var(--w-s-color-text-inverted);
|
|
2562
|
+
--border-radius: 9999px;
|
|
2563
|
+
--border-width: 0px;
|
|
2564
|
+
}
|
|
2565
|
+
.w-button--overlay-inverted-quiet {
|
|
2566
|
+
--background: transparent;
|
|
2567
|
+
--background-hover: var(--w-s-color-background-inverted-hover);
|
|
2568
|
+
--background-active: var(--w-s-color-background-inverted-active);
|
|
2569
|
+
--color: var(--w-s-color-text-inverted);
|
|
2570
|
+
--border-radius: 9999px;
|
|
2571
|
+
--border-width: 0px;
|
|
2572
|
+
}
|
|
2573
|
+
|
|
2574
|
+
.w-button--link {
|
|
2575
|
+
--background: none;
|
|
2576
|
+
--background-hover: none;
|
|
2577
|
+
--background-active: none;
|
|
2578
|
+
--border-width: 0;
|
|
2579
|
+
--font-weight: normal;
|
|
2580
|
+
display: inline;
|
|
2581
|
+
}
|
|
2582
|
+
|
|
2583
|
+
/* States config, selects --loading as well since loading is always supposed to be disabled */
|
|
2584
|
+
.w-button:disabled,
|
|
2585
|
+
.w-button--disabled,
|
|
2586
|
+
.w-button--loading {
|
|
2587
|
+
--background: var(--w-s-color-background-disabled);
|
|
2588
|
+
--background-hover: var(--w-s-color-background-disabled);
|
|
2589
|
+
--background-active: var(--w-s-color-background-disabled);
|
|
2590
|
+
--color: var(--w-s-color-text-inverted);
|
|
2591
|
+
--border-width: 0px;
|
|
2592
|
+
pointer-events: none;
|
|
2593
|
+
}
|
|
2594
|
+
|
|
2595
|
+
.w-button--link:hover {
|
|
2596
|
+
text-decoration: underline;
|
|
2597
|
+
}
|
|
2598
|
+
|
|
2599
|
+
/* Sizes config */
|
|
2600
|
+
.w-button--small {
|
|
2601
|
+
--padding-x: 12px;
|
|
2602
|
+
--padding-y: 8px;
|
|
2603
|
+
--font-size: var(--w-font-size-xs);
|
|
2604
|
+
--line-height: var(--w-line-height-xs);
|
|
2605
|
+
}
|
|
2606
|
+
|
|
2607
|
+
/* Width config */
|
|
2608
|
+
.w-button--full-width {
|
|
2609
|
+
width: 100%;
|
|
2610
|
+
max-width: 100%;
|
|
2611
|
+
}
|
|
2612
|
+
|
|
2613
|
+
.w-button--has-icon-only {
|
|
2614
|
+
width: auto;
|
|
2615
|
+
max-width: none;
|
|
2616
|
+
--_padding-x: var(--_padding-y);
|
|
2617
|
+
aspect-ratio: 1 / 1;
|
|
2618
|
+
}
|
|
2619
|
+
|
|
2620
|
+
a.w-button {
|
|
2621
|
+
text-decoration: none !important;
|
|
2622
|
+
}
|
|
2623
|
+
|
|
2624
|
+
/* Copy of loading animation from warp */
|
|
2625
|
+
.w-button--loading {
|
|
2626
|
+
background-image: linear-gradient(
|
|
2627
|
+
135deg,
|
|
2628
|
+
rgba(0, 0, 0, 0.05) 25%,
|
|
2629
|
+
transparent 25%,
|
|
2630
|
+
transparent 50%,
|
|
2631
|
+
rgba(0, 0, 0, 0.05) 50%,
|
|
2632
|
+
rgba(0, 0, 0, 0.05) 75%,
|
|
2633
|
+
transparent 75%,
|
|
2634
|
+
transparent
|
|
2635
|
+
);
|
|
2636
|
+
background-size: 30px 30px;
|
|
2637
|
+
animation: animate-inprogress 3s linear infinite;
|
|
2638
|
+
}
|
|
2639
|
+
|
|
2640
|
+
@keyframes animate-inprogress {
|
|
2641
|
+
0% {
|
|
2642
|
+
background-position: 0 0;
|
|
2643
|
+
}
|
|
2644
|
+
100% {
|
|
2645
|
+
background-position: 60px 0;
|
|
2646
|
+
}
|
|
2647
|
+
}`;var Qe=["primary","secondary","negative","negativeQuiet","utility","utilityQuiet","pill","link"],_=class extends ee(vr){constructor(){super(),this.variant="secondary"}connectedCallback(){if(super.connectedCallback(),!Qe.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
|
|
2648
|
+
${Qe.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0)}render(){let e={"w-button":this.variant!=="link","w-button--primary":this.variant==="primary","w-button--secondary":this.variant==="secondary","w-button--negative":this.variant==="negative","w-button--utility":this.variant==="utility","w-button--quiet":this.variant==="quiet","w-button--negative-quiet":this.variant==="negativeQuiet","w-button--utility-quiet":this.variant==="utilityQuiet","w-button--small":this.small,"w-button--full-width":this.fullWidth,"w-button--disabled":this.disabled};return pr`<a
|
|
2649
|
+
href=${this.href}
|
|
2650
|
+
target=${this.target}
|
|
2651
|
+
rel=${this.target==="_blank"?this.rel||"noopener":void 0}
|
|
2652
|
+
class=${fr(e)}>
|
|
2653
|
+
<slot></slot>
|
|
2654
|
+
</a>`}};_.shadowRootOptions={...mr.shadowRootOptions,delegatesFocus:!0},_.styles=[re,Ee],m([Q({type:Boolean,reflect:!0})],_.prototype,"autofocus",2),m([Q({reflect:!0})],_.prototype,"variant",2),m([Q({type:Boolean,reflect:!0})],_.prototype,"quiet",2),m([Q({type:Boolean,reflect:!0})],_.prototype,"small",2),m([Q({reflect:!0})],_.prototype,"href",2),m([Q({type:Boolean,reflect:!0})],_.prototype,"disabled",2),m([Q({reflect:!0})],_.prototype,"target",2),m([Q({reflect:!0})],_.prototype,"rel",2),m([Q({attribute:"full-width",type:Boolean,reflect:!0})],_.prototype,"fullWidth",2),m([Q({attribute:"button-class",reflect:!0})],_.prototype,"buttonClass",2),m([Q({reflect:!0})],_.prototype,"name",2);customElements.get("w-link")||customElements.define("w-link",_);var Fe=JSON.parse('{"button.aria.loading":["Indl\xE6ser..."]}');var qe=JSON.parse('{"button.aria.loading":["Loading..."]}');var De=JSON.parse('{"button.aria.loading":["Ladataan..."]}');var Pe=JSON.parse('{"button.aria.loading":["Laster..."]}');var Te=JSON.parse('{"button.aria.loading":["Laddar ..."]}');import{css as wr}from"lit";var Oe=wr`*,: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}.text-center{text-align:center}.animate-inprogress{background-size:30px 30px;animation:3s linear infinite animate-inprogress;background-image:linear-gradient(135deg,#0000000d 25%,#0000 0 50%,#0000000d 0 75%,#0000 0,#0000)!important}@keyframes animate-inprogress{0%{background-position:0 0}to{background-position:60px 0}}.hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box}.bg-transparent{background-color:#0000}.bg-\\[--w-color-button-primary-background\\]{background-color:var(--w-color-button-primary-background)}.hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover{background-color:var(--w-color-button-pill-background-hover)}.hover\\:bg-\\[--w-color-button-primary-background-hover\\]:hover{background-color:var(--w-color-button-primary-background-hover)}.active\\:bg-\\[--w-color-button-pill-background-active\\]:active{background-color:var(--w-color-button-pill-background-active)}.active\\:bg-\\[--w-color-button-primary-background-active\\]:active{background-color:var(--w-color-button-primary-background-active)}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-transparent{border-color:#0000}.rounded-4{border-radius:4px}.rounded-8{border-radius:8px}.rounded-full{border-radius:9999px}.inline-block{display:inline-block}.inline{display:inline}.inline-flex{display:inline-flex}.hover\\:underline:hover,.focus\\:underline:focus,.active\\:underline:active{text-decoration-line:underline}.hover\\:no-underline:hover,.focus\\:no-underline:focus,.active\\:no-underline:active{text-decoration:none}.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}.items-center{align-items:center}.justify-center{justify-content:center}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-bg-negative{background-color:var(--w-s-color-background-negative)}.s-bg-subtle{background-color:var(--w-s-color-background-subtle)}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-negative-hover:hover{background-color:var(--w-s-color-background-negative-hover)}.hover\\:s-bg-negative-subtle-hover:hover{background-color:var(--w-s-color-background-negative-subtle-hover)}.active\\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.active\\:s-bg-negative-active:active{background-color:var(--w-s-color-background-negative-active)}.active\\:s-bg-negative-subtle-active:active{background-color:var(--w-s-color-background-negative-subtle-active)}.s-text{color:var(--w-s-color-text)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.s-text-link{color:var(--w-s-color-text-link)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-icon{color:var(--w-s-color-icon)}.hover\\:s-icon-hover:hover{color:var(--w-s-color-icon-hover)}.active\\:s-icon-active:active{color:var(--w-s-color-icon-active)}.s-border{border-color:var(--w-s-color-border)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.max-w-full{max-width:100%}.max-w-max{max-width:max-content}.min-h-32{min-height:3.2rem}.min-w-32{min-width:3.2rem}.w-full{width:100%}.min-h-\\[44px\\]{min-height:44px}.min-w-\\[44px\\]{min-width:44px}.p-0{padding:0}.p-4{padding:.4rem}.px-14{padding-left:1.4rem;padding-right:1.4rem}.px-16{padding-left:1.6rem;padding-right:1.6rem}.py-10{padding-top:1rem;padding-bottom:1rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.py-6{padding-top:.6rem;padding-bottom:.6rem}.py-8{padding-top:.8rem;padding-bottom:.8rem}.px-\\[15px\\]{padding-left:15px;padding-right:15px}.py-\\[11px\\]{padding-top:11px;padding-bottom:11px}.py-\\[7px\\]{padding-top:7px;padding-bottom:7px}.cursor-default{cursor:default}.font-bold{font-weight:700}.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}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-\\[24\\]{line-height:2.4rem}`;var Ve=["primary","secondary","negative","utility","pill","link"],V="font-bold focusable justify-center transition-colors ease-in-out",f={primary:"s-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]",secondary:"s-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active",utility:"s-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active",destructive:"s-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active",pill:"s-icon hover:s-icon-hover active:s-icon-active bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]",disabled:"s-text-inverted s-bg-disabled",quiet:"bg-transparent s-text-link hover:s-bg-hover active:s-bg-active",utilityQuiet:"s-text bg-transparent hover:s-bg-hover active:s-bg-active",negativeQuiet:"bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active",loading:"s-text s-bg-subtle",link:"s-text-link"},g={primary:`border-0 rounded-8 ${V}`,secondary:`border-2 rounded-8 ${V}`,utility:`border rounded-4 ${V}`,negative:`border-0 rounded-8 ${V}`,pill:`p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${V}`,link:`bg-transparent focusable ease-in-out inline active:underline hover:underline focus:underline ${f.link}`},n={xsmall:"py-6 px-16",small:"py-8 px-16",medium:"py-10 px-14",large:"py-12 px-16",utility:"py-[11px] px-[15px]",smallUtility:"py-[7px] px-[15px]",pill:"min-h-[44px] min-w-[44px]",pillSmall:"min-h-32 min-w-32",link:"p-0"},s={medium:"text-m leading-[24]",xsmall:"text-xs"},i={inProgress:`border-transparent animate-inprogress pointer-events-none ${f.loading}`,quiet:`border-0 rounded-8 ${V}`,utilityQuiet:`border-0 rounded-4 ${V}`,negativeQuiet:`border-0 rounded-8 ${V}`,isDisabled:`font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${f.disabled}`},d={secondary:`${n.medium} ${s.medium} ${g.secondary} ${f.secondary}`,secondaryHref:`${n.medium} ${s.medium} ${g.secondary} ${f.secondary}`,secondaryDisabled:`${n.medium} ${s.medium} ${g.secondary} ${i.isDisabled}`,secondarySmall:`${s.xsmall} ${n.xsmall} ${g.secondary} ${f.secondary}`,secondarySmallDisabled:`${s.xsmall} ${n.xsmall} ${g.secondary} ${i.isDisabled}`,secondaryQuiet:`${n.medium} ${s.medium} ${i.quiet} ${f.quiet}`,secondaryQuietDisabled:`${n.medium} ${s.medium} ${i.quiet} ${i.isDisabled}`,secondarySmallQuiet:`${s.xsmall} ${n.xsmall} ${i.quiet} ${f.quiet}`,secondarySmallQuietDisabled:`${s.xsmall} ${n.xsmall} ${i.quiet} ${i.isDisabled}`,secondaryLoading:`${n.medium} ${s.medium} ${g.secondary} ${i.inProgress}`,secondarySmallLoading:`${s.xsmall} ${n.xsmall} ${g.secondary} ${i.inProgress}`,secondarySmallQuietLoading:`${s.xsmall} ${n.xsmall} ${i.quiet} ${i.inProgress}`,secondaryQuietLoading:`${n.medium} ${s.medium} ${i.quiet} ${i.inProgress}`,primary:`${n.large} ${s.medium} ${g.primary} ${f.primary}`,primaryDisabled:`${n.large} ${s.medium} ${i.isDisabled} ${g.primary}`,primarySmall:`${n.small} ${s.xsmall} ${g.primary} ${f.primary}`,primarySmallDisabled:`${n.small} ${s.xsmall} ${i.isDisabled} ${g.primary} `,primaryQuiet:`${n.large} ${s.medium} ${i.quiet} ${f.quiet}`,primaryQuietDisabled:`${n.large} ${s.medium} ${i.quiet} ${i.isDisabled}`,primarySmallQuiet:`${n.small} ${s.xsmall} ${i.quiet} ${f.quiet}`,primarySmallQuietDisabled:`${n.small} ${s.xsmall} ${i.quiet} ${i.isDisabled}`,primaryLoading:`${n.large} ${s.medium} ${i.inProgress} ${g.primary}`,primarySmallLoading:`${n.small} ${s.xsmall} ${i.inProgress} ${g.primary}`,primarySmallQuietLoading:`${n.small} ${s.xsmall} ${i.quiet} ${i.inProgress} ${g.primary}`,primaryQuietLoading:`${n.large} ${s.medium} ${i.quiet} ${i.inProgress}`,utility:`${n.utility} ${s.medium} ${g.utility} ${f.utility}`,utilityDisabled:`${n.utility} ${s.medium} ${g.utility} ${i.isDisabled}`,utilityQuiet:`${n.large} ${s.medium} ${i.utilityQuiet} ${f.utilityQuiet}`,utilityQuietDisabled:`${n.large} ${s.medium} ${i.utilityQuiet} ${i.isDisabled}`,utilitySmall:`${n.smallUtility} ${s.xsmall} ${g.utility} ${f.utility}`,utilitySmallDisabled:`${n.smallUtility} ${s.xsmall} ${g.utility} ${i.isDisabled}`,utilitySmallQuiet:`${n.smallUtility} ${s.xsmall} ${i.utilityQuiet} ${f.utilityQuiet}`,utilitySmallQuietDisabled:`${n.smallUtility} ${s.xsmall} ${i.utilityQuiet} ${i.isDisabled}`,utilityLoading:`${n.large} ${s.medium} ${g.utility} ${i.inProgress}`,utilitySmallLoading:`${n.smallUtility} ${s.xsmall} ${g.utility} ${i.inProgress}`,utilityQuietLoading:`${n.large} ${s.medium} ${i.inProgress} ${i.utilityQuiet}`,utilitySmallQuietLoading:`${n.smallUtility} ${s.xsmall} ${i.inProgress} ${i.utilityQuiet}`,negative:`${n.large} ${s.medium} ${g.negative} ${f.destructive}`,negativeDisabled:`${n.large} ${s.medium} ${g.negative} ${i.isDisabled}`,negativeQuiet:`${n.large} ${s.medium} ${i.negativeQuiet} ${f.negativeQuiet}`,negativeQuietDisabled:`${n.large} ${s.medium} ${i.negativeQuiet}${i.isDisabled}`,negativeSmall:`${n.small} ${s.xsmall} ${g.negative} ${f.destructive}`,negativeSmallDisabled:`${n.small} ${s.xsmall} ${g.negative} ${i.isDisabled}`,negativeSmallQuiet:`${n.small} ${s.xsmall} ${i.negativeQuiet} ${f.negativeQuiet}`,negativeSmallQuietDisabled:`${n.small} ${s.xsmall} ${i.negativeQuiet} ${i.isDisabled}`,negativeLoading:`${n.large} ${s.medium} ${g.negative} ${i.inProgress}`,negativeSmallLoading:`${n.small} ${s.xsmall} ${i.inProgress} ${g.negative}`,negativeQuietLoading:`${n.large} ${s.medium} ${i.negativeQuiet} ${g.negative} ${i.inProgress}`,negativeSmallQuietLoading:`${n.small} ${s.xsmall} ${i.negativeQuiet} ${i.inProgress}`,pill:`${n.pill} ${s.medium} ${g.pill} ${f.pill}`,pillSmall:`${n.pillSmall} ${s.xsmall} ${g.pill} ${f.pill}`,pillLoading:`${n.pill} ${s.medium} ${g.pill} ${i.inProgress}`,pillSmallLoading:`${n.pillSmall} ${s.xsmall} ${g.pill} ${i.inProgress}`,link:`${n.link} ${s.medium} ${g.link}`,linkSmall:`${n.link} ${s.xsmall} ${g.link}`,linkAsButton:"inline-block active:no-underline hover:no-underline focus:no-underline text-center",a11y:"sr-only",fullWidth:"w-full max-w-full",contentWidth:"max-w-max"},y=class extends ee(xr){constructor(){super();this.type="button";Me(qe,Pe,De,Fe,Te),this.variant="secondary",this.ariaValueTextLoading=G._({id:"button.aria.loading",message:"Loading...",comment:"Screen reader message for buttons that are loading"})}updated(r){r.has("value")&&this.setValue(this.value)}connectedCallback(){if(super.connectedCallback(),!Ve.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
|
|
2655
|
+
${Ve.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0)}get _primaryClasses(){return[!this.small&&!this.quiet&&!this.loading&&d.primary,this.small&&!this.quiet&&!this.loading&&d.primarySmall,this.small&&this.quiet&&!this.loading&&d.primarySmallQuiet,this.small&&this.loading&&(this.quiet?d.primarySmallQuietLoading:d.primarySmallLoading),!this.small&&this.quiet&&!this.loading&&d.primaryQuiet,!this.small&&this.loading&&(this.quiet?d.primaryQuietLoading:d.primaryLoading)]}get _secondaryClasses(){return[!this.small&&!this.quiet&&!this.loading&&d.secondary,this.small&&!this.quiet&&!this.loading&&d.secondarySmall,this.small&&this.loading&&(this.quiet?d.secondarySmallQuietLoading:d.secondarySmallLoading),this.small&&this.quiet&&!this.loading&&d.secondarySmallQuiet,!this.small&&this.quiet&&!this.loading&&d.secondaryQuiet,!this.small&&this.loading&&(this.quiet?d.secondaryQuietLoading:d.secondaryLoading)]}get _utilityClasses(){return[!this.small&&!this.quiet&&!this.loading&&d.utility,this.small&&!this.quiet&&!this.loading&&d.utilitySmall,this.small&&this.quiet&&!this.loading&&d.utilitySmallQuiet,this.small&&this.loading&&(this.quiet?d.utilitySmallQuietLoading:d.utilitySmallLoading),!this.small&&this.quiet&&!this.loading&&d.utilityQuiet,!this.small&&this.loading&&(this.quiet?d.utilityQuietLoading:d.utilityLoading)]}get _negativeClasses(){return[!this.small&&!this.quiet&&!this.loading&&d.negative,this.small&&!this.quiet&&!this.loading&&d.negativeSmall,this.small&&this.quiet&&!this.loading&&d.negativeSmallQuiet,this.small&&this.loading&&(this.quiet?d.negativeSmallQuietLoading:d.negativeSmallLoading),!this.small&&this.quiet&&!this.loading&&d.negativeQuiet,!this.small&&this.loading&&(this.quiet?d.negativeQuietLoading:d.negativeLoading)]}get _pillClasses(){return[!this.loading&&(this.small?d.pillSmall:d.pill),this.loading&&(this.small?d.pillSmallLoading:d.pillLoading)]}get _linkClasses(){return[this.small?d.linkSmall:d.link]}get _classes(){return se(this.buttonClass,[this.variant==="primary"&&this._primaryClasses,this.variant==="secondary"&&this._secondaryClasses,this.variant==="utility"&&this._utilityClasses,this.variant==="negative"&&this._negativeClasses,this.variant==="pill"&&this._pillClasses,this.variant==="link"&&this._linkClasses,this.href&&d.linkAsButton,this.fullWidth?d.fullWidth:d.contentWidth])}_handleButtonClick(){this.type==="submit"?this.internals.form.requestSubmit():this.type==="reset"&&this.internals.form.reset()}render(){return te` ${this.href?te`<w-link
|
|
2451
2656
|
href=${this.href}
|
|
2452
2657
|
target=${this.target}
|
|
2453
2658
|
rel=${this.target==="_blank"?this.rel||"noopener":void 0}
|
|
2454
2659
|
class=${this._classes}>
|
|
2455
2660
|
<slot></slot>
|
|
2456
|
-
</
|
|
2661
|
+
</w-link>`:te`<button type=${this.type||"button"} class=${this._classes} @click="${this._handleButtonClick}">
|
|
2457
2662
|
<slot></slot>
|
|
2458
2663
|
</button>`}
|
|
2459
|
-
${this.loading?
|
|
2664
|
+
${this.loading?te`<span class="sr-only" role="progressbar" aria-valuenow="{0}" aria-valuetext=${this.ariaValueTextLoading}></span>`:null}`}};y.shadowRootOptions={...yr.shadowRootOptions,delegatesFocus:!0},y.styles=[re,Oe],m([S({reflect:!0})],y.prototype,"type",2),m([S({type:Boolean,reflect:!0})],y.prototype,"autofocus",2),m([S({reflect:!0})],y.prototype,"variant",2),m([S({type:Boolean,reflect:!0})],y.prototype,"quiet",2),m([S({type:Boolean,reflect:!0})],y.prototype,"small",2),m([S({type:Boolean,reflect:!0})],y.prototype,"loading",2),m([S({reflect:!0})],y.prototype,"href",2),m([S({reflect:!0})],y.prototype,"target",2),m([S({reflect:!0})],y.prototype,"rel",2),m([S({attribute:"full-width",type:Boolean,reflect:!0})],y.prototype,"fullWidth",2),m([S({attribute:"button-class",reflect:!0})],y.prototype,"buttonClass",2),m([S({reflect:!0})],y.prototype,"name",2),m([S({reflect:!0})],y.prototype,"value",2);customElements.get("w-button")||customElements.define("w-button",y);export{y as WarpButton,d as ccButton};
|
|
2460
2665
|
//# sourceMappingURL=index.js.map
|