@anjuna/docs
Version:
Anjuna Documentation Web Components
70 lines (67 loc) • 5.34 kB
JavaScript
import { h } from '../anjuna-docs.core.js';
class Button {
constructor() {
this.context = 'primary';
this.size = 'default';
this.type = 'button';
}
btnClasses() {
return ['ad-button', `ad-button-${this.context}`, `ad-button-${this.size}`].join(' ');
}
onBlur() {
this.adBlur.emit();
}
onFocus() {
this.adFocus.emit();
}
render() {
if (this.href) {
return (h("a", { href: this.href, class: this.btnClasses(), onFocus: () => this.onFocus(), onBlur: () => this.onBlur() },
h("slot", null)));
}
else {
return (h("button", { type: this.type, class: this.btnClasses(), onFocus: () => this.onFocus(), onBlur: () => this.onBlur() },
h("slot", null)));
}
}
static get is() { return "ad-button"; }
static get properties() { return {
"context": {
"type": String,
"attr": "context"
},
"disabled": {
"type": Boolean,
"attr": "disabled",
"reflectToAttr": true
},
"href": {
"type": String,
"attr": "href"
},
"size": {
"type": String,
"attr": "size",
"reflectToAttr": true
},
"type": {
"type": String,
"attr": "type"
}
}; }
static get events() { return [{
"name": "adBlur",
"method": "adBlur",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "adFocus",
"method": "adFocus",
"bubbles": true,
"cancelable": true,
"composed": true
}]; }
static get style() { return ".ad-button{display:inline-block;font-weight:400;color:var(--anj-dark);text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem .75rem;font-size:.875rem;line-height:1.5;border-radius:.25rem;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out}\@media (prefers-reduced-motion:reduce){.ad-button{-webkit-transition:none;transition:none}}.ad-button:hover{color:var(--anj-dark);text-decoration:none}.ad-button.focus,.ad-button:focus{outline:0;-webkit-box-shadow:0 0 0 .2rem rgba(56,75,93,.25);box-shadow:0 0 0 .2rem rgba(56,75,93,.25)}.ad-button.disabled,.ad-button:disabled{opacity:.65}.ad-button-link{font-weight:400;color:var(--anj-secondary);text-decoration:none}.ad-button-link:hover{color:var(--anj-secondary);text-decoration:underline}.ad-button-link.focus,.ad-button-link:focus{text-decoration:underline;-webkit-box-shadow:none;box-shadow:none}.ad-button-link.disabled,.ad-button-link:disabled{color:#6c757d;pointer-events:none}.ad-button-large{padding:.5rem 1rem;font-size:1.09375rem;line-height:1.5;border-radius:.3rem}.ad-button-small{padding:.25rem .5rem;font-size:.75rem;line-height:1.5;border-radius:.2rem}ad-button{display:inline-block}ad-button[type]{-webkit-appearance:none}ad-button .ad-button:not(.ad-button-link),ad-button .ad-button:not(.ad-button-link):hover,ad-button a.ad-button:not(.ad-button-link),ad-button a.ad-button:not(.ad-button-link):hover{color:var(--anj-light)}ad-button .ad-button-link:focus,ad-button .ad-button-link:hover{text-decoration:none}ad-button .ad-button-link:focus{color:var(--anj-secondary-dark);opacity:.8}ad-button .ad-button-primary{background-color:var(--anj-secondary);color:var(--anj-light)}ad-button .ad-button-primary:hover{background-color:#02549f}ad-button .ad-button-primary:focus{-webkit-box-shadow:0 0 0 .2rem rgba(3,110,209,.5);box-shadow:0 0 0 .2rem rgba(3,110,209,.5)}ad-button .ad-button-neutral{background-color:var(--anj-neutral);color:var(--anj-light)}ad-button .ad-button-neutral:hover{background-color:#57626d}ad-button .ad-button-neutral:focus{-webkit-box-shadow:0 0 0 .2rem rgba(110,124,137,.5);box-shadow:0 0 0 .2rem rgba(110,124,137,.5)}ad-button .ad-button-danger{background-color:var(--anj-danger);color:var(--anj-light)}ad-button .ad-button-danger:hover{background-color:#b22c29}ad-button .ad-button-danger:focus{-webkit-box-shadow:0 0 0 .2rem rgba(210,63,60,.5);box-shadow:0 0 0 .2rem rgba(210,63,60,.5)}ad-button .ad-button-success{background-color:var(--anj-success);color:var(--anj-light)}ad-button .ad-button-success:hover{background-color:#26904f}ad-button .ad-button-success:focus{-webkit-box-shadow:0 0 0 .2rem rgba(49,184,101,.5);box-shadow:0 0 0 .2rem rgba(49,184,101,.5)}ad-button[disabled]{-webkit-box-shadow:none;box-shadow:none;cursor:default;pointer-events:none;opacity:.65}"; }
}
export { Button as AdButton };