@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 17.9 kB
JavaScript
var __awaiter=this&&this.__awaiter||function(e,t,i,a){function n(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,r){function o(e){try{l(a.next(e))}catch(t){r(t)}}function s(e){try{l(a["throw"](e))}catch(t){r(t)}}function l(e){e.done?i(e.value):n(e.value).then(o,s)}l((a=a.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},a,n,r,o;return o={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function s(e){return function(t){return l([e,t])}}function l(o){if(a)throw new TypeError("Generator is already executing.");while(i)try{if(a=1,n&&(r=o[0]&2?n["return"]:o[0]?n["throw"]||((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,o[1])).done)return r;if(n=0,r)o=[o[0]&2,r.value];switch(o[0]){case 0:case 1:r=o;break;case 4:i.label++;return{value:o[1],done:false};case 5:i.label++;n=o[1];o=[0];continue;case 7:o=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(o[0]===6||o[0]===2)){i=0;continue}if(o[0]===3&&(!r||o[1]>r[0]&&o[1]<r[3])){i.label=o[1];break}if(o[0]===6&&i.label<r[1]){i.label=r[1];r=o;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(o);break}if(r[2])i.ops.pop();i.trys.pop();continue}o=t.call(e,i)}catch(s){o=[6,s];n=0}finally{a=r=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./p-1720b7a7.system.js","./p-60d9e7d4.system.js","./p-0a18b2ae.system.js","./p-2c235db8.system.js"],(function(e){"use strict";var t,i,a,n,r,o,s,l,c;return{setters:[function(e){t=e.r;i=e.c;a=e.h;n=e.F;r=e.g},function(e){o=e.b;s=e.g},function(e){l=e.C;c=e.c},function(){}],execute:function(){var p={header:"header",heading:"heading",close:"close",container:"container",tipContainer:"tip-container",tipContainerAdvancing:"tip-container--advancing",tipContainerRetreating:"tip-container--retreating",pagination:"pagination",pagePosition:"page-position",pageNext:"page-next",pagePrevious:"page-previous"};var f={chevronLeft:"chevron-left",chevronRight:"chevron-right",close:"x"};var d={defaultGroupTitle:"Tips",defaultPaginationLabel:"Tip",close:"Close",previous:"Previous",next:"Next"};var u=2;var m={container:"container",header:"header",heading:"heading",close:"close",imageFrame:"image-frame",content:"content",info:"info"};var h={close:"x"};var g={thumbnail:"thumbnail"};var b={close:"Close"};var y=u+1;var x="@-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)}}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:1rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2)}.container{padding:1rem}:host([dismissed]),:host([dismissed]) .container{display:none}:host([selected]) .container{border-style:none;margin:0;padding:0}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-ui-text-2);fill:var(--calcite-ui-text-2)}.heading{padding:0;margin:0;font-weight:var(--calcite-font-weight-medium);line-height:1.5}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-spacing-half) var(--calcite-spacing-half)}h1.heading{font-size:var(--calcite-font-size-2)}h2.heading{font-size:var(--calcite-font-size-1)}h3.heading{font-size:var(--calcite-font-size-0)}h4.heading,h5.heading{font-size:var(--calcite-font-size--1)}.header{margin-bottom:0.5rem}.header .heading{color:var(--calcite-ui-text-2);padding:0}.container[hidden]{display:none}.content{display:-ms-flexbox;display:flex}.info{padding-top:0;padding-bottom:0;padding-left:1rem;padding-right:1rem;width:70%}.info:only-child{width:100%;padding-left:0;padding-right:0}::slotted(p){margin-top:0}::slotted(a){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;color:var(--calcite-ui-brand)}::slotted(a:focus){outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.image-frame{width:25%}.image-frame img{max-width:100%}::slotted(img){max-width:100%}";var v=e("calcite_tip",function(){function e(e){var a=this;t(this,e);this.calciteTipDismiss=i(this,"calciteTipDismiss",7);this.dismissed=false;this.nonDismissible=false;this.hideTip=function(){a.dismissed=true;a.calciteTipDismiss.emit()}}e.prototype.renderHeader=function(){var e;var t=this,i=t.heading,n=t.headingLevel,r=t.el;var o=(e=r.closest("calcite-tip-manager"))===null||e===void 0?void 0:e.headingLevel;var s=o?c(o+1):null;var p=n||s||y;return i?a("header",{class:m.header},a(l,{class:m.heading,level:p},i)):null};e.prototype.renderDismissButton=function(){var e=this,t=e.nonDismissible,i=e.hideTip,n=e.intlClose;var r=n||b.close;return!t?a("calcite-action",{class:m.close,icon:h.close,onClick:i,scale:"l",text:r}):null};e.prototype.renderImageFrame=function(){var e=this.el;return o(e,g.thumbnail)?a("div",{class:m.imageFrame},a("slot",{name:g.thumbnail})):null};e.prototype.renderInfoNode=function(){return a("div",{class:m.info},a("slot",null))};e.prototype.renderContent=function(){return a("div",{class:m.content},this.renderImageFrame(),this.renderInfoNode())};e.prototype.render=function(){return a(n,null,a("article",{class:m.container},this.renderHeader(),this.renderContent()),this.renderDismissButton())};Object.defineProperty(e.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});return e}());v.style=x;var k="@-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)}}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}::slotted(calcite-tip){border-style:none;max-width:34rem}";var w=e("calcite_tip_group",function(){function e(e){t(this,e)}e.prototype.render=function(){return a("slot",null)};return e}());w.style=k;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)}}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:block;--calcite-tip-manager-height:18vh;--calcite-tip-max-width:540px}:host([closed]){display:none}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;color:var(--calcite-ui-text-2);fill:var(--calcite-ui-text-2)}.heading{padding:0;margin:0;font-weight:var(--calcite-font-weight-medium);line-height:1.5}.header .heading{-ms-flex:1 0 auto;flex:1 0 auto;padding:var(--calcite-spacing-half) var(--calcite-spacing-half)}h1.heading{font-size:var(--calcite-font-size-2)}h2.heading{font-size:var(--calcite-font-size-1)}h3.heading{font-size:var(--calcite-font-size-0)}h4.heading,h5.heading{font-size:var(--calcite-font-size--1)}.header .heading{padding-left:0.5rem;padding-right:0.5rem}.container{overflow:hidden;position:relative;padding-top:0.5rem;padding-left:0.5rem;padding-right:0.5rem;padding-bottom:0;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;min-height:150px}.container:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.tip-container{margin-top:0.25rem;overflow:auto;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;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;-webkit-animation-name:none;animation-name:none;-webkit-animation-duration:150ms;animation-duration:150ms;-webkit-animation-timing-function:cubic-bezier(0.215, 0.44, 0.42, 0.88);animation-timing-function:cubic-bezier(0.215, 0.44, 0.42, 0.88);height:var(--calcite-tip-manager-height)}.tip-container:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}::slotted(calcite-tip){border-style:none;max-width:var(--calcite-tip-max-width)}.tip-container--advancing{-webkit-animation-name:tip-advance;animation-name:tip-advance}.tip-container--retreating{-webkit-animation-name:tip-retreat;animation-name:tip-retreat}.pagination{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-top:0.25rem;padding-bottom:0.25rem;padding-left:0;padding-right:0}.page-position{font-size:var(--calcite-font-size--2);line-height:1rem;margin-top:0;margin-bottom:0;margin-left:0.5rem;margin-right:0.5rem}@-webkit-keyframes tip-advance{0%{opacity:0;-webkit-transform:translate3d(50px, 0, 0) scale(0.99);transform:translate3d(50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}@keyframes tip-advance{0%{opacity:0;-webkit-transform:translate3d(50px, 0, 0) scale(0.99);transform:translate3d(50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}@-webkit-keyframes tip-retreat{0%{opacity:0;-webkit-transform:translate3d(-50px, 0, 0) scale(0.99);transform:translate3d(-50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}@keyframes tip-retreat{0%{opacity:0;-webkit-transform:translate3d(-50px, 0, 0) scale(0.99);transform:translate3d(-50px, 0, 0) scale(0.99)}100%{opacity:1;-webkit-transform:translate3d(0, 0, 0) scale(1);transform:translate3d(0, 0, 0) scale(1)}}";var T=e("calcite_tip_manager",function(){function e(e){var a=this;t(this,e);this.calciteTipManagerToggle=i(this,"calciteTipManagerToggle",7);this.closed=false;this.observer=new MutationObserver((function(){return a.setUpTips()}));this.hideTipManager=function(){a.closed=true;a.calciteTipManagerToggle.emit()};this.previousClicked=function(){a.previousTip()};this.nextClicked=function(){a.nextTip()};this.tipManagerKeyUpHandler=function(e){if(e.target!==a.container){return}switch(e.key){case"ArrowRight":e.preventDefault();a.nextTip();break;case"ArrowLeft":e.preventDefault();a.previousTip();break;case"Home":e.preventDefault();a.selectedIndex=0;break;case"End":e.preventDefault();a.selectedIndex=a.total-1;break}};this.storeContainerRef=function(e){a.container=e}}e.prototype.closedChangeHandler=function(){this.direction=null;this.calciteTipManagerToggle.emit()};e.prototype.selectedChangeHandler=function(){this.showSelectedTip();this.updateGroupTitle()};e.prototype.connectedCallback=function(){this.setUpTips();this.observer.observe(this.el,{childList:true,subtree:true})};e.prototype.disconnectedCallback=function(){this.observer.disconnect()};e.prototype.nextTip=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){this.direction="advancing";e=this.selectedIndex+1;this.selectedIndex=(e+this.total)%this.total;return[2]}))}))};e.prototype.previousTip=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){this.direction="retreating";e=this.selectedIndex-1;this.selectedIndex=(e+this.total)%this.total;return[2]}))}))};e.prototype.setUpTips=function(){var e=Array.from(this.el.querySelectorAll("calcite-tip"));this.total=e.length;if(this.total===0){return}var t=this.el.querySelector("calcite-tip[selected]");this.tips=e;this.selectedIndex=t?e.indexOf(t):0;e.forEach((function(e){e.nonDismissible=true}));this.showSelectedTip();this.updateGroupTitle()};e.prototype.showSelectedTip=function(){var e=this;this.tips.forEach((function(t,i){var a=e.selectedIndex===i;t.selected=a;t.hidden=!a}))};e.prototype.updateGroupTitle=function(){var e=this.tips[this.selectedIndex];var t=e.closest("calcite-tip-group");this.groupTitle=(t===null||t===void 0?void 0:t.groupTitle)||this.intlDefaultTitle||d.defaultGroupTitle};e.prototype.renderPagination=function(){var e=s(this.el);var t=this,i=t.selectedIndex,n=t.tips,r=t.total,o=t.intlNext,l=t.intlPrevious,c=t.intlPaginationLabel;var u=o||d.next;var m=l||d.previous;var h=c||d.defaultPaginationLabel;return n.length>1?a("footer",{class:p.pagination},a("calcite-action",{class:p.pagePrevious,icon:e==="ltr"?f.chevronLeft:f.chevronRight,onClick:this.previousClicked,text:m}),a("span",{class:p.pagePosition},h+" "+(i+1)+"/"+r),a("calcite-action",{class:p.pageNext,icon:e==="ltr"?f.chevronRight:f.chevronLeft,onClick:this.nextClicked,text:u})):null};e.prototype.render=function(){var e;var t=this,i=t.closed,n=t.direction,r=t.headingLevel,o=t.groupTitle,s=t.selectedIndex,c=t.intlClose,m=t.total;var h=c||d.close;if(m===0){return null}return a("section",{"aria-hidden":i.toString(),class:p.container,hidden:i,onKeyUp:this.tipManagerKeyUpHandler,ref:this.storeContainerRef,tabIndex:0},a("header",{class:p.header},a(l,{class:p.heading,level:r||u},o),a("calcite-action",{class:p.close,icon:f.close,onClick:this.hideTipManager,text:h})),a("div",{class:(e={},e[p.tipContainer]=true,e[p.tipContainerAdvancing]=!i&&n==="advancing",e[p.tipContainerRetreating]=!i&&n==="retreating",e),key:s,tabIndex:0},a("slot",null)),this.renderPagination())};Object.defineProperty(e.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{closed:["closedChangeHandler"],selectedIndex:["selectedChangeHandler"]}},enumerable:false,configurable:true});return e}());T.style=D}}}));