UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

1 lines 37.4 kB
var __awaiter=this&&this.__awaiter||function(e,t,i,o){function n(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,a){function r(e){try{c(o.next(e))}catch(t){a(t)}}function s(e){try{c(o["throw"](e))}catch(t){a(t)}}function c(e){e.done?i(e.value):n(e.value).then(r,s)}c((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,n,a,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(e){return function(t){return c([e,t])}}function c(r){if(o)throw new TypeError("Generator is already executing.");while(i)try{if(o=1,n&&(a=r[0]&2?n["return"]:r[0]?n["throw"]||((a=n["return"])&&a.call(n),0):n.next)&&!(a=a.call(n,r[1])).done)return a;if(n=0,a)r=[r[0]&2,a.value];switch(r[0]){case 0:case 1:a=r;break;case 4:i.label++;return{value:r[1],done:false};case 5:i.label++;n=r[1];r=[0];continue;case 7:r=i.ops.pop();i.trys.pop();continue;default:if(!(a=i.trys,a=a.length>0&&a[a.length-1])&&(r[0]===6||r[0]===2)){i=0;continue}if(r[0]===3&&(!a||r[1]>a[0]&&r[1]<a[3])){i.label=r[1];break}if(r[0]===6&&i.label<a[1]){i.label=a[1];a=r;break}if(a&&i.label<a[2]){i.label=a[2];i.ops.push(r);break}if(a[2])i.ops.pop();i.trys.pop();continue}r=t.call(e,i)}catch(s){r=[6,s];n=0}finally{o=a=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(e,t){for(var i=0,o=t.length,n=e.length;i<o;i++,n++)e[n]=t[i];return e};import{r as registerInstance,c as createEvent,h,F as Fragment,g as getElement,H as Host}from"./index-aa8afca4.js";import{a as isSymbol,S as Symbol,d as debounce}from"./debounce-047e09f4.js";import{i as isArray,f as forIn}from"./forIn-d55260fc.js";import{n as nodeListToArray,g as getElementDir,c as getElementProp,C as CSS_UTILITY}from"./dom-466af3c7.js";import{g as getKey}from"./key-ec82f942.js";import{u as updatePopper,c as createPopper,C as CSS$2}from"./popper-d89fb7b0.js";import{g as guid}from"./guid-09142681.js";function arrayMap(e,t){var i=-1,o=e==null?0:e.length,n=Array(o);while(++i<o){n[i]=t(e[i],i,e)}return n}var INFINITY=1/0;var symbolProto=Symbol?Symbol.prototype:undefined,symbolToString=symbolProto?symbolProto.toString:undefined;function baseToString(e){if(typeof e=="string"){return e}if(isArray(e)){return arrayMap(e,baseToString)+""}if(isSymbol(e)){return symbolToString?symbolToString.call(e):""}var t=e+"";return t=="0"&&1/e==-INFINITY?"-0":t}function toString(e){return e==null?"":baseToString(e)}var reRegExpChar=/[\\^$.*+?()[\]{}|]/g,reHasRegExpChar=RegExp(reRegExpChar.source);function escapeRegExp(e){e=toString(e);return e&&reHasRegExpChar.test(e)?e.replace(reRegExpChar,"\\$&"):e}var filter=function(e,t){var i=escapeRegExp(t);var o=new RegExp(i,"ig");if(e.length===0){console.warn("No data was passed to the filter function.\n The data argument should be an array of objects")}var n=function(e,t){var i;if((i=e)===null||i===void 0?void 0:i.constant){return true}var o=false;forIn(e,(function(e){if(typeof e==="function"){return}if(Array.isArray(e)||typeof e==="object"&&e!==null){if(n(e,t)){o=true}}else if(t.test(e)){o=true}}));return o};var a=e.filter((function(e){return n(e,o)}));return a};var ComboboxItem="CALCITE-COMBOBOX-ITEM";var ComboboxItemGroup="CALCITE-COMBOBOX-ITEM-GROUP";var ComboboxChildSelector=ComboboxItem+", "+ComboboxItemGroup;var ComboboxDefaultPlacement="bottom-leading";var ComboboxTransitionDuration=150;function getAncestors(e){var t,i;var o=(t=e.parentElement)===null||t===void 0?void 0:t.closest(ComboboxChildSelector);var n=(i=o===null||o===void 0?void 0:o.parentElement)===null||i===void 0?void 0:i.closest(ComboboxChildSelector);return[o,n].filter((function(e){return e}))}function getItemAncestors(e){var t;return((t=e.ancestors)===null||t===void 0?void 0:t.filter((function(e){return e.nodeName==="CALCITE-COMBOBOX-ITEM"})))||[]}function getItemChildren(e){return nodeListToArray(e.querySelectorAll("calcite-combobox-item"))}function hasActiveChildren(e){var t=nodeListToArray(e.querySelectorAll("calcite-combobox-item"));return t.filter((function(e){return e.selected})).length>0}function getDepth(e){var t=document.evaluate("ancestor::calcite-combobox-item | ancestor::calcite-combobox-item-group",e,null,XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null);return t.snapshotLength}var calciteComboboxCss="@-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([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.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:2rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:2.75rem}.wrapper{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;background-color:var(--calcite-ui-foreground-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;-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);padding:var(--calcite-combobox-item-spacing-unit-s) var(--calcite-combobox-item-spacing-unit-l) 0 var(--calcite-combobox-item-spacing-unit-l)}.wrapper--active{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.wrapper--single{padding:0 var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.input{-ms-flex-positive:1;flex-grow:1;font-family:inherit;padding:0;background-color:transparent;border-style:none;color:var(--calcite-ui-text-1);-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:inherit;height:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);min-width:120px;margin-bottom:var(--calcite-combobox-item-spacing-unit-s)}.input:focus{outline:2px solid transparent;outline-offset:2px}.input--transparent{opacity:0}.input--single{margin-bottom:0;margin-top:0;padding:0}.wrapper--active .input-single{cursor:text}.input--hidden{width:0;min-width:0;opacity:0;pointer-events:none}.input--icon{padding:0 var(--calcite-combobox-item-spacing-unit-l)}.input-wrap{display:-ms-flexbox;display:flex}.input-wrap--single{-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden}.label{padding:0;display:block;-ms-flex:1 1 auto;flex:1 1 auto;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;height:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--spaced{padding-top:0;padding-bottom:0;padding-left:var(--calcite-combobox-item-spacing-unit-l);padding-right:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:1rem}.popper-container{width:100%;display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}.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:0.25rem}.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)}.popper-container--active{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;background-color:var(--calcite-ui-foreground-1);width:var(--calcite-dropdown-width)}.list{display:block;margin:0;padding:0}.list--hide{height:0;overflow:hidden}.chip{margin-right:var(--calcite-combobox-item-spacing-unit-s);margin-bottom:var(--calcite-combobox-item-spacing-unit-s);max-width:100%}.chip--active{background-color:var(--calcite-ui-foreground-3)}.chip:last-child{margin-right:0}.chip--rtl{margin-right:unset;margin-left:var(--calcite-combobox-item-spacing-unit-l)}.chip--rtl:last-child{margin-left:0}.item{display:block}";var isGroup=function(e){return e.tagName===ComboboxItemGroup};var CalciteCombobox=function(){function e(e){var t=this;registerInstance(this,e);this.calciteLookupChange=createEvent(this,"calciteLookupChange",7);this.calciteComboboxFilterChange=createEvent(this,"calciteComboboxFilterChange",7);this.calciteComboboxChipDismiss=createEvent(this,"calciteComboboxChipDismiss",7);this.active=false;this.disabled=false;this.maxItems=0;this.overlayPositioning="absolute";this.selectionMode="multi";this.scale="m";this.items=[];this.groupItems=[];this.selectedItems=[];this.visibleItems=[];this.hideList=!this.active;this.activeItemIndex=-1;this.activeChipIndex=-1;this.activeDescendant="";this.text="";this.open=this.active;this.maxScrollerHeight=0;this.textInput=null;this.observer=null;this.guid=guid();this.inputHeight=0;this.setMaxScrollerHeight=function(){if(t.active){t.maxScrollerHeight=t.getMaxScrollerHeight(t.getCombinedItems())}};this.calciteChipDismissHandler=function(e,i){t.active=false;var o=t.items.find((function(e){return e===i}));if(o){t.toggleSelection(o,false)}t.calciteComboboxChipDismiss.emit(e.detail)};this.setFocusClick=function(){t.setFocus()};this.setInactiveIfNotContained=function(e){var i=e.composedPath();if(!t.active||i.includes(t.el)||i.includes(t.referenceEl)){return}if(t.allowCustomValues&&t.text){t.addCustomChip(t.text)}if(t.selectionMode==="single"){if(t.textInput){t.textInput.value=""}t.text="";t.filterItems("");t.updateActiveItemIndex(-1)}t.active=false};this.setMenuEl=function(e){t.menuEl=e};this.setListContainerEl=function(e){t.listContainerEl=e};this.setReferenceEl=function(e){t.referenceEl=e};this.inputHandler=function(e){var i=e.target.value;t.text=i;t.filterItems(i);if(i){t.activeChipIndex=-1}};this.filterItems=function(){var e=function(e,t){return e&&t.some((function(t){var i=t.label,o=t.value;if(isGroup(e)){return o===e.label||o===e.label}return o===e.textLabel||o===e.value||i===e.textLabel||i===e.value}))};return debounce((function(i){var o=filter(t.data,i);var n=t.getCombinedItems();n.forEach((function(t){var i=!e(t,o);t.hidden=i;var n=t.ancestors,a=n[0],r=n[1];if(e(a,o)||e(r,o)){t.hidden=false}if(!i){t.ancestors.forEach((function(e){return e.hidden=false}))}}));t.visibleItems=t.getVisibleItems();t.calciteComboboxFilterChange.emit({visibleItems:__spreadArray([],t.visibleItems),text:i})}),100)}();this.internalCalciteLookupChangeEvent=function(){t.calciteLookupChange.emit(t.selectedItems)};this.emitCalciteLookupChange=debounce(this.internalCalciteLookupChangeEvent,0);this.updateItems=function(){t.items=t.getItems();t.groupItems=t.getGroupItems();t.data=t.getData();t.selectedItems=t.getSelectedItems();t.visibleItems=t.getVisibleItems();t.needsIcon=t.getNeedsIcon();if(t.selectionMode==="single"&&t.selectedItems.length){t.selectedItem=t.selectedItems[0]}if(!t.allowCustomValues){t.setMaxScrollerHeight()}};this.comboboxFocusHandler=function(){t.active=true;t.textInput.focus()};this.comboboxBlurHandler=function(e){t.setInactiveIfNotContained(e)}}e.prototype.activeHandler=function(e,t){var i=this;clearTimeout(this.hideListTimeout);if(t&&!e){this.open=false;this.hideListTimeout=window.setTimeout((function(){i.hideList=true}),ComboboxTransitionDuration)}else if(!t&&e){this.hideList=false;requestAnimationFrame((function(){i.reposition();i.setMaxScrollerHeight();i.open=true}))}this.reposition();this.setMaxScrollerHeight()};e.prototype.maxItemsHandler=function(){this.setMaxScrollerHeight()};e.prototype.documentClickHandler=function(e){this.setInactiveIfNotContained(e)};e.prototype.calciteComboboxItemChangeHandler=function(e){var t=e.target;this.toggleSelection(t,t.selected)};e.prototype.keydownHandler=function(e){var t=getKey(e.key,getElementDir(this.el));switch(t){case"Tab":this.activeChipIndex=-1;this.activeItemIndex=-1;if(this.allowCustomValues&&this.text){this.addCustomChip(this.text,true);e.preventDefault()}else{this.active=false}break;case"ArrowLeft":this.previousChip();break;case"ArrowRight":this.nextChip();break;case"ArrowUp":e.preventDefault();this.active=true;this.shiftActiveItemIndex(-1);break;case"ArrowDown":e.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,true)}break;case"Delete":case"Backspace":if(this.activeChipIndex>-1){this.removeActiveChip()}else if(!this.text&&this.isMulti()){this.removeLastChip()}break;default:if(!this.active){this.setFocus()}break}};e.prototype.reposition=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,i,o;return __generator(this,(function(n){e=this,t=e.popper,i=e.menuEl;o=this.getModifiers();t?updatePopper({el:i,modifiers:o,placement:ComboboxDefaultPlacement,popper:t}):this.createPopper();return[2]}))}))};e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){this.active=true;(e=this.textInput)===null||e===void 0?void 0:e.focus();this.activeChipIndex=-1;this.activeItemIndex=-1;return[2]}))}))};e.prototype.connectedCallback=function(){{this.observer=new MutationObserver(this.updateItems)}this.createPopper()};e.prototype.componentWillLoad=function(){this.updateItems()};e.prototype.componentDidLoad=function(){var e;(e=this.observer)===null||e===void 0?void 0:e.observe(this.el,{childList:true,subtree:true})};e.prototype.componentDidRender=function(){if(this.el.offsetHeight!==this.inputHeight){this.reposition();this.inputHeight=this.el.offsetHeight}};e.prototype.disconnectedCallback=function(){var e;(e=this.observer)===null||e===void 0?void 0:e.disconnect();this.destroyPopper()};e.prototype.textHandler=function(){this.updateActiveItemIndex(-1)};e.prototype.getModifiers=function(){var e={name:"flip",enabled:true};e.options={fallbackPlacements:["top-start","top","top-end","bottom-start","bottom","bottom-end"]};return[e]};e.prototype.createPopper=function(){this.destroyPopper();var e=this,t=e.menuEl,i=e.referenceEl,o=e.overlayPositioning;var n=this.getModifiers();this.popper=createPopper({el:t,modifiers:n,overlayPositioning:o,placement:ComboboxDefaultPlacement,referenceEl:i})};e.prototype.destroyPopper=function(){var e=this.popper;if(e){e.destroy()}this.popper=null};e.prototype.getMaxScrollerHeight=function(e){var t=this;var i=this.maxItems;var o=0;var n=0;e.forEach((function(e){if(o<i&&i>0){var a=t.calculateSingleItemHeight(e);if(a>0){n+=a;o++}}}));return n};e.prototype.calculateSingleItemHeight=function(e){var t=e.offsetHeight;var i=e.querySelectorAll(ComboboxChildSelector);i.forEach((function(e){t-=e.offsetHeight}));return t};e.prototype.getCombinedItems=function(){return __spreadArray(__spreadArray([],this.groupItems),this.items)};e.prototype.toggleSelection=function(e,t){if(t===void 0){t=!e.selected}if(!e){return}e.selected=t;if(this.isMulti()){this.updateAncestors(e);this.selectedItems=this.getSelectedItems();this.emitCalciteLookupChange();this.resetText();this.textInput.focus();this.filterItems("")}else{this.items.filter((function(t){return t!==e})).forEach((function(e){return e.selected=false}));this.selectedItem=e;this.textInput.value=e.textLabel;this.active=false;this.updateActiveItemIndex(-1);this.resetText();this.filterItems("")}};e.prototype.updateAncestors=function(e){if(this.selectionMode!=="ancestors"){return}var t=getItemAncestors(e);var i=getItemChildren(e);if(e.selected){t.forEach((function(e){e.selected=true}))}else{i.forEach((function(e){return e.selected=false}));__spreadArray([],t).forEach((function(e){if(!hasActiveChildren(e)){e.selected=false}}))}};e.prototype.getVisibleItems=function(){return this.items.filter((function(e){return!e.hidden}))};e.prototype.getSelectedItems=function(){var e=this;return this.items.filter((function(t){return t.selected&&(e.selectionMode!=="ancestors"||!hasActiveChildren(t))})).sort((function(t,i){var o=e.selectedItems.indexOf(t);var n=e.selectedItems.indexOf(i);if(o>-1&&n>-1){return o-n}return n-o}))};e.prototype.getData=function(){return this.items.map((function(e){return{constant:e.constant,value:e.value,label:e.textLabel,guid:e.guid}}))};e.prototype.getNeedsIcon=function(){return this.selectionMode==="single"&&this.items.some((function(e){return e.icon}))};e.prototype.resetText=function(){this.textInput.value="";this.text=""};e.prototype.getItems=function(){var e=Array.from(this.el.querySelectorAll(ComboboxItem));return e.filter((function(e){return!e.disabled}))};e.prototype.getGroupItems=function(){return Array.from(this.el.querySelectorAll(ComboboxItemGroup))};e.prototype.addCustomChip=function(e,t){var i=this.items.find((function(t){return t.textLabel===e}));if(i){this.toggleSelection(i,true)}else{var o=document.createElement(ComboboxItem);o.value=e;o.textLabel=e;o.guid=guid();o.selected=true;this.el.appendChild(o);this.resetText();if(t){this.setFocus()}this.updateItems();this.filterItems("");this.emitCalciteLookupChange()}};e.prototype.removeActiveChip=function(){this.toggleSelection(this.selectedItems[this.activeChipIndex],false);this.setFocus()};e.prototype.removeLastChip=function(){this.toggleSelection(this.selectedItems[this.selectedItems.length-1],false);this.setFocus()};e.prototype.previousChip=function(){if(this.text){return}var e=this.selectedItems.length-1;var t=this.activeChipIndex;this.activeChipIndex=t===-1?e:Math.max(t-1,0);this.updateActiveItemIndex(-1);this.focusChip()};e.prototype.nextChip=function(){if(this.text||this.activeChipIndex===-1){return}var e=this.selectedItems.length-1;var t=this.activeChipIndex+1;if(t>e){this.activeChipIndex=-1;this.setFocus()}else{this.activeChipIndex=t;this.focusChip()}this.updateActiveItemIndex(-1)};e.prototype.focusChip=function(){var e;var t=(e=this.selectedItems[this.activeChipIndex])===null||e===void 0?void 0:e.guid;var i=this.referenceEl.querySelector("#chip-"+t);i===null||i===void 0?void 0:i.setFocus()};e.prototype.shiftActiveItemIndex=function(e){var t=this.visibleItems.length;var i=(this.activeItemIndex+t+e)%t;this.updateActiveItemIndex(i);var o=this.visibleItems[this.activeItemIndex];var n=this.calculateSingleItemHeight(o);var a=this.listContainerEl,r=a.offsetHeight,s=a.scrollTop;if(r+s<o.offsetTop+n){this.listContainerEl.scrollTop=o.offsetTop-r+n}else if(o.offsetTop<s){this.listContainerEl.scrollTop=o.offsetTop}};e.prototype.updateActiveItemIndex=function(e){this.activeItemIndex=e;var t=null;this.visibleItems.forEach((function(i,o){if(o===e){i.active=true;t=i.guid}else{i.active=false}}));this.activeDescendant=t;if(this.activeItemIndex>-1){this.activeChipIndex=-1;this.textInput.focus()}};e.prototype.isMulti=function(){return this.selectionMode==="multi"||this.selectionMode==="ancestors"};e.prototype.renderChips=function(){var e=this;var t=this,i=t.activeChipIndex,o=t.scale,n=t.selectionMode,a=t.el;var r=getElementDir(a);return this.selectedItems.map((function(t,a){var s={chip:true,"chip--active":i===a,"chip--rtl":r==="rtl"};var c=__spreadArray([],getItemAncestors(t)).reverse();var l=__spreadArray(__spreadArray([],c),[t]).map((function(e){return e.textLabel}));var p=n!=="ancestors"?t.textLabel:l.join(" / ");return h("calcite-chip",{"aria-label":p,class:s,dismissLabel:"remove tag",dismissible:true,icon:t.icon,id:"chip-"+t.guid,key:t.textLabel,onCalciteChipDismiss:function(i){return e.calciteChipDismissHandler(i,t)},scale:o,title:p,value:t.value},p)}))};e.prototype.renderInput=function(){var e=this;var t=this,i=t.active,o=t.disabled,n=t.placeholder,a=t.selectionMode,r=t.needsIcon,s=t.label;var c=a==="single";var l=!i&&c&&!!this.selectedItem;return h("span",{class:{"input-wrap":true,"input-wrap--single":c}},l&&h("span",{class:{label:true,"label--spaced":r},key:"label",onFocus:this.comboboxFocusHandler,tabindex:"0"},this.selectedItem.textLabel),h("input",{"aria-activedescendant":this.activeDescendant,"aria-autocomplete":"list","aria-controls":guid,"aria-label":s,class:{input:true,"input--transparent":this.activeChipIndex>-1,"input--single":c,"input--hidden":l,"input--icon":c&&r},disabled:o,id:guid+"-input",key:"input",onBlur:this.comboboxBlurHandler,onFocus:this.comboboxFocusHandler,onInput:this.inputHandler,placeholder:n,ref:function(t){return e.textInput=t},type:"text"}))};e.prototype.renderListBoxOptions=function(){return this.visibleItems.map((function(e){return h("li",{"aria-selected":(!!e.selected).toString(),id:e.guid,role:"option",tabindex:"-1"},e.textLabel)}))};e.prototype.renderPopperContainer=function(){var e;var t=this,i=t.active,o=t.maxScrollerHeight,n=t.setMenuEl,a=t.setListContainerEl,r=t.hideList,s=t.open;var c=(e={"list-container":true},e[CSS$2.animation]=true,e[CSS$2.animationActive]=i,e);var l={maxHeight:o>0?o+"px":""};return h("div",{"aria-hidden":"true",class:{"popper-container":true,"popper-container--active":s},ref:n},h("div",{class:c,ref:a,style:l},h("ul",{class:{list:true,"list--hide":r}},h("slot",null))))};e.prototype.renderIconStart=function(){var e=this,t=e.selectionMode,i=e.needsIcon,o=e.selectedItem;return t==="single"&&i&&h("span",{class:"icon-start"},(o===null||o===void 0?void 0:o.icon)&&h("calcite-icon",{class:"selected-icon",icon:o===null||o===void 0?void 0:o.icon,scale:"s"}))};e.prototype.renderIconEnd=function(){return this.selectionMode==="single"&&h("span",{class:"icon-end"},h("calcite-icon",{icon:"chevron-down",scale:"s"}))};e.prototype.render=function(){var e=this,t=e.guid,i=e.open,o=e.label;var n=this.selectionMode==="single";var a=t+"-label";return h(Fragment,null,h("div",{"aria-autocomplete":"list","aria-expanded":i.toString(),"aria-haspopup":"listbox","aria-labelledby":a,"aria-owns":t,class:{wrapper:true,"wrapper--active":i,"wrapper--single":n},onClick:this.setFocusClick,ref:this.setReferenceEl,role:"combobox"},this.renderIconStart(),!n&&this.renderChips(),h("label",{class:"screen-readers-only",htmlFor:t+"-input",id:a},o),this.renderInput(),this.renderIconEnd()),h("ul",{"aria-labelledby":a,"aria-multiselectable":"true",class:"screen-readers-only",id:t,role:"listbox",tabIndex:-1},this.renderListBoxOptions()),this.renderPopperContainer())};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{active:["activeHandler"],maxItems:["maxItemsHandler"],text:["textHandler"]}},enumerable:false,configurable:true});return e}();CalciteCombobox.style=calciteComboboxCss;var CSS$1={icon:"icon",iconActive:"icon--active",custom:"icon--custom",dot:"icon--dot",single:"label--single",label:"label",active:"label--active",selected:"label--selected",title:"title",textContainer:"text-container"};var calciteComboboxItemCss='@charset "UTF-8";@-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{--calcite-combobox-item-indent-value:calc(\n var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n );--calcite-combobox-item-indent-start:var(--calcite-combobox-item-indent-value);--calcite-combobox-item-indent-end:unset}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent:0.5rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-item-spacing-indent:0.75rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-item-spacing-indent:1rem}.calcite--rtl{--calcite-combobox-item-indent-start:unset;--calcite-combobox-item-indent-end:var(--calcite-combobox-item-indent-value)}:host(:focus){-webkit-box-shadow:none;box-shadow:none}:host,ul{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:0;padding:0;outline:2px solid transparent;outline-offset:2px}.label{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;min-width:100%;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);cursor:pointer;position:relative;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 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;text-decoration:none;padding:var(--calcite-combobox-item-spacing-unit-l)}:host([disabled]) .label{cursor:default}.label--selected{color:var(--calcite-ui-text-1);font-weight:var(--calcite-font-weight-medium)}.label--active{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.label:hover,.label:active{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-2);-webkit-box-shadow:none;box-shadow:none;text-decoration:none}.title{padding:0 var(--calcite-combobox-item-spacing-unit-l)}.icon{display:-ms-inline-flexbox;display:inline-flex;opacity:0;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);color:var(--calcite-ui-border-1)}.icon--indent{padding-left:var(--calcite-combobox-item-indent-start);padding-right:var(--calcite-combobox-item-indent-end)}.icon--custom{margin-top:-1px;color:var(--calcite-ui-text-3)}.icon--active{color:var(--calcite-ui-text-1)}.icon--dot{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;width:var(--calcite-combobox-item-spacing-unit-l)}.icon--dot:before{content:"•"}.calcite--rtl .icon--dot:before{text-align:right}.label--active .icon{opacity:1}.label--selected .icon{opacity:1;color:var(--calcite-ui-brand)}:host(:hover[disabled]) .icon{opacity:1}';var CalciteComboboxItem=function(){function e(e){var t=this;registerInstance(this,e);this.calciteComboboxItemChange=createEvent(this,"calciteComboboxItemChange",7);this.disabled=false;this.selected=false;this.active=false;this.guid=guid();this.scale="m";this.itemClickHandler=function(e){e.preventDefault();if(t.disabled){return}t.selected=!t.selected}}e.prototype.selectedWatchHandler=function(){this.calciteComboboxItemChange.emit(this.el)};e.prototype.connectedCallback=function(){this.ancestors=getAncestors(this.el);this.scale=getElementProp(this.el,"scale",this.scale)};e.prototype.componentWillLoad=function(){this.hasDefaultSlot=this.el.querySelector(":not([slot])")!==null};e.prototype.toggleSelected=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.disabled){return[2]}this.selected=typeof e==="boolean"?e:!this.selected;return[2]}))}))};e.prototype.renderIcon=function(e){var t,i;var o=this,n=o.icon,a=o.disabled,r=o.selected;var s=CSS$1.icon+"--indent";var c=e?"dot":"check";var l=a?"circle-disallowed":c;var p=e&&!n&&!a;return p?h("span",{class:(t={},t[CSS$1.icon]=true,t[CSS$1.dot]=true,t[s]=true,t)}):h("calcite-icon",{class:(i={},i[CSS$1.icon]=!n,i[CSS$1.custom]=!!n,i[CSS$1.iconActive]=n&&r,i[s]=true,i),icon:n||l,scale:"s"})};e.prototype.renderChildren=function(){if(!this.hasDefaultSlot){return null}return h("ul",null,h("slot",null))};e.prototype.render=function(){var e;var t=getElementProp(this.el,"selection-mode","multi")==="single";var i=getElementDir(this.el);var o=(e={},e[CSS_UTILITY.rtl]=i==="rtl",e[CSS$1.label]=true,e[CSS$1.selected]=this.selected,e[CSS$1.active]=this.active,e[CSS$1.single]=t,e);var n=getDepth(this.el);return h(Host,{"aria-hidden":"true"},h("div",{class:"scale--"+this.scale,style:{"--calcite-combobox-item-spacing-indent-multiplier":""+n}},h("li",{class:o,id:this.guid,onClick:this.itemClickHandler},this.renderIcon(t),h("span",{class:CSS$1.title},this.textLabel)),this.renderChildren()))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{selected:["selectedWatchHandler"]}},enumerable:false,configurable:true});return e}();CalciteComboboxItem.style=calciteComboboxItemCss;var CSS={list:"list",label:"label",title:"title"};var calciteComboboxItemGroupCss="@-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{--calcite-combobox-item-indent-start-1:var(--calcite-combobox-item-spacing-indent-1);--calcite-combobox-item-indent-end-1:unset;--calcite-combobox-item-indent-start-2:var(--calcite-combobox-item-spacing-indent-2);--calcite-combobox-item-indent-end-2:unset}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent-1:0.5rem;--calcite-combobox-item-spacing-indent-2:1rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-item-spacing-indent-1:0.75rem;--calcite-combobox-item-spacing-indent-2:1.5rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-item-spacing-indent-1:1rem;--calcite-combobox-item-spacing-indent-2:2rem}.calcite--rtl{--calcite-combobox-item-indent-start-1:unset;--calcite-combobox-item-indent-end-1:var(--calcite-combobox-item-spacing-indent-1);--calcite-combobox-item-indent-start-2:unset;--calcite-combobox-item-indent-end-2:var(--calcite-combobox-item-spacing-indent-2)}:host,.list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:0;padding:0;outline:2px solid transparent;outline-offset:2px}.label{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;max-width:100%;min-width:0;color:var(--calcite-ui-text-3);display:-ms-flexbox;display:flex}.label--indent-1{padding-left:var(--calcite-combobox-item-indent-start-1);padding-right:var(--calcite-combobox-item-indent-end-1)}.label--indent-2{padding-left:var(--calcite-combobox-item-indent-start-2);padding-right:var(--calcite-combobox-item-indent-end-2)}.title{border:0 solid;display:block;-ms-flex:1 1 0%;flex:1 1 0%;border-bottom-color:var(--calcite-ui-border-3);border-bottom-width:1px;color:var(--calcite-ui-text-2);font-weight:var(--calcite-font-weight-bold);word-wrap:break-word;word-break:break-word;padding:var(--calcite-combobox-item-spacing-unit-l) 0;margin-left:var(--calcite-combobox-item-spacing-unit-s);margin-right:var(--calcite-combobox-item-spacing-unit-s)}";var CalciteComboboxItemGroup=function(){function e(e){registerInstance(this,e);this.guid=guid();this.scale="m"}e.prototype.connectedCallback=function(){this.ancestors=getAncestors(this.el);this.scale=getElementProp(this.el,"scale",this.scale)};e.prototype.render=function(){var e,t;var i=this,o=i.el,n=i.scale;var a=getElementDir(o);var r=CSS.label+"--indent-"+getDepth(o);return h("ul",{"aria-labelledby":this.guid,class:(e={},e[CSS.list]=true,e[CSS_UTILITY.rtl]=a==="rtl",e["scale--"+n]=true,e),role:"group"},h("li",{class:(t={},t[CSS.label]=true,t[r]=true,t),id:this.guid,role:"presentation"},h("span",{class:CSS.title},this.label)),h("slot",null))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();CalciteComboboxItemGroup.style=calciteComboboxItemGroupCss;export{CalciteCombobox as calcite_combobox,CalciteComboboxItem as calcite_combobox_item,CalciteComboboxItemGroup as calcite_combobox_item_group};