• Konfiguration
  • Overview / API
    • Allgemein
  • Services
    • LuxComponentsConfigService
  • Classes / Interfaces
    • LuxComponentsConfigParameters
      • appFooter
      • buttonConfiguration
      • rippleConfiguration
      • labelConfiguration
      • viewConfiguration
      • tenantLogoLookupServiceUrl
        • Logos mit der App ausliefern
        • Logos über ein CDN laden
      • iconBasePath
        • Icons mit der App ausliefern
        • Icons über ein CDN laden
  • Beispiele
    • 1. Config

Das LuxComponentsConfigModule wird dazu verwendet bestimmte LuxComponents-weite Einstellungen festzulegen. Diese gelten dann für die gesamte Applikation.

Dieser Service wird von den Components benutzt, um die Standardkonfiguration zu nutzen, sollte es keine vom Entwickler übergebene Konfiguration geben. Des Weiteren bietet er die Möglichkeit, sich zu abonnieren, und so aktualisierte Konfigurationsobjekte zu erhalten.

Dieser Service sollte dann vom Entwickler genutzt werden, wenn die Konfiguration zur Laufzeit der Applikation angepasst werden soll.

Wichtig!

Wenn der Footer nicht fixiert ist, kann es auf Seiten mit wenig Inhalt dazu kommen, dass der Footer hoch rutscht (siehe Abbildung unten). D.h. alle Seiten sollten so gebaut werden, dass der Footer auf Seiten mit wenig Inhalt trotzdem am unteren Rand angezeigt wird.

In der Konfiguration in der app.module.ts muss der Logo-Ordner eingetragen werden:

const myConfiguration: LuxComponentsConfigParameters = {
  ...
  tenantLogoLookupServiceUrl: '/assets/tenant-logos/',
  ...
};

Die Logos müssen in den src/assets/tenant-logos-Ordner kopiert und mit der App ausgeliefert werden.

In der Konfiguration in der app.module.ts muss der Logo-Ordner eingetragen werden:

const myConfiguration: LuxComponentsConfigParameters = {
  ...
  tenantLogoLookupServiceUrl: 'https://[my-domain].de/tenant-logos/',
  ...
};

D.h. die Logos müssen nicht mit der App ausgeliefert werden. Sie werden direkt vom CDN-Server geladen.

Damit die Icons mit der App ausgeliefert werden können, müssen folgende Einstellungen vorgenommen werden.

Abhängigkeit in der package.json hinzufügen:

"dependencies": {
  "@ihk-gfi/lux-components-icons-and-fonts": "x.x.x",
}

Die assets-Abschnitte in der angular.json ergänzen:

"assets": [
  ...
  {
    "glob": "**/*",
    "input": "./node_modules/@ihk-gfi/lux-components-icons-and-fonts/assets/icons/",
    "output": "./assets/icons"
  },
  {
    "glob": "**/*",
    "input": "./node_modules/@ihk-gfi/lux-components-icons-and-fonts/assets/logos/",
    "output": "./assets/logos"
  },
  {
    "glob": "**/*",
    "input": "./node_modules/@ihk-gfi/lux-components-icons-and-fonts/assets/fonts/",
    "output": "./assets/fonts"
  },
  ...
]

Den foldenden Code in der styles.scss ergänzen:

@import '@ihk-gfi/lux-components-theme/src/base/luxfonts';

$basepath: '/';

@include web-fonts($basepath);

Damit die Icons über ein CDN geladen werden können, müssen folgende Einstellungen vorgenommen werden.

Abhängigkeit in der package.json hinzufügen, falls noch nicht vorhanden:

"dependencies": {
  "@ihk-gfi/lux-components-icons-and-fonts": "x.x.x",
}

Änderungen in den assets-Abschnitten in der angular.json:

Die folgenden Einträge können gelöscht werden:

"assets": [
  ...
  {
    "glob": "**/*",
    "input": "./node_modules/@ihk-gfi/lux-components-icons-and-fonts/assets/icons/",
    "output": "./assets/icons"
  },
  {
    "glob": "**/*",
    "input": "./node_modules/@ihk-gfi/lux-components-icons-and-fonts/assets/logos/",
    "output": "./assets/logos"
  },
  {
    "glob": "**/*",
    "input": "./node_modules/@ihk-gfi/lux-components-icons-and-fonts/assets/fonts/",
    "output": "./assets/fonts"
  },
  ...
]

Der folgende Abschnitt muss ergänzt werden:

"assets": [
  ...
  {
    "glob": "lux-icons.json",
    "input": "./node_modules/@ihk-gfi/lux-components-icons-and-fonts/assets/icons/",
    "output": "./assets/icons"
  },
  ...
]

Die Konfiguration in der app.module.ts muss wie folgt angepasst werden:

const myConfiguration: LuxComponentsConfigParameters = {
  ...
  iconBasePath: 'https://[my-domain].de/lux-components/icons-and-fonts/v1.8.0/',
  ...
};

Derselbe Pfad muss in der styles.scss eingesetzt werden:

@import '@ihk-gfi/lux-components-theme/src/base/luxfonts';

$basepath: 'https://[my-domain].de/lux-components/icons-and-fonts/v1.8.0/';

@include web-fonts($basepath);

D.h. die Icons and Fonts müssen nicht mit der App ausgeliefert werden. Sie werden direkt vom CDN-Server geladen.

Im CDN müssen die Icons in den Unterordner assets angelegt werden. Z.B. https://[my-domain].de/lux-components/icons-and-fonts/v1.8.0/assets/icons/Interface-Essentials/Validation/interface-validation-check-circle--checkmark-addition-circle-success-check-validation-add-form.svg

Wichtig! Falls eine CSP (Content Security Policy) den Zugriff auf Icon-Ressourcen einschränkt, muss diese um die CDN-Url (z.B. https://[my-domain].de ) erweitert werden. Z.B. in Spring-Boot-Projekten kann die CSP (siehe http - security - csp - connect-src) über die Konfigurationsdateien application.yml, application-dev.yml,... festgelegt werden.

In derapp.module.ts-Datei muss das LuxComponentsConfigModule importiert und dessen forRoot-Methode aufgerufen werden. Diese Methode erwartet eine Konfiguration als Übergabeparameter.

Ts

const myConfiguration: LuxComponentsConfigParameters = {
  generateLuxTagIds: environment.generateLuxTagIds,
  displayLuxConsoleLogs: false,
  lookupServiceUrl: "/lookup/",
  labelConfiguration: {
    allUppercase: true,
    notAppliedTo: ["lux-menu-item", "lux-side-nav-item"],
  },
  cardExpansionAnimationActive: true,
  viewConfiguration: {
    centerdView: true,
    centeredWidth: '1000px',
  }
};

@NgModule({
  declarations: [
    // ...
    AppComponent,
    // ...
  ],
  imports: [
    // ...
    // Wenn keine Konfiguration mitgegeben wird, wird eine Standardkonfiguration verwendet (siehe LuxComponentsConfigService).
    LuxComponentsConfigModule.forRoot(myConfiguration),
    // ...
  ],
  providers: [
    // ...
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}