# ItineraryLib

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.

## Code scaffolding

Run `ng generate component component-name --project itinerary-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project itinerary-lib`.
> Note: Don't forget to add `--project itinerary-lib` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build itinerary-lib` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build itinerary-lib`, go to the dist folder `cd dist/itinerary-lib` and run `npm publish`.

## Using the Library Styles

The library includes pre-compiled Tailwind CSS styles that you can import directly without configuring Tailwind in your project.

### Option 1: Import Pre-compiled CSS (Recommended)

Simply import the compiled CSS file in your Angular application:

**In `angular.json` (styles array):**
```json
"styles": [
  "node_modules/@flower-city-online/itinerary-lib/styles.css",
  "src/styles.scss"
]
```

**Or in your main `styles.scss` file:**
```scss
@import '@flower-city-online/itinerary-lib/styles.css';
```

This includes all Tailwind utilities and custom components with your library's theme configuration (colors, fonts, breakpoints, etc.).

**Note:** The pre-compiled CSS includes Tailwind utilities and some custom utilities. For additional custom SCSS classes (like `btn-dark`, `btn-white`, `outset-shadow`, etc.), you may also need to import the full styles file:

```json
"styles": [
  "node_modules/@flower-city-online/itinerary-lib/styles.css",
  "node_modules/@flower-city-online/itinerary-lib/src/lib/itinerary-app/styles.scss",
  "src/styles.scss"
]
```

### Option 2: Import Source SCSS (Advanced)

If you prefer to use the source SCSS files and configure Tailwind yourself, you can import:

```scss
@import '@flower-city-online/itinerary-lib/src/lib/itinerary-app/styles.scss';
```

This requires you to have Tailwind CSS configured in your project.

## Setting Up Translations

The library uses `@ngx-translate` for internationalization. To make translations work in your consuming application, follow these steps:

### Step 1: Configure TranslateModule in Your App

In your consuming app's `app.module.ts` (or `app.config.ts` for standalone), add:

```typescript
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  imports: [
    // ... other imports
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      },
      defaultLanguage: 'en'
    }),
    // ... other modules
  ]
})
```

### Step 2: Copy Translation Files

You need to copy the translation files from the library to your app's assets folder.

**Option A: Manual Copy (One-time)**
Copy the translation files from:
```
node_modules/@flower-city-online/itinerary-lib/src/assets/i18n/
```
To:
```
src/assets/i18n/
```

**Option B: Automatic Copy via angular.json (Recommended)**

Add this to your `angular.json` in the `assets` array of your project:

```json
{
  "glob": "**/*",
  "input": "node_modules/@flower-city-online/itinerary-lib/src/assets/i18n",
  "output": "/assets/i18n"
}
```

This will automatically copy the translation files when you build your app.

### Step 3: Verify

After setup, translations should work automatically. The library will load translations from `/assets/i18n/` in your consuming app.

**Note:** If you need to customize translations, you can override specific keys in your own translation files. The library's translations will be merged with your app's translations.

## Running unit tests

Run `ng test itinerary-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.