@lucca-front/ng 22.0.5 → 22.0.6-rc.1

package/llms/references/components/data-table/data-table.md

@@ -0,0 +1,290 @@
+# data-table
+
+## Import
+
+```typescript
+import { DataTableBodyComponent, DataTableRowCellHeaderComponent, DataTableRowCellComponent, DataTableFootComponent, DataTableHeadComponent, DataTableRowComponent, DataTableComponent } from '@lucca-front/ng/data-table';
+```
+
+## Basic Usage
+
+```html
+<lu-data-table> <thead luDataTableHead> <tr luDataTableRow> <th luDataTableCell>header</th> <th luDataTableCell>header</th> </tr> </thead> <tbody luDataTableBody> <tr luDataTableRow> <th luDataTableCell>header</th> <td luDataTableCell>cell</td> </tr> <tr luDataTableRow> <th luDataTableCell>header</th> <td luDataTableCell>cell</td> </tr> </tbody>
+</lu-data-table>
+```
+
+## API Reference
+
+### DataTableBodyComponent (component)
+
+**Selector:** `tbody[luDataTableBody]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `group` | `group` | `PortalContent \| null` | `null` | — | — | — |
+| `groupButtonAlt` | `groupButtonAlt` | `string \| null` | `null` | — | — | — |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `expanded` | `unknown` | — | — |
+
+### DataTableRowCellHeaderComponent (component)
+
+**Selector:** `th[luDataTableCell]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `editable` | `editable` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `align` | `align` | `DataTableAlign \| null` | `null` | — | — | Aligne le contenu des cellules horizontalement. |
+| `fixedWidth` | `fixedWidth` | `string \| null` | `null` | — | — | — |
+| `inlineSize` | `inlineSize` | `string \| null` | `null` | — | — | Modifie la largeur d’une colonne lorsque layoutFixed est activé. |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `sort` | `DataTableSort \| null` | — | — |
+
+### DataTableRowCellComponent (component)
+
+**Selector:** `td[luDataTableCell]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `editable` | `editable` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `align` | `align` | `DataTableAlign \| null` | `null` | — | — | Aligne le contenu des cellules horizontalement. |
+| `actions` | `actions` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+### DataTableFootComponent (component)
+
+**Selector:** `tfoot[luDataTableFoot]`
+
+### DataTableHeadComponent (component)
+
+**Selector:** `thead[luDataTableHead]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `sticky` | `sticky` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+### DataTableRowComponent (component)
+
+**Selector:** `tr[luDataTableRow]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `selectedLabel` | `selectedLabel` | `string \| null` | `null` | — | — | Texte alternatif restitué à la sélection d’une ligne. |
+| `mixed` | `mixed` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `disabled` | `disabled` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `selected` | `boolean` | — | — |
+
+### DataTableComponent (component)
+
+**Selector:** `lu-data-table`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `hover` | `hover` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `selectable` | `selectable` | `boolean` | `false` | — | `luBooleanAttribute` | Rend les lignes du tableau sélectionnables via des checkbox. |
+| `layoutFixed` | `layoutFixed` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `cellBorder` | `cellBorder` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `nested` | `nested` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `drag` | `drag` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `noOverflow` | `noOverflow` | `boolean` | `false` | — | `luBooleanAttribute` | Désactive le défilement horizontal du tableau. Celui-ci prendra alors la place nécessaire pour afficher tout son contenu… |
+| `responsive` | `responsive` | `ResponsiveConfig<'layoutFixed', true>` | — | — | — | — |
+| `verticalAlign` | `verticalAlign` | `DataTableVerticalAlign \| null` | `null` | — | — | Aligne le contenu des cellules verticalement. |
+| `stickyColsStart` | `stickyColsStart` | `number` | `0` | — | `luNumberAttribute` | Nombre de colonnes figées depuis la gauche. Non compatible avec l’usage de colspan. |
+| `stickyColsEnd` | `stickyColsEnd` | `number` | `0` | — | `luNumberAttribute` | Nombre de colonnes figées depuis la droite. Non compatible avec l’usage de colspan. |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_DATA_TABLE_INSTANCE` | `DataTableComponent` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./data-table.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/data-table/data-table.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/data-table/data-table.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-listings-data-table-angular-basic--docs)
+
+## Changelog
+
+> Diff structurel de l'API (selectors, inputs, outputs, models) entre versions stables, depuis `v21.4.2` jusqu'à `v22.0.0`. Les versions sans changement d'API sont omises.
+
+### 22.0.0
+
+`DataTableRowCellHeaderComponent` :
+  ~ `editable` : transform booleanAttribute → luBooleanAttribute
+`DataTableRowCellComponent` :
+  ~ `editable` : transform booleanAttribute → luBooleanAttribute
+  ~ `actions` : transform booleanAttribute → luBooleanAttribute
+`DataTableHeadComponent` :
+  ~ `sticky` : transform booleanAttribute → luBooleanAttribute
+`DataTableRowComponent` :
+  + `mixed` : boolean
+  ~ `disabled` : transform booleanAttribute → luBooleanAttribute
+`DataTableComponent` :
+  ~ `hover` : transform booleanAttribute → luBooleanAttribute
+  ~ `selectable` : transform booleanAttribute → luBooleanAttribute
+  ~ `layoutFixed` : transform booleanAttribute → luBooleanAttribute
+  ~ `cellBorder` : transform booleanAttribute → luBooleanAttribute
+  ~ `nested` : transform booleanAttribute → luBooleanAttribute
+  ~ `drag` : transform booleanAttribute → luBooleanAttribute
+  ~ `noOverflow` : transform booleanAttribute → luBooleanAttribute
+  ~ `stickyColsStart` : transform numberAttribute → luNumberAttribute
+  ~ `stickyColsEnd` : transform numberAttribute → luNumberAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.1
+
+##### Fixed
+
+- `mod-cellBorder` now applies the correct inline padding to `mod-editable` cells.
+- ResizeObserver instances are now disconnected on destroy to prevent memory leaks.
+
+#### 21.3.0
+
+##### Fixed
+
+- `sort` header now toggles reliably on click (`none` → `ascending` → `descending`) instead of relying on the `ngModel` binding.
+- Sticky columns no longer add offsets to the first and last columns, fixing their positioning.
+
+#### 21.2.0
+
+##### Added
+
+- `mod-critical` modifier for action buttons.
+
+##### Deprecated
+
+- `mod-delete` modifier for action buttons, use `mod-critical` instead.
+
+#### 21.1.0
+
+##### Added
+
+- `intl` input on `tr[luDataTableRow]` to override the component's translations.
+
+#### 21.0.4
+
+##### Fixed
+
+- `mod-verticalAlignMiddle` now works (fixed a broken `@include` that prevented the modifier from being applied).
+
+#### 21.0.0
+
+##### Added
+
+- Sticky columns support: `stickyColsStart` and `stickyColsEnd` inputs on `lu-data-table`, plus an `inlineSize` input on `th[luDataTableCell]`.
+- `noOverflow` input on `lu-data-table` (rendered as `mod-noOverflow`) to let the table size to its content instead of scrolling.
+- `drag` input on `lu-data-table` to enable drag & drop of rows, adding a drag handle (with a translated `move` label) and the `mod-draggable` row modifier.
+
+##### Changed
+
+- The pagination slot now stays sticky at the bottom of the scrollable table.
+
+##### Fixed
+
+- Scroll shadows are now recomputed when the table is resized.
+- Prevent runtime errors when data-table sub-components are rendered without their expected parent (table, row and cell references are now injected optionally).
+
+#### 20.3.4
+
+##### Changed
+
+- `sort` model now uses `'none'` (with a default of `null`) instead of `undefined` for the unsorted state.
+
+##### Fixed
+
+- Selected-row background is no longer applied to header rows.
+
+#### 20.3.2
+
+##### Changed
+
+- `sort` on `th[luDataTableCell]` is now a two-way bindable `model()` instead of an input.
+- Group headers (`group` input on `tbody[luDataTableBody]`) now render `PortalContent` (templates or components) instead of plain text only.
+
+##### Fixed
+
+- Checkbox vertical alignment in the first cell of a selectable row.
+- `mod-actions` cells now use symmetric inline padding.
+
+#### 20.3.1
+
+##### Added
+
+- Pagination content slot via the `[dataTablePagination]` selector.
+
+#### 20.3.0
+
+##### Added
+
+- Initial Angular wrapper for the data table:
+  - `lu-data-table` (`DataTableComponent`) with inputs `hover`, `selectable`, `layoutFixed`, `cellBorder`, `nested`, `verticalAlign` and `responsive`.
+  - `thead[luDataTableHead]` with a `sticky` input.
+  - `tbody[luDataTableBody]` with `group`, `groupButtonAlt` and `expanded` inputs.
+  - `tfoot[luDataTableFoot]`.
+  - `tr[luDataTableRow]` with `selected`, `selectedLabel` and `disabled` inputs.
+  - `td[luDataTableCell]` with `align`, `editable` and `actions` inputs.
+  - `th[luDataTableCell]` (header cell) with `sort`, `fixedWidth`, `editable` and `align` inputs.
+
+#### 20.2.3
+
+##### Fixed
+
+- z-index and tag positioning inside sticky tables.
+
+#### 20.2.2
+
+##### Fixed
+
+- Background color of grouped rows.
+
+#### 19.2.6
+
+##### Fixed
+
+- Alignment of tags, statuses and avatars inside cells.
+
+#### 19.2.1
+
+##### Fixed
+
+- Sticky header combined with sortable columns.
+- Horizontal overflow on WebKit browsers.
+
+#### 19.1.1
+
+##### Fixed
+
+- White shadow rendering on Chrome.
+
+#### 19.1.0
+
+##### Added
+
+- Initial `dataTable` HTML/SCSS component, including its modifiers (`mod-cellBorder`, `mod-alignTop`, `mod-layoutFixed`, `mod-selectable`, `mod-draggable`, ...) and the companion `dataTableSticked` sticky styles.

package/llms/references/components/date/date.component.md

@@ -0,0 +1,31 @@
+# date — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-filterspills-date-angular--docs)
+
+## Angular
+
+### Filter pill
+
+```js
+import { LOCALE_ID } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DateInputComponent, DateRangeInputComponent } from '@lucca-front/ng/date2';
+import { FilterPillComponent } from '@lucca-front/ng/filter-pills';
+import { CheckboxInputComponent } from '@lucca-front/ng/forms';
+```
+
+```html
+<lu-filter-pill label="Date de début" name="startDate">
+	<lu-date-input [(ngModel)]="example" clearable />
+</lu-filter-pill>
+
+<pr-story-model-display>{{ example }}</pr-story-model-display>
+
+<hr class="divider pr-u-marginBlock400" />
+
+<lu-filter-pill label="Période" name="periode">
+	<lu-date-range-input [(ngModel)]="examplePeriod" clearable />
+</lu-filter-pill>
+
+<pr-story-model-display>{{ examplePeriod | json }}</pr-story-model-display>
+```

package/llms/references/components/date/date.md

@@ -0,0 +1,140 @@
+# date
+
+## Import
+
+```typescript
+import { LuCalendarInputComponent, LuDateInputDirective, LuDatePickerComponent, LuDateSelectInputComponent } from '@lucca-front/ng/date';
+```
+
+## API Reference
+
+### LuCalendarInputComponent (component)
+
+**Selector:** `lu-calendar`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `min` | `min` | `D` | — | — | — | — |
+| `max` | `max` | `D` | — | — | — | — |
+| `granularity` | `granularity` | `LuDateGranularity` | `ELuDateGranularity.day` | — | — | — |
+| `startOn` | `startOn` | `D` | — | — | — | — |
+
+### LuDateInputDirective (directive)
+
+**Selector:** `input[luDateInput]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `min` | `min` | `D` | — | — | — | — |
+| `max` | `max` | `D` | — | — | — | — |
+| `granularity` | `granularity` | `LuDateGranularity` | `ELuDateGranularity.day` | — | — | — |
+| `placeHolderInput` | `placeholder` | `string` | `''` | — | — | — |
+| `intl` | `intl` | `unknown` | — | — | — | — |
+
+### LuDatePickerComponent (component)
+
+**Selector:** `lu-date-picker`
+
+**exportAs:** `LuDatePicker`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `min` | `min` | `D` | — | — | — | — |
+| `max` | `max` | `D` | — | — | — | — |
+| `granularity` | `granularity` | `LuDateGranularity` | `ELuDateGranularity.day` | — | — | — |
+| `startOn` | `startOn` | `D` | — | — | — | — |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `closeOutput` | `closeOutput` | `void` | — |
+| `openOutput` | `openOutput` | `void` | — |
+| `hoveredOutput` | `hoveredOutput` | `void` | — |
+| `onSelectValueOutput` | `onSelectValueOutput` | `void` | — |
+
+### LuDateSelectInputComponent (component)
+
+**Selector:** `lu-date-select`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `min` | `min` | `D` | — | — | — | — |
+| `max` | `max` | `D` | — | — | — | — |
+| `granularity` | `granularity` | `LuDateGranularity` | `ELuDateGranularity.day` | — | — | — |
+| `hideClearer` | `hideClearer` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `startOn` | `startOn` | `D` | — | — | — | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_DATE_INPUT_TRANSLATIONS` | `unknown` | — |
+| `LU_DATE_SELECT_INPUT_TRANSLATIONS` | `unknown` | — |
+
+### Pipes
+
+| Pipe | Classe | transform | Description |
+|------|--------|-----------|-------------|
+| `luDate` | `LuDateAdapterPipe` | `(d: D, format = 'mediumDate'): string` | — |
+| `luHumanizeDate` | `LuHumanizeDatePipe` | `(value: Date \| string \| number, allowedUnits?: readonly LuRelativeTimeFormatUnit[]): Observable<string>` | — |
+
+### Services
+
+#### LuHumanizeDateFormatter
+
+- `format(relativeTime: LuRelativeTime): string`
+
+### Modules dépréciés
+
+- ⚠️ `LuDateAdapterModule` — use `LuDateAdapterPipe` instead
+- ⚠️ `LuDateModule` — use `LuCalendarInputComponent, LuDatePickerComponent, LuDateInputDirective, LuDateAdapterPipe, LuDateSelectInputComponent` instead
+- ⚠️ `LuDatePickerModule` — use `LuDatePickerComponent` instead
+- ⚠️ `LuDateSelectInputModule` — use `LuDateSelectInputComponent` instead
+
+## Related files
+
+- 📝 [Code & implementation](./date.component.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-filterspills-date-angular--docs)
+
+## Changelog
+
+> Diff structurel de l'API (selectors, inputs, outputs, models) entre versions stables, depuis `v21.4.2` jusqu'à `v22.0.0`. Les versions sans changement d'API sont omises.
+
+### 22.0.0
+
+`LuCalendarInputComponent` :
+  ~ `min` : unknown → D
+  ~ `max` : unknown → D
+  ~ `startOn` : défaut this._adapter.forgeToday() → ∅
+`LuDateInputDirective` :
+  ~ `min` : unknown → D
+  ~ `max` : unknown → D
+  ~ `placeholder` : défaut ∅ → ''
+`LuDatePickerComponent` :
+  ~ `min` : unknown → D
+  ~ `max` : unknown → D
+  ~ `startOn` : défaut this._adapter.forgeToday() → ∅
+  + (output) `closeOutput` : void
+  + (output) `openOutput` : void
+  + (output) `hoveredOutput` : void
+  + (output) `onSelectValueOutput` : void
+  - (output) `close`
+  - (output) `open`
+  - (output) `hovered`
+  - (output) `onSelectValue`
+`LuDateSelectInputComponent` :
+  - `placeholder`
+  ~ `min` : unknown → D
+  ~ `max` : unknown → D
+  ~ `hideClearer` : transform ∅ → luBooleanAttribute

package/llms/references/components/dateinput/dateinput.component.md

@@ -0,0 +1,99 @@
+# dateinput — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-date2-dateinput--docs)
+
+## Angular
+
+Component selector : `lu-date-input`
+
+DateInput (`lu-date-input`) est le composant qui vient remplacer et moderniser `lu-date-picker`, il est fait pour s'intégrer dans un `lu-form-field` comme tous les composants `lu-***-input`.
+
+### Utilisation
+
+Le composant s'utilise via la balise `lu-form-field` et supporte `ngModel` ainsi que `formControl` comme tous les composants d'input nouvelle génération au sein de lucca-front.
+
+### Configuration
+
+Il est possible d'utiliser `lu-date-input` de plusieurs façons différentes, via ses inputs, tout d'abord:
+
+- `min` et `max`, servent à définir des dates minimales et maximales pour la sélection, **ils ne constituent pas un validateur**, ainsi, vous devrez spécficier un `Validator` à la main pour traiter une sélection hors limites comme erreur.
+- `hideToday` permet de désactiver le style spécifique appliqué au jour en cours.
+- `hasTodayButton` permet d'ajouter un bouton "aujourd'hui", automatiquement traduit via `Intl`, qui sélectionne la date d'aujourd'hui.
+- `hideWeekend` permet de désactiver le style spécifiques des jours du weekend.
+- `clearable` permet d'ajouter un bouton "clear" à la fin de l'input.
+
+Le composant utilise uniquement des objets de type `Date`, le premier jour de la semaine ainsi que les jours du weekend sont récupérés via la locale Angular, car à ce jour, l'implémentation proposée dans `Intl` n'est pas présente dans Firefox.
+
+### Configuration avancée
+
+Dans le cas ou la donnée attendue doit être un mois ou une année, il est possible de passer par l'input `mode` et spécifier `day`, `month` ou `year` (ce qui correspond au type `CalendarMode`) en fonction de la donnée attendue.
+Dans tous les cas, le date sera au début de la période sélectionnée, exemples:
+
+- Si l’utilisateur sélectionne le 8/10/2024 en mode `day`, la date sélectionnée sera `Tue Oct 08 2024 00:00:00 GMT+0200 (heure d’été d’Europe centrale)`
+- Si l’utilisateur sélectionne 10/2024 en mode `month`, la date sélectionnée sera `Tue Oct 01 2024 00:00:00 GMT+0200 (heure d’été d’Europe centrale)`
+- Si l’utilisateur sélectionne 2024 en mode `year`, la date sélectionnée sera `Mon Jan 01 2024 00:00:00 GMT+0100 (heure normale d’Europe centrale)`
+
+Il vous reste donc à appeler la méthode que vous souhaitez sur l'objet date pour récupérer ce qui compte dans votre contexte.
+
+Il est également possible, via l'input `getCellInfo`, de mettre des classes ou états personnalisés sur des cellules spécifiques.
+
+La signature de cette méthode est `(day: Date, mode: CalendarMode) => CellStatus`, voici un exemple:
+
+Enfin, il est possible de spécifier des `ranges` via l'input du même nom. Chaque range (de type `DateRange`) sera alors affiché dans le calendrier, au niveau spécifié par sa variable `scope`, ou, à défaut, en vue `day` uniquement.
+
+### Input
+
+```js
+import { LOCALE_ID } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CALENDAR_MODE, DATE2_CLEAR_BEHAVIOR, DATE_FORMAT_CONST, DateInputComponent } from '@lucca-front/ng/date2';
+import { FormFieldComponent } from '@lucca-front/ng/form-field';
+import { IconComponent } from '@lucca-front/ng/icon';
+```
+
+```html
+<lu-form-field label="Date input example" inlineMessage="Inline message example">
+	<lu-date-input
+		[(ngModel)]="selected"
+		[min]="min"
+		[max]="max"
+		[focusedDate]="focusedDate"
+		autocomplete="off"
+		format="date"
+	/>
+</lu-form-field>
+
+<pr-story-model-display>{{ selected }}</pr-story-model-display>
+```
+
+```html
+<lu-form-field label="Date input example" inlineMessage="Inline message example">
+	<lu-date-input
+		[(ngModel)]="selected"
+		[min]="min"
+		[max]="max"
+		[focusedDate]="focusedDate"
+		autocomplete="off"
+		mode="week"
+		format="date"
+	/>
+</lu-form-field>
+
+<pr-story-model-display>{{ selected }}</pr-story-model-display>
+```
+
+### Input field
+
+```js
+import { LOCALE_ID } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CALENDAR_MODE, DATE2_CLEAR_BEHAVIOR, DateInputComponent } from '@lucca-front/ng/date2';
+import { FormFieldComponent } from '@lucca-front/ng/form-field';
+```
+
+```html
+<lu-form-field>
+	<lu-date-input [(ngModel)]="selected" [min]="min" [max]="max" autocomplete="off" />
+</lu-form-field>
+<pr-story-model-display>{{ selected }}</pr-story-model-display>
+```