@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 19.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}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-aa8afca4.js";import{f as focusElement,g as getElementDir,C as CSS_UTILITY,b as getSlotted,e as ensureId,i as isCalciteFocusable}from"./dom-466af3c7.js";import{g as getKey}from"./key-ec82f942.js";import"./guid-09142681.js";function queryShadowRoot(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 queryShadowRoot(a[0].parentElement,t,i,o,r+1)}return[]};var s=Array.from(e.children||[]);for(var l=0,c=s;l<c.length;l++){var d=c[l];if(t(d)){continue}if(i(d)){a.push(d)}if(d.shadowRoot!=null){a.push.apply(a,queryShadowRoot(d.shadowRoot,t,i,o,r+1))}else if(d.tagName==="SLOT"){a.push.apply(a,n(d))}else{a.push.apply(a,queryShadowRoot(d,t,i,o,r+1))}}return a}function isHidden(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 isDisabled(e){return e.hasAttribute("disabled")||e.hasAttribute("aria-disabled")&&e.getAttribute("aria-disabled")!=="false"}function isFocusable(e){if(e.getAttribute("tabindex")==="-1"||isHidden(e)||isDisabled(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 calciteModalCss="@-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}:host([scale=s]){--calcite-modal-padding:0.75rem;--calcite-modal-padding-large:1rem;--calcite-modal-title-text:var(--calcite-font-size-1);--calcite-modal-content-text:var(--calcite-font-size--1)}:host([scale=m]){--calcite-modal-padding:1rem;--calcite-modal-padding-large:1.25rem;--calcite-modal-title-text:var(--calcite-font-size-2);--calcite-modal-content-text:var(--calcite-font-size-0)}:host([scale=l]){--calcite-modal-padding:1.25rem;--calcite-modal-padding-large:1.5rem;--calcite-modal-title-text:var(--calcite-font-size-3);--calcite-modal-content-text:var(--calcite-font-size-1)}.scrim{--calcite-scrim-background:rgba(0, 0, 0, 0.75);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%;opacity:0;pointer-events:none;overflow:hidden;z-index:102;-webkit-overflow-scrolling:touch;visibility:hidden;-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([active]){opacity:1;visibility:visible !important;-webkit-transition-delay:0ms;transition-delay:0ms}:host([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);border-width:0;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);-ms-flex:0 0 auto;flex:0 0 auto;z-index:2}.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;border-top-right-radius:0.25rem;background-color:transparent;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}.close calcite-icon{pointer-events:none;vertical-align:-2px}.close:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.close:hover,.close:focus{background-color:var(--calcite-ui-foreground-2)}.close:active{background-color:var(--calcite-ui-foreground-2)}.calcite--rtl .close{border-top-left-radius:0.25rem;border-top-right-radius: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) var(--calcite-modal-padding-large)}.content--no-footer{border-bottom-right-radius:0.25rem;border-bottom-left-radius:0.25rem}slot[name=content]::slotted(*),*::slotted([slot=content]){font-size:var(--calcite-modal-content-text)}: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);border-width:0;border-top-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);-ms-flex:0 0 auto;flex:0 0 auto;padding:var(--calcite-modal-padding) var(--calcite-modal-padding-large);z-index:2}.footer--hide-back .back,.footer--hide-secondary .secondary{display:none}.back{display:block;margin-right:auto}.calcite--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([active][fullscreen]) .modal{-webkit-transform:translate3D(0, 0, 0) scale(1);transform:translate3D(0, 0, 0) scale(1)}:host([active][fullscreen]) .header{border-radius:0}:host([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]) .calcite--rtl .close{border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}}:host([color=red]) .modal{border-color:var(--calcite-ui-danger)}:host([color=blue]) .modal{border-color:var(--calcite-ui-info)}:host([color=red]) .modal,:host([color=blue]) .modal{border-width:0;border-top-width:4px;border-style:solid}:host([color=red]) .header,:host([color=blue]) .header{border-radius:0.25rem;border-bottom-right-radius:0;border-bottom-left-radius:0}@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}.calcite--rtl .back,.back,.secondary{margin:0;margin-bottom:0.25rem}}";var isFocusableExtended=function(e){return isCalciteFocusable(e)||isFocusable(e)};var getFocusableElements=function(e){return queryShadowRoot(e,isHidden,isFocusableExtended)};var CalciteModal=function(){function e(e){var t=this;registerInstance(this,e);this.calciteModalOpen=createEvent(this,"calciteModalOpen",7);this.calciteModalClose=createEvent(this,"calciteModalClose",7);this.beforeClose=function(){return Promise.resolve()};this.intlClose="Close";this.scale="m";this.width="m";this.backgroundColor="white";this.hasFooter=true;this.mutationObserver=null;this.handleOutsideClose=function(){if(t.disableOutsideClose){return}t.close()};this.close=function(){return t.beforeClose(t.el).then((function(){t.active=false;focusElement(t.previousActiveElement);t.removeOverflowHiddenClass();setTimeout((function(){return t.calciteModalClose.emit()}),300)}))};this.focusFirstElement=function(){focusElement(t.closeButtonEl)};this.focusLastElement=function(){var e=getFocusableElements(t.el).filter((function(e){return!e.getAttribute("data-focus-fence")}));if(e.length>0){focusElement(e[e.length-1])}else{focusElement(t.closeButtonEl)}};this.updateFooterVisibility=function(){t.hasFooter=!!t.el.querySelector("[slot=back], [slot=secondary], [slot=primary]")}}e.prototype.componentWillLoad=function(){if(this.active){this.open()}};e.prototype.connectedCallback=function(){var e;{if(!this.mutationObserver){this.mutationObserver=new MutationObserver(this.updateFooterVisibility)}(e=this.mutationObserver)===null||e===void 0?void 0:e.observe(this.el,{childList:true,subtree:true});this.updateFooterVisibility()}};e.prototype.disconnectedCallback=function(){var e;this.removeOverflowHiddenClass();(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()};e.prototype.render=function(){var e;var t=this;var i=getElementDir(this.el);return h(Host,{"aria-describedby":this.contentId,"aria-labelledby":this.titleId,"aria-modal":"true",role:"dialog"},h("calcite-scrim",{class:"scrim",onClick:this.handleOutsideClose}),this.renderStyle(),h("div",{class:(e={modal:true},e[CSS_UTILITY.rtl]=i==="rtl",e)},h("div",{"data-focus-fence":true,onFocus:this.focusLastElement,tabindex:"0"}),h("div",{class:"header"},this.renderCloseButton(),h("header",{class:"title"},h("slot",{name:"header"}))),h("div",{class:{content:true,"content--spaced":!this.noPadding,"content--no-footer":!this.hasFooter},ref:function(e){return t.modalContent=e}},h("slot",{name:"content"})),this.renderFooter(),h("div",{"data-focus-fence":true,onFocus:this.focusFirstElement,tabindex:"0"})))};e.prototype.renderFooter=function(){return this.hasFooter?h("div",{class:"footer"},h("span",{class:"back"},h("slot",{name:"back"})),h("span",{class:"secondary"},h("slot",{name:"secondary"})),h("span",{class:"primary"},h("slot",{name:"primary"}))):null};e.prototype.renderCloseButton=function(){var e=this;return!this.disableCloseButton?h("button",{"aria-label":this.intlClose,class:"close",onClick:this.close,ref:function(t){return e.closeButtonEl=t},title:this.intlClose},h("calcite-icon",{icon:"x",scale:this.scale==="s"?"s":"l"})):null};e.prototype.renderStyle=function(){var e=!isNaN(parseInt(""+this.width));return e?h("style",null,"\n .modal {\n max-width: "+this.width+"px !important;\n }\n @media screen and (max-width: "+this.width+"px) {\n .modal {\n height: 100% !important;\n max-height: 100% !important;\n width: 100% !important;\n max-width: 100% !important;\n margin: 0 !important;\n border-radius: 0 !important;\n }\n .content {\n flex: 1 1 auto !important;\n max-height: unset !important;\n }\n }\n "):null};e.prototype.handleEscape=function(e){if(this.active&&!this.disableEscape&&getKey(e.key)==="Escape"){this.close()}};e.prototype.focusElement=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(e){e.focus()}return[2,this.setFocus()]}))}))};e.prototype.setFocus=function(e){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(i){t=this.closeButtonEl;return[2,focusElement(e==="close-button"?t:getFocusableElements(this.el)[0]||t)]}))}))};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.active=true;var t=getSlotted(this.el,"header");var i=getSlotted(this.el,"content");this.titleId=ensureId(t);this.contentId=ensureId(i);clearTimeout(this.focusTimeout);this.focusTimeout=window.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 getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{active:["toggleModal"]}},enumerable:false,configurable:true});return e}();CalciteModal.style=calciteModalCss;export{CalciteModal as calcite_modal};