ItineraryLib

This library was generated with 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):

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

Or in your main styles.scss file:

@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:

"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:

@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:

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:

{
  "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.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.