@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
5 lines • 15.5 kB
JavaScript
var __awaiter=this&&this.__awaiter||function(t,e,a,i){function n(t){return t instanceof a?t:new a((function(e){e(t)}))}return new(a||(a=Promise))((function(a,o){function r(t){try{c(i.next(t))}catch(t){o(t)}}function s(t){try{c(i["throw"](t))}catch(t){o(t)}}function c(t){t.done?a(t.value):n(t.value).then(r,s)}c((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var a={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,n,o,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(t){return function(e){return c([t,e])}}function c(r){if(i)throw new TypeError("Generator is already executing.");while(a)try{if(i=1,n&&(o=r[0]&2?n["return"]:r[0]?n["throw"]||((o=n["return"])&&o.call(n),0):n.next)&&!(o=o.call(n,r[1])).done)return o;if(n=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:a.label++;return{value:r[1],done:false};case 5:a.label++;n=r[1];r=[0];continue;case 7:r=a.ops.pop();a.trys.pop();continue;default:if(!(o=a.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){a=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){a.label=r[1];break}if(r[0]===6&&a.label<o[1]){a.label=o[1];o=r;break}if(o&&a.label<o[2]){a.label=o[2];a.ops.push(r);break}if(o[2])a.ops.pop();a.trys.pop();continue}r=e.call(t,a)}catch(t){r=[6,t];n=0}finally{i=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
*/System.register(["./p-65dbbfb5.system.js","./p-e020662f.system.js","./p-f09e27b0.system.js","./p-ec9bab33.system.js"],(function(t){"use strict";var e,a,i,n,o,r,s,c,l,p;return{setters:[function(t){e=t.r;a=t.h;i=t.H;n=t.g},function(t){o=t.g},function(t){r=t.a;s=t.u;c=t.c;l=t.C},function(t){p=t.q}],execute:function(){var f={container:"container",arrow:"arrow"};var m=500;var u="data-calcite-tooltip-reference";var d="aria-describedby";var h='@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block;position:absolute;z-index:999;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([data-popper-placement][data-popper-escaped]),:host([data-popper-placement][data-popper-reference-hidden]){pointer-events:none;opacity:0}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:"";--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}.container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);overflow:hidden;max-width:20rem;max-height:20rem}.calcite-popper-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}';var v=t("calcite_tooltip",function(){function t(t){var a=this;e(this,t);this.offsetDistance=r;this.offsetSkidding=0;this.open=false;this.overlayPositioning="absolute";this.placement="auto";this.guid="calcite-tooltip-".concat(o());this.setUpReferenceElement=function(){a.removeReferences();a.effectiveReferenceElement=a.getReferenceElement();var t=a,e=t.el,i=t.referenceElement,n=t.effectiveReferenceElement;if(i&&!n){console.warn("".concat(e.tagName,': reference-element id "').concat(i,'" was not found.'),{el:e})}a.addReferences();a.createPopper()};this.getId=function(){return a.el.id||a.guid};this.addReferences=function(){var t=a.effectiveReferenceElement;if(!t){return}var e=a.getId();t.setAttribute(u,e);t.setAttribute(d,e)};this.removeReferences=function(){var t=a.effectiveReferenceElement;if(!t){return}t.removeAttribute(u);t.removeAttribute(d)};this.show=function(){a.open=true};this.hide=function(){a.open=false}}t.prototype.offsetDistanceOffsetHandler=function(){this.reposition()};t.prototype.offsetSkiddingHandler=function(){this.reposition()};t.prototype.openHandler=function(){this.reposition()};t.prototype.placementHandler=function(){this.reposition()};t.prototype.referenceElementHandler=function(){this.setUpReferenceElement()};t.prototype.componentWillLoad=function(){this.setUpReferenceElement()};t.prototype.componentDidLoad=function(){this.reposition()};t.prototype.disconnectedCallback=function(){this.removeReferences();this.destroyPopper()};t.prototype.reposition=function(){return __awaiter(this,void 0,void 0,(function(){var t,e,a,i,n,o;return __generator(this,(function(r){switch(r.label){case 0:t=this,e=t.popper,a=t.el,i=t.placement;n=this.getModifiers();if(!e)return[3,2];return[4,s({el:a,modifiers:n,placement:i,popper:e})];case 1:o=r.sent();return[3,3];case 2:o=this.createPopper();r.label=3;case 3:o;return[2]}}))}))};t.prototype.getReferenceElement=function(){var t=this,e=t.referenceElement,a=t.el;return(typeof e==="string"?p(a,{id:e}):e)||null};t.prototype.getModifiers=function(){var t=this,e=t.arrowEl,a=t.offsetDistance,i=t.offsetSkidding;var n={name:"arrow",enabled:true,options:{element:e}};var o={name:"offset",enabled:true,options:{offset:[i,a]}};var r={name:"eventListeners",enabled:this.open};return[n,o,r]};t.prototype.createPopper=function(){this.destroyPopper();var t=this,e=t.el,a=t.placement,i=t.effectiveReferenceElement,n=t.overlayPositioning;var o=this.getModifiers();this.popper=c({el:e,modifiers:o,placement:a,overlayPositioning:n,referenceEl:i})};t.prototype.destroyPopper=function(){var t=this.popper;if(t){t.destroy()}this.popper=null};t.prototype.render=function(){var t;var e=this;var n=this,o=n.effectiveReferenceElement,r=n.label,s=n.open;var c=o&&s;var p=!c;return a(i,{"aria-hidden":p.toString(),"aria-label":r,"calcite-hydrated-hidden":p,id:this.getId(),role:"tooltip"},a("div",{class:(t={},t[l.animation]=true,t[l.animationActive]=c,t)},a("div",{class:f.arrow,ref:function(t){return e.arrowEl=t}}),a("div",{class:f.container},a("slot",null))))};Object.defineProperty(t.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{offsetDistance:["offsetDistanceOffsetHandler"],offsetSkidding:["offsetSkiddingHandler"],open:["openHandler"],placement:["placementHandler"],referenceElement:["referenceElementHandler"]}},enumerable:false,configurable:true});return t}());v.style=h;var b="@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:block}";var w=t("calcite_tooltip_manager",function(){function t(t){var a=this;e(this,t);this.hoverTimeouts=new WeakMap;this.selector="[".concat(u,"]");this.queryTooltip=function(t){var e=a.el;if(!t.includes(e)){return null}var i=t.find((function(t){var e;return(e=t===null||t===void 0?void 0:t.hasAttribute)===null||e===void 0?void 0:e.call(t,u)}));if(!i){return null}var n=i.getAttribute(u);return p(e,{id:n})};this.clearHoverTimeout=function(t){var e=a.hoverTimeouts;if(e.has(t)){window.clearTimeout(e.get(t));e.delete(t)}};this.closeExistingTooltip=function(){var t=a.tooltipEl;if(t){a.toggleTooltip(t,false)}};this.focusTooltip=function(t){var e=t.tooltip,i=t.value;a.closeExistingTooltip();if(i){a.clearHoverTimeout(e)}a.toggleTooltip(e,i)};this.toggleTooltip=function(t,e){t.open=e;if(e){a.tooltipEl=t}};this.hoverToggle=function(t){var e=t.tooltip,i=t.value;var n=a.hoverTimeouts;n.delete(e);if(i){a.closeExistingTooltip()}a.toggleTooltip(e,i)};this.hoverTooltip=function(t){var e=t.tooltip,i=t.value;a.clearHoverTimeout(e);var n=a.hoverTimeouts;var o=window.setTimeout((function(){return a.hoverToggle({tooltip:e,value:i})}),m);n.set(e,o)};this.activeTooltipHover=function(t){var e=a,i=e.tooltipEl,n=e.hoverTimeouts;var o=t.type;if(!i){return}if(o==="mouseover"&&t.composedPath().includes(i)){a.clearHoverTimeout(i)}else if(o==="mouseout"&&!n.has(i)){a.hoverTooltip({tooltip:i,value:false})}};this.hoverEvent=function(t,e){var i=a.queryTooltip(t.composedPath());a.activeTooltipHover(t);if(!i){return}a.hoverTooltip({tooltip:i,value:e})};this.focusEvent=function(t,e){var i=a.queryTooltip(t.composedPath());if(!i||i===a.clickedTooltip){a.clickedTooltip=null;return}a.focusTooltip({tooltip:i,value:e})}}t.prototype.render=function(){return a("slot",null)};t.prototype.keyUpHandler=function(t){if(t.key==="Escape"){var e=this.tooltipEl;if(e){this.clearHoverTimeout(e);this.toggleTooltip(e,false)}}};t.prototype.mouseEnterShow=function(t){this.hoverEvent(t,true)};t.prototype.mouseLeaveHide=function(t){this.hoverEvent(t,false)};t.prototype.clickHandler=function(t){var e=this.queryTooltip(t.composedPath());this.clickedTooltip=e;if(e){this.toggleTooltip(e,false)}};t.prototype.focusShow=function(t){this.focusEvent(t,true)};t.prototype.blurHide=function(t){this.focusEvent(t,false)};Object.defineProperty(t.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});return t}());w.style=b}}}));