UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

1 lines • 18.9 kB
var __awaiter=this&&this.__awaiter||function(e,t,a,i){function n(e){return e instanceof a?e:new a((function(t){t(e)}))}return new(a||(a=Promise))((function(a,r){function o(e){try{c(i.next(e))}catch(t){r(t)}}function s(e){try{c(i["throw"](e))}catch(t){r(t)}}function c(e){e.done?a(e.value):n(e.value).then(o,s)}c((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var a={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},i,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 c([e,t])}}function c(o){if(i)throw new TypeError("Generator is already executing.");while(a)try{if(i=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:a.label++;return{value:o[1],done:false};case 5:a.label++;n=o[1];o=[0];continue;case 7:o=a.ops.pop();a.trys.pop();continue;default:if(!(r=a.trys,r=r.length>0&&r[r.length-1])&&(o[0]===6||o[0]===2)){a=0;continue}if(o[0]===3&&(!r||o[1]>r[0]&&o[1]<r[3])){a.label=o[1];break}if(o[0]===6&&a.label<r[1]){a.label=r[1];r=o;break}if(r&&a.label<r[2]){a.label=r[2];a.ops.push(o);break}if(r[2])a.ops.pop();a.trys.pop();continue}o=t.call(e,a)}catch(s){o=[6,s];n=0}finally{i=r=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./p-c97dd66b.system.js","./p-466a0799.system.js"],(function(e){"use strict";var t,a,i,n,r,o,s;return{setters:[function(e){t=e.r;a=e.c;i=e.h;n=e.H;r=e.g},function(e){o=e.c;s=e.g}],execute:function(){var c={container:"container",header:"header",heading:"heading",close:"close",imageFrame:"image-frame",content:"content",info:"info"};var l={close:"x"};var p={thumbnail:"thumbnail"};var f={close:"Close"};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}:host{--calcite-icon-size:1rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{position:relative;display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row;margin:var(--calcite-spacing) var(--calcite-spacing);border:solid 1px var(--calcite-ui-border-2);--tip-content-only-width:100%;--tip-content-width:70%;--tip-image-frame-width:25%;--tip-image-max-width:100%}.container{padding:var(--calcite-spacing)}:host([selected]) .container{border: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:var(--calcite-spacing-half)}.header .heading{color:var(--calcite-ui-text-2);padding:0}.container[hidden]{display:none}.content{display:-ms-flexbox;display:flex}.info{padding:0 var(--calcite-spacing);width:var(--tip-content-width)}.info:only-child{width:var(--tip-content-only-width);padding-left:0;padding-right:0}::slotted(p){margin-top:0}::slotted(a){color:var(--calcite-ui-blue-1);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}::slotted(a:focus){outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}.image-frame{width:var(--tip-image-frame-width)}.image-frame img{max-width:var(--tip-image-max-width)}::slotted(img){max-width:var(--tip-image-max-width)}";var m=e("calcite_tip",function(){function e(e){var i=this;t(this,e);this.calciteTipDismiss=a(this,"calciteTipDismiss",7);this.dismissed=false;this.nonDismissible=false;this.hideTip=function(){i.dismissed=true;i.calciteTipDismiss.emit()}}e.prototype.renderHeader=function(){var e=this.heading;return e?i("header",{class:c.header},i("h3",{class:c.heading},e)):null};e.prototype.renderDismissButton=function(){var e=this,t=e.nonDismissible,a=e.hideTip,n=e.intlClose;var r=n||f.close;return!t?i("calcite-action",{class:c.close,icon:l.close,onClick:a,scale:"l",text:r}):null};e.prototype.renderImageFrame=function(){var e=this.el;return o(e,p.thumbnail)?i("div",{class:c.imageFrame},i("slot",{name:p.thumbnail})):null};e.prototype.renderInfoNode=function(){return i("div",{class:c.info},i("slot",null))};e.prototype.renderContent=function(){return i("div",{class:c.content},this.renderImageFrame(),this.renderInfoNode())};e.prototype.render=function(){return i(n,null,i("article",{class:c.container,hidden:this.dismissed},this.renderHeader(),this.renderContent()),this.renderDismissButton())};Object.defineProperty(e.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});return e}());m.style=d;var u="@-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}:host{--calcite-icon-size:1rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{--calcite-tip-max-width:540px}::slotted(calcite-tip){border:none;max-width:var(--calcite-tip-max-width)}";var h=e("calcite_tip_group",function(){function e(e){t(this,e)}e.prototype.render=function(){return i("slot",null)};return e}());h.style=u;var g={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 b={chevronLeft:"chevron-left",chevronRight:"chevron-right",close:"x"};var y={defaultGroupTitle:"Tips",defaultPaginationLabel:"Tip",close:"Close",previous:"Previous",next:"Next"};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}:host{--calcite-icon-size:1rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}: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:var(--calcite-spacing-half);padding-right:var(--calcite-spacing-half)}.container{overflow:hidden;position:relative;padding:var(--calcite-spacing-half) var(--calcite-spacing-half) 0;min-height:150px;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}.container:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}.tip-container{-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);margin-top:var(--calcite-spacing-quarter);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}.tip-container:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:2px}::slotted(calcite-tip){border: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:var(--calcite-spacing-quarter) 0}.page-position{font-size:0.75rem;line-height:1.5;margin:0 var(--calcite-spacing-half)}@-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 v=e("calcite_tip_manager",function(){function e(e){var i=this;t(this,e);this.calciteTipManagerToggle=a(this,"calciteTipManagerToggle",7);this.closed=false;this.observer=new MutationObserver((function(){return i.setUpTips()}));this.hideTipManager=function(){i.closed=true;i.calciteTipManagerToggle.emit()};this.previousClicked=function(){i.previousTip()};this.nextClicked=function(){i.nextTip()};this.tipManagerKeyUpHandler=function(e){if(e.target!==i.container){return}switch(e.key){case"ArrowRight":e.preventDefault();i.nextTip();break;case"ArrowLeft":e.preventDefault();i.previousTip();break;case"Home":e.preventDefault();i.selectedIndex=0;break;case"End":e.preventDefault();i.selectedIndex=i.total-1;break}};this.storeContainerRef=function(e){i.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,a){var i=e.selectedIndex===a;t.selected=i;t.hidden=!i}))};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||y.defaultGroupTitle};e.prototype.renderPagination=function(){var e=s(this.el);var t=this,a=t.selectedIndex,n=t.tips,r=t.total,o=t.intlNext,c=t.intlPrevious,l=t.intlPaginationLabel;var p=o||y.next;var f=c||y.previous;var d=l||y.defaultPaginationLabel;return n.length>1?i("footer",{class:g.pagination},i("calcite-action",{class:g.pagePrevious,icon:e==="ltr"?b.chevronLeft:b.chevronRight,onClick:this.previousClicked,text:f}),i("span",{class:g.pagePosition},d+" "+(a+1)+"/"+r),i("calcite-action",{class:g.pageNext,icon:e==="ltr"?b.chevronRight:b.chevronLeft,onClick:this.nextClicked,text:p})):null};e.prototype.render=function(){var e;var t=this,a=t.closed,r=t.direction,o=t.groupTitle,s=t.selectedIndex,c=t.intlClose,l=t.total;var p=c||y.close;if(l===0){return i(n,null)}return i(n,null,i("section",{"aria-hidden":a.toString(),class:g.container,hidden:a,onKeyUp:this.tipManagerKeyUpHandler,ref:this.storeContainerRef,tabIndex:0},i("header",{class:g.header},i("h2",{class:g.heading,key:s},o),i("calcite-action",{class:g.close,icon:b.close,onClick:this.hideTipManager,text:p})),i("div",{class:(e={},e[g.tipContainer]=true,e[g.tipContainerAdvancing]=!a&&r==="advancing",e[g.tipContainerRetreating]=!a&&r==="retreating",e),key:s,tabIndex:0},i("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}());v.style=x}}}));