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

package/llms/references/components/simple-select/simple-select.md

@@ -0,0 +1,291 @@
+# simple-select
+
+## Import
+
+```typescript
+import { LuSimpleSelectInputComponent, LuSelectPanelComponent } from '@lucca-front/ng/simple-select';
+```
+
+## API Reference
+
+### LuSimpleSelectInputComponent (component)
+
+**Selector:** `lu-simple-select`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `autocomplete` | `autocomplete` | `AutoFill \| null` | `'off'` | — | — | — |
+| `impersonation` | `impersonation` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+### LuSelectPanelComponent (component)
+
+**Selector:** `lu-select-panel`
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_SIMPLE_SELECT_TRANSLATIONS` | `unknown` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./simple-select.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/simple-select/simple-select.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/simple-select/simple-select.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-fields-simple-select-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
+
+`LuSimpleSelectInputComponent` :
+  ~ `autocomplete` : AutoFill → AutoFill | null
+  ~ `impersonation` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.1
+
+##### Added
+
+- `departments`: use a dedicated API call to fetch the total count of departments.
+
+##### Fixed
+
+- `overlay`: keep connected overlay panels out of the `pushPanel` zone so the panel positions correctly.
+- `search`: allow `Ctrl`/`Cmd` + `V` paste in the search field.
+
+#### 21.3.0
+
+##### Added
+
+- `impersonation`: new boolean input that displays the select in impersonation mode (keeps the search icon and hides the clear/chevron affordances).
+
+##### Fixed
+
+- `highlight`: fix option highlighting when mixing mouse hover and keyboard navigation.
+- `accessibility`: expose the selected value through `aria-labelledby` so assistive technologies announce it correctly.
+
+#### 21.2.4
+
+##### Fixed
+
+- `users`: fix the response type used to read the total count of the users directive.
+
+#### 21.2.3
+
+##### Fixed
+
+- `departments`: no longer load infinitely when the API returns a multiple of `pageSize` items.
+
+#### 21.2.2
+
+##### Fixed
+
+- `loading`: fix the panel loading state display.
+
+#### 21.2.1
+
+##### Removed
+
+- `former employees`: remove the `panelHeader` setting used to display the former employees clue.
+
+#### 21.1.3
+
+##### Fixed
+
+- `presentation`: display an empty value the same way as other inputs in presentation mode.
+- `optionComparer`: do not compare options when the value is nil.
+
+#### 21.1.1
+
+##### Fixed
+
+- `intl`: the `intl` inputs are now public.
+
+#### 21.1.0
+
+##### Added
+
+- `presentation`: support the form-field presentation display mode, rendering the current value through `*luPresentationDisplay`.
+- `intl`: new input to override the component's translations.
+
+#### 21.0.4
+
+##### Fixed
+
+- `highlight`: take panel elements into account when computing the highlighted option.
+
+#### 21.0.3
+
+##### Fixed
+
+- `panel`: keep an 8px margin from the viewport edges so the panel no longer overflows the screen.
+
+#### 21.0.2
+
+##### Changed
+
+- `addOption`: the add-option action now sticks to the bottom of the panel.
+- `api directives`: select directives are consolidated around a common implementation.
+
+#### 21.0.0
+
+##### Added
+
+- `prefix`: new input to display a prefix (template or icon) inside the field.
+- `placeholder`: display a default placeholder when none is provided.
+- `occupation-category`: new select directive, with its mock data.
+
+##### Changed
+
+- `emptyState`: show a distinct message (`emptyOptions`) when there are no options versus no search results (`emptyResults`).
+
+#### 20.3.2
+
+##### Fixed
+
+- `grouping`: fix a change detection issue on the grouping property.
+- `grouping`: wait for establishment grouping calls to be fetched before fetching options.
+
+#### 20.3.1
+
+##### Fixed
+
+- `panel`: improve the panel placement update logic.
+
+#### 20.2.3
+
+##### Fixed
+
+- `departments`: fix an `optionComparer` crash.
+
+#### 20.2.1
+
+##### Fixed
+
+- `accessibility`: fix the `aria-selected` status of options.
+- `users`: add the missing `uniqueOperationIds` for the `me` lookup.
+
+#### 20.2.0
+
+##### Added
+
+- `tree`: support tree mode to display and select nested options.
+
+#### 20.1.3
+
+##### Fixed
+
+- `autocomplete`: fix the DOM attribute type and keep `off` as the default.
+
+#### 20.1.2
+
+##### Fixed
+
+- `homonyms`: additional data was missing when searching.
+
+#### 20.1.0
+
+##### Added
+
+- `accessibility`: keyboard navigation for the add-option action and support for custom panel headers and footers.
+
+##### Changed
+
+- `autocomplete`: the input now defaults to `off`.
+
+#### 19.3.4
+
+##### Added
+
+- `optionComparer`: can be overridden for the API v4 directives.
+
+#### 19.3.2
+
+##### Fixed
+
+- `focus`: focus the input again after the panel is closed.
+
+#### 19.3.0
+
+##### Added
+
+- `users`: support a custom user option template.
+
+##### Removed
+
+- `LuSimpleSelectApiV3Directive`: removed, use `LuCoreSelectApiV3Directive` from `@lucca-front/ng/core-select/api` instead.
+
+#### 19.2.6
+
+##### Fixed
+
+- `clearable`: hide the clear button when the select is used in filter pill mode.
+
+#### 19.2.5
+
+##### Fixed
+
+- `keyboard`: fix the space key not opening the panel properly.
+
+#### 19.2.4
+
+##### Fixed
+
+- `grouping`: fix the option id when grouping.
+- `focus`: don't focus the checkbox when the panel is opened.
+- `api v4`: improve the initialization logic to prevent useless API calls.
+
+#### 19.2.1
+
+##### Changed
+
+- `inputs`: accept readonly arrays.
+
+#### 19.2.0
+
+##### Added
+
+- `filterPill`: support filter pill mode so the select can be used inside `lu-filter-pill`.
+- `search`: display a search icon when the field is searchable.
+- `noClue`: new directive to disable the API v3/v4 search.
+
+#### 19.1.5
+
+##### Added
+
+- `api directives`: new `uniqueOperationIds` input on the establishments and users directives.
+
+#### 18.3.3
+
+##### Changed
+
+- `overlay`: the select no longer overrides the overlay container.
+
+##### Fixed
+
+- `search`: fix search when using `luOptionGroup`.
+
+#### 18.3.0
+
+##### Added
+
+- `users`: support `enableFormerEmployees` on the users select directive.
+
+##### Fixed
+
+- `portal`: handle nullish portal values.
+
+#### 18.1.2
+
+##### Fixed
+
+- `highlight`: fix the missing highlighted option issue.
+- `highlight`: fix the missing highlighted item after the search clue changes.
+- `clearable`: hide the clear button when the select is disabled.

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

@@ -0,0 +1,133 @@
+# skeleton — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-loaders-skeleton--docs)
+
+## Angular
+
+Mots-clés : placeholder, chargement, loading
+
+## HTML/CSS
+
+Classe CSS : `.skeleton`
+
+La classe `.skeleton` englobe les différents éléments enfants (`.skeleton-item`) qui seront affichés lors de la phase de chargement. 
+
+Le statut `.is-loading` active l'état de chargement des éléments enfants.
+
+### Align
+
+```css
+@forward '@lucca-front/scss/src/components/skeleton';
+```
+
+```html
+<div class="skeleton is-loading">
+	<span class="skeleton-item" style="--components-skeleton-text-width: 50%"></span>
+	<span class="skeleton-item mod-alignCenter" style="--components-skeleton-text-width: 50%"></span>
+	<span class="skeleton-item mod-alignRight" style="--components-skeleton-text-width: 50%"></span>
+</div>
+```
+
+### Circle
+
+Les formes permettent de marquer le chargement de certains éléments spécifiques comme les [avatars](https://prisme.lucca.io/94310e217/p/42b330-avatar).
+
+Il est possible de contrôler les taille des formes plus précisement via les variables `--components-skeleton-shape-height` et `--components-skeleton-shape-width`.
+
+```css
+@forward '@lucca-front/scss/src/components/skeleton';
+```
+
+```html
+<div class="skeleton is-loading pr-u-displayFlex pr-u-gap100 pr-u-alignItemsCenter">
+	<span class="skeleton-item mod-circle mod-XS"></span>
+	<span class="skeleton-item mod-circle mod-S"></span>
+	<span class="skeleton-item mod-circle"></span>
+	<span class="skeleton-item mod-circle mod-L"></span>
+	<span class="skeleton-item mod-circle mod-XL"></span>
+	<span class="skeleton-item mod-circle mod-XXL"></span>
+</div>
+```
+
+### Dark
+
+L'option sombre permet d'optimiser l'affichage du skeleton sur un fond gris. 
+
+`.mod-dark` peut être utilisé sur `skeleton-item` pour une mise en forme plus fine.
+
+```css
+@forward '@lucca-front/scss/src/components/skeleton';
+```
+
+```html
+<div class="skeleton mod-dark is-loading">
+	<h1 class="skeleton-item"></h1>
+	<span class="skeleton-item"></span>
+</div>
+```
+
+### Square
+
+Les formes permettent de marquer le chargement de certains éléments spécifiques comme les [avatars](https://prisme.lucca.io/94310e217/p/42b330-avatar).
+
+Il est possible de contrôler les taille des formes plus précisement via les variables `--components-skeleton-shape-height` et `--components-skeleton-shape-width`.
+
+```css
+@forward '@lucca-front/scss/src/components/skeleton';
+```
+
+```html
+<div class="skeleton is-loading pr-u-displayFlex pr-u-gap100 pr-u-alignItemsCenter">
+	<span class="skeleton-item mod-square mod-XS"></span>
+	<span class="skeleton-item mod-square mod-S"></span>
+	<span class="skeleton-item mod-square"></span>
+	<span class="skeleton-item mod-square mod-L"></span>
+	<span class="skeleton-item mod-square mod-XL"></span>
+	<span class="skeleton-item mod-square mod-XXL"></span>
+</div>
+```
+
+### Texts
+
+```css
+@forward '@lucca-front/scss/src/components/skeleton';
+```
+
+```html
+<div class="skeleton is-loading">
+	<span class="skeleton-item"></span>
+	<span class="skeleton-item pr-u-bodyS"></span>
+	<span class="skeleton-item pr-u-bodyXS"></span>
+</div>
+```
+
+### Titles
+
+Les skeletons fonctionnent également avec les utilitaires dédiés à la taille des titres `.pr-u-h1`, `.pr-u-h2`, `.pr-u-h3` et `.pr-u-h4`
+
+```css
+@forward '@lucca-front/scss/src/components/skeleton';
+```
+
+```html
+<div class="skeleton is-loading">
+	<h1 class="skeleton-item"></h1>
+	<h2 class="skeleton-item"></h2>
+	<h3 class="skeleton-item"></h3>
+	<h4 class="skeleton-item"></h4>
+</div>
+```
+
+### Width
+
+```css
+@forward '@lucca-front/scss/src/components/skeleton';
+```
+
+```html
+<div class="skeleton is-loading">
+	<span class="skeleton-item" style="--components-skeleton-text-width: 20%"></span>
+	<span class="skeleton-item pr-u-bodyS" style="--components-skeleton-text-width: 80%"></span>
+	<span class="skeleton-item pr-u-bodyXS" style="--components-skeleton-text-width: 40%"></span>
+</div>
+```

package/llms/references/components/skeleton/skeleton.md

@@ -0,0 +1,212 @@
+# skeleton
+
+## Import
+
+```typescript
+import { SkeletonButtonComponent, SkeletonCardComponent, SkeletonDataTableComponent, SkeletonFancyBoxComponent, SkeletonFieldComponent, SkeletonHeaderComponent, SkeletonHighlightDataComponent, SkeletonIndexTableComponent, SkeletonTableComponent, SkeletonUserPopoverComponent } from '@lucca-front/ng/skeleton';
+```
+
+## API Reference
+
+### SkeletonButtonComponent (component)
+
+**Selectors:** `lu-skeleton-button`, `pr-skeleton-button`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `dark` | `dark` | `boolean` | `false` | — | `booleanAttribute` | — |
+| `size` | `size` | `'XS' \| 'S' \| 'M'` | — | — | — | — |
+
+### SkeletonCardComponent (component)
+
+**Selector:** `lu-skeleton-card`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `descriptionLines` | `descriptionLines` | `number` | `1` | — | `numberAttribute` | — |
+
+### SkeletonDataTableComponent (component)
+
+**Selectors:** `lu-skeleton-data-table`, `pr-skeleton-data-table`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `dataTableBodyOnly` | `dataTableBodyOnly` | `boolean` | `false` | — | `booleanAttribute` | — |
+| `cols` | `cols` | `number` | `5` | — | `numberAttribute` | — |
+| `colsAlign` | `colsAlign` | `Record<number, SkeletonColsAlign>` | — | — | — | — |
+| `rows` | `rows` | `number` | `8` | — | `numberAttribute` | — |
+
+### SkeletonFancyBoxComponent (component)
+
+**Selector:** `lu-skeleton-fancy-box`
+
+### SkeletonFieldComponent (component)
+
+**Selectors:** `lu-skeleton-field`, `pr-skeleton-field`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `dark` | `dark` | `boolean` | `false` | — | `booleanAttribute` | — |
+| `hiddenLabel` | `hiddenLabel` | `boolean` | `false` | — | `booleanAttribute` | — |
+| `size` | `size` | `'XS' \| 'S' \| 'M'` | — | — | — | — |
+| `rows` | `rows` | `number` | `1` | — | `numberAttribute` | — |
+
+### SkeletonHeaderComponent (component)
+
+**Selectors:** `lu-skeleton-header`, `pr-skeleton-header`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `dark` | `dark` | `boolean` | `false` | — | `booleanAttribute` | — |
+
+### SkeletonHighlightDataComponent (component)
+
+**Selector:** `lu-skeleton-highlight-data`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `dark` | `dark` | `boolean` | `false` | — | `booleanAttribute` | — |
+
+### SkeletonIndexTableComponent (component)
+
+**Selectors:** `lu-skeleton-index-table`, `pr-skeleton-index-table`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `tableBodyOnly` | `tableBodyOnly` | `boolean` | `false` | — | `booleanAttribute` | — |
+| `cols` | `cols` | `number` | `5` | — | `numberAttribute` | — |
+| `colsAlign` | `colsAlign` | `Record<number, SkeletonColsAlign>` | — | — | — | — |
+| `rows` | `rows` | `number` | `8` | — | `numberAttribute` | — |
+
+### SkeletonTableComponent (component)
+
+**Selectors:** `lu-skeleton-table`, `pr-skeleton-table`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `tableBodyOnly` | `tableBodyOnly` | `boolean` | `false` | — | `booleanAttribute` | — |
+| `cols` | `cols` | `number` | `5` | — | `numberAttribute` | — |
+| `colsAlign` | `colsAlign` | `Record<number, SkeletonColsAlign>` | — | — | — | — |
+| `rows` | `rows` | `number` | `8` | — | `numberAttribute` | — |
+
+### SkeletonUserPopoverComponent (component)
+
+**Selector:** `lu-skeleton-user-popover`
+
+## Related files
+
+- 📝 [Code & implementation](./skeleton.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/skeleton/skeleton.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/skeleton/skeleton.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-loaders-skeleton--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
+
++ component `SkeletonCardComponent` (lu-skeleton-card)
++ component `SkeletonFancyBoxComponent` (lu-skeleton-fancy-box)
++ component `SkeletonHighlightDataComponent` (lu-skeleton-highlight-data)
+- component `SkeletonResourceCardComponent` retiré
+`SkeletonButtonComponent` :
+  + selector `pr-skeleton-button`
+`SkeletonDataTableComponent` :
+  + selector `pr-skeleton-data-table`
+  ~ `cols` : transform ∅ → numberAttribute
+  ~ `rows` : transform ∅ → numberAttribute
+`SkeletonFieldComponent` :
+  + selector `pr-skeleton-field`
+  ~ `dark` : boolean, boolean | `${boolean}` → boolean
+  ~ `hiddenLabel` : boolean, boolean | `${boolean}` → boolean
+  ~ `rows` : number, number | `${number}` → number
+`SkeletonHeaderComponent` :
+  + selector `pr-skeleton-header`
+`SkeletonIndexTableComponent` :
+  + selector `pr-skeleton-index-table`
+  ~ `cols` : transform ∅ → numberAttribute
+  ~ `rows` : transform ∅ → numberAttribute
+`SkeletonTableComponent` :
+  + selector `pr-skeleton-table`
+  ~ `cols` : transform ∅ → numberAttribute
+  ~ `rows` : transform ∅ → numberAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `SKELETON_BUTTON_SIZE` and `SKELETON_COLS_ALIGN` constants, together with the `SkeletonButtonSize` and `SkeletonColsAlign` types, are now publicly exported and used to type the `size` and `colsAlign` inputs.
+
+##### Fixed
+
+- Randomized line widths no longer change on every render.
+
+#### 21.2.3
+
+##### Added
+
+- `size` input on `lu-skeleton-field`.
+
+#### 21.0.4
+
+##### Fixed
+
+- `lu-skeleton-field` no longer computes a double percentage for its line widths.
+
+#### 21.0.3
+
+##### Added
+
+- `colsAlign` input on `lu-skeleton-table`, `lu-skeleton-index-table` and `lu-skeleton-data-table` to align the placeholder cells.
+
+#### 21.0.0
+
+##### Added
+
+- `S` and `XS` sizes on `lu-skeleton-button`.
+- `lu-skeleton-resource-card` component with the `descriptionLines` input.
+
+#### 20.2.1
+
+##### Fixed
+
+- Default `border-radius` of the square skeleton.
+
+#### 20.1.0
+
+##### Added
+
+- `rows` input on `lu-skeleton-field` to render several lines.
+- `hiddenLabel` input on `lu-skeleton-field`.
+
+#### 19.1.0
+
+##### Added
+
+- `lu-skeleton-table` and `lu-skeleton-index-table` components with the `cols`, `rows` and `tableBodyOnly` inputs.
+- `lu-skeleton-data-table` component with the `dataTableBodyOnly` input.
+
+#### 18.1.0
+
+##### Added
+
+- First batch of skeleton components: `lu-skeleton-button`, `lu-skeleton-field`, `lu-skeleton-header` and `lu-skeleton-user-popover`, with the `dark` input.