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

package/llms/references/components/textfield/textfield.md

@@ -0,0 +1,161 @@
+# textfield
+
+## Import
+
+```typescript
+import { TextInputComponent } from '@lucca-front/ng/forms';
+```
+
+## API Reference
+
+### TextInputComponent (component)
+
+**Selector:** `lu-text-input`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `mask` | `mask` | `string \| null` | `null` | — | — | — |
+| `placeholder` | `placeholder` | `string` | `''` | — | — | — |
+| `autocomplete` | `autocomplete` | `AutoFill` | `'off'` | — | — | — |
+| `hasClearer` | `hasClearer` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `hasSearchIcon` | `hasSearchIcon` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `valueAlignRight` | `valueAlignRight` | `boolean` | `false` | — | `luBooleanAttribute` | Aligne la valeur du champ à droite. |
+| `prefix` | `prefix` | `TextfieldIconAddon \| TextfieldTextAddon` | — | — | — | — |
+| `suffix` | `suffix` | `TextfieldIconAddon \| TextfieldTextAddon` | — | — | — | — |
+| `minlength` | `minlength` | `number` | `0` | — | `luNumberAttribute` | — |
+| `maxlength` | `maxlength` | `number` | `0` | — | `luNumberAttribute` | — |
+| `searchIcon` | `searchIcon` | `LuccaIcon` | `'searchMagnifyingGlass'` | — | — | — |
+| `type` | `type` | `TextFieldType` | `'text'` | — | — | — |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `blur` | `blur` | `FocusEvent` | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_TEXTFIELD_TRANSLATIONS` | `unknown` | — |
+
+## Type definitions
+
+- [`LuccaIcon`](../../types/LuccaIcon.md) — 585 available values
+
+## Related files
+
+- 📝 [Code & implementation](./textfield.component.md)
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/textfield/textfield.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/textfield/textfield.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-fields-textfield-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
+
++ `minlength` : number
++ `maxlength` : number
+~ `hasClearer` : transform booleanAttribute → luBooleanAttribute
+~ `hasSearchIcon` : transform booleanAttribute → luBooleanAttribute
+~ `valueAlignRight` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.1
+
+##### Fixed
+
+- `luInput` now unsubscribes from its value changes on destroy, preventing a memory leak.
+
+#### 21.3.0
+
+##### Changed
+
+- `prefix` and `suffix` text addons now accept a `PortalContent` instead of a plain `string`, allowing rich (e.g. multilanguage) content.
+
+#### 21.1.4
+
+##### Fixed
+
+- Border color no longer stays incorrect when the invalid and hover states are combined.
+
+#### 21.1.3
+
+##### Fixed
+
+- Presentation mode now displays `–` for an empty value, matching the other inputs.
+
+#### 21.1.1
+
+##### Fixed
+
+- Password visibility toggle now correctly switches the input type.
+
+#### 21.1.0
+
+##### Added
+
+- Presentation display mode through `*luPresentationDisplayDefault`, rendering the value (with its prefix and suffix) read-only and showing `–` when empty.
+
+#### 21.0.0
+
+##### Deprecated
+
+- `LuInputModule`, use `LuInputDirective`, `LuInputDisplayerDirective` and `LuInputClearerComponent` instead.
+- `lu-input-clearer` (`LuInputClearerComponent`), use `ClearComponent` instead.
+
+#### 20.3.0
+
+##### Added
+
+- `mask` input to provide an `ngx-mask` type configuration on the field.
+
+#### 20.2.0
+
+##### Deprecated
+
+- `luDisplayer` (`LuInputDisplayerDirective`).
+
+##### Fixed
+
+- Value and placeholder are now truncated with an ellipsis instead of overflowing.
+
+#### 20.1.3
+
+##### Changed
+
+- `autocomplete` input now defaults to `'off'` and is typed as `AutoFill`.
+
+#### 18.3.3
+
+##### Fixed
+
+- Prefix addon no longer wraps onto multiple lines.
+
+#### 18.3.0
+
+##### Added
+
+- `autocomplete` input.
+
+#### 18.2.3
+
+##### Fixed
+
+- Hover border color now applies to the whole field.
+
+#### 18.1.0
+
+##### Added
+
+- `mod-valueAlignRight` modifier to right-align the field value.
+
+##### Changed
+
+- Removed the border around prefix and suffix addons.

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

@@ -0,0 +1,91 @@
+# tile — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-users-tile-angular-basic--docs)
+
+## Angular
+
+Component selector : `lu-user-tile`
+
+### Tile
+
+```js
+import { provideHttpClient } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { ILuUser, LuUserTileComponent } from '@lucca-front/ng/user';
+import { LuUserPopoverDirective } from '@lucca-front/ng/user-popover';
+import { LuUserPopoverStore } from '@lucca-front/ng/user-popover/service/user-popover.store';
+import { of } from 'rxjs';
+```
+
+```html
+<lu-user-tile [user]="user" />
+```
+
+## HTML/CSS
+
+Classe CSS : `.userTile`
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/userTile';
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<div class="userTile">
+	<div class="avatar">
+		<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+	</div>
+	<dl class="userTile-content">
+		<dt class="userTile-content-name" translate="no">Mertens Finn</dt>
+		<dd class="userTile-content-info">Hero</dd>
+	</dl>
+</div>
+```
+
+### Sizes
+
+```css
+@forward '@lucca-front/scss/src/components/userTile';
+@forward '@lucca-front/scss/src/components/avatar';
+```
+
+```html
+<div class="userTile mod-XS">
+	<div class="avatar">
+		<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+	</div>
+	<dl class="userTile-content">
+		<dt class="userTile-content-name" translate="no">Mertens Finn</dt>
+		<dd class="userTile-content-info">Hero</dd>
+	</dl>
+</div>
+<div class="userTile mod-S">
+	<div class="avatar">
+		<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+	</div>
+	<dl class="userTile-content">
+		<dt class="userTile-content-name" translate="no">Mertens Finn</dt>
+		<dd class="userTile-content-info">Hero</dd>
+	</dl>
+</div>
+<div class="userTile">
+	<div class="avatar">
+		<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+	</div>
+	<dl class="userTile-content">
+		<dt class="userTile-content-name" translate="no">Mertens Finn</dt>
+		<dd class="userTile-content-info">Hero</dd>
+	</dl>
+</div>
+<div class="userTile mod-L">
+	<div class="avatar">
+		<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
+	</div>
+	<dl class="userTile-content">
+		<dt class="userTile-content-name" translate="no">Mertens Finn</dt>
+		<dd class="userTile-content-info">Hero</dd>
+	</dl>
+</div>
+```

package/llms/references/components/tile/tile.md

@@ -0,0 +1,92 @@
+# tile
+
+## Import
+
+```typescript
+import { LuUserTileComponent } from '@lucca-front/ng/user';
+```
+
+## API Reference
+
+### LuUserTileComponent (component)
+
+**Selector:** `lu-user-tile`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `user` | `user` | `LuUserTileUserInput` | — | — | — | — |
+| `displayFormat` | `displayFormat` | `LuDisplayFormat` | `this.#defaultFormat` | — | — | — |
+| `role` | `role` | `string` | — | — | — | Rôle de l’utilisateur affiché sous son nom. |
+| `size` | `size` | `'L' \| 'M' \| 'S' \| 'XS'` | — | — | — | Taille du composant. |
+
+### Modules dépréciés
+
+- ⚠️ `LuUserTileModule` — use `LuUserTileComponent` instead
+- ⚠️ `LuUserModule` — use `LuUserDisplayPipe, LuUserPictureComponent, LuUserTileComponent` instead
+
+## Related files
+
+- 📝 [Code & implementation](./tile.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/tile/tile.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-users-tile-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
+
+~ `displayFormat` : défaut ∅ → this.#defaultFormat
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.0
+
+##### Added
+
+- `USER_TILE_SIZE` constant and `UserTileSize` type are now publicly exported and used to type the `size` input.
+
+#### 20.3.4
+
+##### Added
+
+- Alternative text on the picture displayed by the tile.
+
+#### 20.1.3
+
+##### Added
+
+- `size` input.
+
+#### 20.1.0
+
+##### Changed
+
+- Bottom slot markup renamed from `user-tile-footnote` to `userTile-content-slotBottom`.
+
+#### 19.2.1
+
+##### Fixed
+
+- Height computation when `role` is empty.
+
+#### 19.0.0
+
+##### Deprecated
+
+- `LuUserTileModule` — import the standalone `LuUserTileComponent` instead.
+
+#### 18.2.0
+
+##### Changed
+
+- Component styles moved to the SCSS package.
+
+#### 18.1.1
+
+##### Added
+
+- `LU_DEFAULT_DISPLAY_POLICY` is taken into account to compute the picture initials.

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

@@ -0,0 +1,270 @@
+# time — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-forms-time-angular-basic--docs)
+
+## Angular
+
+### Picker basic
+
+```js
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormFieldComponent } from '@lucca-front/ng/form-field';
+import { INLINE_MESSAGE_STATE } from '@lucca-front/ng/inline-message';
+import { BASE_PICKER_SIZE, TimePickerComponent } from '@lucca-front/ng/time';
+```
+
+```html
+<lu-form-field
+	[label]="labelID"
+	[rolePresentationLabel]="true"
+	tooltip="Tooltip message"
+	inlineMessage="Helper message"
+	inlineMessageState="default"
+>
+	<lu-time-picker
+		label="Label"
+		required
+		step="PT1M"
+		max="23:59:59"
+		[forceMeridiemDisplay]="undefined"
+		[(ngModel)]="example"
+	/>
+	<ng-template #labelID>
+		<span aria-hidden="true">Label</span>
+	</ng-template>
+</lu-form-field>
+
+<pr-story-model-display>{{ example }}</pr-story-model-display>
+```
+
+### Picker duration
+
+```js
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormFieldComponent } from '@lucca-front/ng/form-field';
+import { INLINE_MESSAGE_STATE } from '@lucca-front/ng/inline-message';
+import { BASE_PICKER_SIZE, DurationPickerComponent } from '@lucca-front/ng/time';
+```
+
+```html
+<lu-form-field
+	[rolePresentationLabel]="true"
+	label="Label"
+	tooltip="Tooltip message"
+	inlineMessage="Helper message"
+	inlineMessageState="default"
+>
+	<lu-duration-picker label="Label" required step="PT1M" max="PT99H" [(ngModel)]="example" />
+</lu-form-field>
+
+<pr-story-model-display>{{ example }}</pr-story-model-display>
+```
+
+### Range picker
+
+```js
+import { JsonPipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormFieldComponent } from '@lucca-front/ng/form-field';
+import { TimePickerComponent, TimeRangePickerComponent } from '@lucca-front/ng/time';
+```
+
+```html
+<lu-form-field label="Period" inlineMessage="Helper message" inlineMessageState="default">
+	<lu-time-range-picker step="PT1M" max="23:59:59" [forceMeridiemDisplay]="false" [(ngModel)]="example" />
+</lu-form-field>
+
+<pr-story-model-display>{{ example | json }}</pr-story-model-display>
+```
+
+## HTML/CSS
+
+### Picker basic
+
+```css
+@forward '@lucca-front/scss/src/components/timepicker';
+@forward '@lucca-front/scss/src/components/formLabel';
+@forward '@lucca-front/scss/src/components/inlineMessage';
+```
+
+```html
+<div class="form-field">
+	<label for="hour-input" class="formLabel" role="presentation">
+		<span aria-hidden="true">Label</span>
+	</label>
+	<div class="timePicker">
+		<fieldset class="timePicker-fieldset">
+			<legend><span class="pr-u-mask">Label</span></legend>
+			<div class="timePicker-fieldset-group">
+				<label class="formLabel pr-u-mask" id="hour-label" for="hour-input">Hours</label>
+				<div class="timePicker-fieldset-group-textfield">
+					<input
+						type="text"
+						autocomplete="off"
+						inputmode="numeric"
+						class="timePicker-fieldset-group-textfield-input"
+						aria-labelledby="hour-label"
+						id="hour-input"
+						aria-describedby="helper"
+						min="0"
+						max="23"
+						value="12"
+					/>
+					<span aria-hidden="true" class="timePicker-fieldset-group-textfield-display" data-content-before="12"></span>
+				</div>
+			</div>
+			<div aria-hidden="true" class="timePicker-fieldset-groupSeparator" data-content-before=":"></div>
+			<div class="timePicker-fieldset-group">
+				<label class="formLabel pr-u-mask" id="minutes-label" for="minutes-input">Minutes</label>
+				<div class="timePicker-fieldset-group-textfield">
+					<input
+						type="text"
+						autocomplete="off"
+						inputmode="numeric"
+						class="timePicker-fieldset-group-textfield-input"
+						aria-labelledby="minutes-label"
+						id="minutes-input"
+						min="0"
+						max="59"
+						value="12"
+					/>
+					<span aria-hidden="true" class="timePicker-fieldset-group-textfield-display" data-content-before="12"></span>
+				</div>
+			</div>
+		</fieldset>
+	</div>
+	<div class="inlineMessage" id="helper">
+		<span aria-hidden="true" class="lucca-icon inlineMessage-statusIcon"></span>
+		<p class="inlineMessage-content">Helper text</p>
+	</div>
+</div>
+```
+
+### Picker range
+
+```css
+@forward '@lucca-front/scss/src/components/timepicker';
+@forward '@lucca-front/scss/src/components/formLabel';
+@forward '@lucca-front/scss/src/components/inlineMessage';
+```
+
+```html
+<div class="form-field">
+	<label for="start-hour-input" class="formLabel" role="presentation">
+		<span aria-hidden="true">Label</span>
+	</label>
+	<div class="timePicker">
+		<div class="timePicker-fieldset">
+			<div class="timePicker">
+				<fieldset class="timePicker-fieldset">
+					<legend><span class="pr-u-mask">Label (start)</span></legend>
+					<div class="timePicker-fieldset-group">
+						<label class="formLabel pr-u-mask" id="start-hour-label" for="start-hour-input">Hours</label>
+						<div class="timePicker-fieldset-group-textfield">
+							<input
+								type="text"
+								autocomplete="off"
+								inputmode="numeric"
+								class="timePicker-fieldset-group-textfield-input"
+								aria-labelledby="start-hour-label"
+								id="start-hour-input"
+								aria-describedby="helper"
+								min="0"
+								max="23"
+								value="12"
+							/>
+							<span
+								aria-hidden="true"
+								class="timePicker-fieldset-group-textfield-display"
+								data-content-before="12"
+							></span>
+						</div>
+					</div>
+					<div aria-hidden="true" class="timePicker-fieldset-groupSeparator" data-content-before=":"></div>
+					<div class="timePicker-fieldset-group">
+						<label class="formLabel pr-u-mask" id="start-minutes-label" for="start-minutes-input">Minutes</label>
+						<div class="timePicker-fieldset-group-textfield">
+							<input
+								type="text"
+								autocomplete="off"
+								inputmode="numeric"
+								class="timePicker-fieldset-group-textfield-input"
+								aria-labelledby="start-minutes-label"
+								id="start-minutes-input"
+								min="0"
+								max="59"
+								value="12"
+							/>
+							<span
+								aria-hidden="true"
+								class="timePicker-fieldset-group-textfield-display"
+								data-content-before="12"
+							></span>
+						</div>
+					</div>
+				</fieldset>
+			</div>
+			<label role="presentation" for="end-hour-input" class="timePicker-arrow">
+				<span class="timePicker-arrow-icon">
+					<span aria-hidden="true" class="lucca-icon icon-arrowRight"></span>
+				</span>
+			</label>
+			<div class="timePicker">
+				<fieldset class="timePicker-fieldset">
+					<legend><span class="pr-u-mask">Label (end)</span></legend>
+					<div class="timePicker-fieldset-group">
+						<label class="formLabel pr-u-mask" id="end-hour-label" for="end-hour-input">Hours</label>
+						<div class="timePicker-fieldset-group-textfield">
+							<input
+								type="text"
+								autocomplete="off"
+								inputmode="numeric"
+								class="timePicker-fieldset-group-textfield-input"
+								aria-labelledby="end-hour-label"
+								id="end-hour-input"
+								min="0"
+								max="23"
+								value="12"
+							/>
+							<span
+								aria-hidden="true"
+								class="timePicker-fieldset-group-textfield-display"
+								data-content-before="12"
+							></span>
+						</div>
+					</div>
+					<div aria-hidden="true" class="timePicker-fieldset-groupSeparator" data-content-before=":"></div>
+					<div class="timePicker-fieldset-group">
+						<label class="formLabel pr-u-mask" id="end-minutes-label" for="end-minutes-input">Minutes</label>
+						<div class="timePicker-fieldset-group-textfield">
+							<input
+								type="text"
+								autocomplete="off"
+								inputmode="numeric"
+								class="timePicker-fieldset-group-textfield-input"
+								aria-labelledby="end-minutes-label"
+								id="end-minutes-input"
+								min="0"
+								max="59"
+								value="12"
+							/>
+							<span
+								aria-hidden="true"
+								class="timePicker-fieldset-group-textfield-display"
+								data-content-before="12"
+							></span>
+						</div>
+					</div>
+				</fieldset>
+			</div>
+		</div>
+	</div>
+	<div class="inlineMessage" id="helper">
+		<span aria-hidden="true" class="lucca-icon inlineMessage-statusIcon"></span>
+		<p class="inlineMessage-content">Helper text</p>
+	</div>
+</div>
+```