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

package/fesm2022/slotted-angular-list.mjs

@@ -0,0 +1,256 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, input, booleanAttribute, HostAttributeToken, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, Directive } from '@angular/core';
+
+const FALLBACK = { inset: false, marker: 'none', size: 'md', variant: 'plain' };
+const LIST_DEFAULTS = new InjectionToken('slotted list defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its lists are told apart and how much room a
+ * row gets, rather than repeating four inputs on every list. A list that states
+ * any of them itself still wins: an explicit input is never overridden by the
+ * token.
+ */
+function provideListDefaults(defaults) {
+    return {
+        provide: LIST_DEFAULTS,
+        useFactory: () => ({
+            inset: defaults.inset ?? FALLBACK.inset,
+            marker: defaults.marker ?? FALLBACK.marker,
+            size: defaults.size ?? FALLBACK.size,
+            variant: defaults.variant ?? FALLBACK.variant,
+        }),
+    };
+}
+/** What a list renders as here, before it states anything of its own. */
+function injectListDefaults() {
+    return inject(LIST_DEFAULTS);
+}
+/**
+ * A group's heading names its own nested list, so the heading needs an id and
+ * the id has to be the same string on the server and in the browser. A counter
+ * held by the injector produces one; `Math.random` would not match for
+ * hydration.
+ */
+class SlListIdFactory {
+    count = 0;
+    next() {
+        this.count += 1;
+        return `slotted-list-${this.count}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListIdFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListIdFactory, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListIdFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * A vertical run of related rows. The rows are `slListItem`, a family of its
+ * own; this one decides how they are told apart, how much room each gets, what
+ * is painted in the marker column and whether they keep their inline padding,
+ * and hands those four down through the injector.
+ *
+ * The directive goes on the element the page wrote — `<ul slList>` or
+ * `<ol slList>` — because the element carries the reading order and that is the
+ * page's decision, not the family's.
+ *
+ * **`role="list"` is written, and it is not redundant.** The family draws its
+ * own marker, because a row is a content box beside its independent targets and
+ * CSS has no `display` that is both `list-item` and a grid. Safari and
+ * VoiceOver drop list semantics the moment CSS removes the marker, so the role
+ * restores what the layout costs. A `role` the consumer wrote themselves — a
+ * `menu`, a `listbox` they are wiring — survives.
+ *
+ * The set holds no state a consumer can own. Selection with roving focus is
+ * `listbox`'s and `table`'s: ARIA 1.2 does not allow `aria-selected` on
+ * `listitem`, so a selection model here would announce nothing.
+ */
+class SlList {
+    /** How the rows are told apart. Falls back to the injected default. */
+    variant = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** The room a row gets. Falls back to the injected default. */
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    /** What is painted in the marker column. Falls back to the injected default. */
+    marker = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "marker" }] : /* istanbul ignore next */ []));
+    /**
+     * Takes the rows' inline padding away, for a list inside a box that already
+     * pads its own content. The rule and the fill still run edge to edge.
+     */
+    inset = input(undefined, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: (state) => (state === undefined ? undefined : booleanAttribute(state)) });
+    /**
+     * `aria-busy` on the set, which ARIA 1.2 §5.2.6 asks of a container whose
+     * rows have not arrived. The family draws no placeholder: `skeleton` owns
+     * that geometry and goes inside the rows.
+     */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    defaults = injectListDefaults();
+    /** A role the consumer wrote is never replaced by the family's. */
+    writtenRole = inject(new HostAttributeToken('role'), { optional: true });
+    role = computed(() => this.writtenRole ?? 'list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    /* Public, because a row reads them: the set is what a row asks when it has
+       not been told itself. `role` stays protected — it is the host's alone. */
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedMarker = computed(() => this.marker() ?? this.defaults.marker, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMarker" }] : /* istanbul ignore next */ []));
+    /**
+     * Read by every row under this set, and by the row's own input first. The
+     * input stays `undefined` until it is written, so a list that states
+     * `inset="false"` under a provider that states `true` keeps its own answer —
+     * `booleanAttribute` alone would fold the two together.
+     */
+    resolvedInset = computed(() => (this.inset() ?? this.defaults.inset) === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedInset" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlList, isStandalone: true, selector: "ul[slList], ol[slList]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, marker: { classPropertyName: "marker", publicName: "marker", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "list", "data-part": "root" }, properties: { "attr.role": "role()", "attr.data-variant": "resolvedVariant()", "attr.data-size": "resolvedSize()", "attr.data-marker": "resolvedMarker()", "attr.data-inset": "resolvedInset() ? '' : null", "attr.data-loading": "loading() ? '' : null", "attr.aria-busy": "loading() ? 'true' : null" } }, exportAs: ["slList"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@layer slotted.components{[data-ui=list][data-part=root],[data-ui=list] [data-part=section-list]{counter-reset:slotted-list-item;display:flex;flex-direction:column;list-style:none;margin-block:0;margin-inline:0;min-inline-size:0;padding-inline:0}[data-ui=list][data-part=root]{--_gap: var(--slotted-list-gap, var(--slotted-space-3, .375rem));--_frame-color: var(--slotted-list-border-color, var(--slotted-border-subtle, ButtonBorder));--_frame-width: var(--slotted-list-border-width, var(--slotted-border-width-thin, 1px));--_frame-radius: var(--slotted-list-radius, var(--slotted-radius-md, 6px));--_surface: var(--slotted-list-background, var(--slotted-surface, Canvas));--_section-color: var(--slotted-list-section-color, var(--slotted-text-muted, GrayText));--_section-font-size: var( --slotted-list-section-font-size, var(--slotted-font-size-xs, .75rem) );--_section-weight: var( --slotted-list-section-font-weight, var(--slotted-font-weight-semibold, 600) );--_section-inset-block: var( --slotted-list-section-padding-block, var(--slotted-space-4, .5rem) );--_row-inset-inline: var( --slotted-list-padding-inline, var(--slotted-control-padding-inline-md, 13px) );--_empty-color: var(--slotted-list-empty-color, var(--slotted-text-muted, GrayText));--_empty-inset: var(--slotted-list-empty-padding, var(--slotted-space-8, 1.5rem))}[data-ui=list][data-part=root][data-size=sm]{--_gap: var(--slotted-list-gap-sm, var(--slotted-space-2, .25rem));--_section-inset-block: var( --slotted-list-section-padding-block-sm, var(--slotted-space-3, .375rem) );--_row-inset-inline: var( --slotted-list-padding-inline-sm, var(--slotted-control-padding-inline-sm, 10px) );--_empty-inset: var(--slotted-list-empty-padding-sm, var(--slotted-space-6, 1rem))}[data-ui=list][data-part=root][data-size=lg]{--_gap: var(--slotted-list-gap-lg, var(--slotted-space-4, .5rem));--_section-inset-block: var( --slotted-list-section-padding-block-lg, var(--slotted-space-5, .75rem) );--_row-inset-inline: var( --slotted-list-padding-inline-lg, var(--slotted-control-padding-inline-lg, 16px) );--_empty-inset: var(--slotted-list-empty-padding-lg, var(--slotted-space-9, 2rem))}[data-ui=list][data-part=root][data-variant=framed]{background-color:var(--_surface);border:var(--_frame-width) solid var(--_frame-color);border-radius:var(--_frame-radius);overflow:clip}[data-ui=list][data-part=root][data-variant=separated]{row-gap:var(--_gap)}[data-ui=list] [data-part=section]{display:flex;flex-direction:column;min-inline-size:0}[data-ui=list][data-variant=separated] [data-part=section],[data-ui=list][data-variant=separated] [data-part=section-list]{row-gap:var(--_gap)}[data-ui=list] [data-part=section-label]{color:var(--_section-color);font-size:var(--_section-font-size);font-weight:var(--_section-weight);letter-spacing:var(--slotted-list-section-letter-spacing, 0);line-height:var(--slotted-line-height-sm, 1.45);margin-block:0;min-inline-size:0;padding-block:var(--_section-inset-block);padding-inline:var(--_row-inset-inline)}[data-ui=list][data-inset] [data-part=section-label],[data-ui=list][data-inset] [data-part=empty]{padding-inline:0}[data-ui=list] [data-part=section-label][data-sticky]{background-color:var(--_surface);inset-block-start:0;position:sticky;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=list] [data-part=empty]{align-items:center;color:var(--_empty-color);display:flex;flex-direction:column;justify-content:center;min-inline-size:0;padding-block:var(--_empty-inset);padding-inline:var(--_row-inset-inline);text-align:center}[data-ui=list][data-part=root][data-loading]{cursor:progress}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlList, decorators: [{
+            type: Component,
+            args: [{ selector: 'ul[slList], ol[slList]', standalone: true, exportAs: 'slList', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'list',
+                        'data-part': 'root',
+                        '[attr.role]': 'role()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-marker]': 'resolvedMarker()',
+                        '[attr.data-inset]': "resolvedInset() ? '' : null",
+                        '[attr.data-loading]': "loading() ? '' : null",
+                        '[attr.aria-busy]': "loading() ? 'true' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=list][data-part=root],[data-ui=list] [data-part=section-list]{counter-reset:slotted-list-item;display:flex;flex-direction:column;list-style:none;margin-block:0;margin-inline:0;min-inline-size:0;padding-inline:0}[data-ui=list][data-part=root]{--_gap: var(--slotted-list-gap, var(--slotted-space-3, .375rem));--_frame-color: var(--slotted-list-border-color, var(--slotted-border-subtle, ButtonBorder));--_frame-width: var(--slotted-list-border-width, var(--slotted-border-width-thin, 1px));--_frame-radius: var(--slotted-list-radius, var(--slotted-radius-md, 6px));--_surface: var(--slotted-list-background, var(--slotted-surface, Canvas));--_section-color: var(--slotted-list-section-color, var(--slotted-text-muted, GrayText));--_section-font-size: var( --slotted-list-section-font-size, var(--slotted-font-size-xs, .75rem) );--_section-weight: var( --slotted-list-section-font-weight, var(--slotted-font-weight-semibold, 600) );--_section-inset-block: var( --slotted-list-section-padding-block, var(--slotted-space-4, .5rem) );--_row-inset-inline: var( --slotted-list-padding-inline, var(--slotted-control-padding-inline-md, 13px) );--_empty-color: var(--slotted-list-empty-color, var(--slotted-text-muted, GrayText));--_empty-inset: var(--slotted-list-empty-padding, var(--slotted-space-8, 1.5rem))}[data-ui=list][data-part=root][data-size=sm]{--_gap: var(--slotted-list-gap-sm, var(--slotted-space-2, .25rem));--_section-inset-block: var( --slotted-list-section-padding-block-sm, var(--slotted-space-3, .375rem) );--_row-inset-inline: var( --slotted-list-padding-inline-sm, var(--slotted-control-padding-inline-sm, 10px) );--_empty-inset: var(--slotted-list-empty-padding-sm, var(--slotted-space-6, 1rem))}[data-ui=list][data-part=root][data-size=lg]{--_gap: var(--slotted-list-gap-lg, var(--slotted-space-4, .5rem));--_section-inset-block: var( --slotted-list-section-padding-block-lg, var(--slotted-space-5, .75rem) );--_row-inset-inline: var( --slotted-list-padding-inline-lg, var(--slotted-control-padding-inline-lg, 16px) );--_empty-inset: var(--slotted-list-empty-padding-lg, var(--slotted-space-9, 2rem))}[data-ui=list][data-part=root][data-variant=framed]{background-color:var(--_surface);border:var(--_frame-width) solid var(--_frame-color);border-radius:var(--_frame-radius);overflow:clip}[data-ui=list][data-part=root][data-variant=separated]{row-gap:var(--_gap)}[data-ui=list] [data-part=section]{display:flex;flex-direction:column;min-inline-size:0}[data-ui=list][data-variant=separated] [data-part=section],[data-ui=list][data-variant=separated] [data-part=section-list]{row-gap:var(--_gap)}[data-ui=list] [data-part=section-label]{color:var(--_section-color);font-size:var(--_section-font-size);font-weight:var(--_section-weight);letter-spacing:var(--slotted-list-section-letter-spacing, 0);line-height:var(--slotted-line-height-sm, 1.45);margin-block:0;min-inline-size:0;padding-block:var(--_section-inset-block);padding-inline:var(--_row-inset-inline)}[data-ui=list][data-inset] [data-part=section-label],[data-ui=list][data-inset] [data-part=empty]{padding-inline:0}[data-ui=list] [data-part=section-label][data-sticky]{background-color:var(--_surface);inset-block-start:0;position:sticky;z-index:var(--slotted-z-index-sticky, 100)}[data-ui=list] [data-part=empty]{align-items:center;color:var(--_empty-color);display:flex;flex-direction:column;justify-content:center;min-inline-size:0;padding-block:var(--_empty-inset);padding-inline:var(--_row-inset-inline);text-align:center}[data-ui=list][data-part=root][data-loading]{cursor:progress}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], marker: [{ type: i0.Input, args: [{ isSignal: true, alias: "marker", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+
+/**
+ * A group inside the set: the `li` holding a heading and a nested list, which
+ * is the grouping HTML already has. MUI, Angular Material, Primer and React
+ * Aria each leave the heading loose among the rows instead, so a reader hears a
+ * heading inside a set rather than a set with a name.
+ *
+ * The three elements are the consumer's own, which is what this ecosystem
+ * composes with: the heading keeps whichever level the document needs, and the
+ * nested list keeps `ul` or `ol` to match the set around it. React reads the
+ * heading element off a `level` input instead, because there the component owns
+ * the tag; both reach the same accessibility tree.
+ */
+class SlListSection {
+    /**
+     * The id the heading carries and the nested list names itself by. It is held
+     * here rather than passed between the two, because the pair is the group and
+     * neither half can name the other on its own.
+     */
+    labelId = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListSection, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlListSection, isStandalone: true, selector: "li[slListSection]", host: { attributes: { "data-part": "section" } }, exportAs: ["slListSection"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListSection, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'li[slListSection]',
+                    standalone: true,
+                    exportAs: 'slListSection',
+                    host: { 'data-part': 'section' },
+                }]
+        }] });
+/**
+ * The group's name. It shares the row's inline inset, so the heading and the
+ * titles under it stand in one column — the alignment that makes a grouped list
+ * read as one list rather than as several.
+ */
+class SlListSectionLabel {
+    /**
+     * Keeps the name in place while its own rows scroll past it. It takes the
+     * set's surface and the library's sticky stack level, which is what a
+     * consumer writing `position: sticky` alone does not get.
+     */
+    sticky = input(false, { ...(ngDevMode ? { debugName: "sticky" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    section = inject(SlListSection, { optional: true });
+    /** An id the consumer wrote is never replaced by the family's. */
+    written = inject(new HostAttributeToken('id'), { optional: true });
+    id = this.written ?? inject(SlListIdFactory).next();
+    constructor() {
+        this.section?.labelId.set(this.id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListSectionLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlListSectionLabel, isStandalone: true, selector: "[slListSectionLabel]", inputs: { sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-part": "section-label" }, properties: { "attr.id": "id", "attr.data-sticky": "sticky() ? '' : null" } }, exportAs: ["slListSectionLabel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListSectionLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slListSectionLabel]',
+                    standalone: true,
+                    exportAs: 'slListSectionLabel',
+                    host: {
+                        'data-part': 'section-label',
+                        '[attr.id]': 'id',
+                        '[attr.data-sticky]': "sticky() ? '' : null",
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }] } });
+/**
+ * The rows of one group. `role="list"` for the same reason the set writes it:
+ * the family draws its own marker, and the native one is what Safari and
+ * VoiceOver read the semantics from.
+ */
+class SlListSectionList {
+    section = inject(SlListSection, { optional: true });
+    /** A role the consumer wrote is never replaced by the family's. */
+    writtenRole = inject(new HostAttributeToken('role'), { optional: true });
+    writtenLabelledBy = inject(new HostAttributeToken('aria-labelledby'), {
+        optional: true,
+    });
+    role = this.writtenRole ?? 'list';
+    labelledBy = () => this.writtenLabelledBy ?? this.section?.labelId() ?? null;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListSectionList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlListSectionList, isStandalone: true, selector: "ul[slListSectionList], ol[slListSectionList]", host: { attributes: { "data-part": "section-list" }, properties: { "attr.role": "role", "attr.aria-labelledby": "labelledBy()" } }, exportAs: ["slListSectionList"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListSectionList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ul[slListSectionList], ol[slListSectionList]',
+                    standalone: true,
+                    exportAs: 'slListSectionList',
+                    host: {
+                        'data-part': 'section-list',
+                        '[attr.role]': 'role',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                    },
+                }]
+        }] });
+/**
+ * What the set says when it holds nothing. It is an `li`, so the reader hears
+ * "list, one item" and then the message; a message outside the list leaves them
+ * with "list, zero items" and silence, and leaves the words outside the box a
+ * framed set paints.
+ *
+ * The family supplies the box, the height and the muted ink. The words are the
+ * page's, and `result-state` is what goes in here.
+ */
+class SlListEmpty {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlListEmpty, isStandalone: true, selector: "li[slListEmpty]", host: { attributes: { "data-part": "empty" } }, exportAs: ["slListEmpty"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlListEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'li[slListEmpty]',
+                    standalone: true,
+                    exportAs: 'slListEmpty',
+                    host: { 'data-part': 'empty' },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LIST_DEFAULTS, SlList, SlListEmpty, SlListIdFactory, SlListSection, SlListSectionLabel, SlListSectionList, injectListDefaults, provideListDefaults };
+//# sourceMappingURL=slotted-angular-list.mjs.map

package/fesm2022/slotted-angular-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-list.mjs","sources":["../../list/src/list-defaults.ts","../../list/src/list.ts","../../list/src/list-parts.ts","../../list/src/slotted-angular-list.ts"],"sourcesContent":["import { inject, Injectable, InjectionToken } from '@angular/core';\n\n/** How the rows are told apart. The vocabulary is `accordion`'s. */\nexport type ListVariant = 'plain' | 'ruled' | 'framed' | 'separated';\n\n/** The room a row gets. Density is the application's choice; this is not. */\nexport type ListSize = 'sm' | 'md' | 'lg';\n\n/**\n * What is painted in the marker column. It is a separate question from\n * `ordered`: an ordered set whose rows carry their own badges paints no number\n * and still reads in order.\n */\nexport type ListMarker = 'none' | 'bullet' | 'number';\n\nexport interface ListDefaults {\n  inset: boolean;\n  marker: ListMarker;\n  size: ListSize;\n  variant: ListVariant;\n}\n\nconst FALLBACK: ListDefaults = { inset: false, marker: 'none', size: 'md', variant: 'plain' };\n\nexport const LIST_DEFAULTS = new InjectionToken<ListDefaults>('slotted list defaults', {\n  providedIn: 'root',\n  factory: () => FALLBACK,\n});\n\n/**\n * An application decides once how its lists are told apart and how much room a\n * row gets, rather than repeating four inputs on every list. A list that states\n * any of them itself still wins: an explicit input is never overridden by the\n * token.\n */\nexport function provideListDefaults(defaults: Partial<ListDefaults>) {\n  return {\n    provide: LIST_DEFAULTS,\n    useFactory: (): ListDefaults => ({\n      inset: defaults.inset ?? FALLBACK.inset,\n      marker: defaults.marker ?? FALLBACK.marker,\n      size: defaults.size ?? FALLBACK.size,\n      variant: defaults.variant ?? FALLBACK.variant,\n    }),\n  };\n}\n\n/** What a list renders as here, before it states anything of its own. */\nexport function injectListDefaults(): ListDefaults {\n  return inject(LIST_DEFAULTS);\n}\n\n/**\n * A group's heading names its own nested list, so the heading needs an id and\n * the id has to be the same string on the server and in the browser. A counter\n * held by the injector produces one; `Math.random` would not match for\n * hydration.\n */\n@Injectable({ providedIn: 'root' })\nexport class SlListIdFactory {\n  private count = 0;\n\n  next() {\n    this.count += 1;\n    return `slotted-list-${this.count}`;\n  }\n}\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostAttributeToken,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { injectListDefaults } from './list-defaults';\nimport type { ListMarker, ListSize, ListVariant } from './list-defaults';\n\nexport type { ListMarker, ListSize, ListVariant } from './list-defaults';\n\n/**\n * A vertical run of related rows. The rows are `slListItem`, a family of its\n * own; this one decides how they are told apart, how much room each gets, what\n * is painted in the marker column and whether they keep their inline padding,\n * and hands those four down through the injector.\n *\n * The directive goes on the element the page wrote — `<ul slList>` or\n * `<ol slList>` — because the element carries the reading order and that is the\n * page's decision, not the family's.\n *\n * **`role=\"list\"` is written, and it is not redundant.** The family draws its\n * own marker, because a row is a content box beside its independent targets and\n * CSS has no `display` that is both `list-item` and a grid. Safari and\n * VoiceOver drop list semantics the moment CSS removes the marker, so the role\n * restores what the layout costs. A `role` the consumer wrote themselves — a\n * `menu`, a `listbox` they are wiring — survives.\n *\n * The set holds no state a consumer can own. Selection with roving focus is\n * `listbox`'s and `table`'s: ARIA 1.2 does not allow `aria-selected` on\n * `listitem`, so a selection model here would announce nothing.\n */\n@Component({\n  selector: 'ul[slList], ol[slList]',\n  standalone: true,\n  exportAs: 'slList',\n  template: '<ng-content></ng-content>',\n  styleUrl: '../../../styles/src/list/list.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'list',\n    'data-part': 'root',\n    '[attr.role]': 'role()',\n    '[attr.data-variant]': 'resolvedVariant()',\n    '[attr.data-size]': 'resolvedSize()',\n    '[attr.data-marker]': 'resolvedMarker()',\n    '[attr.data-inset]': \"resolvedInset() ? '' : null\",\n    '[attr.data-loading]': \"loading() ? '' : null\",\n    '[attr.aria-busy]': \"loading() ? 'true' : null\",\n  },\n})\nexport class SlList {\n  /** How the rows are told apart. Falls back to the injected default. */\n  readonly variant = input<ListVariant>();\n  /** The room a row gets. Falls back to the injected default. */\n  readonly size = input<ListSize>();\n  /** What is painted in the marker column. Falls back to the injected default. */\n  readonly marker = input<ListMarker>();\n  /**\n   * Takes the rows' inline padding away, for a list inside a box that already\n   * pads its own content. The rule and the fill still run edge to edge.\n   */\n  readonly inset = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (state) => (state === undefined ? undefined : booleanAttribute(state)),\n  });\n  /**\n   * `aria-busy` on the set, which ARIA 1.2 §5.2.6 asks of a container whose\n   * rows have not arrived. The family draws no placeholder: `skeleton` owns\n   * that geometry and goes inside the rows.\n   */\n  readonly loading = input(false, { transform: booleanAttribute });\n\n  private readonly defaults = injectListDefaults();\n\n  /** A role the consumer wrote is never replaced by the family's. */\n  private readonly writtenRole = inject(new HostAttributeToken('role'), { optional: true });\n\n  protected readonly role = computed(() => this.writtenRole ?? 'list');\n  /* Public, because a row reads them: the set is what a row asks when it has\n     not been told itself. `role` stays protected — it is the host's alone. */\n  readonly resolvedVariant = computed(() => this.variant() ?? this.defaults.variant);\n  readonly resolvedSize = computed(() => this.size() ?? this.defaults.size);\n  readonly resolvedMarker = computed(() => this.marker() ?? this.defaults.marker);\n\n  /**\n   * Read by every row under this set, and by the row's own input first. The\n   * input stays `undefined` until it is written, so a list that states\n   * `inset=\"false\"` under a provider that states `true` keeps its own answer —\n   * `booleanAttribute` alone would fold the two together.\n   */\n  readonly resolvedInset = computed(() => (this.inset() ?? this.defaults.inset) === true);\n}\n","import {\n  booleanAttribute,\n  Directive,\n  HostAttributeToken,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\n\nimport { SlListIdFactory } from './list-defaults';\n\n/**\n * A group inside the set: the `li` holding a heading and a nested list, which\n * is the grouping HTML already has. MUI, Angular Material, Primer and React\n * Aria each leave the heading loose among the rows instead, so a reader hears a\n * heading inside a set rather than a set with a name.\n *\n * The three elements are the consumer's own, which is what this ecosystem\n * composes with: the heading keeps whichever level the document needs, and the\n * nested list keeps `ul` or `ol` to match the set around it. React reads the\n * heading element off a `level` input instead, because there the component owns\n * the tag; both reach the same accessibility tree.\n */\n@Directive({\n  selector: 'li[slListSection]',\n  standalone: true,\n  exportAs: 'slListSection',\n  host: { 'data-part': 'section' },\n})\nexport class SlListSection {\n  /**\n   * The id the heading carries and the nested list names itself by. It is held\n   * here rather than passed between the two, because the pair is the group and\n   * neither half can name the other on its own.\n   */\n  readonly labelId = signal<string | undefined>(undefined);\n}\n\n/**\n * The group's name. It shares the row's inline inset, so the heading and the\n * titles under it stand in one column — the alignment that makes a grouped list\n * read as one list rather than as several.\n */\n@Directive({\n  selector: '[slListSectionLabel]',\n  standalone: true,\n  exportAs: 'slListSectionLabel',\n  host: {\n    'data-part': 'section-label',\n    '[attr.id]': 'id',\n    '[attr.data-sticky]': \"sticky() ? '' : null\",\n  },\n})\nexport class SlListSectionLabel {\n  /**\n   * Keeps the name in place while its own rows scroll past it. It takes the\n   * set's surface and the library's sticky stack level, which is what a\n   * consumer writing `position: sticky` alone does not get.\n   */\n  readonly sticky = input(false, { transform: booleanAttribute });\n\n  private readonly section = inject(SlListSection, { optional: true });\n  /** An id the consumer wrote is never replaced by the family's. */\n  private readonly written = inject(new HostAttributeToken('id'), { optional: true });\n\n  readonly id = this.written ?? inject(SlListIdFactory).next();\n\n  constructor() {\n    this.section?.labelId.set(this.id);\n  }\n}\n\n/**\n * The rows of one group. `role=\"list\"` for the same reason the set writes it:\n * the family draws its own marker, and the native one is what Safari and\n * VoiceOver read the semantics from.\n */\n@Directive({\n  selector: 'ul[slListSectionList], ol[slListSectionList]',\n  standalone: true,\n  exportAs: 'slListSectionList',\n  host: {\n    'data-part': 'section-list',\n    '[attr.role]': 'role',\n    '[attr.aria-labelledby]': 'labelledBy()',\n  },\n})\nexport class SlListSectionList {\n  private readonly section = inject(SlListSection, { optional: true });\n  /** A role the consumer wrote is never replaced by the family's. */\n  private readonly writtenRole = inject(new HostAttributeToken('role'), { optional: true });\n  private readonly writtenLabelledBy = inject(new HostAttributeToken('aria-labelledby'), {\n    optional: true,\n  });\n\n  readonly role = this.writtenRole ?? 'list';\n\n  readonly labelledBy = () => this.writtenLabelledBy ?? this.section?.labelId() ?? null;\n}\n\n/**\n * What the set says when it holds nothing. It is an `li`, so the reader hears\n * \"list, one item\" and then the message; a message outside the list leaves them\n * with \"list, zero items\" and silence, and leaves the words outside the box a\n * framed set paints.\n *\n * The family supplies the box, the height and the muted ink. The words are the\n * page's, and `result-state` is what goes in here.\n */\n@Directive({\n  selector: 'li[slListEmpty]',\n  standalone: true,\n  exportAs: 'slListEmpty',\n  host: { 'data-part': 'empty' },\n})\nexport class SlListEmpty {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAsBA,MAAM,QAAQ,GAAiB,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE;MAEhF,aAAa,GAAG,IAAI,cAAc,CAAe,uBAAuB,EAAE;AACrF,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,MAAM,QAAQ;AACxB,CAAA;AAED;;;;;AAKG;AACG,SAAU,mBAAmB,CAAC,QAA+B,EAAA;IACjE,OAAO;AACL,QAAA,OAAO,EAAE,aAAa;AACtB,QAAA,UAAU,EAAE,OAAqB;AAC/B,YAAA,KAAK,EAAE,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK;AACvC,YAAA,MAAM,EAAE,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM;AAC1C,YAAA,IAAI,EAAE,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI;AACpC,YAAA,OAAO,EAAE,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,OAAO;SAC9C,CAAC;KACH;AACH;AAEA;SACgB,kBAAkB,GAAA;AAChC,IAAA,OAAO,MAAM,CAAC,aAAa,CAAC;AAC9B;AAEA;;;;;AAKG;MAEU,eAAe,CAAA;IAClB,KAAK,GAAG,CAAC;IAEjB,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC;AACf,QAAA,OAAO,CAAA,aAAA,EAAgB,IAAI,CAAC,KAAK,EAAE;IACrC;uGANW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAAf,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,cADF,MAAM,EAAA,CAAA;;2FACnB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAD3B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;AC1ClC;;;;;;;;;;;;;;;;;;;;AAoBG;MAqBU,MAAM,CAAA;;AAER,IAAA,OAAO,GAAG,KAAK;2FAAe;;AAE9B,IAAA,IAAI,GAAG,KAAK;wFAAY;;AAExB,IAAA,MAAM,GAAG,KAAK;0FAAc;AACrC;;;AAGG;AACM,IAAA,KAAK,GAAG,KAAK,CAAoD,SAAS,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,OAAA,EAAA,8BAAA,EAAA,CAAA,EACjF,SAAS,EAAE,CAAC,KAAK,MAAM,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC,GACjF;AACF;;;;AAIG;IACM,OAAO,GAAG,KAAK,CAAC,KAAK,+EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAE/C,QAAQ,GAAG,kBAAkB,EAAE;;AAG/B,IAAA,WAAW,GAAG,MAAM,CAAC,IAAI,kBAAkB,CAAC,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAEtE,IAAI,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,IAAI,MAAM;6EAAC;AACpE;AAC4E;AACnE,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO;wFAAC;AACzE,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI;qFAAC;AAChE,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM;uFAAC;AAE/E;;;;;AAKG;AACM,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,MAAM,IAAI;sFAAC;uGAvC5E,MAAM,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,skCAhBP,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ghHAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAgB1B,MAAM,EAAA,UAAA,EAAA,CAAA;kBApBlB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,wBAAwB,EAAA,UAAA,EACtB,IAAI,EAAA,QAAA,EACN,QAAQ,YACR,2BAA2B,EAAA,eAAA,EAEpB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,MAAM;AACjB,wBAAA,WAAW,EAAE,MAAM;AACnB,wBAAA,aAAa,EAAE,QAAQ;AACvB,wBAAA,qBAAqB,EAAE,mBAAmB;AAC1C,wBAAA,kBAAkB,EAAE,gBAAgB;AACpC,wBAAA,oBAAoB,EAAE,kBAAkB;AACxC,wBAAA,mBAAmB,EAAE,6BAA6B;AAClD,wBAAA,qBAAqB,EAAE,uBAAuB;AAC9C,wBAAA,kBAAkB,EAAE,2BAA2B;AAChD,qBAAA,EAAA,MAAA,EAAA,CAAA,ghHAAA,CAAA,EAAA;;;AC5CH;;;;;;;;;;;AAWG;MAOU,aAAa,CAAA;AACxB;;;;AAIG;IACM,OAAO,GAAG,MAAM,CAAqB,SAAS;gFAAC;uGAN7C,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAb,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,SAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,IAAI,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE;AACjC,iBAAA;;AAUD;;;;AAIG;MAWU,kBAAkB,CAAA;AAC7B;;;;AAIG;IACM,MAAM,GAAG,KAAK,CAAC,KAAK,8EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAE9C,OAAO,GAAG,MAAM,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;AAEnD,IAAA,OAAO,GAAG,MAAM,CAAC,IAAI,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAE1E,IAAA,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,eAAe,CAAC,CAAC,IAAI,EAAE;AAE5D,IAAA,WAAA,GAAA;QACE,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;IACpC;uGAhBW,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAlB,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,eAAA,EAAA,EAAA,UAAA,EAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAA,EAAA,sBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAlB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAV9B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sBAAsB;AAChC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,oBAAoB;AAC9B,oBAAA,IAAI,EAAE;AACJ,wBAAA,WAAW,EAAE,eAAe;AAC5B,wBAAA,WAAW,EAAE,IAAI;AACjB,wBAAA,oBAAoB,EAAE,sBAAsB;AAC7C,qBAAA;AACF,iBAAA;;AAoBD;;;;AAIG;MAWU,iBAAiB,CAAA;IACX,OAAO,GAAG,MAAM,CAAC,aAAa,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;;AAEnD,IAAA,WAAW,GAAG,MAAM,CAAC,IAAI,kBAAkB,CAAC,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IACxE,iBAAiB,GAAG,MAAM,CAAC,IAAI,kBAAkB,CAAC,iBAAiB,CAAC,EAAE;AACrF,QAAA,QAAQ,EAAE,IAAI;AACf,KAAA,CAAC;AAEO,IAAA,IAAI,GAAG,IAAI,CAAC,WAAW,IAAI,MAAM;AAEjC,IAAA,UAAU,GAAG,MAAM,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,IAAI;uGAV1E,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8CAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,cAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,MAAA,EAAA,sBAAA,EAAA,cAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAV7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,8CAA8C;AACxD,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,IAAI,EAAE;AACJ,wBAAA,WAAW,EAAE,cAAc;AAC3B,wBAAA,aAAa,EAAE,MAAM;AACrB,wBAAA,wBAAwB,EAAE,cAAc;AACzC,qBAAA;AACF,iBAAA;;AAcD;;;;;;;;AAQG;MAOU,WAAW,CAAA;uGAAX,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,OAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAX,WAAW,EAAA,UAAA,EAAA,CAAA;kBANvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,IAAI,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE;AAC/B,iBAAA;;;AClHD;;AAEG;;"}