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

package/llms/references/components/callout-disclosure/callout-disclosure.component.md

@@ -0,0 +1,230 @@
+# callout-disclosure — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-feedback-callout-disclosure-angular--docs)
+
+## Angular
+
+### Disclosure
+
+Component selector : `lu-callout-disclosure`
+
+```js
+import { CalloutDisclosureComponent, CalloutFeedbackListComponent, CalloutFeedbackItemComponent, CalloutFeedbackItemDescriptionDirective } from "@lucca-front/ng/callout";
+```
+
+```html
+<lu-callout-disclosure heading="List title">
+	<ul lu-callout-feedback-list palette="neutral">
+		<li lu-callout-feedback-item>
+			<lu-feedback-item-description>Feedback description.</lu-feedback-item-description>
+			<button lu-feedback-item-action luButton="outlined">Click me !</button>
+			<button lu-feedback-item-action luButton="ghost">Click me but inverted !</button>
+		</li>
+		<li lu-callout-feedback-item>
+			<lu-feedback-item-description>Feedback description #2.</lu-feedback-item-description>
+			<button lu-feedback-item-action luButton>Click me !</button>
+		</li>
+	</ul>
+</lu-callout-disclosure>
+```
+
+## HTML/CSS
+
+### Basic
+
+Classe CSS : `.calloutDisclosure`
+
+```css
+@forward '@lucca-front/scss/src/components/callout';
+@forward '@lucca-front/scss/src/components/calloutDisclosure';
+```
+
+```html
+<details class="calloutDisclosure">
+	<summary class="calloutDisclosure-summary">
+		<span aria-hidden="true" class="calloutDisclosure-summary-icon lucca-icon icon-signInfo"></span>
+		<span class="calloutDisclosure-summary-title">List title</span>
+		<span aria-hidden="true" class="calloutDisclosure-summary-chevron lucca-icon icon-arrowChevronBottom"></span>
+	</summary>
+	<div class="calloutDisclosure-details">
+		<ul class="calloutFeedbackList">
+			<li class="calloutFeedbackList-item">
+				<p class="calloutFeedbackList-item-description">Feedback description.</p>
+				<div class="calloutFeedbackList-item-actions">
+					<a href class="button mod-outlined">Button</a>
+					<button type="button" class="button mod-ghost">Button</button>
+				</div>
+			</li>
+			<li class="calloutFeedbackList-item">
+				<p class="calloutFeedbackList-item-description">Feedback description.</p>
+				<div class="calloutFeedbackList-item-actions">
+					<a href class="button mod-outlined">Button</a>
+					<button type="button" class="button mod-ghost">Button</button>
+				</div>
+			</li>
+		</ul>
+	</div>
+</details>
+```
+
+### Iconless
+
+Classe CSS : `.calloutDisclosure`
+
+```css
+@forward '@lucca-front/scss/src/components/callout';
+@forward '@lucca-front/scss/src/components/calloutDisclosure';
+```
+
+```html
+<details class="calloutDisclosure mod-iconless">
+	<summary class="calloutDisclosure-summary">
+		<span class="calloutDisclosure-summary-title">List title</span>
+		<span aria-hidden="true" class="calloutDisclosure-summary-chevron lucca-icon icon-arrowChevronBottom"></span>
+	</summary>
+	<div class="calloutDisclosure-details">
+		<ul class="calloutFeedbackList">
+			<li class="calloutFeedbackList-item">
+				<p class="calloutFeedbackList-item-description">Feedback description.</p>
+				<div class="calloutFeedbackList-item-actions">
+					<a href class="button mod-outlined">Button</a>
+					<button type="button" class="button mod-ghost">Button</button>
+				</div>
+			</li>
+			<li class="calloutFeedbackList-item">
+				<p class="calloutFeedbackList-item-description">Feedback description.</p>
+				<div class="calloutFeedbackList-item-actions">
+					<a href class="button mod-outlined">Button</a>
+					<button type="button" class="button mod-ghost">Button</button>
+				</div>
+			</li>
+		</ul>
+	</div>
+</details>
+```
+
+### Size
+
+Classe CSS : `.calloutDisclosure`
+
+```css
+@forward '@lucca-front/scss/src/components/callout';
+@forward '@lucca-front/scss/src/components/calloutDisclosure';
+```
+
+```html
+<details class="calloutDisclosure mod-S">
+	<summary class="calloutDisclosure-summary">
+		<span aria-hidden="true" class="calloutDisclosure-summary-icon lucca-icon icon-signInfo"></span>
+		<span class="calloutDisclosure-summary-title">List title</span>
+		<span aria-hidden="true" class="calloutDisclosure-summary-chevron lucca-icon icon-arrowChevronBottom"></span>
+	</summary>
+	<div class="calloutDisclosure-details">
+		<ul class="calloutFeedbackList">
+			<li class="calloutFeedbackList-item">
+				<p class="calloutFeedbackList-item-description">Feedback description.</p>
+				<div class="calloutFeedbackList-item-actions">
+					<a href class="button mod-outlined">Button</a>
+					<button type="button" class="button mod-ghost">Button</button>
+				</div>
+			</li>
+			<li class="calloutFeedbackList-item">
+				<p class="calloutFeedbackList-item-description">Feedback description.</p>
+				<div class="calloutFeedbackList-item-actions">
+					<a href class="button mod-outlined">Button</a>
+					<button type="button" class="button mod-ghost">Button</button>
+				</div>
+			</li>
+		</ul>
+	</div>
+</details>
+```
+
+### Status
+
+Classe CSS : `.calloutDisclosure`
+
+```css
+@forward '@lucca-front/scss/src/components/callout';
+@forward '@lucca-front/scss/src/components/calloutDisclosure';
+```
+
+```html
+<details class="calloutDisclosure palette-success">
+	<summary class="calloutDisclosure-summary">
+		<span aria-hidden="true" class="calloutDisclosure-summary-icon lucca-icon icon-signSuccess"></span>
+		<span class="calloutDisclosure-summary-title">List title</span>
+		<span aria-hidden="true" class="calloutDisclosure-summary-chevron lucca-icon icon-arrowChevronBottom"></span>
+	</summary>
+	<div class="calloutDisclosure-details">
+		<ul class="calloutFeedbackList">
+			<li class="calloutFeedbackList-item">
+				<p class="calloutFeedbackList-item-description">Feedback description.</p>
+				<div class="calloutFeedbackList-item-actions">
+					<a href class="button mod-outlined">Button</a>
+					<button type="button" class="button mod-ghost">Button</button>
+				</div>
+			</li>
+			<li class="calloutFeedbackList-item">
+				<p class="calloutFeedbackList-item-description">Feedback description.</p>
+				<div class="calloutFeedbackList-item-actions">
+					<a href class="button mod-outlined">Button</a>
+					<button type="button" class="button mod-ghost">Button</button>
+				</div>
+			</li>
+		</ul>
+	</div>
+</details>
+
+<details class="calloutDisclosure palette-warning">
+	<summary class="calloutDisclosure-summary">
+		<span aria-hidden="true" class="calloutDisclosure-summary-icon lucca-icon icon-signWarning"></span>
+		<span class="calloutDisclosure-summary-title">List title</span>
+		<span aria-hidden="true" class="calloutDisclosure-summary-chevron lucca-icon icon-arrowChevronBottom"></span>
+	</summary>
+	<div class="calloutDisclosure-details">
+		<ul class="calloutFeedbackList">
+			<li class="calloutFeedbackList-item">
+				<p class="calloutFeedbackList-item-description">Feedback description.</p>
+				<div class="calloutFeedbackList-item-actions">
+					<a href class="button mod-outlined">Button</a>
+					<button type="button" class="button mod-ghost">Button</button>
+				</div>
+			</li>
+			<li class="calloutFeedbackList-item">
+				<p class="calloutFeedbackList-item-description">Feedback description.</p>
+				<div class="calloutFeedbackList-item-actions">
+					<a href class="button mod-outlined">Button</a>
+					<button type="button" class="button mod-ghost">Button</button>
+				</div>
+			</li>
+		</ul>
+	</div>
+</details>
+
+<details class="calloutDisclosure palette-error">
+	<summary class="calloutDisclosure-summary">
+		<span aria-hidden="true" class="calloutDisclosure-summary-icon lucca-icon icon-signError"></span>
+		<span class="calloutDisclosure-summary-title">List title</span>
+		<span aria-hidden="true" class="calloutDisclosure-summary-chevron lucca-icon icon-arrowChevronBottom"></span>
+	</summary>
+	<div class="calloutDisclosure-details">
+		<ul class="calloutFeedbackList">
+			<li class="calloutFeedbackList-item">
+				<p class="calloutFeedbackList-item-description">Feedback description.</p>
+				<div class="calloutFeedbackList-item-actions">
+					<a href class="button mod-outlined">Button</a>
+					<button type="button" class="button mod-ghost">Button</button>
+				</div>
+			</li>
+			<li class="calloutFeedbackList-item">
+				<p class="calloutFeedbackList-item-description">Feedback description.</p>
+				<div class="calloutFeedbackList-item-actions">
+					<a href class="button mod-outlined">Button</a>
+					<button type="button" class="button mod-ghost">Button</button>
+				</div>
+			</li>
+		</ul>
+	</div>
+</details>
+```

package/llms/references/components/callout-disclosure/callout-disclosure.md

@@ -0,0 +1,196 @@
+# callout-disclosure
+
+## Import
+
+```typescript
+import { CalloutDisclosureComponent } from '@lucca-front/ng/callout';
+```
+
+## API Reference
+
+### CalloutDisclosureComponent (component)
+
+**Selector:** `lu-callout-disclosure`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `heading` | `heading` | `PortalContent` | — | ✅ | — | Titre du callout. [PortalContent] |
+| `icon` | `icon` | `LuccaIcon` | — | — | — | Ajoute une icône au callout. |
+| `palette` | `palette` | `Palette` | `'none'` | — | — | Applique une palette de couleurs au callout. |
+| `size` | `size` | `'M' \| 'S'` | `'M'` | — | — | Modifie la taille du callout. |
+| `state` | `state` | `'success' \| 'warning' \| 'error'` | — | — | — | État du callout. |
+| `open` | `open` | `boolean` | `false` | — | `luBooleanAttribute` | Place le callout dans son état déplié. |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `openChange` | `openChange` | `boolean` | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_CALLOUT_TRANSLATIONS` | `unknown` | — |
+
+## Type definitions
+
+- [`LuccaIcon`](../../types/LuccaIcon.md) — 585 available values
+
+## Related files
+
+- 📝 [Code & implementation](./callout-disclosure.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/callout-disclosure/callout-disclosure.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/callout-disclosure/callout-disclosure.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-feedback-callout-disclosure-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
+
+~ `open` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `CALLOUT_SIZE`, `CALLOUT_POPOVER_SIZE` and `CALLOUT_HX` constants, together with the `CalloutSize`, `CalloutPopoverSize` and `CalloutHx` types, are now publicly exported and used to type the `size` and `hx` inputs.
+- `AI` palette support for the AI callout styling.
+
+#### 21.2.4
+
+##### Added
+
+- `buttonLabel` on `lu-callout-popover` now also accepts a `number`.
+
+#### 21.2.2
+
+##### Added
+
+- `popoverDisabled` input on `lu-callout-popover` to render the trigger without opening a popover.
+
+##### Fixed
+
+- The callout margin no longer remains visible once the callout has been removed.
+
+#### 21.2.1
+
+##### Fixed
+
+- Button alignment inside a `size="S"` callout.
+
+#### 21.2.0
+
+##### Added
+
+- `popoverPosition` input on `lu-callout-popover` (`above` by default) and `customPopoverPositions` to provide your own connected positions.
+
+#### 21.1.4
+
+##### Added
+
+- `hx` input to set the heading level used by the callout heading.
+- `popoverTrigger` input on `lu-callout-popover` (`click`, `click+hover`, `hover+focus`).
+
+##### Fixed
+
+- Status of the actions displayed inside a callout.
+
+#### 21.1.0
+
+##### Changed
+
+- `intl` input now accepts partial overrides that are merged with the default translations.
+
+#### 21.0.3
+
+##### Fixed
+
+- Callout descriptions are now rendered inside paragraphs to keep a valid DOM structure with inline actions.
+
+#### 21.0.0
+
+##### Added
+
+- `buttonAlt` and `heading` inputs on `lu-callout-popover`, plus `headingHiddenIfSingleItem` on `lu-callout-feedback-list`.
+
+##### Changed
+
+- `lu-callout-popover` is now based on the `popover2` directives.
+
+##### Removed
+
+- Elements deprecated in 18.1.
+
+#### 20.3.0
+
+##### Added
+
+- `AI` input to render the callout with the AI styling (`mod-AI`).
+- `iconAlt` input to provide an alternative text for the callout icon.
+
+#### 20.2.3
+
+##### Fixed
+
+- Padding and font size of the `size="S"` callout.
+
+#### 20.1.3
+
+##### Fixed
+
+- Size of the `XS` callout popover.
+
+#### 20.1.2
+
+##### Fixed
+
+- `lu-callout-popover` no longer loses the icon deduced from its `state` when no `icon` is provided.
+
+#### 20.1.1
+
+##### Added
+
+- `CalloutState` type is now publicly exported.
+
+#### 19.1.0
+
+##### Changed
+
+- Callout actions now use the `neutral` palette by default.
+
+#### 18.3.2
+
+##### Fixed
+
+- Disclosure icon of `lu-callout-disclosure`.
+
+#### 18.2.3
+
+##### Fixed
+
+- `state` input is now taken into account when set several times.
+
+#### 18.1.4
+
+##### Fixed
+
+- `size` no longer produces an invalid `mod-undefined` CSS class when left unset.
+
+#### 18.1.1
+
+##### Fixed
+
+- Close icon size and position.
+
+#### 18.1.0
+
+##### Changed
+
+- Actions are now wrapped in a dedicated container.

package/llms/references/components/callout-popover/callout-popover.component.md

@@ -0,0 +1,170 @@
+# callout-popover — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-feedback-callout-popover-angular--docs)
+
+## Angular
+
+### Popover
+
+Component selector : `lu-callout-popover`
+
+```js
+import { CalloutPopoverComponent, CalloutFeedbackListComponent, CalloutFeedbackItemComponent, CalloutFeedbackItemDescriptionDirective } from "@lucca-front/ng/callout";
+```
+
+```html
+<lu-callout-popover icon="signInfo" buttonLabel="2" buttonAlt="2 errors" closeDelay="500" openDelay="50">
+	<ul lu-callout-feedback-list palette="neutral">
+		<li lu-callout-feedback-item>
+			<lu-feedback-item-description>Feedback description</lu-feedback-item-description>
+			<button lu-feedback-item-action luButton>Click me!</button>
+			<button lu-feedback-item-action luButton="outlined">Click me!</button>
+		</li>
+		<li lu-callout-feedback-item>
+			<lu-feedback-item-description>Feedback description</lu-feedback-item-description>
+			<button lu-feedback-item-action luButton>Click me!</button>
+			<button lu-feedback-item-action luButton="outlined">Click me!</button>
+		</li>
+	</ul>
+</lu-callout-popover>
+```
+
+## HTML/CSS
+
+### Basic
+
+Classe CSS : `.calloutPopover`
+
+```css
+@forward '@lucca-front/scss/src/components/callout';
+@forward '@lucca-front/scss/src/components/calloutPopover';
+```
+
+```html
+<button type="button" class="calloutPopover">
+	<span aria-hidden="true" class="calloutPopover-icon lucca-icon icon-signInfo"></span>
+	1
+</button>
+<div class="lu-popover-content calloutPopover-overlay">
+	<div class="pr-u-flexShrink0">
+		<span aria-hidden="true" class="calloutPopover-overlay-icon lucca-icon icon-signInfo"></span>
+	</div>
+	<div class="pr-u-flexGrow1">
+		<div class="calloutPopover-overlay-head">
+			<strong class="calloutPopover-overlay-head-title">Titre</strong>
+		</div>
+		<div class="calloutPopover-overlay-content">
+			<ul class="calloutFeedbackList">
+				<li class="calloutFeedbackList-item">
+					<p class="calloutFeedbackList-item-description">Feedback description.</p>
+					<div class="calloutFeedbackList-item-actions">
+						<a href class="button mod-outlined">Button</a>
+						<button type="button" class="button mod-ghost">Button</button>
+					</div>
+				</li>
+				<li class="calloutFeedbackList-item">
+					<p class="calloutFeedbackList-item-description">Feedback description.</p>
+					<div class="calloutFeedbackList-item-actions">
+						<a href class="button mod-outlined">Button</a>
+						<button type="button" class="button mod-ghost">Button</button>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+</div>
+```
+
+### Custom
+
+```css
+@forward '@lucca-front/scss/src/components/callout';
+@forward '@lucca-front/scss/src/components/calloutPopover';
+```
+
+```html
+<button type="button" class="calloutPopover palette-cleemy">
+	<span aria-hidden="true" class="calloutPopover-icon lucca-icon icon-soundMegaphone"></span>
+	Lorem
+</button>
+<div class="lu-popover-content calloutPopover-overlay palette-cleemy">
+	<div class="pr-u-flexShrink0">
+		<span aria-hidden="true" class="calloutPopover-overlay-icon lucca-icon icon-soundMegaphone"></span>
+	</div>
+	<div class="pr-u-flexGrow1">
+		<div class="calloutPopover-overlay-content">Ipsum dolor</div>
+	</div>
+</div>
+```
+
+### Size
+
+Classe CSS : `.calloutPopover`
+
+```css
+@forward '@lucca-front/scss/src/components/callout';
+@forward '@lucca-front/scss/src/components/calloutPopover';
+```
+
+```html
+<button type="button" class="calloutPopover mod-S">
+	<span aria-hidden="true" class="calloutPopover-icon lucca-icon icon-signInfo"></span>
+	1
+</button>
+<button type="button" class="calloutPopover mod-XS">
+	<span aria-hidden="true" class="calloutPopover-icon lucca-icon icon-signInfo"></span>
+	1
+</button>
+<div class="lu-popover-content calloutPopover-overlay mod-S">
+	<div class="pr-u-flexShrink0">
+		<span aria-hidden="true" class="calloutPopover-overlay-icon lucca-icon icon-signInfo"></span>
+	</div>
+	<div class="pr-u-flexGrow1">
+		<div class="calloutPopover-overlay-head">
+			<strong class="calloutPopover-overlay-head-title">Titre</strong>
+		</div>
+		<div class="calloutPopover-overlay-content">
+			<ul class="calloutFeedbackList">
+				<li class="calloutFeedbackList-item">
+					<p class="calloutFeedbackList-item-description">Feedback description.</p>
+					<div class="calloutFeedbackList-item-actions">
+						<a href class="button mod-outlined">Button</a>
+						<button type="button" class="button mod-ghost">Button</button>
+					</div>
+				</li>
+				<li class="calloutFeedbackList-item">
+					<p class="calloutFeedbackList-item-description">Feedback description.</p>
+					<div class="calloutFeedbackList-item-actions">
+						<a href class="button mod-outlined">Button</a>
+						<button type="button" class="button mod-ghost">Button</button>
+					</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+</div>
+```
+
+### Status
+
+Classe CSS : `.calloutPopover`
+
+```css
+@forward '@lucca-front/scss/src/components/callout';
+@forward '@lucca-front/scss/src/components/calloutPopover';
+```
+
+```html
+<button type="button" class="calloutPopover palette-success">
+	<span aria-hidden="true" class="calloutPopover-icon lucca-icon icon-signSuccess"></span>
+	1
+</button>
+<button type="button" class="calloutPopover palette-warning">
+	<span aria-hidden="true" class="calloutPopover-icon lucca-icon icon-signWarning"></span>
+	1
+</button>
+<button type="button" class="calloutPopover palette-error">
+	<span aria-hidden="true" class="calloutPopover-icon lucca-icon icon-signError"></span>
+	1
+</button>
+```