@esri/solutions-components 0.10.24 → 0.10.26

package/dist/components/calcite-carousel.js

@@ -3,523 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { h as slotChangeGetAssignedElements, y as focusElementInGroup, t as toAriaBoolean, g as getElementDir, z as whenAnimationDone } from './dom.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
-import { g as guid } from './guid.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
-import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable.js';
-import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n.js';
-import { g as getRoundRobinIndex } from './array.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './progress.js';
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.2
- */
-const DURATION = 6000;
-const CSS = {
-    container: "container",
-    containerOverlaid: "container--overlaid",
-    containerEdged: "container--edged",
-    itemContainer: "item-container",
-    itemContainerForward: "item-container--forward",
-    itemContainerBackward: "item-container--backward",
-    pagination: "pagination",
-    paginationItems: "pagination-items",
-    paginationItem: "pagination-item",
-    paginationItemIndividual: "pagination-item--individual",
-    paginationItemSelected: "pagination-item--selected",
-    pageNext: "page-next",
-    pagePrevious: "page-previous",
-    autoplayControl: "autoplay-control",
-    autoplayProgress: "autoplay-progress",
-};
-const ICONS = {
-    chevronLeft: "chevron-left",
-    chevronRight: "chevron-right",
-    inactive: "bullet-point",
-    active: "bullet-point-large",
-    pause: "pause-f",
-    play: "play-f",
-};
-
-const carouselCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%;--calcite-internal-internal-carousel-item-space:1.5rem;--calcite-internal-internal-carousel-item-space-wide:3.5rem;--calcite-internal-internal-carousel-item-background-color:var(\n    --calcite-internal-carousel-item-background-color,\n    var(--calcite-color-foreground-1)\n  );--calcite-internal-internal-carousel-item-background-color-hover:var(\n    --calcite-internal-carousel-item-background-color-hover,\n    var(--calcite-color-foreground-2)\n  );--calcite-internal-internal-carousel-item-background-color-active:var(\n    --calcite-internal-carousel-item-background-color-active,\n    var(--calcite-color-foreground-2)\n  );--calcite-internal-internal-carousel-item-background-color-selected:var(\n    --calcite-internal-carousel-item-background-color-selected,\n    var(--calcite-color-foreground-1)\n  );--calcite-internal-internal-carousel-item-icon-color-hover:var(\n    --calcite-internal-carousel-item-icon-color-hover,\n    var(--calcite-action-color-transparent-hover)\n  );--calcite-internal-internal-carousel-item-icon-color:var(\n    --calcite-internal-carousel-item-icon-color,\n    var(--calcite-color-border-3)\n  );--calcite-internal-internal-carousel-item-icon-color-selected:var(\n    --calcite-internal-carousel-item-icon-color-selected,\n    var(--calcite-color-brand)\n  );--calcite-internal-internal-carousel-control-color-hover:var(\n    --calcite-internal-carousel-control-color-hover,\n    var(--calcite-internal-carousel-item-icon-color-hover)\n  );--calcite-internal-internal-carousel-control-color:var(\n    --calcite-internal-carousel-item-icon-color,\n    var(--calcite-color-border-input)\n  );--calcite-internal-internal-carousel-autoplay-progress-background-color:var(\n    --calcite-internal-carousel-autoplay-progress-background-color,\n    var(--calcite-color-border-3)\n  );--calcite-internal-internal-carousel-autoplay-progress-fill-color:var(\n    --calcite-internal-carousel-autoplay-progress-fill-color,\n    var(--calcite-color-brand)\n  )}.container{position:relative;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-2);outline-color:transparent}.container:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.container--edged:not(.container--overlaid){padding-inline:var(--calcite-internal-internal-carousel-item-space-wide);inline-size:calc(100% - var(--calcite-internal-internal-carousel-item-space-wide) * 2)}.item-container{display:flex;flex:1 1 auto;align-items:flex-start;justify-content:center;overflow:auto;padding:0.25rem;animation-name:none;animation-duration:var(--calcite-animation-timing)}.container--overlaid .item-container{padding:0px}.item-container--forward{animation-name:item-forward}.item-container--backward{animation-name:item-backward}calcite-carousel-item:not([selected]){opacity:0}.pagination{margin:0.75rem;display:flex;flex-direction:row;align-items:center;justify-content:center;inline-size:auto}.pagination-items{display:flex;flex-direction:row;align-items:center}.container--overlaid .pagination{position:absolute}.pagination-item.page-next,.pagination-item.page-previous{color:var(--calcite-internal-internal-carousel-control-color)}.pagination-item.page-next:hover,.pagination-item.page-previous:hover{color:var(--calcite-internal-internal-carousel-control-color-hover)}.container--edged .page-next,.container--edged .page-previous{block-size:3rem;inline-size:3rem;position:absolute;inset-block-start:50%;transform:translateY(-50%)}.container--edged .page-next{inset-inline-end:0}.container--edged .page-previous{inset-inline-start:0}.container--overlaid .pagination{inset-block-start:unset;inset-block-end:0;inset-inline:0}.pagination-item.autoplay-control{position:relative;color:var(--calcite-internal-internal-carousel-control-color);--calcite-color-brand:var(--calcite-internal-internal-carousel-autoplay-progress-fill-color);--calcite-color-border-3:var(--calcite-internal-internal-carousel-autoplay-progress-background-color)}.autoplay-control:focus .autoplay-progress{inset-block-end:4px;inset-inline:2px;inline-size:calc(100% - 4px)}.autoplay-progress{position:absolute;inset-block-end:2px;inset-inline:0;inline-size:100%}.pagination-item{margin:0px;block-size:2rem;inline-size:2rem;cursor:pointer;align-items:center;border-style:none;background-color:transparent;outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;--calcite-color-foreground-1:var(--calcite-internal-internal-carousel-item-background-color);color:var(--calcite-internal-internal-carousel-item-icon-color)}.pagination-item:hover{background-color:var(--calcite-internal-internal-carousel-item-background-color-hover);color:var(--calcite-internal-internal-carousel-item-icon-color-hover)}.pagination-item:focus{background-color:var(--calcite-internal-internal-carousel-item-background-color-active);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.pagination-item:active{background-color:var(--calcite-internal-internal-carousel-item-background-color-active);color:var(--calcite-internal-internal-carousel-item-icon-color-hover)}.pagination-item calcite-icon{color:inherit;pointer-events:none}.pagination-item.pagination-item--selected{--calcite-color-foreground-1:var(--calcite-internal-internal-carousel-item-background-color-selected);--calcite-color-foreground-3:var(--calcite-internal-internal-carousel-item-background-color-selected);color:var(--calcite-internal-internal-carousel-item-icon-color-selected)}.container--overlaid .pagination-item{background-color:var(--calcite-internal-internal-carousel-item-background-color)}.container--overlaid .pagination-item:hover{background-color:var(--calcite-internal-internal-carousel-item-background-color-hover)}.container--overlaid .pagination-item:focus{background-color:var(--calcite-internal-internal-carousel-item-background-color-active)}.container--overlaid .pagination-item:active{background-color:var(--calcite-internal-internal-carousel-item-background-color-active)}@keyframes item-forward{0%{transform:translate3d(100px, 0, 0)}100%{transform:translate3d(0, 0, 0)}}@keyframes item-backward{0%{transform:translate3d(-100px, 0, 0)}100%{transform:translate3d(0, 0, 0)}}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteCarouselStyle0 = carouselCss;
-
-const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.calciteCarouselChange = createEvent(this, "calciteCarouselChange", 6);
-        this.calciteCarouselPlay = createEvent(this, "calciteCarouselPlay", 6);
-        this.calciteCarouselStop = createEvent(this, "calciteCarouselStop", 6);
-        this.calciteCarouselPause = createEvent(this, "calciteCarouselPause", 6);
-        this.calciteCarouselResume = createEvent(this, "calciteCarouselResume", 6);
-        this.containerId = `calcite-carousel-container-${guid()}`;
-        this.slideDurationInterval = null;
-        this.slideInterval = null;
-        this.autoplayHandler = () => {
-            this.clearIntervals();
-            this.slideDurationInterval = setInterval(this.timer, this.autoplayDuration / 100);
-        };
-        this.timer = () => {
-            let time = this.slideDurationRemaining;
-            const notSuspended = (!this.suspendedDueToFocus && !this.suspendedDueToHover) || this.userPreventsSuspend;
-            if (notSuspended) {
-                if (time <= 0.01) {
-                    time = 1;
-                    this.nextItem(false);
-                }
-                else {
-                    time = time - 0.01;
-                }
-            }
-            if (time > 0) {
-                this.slideDurationRemaining = time;
-            }
-        };
-        this.handleSlotChange = (event) => {
-            const items = slotChangeGetAssignedElements(event);
-            if (items.length < 1) {
-                return;
-            }
-            const activeItemIndex = items.findIndex((item) => item.selected);
-            const requestedSelectedIndex = activeItemIndex > -1 ? activeItemIndex : 0;
-            this.items = items;
-            this.setSelectedItem(requestedSelectedIndex, false);
-        };
-        this.setSelectedItem = (requestedIndex, emit) => {
-            const previousSelected = this.selectedIndex;
-            this.items.forEach((el, index) => {
-                const isMatch = requestedIndex === index;
-                el.selected = isMatch;
-                if (isMatch) {
-                    this.selectedItem = el;
-                    this.selectedIndex = index;
-                }
-            });
-            if (emit) {
-                this.playing = false;
-                if (previousSelected !== this.selectedIndex) {
-                    this.calciteCarouselChange.emit();
-                }
-            }
-        };
-        this.handleArrowClick = (event) => {
-            const direction = event.target.dataset.direction;
-            if (direction === "next") {
-                this.direction = "forward";
-                this.nextItem(true);
-            }
-            else if (direction === "previous") {
-                this.direction = "backward";
-                this.previousItem();
-            }
-        };
-        this.handleItemSelection = (event) => {
-            const item = event.target;
-            const requestedPosition = parseInt(item.dataset.index);
-            if (requestedPosition === this.selectedIndex) {
-                return;
-            }
-            if (this.playing) {
-                this.handlePause(true);
-            }
-            this.direction = requestedPosition > this.selectedIndex ? "forward" : "backward";
-            this.setSelectedItem(requestedPosition, true);
-        };
-        this.toggleRotation = () => {
-            this.userPreventsSuspend = true;
-            if (this.playing) {
-                this.handlePause(true);
-            }
-            else {
-                this.handlePlay(true);
-            }
-        };
-        this.handleFocusIn = () => {
-            const isPlaying = this.playing;
-            if (isPlaying) {
-                this.suspendedDueToFocus = true;
-            }
-            if ((!this.suspendedDueToFocus || !this.suspendedDueToHover) && isPlaying) {
-                this.calciteCarouselPause.emit();
-            }
-        };
-        this.handleMouseIn = () => {
-            const isPlaying = this.playing;
-            if (isPlaying) {
-                this.suspendedDueToHover = true;
-            }
-            if ((!this.suspendedDueToFocus || !this.suspendedDueToHover) && isPlaying) {
-                this.calciteCarouselPause.emit();
-            }
-        };
-        this.handleMouseOut = (event) => {
-            const leavingComponent = !this.el.contains(event.relatedTarget);
-            const isPlaying = this.playing;
-            if (leavingComponent && isPlaying) {
-                this.suspendedDueToHover = false;
-            }
-            if (leavingComponent && isPlaying && !this.suspendedDueToFocus) {
-                this.userPreventsSuspend = false;
-                this.calciteCarouselResume.emit();
-            }
-        };
-        this.handleFocusOut = (event) => {
-            const leavingComponent = !event.composedPath().includes(event.relatedTarget);
-            const isPlaying = this.playing;
-            if (leavingComponent && isPlaying) {
-                this.suspendedDueToFocus = false;
-            }
-            if (leavingComponent && isPlaying && !this.suspendedDueToHover) {
-                this.userPreventsSuspend = false;
-                this.calciteCarouselResume.emit();
-            }
-        };
-        this.containerKeyDownHandler = (event) => {
-            if (event.target !== this.container) {
-                return;
-            }
-            const lastItem = this.items.length - 1;
-            switch (event.key) {
-                case " ":
-                case "Enter":
-                    event.preventDefault();
-                    if (this.autoplay === "" || this.autoplay || this.autoplay === "paused") {
-                        this.toggleRotation();
-                    }
-                    break;
-                case "ArrowRight":
-                    this.direction = "forward";
-                    this.nextItem(true);
-                    break;
-                case "ArrowLeft":
-                    this.direction = "backward";
-                    this.previousItem();
-                    break;
-                case "Home":
-                    event.preventDefault();
-                    if (this.selectedIndex === 0) {
-                        return;
-                    }
-                    this.direction = "backward";
-                    this.setSelectedItem(0, true);
-                    break;
-                case "End":
-                    event.preventDefault();
-                    if (this.selectedIndex === lastItem) {
-                        return;
-                    }
-                    this.direction = "forward";
-                    this.setSelectedItem(lastItem, true);
-                    break;
-            }
-        };
-        this.tabListKeyDownHandler = (event) => {
-            const interactiveItems = Array(...this.tabList.querySelectorAll("button"));
-            const currentEl = event.target;
-            switch (event.key) {
-                case "ArrowRight":
-                    focusElementInGroup(interactiveItems, currentEl, "next");
-                    break;
-                case "ArrowLeft":
-                    focusElementInGroup(interactiveItems, currentEl, "previous");
-                    break;
-                case "Home":
-                    event.preventDefault();
-                    focusElementInGroup(interactiveItems, currentEl, "first");
-                    break;
-                case "End":
-                    event.preventDefault();
-                    focusElementInGroup(interactiveItems, currentEl, "last");
-                    break;
-            }
-        };
-        this.storeTabListRef = (el) => {
-            this.tabList = el;
-        };
-        this.storeContainerRef = (el) => {
-            this.container = el;
-        };
-        this.storeItemContainerRef = (el) => {
-            this.itemContainer = el;
-        };
-        // --------------------------------------------------------------------------
-        //
-        //  Render Methods
-        //
-        // --------------------------------------------------------------------------
-        this.renderRotationControl = () => {
-            const text = this.playing ? this.messages.pause : this.messages.play;
-            return (h("button", { "aria-label": text, class: {
-                    [CSS.paginationItem]: true,
-                    [CSS.autoplayControl]: true,
-                }, onClick: this.toggleRotation, title: text }, h("calcite-icon", { icon: this.playing ? ICONS.pause : ICONS.play, scale: "s" }), this.playing && (h("calcite-progress", { class: CSS.autoplayProgress, label: this.messages.carouselItemProgress, value: this.slideDurationRemaining }))));
-        };
-        this.renderPaginationArea = () => (h("div", { class: {
-                [CSS.pagination]: true,
-                [CSS.containerOverlaid]: this.controlOverlay,
-            }, onKeyDown: this.tabListKeyDownHandler, ref: this.storeTabListRef }, (this.playing || this.autoplay === "" || this.autoplay || this.autoplay === "paused") &&
-            this.renderRotationControl(), this.arrowType === "inline" && this.renderArrow("previous"), this.renderPaginationItems(), this.arrowType === "inline" && this.renderArrow("next")));
-        this.renderPaginationItems = () => (h("div", { "aria-label": this.label, class: CSS.paginationItems, role: "tablist" }, this.items.map((item, index) => {
-            const isMatch = index === this.selectedIndex;
-            return (h("button", { "aria-controls": !isMatch ? item.id : undefined, "aria-selected": toAriaBoolean(isMatch), class: {
-                    [CSS.paginationItem]: true,
-                    [CSS.paginationItemIndividual]: true,
-                    [CSS.paginationItemSelected]: isMatch,
-                }, "data-index": index, key: item.id, onClick: this.handleItemSelection, role: "tab", title: item.label }, h("calcite-icon", { icon: isMatch ? ICONS.active : ICONS.inactive, scale: "l" })));
-        })));
-        this.renderArrow = (direction) => {
-            const isPrev = direction === "previous";
-            const dir = getElementDir(this.el);
-            const scale = this.arrowType === "edge" ? "m" : "s";
-            const css = isPrev ? CSS.pagePrevious : CSS.pageNext;
-            const title = isPrev ? this.messages.previous : this.messages.next;
-            const icon = isPrev ? ICONS.chevronLeft : ICONS.chevronRight;
-            return (h("button", { "aria-controls": this.containerId, class: { [CSS.paginationItem]: true, [css]: true }, "data-direction": direction, onClick: this.handleArrowClick, title: title }, h("calcite-icon", { flipRtl: dir === "rtl", icon: icon, scale: scale })));
-        };
-        this.autoplay = false;
-        this.arrowType = "inline";
-        this.autoplayDuration = DURATION;
-        this.controlOverlay = false;
-        this.disabled = false;
-        this.label = undefined;
-        this.messages = undefined;
-        this.messageOverrides = undefined;
-        this.paused = undefined;
-        this.selectedItem = undefined;
-        this.selectedIndex = undefined;
-        this.items = [];
-        this.direction = "standby";
-        this.defaultMessages = undefined;
-        this.playing = false;
-        this.suspendedDueToFocus = false;
-        this.suspendedDueToHover = false;
-        this.userPreventsSuspend = false;
-        this.effectiveLocale = "";
-        this.suspendedSlideDurationRemaining = 1;
-        this.slideDurationRemaining = 1;
-    }
-    autoplayWatcher(autoplay) {
-        if (!autoplay) {
-            this.handlePause(false);
-        }
-    }
-    onMessagesChange() {
-        /* wired up by t9n util */
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    // --------------------------------------------------------------------------
-    connectedCallback() {
-        connectInteractive(this);
-        connectLocalized(this);
-        connectMessages(this);
-    }
-    componentDidLoad() {
-        setComponentLoaded(this);
-    }
-    componentDidRender() {
-        updateHostInteraction(this);
-    }
-    disconnectedCallback() {
-        disconnectInteractive(this);
-        disconnectLocalized(this);
-        disconnectMessages(this);
-        this.clearIntervals();
-    }
-    async componentWillLoad() {
-        /* When the 'autoplay' property of type 'boolean | string' is set to true, the value is "". */
-        if ((this.autoplay === "" || this.autoplay) && this.autoplay !== "paused") {
-            this.handlePlay(false);
-        }
-        else if (this.autoplay === "paused") {
-            this.paused = true;
-        }
-        setUpLoadableComponent(this);
-        await setUpMessages(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    /** Sets focus on the component. */
-    async setFocus() {
-        await componentFocusable(this);
-        this.container?.focus();
-    }
-    /** Play the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. */
-    async play() {
-        /* When the 'autoplay' property of type 'boolean | string' is set to true, the value is "". */
-        if (this.playing || (this.autoplay !== "" && !this.autoplay && this.autoplay !== "paused")) {
-            return;
-        }
-        this.handlePlay(true);
-    }
-    /** Stop the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. */
-    async stop() {
-        if (!this.playing) {
-            return;
-        }
-        this.handlePause(true);
-    }
-    async directionWatcher(direction) {
-        if (direction === "standby") {
-            return;
-        }
-        await whenAnimationDone(this.itemContainer, direction === "forward" ? "item-forward" : "item-backward");
-        this.direction = "standby";
-    }
-    playingWatcher() {
-        this.paused = !this.playing;
-    }
-    suspendWatcher() {
-        if (!this.suspendedDueToFocus && !this.suspendedDueToHover) {
-            this.suspendEnd();
-        }
-        else {
-            this.suspendStart();
-        }
-    }
-    async effectiveLocaleChange() {
-        await updateMessages(this, this.effectiveLocale);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    clearIntervals() {
-        clearInterval(this.slideDurationInterval);
-        clearInterval(this.slideInterval);
-    }
-    nextItem(emit) {
-        if (this.playing && emit) {
-            this.playing = false;
-        }
-        const nextIndex = getRoundRobinIndex(this.selectedIndex + 1, this.items.length);
-        this.setSelectedItem(nextIndex, emit);
-    }
-    previousItem() {
-        this.playing = false;
-        const prevIndex = getRoundRobinIndex(Math.max(this.selectedIndex - 1, -1), this.items.length);
-        this.setSelectedItem(prevIndex, true);
-    }
-    handlePlay(emit) {
-        this.playing = true;
-        this.autoplayHandler();
-        this.slideInterval = setInterval(this.autoplayHandler, this.autoplayDuration);
-        if (emit) {
-            this.calciteCarouselPlay.emit();
-        }
-    }
-    handlePause(emit) {
-        this.playing = false;
-        this.clearIntervals();
-        this.slideDurationRemaining = 1;
-        this.suspendedSlideDurationRemaining = 1;
-        if (emit) {
-            this.calciteCarouselStop.emit();
-        }
-    }
-    suspendStart() {
-        this.suspendedSlideDurationRemaining = this.slideDurationRemaining;
-    }
-    suspendEnd() {
-        this.slideDurationRemaining = this.suspendedSlideDurationRemaining;
-    }
-    render() {
-        const { direction } = this;
-        return (h(Host, { key: 'bff4155cb4358665eb6530b6637322598604d873' }, h(InteractiveContainer, { key: '7a388be689aca07856f350963c33bce1d4e5e278', disabled: this.disabled }, h("div", { key: 'c53c92b22ace937c0d2a6568ddd729ccb1b91108', "aria-label": this.label, "aria-live": this.playing ? "off" : "polite", "aria-roledescription": this.messages.carousel, class: {
-                [CSS.container]: true,
-                [CSS.containerOverlaid]: this.controlOverlay,
-                [CSS.containerEdged]: this.arrowType === "edge",
-            }, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.containerKeyDownHandler, onMouseEnter: this.handleMouseIn, onMouseLeave: this.handleMouseOut, ref: this.storeContainerRef, role: "group", tabIndex: 0 }, h("section", { key: 'cae379b167a37ef82417ab308c7d623300790122', class: {
-                [CSS.itemContainer]: true,
-                [CSS.itemContainerForward]: direction === "forward",
-                [CSS.itemContainerBackward]: direction === "backward",
-            }, id: this.containerId,
-            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
-            ref: this.storeItemContainerRef }, h("slot", { key: 'bf14a67b46e8946e9cafc57a8d0625b65513f702', onSlotchange: this.handleSlotChange })), this.items.length > 1 && this.renderPaginationArea(), this.arrowType === "edge" && this.renderArrow("previous"), this.arrowType === "edge" && this.renderArrow("next")))));
-    }
-    static get assetsDirs() { return ["assets"]; }
-    get el() { return this; }
-    static get watchers() { return {
-        "autoplay": ["autoplayWatcher"],
-        "messageOverrides": ["onMessagesChange"],
-        "direction": ["directionWatcher"],
-        "playing": ["playingWatcher"],
-        "suspendedDueToFocus": ["suspendWatcher"],
-        "suspendedDueToHover": ["suspendWatcher"],
-        "effectiveLocale": ["effectiveLocaleChange"]
-    }; }
-    static get style() { return CalciteCarouselStyle0; }
-}, [1, "calcite-carousel", {
-        "autoplay": [520],
-        "arrowType": [513, "arrow-type"],
-        "autoplayDuration": [514, "autoplay-duration"],
-        "controlOverlay": [516, "control-overlay"],
-        "disabled": [516],
-        "label": [1],
-        "messages": [1040],
-        "messageOverrides": [1040],
-        "paused": [1028],
-        "selectedItem": [1040],
-        "selectedIndex": [32],
-        "items": [32],
-        "direction": [32],
-        "defaultMessages": [32],
-        "playing": [32],
-        "suspendedDueToFocus": [32],
-        "suspendedDueToHover": [32],
-        "userPreventsSuspend": [32],
-        "effectiveLocale": [32],
-        "suspendedSlideDurationRemaining": [32],
-        "slideDurationRemaining": [32],
-        "setFocus": [64],
-        "play": [64],
-        "stop": [64]
-    }, undefined, {
-        "autoplay": ["autoplayWatcher"],
-        "messageOverrides": ["onMessagesChange"],
-        "direction": ["directionWatcher"],
-        "playing": ["playingWatcher"],
-        "suspendedDueToFocus": ["suspendWatcher"],
-        "suspendedDueToHover": ["suspendWatcher"],
-        "effectiveLocale": ["effectiveLocaleChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["calcite-carousel", "calcite-icon", "calcite-progress"];
-    components.forEach(tagName => { switch (tagName) {
-        case "calcite-carousel":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Carousel);
-            }
-            break;
-        case "calcite-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "calcite-progress":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { C as Carousel, d as defineCustomElement$1 } from './carousel.js';
 
 const CalciteCarousel = Carousel;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/card-manager2.js

@@ -45,6 +45,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         this.zoomAndScrollToSelected = undefined;
         this.selectedFeaturesIds = undefined;
         this.enableCreateFeatures = true;
+        this.selectingFeatureFromMap = undefined;
         this._cardLoading = false;
         this._graphics = undefined;
         this._showCreateFeatureComponent = false;
@@ -137,8 +138,9 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         const messageClass = this._graphics?.length > 0 || this._showCreateFeatureComponent ? "display-none" : "";
         const isTable = this.layer?.isTable;
         const heading = isTable ? this._translations.createRecord : this._translations.createFeature;
+        const guideMsg = this.customInfoText || this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart;
         const showCreateFeatureOrRecordBtn = this.enableCreateFeatures && this.layer?.capabilities?.operations?.supportsAdd;
-        return (h(Host, { key: '6089a5003e4ee08df4da7ecbcf8e6a3c8628f8bf' }, h("div", { key: '60dc1c21c650cce5165f56a0e040feba3652ae10', class: "overflow-auto height-full" }, h("calcite-shell", { key: '530a3173010e32fe062dc313ed3805833228f0fd', class: "position-relative " + featuresClass }, h("div", { key: 'af2350dac50f8ecc576cdeb528b350557057ff8d', class: "position-static z-index-500" }, h("info-card", { key: '626b34ec1ed2fc7e52f0ee2f9ae4520d1bcceb08', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: '642531296a90d92068592eef75bc4632438a4cbc', class: "position-relative " + messageClass }, h("calcite-flow-item", { key: 'b15e856439afdf9f08df9ff22f4e7dd7fee74273' }, h("calcite-panel", { key: '9305e17349e3b653565d1c183e118bdc3b791e23' }, h("div", { key: '25cf89836b8d20c6728842c5372e2c17dda967e6', class: "padding-1" }, h("calcite-notice", { key: '8df4a9c3e037f1b9f6131371d36a23e845db7ee2', icon: "table", open: true }, h("div", { key: '5c613ab8e9b9c25fc9f824e1007c3c4fa48b15b5', slot: "message" }, this.customInfoText || this._translations.selectFeaturesToStart))), showCreateFeatureOrRecordBtn && h("calcite-button", { key: 'ba88fcd64b3cf2ae1fc36da58581974473d4e0b3', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature)))), h("calcite-shell", { key: '5e64963bf756e397c819a4c60112191031d9113f', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: '7d93240bffd381e2ed1e6dc10126b30cb1a143f9' }, h("calcite-panel", { key: '6ae7f4917394521b3226e38e07ac8eaf8c29b58e', heading: heading }, h("calcite-action", { key: '60cfdea79ad19ba0b62a9fb2ef3a6495c41b1f53', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "back" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: 'ab10ab259363cee6b872f7e6619518125141759e', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
+        return (h(Host, { key: '7bcc2cfc05bfb95ef444b2036c0fd709f816bfe8' }, h("div", { key: '088e91d3084a43cab7da6e2985784a9675f30bfb', class: "overflow-auto height-full" }, h("calcite-shell", { key: '4ce541bdadc42cc2625756af104e144e61ca0593', class: "position-relative " + featuresClass }, h("div", { key: 'f3fd57ce5a0122df70d36a72e7d8c7ace4ffed0c', class: "position-static z-index-500" }, h("info-card", { key: 'ed1f8e88937d905928e97f1149acdc42fc557d7c', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: '21cd22e9d40954324ab68ae0f44305541a78faa4', class: "position-relative " + messageClass }, h("calcite-flow-item", { key: '2206f7bf57133e6249e84eed06363485dc540e89' }, h("calcite-panel", { key: 'a6a43c3eefcc1b03006dc14f39c9ba692620cf51' }, h("div", { key: 'f58c54e68a59e09ce8d51b010876e6f0261d920a', class: "padding-1" }, h("calcite-notice", { key: '5e57dcae6e804c3954a693d972a47171e07419a5', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, h("div", { key: '9391598f800576d7f8dd2ca5778d8a9d493df5cc', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && h("calcite-button", { key: 'f30040df430858472437acef88f216040e4f3a4f', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature)))), h("calcite-shell", { key: '6d14a7483427aa478f53e4ee54664ef2aae999fb', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: 'cace557395071006fcf0fc723f1808cad19f1099' }, h("calcite-panel", { key: '3eaa505ebf1d552775970c4f5b7dfc8f321c3f93', heading: heading }, h("calcite-action", { key: '68a09bb37ea2b6d827de48b13e1a41c74f5c34c6', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: '3e326f1e523fe3245365a4dad69372b52a969ae3', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
     }
     /**
    * Returns the editor component for adding feature
@@ -149,7 +151,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
                 setTimeout(() => {
                     this._isFeatureCreated = false;
                 }, 2000);
-            }, onSuccess: this._featureCreated.bind(this), ref: el => this._createFeature = el, selectedLayerId: this.layer?.id })));
+            }, onSuccess: this._featureCreated.bind(this), ref: el => this._createFeature = el, selectedLayerId: this.layer?.id, showGuidingMsgWhileDrawing: false })));
     }
     //--------------------------------------------------------------------------
     //
@@ -158,7 +160,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
     //--------------------------------------------------------------------------
     /**
      * Gets the Feature using its ids
-     *
+     * @param ids list of ids that are currently selected
      * @returns Promise when complete
      * @protected
      */
@@ -222,6 +224,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
         "selectedFeaturesIds": [16],
         "enableCreateFeatures": [4, "enable-create-features"],
+        "selectingFeatureFromMap": [4, "selecting-feature-from-map"],
         "_cardLoading": [32],
         "_graphics": [32],
         "_showCreateFeatureComponent": [32],

package/dist/{esm/calcite-carousel-item.entry.js → components/carousel-item.js}

@@ -3,8 +3,8 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b793d9aa.js';
-import { g as guid } from './guid-42656051.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as guid } from './guid.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
@@ -19,9 +19,11 @@ const CSS = {
 const carouselItemCss = ":host{display:flex}.container{display:none;inline-size:var(--calcite-container-size-content-fluid)}:host([selected]) .container{display:block}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteCarouselItemStyle0 = carouselItemCss;
 
-const CarouselItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.guid = `calcite-carousel-item-${guid()}`;
         this.label = undefined;
         this.selected = false;
@@ -35,8 +37,25 @@ const CarouselItem = class {
         const id = this.el.id || this.guid;
         return (h(Host, { key: '6d4ac387ae1b4748050c82d8387edd30e6c0e662', id: id }, h("div", { key: 'c6a4c67d99dd6e34198b2d128efb518e757277ce', "aria-label": this.label, class: { [CSS.container]: true, [CSS.selected]: this.selected }, role: "tabpanel" }, h("slot", { key: '2ed94883d41dba5430a39933c6fe91bb25b12703' }))));
     }
-    get el() { return getElement(this); }
-};
-CarouselItem.style = CalciteCarouselItemStyle0;
+    get el() { return this; }
+    static get style() { return CalciteCarouselItemStyle0; }
+}, [1, "calcite-carousel-item", {
+        "label": [1],
+        "selected": [516]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["calcite-carousel-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "calcite-carousel-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CarouselItem);
+            }
+            break;
+    } });
+}
+defineCustomElement();
 
-export { CarouselItem as calcite_carousel_item };
+export { CarouselItem as C, defineCustomElement as d };