### Install Stylelint and Config

Source: https://github.com/luccasa/lucca-front/blob/master/packages/stylelint-config/README.md

Install the necessary Stylelint packages as development dependencies.

```bash
npm i --save-dev stylelint @lucca/stylelint-config-prisme
```

--------------------------------

### Install Lucca Front Packages

Source: https://github.com/luccasa/lucca-front/blob/master/README.md

Install the core Lucca Front packages using npm. These packages provide icons, SCSS framework, Angular components, and design system components.

```bash
npm install @lucca-front/icons --save
npm install @lucca-front/scss --save
npm install @lucca-front/ng --save
npm install @lucca-front/prisme --save
```

--------------------------------

### lu-switch-input Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-control.stories.html

Basic implementation of the lu-switch-input component.

```html
<lu-switch-input></lu-switch-input>
```

--------------------------------

### Install Release Candidate via npm

Source: https://github.com/luccasa/lucca-front/wiki/Release-process---minor

Install a specific release candidate version or the next available version tagged as 'next'.

```bash
$ npm i @lucca-front/scss@2.3.0-rc.0
```

```bash
$ npm i @lucca-front/scss@next
```

--------------------------------

### Basic lu-text-input Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-control.stories.html

Demonstrates the default usage of the lu-text-input component.

```html
<lu-text-input></lu-text-input>
```

--------------------------------

### Copy Configuration File

Source: https://github.com/luccasa/lucca-front/blob/master/scripts/generate-skills/README.md

Copy the example configuration file to create your own. This file will store your API keys and other credentials.

```bash
cp scripts/generate-skills/generate-skills-config.json.example scripts/generate-skills/generate-skills-config.json
```

--------------------------------

### lu-number-format-input Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-control.stories.html

Shows the basic implementation of lu-number-format-input.

```html
<lu-number-format-input></lu-number-format-input>
```

--------------------------------

### lu-segmented-control Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-control.stories.html

Demonstrates the default rendering of the lu-segmented-control component.

```html
<lu-segmented-control></lu-segmented-control>
```

--------------------------------

### lu-color-input Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-control.stories.html

Default usage of the lu-color-input component.

```html
<lu-color-input></lu-color-input>
```

--------------------------------

### Default List Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/listing/listing.stories.html

Demonstrates the basic structure of an unordered list with nested items.

```html
*   item
    
*   item
    
*   item
    
    *   item
        
    *   item
        
    *   item
        
    

item item item item item item
```

--------------------------------

### lu-textarea-input Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-control.stories.html

Basic usage of the lu-textarea-input component.

```html
<lu-textarea-input></lu-textarea-input>
```

--------------------------------

### lu-number-input Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-control.stories.html

Default rendering of the lu-number-input component.

```html
<lu-number-input></lu-number-input>
```

--------------------------------

### Software Icon Default Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/software-icon/software-icon.stories.html

Displays the default state of the software icon. Use when no specific state or size modification is needed.

```html
@for (softwareIcon of softwareIconList; track softwareIcon) {

}
```

--------------------------------

### Example Configuration JSON

Source: https://github.com/luccasa/lucca-front/blob/master/scripts/generate-skills/README.md

Fill in your AI provider details and Figma token in this JSON file. Ensure sensitive information like API keys is handled securely.

```json
{
  "ai": {
    "provider": "github-models",
    "model": "gpt-4o-mini",
    "apiKey": "github_pat_...",
    "concurrency": 1
  },
  "figma": {
    "token": "figd_..."
  }
}
```

--------------------------------

### lu-checkbox-input Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-control.stories.html

Default usage of the lu-checkbox-input component.

```html
<lu-checkbox-input></lu-checkbox-input>
```

--------------------------------

### Angular Progress Stepper - Link Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/progress-stepper/progress-stepper.stories.html

Shows how to create a progress stepper with clickable steps using Angular. Ideal for navigation between process stages.

```html
<!DOCTYPE html>
<html>
<head>
<title>Progress Stepper Link</title>
</head>
<body>

<div class="stepper-container">
  @for (step of steps; track $index) {
    <a href="#" class="step-link" [class.active]="$index === activeStep" (click)="setActiveStep($index)">
      <div class="step-number">{{ $index + 1 }}</div>
      <div class="step-label">Lorem ipsum {{ $index + 1 }}</div>
    </a>
  }
</div>

</body>
</html>
```

--------------------------------

### HTML Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/code/code.stories.html

A basic HTML code snippet.

```html
ipsum dolor sit
```

--------------------------------

### Ordered List Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/listing/listing.stories.html

Presents an ordered list with nested numbering, useful for sequential steps.

```html
1.  item
    
2.  item
    
3.  item
    
    1.  item
        
    2.  item
        
    3.  item
        
    

item item item item item item
```

--------------------------------

### Disabled lu-text-input Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-control.stories.html

Shows how to render a lu-text-input component in a disabled state.

```html
<lu-text-input disabled></lu-text-input>
```

--------------------------------

### Angular Progress Stepper - State Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/progress-stepper/progress-stepper.stories.html

Demonstrates how to apply different states to progress stepper steps using Angular. Useful for indicating completion or errors.

```html
<!DOCTYPE html>
<html>
<head>
<title>Progress Stepper State</title>
</head>
<body>

<div class="stepper-container">
  @for (step of steps; track $index) {
    <div class="step" [class.active]="$index === activeStep" [class.completed]="$index < activeStep" [class.error]="step.hasError">
      <div class="step-number">{{ $index + 1 }}</div>
      <div class="step-label">Lorem ipsum {{ $index + 1 }}</div>
    </div>
  }
</div>

</body>
</html>
```

--------------------------------

### Angular Form Field Counter Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/form-field/form-field.stories.html

Example of a Form Field with a character counter.

```html
<form-field>
  <input type="text" maxlength="50" />
  <counter></counter>
</form-field>
```

--------------------------------

### Angular Tags - Default Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/tags/tags.stories.html

Demonstrates the default rendering of tags. Uses an Angular @for loop to iterate over palette options.

```html
@for (palette of paletteOptions; track palette) { Text }
```

--------------------------------

### Auto-fixable TypeScript Errors Example (After)

Source: https://github.com/luccasa/lucca-front/blob/master/packages/eslint-plugin/README.md

Shows the result of running `eslint --fix` on the 'Before' example, where optional chaining (`?.`) has been applied to safely access properties and methods.

```typescript
function process(user: User) {
  // ✅ Automatically fixed
  console.log(user.profile?.name);

  // ✅ Automatically fixed
  const theme = user.settings?.theme;

  // ✅ Automatically fixed
  const name = user.getName?.();

  // ✅ Automatically fixed
  const first = user.items?.[0];
}
```

--------------------------------

### Angular Progress Stepper - Default Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/progress-stepper/progress-stepper.stories.html

Basic implementation of the progress stepper using Angular's control flow syntax. Use this for standard step indication.

```html
<!DOCTYPE html>
<html>
<head>
<title>Progress Stepper</title>
</head>
<body>

<div class="stepper-container">
  @for (step of steps; track $index) {
    <div class="step" [class.active]="$index === activeStep">
      <div class="step-number">{{ $index + 1 }}</div>
      <div class="step-label">Lorem ipsum {{ $index + 1 }}</div>
    </div>
  }
</div>

</body>
</html>
```

--------------------------------

### Multiple File Upload Example

Source: https://github.com/luccasa/lucca-front/blob/master/docs/file-upload.md

Use `lu-multi-file-upload` to allow users to select and upload multiple files. Connect to the `filePicked` event to handle uploaded files and display them using `lu-file-entry`.

```html
<lu-form-field label="Label">
  <lu-multi-file-upload [accept]="accept" (filePicked)="fileUploadFeature.uploadFiles([$event])" />
</lu-form-field>
<div class="fileEntryDisplayWrapper">
  @for(fileUpload of fileUploadFeature.fileUploads(); track $index) {
  <lu-file-entry [entry]="fileUpload | luFileEntry" [state]="fileUpload.state"
                 [inlineMessageError]="fileUpload.error?.detail" (deleteFile)="deleteFile(fileUpload)" />
  }
</div>
```

--------------------------------

### LuPagination Compact Mode Example

Source: https://github.com/luccasa/lucca-front/blob/master/docs/pagination.md

This mode provides a simplified interface with only navigation buttons. Pass 'isFirstPage' and 'isLastPage' as inputs. Emits 'previousPage' and 'nextPage' events.

```html
<lu-pagination
  mod="compact"
  [isFirstPage]="true"
  [isLastPage]="false"
  (previousPage)="previousPage()"
  (nextPage)="nextPage()"
/>
```

--------------------------------

### Angular Form Field Default Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/form-field/form-field.stories.html

Demonstrates the basic usage of an Angular Form Field component.

```html
<form-field>
  <input type="text" />
</form-field>
```

--------------------------------

### Grid Justify Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/grid/grid.stories.html

Shows how to justify content within grid items. This affects the alignment of content along the main axis.

```css
story col story col story col
```

--------------------------------

### Prompt for Updating component-map.json

Source: https://github.com/luccasa/lucca-front/blob/master/scripts/generate-skills/README.md

A guide for using an AI assistant to help fill in or update the `scripts/generate-skills/component-map.json` file by fetching and matching Storybook stories.

```markdown
Help me fill in `scripts/generate-skills/component-map.json`.

1. Read the current `component-map.json` to identify entries that are `null` or missing a `storybook` path.
2. Fetch the Storybook index at http://localhost:6006/index.json to get the full list of available stories.
3. For each `null` or incomplete entry, search in the Storybook index for a story title that matches the Figma component name
4. If a match is found, fill in `{ "slug": "<kebab-case-name>", "storybook": "<full story title path>" }`.
5. If a single Figma component maps to multiple stories (e.g. multi-select + simple-select), use an array.
6. If no story exists for a component, leave it as `null` (do not guess).
7. Show me a diff of the proposed changes before writing anything, and ask for confirmation.
```

--------------------------------

### Single File Upload Example

Source: https://github.com/luccasa/lucca-front/blob/master/docs/file-upload.md

Use `lu-single-file-upload` for scenarios where only one file needs to be uploaded at a time. It supports previews and displays upload states and errors.

```html
<lu-form-field label="Label">
  @let fileUpload = fileUploadFeature.fileUploads()[0];
  <lu-single-file-upload [accept]="accept" (filePicked)="fileUploadFeature.uploadFiles([$event])"
                         [entry]="fileUpload | luFileEntry" [state]="fileUpload?.state"
                         [previewUrl]="getPreviewUrl(fileUpload)" [inlineMessageError]="fileUpload?.error?.detail"
                         (deleteFile)="deleteFile(fileUpload)" />
</lu-form-field>
```

--------------------------------

### Angular Form Field Required Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/form-field/form-field.stories.html

Shows how to configure a Form Field as required.

```html
<form-field required>
  <input type="text" />
</form-field>
```

--------------------------------

### Grid Colspan Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/grid/grid.stories.html

Illustrates how columns can span multiple grid cells. This is useful for creating layouts where certain items occupy more space.

```css
story col col col story col col col col col
```

--------------------------------

### LuPagination Default Mode Example

Source: https://github.com/luccasa/lucca-front/blob/master/docs/pagination.md

Use this mode for standard pagination with page information. Pass 'from', 'to', 'itemsCount', 'isFirstPage', and 'isLastPage' as inputs. Emits 'previousPage' and 'nextPage' events.

```html
<lu-pagination
  [from]="1"
  [to]="20"
  [itemsCount]="27"
  [isFirstPage]="true"
  [isLastPage]="false"
  (previousPage)="previouPage()"
  (nextPage)="nextPage()"
/>
```

--------------------------------

### Conditional Rendering: Prefix Check

Source: https://github.com/luccasa/lucca-front/blob/master/packages/ng/simple-select/input/select-input.component.html

Renders content if a prefix condition is met. No specific setup is required beyond the component's context.

```html
@if (prefix()) { }
```

--------------------------------

### Table with Footer

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/table/table.stories.html

Example of a table that includes a footer section. This is often used for summary information or totals.

```html
<table>
  <thead>
    <tr>
      <th>Table head</th>
      <th>Table head</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Table footer</td>
      <td>Table footer</td>
    </tr>
  </tfoot>
</table>
```

--------------------------------

### Default Bubble Icon

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/bubble-icon/bubble-icon.stories.html

Displays the default Bubble Icon. No specific setup is required beyond component inclusion.

```html
<bubble-icon></bubble-icon>
```

--------------------------------

### Grid Gap Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/grid/grid.stories.html

Demonstrates the use of gaps between grid items. This CSS variable controls the spacing, creating visual separation.

```css
story col col col story col col col story col col col
```

--------------------------------

### Auto-fixable TypeScript Errors Example (Before)

Source: https://github.com/luccasa/lucca-front/blob/master/packages/eslint-plugin/README.md

Demonstrates TypeScript errors related to possibly undefined or null properties and methods that are automatically fixed by the `@lucca/ts-error` rule.

```typescript
interface User {
  profile?: { name: string };
  settings?: { theme: string };
  getName?: () => string;
  items?: string[];
}

function process(user: User) {
  // ❌ TS2532 - Auto-fixed
  console.log(user.profile.name);

  // ❌ TS18048 - Auto-fixed
  const theme = user.settings.theme;

  // ❌ TS2722 - Auto-fixed
  const name = user.getName();

  // ❌ TS2532 - Auto-fixed (bracket notation)
  const first = user.items[0];
}
```

--------------------------------

### Provide LuTitleStrategy Configuration

Source: https://github.com/luccasa/lucca-front/blob/master/packages/ng/title/README.md

Configure LuTitleStrategy by calling `provideLuTitleStrategy` in your application's module or configuration file. This setup requires the application name and optionally a custom translate service.

```typescript
provideLuTitleStrategy({
  appName: () => 'YourAppName',
  translateService: () => inject(YourAppNameTranslateService), // optional
}),
```

--------------------------------

### Registering a Custom Picker Panel

Source: https://github.com/luccasa/lucca-front/wiki/Select-and-picker

To use a custom picker component with lu-select, it must be provided as an ALuPickerPanel. This example shows how to register a 'MyPickerComponent' for this purpose.

```typescript
import { Component, forwardRef } from '@angular/core';
import { ALuPickerPanel, ILuPickerPanel } from '@lucca-front/ng/core';

@Component({
  selector: 'my-picker',
  providers: [
    {
      provide: ALuPickerPanel,
      useExisting: forwardRef(() => MyPickerComponent),
    },
  ],
  /* ... */
})
export class MyPickerComponent implements ILuPickerPanel {
  /* ... */
}
```

--------------------------------

### Displaying a Number Value in Lu-Select

Source: https://github.com/luccasa/lucca-front/wiki/Select-and-picker

This example demonstrates how to display a simple number value within a lu-select component using the *luDisplayer directive.

```html
<lu-select [ngModel]="myNumber">
  <span *luDisplayer="let value">{{value}}</span>
</lu-select>
```

--------------------------------

### Displaying a User's Last Name in Lu-Select

Source: https://github.com/luccasa/lucca-front/wiki/Select-and-picker

This example demonstrates how to display a specific property (lastName) of a user object within a lu-select component using the *luDisplayer directive.

```html
<lu-select [ngModel]="myUser">
  <span *luDisplayer="let value">{{value.lastName}}</span>
</lu-select>
```

--------------------------------

### Software Icon Wrapper with Sizes

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/software-icon/software-icon.stories.html

Demonstrates using a wrapper to control the size and layout of multiple software icons. Useful for organizing related icons.

```html
*   Invoices
*   Absences
*   Payslip

See 2 more software

*   Benefits
*   Office

Wrapper sizes

*   Invoices
*   Absences
*   Payslip

See 2 more software

*   Benefits
*   Office
```

--------------------------------

### Time Range Picker Template Logic

Source: https://github.com/luccasa/lucca-front/blob/master/packages/ng/time/time-range-picker/time-range-picker.component.html

Defines labels for start and end times, incorporating form field labels and locale-specific translations. Conditionally displays selected start and end times if they differ from a default value.

```HTML
@let startLabel = `${formFieldLabel() && isLocaleFr() ? formFieldLabel() + " " : ""}(${intl().timeRangePickerStart})`; @let endLabel = `${formFieldLabel() && isLocaleFr() ? formFieldLabel() + " " : ""}(${intl().timeRangePickerEnd})`;

{{ intl().timeRangePickerFrom }} {{ startLabel }} @if (startValue() && startValue() !== DEFAULT_TIME_VALUE) { {{ startValue() }} } @else { } {{ intl().timeRangePickerAt }} {{ endLabel }} @if (endValue() && endValue() !== DEFAULT_TIME_VALUE) { {{ endValue() }} } @else { }
```

--------------------------------

### lu-text-input with Value

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-control.stories.html

Illustrates setting an initial value for the lu-text-input component.

```html
<lu-text-input [value]="'Initial value'"></lu-text-input>
```

--------------------------------

### Run Stylelint with showCachePath

Source: https://github.com/luccasa/lucca-front/blob/master/packages/stylelint-config/README.md

Execute Stylelint and optionally display the cache file path. This is useful for debugging cache-related issues.

```bash
npx stylelint "./**/*.scss" showCachePath
```

--------------------------------

### Import All Lucca Front Styles (Not Recommended)

Source: https://github.com/luccasa/lucca-front/blob/master/README.md

Import all available SCSS components from Lucca Front packages at once. This is generally not recommended due to potential performance impacts.

```scss
// Import styles
@forward '@lucca-front/icons/src/main';
@forward '@lucca-front/scss/src/main-all';
@forward '@lucca-front/ng/src/main';
```

--------------------------------

### Angular Form Field Inline Message Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/form-field/form-field.stories.html

Shows a Form Field with an inline message.

```html
<form-field>
  <input type="text" />
  <message>This is an inline message.</message>
</form-field>
```

--------------------------------

### Angular Form Field Hidden Label Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/form-field/form-field.stories.html

Illustrates a Form Field with a hidden label.

```html
<form-field>
  <input type="text" />
  <label hidden>Hidden Label</label>
</form-field>
```

--------------------------------

### Basic lu-option-picker Usage

Source: https://github.com/luccasa/lucca-front/wiki/Select-and-picker

Demonstrates how to use the `lu-option-picker` component with static options, options generated by `*ngFor`, or custom option components.

```html
<lu-option-picker>
  <lu-option value="1">1</lu-option>
  <lu-option value="2">2</lu-option>
  <lu-option value="3">3</lu-option>
</lu-option-picker>
```

```html
<lu-option-picker>
  <lu-option *ngFor="let value of values" [value]="value">{{value}}</lu-option>
</lu-option-picker>
```

```html
<lu-option-picker>
  <my-option></my-option>
</lu-option-picker>
```

--------------------------------

### Angular Form Field Invalid State Example

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/form-field/form-field.stories.html

Demonstrates how to display an invalid state for a Form Field.

```html
<form-field invalid>
  <input type="text" />
</form-field>
```

--------------------------------

### Configure ESLint Flat Config (ESLint 9+)

Source: https://github.com/luccasa/lucca-front/blob/master/packages/eslint-plugin/README.md

Set up ESLint with `@typescript-eslint/parser` and `@lucca/eslint-plugin` for TypeScript projects using the flat config system.

```javascript
import tsParser from '@typescript-eslint/parser';
import luccaPlugin from '@lucca/eslint-plugin';

export default [
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        project: './tsconfig.json',
        // or for monorepo:
        // project: ['./tsconfig.json', './packages/*/tsconfig.json'],
      },
    },
    plugins: {
      '@lucca': luccaPlugin,
    },
    rules: {
      '@lucca/ts-error': 'error',
    },
  },
];
```

--------------------------------

### Conditional Rendering of Clear Button

Source: https://github.com/luccasa/lucca-front/blob/master/packages/ng/date2/date-range-input/date-range-input.component.html

Displays a clear button only when filtering is not active and either the start or end date has a value.

```html
@if (!isFilterPill) { @if (clearable() && (start.value !== "" || end.value !== "")) { {{ intl().clear }} } }
```

--------------------------------

### Highlight Text with Sizes

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/highlight-text/highlight-text.stories.html

Shows how the highlight text component renders with different heading sizes.

```html
lorem **ipsum** dolor
=====================
```

```html
lorem **ipsum** dolor
---------------------
```

```html
### lorem **ipsum** dolor
```

```html
#### lorem **ipsum** dolor
```

```html
##### lorem **ipsum** dolor
```

```html
###### lorem **ipsum** dolor
```

```html
lorem ipsum dolor
=================
```

```html
lorem ipsum dolor
-----------------
```

```html
### lorem ipsum dolor
```

```html
#### lorem ipsum dolor
```

```html
##### lorem ipsum dolor
```

```html
###### lorem ipsum dolor
```

--------------------------------

### Angular Form Field AI and Alt Text

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/form-field/form-field.stories.html

Conceptual example related to AI and Alt text within Form Fields.

```html
<form-field>
  <input type="text" ai-alt-text />
</form-field>
```

--------------------------------

### Iterating Software Palettes in Angular

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/bubble-icon/bubble-icon.stories.html

Demonstrates how to iterate over software palettes using Angular's @for directive. This is typically used for dynamic rendering of icons based on a list of palettes.

```html
@for (palette of softwarePalettes; track palette) { }
```

--------------------------------

### Configure Stylelint for Local Project

Source: https://github.com/luccasa/lucca-front/blob/master/packages/stylelint-config/README.md

Extend the default configuration in your project's stylelint.config.js file. Add custom rules in the 'rules' object.

```javascript
module.exports = {
  extends: ['@lucca/stylelint-config-prisme'],
  rules: {},
};
```

--------------------------------

### Basic Modal Usage

Source: https://github.com/luccasa/lucca-front/wiki/Popup---modals---sidepanels

Illustrates the most basic way to open a modal and subscribe to its close event, treating it similarly to an asynchronous service call.

```typescript
const ref = this._modal.open(Component, data);
ref.onClose.subscribe(result => ...);
```

--------------------------------

### lu-segmented-control with Options

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-control.stories.html

Shows lu-segmented-control with predefined options.

```html
<lu-segmented-control>
  Easy Medium Hard
</lu-segmented-control>
```

--------------------------------

### Configure Stylelint for CI

Source: https://github.com/luccasa/lucca-front/blob/master/packages/stylelint-config/README.md

Add a script to your package.json to lint SCSS files. You can specify a more restrictive path if needed.

```json
"stylelint": "stylelint \"./**/*.scss\""
```

--------------------------------

### Software Icon with Line Break

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/software-icon/software-icon.stories.html

Illustrates how software icons behave with a line break, allowing for multi-line arrangements within a wrapper. Suitable for compact layouts.

```html
*   Invoices
*   Absences
*   Payslip
*   Benefits
*   Office
*   Invoices
*   Absences
*   Payslip
*   Benefits

See 2 more software

*   Office
*   Invoices
```

--------------------------------

### Displaying a Modified Number Value in Lu-Select

Source: https://github.com/luccasa/lucca-front/wiki/Select-and-picker

This example shows how to display a number value multiplied by two within a lu-select component using the *luDisplayer directive.

```html
<lu-select [ngModel]="myNumber">
  <span *luDisplayer="let value">{{value * 2}}</span>
</lu-select>
```

--------------------------------

### Import Basic Lucca Front Styles

Source: https://github.com/luccasa/lucca-front/blob/master/README.md

Import the core styles for Lucca Front packages into your main SCSS file. This includes styles for icons, the SCSS framework, and Angular components.

```scss
// Import core styles (required)
@forward '@lucca-front/icons/src/main';
@forward '@lucca-front/scss/src/main';
@forward '@lucca-front/ng/src/main';
```

--------------------------------

### Iterating Decorative Palettes in Angular

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/bubble-icon/bubble-icon.stories.html

Shows how to loop through decorative palettes with Angular's @for syntax. Useful for applying various decorative styles dynamically.

```html
@for (palette of decorativePalettes; track palette) { }
```

--------------------------------

### Rendering Shortcut Labels

Source: https://github.com/luccasa/lucca-front/blob/master/packages/ng/date2/date-range-input/date-range-input.component.html

Iterates over available shortcuts and displays their labels if the shortcuts function returns any.

```html
@if (shortcuts()?.length > 0) {

@for (shortcut of shortcuts(); track $index) {*   {{ shortcut.label }}
}

}
```

--------------------------------

### Display Accepted File Formats and Count

Source: https://github.com/luccasa/lucca-front/blob/master/packages/ng/file-upload/file-dropzone/file-dropzone.component.html

Conditionally displays the accepted file formats and their count. It shows 'other' or 'one' based on the number of accepted formats, and lists the accepted names if any are specified.

```HTML
@if (acceptNames().length) { @if (acceptNames().length > 1 || acceptAll()) { {{ intl().acceptedFormat.other }} } @else { {{ intl().acceptedFormat.one }} } {{ acceptNames().join(", ") }}. }
```

--------------------------------

### Responsive Grid Colspan

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/grid/grid.stories.html

Defines column spans that adapt to different screen sizes using media query prefixes. For example, `--grid-colspanAtMediaMinXS` applies at the extra-small breakpoint.

```css
--grid-colspan: 12; --grid-colspanAtMediaMinXS: 4
```

```css
--grid-colspan: 12; --grid-colspanAtMediaMinXS: 8
```

```css
grid-colspanAtMediaMinS: 7
```

```css
grid-colspanAtMediaMinS: 5
```

```css
--grid-colspan: 12; --grid-colspanAtMediaMinS: 6; --grid-colspanAtMediaMinM: 3
```

--------------------------------

### Generate Missing SKILL.md Files

Source: https://github.com/luccasa/lucca-front/blob/master/scripts/generate-skills/README.md

Use this command to generate SKILL.md files only for components that do not already have one. This is the default behavior.

```bash
npm run skills:generate
```

--------------------------------

### Basic Table Structure

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/table/table.stories.html

Demonstrates the fundamental HTML structure for a table. This is the base for most table implementations.

```html
<table class="table">
  <thead>
    <tr>
      <th>Head cell</th>
      <th>Head cell</th>
      <th>Head cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body cell</td>
      <td>Body cell</td>
      <td>Body cell</td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### Iterating Feedback Palettes in Angular

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/bubble-icon/bubble-icon.stories.html

Illustrates iterating over feedback palettes using Angular's @for loop. This enables dynamic display of icons with different feedback states.

```html
@for (palette of feedbackPalettes; track palette) { }
```

--------------------------------

### Conditional Rendering of Date Range Labels

Source: https://github.com/luccasa/lucca-front/blob/master/packages/ng/date2/date-range-input/date-range-input.component.html

Displays the 'from' and 'to' labels along with the selected start and end date labels, with specific conditions for when the filter pill is active or inactive.

```html
@if (isFilterPill) { } @if (!empty) { {{ intl().from }} {{ startLabel() }} {{ endLabel() }} } {{ intl().from }} @if (startLabel()) { {{ startLabel() }} } @else { } {{ intl().to }} @if (endLabel()) { {{ endLabel() }} } @else { }
```

--------------------------------

### Configure Angular Build Include Paths

Source: https://github.com/luccasa/lucca-front/blob/master/README.md

Configure the `angular.json` file to include necessary paths for SCSS preprocessor options. This helps in resolving imports for Lucca Front styles.

```json
"architect": {
    "build": {
      "options": {
        "stylePreprocessorOptions": {
          "includePaths": [
            "src/scss",
            "node_modules"
          ]
        },
      },
    },
  },
```

--------------------------------

### Default Highlight Text

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/highlight-text/highlight-text.stories.html

Demonstrates the default behavior of the highlight text component with standard text.

```html
lorem **ipsum** dolor
```

```html
lorem ipsum dolor
```

--------------------------------

### Regenerate All SKILL.md Files

Source: https://github.com/luccasa/lucca-front/blob/master/scripts/generate-skills/README.md

Execute this command to regenerate all SKILL.md files, including those that already exist. This is useful for ensuring all files are up-to-date with the latest information.

```bash
npm run skills:generate -- --force
```

--------------------------------

### Implement ILuTitleTranslateService with Transloco

Source: https://github.com/luccasa/lucca-front/blob/master/packages/ng/title/README.md

Implement `ILuTitleTranslateService` using `TranslocoService` for title key translations. This allows flexibility in choosing your translation library.

```typescript
@Injectable({ providedIn: 'root' })
export class CoreHRTranslateService implements ILuTitleTranslateService {
  constructor(private translateService: TranslocoService) {}
  translate(key: string, args: HashMap): string {
    return this.translateService.translate(key, args);
  }
}
```

--------------------------------

### Configure ESLint Legacy Config (ESLint 8)

Source: https://github.com/luccasa/lucca-front/blob/master/packages/eslint-plugin/README.md

Configure ESLint using the legacy configuration system for TypeScript projects, enabling the `@lucca/ts-error` rule.

```json
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "plugins": ["@lucca/eslint-plugin"],
  "rules": {
    "@lucca/ts-error": "error"
  }
}
```

--------------------------------

### Update Lucca Front Translation Files

Source: https://github.com/luccasa/lucca-front/blob/master/README.md

Update translation files for Lucca Front by running the `npm run i18n:update` command at the project root. This command fetches the latest translations from Lokalise.

```bash
npm run i18n:update
```

--------------------------------

### Table with Fixed Columns

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/table/table.stories.html

Demonstrates a table with columns that have fixed widths, specified in rem units. This ensures columns maintain their size regardless of content.

```html
<table>
  <thead>
    <tr>
      <th>Fixed 8rem column</th>
      <th>Fixed 12rem column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body cell</td>
      <td>Body cell</td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### Angular Form Field Width Options

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/form-field/form-field.stories.html

Demonstrates different width configurations for Form Fields using a loop.

```html
@for (width of widthOptions; track width) {
  <form-field [width]="width">
    <input type="text" />
  </form-field>
}
```

--------------------------------

### Use getStoreModuleName with LuTitleStrategy

Source: https://github.com/luccasa/lucca-front/blob/master/packages/ng/title/README.md

Integrate LuTitleStrategy with `getStoreModuleName` from `@lucca/cdk/remote-entity` to dynamically fetch the application module name from the Lucca Store API.

```typescript
import { provideLuTitleStrategy } from '@lucca-front/ng/title';
import { getStoreModuleName } from '@lucca/cdk/remote-entity';

provideLuTitleStrategy({
  appTitle: () => getStoreModuleName('my-module-id'),
}),
```

--------------------------------

### Lucca Color Input with NgControl

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-field.stories.html

Demonstrates a Lucca color input field integrated with NgControl. Suitable for selecting colors within a form.

```html
<lu-color-input ngControl="favoriteColor"></lu-color-input>
```

--------------------------------

### Dynamic Palette Options

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/listing/listing.stories.html

Demonstrates dynamically generating list items based on an array of palette options using Angular's @for loop.

```html
@for (palette of paletteOptions; track palette) { item item }
```

--------------------------------

### Opening a Modal with LuModal

Source: https://github.com/luccasa/lucca-front/wiki/Popup---modals---sidepanels

Demonstrates how to inject and use the LuModal service to open a modal component. The modal's onClose observable can be subscribed to for handling results.

```typescript
@Component(/* ... */)
export class MyComponent {
  constructor(private _modal: LuModal) {}
  openModal(data) {
    this._modal.open(MyModal, data, config).onClose
    .subscribe(result => /* ... */);
  }
}
```

--------------------------------

### Importing SCSS Components

Source: https://github.com/luccasa/lucca-front/blob/master/packages/scss/README.md

Import specific SCSS components using the @forward directive. This allows for modularity and reduces compilation time by only including used components.

```scss
// Layout & Structure
@forward '@lucca-front/scss/src/components/appLayout';
@forward '@lucca-front/scss/src/components/container';
@forward '@lucca-front/scss/src/components/contentSection';
@forward '@lucca-front/scss/src/components/footer';
@forward '@lucca-front/scss/src/components/grid';
@forward '@lucca-front/scss/src/components/header';
@forward '@lucca-front/scss/src/components/layout';
@forward '@lucca-front/scss/src/components/main';
@forward '@lucca-front/scss/src/components/mainLayout';
@forward '@lucca-front/scss/src/components/pageHeader';
@forward '@lucca-front/scss/src/components/section';
```

```scss
// Navigation
@forward '@lucca-front/scss/src/components/breadcrumbs';
@forward '@lucca-front/scss/src/components/horizontalNavigation';
@forward '@lucca-front/scss/src/components/mobileHeader';
@forward '@lucca-front/scss/src/components/mobileNavigation';
@forward '@lucca-front/scss/src/components/navside';
@forward '@lucca-front/scss/src/components/skipLinks';
@forward '@lucca-front/scss/src/components/tableOfContent';
@forward '@lucca-front/scss/src/components/verticalNavigation';
```

```scss
// Forms & Inputs
@forward '@lucca-front/scss/src/components/checkbox';
@forward '@lucca-front/scss/src/components/checkboxField';
@forward '@lucca-front/scss/src/components/dateField';
@forward '@lucca-front/scss/src/components/dateRangeField';
@forward '@lucca-front/scss/src/components/field';
@forward '@lucca-front/scss/src/components/fieldset';
@forward '@lucca-front/scss/src/components/form';
@forward '@lucca-front/scss/src/components/formLabel';
@forward '@lucca-front/scss/src/components/inputFramed';
@forward '@lucca-front/scss/src/components/multiSelect';
@forward '@lucca-front/scss/src/components/phoneNumber';
@forward '@lucca-front/scss/src/components/presentation';
@forward '@lucca-front/scss/src/components/radio';
@forward '@lucca-front/scss/src/components/radioButtons';
@forward '@lucca-front/scss/src/components/radioField';
@forward '@lucca-front/scss/src/components/richText';
@forward '@lucca-front/scss/src/components/simpleSelect';
@forward '@lucca-front/scss/src/components/switch';
@forward '@lucca-front/scss/src/components/switchField';
@forward '@lucca-front/scss/src/components/textField';
@forward '@lucca-front/scss/src/components/textfields';
@forward '@lucca-front/scss/src/components/timepicker';
@forward '@lucca-front/scss/src/components/timepickerDeprecated';
```

```scss
// Buttons & Actions
@forward '@lucca-front/scss/src/components/button';
@forward '@lucca-front/scss/src/components/buttonGroup';
@forward '@lucca-front/scss/src/components/clear';
@forward '@lucca-front/scss/src/components/link';
@forward '@lucca-front/scss/src/components/segmentedControl';
```

```scss
// Display & Content
@forward '@lucca-front/scss/src/components/avatar';
@forward '@lucca-front/scss/src/components/box';
@forward '@lucca-front/scss/src/components/bubbleIcon';
@forward '@lucca-front/scss/src/components/bubbleIllustration';
@forward '@lucca-front/scss/src/components/calendar';
@forward '@lucca-front/scss/src/components/card';
@forward '@lucca-front/scss/src/components/chip';
@forward '@lucca-front/scss/src/components/code';
@forward '@lucca-front/scss/src/components/color';
@forward '@lucca-front/scss/src/components/comment';
@forward '@lucca-front/scss/src/components/emptyState';
@forward '@lucca-front/scss/src/components/fancyBox';
@forward '@lucca-front/scss/src/components/gauge';
@forward '@lucca-front/scss/src/components/highlightData';
@forward '@lucca-front/scss/src/components/label';
@forward '@lucca-front/scss/src/components/list';
@forward '@lucca-front/scss/src/components/listing';
@forward '@lucca-front/scss/src/components/newBadge';
@forward '@lucca-front/scss/src/components/notchBox';
@forward '@lucca-front/scss/src/components/numericBadge';
@forward '@lucca-front/scss/src/components/progress';
@forward '@lucca-front/scss/src/components/readMore';
@forward '@lucca-front/scss/src/components/resourceCard';
@forward '@lucca-front/scss/src/components/scrollBox';
@forward '@lucca-front/scss/src/components/skeleton';
@forward '@lucca-front/scss/src/components/softwareIcon';
@forward '@lucca-front/scss/src/components/sortableList';
@forward '@lucca-front/scss/src/components/statusBadge';
@forward '@lucca-front/scss/src/components/tag';
@forward '@lucca-front/scss/src/components/textFlow';
@forward '@lucca-front/scss/src/components/timeline';
@forward '@lucca-front/scss/src/components/title';
@forward '@lucca-front/scss/src/components/titleSection';
@forward '@lucca-front/scss/src/components/userTile';
```

```scss
// Tables
@forward '@lucca-front/scss/src/components/dataTable';
@forward '@lucca-front/scss/src/components/dataTableSticked';
```

--------------------------------

### Callout Popover Template Logic

Source: https://github.com/luccasa/lucca-front/blob/master/packages/ng/callout/callout-popover/callout-popover.component.html

Demonstrates the use of state variables and conditional rendering for displaying callout icons, button labels, and alternative button text within the popover template.

```html
@let calloutIcon = state() | luCalloutIcon: icon(); @if (calloutIcon) { } {{ buttonLabel() }} {{ buttonAlt() || buttonLabel() }}

@if (calloutIcon) {

}

@if (heading()) { @if (!headingHiddenIfSingleItem() || feedbackItems().length !== 1) {

} }
```

--------------------------------

### Regenerate a Single Component's SKILL.md

Source: https://github.com/luccasa/lucca-front/blob/master/scripts/generate-skills/README.md

Use this command to force the regeneration of the SKILL.md file for a specific component. Replace 'button' with the desired component name.

```bash
npm run skills:generate -- --force --component button
```

--------------------------------

### Create Custom User Directive

Source: https://github.com/luccasa/lucca-front/blob/master/docs/core-select-users-directive.md

Extend `LuCoreSelectUsersDirective` to customize the data source. Override the `getOptions` method to fetch data from a custom service. Ensure `limit` is set for scroll loading.

```typescript
import { Directive, forwardRef, inject } from '@angular/core';
import { LuCoreSelectUsersDirective, provideCoreSelectUsersContext } from '@lucca-front/ng/core-select/user';
import { MAGIC_PAGE_SIZE } from '@lucca-front/ng/core-select/api';
import { Observable, map } from 'rxjs';

import { Person } from '../models';
import { PersonService } from '../services';

@Directive({
  selector: '[appPersons]',
  exportAs: 'appPersons',
  providers: [provideCoreSelectUsersContext(() => PersonsDirective)],
})
export class PersonsDirective extends LuCoreSelectUsersDirective<Person> {
  #personsService = inject(PersonService);

  protected override getOptions(params: Record<string, string | number | boolean>, page: number): Observable<Person[]> {
    return this.#personsService.getPersons({ page: page + 1, limit: MAGIC_PAGE_SIZE, ...params }).pipe(map((response) => response.items));
  }
}
```

--------------------------------

### Lucca Checkbox Input with NgControl

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-field.stories.html

Demonstrates a Lucca checkbox input field integrated with NgControl. Ideal for boolean selections within a form.

```html
<lu-checkbox-input ngControl="isActive"></lu-checkbox-input>
```

--------------------------------

### App Initialization with Locale ID

Source: https://github.com/luccasa/lucca-front/wiki/Localization

Configure the application to resolve the `LOCALE_ID` before initialization by using `APP_INITIALIZER`. This approach might delay app startup if the API call is slow.

```typescript
//app.module.ts
@NgModule({
	declarations: [AppComponent],
	imports: [ /* ... */ ],
	providers: [
		{
			provide: APP_INITIALIZER,
			useFactory: localeInit, // this factory calls the api endpoint to know what `LOCALE_ID` to use
			multi: true,
		},
	],
	bootstrap: [AppComponent],
})
export class AppModule {}
```

--------------------------------

### Lucca Switch Input with NgControl

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-field.stories.html

Illustrates using a Lucca switch input field with NgControl. This provides a toggle functionality for form inputs.

```html
<lu-switch-input ngControl="isToggled"></lu-switch-input>
```

--------------------------------

### Highlight Text with Palettes (Angular)

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/highlight-text/highlight-text.stories.html

Demonstrates dynamic rendering of highlight text within an Angular @for loop, showing both bold and standard text variations.

```html
@for (palette of paletteOptions; track palette) { lorem **ipsum** dolor  
}
```

```html
@for (palette of paletteOptions; track palette) { lorem ipsum dolor  
}
```

--------------------------------

### Update Lucca Front to the Latest Version

Source: https://github.com/luccasa/lucca-front/blob/master/README.md

Update Lucca Front packages to the latest available version using `npx ng update`. This can be done without specifying a version or by explicitly using '@latest'.

```bash
npx ng update @lucca-front/ng
```

```bash
npx ng update @lucca-front/ng@latest
```

--------------------------------

### Navigation Buttons

Source: https://github.com/luccasa/lucca-front/blob/master/packages/ng/date2/date-range-input/date-range-input.component.html

Includes placeholders for previous and next navigation buttons.

```html
{{ intl().previous }}

{{ intl().next }}
```

--------------------------------

### Conditional Rendering of Prefix

Source: https://github.com/luccasa/lucca-front/blob/master/packages/ng/forms/text-input/text-input.component.html

Renders a prefix if the prefix() function returns a value.

```html
@if (prefix(); as prefix) { }
```

--------------------------------

### Lucca Segmented Control with NgControl

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-field.stories.html

Illustrates a Lucca segmented control with NgControl. This component allows selection from a set of options, similar to radio buttons but often visually distinct.

```html
<lu-segmented-control ngControl="difficulty"></lu-segmented-control>
```

--------------------------------

### Lucca Number Input with NgControl

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/forms/inject-ng-control/inject-ng-control-form-field.stories.html

Illustrates integrating a Lucca number input field with NgControl. Use this for numeric inputs requiring validation and control.

```html
<lu-number-input ngControl="age"></lu-number-input>
```

--------------------------------

### Run ESLint for Detection and Auto-fix

Source: https://github.com/luccasa/lucca-front/blob/master/packages/eslint-plugin/README.md

Execute ESLint to detect TypeScript errors and apply automatic fixes for unsafe property access.

```bash
# Lint only (detection)
eslint src/

# With auto-fix
eslint --fix src/
```

--------------------------------

### Table with User Data

Source: https://github.com/luccasa/lucca-front/blob/master/stories/qa/table/table.stories.html

A table structure displaying user-related information, such as 'User Name' and associated data.

```html
<table>
  <thead>
    <tr>
      <th>Head cell</th>
      <th>Head cell</th>
      <th>Head cell</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>User Name</td>
      <td>Some data</td>
      <td>User Name</td>
    </tr>
    <tr>
      <td>Some data</td>
      <td>User Name</td>
      <td>Some data</td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### Conditional Rendering of Addon Content

Source: https://github.com/luccasa/lucca-front/blob/master/packages/ng/forms/number-input/number-input.component.html

Renders addon content or icon based on their existence. Also handles prefix and suffix rendering.

```html
@if (addon.content) { {{ addon.content }} } @if (addon.icon) { } @if (prefix(); as prefix) { } @if (suffix()) { }
```

--------------------------------

### Display Next Navigation Button

Source: https://github.com/luccasa/lucca-front/blob/master/packages/ng/date2/date-input/date-input.component.html

Renders the label for the 'next' navigation button.

```HTML
{{ intl().next }}
```

--------------------------------

### Conditional Rendering for Panel Content

Source: https://github.com/luccasa/lucca-front/blob/master/packages/ng/simple-select/panel/panel.component.html

This snippet demonstrates the primary conditional rendering block for the panel content, using context variables like options, clueChange, groupTemplateLocation, and shouldDisplayAddOption. It also shows how to render custom panel header templates.

```html
@if ( { options: (options$ | async) || [], clueChange: (clueChange$ | async) || "", groupTemplateLocation: groupTemplateLocation$ | async, shouldDisplayAddOption: shouldDisplayAddOption$ | async, }; as ctx ) {

@if (selectInput.panelHeaderTpl(); as tpl) {

}

@if (grouping() && ctx.groupTemplateLocation === "group-header") { @for ( group of ctx.options | luOptionGroup: grouping().selector; track trackGroupsBy(groupIndex, group); let groupIndex = $index ) {

} } @if (!grouping() || ctx.groupTemplateLocation !== "group-header") { }

@if (treeGenerator) { @for (branch of options | luTreeDisplay: treeGenerator; let index = $index; track trackBranchesBy(index, branch)) { }

} @else { @for (option of options; track trackOptionsBy(index, option); let index = $index) { }

}

@if (ctx.options.length === 0 && !loading()) {

{{ ctx.clueChange.length ? intl().emptyResults : intl().emptyOptions }}

}

@if (loading()) {

{{ intl().loading }}

}

@if (ctx.shouldDisplayAddOption) {

}

@if (selectInput.panelFooterTpl(); as tpl) {

}

}
```