@esri/solutions-components 0.8.2 → 0.8.3

package/dist/solutions-components/calcite-radio-button.entry.js

@@ -0,0 +1,318 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, i as forceUpdate, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { g as getRoundRobinIndex } from './array-396bdf3c.js';
+import { a as getElementDir, e as focusElement, t as toAriaBoolean } from './dom-b91aa537.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-f2181470.js';
+import { g as guid } from './guid-b75a5f7b.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-71585ecc.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-16184ce7.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-aea90723.js';
+import './resources-0f8db821.js';
+import './browser-b8d08bed.js';
+import './component-edd2c3cd.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const CSS = {
+    container: "container",
+};
+
+const radioButtonCss = ":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:block;cursor:pointer}:host .container{position:relative;outline:2px solid transparent;outline-offset:2px}:host .radio{cursor:pointer;border-radius:9999px;background-color:var(--calcite-color-foreground-1);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;box-shadow:inset 0 0 0 1px var(--calcite-color-border-input)}:host([hovered]) .radio,:host(:not([checked])[focused]:not([disabled])) .radio{box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}:host([focused]) .radio{outline:2px solid 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          )}:host([disabled]) .radio{cursor:default;opacity:var(--calcite-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hovered][disabled]) .radio{box-shadow:inset 0 0 0 1px var(--calcite-color-border-input)}:host([scale=s]){--calcite-radio-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-radio-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-radio-size:var(--calcite-font-size-0)}.radio{block-size:var(--calcite-radio-size);max-inline-size:var(--calcite-radio-size);min-inline-size:var(--calcite-radio-size)}:host([scale=s][checked]) .radio,:host([hovered][scale=s][checked][disabled]) .radio{box-shadow:inset 0 0 0 4px var(--calcite-color-brand)}:host([scale=s][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 4px var(--calcite-color-brand), 0 0 0 2px var(--calcite-color-foreground-1)}:host([scale=m][checked]) .radio,:host([hovered][scale=m][checked][disabled]) .radio{box-shadow:inset 0 0 0 5px var(--calcite-color-brand)}:host([scale=m][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 5px var(--calcite-color-brand), 0 0 0 2px var(--calcite-color-foreground-1)}:host([scale=l][checked]) .radio,:host([hovered][scale=l][checked][disabled]) .radio{box-shadow:inset 0 0 0 6px var(--calcite-color-brand)}:host([scale=l][focused][checked]:not([disabled])) .radio{box-shadow:inset 0 0 0 6px var(--calcite-color-brand), 0 0 0 2px var(--calcite-color-foreground-1)}@media (forced-colors: active){:host([checked]) .radio::after,:host([checked][disabled]) .radio::after{content:\"\";inline-size:var(--calcite-radio-size);block-size:var(--calcite-radio-size);background-color:windowText;display:block}}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+
+const RadioButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteInternalRadioButtonBlur = createEvent(this, "calciteInternalRadioButtonBlur", 6);
+        this.calciteRadioButtonChange = createEvent(this, "calciteRadioButtonChange", 6);
+        this.calciteInternalRadioButtonCheckedChange = createEvent(this, "calciteInternalRadioButtonCheckedChange", 6);
+        this.calciteInternalRadioButtonFocus = createEvent(this, "calciteInternalRadioButtonFocus", 6);
+        this.selectItem = (items, selectedIndex) => {
+            items[selectedIndex].click();
+        };
+        this.queryButtons = () => {
+            return Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden])")).filter((radioButton) => radioButton.name === this.name);
+        };
+        this.isFocusable = () => {
+            const radioButtons = this.queryButtons();
+            const firstFocusable = radioButtons.find((radioButton) => !radioButton.disabled);
+            const checked = radioButtons.find((radioButton) => radioButton.checked);
+            return firstFocusable === this.el && !checked;
+        };
+        this.check = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.focused = true;
+            this.setFocus();
+            if (this.checked) {
+                return;
+            }
+            this.uncheckAllRadioButtonsInGroup();
+            this.checked = true;
+            this.calciteRadioButtonChange.emit();
+        };
+        this.clickHandler = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.check();
+        };
+        this.setContainerEl = (el) => {
+            this.containerEl = el;
+        };
+        this.handleKeyDown = (event) => {
+            const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
+            const { key } = event;
+            const { el } = this;
+            if (keys.indexOf(key) === -1) {
+                return;
+            }
+            if (key === " ") {
+                this.check();
+                event.preventDefault();
+                return;
+            }
+            let adjustedKey = key;
+            if (getElementDir(el) === "rtl") {
+                if (key === "ArrowRight") {
+                    adjustedKey = "ArrowLeft";
+                }
+                if (key === "ArrowLeft") {
+                    adjustedKey = "ArrowRight";
+                }
+            }
+            const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden])")).filter((radioButton) => radioButton.name === this.name);
+            let currentIndex = 0;
+            const radioButtonsLength = radioButtons.length;
+            radioButtons.some((item, index) => {
+                if (item.checked) {
+                    currentIndex = index;
+                    return true;
+                }
+            });
+            switch (adjustedKey) {
+                case "ArrowLeft":
+                case "ArrowUp":
+                    event.preventDefault();
+                    this.selectItem(radioButtons, getRoundRobinIndex(Math.max(currentIndex - 1, -1), radioButtonsLength));
+                    return;
+                case "ArrowRight":
+                case "ArrowDown":
+                    event.preventDefault();
+                    this.selectItem(radioButtons, getRoundRobinIndex(currentIndex + 1, radioButtonsLength));
+                    return;
+                default:
+                    return;
+            }
+        };
+        this.onContainerBlur = () => {
+            this.focused = false;
+            this.calciteInternalRadioButtonBlur.emit();
+        };
+        this.onContainerFocus = () => {
+            if (!this.disabled) {
+                this.focused = true;
+                this.calciteInternalRadioButtonFocus.emit();
+            }
+        };
+        this.checked = false;
+        this.disabled = false;
+        this.focused = false;
+        this.form = undefined;
+        this.guid = undefined;
+        this.hovered = false;
+        this.label = undefined;
+        this.name = undefined;
+        this.required = false;
+        this.scale = "m";
+        this.value = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Global attributes
+    //
+    //--------------------------------------------------------------------------
+    handleHiddenChange() {
+        this.updateTabIndexOfOtherRadioButtonsInGroup();
+    }
+    checkedChanged(newChecked) {
+        if (newChecked) {
+            this.uncheckOtherRadioButtonsInGroup();
+        }
+        this.calciteInternalRadioButtonCheckedChange.emit();
+    }
+    disabledChanged() {
+        this.updateTabIndexOfOtherRadioButtonsInGroup();
+    }
+    nameChanged() {
+        this.checkLastRadioButton();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        await componentFocusable(this);
+        if (!this.disabled) {
+            focusElement(this.containerEl);
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    syncHiddenFormInput(input) {
+        input.type = "radio";
+    }
+    onLabelClick(event) {
+        if (this.disabled || this.el.hidden) {
+            return;
+        }
+        const label = event.currentTarget;
+        const radioButton = label.for
+            ? this.rootNode.querySelector(`calcite-radio-button[id="${label.for}"]`)
+            : label.querySelector(`calcite-radio-button[name="${this.name}"]`);
+        if (!radioButton) {
+            return;
+        }
+        radioButton.focused = true;
+        this.setFocus();
+        if (radioButton.checked) {
+            return;
+        }
+        this.uncheckOtherRadioButtonsInGroup();
+        radioButton.checked = true;
+        this.calciteRadioButtonChange.emit();
+    }
+    checkLastRadioButton() {
+        const radioButtons = this.queryButtons();
+        const checkedRadioButtons = radioButtons.filter((radioButton) => radioButton.checked);
+        if ((checkedRadioButtons === null || checkedRadioButtons === void 0 ? void 0 : checkedRadioButtons.length) > 1) {
+            const lastCheckedRadioButton = checkedRadioButtons[checkedRadioButtons.length - 1];
+            checkedRadioButtons
+                .filter((checkedRadioButton) => checkedRadioButton !== lastCheckedRadioButton)
+                .forEach((checkedRadioButton) => {
+                checkedRadioButton.checked = false;
+                checkedRadioButton.emitCheckedChange();
+            });
+        }
+    }
+    /** @internal */
+    async emitCheckedChange() {
+        this.calciteInternalRadioButtonCheckedChange.emit();
+    }
+    uncheckAllRadioButtonsInGroup() {
+        const radioButtons = this.queryButtons();
+        radioButtons.forEach((radioButton) => {
+            if (radioButton.checked) {
+                radioButton.checked = false;
+                radioButton.focused = false;
+            }
+        });
+    }
+    uncheckOtherRadioButtonsInGroup() {
+        const radioButtons = this.queryButtons();
+        const otherRadioButtons = radioButtons.filter((radioButton) => radioButton.guid !== this.guid);
+        otherRadioButtons.forEach((otherRadioButton) => {
+            if (otherRadioButton.checked) {
+                otherRadioButton.checked = false;
+                otherRadioButton.focused = false;
+            }
+        });
+    }
+    updateTabIndexOfOtherRadioButtonsInGroup() {
+        const radioButtons = this.queryButtons();
+        const otherFocusableRadioButtons = radioButtons.filter((radioButton) => radioButton.guid !== this.guid && !radioButton.disabled);
+        otherFocusableRadioButtons.forEach((radioButton) => {
+            forceUpdate(radioButton);
+        });
+    }
+    getTabIndex() {
+        if (this.disabled) {
+            return undefined;
+        }
+        return this.checked || this.isFocusable() ? 0 : -1;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    pointerEnterHandler() {
+        if (this.disabled) {
+            return;
+        }
+        this.hovered = true;
+    }
+    pointerLeaveHandler() {
+        if (this.disabled) {
+            return;
+        }
+        this.hovered = false;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        this.rootNode = this.el.getRootNode();
+        this.guid = this.el.id || `calcite-radio-button-${guid()}`;
+        if (this.name) {
+            this.checkLastRadioButton();
+        }
+        connectInteractive(this);
+        connectLabel(this);
+        connectForm(this);
+        this.updateTabIndexOfOtherRadioButtonsInGroup();
+    }
+    componentWillLoad() {
+        setUpLoadableComponent(this);
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+        if (this.focused && !this.disabled) {
+            this.setFocus();
+        }
+    }
+    disconnectedCallback() {
+        disconnectInteractive(this);
+        disconnectLabel(this);
+        disconnectForm(this);
+        this.updateTabIndexOfOtherRadioButtonsInGroup();
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    render() {
+        const tabIndex = this.getTabIndex();
+        return (h(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown }, h(InteractiveContainer, { disabled: this.disabled }, h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, role: "radio", tabIndex: tabIndex,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setContainerEl }, h("div", { class: "radio" })), h(HiddenFormInputSlot, { component: this }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "hidden": ["handleHiddenChange"],
+        "checked": ["checkedChanged"],
+        "disabled": ["disabledChanged"],
+        "name": ["nameChanged"]
+    }; }
+};
+RadioButton.style = radioButtonCss;
+
+export { RadioButton as calcite_radio_button };

package/dist/solutions-components/calcite-rating.entry.js

@@ -0,0 +1,261 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { h, r as registerInstance, e as createEvent, a as Host, g as getElement } from './index-bdfaac50.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-f2181470.js';
+import { g as guid } from './guid-b75a5f7b.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-71585ecc.js';
+import { c as connectLabel, d as disconnectLabel } from './label-16184ce7.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-b39c5433.js';
+import { f as focusFirstTabbable } from './dom-b91aa537.js';
+import './browser-b8d08bed.js';
+import './component-edd2c3cd.js';
+import './key-9a10d862.js';
+import './observers-5ba39eee.js';
+import './resources-0f8db821.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const StarIcon = ({ full, scale, partial }) => (h("calcite-icon", { class: partial ? undefined : "icon",
+    icon: full ? "star-f" : "star",
+    scale }));
+
+const ratingCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([read-only]) *,:host([disabled]) *,:host([read-only]) ::slotted(*),:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;align-items:center;inline-size:-moz-fit-content;inline-size:fit-content}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){block-size:1.5rem;--calcite-rating-spacing-unit:0.25rem}:host([scale=m]){block-size:2rem;--calcite-rating-spacing-unit:0.5rem}:host([scale=l]){block-size:2.75rem;--calcite-rating-spacing-unit:0.75rem}.fieldset{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing-unit)}.wrapper{display:inline-block}.star{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-color-border-input)}.star:focus{outline:2px solid 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          )}.average,.fraction{color:var(--calcite-color-status-warning)}.hovered,.selected{color:var(--calcite-color-brand)}.fraction{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:absolute;pointer-events:none;inset-block-start:0;overflow:hidden;inset-inline-start:0}calcite-chip{pointer-events:none;cursor:default}.number--average{font-weight:bold}.number--count{color:var(--calcite-color-text-2);font-style:italic}.number--count:not(:first-child){margin-inline-start:var(--calcite-rating-spacing-unit)}.visually-hidden{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
+
+const Rating = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteRatingChange = createEvent(this, "calciteRatingChange", 6);
+        this.handleRatingPointerOver = () => {
+            this.isKeyboardInteraction = false;
+        };
+        this.handleRatingPointerOut = () => {
+            this.isKeyboardInteraction = true;
+            this.hoverValue = null;
+        };
+        this.handleHostKeyDown = () => {
+            this.isKeyboardInteraction = true;
+        };
+        this.handleLabelKeyDown = (event) => {
+            const inputValue = this.getValueFromLabelEvent(event);
+            const key = event.key;
+            const numberKey = key == " " ? undefined : Number(key);
+            this.emit = true;
+            if (isNaN(numberKey)) {
+                switch (key) {
+                    case "Enter":
+                    case " ":
+                        this.value = !this.required && this.value === inputValue ? 0 : inputValue;
+                        break;
+                    case "ArrowLeft":
+                        this.value = this.getPreviousRatingValue(inputValue);
+                        this.updateFocus();
+                        event.preventDefault();
+                        break;
+                    case "ArrowRight":
+                        this.value = this.getNextRatingValue(inputValue);
+                        this.updateFocus();
+                        event.preventDefault();
+                        break;
+                    case "Tab":
+                        this.hoverValue = null;
+                    default:
+                        break;
+                }
+            }
+            else {
+                if (!this.required && numberKey >= 0 && numberKey <= this.max) {
+                    this.value = numberKey;
+                }
+                else if (this.required && numberKey > 0 && numberKey <= this.max) {
+                    this.value = numberKey;
+                }
+                this.updateFocus();
+            }
+        };
+        this.handleInputChange = (event) => {
+            if (this.isKeyboardInteraction === true) {
+                const inputVal = Number(event.target["value"]);
+                this.hoverValue = inputVal;
+                this.value = inputVal;
+            }
+        };
+        this.handleLabelPointerOver = (event) => {
+            this.hoverValue = this.getValueFromLabelEvent(event);
+        };
+        this.handleLabelPointerDown = (event) => {
+            const target = event.currentTarget;
+            const inputValue = this.getValueFromLabelEvent(event);
+            this.hoverValue = inputValue;
+            this.emit = true;
+            this.value = !this.required && this.value === inputValue ? 0 : inputValue;
+            target.focus();
+        };
+        this.handleLabelClick = (event) => {
+            //preventing pointerdown event will supress any compatability mouse events except for click event.
+            event.preventDefault();
+        };
+        this.handleLabelFocus = (event) => {
+            const inputValue = this.getValueFromLabelEvent(event);
+            this.hoverValue = inputValue;
+        };
+        this.setLabelEl = (el) => {
+            this.labelElements.push(el);
+        };
+        this.emit = false;
+        this.guid = `calcite-ratings-${guid()}`;
+        this.isKeyboardInteraction = true;
+        this.labelElements = [];
+        this.max = 5;
+        this.average = undefined;
+        this.count = undefined;
+        this.disabled = false;
+        this.form = undefined;
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.name = undefined;
+        this.readOnly = false;
+        this.required = false;
+        this.scale = "m";
+        this.showChip = false;
+        this.value = 0;
+        this.effectiveLocale = "";
+        this.defaultMessages = undefined;
+        this.hoverValue = undefined;
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    handleValueUpdate(newValue) {
+        this.hoverValue = newValue;
+        if (this.emit) {
+            this.calciteRatingChange.emit();
+        }
+        this.emit = false;
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        connectInteractive(this);
+        connectLocalized(this);
+        connectMessages(this);
+        connectLabel(this);
+        connectForm(this);
+    }
+    async componentWillLoad() {
+        await setUpMessages(this);
+        setUpLoadableComponent(this);
+    }
+    componentWillRender() {
+        this.starsMap = Array.from({ length: this.max }, (_, i) => {
+            const value = i + 1;
+            const average = !this.hoverValue && this.average && !this.value && value <= this.average;
+            const checked = value === this.value;
+            const fraction = this.average && this.average + 1 - value;
+            const hovered = value <= this.hoverValue;
+            const id = `${this.guid}-${value}`;
+            const partial = !this.hoverValue && !this.value && !hovered && fraction > 0 && fraction < 1;
+            const selected = this.value >= value;
+            const tabIndex = this.getTabIndex(value);
+            return {
+                average,
+                checked,
+                fraction,
+                hovered,
+                id,
+                partial,
+                selected,
+                value,
+                tabIndex,
+            };
+        });
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    disconnectedCallback() {
+        disconnectInteractive(this);
+        disconnectLocalized(this);
+        disconnectMessages(this);
+        disconnectLabel(this);
+        disconnectForm(this);
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    render() {
+        var _a, _b;
+        return (h(Host, { onKeyDown: this.handleHostKeyDown, onPointerOut: this.handleRatingPointerOut, onPointerOver: this.handleRatingPointerOver }, h(InteractiveContainer, { disabled: this.disabled }, h("span", { class: "wrapper" }, h("fieldset", { class: "fieldset", disabled: this.disabled }, h("legend", { class: "visually-hidden" }, this.messages.rating), this.starsMap.map(({ average, checked, fraction, hovered, id, partial, selected, value, tabIndex, }) => {
+            return (h("label", { class: {
+                    star: true,
+                    selected,
+                    hovered,
+                    average,
+                    partial,
+                }, "data-value": value, htmlFor: id, onClick: this.handleLabelClick, onFocus: this.handleLabelFocus, onKeyDown: this.handleLabelKeyDown, onPointerDown: this.handleLabelPointerDown, onPointerOver: this.handleLabelPointerOver, tabIndex: tabIndex,
+                // eslint-disable-next-line react/jsx-sort-props
+                ref: this.setLabelEl }, h("input", { checked: checked, class: "visually-hidden", disabled: this.disabled || this.readOnly, id: id, name: this.guid, onChange: this.handleInputChange, tabIndex: -1, type: "radio", value: value }), h(StarIcon, { full: selected || average, scale: this.scale }), partial && (h("div", { class: "fraction", style: { width: `${fraction * 100}%` } }, h(StarIcon, { full: true, partial: true, scale: this.scale }))), h("span", { class: "visually-hidden" }, this.messages.stars.replace("{num}", `${value}`))));
+        }), (this.count || this.average) && this.showChip ? (h("calcite-chip", { scale: this.scale, value: (_a = this.count) === null || _a === void 0 ? void 0 : _a.toString() }, !!this.average && h("span", { class: "number--average" }, this.average.toString()), !!this.count && h("span", { class: "number--count" }, "(", (_b = this.count) === null || _b === void 0 ? void 0 : _b.toString(), ")"))) : null), h(HiddenFormInputSlot, { component: this })))));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    onLabelClick() {
+        this.setFocus();
+    }
+    updateFocus() {
+        this.hoverValue = this.value;
+        this.labelElements[this.value - 1].focus();
+    }
+    getTabIndex(value) {
+        if (this.readOnly || (this.value !== value && (this.value || value !== 1))) {
+            return -1;
+        }
+        return 0;
+    }
+    getValueFromLabelEvent(event) {
+        const target = event.currentTarget;
+        return Number(target.getAttribute("data-value"));
+    }
+    getNextRatingValue(currentValue) {
+        return currentValue === 5 ? 1 : currentValue + 1;
+    }
+    getPreviousRatingValue(currentValue) {
+        return currentValue === 1 ? 5 : currentValue - 1;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        await componentFocusable(this);
+        focusFirstTabbable(this.el);
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "messageOverrides": ["onMessagesChange"],
+        "value": ["handleValueUpdate"],
+        "effectiveLocale": ["effectiveLocaleChange"]
+    }; }
+};
+Rating.style = ratingCss;
+
+export { Rating as calcite_rating };