UNPKG

@duetds/components

Version:

This package includes Duet Core Components and related tools.

1 lines 13.7 kB
System.register(["./p-2c514bc6.system.js","./p-e008225b.system.js","./p-0fbeef9c.system.js"],(function(e){"use strict";var t,i,s,a,n,r,o;return{setters:[function(e){t=e.r;i=e.h;s=e.H;a=e.c},function(e){n=e.a;r=e.j},function(e){o=e.d}],execute:function(){var d=e("duet_card",function(){function e(e){var i=this;t(this,e);this.cardId=n("DuetCard");this.isCollapsed=false;this.heading="";this.accessibleLabel="Suurenna tai pienennä sisältö";this.variation="default";this.collapsible=false;this.headingLevel="h2";this.padding="small";this.margin="auto";this.theme="";this.togglePanel=function(e){e.preventDefault();i.isCollapsed=!i.isCollapsed}}e.prototype.componentWillLoad=function(){this.hasFooter=!!this.element.querySelector("[slot='footer']");if(this.theme!=="default"&&document.documentElement.classList.contains("duet-theme-turva")){this.theme="turva"}};e.prototype.render=function(){var e;var t=this;var a=this.url?"a":"div";var n=r(this.headingLevel);return i(s,{class:{"duet-m-0":this.margin==="none","duet-card-info":this.variation==="info"}},i(a,{href:this.url,class:(e={"duet-card":true},e[this.padding]=true,e[this.variation]=true,e["duet-p-0"]=this.padding==="none",e["duet-theme-turva"]=this.theme==="turva",e["duet-card-has-icon"]=!!this.icon,e["duet-card-collapsed"]=this.isCollapsed,e)},this.heading!==""?i(n,{class:"duet-card-heading"},this.icon?i("div",{class:"duet-card-icon","aria-hidden":"true",innerHTML:o[r(this.icon)].svg}):"",this.heading,this.collapsible?i("button",{"aria-hidden":"true","aria-label":this.accessibleLabel,"aria-controls":this.cardId,"aria-expanded":this.isCollapsed?"false":"true",class:{"duet-card-collapse":true,active:this.isCollapsed},onClick:function(e){return t.togglePanel(e)}},i("span",{innerHTML:this.isCollapsed?o["action-arrow-down"].svg:o["action-arrow-up"].svg})):""):"",i("div",{class:"duet-card-content",id:this.cardId},i("slot",null),this.hasFooter?i("div",{class:"duet-card-footer"},i("slot",{name:"footer"})):"")))};Object.defineProperty(e.prototype,"element",{get:function(){return a(this)},enumerable:true,configurable:true});Object.defineProperty(e,"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-bottom:20px!important;display:-ms-flexbox;display:flex;vertical-align:top;width:100%}:host(.duet-card-info){margin-bottom:16px!important}:host(.duet-m-0){margin:0!important}.duet-card{-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:20px!important;border-radius:4px;background:#fff;-webkit-box-shadow:0 2px 6px 0 rgba(0,41,77,.07),0 -1px 0 0 rgba(0,0,0,.09),-1px 0 0 0 rgba(0,0,0,.07),1px 0 0 0 rgba(0,0,0,.07),0 1px 0 0 rgba(0,0,0,.07);box-shadow:0 2px 6px 0 rgba(0,41,77,.07),0 -1px 0 0 rgba(0,0,0,.09),-1px 0 0 0 rgba(0,0,0,.07),1px 0 0 0 rgba(0,0,0,.07),0 1px 0 0 rgba(0,0,0,.07);font-size:1rem;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:400;line-height:1.5;color:#00294d;font-style:normal;position:relative;display:block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%}.duet-card.duet-p-0{padding:0!important}.duet-card.duet-m-0{margin:0!important}\@media only screen and (min-width:36em){.duet-card{padding:28px!important}}.duet-card.duet-theme-turva{font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;-webkit-box-shadow:0 2px 6px 0 hsla(0,0%,45.9%,.13),0 -1px 0 0 rgba(0,0,0,.09),-1px 0 0 0 rgba(0,0,0,.07),1px 0 0 0 rgba(0,0,0,.07),0 1px 0 0 rgba(0,0,0,.07);box-shadow:0 2px 6px 0 hsla(0,0%,45.9%,.13),0 -1px 0 0 rgba(0,0,0,.09),-1px 0 0 0 rgba(0,0,0,.07),1px 0 0 0 rgba(0,0,0,.07),0 1px 0 0 rgba(0,0,0,.07);color:#111}\@media only screen and (min-width:36em){.duet-card.x-small{padding:20px!important}}\@media only screen and (min-width:36em){.duet-card.medium{padding:28px!important}}\@media only screen and (min-width:48em){.duet-card.medium{padding:36px!important}}\@media only screen and (min-width:36em){.duet-card.large{padding:36px!important}}\@media only screen and (min-width:48em){.duet-card.large{padding:48px!important}}\@media only screen and (min-width:36em){.duet-card.x-large{padding:48px!important}}\@media only screen and (min-width:48em){.duet-card.x-large{padding:72px!important}}.duet-card.duet-card-collapsed{padding-bottom:0!important}\@media only screen and (min-width:36em){.duet-card.duet-card-collapsed{padding-bottom:0!important}}.duet-card.info{-webkit-box-shadow:none;box-shadow:none;background:rgba(0,80,128,.04)}.duet-card.info.duet-theme-turva{background:rgba(17,17,17,.035)}.duet-card.plain{-webkit-box-shadow:none;box-shadow:none;background:transparent!important}.duet-card-heading{-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:10px 20px 11px!important;margin:-20px -20px 20px;white-space:nowrap;overflow:hidden;display:block;position:relative;text-overflow:ellipsis;font-family:localtapiola-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:800;font-size:1.25rem;border-bottom:1px solid #e1e3e6;color:#00294d}\@media only screen and (min-width:36em){.duet-card-heading{padding:15px 28px 16px!important;margin:-28px -28px 20px}}.duet-card-collapsed .duet-card-heading{border-bottom:0!important;margin-bottom:0!important}.duet-card-heading.duet-theme-turva,.duet-theme-turva .duet-card-heading{border-color:#e6e6e6;font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;color:#111}\@media only screen and (min-width:36em){.x-small .duet-card-heading{padding:10px 20px 11px!important;margin:-20px -20px 20px}}\@media only screen and (min-width:48em){.x-small .duet-card-heading{padding:10px 20px 11px!important;margin:-20px -20px 20px}}.medium .duet-card-heading{padding:10px 20px 11px!important;margin:-20px -20px 20px}\@media only screen and (min-width:36em){.medium .duet-card-heading{padding:15px 28px 16px!important;margin:-28px -28px 20px}}\@media only screen and (min-width:48em){.medium .duet-card-heading{padding:19px 36px 20px!important;margin:-36px -36px 28px}}.large .duet-card-heading{padding:10px 20px 11px!important;margin:-20px -20px 20px}\@media only screen and (min-width:36em){.large .duet-card-heading{padding:19px 36px 20px!important;margin:-36px -36px 28px}}\@media only screen and (min-width:48em){.large .duet-card-heading{padding:26px 48px 27px!important;margin:-48px -48px 36px}}.x-large .duet-card-heading{padding:10px 20px 11px!important;margin:-20px -20px 20px}\@media only screen and (min-width:36em){.x-large .duet-card-heading{padding:26px 48px 27px!important;margin:-48px -48px 36px}}\@media only screen and (min-width:48em){.x-large .duet-card-heading{padding:39px 72px 40px!important;margin:-72px -72px 48px}}.none .duet-card-heading{padding:0 0 20px!important;margin:0 0 20px}.duet-card-has-icon .duet-card-heading{padding-left:56px!important}\@media only screen and (min-width:48em){.duet-card-has-icon .duet-card-heading{padding-left:64px!important}}\@media only screen and (min-width:36em){.duet-card-has-icon.x-small .duet-card-heading{padding-left:56px!important}}\@media only screen and (min-width:36em){.duet-card-has-icon.small .duet-card-heading{padding-left:64px!important}}.duet-card-has-icon.medium .duet-card-heading{padding-left:56px!important}\@media only screen and (min-width:36em){.duet-card-has-icon.medium .duet-card-heading{padding-left:64px!important}}\@media only screen and (min-width:48em){.duet-card-has-icon.medium .duet-card-heading{padding-left:72px!important}}.duet-card-has-icon.large .duet-card-heading{padding-left:56px!important}\@media only screen and (min-width:36em){.duet-card-has-icon.large .duet-card-heading{padding-left:72px!important}}\@media only screen and (min-width:48em){.duet-card-has-icon.large .duet-card-heading{padding-left:84px!important}}.duet-card-has-icon.x-large .duet-card-heading{padding-left:56px!important}\@media only screen and (min-width:36em){.duet-card-has-icon.x-large .duet-card-heading{padding-left:84px!important}}\@media only screen and (min-width:48em){.duet-card-has-icon.x-large .duet-card-heading{padding-left:108px!important}}.duet-card-has-icon.none .duet-card-heading{padding-left:36px!important}\@media only screen and (min-width:48em){.duet-card-has-icon.none .duet-card-heading{padding-left:36px!important}}.duet-card-icon{position:absolute;top:48%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:20px;width:24px;height:24px}\@media only screen and (min-width:48em){.duet-card-icon{left:28px}}\@media only screen and (min-width:48em){.x-small .duet-card-icon{left:20px}}\@media only screen and (min-width:36em){.small .duet-card-icon{left:28px}}.medium .duet-card-icon{left:20px}\@media only screen and (min-width:36em){.medium .duet-card-icon{left:28px}}\@media only screen and (min-width:48em){.medium .duet-card-icon{left:36px}}.large .duet-card-icon{left:20px}\@media only screen and (min-width:36em){.large .duet-card-icon{left:36px}}\@media only screen and (min-width:48em){.large .duet-card-icon{left:48px}}.x-large .duet-card-icon{left:20px}\@media only screen and (min-width:36em){.x-large .duet-card-icon{left:48px}}\@media only screen and (min-width:48em){.x-large .duet-card-icon{left:72px}}.none .duet-card-icon{-webkit-transform:none;transform:none;top:0;left:0}.duet-card-footer{-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:20px 20px;font-size:.875rem;line-height:1.25;margin:20px -20px -20px;background:#f5f8fa;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.duet-theme-turva .duet-card-footer{background:#f7f7f7}\@media only screen and (min-width:36em){.duet-card-footer{padding:15px 28px 16px!important;margin:20px -28px -28px}}\@media only screen and (min-width:48em){.duet-card-footer{padding:15px 28px 16px!important;margin:20px -28px -28px}}\@media only screen and (min-width:36em){.x-small .duet-card-footer{padding:15px 28px 16px!important;padding-left:20px!important;margin:20px -20px -20px}}\@media only screen and (min-width:36em){.medium .duet-card-footer{padding:15px 28px 16px!important;margin:20px -28px -28px}}\@media only screen and (min-width:48em){.medium .duet-card-footer{padding:19px 36px 20px!important;margin:28px -36px -36px}}\@media only screen and (min-width:36em){.large .duet-card-footer{padding:19px 36px 20px!important;margin:28px -36px -36px}}\@media only screen and (min-width:48em){.large .duet-card-footer{padding:26px 48px 27px!important;margin:36px -48px -48px}}\@media only screen and (min-width:36em){.x-large .duet-card-footer{padding:26px 48px 27px!important;margin:36px -48px -48px}}\@media only screen and (min-width:48em){.x-large .duet-card-footer{padding:39px 72px 40px!important;margin:48px -72px -72px}}.none .duet-card-footer{padding:12px 0!important;margin:20px 0 0}.duet-card-content{-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;width:100%}.duet-card-collapsed .duet-card-content{display:none}.duet-card-collapse{-moz-appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;border:0;padding:0;margin:0;width:48px;border-radius:4px;-webkit-tap-highlight-color:transparent;height:100%;cursor:pointer;-webkit-appearance:none;appearance:none;position:absolute;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;top:0;right:4px}.duet-card-collapse:focus{outline:none}:host(.user-is-tabbing) .duet-card-collapse:focus{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}\@media only screen and (min-width:36em){.duet-card-collapse{right:8px}}\@media only screen and (min-width:48em){.duet-card-collapse{right:12px}}\@media only screen and (min-width:36em){.x-small .duet-card-collapse{right:4px}}\@media only screen and (min-width:48em){.x-small .duet-card-collapse{right:8px}}\@media only screen and (min-width:36em){.medium .duet-card-collapse{right:16px}}\@media only screen and (min-width:48em){.medium .duet-card-collapse{right:20px}}\@media only screen and (min-width:36em){.large .duet-card-collapse{right:20px}}\@media only screen and (min-width:48em){.large .duet-card-collapse{right:28px}}\@media only screen and (min-width:36em){.x-large .duet-card-collapse{right:36px}}\@media only screen and (min-width:48em){.x-large .duet-card-collapse{right:48px}}.none .duet-card-collapse{right:0}\@media only screen and (min-width:36em){.none .duet-card-collapse{right:0}}\@media only screen and (min-width:48em){.none .duet-card-collapse{right:0}}.duet-card-collapse span{display:inline-block;width:20px;height:20px}.duet-card-collapse svg{-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;fill:currentColor;pointer-events:none;width:100%;height:100%}"},enumerable:true,configurable:true});return e}())}}}));