@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 12.5 kB
JavaScript
var __awaiter=this&&this.__awaiter||function(e,t,r,o){function n(e){return e instanceof r?e:new r((function(t){t(e)}))}return new(r||(r=Promise))((function(r,i){function a(e){try{l(o.next(e))}catch(t){i(t)}}function s(e){try{l(o["throw"](e))}catch(t){i(t)}}function l(e){e.done?r(e.value):n(e.value).then(a,s)}l((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var r={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},o,n,i,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return l([e,t])}}function l(a){if(o)throw new TypeError("Generator is already executing.");while(r)try{if(o=1,n&&(i=a[0]&2?n["return"]:a[0]?n["throw"]||((i=n["return"])&&i.call(n),0):n.next)&&!(i=i.call(n,a[1])).done)return i;if(n=0,i)a=[a[0]&2,i.value];switch(a[0]){case 0:case 1:i=a;break;case 4:r.label++;return{value:a[1],done:false};case 5:r.label++;n=a[1];a=[0];continue;case 7:a=r.ops.pop();r.trys.pop();continue;default:if(!(i=r.trys,i=i.length>0&&i[i.length-1])&&(a[0]===6||a[0]===2)){r=0;continue}if(a[0]===3&&(!i||a[1]>i[0]&&a[1]<i[3])){r.label=a[1];break}if(a[0]===6&&r.label<i[1]){r.label=i[1];i=a;break}if(i&&r.label<i[2]){r.label=i[2];r.ops.push(a);break}if(i[2])r.ops.pop();r.trys.pop();continue}a=t.call(e,r)}catch(s){a=[6,s];n=0}finally{o=i=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-1720b7a7.system.js","./p-353740c8.system.js","./p-2c235db8.system.js","./p-60d9e7d4.system.js","./p-0a18b2ae.system.js"],(function(e){"use strict";var t,r,o,n,i,a,s,l,c,p,f,d,u,h,m,b;return{setters:[function(e){t=e.r;r=e.c;o=e.f;n=e.h;i=e.H;a=e.g},function(e){s=e.d;l=e.u;c=e.c;p=e.C},function(e){f=e.g},function(e){d=e.q;u=e.g;h=e.C;m=e.j},function(e){b=e.C}],execute:function(){var v={container:"container",arrow:"arrow",imageContainer:"image-container",closeButton:"close-button",content:"content",hasHeader:"has-header",header:"header",headerContent:"header-content",heading:"heading"};var y={close:"Close"};var g="data-calcite-popover-reference";var w="aria-controls";var x="aria-expanded";var k=2;var D='@-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-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:block;position:absolute;z-index:900;-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)}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:"";-webkit-box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);-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}:host{pointer-events:none}:host([open]){pointer-events:initial}.calcite-popper-anim{background-color:var(--calcite-ui-foreground-1);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);border-radius:0.25rem}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}.header{border-width:0;border-bottom-width:1px;border-bottom-color:var(--calcite-ui-border-3);border-style:solid;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-foreground-1);-ms-flex-pack:start;justify-content:flex-start}.heading{display:block;-ms-flex:1 1 auto;flex:1 1 auto;font-weight:var(--calcite-font-weight-medium);margin:0;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;-ms-flex-item-align:center;align-self:center;color:var(--calcite-ui-text-1);font-size:var(--calcite-font-size-0);line-height:1.375;white-space:normal;word-wrap:break-word;word-break:break-word}.container{background-color:var(--calcite-ui-foreground-1);position:relative;display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row;height:100%;color:var(--calcite-ui-text-1);border-radius:0.25rem}.container.has-header{-ms-flex-direction:column;flex-direction:column}.content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-item-align:center;align-self:center;height:100%}.calcite--rtl .close-button{border-radius:0.25rem 0 0 0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}';var _=e("calcite_popover",function(){function e(e){var o=this;t(this,e);this.calcitePopoverClose=r(this,"calcitePopoverClose",7);this.calcitePopoverOpen=r(this,"calcitePopoverOpen",7);this.closeButton=false;this.dismissible=false;this.disableFlip=false;this.disablePointer=false;this.offsetDistance=s;this.offsetSkidding=0;this.open=false;this.overlayPositioning="absolute";this.placement="auto";this.intlClose=y.close;this._referenceElement=this.getReferenceElement();this.guid="calcite-popover-"+f();this.getId=function(){return o.el.id||o.guid};this.setExpandedAttr=function(){var e=o,t=e._referenceElement,r=e.open;if(!t){return}t.setAttribute(x,r.toString())};this.addReferences=function(){var e=o._referenceElement;if(!e){return}var t=o.getId();e.setAttribute(g,t);e.setAttribute(w,t);o.setExpandedAttr()};this.removeReferences=function(){var e=o._referenceElement;if(!e){return}e.removeAttribute(g);e.removeAttribute(w);e.removeAttribute(x)};this.hide=function(){o.open=false}}e.prototype.offsetDistanceOffsetHandler=function(){this.reposition()};e.prototype.offsetSkiddingHandler=function(){this.reposition()};e.prototype.openHandler=function(e){this.reposition();this.setExpandedAttr();if(e){this.calcitePopoverOpen.emit()}else{this.calcitePopoverClose.emit()}};e.prototype.placementHandler=function(){this.reposition()};e.prototype.referenceElementHandler=function(){this.removeReferences();this._referenceElement=this.getReferenceElement();this.addReferences();this.createPopper()};e.prototype.componentDidLoad=function(){this.createPopper();this.addReferences()};e.prototype.disconnectedCallback=function(){this.removeReferences();this.destroyPopper()};e.prototype.reposition=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,r,o,n;return __generator(this,(function(i){e=this,t=e.popper,r=e.el,o=e.placement;n=this.getModifiers();t?l({el:r,modifiers:n,placement:o,popper:t}):this.createPopper();return[2]}))}))};e.prototype.setFocus=function(e){return __awaiter(this,void 0,void 0,(function(){var t,r;return __generator(this,(function(n){r=this.closeButtonEl;if(e==="close-button"&&r){o(r);r.setFocus();return[2]}(t=this.el)===null||t===void 0?void 0:t.focus();return[2]}))}))};e.prototype.toggle=function(e){if(e===void 0){e=!this.open}return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.open=e;return[2]}))}))};e.prototype.getReferenceElement=function(){var e=this,t=e.referenceElement,r=e.el;return(typeof t==="string"?d(r,"#"+t):t)||null};e.prototype.getModifiers=function(){var e=this,t=e.arrowEl,r=e.flipPlacements,o=e.disableFlip,n=e.disablePointer,i=e.offsetDistance,a=e.offsetSkidding;var s={name:"flip",enabled:!o};if(r){s.options={fallbackPlacements:r}}var l={name:"arrow",enabled:!n};if(t){l.options={element:t}}var c={name:"offset",enabled:true,options:{offset:[a,i]}};return[l,s,c]};e.prototype.createPopper=function(){this.destroyPopper();var e=this,t=e.el,r=e.placement,o=e._referenceElement,n=e.overlayPositioning;var i=this.getModifiers();this.popper=c({el:t,modifiers:i,overlayPositioning:n,placement:r,referenceEl:o})};e.prototype.destroyPopper=function(){var e=this.popper;if(e){e.destroy()}this.popper=null};e.prototype.renderCloseButton=function(){var e=this;var t=this,r=t.dismissible,o=t.closeButton,i=t.intlClose;return r||o?n("calcite-action",{class:v.closeButton,onClick:this.hide,ref:function(t){return e.closeButtonEl=t},text:i},n("calcite-icon",{icon:"x",scale:"m"})):null};e.prototype.renderHeader=function(){var e=this,t=e.heading,r=e.headingLevel;var o=t?n(b,{class:v.heading,level:r||k},t):null;return o?n("div",{class:v.header},o,this.renderCloseButton()):null};e.prototype.render=function(){var e,t;var r=this;var o=this,a=o._referenceElement,s=o.el,l=o.heading,c=o.label,f=o.open,d=o.disablePointer;var m=u(s)==="rtl";var b=a&&f;var y=!b;var g=!d?n("div",{class:v.arrow,ref:function(e){return r.arrowEl=e}}):null;return n(i,{"aria-hidden":y.toString(),"aria-label":c,"calcite-hydrated-hidden":y,id:this.getId(),role:"dialog"},n("div",{class:(e={},e[h.rtl]=m,e[p.animation]=true,e[p.animationActive]=b,e)},g,n("div",{class:(t={},t[v.hasHeader]=!!l,t[v.container]=true,t)},this.renderHeader(),n("div",{class:v.content},n("slot",null)),!l?this.renderCloseButton():null)))};Object.defineProperty(e.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{offsetDistance:["offsetDistanceOffsetHandler"],offsetSkidding:["offsetSkiddingHandler"],open:["openHandler"],placement:["placementHandler"],referenceElement:["referenceElementHandler"]}},enumerable:false,configurable:true});return e}());_.style=D;var P=e("calcite_popover_manager",function(){function e(e){var r=this;t(this,e);this.selector="["+g+"]";this.getRelatedPopover=function(e){var t;var o=r,n=o.selector,i=o.el;var a=(t=e.closest(n))===null||t===void 0?void 0:t.getAttribute(g);return d(i,"#"+a)}}e.prototype.render=function(){return n("slot",null)};e.prototype.closeOpenPopovers=function(e){var t=e.target;var r=this,o=r.autoClose,n=r.el;var i="calcite-popover";var a=t.closest(i);var s=this.getRelatedPopover(t);if(o&&!a){m(n,i).filter((function(e){return e.open&&e!==s})).forEach((function(e){return e.toggle(false)}))}if(!n.contains(t)||!s){return}s.toggle()};Object.defineProperty(e.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});return e}())}}}));