@limetech/lime-elements
Version:
128 lines (122 loc) • 8.59 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-174a078a.js');
const makeEnterClickable = require('./make-enter-clickable-39af24ec.js');
const getIconProps = require('./get-icon-props-65f39e40.js');
const buttonCss = "@charset \"UTF-8\";:host{display:inline-block}:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button.mdc-button{font-family:inherit}button{display:flex;align-items:center;justify-content:center;gap:0.125rem;border:none;border-radius:0.4rem;padding-top:0;padding-right:var(--button-padding-right, 0.5rem);padding-bottom:0;padding-left:var(--button-padding-left, 0.5rem);min-height:2.25rem;width:100%}button:disabled{cursor:not-allowed}button:disabled.outlined{border-color:rgba(var(--contrast-1700), 0.2)}button:not(:disabled){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}button:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:not(:disabled):hover,button:not(:disabled):focus,button:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}button:not(:disabled):hover,button:not(:disabled):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button:not(:disabled):active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button:not(:disabled):hover,button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host(limel-button[primary]) button:not(:disabled){color:var(--lime-on-primary-color, var(--limel-theme-on-primary-color));background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-button[primary]) button:disabled{background-color:rgba(var(--contrast-1700), 0.15)}:host(limel-button:not([primary])) button:not(:disabled){color:var(--lime-primary-color, var(--limel-theme-primary-color))}:host(limel-button:not([primary])) button:disabled{color:rgba(var(--contrast-1600), 0.37);background-color:rgba(var(--contrast-1600), 0.1)}.label{font-size:var(--limel-theme-default-font-size);font-weight:600;letter-spacing:0.03125rem;padding:0 0.25rem}limel-spinner{position:absolute}limel-icon{width:1.25rem;flex-shrink:0;vertical-align:top}svg{height:1.875rem;opacity:0;pointer-events:none;position:absolute;width:1.875rem}svg line{stroke:rgb(var(--contrast-600));stroke-width:2}limel-icon,.label,limel-spinner,svg{transition:opacity 300ms ease-in-out}.loading limel-icon,.loading .label{opacity:0}.loading limel-spinner{opacity:1}.just-loaded limel-icon,.just-loaded .label,.just-failed limel-icon,.just-failed .label{opacity:0}.just-loaded svg,.just-failed svg{opacity:1}.just-failed{background-color:var(--limel-theme-error-color) !important;animation:shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.outlined{border:1px solid;border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}@keyframes shake{10%,90%{transform:translate3d(-0.0625rem, 0, 0)}20%,80%{transform:translate3d(0.125rem, 0, 0)}30%,50%,70%{transform:translate3d(-0.1875rem, 0, 0)}40%,60%{transform:translate3d(0.1875rem, 0, 0)}}@keyframes reduced-presence{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.7)}}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded){animation:reduced-presence 0.3s ease forwards;transition:padding 0.3s ease, min-width 0.3s ease;transition-delay:0.3s;padding:0;min-width:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .label{transition:font-size 0.8s ease;transition-delay:0.3s;font-size:0;opacity:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-icon,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-spinner,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) svg,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .icon{transition:all 0.3s ease;transition-delay:0.3s;opacity:0;width:0;height:0}";
const Button = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.filterClickWhenDisabled = (e) => {
if (this.disabled) {
e.preventDefault();
}
};
this.label = undefined;
this.primary = false;
this.outlined = false;
this.icon = undefined;
this.disabled = false;
this.loading = false;
this.loadingFailed = false;
this.justLoaded = false;
}
componentWillLoad() {
makeEnterClickable.makeEnterClickable(this.host);
}
disconnectedCallback() {
makeEnterClickable.removeEnterClickable(this.host);
}
render() {
return (index.h(index.Host, { onClick: this.filterClickWhenDisabled }, index.h("button", { class: {
loading: this.loading,
'just-loaded': this.justLoaded && !this.loadingFailed,
'just-failed': this.justLoaded && this.loadingFailed,
outlined: this.outlined,
}, disabled: this.disabled || this.loading, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite" }, this.renderIcon(this.icon), this.renderLabel(), this.renderSpinner(), index.h("svg", { viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
}
loadingWatcher(newValue, oldValue) {
const hasFinishedLoading = this.hasFinishedLoading(newValue, oldValue);
if (hasFinishedLoading) {
this.handleLoadingFinished();
}
else if (newValue) {
this.handleLoadingStarted();
}
}
hasFinishedLoading(newValue, oldValue) {
return oldValue && !newValue;
}
handleLoadingFinished() {
this.justLoaded = true;
const TIMEOUT = 2000;
this.justLoadedTimeout = window.setTimeout(() => {
this.justLoaded = false;
}, TIMEOUT);
}
handleLoadingStarted() {
this.justLoaded = false;
window.clearTimeout(this.justLoadedTimeout);
}
renderLoadingIcons() {
if (this.loadingFailed) {
return [
index.h("line", { x1: "9", y1: "9", x2: "21", y2: "21" }),
index.h("line", { x1: "21", y1: "9", x2: "9", y2: "21" }),
];
}
return [
index.h("line", { x1: "8", y1: "14", x2: "15", y2: "20" }),
index.h("line", { x1: "23", y1: "9", x2: "14", y2: "20" }),
];
}
renderIcon(icon) {
const iconName = getIconProps.getIconName(icon);
if (!iconName) {
return;
}
const title = getIconProps.getIconTitle(icon);
if (!this.label && !title) {
const WARNING_MESSAGE = '⚠️ Accessibility warning: `limel-button` has no `label` and its `icon` has no `title`. ' +
'This creates an inaccessible button for screen reader users. ' +
'Please add either a `label`, a `title` to the `icon`, or use a `limel-tooltip`. ' +
'See https://lundalogik.github.io/lime-elements/versions/latest/#/component/limel-button/ ' +
'for more information.';
console.warn(WARNING_MESSAGE);
}
let iconColor;
if (typeof icon === 'object') {
iconColor = icon.color;
}
const iconProps = {
role: 'presentation',
name: iconName,
'aria-label': title,
'aria-hidden': title ? null : 'true',
style: {
color: iconColor,
},
};
return index.h("limel-icon", Object.assign({}, iconProps));
}
renderLabel() {
if (!this.label) {
return;
}
return index.h("span", { class: "label" }, this.label);
}
renderSpinner() {
if (!this.loading) {
return;
}
return index.h("limel-spinner", { limeBranded: false });
}
static get delegatesFocus() { return true; }
get host() { return index.getElement(this); }
static get watchers() { return {
"loading": ["loadingWatcher"]
}; }
};
Button.style = buttonCss;
exports.limel_button = Button;
//# sourceMappingURL=limel-button.cjs.entry.js.map