@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
1 lines • 19.1 kB
JavaScript
var __awaiter=this&&this.__awaiter||function(e,t,i,r){function a(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,o){function n(e){try{c(r.next(e))}catch(t){o(t)}}function s(e){try{c(r["throw"](e))}catch(t){o(t)}}function c(e){e.done?i(e.value):a(e.value).then(n,s)}c((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,a,o,n;return n={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function s(e){return function(t){return c([e,t])}}function c(n){if(r)throw new TypeError("Generator is already executing.");while(i)try{if(r=1,a&&(o=n[0]&2?a["return"]:n[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,n[1])).done)return o;if(a=0,o)n=[n[0]&2,o.value];switch(n[0]){case 0:case 1:o=n;break;case 4:i.label++;return{value:n[1],done:false};case 5:i.label++;a=n[1];n=[0];continue;case 7:n=i.ops.pop();i.trys.pop();continue;default:if(!(o=i.trys,o=o.length>0&&o[o.length-1])&&(n[0]===6||n[0]===2)){i=0;continue}if(n[0]===3&&(!o||n[1]>o[0]&&n[1]<o[3])){i.label=n[1];break}if(n[0]===6&&i.label<o[1]){i.label=o[1];o=n;break}if(o&&i.label<o[2]){i.label=o[2];i.ops.push(n);break}if(o[2])i.ops.pop();i.trys.pop();continue}n=t.call(e,i)}catch(s){n=[6,s];a=0}finally{r=o=0}if(n[0]&5)throw n[1];return{value:n[0]?n[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-8fd57462.js";import{g as getElementDir}from"./dom-d9ba1da4.js";import{g as getKey}from"./key-477fdfc4.js";import{g as guid}from"./guid-09142681.js";import{d as debounce}from"./debounce-4dee3b1c.js";import{f as forIn}from"./forIn-9b0d149f.js";import{u as updatePopper,c as createPopper,C as CSS}from"./popper-9e938e6c.js";var filter=function(e,t){var i=new RegExp(t,"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 r=function(e,t){var i=false;forIn(e,(function(e){if(typeof e==="function"){return}if(Array.isArray(e)||typeof e==="object"&&e!==null){if(r(e,t)){i=true}}else if(t.test(e)){i=true}}));return i};var a=e.filter((function(e){return r(e,i)}));return a};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-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 COMBO_BOX_ITEM="calcite-combobox-item";var DEFAULT_PLACEMENT="bottom-start";var CalciteCombobox=function(){function e(e){var t=this;registerInstance(this,e);this.calciteLookupChange=createEvent(this,"calciteLookupChange",7);this.calciteComboboxChipDismiss=createEvent(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=guid();this.maxScrollerHeight=0;this.inputHeight=0;this.setInactiveIfNotContained=function(e){if(!t.active||t.el.contains(e)){return}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=debounce((function(e){var i=filter(t.data,e);var r=i.map((function(e){return e.value}));t.items.forEach((function(e){var t=r.indexOf(e.value)===-1;e.hidden=t;var i=e.anscestors,a=i[0],o=i[1];if((a||o)&&(r.indexOf(a===null||a===void 0?void 0:a.value)>-1||r.indexOf(o===null||o===void 0?void 0:o.value)>-1)){e.hidden=false}if(!t){e.anscestors.forEach((function(e){return e.hidden=false}))}}));t.visibleItems=t.getVisibleItems()}),100);this.updateItems=function(){t.items=t.getItems();t.data=t.getData();t.selectedItems=t.getSelectedItems();t.visibleItems=t.getVisibleItems()};this.comboboxFocusHandler=function(){t.active=true};this.comboboxBlurHandler=function(e){var i=e.relatedTarget;t.setInactiveIfNotContained(i)}}e.prototype.activeHandler=function(){this.reposition()};e.prototype.documentClickHandler=function(e){var t=e.target;this.setInactiveIfNotContained(t)};e.prototype.calciteComboboxItemChangeHandler=function(e){this.toggleSelection(e.detail)};e.prototype.calciteChipDismissHandler=function(e){var t;this.active=false;var i=(t=e.detail)===null||t===void 0?void 0:t.value;var r=this.items.find((function(e){return e.value===i}));if(r){this.toggleSelection(r,false)}this.calciteComboboxChipDismiss.emit(e.detail)};e.prototype.keydownHandler=function(e){var t=getKey(e.key,getElementDir(this.el));switch(t){case"Tab":this.activeChipIndex=-1;this.activeItemIndex=-1;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)}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}};e.prototype.reposition=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,i,r;return __generator(this,(function(a){e=this,t=e.popper,i=e.menuEl;r=this.getModifiers();t?updatePopper({el:i,modifiers:r,placement:DEFAULT_PLACEMENT,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});this.maxScrollerHeight=this.getMaxScrollerHeight(this.items)};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;var r=this.getModifiers();this.popper=createPopper({el:t,modifiers:r,placement:DEFAULT_PLACEMENT,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 r=0;var a=0;e.forEach((function(e){if(r<i&&i>0){a+=t.calculateSingleItemHeight(e);r++}}));return a};e.prototype.calculateSingleItemHeight=function(e){var t=e.offsetHeight;var i=e.querySelectorAll("calcite-combobox-item");i.forEach((function(e){t-=e.offsetHeight}));return t};e.prototype.toggleSelection=function(e,t){if(t===void 0){t=!e.selected}e.selected=t;this.selectedItems=this.getSelectedItems();this.calciteLookupChange.emit(this.selectedItems);this.resetText();this.textInput.focus();this.filterItems("")};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(e){return e.selected})).sort((function(t,i){var r=e.selectedItems.indexOf(t);var a=e.selectedItems.indexOf(i);if(r>-1&&a>-1){return r-a}return a-r}))};e.prototype.getData=function(){return this.items.map((function(e){return{value:e.value,label:e.textLabel,guid:e.guid}}))};e.prototype.resetText=function(){this.textInput.value="";this.text=""};e.prototype.getItems=function(){var e=Array.from(this.el.querySelectorAll(COMBO_BOX_ITEM));return e.filter((function(e){return!e.disabled}))};e.prototype.addCustomChip=function(e){var t=this.items.find((function(t){return t.value===e||t.textLabel===e}));if(t){this.toggleSelection(t,true)}else{var i=document.createElement("calcite-combobox-item");i.value=e;i.textLabel=e;i.guid=guid();i.selected=true;this.el.appendChild(i);this.resetText();this.setFocus();this.updateItems();this.filterItems("")}};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 r=this.visibleItems[this.activeItemIndex];var a=this.calculateSingleItemHeight(r);var o=this.listContainerEl,n=o.offsetHeight,s=o.scrollTop;if(n+s<r.offsetTop+a){this.listContainerEl.scrollTop=r.offsetTop-n+a}else if(r.offsetTop<s){this.listContainerEl.scrollTop=r.offsetTop}};e.prototype.updateActiveItemIndex=function(e){this.activeItemIndex=e;var t=null;this.visibleItems.forEach((function(i,r){if(r===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.renderChips=function(){var e=this,t=e.activeChipIndex,i=e.scale;return this.selectedItems.map((function(e,r){var a={chip:true,"chip--active":t===r};return h("calcite-chip",{class:a,dismissLabel:"remove tag",dismissible:true,id:"chip-"+e.guid,key:e.value,scale:i,value:e.value},e.textLabel)}))};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.value)}))};e.prototype.renderPopperContainer=function(){var e;var t=this,i=t.active,r=t.maxScrollerHeight,a=t.setMenuEl,o=t.setListContainerEl;var n=(e={"list-container":true},e[CSS.animation]=true,e[CSS.animationActive]=i,e);var s={maxHeight:r>0?r+"px":""};return h("div",{"aria-hidden":"true",class:"popper-container",ref:a},h("div",{class:n,ref:o,style:s},h("ul",{class:"list"},h("slot",null))))};e.prototype.render=function(){var e=this;var t=this,i=t.guid,r=t.active,a=t.disabled,o=t.el,n=t.label,s=t.placeholder;var c=getElementDir(o);var l=i+"-label";return h(Host,{active:r,dir:c},h("div",{"aria-autocomplete":"list","aria-expanded":r.toString(),"aria-haspopup":"listbox","aria-labelledby":l,"aria-owns":i,class:{wrapper:true,"wrapper--active":r},onClick:function(){return e.setFocus()},ref:this.setReferenceEl,role:"combobox"},this.renderChips(),h("label",{class:"screen-readers-only",htmlFor:i+"-input",id:l},n),h("input",{"aria-activedescendant":this.activeDescendant,"aria-autocomplete":"list","aria-controls":i,class:{input:true,"input--hidden":this.activeChipIndex>-1},disabled:a,id:i+"-input",onBlur:this.comboboxBlurHandler,onFocus:this.comboboxFocusHandler,onInput:this.inputHandler,placeholder:s,ref:function(t){return e.textInput=t},type:"text"})),h("ul",{"aria-labelledby":l,"aria-multiselectable":"true",class:"screen-readers-only",id:i,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"],text:["textHandler"]}},enumerable:false,configurable:true});return e}();CalciteCombobox.style=calciteComboboxCss;export{CalciteCombobox as calcite_combobox};