@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 17.7 kB
JavaScript
var __awaiter=this&&this.__awaiter||function(e,t,i,o){function r(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,a){function n(e){try{l(o.next(e))}catch(t){a(t)}}function s(e){try{l(o["throw"](e))}catch(t){a(t)}}function l(e){e.done?i(e.value):r(e.value).then(n,s)}l((o=o.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},o,r,a,n;return n={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function s(e){return function(t){return l([e,t])}}function l(n){if(o)throw new TypeError("Generator is already executing.");while(i)try{if(o=1,r&&(a=n[0]&2?r["return"]:n[0]?r["throw"]||((a=r["return"])&&a.call(r),0):r.next)&&!(a=a.call(r,n[1])).done)return a;if(r=0,a)n=[n[0]&2,a.value];switch(n[0]){case 0:case 1:a=n;break;case 4:i.label++;return{value:n[1],done:false};case 5:i.label++;r=n[1];n=[0];continue;case 7:n=i.ops.pop();i.trys.pop();continue;default:if(!(a=i.trys,a=a.length>0&&a[a.length-1])&&(n[0]===6||n[0]===2)){i=0;continue}if(n[0]===3&&(!a||n[1]>a[0]&&n[1]<a[3])){i.label=n[1];break}if(n[0]===6&&i.label<a[1]){i.label=a[1];a=n;break}if(a&&i.label<a[2]){i.label=a[2];i.ops.push(n);break}if(a[2])i.ops.pop();i.trys.pop();continue}n=t.call(e,i)}catch(s){n=[6,s];r=0}finally{o=a=0}if(n[0]&5)throw n[1];return{value:n[0]?n[1]:void 0,done:true}}};System.register(["./p-c97dd66b.system.js","./p-466a0799.system.js","./p-f1259a9b.system.js"],(function(e){"use strict";var t,i,o,r,a,n,s,l;return{setters:[function(e){t=e.r;i=e.c;o=e.h;r=e.H;a=e.g},function(e){n=e.f;s=e.g},function(e){l=e.g}],execute:function(){function c(e,t,i,o,r){if(o===void 0){o=20}if(r===void 0){r=0}var a=[];if(r>=o){return a}var n=function(e){var a=e.assignedNodes().filter((function(e){return e.nodeType===1}));if(a.length>0){return c(a[0].parentElement,t,i,o,r+1)}return[]};var s=Array.from(e.children||[]);for(var l=0,d=s;l<d.length;l++){var m=d[l];if(t(m)){continue}if(i(m)){a.push(m)}if(m.shadowRoot!=null){a.push.apply(a,c(m.shadowRoot,t,i,o,r+1))}else if(m.tagName==="SLOT"){a.push.apply(a,n(m))}else{a.push.apply(a,c(m,t,i,o,r+1))}}return a}function d(e){return e.hasAttribute("hidden")||e.hasAttribute("aria-hidden")&&e.getAttribute("aria-hidden")!=="false"||e.style.display==="none"||e.style.opacity==="0"||e.style.visibility==="hidden"||e.style.visibility==="collapse"}function m(e){return e.hasAttribute("disabled")||e.hasAttribute("aria-disabled")&&e.getAttribute("aria-disabled")!=="false"}function u(e){if(e.getAttribute("tabindex")==="-1"||d(e)||m(e)){return false}return e.hasAttribute("tabindex")||(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)&&e.hasAttribute("href")||(e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement)||e instanceof HTMLIFrameElement}var f="@-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{position:fixed;top:0;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;overflow-y:hidden;color:var(--calcite-ui-text-2);opacity:0;visibility:hidden !important;-webkit-transition:visibility 0ms linear 300ms, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:visibility 0ms linear 300ms, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88);z-index:101;--calcite-modal-padding:0.75rem;--calcite-modal-padding-large:1rem;--calcite-modal-title-text:var(--calcite-font-size-2);--calcite-modal-content-text:var(--calcite-font-size-0)}:host([scale=s]){--calcite-modal-padding:0.5rem;--calcite-modal-padding-large:0.75rem;--calcite-modal-title-text:var(--calcite-font-size-1);--calcite-modal-content-text:var(--calcite-font-size--1)}:host([scale=l]){--calcite-modal-padding:1rem;--calcite-modal-padding-large:1.25rem;--calcite-modal-title-text:var(--calcite-font-size-3);--calcite-modal-content-text:var(--calcite-font-size-1)}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;display:-ms-flexbox;display:flex;overflow-y:hidden}.modal{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);box-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);-webkit-box-sizing:border-box;box-sizing:border-box;float:none;margin:1.5rem;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);width:100%;z-index:102;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;pointer-events:none;-webkit-transition:visibility 0ms linear 300ms, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), -webkit-transform 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:visibility 0ms linear 300ms, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), -webkit-transform 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:transform 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear 300ms, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:transform 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear 300ms, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), -webkit-transform 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88);-webkit-transform:translate3d(0, 20px, 0);transform:translate3d(0, 20px, 0)}:host([is-active]){opacity:1;visibility:visible !important;-webkit-transition-delay:0ms;transition-delay:0ms}:host([is-active]) .modal{opacity:1;pointer-events:auto;visibility:visible;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:visibility 0ms linear, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), max-width 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), max-height 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), -webkit-transform 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:visibility 0ms linear, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), max-width 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), max-height 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), -webkit-transform 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:transform 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), max-width 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), max-height 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88);transition:transform 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), max-width 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), max-height 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), -webkit-transform 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88);-webkit-transition-delay:0ms;transition-delay:0ms}.header{display:-ms-flexbox;display:flex;max-width:100%;min-width:0;border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);-ms-flex:0 0 auto;flex:0 0 auto;z-index:2;border-bottom:1px solid}.close{margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-style:none;color:var(--calcite-ui-text-1);-ms-flex-order:2;order:2;cursor:pointer;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;padding:var(--calcite-modal-padding);-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out;background-color:transparent;border-radius:0 var(--calcite-border-radius) 0 0}.close calcite-icon{pointer-events:none;vertical-align:-2px}.close:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.close:hover,.close:focus{background-color:var(--calcite-ui-foreground-2)}.close:active{background-color:var(--calcite-ui-foreground-3)}:host([dir=rtl]) .close{border-radius:var(--calcite-border-radius) 0 0 0}.title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-order:1;order:1;min-width:0;-ms-flex:1 1 auto;flex:1 1 auto;padding:var(--calcite-modal-padding) var(--calcite-modal-padding-large)}slot[name=header]::slotted(*),*::slotted([slot=header]){margin:0;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-1);font-size:var(--calcite-modal-title-text)}.content{position:relative;padding:0;height:100%;overflow:auto;display:block;background-color:var(--calcite-ui-foreground-1);-webkit-box-sizing:border-box;box-sizing:border-box;max-height:calc(100vh - 12rem);z-index:1}.content--spaced{padding:var(--calcite-modal-padding-large)}slot[name=content]::slotted(*),*::slotted([slot=content]){font-size:var(--calcite-modal-content-text);line-height:1.5}:host([background-color=grey]) .content{background-color:var(--calcite-ui-background)}.footer{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;margin-top:auto;-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom-right-radius:0.25rem;border-bottom-left-radius:0.25rem;width:100%;background-color:var(--calcite-ui-foreground-1);-ms-flex:0 0 auto;flex:0 0 auto;padding:var(--calcite-modal-padding);border-top:1px solid var(--calcite-ui-border-3);z-index:2}.footer--hide-back .back,.footer--hide-secondary .secondary{display:none}.back{display:block;margin-right:auto}:host([dir=rtl]) .back{margin-left:auto;margin-right:0}.secondary{display:block;margin-left:0.25rem;margin-right:0.25rem}slot[name=primary]{display:block}:host([width=small]) .modal{width:auto}:host([width=s]) .modal{max-width:32rem}@media screen and (max-width: 35rem){:host([width=s]) .modal{height:100%;max-height:100%;width:100%;max-width:100%;margin:0;border-radius:0}:host([width=s]) .content{-ms-flex:1 1 auto;flex:1 1 auto;max-height:unset}:host([width=s][docked]){-ms-flex-align:end;align-items:flex-end}}:host([width=m]) .modal{max-width:48rem}@media screen and (max-width: 51rem){:host([width=m]) .modal{height:100%;max-height:100%;width:100%;max-width:100%;margin:0;border-radius:0}:host([width=m]) .content{-ms-flex:1 1 auto;flex:1 1 auto;max-height:unset}:host([width=m][docked]){-ms-flex-align:end;align-items:flex-end}}:host([width=l]) .modal{max-width:94rem}@media screen and (max-width: 97rem){:host([width=l]) .modal{height:100%;max-height:100%;width:100%;max-width:100%;margin:0;border-radius:0}:host([width=l]) .content{-ms-flex:1 1 auto;flex:1 1 auto;max-height:unset}:host([width=l][docked]){-ms-flex-align:end;align-items:flex-end}}:host([fullscreen]){background-color:transparent}:host([fullscreen]) .modal{height:100%;max-height:100%;width:100%;max-width:100%;margin:0;-webkit-transform:translate3D(0, 20px, 0) scale(0.95);transform:translate3D(0, 20px, 0) scale(0.95)}:host([fullscreen]) .content{max-height:100%;-ms-flex:1 1 auto;flex:1 1 auto}:host([is-active][fullscreen]) .modal{-webkit-transform:translate3D(0, 0, 0) scale(1);transform:translate3D(0, 0, 0) scale(1)}:host([is-active][fullscreen]) .header{border-radius:0}:host([is-active][fullscreen]) .footer{border-radius:0}:host([docked]) .modal{height:auto}:host([docked]) .content{height:auto;-ms-flex:1 1 auto;flex:1 1 auto}@media screen and (max-width: 860px){:host([docked]) .modal{border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}:host([docked]) .close{border-radius:0 var(--calcite-border-radius) 0 0}}@media screen and (max-width: 860px){:host([docked][dir=rtl]) .close{border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}}:host([color=red]) .modal{border-top:4px solid var(--calcite-ui-red-1)}:host([color=blue]) .modal{border-top:4px solid var(--calcite-ui-blue-1)}:host([color=red]) .header,:host([color=blue]) .header{border-radius:0.25rem}@media screen and (max-width: 860px){slot[name=header]::slotted(*),*::slotted([slot=header]){font-size:var(--calcite-font-size-1)}.footer{position:-webkit-sticky;position:sticky;bottom:0}}@media screen and (max-width: 480px){.footer{-ms-flex-direction:column;flex-direction:column}:host([dir=rtl]) .back,.back,.secondary{margin:0;margin-bottom:0.25rem}}";function h(e){return typeof e.setFocus==="function"||u(e)}function b(e){return c(e,d,h)}var p=e("calcite_modal",function(){function e(e){var o=this;t(this,e);this.calciteModalOpen=i(this,"calciteModalOpen",7);this.calciteModalClose=i(this,"calciteModalClose",7);this.beforeClose=function(){return Promise.resolve()};this.intlClose="Close";this.scale="m";this.width="m";this.backgroundColor="white";this.close=function(){return o.beforeClose(o.el).then((function(){o.active=false;o.isActive=false;n(o.previousActiveElement);o.removeOverflowHiddenClass();setTimeout((function(){return o.calciteModalClose.emit()}),300)}))};this.focusFirstElement=function(){n(o.closeButtonEl)};this.focusLastElement=function(){var e=b(o.el).filter((function(e){return!e.getAttribute("data-focus-fence")}));if(e.length>0){n(e[e.length-1])}else{n(o.closeButtonEl)}}}e.prototype.componentWillLoad=function(){if(this.active){this.open()}};e.prototype.disconnectedCallback=function(){this.removeOverflowHiddenClass()};e.prototype.render=function(){var e=this;var t=s(this.el);return o(r,{"aria-modal":"true",dir:t,"is-active":this.isActive,role:"dialog"},o("calcite-scrim",{class:"scrim",theme:"dark"}),this.renderStyle(),o("div",{class:"modal"},o("div",{"data-focus-fence":true,onFocus:this.focusLastElement,tabindex:"0"}),o("div",{class:"header"},this.renderCloseButton(),o("header",{class:"title"},o("slot",{name:"header"}))),o("div",{class:{content:true,"content--spaced":!this.noPadding},ref:function(t){return e.modalContent=t}},o("slot",{name:"content"})),this.renderFooter(),o("div",{"data-focus-fence":true,onFocus:this.focusFirstElement,tabindex:"0"})))};e.prototype.renderFooter=function(){return this.el.querySelector("[slot=back], [slot=secondary], [slot=primary]")?o("div",{class:"footer"},o("span",{class:"back"},o("slot",{name:"back"})),o("span",{class:"secondary"},o("slot",{name:"secondary"})),o("span",{class:"primary"},o("slot",{name:"primary"}))):null};e.prototype.renderCloseButton=function(){var e=this;return!this.disableCloseButton?o("button",{"aria-label":this.intlClose,class:"close",onClick:this.close,ref:function(t){return e.closeButtonEl=t},title:this.intlClose},o("calcite-icon",{icon:"x",scale:"l"})):null};e.prototype.renderStyle=function(){var e=!isNaN(parseInt(""+this.width));return e?o("style",null,"\n .modal {\n max-width: "+this.width+"px;\n }\n @media screen and (max-width: "+this.width+"px) {\n .modal {\n height: 100%;\n max-height: 100%;\n width: 100%;\n max-width: 100%;\n margin: 0;\n border-radius: 0;\n }\n .content {\n flex: 1 1 auto;\n max-height: unset;\n }\n }\n "):null};e.prototype.handleEscape=function(e){if(this.active&&!this.disableEscape&&l(e.key)==="Escape"){this.close()}};e.prototype.focusElement=function(e){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(i){if(e){n(e);return[2]}t=b(this.el);if(t.length>0){n(t[0])}else{n(this.closeButtonEl)}return[2]}))}))};e.prototype.scrollContent=function(e,t){if(e===void 0){e=0}if(t===void 0){t=0}return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(i){if(this.modalContent){if(this.modalContent.scrollTo){this.modalContent.scrollTo({top:e,left:t,behavior:"smooth"})}else{this.modalContent.scrollTop=e;this.modalContent.scrollLeft=t}}return[2]}))}))};e.prototype.toggleModal=function(e,t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(i){if(e!==t){if(e){this.open()}else if(!e){this.close()}}return[2]}))}))};e.prototype.open=function(){var e=this;this.previousActiveElement=document.activeElement;this.isActive=true;setTimeout((function(){e.focusElement(e.firstFocus);e.calciteModalOpen.emit()}),300);document.documentElement.classList.add("overflow-hidden")};e.prototype.removeOverflowHiddenClass=function(){document.documentElement.classList.remove("overflow-hidden")};Object.defineProperty(e.prototype,"el",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{active:["toggleModal"]}},enumerable:false,configurable:true});return e}());p.style=f}}}));