New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@axa-ch/button

Package Overview
Dependencies
Maintainers
48
Versions
122
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@axa-ch/button - npm Package Compare versions

Comparing version 8.2.3 to 8.2.4

6

lib/index.js

@@ -1,4 +0,4 @@

import{html as t,LitElement as n,css as e,unsafeCSS as o}from"lit";import{classMap as r}from"lit/directives/class-map.js";import a from"@axa-ch/icon";const i=t=>!(null==t),s=new Map;[[String,""],[Boolean,!1],[Object,{}],[Array,[]],[Number,0],[Function,()=>{}]].forEach((([t,n])=>{s.set(t,n)}));const c=()=>{},l=t=>{const{constructor:{properties:n}}=t;Object.keys(n).forEach((e=>{const o=n[e],{type:r,converter:a,defaultValue:l}=o;if(!r){if(!a)throw new Error(`<${t.nodeName}> property "${e}" is missing a type!`);return}let u=t[e];i(u)||(u=r===Boolean?t.hasAttribute(e):t.getAttribute(e),i(u)?t[e]=((t,n)=>n===Number?parseFloat(t):n===Function?c:n===Array||n===Object?JSON.parse(t):t)(u,r):void 0===l&&"defaultValue"in o||(t[e]="defaultValue"in o?l:s.get(r)))}))};var u=(t,n)=>{const e=t.toLowerCase();return window.customElements.get(e)||window.customElements.define(e,n),e};const b=(t,n)=>{return`${t}-${e=n,`${e}`.replace(/\./g,"-").replace(/[^A-Za-z0-9-]/g,"")}`;var e},d=(t,n="",e="<")=>`${e}${n}${t}`,p=(t,n,e)=>d(b(t,n),e,"{"),h=(t,n,e)=>t.map((t=>t.split(d(n)).join(p(n,e)).split(d(n,"/")).join(p(n,e,"/")))),f=(t,n,e)=>{const o="string"==typeof n&&n;let r="";return t.forEach((t=>{const a=t instanceof HTMLElement?t.constructor:t,{tagName:i}=a,s=!o&&n[i];if(s){if(!window.customElements.get(i)&&a.versions)throw Error(`'versions' is a reserved class property, but was found in ${i}'s class`);a.versions=s,u(i,a)}let{versions:c}=a;!c&&e&&(c=n[e.constructor.tagName],c[i]=Object.values(c)[0]);const l=o||c[i];r=b(i,l),u(r,class extends a{})})),r},g=n=>(e,...o)=>{const r=n.constructor,[a,i]=(t=>{const{versions:n,tagName:e}=t,o=Object.keys(n).filter((t=>t!==e)).sort(((t,n)=>n.length-t.length));return[o,o.map((t=>n[t]))]})(r);let s=e;for(let t=0,n=a.length;t<n;t++)s=h(s,a[t],i[t]);for(let t=0,n=s.length;t<n;t++)s[t]=s[t].split("{").join("<");return s.raw=s,t(s,...o)};class v extends n{static get tagName(){return"axa-button"}static get styles(){return e`
import{html as t,LitElement as n,css as e,unsafeCSS as o}from"lit";import{classMap as r}from"lit/directives/class-map.js";import a from"@axa-ch/icon";const i=t=>!(null==t),s=new Map;[[String,""],[Boolean,!1],[Object,{}],[Array,[]],[Number,0],[Function,()=>{}]].forEach((([t,n])=>{s.set(t,n)}));const c=()=>{},l=t=>{const{constructor:{properties:n}}=t;Object.keys(n).forEach((e=>{const o=n[e],{type:r,converter:a,defaultValue:l}=o;if(!r){if(!a)throw new Error(`<${t.nodeName}> property "${e}" is missing a type!`);return}let u=t[e];i(u)||(u=r===Boolean?t.hasAttribute(e):t.getAttribute(e),i(u)?t[e]=((t,n)=>n===Number?parseFloat(t):n===Function?c:n===Array||n===Object?JSON.parse(t):t)(u,r):void 0===l&&"defaultValue"in o||(t[e]="defaultValue"in o?l:s.get(r)))}))};var u=(t,n)=>{const e=t.toLowerCase();return window.customElements.get(e)||window.customElements.define(e,n),e};const b=(t,n)=>{return`${t}-${e=n,`${e}`.replace(/\./g,"-").replace(/[^A-Za-z0-9-]/g,"")}`;var e},d=(t,n="",e="<")=>`${e}${n}${t}`,p=(t,n,e)=>d(b(t,n),e,"{"),h=(t,n,e)=>t.map((t=>t.split(d(n)).join(p(n,e)).split(d(n,"/")).join(p(n,e,"/")))),f=(t,n,e)=>e?((t,n,e)=>{const o=e.constructor,{tagName:r}=o,a=n[r];if(!window.customElements.get(r)&&o.versions)throw Error(`'versions' is a reserved class property, but was found in ${r}'s class`);o.versions=a,t.forEach((t=>{const{tagName:n}=t,e=a[n],o=b(n,e);u(o,class extends t{})}))})(t,n,e):"string"==typeof n?((t,n)=>{let e;return t.forEach((t=>{const{tagName:o}=t;e=b(o,n),u(e,class extends t{})})),e})(t,n):((t,n)=>{const{tagName:e}=t,o=n[e][e],r=b(e,o);u(e,t),u(r,class extends t{})})(t[0],n),g=n=>(e,...o)=>{const r=n.constructor,[a,i]=(t=>{const{versions:n,tagName:e}=t,o=Object.keys(n).filter((t=>t!==e)).sort(((t,n)=>n.length-t.length));return[o,o.map((t=>n[t]))]})(r);let s=e;for(let t=0,n=a.length;t<n;t++)s=h(s,a[t],i[t]);for(let t=0,n=s.length;t<n;t++)s[t]=s[t].split("{").join("<");return s.raw=s,t(s,...o)};class v extends n{static get tagName(){return"axa-button"}static get styles(){return e`
${o(':host {\n display: inline-block;\n appearance: none;\n}\n\n:host([block]) {\n display: block;\n}\n\n:host([block]) .a-button {\n display: block;\n width: 100%;\n}\n\n.a-button {\n font-size: 14px;\n letter-spacing: 0.02em;\n line-height: 17px;\n font-family: "Source Sans Pro", Arial, sans-serif;\n display: inline-block;\n vertical-align: middle;\n appearance: none;\n position: relative;\n box-sizing: border-box;\n padding: 0 30px;\n margin: 0;\n min-height: 40px;\n width: 100%;\n hyphens: auto;\n overflow-wrap: break-word;\n word-wrap: break-word;\n text-transform: uppercase;\n text-decoration: none;\n color: #fff;\n background-color: #00008f;\n border: solid 2px #00008f;\n border-bottom-color: #00005b;\n text-align: center;\n}\n.a-button:hover, .a-button:active, .a-button:focus {\n cursor: pointer;\n text-decoration: none;\n background-color: #00005b;\n border-color: #00005b;\n outline: 0;\n}\n.a-button:disabled, .a-button[aria-disabled=true] {\n color: #999;\n background-color: #e5e5e5;\n border-color: #e5e5e5;\n border-bottom-color: #ccc;\n pointer-events: none;\n}\n.a-button__flex-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 36px;\n}\n.a-button__icon {\n display: flex;\n margin-right: 10px;\n}\n.a-button__arrow {\n display: flex;\n margin-left: 10px;\n}\n.a-button--large {\n min-height: 50px;\n font-size: 16px;\n letter-spacing: 0.02em;\n line-height: 24px;\n font-family: "Source Sans Pro", Arial, sans-serif;\n}\n.a-button--large .a-button__flex-wrapper {\n min-height: 46px;\n}\n.a-button--small {\n min-height: 30px;\n font-size: 14px;\n letter-spacing: 0.02em;\n line-height: 17px;\n font-family: "Source Sans Pro", Arial, sans-serif;\n}\n.a-button--motion {\n z-index: 0;\n overflow: hidden;\n transition: color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;\n}\n.a-button--motion::after {\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n display: block;\n width: 0.001px;\n height: 100vw;\n content: "";\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n transition: width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;\n background-color: #00005b;\n}\n.a-button--motion:hover, .a-button--motion:focus {\n background-color: #00008f;\n color: #fff;\n}\n.a-button--motion:hover::after, .a-button--motion:focus::after {\n width: 110%;\n background-color: #00005b;\n}\n.a-button--red {\n background-color: #f07662;\n border-color: #f07662;\n border-bottom-color: #ec4d33;\n}\n.a-button--red:hover, .a-button--red:active, .a-button--red:focus {\n background-color: #ec4d33;\n border-color: #ec4d33;\n}\n.a-button--red.a-button--motion::after {\n background-color: #ec4d33;\n}\n.a-button--red.a-button--motion:hover, .a-button--red.a-button--motion:focus {\n background-color: #f07662;\n color: #fff;\n}\n.a-button--red.a-button--motion:hover::after, .a-button--red.a-button--motion:focus::after {\n background-color: #ec4d33;\n}\n.a-button--secondary {\n background-color: transparent;\n border-bottom-color: #00008f;\n color: #00008f;\n}\n.a-button--secondary:hover, .a-button--secondary:active, .a-button--secondary:focus {\n color: #fff;\n}\n.a-button--secondary.a-button--motion {\n background-color: transparent;\n}\n.a-button--inverted {\n background-color: transparent;\n border-color: #fff;\n color: #fff;\n}\n.a-button--inverted:hover, .a-button--inverted:active, .a-button--inverted:focus {\n background-color: #fff;\n border-color: #fff;\n color: #00005b;\n}\n.a-button--inverted.a-button--motion {\n background-color: transparent;\n}\n.a-button--inverted.a-button--motion::after {\n background-color: #fff;\n}\n.a-button--inverted-blue-ocean:hover, .a-button--inverted-blue-ocean:active, .a-button--inverted-blue-ocean:focus {\n color: #4976ba;\n}\n.a-button--inverted-red-tosca:hover, .a-button--inverted-red-tosca:active, .a-button--inverted-red-tosca:focus {\n color: #914146;\n}\n.a-button--inverted-purple-logan:hover, .a-button--inverted-purple-logan:active, .a-button--inverted-purple-logan:focus {\n color: #9190ac;\n}\n.a-button--inverted-green-viridian:hover, .a-button--inverted-green-viridian:active, .a-button--inverted-green-viridian:focus {\n color: #668980;\n}\n.a-button--inverted-blue-teal:hover, .a-button--inverted-blue-teal:active, .a-button--inverted-blue-teal:focus {\n color: #027180;\n}')}
`}static get properties(){return{type:{type:String,reflect:!0,defaultValue:"button"},variant:{type:String},icon:{type:String},size:{type:String},block:{type:Boolean,reflect:!0},motionOff:{type:Boolean},disabled:{type:Boolean,reflect:!0},href:{type:String},external:{type:Boolean},onClick:{type:Function,attribute:!1}}}constructor(){super(),l(this),f([a],{"axa-button":{"axa-button":"8.2.2","axa-icon":"8.0.9"}},this),this.handleClick=this.handleClick.bind(this)}get isTypeSubmitOrReset(){return"submit"===this.type||"reset"===this.type}get showIcon(){return this.icon&&"arrow-right"!==this.icon}get showArrow(){return"arrow-right"===this.icon}watch(t){switch(t){case"stop":this._observer&&this._observer.disconnect();break;case"start":this._observer||(this._observer=new MutationObserver((()=>this.attachFakeButton()))),this._observer.observe(this,{childList:!0})}}attachFakeButton(){const t=document.createElement("button");t.type=this.type,t.style.display="none",this.watch("stop"),this.appendChild(t),this.watch("start"),this.fakeButton=t}firstUpdated(){this.isTypeSubmitOrReset&&this.attachFakeButton(),"function"==typeof this.onclick&&(this.originalOnclick=this.onclick),this.onclick=t=>{this.handleClick(t,!0)}}handleClick(t,n=!1){t.isTrusted&&this.isTypeSubmitOrReset&&(t.stopPropagation(),this.fakeButton.click());const e=this.onClick||this.originalOnclick;n||"function"!=typeof e||e(t)}render(){const{type:n,motionOff:e,disabled:o,variant:a="",icon:i="",size:s="",href:c,external:l}=this,u={"a-button":!0,"a-button--large":"large"===s,"a-button--small":"small"===s,"a-button--motion":!e,"a-button--secondary":"secondary"===a,"a-button--red":"red"===a,"a-button--inverted":a.includes("inverted"),"a-button--inverted-blue-ocean":"inverted-blue-ocean"===a,"a-button--inverted-red-tosca":"inverted-red-tosca"===a,"a-button--inverted-purple-logan":"inverted-purple-logan"===a,"a-button--inverted-green-viridian":"inverted-green-viridian"===a,"a-button--inverted-blue-teal":"inverted-blue-teal"===a},b=()=>t`<span class="a-button__flex-wrapper">
`}static get properties(){return{type:{type:String,reflect:!0,defaultValue:"button"},variant:{type:String},icon:{type:String},size:{type:String},block:{type:Boolean,reflect:!0},motionOff:{type:Boolean},disabled:{type:Boolean,reflect:!0},href:{type:String},external:{type:Boolean},onClick:{type:Function,attribute:!1}}}constructor(){super(),l(this),f([a],{"axa-button":{"axa-button":"8.2.3","axa-icon":"8.0.9"}},this),this.handleClick=this.handleClick.bind(this)}get isTypeSubmitOrReset(){return"submit"===this.type||"reset"===this.type}get showIcon(){return this.icon&&"arrow-right"!==this.icon}get showArrow(){return"arrow-right"===this.icon}watch(t){switch(t){case"stop":this._observer&&this._observer.disconnect();break;case"start":this._observer||(this._observer=new MutationObserver((()=>this.attachFakeButton()))),this._observer.observe(this,{childList:!0})}}attachFakeButton(){const t=document.createElement("button");t.type=this.type,t.style.display="none",this.watch("stop"),this.appendChild(t),this.watch("start"),this.fakeButton=t}firstUpdated(){this.isTypeSubmitOrReset&&this.attachFakeButton(),"function"==typeof this.onclick&&(this.originalOnclick=this.onclick),this.onclick=t=>{this.handleClick(t,!0)}}handleClick(t,n=!1){t.isTrusted&&this.isTypeSubmitOrReset&&(t.stopPropagation(),this.fakeButton.click());const e=this.onClick||this.originalOnclick;n||"function"!=typeof e||e(t)}render(){const{type:n,motionOff:e,disabled:o,variant:a="",icon:i="",size:s="",href:c,external:l}=this,u={"a-button":!0,"a-button--large":"large"===s,"a-button--small":"small"===s,"a-button--motion":!e,"a-button--secondary":"secondary"===a,"a-button--red":"red"===a,"a-button--inverted":a.includes("inverted"),"a-button--inverted-blue-ocean":"inverted-blue-ocean"===a,"a-button--inverted-red-tosca":"inverted-red-tosca"===a,"a-button--inverted-purple-logan":"inverted-purple-logan"===a,"a-button--inverted-green-viridian":"inverted-green-viridian"===a,"a-button--inverted-blue-teal":"inverted-blue-teal"===a},b=()=>t`<span class="a-button__flex-wrapper">
${this.showIcon?g(this)`<axa-icon class="a-button__icon" icon="${i}"></axa-icon> `:""}

@@ -24,2 +24,2 @@ <slot></slot>

</button>
`}disconnectedCallback(){super.disconnectedCallback(),this.watch("stop")}}f([v],{"axa-button":{"axa-button":"8.2.2","axa-icon":"8.0.9"}});export{v as default};
`}disconnectedCallback(){super.disconnectedCallback(),this.watch("stop")}}f([v],{"axa-button":{"axa-button":"8.2.3","axa-icon":"8.0.9"}});export{v as default};

10

lib/index.react.js

@@ -1,7 +0,7 @@

import{html as t,LitElement as n,css as e,unsafeCSS as o}from"lit";import{classMap as r}from"lit/directives/class-map.js";import a from"@axa-ch/icon";const{customElements:i}=window,s=new Map,c=new WeakMap;if(i){const{define:t}=i;i.define=(n,e)=>(s.set(e,n),t.call(i,n,e))}const l=({attrs:t,events:n,props:e,ref:o})=>r=>{r&&(((t,n)=>{n&&Object.keys(n).forEach((e=>{const o=n[e];null==o?t.removeAttribute(e):t.setAttribute(e,o)}))})(r,t),((t,n={})=>{const e=c.get(t)||{};c.set(t,n),Object.keys(e).forEach((o=>{e[o]&&e[o]!==n[o]&&t.removeEventListener(o,e[o])})),Object.keys(n).forEach((o=>{n[o]!==e[o]&&t.addEventListener(o,n[o])}))})(r,n),((t,n)=>{Object.keys(n||{}).forEach((e=>{t[e]=n[e]}))})(r,e)),((t,n)=>{n&&n(t)})(r,o)},u=t=>(n,e,...o)=>{const r=(t=>s.get(t)||t)(n),a=(t=>{const{attrs:n,events:e,ref:o,key:r,dangerouslySetInnerHTML:a,...i}=t||{};return{ref:l({attrs:n,events:e,props:i,ref:o}),key:r,dangerouslySetInnerHTML:a}})(e);return t(r,a,...o)};var b=(t,n)=>{const e=t.toLowerCase();return window.customElements.get(e)||window.customElements.define(e,n),e};const d=(t,n)=>{return`${t}-${e=n,`${e}`.replace(/\./g,"-").replace(/[^A-Za-z0-9-]/g,"")}`;var e},p=(t,n="",e="<")=>`${e}${n}${t}`,f=(t,n,e)=>p(d(t,n),e,"{"),h=(t,n,e)=>t.map((t=>t.split(p(n)).join(f(n,e)).split(p(n,"/")).join(f(n,e,"/")))),v=(t,n,e)=>{const o="string"==typeof n&&n;let r="";return t.forEach((t=>{const a=t instanceof HTMLElement?t.constructor:t,{tagName:i}=a,s=!o&&n[i];if(s){if(!window.customElements.get(i)&&a.versions)throw Error(`'versions' is a reserved class property, but was found in ${i}'s class`);a.versions=s,b(i,a)}let{versions:c}=a;!c&&e&&(c=n[e.constructor.tagName],c[i]=Object.values(c)[0]);const l=o||c[i];r=d(i,l),b(r,class extends a{})})),r},g=n=>(e,...o)=>{const r=n.constructor,[a,i]=(t=>{const{versions:n,tagName:e}=t,o=Object.keys(n).filter((t=>t!==e)).sort(((t,n)=>n.length-t.length));return[o,o.map((t=>n[t]))]})(r);let s=e;for(let t=0,n=a.length;t<n;t++)s=h(s,a[t],i[t]);for(let t=0,n=s.length;t<n;t++)s[t]=s[t].split("{").join("<");return s.raw=s,t(s,...o)},m=(t,n)=>{const e={},o={};let r;return Object.keys(t).forEach((a=>{const i=t[a];let s;const c=n.properties[a]||{},{type:l}=c;switch(s=0===a.indexOf("on")&&a.charAt(2)===a.charAt(2).toUpperCase()?Function:"className"===a?"className":l,s){case"className":case Array:case Object:case Function:case Boolean:r=o;break;default:r=l?o:e}void 0!==i&&(r[a]="style"===a?(t=>Object.keys(t).reduce(((n,e)=>{let o=n;return`${o+=e.split(/(?=[A-Z])/).join("-").toLowerCase()}:${t[e]};`}),""))(i):i)})),{attrs:e,props:o}};const y=t=>!(null==t),k=new Map;[[String,""],[Boolean,!1],[Object,{}],[Array,[]],[Number,0],[Function,()=>{}]].forEach((([t,n])=>{k.set(t,n)}));const w=()=>{},x=t=>{const{constructor:{properties:n}}=t;Object.keys(n).forEach((e=>{const o=n[e],{type:r,converter:a,defaultValue:i}=o;if(!r){if(!a)throw new Error(`<${t.nodeName}> property "${e}" is missing a type!`);return}let s=t[e];y(s)||(s=r===Boolean?t.hasAttribute(e):t.getAttribute(e),y(s)?t[e]=((t,n)=>n===Number?parseFloat(t):n===Function?w:n===Array||n===Object?JSON.parse(t):t)(s,r):void 0===i&&"defaultValue"in o||(t[e]="defaultValue"in o?i:k.get(r)))}))};class $ extends n{static get tagName(){return"axa-button"}static get styles(){return e`
import{html as t,LitElement as n,css as e,unsafeCSS as o}from"lit";import{classMap as r}from"lit/directives/class-map.js";import a from"@axa-ch/icon";const{customElements:i}=window,s=new Map,c=new WeakMap;if(i){const{define:t}=i;i.define=(n,e)=>(s.set(e,n),t.call(i,n,e))}const l=({attrs:t,events:n,props:e,ref:o})=>r=>{r&&(((t,n)=>{n&&Object.keys(n).forEach((e=>{const o=n[e];null==o?t.removeAttribute(e):t.setAttribute(e,o)}))})(r,t),((t,n={})=>{const e=c.get(t)||{};c.set(t,n),Object.keys(e).forEach((o=>{e[o]&&e[o]!==n[o]&&t.removeEventListener(o,e[o])})),Object.keys(n).forEach((o=>{n[o]!==e[o]&&t.addEventListener(o,n[o])}))})(r,n),((t,n)=>{Object.keys(n||{}).forEach((e=>{t[e]=n[e]}))})(r,e)),((t,n)=>{n&&n(t)})(r,o)},u=t=>(n,e,...o)=>{const r=(t=>s.get(t)||t)(n),a=(t=>{const{attrs:n,events:e,ref:o,key:r,dangerouslySetInnerHTML:a,...i}=t||{};return{ref:l({attrs:n,events:e,props:i,ref:o}),key:r,dangerouslySetInnerHTML:a}})(e);return t(r,a,...o)};var b=(t,n)=>{const e=t.toLowerCase();return window.customElements.get(e)||window.customElements.define(e,n),e};const d=(t,n)=>{return`${t}-${e=n,`${e}`.replace(/\./g,"-").replace(/[^A-Za-z0-9-]/g,"")}`;var e},p=(t,n="",e="<")=>`${e}${n}${t}`,f=(t,n,e)=>p(d(t,n),e,"{"),h=(t,n,e)=>t.map((t=>t.split(p(n)).join(f(n,e)).split(p(n,"/")).join(f(n,e,"/")))),g=(t,n,e)=>e?((t,n,e)=>{const o=e.constructor,{tagName:r}=o,a=n[r];if(!window.customElements.get(r)&&o.versions)throw Error(`'versions' is a reserved class property, but was found in ${r}'s class`);o.versions=a,t.forEach((t=>{const{tagName:n}=t,e=a[n],o=d(n,e);b(o,class extends t{})}))})(t,n,e):"string"==typeof n?((t,n)=>{let e;return t.forEach((t=>{const{tagName:o}=t;e=d(o,n),b(e,class extends t{})})),e})(t,n):((t,n)=>{const{tagName:e}=t,o=n[e][e],r=d(e,o);b(e,t),b(r,class extends t{})})(t[0],n),v=n=>(e,...o)=>{const r=n.constructor,[a,i]=(t=>{const{versions:n,tagName:e}=t,o=Object.keys(n).filter((t=>t!==e)).sort(((t,n)=>n.length-t.length));return[o,o.map((t=>n[t]))]})(r);let s=e;for(let t=0,n=a.length;t<n;t++)s=h(s,a[t],i[t]);for(let t=0,n=s.length;t<n;t++)s[t]=s[t].split("{").join("<");return s.raw=s,t(s,...o)},m=(t,n)=>{const e={},o={};let r;return Object.keys(t).forEach((a=>{const i=t[a];let s;const c=n.properties[a]||{},{type:l}=c;switch(s=0===a.indexOf("on")&&a.charAt(2)===a.charAt(2).toUpperCase()?Function:"className"===a?"className":l,s){case"className":case Array:case Object:case Function:case Boolean:r=o;break;default:r=l?o:e}void 0!==i&&(r[a]="style"===a?(t=>Object.keys(t).reduce(((n,e)=>{let o=n;return`${o+=e.split(/(?=[A-Z])/).join("-").toLowerCase()}:${t[e]};`}),""))(i):i)})),{attrs:e,props:o}};const y=t=>!(null==t),k=new Map;[[String,""],[Boolean,!1],[Object,{}],[Array,[]],[Number,0],[Function,()=>{}]].forEach((([t,n])=>{k.set(t,n)}));const w=()=>{},x=t=>{const{constructor:{properties:n}}=t;Object.keys(n).forEach((e=>{const o=n[e],{type:r,converter:a,defaultValue:i}=o;if(!r){if(!a)throw new Error(`<${t.nodeName}> property "${e}" is missing a type!`);return}let s=t[e];y(s)||(s=r===Boolean?t.hasAttribute(e):t.getAttribute(e),y(s)?t[e]=((t,n)=>n===Number?parseFloat(t):n===Function?w:n===Array||n===Object?JSON.parse(t):t)(s,r):void 0===i&&"defaultValue"in o||(t[e]="defaultValue"in o?i:k.get(r)))}))};class $ extends n{static get tagName(){return"axa-button"}static get styles(){return e`
${o(':host {\n display: inline-block;\n appearance: none;\n}\n\n:host([block]) {\n display: block;\n}\n\n:host([block]) .a-button {\n display: block;\n width: 100%;\n}\n\n.a-button {\n font-size: 14px;\n letter-spacing: 0.02em;\n line-height: 17px;\n font-family: "Source Sans Pro", Arial, sans-serif;\n display: inline-block;\n vertical-align: middle;\n appearance: none;\n position: relative;\n box-sizing: border-box;\n padding: 0 30px;\n margin: 0;\n min-height: 40px;\n width: 100%;\n hyphens: auto;\n overflow-wrap: break-word;\n word-wrap: break-word;\n text-transform: uppercase;\n text-decoration: none;\n color: #fff;\n background-color: #00008f;\n border: solid 2px #00008f;\n border-bottom-color: #00005b;\n text-align: center;\n}\n.a-button:hover, .a-button:active, .a-button:focus {\n cursor: pointer;\n text-decoration: none;\n background-color: #00005b;\n border-color: #00005b;\n outline: 0;\n}\n.a-button:disabled, .a-button[aria-disabled=true] {\n color: #999;\n background-color: #e5e5e5;\n border-color: #e5e5e5;\n border-bottom-color: #ccc;\n pointer-events: none;\n}\n.a-button__flex-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 36px;\n}\n.a-button__icon {\n display: flex;\n margin-right: 10px;\n}\n.a-button__arrow {\n display: flex;\n margin-left: 10px;\n}\n.a-button--large {\n min-height: 50px;\n font-size: 16px;\n letter-spacing: 0.02em;\n line-height: 24px;\n font-family: "Source Sans Pro", Arial, sans-serif;\n}\n.a-button--large .a-button__flex-wrapper {\n min-height: 46px;\n}\n.a-button--small {\n min-height: 30px;\n font-size: 14px;\n letter-spacing: 0.02em;\n line-height: 17px;\n font-family: "Source Sans Pro", Arial, sans-serif;\n}\n.a-button--motion {\n z-index: 0;\n overflow: hidden;\n transition: color 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;\n}\n.a-button--motion::after {\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: -1;\n display: block;\n width: 0.001px;\n height: 100vw;\n content: "";\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n transition: width 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;\n background-color: #00005b;\n}\n.a-button--motion:hover, .a-button--motion:focus {\n background-color: #00008f;\n color: #fff;\n}\n.a-button--motion:hover::after, .a-button--motion:focus::after {\n width: 110%;\n background-color: #00005b;\n}\n.a-button--red {\n background-color: #f07662;\n border-color: #f07662;\n border-bottom-color: #ec4d33;\n}\n.a-button--red:hover, .a-button--red:active, .a-button--red:focus {\n background-color: #ec4d33;\n border-color: #ec4d33;\n}\n.a-button--red.a-button--motion::after {\n background-color: #ec4d33;\n}\n.a-button--red.a-button--motion:hover, .a-button--red.a-button--motion:focus {\n background-color: #f07662;\n color: #fff;\n}\n.a-button--red.a-button--motion:hover::after, .a-button--red.a-button--motion:focus::after {\n background-color: #ec4d33;\n}\n.a-button--secondary {\n background-color: transparent;\n border-bottom-color: #00008f;\n color: #00008f;\n}\n.a-button--secondary:hover, .a-button--secondary:active, .a-button--secondary:focus {\n color: #fff;\n}\n.a-button--secondary.a-button--motion {\n background-color: transparent;\n}\n.a-button--inverted {\n background-color: transparent;\n border-color: #fff;\n color: #fff;\n}\n.a-button--inverted:hover, .a-button--inverted:active, .a-button--inverted:focus {\n background-color: #fff;\n border-color: #fff;\n color: #00005b;\n}\n.a-button--inverted.a-button--motion {\n background-color: transparent;\n}\n.a-button--inverted.a-button--motion::after {\n background-color: #fff;\n}\n.a-button--inverted-blue-ocean:hover, .a-button--inverted-blue-ocean:active, .a-button--inverted-blue-ocean:focus {\n color: #4976ba;\n}\n.a-button--inverted-red-tosca:hover, .a-button--inverted-red-tosca:active, .a-button--inverted-red-tosca:focus {\n color: #914146;\n}\n.a-button--inverted-purple-logan:hover, .a-button--inverted-purple-logan:active, .a-button--inverted-purple-logan:focus {\n color: #9190ac;\n}\n.a-button--inverted-green-viridian:hover, .a-button--inverted-green-viridian:active, .a-button--inverted-green-viridian:focus {\n color: #668980;\n}\n.a-button--inverted-blue-teal:hover, .a-button--inverted-blue-teal:active, .a-button--inverted-blue-teal:focus {\n color: #027180;\n}')}
`}static get properties(){return{type:{type:String,reflect:!0,defaultValue:"button"},variant:{type:String},icon:{type:String},size:{type:String},block:{type:Boolean,reflect:!0},motionOff:{type:Boolean},disabled:{type:Boolean,reflect:!0},href:{type:String},external:{type:Boolean},onClick:{type:Function,attribute:!1}}}constructor(){super(),x(this),v([a],{"axa-button":{"axa-button":"8.2.2","axa-icon":"8.0.9"}},this),this.handleClick=this.handleClick.bind(this)}get isTypeSubmitOrReset(){return"submit"===this.type||"reset"===this.type}get showIcon(){return this.icon&&"arrow-right"!==this.icon}get showArrow(){return"arrow-right"===this.icon}watch(t){switch(t){case"stop":this._observer&&this._observer.disconnect();break;case"start":this._observer||(this._observer=new MutationObserver((()=>this.attachFakeButton()))),this._observer.observe(this,{childList:!0})}}attachFakeButton(){const t=document.createElement("button");t.type=this.type,t.style.display="none",this.watch("stop"),this.appendChild(t),this.watch("start"),this.fakeButton=t}firstUpdated(){this.isTypeSubmitOrReset&&this.attachFakeButton(),"function"==typeof this.onclick&&(this.originalOnclick=this.onclick),this.onclick=t=>{this.handleClick(t,!0)}}handleClick(t,n=!1){t.isTrusted&&this.isTypeSubmitOrReset&&(t.stopPropagation(),this.fakeButton.click());const e=this.onClick||this.originalOnclick;n||"function"!=typeof e||e(t)}render(){const{type:n,motionOff:e,disabled:o,variant:a="",icon:i="",size:s="",href:c,external:l}=this,u={"a-button":!0,"a-button--large":"large"===s,"a-button--small":"small"===s,"a-button--motion":!e,"a-button--secondary":"secondary"===a,"a-button--red":"red"===a,"a-button--inverted":a.includes("inverted"),"a-button--inverted-blue-ocean":"inverted-blue-ocean"===a,"a-button--inverted-red-tosca":"inverted-red-tosca"===a,"a-button--inverted-purple-logan":"inverted-purple-logan"===a,"a-button--inverted-green-viridian":"inverted-green-viridian"===a,"a-button--inverted-blue-teal":"inverted-blue-teal"===a},b=()=>t`<span class="a-button__flex-wrapper">
${this.showIcon?g(this)`<axa-icon class="a-button__icon" icon="${i}"></axa-icon> `:""}
`}static get properties(){return{type:{type:String,reflect:!0,defaultValue:"button"},variant:{type:String},icon:{type:String},size:{type:String},block:{type:Boolean,reflect:!0},motionOff:{type:Boolean},disabled:{type:Boolean,reflect:!0},href:{type:String},external:{type:Boolean},onClick:{type:Function,attribute:!1}}}constructor(){super(),x(this),g([a],{"axa-button":{"axa-button":"8.2.3","axa-icon":"8.0.9"}},this),this.handleClick=this.handleClick.bind(this)}get isTypeSubmitOrReset(){return"submit"===this.type||"reset"===this.type}get showIcon(){return this.icon&&"arrow-right"!==this.icon}get showArrow(){return"arrow-right"===this.icon}watch(t){switch(t){case"stop":this._observer&&this._observer.disconnect();break;case"start":this._observer||(this._observer=new MutationObserver((()=>this.attachFakeButton()))),this._observer.observe(this,{childList:!0})}}attachFakeButton(){const t=document.createElement("button");t.type=this.type,t.style.display="none",this.watch("stop"),this.appendChild(t),this.watch("start"),this.fakeButton=t}firstUpdated(){this.isTypeSubmitOrReset&&this.attachFakeButton(),"function"==typeof this.onclick&&(this.originalOnclick=this.onclick),this.onclick=t=>{this.handleClick(t,!0)}}handleClick(t,n=!1){t.isTrusted&&this.isTypeSubmitOrReset&&(t.stopPropagation(),this.fakeButton.click());const e=this.onClick||this.originalOnclick;n||"function"!=typeof e||e(t)}render(){const{type:n,motionOff:e,disabled:o,variant:a="",icon:i="",size:s="",href:c,external:l}=this,u={"a-button":!0,"a-button--large":"large"===s,"a-button--small":"small"===s,"a-button--motion":!e,"a-button--secondary":"secondary"===a,"a-button--red":"red"===a,"a-button--inverted":a.includes("inverted"),"a-button--inverted-blue-ocean":"inverted-blue-ocean"===a,"a-button--inverted-red-tosca":"inverted-red-tosca"===a,"a-button--inverted-purple-logan":"inverted-purple-logan"===a,"a-button--inverted-green-viridian":"inverted-green-viridian"===a,"a-button--inverted-blue-teal":"inverted-blue-teal"===a},b=()=>t`<span class="a-button__flex-wrapper">
${this.showIcon?v(this)`<axa-icon class="a-button__icon" icon="${i}"></axa-icon> `:""}
<slot></slot>
${this.showArrow?g(this)`<axa-icon class="a-button__arrow" icon="arrow-right"></axa-icon>`:t``}
${this.showArrow?v(this)`<axa-icon class="a-button__arrow" icon="arrow-right"></axa-icon>`:t``}
</span>`;return this.href?t`<a

@@ -24,2 +24,2 @@ class="${r(u)}"

</button>
`}disconnectedCallback(){super.disconnectedCallback(),this.watch("stop")}}v([$],{"axa-button":{"axa-button":"8.2.2","axa-icon":"8.0.9"}});var O=(t,n)=>((t,n,e)=>{const{tagName:o}=n,r=e?v([n],e):o,a=r.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join(""),i=({children:e,...o})=>{const{attrs:a,props:i}=m(o,n);return u(t)(r,{isReact:!0,attrs:a,...i},e)};return i.displayName=a,i})(t,$,n);export{O as default};
`}disconnectedCallback(){super.disconnectedCallback(),this.watch("stop")}}g([$],{"axa-button":{"axa-button":"8.2.3","axa-icon":"8.0.9"}});var O=(t,n)=>((t,n,e)=>{const{tagName:o}=n,r=e?g([n],e):o,a=r.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join(""),i=({children:e,...o})=>{const{attrs:a,props:i}=m(o,n);return u(t)(r,{isReact:!0,attrs:a,...i},e)};return i.displayName=a,i})(t,$,n);export{O as default};

8

package.json
{
"name": "@axa-ch/button",
"version": "8.2.3",
"version": "8.2.4",
"description": "The button component for the AXA Pattern Library",

@@ -34,7 +34,7 @@ "author": "Pattern Warriors",

"dependencies": {
"@axa-ch/icon": "8.0.9",
"@axa-ch/icon": "8.0.10",
"lit": "^2.2.1"
},
"gitHead": "db46ed7e5880f68eebf42f9e6d4de8c1c34af3fc",
"gitHead": "db21f21d628c6fc8bf354e0646e26c73198e7163",
"main": "lib/index.js"
}
}
dist/index.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc