@mintplayer/ng-spark 22.22.0 → 22.24.0

package/README.md

@@ -0,0 +1,181 @@
+# @mintplayer/ng-spark
+
+The Angular front end for [MintPlayer.Spark](https://github.com/MintPlayer/MintPlayer.Spark): routed
+persistent-object pages (list, detail, create, edit) driven by the server's model, the query grid,
+attribute renderers, client operations, the program-units shell, and the UI halves of the Spark add-on
+packages (soft delete, history, moderation).
+
+Sign-in, registration and the account pages are in the companion package
+[`@mintplayer/ng-spark-auth`](https://github.com/MintPlayer/MintPlayer.Spark/blob/master/libs/node_packages/ng-spark-auth/README.md).
+
+## Install
+
+```bash
+npm install @mintplayer/ng-spark @mintplayer/ng-bootstrap @mintplayer/pagination
+```
+
+The major version follows Angular's: `22.x` targets Angular 22. Peer dependencies: `@angular/core`,
+`common`, `router`, `forms`, `cdk` (^22), `@mintplayer/ng-bootstrap` (^22.19), `@mintplayer/pagination`,
+`rxjs` (~7.8).
+
+## Minimal setup
+
+```ts
+// app.config.ts
+import { provideRouter } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { provideSpark } from '@mintplayer/ng-spark';
+import { withSparkTimezone } from '@mintplayer/ng-spark/services';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes),
+    provideHttpClient(...withSparkTimezone()),
+    provideSpark(),              // optional: { baseUrl: '/spark' } is the default
+  ],
+};
+
+// app.routes.ts
+import { sparkRoutes } from '@mintplayer/ng-spark/routes';
+
+export const routes: Routes = [
+  { path: 'home', loadComponent: () => import('./home.component') },
+  ...sparkRoutes(),              // last: po/:type, po/:type/:id, query/:queryId, …
+];
+```
+
+Routes with a parameterised first segment of your own must come **after** `sparkRoutes()`.
+
+## Entry points
+
+Import from the entry point, not from the package root; each one is a separate chunk.
+
+| Entry point | What it provides |
+|---|---|
+| `@mintplayer/ng-spark` | `provideSpark(config?)`, `SPARK_CONFIG` (`baseUrl`), `SPARK_AUTH_STATE` (the bridge `ng-spark-auth` fills) |
+| `/routes` | `sparkRoutes()` — the routed persistent-object and query pages |
+| `/services` | `SparkService`, `SparkStreamingService`, `SparkLanguageService`, `SparkQueryActionsService`, `RetryActionService`; the timezone feature `withSparkTimezone()` |
+| `/models` | The wire types (persistent objects, attributes, queries, envelopes) |
+| `/shell` | `<spark-shell>` with its slot directives, `<spark-program-units>`, `<spark-language-selector>` ([guide](https://github.com/MintPlayer/MintPlayer.Spark/blob/master/docs/guide-program-units.md)) |
+| `/query-list` | `<spark-query-list>` — the routed query page |
+| `/grid` | `<spark-query-grid>`, `<spark-query-card>`, `<spark-grid-cell>`, `<spark-search-box>` and the caption/icon/actions slot directives; `SPARK_GRID_PAGE_SIZES` |
+| `/column-filter` | `<spark-column-filter-panel>` |
+| `/po-detail`, `/po-create`, `/po-edit` | The routed detail, create and edit pages |
+| `/po-form` | `<spark-po-form>`, `<spark-reference-picker>`, `<spark-lookup-picker>` |
+| `/renderers` | `provideSparkAttributeRenderers([...])`, `SPARK_ATTRIBUTE_RENDERERS`, `withDeclaredInputs` ([guide](https://github.com/MintPlayer/MintPlayer.Spark/blob/master/docs/guide-custom-attribute-renderers.md)) |
+| `/panels` | `provideSparkDetailPanels(...)`, `provideSparkDetailActions(...)`, `provideSparkQueryListActions(...)` — how add-ons put components on the routed pages |
+| `/client-operations` | `provideSparkClientOperations()` — notify, navigate and refresh operations from server-side action code; the toast container |
+| `/retry-action-modal` | The modal that answers a server's retry action ([guide](https://github.com/MintPlayer/MintPlayer.Spark/blob/master/docs/guide-manager-retry-actions.md)) |
+| `/attribute-description` | The [i] tooltip for attribute help text ([guide](https://github.com/MintPlayer/MintPlayer.Spark/blob/master/docs/guide-attribute-descriptions.md)) |
+| `/icon` | `<spark-icon>` |
+| `/pipes` | The pipes the pages use (attribute values, references, lookups, translations, router links) |
+| `/soft-delete` | `provideSparkSoftDelete()` — the Deleted toggle on query lists, the recycle bin, Restore / Purge |
+| `/history` | `provideSparkHistory()` — `<spark-po-history>`: revision list, read-only view, diff, Revert |
+| `/moderation` | `provideSparkModeration()`, `sparkModerationRoutes()`, `sparkModerationRenderers` — vote widget, flag button, review queue, reputation badge, moderator panel |
+
+### Timezone (`withSparkTimezone`)
+
+```ts
+provideHttpClient(...withSparkTimezone({ cookieName: 'spark-timezone' }))
+```
+
+Sends the browser's IANA zone as a header and writes it to a cookie (only when it changed) so a
+server-side render can read it. The header is never sent on the server platform. Use the same cookie
+name as the server's `Spark:TimeZone:CookieName`; `cookieName: false` writes no cookie. See
+[guide-dates-and-sorting.md](https://github.com/MintPlayer/MintPlayer.Spark/blob/master/docs/guide-dates-and-sorting.md).
+
+### Panels and actions on the routed pages
+
+```ts
+import { provideSparkDetailPanels, provideSparkDetailActions } from '@mintplayer/ng-spark/panels';
+
+providers: [
+  provideSparkDetailPanels({ id: 'audit', component: AuditPanelComponent, order: 10 }),
+  provideSparkDetailActions({ id: 'export', component: ExportButtonComponent }),
+]
+```
+
+Each component declares `context = input.required<SparkDetailContext>()` (query-list actions:
+`SparkQueryListContext`) and does its own permission checks. A second registration with the same `id`
+replaces the first.
+
+### Query toolbar, selection and sub-queries
+
+The grid (`/grid`) owns one toolbar model, `SparkQueryGridComponent.toolbarActions()`. It holds the
+server's default `New` and `Delete` (`isDefault` entries from `/spark/actions/list`) and the custom
+actions, each enabled from the live selection count. The sub-query card's header renders it on the
+right, with the overflow under the translated "More" label (`common.more`), and the query page's
+action bar renders it too.
+
+The grid also renders:
+- an "N selected" chip while rows are selected. There is no select-all: with paged, lazy or
+  virtual-scrolled rows it could only tick the rows loaded so far. Deselect-all is the datatable's
+  own header checkbox, shown only while a row is selected. Single selection has no checkbox
+  column, so there the chip carries a ⊗ that clears the selection;
+- a per-row `⋮` menu of the actions whose rule accepts one row. A menu item runs on that row only and
+  leaves the checkbox selection alone. The menu is a CDK connected overlay with ng-bootstrap's
+  `<bs-dropdown-menu>` inside, not `@mintplayer/ng-bootstrap/dropdown`, pending
+  [ng-bootstrap #419](https://github.com/MintPlayer/mintplayer-ng-bootstrap/issues/419) (the
+  dropdown fesm fails to initialise in unlinked JIT test runs).
+
+- **Selection** follows `selectionMode` (`'auto' | 'none' | 'single' | 'multiple'`).
+  - It is set on the query, or on the parent type's `queries` entry, which `<spark-query-card
+    [selectionMode]>` and `<spark-query-grid [selectionModeSetting]>` take.
+  - `'auto'` derives it from the custom actions, as before.
+- **Delete** posts the selection to `SparkService.deleteMany()` (`/spark/po/delete-many`). One
+  request deletes all the rows or none.
+- **New** on a sub-query navigates to the create page with `parentId`, `parentType` and `queryId`.
+  The create page always asks `SparkService.newObject()` (`/spark/po/new`) for its blank object, so
+  the server's `OnNewAsync` sets the defaults. For a sub-query, its base fills the reference to the
+  parent.
+- Read `EntityType.queries` with `subQueriesOf(type)`. An entry is a bare alias or
+  `{ query, selectionMode?, parentReference? }`.
+- **Search.** The card's header has a search box on the right, after the actions, as Vidyano's
+  sub-query tabs do. It is `<spark-search-box [(term)]>`, the same component the query page uses: a
+  300 ms debounce, a clear button, and Escape to clear. The term goes to the grid's `search`, so the
+  server searches the sub-query's rows (with `parentId`/`parentType`), and to the column filters'
+  value lists as `querySearch`. **A new term clears the selection.** The card's `search` input is the
+  starting term; `[searchable]="false"` hides the box, and a card over bound `data` has none.
+- **Recycle bin.** While the grid lists `deleted: 'only'`, or sits under a deleted parent, its
+  toolbar and row menu are empty (no New, no Delete, no custom action): the recycle bin offers only
+  Restore and Purge. `<spark-query-card>` takes `[deleted]` (the rows' mode, forwarded to its grid)
+  and `[parentDeleted]` (the parent is a deleted row; the detail page sets it for a row opened with
+  `?deleted=only`). Under a deleted parent the grid sends `parentDeleted: 'include'` on execute and
+  distinct-values, which the server honours only for holders of `ViewDeleted/{ParentType}`.
+
+```html
+<spark-search-box [(term)]="term" />
+<spark-query-grid queryId="all-cars" [search]="term()" />
+```
+
+See [guide-custom-actions.md](https://github.com/MintPlayer/MintPlayer.Spark/blob/master/docs/guide-custom-actions.md)
+for the server side of this.
+
+### Soft delete, history and moderation
+
+```ts
+import { provideSparkSoftDelete } from '@mintplayer/ng-spark/soft-delete';
+import { provideSparkHistory } from '@mintplayer/ng-spark/history';
+import { provideSparkModeration, sparkModerationRenderers, sparkModerationRoutes } from '@mintplayer/ng-spark/moderation';
+import { provideSparkAttributeRenderers } from '@mintplayer/ng-spark/renderers';
+
+providers: [
+  provideSparkSoftDelete(),
+  provideSparkHistory(),
+  provideSparkModeration(),
+  provideSparkAttributeRenderers([...sparkModerationRenderers]),
+]
+
+// routes: ...sparkModerationRoutes() before ...sparkRoutes()
+```
+
+Each needs its server package: [SoftDelete](https://github.com/MintPlayer/MintPlayer.Spark/blob/master/libs/soft_delete/MintPlayer.Spark.SoftDelete/README.md),
+[History](https://github.com/MintPlayer/MintPlayer.Spark/blob/master/libs/history/MintPlayer.Spark.History/README.md),
+[Moderation](https://github.com/MintPlayer/MintPlayer.Spark/blob/master/libs/moderation/MintPlayer.Spark.Moderation/README.md)
+([guide](https://github.com/MintPlayer/MintPlayer.Spark/blob/master/docs/guide-moderation.md)). `apps/QnA` uses all three.
+
+## More
+
+- [Repository README](https://github.com/MintPlayer/MintPlayer.Spark/blob/master/README.md) — the developer guides
+- [HTTP API specification](https://github.com/MintPlayer/MintPlayer.Spark/blob/master/docs/Spark-API-Specification.md)
+- [Release notes 11.0.0-preview.91 / ng-spark 22.24.0](https://github.com/MintPlayer/MintPlayer.Spark/blob/master/docs/release-notes-preview-91.md)

package/fesm2022/mintplayer-ng-spark-attribute-description.mjs

@@ -1,37 +1,48 @@
-import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
-import { BsTooltipDirective } from '@mintplayer/ng-bootstrap/tooltip';
-import { SparkIconComponent } from '@mintplayer/ng-spark/icon';
-import { resolveTranslation, currentLanguage } from '@mintplayer/ng-spark/models';
-
-/**
- * The [i] beside an attribute label: a focusable button whose tooltip shows the attribute's
- * `description` (#348). Renders nothing when the model declares no description, so every label
- * site can include it unconditionally.
- *
- * Accessibility comes from `*bsTooltip`: it opens on hover AND focus, closes on Escape, and sets
- * `aria-describedby` on the button while open. The button's own name is the description text, so
- * a screen reader announces the help on focus without waiting for the tooltip.
- *
- * Clicks are stopped: the [i] lives inside sortable grid headers and `<label for>` elements, and
- * must neither toggle the sort nor move focus into the input.
- */
-class SparkAttributeDescriptionComponent {
-    /** The attribute's `description`; `undefined` (the common case) renders nothing. */
-    description = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
-    /** Where the tooltip opens relative to the [i]. */
-    position = input('top', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    /** Resolved for the current language; re-evaluates when the user switches language. */
-    text = computed(() => resolveTranslation(this.description(), currentLanguage()).trim(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    onClick(event) {
-        event.preventDefault();
-        event.stopPropagation();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkAttributeDescriptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: SparkAttributeDescriptionComponent, isStandalone: true, selector: "spark-attribute-description", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { BsTooltipDirective } from "@mintplayer/ng-bootstrap/tooltip";
+import { SparkIconComponent } from "@mintplayer/ng-spark/icon";
+import { currentLanguage, resolveTranslation } from "@mintplayer/ng-spark/models";
+var SparkAttributeDescriptionComponent = class SparkAttributeDescriptionComponent {
+	description = input(...ngDevMode ? [void 0, { debugName: "description" }] : /* istanbul ignore next */ []);
+	position = input("top", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	text = computed(() => resolveTranslation(this.description(), currentLanguage()).trim(), ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	onClick(event) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SparkAttributeDescriptionComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SparkAttributeDescriptionComponent,
+		isStandalone: true,
+		selector: "spark-attribute-description",
+		inputs: {
+			description: {
+				classPropertyName: "description",
+				publicName: "description",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
     @if (text(); as text) {
       <button
         type="button"
@@ -42,11 +53,36 @@ class SparkAttributeDescriptionComponent {
         <span *bsTooltip="position()" class="spark-attribute-description-text">{{ text }}</span>
       </button>
     }
-  `, isInline: true, styles: [":host{display:inline-block;line-height:1}.spark-attribute-description-trigger{color:inherit;opacity:.6;font-size:.875em;vertical-align:baseline}.spark-attribute-description-trigger:hover,.spark-attribute-description-trigger:focus-visible{opacity:1}.spark-attribute-description-text{display:inline-block;white-space:pre-line;text-align:start;max-width:20rem}\n"], dependencies: [{ kind: "directive", type: BsTooltipDirective, selector: "*[bsTooltip]", inputs: ["bsTooltip"] }, { kind: "component", type: SparkIconComponent, selector: "spark-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: SparkAttributeDescriptionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'spark-attribute-description', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [BsTooltipDirective, SparkIconComponent], template: `
+  `,
+		isInline: true,
+		styles: [":host{display:inline-block;line-height:1}.spark-attribute-description-trigger{color:inherit;opacity:.6;font-size:.875em;vertical-align:baseline}.spark-attribute-description-trigger:hover,.spark-attribute-description-trigger:focus-visible{opacity:1}.spark-attribute-description-text{display:inline-block;white-space:pre-line;text-align:start;max-width:20rem}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: BsTooltipDirective,
+			selector: "*[bsTooltip]",
+			inputs: ["bsTooltip"]
+		}, {
+			kind: "component",
+			type: SparkIconComponent,
+			selector: "spark-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SparkAttributeDescriptionComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-attribute-description",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [BsTooltipDirective, SparkIconComponent],
+			template: `
     @if (text(); as text) {
       <button
         type="button"
@@ -57,12 +93,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
         <span *bsTooltip="position()" class="spark-attribute-description-text">{{ text }}</span>
       </button>
     }
-  `, styles: [":host{display:inline-block;line-height:1}.spark-attribute-description-trigger{color:inherit;opacity:.6;font-size:.875em;vertical-align:baseline}.spark-attribute-description-trigger:hover,.spark-attribute-description-trigger:focus-visible{opacity:1}.spark-attribute-description-text{display:inline-block;white-space:pre-line;text-align:start;max-width:20rem}\n"] }]
-        }], propDecorators: { description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+  `,
+			styles: [":host{display:inline-block;line-height:1}.spark-attribute-description-trigger{color:inherit;opacity:.6;font-size:.875em;vertical-align:baseline}.spark-attribute-description-trigger:hover,.spark-attribute-description-trigger:focus-visible{opacity:1}.spark-attribute-description-text{display:inline-block;white-space:pre-line;text-align:start;max-width:20rem}\n"]
+		}]
+	}],
+	propDecorators: {
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}]
+	}
+});
 export { SparkAttributeDescriptionComponent };
-//# sourceMappingURL=mintplayer-ng-spark-attribute-description.mjs.map
+
+//# sourceMappingURL=mintplayer-ng-spark-attribute-description.mjs.map

package/fesm2022/mintplayer-ng-spark-attribute-description.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mintplayer-ng-spark-attribute-description.mjs","sources":["../../attribute-description/src/spark-attribute-description.component.ts","../../attribute-description/mintplayer-ng-spark-attribute-description.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { BsTooltipDirective } from '@mintplayer/ng-bootstrap/tooltip';\nimport { SparkIconComponent } from '@mintplayer/ng-spark/icon';\nimport { TranslatedString, currentLanguage, resolveTranslation } from '@mintplayer/ng-spark/models';\n\nexport type SparkAttributeDescriptionPosition = 'top' | 'bottom' | 'start' | 'end';\n\n/**\n * The [i] beside an attribute label: a focusable button whose tooltip shows the attribute's\n * `description` (#348). Renders nothing when the model declares no description, so every label\n * site can include it unconditionally.\n *\n * Accessibility comes from `*bsTooltip`: it opens on hover AND focus, closes on Escape, and sets\n * `aria-describedby` on the button while open. The button's own name is the description text, so\n * a screen reader announces the help on focus without waiting for the tooltip.\n *\n * Clicks are stopped: the [i] lives inside sortable grid headers and `<label for>` elements, and\n * must neither toggle the sort nor move focus into the input.\n */\n@Component({\n  selector: 'spark-attribute-description',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [BsTooltipDirective, SparkIconComponent],\n  template: `\n    @if (text(); as text) {\n      <button\n        type=\"button\"\n        class=\"btn btn-link p-0 ms-1 align-baseline spark-attribute-description-trigger\"\n        [attr.aria-label]=\"text\"\n        (click)=\"onClick($event)\">\n        <spark-icon name=\"info-circle\" />\n        <span *bsTooltip=\"position()\" class=\"spark-attribute-description-text\">{{ text }}</span>\n      </button>\n    }\n  `,\n  styles: [`\n    :host {\n      display: inline-block;\n      line-height: 1;\n    }\n    .spark-attribute-description-trigger {\n      color: inherit;\n      opacity: 0.6;\n      font-size: 0.875em;\n      vertical-align: baseline;\n    }\n    .spark-attribute-description-trigger:hover,\n    .spark-attribute-description-trigger:focus-visible {\n      opacity: 1;\n    }\n    .spark-attribute-description-text {\n      display: inline-block;\n      white-space: pre-line;\n      text-align: start;\n      max-width: 20rem;\n    }\n  `],\n})\nexport class SparkAttributeDescriptionComponent {\n  /** The attribute's `description`; `undefined` (the common case) renders nothing. */\n  description = input<TranslatedString | undefined>();\n\n  /** Where the tooltip opens relative to the [i]. */\n  position = input<SparkAttributeDescriptionPosition>('top');\n\n  /** Resolved for the current language; re-evaluates when the user switches language. */\n  text = computed(() => resolveTranslation(this.description(), currentLanguage()).trim());\n\n  onClick(event: MouseEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAOA;;;;;;;;;;;AAWG;MAyCU,kCAAkC,CAAA;;AAE7C,IAAA,WAAW,GAAG,KAAK;+FAAgC;;IAGnD,QAAQ,GAAG,KAAK,CAAoC,KAAK;iFAAC;;AAG1D,IAAA,IAAI,GAAG,QAAQ,CAAC,MAAM,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,eAAe,EAAE,CAAC,CAAC,IAAI,EAAE;6EAAC;AAEvF,IAAA,OAAO,CAAC,KAAiB,EAAA;QACvB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;IACzB;uGAbW,kCAAkC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlC,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kCAAkC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAnCnC;;;;;;;;;;;GAWT,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,yWAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAZS,kBAAkB,gFAAE,kBAAkB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAoCrC,kCAAkC,EAAA,UAAA,EAAA,CAAA;kBAxC9C,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,6BAA6B,EAAA,UAAA,EAC3B,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,kBAAkB,EAAE,kBAAkB,CAAC,EAAA,QAAA,EACvC;;;;;;;;;;;AAWT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,yWAAA,CAAA,EAAA;;;ACnCH;;AAEG;;;;"}
+{"version":3,"file":"mintplayer-ng-spark-attribute-description.mjs","names":[],"sources":["../../attribute-description/src/spark-attribute-description.component.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { BsTooltipDirective } from '@mintplayer/ng-bootstrap/tooltip';\nimport { SparkIconComponent } from '@mintplayer/ng-spark/icon';\nimport { TranslatedString, currentLanguage, resolveTranslation } from '@mintplayer/ng-spark/models';\n\nexport type SparkAttributeDescriptionPosition = 'top' | 'bottom' | 'start' | 'end';\n\n/**\n * The [i] beside an attribute label: a focusable button whose tooltip shows the attribute's\n * `description` (#348). Renders nothing when the model declares no description, so every label\n * site can include it unconditionally.\n *\n * Accessibility comes from `*bsTooltip`: it opens on hover AND focus, closes on Escape, and sets\n * `aria-describedby` on the button while open. The button's own name is the description text, so\n * a screen reader announces the help on focus without waiting for the tooltip.\n *\n * Clicks are stopped: the [i] lives inside sortable grid headers and `<label for>` elements, and\n * must neither toggle the sort nor move focus into the input.\n */\n@Component({\n  selector: 'spark-attribute-description',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [BsTooltipDirective, SparkIconComponent],\n  template: `\n    @if (text(); as text) {\n      <button\n        type=\"button\"\n        class=\"btn btn-link p-0 ms-1 align-baseline spark-attribute-description-trigger\"\n        [attr.aria-label]=\"text\"\n        (click)=\"onClick($event)\">\n        <spark-icon name=\"info-circle\" />\n        <span *bsTooltip=\"position()\" class=\"spark-attribute-description-text\">{{ text }}</span>\n      </button>\n    }\n  `,\n  styles: [`\n    :host {\n      display: inline-block;\n      line-height: 1;\n    }\n    .spark-attribute-description-trigger {\n      color: inherit;\n      opacity: 0.6;\n      font-size: 0.875em;\n      vertical-align: baseline;\n    }\n    .spark-attribute-description-trigger:hover,\n    .spark-attribute-description-trigger:focus-visible {\n      opacity: 1;\n    }\n    .spark-attribute-description-text {\n      display: inline-block;\n      white-space: pre-line;\n      text-align: start;\n      max-width: 20rem;\n    }\n  `],\n})\nexport class SparkAttributeDescriptionComponent {\n  /** The attribute's `description`; `undefined` (the common case) renders nothing. */\n  description = input<TranslatedString | undefined>();\n\n  /** Where the tooltip opens relative to the [i]. */\n  position = input<SparkAttributeDescriptionPosition>('top');\n\n  /** Resolved for the current language; re-evaluates when the user switches language. */\n  text = computed(() => resolveTranslation(this.description(), currentLanguage()).trim());\n\n  onClick(event: MouseEvent): void {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n}\n"],"mappings":";;;;;AA2DA,IAAa,qCAAb,MAAa,mCAAkC;CAE7C,cAAc,MAAqC,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGnD,WAAW,MAAyC,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAG1D,OAAO,eAAe,mBAAmB,KAAK,YAAW,GAAI,gBAAe,CAAE,CAAC,CAAC,KAAI,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEvF,QAAQ,OAAiB;EACvB,MAAM,eAAc;EACpB,MAAM,gBAAe;CACvB;CAbW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkC,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlC,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkC,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UAnCnC;;;;;;;;;;;;EAWT,UAAA;EAAA,QAAA,CAAA,yWAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MAZS;GAAkB,UAAA;GAAA,QAAA,CAAA,WAAA;EAAA,GAAA;GAAA,MAAA;GAAA,MAAE;GAAkB,UAAA;GAAA,QAAA,CAAA,MAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAoCrC,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkC,YAAA,CAAA;EAxC9C,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAA6B,YAC3B;GAAI,iBACC,wBAAwB;GAAM,SACtC,CAAC,oBAAoB,kBAAkB;GAAC,UACvC;;;;;;;;;;;;GAWT,QAAA,CAAA,yWAAA;EAAA,CAAA"}