vira 32.4.0 → 33.0.0

package/dist/elements/vira-select.element.js

@@ -1,418 +0,0 @@
-import { assertWrap, check } from '@augment-vir/assert';
-import { randomString } from '@augment-vir/common';
-import { extractEventTarget } from '@augment-vir/web';
-import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, nothing, } from 'element-vir';
-import { listenTo } from 'typed-event-target';
-import { ChevronUp16Icon } from '../icons/index.js';
-import { viraDisabledStyles } from '../styles/disabled.js';
-import { createFocusStyles } from '../styles/focus.js';
-import { viraFormCssVars } from '../styles/form-styles.js';
-import { viraAnimationDurations } from '../styles/index.js';
-import { noNativeFormStyles } from '../styles/native-styles.js';
-import { defineViraElement } from '../util/define-vira-element.js';
-import { isViraSelectOptionGroup, } from '../util/vira-select-option.js';
-import { ViraIcon } from './vira-icon.element.js';
-function renderSelectOption(option, value) {
-    return html `
-        <option
-            ?selected=${option.value === value}
-            aria-label=${option.label}
-            ?disabled=${option.disabled}
-            value=${option.value}
-        >
-            ${option.label}
-        </option>
-    `;
-}
-/**
- * Similar to {@link ViraDropdown} but is, instead, simply a wrapper for `<select>` and nothing more.
- *
- * @category Dropdown
- * @category Elements
- * @see https://electrovir.github.io/vira/book/elements/vira-select
- */
-export const ViraSelect = defineViraElement()({
-    tagName: 'vira-select',
-    state() {
-        return {
-            /**
-             * Used to couple the label and select together. This is not applied if no label is
-             * provided.
-             */
-            randomId: randomString(32),
-            /** Removes event listeners registered during init. */
-            cleanupListeners: undefined,
-        };
-    },
-    events: {
-        valueChange: defineElementEvent(),
-    },
-    cssVars: {
-        'vira-select-padding-horizontal': '10px',
-        'vira-select-padding-vertical': '3px',
-        'vira-select-icon-padding': '40px',
-    },
-    hostClasses: {
-        'vira-select-disabled'({ inputs }) {
-            return !!inputs.disabled;
-        },
-        'vira-select-error'({ inputs }) {
-            return !!inputs.hasError;
-        },
-        'vira-select-has-label'({ inputs }) {
-            return !!inputs.label;
-        },
-        'vira-select-not-raw'({ inputs }) {
-            return !inputs.rawSelect;
-        },
-        'vira-select-readonly'({ inputs }) {
-            return !!inputs.isReadonly;
-        },
-    },
-    styles({ hostClasses, cssVars }) {
-        return css `
-            :host {
-                position: relative;
-                display: inline-flex;
-                width: 223px;
-                height: 28px;
-                box-sizing: border-box;
-                color: ${viraFormCssVars['vira-form-foreground-color'].value};
-            }
-
-            ${hostClasses['vira-select-has-label'].selector} {
-                height: auto;
-            }
-
-            /*
-                Readonly renders plain text with no select chrome, so the input height would leave
-                the text sitting above the middle of an over-tall box. That mis-aligns it against a
-                sibling label and makes readonly select rows taller than readonly text rows.
-            */
-            ${hostClasses['vira-select-readonly'].selector} {
-                height: auto;
-            }
-
-            .select-wrapper {
-                ${noNativeFormStyles};
-                height: inherit;
-                max-width: 100%;
-                flex-grow: 1;
-                display: inline-flex;
-                box-sizing: border-box;
-                align-items: center;
-                position: relative;
-                cursor: pointer;
-
-                & select {
-                    appearance: none;
-                    -webkit-appearance: none;
-                    -moz-appearance: none;
-                    color: inherit;
-                    font: inherit;
-                    outline: none;
-                    width: 100%;
-                    border: none;
-                    background: none;
-                    border-radius: inherit;
-                    cursor: pointer;
-                    height: 100%;
-                    box-sizing: border-box;
-                    /* Prevent the left pixel of text getting cut off. */
-                    padding-left: 0.5px;
-                    padding-right: 24px;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-
-                    &.placeholder {
-                        color: ${viraFormCssVars['vira-form-placeholder-color'].value};
-                    }
-
-                    &.with-icon {
-                        padding-left: ${cssVars['vira-select-icon-padding'].value};
-                    }
-                }
-
-                & ${ViraIcon} {
-                    position: absolute;
-                    pointer-events: none;
-
-                    &.trigger-icon {
-                        transform: rotate(180deg);
-                        right: 3px;
-                    }
-
-                    &.input-icon {
-                        left: 10px;
-                    }
-                }
-            }
-
-            .trigger-icon {
-                width: 20px;
-                aspect-ratio: 1;
-            }
-
-            ${hostClasses['vira-select-not-raw'].selector} {
-                .select-wrapper {
-                    border-radius: ${viraFormCssVars['vira-form-radius'].value};
-                    color: ${viraFormCssVars['vira-form-foreground-color'].value};
-                    background-color: ${viraFormCssVars['vira-form-background-color'].value};
-                    /*
-                    Border colors are actually applied via the .wrapper-border class. However, we must
-                    apply a border here still so that it takes up space.
-                */
-                    border: 1px solid transparent;
-                    cursor: pointer;
-
-                    & select {
-                        padding: ${cssVars['vira-select-padding-vertical'].value} 27px
-                            ${cssVars['vira-select-padding-vertical'].value}
-                            ${cssVars['vira-select-padding-horizontal'].value};
-
-                        &:focus:focus-visible:not([aria-disabled='true']) ~ .focus-border {
-                            ${createFocusStyles({
-            elementBorderSize: '1px',
-            noNesting: true,
-        })}
-                        }
-                    }
-
-                    & .border-style {
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 100%;
-                        height: 100%;
-                        border-radius: ${viraFormCssVars['vira-form-radius'].value};
-                        z-index: 0;
-                        pointer-events: none;
-                    }
-
-                    & .wrapper-border {
-                        top: -1px;
-                        left: -1px;
-                        border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
-                        transition: border
-                            ${viraAnimationDurations['vira-interaction-animation-duration'].value};
-                    }
-                }
-            }
-
-            label {
-                display: flex;
-                flex-direction: column;
-                justify-content: flex-start;
-                gap: 2px;
-                width: 100%;
-                max-width: 100%;
-
-                & .select-label {
-                    font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
-                    text-align: left;
-                    flex-shrink: 0;
-                    flex-wrap: wrap;
-                }
-
-                & .select-wrapper {
-                    height: 32px;
-                }
-            }
-
-            .readonly-value {
-                overflow-wrap: anywhere;
-            }
-
-            ${hostClasses['vira-select-disabled'].selector} {
-                cursor: not-allowed;
-
-                & select,
-                & .wrapper-border {
-                    ${viraDisabledStyles}
-                }
-                ${ViraIcon} {
-                    ${viraDisabledStyles}
-                }
-                & * {
-                    cursor: not-allowed;
-                }
-            }
-
-            :host(
-                    .${hostClasses['vira-select-not-raw'].name}.${hostClasses['vira-select-error']
-            .name}
-                )
-                .wrapper-border {
-                border-color: ${viraFormCssVars['vira-form-error-color'].value};
-            }
-        `;
-    },
-    init({ state, updateState, host }) {
-        state.cleanupListeners?.();
-        function getSelectElement() {
-            return assertWrap.instanceOf(host.shadowRoot.querySelector('select'), HTMLSelectElement);
-        }
-        const listenerRemovers = [
-            listenTo(host, 'mousedown', (event) => {
-                const selectElement = getSelectElement();
-                if (event.composedPath().includes(selectElement)) {
-                    return;
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                /** `showPicker` is not in Safari. */
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                if (selectElement.showPicker) {
-                    try {
-                        selectElement.showPicker();
-                    }
-                    catch {
-                        /**
-                         * Chromium throws `NotAllowedError` when `showPicker` runs without
-                         * transient user activation; the picker just won't open.
-                         */
-                    }
-                }
-            }),
-            listenTo(host, 'click', (event) => {
-                const selectElement = getSelectElement();
-                if (event.composedPath().includes(selectElement)) {
-                    return;
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                /** `showPicker` is not in Safari. */
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                if (selectElement.showPicker) {
-                    try {
-                        selectElement.showPicker();
-                    }
-                    catch {
-                        /**
-                         * Chromium throws `NotAllowedError` when `showPicker` runs without
-                         * transient user activation; the picker just won't open.
-                         */
-                    }
-                }
-            }),
-        ];
-        updateState({
-            cleanupListeners() {
-                listenerRemovers.forEach((remover) => remover());
-            },
-        });
-    },
-    cleanup({ state, updateState }) {
-        state.cleanupListeners?.();
-        updateState({
-            cleanupListeners: undefined,
-        });
-    },
-    render({ inputs, state, dispatch, events }) {
-        const value = inputs.value || undefined;
-        if (inputs.isReadonly) {
-            const selectedOption = inputs.options
-                .flatMap((entry) => (isViraSelectOptionGroup(entry) ? [...entry.options] : [entry]))
-                .find((option) => option.value === value);
-            const readonlyValueTemplate = html `
-                <span class="readonly-value">
-                    ${selectedOption?.label || inputs.placeholder || ''}
-                </span>
-            `;
-            if (inputs.label) {
-                return html `
-                    <label ${attributes(inputs.attributePassthrough?.label)}>
-                        <span class="select-label">${inputs.label}</span>
-                        ${readonlyValueTemplate}
-                    </label>
-                `;
-            }
-            else {
-                return readonlyValueTemplate;
-            }
-        }
-        const placeholderOptionTemplate = inputs.placeholder || value == undefined
-            ? html `
-                      <option value="" disabled ?selected=${value == undefined}>
-                          ${inputs.placeholder}
-                      </option>
-                  `
-            : nothing;
-        const selectTemplate = html `
-            <span class="select-wrapper">
-                <select
-                    .value=${ifDefined(value)}
-                    class=${classMap({
-            placeholder: !value && !!inputs.placeholder,
-            'with-icon': !!inputs.icon,
-        })}
-                    tabindex=${inputs.disabled ? -1 : 0}
-                    id=${ifDefined(inputs.label ? state.randomId : undefined)}
-                    aria-label=${ifDefined((check.isString(inputs.label) && inputs.label) || undefined)}
-                    aria-disabled=${ifDefined(inputs.disabled ? 'true' : undefined)}
-                    ${listen('input', (event) => {
-            const selectElement = extractEventTarget(event, HTMLSelectElement);
-            const newValue = selectElement.value;
-            if (selectElement.value !== value) {
-                selectElement.selectedIndex = inputs.options
-                    .flatMap((entry) => {
-                    return isViraSelectOptionGroup(entry)
-                        ? [...entry.options]
-                        : [entry];
-                })
-                    .findIndex((option) => option.value === value);
-            }
-            dispatch(new events.valueChange({
-                detail: newValue,
-            }));
-        })}
-                    ${attributes(inputs.attributePassthrough?.select)}
-                >
-                    ${placeholderOptionTemplate}
-                    ${inputs.options.map((entry) => {
-            if (isViraSelectOptionGroup(entry)) {
-                return html `
-                                <optgroup label=${entry.groupName}>
-                                    ${entry.options.map((option) => {
-                    return renderSelectOption(option, value);
-                })}
-                                </optgroup>
-                            `;
-            }
-            return renderSelectOption(entry, value);
-        })}
-                </select>
-                <!--
-                    These separate style elements are necessary so that we can select them as
-                    siblings of the focused <select> element.
-                -->
-
-                <div class="border-style focus-border"></div>
-
-                <div class="border-style wrapper-border"></div>
-
-                <${ViraIcon.assign({
-            icon: inputs.icon,
-        })}
-                    class="input-icon"
-                ></${ViraIcon}>
-                <${ViraIcon.assign({
-            icon: ChevronUp16Icon,
-        })}
-                    class="trigger-icon"
-                ></${ViraIcon}>
-            </span>
-        `;
-        if (inputs.label) {
-            return html `
-                <label for=${state.randomId} ${attributes(inputs.attributePassthrough?.label)}>
-                    <span class="select-label">${inputs.label}</span>
-                    ${selectTemplate}
-                </label>
-            `;
-        }
-        else {
-            return selectTemplate;
-        }
-    },
-});

package/dist/util/pop-up-manager.d.ts

@@ -1,200 +0,0 @@
-import { type MaybePromise } from '@augment-vir/common';
-import { type Coords, type NavController } from 'device-navigation';
-import { type ExtractEventByType, type ExtractEventTypes, type ListenOptions, ListenTarget, type RemoveListenerCallback } from 'typed-event-target';
-/**
- * Used to prevent pop-ups from closing when a text input is active.
- *
- * @category Internal
- */
-export declare function isInputLikeElement(element: Element): boolean;
-/**
- * Determines if a mouse event landed on a scrollbar rather than on element content. Scrollbar
- * interactions fire mouse events on the scrolling element itself (or on `<html>` for the page
- * scrollbar), so an outside-click check would otherwise treat dragging a scrollbar as a click away
- * from the pop-up and dismiss it mid-drag.
- *
- * @category Internal
- */
-export declare function isMouseEventOnScrollbar(event: Readonly<MouseEvent>): boolean;
-/**
- * A type used for representing a rectangle's position.
- *
- * @category Internal
- */
-export type PositionRect = {
-    top: number;
-    left: number;
-    right: number;
-    bottom: number;
-};
-/**
- * The default empty {@link PositionRect}, with all values set to 0.
- *
- * @category Internal
- */
-export declare const emptyPositionRect: PositionRect;
-/**
- * Options for {@link PopUpManager}.
- *
- * @category PopUp
- */
-export type PopUpManagerOptions = {
-    /**
-     * The minimum number of pixels for allowing the pop-up to go downwards. If the downward
-     * available space is less than this, and if the upwards available space is
-     * `verticalDiffThreshold` more than the downwards space, the pop-up will be directed upwards.
-     *
-     * Equation:
-     *
-     *     const directUpwards =
-     *         downwardsSpace < minDownSpace &&
-     *         upwardsSpace > DownwardsSpace + verticalDiffThreshold;
-     *
-     * @default 200
-     */
-    minDownSpace: number;
-    /**
-     * The minimum number of pixels for allowing the pop-up to go rightwards. If the rightward
-     * available space is less than this, and if the leftwards available space is
-     * `horizontalDiffThreshold` more than the rightwards space, the pop-up will be directed
-     * leftwards.
-     *
-     * Equation:
-     *
-     *     const directLeftwards =
-     *         rightwardsSpace < minRightSpace &&
-     *         leftwardsSpace > rightwardsSpace + horizontalDiffThreshold;
-     *
-     * @default 400
-     */
-    minRightSpace: number;
-    /**
-     * The number of pixels required for the upwards available space to be bigger than the downwards
-     * available space before directing the pop-up upwards.
-     *
-     * Equation:
-     *
-     *     const directUpwards =
-     *         downwardsSpace < minDownSpace &&
-     *         upwardsSpace > DownwardsSpace + verticalDiffThreshold;
-     *
-     * @default 20
-     */
-    verticalDiffThreshold: number;
-    /**
-     * The number of pixels required for the leftwards available space to be bigger than the
-     * rightwards available space before directing the pop-up leftwards.
-     *
-     * Equation:
-     *
-     *     const directLeftwards =
-     *         rightwardsSpace < minRightSpace &&
-     *         leftwardsSpace > rightwardsSpace + horizontalDiffThreshold;
-     *
-     * @default 100
-     */
-    horizontalDiffThreshold: number;
-    /**
-     * Supports navigation of the pop up via the `device-navigation` package.
-     *
-     * @default true
-     */
-    supportNavigation: boolean;
-};
-/**
- * Output type from `PopUpManager.showPopUp`
- *
- * @category PopUp
- */
-export type ShowPopUpResult = {
-    /**
-     * Indicates if the "pop up" should pop in the downwards direction or not. If not, it should pop
-     * in the upwards direction. This is determined by how much space is available on either side of
-     * the root element.
-     */
-    popDown: boolean;
-    /**
-     * Indicates if the "pop up" should pop in the rightwards direction or not. If not, it should
-     * pop in the leftwards direction. This is determined by how much space is available on either
-     * side of the root element.
-     */
-    popRight: boolean;
-    positions: Record<'root' | 'container' | 'diff', PositionRect>;
-};
-declare const HidePopUpEvent_base: (new (eventInitDict?: EventInit) => Event & import("typed-event-target").TypedEvent<"hide-pop-up">) & Pick<{
-    new (type: string, eventInitDict?: EventInit): Event;
-    prototype: Event;
-    readonly NONE: 0;
-    readonly CAPTURING_PHASE: 1;
-    readonly AT_TARGET: 2;
-    readonly BUBBLING_PHASE: 3;
-}, "NONE" | "CAPTURING_PHASE" | "AT_TARGET" | "BUBBLING_PHASE" | "prototype"> & Pick<import("typed-event-target").TypedEvent<"hide-pop-up">, "type">;
-/**
- * An event fired from {@link PopUpManager} when the pop up should be hidden.
- *
- * @category PopUp
- */
-export declare class HidePopUpEvent extends HidePopUpEvent_base {
-}
-declare const NavSelectEvent_base: (new (eventInitDict: {
-    bubbles?: boolean;
-    cancelable?: boolean;
-    composed?: boolean;
-    detail: Coords;
-}) => import("typed-event-target").TypedCustomEvent<Coords, "nav-select">) & Pick<{
-    new (type: string, eventInitDict?: EventInit): Event;
-    prototype: Event;
-    readonly NONE: 0;
-    readonly CAPTURING_PHASE: 1;
-    readonly AT_TARGET: 2;
-    readonly BUBBLING_PHASE: 3;
-}, "NONE" | "CAPTURING_PHASE" | "AT_TARGET" | "BUBBLING_PHASE" | "prototype"> & Pick<import("typed-event-target").TypedCustomEvent<Coords, "nav-select">, "type">;
-/**
- * An event fired from {@link PopUpManager} when an individual item in the pop up has been selected
- * by the user.
- *
- * @category PopUp
- */
-export declare class NavSelectEvent extends NavSelectEvent_base {
-}
-/**
- * All events that can be emitted by {@link PopUpManager}.
- *
- * @category Internal
- */
-export type PopUpManagerEvents = HidePopUpEvent | NavSelectEvent;
-/**
- * A "pop up" manager for items that pop up from the HTML page, like dropdowns or menus.
- *
- * @category PopUp
- */
-export declare class PopUpManager {
-    readonly navController: NavController;
-    protected listenTarget: ListenTarget<PopUpManagerEvents>;
-    options: PopUpManagerOptions;
-    /** Callbacks that remove the global listeners attached while a pop up is shown. */
-    protected cleanupCallbacks: (() => void)[];
-    protected lastRootElement: HTMLElement | undefined;
-    constructor(navController: NavController, options?: Partial<PopUpManagerOptions> | undefined);
-    /**
-     * Attaches the global listeners (page activation, navigation, mousedown, and keydown) that
-     * control the currently shown pop up.
-     */
-    protected attachGlobalListeners(): void;
-    /** Listen to events emitted from a {@link PopUpManager} instance. */
-    listen<const EventDefinition extends Readonly<{
-        type: ExtractEventTypes<PopUpManagerEvents>;
-    }>>(event: EventDefinition, listener: (event: ExtractEventByType<PopUpManagerEvents, EventDefinition['type']>) => MaybePromise<void>, options?: ListenOptions | undefined): RemoveListenerCallback;
-    /** Trigger removal or hiding of the pop up. */
-    removePopUp(): void;
-    /** Trigger showing the pop up. */
-    showPopUp(rootElement: HTMLElement, options?: Partial<PopUpManagerOptions> | undefined): ShowPopUpResult;
-    /**
-     * Cleanup and destroy the {@link PopUpManager} instance. This:
-     *
-     * - Removes the existing pop up
-     * - Cleans up all internal and external listeners
-     */
-    destroy(): void;
-}
-export {};