@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
601 lines (593 loc) • 36.2 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8fd57462.js';
import { g as getElementDir, f as focusElement, b as getElementProp } from './dom-d9ba1da4.js';
import { g as getKey } from './key-477fdfc4.js';
import { C as CSS, u as updatePopper, c as createPopper } from './popper-9e938e6c.js';
const calciteDropdownCss = "@-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-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{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-positive:1;flex-grow:1}:host([disabled]){pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}:host .calcite-dropdown-wrapper{display:block;position:absolute;z-index:999;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}.calcite-dropdown-wrapper .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)}.calcite-dropdown-wrapper[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.calcite-dropdown-wrapper[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.calcite-dropdown-wrapper[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.calcite-dropdown-wrapper[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.calcite-dropdown-wrapper[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([active]) .calcite-dropdown-wrapper{pointer-events:initial;visibility:visible}:host .calcite-dropdown-content{background:var(--calcite-ui-foreground-1);max-height:90vh;overflow:hidden;overflow-y:auto;width:auto;width:var(--calcite-dropdown-width)}.calcite-dropdown-trigger-container{position:relative;width:100%}:host([width=s]){--calcite-dropdown-width:12.5em}:host([width=m]){--calcite-dropdown-width:15em}:host([width=l]){--calcite-dropdown-width:20em}:host([scale=s]){--calcite-dropdown-group-padding:0.5rem 0;--calcite-dropdown-item-padding:0.3rem 1rem 0.3rem 2.25rem}:host([scale=m]){--calcite-dropdown-group-padding:0.75rem 0;--calcite-dropdown-item-padding:0.5rem 1rem 0.5rem 2.25rem}:host([scale=l]){--calcite-dropdown-group-padding:1rem 0;--calcite-dropdown-item-padding:0.75rem 1rem 0.75rem 2.25rem}:host([dir=rtl][scale=s]){--calcite-dropdown-item-padding:0.3rem 2.25rem 0.3rem 1rem}:host([dir=rtl][scale=m]){--calcite-dropdown-item-padding:0.5rem 2.25rem 0.5rem 1rem}:host([dir=rtl][scale=l]){--calcite-dropdown-item-padding:0.75rem 2.25rem 0.75rem 1rem}";
const CalciteDropdown = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.calciteDropdownSelect = createEvent(this, "calciteDropdownSelect", 7);
this.calciteDropdownOpen = createEvent(this, "calciteDropdownOpen", 7);
this.calciteDropdownClose = createEvent(this, "calciteDropdownClose", 7);
//--------------------------------------------------------------------------
//
// Public Properties
//
//--------------------------------------------------------------------------
this.active = false;
/** specify the alignment of dropdown, defaults to start */
this.alignment = "start";
/**
allow the dropdown to remain open after a selection is made
if the selection-mode of the selected item's containing group is "none", the dropdown will always close
*/
this.disableCloseOnSelect = false;
/**
specify the maximum number of calcite-dropdown-items to display before showing the scroller, must be greater than 0 -
this value does not include groupTitles passed to calcite-dropdown-group
*/
this.maxItems = 0;
/** specify the scale of dropdown, defaults to m */
this.scale = "m";
/**
* **read-only** The currently selected items
*
* @readonly
*/
this.selectedItems = [];
/** specify whether the dropdown is opened by hover or click of a trigger element */
this.type = "click";
/** specify the width of dropdown, defaults to m */
this.width = "m";
//--------------------------------------------------------------------------
//
// Private State/Props
//
//--------------------------------------------------------------------------
/** created list of dropdown items */
this.items = [];
/** specifies the item wrapper height; it is updated when maxItems is > 0 **/
this.maxScrollerHeight = 0;
/** keep track of whether the groups have been sorted so we don't re-sort */
this.sorted = false;
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
this.setReferenceEl = (el) => {
this.referenceEl = el;
};
this.setMenuEl = (el) => {
this.menuEl = el;
};
this.openDropdown = (e) => {
const target = e.target;
if (this.triggers.includes(target) ||
this.triggers.some((trigger) => trigger.contains(target))) {
e.preventDefault();
e.stopPropagation();
this.openCalciteDropdown();
}
};
this.keyDownHandler = (e) => {
const target = e.target;
const key = getKey(e.key);
if (this.triggers.includes(target) ||
this.triggers.some((trigger) => trigger.contains(target))) {
if (target.nodeName !== "BUTTON" && target.nodeName !== "CALCITE-BUTTON") {
switch (key) {
case " ":
case "Enter":
this.openCalciteDropdown();
break;
case "Escape":
this.closeCalciteDropdown();
break;
}
}
else if (this.active && (key === "Escape" || (e.shiftKey && key === "Tab"))) {
this.closeCalciteDropdown();
}
}
};
}
activeHandler() {
this.reposition();
}
alignmentHandler() {
this.reposition();
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
this.createPopper();
}
componentWillLoad() {
// get initially selected items
this.updateSelectedItems();
}
componentDidLoad() {
this.triggers = Array.from(this.el.querySelectorAll("[slot=dropdown-trigger]"));
if (!this.sorted) {
const groups = this.items.sort((a, b) => a.position - b.position);
this.maxScrollerHeight = this.getMaxScrollerHeight(groups);
this.items = groups.reduce((items, group) => [...items, ...group.items], []);
this.sorted = true;
}
}
disconnectedCallback() {
this.destroyPopper();
}
render() {
const { active, maxScrollerHeight } = this;
const dir = getElementDir(this.el);
return (h(Host, { dir: dir, tabIndex: this.disabled ? -1 : null }, h("div", { class: "calcite-dropdown-trigger-container", onClick: this.openDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, h("slot", { "aria-expanded": active.toString(), "aria-haspopup": "true", name: "dropdown-trigger" })), h("div", { "aria-hidden": (!active).toString(), class: "calcite-dropdown-wrapper", ref: this.setMenuEl }, h("div", { class: {
["calcite-dropdown-content"]: true,
[CSS.animation]: true,
[CSS.animationActive]: active
}, style: {
maxHeight: maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : ""
} }, h("slot", null)))));
}
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
async reposition() {
const { popper, menuEl } = this;
const modifiers = this.getModifiers();
const placement = this.getPlacement();
popper
? updatePopper({
el: menuEl,
modifiers,
placement,
popper
})
: this.createPopper();
}
closeCalciteDropdownOnClick(e) {
const target = e.target;
if (this.active &&
target.nodeName !== "CALCITE-DROPDOWN-ITEM" &&
target.nodeName !== "CALCITE-DROPDOWN-GROUP") {
this.closeCalciteDropdown();
}
}
closeCalciteDropdownOnEvent() {
this.closeCalciteDropdown();
}
closeCalciteDropdownOnOpenEvent(e) {
if (e.target !== this.el)
this.active = false;
}
mouseEnterHandler() {
if (this.type === "hover") {
this.openCalciteDropdown();
}
}
mouseLeaveHandler() {
if (this.type === "hover") {
this.closeCalciteDropdown();
}
}
calciteDropdownItemKeyEvent(e) {
const { keyboardEvent } = e.detail;
// handle edge
const target = keyboardEvent.target;
const itemToFocus = target.nodeName !== "A" ? target : target.parentNode;
const isFirstItem = this.itemIndex(itemToFocus) === 0;
const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
switch (getKey(keyboardEvent.key)) {
case "Tab":
if (isLastItem && !keyboardEvent.shiftKey)
this.closeCalciteDropdown();
else if (isFirstItem && keyboardEvent.shiftKey)
this.closeCalciteDropdown();
else if (keyboardEvent.shiftKey)
this.focusPrevItem(itemToFocus);
else
this.focusNextItem(itemToFocus);
break;
case "ArrowDown":
this.focusNextItem(itemToFocus);
break;
case "ArrowUp":
this.focusPrevItem(itemToFocus);
break;
case "Home":
this.focusFirstItem();
break;
case "End":
this.focusLastItem();
break;
}
e.stopPropagation();
}
handleItemSelect(event) {
this.updateSelectedItems();
event.stopPropagation();
this.calciteDropdownSelect.emit();
if (!this.disableCloseOnSelect || event.detail.requestedDropdownGroup.selectionMode === "none")
this.closeCalciteDropdown();
}
registerCalciteDropdownGroup(e) {
const { detail: { items, position, titleEl, separatorEl } } = e;
this.items.push({
items,
position,
titleEl,
separatorEl
});
e.stopPropagation();
this.updateSelectedItems();
}
getModifiers() {
const flipModifier = {
name: "flip",
enabled: true
};
flipModifier.options = {
fallbackPlacements: ["top-start", "top", "top-end", "bottom-start", "bottom", "bottom-end"]
};
return [flipModifier];
}
getPlacement() {
const { alignment } = this;
if (alignment === "center") {
return "bottom";
}
if (alignment === "end") {
return "bottom-end";
}
return "bottom-start";
}
createPopper() {
this.destroyPopper();
const { menuEl, referenceEl } = this;
const modifiers = this.getModifiers();
const placement = this.getPlacement();
this.popper = createPopper({
el: menuEl,
modifiers,
placement,
referenceEl
});
}
destroyPopper() {
const { popper } = this;
if (popper) {
popper.destroy();
}
this.popper = null;
}
updateSelectedItems() {
const items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
this.selectedItems = items.filter((item) => item.active);
}
getMaxScrollerHeight(groups) {
const { maxItems } = this;
let itemsToProcess = 0;
let maxScrollerHeight = 0;
groups.forEach((group) => {
var _a, _b;
if (maxItems > 0 && itemsToProcess < maxItems) {
maxScrollerHeight += ((_a = group === null || group === void 0 ? void 0 : group.titleEl) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
maxScrollerHeight += ((_b = group === null || group === void 0 ? void 0 : group.separatorEl) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
group.items.forEach((item) => {
if (itemsToProcess < maxItems) {
maxScrollerHeight += item.offsetHeight;
itemsToProcess += 1;
}
});
}
});
return maxScrollerHeight;
}
closeCalciteDropdown() {
this.calciteDropdownClose.emit();
this.active = false;
focusElement(this.triggers[0]);
}
focusOnFirstActiveOrFirstItem() {
this.getFocusableElement(this.items.find((item) => item.active) || this.items[0]);
}
focusFirstItem() {
const firstItem = this.items[0];
this.getFocusableElement(firstItem);
}
focusLastItem() {
const lastItem = this.items[this.items.length - 1];
this.getFocusableElement(lastItem);
}
focusNextItem(e) {
const index = this.itemIndex(e);
const nextItem = this.items[index + 1] || this.items[0];
this.getFocusableElement(nextItem);
}
focusPrevItem(e) {
const index = this.itemIndex(e);
const prevItem = this.items[index - 1] || this.items[this.items.length - 1];
this.getFocusableElement(prevItem);
}
itemIndex(e) {
return this.items.indexOf(e);
}
getFocusableElement(item) {
if (!item) {
return;
}
const target = item.attributes.isLink
? item.shadowRoot.querySelector("a")
: item;
focusElement(target);
}
openCalciteDropdown() {
this.calciteDropdownOpen.emit();
this.active = !this.active;
const animationDelayInMs = 50;
if (this.active) {
setTimeout(() => this.focusOnFirstActiveOrFirstItem(), animationDelayInMs);
}
else {
this.calciteDropdownClose.emit();
}
}
get el() { return getElement(this); }
static get watchers() { return {
"active": ["activeHandler"],
"alignment": ["alignmentHandler"]
}; }
};
CalciteDropdown.style = calciteDropdownCss;
const calciteDropdownGroupCss = "@-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-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([scale=s]){font-size:var(--calcite-font-size--2)}:host([scale=s]) .dropdown-title{padding-top:0.75rem;padding-bottom:0.75rem;margin-top:0;margin-left:0.75rem;margin-right:0.75rem}:host([scale=m]){font-size:var(--calcite-font-size--1)}:host([scale=m]) .dropdown-title{padding-top:1rem;padding-bottom:1rem;margin-top:0;margin-left:1rem;margin-right:1rem}:host([scale=l]){font-size:var(--calcite-font-size-1)}:host([scale=l]) .dropdown-title{padding-top:1.25rem;padding-bottom:1.25rem;margin-top:0;margin-left:1.25rem;margin-right:1.25rem}.dropdown-title{display:block;margin-bottom:-1px;border-bottom:1px solid var(--calcite-ui-border-3);color:var(--calcite-ui-text-2);font-weight:600;word-wrap:break-word;cursor:default}.dropdown-separator{display:block;height:1px;background-color:var(--calcite-ui-border-3)}";
const CalciteDropdownGroup = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.calciteDropdownGroupRegister = createEvent(this, "calciteDropdownGroupRegister", 7);
this.calciteDropdownItemChange = createEvent(this, "calciteDropdownItemChange", 7);
/** specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),
none (no active items), defaults to single */
this.selectionMode = "single";
// --------------------------------------------------------------------------
//
// Private Methods
//
// --------------------------------------------------------------------------
this.setDropdownTitleRef = (node) => {
this.titleEl = node;
};
this.setDropdownSeparatorRef = (node) => {
this.separatorEl = node;
};
//--------------------------------------------------------------------------
//
// Private State/Props
//
//--------------------------------------------------------------------------
/** created list of dropdown items */
this.items = [];
this.separatorEl = null;
this.titleEl = null;
this.sortItems = (items) => items.sort((a, b) => a.position - b.position).map((a) => a.item);
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentWillLoad() {
this.groupPosition = this.getGroupPosition();
}
componentDidLoad() {
this.items = this.sortItems(this.items);
this.calciteDropdownGroupRegister.emit({
items: this.items,
position: this.groupPosition,
group: this.el,
titleEl: this.titleEl,
separatorEl: this.separatorEl
});
}
render() {
const dir = getElementDir(this.el);
const scale = getElementProp(this.el, "scale", "m");
const groupTitle = this.groupTitle ? (h("span", { "aria-hidden": "true", class: "dropdown-title", ref: this.setDropdownTitleRef }, this.groupTitle)) : null;
const dropdownSeparator = this.groupPosition > 0 ? (h("div", { class: "dropdown-separator", ref: this.setDropdownSeparatorRef, role: "separator" })) : null;
return (h(Host, { dir: dir, role: "menu", scale: scale, title: this.groupTitle }, dropdownSeparator, groupTitle, h("slot", null)));
}
//--------------------------------------------------------------------------
//
// Event Listeners
//
//--------------------------------------------------------------------------
registerCalciteDropdownItem(event) {
const item = event.target;
if (this.selectionMode === "none") {
item.active = false;
}
this.items.push({
item,
position: event.detail.position
});
event.stopPropagation();
}
updateActiveItemOnChange(event) {
this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
this.requestedDropdownItem = event.detail.requestedDropdownItem;
this.calciteDropdownItemChange.emit({
requestedDropdownGroup: this.requestedDropdownGroup,
requestedDropdownItem: this.requestedDropdownItem
});
}
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
getGroupPosition() {
return Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-dropdown-group"), this.el);
}
get el() { return getElement(this); }
};
CalciteDropdownGroup.style = calciteDropdownGroupCss;
const calciteDropdownItemCss = "@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-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([scale=s]){font-size:var(--calcite-font-size--2);padding-right:0.75rem;padding-left:1.5rem;padding-top:0.5rem;padding-bottom:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);padding-right:1rem;padding-left:2rem;padding-top:0.75rem;padding-bottom:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-1);padding-right:1.25rem;padding-left:2.5rem;padding-top:1rem;padding-bottom:1rem}:host([dir=rtl][scale=s]){padding-right:1.5rem;padding-left:0.75rem}:host([dir=rtl][scale=m]){padding-right:2rem;padding-left:1rem}:host([dir=rtl][scale=l]){padding-right:2.5rem;padding-left:1.25rem}:host{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out;cursor:pointer;text-decoration:none;outline:none;position:relative}:host:before{content:\"•\";position:absolute;opacity:0;color:var(--calcite-ui-border-1);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out}.dropdown-item-content{margin-right:auto}:host([dir=rtl]) .dropdown-item-content{margin-right:unset;margin-left:auto}:host,:host([islink]) a{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host(:focus),:host([islink]) a:focus{outline:2px solid var(--calcite-ui-blue-1);outline-offset:-2px}:host([islink]){padding:0}:host([islink]) a{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out;cursor:pointer;text-decoration:none;outline:none;position:relative}:host([islink]) a:before{content:\"•\";position:absolute;opacity:0;color:var(--calcite-ui-border-1);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out}:host([scale=s]) .dropdown-link{padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem}:host([scale=m]) .dropdown-link{padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem}:host([scale=l]) .dropdown-link{padding-left:1.25rem;padding-right:1.25rem;padding-top:1rem;padding-bottom:1rem}:host(:hover),:host(:active){background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1);text-decoration:none}:host(:focus){color:var(--calcite-ui-text-1);text-decoration:none}:host(:active){background-color:var(--calcite-ui-foreground-3)}:host(:hover):before,:host(:active):before,:host(:focus):before{opacity:1}:host([dir=rtl]):before{left:unset;right:1rem}:host([active]:not([selection-mode=none])){color:var(--calcite-ui-text-1);font-weight:500}:host([active]:not([selection-mode=none])):before{opacity:1;color:var(--calcite-ui-blue-1)}:host([active]:not([selection-mode=none])) calcite-icon{color:var(--calcite-ui-blue-1)}:host([selection-mode=multi]):before,:host([selection-mode=none]):before{display:none}:host([scale=s]):before{left:0.5rem}:host([scale=m]):before{left:0.75rem}:host([scale=l]):before{left:1rem}:host([dir=rtl]):before{left:unset}:host([dir=rtl][scale=s]):before{right:0.5rem}:host([dir=rtl][scale=m]):before{right:0.75rem}:host([dir=rtl][scale=l]):before{right:1rem}:host .dropdown-item-check-icon{position:absolute;opacity:0;-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out}:host([scale=s]) .dropdown-item-check-icon{left:0.25rem}:host([scale=m]) .dropdown-item-check-icon{left:0.5rem}:host([scale=l]) .dropdown-item-check-icon{left:0.75rem}:host([dir=rtl]) .dropdown-item-check-icon{left:unset;margin-left:0}:host([dir=rtl][scale=s]) .dropdown-item-check-icon{right:0.25rem}:host([dir=rtl][scale=m]) .dropdown-item-check-icon{right:0.5rem}:host([dir=rtl][scale=l]) .dropdown-item-check-icon{right:0.75rem}:host(:hover) .dropdown-item-check-icon{color:var(--calcite-ui-border-1);opacity:1}:host([active]) .dropdown-item-check-icon{color:var(--calcite-ui-blue-1);opacity:1}:host([scale=s]) .dropdown-item-icon-start{margin-right:0.5rem}:host([scale=s]) .dropdown-item-icon-end{margin-left:0.5rem}:host([scale=m]) .dropdown-item-icon-start{margin-right:0.75rem}:host([scale=m]) .dropdown-item-icon-end{margin-left:0.75rem}:host([scale=l]) .dropdown-item-icon-start{margin-right:1rem}:host([scale=l]) .dropdown-item-icon-end{margin-left:1rem}:host([dir=rtl]) .dropdown-item-icon-start{margin-right:0}:host([dir=rtl]) .dropdown-item-icon-end{margin-left:0}:host([dir=rtl][scale=s]) .dropdown-item-icon-start{margin-left:0.5rem}:host([dir=rtl][scale=s]) .dropdown-item-icon-end{margin-right:0.5rem}:host([dir=rtl][scale=m]) .dropdown-item-icon-start{margin-left:0.75rem}:host([dir=rtl][scale=m]) .dropdown-item-icon-end{margin-right:0.75rem}:host([dir=rtl][scale=l]) .dropdown-item-icon-start{margin-left:1rem}:host([dir=rtl][scale=l]) .dropdown-item-icon-end{margin-right:1rem}:host([dir=rtl]) calcite-icon{margin-right:0;margin-left:1rem}";
const CalciteDropdownItem = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.calciteDropdownItemSelect = createEvent(this, "calciteDropdownItemSelect", 7);
this.calciteDropdownItemKeyEvent = createEvent(this, "calciteDropdownItemKeyEvent", 7);
this.calciteDropdownItemRegister = createEvent(this, "calciteDropdownItemRegister", 7);
this.calciteDropdownCloseRequest = createEvent(this, "calciteDropdownCloseRequest", 7);
//--------------------------------------------------------------------------
//
// Public Properties
//
//--------------------------------------------------------------------------
this.active = false;
}
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
/** Focuses the selected item. */
async setFocus() {
this.el.focus();
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
this.selectionMode = getElementProp(this.el, "selection-mode", "single");
this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group");
if (this.selectionMode === "none")
this.active = false;
}
componentWillLoad() {
this.itemPosition = this.getItemPosition();
this.calciteDropdownItemRegister.emit({
position: this.itemPosition
});
}
render() {
const attributes = this.getAttributes();
const dir = getElementDir(this.el);
const scale = getElementProp(this.el, "scale", "m");
const iconScale = scale === "l" ? "m" : "s";
const iconStartEl = (h("calcite-icon", { class: "dropdown-item-icon-start", dir: dir, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: iconScale }));
const contentNode = (h("span", { class: "dropdown-item-content" }, h("slot", null)));
const iconEndEl = (h("calcite-icon", { class: "dropdown-item-icon-end", dir: dir, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: iconScale }));
const slottedContent = this.iconStart && this.iconEnd
? [iconStartEl, contentNode, iconEndEl]
: this.iconStart
? [iconStartEl, h("slot", null)]
: this.iconEnd
? [contentNode, iconEndEl]
: contentNode;
const contentEl = !this.href ? (slottedContent) : (h("a", Object.assign({}, attributes, { class: "dropdown-link", ref: (el) => (this.childLink = el) }), slottedContent));
const itemRole = this.href
? null
: this.selectionMode === "single"
? "menuitemradio"
: this.selectionMode === "multi"
? "menuitemcheckbox"
: "menuitem";
const itemAria = this.selectionMode !== "none" ? this.active.toString() : null;
return (h(Host, { "aria-checked": itemAria, dir: dir, isLink: this.href, role: itemRole, scale: scale, "selection-mode": this.selectionMode, tabindex: "0" }, this.selectionMode === "multi" ? (h("calcite-icon", { class: "dropdown-item-check-icon", icon: "check", scale: "s" })) : null, contentEl));
}
//--------------------------------------------------------------------------
//
// Event Listeners
//
//--------------------------------------------------------------------------
onClick() {
this.emitRequestedItem();
}
keyDownHandler(e) {
switch (getKey(e.key)) {
case " ":
this.emitRequestedItem();
if (this.href) {
e.preventDefault();
this.childLink.click();
}
break;
case "Enter":
this.emitRequestedItem();
if (this.href)
this.childLink.click();
break;
case "Escape":
this.calciteDropdownCloseRequest.emit();
break;
case "Tab":
case "ArrowUp":
case "ArrowDown":
case "Home":
case "End":
this.calciteDropdownItemKeyEvent.emit({ keyboardEvent: e });
break;
}
e.preventDefault();
}
updateActiveItemOnChange(event) {
const parentEmittedChange = event.composedPath().includes(this.parentDropdownGroupEl);
if (parentEmittedChange) {
this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
this.requestedDropdownItem = event.detail.requestedDropdownItem;
this.determineActiveItem();
}
}
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
determineActiveItem() {
switch (this.selectionMode) {
case "multi":
if (this.el === this.requestedDropdownItem)
this.active = !this.active;
break;
case "single":
if (this.el === this.requestedDropdownItem)
this.active = true;
else if (this.requestedDropdownGroup === this.parentDropdownGroupEl)
this.active = false;
break;
case "none":
this.active = false;
break;
}
}
emitRequestedItem() {
this.calciteDropdownItemSelect.emit({
requestedDropdownItem: this.el,
requestedDropdownGroup: this.parentDropdownGroupEl
});
}
getAttributes() {
// spread attributes from the component to rendered child, filtering out props
const props = ["icon-start", "icon-end", "active", "hasText", "isLink", "dir", "id", "theme"];
return Array.from(this.el.attributes)
.filter((a) => a && !props.includes(a.name))
.reduce((acc, { name, value }) => (Object.assign(Object.assign({}, acc), { [name]: value })), {});
}
getItemPosition() {
const group = this.el.closest("calcite-dropdown-group");
return group
? Array.prototype.indexOf.call(group.querySelectorAll("calcite-dropdown-item"), this.el)
: 1;
}
get el() { return getElement(this); }
};
CalciteDropdownItem.style = calciteDropdownItemCss;
export { CalciteDropdown as calcite_dropdown, CalciteDropdownGroup as calcite_dropdown_group, CalciteDropdownItem as calcite_dropdown_item };