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

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

@@ -0,0 +1,272 @@
+# dropdown — Code & Implementation
+
+📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-overlays-dropdown-angular-basic--docs)
+
+## Angular
+
+Mots-clés : menu déroulant, actions contextuelles
+
+Directive selector : `luDropdown`
+
+Depuis la version [20.3](https://github.com/LuccaSA/lucca-front/releases/tag/v20.3.0), l'utilisation de `<lu-dropdown>` a été dépréciée au profit d'un template pour des questions de performances.
+
+### Basic
+
+```js
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { LuDropdownModule } from '@lucca-front/ng/dropdown';
+```
+
+```html
+<button type="button" class="button" [luDropdown]="dropdown">Dropdown with options</button>
+<lu-dropdown #dropdown>
+	<li class="dropdown-list-option">
+		<span class="dropdown-list-option-action is-disabled" luDropdownItem>
+			<span aria-hidden="true" class="lucca-icon icon-eye"></span>
+			Prévisualiser
+		</span>
+	</li>
+	<li class="dropdown-list-option mod-divider" aria-hidden="true">
+		<hr class="divider" />
+	</li>
+	<li class="dropdown-list-option">
+		<a routerLink="." fragment="link2" class="dropdown-list-option-action" luDropdownItem>
+			<span aria-hidden="true" class="lucca-icon icon-officePen"></span>
+			Éditer
+		</a>
+	</li>
+	<li class="dropdown-list-option">
+		<button type="button" class="dropdown-list-option-action mod-critical" luDropdownItem>
+			<span aria-hidden="true" class="lucca-icon icon-trashDelete"></span>
+			Supprimer
+		</button>
+	</li>
+</lu-dropdown>
+```
+
+### Component
+
+```js
+import { Component as AngularComponent } from '@angular/core';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { LuDropdownModule } from '@lucca-front/ng/dropdown';
+```
+
+```html
+<button type="button" class="button" [luDropdown]="dropdown">Dropdown with options</button>
+<lu-dropdown #dropdown>
+	<li class="dropdown-list-option">
+		<span class="dropdown-list-option-action is-disabled" luDropdownItem>
+			<span aria-hidden="true" class="lucca-icon icon-eye"></span>
+			Prévisualiser
+		</span>
+	</li>
+	<li class="dropdown-list-option mod-divider" aria-hidden="true">
+		<hr class="divider" />
+	</li>
+	<li class="dropdown-list-option">
+		<a routerLink="." fragment="link2" class="dropdown-list-option-action" luDropdownItem>
+			<span aria-hidden="true" class="lucca-icon icon-officePen"></span>
+			Éditer
+		</a>
+	</li>
+	<li class="dropdown-list-option">
+		<button type="button" class="dropdown-list-option-action mod-critical" luDropdownItem>
+			<span aria-hidden="true" class="lucca-icon icon-trashDelete"></span>
+			Supprimer
+		</button>
+	</li>
+</lu-dropdown>
+```
+
+### Directive legacy
+
+```js
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { LuDropdownModule, LuDropdownTriggerDirective } from '@lucca-front/ng/dropdown';
+import { IconComponent } from '@lucca-front/ng/icon';
+```
+
+```html
+<button type="button" luButton [luDropdown]="dropdown">Dropdown</button>
+
+<lu-dropdown #dropdown>
+	<li class="dropdown-list-option">
+		<span class="dropdown-list-option-action is-disabled" luDropdownItem>
+			<lu-icon icon="eye" />
+			Prévisualiser
+		</span>
+	</li>
+	<li class="dropdown-list-option">
+		<a routerLink="." fragment="link2" class="dropdown-list-option-action" luDropdownItem>
+			<lu-icon icon="officePen" />
+			Éditer
+		</a>
+	</li>
+	<li class="dropdown-list-option">
+		<button type="button" class="dropdown-list-option-action mod-critical" luDropdownItem>
+			<lu-icon icon="trashDelete" />
+			Supprimer
+		</button>
+	</li>
+</lu-dropdown>
+```
+
+### Directive
+
+```js
+import { ButtonComponent } from '@lucca-front/ng/button';
+import { DropdownActionComponent, DropdownDividerComponent, DropdownGroupComponent, DropdownItemComponent, DropdownMenuComponent, LuDropdownTriggerDirective } from '@lucca-front/ng/dropdown';
+import { IconComponent } from '@lucca-front/ng/icon';
+import { PopoverPosition } from '@lucca-front/ng/popover2';
+```
+
+```html
+<div class="demo">
+	<button type="button" luButton disclosure [luDropdown]="dropdownSample">
+		Dropdown
+		<lu-icon icon="arrowChevronBottom" />
+	</button>
+	<ng-template #dropdownSample>
+		<lu-dropdown-menu>
+			<lu-dropdown-item>
+				<button lu-dropdown-action type="button">
+					<lu-icon icon="heart" />
+					Lorem
+				</button>
+			</lu-dropdown-item>
+			<lu-dropdown-item>
+				<button lu-dropdown-action disabled type="button">
+					<lu-icon icon="cross" />
+					Lorem
+				</button>
+			</lu-dropdown-item>
+			<lu-dropdown-divider />
+			<lu-dropdown-item>
+				<button lu-dropdown-action type="button">
+					<lu-icon icon="star" />
+					Ipsum
+				</button>
+			</lu-dropdown-item>
+			<lu-dropdown-group label="Group">
+				<lu-dropdown-item>
+					<button lu-dropdown-action type="button">
+						<lu-icon icon="buildingHouse" />
+						Dolor
+					</button>
+				</lu-dropdown-item>
+				<lu-dropdown-item>
+					<a lu-dropdown-action critical href="#">
+						<lu-icon icon="trashDelete" />
+						Sit amet
+					</a>
+				</lu-dropdown-item>
+				<lu-dropdown-item>
+					<span lu-dropdown-action disabled class="dropdown-list-option-action">
+						<lu-icon icon="cross" />
+						Sit amet
+					</span>
+				</lu-dropdown-item>
+			</lu-dropdown-group>
+		</lu-dropdown-menu>
+	</ng-template>
+</div>
+```
+
+## HTML/CSS
+
+### Basic
+
+```css
+@forward '@lucca-front/scss/src/components/dropdown';
+@forward '@lucca-front/scss/src/components/divider';
+```
+
+```html
+<div class="dropdown">
+	<ul class="dropdown-list">
+		<li class="dropdown-list-option">
+			<button type="button" class="dropdown-list-option-action">
+				<span class="lucca-icon icon-eye" aria-hidden="true"></span>
+				Prévisualiser
+			</button>
+		</li>
+		<li class="dropdown-list-option" aria-hidden="true">
+			<div class="divider dropdown-list-option-divider"></div>
+		</li>
+		<li class="dropdown-list-option">
+			<button type="button" class="dropdown-list-option-action">
+				<span class="lucca-icon icon-officePen" aria-hidden="true"></span>
+				Modifier
+			</button>
+		</li>
+		<li class="dropdown-list-option">
+			<button type="button" class="dropdown-list-option-action">
+				<span class="lucca-icon icon-fileCopy" aria-hidden="true"></span>
+				Copier
+			</button>
+		</li>
+		<li class="dropdown-list-option" aria-hidden="true">
+			<div class="divider dropdown-list-option-divider"></div>
+		</li>
+		<li class="dropdown-list-option">
+			Groupe
+			<ul class="dropdown-list">
+				<li class="dropdown-list-option">
+					<button type="button" class="dropdown-list-option-action" disabled="disabled">
+						<span class="lucca-icon icon-boxArchive" aria-hidden="true"></span>
+						Archiver
+					</button>
+				</li>
+				<li class="dropdown-list-option">
+					<button type="button" class="dropdown-list-option-action mod-critical">
+						<span class="lucca-icon icon-trashDelete" aria-hidden="true"></span>
+						Supprimer
+					</button>
+				</li>
+			</ul>
+		</li>
+	</ul>
+</div>
+```
+
+### WithoutIcons
+
+```css
+@forward '@lucca-front/scss/src/components/dropdown';
+@forward '@lucca-front/scss/src/components/divider';
+```
+
+```html
+<div class="dropdown">
+	<ul class="dropdown-list">
+		<li class="dropdown-list-option">
+			<button type="button" class="dropdown-list-option-action">Prévisualiser</button>
+		</li>
+		<li class="dropdown-list-option" aria-hidden="true">
+			<div class="divider dropdown-list-option-divider"></div>
+		</li>
+		<li class="dropdown-list-option">
+			<button type="button" class="dropdown-list-option-action">Modifier</button>
+		</li>
+		<li class="dropdown-list-option">
+			<button type="button" class="dropdown-list-option-action">Copier</button>
+		</li>
+		<li class="dropdown-list-option" aria-hidden="true">
+			<div class="divider dropdown-list-option-divider"></div>
+		</li>
+		<li class="dropdown-list-option">
+			Groupe
+			<ul class="dropdown-list">
+				<li class="dropdown-list-option">
+					<button type="button" class="dropdown-list-option-action" disabled="disabled">Archiver</button>
+				</li>
+				<li class="dropdown-list-option">
+					<button type="button" class="dropdown-list-option-action mod-critical">Supprimer</button>
+				</li>
+			</ul>
+		</li>
+	</ul>
+</div>
+```

package/llms/references/components/dropdown/dropdown.md

@@ -0,0 +1,172 @@
+# dropdown
+
+## Import
+
+```typescript
+import { DropdownActionComponent, DropdownDividerComponent, DropdownGroupComponent, DropdownItemComponent, DropdownMenuComponent, LuDropdownItemDirective, LuDropdownPanelComponent, LuDropdownTriggerDirective } from '@lucca-front/ng/dropdown';
+```
+
+## API Reference
+
+### DropdownActionComponent (component)
+
+**Selector:** `[lu-dropdown-action]`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `disabled` | `disabled` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `critical` | `critical` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+### DropdownDividerComponent (component)
+
+**Selector:** `lu-dropdown-divider`
+
+### DropdownGroupComponent (component)
+
+**Selector:** `lu-dropdown-group`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `label` | `label` | `string \| null` | `null` | — | — | — |
+
+### DropdownItemComponent (component)
+
+**Selector:** `lu-dropdown-item`
+
+### DropdownMenuComponent (component)
+
+**Selector:** `lu-dropdown-menu`
+
+### LuDropdownItemDirective (directive)
+
+**Selector:** `[luDropdownItem]`
+
+**exportAs:** `LuDropdownItem`
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `onSelectOutput` | `onSelectOutput` | `void` | — |
+
+### LuDropdownPanelComponent (component)
+
+**Selector:** `lu-dropdown`
+
+> ⚠️ **Déprécié** : prefer the new menu approach: https://prisme.lucca.io/94310e217/p/557682-dropdown
+
+**exportAs:** `LuDropdownPanel`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `inputPanelClasses` | `panel-classes` | `string` | — | — | — | — |
+| `inputContentClasses` | `content-classes` | `string` | — | — | — | — |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `close` | `close` | `void` | — |
+| `open` | `open` | `void` | — |
+| `hovered` | `hovered` | `boolean` | — |
+
+### LuDropdownTriggerDirective (directive)
+
+**Selector:** `[luDropdown]`
+
+**exportAs:** `LuDropdownTrigger`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `inputPanel` | `luDropdown` | `TemplateRef<unknown> \| Type<unknown> \| ALuPopoverPanel` | `undefined` | — | — | — |
+
+### Modules dépréciés
+
+- ⚠️ `LuDropdownModule` — use `LuDropdownTriggerDirective, LuDropdownPanelComponent, LuDropdownItemDirective` instead
+- ⚠️ `LuDropdownItemModule` — use `LuDropdownItemDirective` instead
+- ⚠️ `LuDropdownPanelModule` — use `LuDropdownPanelComponent` instead
+- ⚠️ `LuDropdownTriggerModule` — use `LuDropdownTriggerDirective` instead
+
+## Related files
+
+- 📝 [Code & implementation](./dropdown.component.md)
+
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/dropdown/dropdown.figma.md)
+- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-overlays-dropdown-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
+
+`DropdownActionComponent` :
+  ~ `disabled` : transform booleanAttribute → luBooleanAttribute
+  ~ `critical` : transform booleanAttribute → luBooleanAttribute
+`LuDropdownItemDirective` :
+  + (output) `onSelectOutput` : void
+  - (output) `onSelect`
+`LuDropdownTriggerDirective` :
+  ~ `luDropdown` : défaut ∅ → undefined
+
+### Notes de release (ZeroHeight)
+
+#### 21.0.4
+
+##### Changed
+
+- `disabled` now takes priority over `critical` on a dropdown item.
+
+##### Fixed
+
+- Opening position of the dropdown panel when the trigger is close to the viewport edge.
+
+#### 21.0.0
+
+##### Deprecated
+
+- `LuDropdownModule` — import the standalone `LuDropdownTriggerDirective`, `LuDropdownPanelComponent` and `LuDropdownItemDirective` instead.
+
+#### 20.3.2
+
+##### Added
+
+- `critical` input on the dropdown items, for destructive actions.
+
+##### Fixed
+
+- Color of the critical items.
+
+#### 20.3.1
+
+##### Fixed
+
+- The panel closes when an item is clicked.
+- SCSS import of the component.
+- Close management of the legacy `lu-dropdown`.
+
+#### 20.3.0
+
+##### Added
+
+- Reworked dropdown: `[luDropdown]` trigger directive with the `lu-dropdown-menu`, `lu-dropdown-item`, `lu-dropdown-group` and `lu-dropdown-divider` components, plus the `[luDropdownItem]` directive.
+
+#### 19.3.0
+
+##### Changed
+
+- Dropdown UI updated.
+
+#### 19.2.0
+
+##### Added
+
+- `dropdown` SCSS component, usable without Angular.

package/llms/references/components/duration-picker/duration-picker.md

@@ -0,0 +1,155 @@
+# duration-picker
+
+## Import
+
+```typescript
+import { DurationPickerComponent } from '@lucca-front/ng/time';
+```
+
+## API Reference
+
+### DurationPickerComponent (component)
+
+**Selector:** `lu-duration-picker`
+
+#### Inputs
+
+| Property | Binding name | Type | Default | Required | Transform | Description |
+|----------|-------------|------|---------|----------|-----------|-------------|
+| `step` | `step` | `ISO8601Duration \| null` | `null` | — | — | — |
+| `size` | `size` | `'S' \| 'M'` | — | — | — | — |
+| `intl` | `intl` | `unknown` | — | — | — | — |
+| `max` | `max` | ``${string}P${string}`` | `'PT99H'` | — | — | — |
+| `displayArrows` | `displayArrows` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+| `label` | `label` | `string` | — | — | — | — |
+| `hideZeroValue` | `hideZeroValue` | `boolean` | `false` | — | `luBooleanAttribute` | — |
+
+#### Outputs
+
+| Property | Binding name | Type | Notes |
+|----------|-------------|------|-------|
+| `durationChange` | `durationChange` | `DurationChangeEvent` | — |
+
+#### Models (two-way binding)
+
+| Property | Type | Required | Notes |
+|----------|------|----------|-------|
+| `disabled` | `unknown` | — | — |
+| `value` | `ISO8601Duration` | — | — |
+
+### Injection tokens
+
+| Token | Type | Description |
+|-------|------|-------------|
+| `LU_DURATION_PICKER_TRANSLATIONS` | `unknown` | — |
+
+## Related files
+
+- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/duration-picker/duration-picker.design.md)
+- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/duration-picker/duration-picker.figma.md)
+
+## 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
+
+~ `step` : `${string}P${string}` → ISO8601Duration | null
+~ `displayArrows` : transform booleanAttribute → luBooleanAttribute
+~ `hideZeroValue` : transform booleanAttribute → luBooleanAttribute
+
+### Notes de release (ZeroHeight)
+
+#### 21.3.1
+
+##### Changed
+
+- `lu-duration-picker` / `lu-time-picker`: support longer time/unit separators (e.g. Dutch).
+
+##### Fixed
+
+- `lu-time-picker`: allow typing `0` in the hours field when the value is empty, so the picker can be set to midnight.
+
+#### 21.3.0
+
+##### Added
+
+- `lu-time-range-picker`: new component to pick a start and end time, with the exported `endTimeBeforeStartTimeValidator` to flag an end time earlier than the start time.
+
+##### Fixed
+
+- `lu-time-range-picker`: focus handling and `onTouched` behavior.
+
+#### 21.2.3
+
+##### Fixed
+
+- `lu-time-picker` / `lu-duration-picker`: no longer keep a stale `0` in the underlying input before a value is set, preventing wrong values (e.g. `10`) when typing.
+
+#### 21.1.1
+
+##### Fixed
+
+- `lu-duration-picker`: correctly display the minutes part.
+- `intl` input is now public on `lu-time-picker` and `lu-duration-picker`.
+
+#### 21.1.0
+
+##### Added
+
+- `intl` input on `lu-time-picker` and `lu-duration-picker` to override the component translations.
+
+##### Changed
+
+- `lu-duration-picker`: support durations longer than 99 hours.
+
+##### Fixed
+
+- `lu-duration-picker`: fix wrong incrementation that skipped an hour digit.
+
+#### 20.1.1
+
+##### Fixed
+
+- Export `date-primitives` from the public API.
+
+#### 19.1.5
+
+##### Fixed
+
+- `lu-time-picker`: fix the `name` attribute on the AM/PM (meridiem) inputs.
+
+#### 19.1.4
+
+##### Fixed
+
+- `lu-time-picker`: generate unique `id` values for the inner inputs.
+
+#### 18.2.4
+
+##### Fixed
+
+- Export the `lu-duration-picker` component type from the public API.
+
+#### 18.2.0
+
+##### Added
+
+- `lu-time-picker`: AM/PM (meridiem) support, with a `forceMeridiemDisplay` input to force the 12h display.
+
+##### Fixed
+
+- Export the missing translation tokens from the public API.
+
+#### 18.1.5
+
+##### Fixed
+
+- `lu-time-picker`: the `max` input now defaults to `23:59:59`.
+
+#### 18.1.0
+
+##### Added
+
+- `lu-time-picker`: new component to pick a time of day.
+- `lu-duration-picker`: new component to pick a duration.