@lucca-front/ng 22.0.5 → 22.0.6-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -0
- package/fesm2022/lucca-front-ng-approbation-inbox.mjs +5 -4
- package/fesm2022/lucca-front-ng-approbation-inbox.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-dialog.mjs +22 -15
- package/fesm2022/lucca-front-ng-dialog.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-filter-pills.mjs +4 -4
- package/fesm2022/lucca-front-ng-filter-pills.mjs.map +1 -1
- package/fesm2022/lucca-front-ng-scroll.mjs +2 -3
- package/fesm2022/lucca-front-ng-scroll.mjs.map +1 -1
- package/llms/SKILL.md +248 -0
- package/llms/references/components/activity-feed/activity-feed.component.md +292 -0
- package/llms/references/components/activity-feed/activity-feed.md +90 -0
- package/llms/references/components/animations/animations.component.md +11 -0
- package/llms/references/components/animations/animations.md +7 -0
- package/llms/references/components/api-select/api-select.md +40 -0
- package/llms/references/components/app-layout/app-layout.component.md +65 -0
- package/llms/references/components/app-layout/app-layout.md +81 -0
- package/llms/references/components/approbation-inbox/approbation-inbox.component.md +960 -0
- package/llms/references/components/approbation-inbox/approbation-inbox.md +135 -0
- package/llms/references/components/avatar/avatar.component.md +563 -0
- package/llms/references/components/avatar/avatar.md +93 -0
- package/llms/references/components/box/box.component.md +119 -0
- package/llms/references/components/box/box.md +88 -0
- package/llms/references/components/breadcrumbs/breadcrumbs.component.md +59 -0
- package/llms/references/components/breadcrumbs/breadcrumbs.md +87 -0
- package/llms/references/components/bubble-icon/bubble-icon.component.md +56 -0
- package/llms/references/components/bubble-icon/bubble-icon.md +72 -0
- package/llms/references/components/bubble-illustration/bubble-illustration.component.md +54 -0
- package/llms/references/components/bubble-illustration/bubble-illustration.md +77 -0
- package/llms/references/components/button/button.component.md +252 -0
- package/llms/references/components/button/button.md +124 -0
- package/llms/references/components/calendar/calendar.component.md +708 -0
- package/llms/references/components/calendar/calendar.md +104 -0
- package/llms/references/components/calendar2/calendar2.md +64 -0
- package/llms/references/components/callout/callout.component.md +237 -0
- package/llms/references/components/callout/callout.md +243 -0
- package/llms/references/components/callout-disclosure/callout-disclosure.component.md +230 -0
- package/llms/references/components/callout-disclosure/callout-disclosure.md +196 -0
- package/llms/references/components/callout-popover/callout-popover.component.md +170 -0
- package/llms/references/components/callout-popover/callout-popover.md +201 -0
- package/llms/references/components/card/card.component.md +62 -0
- package/llms/references/components/card/card.md +8 -0
- package/llms/references/components/checkbox/checkbox.component.md +50 -0
- package/llms/references/components/checkbox/checkbox.md +74 -0
- package/llms/references/components/chip/chip.component.md +131 -0
- package/llms/references/components/chip/chip.md +95 -0
- package/llms/references/components/clear/clear.component.md +38 -0
- package/llms/references/components/clear/clear.md +79 -0
- package/llms/references/components/code/code.component.md +33 -0
- package/llms/references/components/code/code.md +47 -0
- package/llms/references/components/color/color.md +32 -0
- package/llms/references/components/color-input/color-input.md +33 -0
- package/llms/references/components/color-picker/color-picker.component.md +29 -0
- package/llms/references/components/color-picker/color-picker.md +25 -0
- package/llms/references/components/comment/comment.component.md +436 -0
- package/llms/references/components/comment/comment.md +125 -0
- package/llms/references/components/container/container.component.md +41 -0
- package/llms/references/components/container/container.md +74 -0
- package/llms/references/components/core-select-department/core-select-department.md +37 -0
- package/llms/references/components/core-select-establishment/core-select-establishment.md +40 -0
- package/llms/references/components/core-select-job-qualification/core-select-job-qualification.md +25 -0
- package/llms/references/components/core-select-occupation-category/core-select-occupation-category.md +25 -0
- package/llms/references/components/core-select-user/core-select-user.md +75 -0
- package/llms/references/components/data-presentation/data-presentation.component.md +47 -0
- package/llms/references/components/data-presentation/data-presentation.md +49 -0
- package/llms/references/components/data-table/data-table.component.md +1603 -0
- package/llms/references/components/data-table/data-table.md +290 -0
- package/llms/references/components/date/date.component.md +31 -0
- package/llms/references/components/date/date.md +140 -0
- package/llms/references/components/dateinput/dateinput.component.md +99 -0
- package/llms/references/components/dateinput/dateinput.md +198 -0
- package/llms/references/components/daterangeinput/daterangeinput.component.md +49 -0
- package/llms/references/components/daterangeinput/daterangeinput.md +186 -0
- package/llms/references/components/departmentselect/departmentselect.component.md +43 -0
- package/llms/references/components/departmentselect/departmentselect.md +43 -0
- package/llms/references/components/dialog/dialog.component.md +462 -0
- package/llms/references/components/dialog/dialog.md +335 -0
- package/llms/references/components/divider/divider.component.md +35 -0
- package/llms/references/components/divider/divider.md +88 -0
- package/llms/references/components/dropdown/dropdown.component.md +272 -0
- package/llms/references/components/dropdown/dropdown.md +172 -0
- package/llms/references/components/duration-picker/duration-picker.md +155 -0
- package/llms/references/components/empty-state/empty-state.component.md +226 -0
- package/llms/references/components/empty-state/empty-state.md +62 -0
- package/llms/references/components/errorpage/errorpage.component.md +57 -0
- package/llms/references/components/errorpage/errorpage.md +75 -0
- package/llms/references/components/establishmentselect/establishmentselect.component.md +30 -0
- package/llms/references/components/establishmentselect/establishmentselect.md +42 -0
- package/llms/references/components/fancy-dialog/fancy-dialog.component.md +9 -0
- package/llms/references/components/fancy-dialog/fancy-dialog.md +107 -0
- package/llms/references/components/fancybox/fancybox.component.md +48 -0
- package/llms/references/components/fancybox/fancybox.md +75 -0
- package/llms/references/components/fieldset/fieldset.component.md +86 -0
- package/llms/references/components/fieldset/fieldset.md +119 -0
- package/llms/references/components/filedropzone/filedropzone.component.md +16 -0
- package/llms/references/components/filedropzone/filedropzone.md +61 -0
- package/llms/references/components/fileentry/fileentry.component.md +58 -0
- package/llms/references/components/fileentry/fileentry.md +246 -0
- package/llms/references/components/fileupload/fileupload.component.md +91 -0
- package/llms/references/components/fileupload/fileupload.md +246 -0
- package/llms/references/components/filterbar/filterbar.component.md +302 -0
- package/llms/references/components/filterbar/filterbar.md +134 -0
- package/llms/references/components/filterpills/filterpills.component.md +60 -0
- package/llms/references/components/filterpills/filterpills.md +180 -0
- package/llms/references/components/footer/footer.component.md +66 -0
- package/llms/references/components/footer/footer.md +115 -0
- package/llms/references/components/form/form.md +37 -0
- package/llms/references/components/form-field/form-field.component.md +46 -0
- package/llms/references/components/form-field/form-field.md +231 -0
- package/llms/references/components/form-header/form-header.md +29 -0
- package/llms/references/components/form-label/form-label.component.md +106 -0
- package/llms/references/components/form-label/form-label.md +98 -0
- package/llms/references/components/gauge/gauge.component.md +55 -0
- package/llms/references/components/gauge/gauge.md +73 -0
- package/llms/references/components/grid/grid.component.md +15 -0
- package/llms/references/components/grid/grid.md +112 -0
- package/llms/references/components/highlight-data/highlight-data.component.md +279 -0
- package/llms/references/components/highlight-data/highlight-data.md +115 -0
- package/llms/references/components/highlight-section/highlight-section.component.md +185 -0
- package/llms/references/components/highlight-section/highlight-section.md +48 -0
- package/llms/references/components/highlight-text/highlight-text.component.md +49 -0
- package/llms/references/components/highlight-text/highlight-text.md +29 -0
- package/llms/references/components/horizontalnavigation/horizontalnavigation.component.md +232 -0
- package/llms/references/components/horizontalnavigation/horizontalnavigation.md +95 -0
- package/llms/references/components/icons/icons.component.md +59 -0
- package/llms/references/components/icons/icons.md +185 -0
- package/llms/references/components/impersonation/impersonation.component.md +52 -0
- package/llms/references/components/impersonation/impersonation.md +52 -0
- package/llms/references/components/index-table/index-table.component.md +2528 -0
- package/llms/references/components/index-table/index-table.md +243 -0
- package/llms/references/components/inlinemessage/inlinemessage.component.md +58 -0
- package/llms/references/components/inlinemessage/inlinemessage.md +57 -0
- package/llms/references/components/input-framed/input-framed.component.md +714 -0
- package/llms/references/components/input-framed/input-framed.md +50 -0
- package/llms/references/components/link/link.component.md +153 -0
- package/llms/references/components/link/link.md +124 -0
- package/llms/references/components/listbox/listbox.component.md +11 -0
- package/llms/references/components/listbox/listbox.md +101 -0
- package/llms/references/components/listing/listing.component.md +366 -0
- package/llms/references/components/listing/listing.md +105 -0
- package/llms/references/components/loading/loading.component.md +37 -0
- package/llms/references/components/loading/loading.md +91 -0
- package/llms/references/components/main-layout/main-layout.component.md +146 -0
- package/llms/references/components/main-layout/main-layout.md +78 -0
- package/llms/references/components/mobile-push/mobile-push.component.md +62 -0
- package/llms/references/components/mobile-push/mobile-push.md +70 -0
- package/llms/references/components/mobileheader/mobileheader.component.md +31 -0
- package/llms/references/components/mobileheader/mobileheader.md +8 -0
- package/llms/references/components/mobilenavigation/mobilenavigation.component.md +43 -0
- package/llms/references/components/mobilenavigation/mobilenavigation.md +8 -0
- package/llms/references/components/modal/modal.component.md +37 -0
- package/llms/references/components/modal/modal.md +61 -0
- package/llms/references/components/multi-select/multi-select.component.md +39 -0
- package/llms/references/components/multi-select/multi-select.md +426 -0
- package/llms/references/components/multilanguagefield/multilanguagefield.component.md +84 -0
- package/llms/references/components/multilanguagefield/multilanguagefield.md +362 -0
- package/llms/references/components/newbadge/newbadge.component.md +23 -0
- package/llms/references/components/newbadge/newbadge.md +38 -0
- package/llms/references/components/number-format-input/number-format-input.md +46 -0
- package/llms/references/components/number-input/number-input.md +49 -0
- package/llms/references/components/numbers/numbers.component.md +46 -0
- package/llms/references/components/numbers/numbers.md +7 -0
- package/llms/references/components/numericbadge/numericbadge.component.md +66 -0
- package/llms/references/components/numericbadge/numericbadge.md +84 -0
- package/llms/references/components/onboarding-empty-state/onboarding-empty-state.md +47 -0
- package/llms/references/components/pageheader/pageheader.component.md +389 -0
- package/llms/references/components/pageheader/pageheader.md +144 -0
- package/llms/references/components/pagination/pagination.component.md +96 -0
- package/llms/references/components/pagination/pagination.md +107 -0
- package/llms/references/components/phonenumberfield/phonenumberfield.component.md +35 -0
- package/llms/references/components/phonenumberfield/phonenumberfield.md +131 -0
- package/llms/references/components/plg-push/plg-push.component.md +91 -0
- package/llms/references/components/plg-push/plg-push.md +82 -0
- package/llms/references/components/popover/popover.component.md +130 -0
- package/llms/references/components/popover/popover.md +235 -0
- package/llms/references/components/popover2/popover2.component.md +103 -0
- package/llms/references/components/popover2/popover2.md +89 -0
- package/llms/references/components/progress-bar/progress-bar.component.md +33 -0
- package/llms/references/components/progress-bar/progress-bar.md +51 -0
- package/llms/references/components/progress-stepper/progress-stepper.component.md +281 -0
- package/llms/references/components/progress-stepper/progress-stepper.md +70 -0
- package/llms/references/components/radiofield/radiofield.component.md +295 -0
- package/llms/references/components/radiofield/radiofield.md +122 -0
- package/llms/references/components/readmore/readmore.component.md +60 -0
- package/llms/references/components/readmore/readmore.md +88 -0
- package/llms/references/components/resource-card/resource-card.component.md +216 -0
- package/llms/references/components/resource-card/resource-card.md +106 -0
- package/llms/references/components/richtextinput/richtextinput.component.md +298 -0
- package/llms/references/components/richtextinput/richtextinput.md +275 -0
- package/llms/references/components/scroll/scroll.md +45 -0
- package/llms/references/components/scrollbox/scrollbox.component.md +63 -0
- package/llms/references/components/scrollbox/scrollbox.md +49 -0
- package/llms/references/components/section-empty-state/section-empty-state.component.md +9 -0
- package/llms/references/components/section-empty-state/section-empty-state.md +41 -0
- package/llms/references/components/segmented-control-tabs/segmented-control-tabs.md +50 -0
- package/llms/references/components/segmentedcontrol/segmentedcontrol.component.md +198 -0
- package/llms/references/components/segmentedcontrol/segmentedcontrol.md +108 -0
- package/llms/references/components/select/select.component.md +237 -0
- package/llms/references/components/select/select.md +57 -0
- package/llms/references/components/select-templating/select-templating.md +117 -0
- package/llms/references/components/sidepanel/sidepanel.component.md +56 -0
- package/llms/references/components/sidepanel/sidepanel.md +7 -0
- package/llms/references/components/simple-select/simple-select.component.md +39 -0
- package/llms/references/components/simple-select/simple-select.md +291 -0
- package/llms/references/components/skeleton/skeleton.component.md +133 -0
- package/llms/references/components/skeleton/skeleton.md +212 -0
- package/llms/references/components/skiplinks/skiplinks.component.md +91 -0
- package/llms/references/components/skiplinks/skiplinks.md +73 -0
- package/llms/references/components/software-icon/software-icon.component.md +61 -0
- package/llms/references/components/software-icon/software-icon.md +107 -0
- package/llms/references/components/sortable-list/sortable-list.component.md +141 -0
- package/llms/references/components/sortable-list/sortable-list.md +84 -0
- package/llms/references/components/statusbadge/statusbadge.component.md +56 -0
- package/llms/references/components/statusbadge/statusbadge.md +63 -0
- package/llms/references/components/switchfield/switchfield.component.md +114 -0
- package/llms/references/components/switchfield/switchfield.md +56 -0
- package/llms/references/components/tableofcontent/tableofcontent.component.md +55 -0
- package/llms/references/components/tableofcontent/tableofcontent.md +41 -0
- package/llms/references/components/tags/tags.component.md +112 -0
- package/llms/references/components/tags/tags.md +115 -0
- package/llms/references/components/text-flow/text-flow.component.md +71 -0
- package/llms/references/components/text-flow/text-flow.md +63 -0
- package/llms/references/components/textareafield/textareafield.component.md +69 -0
- package/llms/references/components/textareafield/textareafield.md +113 -0
- package/llms/references/components/textfield/textfield.component.md +617 -0
- package/llms/references/components/textfield/textfield.md +161 -0
- package/llms/references/components/tile/tile.component.md +91 -0
- package/llms/references/components/tile/tile.md +92 -0
- package/llms/references/components/time/time.component.md +270 -0
- package/llms/references/components/time/time.md +127 -0
- package/llms/references/components/time-picker/time-picker.md +63 -0
- package/llms/references/components/timelines/timelines.component.md +159 -0
- package/llms/references/components/timelines/timelines.md +8 -0
- package/llms/references/components/title-and-text/title-and-text.component.md +14 -0
- package/llms/references/components/title-and-text/title-and-text.md +60 -0
- package/llms/references/components/toasts/toasts.component.md +54 -0
- package/llms/references/components/toasts/toasts.md +112 -0
- package/llms/references/components/tooltip/tooltip.component.md +86 -0
- package/llms/references/components/tooltip/tooltip.md +217 -0
- package/llms/references/components/treeselect/treeselect.component.md +62 -0
- package/llms/references/components/treeselect/treeselect.md +58 -0
- package/llms/references/components/user-select/user-select.md +52 -0
- package/llms/references/components/userpopover/userpopover.component.md +50 -0
- package/llms/references/components/userpopover/userpopover.md +136 -0
- package/llms/references/components/verticalnavigation/verticalnavigation.component.md +236 -0
- package/llms/references/components/verticalnavigation/verticalnavigation.md +115 -0
- package/llms/references/migrations.md +32 -0
- package/llms/references/tools/angular-api.md +337 -0
- package/llms/references/tools/animations.md +173 -0
- package/llms/references/tools/mixins.md +106 -0
- package/llms/references/tools/numbers.md +81 -0
- package/llms/references/tools/scrollbox.md +59 -0
- package/llms/references/tools/utilitaires.md +951 -0
- package/llms/references/types/BubbleIllustration.md +5 -0
- package/llms/references/types/DecorativePalette.md +5 -0
- package/llms/references/types/Gap.md +5 -0
- package/llms/references/types/HighlightDataIllustration.md +5 -0
- package/llms/references/types/HighlightSectionIllustration.md +5 -0
- package/llms/references/types/LuccaIcon.md +5 -0
- package/llms/references/types/MainLayoutIllustrationEndStart.md +5 -0
- package/llms/references/types/MainLayoutIllustrationStartEnd.md +5 -0
- package/llms.txt +221 -0
- package/package.json +12 -6
- package/types/lucca-front-ng-approbation-inbox.d.ts +3 -3
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# highlight-section
|
|
2
|
+
|
|
3
|
+
## Import
|
|
4
|
+
|
|
5
|
+
```typescript
|
|
6
|
+
import { HighlightSectionComponent } from '@lucca-front/ng/highlight-section';
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Basic Usage
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<lu-highlight-section theme="light">Content</lu-highlight-section>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## API Reference
|
|
16
|
+
|
|
17
|
+
### HighlightSectionComponent (component)
|
|
18
|
+
|
|
19
|
+
**Selector:** `lu-highlight-section`
|
|
20
|
+
|
|
21
|
+
#### Inputs
|
|
22
|
+
|
|
23
|
+
| Property | Binding name | Type | Default | Required | Transform | Description |
|
|
24
|
+
|----------|-------------|------|---------|----------|-----------|-------------|
|
|
25
|
+
| `theme` | `theme` | `'white' \| 'light' \| 'dark'` | `'white'` | — | — | — |
|
|
26
|
+
| `palette` | `palette` | `HighlightSectionPalette \| string` | `'lucca'` | — | — | Applique une palette de couleurs au composant. |
|
|
27
|
+
| `bubbleStart` | `bubbleStart` | `HighlightSectionBubble \| number` | — | — | — | Sans valeur, aucune bulle se sera affichée. |
|
|
28
|
+
| `bubbleEnd` | `bubbleEnd` | `HighlightSectionBubble \| number` | — | — | — | Sans valeur, aucune bulle se sera affichée. |
|
|
29
|
+
| `illustration` | `illustration` | `HighlightSectionIllustration \| string` | — | — | — | Il est également possible de renseigner une URL. |
|
|
30
|
+
|
|
31
|
+
## Type definitions
|
|
32
|
+
|
|
33
|
+
- [`HighlightSectionIllustration`](../../types/HighlightSectionIllustration.md) — 14 available values
|
|
34
|
+
|
|
35
|
+
## Related files
|
|
36
|
+
|
|
37
|
+
- 📝 [Code & implementation](./highlight-section.component.md)
|
|
38
|
+
|
|
39
|
+
- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/highlight-section/highlight-section.figma.md)
|
|
40
|
+
- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-structure-highlight-section-angular-basic--docs)
|
|
41
|
+
|
|
42
|
+
## Changelog
|
|
43
|
+
|
|
44
|
+
> 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.
|
|
45
|
+
|
|
46
|
+
### 22.0.0
|
|
47
|
+
|
|
48
|
+
Composant introduit (`HighlightSectionComponent`).
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# highlight-text — Code & Implementation
|
|
2
|
+
|
|
3
|
+
📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-highlight-text-angular-basic--docs)
|
|
4
|
+
|
|
5
|
+
## Angular
|
|
6
|
+
|
|
7
|
+
### Text
|
|
8
|
+
|
|
9
|
+
```js
|
|
10
|
+
import { HighlightTextComponent } from '@lucca-front/ng/highlight-text';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```html
|
|
14
|
+
<h1>
|
|
15
|
+
Lorem
|
|
16
|
+
<lu-highlight-text>ipsum</lu-highlight-text>
|
|
17
|
+
dolor
|
|
18
|
+
</h1>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## HTML/CSS
|
|
22
|
+
|
|
23
|
+
### Text sizes
|
|
24
|
+
|
|
25
|
+
```css
|
|
26
|
+
@forward '@lucca-front/scss/src/components/highlightText';
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
<div style="font: var(--pr-t-font-heading-1)">
|
|
31
|
+
Lorem
|
|
32
|
+
<strong class="highlightText">ipsum</strong>
|
|
33
|
+
dolor
|
|
34
|
+
</div>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Text
|
|
38
|
+
|
|
39
|
+
```css
|
|
40
|
+
@forward '@lucca-front/scss/src/components/highlightText';
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<h1>
|
|
45
|
+
Lorem
|
|
46
|
+
<strong class="highlightText">ipsum</strong>
|
|
47
|
+
dolor
|
|
48
|
+
</h1>
|
|
49
|
+
```
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# highlight-text
|
|
2
|
+
|
|
3
|
+
## Import
|
|
4
|
+
|
|
5
|
+
```typescript
|
|
6
|
+
import { HighlightTextComponent } from '@lucca-front/ng/highlight-text';
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## API Reference
|
|
10
|
+
|
|
11
|
+
### HighlightTextComponent (component)
|
|
12
|
+
|
|
13
|
+
**Selector:** `lu-highlight-text`
|
|
14
|
+
|
|
15
|
+
#### Inputs
|
|
16
|
+
|
|
17
|
+
| Property | Binding name | Type | Default | Required | Transform | Description |
|
|
18
|
+
|----------|-------------|------|---------|----------|-----------|-------------|
|
|
19
|
+
| `palette` | `palette` | `Palette \| DecorativePalette` | `'product'` | — | — | — |
|
|
20
|
+
|
|
21
|
+
## Type definitions
|
|
22
|
+
|
|
23
|
+
- [`DecorativePalette`](../../types/DecorativePalette.md) — 12 available values
|
|
24
|
+
|
|
25
|
+
## Related files
|
|
26
|
+
|
|
27
|
+
- 📝 [Code & implementation](./highlight-text.component.md)
|
|
28
|
+
|
|
29
|
+
- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-highlight-text-angular-basic--docs)
|
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
# horizontalnavigation — Code & Implementation
|
|
2
|
+
|
|
3
|
+
📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-horizontalnavigation-angular--docs)
|
|
4
|
+
|
|
5
|
+
## Angular
|
|
6
|
+
|
|
7
|
+
Component selector : `lu-horizontal-navigation`
|
|
8
|
+
|
|
9
|
+
### Navigation basic
|
|
10
|
+
|
|
11
|
+
```js
|
|
12
|
+
import { HorizontalNavigationComponent, HorizontalNavigationLinkDirective } from '@lucca-front/ng/horizontal-navigation';
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<lu-horizontal-navigation>
|
|
17
|
+
<a
|
|
18
|
+
*luHorizontalNavigationLink
|
|
19
|
+
class="horizontalNavigation-list-item-action"
|
|
20
|
+
routerLink="/"
|
|
21
|
+
ariaCurrentWhenActive="page"
|
|
22
|
+
>
|
|
23
|
+
Page 1
|
|
24
|
+
</a>
|
|
25
|
+
<a *luHorizontalNavigationLink class="horizontalNavigation-list-item-action" href="#2" aria-current="page">Page 2</a>
|
|
26
|
+
<a *luHorizontalNavigationLink class="horizontalNavigation-list-item-action is-disabled">Page 3</a>
|
|
27
|
+
</lu-horizontal-navigation>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Navigation tabs
|
|
31
|
+
|
|
32
|
+
```js
|
|
33
|
+
import { HorizontalNavigationComponent, HorizontalNavigationTabComponent } from '@lucca-front/ng/horizontal-navigation';
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<lu-horizontal-navigation>
|
|
38
|
+
<lu-horizontal-navigation-tab label="Tab 1">Content 1</lu-horizontal-navigation-tab>
|
|
39
|
+
<lu-horizontal-navigation-tab label="Tab 2">Content 2</lu-horizontal-navigation-tab>
|
|
40
|
+
<lu-horizontal-navigation-tab label="Tab 3">Content 3</lu-horizontal-navigation-tab>
|
|
41
|
+
<lu-horizontal-navigation-tab label="Tab 4">Content 4</lu-horizontal-navigation-tab>
|
|
42
|
+
</lu-horizontal-navigation>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## HTML/CSS
|
|
46
|
+
|
|
47
|
+
Classe CSS : `.horizontalNavigation`
|
|
48
|
+
|
|
49
|
+
### Accessibilité
|
|
50
|
+
|
|
51
|
+
* L’attribut `aria-current="page"` permet d’indiquer la page courante à la fois sémantiquement et visuellement.
|
|
52
|
+
* Si vous devez ajouter un titre sémantique HTML à votre menu d’onglets, préférez d'ajouter ce titre directement dans la section de chaque panneau en utilisant la class `pr-u-mask`. Ne mélangez pas la navigation et la sémantique de titres.
|
|
53
|
+
|
|
54
|
+
Ma navigation :
|
|
55
|
+
|
|
56
|
+
Dans le composant :
|
|
57
|
+
|
|
58
|
+
### Navigation basic
|
|
59
|
+
|
|
60
|
+
```css
|
|
61
|
+
@forward '@lucca-front/scss/src/components/horizontalNavigation';
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<div class="horizontalNavigation">
|
|
66
|
+
<ul class="horizontalNavigation-list">
|
|
67
|
+
<li class="horizontalNavigation-list-item">
|
|
68
|
+
<a href="#" class="horizontalNavigation-list-item-action" aria-current="page">Page 1</a>
|
|
69
|
+
</li>
|
|
70
|
+
<li class="horizontalNavigation-list-item">
|
|
71
|
+
<a href="#" class="horizontalNavigation-list-item-action">Page 2</a>
|
|
72
|
+
</li>
|
|
73
|
+
<li class="horizontalNavigation-list-item">
|
|
74
|
+
<a href="#" class="horizontalNavigation-list-item-action">Page 3</a>
|
|
75
|
+
</li>
|
|
76
|
+
</ul>
|
|
77
|
+
</div>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Navigation container
|
|
81
|
+
|
|
82
|
+
Ce menu intègre un `container` pour s'aligner horizontalement au contenu de la page.
|
|
83
|
+
|
|
84
|
+
```css
|
|
85
|
+
@forward '@lucca-front/scss/src/components/horizontalNavigation';
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<div class="horizontalNavigation">
|
|
90
|
+
<div class="horizontalNavigation-containerOptional">
|
|
91
|
+
<ul class="horizontalNavigation-list">
|
|
92
|
+
<li class="horizontalNavigation-list-item">
|
|
93
|
+
<a href="#" class="horizontalNavigation-list-item-action" aria-current="page">Page 1</a>
|
|
94
|
+
</li>
|
|
95
|
+
<li class="horizontalNavigation-list-item">
|
|
96
|
+
<a href="#" class="horizontalNavigation-list-item-action">Page 2</a>
|
|
97
|
+
</li>
|
|
98
|
+
<li class="horizontalNavigation-list-item">
|
|
99
|
+
<a href="#" class="horizontalNavigation-list-item-action">Page 3</a>
|
|
100
|
+
</li>
|
|
101
|
+
</ul>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Navigation count
|
|
107
|
+
|
|
108
|
+
```css
|
|
109
|
+
@forward '@lucca-front/scss/src/components/horizontalNavigation';
|
|
110
|
+
@forward '@lucca-front/scss/src/components/numericBadge';
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
```html
|
|
114
|
+
<div class="horizontalNavigation">
|
|
115
|
+
<ul class="horizontalNavigation-list">
|
|
116
|
+
<li class="horizontalNavigation-list-item">
|
|
117
|
+
<a href="#" class="horizontalNavigation-list-item-action" aria-current="page">
|
|
118
|
+
Page
|
|
119
|
+
<span class="numericBadge">9</span>
|
|
120
|
+
</a>
|
|
121
|
+
</li>
|
|
122
|
+
<li class="horizontalNavigation-list-item">
|
|
123
|
+
<a href="#" class="horizontalNavigation-list-item-action">
|
|
124
|
+
Page
|
|
125
|
+
<span class="numericBadge">9</span>
|
|
126
|
+
</a>
|
|
127
|
+
</li>
|
|
128
|
+
<li class="horizontalNavigation-list-item">
|
|
129
|
+
<a href="#" class="horizontalNavigation-list-item-action">
|
|
130
|
+
Page
|
|
131
|
+
<span class="numericBadge">9</span>
|
|
132
|
+
</a>
|
|
133
|
+
</li>
|
|
134
|
+
</ul>
|
|
135
|
+
</div>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### Navigation scrollbox
|
|
139
|
+
|
|
140
|
+
```css
|
|
141
|
+
@forward '@lucca-front/scss/src/components/horizontalNavigation';
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
```html
|
|
145
|
+
<lu-scroll-box
|
|
146
|
+
[attr.style]="'--components-scrollBox-gap: 0px; --components-scrollBox-paddingInline: 0px; --components-scrollBox-marginInline: calc(var(--pr-t-spacings-200) * -1)'"
|
|
147
|
+
>
|
|
148
|
+
<div class="horizontalNavigation">
|
|
149
|
+
<ul class="horizontalNavigation-list">
|
|
150
|
+
<li class="horizontalNavigation-list-item">
|
|
151
|
+
<a href="#" class="horizontalNavigation-list-item-action" aria-current="page">Page 1</a>
|
|
152
|
+
</li>
|
|
153
|
+
<li class="horizontalNavigation-list-item">
|
|
154
|
+
<a href="#" class="horizontalNavigation-list-item-action">Page 2</a>
|
|
155
|
+
</li>
|
|
156
|
+
<li class="horizontalNavigation-list-item">
|
|
157
|
+
<a href="#" class="horizontalNavigation-list-item-action">Page 3</a>
|
|
158
|
+
</li>
|
|
159
|
+
<li class="horizontalNavigation-list-item">
|
|
160
|
+
<a href="#" class="horizontalNavigation-list-item-action">Page 4</a>
|
|
161
|
+
</li>
|
|
162
|
+
<li class="horizontalNavigation-list-item">
|
|
163
|
+
<a href="#" class="horizontalNavigation-list-item-action">Page 5</a>
|
|
164
|
+
</li>
|
|
165
|
+
<li class="horizontalNavigation-list-item">
|
|
166
|
+
<a href="#" class="horizontalNavigation-list-item-action">Page 6</a>
|
|
167
|
+
</li>
|
|
168
|
+
</ul>
|
|
169
|
+
</div>
|
|
170
|
+
</lu-scroll-box>
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
### Navigation tabs
|
|
174
|
+
|
|
175
|
+
```css
|
|
176
|
+
@forward '@lucca-front/scss/src/components/horizontalNavigation';
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
```html
|
|
180
|
+
<div class="horizontalNavigation">
|
|
181
|
+
<ul class="horizontalNavigation-list" role="tablist">
|
|
182
|
+
<li class="horizontalNavigation-list-item" role="presentation">
|
|
183
|
+
<button
|
|
184
|
+
type="button"
|
|
185
|
+
class="horizontalNavigation-list-item-action"
|
|
186
|
+
role="tab"
|
|
187
|
+
id="tab1"
|
|
188
|
+
aria-controls="panel1"
|
|
189
|
+
aria-selected="true"
|
|
190
|
+
>
|
|
191
|
+
Tab 1
|
|
192
|
+
</button>
|
|
193
|
+
</li>
|
|
194
|
+
<li class="horizontalNavigation-list-item" role="presentation">
|
|
195
|
+
<button
|
|
196
|
+
type="button"
|
|
197
|
+
class="horizontalNavigation-list-item-action"
|
|
198
|
+
role="tab"
|
|
199
|
+
id="tab2"
|
|
200
|
+
aria-controls="panel2"
|
|
201
|
+
tabindex="-1"
|
|
202
|
+
>
|
|
203
|
+
Tab 2
|
|
204
|
+
</button>
|
|
205
|
+
</li>
|
|
206
|
+
<li class="horizontalNavigation-list-item" role="presentation">
|
|
207
|
+
<button
|
|
208
|
+
type="button"
|
|
209
|
+
class="horizontalNavigation-list-item-action"
|
|
210
|
+
role="tab"
|
|
211
|
+
id="tab3"
|
|
212
|
+
aria-controls="panel3"
|
|
213
|
+
tabindex="-1"
|
|
214
|
+
>
|
|
215
|
+
Tab 3
|
|
216
|
+
</button>
|
|
217
|
+
</li>
|
|
218
|
+
</ul>
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<div id="panel1" aria-labelledby="tab1" role="tabpanel" tabindex="0" class="horizontalNavigation_panel is-active">
|
|
222
|
+
<p>Content 1</p>
|
|
223
|
+
</div>
|
|
224
|
+
|
|
225
|
+
<div id="panel2" aria-labelledby="tab2" role="tabpanel" tabindex="0" class="horizontalNavigation_panel">
|
|
226
|
+
<p>Content 2</p>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
<div id="panel3" aria-labelledby="tab3" role="tabpanel" tabindex="0" class="horizontalNavigation_panel">
|
|
230
|
+
<p>Content 3</p>
|
|
231
|
+
</div>
|
|
232
|
+
```
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
# horizontalnavigation
|
|
2
|
+
|
|
3
|
+
## Import
|
|
4
|
+
|
|
5
|
+
```typescript
|
|
6
|
+
import { HorizontalNavigationLinkDirective, HorizontalNavigationTabComponent, HorizontalNavigationComponent } from '@lucca-front/ng/horizontal-navigation';
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## Basic Usage
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<lu-horizontal-navigation> <a *luHorizontalNavigationLink class="horizontalNavigation-list-item-action" routerLink="/" ariaCurrentWhenActive="page">Page 1</a> <a *luHorizontalNavigationLink class="horizontalNavigation-list-item-action" href="#2" aria-current="page">Page 2</a> <a *luHorizontalNavigationLink class="horizontalNavigation-list-item-action is-disabled">Page 3</a>
|
|
13
|
+
</lu-horizontal-navigation>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## API Reference
|
|
17
|
+
|
|
18
|
+
### HorizontalNavigationLinkDirective (directive)
|
|
19
|
+
|
|
20
|
+
**Selector:** `[luHorizontalNavigationLink]`
|
|
21
|
+
|
|
22
|
+
### HorizontalNavigationTabComponent (component)
|
|
23
|
+
|
|
24
|
+
**Selector:** `lu-horizontal-navigation-tab`
|
|
25
|
+
|
|
26
|
+
#### Inputs
|
|
27
|
+
|
|
28
|
+
| Property | Binding name | Type | Default | Required | Transform | Description |
|
|
29
|
+
|----------|-------------|------|---------|----------|-----------|-------------|
|
|
30
|
+
| `label` | `label` | `PortalContent` | — | ✅ | — | — |
|
|
31
|
+
| `disabled` | `disabled` | `boolean` | `false` | — | `luBooleanAttribute` | Désactive un onglet. |
|
|
32
|
+
|
|
33
|
+
### HorizontalNavigationComponent (component)
|
|
34
|
+
|
|
35
|
+
**Selector:** `lu-horizontal-navigation`
|
|
36
|
+
|
|
37
|
+
#### Inputs
|
|
38
|
+
|
|
39
|
+
| Property | Binding name | Type | Default | Required | Transform | Description |
|
|
40
|
+
|----------|-------------|------|---------|----------|-----------|-------------|
|
|
41
|
+
| `noBorder` | `noBorder` | `boolean` | `false` | — | `luBooleanAttribute` | Retire la bordure sous le composant. |
|
|
42
|
+
| `container` | `container` | `boolean` | `false` | — | `luBooleanAttribute` | Applique un container autour des liens pour aligner le composant avec le contenu de la page. |
|
|
43
|
+
| `vertical` | `vertical` | `boolean` | `false` | — | `luBooleanAttribute` | — |
|
|
44
|
+
| `palette` | `palette` | `Palette \| DecorativePalette \| null` | `null` | — | — | — |
|
|
45
|
+
| `size` | `size` | `HorizontalNavigationSize \| null` | `null` | — | — | Modifie la taille du composant. |
|
|
46
|
+
|
|
47
|
+
#### Models (two-way binding)
|
|
48
|
+
|
|
49
|
+
| Property | Type | Required | Notes |
|
|
50
|
+
|----------|------|----------|-------|
|
|
51
|
+
| `currentIndex` | `number` | — | — |
|
|
52
|
+
|
|
53
|
+
## Related files
|
|
54
|
+
|
|
55
|
+
- 📝 [Code & implementation](./horizontalnavigation.component.md)
|
|
56
|
+
|
|
57
|
+
- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/horizontalnavigation/horizontalnavigation.figma.md)
|
|
58
|
+
- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-navigation-horizontalnavigation-angular--docs)
|
|
59
|
+
|
|
60
|
+
## Changelog
|
|
61
|
+
|
|
62
|
+
> 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.
|
|
63
|
+
|
|
64
|
+
### 22.0.0
|
|
65
|
+
|
|
66
|
+
`HorizontalNavigationTabComponent` :
|
|
67
|
+
~ `disabled` : transform booleanAttribute → luBooleanAttribute
|
|
68
|
+
`HorizontalNavigationComponent` :
|
|
69
|
+
~ `noBorder` : transform booleanAttribute → luBooleanAttribute
|
|
70
|
+
~ `container` : transform booleanAttribute → luBooleanAttribute
|
|
71
|
+
~ `vertical` : transform booleanAttribute → luBooleanAttribute
|
|
72
|
+
|
|
73
|
+
### Notes de release (ZeroHeight)
|
|
74
|
+
|
|
75
|
+
#### 21.3.0
|
|
76
|
+
|
|
77
|
+
##### Added
|
|
78
|
+
|
|
79
|
+
- `lu-horizontal-navigation-tab` component to build tab-based navigations, with the `label`, `palette`, `disabled` inputs and the `currentIndex` model on the parent navigation.
|
|
80
|
+
- Dedicated styles when the navigation is used inside a dialog.
|
|
81
|
+
- `HORIZONTAL_NAVIGATION_SIZE` constant and `HorizontalNavigationSize` type are now publicly exported and used to type the `size` input, along with the `LU_HORIZONTALNAVIGATION_INSTANCE` injection token.
|
|
82
|
+
|
|
83
|
+
##### Fixed
|
|
84
|
+
|
|
85
|
+
- Palette handling and numeric badge rendering inside the navigation entries.
|
|
86
|
+
|
|
87
|
+
#### 19.3.0
|
|
88
|
+
|
|
89
|
+
##### Added
|
|
90
|
+
|
|
91
|
+
- `lu-horizontal-navigation` component (`horizontalNavigation`) and the `[luHorizontalNavigationLink]` directive, with the `container`, `noBorder`, `size` and `vertical` inputs.
|
|
92
|
+
|
|
93
|
+
##### Changed
|
|
94
|
+
|
|
95
|
+
- The component no longer renders its own `nav` element — declare it on the host instead.
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# icons — Code & Implementation
|
|
2
|
+
|
|
3
|
+
📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-icons-angular--docs)
|
|
4
|
+
|
|
5
|
+
## Angular
|
|
6
|
+
|
|
7
|
+
Component selector: `lu-icon`
|
|
8
|
+
|
|
9
|
+
## HTML/CSS
|
|
10
|
+
|
|
11
|
+
Classe CSS : `.lucca-icon`
|
|
12
|
+
|
|
13
|
+
Si vous avez besoin des ligatures, vous pouvez appeler les icones en remplaçant le camelCase par des "_" ex. `<span aria-hidden="true" class="lucca-icon">chevron_south</span>`.
|
|
14
|
+
|
|
15
|
+
Si votre icône transmet un sens fort, pensez à accompagner l'icône d'un span masqué `<span class="u-mask">information</span>`.
|
|
16
|
+
|
|
17
|
+
### Basic
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<span aria-hidden="true" class="lucca-icon icon-heart"></span>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Colors
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<span aria-hidden="true" class="lucca-icon icon-heart"></span>
|
|
27
|
+
<span aria-hidden="true" class="lucca-icon icon-heart pr-u-colorTextSubtle"></span>
|
|
28
|
+
<span aria-hidden="true" class="lucca-icon icon-heart pr-u-colorInputTextPlaceholder"></span>
|
|
29
|
+
<span aria-hidden="true" class="lucca-icon icon-heart pr-u-colorTextProduct"></span>
|
|
30
|
+
<span aria-hidden="true" class="lucca-icon icon-heart pr-u-colorTextError"></span>
|
|
31
|
+
<span aria-hidden="true" class="lucca-icon icon-heart pr-u-colorTextWarning"></span>
|
|
32
|
+
<span aria-hidden="true" class="lucca-icon icon-heart pr-u-colorTextSuccess"></span>
|
|
33
|
+
<!-- 20.3 -->
|
|
34
|
+
<span aria-hidden="true" class="lucca-icon icon-heart mod-AI"></span>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Ia
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<span aria-hidden="true" class="lucca-icon icon-heart mod-AI"></span>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Sizes
|
|
44
|
+
|
|
45
|
+
<callout background="2">
|
|
46
|
+
|
|
47
|
+
La taille d'une icône est généralement liée au`line-height`du texte la contentant. Si vous souhaitez utiliser une variable de thème pour définir la taille d'une icône, favorisez les [variables sizes](https://prisme.lucca.io/94310e217/p/9025b9-theme/t/719ce5) de type `var(--sizes-M-lineHeight)`.
|
|
48
|
+
|
|
49
|
+
</callout>
|
|
50
|
+
|
|
51
|
+
```html
|
|
52
|
+
<span aria-hidden="true" class="lucca-icon icon-heart mod-XXS"></span>
|
|
53
|
+
<span aria-hidden="true" class="lucca-icon icon-heart mod-XS"></span>
|
|
54
|
+
<span aria-hidden="true" class="lucca-icon icon-heart mod-S"></span>
|
|
55
|
+
<span aria-hidden="true" class="lucca-icon icon-heart mod-M"></span>
|
|
56
|
+
<span aria-hidden="true" class="lucca-icon icon-heart mod-L"></span>
|
|
57
|
+
<span aria-hidden="true" class="lucca-icon icon-heart mod-XL"></span>
|
|
58
|
+
<span aria-hidden="true" class="lucca-icon icon-heart mod-XXL"></span>
|
|
59
|
+
```
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
# icons
|
|
2
|
+
|
|
3
|
+
## Import
|
|
4
|
+
|
|
5
|
+
```typescript
|
|
6
|
+
import { IconComponent } from '@lucca-front/ng/icon';
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
## API Reference
|
|
10
|
+
|
|
11
|
+
### IconComponent (component)
|
|
12
|
+
|
|
13
|
+
**Selectors:** `lu-icon`, `pr-icon`
|
|
14
|
+
|
|
15
|
+
#### Inputs
|
|
16
|
+
|
|
17
|
+
| Property | Binding name | Type | Default | Required | Transform | Description |
|
|
18
|
+
|----------|-------------|------|---------|----------|-----------|-------------|
|
|
19
|
+
| `icon` | `icon` | `LuccaIcon` | — | ✅ | — | Modifie le glyphe de l’icône. |
|
|
20
|
+
| `alt` | `alt` | `string` | — | — | — | Information restituée par le lecteur d’écran. |
|
|
21
|
+
| `size` | `size` | `'XXS' \| 'XS' \| 'S' \| 'M' \| 'L' \| 'XL' \| 'XXL'` | — | — | — | Modifie la taille de l'icône. |
|
|
22
|
+
| `color` | `color` | `'product' \| 'error' \| 'warning' \| 'success' \| 'light' \| 'placeholder' \| 'inherit'` | `'inherit'` | — | — | Modifie la couleur de l’icône. |
|
|
23
|
+
| `AI` | `AI` | `boolean, boolean \| `${boolean}` \| ''` | `false` | — | `booleanAttribute` | [v20.3] Applique les couleurs IA. |
|
|
24
|
+
|
|
25
|
+
## Type definitions
|
|
26
|
+
|
|
27
|
+
- [`LuccaIcon`](../../types/LuccaIcon.md) — 585 available values
|
|
28
|
+
|
|
29
|
+
## Related files
|
|
30
|
+
|
|
31
|
+
- 📝 [Code & implementation](./icons.component.md)
|
|
32
|
+
- 🎨 [Design guidelines](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/icons/icons.design.md)
|
|
33
|
+
- 🎯 [Figma design tokens](https://lucca-front.lucca.io/v22.0.6-rc.1/storybook/llms/references/components/icons/icons.figma.md)
|
|
34
|
+
- 📖 [Storybook documentation](https://lucca-front.lucca.io/v22.0.0/storybook/?path=/docs/documentation-texts-icons-angular--docs)
|
|
35
|
+
|
|
36
|
+
## Changelog
|
|
37
|
+
|
|
38
|
+
> 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.
|
|
39
|
+
|
|
40
|
+
### 22.0.0
|
|
41
|
+
|
|
42
|
+
~ `color` : 'primary' | 'secondary' | 'product' | 'error' | 'warning' | 'success' | 'light' | 'placeholder' | 'inherit' → 'product' | 'error' | 'warning' | 'success' | 'light' | 'placeholder' | 'inherit'
|
|
43
|
+
~ `AI` : boolean → boolean, boolean | `${boolean}` | ''
|
|
44
|
+
|
|
45
|
+
### Notes de release (ZeroHeight)
|
|
46
|
+
|
|
47
|
+
#### 21.2.2
|
|
48
|
+
|
|
49
|
+
##### Added
|
|
50
|
+
|
|
51
|
+
- `moneyIban`, `signDecimal`, and `signTag` icons.
|
|
52
|
+
|
|
53
|
+
#### 21.1.4
|
|
54
|
+
|
|
55
|
+
##### Added
|
|
56
|
+
|
|
57
|
+
- `bubbleSpeechStrikethrough`, `deviceTablet`, and `signRating` icons.
|
|
58
|
+
|
|
59
|
+
#### 21.1.3
|
|
60
|
+
|
|
61
|
+
##### Added
|
|
62
|
+
|
|
63
|
+
- `listMultipleChoices` and `signSimpleChoice` icons.
|
|
64
|
+
|
|
65
|
+
#### 21.0.3
|
|
66
|
+
|
|
67
|
+
##### Added
|
|
68
|
+
|
|
69
|
+
- `files`, `mathsNotEqual`, and `peopleHouse` icons.
|
|
70
|
+
|
|
71
|
+
#### 20.3.0
|
|
72
|
+
|
|
73
|
+
##### Added
|
|
74
|
+
|
|
75
|
+
- `AI` input to apply the AI visual treatment (`mod-AI` CSS class) to an icon.
|
|
76
|
+
|
|
77
|
+
#### 20.2.1
|
|
78
|
+
|
|
79
|
+
##### Added
|
|
80
|
+
|
|
81
|
+
- `arrowOppositeHorizontal`, `arrowOppositeLeftRight`, `arrowOppositeRightLeft`, `arrowOppositeTopBottom`, and `bubbleStars` icons.
|
|
82
|
+
|
|
83
|
+
##### Changed
|
|
84
|
+
|
|
85
|
+
- `peopleFolder` icon updated visually.
|
|
86
|
+
|
|
87
|
+
#### 20.1.3
|
|
88
|
+
|
|
89
|
+
##### Added
|
|
90
|
+
|
|
91
|
+
- `peopleFolder` icon.
|
|
92
|
+
|
|
93
|
+
#### 20.1.2
|
|
94
|
+
|
|
95
|
+
##### Added
|
|
96
|
+
|
|
97
|
+
- `mapTripStep`, `officeMicrophone`, and `playerRecording` icons.
|
|
98
|
+
|
|
99
|
+
#### 20.1.0
|
|
100
|
+
|
|
101
|
+
##### Added
|
|
102
|
+
|
|
103
|
+
- `moneyPaymentCards` icon.
|
|
104
|
+
|
|
105
|
+
#### 19.3.4
|
|
106
|
+
|
|
107
|
+
##### Added
|
|
108
|
+
|
|
109
|
+
- `signCheckbox`, `transportCarElectric`, `transportMotocycle`, `transportMotocycleElectric`, `transportScooter`, and `transportScooterElectric` icons.
|
|
110
|
+
|
|
111
|
+
#### 19.3.1
|
|
112
|
+
|
|
113
|
+
##### Added
|
|
114
|
+
|
|
115
|
+
- `appWidget` and `cornersFocus` icons.
|
|
116
|
+
|
|
117
|
+
#### 19.3.0
|
|
118
|
+
|
|
119
|
+
##### Added
|
|
120
|
+
|
|
121
|
+
- `peopleAccessibility` icon.
|
|
122
|
+
|
|
123
|
+
##### Changed
|
|
124
|
+
|
|
125
|
+
- Icon display changed from `inline-flex` to `inline-block`.
|
|
126
|
+
|
|
127
|
+
#### 19.2.6
|
|
128
|
+
|
|
129
|
+
##### Added
|
|
130
|
+
|
|
131
|
+
- `officePenStar` icon.
|
|
132
|
+
|
|
133
|
+
#### 19.2.5
|
|
134
|
+
|
|
135
|
+
##### Added
|
|
136
|
+
|
|
137
|
+
- `peopleEdit` and `signAt` icons.
|
|
138
|
+
|
|
139
|
+
#### 19.2.0
|
|
140
|
+
|
|
141
|
+
##### Added
|
|
142
|
+
|
|
143
|
+
- `emojiSmile` and `soundMegaphone` icons.
|
|
144
|
+
|
|
145
|
+
#### 19.1.6
|
|
146
|
+
|
|
147
|
+
##### Added
|
|
148
|
+
|
|
149
|
+
- `mapPlan` and `officeFirstAid` icons.
|
|
150
|
+
|
|
151
|
+
#### 19.1.5
|
|
152
|
+
|
|
153
|
+
##### Added
|
|
154
|
+
|
|
155
|
+
- `peopleAdd`, `peopleArrowUp`, and `peopleGroup` icons.
|
|
156
|
+
|
|
157
|
+
#### 18.2.4
|
|
158
|
+
|
|
159
|
+
##### Added
|
|
160
|
+
|
|
161
|
+
- `signWebhook` icon.
|
|
162
|
+
|
|
163
|
+
#### 18.2.0
|
|
164
|
+
|
|
165
|
+
##### Added
|
|
166
|
+
|
|
167
|
+
- `arrowLineBottom`, `arrowLineTop`, and `medicalDoctor` icons.
|
|
168
|
+
|
|
169
|
+
#### 18.1.3
|
|
170
|
+
|
|
171
|
+
##### Added
|
|
172
|
+
|
|
173
|
+
- `--icon-fontFamily` CSS custom property to override the icon font family.
|
|
174
|
+
|
|
175
|
+
#### 18.1.2
|
|
176
|
+
|
|
177
|
+
##### Added
|
|
178
|
+
|
|
179
|
+
- `arrowCenterReduce`, `arrowCornerExpand`, `filePlus`, `foodCutlery`, `moneyBankImport`, `moneyCheck`, `signShieldError`, `signShieldSuccess`, `signShieldWarning`, and `weatherStars` icons.
|
|
180
|
+
|
|
181
|
+
#### 18.1.1
|
|
182
|
+
|
|
183
|
+
##### Added
|
|
184
|
+
|
|
185
|
+
- `arrowCurvedDownRight`, `moneyCardCheck`, and `signTranslation` icons.
|