@duetds/components
Version:
This package includes Duet Core Components and related tools.
184 lines (178 loc) • 16.6 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const core = require('./core-e5cda7d4.js');
const jsUtils = require('./js-utils-286cf29e.js');
const icons = require('./icons-4dd2177d.js');
const tokens_common = require('./tokens.common-5057aed3.js');
const DuetButton = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
/**
* If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content.
*/
this.accessibleExpanded = false;
/**
* Tells screen reader the element is pressed.
*/
this.accessiblePressed = false;
/**
* Style variation of the button. Can be one of: "default", "primary", "secondary", "negative", "loading", "destructive", "plain".
*/
this.variation = "default";
/**
* Theme of the button. Can be one of: "default", "turva".
*/
this.theme = "";
/**
* Controls the margin of the component. Can be one of: "auto", "none".
*/
this.margin = "auto";
/**
* Controls the padding of the component. Can be one of: "auto", "none".
*/
this.padding = "auto";
/**
* Controls the text wrapping. Can be one of: "auto", "none".
*/
this.wrapping = "auto";
/**
* Expands the button to fill 100% of the container width.
*/
this.expand = false;
/**
* Keep the button fixed width even on mobile viewports.
*/
this.fixed = false;
/**
* Makes the button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.
*/
this.disabled = false;
/**
* Allows the button to submit a form.
*/
this.submit = false;
/**
* Forces URL to open in a new browser tab. Used together with URL prop.
*/
this.external = false;
/**
* Icon to display to the left of the button content.
*/
this.icon = "";
/**
* Custom color to be used for text, as a design token entered in camelCase or kebab-case.
* Example: "color-primary".
*/
this.color = "";
/**
* Show icon on the right side of the button content.
*/
this.iconRight = false;
/**
* Icon size. Can be one of: "small", "medium", "large".
*/
this.iconSize = "medium";
/**
* Whether this button should use styles meant for displaying just an icon.
*/
this.iconOnly = false;
/**
* Component event handling.
*/
this.handleClick = (ev) => {
// If this button wants to specifically submit a form
// climb up the dom to see if we're in a <form>
// and if so, then use JS to submit it.
// To understand better, see: https://www.hjorthhansen.dev/shadow-dom-form-participation/
const form = this.element.closest("form");
if (this.submit && form) {
ev.preventDefault();
const fakeButton = document.createElement("button");
fakeButton.type = "submit";
fakeButton.style.display = "none";
form.appendChild(fakeButton);
fakeButton.click();
fakeButton.remove();
}
};
this.onFocus = () => {
this.duetFocus.emit();
};
this.onBlur = () => {
this.duetBlur.emit();
};
this.duetFocus = core.createEvent(this, "duetFocus", 7);
this.duetBlur = core.createEvent(this, "duetBlur", 7);
}
/**
* Component lifecycle events.
*/
componentWillLoad() {
if (this.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
this.theme = "turva";
}
}
/**
* render() function.
* Always the last one in the class.
*/
render() {
if (this.expand) {
this.element.classList.add("duet-expand");
}
if (this.fixed) {
this.element.classList.add("duet-fixed");
}
const type = this.submit ? "submit" : "button";
const TagName = this.url ? "a" : "button";
const styles = {
color: tokens_common.tokens[jsUtils.jsUtils_7(this.color)],
};
return (core.h(core.Host, { onClick: this.handleClick, class: { "duet-m-0": this.margin === "none" } }, core.h("div", { class: { "duet-button-container": true, "duet-theme-turva": this.theme === "turva" } }, core.h(TagName, { onFocus: this.onFocus, onBlur: this.onBlur, type: type, href: this.url, class: {
"duet-m-0": this.margin === "none",
"duet-p-0": this.padding === "none",
"duet-no-wrap": this.wrapping === "none",
"duet-button": true,
"duet-button-icon-only": this.iconOnly,
[this.variation]: true,
disabled: this.disabled,
icon: this.icon !== "",
"icon-right": this.iconRight,
[this.iconSize]: true,
}, target: this.external ? "_blank" : "_self", "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded, "aria-pressed": this.accessiblePressed, disabled: this.disabled, id: this.identifier }, core.h("span", { class: "duet-button-contents", style: styles }, this.icon !== "" ? (core.h("span", { "aria-hidden": "true", class: {
"duet-button-icon": true,
left: !this.iconRight,
right: this.iconRight,
[this.iconSize]: true,
}, innerHTML: icons.duetIcons[jsUtils.jsUtils_6(this.icon)].svg })) : (""), core.h("slot", null))), this.variation === "loading" ? core.h("duet-spinner", null) : "")));
}
get element() { return core.getElement(this); }
static get style() { return ":host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;margin-right:12px!important;margin-bottom:12px!important;display:-ms-inline-flexbox;display:inline-flex;-webkit-tap-highlight-color:transparent;vertical-align:bottom;max-width:100%;width:auto}:host:last-child,:host:last-of-type{margin-right:0!important}\@media only screen and (max-width:35.9375em){:host{width:100%}}:host(.duet-expand){width:100%!important}:host(.duet-m-0){margin:0!important}:host(.duet-fixed){width:auto!important}:host(:last-child){margin-right:0!important}.duet-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;padding:14px 27px 15px!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-width:2px;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1rem;background:#fff;color:#0077b3!important;border-radius:20rem;font-weight:600;line-height:1.1;-webkit-transition:background-color .3s ease,color .3s ease,border .3s ease,-webkit-box-shadow .3s ease;transition:background-color .3s ease,color .3s ease,border .3s ease,-webkit-box-shadow .3s ease;transition:background-color .3s ease,color .3s ease,border .3s ease,box-shadow .3s ease;transition:background-color .3s ease,color .3s ease,border .3s ease,box-shadow .3s ease,-webkit-box-shadow .3s ease;min-width:8rem;z-index:100;width:100%;border-style:solid;position:relative;display:block;text-align:center;text-decoration:none;cursor:pointer}.duet-button.duet-p-0{padding:0!important}.duet-button.duet-m-0{margin:0!important}.duet-theme-turva .duet-button{font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.duet-button-container{position:relative;width:100%;height:100%}.duet-button-contents{position:relative;margin:0 auto;display:inline-block}.duet-button.duet-no-wrap{white-space:nowrap}.duet-button.icon{padding-left:52px!important}.duet-button.icon-right{padding-left:28px!important;padding-right:52px!important}.duet-button svg{fill:currentColor;width:100%;min-width:100%}.duet-button-icon{width:16px;height:16px;position:absolute;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin:0!important;top:50%;left:-28px}.duet-button-icon.right{right:-28px;left:auto}.duet-button-icon.large{width:20px;height:20px;left:-32px}.duet-button-icon.large.right{right:-32px;left:auto}.duet-button-icon.small{width:7px;height:7px;left:-16px}.duet-button-icon.small.right{right:-16px;left:auto}.duet-button:active{-webkit-transition:none;transition:none;opacity:.75}.duet-button:focus{outline:0!important;-webkit-box-shadow:0 0 0 4px rgba(0,119,179,.3);box-shadow:0 0 0 4px rgba(0,119,179,.3)}.duet-button.disabled,.duet-button[disabled]{cursor:not-allowed!important;border-color:#e1e3e6!important;background:#e1e3e6!important;color:#657787!important}.duet-theme-turva .duet-button.default.disabled,.duet-theme-turva .duet-button.default[disabled]{background:#e6e6e6!important;color:#757575!important;border-color:#e6e6e6!important}.duet-button.default{border-color:#e1e3e6}.duet-theme-turva .duet-button.default{border-color:#e6e6e6;color:#c60c30!important}.duet-button.default:hover{border-color:#0077b3}.duet-theme-turva .duet-button.default:hover{border-color:#c60c30}.duet-button.primary{color:#fff!important;border-color:#0077b3;background:#0077b3}.duet-theme-turva .duet-button.primary{background:#c60c30;border-color:#c60c30}.duet-button.primary:hover{background:#004d80;border-color:#004d80}.duet-theme-turva .duet-button.primary:hover{background:#940925;border-color:#940925}.duet-button.secondary{border-color:#00294d;color:#00294d!important;background:transparent}.duet-theme-turva .duet-button.secondary{border-color:#111;color:#111!important}.duet-button.secondary:hover{border-color:#0077b3;color:#0077b3!important}.duet-theme-turva .duet-button.secondary:hover{border-color:#c60c30;color:#c60c30!important}.duet-button.loading{background:#0077b3;color:#fff!important;border-color:#0077b3;text-indent:-9999px;pointer-events:none;overflow:hidden}.duet-theme-turva .duet-button.loading{background:#c60c30;border-color:#c60c30}.duet-button.loading.duet-button-icon{display:none}.duet-button.negative{color:#00294d!important;background:#fff;border-color:#fff}.duet-theme-turva .duet-button.negative{color:#111!important}.duet-button.negative:hover{border-color:#fff;background:transparent;color:#fff!important}.duet-button.destructive{color:#fff!important;background:#de2362;border-color:#de2362}.duet-theme-turva .duet-button.destructive{background:#e02a0d;border-color:#e02a0d}.duet-button.destructive:hover{background:#b21c4e;border-color:#b21c4e}.duet-theme-turva .duet-button.destructive:hover{background:#b3220a;border-color:#b3220a}.duet-button.plain{border-color:transparent;background:transparent;padding-left:0!important;padding-right:0!important;border-radius:4px;border:0;min-width:48px}.duet-theme-turva .duet-button.plain{border-color:transparent;background:transparent}.duet-button.plain.icon{padding-left:20px!important}.duet-button.plain.icon.icon-right{padding-left:0!important;padding-right:20px!important}.duet-button.plain.icon.medium{padding-left:24px!important}.duet-button.plain.icon.medium.icon-right{padding-left:0!important;padding-right:24px!important}.duet-button.plain.icon.large{padding-left:30px!important}.duet-button.plain.icon.large.icon-right{padding-left:0!important;padding-right:30px!important}.duet-button.plain .duet-button-icon.left{left:-16.6666666667px!important}.duet-button.plain .duet-button-icon.left.medium{left:-24px!important}.duet-button.plain .duet-button-icon.left.large{left:-30px!important}.duet-button.plain .duet-button-icon.right{right:-16.6666666667px!important}.duet-button.plain .duet-button-icon.right.medium{right:-24px!important}.duet-button.plain .duet-button-icon.right.large{right:-30px!important}.duet-button.plain.disabled,.duet-button.plain[disabled]{border-color:transparent!important;background:transparent!important;color:#657787!important}.duet-theme-turva .duet-button.plain.disabled,.duet-theme-turva .duet-button.plain[disabled]{background:transparent!important;color:transparent!important;border-color:#e6e6e6!important}.duet-theme-turva .duet-button.plain{color:#c60c30!important}.duet-button.plain:hover{color:#004d80!important}.duet-theme-turva .duet-button.plain:hover{color:#940925!important}.duet-button.duet-button-icon-only{padding:0!important;min-width:48px;min-height:48px}.duet-button.duet-button-icon-only .duet-button-contents{position:static}.duet-button.duet-button-icon-only .duet-button-icon.left.large,.duet-button.duet-button-icon-only .duet-button-icon.left.medium,.duet-button.duet-button-icon-only .duet-button-icon.left.small{position:absolute;padding:0;margin:0;top:50%!important;left:50%!important;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}"; }
};
const DuetSpinner = class {
constructor(hostRef) {
core.registerInstance(this, hostRef);
/**
* Color of the spinner, as a design token entered in camelCase or kebab-case.
* Example: "color-primary".
*/
this.color = "color-gray-lightest";
/**
* Size variation of the spinner. Can be one of: "small", "medium", "large".
*/
this.size = "small";
}
/**
* render() function
* Always the last one in the class.
*/
render() {
const styles = {
color: tokens_common.tokens[jsUtils.jsUtils_7(this.color)],
};
return core.h("div", { class: { "duet-spinner": true, [this.size]: true }, style: styles, "aria-label": this.accessibleLabel });
}
static get style() { return ":host{margin:0;position:absolute;z-index:800;top:50%;left:50%;max-width:100%}.duet-spinner{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:24px;height:24px;will-change:tranform;z-index:800;border-radius:50%;-webkit-animation:duetRotate .6s linear infinite;animation:duetRotate .6s linear infinite;border:2px solid transparent;border-left:2px solid currentColor}.duet-spinner,.duet-spinner:after{position:absolute;top:50%;left:50%;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translateZ(0) translateX(-50%) translateY(-50%);transform:translateZ(0) translateX(-50%) translateY(-50%)}.duet-spinner:after{content:\"\";opacity:.3;width:100%;height:100%;overflow:hidden;z-index:200;border-radius:50%;border:2px solid currentColor}.duet-spinner.medium{width:36px;height:36px;border-width:4px}.duet-spinner.medium:after{border-width:4px}.duet-spinner.large{width:72px;height:72px;border-width:8px}.duet-spinner.large:after{border-width:8px}\@-webkit-keyframes duetRotate{0%{-webkit-transform:translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);transform:translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%)}to{-webkit-transform:translateZ(0) rotate(1turn) translateX(-50%) translateY(-50%);transform:translateZ(0) rotate(1turn) translateX(-50%) translateY(-50%)}}\@keyframes duetRotate{0%{-webkit-transform:translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%);transform:translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%)}to{-webkit-transform:translateZ(0) rotate(1turn) translateX(-50%) translateY(-50%);transform:translateZ(0) rotate(1turn) translateX(-50%) translateY(-50%)}}"; }
};
exports.duet_button = DuetButton;
exports.duet_spinner = DuetSpinner;