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

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

@@ -0,0 +1,298 @@
+# richtextinput — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-fields-richtextinput-angular--docs)
+
+## Angular
+
+RichTextInput (`lu-rich-text-input`) est basé sur [Lexical](https://lexical.dev/).
+
+Component selector : `lu-rich-text-input`
+
+### Dépendances
+
+Avant toute utilisation de `lu-rich-text-input`, il est nécessaire d'ajouter les `peerDependencies` suivantes à votre projet :
+
+En fonction du format désiré en entrée / sortie du composant, les dépendances suivantes doivent être installées:
+
+- HTML
+
+- Markdown
+
+- Plain text
+
+### Formats d'entrée/sortie
+Avant toute utilisation du composant, il est nécessaire de définir le formateur à utiliser.
+
+Trois formateurs par défaut sont disponibles : sous forme de directives ou de services à provide au niveau du composant parent.
+
+#### Markdown
+
+* Directives disponibles :
+  * `luWithMarkdownFormatter` : formateur markdown classique, avec les balises markdown standards.
+  * `luWithMarkdownTagsFormatter` : formateur markdown avec support des [tags personnalisés](#TagTool).
+
+* Providers
+
+#### Plain Text
+
+Ce formateur accepte en paramètres une liste optionnelle de `PlainTextTransformer` pour les noeuds custom.
+
+Il peut être utilisé dans des contextes où le formatage riche n'est pas désiré, mais où l'on souhaite tout de même bénéficier d'un outil en particulier (l'outil [Tags](#TagTool) par exemple).
+
+En conséquent:
+- La plupart des outils n'auront aucun effet sur le contenu de l'éditeur.
+- Il n'intègre pas les raccourcis clavier de formatage de texte (gras, italique, listes, etc...).
+- La récupération du contenu se fait en texte brut lors du copier/coller.
+
+### Barre d'outils
+
+La barre d'outils du `lu-rich-text-input` est configuré directement depuis le template.
+
+Pour plus de simplicité, une barre d'outil par défaut est mise à disposition.
+
+Il est aussi possible de créer une barre d'outil personnalisée en assemblant les outils existant et en y ajoutant de nouvelles fonctionnalités.
+
+Il est nécessaire d'avoir la barre d'outil pour utiliser les noeuds Lexical correspondants aux outils.
+Pour cacher la barre d'outil tout en gardant les fonctionnalités, il est possible d'utiliser le composant `lu-rich-text-input` avec l'attribut `hideToolbar`.
+
+#### Styles
+
+- Bouton de style individuel
+
+- Barre préconfigurée (Gras, Italique, Souligné)
+
+#### Listes
+
+- Barre préconfigurée (Puces, Numérotées)
+
+#### Titres
+
+- Barre préconfigurée (Paragraphe, H1, H2, H3...)
+
+#### Liens
+
+- Outil individuel
+
+#### Suppression du formatage
+
+- Outil individuel
+
+#### <a id="TagTool"></a>Tag
+
+- Outil individuel
+
+L'outil prend en paramètre une liste de tag personnalisés, qu'il est possible d'insérer dans le contenu de l'éditeur, sous forme de chips.
+
+Chaque tag est un objet avec une clé et une description optionnelle. La clé est utilisée pour l'insertion dans le contenu réel de l'éditeur, la description est uniquement utilisée pour la représentation visuelle de la balise.
+
+Si la description n'est pas fournie, la clé sera utilisée à la place.
+
+Les tags ont la forme `{{tag.key}}` dans le contenu brut en entrée/sortie de l'éditeur.
+Si le contenu en entrée de l'éditeur contient des tags non reconnus par l'outil, ils seront automatiquement supprimés.
+
+Pour gérer les tags en markdown ou en plain-text, il est nécessaire de fournir le transformer approprié.
+
+### Ajout d'outils personnalisés
+
+Les outils sont des composants implémentant l'interface `RichTextPluginComponent`. Cette interface est utilisée pour les outils et les barres d'outils.
+Elle définit plusieurs méthodes et propriétés:
+
+- `setEditorInstance(editor: LexicalEditor)` : Permet de récupérer l'instance de l'éditeur lexical lors de sa création, ce qui permet par exemple de s'abonner aux évènements Lexical.
+- `setDisabledState(isDisabled: boolean)` : Permet de gérer l'état désactivé de l'outil.
+- `getLexicalNodes()` : Optionnel. Renvoie les noeuds Lexical spécifiques à l'outil.
+- `focus()` : Optionnel. Permet de définir le comportement de focus de l'outil.
+- `pluginComponents`: Optionnel. `Signal` renvoyant les plugin internes à l'outil, s'il y en a (utilisé par exemple pour les barres d'outils).
+- `tabindex`: Optionnel. `WritableSignal<number>` à appliquer sur l'élément de l'outil qui prend le tabindex lors de la navigation clavier.
+
+Attention: si l'outil s'abonne à des évènements Lexical, il est faut penser à se désabonner lors de la destruction du composant.
+
+### Ajout de formateurs personnalisés
+
+Il est possible d'ajouter des formateurs personnalisés pour le `lu-rich-text-input`. Pour cela, il faut créer une classe qui implémente l'interface `RichTextFormatter`.
+
+### Text input
+
+```js
+import { FormFieldComponent } from '@lucca-front/ng/form-field';
+import { RichTextInputComponent, RichTextInputToolbarComponent } from '@lucca-front/ng/forms/rich-text-input';
+import { provideLuRichTextMarkdownFormatter } from '@lucca-front/ng/forms/rich-text-input/formatters/markdown';
+import { provideLuRichTextHTMLFormatter } from '@lucca-front/ng/forms/rich-text-input/formatters/html';
+import { RichTextInputComponent, RichTextInputToolbarComponent, RichTextPluginTagComponent } from '@lucca-front/ng/forms/rich-text-input';
+import { provideLuRichTextPlainTextFormatter } from '@lucca-front/ng/forms/rich-text-input/formatters/plain-textplain-text';
+```
+
+```html
+<lu-form-field label="Label">
+	<lu-rich-text-input
+		luWithMarkdownFormatter
+		placeholder="Placeholder…"
+		autoResize
+		[(ngModel)]="model.example"
+		[disabled]="disabled"
+		[required]="required"
+	>
+		<lu-rich-text-input-toolbar />
+	</lu-rich-text-input>
+</lu-form-field>
+<pr-story-model-display>{{ model.example }}</pr-story-model-display>
+```
+
+```html
+<lu-form-field label="Label">
+	<lu-rich-text-input
+		luWithHtmlFormatter
+		placeholder="Placeholder…"
+		autoResize
+		[(ngModel)]="model.example"
+		[disabled]="disabled"
+		[required]="required"
+	>
+		<lu-rich-text-input-toolbar />
+		<lu-rich-text-plugin-tag
+			[tags]="[
+				{
+					key: 'tag1',
+					description: 'Tag 1',
+				},
+				{
+					key: 'tag2',
+					description: 'Tag 2',
+				},
+				{
+					key: 'tag3',
+					description: 'Tag 3',
+				},
+				{
+					key: 'tag4',
+					description: 'Tag 4',
+					secondary: true,
+				},
+				{
+					key: 'tag5',
+					description: 'Prénom',
+					secondary: true,
+				},
+				{
+					key: 'tag6',
+					description: 'Téléphone',
+					secondary: true,
+				},
+			]"
+		/>
+	</lu-rich-text-input>
+</lu-form-field>
+<pr-story-model-display>{{ model.example }}</pr-story-model-display>
+```
+
+```html
+<lu-form-field label="Label">
+	<lu-rich-text-input
+		luWithHtmlFormatter
+		placeholder="Placeholder…"
+		autoResize
+		[(ngModel)]="model.example"
+		[disabled]="disabled"
+		[required]="required"
+	>
+		<lu-rich-text-input-toolbar />
+	</lu-rich-text-input>
+</lu-form-field>
+<pr-story-model-display>{{ model.example }}</pr-story-model-display>
+```
+
+```html
+<lu-form-field label="Label">
+	<lu-rich-text-input
+		luWithHtmlFormatter
+		placeholder="Placeholder…"
+		autoResize
+		[(ngModel)]="model.example"
+		[disabled]="disabled"
+		[required]="required"
+	>
+		<lu-rich-text-input-toolbar />
+		<lu-rich-text-plugin-tag
+			[tags]="[
+				{
+					key: 'tag1',
+					description: 'Tag 1',
+				},
+				{
+					key: 'tag2',
+					description: 'Tag 2',
+				},
+				{
+					key: 'tag3',
+					description: 'Tag 3',
+				},
+				{
+					key: 'tag4',
+					description: 'Tag 4',
+					secondary: true,
+					group: 'Groupe 2',
+				},
+				{
+					key: 'tag6',
+					description: 'Téléphone',
+					secondary: true,
+					group: 'Groupe 2',
+				},
+				{
+					key: 'tag5',
+					description: 'Prénom',
+					secondary: true,
+					group: 'Groupe 1',
+				},
+			]"
+		/>
+	</lu-rich-text-input>
+</lu-form-field>
+<pr-story-model-display>{{ model.example }}</pr-story-model-display>
+```
+
+```html
+<lu-form-field label="Label">
+	<lu-rich-text-input
+		luWithMarkdownTagsFormatter
+		placeholder="Placeholder…"
+		autoResize
+		[(ngModel)]="model.example"
+		[disabled]="disabled"
+		[required]="required"
+	>
+		<lu-rich-text-input-toolbar />
+		<lu-rich-text-plugin-tag
+			[tags]="[
+				{
+					key: 'tag1',
+					description: 'Tag 1',
+				},
+				{
+					key: 'tag2',
+					description: 'Tag 2',
+				},
+				{
+					key: 'tag3',
+					description: 'Tag 3',
+				},
+				{
+					key: 'tag4',
+					description: 'Tag 4',
+					secondary: true,
+				},
+				{
+					key: 'tag5',
+					description: 'Prénom',
+					secondary: true,
+				},
+				{
+					key: 'tag6',
+					description: 'Téléphone',
+					secondary: true,
+				},
+			]"
+		/>
+	</lu-rich-text-input>
+</lu-form-field>
+<pr-story-model-display>{{ model.example }}</pr-story-model-display>
+```

package/llms/references/components/richtextinput/richtextinput.md

@@ -0,0 +1,275 @@
+# richtextinput
+
+## Import
+
+```typescript
+import { ClearFormatComponent, HeadingsComponent, LinkComponent, ListStyleToolbarComponent, RichTextPluginTagComponent, TextStyleComponent, TextStyleToolbarComponent, RichTextInputToolbarComponent, RichTextInputComponent } from '@lucca-front/ng/forms/rich-text-input';
+```
+
+## API Reference
+
+### ClearFormatComponent (component)
+
+**Selector:** `lu-rich-text-plugin-clear-format`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+
+### HeadingsComponent (component)
+
+**Selector:** `lu-rich-text-plugin-headings`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `maxHeadingLevel` | `maxHeadingLevel` | `number` | `6` | — | `luNumberAttribute` | — |
+| `intl` | `intl` | `unknown` | — | — | — | — |
+
+### LinkComponent (component)
+
+**Selector:** `lu-rich-text-plugin-link`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+
+### ListStyleToolbarComponent (component)
+
+**Selector:** `lu-rich-text-toolbar-list-style`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+
+### RichTextPluginTagComponent (component)
+
+**Selector:** `lu-rich-text-plugin-tag`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `tags` | `tags` | `Tag[]` | — | ✅ | — | — |
+
+### TextStyleComponent (component)
+
+**Selector:** `lu-rich-text-plugin-text-style`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `format` | `format` | `TextFormatType` | — | ✅ | — | — |
+| `icon` | `icon` | `LuccaIcon` | — | ✅ | — | — |
+| `tooltip` | `tooltip` | `string` | — | ✅ | — | — |
+
+### TextStyleToolbarComponent (component)
+
+**Selector:** `lu-rich-text-toolbar-text-style`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+
+### RichTextInputToolbarComponent (component)
+
+**Selector:** `lu-rich-text-input-toolbar`
+
+### RichTextInputComponent (component)
+
+**Selector:** `lu-rich-text-input`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `placeholder` | `placeholder` | `string` | `''` | — | — | Applique un placeholder au champ. |
+| `disableSpellcheck` | `disableSpellcheck` | `boolean` | `false` | — | `luBooleanAttribute` | Désactive le correcteur d’orthographe. |
+| `autoResize` | `autoResize` | `boolean` | `false` | — | `luBooleanAttribute` | Active / désactive l’autoresize du champ. |
+| `hideToolbar` | `hideToolbar` | `boolean` | `false` | — | `luBooleanAttribute` | Masque les options de mise en forme. |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `RICH_TEXT_FORMATTER` | `RichTextFormatter` | — |
+| `RICH_TEXT_PLUGIN_COMPONENT` | `RichTextPluginComponent` | — |
+
+## Type definitions
+
+- [`LuccaIcon`](../../types/LuccaIcon.md) — 585 available values
+
+## Related files
+
+- 📝 [Code & implementation](./richtextinput.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/richtextinput/richtextinput.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/richtextinput/richtextinput.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-fields-richtextinput-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
+
+`HeadingsComponent` :
+  ~ `maxHeadingLevel` : 1 | 2 | 3 | 4 | 5 | 6 → number, transform ∅ → luNumberAttribute
+`RichTextInputComponent` :
+  ~ `disableSpellcheck` : transform booleanAttribute → luBooleanAttribute
+  ~ `autoResize` : transform booleanAttribute → luBooleanAttribute
+  ~ `hideToolbar` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.1
+
+##### Fixed
+
+- `Shift` + `Enter` no longer inserts a soft line break inside lists.
+- Pending value initialization is handled, so a value set before the editor is ready is no longer lost.
+
+#### 21.3.0
+
+##### Fixed
+
+- Already-encoded link URLs are no longer double-encoded.
+- Markdown input is no longer sanitized, preserving the authored content.
+
+#### 21.2.3
+
+##### Fixed
+
+- Link popover is disabled in `presentation` mode.
+
+#### 21.2.1
+
+##### Fixed
+
+- The delete button is removed from the link popover for autolinks.
+
+#### 21.1.3
+
+##### Fixed
+
+- Trailing whitespace issues with markdown (Lexical update).
+- `!` is now a valid character in URLs.
+- Context issues when editing an existing link.
+
+#### 21.1.1
+
+##### Fixed
+
+- The editor is no longer marked as touched on initialization.
+- Caret position when a tag is added in last position.
+- Input typing of the markdown formatter.
+- Race condition between the child nodes and the editor.
+
+#### 21.1.0
+
+##### Added
+
+- Formatter directives to declare the output format of the editor (`html`, `markdown`, `plain-text`).
+- `presentation` display mode support.
+
+##### Removed
+
+- Underline text style from the toolbar.
+
+#### 21.0.1
+
+##### Fixed
+
+- The tag plugin and the plain-text formatter no longer depend on `@lexical/markdown`.
+
+#### 21.0.0
+
+##### Added
+
+- `hideToolbar` input.
+- `focus()` method on the component.
+- Markdown shortcuts while typing.
+- Autolink plugin, turning typed URLs into links.
+
+#### 20.3.3
+
+##### Fixed
+
+- Better handling of an empty editor content.
+
+#### 20.3.2
+
+##### Fixed
+
+- Focus is no longer stolen when a tag description is updated.
+- Markdown output preserves new lines.
+
+#### 20.3.0
+
+##### Added
+
+- Plain-text plugin support.
+
+#### 20.2.3
+
+##### Added
+
+- Clickable link popover in the link plugin.
+
+##### Fixed
+
+- The tag plugin imports the `chip` styles it relies on.
+
+#### 20.2.2
+
+##### Fixed
+
+- Tags could be displayed as raw keys.
+
+#### 20.2.1
+
+##### Added
+
+- Optional `tabindex` parameter.
+
+#### 20.2.0
+
+##### Added
+
+- Tag plugin, to insert dynamic tags in the content.
+
+#### 20.1.1
+
+##### Fixed
+
+- List buttons state when switching from one list mode to another.
+
+#### 19.3.4
+
+##### Fixed
+
+- `class` attributes are sanitized in the HTML output.
+- Placeholder is displayed at initialization when there is no content.
+
+#### 19.3.1
+
+##### Fixed
+
+- The editor is no longer marked as touched and dirty when an initial value is set.
+- Lexical dependency management.
+
+#### 19.3.0
+
+##### Added
+
+- `lu-rich-text-input` component with the `placeholder`, `autoResize` and `disableSpellcheck` inputs.

package/llms/references/components/scroll/scroll.md

@@ -0,0 +1,45 @@
+# scroll
+
+## Import
+
+```typescript
+import { LuScrollDirective } from '@lucca-front/ng/scroll';
+```
+
+## API Reference
+
+### LuScrollDirective (directive)
+
+**Selector:** `[luScroll]`
+
+**exportAs:** `luScroll`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `debounceTime` | `debounceTime` | `number` | `100` | — | `luNumberAttribute` | — |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `onScroll` | `onScroll` | `Event` | — |
+| `onScrollTop` | `onScrollTop` | `Event` | — |
+| `onScrollBottom` | `onScrollBottom` | `Event` | — |
+| `onScrollLeft` | `onScrollLeft` | `Event` | — |
+| `onScrollRight` | `onScrollRight` | `Event` | — |
+
+### Modules dépréciés
+
+- ⚠️ `LuScrollModule` — use `LuScrollDirective` instead
+
+## Related files
+
+## 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
+
+~ `debounceTime` : transform ∅ → luNumberAttribute

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

@@ -0,0 +1,63 @@
+# scrollbox — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-scrollbox--docs)
+
+## Angular
+
+### Box basic
+
+```js
+import { ScrollBoxComponent } from '@lucca-front/ng/scroll-box';
+```
+
+```html
+<lu-scroll-box>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+</lu-scroll-box>
+<lu-scroll-box
+	[attr.style]="'--components-scrollBox-paddingBlock: var(--pr-t-spacings-200); --components-scrollBox-paddingInline: 0rem; --components-scrollBox-marginBlock: 0rem'"
+>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+	<div class="box">box</div>
+</lu-scroll-box>
+<div class="resize">
+	<lu-scroll-box
+		[attr.style]="'--components-scrollBox-marginBlock: var(--pr-t-spacings-300);--components-scrollBox-marginInline: 0; --components-scrollBox-paddingBlock: var(--pr-t-spacings-300); --components-scrollBox-gap: var(--pr-t-spacings-300);'"
+	>
+		<div class="box">box</div>
+		<div class="box">box</div>
+		<div class="box">box</div>
+	</lu-scroll-box>
+</div>
+<lu-scroll-box>
+	<div style="inline-size: 200vw" class="box">box</div>
+</lu-scroll-box>
+<lu-scroll-box>
+	<div class="box">box</div>
+</lu-scroll-box>
+```