@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
227 lines (222 loc) • 9.51 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
* v1.5.0-next.4
*/
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { i as focusElementInGroup } from './dom.js';
const stepperCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{position:relative;display:flex;inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content;flex-direction:row;flex-wrap:wrap;align-items:stretch;justify-content:space-between}:host([layout=vertical]){flex:1 1 auto;flex-direction:column}:host([layout=horizontal]){display:grid;grid-template-areas:\"items\" \"content\"}";
const Stepper = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.calciteStepperItemChange = createEvent(this, "calciteStepperItemChange", 6);
this.calciteInternalStepperItemChange = createEvent(this, "calciteInternalStepperItemChange", 6);
//--------------------------------------------------------------------------
//
// Private State/Props
//
//--------------------------------------------------------------------------
this.itemMap = new Map();
/** list of sorted Stepper items */
this.items = [];
/** list of enabled Stepper items */
this.enabledItems = [];
this.icon = false;
this.layout = "horizontal";
this.numbered = false;
this.numberingSystem = undefined;
this.selectedItem = null;
this.scale = "m";
}
numberingSystemChange() {
this.setStepperItemNumberingSystem();
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentDidLoad() {
// if no stepper items are set as active, default to the first one
if (typeof this.currentPosition !== "number") {
this.calciteInternalStepperItemChange.emit({
position: 0
});
}
}
render() {
return (h("slot", { onSlotchange: (event) => {
const items = event.currentTarget
.assignedElements()
.filter((el) => el?.tagName === "CALCITE-STEPPER-ITEM");
const spacing = Array(items.length).fill("1fr").join(" ");
this.el.style.gridTemplateAreas = spacing;
this.el.style.gridTemplateColumns = spacing;
this.setStepperItemNumberingSystem();
} }));
}
//--------------------------------------------------------------------------
//
// Event Listeners
//
//--------------------------------------------------------------------------
calciteInternalStepperItemKeyEvent(event) {
const item = event.detail.item;
const itemToFocus = event.target;
switch (item.key) {
case "ArrowDown":
case "ArrowRight":
focusElementInGroup(this.enabledItems, itemToFocus, "next");
break;
case "ArrowUp":
case "ArrowLeft":
focusElementInGroup(this.enabledItems, itemToFocus, "previous");
break;
case "Home":
focusElementInGroup(this.enabledItems, itemToFocus, "first");
break;
case "End":
focusElementInGroup(this.enabledItems, itemToFocus, "last");
break;
}
event.stopPropagation();
}
registerItem(event) {
const item = event.target;
const { content, position } = event.detail;
this.itemMap.set(item, { position, content });
this.items = this.sortItems();
this.enabledItems = this.filterItems();
event.stopPropagation();
}
updateItem(event) {
const { position } = event.detail;
if (typeof position === "number") {
this.currentPosition = position;
this.selectedItem = event.target;
}
this.calciteInternalStepperItemChange.emit({
position
});
}
handleUserRequestedStepperItemSelect() {
this.calciteStepperItemChange.emit();
}
//--------------------------------------------------------------------------
//
// Public Methods
//
//--------------------------------------------------------------------------
/** Set the next `calcite-stepper-item` as active. */
async nextStep() {
const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition + 1, "next");
if (typeof enabledStepIndex !== "number") {
return;
}
this.updateStep(enabledStepIndex);
}
/** Set the previous `calcite-stepper-item` as active. */
async prevStep() {
const enabledStepIndex = this.getEnabledStepIndex(this.currentPosition - 1, "previous");
if (typeof enabledStepIndex !== "number") {
return;
}
this.updateStep(enabledStepIndex);
}
/**
* Set a specified `calcite-stepper-item` as active.
*
* @param step
*/
async goToStep(step) {
const position = step - 1;
if (this.currentPosition !== position) {
this.updateStep(position);
}
}
/** Set the first `calcite-stepper-item` as active. */
async startStep() {
const enabledStepIndex = this.getEnabledStepIndex(0, "next");
if (typeof enabledStepIndex !== "number") {
return;
}
this.updateStep(enabledStepIndex);
}
/** Set the last `calcite-stepper-item` as active. */
async endStep() {
const enabledStepIndex = this.getEnabledStepIndex(this.items.length - 1, "previous");
if (typeof enabledStepIndex !== "number") {
return;
}
this.updateStep(enabledStepIndex);
}
//--------------------------------------------------------------------------
//
// Private Methods
//
//--------------------------------------------------------------------------
getEnabledStepIndex(startIndex, direction = "next") {
const { items, currentPosition } = this;
let newIndex = startIndex;
while (items[newIndex]?.disabled) {
newIndex = newIndex + (direction === "previous" ? -1 : 1);
}
return newIndex !== currentPosition && newIndex < items.length && newIndex >= 0
? newIndex
: null;
}
updateStep(position) {
this.currentPosition = position;
this.calciteInternalStepperItemChange.emit({
position
});
}
sortItems() {
const { itemMap } = this;
return Array.from(itemMap.keys()).sort((a, b) => itemMap.get(a).position - itemMap.get(b).position);
}
filterItems() {
return this.items.filter((item) => !item.disabled);
}
setStepperItemNumberingSystem() {
this.items.forEach((item) => {
item.numberingSystem = this.numberingSystem;
});
}
get el() { return this; }
static get watchers() { return {
"numberingSystem": ["numberingSystemChange"]
}; }
static get style() { return stepperCss; }
}, [1, "calcite-stepper", {
"icon": [516],
"layout": [513],
"numbered": [516],
"numberingSystem": [513, "numbering-system"],
"selectedItem": [1040],
"scale": [513],
"nextStep": [64],
"prevStep": [64],
"goToStep": [64],
"startStep": [64],
"endStep": [64]
}, [[0, "calciteInternalStepperItemKeyEvent", "calciteInternalStepperItemKeyEvent"], [0, "calciteInternalStepperItemRegister", "registerItem"], [0, "calciteInternalStepperItemSelect", "updateItem"], [0, "calciteInternalUserRequestedStepperItemSelect", "handleUserRequestedStepperItemSelect"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["calcite-stepper"];
components.forEach(tagName => { switch (tagName) {
case "calcite-stepper":
if (!customElements.get(tagName)) {
customElements.define(tagName, Stepper);
}
break;
} });
}
defineCustomElement$1();
const CalciteStepper = Stepper;
const defineCustomElement = defineCustomElement$1;
export { CalciteStepper, defineCustomElement };