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

package/fesm2022/slotted-angular-saved-views.mjs

@@ -0,0 +1,877 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, input, inject, ElementRef, afterNextRender, Directive, model, booleanAttribute, output, Injector, HostAttributeToken, viewChild, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, effect, untracked } from '@angular/core';
+import { injectMessages } from '@slotted/angular/i18n';
+import { SlButton } from '@slotted/angular/button';
+import { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';
+import { SlGlyph, SlIcon } from '@slotted/angular/icon';
+import { SlMenu, SlMenuItem, SlMenuTrigger } from '@slotted/angular/menu';
+import { SlPopover, SlPopoverContent, SlPopoverLayer, SlPopoverTrigger } from '@slotted/angular/popover';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+import { emptySavedViews, parseGridView, sameSavedView, BUILT_IN_VIEW_ID, withActiveView, withViewSaved, savedViewText, withDefaultView, isViewNameTaken, withViewCreated, withViewRenamed, withViewDeleted, serializeSavedViews, parseSavedViews } from '@slotted/core/grid';
+import { savedViewsMessages } from '@slotted/core/i18n';
+import { getLiveAnnouncer } from '@slotted/core/live-announcer';
+
+class SlSavedViewsIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-saved-views-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSavedViewsIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSavedViewsIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSavedViewsIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+let counter = 0;
+/** `crypto.randomUUID()` where the platform has it, and a counter otherwise. */
+function newSavedViewId() {
+    const crypto = globalThis.crypto;
+    if (typeof crypto?.randomUUID === 'function')
+        return crypto.randomUUID();
+    counter += 1;
+    return `view-${Date.now().toString(36)}-${counter}`;
+}
+
+/**
+ * `slMenuTriggerFor` binds `[attr.data-part]` and resolves it to `null` on a
+ * trigger that is neither a bar's item nor a submenu's; a host binding of
+ * `null` removes the part the template wrote. The part is written back after
+ * the first change detection, where the constant binding is not applied again.
+ */
+class SlSavedViewsPart {
+    slSavedViewsPart = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slSavedViewsPart" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const element = inject(ElementRef).nativeElement;
+        afterNextRender(() => element.setAttribute('data-part', this.slSavedViewsPart()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSavedViewsPart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlSavedViewsPart, isStandalone: true, selector: "[slSavedViewsPart]", inputs: { slSavedViewsPart: { classPropertyName: "slSavedViewsPart", publicName: "slSavedViewsPart", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSavedViewsPart, decorators: [{
+            type: Directive,
+            args: [{ selector: '[slSavedViewsPart]', standalone: true }]
+        }], ctorParameters: () => [], propDecorators: { slSavedViewsPart: [{ type: i0.Input, args: [{ isSignal: true, alias: "slSavedViewsPart", required: true }] }] } });
+/**
+ * The named views of a grid, and the one in use: a trigger naming it, a mark
+ * and a revert while the grid differs from it, and a popover listing every
+ * view with its actions. The family applies nothing to a grid — it asks with
+ * `stateChangeRequest` and hands the consumer the view to write through
+ * `viewApply`.
+ */
+class SlSavedViews {
+    /** The view the grid shows now. */
+    current = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /** The built-in view: the application's defaults. */
+    builtIn = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "builtIn" }] : /* istanbul ignore next */ []));
+    /** The model, so a view is serialized and compared against the columns it names. */
+    columns = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** The views. Two-way, so a template may bind it directly; cancel the request to hold it. */
+    state = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /** The views an unbound instance starts from. */
+    defaultState = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultState" }] : /* istanbul ignore next */ []));
+    /** Whether the layer is open. Two-way. */
+    open = model(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * group's and the panel's name (`label`), the controls, the forms and the
+     * announcements. A host `aria-label` names both instead.
+     */
+    messages = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "messages" }] : /* istanbul ignore next */ []));
+    /** Every change to the views, carrying the action and the reason; cancellable. */
+    stateChangeRequest = output();
+    /** One output for one transition of the layer. */
+    openChangeRequest = output();
+    /** After apply and revert: the view to write into the grid. */
+    viewApply = output();
+    injector = inject(Injector);
+    host = inject(ElementRef).nativeElement;
+    role = inject(new HostAttributeToken('role'), { optional: true }) ?? 'group';
+    writtenLabel = inject(new HostAttributeToken('aria-label'), {
+        optional: true,
+    });
+    panelId = `${inject(SlSavedViewsIdFactory).next()}-panel`;
+    triggerRef = viewChild.required('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    editing = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []));
+    draft = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    error = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** The family's words in the language in force, with this control's `messages` laid over them. */
+    t = injectMessages(savedViewsMessages, this.messages);
+    resolvedLabel = computed(() => this.writtenLabel ?? this.t('label'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    resolvedState = computed(() => this.state() ?? this.defaultState() ?? emptySavedViews(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedState" }] : /* istanbul ignore next */ []));
+    isOpen = computed(() => this.open() ?? this.defaultOpen(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    active = computed(() => {
+        const state = this.resolvedState();
+        return state.views.find((view) => view.id === state.activeId) ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    activeView = computed(() => {
+        const active = this.active();
+        return active ? parseGridView(active.view, this.columns()) : this.builtIn();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeView" }] : /* istanbul ignore next */ []));
+    modified = computed(() => !sameSavedView(this.current(), this.activeView(), this.columns()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "modified" }] : /* istanbul ignore next */ []));
+    activeName = computed(() => this.active()?.name ?? this.t('builtIn'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeName" }] : /* istanbul ignore next */ []));
+    canSave = computed(() => this.active() !== null && this.modified(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
+    rows = computed(() => {
+        const state = this.resolvedState();
+        return [
+            {
+                id: null,
+                key: BUILT_IN_VIEW_ID,
+                name: this.t('builtIn'),
+                view: null,
+                current: state.activeId === null,
+                isDefault: state.defaultId === null,
+            },
+            ...state.views.map((view) => ({
+                id: view.id,
+                key: view.id,
+                name: view.name,
+                view,
+                current: state.activeId === view.id,
+                isDefault: state.defaultId === view.id,
+            })),
+        ];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /** A click the keyboard produced has no pointer detail. */
+    pressReason(event) {
+        return event.detail === 0 ? 'keyboard' : 'pointer';
+    }
+    editingKind(row) {
+        const editing = this.editing();
+        if (editing === null || editing.kind === 'create' || editing.id !== row.id)
+            return null;
+        return editing.kind;
+    }
+    /** Opens the layer, carrying `programmatic`. */
+    show() {
+        this.setOpen(true, 'programmatic');
+    }
+    /** Closes the layer, carrying `programmatic`. */
+    hide() {
+        this.setOpen(false, 'programmatic');
+    }
+    /** Moves focus to the trigger. */
+    focus() {
+        this.triggerRef().nativeElement.focus();
+    }
+    /** Applies a view by id — `null` is the built-in view — carrying the reason. */
+    apply(id, reason = 'programmatic', source) {
+        const state = this.resolvedState();
+        const target = id === null ? null : (state.views.find((view) => view.id === id) ?? null);
+        if (id !== null && target === null)
+            return;
+        const request = this.request(withActiveView(state, id), 'apply', reason, source);
+        if (request === null)
+            return;
+        const view = target ? parseGridView(target.view, this.columns()) : this.builtIn();
+        this.viewApply.emit({ view, request });
+        this.announce(this.t('applied', { name: target?.name ?? this.t('builtIn') }));
+        this.setOpen(false, reason === 'keyboard' || reason === 'pointer' ? reason : 'programmatic', source);
+    }
+    revert(event) {
+        const request = this.request(this.resolvedState(), 'revert', this.pressReason(event), event);
+        if (request === null)
+            return;
+        this.viewApply.emit({ view: this.activeView(), request });
+        this.announce(this.t('applied', { name: this.activeName() }));
+        this.focusAfterRender({ id: null, part: 'trigger' });
+    }
+    save(event) {
+        const active = this.active();
+        if (active === null || !this.modified())
+            return;
+        const reason = this.pressReason(event);
+        const next = withViewSaved(this.resolvedState(), active.id, savedViewText(this.current(), this.columns()));
+        if (this.request(next, 'save', reason, event) === null)
+            return;
+        this.announce(this.t('saved', { name: active.name }));
+        this.setOpen(false, reason, event);
+    }
+    setDefault(id, event) {
+        const state = this.resolvedState();
+        const request = this.request(withDefaultView(state, id), 'default', event.reason, event.source);
+        if (request === null)
+            return;
+        const name = state.views.find((view) => view.id === id)?.name ?? this.t('builtIn');
+        this.announce(this.t('defaultChanged', { name }));
+    }
+    startCreate() {
+        this.editing.set({ kind: 'create' });
+        this.draft.set('');
+        this.error.set(null);
+        this.focusAfterRender({ id: null, part: 'input' });
+    }
+    startRename(view) {
+        this.editing.set({ kind: 'rename', id: view.id });
+        this.draft.set(view.name);
+        this.error.set(null);
+        this.focusAfterRender({ id: view.id, part: 'input' });
+    }
+    startDelete(view) {
+        this.editing.set({ kind: 'delete', id: view.id });
+        this.error.set(null);
+        this.focusAfterRender({ id: view.id, part: 'cancel' });
+    }
+    /** Cancelling returns focus to the control that opened the form. */
+    cancelEditing() {
+        const was = this.editing();
+        this.closeForms();
+        if (was === null)
+            return;
+        this.focusAfterRender(was.kind === 'create' ? { id: null, part: 'save-as' } : { id: was.id, part: 'actions' });
+    }
+    onDraft(value) {
+        this.draft.set(value ?? '');
+        this.error.set(null);
+    }
+    submit(event) {
+        event.preventDefault();
+        const editing = this.editing();
+        if (editing === null || editing.kind === 'delete')
+            return;
+        const state = this.resolvedState();
+        const name = this.draft().trim();
+        const except = editing.kind === 'rename' ? editing.id : null;
+        const builtIn = this.t('builtIn').trim().toLocaleLowerCase();
+        if (name === '')
+            this.error.set('empty');
+        else if (isViewNameTaken(state, name, except) || name.toLocaleLowerCase() === builtIn) {
+            this.error.set('duplicate');
+        }
+        if (this.error() !== null) {
+            this.focusAfterRender({ id: except, part: 'input' });
+            return;
+        }
+        if (editing.kind === 'create') {
+            const id = newSavedViewId();
+            const next = withViewCreated(state, name, savedViewText(this.current(), this.columns()), id);
+            if (this.request(next, 'create', 'submit', event) === null)
+                return;
+            this.announce(this.t('saved', { name }));
+            this.closeForms();
+            this.focusAfterRender({ id, part: 'apply' });
+            return;
+        }
+        if (this.request(withViewRenamed(state, editing.id, name), 'rename', 'submit', event) === null) {
+            return;
+        }
+        this.announce(this.t('renamed', { name }));
+        this.closeForms();
+        this.focusAfterRender({ id: editing.id, part: 'apply' });
+    }
+    confirmDelete(id, event) {
+        const state = this.resolvedState();
+        const index = state.views.findIndex((view) => view.id === id);
+        const view = state.views[index];
+        if (view === undefined)
+            return;
+        if (this.request(withViewDeleted(state, id), 'delete', 'remove', event) === null)
+            return;
+        this.announce(this.t('deleted', { name: view.name }));
+        this.closeForms();
+        this.focusAfterRender({ id: state.views[index - 1]?.id ?? BUILT_IN_VIEW_ID, part: 'apply' });
+    }
+    /**
+     * The dismissable layer asks in the capture phase. The popover's own move is
+     * always refused here and replayed as this family's request, so the layer
+     * follows one open state; a form open inside is cancelled first and the
+     * close is refused.
+     */
+    onLayerRequest(request) {
+        request.cancel();
+        if (!request.value && request.reason === 'escape' && this.editing() !== null) {
+            this.cancelEditing();
+            return;
+        }
+        this.setOpen(request.value, request.reason, request.source);
+    }
+    setOpen(next, reason, source) {
+        if (next === this.isOpen())
+            return;
+        let cancelled = false;
+        const request = {
+            value: next,
+            previous: !next,
+            reason,
+            source,
+            get cancelled() {
+                return cancelled;
+            },
+            cancel() {
+                cancelled = true;
+            },
+        };
+        this.openChangeRequest.emit(request);
+        if (cancelled)
+            return;
+        this.open.set(next);
+        if (!next)
+            this.closeForms();
+    }
+    /** Asks for a new state. Not emitted when nothing would change; refused when cancelled. */
+    request(next, action, reason, source) {
+        const previous = this.resolvedState();
+        let cancelled = false;
+        const request = {
+            value: next,
+            previous,
+            reason,
+            action,
+            source,
+            get cancelled() {
+                return cancelled;
+            },
+            cancel() {
+                cancelled = true;
+            },
+        };
+        if (serializeSavedViews(next) === serializeSavedViews(previous))
+            return request;
+        this.stateChangeRequest.emit(request);
+        if (cancelled)
+            return null;
+        this.state.set(next);
+        return request;
+    }
+    closeForms() {
+        this.editing.set(null);
+        this.draft.set('');
+        this.error.set(null);
+    }
+    announce(text) {
+        getLiveAnnouncer(this.host.ownerDocument).announce(text);
+    }
+    focusAfterRender(target) {
+        afterNextRender(() => {
+            if (target.part === 'trigger') {
+                this.focus();
+                return;
+            }
+            const panel = this.host.ownerDocument.getElementById(this.panelId);
+            if (panel === null)
+                return;
+            const scope = target.id === null
+                ? panel
+                : ([...panel.querySelectorAll('[data-part="item"]')].find((item) => item.dataset['view'] === target.id) ?? null);
+            const selector = {
+                apply: '[data-part="apply"]',
+                actions: '[data-part="actions"]',
+                input: target.id === null ? ':scope > [data-part="form"] input' : 'input',
+                cancel: '[data-cancel]',
+                'save-as': '[data-save-as]',
+            }[target.part];
+            scope?.querySelector(selector)?.focus();
+        }, { injector: this.injector });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSavedViews, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlSavedViews, isStandalone: true, selector: "sl-saved-views", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: true, transformFunction: null }, builtIn: { classPropertyName: "builtIn", publicName: "builtIn", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, defaultState: { classPropertyName: "defaultState", publicName: "defaultState", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { state: "stateChange", open: "openChange", stateChangeRequest: "stateChangeRequest", openChangeRequest: "openChangeRequest", viewApply: "viewApply" }, host: { attributes: { "data-ui": "saved-views", "data-part": "root" }, properties: { "attr.role": "role", "attr.aria-label": "resolvedLabel()", "attr.data-modified": "modified() ? \"\" : null", "attr.data-open": "isOpen() ? \"\" : null" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], exportAs: ["slSavedViews"], ngImport: i0, template: `
+    <ng-container
+      slPopover
+      initialFocus="[aria-current='true']"
+      [open]="isOpen()"
+      (openChangeRequest)="onLayerRequest($event)"
+    >
+      <button
+        #trigger
+        slPopoverTrigger
+        type="button"
+        data-part="trigger"
+        [attr.title]="activeName()"
+      >
+        <span data-label>{{ activeName() }}</span>
+        @if (modified()) {
+          <span data-part="modified">{{ t('modified') }}</span>
+        }
+        <span slIcon size="md"><svg slGlyph name="chevron-down"></svg></span>
+      </button>
+
+      <ng-template slPopoverLayer>
+        <div slPopoverContent [attr.aria-label]="resolvedLabel()">
+          <!-- The family's identifier is on its own element rather than on
+               the popover's: slPopoverContent names its own part. -->
+          <div data-ui="saved-views" data-part="panel" [id]="panelId">
+            <ul data-part="list" role="list">
+              @for (row of rows(); track row.key) {
+                <li
+                  data-part="item"
+                  [attr.data-view]="row.key"
+                  [attr.data-current]="row.current ? '' : null"
+                  [attr.data-default]="row.isDefault ? '' : null"
+                  [attr.data-built-in]="row.view === null ? '' : null"
+                  [attr.data-editing]="editingKind(row) !== null ? '' : null"
+                >
+                  @switch (editingKind(row)) {
+                    @case ('rename') {
+                      <ng-container
+                        [ngTemplateOutlet]="nameForm"
+                        [ngTemplateOutletContext]="{ kind: 'rename', name: row.name }"
+                      />
+                    }
+                    @case ('delete') {
+                      <div
+                        data-part="confirm"
+                        role="group"
+                        [attr.aria-labelledby]="panelId + '-confirm-' + row.key"
+                      >
+                        <p [id]="panelId + '-confirm-' + row.key">
+                          {{ t('confirmDelete', { name: row.name }) }}
+                        </p>
+                        <div data-buttons>
+                          <button
+                            slButton
+                            data-cancel
+                            size="sm"
+                            tone="secondary"
+                            variant="ghost"
+                            (click)="cancelEditing()"
+                          >
+                            {{ t('cancel') }}
+                          </button>
+                          <button
+                            slButton
+                            size="sm"
+                            tone="danger"
+                            (click)="confirmDelete(row.key, $event)"
+                          >
+                            {{ t('delete') }}
+                          </button>
+                        </div>
+                      </div>
+                    }
+                    @default {
+                      <button
+                        data-part="apply"
+                        type="button"
+                        [attr.aria-current]="row.current ? 'true' : null"
+                        (click)="apply(row.id, pressReason($event), $event)"
+                      >
+                        @if (row.current) {
+                          <span slIcon size="sm"><svg slGlyph name="check"></svg></span>
+                        }
+                        <span data-label>{{ row.name }}</span>
+                        @if (row.isDefault) {
+                          <span data-part="default-mark"
+                            ><span slIcon size="sm"><svg slGlyph name="pin"></svg></span
+                            ><span>{{ t('isDefault') }}</span></span
+                          >
+                        }
+                      </button>
+                      <button
+                        type="button"
+                        data-part="actions"
+                        slSavedViewsPart="actions"
+                        [slMenuTriggerFor]="menu"
+                        [attr.aria-label]="t('actions', { name: row.name })"
+                      >
+                        <span slIcon size="md"><svg slGlyph name="ellipsis"></svg></span>
+                      </button>
+                      <sl-menu #menu>
+                        @if (row.view; as view) {
+                          <button slMenuItem (select)="startRename(view)">
+                            {{ t('rename') }}
+                          </button>
+                        }
+                        <button
+                          slMenuItem
+                          [disabled]="row.isDefault"
+                          (select)="setDefault(row.id, $event)"
+                        >
+                          {{ t('setDefault') }}
+                        </button>
+                        @if (row.view; as view) {
+                          <button slMenuItem tone="danger" (select)="startDelete(view)">
+                            {{ t('delete') }}
+                          </button>
+                        }
+                      </sl-menu>
+                    }
+                  }
+                </li>
+              }
+            </ul>
+            @if (editing()?.kind === 'create') {
+              <ng-container
+                [ngTemplateOutlet]="nameForm"
+                [ngTemplateOutletContext]="{ kind: 'create', name: '' }"
+              />
+            }
+            <div data-part="footer">
+              <button
+                slButton
+                data-save-as
+                size="sm"
+                tone="secondary"
+                variant="ghost"
+                (click)="startCreate()"
+              >
+                {{ t('saveAs') }}
+              </button>
+              <button slButton size="sm" [disabled]="!canSave()" (click)="save($event)">
+                {{ t('save') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </ng-template>
+    </ng-container>
+
+    @if (modified()) {
+      <button data-part="revert" type="button" (click)="revert($event)">
+        <!-- An arrow that turns back turns the other way in a right-to-left document. -->
+        <span slIcon size="sm" directional><svg slGlyph name="rotate-ccw"></svg></span>
+        {{ t('revert') }}
+      </button>
+    }
+
+    <ng-template #nameForm let-kind="kind" let-name="name">
+      <form
+        data-part="form"
+        novalidate
+        [attr.aria-label]="kind === 'create' ? t('saveAs') : t('renameView', { name: name })"
+        (submit)="submit($event)"
+      >
+        <div slField size="sm" [invalid]="error() !== null">
+          <label slFieldLabel>{{ t('name') }}</label>
+          <div slTextField size="sm">
+            <input
+              slTextFieldInput
+              autocomplete="off"
+              [value]="draft()"
+              (valueChange)="onDraft($event.value)"
+            />
+          </div>
+          @if (error(); as reason) {
+            <span slFieldError>{{ reason === 'empty' ? t('empty') : t('duplicate') }}</span>
+          }
+        </div>
+        <div data-buttons>
+          <button
+            slButton
+            data-cancel
+            size="sm"
+            tone="secondary"
+            variant="ghost"
+            (click)="cancelEditing()"
+          >
+            {{ t('cancel') }}
+          </button>
+          <button slButton type="submit" size="sm">
+            {{ kind === 'create' ? t('create') : t('rename') }}
+          </button>
+        </div>
+      </form>
+    </ng-template>
+  `, isInline: true, styles: ["@layer slotted.components{[data-ui=saved-views]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_height: var(--slotted-control-height-md, 34px);--_height-sm: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_icon-size-sm: var(--slotted-control-icon-size-sm, 14px);--_radius: var(--slotted-control-radius, 4px);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);box-sizing:border-box;color:var(--_text);font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);line-height:var(--slotted-line-height-md, 1.5)}[data-ui=saved-views][data-part=root]{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--slotted-space-3, .375rem);min-inline-size:0;max-inline-size:100%}[data-ui=saved-views]>[data-part=trigger]{display:inline-flex;align-items:center;gap:var(--_gap);box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--_height);margin:0;padding-block:0;padding-inline:var(--_padding-inline);border:var(--slotted-control-border-width, 1px) solid var(--slotted-control-border-color, ButtonBorder);border-radius:var(--_radius);background:var(--slotted-control-surface, Canvas);box-shadow:var(--slotted-control-shadow, none);color:var(--_text);font:inherit;font-weight:var(--slotted-font-weight-medium, 500);cursor:pointer;transition:background-color var(--_duration) var(--_easing)}[data-ui=saved-views]>[data-part=trigger]>[data-label]{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=saved-views]>[data-part=trigger]>[data-ui=icon]{margin-inline-end:calc(var(--slotted-space-2, .25rem) * -1);color:var(--_muted);transition:rotate var(--_duration) var(--_easing)}[data-ui=saved-views][data-open]>[data-part=trigger]>[data-ui=icon]{rotate:180deg}[data-ui=saved-views]>[data-part=trigger]:hover:not(:disabled){background:var(--_hover)}[data-ui=saved-views]>[data-part=trigger]:active:not(:disabled){background:var(--_active);transition-duration:var(--slotted-duration-instant)}[data-ui=saved-views]>[data-part=trigger]>[data-part=modified]{display:inline-flex;flex:none;align-items:center;gap:var(--slotted-space-2, .25rem);color:var(--_muted);font-size:inherit;font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=saved-views]>[data-part=trigger]>[data-part=modified]:before{content:\"\";flex:none;inline-size:var(--slotted-space-4, .5rem);block-size:var(--slotted-space-4, .5rem);border-radius:var(--slotted-radius-full, 9999px);background-color:var(--slotted-tone-accent-solid)}[data-ui=saved-views]>[data-part=revert]{display:inline-flex;align-items:center;gap:var(--slotted-space-3, .375rem);box-sizing:border-box;min-block-size:var(--_height);margin:0;padding-block:0;padding-inline:var(--slotted-space-4, .5rem);border:var(--slotted-control-border-width, 1px) solid transparent;border-radius:var(--_radius);background:transparent;color:var(--slotted-tone-accent-text, LinkText);font:inherit;font-weight:var(--slotted-font-weight-medium, 500);cursor:pointer;transition:background-color var(--_duration) var(--_easing)}[data-ui=saved-views]>[data-part=revert]:hover:not(:disabled){background:var(--slotted-tone-accent-subtle-hover, ButtonFace)}[data-ui=saved-views]>[data-part=revert]:active:not(:disabled){background:var(--slotted-tone-accent-subtle-active, ButtonFace);transition-duration:var(--slotted-duration-instant)}[data-ui=saved-views]>[data-part=trigger]:focus-visible,[data-ui=saved-views]>[data-part=revert]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=saved-views][data-part=panel]{display:grid;grid-template-columns:minmax(0,var(--slotted-saved-views-panel-inline-size, 18rem));gap:var(--slotted-space-4, .5rem);max-inline-size:100%;padding:var(--slotted-space-2, .25rem)}[data-ui=saved-views][data-part=panel]>[data-part=list]{display:grid;gap:var(--slotted-space-1, .125rem);margin:0;padding:0;list-style:none}[data-ui=saved-views][data-part=panel]>[data-part=list]>[data-part=item]{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--slotted-space-1, .125rem);margin:0}[data-ui=saved-views][data-part=panel]>[data-part=list]>[data-part=item][data-editing]{grid-template-columns:minmax(0,1fr)}[data-ui=saved-views][data-part=panel] [data-part=apply]{display:grid;grid-template-columns:var(--_icon-size-sm) minmax(0,max-content) auto;justify-content:start;align-content:center;align-items:baseline;column-gap:var(--slotted-space-4, .5rem);box-sizing:border-box;inline-size:100%;min-block-size:var(--_height-sm);margin:0;padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--slotted-space-4, .5rem);border:0;border-radius:var(--_radius);background:transparent;color:var(--_text);font:inherit;text-align:start;cursor:pointer;transition:background-color var(--_duration) var(--_easing)}[data-ui=saved-views][data-part=panel] [data-part=apply]>[data-ui=icon]{color:var(--slotted-tone-accent-text);translate:0 calc(var(--_icon-size-sm) / 2 - (1cap + 1ex) / 4)}[data-ui=saved-views][data-part=panel] [data-part=item][data-current]>[data-part=apply]{font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=saved-views][data-part=panel] [data-part=apply]>[data-label]{grid-column:2;min-inline-size:0;overflow-wrap:anywhere}[data-ui=saved-views][data-part=panel] [data-part=apply]:hover:not(:disabled),[data-ui=saved-views][data-part=panel] [data-part=actions]:hover:not(:disabled){background:var(--_hover)}[data-ui=saved-views][data-part=panel] [data-part=apply]:active:not(:disabled),[data-ui=saved-views][data-part=panel] [data-part=actions]:active:not(:disabled){background:var(--_active);transition-duration:var(--slotted-duration-instant)}[data-ui=saved-views][data-part=panel] [data-part=apply]>[data-part=default-mark]{display:flex;position:relative;inline-size:var(--_icon-size-sm);block-size:var(--_icon-size-sm);margin-inline-start:calc(var(--slotted-space-2, .25rem) - var(--slotted-space-4, .5rem));translate:0 calc(var(--_icon-size-sm) / 2 - (1cap + 1ex) / 4);color:var(--_muted)}[data-ui=saved-views][data-part=panel] [data-part=default-mark]>span:not([data-ui=icon]){position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}[data-ui=saved-views][data-part=panel] [data-part=actions]{display:inline-grid;place-items:center;box-sizing:border-box;inline-size:var(--_height-sm);block-size:var(--_height-sm);margin:0;padding:0;border:0;border-radius:var(--_radius);background:transparent;color:var(--_muted);cursor:pointer;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=saved-views][data-part=panel] [data-part=actions][data-open],[data-ui=saved-views][data-part=panel] [data-part=actions]:hover:not(:disabled){color:var(--_text)}[data-ui=saved-views][data-part=panel] [data-part=apply]:focus-visible,[data-ui=saved-views][data-part=panel] [data-part=actions]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=saved-views][data-part=panel] [data-part=form],[data-ui=saved-views][data-part=panel] [data-part=confirm]{display:grid;gap:var(--slotted-space-4, .5rem);margin:0;padding:var(--slotted-space-4, .5rem);border-radius:var(--_radius);background:var(--slotted-surface-sunken, Canvas)}[data-ui=saved-views][data-part=panel] [data-part=confirm]>p{margin:0;overflow-wrap:anywhere}[data-ui=saved-views][data-part=panel] :is([data-part=form],[data-part=confirm])>[data-buttons]{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--slotted-space-3, .375rem)}[data-ui=saved-views][data-part=panel]>[data-part=footer]{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--slotted-space-3, .375rem);padding-block-start:var(--slotted-space-4, .5rem);border-block-start:var(--slotted-border-width-thin, 1px) solid var(--slotted-border-subtle, transparent)}@media(forced-colors:active){[data-ui=saved-views]>[data-part=trigger]>[data-part=modified]:before{forced-color-adjust:none}}}\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: SlField, selector: "[slField]", inputs: ["size", "labelPlacement", "necessity", "messages", "disabled", "invalid", "required", "readOnly"], exportAs: ["slField"] }, { kind: "directive", type: SlFieldError, selector: "[slFieldError]", exportAs: ["slFieldError"] }, { kind: "component", type: SlFieldLabel, selector: "label[slFieldLabel]", exportAs: ["slFieldLabel"] }, { 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: "directive", type: SlPopoverTrigger, selector: "[slPopoverTrigger]", exportAs: ["slPopoverTrigger"] }, { kind: "directive", type: SlSavedViewsPart, selector: "[slSavedViewsPart]", inputs: ["slSavedViewsPart"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlSavedViews, decorators: [{
+            type: Component,
+            args: [{ selector: 'sl-saved-views', standalone: true, exportAs: 'slSavedViews', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        NgTemplateOutlet,
+                        SlButton,
+                        SlField,
+                        SlFieldError,
+                        SlFieldLabel,
+                        SlGlyph,
+                        SlIcon,
+                        SlMenu,
+                        SlMenuItem,
+                        SlMenuTrigger,
+                        SlPopover,
+                        SlPopoverContent,
+                        SlPopoverLayer,
+                        SlPopoverTrigger,
+                        SlSavedViewsPart,
+                        SlTextField,
+                        SlTextFieldInput,
+                    ], host: {
+                        'data-ui': 'saved-views',
+                        'data-part': 'root',
+                        '[attr.role]': 'role',
+                        '[attr.aria-label]': 'resolvedLabel()',
+                        '[attr.data-modified]': 'modified() ? "" : null',
+                        '[attr.data-open]': 'isOpen() ? "" : null',
+                    }, template: `
+    <ng-container
+      slPopover
+      initialFocus="[aria-current='true']"
+      [open]="isOpen()"
+      (openChangeRequest)="onLayerRequest($event)"
+    >
+      <button
+        #trigger
+        slPopoverTrigger
+        type="button"
+        data-part="trigger"
+        [attr.title]="activeName()"
+      >
+        <span data-label>{{ activeName() }}</span>
+        @if (modified()) {
+          <span data-part="modified">{{ t('modified') }}</span>
+        }
+        <span slIcon size="md"><svg slGlyph name="chevron-down"></svg></span>
+      </button>
+
+      <ng-template slPopoverLayer>
+        <div slPopoverContent [attr.aria-label]="resolvedLabel()">
+          <!-- The family's identifier is on its own element rather than on
+               the popover's: slPopoverContent names its own part. -->
+          <div data-ui="saved-views" data-part="panel" [id]="panelId">
+            <ul data-part="list" role="list">
+              @for (row of rows(); track row.key) {
+                <li
+                  data-part="item"
+                  [attr.data-view]="row.key"
+                  [attr.data-current]="row.current ? '' : null"
+                  [attr.data-default]="row.isDefault ? '' : null"
+                  [attr.data-built-in]="row.view === null ? '' : null"
+                  [attr.data-editing]="editingKind(row) !== null ? '' : null"
+                >
+                  @switch (editingKind(row)) {
+                    @case ('rename') {
+                      <ng-container
+                        [ngTemplateOutlet]="nameForm"
+                        [ngTemplateOutletContext]="{ kind: 'rename', name: row.name }"
+                      />
+                    }
+                    @case ('delete') {
+                      <div
+                        data-part="confirm"
+                        role="group"
+                        [attr.aria-labelledby]="panelId + '-confirm-' + row.key"
+                      >
+                        <p [id]="panelId + '-confirm-' + row.key">
+                          {{ t('confirmDelete', { name: row.name }) }}
+                        </p>
+                        <div data-buttons>
+                          <button
+                            slButton
+                            data-cancel
+                            size="sm"
+                            tone="secondary"
+                            variant="ghost"
+                            (click)="cancelEditing()"
+                          >
+                            {{ t('cancel') }}
+                          </button>
+                          <button
+                            slButton
+                            size="sm"
+                            tone="danger"
+                            (click)="confirmDelete(row.key, $event)"
+                          >
+                            {{ t('delete') }}
+                          </button>
+                        </div>
+                      </div>
+                    }
+                    @default {
+                      <button
+                        data-part="apply"
+                        type="button"
+                        [attr.aria-current]="row.current ? 'true' : null"
+                        (click)="apply(row.id, pressReason($event), $event)"
+                      >
+                        @if (row.current) {
+                          <span slIcon size="sm"><svg slGlyph name="check"></svg></span>
+                        }
+                        <span data-label>{{ row.name }}</span>
+                        @if (row.isDefault) {
+                          <span data-part="default-mark"
+                            ><span slIcon size="sm"><svg slGlyph name="pin"></svg></span
+                            ><span>{{ t('isDefault') }}</span></span
+                          >
+                        }
+                      </button>
+                      <button
+                        type="button"
+                        data-part="actions"
+                        slSavedViewsPart="actions"
+                        [slMenuTriggerFor]="menu"
+                        [attr.aria-label]="t('actions', { name: row.name })"
+                      >
+                        <span slIcon size="md"><svg slGlyph name="ellipsis"></svg></span>
+                      </button>
+                      <sl-menu #menu>
+                        @if (row.view; as view) {
+                          <button slMenuItem (select)="startRename(view)">
+                            {{ t('rename') }}
+                          </button>
+                        }
+                        <button
+                          slMenuItem
+                          [disabled]="row.isDefault"
+                          (select)="setDefault(row.id, $event)"
+                        >
+                          {{ t('setDefault') }}
+                        </button>
+                        @if (row.view; as view) {
+                          <button slMenuItem tone="danger" (select)="startDelete(view)">
+                            {{ t('delete') }}
+                          </button>
+                        }
+                      </sl-menu>
+                    }
+                  }
+                </li>
+              }
+            </ul>
+            @if (editing()?.kind === 'create') {
+              <ng-container
+                [ngTemplateOutlet]="nameForm"
+                [ngTemplateOutletContext]="{ kind: 'create', name: '' }"
+              />
+            }
+            <div data-part="footer">
+              <button
+                slButton
+                data-save-as
+                size="sm"
+                tone="secondary"
+                variant="ghost"
+                (click)="startCreate()"
+              >
+                {{ t('saveAs') }}
+              </button>
+              <button slButton size="sm" [disabled]="!canSave()" (click)="save($event)">
+                {{ t('save') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </ng-template>
+    </ng-container>
+
+    @if (modified()) {
+      <button data-part="revert" type="button" (click)="revert($event)">
+        <!-- An arrow that turns back turns the other way in a right-to-left document. -->
+        <span slIcon size="sm" directional><svg slGlyph name="rotate-ccw"></svg></span>
+        {{ t('revert') }}
+      </button>
+    }
+
+    <ng-template #nameForm let-kind="kind" let-name="name">
+      <form
+        data-part="form"
+        novalidate
+        [attr.aria-label]="kind === 'create' ? t('saveAs') : t('renameView', { name: name })"
+        (submit)="submit($event)"
+      >
+        <div slField size="sm" [invalid]="error() !== null">
+          <label slFieldLabel>{{ t('name') }}</label>
+          <div slTextField size="sm">
+            <input
+              slTextFieldInput
+              autocomplete="off"
+              [value]="draft()"
+              (valueChange)="onDraft($event.value)"
+            />
+          </div>
+          @if (error(); as reason) {
+            <span slFieldError>{{ reason === 'empty' ? t('empty') : t('duplicate') }}</span>
+          }
+        </div>
+        <div data-buttons>
+          <button
+            slButton
+            data-cancel
+            size="sm"
+            tone="secondary"
+            variant="ghost"
+            (click)="cancelEditing()"
+          >
+            {{ t('cancel') }}
+          </button>
+          <button slButton type="submit" size="sm">
+            {{ kind === 'create' ? t('create') : t('rename') }}
+          </button>
+        </div>
+      </form>
+    </ng-template>
+  `, styles: ["@layer slotted.components{[data-ui=saved-views]{--_text: var(--slotted-text, CanvasText);--_muted: var(--slotted-text-muted, GrayText);--_hover: var(--slotted-tone-secondary-subtle-hover, ButtonFace);--_active: var(--slotted-tone-secondary-subtle-active, ButtonFace);--_height: var(--slotted-control-height-md, 34px);--_height-sm: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_gap: var(--slotted-control-gap-md, 8px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_icon-size-sm: var(--slotted-control-icon-size-sm, 14px);--_radius: var(--slotted-control-radius, 4px);--_duration: var(--slotted-control-transition-duration);--_easing: var(--slotted-control-transition-easing);box-sizing:border-box;color:var(--_text);font-family:var(--slotted-font-family-sans, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);line-height:var(--slotted-line-height-md, 1.5)}[data-ui=saved-views][data-part=root]{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--slotted-space-3, .375rem);min-inline-size:0;max-inline-size:100%}[data-ui=saved-views]>[data-part=trigger]{display:inline-flex;align-items:center;gap:var(--_gap);box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--_height);margin:0;padding-block:0;padding-inline:var(--_padding-inline);border:var(--slotted-control-border-width, 1px) solid var(--slotted-control-border-color, ButtonBorder);border-radius:var(--_radius);background:var(--slotted-control-surface, Canvas);box-shadow:var(--slotted-control-shadow, none);color:var(--_text);font:inherit;font-weight:var(--slotted-font-weight-medium, 500);cursor:pointer;transition:background-color var(--_duration) var(--_easing)}[data-ui=saved-views]>[data-part=trigger]>[data-label]{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=saved-views]>[data-part=trigger]>[data-ui=icon]{margin-inline-end:calc(var(--slotted-space-2, .25rem) * -1);color:var(--_muted);transition:rotate var(--_duration) var(--_easing)}[data-ui=saved-views][data-open]>[data-part=trigger]>[data-ui=icon]{rotate:180deg}[data-ui=saved-views]>[data-part=trigger]:hover:not(:disabled){background:var(--_hover)}[data-ui=saved-views]>[data-part=trigger]:active:not(:disabled){background:var(--_active);transition-duration:var(--slotted-duration-instant)}[data-ui=saved-views]>[data-part=trigger]>[data-part=modified]{display:inline-flex;flex:none;align-items:center;gap:var(--slotted-space-2, .25rem);color:var(--_muted);font-size:inherit;font-weight:var(--slotted-font-weight-regular, 400)}[data-ui=saved-views]>[data-part=trigger]>[data-part=modified]:before{content:\"\";flex:none;inline-size:var(--slotted-space-4, .5rem);block-size:var(--slotted-space-4, .5rem);border-radius:var(--slotted-radius-full, 9999px);background-color:var(--slotted-tone-accent-solid)}[data-ui=saved-views]>[data-part=revert]{display:inline-flex;align-items:center;gap:var(--slotted-space-3, .375rem);box-sizing:border-box;min-block-size:var(--_height);margin:0;padding-block:0;padding-inline:var(--slotted-space-4, .5rem);border:var(--slotted-control-border-width, 1px) solid transparent;border-radius:var(--_radius);background:transparent;color:var(--slotted-tone-accent-text, LinkText);font:inherit;font-weight:var(--slotted-font-weight-medium, 500);cursor:pointer;transition:background-color var(--_duration) var(--_easing)}[data-ui=saved-views]>[data-part=revert]:hover:not(:disabled){background:var(--slotted-tone-accent-subtle-hover, ButtonFace)}[data-ui=saved-views]>[data-part=revert]:active:not(:disabled){background:var(--slotted-tone-accent-subtle-active, ButtonFace);transition-duration:var(--slotted-duration-instant)}[data-ui=saved-views]>[data-part=trigger]:focus-visible,[data-ui=saved-views]>[data-part=revert]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=saved-views][data-part=panel]{display:grid;grid-template-columns:minmax(0,var(--slotted-saved-views-panel-inline-size, 18rem));gap:var(--slotted-space-4, .5rem);max-inline-size:100%;padding:var(--slotted-space-2, .25rem)}[data-ui=saved-views][data-part=panel]>[data-part=list]{display:grid;gap:var(--slotted-space-1, .125rem);margin:0;padding:0;list-style:none}[data-ui=saved-views][data-part=panel]>[data-part=list]>[data-part=item]{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--slotted-space-1, .125rem);margin:0}[data-ui=saved-views][data-part=panel]>[data-part=list]>[data-part=item][data-editing]{grid-template-columns:minmax(0,1fr)}[data-ui=saved-views][data-part=panel] [data-part=apply]{display:grid;grid-template-columns:var(--_icon-size-sm) minmax(0,max-content) auto;justify-content:start;align-content:center;align-items:baseline;column-gap:var(--slotted-space-4, .5rem);box-sizing:border-box;inline-size:100%;min-block-size:var(--_height-sm);margin:0;padding-block:var(--slotted-space-2, .25rem);padding-inline:var(--slotted-space-4, .5rem);border:0;border-radius:var(--_radius);background:transparent;color:var(--_text);font:inherit;text-align:start;cursor:pointer;transition:background-color var(--_duration) var(--_easing)}[data-ui=saved-views][data-part=panel] [data-part=apply]>[data-ui=icon]{color:var(--slotted-tone-accent-text);translate:0 calc(var(--_icon-size-sm) / 2 - (1cap + 1ex) / 4)}[data-ui=saved-views][data-part=panel] [data-part=item][data-current]>[data-part=apply]{font-weight:var(--slotted-font-weight-medium, 500)}[data-ui=saved-views][data-part=panel] [data-part=apply]>[data-label]{grid-column:2;min-inline-size:0;overflow-wrap:anywhere}[data-ui=saved-views][data-part=panel] [data-part=apply]:hover:not(:disabled),[data-ui=saved-views][data-part=panel] [data-part=actions]:hover:not(:disabled){background:var(--_hover)}[data-ui=saved-views][data-part=panel] [data-part=apply]:active:not(:disabled),[data-ui=saved-views][data-part=panel] [data-part=actions]:active:not(:disabled){background:var(--_active);transition-duration:var(--slotted-duration-instant)}[data-ui=saved-views][data-part=panel] [data-part=apply]>[data-part=default-mark]{display:flex;position:relative;inline-size:var(--_icon-size-sm);block-size:var(--_icon-size-sm);margin-inline-start:calc(var(--slotted-space-2, .25rem) - var(--slotted-space-4, .5rem));translate:0 calc(var(--_icon-size-sm) / 2 - (1cap + 1ex) / 4);color:var(--_muted)}[data-ui=saved-views][data-part=panel] [data-part=default-mark]>span:not([data-ui=icon]){position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}[data-ui=saved-views][data-part=panel] [data-part=actions]{display:inline-grid;place-items:center;box-sizing:border-box;inline-size:var(--_height-sm);block-size:var(--_height-sm);margin:0;padding:0;border:0;border-radius:var(--_radius);background:transparent;color:var(--_muted);cursor:pointer;transition:background-color var(--_duration) var(--_easing),color var(--_duration) var(--_easing)}[data-ui=saved-views][data-part=panel] [data-part=actions][data-open],[data-ui=saved-views][data-part=panel] [data-part=actions]:hover:not(:disabled){color:var(--_text)}[data-ui=saved-views][data-part=panel] [data-part=apply]:focus-visible,[data-ui=saved-views][data-part=panel] [data-part=actions]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:calc(var(--slotted-focus-ring-offset, 2px) * -1)}[data-ui=saved-views][data-part=panel] [data-part=form],[data-ui=saved-views][data-part=panel] [data-part=confirm]{display:grid;gap:var(--slotted-space-4, .5rem);margin:0;padding:var(--slotted-space-4, .5rem);border-radius:var(--_radius);background:var(--slotted-surface-sunken, Canvas)}[data-ui=saved-views][data-part=panel] [data-part=confirm]>p{margin:0;overflow-wrap:anywhere}[data-ui=saved-views][data-part=panel] :is([data-part=form],[data-part=confirm])>[data-buttons]{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--slotted-space-3, .375rem)}[data-ui=saved-views][data-part=panel]>[data-part=footer]{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--slotted-space-3, .375rem);padding-block-start:var(--slotted-space-4, .5rem);border-block-start:var(--slotted-border-width-thin, 1px) solid var(--slotted-border-subtle, transparent)}@media(forced-colors:active){[data-ui=saved-views]>[data-part=trigger]>[data-part=modified]:before{forced-color-adjust:none}}}\n"] }]
+        }], propDecorators: { current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: true }] }], builtIn: [{ type: i0.Input, args: [{ isSignal: true, alias: "builtIn", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }, { type: i0.Output, args: ["stateChange"] }], defaultState: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultState", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }], stateChangeRequest: [{ type: i0.Output, args: ["stateChangeRequest"] }], openChangeRequest: [{ type: i0.Output, args: ["openChangeRequest"] }], viewApply: [{ type: i0.Output, args: ["viewApply"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }] } });
+
+function defaultStorage() {
+    try {
+        return typeof window === 'undefined' ? null : window.localStorage;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * A reader's saved views, kept across visits: read once from the store with
+ * `parseSavedViews` — which is total, so a malformed entry is no views — and
+ * written with `serializeSavedViews` after every change. A store that holds
+ * no view in use and a default opens the visit on the default. The store is
+ * reached inside `try` both ways, as `persistedGridView` reaches it.
+ */
+function persistedSavedViews({ key, storage, columns, injector, }) {
+    const store = storage === undefined ? defaultStorage() : storage;
+    let text;
+    try {
+        text = store?.getItem(key) ?? null;
+    }
+    catch {
+        text = null;
+    }
+    let initial = parseSavedViews(text);
+    let openedDefault = null;
+    if (initial.activeId === null && initial.defaultId !== null) {
+        const opened = initial.views.find((view) => view.id === initial.defaultId);
+        initial = withActiveView(initial, initial.defaultId);
+        openedDefault = opened ? parseGridView(opened.view, columns) : null;
+    }
+    const state = signal(initial, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /* The first run is the read; every run after is a change to write. */
+    let settled = false;
+    effect(() => {
+        const current = state();
+        if (!settled) {
+            settled = true;
+            return;
+        }
+        untracked(() => {
+            if (!store)
+                return;
+            try {
+                store.setItem(key, serializeSavedViews(current));
+            }
+            catch {
+                /* The store refused; the views stay in memory. */
+            }
+        });
+    }, injector ? { injector } : undefined);
+    return { state, openedDefault };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlSavedViews, SlSavedViewsIdFactory, SlSavedViewsPart, newSavedViewId, persistedSavedViews };
+//# sourceMappingURL=slotted-angular-saved-views.mjs.map