UNPKG

@duetds/components

Version:

This package includes Duet Core Components and related tools.

1 lines 11.8 kB
System.register(["./p-2c514bc6.system.js","./p-e008225b.system.js"],(function(e){"use strict";var t,o,n,i,l;return{setters:[function(e){t=e.r;o=e.h;n=e.H;i=e.c},function(e){l=e.a}],execute:function(){var s=e("duet_tooltip",function(){function e(e){var o=this;t(this,e);this.tooltipId=l("DuetTooltip");this.tooltip=null;this.scrollable=null;this.lastScrollTop=0;this.timer=null;this.openDown=false;this.visible=true;this.theme="";this.accessibleLabel="Näytä lisätietoja";this.label="";this.positionVertical="0";this.positionHorizontal="0";this.active=false;this.toggleTooltip=function(e){e.preventDefault();if(!o.active){o.active=true;o.visible=o.isElementInViewport(o.element.shadowRoot.querySelector(".duet-tooltip"));if(!o.visible){o.openDown=true}o.element.style.zIndex="201";window.addEventListener("scroll",o.onScroll,false);window.addEventListener("resize",o.closeTooltip,false);document.addEventListener("mousedown",o.handleMouseDown,false);setTimeout((function(){o.scrollable.focus({preventScroll:true});window.addEventListener("keyup",o.handleKeyUp,false);window.addEventListener("keydown",o.handleKeyDown,false);if(window.parent){window.parent.addEventListener("keyup",o.handleKeyUp,false);window.parent.addEventListener("keydown",o.handleKeyDown,false)}o.scrollable.addEventListener("blur",o.closeTooltip,false)}),305)}else{o.closeTooltip()}};this.handleKeyUp=function(e){if(o.active){if(e.key==="Escape"||e.key==="Esc"||e.keyCode===27){o.closeTooltip()}if(e.key==="Space"||e.keyCode===32){o.closeTooltip()}if(e.key==="Enter"||e.keyCode===13){o.closeTooltip()}}};this.handleKeyDown=function(e){if(o.active){if(e.key==="Space"||e.keyCode===32){e.preventDefault()}}};this.handleMouseDown=function(e){if(e.target===o.element){e.preventDefault();e.stopPropagation()}};this.closeTooltip=function(){o.active=false;window.removeEventListener("keyup",o.handleKeyUp);window.removeEventListener("keydown",o.handleKeyDown);window.removeEventListener("scroll",o.onScroll);window.removeEventListener("resize",o.closeTooltip);document.removeEventListener("mousedown",o.handleMouseDown);o.scrollable.removeEventListener("blur",o.closeTooltip);if(window.parent){window.parent.removeEventListener("keyup",o.handleKeyUp);window.parent.removeEventListener("keydown",o.handleKeyDown)}setTimeout((function(){o.openDown=false;o.tooltip.classList.remove("duet-tooltip-down");o.element.style.zIndex="200";var e=o.element.shadowRoot.querySelector(".duet-tooltip-button");e.focus({preventScroll:true})}),300)};this.isElementInViewport=function(e){var t=e.getBoundingClientRect();return(t.top>=100&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth))};this.onScroll=function(){o.visible=o.isElementInViewport(o.tooltip);clearTimeout(o.timer);var e=window.pageYOffset||document.documentElement.scrollTop;o.timer=setTimeout((function(){if(!o.visible){if(e>o.lastScrollTop){o.tooltip.classList.add("duet-tooltip-down");o.openDown=true}else{o.tooltip.classList.remove("duet-tooltip-down");o.openDown=false}}o.lastScrollTop=e<=0?0:e}),100)}}e.prototype.componentWillLoad=function(){if(this.theme!=="default"&&document.documentElement.classList.contains("duet-theme-turva")){this.theme="turva"}};e.prototype.componentDidLoad=function(){this.tooltip=this.element.shadowRoot.querySelector(".duet-tooltip");this.scrollable=this.element.shadowRoot.querySelector(".duet-tooltip-scrollable")};e.prototype.render=function(){var e=this;var t={transform:"translateY("+this.positionVertical+") translateX("+this.positionHorizontal+")"};return o(n,{style:t},o("button",{"aria-controls":this.tooltipId,"aria-expanded":this.active,onClick:function(t){return e.toggleTooltip(t)},class:{"duet-tooltip-button":true,"duet-tooltip-button-has-label":this.label!=="","duet-theme-turva":this.theme==="turva"}},o("svg",{"aria-hidden":"true",role:"img",fill:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},o("path",{d:"m13.5 17.25c-1.241 0-2.25-1.009-2.25-2.25v-3.75h-.75c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h.75c.827 0 1.5.673 1.5 1.5v3.75c0 .414.336.75.75.75h.75c.414 0 .75.336.75.75s-.336.75-.75.75z"}),o("circle",{cx:"11.625",cy:"7.125",r:"1.125"}),o("path",{d:"m12 24c-6.617 0-12-5.383-12-12s5.383-12 12-12 12 5.383 12 12-5.383 12-12 12zm0-22.5c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z"})),this.label!==""?o("span",{class:"duet-tooltip-label"},this.label):o("duet-visually-hidden",null,this.accessibleLabel)),o("div",{class:{"duet-tooltip":true,"duet-theme-turva":this.theme==="turva","duet-tooltip-down":this.openDown,"duet-tooltip-has-label":this.label!=="",active:this.active===true}},o("div",{class:"duet-tooltip-scrollable",tabindex:"0",role:"tooltip",id:this.tooltipId},o("slot",null))))};Object.defineProperty(e.prototype,"element",{get:function(){return i(this)},enumerable:true,configurable:true});Object.defineProperty(e,"style",{get:function(){return":host{background:transparent;border:0;margin:0;display:-ms-inline-flexbox;display:inline-flex;position:relative;width:auto;-webkit-tap-highlight-color:transparent;z-index:200;margin-top:-16px!important;margin-left:-3px!important}.duet-tooltip,:host{-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}.duet-tooltip{background:transparent;border:0;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;opacity:0;visibility:hidden;-webkit-transition:.3s ease;transition:.3s ease;will-change:transform,opacity,visibility;-webkit-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-transform:scale(.9) translateZ(0) translateY(20px);transform:scale(.9) translateZ(0) translateY(20px);background:#fff;border:1px solid #e1e3e6;-webkit-box-shadow:0 2px 10px 0 rgba(0,41,77,.07);box-shadow:0 2px 10px 0 rgba(0,41,77,.07);border-radius:4px;min-height:48px;position:absolute;display:block;max-height:340px;width:282px;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:.875rem;color:#00294d;font-weight:400;line-height:1.25;z-index:950;right:-21px;bottom:100%}\@media only screen and (min-width:48em){.duet-tooltip{-webkit-transform-origin:50% 100%;transform-origin:50% 100%;width:320px;right:-148px}}.duet-tooltip.duet-theme-turva{color:#111;font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;border-color:#e6e6e6;-webkit-box-shadow:0 2px 10px 0 hsla(0,0%,45.9%,.13);box-shadow:0 2px 10px 0 hsla(0,0%,45.9%,.13)}.duet-tooltip:after{content:\"\";position:absolute;bottom:-20px;right:22px;width:0;height:0;z-index:200;border:10px solid transparent;border-top:10px solid #fff}\@media only screen and (min-width:48em){.duet-tooltip:after{-webkit-transform:translateX(50%);transform:translateX(50%);right:50%}}.duet-tooltip:before{content:\"\";position:absolute;bottom:-22px;right:21px;width:0;height:0;z-index:100;border:11px solid transparent;border-top:11px solid #e1e3e6}\@media only screen and (min-width:48em){.duet-tooltip:before{-webkit-transform:translateX(50%);transform:translateX(50%);right:50%}}.duet-theme-turva .duet-tooltip:before{border-top:11px solid #e6e6e6}.duet-tooltip.duet-tooltip-down{-webkit-transform:scale(.9) translateZ(0) translateY(-20px);transform:scale(.9) translateZ(0) translateY(-20px);-webkit-transform-origin:100% 0;transform-origin:100% 0;bottom:auto;top:100%}\@media only screen and (min-width:48em){.duet-tooltip.duet-tooltip-down{-webkit-transform-origin:50% 0;transform-origin:50% 0}}.duet-tooltip.duet-tooltip-down:after{bottom:auto;top:-20px;border:10px solid transparent;border-bottom:10px solid #fff}.duet-tooltip.duet-tooltip-down:before{bottom:auto;top:-22px;border:11px solid transparent;border-bottom:11px solid #e1e3e6}.duet-theme-turva .duet-tooltip.duet-tooltip-down:before{border-bottom:11px solid #e6e6e6}.duet-tooltip.duet-tooltip-has-label{right:auto!important;left:0;-webkit-transform-origin:0 0!important;transform-origin:0 0!important;width:282px!important}.duet-tooltip.duet-tooltip-has-label:after{left:1px!important;right:auto!important;-webkit-transform:none!important;transform:none!important}.duet-tooltip.duet-tooltip-has-label:before{right:auto!important;left:0!important;-webkit-transform:none!important;transform:none!important}.duet-tooltip.active{opacity:1;visibility:visible;-webkit-transform:scale(1) translateZ(0) translateY(-8px);transform:scale(1) translateZ(0) translateY(-8px)}.duet-tooltip.active.duet-tooltip-down{-webkit-transform:scale(1) translateZ(0) translateY(8px);transform:scale(1) translateZ(0) translateY(8px)}.duet-tooltip-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;margin-right:-12px;min-width:48px;height:48px;z-index:100;display:inline-block;white-space:nowrap;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#0077b3}.duet-tooltip-button.duet-theme-turva{color:#c60c30}.duet-tooltip-button:hover{color:#004d80}.duet-tooltip-button:hover.duet-theme-turva{color:#940925}.duet-tooltip-button:focus{outline:none}:host(.user-is-tabbing) .duet-tooltip-button:focus{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}.duet-tooltip-button svg{pointer-events:none;width:20px;height:20px}.duet-tooltip-button-has-label{margin-right:0}.duet-tooltip-scrollable{-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;overflow-y:auto;-webkit-overflow-scrolling:touch;width:100%;max-height:250px}.duet-tooltip-scrollable:focus{outline:none}:host(.user-is-tabbing) .duet-tooltip-scrollable:focus{outline:1px dotted #0077b3;outline:5px auto -webkit-focus-ring-color}.duet-tooltip-scrollable::-webkit-scrollbar{width:4px}.duet-tooltip-scrollable::-webkit-scrollbar-track{border-radius:4px}.duet-tooltip-scrollable::-webkit-scrollbar-thumb{border-radius:4px;background:#e1e3e6}.duet-theme-turva .duet-tooltip-scrollable::-webkit-scrollbar-thumb{background:#e6e6e6}.duet-tooltip-label{-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-left:12px!important;white-space:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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;vertical-align:top;font-weight:600;line-height:1.25;z-index:100;text-align:left;max-width:calc(100% - 32px);position:relative;display:inline-block}.duet-theme-turva .duet-tooltip-label{font-family:turva-sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}"},enumerable:true,configurable:true});return e}());var r=e("duet_visually_hidden",function(){function e(e){t(this,e)}e.prototype.render=function(){return o(n,{class:"duet-visually-hidden"},o("slot",null))};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;position:absolute!important;top:0;clip:rect(1px,1px,1px,1px)!important;overflow:hidden!important;height:1px!important;width:1px!important;padding:0!important;border:0!important}"},enumerable:true,configurable:true});return e}())}}}));