@eunomia/elements 1.0.0-beta.5 → 1.0.0-beta.6

package/dist/features/table/table-item/table-item.d.ts

@@ -1,179 +0,0 @@
-import { LitElement, PropertyValues, TemplateResult } from "lit";
-/**
- * Tag name of the table-item component.
- */
-export declare const EunomiaTableItemTagName = "eun-table-item";
-declare const EunomiaTableItem_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/table-row.mixin.js").TableRowMixinInterface> & typeof LitElement;
-/**
- * A single data row of a table. Slot in table cell elements, one per
- * column, in the same order the table header's table columns use.
- * Content is entirely free-form. An optional action slot element,
- * typically a button or a dropdown button, renders in a trailing cell
- * revealed only on hover or focus, unless the owning table's
- * checkboxAlwaysVisible or actionAlwaysVisible keeps it, and the
- * checkbox, visible at all times instead.
- *
- * Selected, selectionActive, selectable, checkboxAlwaysVisible,
- * actionAlwaysVisible, and the sticky-column flags are managed by the
- * owning table. Only rowKey and stickyBottom are meant to be authored
- * directly.
- *
- * @slot [default] - Table cell elements, one per column
- * @slot action - Optional trailing action content, such as a button or a dropdown button, revealed on hover or focus, or always with the owning table's actionAlwaysVisible. Hidden and inert (unfocusable, unclickable) while any row is selected either way
- * @prop {string} [rowKey] - This row's stable identity, used for selection tracking. Falls back to a DOM-order-derived key when unset, which is unstable across client-side sort or filter, so set this explicitly for any such table
- * @attr {string} [row-key] - This row's stable identity
- * @prop {boolean} [stickyBottom=false] - Pins this row to the bottom of its scroll container, such as a totals row. The consumer marks which rows, rather than the table inferring the last row from DOM order
- * @attr {boolean} [sticky-bottom=false] - Pins this row to the bottom of its scroll container
- * @fires {TableRowClickEvent} euntablerowclick - Fired on a row click outside its checkbox or action cell and outside selection mode, whether or not this row or the owning table has any row-end action at all
- * @cssprop [--table-row-background] - Sets the background color
- * @cssprop [--table-row-hover-background] - Sets the background color on hover
- * @cssprop [--table-row-selected-background] - Sets the background color while selected
- * @cssprop [--table-sticky-row-background] - Sets the background color of this row while stickyBottom, at rest. Falls back to table-row-background
- * @cssprop [--table-sticky-column-background] - Sets the background color of this row's sticky first or last column cell, and its checkbox cell once the owning table is selectable, at rest. Falls back to table-row-background
- * @cssprop [--table-checkbox-background] - Sets the background color of this row's own unchecked checkbox, once the owning table is selectable
- * @cssprop [--table-checkbox-hover] - Sets the background color of this row's own unchecked checkbox while hovered, once the owning table is selectable
- * @cssprop [--table-sticky-border-color] - Sets the border color of this row's own top edge while stickyBottom, falling back to table-border-color, and of the trailing edge of the always-sticky checkbox cell and any sticky first or last column cell, transparent by default
- * @cssprop [--table-action-color] - Sets the text and icon color of a row-end action, bridging into a slotted button's or dropdown button's own text color
- * @cssprop [--table-sync-overlay-color] - Sets the highlight color of the shimmer sweep shown while the owning table's syncing is set
- * @cssprop [--table-sync-duration] - Sets the duration of the syncing shimmer sweep, as a CSS time, defaulting to 1.6 seconds
- * @element eun-table-item
- */
-export declare class EunomiaTableItem extends EunomiaTableItem_base {
-    /**
-     * Styles to import to the component.
-     *
-     * @static
-     * @internal
-     * @readonly
-     */
-    static readonly styles: import("lit").CSSResult[];
-    /**
-     * This row's stable identity, used for selection tracking.
-     */
-    rowKey?: string;
-    /**
-     * Pins this row to the bottom of its scroll container.
-     * @default false
-     */
-    stickyBottom: boolean;
-    /**
-     * Whether this row is currently selected.
-     * @internal
-     */
-    selected: boolean;
-    /**
-     * Whether the owning table currently has *any* row selected; forces the
-     * hover-only action slot hidden (it cedes to the action bar) and the
-     * checkbox permanently visible. Also makes the action cell `inert`
-     * (see render), so its content can't be clicked or Tab-reached while
-     * hidden this way, on top of not being visible.
-     * @internal
-     */
-    selectionActive: boolean;
-    /**
-     * Whether the owning table is selectable; renders the checkbox cell.
-     * @internal
-     */
-    selectable: boolean;
-    /**
-     * Whether the owning table has any row-end action content; renders the
-     * action cell (even if this particular row's own `slot="action"` is
-     * empty, to keep every row's column count aligned).
-     * @internal
-     */
-    hasAction: boolean;
-    /**
-     * Whether the owning table's `checkboxAlwaysVisible` is set; keeps this
-     * row's own checkbox visible at all times instead of only on
-     * hover/focus/selection.
-     * @internal
-     */
-    checkboxAlwaysVisible: boolean;
-    /**
-     * Whether the owning table's `actionAlwaysVisible` is set; keeps this
-     * row's own row-end action visible at all times instead of only on
-     * hover/focus; still cedes to the floating action bar once this table is
-     * in selection mode, same as the hover-only default (see
-     * `selectionActive`).
-     * @internal
-     */
-    actionAlwaysVisible: boolean;
-    /**
-     * Whether the first data column should stick to the start edge.
-     * @internal
-     */
-    stickyFirstColumn: boolean;
-    /**
-     * Whether the last data column should stick to the end edge.
-     * @internal
-     */
-    stickyLastColumn: boolean;
-    /**
-     * Whether the owning table's `clickable` is set; shows a pointer cursor
-     * on this row while it has no row-end action content of its own, since
-     * an action button already carries its own click affordance and the row
-     * itself doesn't need one layered on top of it. `euntablerowclick` fires
-     * on a qualifying click either way (see the class doc); this only adds
-     * the visual hint that the row itself is one too.
-     * @internal
-     */
-    clickable: boolean;
-    /**
-     * Whether the owning table's `syncing` is set; shows a shimmering
-     * overlay sweeping across this row without touching its own visibility
-     * or its content's, unlike the owning table's `loading` (which hides
-     * every row outright in favor of placeholder skeleton rows). Meant for a
-     * background refresh of already-visible data, not an initial load.
-     * @internal
-     */
-    syncing: boolean;
-    /**
-     * This row's stable identity as resolved by the owning table (`rowKey`,
-     * or a DOM-order fallback); used for the accessible checkbox label and
-     * the click event, since this element can't reliably compute the
-     * fallback on its own.
-     * @internal
-     */
-    resolvedKey: string;
-    /**
-     * Pre-formatted accessible label for this row's checkbox (e.g.
-     * `"Select row 3"`), computed and pushed down by the owning table.
-     * @internal
-     */
-    selectCheckboxLabel: string;
-    /**
-     * Called when this row's checkbox is toggled. Set by the owning
-     * `eun-table`.
-     * @internal
-     */
-    onToggleSelected?: () => void;
-    /**
-     * Fires this row's own click action from `Enter`/`Space` while the row's
-     * own host itself has focus (see `TableRowMixin`'s own class doc), the
-     * keyboard equivalent of clicking the row directly (see {@link
-     * handleClick}, which this reuses so both respect `selectionActive`
-     * identically). Unconditional, regardless of `clickable`/`selectable` :
-     * every item row responds this way, whether or not doing so actually
-     * has any effect.
-     * @protected
-     */
-    protected activateLeadingRowFocusTarget: () => void;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(changed: PropertyValues): void;
-    /**
-     * A row click toggles selection while selection mode is active,
-     * otherwise fires {@link TableRowClickEvent}. Never fires for a click
-     * that originated on the checkbox or action cell — both call
-     * `stopPropagation` at the source.
-     * @private
-     */
-    private readonly handleClick;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        [EunomiaTableItemTagName]: EunomiaTableItem;
-    }
-}
-export {};

package/dist/features/table/table-item/table-item.js

@@ -1,291 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { customElement, property } from "lit/decorators.js";
-import { html, LitElement, nothing } from "lit";
-import { TableRowMixin } from "../../../mixins/table-row.mixin.js";
-import { renderSelectCell } from "../table/table.utils.js";
-import { TableRowClickEvent } from "../../../events/table-row-click.event.js";
-import { tableRowStyles } from "../shared-styles/table-row.styles.js";
-import { tableSharedStyles } from "../shared-styles/table-shared.styles.js";
-import { tableItemStyles } from "./table-item.styles.js";
-/**
- * Tag name of the table-item component.
- */
-export const EunomiaTableItemTagName = "eun-table-item";
-/**
- * A single data row of a table. Slot in table cell elements, one per
- * column, in the same order the table header's table columns use.
- * Content is entirely free-form. An optional action slot element,
- * typically a button or a dropdown button, renders in a trailing cell
- * revealed only on hover or focus, unless the owning table's
- * checkboxAlwaysVisible or actionAlwaysVisible keeps it, and the
- * checkbox, visible at all times instead.
- *
- * Selected, selectionActive, selectable, checkboxAlwaysVisible,
- * actionAlwaysVisible, and the sticky-column flags are managed by the
- * owning table. Only rowKey and stickyBottom are meant to be authored
- * directly.
- *
- * @slot [default] - Table cell elements, one per column
- * @slot action - Optional trailing action content, such as a button or a dropdown button, revealed on hover or focus, or always with the owning table's actionAlwaysVisible. Hidden and inert (unfocusable, unclickable) while any row is selected either way
- * @prop {string} [rowKey] - This row's stable identity, used for selection tracking. Falls back to a DOM-order-derived key when unset, which is unstable across client-side sort or filter, so set this explicitly for any such table
- * @attr {string} [row-key] - This row's stable identity
- * @prop {boolean} [stickyBottom=false] - Pins this row to the bottom of its scroll container, such as a totals row. The consumer marks which rows, rather than the table inferring the last row from DOM order
- * @attr {boolean} [sticky-bottom=false] - Pins this row to the bottom of its scroll container
- * @fires {TableRowClickEvent} euntablerowclick - Fired on a row click outside its checkbox or action cell and outside selection mode, whether or not this row or the owning table has any row-end action at all
- * @cssprop [--table-row-background] - Sets the background color
- * @cssprop [--table-row-hover-background] - Sets the background color on hover
- * @cssprop [--table-row-selected-background] - Sets the background color while selected
- * @cssprop [--table-sticky-row-background] - Sets the background color of this row while stickyBottom, at rest. Falls back to table-row-background
- * @cssprop [--table-sticky-column-background] - Sets the background color of this row's sticky first or last column cell, and its checkbox cell once the owning table is selectable, at rest. Falls back to table-row-background
- * @cssprop [--table-checkbox-background] - Sets the background color of this row's own unchecked checkbox, once the owning table is selectable
- * @cssprop [--table-checkbox-hover] - Sets the background color of this row's own unchecked checkbox while hovered, once the owning table is selectable
- * @cssprop [--table-sticky-border-color] - Sets the border color of this row's own top edge while stickyBottom, falling back to table-border-color, and of the trailing edge of the always-sticky checkbox cell and any sticky first or last column cell, transparent by default
- * @cssprop [--table-action-color] - Sets the text and icon color of a row-end action, bridging into a slotted button's or dropdown button's own text color
- * @cssprop [--table-sync-overlay-color] - Sets the highlight color of the shimmer sweep shown while the owning table's syncing is set
- * @cssprop [--table-sync-duration] - Sets the duration of the syncing shimmer sweep, as a CSS time, defaulting to 1.6 seconds
- * @element eun-table-item
- */
-let EunomiaTableItem = class EunomiaTableItem extends TableRowMixin(LitElement) {
-    constructor() {
-        super(...arguments);
-        /**
-         * Pins this row to the bottom of its scroll container.
-         * @default false
-         */
-        this.stickyBottom = false;
-        /**
-         * Whether this row is currently selected.
-         * @internal
-         */
-        this.selected = false;
-        /**
-         * Whether the owning table currently has *any* row selected; forces the
-         * hover-only action slot hidden (it cedes to the action bar) and the
-         * checkbox permanently visible. Also makes the action cell `inert`
-         * (see render), so its content can't be clicked or Tab-reached while
-         * hidden this way, on top of not being visible.
-         * @internal
-         */
-        this.selectionActive = false;
-        /**
-         * Whether the owning table is selectable; renders the checkbox cell.
-         * @internal
-         */
-        this.selectable = false;
-        /**
-         * Whether the owning table has any row-end action content; renders the
-         * action cell (even if this particular row's own `slot="action"` is
-         * empty, to keep every row's column count aligned).
-         * @internal
-         */
-        this.hasAction = false;
-        /**
-         * Whether the owning table's `checkboxAlwaysVisible` is set; keeps this
-         * row's own checkbox visible at all times instead of only on
-         * hover/focus/selection.
-         * @internal
-         */
-        this.checkboxAlwaysVisible = false;
-        /**
-         * Whether the owning table's `actionAlwaysVisible` is set; keeps this
-         * row's own row-end action visible at all times instead of only on
-         * hover/focus; still cedes to the floating action bar once this table is
-         * in selection mode, same as the hover-only default (see
-         * `selectionActive`).
-         * @internal
-         */
-        this.actionAlwaysVisible = false;
-        /**
-         * Whether the first data column should stick to the start edge.
-         * @internal
-         */
-        this.stickyFirstColumn = false;
-        /**
-         * Whether the last data column should stick to the end edge.
-         * @internal
-         */
-        this.stickyLastColumn = false;
-        /**
-         * Whether the owning table's `clickable` is set; shows a pointer cursor
-         * on this row while it has no row-end action content of its own, since
-         * an action button already carries its own click affordance and the row
-         * itself doesn't need one layered on top of it. `euntablerowclick` fires
-         * on a qualifying click either way (see the class doc); this only adds
-         * the visual hint that the row itself is one too.
-         * @internal
-         */
-        this.clickable = false;
-        /**
-         * Whether the owning table's `syncing` is set; shows a shimmering
-         * overlay sweeping across this row without touching its own visibility
-         * or its content's, unlike the owning table's `loading` (which hides
-         * every row outright in favor of placeholder skeleton rows). Meant for a
-         * background refresh of already-visible data, not an initial load.
-         * @internal
-         */
-        this.syncing = false;
-        /**
-         * This row's stable identity as resolved by the owning table (`rowKey`,
-         * or a DOM-order fallback); used for the accessible checkbox label and
-         * the click event, since this element can't reliably compute the
-         * fallback on its own.
-         * @internal
-         */
-        this.resolvedKey = "";
-        /**
-         * Pre-formatted accessible label for this row's checkbox (e.g.
-         * `"Select row 3"`), computed and pushed down by the owning table.
-         * @internal
-         */
-        this.selectCheckboxLabel = "Select row";
-        /**
-         * Fires this row's own click action from `Enter`/`Space` while the row's
-         * own host itself has focus (see `TableRowMixin`'s own class doc), the
-         * keyboard equivalent of clicking the row directly (see {@link
-         * handleClick}, which this reuses so both respect `selectionActive`
-         * identically). Unconditional, regardless of `clickable`/`selectable` :
-         * every item row responds this way, whether or not doing so actually
-         * has any effect.
-         * @protected
-         */
-        this.activateLeadingRowFocusTarget = () => {
-            this.handleClick();
-        };
-        /**
-         * A row click toggles selection while selection mode is active,
-         * otherwise fires {@link TableRowClickEvent}. Never fires for a click
-         * that originated on the checkbox or action cell — both call
-         * `stopPropagation` at the source.
-         * @private
-         */
-        this.handleClick = () => {
-            if (this.selectionActive) {
-                this.onToggleSelected?.();
-                return;
-            }
-            this.dispatchEvent(new TableRowClickEvent(this.resolvedKey || this.rowKey || ""));
-        };
-        /* eslint-enable lit-a11y/click-events-have-key-events */
-    }
-    connectedCallback() {
-        super.connectedCallback?.();
-        if (!this.hasAttribute("role")) {
-            this.setAttribute("role", "row");
-        }
-        this.addEventListener("click", this.handleClick);
-    }
-    disconnectedCallback() {
-        this.removeEventListener("click", this.handleClick);
-        super.disconnectedCallback?.();
-    }
-    updated(changed) {
-        super.updated(changed);
-        if (changed.has("selected") || changed.has("selectable")) {
-            if (this.selectable) {
-                this.setAttribute("aria-selected", this.selected ? "true" : "false");
-            }
-            else {
-                this.removeAttribute("aria-selected");
-            }
-        }
-    }
-    /* eslint-disable lit-a11y/click-events-have-key-events -- this div only
-       stops a click's propagation so it doesn't also trigger the row's own
-       click handling ; the real interactive content is whatever's slotted
-       inside it (or, for the select cell, the eun-checkbox rendered by
-       table.utils.ts's renderSelectCell), each already independently
-       keyboard-accessible. */
-    render() {
-        return html `
-      ${this.selectable
-            ? renderSelectCell({
-                role: "gridcell",
-                checked: this.selected,
-                ariaLabel: this.selectCheckboxLabel,
-                onChange: () => this.onToggleSelected?.(),
-            })
-            : nothing}
-      <slot></slot>
-      ${this.hasAction
-            ? html `
-            <div
-              id="action-cell"
-              role="gridcell"
-              tabindex="-1"
-              ?inert=${this.selectionActive}
-              @click=${(event) => event.stopPropagation()}
-            >
-              <slot name="action"></slot>
-            </div>
-          `
-            : nothing}
-    `;
-    }
-};
-/**
- * Styles to import to the component.
- *
- * @static
- * @internal
- * @readonly
- */
-EunomiaTableItem.styles = [tableRowStyles, tableSharedStyles, tableItemStyles];
-__decorate([
-    property({ reflect: true, attribute: "row-key" })
-], EunomiaTableItem.prototype, "rowKey", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: "sticky-bottom" })
-], EunomiaTableItem.prototype, "stickyBottom", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], EunomiaTableItem.prototype, "selected", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: "selection-active" })
-], EunomiaTableItem.prototype, "selectionActive", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], EunomiaTableItem.prototype, "selectable", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: "has-action" })
-], EunomiaTableItem.prototype, "hasAction", void 0);
-__decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        attribute: "checkbox-always-visible",
-    })
-], EunomiaTableItem.prototype, "checkboxAlwaysVisible", void 0);
-__decorate([
-    property({
-        type: Boolean,
-        reflect: true,
-        attribute: "action-always-visible",
-    })
-], EunomiaTableItem.prototype, "actionAlwaysVisible", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: "sticky-first-column" })
-], EunomiaTableItem.prototype, "stickyFirstColumn", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: "sticky-last-column" })
-], EunomiaTableItem.prototype, "stickyLastColumn", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], EunomiaTableItem.prototype, "clickable", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], EunomiaTableItem.prototype, "syncing", void 0);
-__decorate([
-    property({ attribute: false })
-], EunomiaTableItem.prototype, "resolvedKey", void 0);
-__decorate([
-    property({ attribute: false })
-], EunomiaTableItem.prototype, "selectCheckboxLabel", void 0);
-EunomiaTableItem = __decorate([
-    customElement(EunomiaTableItemTagName)
-], EunomiaTableItem);
-export { EunomiaTableItem };

package/dist/features/table/table-item/table-item.styles.d.ts

@@ -1 +0,0 @@
-export declare const tableItemStyles: import("lit").CSSResult;