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

package/llms/references/components/popover/popover.md

@@ -0,0 +1,235 @@
+# popover
+
+## Import
+
+```typescript
+import { LuPopoverPanelComponent, LuPopoverTargetDirective, LuPopoverTriggerDirective } from '@lucca-front/ng/popover';
+```
+
+## API Reference
+
+### LuPopoverPanelComponent (component)
+
+**Selector:** `lu-popover`
+
+**exportAs:** `LuPopoverPanel`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `template` | `template` | `TemplateRef<unknown>` | — | — | — | — |
+| `templateContext` | `templateContext` | `unknown` | `undefined` | — | — | — |
+| `inputCloseOnClick` | `inputCloseOnClick` | `boolean` | `false` | — | — | — |
+| `inputTrapFocus` | `inputTrapFocus` | `boolean` | `false` | — | — | — |
+| `inputScrollStrategy` | `inputScrollStrategy` | `'reposition' \| 'block' \| 'close'` | `'reposition'` | — | — | — |
+| `inputPanelClasses` | `inputPanelClasses` | `string` | `''` | — | — | — |
+| `inputContentClasses` | `inputContentClasses` | `string` | `''` | — | — | — |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `closeOutput` | `closeOutput` | `void` | — |
+| `openOutput` | `openOutput` | `void` | — |
+| `hoveredOutput` | `hoveredOutput` | `void` | — |
+
+### LuPopoverTargetDirective (directive)
+
+**Selector:** `[luPopoverTarget]`
+
+**exportAs:** `LuPopoverTarget`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `inputPosition` | `luPopoverPosition` | `'above' \| 'below' \| 'before' \| 'after'` | `undefined` | — | — | — |
+| `inputAlignment` | `luPopoverAlignment` | `'top' \| 'bottom' \| 'left' \| 'right' \| 'center'` | `undefined` | — | — | — |
+| `inputOverlap` | `luPopoverOverlap` | `boolean` | `undefined` | — | — | — |
+| `inputOffsetX` | `luPopoverOffsetX` | `number` | `undefined` | — | — | — |
+| `inputOffsetY` | `luPopoverOffsetY` | `number` | `undefined` | — | — | — |
+
+### LuPopoverTriggerDirective (directive)
+
+**Selector:** `[luPopover]`
+
+**exportAs:** `LuPopoverTrigger`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `inputPanel` | `luPopover` | `TPanel` | `undefined` | — | — | — |
+| `inputTarget` | `luPopoverTarget` | `TTarget` | `undefined` | — | — | — |
+| `inputTriggerEvent` | `luPopoverTrigger` | `'click' \| 'hover' \| 'none' \| 'focus'` | `undefined` | — | — | — |
+| `inputPosition` | `luPopoverPosition` | `LuPopoverPosition` | `undefined` | — | — | — |
+| `inputAlignment` | `luPopoverAlignment` | `LuPopoverAlignment` | `undefined` | — | — | — |
+| `inputEnterDelay` | `luPopoverEnterDelay` | `number` | `undefined` | — | — | — |
+| `inputLeaveDelay` | `luPopoverLeaveDelay` | `number` | `undefined` | — | — | — |
+| `inputDisabled` | `luPopoverDisabled` | `boolean` | `undefined` | — | — | — |
+| `inputOverlap` | `luPopoverOverlap` | `boolean` | `undefined` | — | — | — |
+| `inputOffsetX` | `luPopoverOffsetX` | `number` | `undefined` | — | — | — |
+| `inputOffsetY` | `luPopoverOffsetY` | `number` | `undefined` | — | — | — |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `onCloseOutput` | `onCloseOutput` | `void` | — |
+| `onOpenOutput` | `onOpenOutput` | `void` | — |
+
+### Modules dépréciés
+
+- ⚠️ `LuPopoverPanelModule` — use `LuPopoverPanelComponent` instead
+- ⚠️ `LuPopoverModule` — use `LuPopoverPanelComponent, LuPopoverTargetDirective, LuPopoverTriggerDirective` instead
+
+## Related files
+
+- 📝 [Code & implementation](./popover.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/popover/popover.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-overlays-popover--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
+
+`LuPopoverPanelComponent` :
+  + `templateContext` : unknown
+  + `inputCloseOnClick` : boolean
+  + `inputTrapFocus` : boolean
+  + `inputScrollStrategy` : 'reposition' | 'block' | 'close'
+  + `inputPanelClasses` : string
+  + `inputContentClasses` : string
+  - `template-context`
+  - `close-on-click`
+  - `trap-focus`
+  - `scroll-strategy`
+  - `panel-classes`
+  - `content-classes`
+  + (output) `closeOutput` : void
+  + (output) `openOutput` : void
+  + (output) `hoveredOutput` : void
+  - (output) `close`
+  - (output) `open`
+  - (output) `hovered`
+`LuPopoverTargetDirective` :
+  ~ `luPopoverPosition` : LuPopoverPosition → 'above' | 'below' | 'before' | 'after', défaut ∅ → undefined
+  ~ `luPopoverAlignment` : LuPopoverAlignment → 'top' | 'bottom' | 'left' | 'right' | 'center', défaut ∅ → undefined
+  ~ `luPopoverOverlap` : défaut ∅ → undefined
+  ~ `luPopoverOffsetX` : défaut ∅ → undefined
+  ~ `luPopoverOffsetY` : défaut ∅ → undefined
+`LuPopoverTriggerDirective` :
+  ~ `luPopover` : défaut ∅ → undefined
+  ~ `luPopoverTarget` : défaut ∅ → undefined
+  ~ `luPopoverTrigger` : LuPopoverTriggerEvent → 'click' | 'hover' | 'none' | 'focus', défaut ∅ → undefined
+  ~ `luPopoverPosition` : défaut ∅ → undefined
+  ~ `luPopoverAlignment` : défaut ∅ → undefined
+  ~ `luPopoverEnterDelay` : défaut ∅ → undefined
+  ~ `luPopoverLeaveDelay` : défaut ∅ → undefined
+  ~ `luPopoverDisabled` : défaut ∅ → undefined
+  ~ `luPopoverOverlap` : défaut ∅ → undefined
+  ~ `luPopoverOffsetX` : défaut ∅ → undefined
+  ~ `luPopoverOffsetY` : défaut ∅ → undefined
+  + (output) `onCloseOutput` : void
+  + (output) `onOpenOutput` : void
+  - (output) `luPopoverOnOpen`
+  - (output) `luPopoverOnClose`
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.1
+
+##### Fixed
+
+- Connected overlays are kept out of the push panel zone, so a popover is no longer clipped by it.
+
+#### 21.3.0
+
+##### Added
+
+- `luPopoverMaxInlineSize` and `luPopoverMaxBlockSize` inputs to cap the size of the popover panel.
+
+#### 21.1.4
+
+##### Fixed
+
+- The popover no longer opens when its content is `null` or `undefined`.
+
+#### 21.1.0
+
+##### Changed
+
+- `intl` input now accepts partial overrides that are merged with the default translations.
+
+#### 21.0.4
+
+##### Fixed
+
+- Opening position of the panel when the trigger is close to the viewport edge.
+
+#### 21.0.3
+
+##### Added
+
+- The overlay scroll strategy can now be customized.
+
+#### 20.1.1
+
+##### Fixed
+
+- Focus is brought back to the trigger when the popover closes in focus mode.
+
+#### 19.2.4
+
+##### Added
+
+- `luPopoverOpened` output.
+
+#### 19.1.0
+
+##### Added
+
+- `luPopoverAnchor` input to position the popover against another element, and the `luPopoverClosed` output.
+
+#### 18.2.1
+
+##### Added
+
+- The directive is exported as `luPopover2` and exposes a `close()` method.
+
+#### 18.2.0
+
+##### Added
+
+- Option to remove the keyboard close button.
+- `hover+focus` trigger mode.
+
+##### Fixed
+
+- The popover is repositioned after its content changes.
+
+#### 18.1.5
+
+##### Fixed
+
+- Focus trap of the popover panel.
+
+#### 18.1.2
+
+##### Changed
+
+- Scroll is no longer blocked while a popover is open.
+
+##### Fixed
+
+- `OverlayRef` recycling, to avoid piling up bounding boxes in the DOM.
+
+#### 18.1.0
+
+##### Added
+
+- `[luPopover2]` directive and `lu-popover-content` component, with the `luPopoverTrigger`, `luPopoverPosition` and `intl` inputs.

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

@@ -0,0 +1,103 @@
+# popover2 — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-overlays-popover2-angular--docs)
+
+## Angular
+
+### Popover2
+
+```js
+import { ConnectionPositionPair } from '@angular/cdk/overlay';
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { DividerComponent } from '@lucca-front/ng/divider';
+import { IconComponent } from '@lucca-front/ng/icon';
+import { ListingComponent, ListingItemComponent } from '@lucca-front/ng/listing';
+import { configureLuPopover, PopoverDirective } from '@lucca-front/ng/popover2';
+```
+
+```html
+<div class="demo">
+	<button
+		luButton
+		[luPopover2]="contentRef"
+		luPopoverTrigger="click"
+		luPopoverCloseDelay="300"
+		luPopoverOpenDelay="300"
+		luPopoverPosition="above"
+	>
+		Cliquez-moi !
+	</button>
+	<ng-template #contentRef>
+		<div class="popover-contentOptional">
+			<h3>Title</h3>
+			<lu-divider />
+			<lu-listing checklist palette="success">
+				<lu-listing-item>item item item item item item item item item item item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+				<lu-listing-item>item</lu-listing-item>
+			</lu-listing>
+		</div>
+	</ng-template>
+</div>
+```
+
+```html
+examplePosition:
+<pre>
+	[
+    new ConnectionPositionPair(&#123;originX: 'start', originY: 'bottom' &#125;, &#123; overlayX: 'start', overlayY: 'top' &#125;, -8, 0),
+    new ConnectionPositionPair(
+        &#123; originX: 'start', originY: 'top' &#125;,
+				&#123;
+            overlayX: 'start',
+            overlayY: 'bottom',
+        &#125;,
+        -8,
+        -32,
+    ),
+	]
+	</pre>
+
+<a href="https://github.com/angular/components/blob/main/src/cdk/overlay/position/connected-position.ts#L28-L53">
+	Angular CDK model for
+	<code>ConnectedPosition</code>
+</a>
+<br />
+<br />
+
+<button
+	luButton
+	[luPopover2]="contentRef"
+	[customPositions]="examplePosition"
+	luPopoverTrigger="click"
+	luPopoverCloseDelay="300"
+	luPopoverOpenDelay="300"
+>
+	Cliquez-moi !
+</button>
+<ng-template #contentRef>
+	<div class="popover-contentOptional">
+		<div class="verticalNavigation mod-iconless">
+			<ul class="verticalNavigation-list pr-u-listReset">
+				<li class="verticalNavigation-list-item"><a href="#" class="verticalNavigation-list-item-link">Item A</a></li>
+				<li class="verticalNavigation-list-item"><a href="#" class="verticalNavigation-list-item-link">Item B</a></li>
+				<li class="verticalNavigation-list-item"><a href="#" class="verticalNavigation-list-item-link">Item C</a></li>
+			</ul>
+		</div>
+	</div>
+</ng-template>
+```

package/llms/references/components/popover2/popover2.md

@@ -0,0 +1,89 @@
+# popover2
+
+## Import
+
+```typescript
+import { PopoverDirective, PopoverContentComponent } from '@lucca-front/ng/popover2';
+```
+
+## API Reference
+
+### PopoverDirective (directive)
+
+**Selector:** `[luPopover2]`
+
+**exportAs:** `luPopover2`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `luPopover2` | `luPopover2` | `TemplateRef<unknown> \| Type<unknown>` | — | — | — | — |
+| `luPopoverPosition` | `luPopoverPosition` | `PopoverPosition \| null` | `null` | — | — | Position du popover par rapport à son déclencheur. |
+| `luPopoverMaxBlockSize` | `luPopoverMaxBlockSize` | `string \| null` | `null` | — | — | Modifie la hauteur max de la popover. |
+| `luPopoverMaxInlineSize` | `luPopoverMaxInlineSize` | `string \| null` | `null` | — | — | — |
+| `overlayScrollStrategy` | `overlayScrollStrategy` | `'reposition' \| 'block' \| 'close'` | `'reposition'` | — | — | [v21.1] Comportement du popover lors du scroll. |
+| `luPopoverDisabledInput` | `luPopoverDisabled` | `boolean` | `false` | — | `luBooleanAttribute` | Désactive le popover. |
+| `customPositionsInput` | `customPositions` | `ConnectionPositionPair[] \| null` | `null` | — | — | — |
+| `luPopoverNoCloseButtonInput` | `luPopoverNoCloseButton` | `boolean` | `false` | — | `luBooleanAttribute` | Masque le bouton de fermeture du popover visible à la navigation clavier. |
+| `luPopoverAnchor` | `luPopoverAnchor` | `FlexibleConnectedPositionStrategyOrigin` | `this.elementRef` | — | — | — |
+| `luPopoverIgnoredOutsidePointerTargets` | `luPopoverIgnoredOutsidePointerTargets` | `HTMLElement \| HTMLElement[] \| null` | `null` | — | — | — |
+| `luPopoverOpenDelay` | `luPopoverOpenDelay` | `number` | `300` | — | `luNumberAttribute` | Délai en millisecondes avant ouverture du popover. |
+| `luPopoverCloseDelay` | `luPopoverCloseDelay` | `number` | `100` | — | `luNumberAttribute` | Délai en millisecondes avant fermeture du popover. |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `luPopoverClosed` | `luPopoverClosed` | `void` | — |
+| `luPopoverOpened` | `luPopoverOpened` | `void` | — |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `luPopoverTrigger` | `'click' \| 'click+hover' \| 'hover+focus'` | — | — |
+
+### PopoverContentComponent (component)
+
+**Selector:** `lu-popover-content`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+
+### Providers
+
+| Fonction | Signature | Description |
+|----------|-----------|-------------|
+| `configureLuPopover` | `(): EnvironmentProviders` | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_POPOVER2_TRANSLATIONS` | `unknown` | — |
+| `POPOVER_CONFIG` | `PopoverConfig` | — |
+
+## Related files
+
+- 📝 [Code & implementation](./popover2.component.md)
+
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-overlays-popover2-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
+
+`PopoverDirective` :
+  + `luPopoverIgnoredOutsidePointerTargets` : HTMLElement | HTMLElement[] | null
+  ~ `luPopoverDisabled` : transform booleanAttribute → luBooleanAttribute
+  ~ `customPositions` : unknown → ConnectionPositionPair[] | null, défaut ∅ → null
+  ~ `luPopoverNoCloseButton` : transform booleanAttribute → luBooleanAttribute
+  ~ `luPopoverOpenDelay` : transform ∅ → luNumberAttribute
+  ~ `luPopoverCloseDelay` : transform ∅ → luNumberAttribute

package/llms/references/components/progress-bar/progress-bar.component.md

@@ -0,0 +1,33 @@
+# progress-bar — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-loaders-progress-bar-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-progress-bar`
+
+### Bar
+
+```js
+import { PROGRESS_BAR_STATE, ProgressBarComponent } from '@lucca-front/ng/progress-bar';
+```
+
+```html
+<lu-progress-bar value="33" />
+```
+
+## HTML/CSS
+
+Classe CSS : `.progress`
+
+### Bar
+
+```css
+@forward '@lucca-front/scss/src/components/progress';
+```
+
+```html
+<div class="progress">
+	<div class="progress-bar" [attr.style]="'inline-size:' + width + '%'"></div>
+</div>
+```

package/llms/references/components/progress-bar/progress-bar.md

@@ -0,0 +1,51 @@
+# progress-bar
+
+## Import
+
+```typescript
+import { ProgressBarComponent } from '@lucca-front/ng/progress-bar';
+```
+
+## API Reference
+
+### ProgressBarComponent (component)
+
+**Selector:** `lu-progress-bar`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `value` | `value` | `number` | `0` | — | `luNumberAttribute` | Pourcentage de progression. |
+| `state` | `state` | `ProgressBarState \| null` | `null` | — | — | État du composant. |
+| `indeterminate` | `indeterminate` | `boolean` | `false` | — | `luBooleanAttribute` | Affiche un état de chargement sans information de progression. |
+
+## Related files
+
+- 📝 [Code & implementation](./progress-bar.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/progress-bar/progress-bar.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/progress-bar/progress-bar.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-loaders-progress-bar-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
+
+~ `value` : transform numberAttribute → luNumberAttribute
+~ `indeterminate` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `PROGRESS_BAR_STATE` constant and `ProgressBarState` type are now publicly exported and used to type the `state` input.
+
+#### 21.0.0
+
+##### Added
+
+- `lu-progress-bar` component (`progress`) with the `value`, `state` (`success`, `error`) and `indeterminate` inputs.