@duetds/components
Version:
This package includes Duet Core Components and related tools.
1 lines • 12.5 kB
JavaScript
System.register(["./p-2c514bc6.system.js","./p-e008225b.system.js","./p-0fbeef9c.system.js","./p-6df50530.system.js"],(function(t){"use strict";var e,i,s,n,r,u,o,a,l;return{setters:[function(t){e=t.r;i=t.d;s=t.h;n=t.H;r=t.c},function(t){u=t.b;o=t.j},function(t){a=t.d},function(t){l=t.t}],execute:function(){var c=t("duet_button",function(){function t(t){var s=this;e(this,t);this.accessibleExpanded=false;this.accessiblePressed=false;this.variation="default";this.theme="";this.margin="auto";this.padding="auto";this.wrapping="auto";this.expand=false;this.fixed=false;this.disabled=false;this.submit=false;this.external=false;this.icon="";this.color="";this.iconRight=false;this.iconSize="medium";this.iconOnly=false;this.handleClick=function(t){var e=s.element.closest("form");if(s.submit&&e){t.preventDefault();var i=document.createElement("button");i.type="submit";i.style.display="none";e.appendChild(i);i.click();i.remove()}};this.onFocus=function(){s.duetFocus.emit()};this.onBlur=function(){s.duetBlur.emit()};this.duetFocus=i(this,"duetFocus",7);this.duetBlur=i(this,"duetBlur",7)}t.prototype.componentWillLoad=function(){if(this.theme!=="default"&&document.documentElement.classList.contains("duet-theme-turva")){this.theme="turva"}};t.prototype.render=function(){var t,e;if(this.expand){this.element.classList.add("duet-expand")}if(this.fixed){this.element.classList.add("duet-fixed")}var i=this.submit?"submit":"button";var r=this.url?"a":"button";var c={color:l[u(this.color)]};return s(n,{onClick:this.handleClick,class:{"duet-m-0":this.margin==="none"}},s("div",{class:{"duet-button-container":true,"duet-theme-turva":this.theme==="turva"}},s(r,{onFocus:this.onFocus,onBlur:this.onBlur,type:i,href:this.url,class:(t={"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},t[this.variation]=true,t.disabled=this.disabled,t.icon=this.icon!=="",t["icon-right"]=this.iconRight,t[this.iconSize]=true,t),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},s("span",{class:"duet-button-contents",style:c},this.icon!==""?s("span",{"aria-hidden":"true",class:(e={"duet-button-icon":true,left:!this.iconRight,right:this.iconRight},e[this.iconSize]=true,e),innerHTML:a[o(this.icon)].svg}):"",s("slot",null))),this.variation==="loading"?s("duet-spinner",null):""))};Object.defineProperty(t.prototype,"element",{get:function(){return r(this)},enumerable:true,configurable:true});Object.defineProperty(t,"style",{get:function(){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%)}"},enumerable:true,configurable:true});return t}());var h=t("duet_spinner",function(){function t(t){e(this,t);this.color="color-gray-lightest";this.size="small"}t.prototype.render=function(){var t;var e={color:l[u(this.color)]};return s("div",{class:(t={"duet-spinner":true},t[this.size]=true,t),style:e,"aria-label":this.accessibleLabel})};Object.defineProperty(t,"style",{get:function(){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%)}}"},enumerable:true,configurable:true});return t}())}}}));