UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

1 lines • 18.8 kB
var __awaiter=this&&this.__awaiter||function(t,e,i,r){function a(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,n){function o(t){try{c(r.next(t))}catch(e){n(e)}}function s(t){try{c(r["throw"](t))}catch(e){n(e)}}function c(t){t.done?i(t.value):a(t.value).then(o,s)}c((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},r,a,n,o;return o={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function s(t){return function(e){return c([t,e])}}function c(o){if(r)throw new TypeError("Generator is already executing.");while(i)try{if(r=1,a&&(n=o[0]&2?a["return"]:o[0]?a["throw"]||((n=a["return"])&&n.call(a),0):a.next)&&!(n=n.call(a,o[1])).done)return n;if(a=0,n)o=[o[0]&2,n.value];switch(o[0]){case 0:case 1:n=o;break;case 4:i.label++;return{value:o[1],done:false};case 5:i.label++;a=o[1];o=[0];continue;case 7:o=i.ops.pop();i.trys.pop();continue;default:if(!(n=i.trys,n=n.length>0&&n[n.length-1])&&(o[0]===6||o[0]===2)){i=0;continue}if(o[0]===3&&(!n||o[1]>n[0]&&o[1]<n[3])){i.label=o[1];break}if(o[0]===6&&i.label<n[1]){i.label=n[1];n=o;break}if(n&&i.label<n[2]){i.label=n[2];i.ops.push(o);break}if(n[2])i.ops.pop();i.trys.pop();continue}o=e.call(t,i)}catch(s){o=[6,s];a=0}finally{r=n=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","./p-f1259a9b.system.js","./p-2c235db8.system.js","./p-597da005.system.js","./p-2a3f4b9f.system.js","./p-9b59fbd8.system.js"],(function(t){"use strict";var e,i,r,a,n,o,s,c,l,p,u,h,f;return{setters:[function(t){e=t.r;i=t.c;r=t.h;a=t.H;n=t.g},function(t){o=t.g},function(t){s=t.g},function(t){c=t.g},function(t){l=t.d},function(t){p=t.f},function(t){u=t.u;h=t.c;f=t.C}],execute:function(){var d=function(t,e){var i=new RegExp(e,"ig");if(t.length===0){console.warn("No data was passed to the filter function.\n The data argument should be an array of objects")}var r=function(t,e){var i=false;p(t,(function(t){if(typeof t==="function"){return}if(Array.isArray(t)||typeof t==="object"&&t!==null){if(r(t,e)){i=true}}else if(e.test(t)){i=true}}));return i};var a=t.filter((function(t){return r(t,i)}));return a};var m="@-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:relative}:host-context([theme=dark]){--calcite-ui-blue-1:#00A0FF;--calcite-ui-blue-2:#0087D7;--calcite-ui-blue-3:#47BBFF;--calcite-ui-green-1:#36DA43;--calcite-ui-green-2:#11AD1D;--calcite-ui-green-3:#44ED51;--calcite-ui-yellow-1:#FFC900;--calcite-ui-yellow-2:#F4B000;--calcite-ui-yellow-3:#FFE24D;--calcite-ui-red-1:#FE583E;--calcite-ui-red-2:#F3381B;--calcite-ui-red-3:#FF7465;--calcite-ui-background:#202020;--calcite-ui-foreground-1:#2b2b2b;--calcite-ui-foreground-2:#353535;--calcite-ui-foreground-3:#404040;--calcite-ui-text-1:#ffffff;--calcite-ui-text-2:#bfbfbf;--calcite-ui-text-3:#9f9f9f;--calcite-ui-border-1:#4a4a4a;--calcite-ui-border-2:#404040;--calcite-ui-border-3:#353535;--calcite-ui-border-4:#757575;--calcite-ui-border-5:#9f9f9f}:host([disabled]){pointer-events:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;opacity:0.5}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-m:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem}:host([scale=s]) .input{height:1.25rem;line-height:1.25rem;margin-bottom:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-m:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem}:host([scale=m]) .input{height:2rem;line-height:2rem;margin-bottom:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1.25rem;--calcite-combobox-item-spacing-unit-m:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem}:host([scale=l]) .input{height:2.5rem;line-height:2.5rem;margin-bottom:1rem}.wrapper{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:var(--calcite-combobox-item-spacing-unit-m) var(--calcite-combobox-item-spacing-unit-l) 0 var(--calcite-combobox-item-spacing-unit-l);background-color:var(--calcite-ui-foreground-1);border:1px solid var(--calcite-ui-border-1);color:var(--calcite-ui-text-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}.wrapper--active{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}.input{-ms-flex-positive:1;flex-grow:1;font-size:inherit;font-family:inherit;padding:0;background-color:transparent;border:none;color:var(--calcite-ui-text-1);-webkit-appearance:none;-moz-appearance:none;appearance:none;min-width:120px;margin-top:1px}.input:focus{outline:none}.input--hidden{opacity:0}.popper-container{display:block;position:absolute;z-index:999;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none;width:100%}.popper-container .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:var(--calcite-border-radius)}.popper-container[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.popper-container[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.popper-container[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.popper-container[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.popper-container[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([active]) .popper-container{pointer-events:initial;visibility:visible}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.list-container{overflow-y:auto;max-height:100vh;width:var(--calcite-dropdown-width);background:var(--calcite-ui-foreground-1)}.list{display:block;margin:0;padding:0}.chip{margin-right:var(--calcite-combobox-item-spacing-unit-s);margin-bottom:var(--calcite-combobox-item-spacing-unit-s)}.chip--active{background-color:var(--calcite-ui-foreground-3)}.chip:last-child{margin-right:0}:host([dir=rtl]) .chip{margin-right:unset;margin-left:var(--calcite-combobox-item-spacing-unit-m)}:host([dir=rtl]) .chip:last-child{margin-left:0}.item{display:block}";var v="calcite-combobox-item";var b="bottom-start";var x=t("calcite_combobox",function(){function t(t){var r=this;e(this,t);this.calciteLookupChange=i(this,"calciteLookupChange",7);this.calciteComboboxChipDismiss=i(this,"calciteComboboxChipDismiss",7);this.active=false;this.disabled=false;this.maxItems=0;this.scale="m";this.items=[];this.selectedItems=[];this.visibleItems=[];this.activeItemIndex=-1;this.activeChipIndex=-1;this.activeDescendant="";this.text="";this.textInput=null;this.observer=null;this.guid=c();this.maxScrollerHeight=0;this.inputHeight=0;this.setInactiveIfNotContained=function(t){if(!r.active||r.el.contains(t)){return}r.active=false};this.setMenuEl=function(t){r.menuEl=t};this.setListContainerEl=function(t){r.listContainerEl=t};this.setReferenceEl=function(t){r.referenceEl=t};this.inputHandler=function(t){var e=t.target.value;r.text=e;r.filterItems(e);if(e){r.activeChipIndex=-1}};this.filterItems=l((function(t){var e=d(r.data,t);var i=e.map((function(t){return t.value}));r.items.forEach((function(t){var e=i.indexOf(t.value)===-1;t.hidden=e;var r=t.anscestors,a=r[0],n=r[1];if((a||n)&&(i.indexOf(a===null||a===void 0?void 0:a.value)>-1||i.indexOf(n===null||n===void 0?void 0:n.value)>-1)){t.hidden=false}if(!e){t.anscestors.forEach((function(t){return t.hidden=false}))}}));r.visibleItems=r.getVisibleItems()}),100);this.updateItems=function(){r.items=r.getItems();r.data=r.getData();r.selectedItems=r.getSelectedItems();r.visibleItems=r.getVisibleItems()};this.comboboxFocusHandler=function(){r.active=true};this.comboboxBlurHandler=function(t){var e=t.relatedTarget;r.setInactiveIfNotContained(e)}}t.prototype.activeHandler=function(){this.reposition()};t.prototype.documentClickHandler=function(t){var e=t.target;this.setInactiveIfNotContained(e)};t.prototype.calciteComboboxItemChangeHandler=function(t){this.toggleSelection(t.detail)};t.prototype.calciteChipDismissHandler=function(t){var e;this.active=false;var i=(e=t.detail)===null||e===void 0?void 0:e.value;var r=this.items.find((function(t){return t.value===i}));if(r){this.toggleSelection(r,false)}this.calciteComboboxChipDismiss.emit(t.detail)};t.prototype.keydownHandler=function(t){var e=s(t.key,o(this.el));switch(e){case"Tab":this.activeChipIndex=-1;this.activeItemIndex=-1;this.active=false;break;case"ArrowLeft":this.previousChip();break;case"ArrowRight":this.nextChip();break;case"ArrowUp":t.preventDefault();this.active=true;this.shiftActiveItemIndex(-1);break;case"ArrowDown":t.preventDefault();this.active=true;this.shiftActiveItemIndex(1);break;case"Home":this.active=true;this.updateActiveItemIndex(0);break;case"End":this.active=true;this.updateActiveItemIndex(this.visibleItems.length-1);break;case"Escape":this.active=false;break;case"Enter":if(this.activeItemIndex>-1){this.toggleSelection(this.visibleItems[this.activeItemIndex])}else if(this.activeChipIndex>-1){this.removeActiveChip()}else if(this.allowCustomValues&&this.text){this.addCustomChip(this.text)}break;case"Delete":case"Backspace":if(this.activeChipIndex>-1){this.removeActiveChip()}else if(!this.text){this.removeLastChip()}break;default:if(!this.active){this.setFocus()}break}};t.prototype.reposition=function(){return __awaiter(this,void 0,void 0,(function(){var t,e,i,r;return __generator(this,(function(a){t=this,e=t.popper,i=t.menuEl;r=this.getModifiers();e?u({el:i,modifiers:r,placement:b,popper:e}):this.createPopper();return[2]}))}))};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){this.active=true;(t=this.textInput)===null||t===void 0?void 0:t.focus();this.activeChipIndex=-1;this.activeItemIndex=-1;return[2]}))}))};t.prototype.connectedCallback=function(){{this.observer=new MutationObserver(this.updateItems)}this.createPopper()};t.prototype.componentWillLoad=function(){this.updateItems()};t.prototype.componentDidLoad=function(){var t;(t=this.observer)===null||t===void 0?void 0:t.observe(this.el,{childList:true,subtree:true});this.maxScrollerHeight=this.getMaxScrollerHeight(this.items)};t.prototype.componentDidRender=function(){if(this.el.offsetHeight!==this.inputHeight){this.reposition();this.inputHeight=this.el.offsetHeight}};t.prototype.disconnectedCallback=function(){var t;(t=this.observer)===null||t===void 0?void 0:t.disconnect();this.destroyPopper()};t.prototype.textHandler=function(){this.updateActiveItemIndex(-1)};t.prototype.getModifiers=function(){var t={name:"flip",enabled:true};t.options={fallbackPlacements:["top-start","top","top-end","bottom-start","bottom","bottom-end"]};return[t]};t.prototype.createPopper=function(){this.destroyPopper();var t=this,e=t.menuEl,i=t.referenceEl;var r=this.getModifiers();this.popper=h({el:e,modifiers:r,placement:b,referenceEl:i})};t.prototype.destroyPopper=function(){var t=this.popper;if(t){t.destroy()}this.popper=null};t.prototype.getMaxScrollerHeight=function(t){var e=this;var i=this.maxItems;var r=0;var a=0;t.forEach((function(t){if(r<i&&i>0){a+=e.calculateSingleItemHeight(t);r++}}));return a};t.prototype.calculateSingleItemHeight=function(t){var e=t.offsetHeight;var i=t.querySelectorAll("calcite-combobox-item");i.forEach((function(t){e-=t.offsetHeight}));return e};t.prototype.toggleSelection=function(t,e){if(e===void 0){e=!t.selected}t.selected=e;this.selectedItems=this.getSelectedItems();this.calciteLookupChange.emit(this.selectedItems);this.resetText();this.textInput.focus();this.filterItems("")};t.prototype.getVisibleItems=function(){return this.items.filter((function(t){return!t.hidden}))};t.prototype.getSelectedItems=function(){var t=this;return this.items.filter((function(t){return t.selected})).sort((function(e,i){var r=t.selectedItems.indexOf(e);var a=t.selectedItems.indexOf(i);if(r>-1&&a>-1){return r-a}return a-r}))};t.prototype.getData=function(){return this.items.map((function(t){return{value:t.value,label:t.textLabel,guid:t.guid}}))};t.prototype.resetText=function(){this.textInput.value="";this.text=""};t.prototype.getItems=function(){var t=Array.from(this.el.querySelectorAll(v));return t.filter((function(t){return!t.disabled}))};t.prototype.addCustomChip=function(t){var e=this.items.find((function(e){return e.value===t||e.textLabel===t}));if(e){this.toggleSelection(e,true)}else{var i=document.createElement("calcite-combobox-item");i.value=t;i.textLabel=t;i.guid=c();i.selected=true;this.el.appendChild(i);this.resetText();this.setFocus();this.updateItems();this.filterItems("")}};t.prototype.removeActiveChip=function(){this.toggleSelection(this.selectedItems[this.activeChipIndex],false);this.setFocus()};t.prototype.removeLastChip=function(){this.toggleSelection(this.selectedItems[this.selectedItems.length-1],false);this.setFocus()};t.prototype.previousChip=function(){if(this.text){return}var t=this.selectedItems.length-1;var e=this.activeChipIndex;this.activeChipIndex=e===-1?t:Math.max(e-1,0);this.updateActiveItemIndex(-1);this.focusChip()};t.prototype.nextChip=function(){if(this.text||this.activeChipIndex===-1){return}var t=this.selectedItems.length-1;var e=this.activeChipIndex+1;if(e>t){this.activeChipIndex=-1;this.setFocus()}else{this.activeChipIndex=e;this.focusChip()}this.updateActiveItemIndex(-1)};t.prototype.focusChip=function(){var t;var e=(t=this.selectedItems[this.activeChipIndex])===null||t===void 0?void 0:t.guid;var i=this.referenceEl.querySelector("#chip-"+e);i===null||i===void 0?void 0:i.setFocus()};t.prototype.shiftActiveItemIndex=function(t){var e=this.visibleItems.length;var i=(this.activeItemIndex+e+t)%e;this.updateActiveItemIndex(i);var r=this.visibleItems[this.activeItemIndex];var a=this.calculateSingleItemHeight(r);var n=this.listContainerEl,o=n.offsetHeight,s=n.scrollTop;if(o+s<r.offsetTop+a){this.listContainerEl.scrollTop=r.offsetTop-o+a}else if(r.offsetTop<s){this.listContainerEl.scrollTop=r.offsetTop}};t.prototype.updateActiveItemIndex=function(t){this.activeItemIndex=t;var e=null;this.visibleItems.forEach((function(i,r){if(r===t){i.active=true;e=i.guid}else{i.active=false}}));this.activeDescendant=e;if(this.activeItemIndex>-1){this.activeChipIndex=-1;this.textInput.focus()}};t.prototype.renderChips=function(){var t=this,e=t.activeChipIndex,i=t.scale;return this.selectedItems.map((function(t,a){var n={chip:true,"chip--active":e===a};return r("calcite-chip",{class:n,dismissLabel:"remove tag",dismissible:true,id:"chip-"+t.guid,key:t.value,scale:i,value:t.value},t.textLabel)}))};t.prototype.renderListBoxOptions=function(){return this.visibleItems.map((function(t){return r("li",{"aria-selected":(!!t.selected).toString(),id:t.guid,role:"option",tabindex:"-1"},t.value)}))};t.prototype.renderPopperContainer=function(){var t;var e=this,i=e.active,a=e.maxScrollerHeight,n=e.setMenuEl,o=e.setListContainerEl;var s=(t={"list-container":true},t[f.animation]=true,t[f.animationActive]=i,t);var c={maxHeight:a>0?a+"px":""};return r("div",{"aria-hidden":"true",class:"popper-container",ref:n},r("div",{class:s,ref:o,style:c},r("ul",{class:"list"},r("slot",null))))};t.prototype.render=function(){var t=this;var e=this,i=e.guid,n=e.active,s=e.disabled,c=e.el,l=e.label,p=e.placeholder;var u=o(c);var h=i+"-label";return r(a,{active:n,dir:u},r("div",{"aria-autocomplete":"list","aria-expanded":n.toString(),"aria-haspopup":"listbox","aria-labelledby":h,"aria-owns":i,class:{wrapper:true,"wrapper--active":n},onClick:function(){return t.setFocus()},ref:this.setReferenceEl,role:"combobox"},this.renderChips(),r("label",{class:"screen-readers-only",htmlFor:i+"-input",id:h},l),r("input",{"aria-activedescendant":this.activeDescendant,"aria-autocomplete":"list","aria-controls":i,class:{input:true,"input--hidden":this.activeChipIndex>-1},disabled:s,id:i+"-input",onBlur:this.comboboxBlurHandler,onFocus:this.comboboxFocusHandler,onInput:this.inputHandler,placeholder:p,ref:function(e){return t.textInput=e},type:"text"})),r("ul",{"aria-labelledby":h,"aria-multiselectable":"true",class:"screen-readers-only",id:i,role:"listbox",tabIndex:-1},this.renderListBoxOptions()),this.renderPopperContainer())};Object.defineProperty(t.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{active:["activeHandler"],text:["textHandler"]}},enumerable:false,configurable:true});return t}());x.style=m}}}));