@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/fesm2022/slotted-angular-column-manager.mjs

@@ -0,0 +1,1037 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, input, ElementRef, afterNextRender, Directive, model, output, computed, signal, viewChild, effect, untracked, afterEveryRender, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component, Renderer2 } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlCheckbox, SlCheckboxDescription } from '@slotted/angular/checkbox';
+import { SlDrawer } from '@slotted/angular/drawer';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlMenu, SlMenuItem, SlMenuTrigger } from '@slotted/angular/menu';
+import { SlPopover, SlPopoverContent, SlPopoverLayer } from '@slotted/angular/popover';
+import { SlTextField, SlTextFieldInput, SlTextFieldStart } from '@slotted/angular/text-field';
+import { createDragController } from '@slotted/core/drag';
+import { columnStateChanges, normalizeColumnState, withColumnMoved, withColumnHidden, withColumnPinned } from '@slotted/core/grid';
+import { columnManagerMessages, dragMessages } from '@slotted/core/i18n';
+import { getLiveAnnouncer } from '@slotted/core/live-announcer';
+import { createControllable } from '@slotted/core/state';
+
+const FALLBACK = {
+    presentation: 'popover',
+    apply: 'live',
+};
+const COLUMN_MANAGER_DEFAULTS = new InjectionToken('slotted column-manager defaults', { providedIn: 'root', factory: () => FALLBACK });
+/**
+ * An application decides once where its managers stand and whether they apply
+ * at once. A manager that states either itself still wins. Its words come from
+ * the language in force (`provideSlotted`).
+ */
+function provideColumnManagerDefaults(defaults) {
+    return {
+        provide: COLUMN_MANAGER_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+function injectColumnManagerDefaults() {
+    return inject(COLUMN_MANAGER_DEFAULTS);
+}
+class SlColumnManagerIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-column-manager-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColumnManagerIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColumnManagerIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColumnManagerIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const ZONE_KEYS = ['start', 'middle', 'end'];
+/** No column taken out for room: the grid's set before its frame is measured. */
+const NONE_OUT = { popin: [], hidden: [] };
+/** The three pin zones over the normalised order, every column in one of them. */
+function columnZones(state) {
+    const start = state.pinned.start.filter((id) => state.order.includes(id));
+    const end = state.pinned.end.filter((id) => state.order.includes(id));
+    const middle = state.order.filter((id) => !start.includes(id) && !end.includes(id));
+    return { start, middle, end };
+}
+/** Case and accents fall away, so `Região` is found by `regiao`. */
+function searchKey(text) {
+    return text.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase();
+}
+function sameState(a, b) {
+    return columnStateChanges(a, b).length === 0;
+}
+/** A click with no coordinates is a key. */
+function pressReason(event) {
+    return event.detail === 0 ? 'keyboard' : 'pointer';
+}
+function escapeValue(value) {
+    return typeof CSS !== 'undefined' && typeof CSS.escape === 'function'
+        ? CSS.escape(value)
+        : value.replace(/["\\]/g, '\\$&');
+}
+const NO_DRAG = { dragging: null, container: null, index: null };
+/**
+ * Writes this family's part name on a control another family's directive
+ * owns. `slButton` writes `data-part="root"` as a static host attribute and
+ * `slMenuTriggerFor` binds `[attr.data-part]` to `null` on a trigger that is
+ * neither a bar's item nor a submenu's; either erases the part the template
+ * wrote, so it is written back after the first render.
+ */
+class SlColumnManagerPart {
+    part = input.required({ ...(ngDevMode ? { debugName: "part" } : /* istanbul ignore next */ {}), alias: 'slColumnManagerPart' });
+    host = inject(ElementRef);
+    constructor() {
+        afterNextRender(() => this.host.nativeElement.setAttribute('data-part', this.part()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColumnManagerPart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlColumnManagerPart, isStandalone: true, selector: "[slColumnManagerPart]", inputs: { part: { classPropertyName: "part", publicName: "slColumnManagerPart", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColumnManagerPart, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slColumnManagerPart]', standalone: true }]
+        }], ctorParameters: () => [], propDecorators: { part: [{ type: i0.Input, args: [{ isSignal: true, alias: "slColumnManagerPart", required: true }] }] } });
+/**
+ * The panel that edits a grid's column state: which columns are shown, in
+ * which order, pinned to which edge. It does not know the grid: it is given
+ * the columns, the state and the set the grid hid for room, and asks for every
+ * change with a request carrying the reason and the keys that moved.
+ *
+ * The host renders nothing of its own (`display: contents`); the root is the
+ * popover's one child, the drawer's content, or stands in place.
+ */
+class SlColumnManager {
+    /** The grid's columns, as the grid is given them. */
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** The state; two-way, so a template may bind it directly. */
+    columnState = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnState" }] : /* istanbul ignore next */ []));
+    /** The start while nothing is bound, and the target of Restore defaults. */
+    defaultColumnState = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultColumnState" }] : /* istanbul ignore next */ []));
+    /**
+     * The columns the grid took out for room — the grid's `outOfSpace()`:
+     * listed with a status, never written to the state.
+     */
+    outOfSpace = input(NONE_OUT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outOfSpace" }] : /* istanbul ignore next */ []));
+    presentation = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presentation" }] : /* istanbul ignore next */ []));
+    apply = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "apply" }] : /* istanbul ignore next */ []));
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Words laid over the catalog of the language in force, key by key. */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** Before the state moves, with the reason and every key that moved. */
+    columnStateChangeRequest = output();
+    /** Before the layer opens or closes, with the reason. */
+    openChangeRequest = output();
+    defaults = injectColumnManagerDefaults();
+    base = inject(SlColumnManagerIdFactory).next();
+    rootId = `${this.base}-panel`;
+    titleId = `${this.base}-title`;
+    /** The family's words in the language in force, with this manager's `messages` laid over them. */
+    t = injectMessages(columnManagerMessages, this.messages);
+    /** What a drag of a column says, in the language in force. */
+    dragT = injectMessages(dragMessages);
+    resolvedPresentation = computed(() => this.presentation() ?? this.defaults.presentation, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPresentation" }] : /* istanbul ignore next */ []));
+    resolvedApply = computed(() => this.apply() ?? this.defaults.apply, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedApply" }] : /* istanbul ignore next */ []));
+    confirm = computed(() => this.resolvedApply() === 'confirm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "confirm" }] : /* istanbul ignore next */ []));
+    normalizedDefault = computed(() => normalizeColumnState(this.defaultColumnState(), this.columns()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedDefault" }] : /* istanbul ignore next */ []));
+    /** The committed state: the bound one, or the default. */
+    state = computed(() => normalizeColumnState(this.columnState() ?? this.defaultColumnState(), this.columns()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    draft = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    working = computed(() => this.confirm() ? (this.draft() ?? this.state()) : this.state(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "working" }] : /* istanbul ignore next */ []));
+    dirty = computed(() => {
+        const draft = this.draft();
+        return draft !== null && !sameState(draft, this.state());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    atDefault = computed(() => sameState(this.working(), this.normalizedDefault()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "atDefault" }] : /* istanbul ignore next */ []));
+    /** How many columns the reader hid; the trigger's count. */
+    hiddenCount = computed(() => this.state().hidden.length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenCount" }] : /* istanbul ignore next */ []));
+    query = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    searchText = computed(() => searchKey(this.query().trim()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    searching = computed(() => this.searchText() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searching" }] : /* istanbul ignore next */ []));
+    byId = computed(() => new Map(this.columns().map((column) => [column.id, column])), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "byId" }] : /* istanbul ignore next */ []));
+    zones = computed(() => columnZones(this.working()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zones" }] : /* istanbul ignore next */ []));
+    visibleCount = computed(() => {
+        const hidden = new Set(this.working().hidden);
+        return this.working().order.filter((id) => !hidden.has(id)).length;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []));
+    summary = computed(() => this.t('visibleCount', {
+        visible: this.visibleCount(),
+        total: this.working().order.length,
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+    drag = signal(NO_DRAG, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drag" }] : /* istanbul ignore next */ []));
+    sections = computed(() => {
+        const zones = this.zones();
+        const byId = this.byId();
+        const hidden = new Set(this.working().hidden);
+        const space = new Set(this.outOfSpace().hidden);
+        const inRow = new Set(this.outOfSpace().popin);
+        const visible = this.visibleCount();
+        const text = this.searchText();
+        const searching = text !== '';
+        const t = this.t;
+        const labels = { start: t('pinnedStart'), middle: t('unpinned'), end: t('pinnedEnd') };
+        return ZONE_KEYS.map((key) => {
+            const items = zones[key]
+                .map((id, index) => ({ id, index, column: byId.get(id) }))
+                .filter((entry) => entry.column !== undefined &&
+                (!searching ||
+                    searchKey(entry.column.label).includes(text) ||
+                    searchKey(entry.column.description ?? '').includes(text)))
+                .map(({ id, index, column }) => {
+                const isHidden = hidden.has(id);
+                const locked = column.hideable === false;
+                const bySpace = !isHidden && space.has(id);
+                const shownInRow = !isHidden && inRow.has(id);
+                return {
+                    id,
+                    column,
+                    index,
+                    hidden: isHidden,
+                    locked,
+                    lastVisible: !isHidden && visible <= 1,
+                    bySpace,
+                    handleDisabled: searching || column.reorderable === false,
+                    status: locked
+                        ? t('required')
+                        : bySpace
+                            ? t('hiddenBySpace')
+                            : shownInRow
+                                ? t('inRow')
+                                : null,
+                    zone: key === 'middle' ? null : key,
+                };
+            });
+            return {
+                key,
+                label: labels[key],
+                items,
+                dropAtEnd: this.dropAt(key, zones[key].length),
+            };
+        }).filter((section) => section.items.length > 0);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+    /* ── The trigger ─────────────────────────────────────────────────────── */
+    triggerNode = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerNode" }] : /* istanbul ignore next */ []));
+    popover = viewChild(SlPopover, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "popover" }] : /* istanbul ignore next */ []));
+    /** Called by `slColumnManagerTrigger`. */
+    registerTrigger(node) {
+        this.triggerNode.set(node);
+    }
+    /* ── The drag ────────────────────────────────────────────────────────── */
+    root = viewChild('root', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
+    controller = null;
+    draggables = new Map();
+    pendingFocus = null;
+    constructor() {
+        /* The popover hangs from this family's trigger, and a press on it is not
+           an outside press. */
+        effect(() => {
+            const popover = this.popover();
+            const trigger = this.triggerNode();
+            if (popover)
+                untracked(() => popover.triggerNode.set(trigger));
+        });
+        /* A draft is read when the layer opens, and dropped when it closes. */
+        effect(() => {
+            if (!this.open()) {
+                untracked(() => {
+                    this.draft.set(null);
+                    this.query.set('');
+                });
+            }
+        });
+        effect((onCleanup) => {
+            const element = this.root()?.nativeElement;
+            if (!element)
+                return;
+            const controller = untracked(() => this.createController(element));
+            onCleanup(() => {
+                controller.destroy();
+                this.controller = null;
+                for (const entry of this.draggables.values())
+                    entry.detach();
+                this.draggables.clear();
+            });
+        });
+        afterEveryRender(() => {
+            this.syncDraggables();
+            const id = this.pendingFocus;
+            const element = this.root()?.nativeElement;
+            if (id && element) {
+                this.pendingFocus = null;
+                element
+                    .querySelector(`[data-part="item"][data-column="${escapeValue(id)}"] > [data-part="handle"]`)
+                    ?.focus();
+            }
+        });
+        inject(DestroyRef).onDestroy(() => this.controller?.destroy());
+    }
+    createController(element) {
+        const document = element.ownerDocument;
+        const announce = (message) => {
+            if (message !== '')
+                getLiveAnnouncer(document).announce(message);
+        };
+        const itemOf = (id) => element.querySelector(`[data-part="item"][data-column="${escapeValue(id)}"]`);
+        const controller = createDragController({
+            document,
+            preview: false,
+            restoreFocus: false,
+            autoScroll: { axis: 'y' },
+            announce,
+            t: this.dragT,
+            /* A one-step keyboard move says where the column landed once, below;
+               the controller's own step-by-step position would say it twice. */
+            silent: ['moved'],
+            onDrop: ({ items, source, target, reason, event }) => {
+                if (target.kind !== 'between' || target.container !== source.container)
+                    return;
+                const zone = this.zones()[source.container];
+                const id = items[0];
+                const to = target.index > source.index ? target.index - 1 : target.index;
+                this.edit(withColumnMoved(this.working(), id, to, zone), reason === 'keyboard' ? 'keyboard' : 'pointer', event);
+                if (reason === 'keyboard') {
+                    this.pendingFocus = id;
+                    const label = this.byId().get(id)?.label ?? id;
+                    announce(this.t('moved', { column: label, position: to + 1 }));
+                }
+            },
+        });
+        for (const key of ZONE_KEYS) {
+            controller.registerContainer({
+                key,
+                items: () => this.zones()[key],
+                orientation: 'vertical',
+                element: () => element.querySelector(`[data-part="section"][data-zone="${key}"]`),
+                itemElement: itemOf,
+                accepts: (state, target) => state.source?.container === target.container,
+                disabled: () => this.searching(),
+                itemLabel: (id) => this.byId().get(id)?.label ?? id,
+            });
+        }
+        controller.subscribe((next) => {
+            if (next.status !== 'dragging' || next.reason === 'keyboard') {
+                this.drag.set(NO_DRAG);
+                return;
+            }
+            const target = next.target;
+            this.drag.set({
+                dragging: next.items[0] ?? null,
+                container: target && target.kind === 'between' ? target.container : null,
+                index: target && target.kind === 'between' && next.valid ? target.index : null,
+            });
+        });
+        this.controller = controller;
+        return controller;
+    }
+    /** Every item is a draggable whose press must start on its handle. */
+    syncDraggables() {
+        const controller = this.controller;
+        const element = this.root()?.nativeElement;
+        if (!controller || !element)
+            return;
+        const seen = new Set();
+        for (const node of element.querySelectorAll('[data-part="item"][data-column]')) {
+            const id = node.dataset['column'];
+            const key = node.closest('[data-part="section"]')?.dataset['zone'] ?? 'middle';
+            seen.add(id);
+            const existing = this.draggables.get(id);
+            if (existing && existing.node === node && node.dataset['attachedZone'] === key)
+                continue;
+            existing?.detach();
+            node.dataset['attachedZone'] = key;
+            const detach = controller.attachDraggable(node, {
+                container: key,
+                key: id,
+                handle: () => node.querySelector('[data-part="handle"]'),
+                disabled: () => this.searching() || this.byId().get(id)?.reorderable === false,
+                distance: 4,
+            });
+            this.draggables.set(id, { node, detach });
+        }
+        for (const [id, entry] of this.draggables) {
+            if (seen.has(id))
+                continue;
+            entry.detach();
+            this.draggables.delete(id);
+        }
+    }
+    dropAt(key, index) {
+        const drag = this.drag();
+        if (drag.container !== key || drag.index !== index || drag.dragging === null)
+            return false;
+        const from = this.zones()[key].indexOf(drag.dragging);
+        return index !== from && index !== from + 1;
+    }
+    /* ── Requests ─────────────────────────────────────────────────────────── */
+    emit(next, reason, source) {
+        const previous = this.state();
+        const changes = columnStateChanges(previous, next);
+        if (changes.length === 0)
+            return false;
+        let cancelled = false;
+        const request = {
+            value: next,
+            previous,
+            reason,
+            source,
+            change: changes[0],
+            changes,
+            get cancelled() {
+                return cancelled;
+            },
+            cancel() {
+                cancelled = true;
+            },
+        };
+        this.columnStateChangeRequest.emit(request);
+        if (cancelled)
+            return false;
+        this.columnState.set(next);
+        return true;
+    }
+    edit(next, reason, source) {
+        if (this.confirm())
+            this.draft.set(next);
+        else
+            this.emit(next, reason, source);
+    }
+    setOpen(next, reason, source) {
+        if (next === this.open())
+            return false;
+        let cancelled = false;
+        const state = createControllable({
+            initial: this.open(),
+            onRequest: (request) => {
+                this.openChangeRequest.emit(request);
+                cancelled = request.cancelled;
+            },
+        });
+        state.request(next, reason, source);
+        if (cancelled)
+            return false;
+        this.open.set(next);
+        return true;
+    }
+    onLayerRequest(request) {
+        const moved = this.setOpen(request.value, request.reason, request.source);
+        if (!moved)
+            request.cancel();
+    }
+    toggle(id, request) {
+        this.edit(withColumnHidden(this.working(), id, !request.value), request.reason === 'keyboard' ? 'keyboard' : 'pointer', request.source);
+    }
+    pin(id, zone, event) {
+        this.edit(withColumnPinned(this.working(), id, zone), event.reason, event.source);
+    }
+    showAll(event) {
+        this.edit({ ...this.working(), hidden: [] }, pressReason(event), event);
+    }
+    reset(event) {
+        this.edit(this.normalizedDefault(), 'clear', event);
+    }
+    applyDraft(event) {
+        const draft = this.draft();
+        if (draft !== null)
+            this.emit(draft, 'submit', event);
+        this.draft.set(null);
+        if (this.resolvedPresentation() !== 'inline')
+            this.setOpen(false, pressReason(event), event);
+    }
+    cancel(event) {
+        this.draft.set(null);
+        if (this.resolvedPresentation() !== 'inline')
+            this.setOpen(false, pressReason(event), event);
+    }
+    onHandleKeyDown(event, id, key) {
+        if (!event.altKey || (event.key !== 'ArrowUp' && event.key !== 'ArrowDown'))
+            return;
+        event.preventDefault();
+        if (this.searching() || this.byId().get(id)?.reorderable === false)
+            return;
+        const zone = this.zones()[key];
+        const index = zone.indexOf(id);
+        const up = event.key === 'ArrowUp';
+        if ((up && index <= 0) || (!up && index >= zone.length - 1))
+            return;
+        this.controller?.moveBy({
+            items: [id],
+            source: { container: key, index },
+            intent: up ? 'previous' : 'next',
+            reason: 'keyboard',
+            event,
+        });
+    }
+    /* ── The imperative actions ──────────────────────────────────────────── */
+    /** Opens the layer, with the reason `programmatic`. */
+    show() {
+        this.setOpen(true, 'programmatic');
+    }
+    /** Closes the layer, with the reason `programmatic`. */
+    hide() {
+        this.setOpen(false, 'programmatic');
+    }
+    /** Called by the trigger, with the reason of the press. */
+    toggleOpen(reason = 'programmatic', source) {
+        this.setOpen(!this.open(), reason, source);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColumnManager, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlColumnManager, isStandalone: true, selector: "sl-column-manager", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, columnState: { classPropertyName: "columnState", publicName: "columnState", isSignal: true, isRequired: false, transformFunction: null }, defaultColumnState: { classPropertyName: "defaultColumnState", publicName: "defaultColumnState", isSignal: true, isRequired: false, transformFunction: null }, outOfSpace: { classPropertyName: "outOfSpace", publicName: "outOfSpace", isSignal: true, isRequired: false, transformFunction: null }, presentation: { classPropertyName: "presentation", publicName: "presentation", isSignal: true, isRequired: false, transformFunction: null }, apply: { classPropertyName: "apply", publicName: "apply", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnState: "columnStateChange", open: "openChange", columnStateChangeRequest: "columnStateChangeRequest", openChangeRequest: "openChangeRequest" }, host: { properties: { "style.display": "'contents'" } }, viewQueries: [{ propertyName: "popover", first: true, predicate: SlPopover, descendants: true, isSignal: true }, { propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }], exportAs: ["slColumnManager"], ngImport: i0, template: `
+    @switch (resolvedPresentation()) {
+      @case ('popover') {
+        <ng-container
+          slPopover
+          size="lg"
+          side="bottom"
+          align="start"
+          initialFocus="[data-part='search'] input"
+          [open]="open()"
+          (openChangeRequest)="onLayerRequest($event)"
+        >
+          <ng-template slPopoverLayer>
+            <div slPopoverContent [attr.aria-labelledby]="titleId">
+              <ng-container [ngTemplateOutlet]="panel" />
+            </div>
+          </ng-template>
+        </ng-container>
+      }
+      @case ('drawer') {
+        <sl-drawer
+          side="end"
+          size="sm"
+          [open]="open()"
+          [finalFocus]="triggerNode() ?? false"
+          (openChangeRequest)="onLayerRequest($event)"
+        >
+          <ng-container [ngTemplateOutlet]="panel" />
+        </sl-drawer>
+      }
+      @default {
+        <ng-container [ngTemplateOutlet]="panel" />
+      }
+    }
+
+    <ng-template #panel>
+      <div
+        #root
+        data-ui="column-manager"
+        data-part="root"
+        role="group"
+        [attr.id]="rootId"
+        [attr.aria-labelledby]="titleId"
+        [attr.data-presentation]="resolvedPresentation()"
+        [attr.data-apply]="resolvedApply()"
+      >
+        <div data-part="header">
+          <h2 data-part="title" [attr.id]="titleId">{{ t('title') }}</h2>
+          <span data-part="summary">{{ summary() }}</span>
+        </div>
+        <div data-part="search">
+          <div slTextField size="sm" [clearable]="true">
+            <span slTextFieldStart
+              ><span slIcon><svg slGlyph name="search"></svg></span
+            ></span>
+            <input
+              slTextFieldInput
+              type="search"
+              [value]="query()"
+              [attr.aria-label]="t('search')"
+              [attr.placeholder]="t('search')"
+              (valueChange)="query.set($event.value)"
+            />
+          </div>
+        </div>
+        <div data-part="list">
+          @if (sections().length === 0 && searching()) {
+            <div data-part="empty" role="status">{{ t('noResults') }}</div>
+          }
+          @for (section of sections(); track section.key) {
+            <div
+              data-part="section"
+              role="group"
+              [attr.data-zone]="section.key"
+              [attr.aria-labelledby]="rootId + '-' + section.key"
+              [attr.data-sole]="sections().length === 1 ? '' : null"
+              [attr.data-drop-target]="
+                drag().container === section.key && drag().index !== null ? '' : null
+              "
+            >
+              <div data-part="section-label" [attr.id]="rootId + '-' + section.key">
+                {{ section.label }}
+              </div>
+              @for (item of section.items; track item.id) {
+                @if (dropAt(section.key, item.index)) {
+                  <div data-part="drop-indicator" aria-hidden="true"></div>
+                }
+                <div
+                  data-part="item"
+                  [attr.data-column]="item.id"
+                  [attr.data-hidden]="item.hidden ? '' : null"
+                  [attr.data-locked]="item.locked ? '' : null"
+                  [attr.data-space-hidden]="item.bySpace ? '' : null"
+                  [attr.data-pinned]="item.zone"
+                  [attr.data-dragging]="drag().dragging === item.id ? '' : null"
+                >
+                  <button
+                    data-part="handle"
+                    type="button"
+                    [attr.aria-label]="t('reorder', { column: item.column.label })"
+                    [attr.aria-disabled]="item.handleDisabled ? 'true' : null"
+                    [attr.data-disabled]="item.handleDisabled ? '' : null"
+                    (keydown)="onHandleKeyDown($event, item.id, section.key)"
+                  >
+                    <span slIcon size="sm"><svg slGlyph name="grip-vertical"></svg></span>
+                  </button>
+                  <div data-part="visibility">
+                    <div
+                      slCheckbox
+                      [checked]="!item.hidden"
+                      [disabled]="(item.locked && !item.hidden) || item.lastVisible"
+                      (checkedChange)="toggle(item.id, $event)"
+                    >
+                      {{ item.column.label }}
+                      @if (item.status) {
+                        <span data-part="status">{{ item.status }}</span>
+                      }
+                      @if (item.column.description) {
+                        <p slCheckboxDescription>{{ item.column.description }}</p>
+                      }
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    slColumnManagerPart="pin"
+                    data-part="pin"
+                    [slMenuTriggerFor]="pinMenu"
+                    [attr.aria-label]="t('pin', { column: item.column.label })"
+                    [attr.data-pinned]="item.zone ? '' : null"
+                  >
+                    <span slIcon size="sm"><svg slGlyph name="pin"></svg></span>
+                  </button>
+                  <sl-menu #pinMenu size="sm">
+                    <button
+                      slMenuItem
+                      [disabled]="item.zone === 'start'"
+                      (select)="pin(item.id, 'start', $event)"
+                    >
+                      {{ t('pinStart') }}
+                    </button>
+                    <button
+                      slMenuItem
+                      [disabled]="item.zone === 'end'"
+                      (select)="pin(item.id, 'end', $event)"
+                    >
+                      {{ t('pinEnd') }}
+                    </button>
+                    @if (item.zone) {
+                      <button slMenuItem (select)="pin(item.id, null, $event)">
+                        {{ t('unpin') }}
+                      </button>
+                    }
+                  </sl-menu>
+                </div>
+              }
+              @if (section.dropAtEnd) {
+                <div data-part="drop-indicator" aria-hidden="true"></div>
+              }
+            </div>
+          }
+        </div>
+        <div data-part="footer">
+          <button
+            slButton
+            slColumnManagerPart="show-all"
+            size="sm"
+            tone="secondary"
+            variant="ghost"
+            type="button"
+            [disabled]="working().hidden.length === 0"
+            (click)="showAll($event)"
+          >
+            {{ t('showAll') }}
+          </button>
+          <button
+            slButton
+            slColumnManagerPart="reset"
+            size="sm"
+            tone="secondary"
+            variant="ghost"
+            type="button"
+            [disabled]="atDefault()"
+            (click)="reset($event)"
+          >
+            {{ t('reset') }}
+          </button>
+          @if (confirm()) {
+            <button
+              slButton
+              slColumnManagerPart="cancel"
+              size="sm"
+              tone="secondary"
+              variant="outline"
+              type="button"
+              (click)="cancel($event)"
+            >
+              {{ t('cancel') }}
+            </button>
+            <button
+              slButton
+              slColumnManagerPart="apply"
+              size="sm"
+              type="button"
+              [disabled]="!dirty()"
+              (click)="applyDraft($event)"
+            >
+              {{ t('apply') }}
+            </button>
+          }
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=column-manager]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-border-subtle, ButtonBorder);--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_inset: var(--slotted-control-padding-inline-md, 13px);--_row-block: var(--slotted-control-gap-sm, 6px);--_gap: var(--slotted-control-gap-md, 8px);--_font-size: var(--slotted-control-font-size-md, 13px);--_line-height: var(--slotted-line-height-md, 1.5);--_line: calc(var(--_font-size) * var(--_line-height));--_glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-md, 24px) );--_radius: var(--slotted-radius-sm, 4px);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);--_inline-size: var(--slotted-column-manager-inline-size, 22rem);--_list-max: var(--slotted-column-manager-list-max-block-size, min(60vh, 28rem));box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);grid-template-rows:auto auto minmax(0,1fr) auto;line-height:var(--_line-height);max-block-size:100%;min-inline-size:0;text-align:start;container-name:column-manager;container-type:inline-size}[data-ui=column-manager][data-presentation=popover]{inline-size:min(var(--_inline-size),calc(var(--slotted-positioner-available-width, 100vw) - var(--slotted-space-8, 1.5rem)))}[data-ui=column-manager][data-presentation=drawer]{block-size:100%;inline-size:100%}[data-ui=column-manager][data-presentation=inline]{inline-size:100%}[data-ui=column-manager]>[data-part=header]{align-items:baseline;column-gap:var(--_gap);display:flex;flex-wrap:wrap;padding-block:var(--_inset) var(--slotted-space-4, .5rem);padding-inline:var(--_inset)}[data-ui=column-manager]>[data-part=header]>[data-part=title]{color:var(--_text);font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--slotted-font-size-md, .875rem);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-md, 1.5);margin:0;min-inline-size:0}[data-ui=column-manager]>[data-part=header]>[data-part=summary]{color:var(--_muted);font-size:var(--slotted-font-size-sm, .8125rem);font-variant-numeric:tabular-nums;line-height:var(--slotted-line-height-sm, 1.45);margin-inline-start:auto;white-space:nowrap}[data-ui=column-manager]>[data-part=search]{padding-block-end:var(--_gap);padding-inline:var(--_inset)}[data-ui=column-manager]>[data-part=search]>[data-ui=text-field]{inline-size:100%}[data-ui=column-manager]>[data-part=list]{border-block:var(--slotted-border-width-thin, 1px) solid var(--_rule);max-block-size:var(--_list-max);min-block-size:0;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-2, .25rem)}[data-ui=column-manager][data-presentation=drawer]>[data-part=list]{max-block-size:none}[data-ui=column-manager]>[data-part=list]>[data-part=section]{padding-block:var(--slotted-space-2, .25rem);position:relative}[data-ui=column-manager]>[data-part=list]>[data-part=section]+[data-part=section]{border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_rule)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=section-label]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--slotted-line-height-xs, 1.4);padding-block:var(--slotted-space-3, .375rem) var(--slotted-space-2, .25rem);padding-inline:var(--_inset)}[data-ui=column-manager]>[data-part=list]>[data-part=section][data-sole]>[data-part=section-label]{block-size:1px;clip-path:inset(50%);inline-size:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]{align-items:start;column-gap:var(--slotted-space-2, .25rem);display:grid;grid-template-columns:auto minmax(0,1fr) auto;padding-block:var(--_row-block);padding-inline:calc(var(--_inset) - var(--slotted-space-2, .25rem));position:relative;transition:opacity var(--_duration) var(--_easing)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item][data-dragging]{opacity:.5}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]){align-items:center;background-color:transparent;block-size:var(--_control);border:0;border-radius:var(--_radius);color:var(--_muted);display:inline-flex;flex:none;inline-size:var(--_control);justify-content:center;margin:0;margin-block:calc((var(--_line) - var(--_control)) / 2);padding:0;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=handle]{cursor:grab;touch-action:none}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=pin][data-pinned]{color:var(--slotted-tone-accent-text, LinkText)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]):not([data-disabled]):hover,[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=pin][data-open]:not([data-disabled]){background-color:var(--_hover);color:var(--_text)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]):not([data-disabled]):active{background-color:var(--_active)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=handle][data-disabled]{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item][data-dragging]>[data-part=handle]{cursor:grabbing}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=visibility]{display:block;min-inline-size:0;overflow-wrap:anywhere;padding-inline:var(--slotted-space-2, .25rem)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=visibility] [data-part=description]{text-wrap:pretty}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=visibility] [data-part=status]{color:var(--_muted);display:inline-block;font-size:var(--slotted-font-size-xs, .75rem)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item][data-space-hidden]>[data-part=visibility] [data-part=status]{color:var(--slotted-tone-warning-text, CanvasText)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=drop-indicator]{block-size:0;pointer-events:none;position:relative}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=drop-indicator]:before{background-color:var(--slotted-tone-accent-solid);block-size:var(--slotted-border-width-thick, 2px);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inset-block-start:calc(var(--slotted-border-width-thick, 2px) / -2);inset-inline:var(--_inset);position:absolute}[data-ui=column-manager]>[data-part=list]>[data-part=section][data-drop-target]{background-color:var(--_hover)}[data-ui=column-manager]>[data-part=list]>[data-part=empty]{color:var(--_muted);padding-block:var(--slotted-space-8, 1.5rem);padding-inline:var(--_inset);text-align:center}[data-ui=column-manager]>[data-part=footer]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--_gap);padding:var(--_inset)}[data-ui=column-manager]>[data-part=footer]>:is([data-part=show-all],[data-part=reset]){flex:none}[data-ui=column-manager]>[data-part=footer]>[data-part=cancel]{margin-inline-start:auto}[data-ui=column-manager]>[data-part=footer]>[data-part=apply]{flex:none}@container column-manager (max-width: 20rem){[data-ui=column-manager]>[data-part=footer]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}[data-ui=column-manager]>[data-part=footer]>[data-part=cancel]{margin-inline-start:0}}[data-part=trigger][data-column-manager-trigger],[data-column-manager-trigger]{--_count-size: var(--slotted-font-size-xs, .75rem)}[data-column-manager-trigger] [data-part=count]{background-color:var(--slotted-tone-accent-surface, Canvas);border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;color:var(--slotted-tone-accent-text, LinkText);display:inline-block;font-size:var(--_count-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);line-height:calc(var(--_count-size) + 2 * var(--slotted-space-1, .125rem));margin-inline-start:var(--slotted-space-3, .375rem);min-inline-size:calc(var(--_count-size) + 2 * var(--slotted-space-2, .25rem));padding-inline:var(--slotted-space-2, .25rem);text-align:center}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlButton, selector: "button[slButton]", inputs: ["disabled", "focusableWhenDisabled", "fullWidth", "loading", "loadingDelay", "messages", "size", "tone", "type", "variant"], exportAs: ["slButton"] }, { kind: "component", type: SlCheckbox, selector: "[slCheckbox]", inputs: ["checked", "defaultChecked", "indeterminate", "parent", "value", "name", "size", "labelPlacement", "variant", "disabled", "readOnly", "invalid"], outputs: ["checkedChange"], exportAs: ["slCheckbox"] }, { kind: "directive", type: SlCheckboxDescription, selector: "[slCheckboxDescription]", exportAs: ["slCheckboxDescription"] }, { kind: "directive", type: SlColumnManagerPart, selector: "[slColumnManagerPart]", inputs: ["slColumnManagerPart"] }, { kind: "component", type: SlDrawer, selector: "sl-drawer", inputs: ["open", "extent", "mode", "side", "size", "mount", "escape", "outsidePress", "back", "modal", "loading", "messages", "drag", "scrimFrom", "minExtent", "maxExtent", "snapPoints", "container", "initialFocus", "finalFocus"], outputs: ["openChange", "extentChange", "openChangeRequest", "extentChangeRequest", "closed"], exportAs: ["slDrawer"] }, { kind: "component", type: SlGlyph, selector: "svg[slGlyph]", inputs: ["name", "solid"] }, { kind: "component", type: SlIcon, selector: "[slIcon]", inputs: ["directional", "label", "size", "tone"], exportAs: ["slIcon"] }, { kind: "component", type: SlMenu, selector: "sl-menu", inputs: ["value", "aria-label", "aria-describedby", "open", "align", "side", "size", "mount", "strategy", "sideOffset", "alignOffset", "collisionPadding", "submenuOpenDelay", "submenuCloseDelay", "typeaheadTimeout", "disabled", "loop", "typeahead", "openOnHover", "closeOnSelect", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "loading"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slMenu"] }, { kind: "component", type: SlMenuItem, selector: "button[slMenuItem], a[slMenuItem], button[slMenuCheckboxItem], button[slMenuRadioItem]", inputs: ["disabled", "textValue", "tone", "shortcut", "closeOnSelect", "value", "checked"], outputs: ["checkedChange", "checkedChangeRequest", "select"], exportAs: ["slMenuItem"] }, { kind: "directive", type: SlMenuTrigger, selector: "[slMenuTriggerFor]", inputs: ["slMenuTriggerFor"], exportAs: ["slMenuTrigger"] }, { kind: "directive", type: SlPopover, selector: "[slPopover]", inputs: ["open", "defaultOpen", "disabled", "size", "width", "side", "align", "mount", "strategy", "messages", "initialFocus", "finalFocus", "arrow", "autoFocus", "closeOnEscape", "closeOnOutsidePress", "flip", "shift", "hideWhenDetached", "portal", "sideOffset", "alignOffset", "collisionPadding", "arrowPadding"], outputs: ["openChange", "openChangeRequest"], exportAs: ["slPopover"] }, { kind: "component", type: SlPopoverContent, selector: "[slPopoverContent]", exportAs: ["slPopoverContent"] }, { kind: "directive", type: SlPopoverLayer, selector: "ng-template[slPopoverLayer]", exportAs: ["slPopoverLayer"] }, { kind: "component", type: SlTextField, selector: "[slTextField]", inputs: ["size", "variant", "mono", "clearable", "revealable", "copyable", "messages", "loading"], outputs: ["valueCopy"], exportAs: ["slTextField"] }, { kind: "directive", type: SlTextFieldInput, selector: "input[slTextFieldInput]", inputs: ["value", "defaultValue", "disabled", "readOnly", "invalid", "showCount", "countMax", "revealed", "defaultRevealed", "type"], outputs: ["valueChange", "revealedChange"], exportAs: ["slTextFieldInput"] }, { kind: "directive", type: SlTextFieldStart, selector: "[slTextFieldStart]", exportAs: ["slTextFieldStart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColumnManager, decorators: [{
+            type: Component,
+            args: [{ selector: 'sl-column-manager', standalone: true, exportAs: 'slColumnManager', imports: [
+                        NgTemplateOutlet,
+                        SlButton,
+                        SlCheckbox,
+                        SlCheckboxDescription,
+                        SlColumnManagerPart,
+                        SlDrawer,
+                        SlGlyph,
+                        SlIcon,
+                        SlMenu,
+                        SlMenuItem,
+                        SlMenuTrigger,
+                        SlPopover,
+                        SlPopoverContent,
+                        SlPopoverLayer,
+                        SlTextField,
+                        SlTextFieldInput,
+                        SlTextFieldStart,
+                    ], template: `
+    @switch (resolvedPresentation()) {
+      @case ('popover') {
+        <ng-container
+          slPopover
+          size="lg"
+          side="bottom"
+          align="start"
+          initialFocus="[data-part='search'] input"
+          [open]="open()"
+          (openChangeRequest)="onLayerRequest($event)"
+        >
+          <ng-template slPopoverLayer>
+            <div slPopoverContent [attr.aria-labelledby]="titleId">
+              <ng-container [ngTemplateOutlet]="panel" />
+            </div>
+          </ng-template>
+        </ng-container>
+      }
+      @case ('drawer') {
+        <sl-drawer
+          side="end"
+          size="sm"
+          [open]="open()"
+          [finalFocus]="triggerNode() ?? false"
+          (openChangeRequest)="onLayerRequest($event)"
+        >
+          <ng-container [ngTemplateOutlet]="panel" />
+        </sl-drawer>
+      }
+      @default {
+        <ng-container [ngTemplateOutlet]="panel" />
+      }
+    }
+
+    <ng-template #panel>
+      <div
+        #root
+        data-ui="column-manager"
+        data-part="root"
+        role="group"
+        [attr.id]="rootId"
+        [attr.aria-labelledby]="titleId"
+        [attr.data-presentation]="resolvedPresentation()"
+        [attr.data-apply]="resolvedApply()"
+      >
+        <div data-part="header">
+          <h2 data-part="title" [attr.id]="titleId">{{ t('title') }}</h2>
+          <span data-part="summary">{{ summary() }}</span>
+        </div>
+        <div data-part="search">
+          <div slTextField size="sm" [clearable]="true">
+            <span slTextFieldStart
+              ><span slIcon><svg slGlyph name="search"></svg></span
+            ></span>
+            <input
+              slTextFieldInput
+              type="search"
+              [value]="query()"
+              [attr.aria-label]="t('search')"
+              [attr.placeholder]="t('search')"
+              (valueChange)="query.set($event.value)"
+            />
+          </div>
+        </div>
+        <div data-part="list">
+          @if (sections().length === 0 && searching()) {
+            <div data-part="empty" role="status">{{ t('noResults') }}</div>
+          }
+          @for (section of sections(); track section.key) {
+            <div
+              data-part="section"
+              role="group"
+              [attr.data-zone]="section.key"
+              [attr.aria-labelledby]="rootId + '-' + section.key"
+              [attr.data-sole]="sections().length === 1 ? '' : null"
+              [attr.data-drop-target]="
+                drag().container === section.key && drag().index !== null ? '' : null
+              "
+            >
+              <div data-part="section-label" [attr.id]="rootId + '-' + section.key">
+                {{ section.label }}
+              </div>
+              @for (item of section.items; track item.id) {
+                @if (dropAt(section.key, item.index)) {
+                  <div data-part="drop-indicator" aria-hidden="true"></div>
+                }
+                <div
+                  data-part="item"
+                  [attr.data-column]="item.id"
+                  [attr.data-hidden]="item.hidden ? '' : null"
+                  [attr.data-locked]="item.locked ? '' : null"
+                  [attr.data-space-hidden]="item.bySpace ? '' : null"
+                  [attr.data-pinned]="item.zone"
+                  [attr.data-dragging]="drag().dragging === item.id ? '' : null"
+                >
+                  <button
+                    data-part="handle"
+                    type="button"
+                    [attr.aria-label]="t('reorder', { column: item.column.label })"
+                    [attr.aria-disabled]="item.handleDisabled ? 'true' : null"
+                    [attr.data-disabled]="item.handleDisabled ? '' : null"
+                    (keydown)="onHandleKeyDown($event, item.id, section.key)"
+                  >
+                    <span slIcon size="sm"><svg slGlyph name="grip-vertical"></svg></span>
+                  </button>
+                  <div data-part="visibility">
+                    <div
+                      slCheckbox
+                      [checked]="!item.hidden"
+                      [disabled]="(item.locked && !item.hidden) || item.lastVisible"
+                      (checkedChange)="toggle(item.id, $event)"
+                    >
+                      {{ item.column.label }}
+                      @if (item.status) {
+                        <span data-part="status">{{ item.status }}</span>
+                      }
+                      @if (item.column.description) {
+                        <p slCheckboxDescription>{{ item.column.description }}</p>
+                      }
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    slColumnManagerPart="pin"
+                    data-part="pin"
+                    [slMenuTriggerFor]="pinMenu"
+                    [attr.aria-label]="t('pin', { column: item.column.label })"
+                    [attr.data-pinned]="item.zone ? '' : null"
+                  >
+                    <span slIcon size="sm"><svg slGlyph name="pin"></svg></span>
+                  </button>
+                  <sl-menu #pinMenu size="sm">
+                    <button
+                      slMenuItem
+                      [disabled]="item.zone === 'start'"
+                      (select)="pin(item.id, 'start', $event)"
+                    >
+                      {{ t('pinStart') }}
+                    </button>
+                    <button
+                      slMenuItem
+                      [disabled]="item.zone === 'end'"
+                      (select)="pin(item.id, 'end', $event)"
+                    >
+                      {{ t('pinEnd') }}
+                    </button>
+                    @if (item.zone) {
+                      <button slMenuItem (select)="pin(item.id, null, $event)">
+                        {{ t('unpin') }}
+                      </button>
+                    }
+                  </sl-menu>
+                </div>
+              }
+              @if (section.dropAtEnd) {
+                <div data-part="drop-indicator" aria-hidden="true"></div>
+              }
+            </div>
+          }
+        </div>
+        <div data-part="footer">
+          <button
+            slButton
+            slColumnManagerPart="show-all"
+            size="sm"
+            tone="secondary"
+            variant="ghost"
+            type="button"
+            [disabled]="working().hidden.length === 0"
+            (click)="showAll($event)"
+          >
+            {{ t('showAll') }}
+          </button>
+          <button
+            slButton
+            slColumnManagerPart="reset"
+            size="sm"
+            tone="secondary"
+            variant="ghost"
+            type="button"
+            [disabled]="atDefault()"
+            (click)="reset($event)"
+          >
+            {{ t('reset') }}
+          </button>
+          @if (confirm()) {
+            <button
+              slButton
+              slColumnManagerPart="cancel"
+              size="sm"
+              tone="secondary"
+              variant="outline"
+              type="button"
+              (click)="cancel($event)"
+            >
+              {{ t('cancel') }}
+            </button>
+            <button
+              slButton
+              slColumnManagerPart="apply"
+              size="sm"
+              type="button"
+              [disabled]="!dirty()"
+              (click)="applyDraft($event)"
+            >
+              {{ t('apply') }}
+            </button>
+          }
+        </div>
+      </div>
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[style.display]': "'contents'" }, styles: ["@layer slotted.components{[data-ui=column-manager]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_rule: var(--slotted-border-subtle, ButtonBorder);--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_inset: var(--slotted-control-padding-inline-md, 13px);--_row-block: var(--slotted-control-gap-sm, 6px);--_gap: var(--slotted-control-gap-md, 8px);--_font-size: var(--slotted-control-font-size-md, 13px);--_line-height: var(--slotted-line-height-md, 1.5);--_line: calc(var(--_font-size) * var(--_line-height));--_glyph: var(--slotted-control-icon-size-sm, 14px);--_control: min( calc(var(--_glyph) + 2 * var(--slotted-space-2, .25rem)), var(--slotted-control-inner-size-md, 24px) );--_radius: var(--slotted-radius-sm, 4px);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);--_inline-size: var(--slotted-column-manager-inline-size, 22rem);--_list-max: var(--slotted-column-manager-list-max-block-size, min(60vh, 28rem));box-sizing:border-box;color:var(--_text);display:grid;font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);grid-template-rows:auto auto minmax(0,1fr) auto;line-height:var(--_line-height);max-block-size:100%;min-inline-size:0;text-align:start;container-name:column-manager;container-type:inline-size}[data-ui=column-manager][data-presentation=popover]{inline-size:min(var(--_inline-size),calc(var(--slotted-positioner-available-width, 100vw) - var(--slotted-space-8, 1.5rem)))}[data-ui=column-manager][data-presentation=drawer]{block-size:100%;inline-size:100%}[data-ui=column-manager][data-presentation=inline]{inline-size:100%}[data-ui=column-manager]>[data-part=header]{align-items:baseline;column-gap:var(--_gap);display:flex;flex-wrap:wrap;padding-block:var(--_inset) var(--slotted-space-4, .5rem);padding-inline:var(--_inset)}[data-ui=column-manager]>[data-part=header]>[data-part=title]{color:var(--_text);font-family:var( --slotted-font-family-heading, var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif) );font-size:var(--slotted-font-size-md, .875rem);font-weight:var(--slotted-font-weight-semibold, 600);line-height:var(--slotted-line-height-md, 1.5);margin:0;min-inline-size:0}[data-ui=column-manager]>[data-part=header]>[data-part=summary]{color:var(--_muted);font-size:var(--slotted-font-size-sm, .8125rem);font-variant-numeric:tabular-nums;line-height:var(--slotted-line-height-sm, 1.45);margin-inline-start:auto;white-space:nowrap}[data-ui=column-manager]>[data-part=search]{padding-block-end:var(--_gap);padding-inline:var(--_inset)}[data-ui=column-manager]>[data-part=search]>[data-ui=text-field]{inline-size:100%}[data-ui=column-manager]>[data-part=list]{border-block:var(--slotted-border-width-thin, 1px) solid var(--_rule);max-block-size:var(--_list-max);min-block-size:0;overflow-y:auto;overscroll-behavior:contain;padding-block:var(--slotted-space-2, .25rem)}[data-ui=column-manager][data-presentation=drawer]>[data-part=list]{max-block-size:none}[data-ui=column-manager]>[data-part=list]>[data-part=section]{padding-block:var(--slotted-space-2, .25rem);position:relative}[data-ui=column-manager]>[data-part=list]>[data-part=section]+[data-part=section]{border-block-start:var(--slotted-border-width-thin, 1px) solid var(--_rule)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=section-label]{color:var(--_muted);font-size:var(--slotted-font-size-xs, .75rem);font-weight:var(--slotted-font-weight-medium, 500);line-height:var(--slotted-line-height-xs, 1.4);padding-block:var(--slotted-space-3, .375rem) var(--slotted-space-2, .25rem);padding-inline:var(--_inset)}[data-ui=column-manager]>[data-part=list]>[data-part=section][data-sole]>[data-part=section-label]{block-size:1px;clip-path:inset(50%);inline-size:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]{align-items:start;column-gap:var(--slotted-space-2, .25rem);display:grid;grid-template-columns:auto minmax(0,1fr) auto;padding-block:var(--_row-block);padding-inline:calc(var(--_inset) - var(--slotted-space-2, .25rem));position:relative;transition:opacity var(--_duration) var(--_easing)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item][data-dragging]{opacity:.5}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]){align-items:center;background-color:transparent;block-size:var(--_control);border:0;border-radius:var(--_radius);color:var(--_muted);display:inline-flex;flex:none;inline-size:var(--_control);justify-content:center;margin:0;margin-block:calc((var(--_line) - var(--_control)) / 2);padding:0;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=handle]{cursor:grab;touch-action:none}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=pin][data-pinned]{color:var(--slotted-tone-accent-text, LinkText)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]):not([data-disabled]):hover,[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=pin][data-open]:not([data-disabled]){background-color:var(--_hover);color:var(--_text)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]):not([data-disabled]):active{background-color:var(--_active)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>:is([data-part=handle],[data-part=pin]):focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, currentColor);outline-offset:calc(var(--slotted-focus-ring-width, 2px) * -1)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=handle][data-disabled]{color:var(--slotted-disabled-foreground, GrayText);cursor:default}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item][data-dragging]>[data-part=handle]{cursor:grabbing}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=visibility]{display:block;min-inline-size:0;overflow-wrap:anywhere;padding-inline:var(--slotted-space-2, .25rem)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=visibility] [data-part=description]{text-wrap:pretty}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item]>[data-part=visibility] [data-part=status]{color:var(--_muted);display:inline-block;font-size:var(--slotted-font-size-xs, .75rem)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=item][data-space-hidden]>[data-part=visibility] [data-part=status]{color:var(--slotted-tone-warning-text, CanvasText)}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=drop-indicator]{block-size:0;pointer-events:none;position:relative}[data-ui=column-manager]>[data-part=list]>[data-part=section]>[data-part=drop-indicator]:before{background-color:var(--slotted-tone-accent-solid);block-size:var(--slotted-border-width-thick, 2px);border-radius:var(--slotted-radius-full, 9999px);content:\"\";inset-block-start:calc(var(--slotted-border-width-thick, 2px) / -2);inset-inline:var(--_inset);position:absolute}[data-ui=column-manager]>[data-part=list]>[data-part=section][data-drop-target]{background-color:var(--_hover)}[data-ui=column-manager]>[data-part=list]>[data-part=empty]{color:var(--_muted);padding-block:var(--slotted-space-8, 1.5rem);padding-inline:var(--_inset);text-align:center}[data-ui=column-manager]>[data-part=footer]{align-items:center;display:flex;flex-wrap:wrap;gap:var(--_gap);padding:var(--_inset)}[data-ui=column-manager]>[data-part=footer]>:is([data-part=show-all],[data-part=reset]){flex:none}[data-ui=column-manager]>[data-part=footer]>[data-part=cancel]{margin-inline-start:auto}[data-ui=column-manager]>[data-part=footer]>[data-part=apply]{flex:none}@container column-manager (max-width: 20rem){[data-ui=column-manager]>[data-part=footer]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}[data-ui=column-manager]>[data-part=footer]>[data-part=cancel]{margin-inline-start:0}}[data-part=trigger][data-column-manager-trigger],[data-column-manager-trigger]{--_count-size: var(--slotted-font-size-xs, .75rem)}[data-column-manager-trigger] [data-part=count]{background-color:var(--slotted-tone-accent-surface, Canvas);border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;color:var(--slotted-tone-accent-text, LinkText);display:inline-block;font-size:var(--_count-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-font-weight-semibold, 600);line-height:calc(var(--_count-size) + 2 * var(--slotted-space-1, .125rem));margin-inline-start:var(--slotted-space-3, .375rem);min-inline-size:calc(var(--_count-size) + 2 * var(--slotted-space-2, .25rem));padding-inline:var(--slotted-space-2, .25rem);text-align:center}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], columnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnState", required: false }] }, { type: i0.Output, args: ["columnStateChange"] }], defaultColumnState: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultColumnState", required: false }] }], outOfSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "outOfSpace", required: false }] }], presentation: [{ type: i0.Input, args: [{ isSignal: true, alias: "presentation", required: false }] }], apply: [{ type: i0.Input, args: [{ isSignal: true, alias: "apply", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], columnStateChangeRequest: [{ type: i0.Output, args: ["columnStateChangeRequest"] }], openChangeRequest: [{ type: i0.Output, args: ["openChangeRequest"] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SlPopover), { isSignal: true }] }], root: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }] } });
+/**
+ * The consumer's button, wired to a manager: the popup it opens, whether it
+ * is open, what it controls, and the count of hidden columns after its words
+ * — a chip on screen and a sentence in its accessible name. A directive
+ * cannot project, so the two spans are appended to the host once and kept
+ * current from the manager's count.
+ */
+class SlColumnManagerTrigger {
+    manager = input.required({ ...(ngDevMode ? { debugName: "manager" } : /* istanbul ignore next */ {}), alias: 'slColumnManagerTriggerFor' });
+    host = inject(ElementRef).nativeElement;
+    renderer = inject(Renderer2);
+    count = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect((onCleanup) => {
+            const manager = this.manager();
+            manager.registerTrigger(this.host);
+            onCleanup(() => manager.registerTrigger(null));
+        });
+        /* `slButton` writes `data-part="root"` statically; the part is this family's. */
+        afterNextRender(() => {
+            this.host.setAttribute('data-part', 'trigger');
+            const chip = this.renderer.createElement('span');
+            chip.setAttribute('data-part', 'count');
+            chip.setAttribute('aria-hidden', 'true');
+            const sentence = this.renderer.createElement('span');
+            sentence.setAttribute('data-ui', 'visually-hidden');
+            sentence.setAttribute('data-part', 'root');
+            this.count.set({ chip, sentence });
+        });
+        effect(() => {
+            const nodes = this.count();
+            if (!nodes)
+                return;
+            const manager = this.manager();
+            const hidden = manager.hiddenCount();
+            if (hidden === 0) {
+                nodes.chip.remove();
+                nodes.sentence.remove();
+                return;
+            }
+            nodes.chip.textContent = String(hidden);
+            nodes.sentence.textContent = manager.t('hiddenCount', { count: hidden });
+            if (!nodes.chip.isConnected) {
+                this.host.append(' ', nodes.chip, ' ', nodes.sentence);
+            }
+        });
+    }
+    onClick(event) {
+        if (event.defaultPrevented)
+            return;
+        this.manager().toggleOpen(pressReason(event), event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColumnManagerTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlColumnManagerTrigger, isStandalone: true, selector: "[slColumnManagerTrigger]", inputs: { manager: { classPropertyName: "manager", publicName: "slColumnManagerTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "aria-haspopup": "dialog", "data-column-manager-trigger": "" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-expanded": "manager().open()", "attr.aria-controls": "manager().open() ? manager().rootId : null", "attr.data-open": "manager().open() ? '' : null" } }, exportAs: ["slColumnManagerTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlColumnManagerTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slColumnManagerTrigger]',
+                    standalone: true,
+                    exportAs: 'slColumnManagerTrigger',
+                    host: {
+                        'aria-haspopup': 'dialog',
+                        'data-column-manager-trigger': '',
+                        '[attr.aria-expanded]': 'manager().open()',
+                        '[attr.aria-controls]': 'manager().open() ? manager().rootId : null',
+                        '[attr.data-open]': "manager().open() ? '' : null",
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { manager: [{ type: i0.Input, args: [{ isSignal: true, alias: "slColumnManagerTriggerFor", required: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COLUMN_MANAGER_DEFAULTS, SlColumnManager, SlColumnManagerIdFactory, SlColumnManagerPart, SlColumnManagerTrigger, columnZones, injectColumnManagerDefaults, provideColumnManagerDefaults, searchKey };
+//# sourceMappingURL=slotted-angular-column-manager.mjs.map