@duetds/components/lib/duet/p-nmnehyab.entry.js

This package includes Duet Core Components and related tools.

import{r as t,h as i,H as s,c as o}from"./p-6403d5dc.js";import{a as e}from"./p-da8c2c96.js";const h=class{constructor(i){t(this,i),this.tooltipId=e("DuetTooltip"),this.tooltip=null,this.scrollable=null,this.lastScrollTop=0,this.timer=null,this.openDown=!1,this.visible=!0,this.theme="",this.accessibleLabel="Näytä lisätietoja",this.label="",this.positionVertical="0",this.positionHorizontal="0",this.active=!1,this.toggleTooltip=t=>{t.preventDefault(),this.active?this.closeTooltip():(this.active=!0,this.visible=this.isElementInViewport(this.element.shadowRoot.querySelector(".duet-tooltip")),this.visible||(this.openDown=!0),this.element.style.zIndex="201",window.addEventListener("scroll",this.onScroll,!1),window.addEventListener("resize",this.closeTooltip,!1),document.addEventListener("mousedown",this.handleMouseDown,!1),setTimeout(()=>{this.scrollable.focus({preventScroll:!0}),window.addEventListener("keyup",this.handleKeyUp,!1),window.addEventListener("keydown",this.handleKeyDown,!1),window.parent&&(window.parent.addEventListener("keyup",this.handleKeyUp,!1),window.parent.addEventListener("keydown",this.handleKeyDown,!1)),this.scrollable.addEventListener("blur",this.closeTooltip,!1)},305))},this.handleKeyUp=t=>{this.active&&("Escape"!==t.key&&"Esc"!==t.key&&27!==t.keyCode||this.closeTooltip(),"Space"!==t.key&&32!==t.keyCode||this.closeTooltip(),"Enter"!==t.key&&13!==t.keyCode||this.closeTooltip())},this.handleKeyDown=t=>{this.active&&("Space"!==t.key&&32!==t.keyCode||t.preventDefault())},this.handleMouseDown=t=>{t.target===this.element&&(t.preventDefault(),t.stopPropagation())},this.closeTooltip=()=>{this.active=!1,window.removeEventListener("keyup",this.handleKeyUp),window.removeEventListener("keydown",this.handleKeyDown),window.removeEventListener("scroll",this.onScroll),window.removeEventListener("resize",this.closeTooltip),document.removeEventListener("mousedown",this.handleMouseDown),this.scrollable.removeEventListener("blur",this.closeTooltip),window.parent&&(window.parent.removeEventListener("keyup",this.handleKeyUp),window.parent.removeEventListener("keydown",this.handleKeyDown)),setTimeout(()=>{this.openDown=!1,this.tooltip.classList.remove("duet-tooltip-down"),this.element.style.zIndex="200",this.element.shadowRoot.querySelector(".duet-tooltip-button").focus({preventScroll:!0})},300)},this.isElementInViewport=t=>{var i=t.getBoundingClientRect();return(i.top>=100&&i.left>=0&&i.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&i.right<=(window.innerWidth||document.documentElement.clientWidth))},this.onScroll=()=>{this.visible=this.isElementInViewport(this.tooltip),clearTimeout(this.timer);const t=window.pageYOffset||document.documentElement.scrollTop;this.timer=setTimeout(()=>{this.visible||(t>this.lastScrollTop?(this.tooltip.classList.add("duet-tooltip-down"),this.openDown=!0):(this.tooltip.classList.remove("duet-tooltip-down"),this.openDown=!1)),this.lastScrollTop=t<=0?0:t},100)}}componentWillLoad(){"default"!==this.theme&&document.documentElement.classList.contains("duet-theme-turva")&&(this.theme="turva")}componentDidLoad(){this.tooltip=this.element.shadowRoot.querySelector(".duet-tooltip"),this.scrollable=this.element.shadowRoot.querySelector(".duet-tooltip-scrollable")}render(){return i(s,{style:{transform:"translateY("+this.positionVertical+") translateX("+this.positionHorizontal+")"}},i("button",{"aria-controls":this.tooltipId,"aria-expanded":this.active,onClick:t=>this.toggleTooltip(t),class:{"duet-tooltip-button":!0,"duet-tooltip-button-has-label":""!==this.label,"duet-theme-turva":"turva"===this.theme}},i("svg",{"aria-hidden":"true",role:"img",fill:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},i("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"}),i("circle",{cx:"11.625",cy:"7.125",r:"1.125"}),i("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?i("span",{class:"duet-tooltip-label"},this.label):i("duet-visually-hidden",null,this.accessibleLabel)),i("div",{class:{"duet-tooltip":!0,"duet-theme-turva":"turva"===this.theme,"duet-tooltip-down":this.openDown,"duet-tooltip-has-label":""!==this.label,active:!0===this.active}},i("div",{class:"duet-tooltip-scrollable",tabindex:"0",role:"tooltip",id:this.tooltipId},i("slot",null))))}get element(){return o(this)}static get style(){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}"}},l=class{constructor(i){t(this,i)}render(){return i(s,{class:"duet-visually-hidden"},i("slot",null))}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;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}"}};export{h as duet_tooltip,l as duet_visually_hidden};