carbon-components-angular
Version:
Next generation components
111 lines (106 loc) • 4.73 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, ContentChildren, HostBinding, NgModule } from '@angular/core';
import { LayerDirective, LayerModule } from 'carbon-components-angular/layer';
import { CommonModule } from '@angular/common';
/**
* Applies theme styles to the div container it is applied to. Get started with importing the module:
*
* ```typescript
* import { ThemeModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-theme--basic)
*/
class ThemeDirective {
constructor() {
/**
* Sets the theme for the content
* Accepts `ThemeType` or nothing (empty string which is equivalent to "white")
* Empty string has been added as an option for Angular 16+ to resolve type errors
*/
this.cdsTheme = "white";
this.layerClass = true;
}
/**
* @deprecated as of v5 - Use `cdsTheme` input property instead
*/
set ibmTheme(type) {
this.cdsTheme = type;
}
/**
* Using host bindings with classes to ensure we do not
* overwrite user added classes
*/
get whiteThemeClass() {
return this.cdsTheme === "white" || !this.cdsTheme;
}
get g10ThemeClass() {
return this.cdsTheme === "g10";
}
get g90ThemeClass() {
return this.cdsTheme === "g90";
}
get g100ThemeClass() {
return this.cdsTheme === "g100";
}
ngAfterContentChecked() {
/**
* Resets next layer level in theme
* If not found, the layer will be 1 by default
*/
this.layerChildren.toArray().forEach(layer => {
if (typeof layer.cdsLayer !== "number") {
layer.cdsLayer = 1;
}
});
}
}
ThemeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ThemeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
ThemeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ThemeDirective, selector: "[cdsTheme], [ibmTheme]", inputs: { ibmTheme: "ibmTheme", cdsTheme: "cdsTheme" }, host: { properties: { "class.cds--white": "this.whiteThemeClass", "class.cds--g10": "this.g10ThemeClass", "class.cds--g90": "this.g90ThemeClass", "class.cds--g100": "this.g100ThemeClass", "class.cds--layer-one": "this.layerClass" } }, queries: [{ propertyName: "layerChildren", predicate: LayerDirective }], exportAs: ["theme"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ThemeDirective, decorators: [{
type: Directive,
args: [{
selector: "[cdsTheme], [ibmTheme]",
exportAs: "theme"
}]
}], propDecorators: { ibmTheme: [{
type: Input
}], cdsTheme: [{
type: Input
}], layerChildren: [{
type: ContentChildren,
args: [LayerDirective, { descendants: false }]
}], whiteThemeClass: [{
type: HostBinding,
args: ["class.cds--white"]
}], g10ThemeClass: [{
type: HostBinding,
args: ["class.cds--g10"]
}], g90ThemeClass: [{
type: HostBinding,
args: ["class.cds--g90"]
}], g100ThemeClass: [{
type: HostBinding,
args: ["class.cds--g100"]
}], layerClass: [{
type: HostBinding,
args: ["class.cds--layer-one"]
}] } });
class ThemeModule {
}
ThemeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ThemeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ThemeModule, declarations: [ThemeDirective], imports: [CommonModule, LayerModule], exports: [ThemeDirective] });
ThemeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ThemeModule, imports: [CommonModule, LayerModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ThemeModule, decorators: [{
type: NgModule,
args: [{
declarations: [ThemeDirective],
exports: [ThemeDirective],
imports: [CommonModule, LayerModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ThemeDirective, ThemeModule };
//# sourceMappingURL=carbon-components-angular-theme.mjs.map