@duetds/components
Version:
This package includes Duet Core Components and related tools.
1 lines • 11.9 kB
JavaScript
import{r as t,d as s,h as i,H as e,c as h}from"./p-6403d5dc.js";import{b as n,j as o}from"./p-da8c2c96.js";import{d as a}from"./p-1bfaadf5.js";import{t as r}from"./p-8ad09b8a.js";const u=class{constructor(i){t(this,i),this.accessibleExpanded=!1,this.accessiblePressed=!1,this.variation="default",this.theme="",this.margin="auto",this.padding="auto",this.wrapping="auto",this.expand=!1,this.fixed=!1,this.disabled=!1,this.submit=!1,this.external=!1,this.icon="",this.color="",this.iconRight=!1,this.iconSize="medium",this.iconOnly=!1,this.handleClick=t=>{const s=this.element.closest("form");if(this.submit&&s){t.preventDefault();const i=document.createElement("button");i.type="submit",i.style.display="none",s.appendChild(i),i.click(),i.remove()}},this.onFocus=()=>{this.duetFocus.emit()},this.onBlur=()=>{this.duetBlur.emit()},this.duetFocus=s(this,"duetFocus",7),this.duetBlur=s(this,"duetBlur",7)}componentWillLoad(){"default"!==this.theme&&document.documentElement.classList.contains("duet-theme-turva")&&(this.theme="turva")}render(){this.expand&&this.element.classList.add("duet-expand"),this.fixed&&this.element.classList.add("duet-fixed");const t=this.submit?"submit":"button",s=this.url?"a":"button",h={color:r[n(this.color)]};return i(e,{onClick:this.handleClick,class:{"duet-m-0":"none"===this.margin}},i("div",{class:{"duet-button-container":!0,"duet-theme-turva":"turva"===this.theme}},i(s,{onFocus:this.onFocus,onBlur:this.onBlur,type:t,href:this.url,class:{"duet-m-0":"none"===this.margin,"duet-p-0":"none"===this.padding,"duet-no-wrap":"none"===this.wrapping,"duet-button":!0,"duet-button-icon-only":this.iconOnly,[this.variation]:!0,disabled:this.disabled,icon:""!==this.icon,"icon-right":this.iconRight,[this.iconSize]:!0},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},i("span",{class:"duet-button-contents",style:h},""!==this.icon?i("span",{"aria-hidden":"true",class:{"duet-button-icon":!0,left:!this.iconRight,right:this.iconRight,[this.iconSize]:!0},innerHTML:a[o(this.icon)].svg}):"",i("slot",null))),"loading"===this.variation?i("duet-spinner",null):""))}get element(){return h(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%)}"}},d=class{constructor(s){t(this,s),this.color="color-gray-lightest",this.size="small"}render(){const t={color:r[n(this.color)]};return i("div",{class:{"duet-spinner":!0,[this.size]:!0},style:t,"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%)}}"}};export{u as duet_button,d as duet_spinner};