@assecosolutions/fox-button
Advanced tools
Comparing version 2.0.3 to 2.0.4
@@ -1,2 +0,2 @@ | ||
import { css, LitElement, html as html$2 } from 'lit'; | ||
import { css, LitElement, html as html$2, nothing } from 'lit'; | ||
import { property } from 'lit/decorators.js'; | ||
@@ -1584,3 +1584,3 @@ import { classMap } from 'lit/directives/class-map.js'; | ||
_t$1; | ||
const styles = css(_t$1 || (_t$1 = _$1`:host{display:inline-flex;outline:none;white-space:nowrap;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top;box-sizing:border-box;font-family:var(--fox-font-family),Roboto,sans-serif}:host{--fox-button-font-weight: var(--fox-font-weight-medium);--fox-button-font-size: var(--fox-font-size-base);--fox-button-text-color: var(--fox-font-dark-color);--fox-button-primary-color: var(--fox-neutral-300-color);--fox-button-text-on-primary-color: var(--fox-font-dark-color)}:host([primary]){--fox-button-primary-color-fallback: var(--fox-primary-base-color);--fox-button-primary-color: var(--fox-primary-base-color);--fox-button-text-color: var(--fox-primary-base-color);--fox-button-text-on-primary-color: var(--fox-neutral-white-color)}:host([danger]){--fox-button-primary-color: var(--fox-secondary-base-color);--fox-button-text-color: var(--fox-secondary-base-color);--fox-button-text-on-primary-color: var(--fox-neutral-white-color)}:host([small]){--fox-button-font-size: 12px;--fox-button-height: 26px;--fox-button-horizontal-spacing: 8px}:host([fullwidth]){width:100%}:host([justifystart]) .fox-button{justify-content:flex-start}:host([disabled]){pointer-events:none}.fox-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:var(--fox-button-font-size);font-weight:var(--fox-button-font-weight);text-decoration:none;color:var(--fox-button-text-color);background:none;border-radius:var(--fox-button-border-radius, 4px);height:var(--fox-button-height, 32px);padding:0 var(--fox-button-horizontal-spacing, 16px);flex:auto;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;outline:none;line-height:inherit;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle;--fox-button-outline-width: 0px}.fox-button__outlined{--fox-button-background-alpha: 0;--fox-button-outline-width: 2px}.fox-button__raised{--fox-button-background-alpha: 1;--fox-button-text-color: var(--fox-button-text-on-primary-color);--fox-button-progress-z-index: 1}.fox-button__icon-button{padding:0 var(--fox-button-horizontal-spacing, 7px)}.fox-button__label,.fox-button .leading-icon,.fox-button .trailing-icon{opacity:var(--fox-button-color-alpha, 1);z-index:2}.fox-button:focus{--fox-button-background-alpha: 0.1}.fox-button:focus.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:hover{cursor:pointer}.fox-button:hover:not(.fox-button:hover.fox-button__raised){--fox-button-background-color: var(--fox-neutrall-600-color);--fox-button-background-alpha: 0.1}.fox-button:hover.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:active{--fox-button-background-alpha: 0.2;outline:none}.fox-button:active.fox-button__raised{transition:none;--fox-button-background-alpha: 0.9;box-shadow:0 3px 6px rgba(15,19,16,.1607843137)}.fox-button:disabled{--fox-button-background-alpha: 0;--fox-button-color-alpha: 0.3;cursor:default;pointer-events:none}.fox-button:disabled.fox-button__raised{--fox-button-color-alpha: 0.3;--fox-button-background-alpha: 0.3}.fox-button__progress{width:100%;height:3px;position:absolute;bottom:0;left:0;overflow:hidden;border-radius:0px 0px 20px 20px;z-index:var(--fox-button-progress-z-index, 1);--mdc-linear-progress-buffer-color: rgba(255, 255, 255, 0.6);--mdc-theme-primary: var(--fox-button-primary-color)}.fox-button::after{transition:var(--fox-base-transition-all);content:"";position:absolute;inset:0;border-radius:inherit;background:var(--fox-button-background-color, var(--fox-button-primary-color));opacity:var(--fox-button-background-alpha, 0)}.fox-button::before{content:"";position:absolute;inset:0;border-radius:inherit;border:var(--fox-button-outline-width) solid var(--fox-button-primary-color);opacity:var(--fox-button-color-alpha, 1);z-index:2}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon,.leading-icon ::slotted(*),.leading-icon .fox-button__icon{margin-left:0;margin-right:5px;display:block;width:18px;height:18px;font-size:18px;vertical-align:top}.fox-button__icon-button .trailing-icon ::slotted(*),.fox-button__icon-button .trailing-icon .fox-button__icon,.fox-button__icon-button .leading-icon ::slotted(*),.fox-button__icon-button .leading-icon .fox-button__icon{margin:0}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon{margin-left:5px;margin-right:0}.slot-container{display:inline-flex;align-items:center;justify-content:center}`)); | ||
const styles = css(_t$1 || (_t$1 = _$1`:host{display:inline-flex;outline:none;white-space:nowrap;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top;box-sizing:border-box;font-family:var(--fox-font-family),Roboto,sans-serif}.fox-button{background:var(--fox-button-background-color, none);height:var(--fox-button-height, 32px);padding:var(--fox-button-padding, 0 var(--fox-space-3));margin:0;cursor:pointer;outline:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;font-family:var(--fox-font-family),Roboto,sans-serif;font-size:var(--fox-button-font-size, var(--fox-font-size-base));line-height:var(--fox-button-font-size, var(--fox-font-size-m));font-weight:var(--fox-button-font-weight, var(--fox-font-weight-medium));color:var(--fox-button-text-color, var(--fox-base-font-color));border:1px solid var(--fox-button-border-color, transparent);display:flex;align-items:center;border-radius:var(--fox-border-radius-l)}.fox-button__filled{--fox-button-background-color: var(--fox-neutral-100-color);--fox-button-focus-background-color: var(--fox-neutral-100-color);--fox-button-hover-background-color: var(--fox-neutral-200-color);--fox-button-active-background-color: var(--fox-neutral-200-color);--fox-button-disabled-background-color: var(--fox-neutral-200-color);--fox-button-disabled-text-color: var(--fox-neutral-white-color)}.fox-button__outlined{--fox-button-border-color: var(--fox-neutral-700-color);--fox-button-disabled-text-color: var(--fox-neutral-200-color)}.fox-button__elevated{box-shadow:var(--fox-elevation-2)}.fox-button__small{height:var(--fox-button-small-height, var(--fox-button-height, 24px))}.fox-button__primary{--fox-button-text-color: var(--fox-primary-base-color);--fox-button-icon-color: var(--fox-primary-base-color);--fox-button-focus-border-color: var(--fox-primary-base-color)}.fox-button__primary.fox-button__outlined{--fox-button-border-color: var(--fox-primary-base-color);--fox-button-focus-background-color: var(--fox-primary-light-color)}.fox-button__primary.fox-button__filled{--fox-button-background-color: var(--fox-primary-base-color);--fox-button-hover-background-color: var(--fox-primary-400-color);--fox-button-focus-background-color: var(--fox-primary-light-color);--fox-button-focus-border-color: var(--fox-primary-base-color);--fox-button-active-background-color: var(--fox-primary-base-color);--fox-button-text-color: var(--fox-neutral-white-color);--fox-button-icon-color: var(--fox-neutral-white-color)}.fox-button__primary.fox-button__filled:focus{color:var(--fox-primary-base-color);border-color:var(--fox-primary-base-color);--fox-button-icon-color: var(--fox-primary-base-color)}.fox-button__primary.fox-button__filled:active{color:var(--fox-neutral-white-color);--fox-button-icon-color: var(--fox-neutral-white-color)}.fox-button__primary.fox-button__disabled{--fox-button-border-color: transparent}.fox-button:hover{background:var(--fox-button-hover-background-color, var(--fox-neutral-white-color))}.fox-button:focus{background:var(--fox-button-focus-background-color, var(--fox-neutral-white-color));border-color:--fox-button-focus-border-color,var(--fox-neutral-700-color)}.fox-button:active{background:var(--fox-button-active-background-color, transparent)}.fox-button:disabled{background:var(--fox-button-disabled-background-color, transparent);color:var(--fox-button-disabled-text-color, var(--fox-neutral-200-color));box-shadow:none;--fox-button-icon-color: var( --fox-button-disabled-text-color, var(--fox-neutral-200-color) )}.fox-button fox-icon{color:var(--fox-button-icon-color, var(--fox-neutral-700-color))}.fox-button__icon{padding:var(--fox-button-padding, 0 var(--fox-space-3) 0 var(--fox-space-2))}.fox-button__icon fox-icon{margin-right:var(--fox-space-1)}.fox-button__trailing-icon{flex-direction:row-reverse;padding:var(--fox-button-padding, 0 var(--fox-space-2) 0 var(--fox-space-3))}.fox-button__trailing-icon fox-icon{margin-left:var(--fox-space-1)}`)); | ||
@@ -1610,16 +1610,21 @@ let _ = t => t, | ||
this.primary = false; | ||
this.raised = false; | ||
this.filled = false; | ||
this.outlined = false; | ||
this.disabled = false; | ||
this.trailingIcon = false; | ||
this.fullwidth = false; | ||
this.justifyStart = false; | ||
this.elevated = false; | ||
this.icon = ''; | ||
this.label = ''; | ||
this.progress = false; | ||
//TODO: refactor that to show progress bar in percentage | ||
this.progress = ''; | ||
} | ||
render() { | ||
const classes = { | ||
// eslint-disable-next-line @typescript-eslint/naming-convention | ||
'fox-button__raised': this.raised, | ||
'fox-button__icon': this.icon && !this.trailingIcon, | ||
'fox-button__trailing-icon': this.icon && this.trailingIcon, | ||
'fox-button__small': this.small, | ||
'fox-button__disabled': this.disabled, | ||
'fox-button__elevated': this.elevated, | ||
'fox-button__filled': this.filled || this.elevated, | ||
'fox-button__primary': this.primary, | ||
'fox-button__outlined': this.outlined, | ||
@@ -1636,19 +1641,12 @@ 'fox-button__icon-button': !this.label | ||
> | ||
<span class="leading-icon"> | ||
<slot name="icon"> | ||
${0} | ||
</slot> | ||
</span> | ||
${0} | ||
<span class="fox-button__label"> ${0} </span> | ||
<span class="trailing-icon"> | ||
<slot name="trailingIcon"> | ||
${0} | ||
</slot> | ||
</span> | ||
${0} | ||
</button> | ||
`), classMap(classes), this.disabled, this.label || this.icon, this.onClick, this.icon && !this.trailingIcon ? this.renderIcon() : '', this.label, this.icon && this.trailingIcon ? this.renderIcon() : '', this.progress ? this.renderProgress() : ''); | ||
`), classMap(classes), this.disabled, this.label || this.icon, this.onClick, this.icon ? this.renderIcon() : nothing, this.label, this.progress ? this.renderProgress() : nothing); | ||
} | ||
renderIcon() { | ||
return html$2(_t2 || (_t2 = _` <fox-icon class="fox-button__icon"> ${0}</fox-icon>`), this.icon); | ||
return html$2(_t2 || (_t2 = _`<fox-icon small icon="${0}"></fox-icon>`), this.icon); | ||
} | ||
@@ -1688,3 +1686,3 @@ renderProgress() { | ||
reflect: true | ||
}), __metadata("design:type", Object)], FoxButton.prototype, "raised", void 0); | ||
}), __metadata("design:type", Object)], FoxButton.prototype, "filled", void 0); | ||
__decorate([property({ | ||
@@ -1705,8 +1703,4 @@ type: Boolean, | ||
reflect: true | ||
}), __metadata("design:type", Object)], FoxButton.prototype, "fullwidth", void 0); | ||
}), __metadata("design:type", Object)], FoxButton.prototype, "elevated", void 0); | ||
__decorate([property({ | ||
type: Boolean, | ||
reflect: true | ||
}), __metadata("design:type", Object)], FoxButton.prototype, "justifyStart", void 0); | ||
__decorate([property({ | ||
type: String | ||
@@ -1718,3 +1712,3 @@ }), __metadata("design:type", Object)], FoxButton.prototype, "icon", void 0); | ||
__decorate([property({ | ||
type: Boolean | ||
type: String | ||
}), __metadata("design:type", Object)], FoxButton.prototype, "progress", void 0); | ||
@@ -1721,0 +1715,0 @@ __decorate([property({ |
{ | ||
"name": "@assecosolutions/fox-button", | ||
"version": "2.0.3", | ||
"version": "2.0.4", | ||
"public": true, | ||
@@ -16,3 +16,3 @@ "publishConfig": { | ||
"dependencies": { | ||
"@assecosolutions/fox-icon": "~2.0.8", | ||
"@assecosolutions/fox-icon": "~2.0.10", | ||
"@assecosolutions/fox-progress": "~2.0.3" | ||
@@ -19,0 +19,0 @@ }, |
@@ -30,11 +30,10 @@ import { LitElement } from 'lit'; | ||
primary: boolean; | ||
raised: boolean; | ||
filled: boolean; | ||
outlined: boolean; | ||
disabled: boolean; | ||
trailingIcon: boolean; | ||
fullwidth: boolean; | ||
justifyStart: boolean; | ||
elevated: boolean; | ||
icon: string; | ||
label: string; | ||
progress: boolean; | ||
progress: string; | ||
type?: 'submit' | 'reset'; | ||
@@ -41,0 +40,0 @@ protected render(): import("lit-html").TemplateResult<1>; |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
67308
1515