carbon-components-angular
Version:
Next generation components
88 lines • 8.35 kB
JavaScript
import { ContentChildren, Directive, HostBinding, Input } from "@angular/core";
import { LayerDirective } from "carbon-components-angular/layer";
import * as i0 from "@angular/core";
/**
* 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)
*/
export 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"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3RoZW1lL3RoZW1lLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRU4sZUFBZSxFQUNmLFNBQVMsRUFDVCxXQUFXLEVBQ1gsS0FBSyxFQUVMLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQzs7QUFJakU7Ozs7Ozs7O0dBUUc7QUFLSCxNQUFNLE9BQU8sY0FBYztJQUozQjtRQVlDOzs7O1dBSUc7UUFDTSxhQUFRLEdBQW1CLE9BQU8sQ0FBQztRQXdCUCxlQUFVLEdBQUcsSUFBSSxDQUFDO0tBYXZEO0lBakRBOztPQUVHO0lBQ0gsSUFBYSxRQUFRLENBQUMsSUFBb0I7UUFDekMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7SUFDdEIsQ0FBQztJQVdEOzs7T0FHRztJQUNILElBQXFDLGVBQWU7UUFDbkQsT0FBTyxJQUFJLENBQUMsUUFBUSxLQUFLLE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDcEQsQ0FBQztJQUVELElBQW1DLGFBQWE7UUFDL0MsT0FBTyxJQUFJLENBQUMsUUFBUSxLQUFLLEtBQUssQ0FBQztJQUNoQyxDQUFDO0lBRUQsSUFBbUMsYUFBYTtRQUMvQyxPQUFPLElBQUksQ0FBQyxRQUFRLEtBQUssS0FBSyxDQUFDO0lBQ2hDLENBQUM7SUFFRCxJQUFvQyxjQUFjO1FBQ2pELE9BQU8sSUFBSSxDQUFDLFFBQVEsS0FBSyxNQUFNLENBQUM7SUFDakMsQ0FBQztJQUlELHFCQUFxQjtRQUNwQjs7O1dBR0c7UUFDSCxJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sRUFBRSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUM1QyxJQUFJLE9BQU8sS0FBSyxDQUFDLFFBQVEsS0FBSyxRQUFRLEVBQUU7Z0JBQ3ZDLEtBQUssQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFDO2FBQ25CO1FBQ0YsQ0FBQyxDQUFDLENBQUM7SUFDSixDQUFDOzsyR0FqRFcsY0FBYzsrRkFBZCxjQUFjLCtYQWVULGNBQWM7MkZBZm5CLGNBQWM7a0JBSjFCLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLHdCQUF3QjtvQkFDbEMsUUFBUSxFQUFFLE9BQU87aUJBQ2pCOzhCQUthLFFBQVE7c0JBQXBCLEtBQUs7Z0JBU0csUUFBUTtzQkFBaEIsS0FBSztnQkFFbUQsYUFBYTtzQkFBckUsZUFBZTt1QkFBQyxjQUFjLEVBQUUsRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFO2dCQU1sQixlQUFlO3NCQUFuRCxXQUFXO3VCQUFDLGtCQUFrQjtnQkFJSSxhQUFhO3NCQUEvQyxXQUFXO3VCQUFDLGdCQUFnQjtnQkFJTSxhQUFhO3NCQUEvQyxXQUFXO3VCQUFDLGdCQUFnQjtnQkFJTyxjQUFjO3NCQUFqRCxXQUFXO3VCQUFDLGlCQUFpQjtnQkFJTyxVQUFVO3NCQUE5QyxXQUFXO3VCQUFDLHNCQUFzQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdEFmdGVyQ29udGVudENoZWNrZWQsXG5cdENvbnRlbnRDaGlsZHJlbixcblx0RGlyZWN0aXZlLFxuXHRIb3N0QmluZGluZyxcblx0SW5wdXQsXG5cdFF1ZXJ5TGlzdFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgTGF5ZXJEaXJlY3RpdmUgfSBmcm9tIFwiY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhci9sYXllclwiO1xuXG5leHBvcnQgdHlwZSBUaGVtZVR5cGUgPSBcIndoaXRlXCIgfCBcImcxMFwiIHwgXCJnOTBcIiB8IFwiZzEwMFwiO1xuXG4vKipcbiAqIEFwcGxpZXMgdGhlbWUgc3R5bGVzIHRvIHRoZSBkaXYgY29udGFpbmVyIGl0IGlzIGFwcGxpZWQgdG8uIEdldCBzdGFydGVkIHdpdGggaW1wb3J0aW5nIHRoZSBtb2R1bGU6XG4gKlxuICogYGBgdHlwZXNjcmlwdFxuICogaW1wb3J0IHsgVGhlbWVNb2R1bGUgfSBmcm9tICdjYXJib24tY29tcG9uZW50cy1hbmd1bGFyJztcbiAqIGBgYFxuICpcbiAqIFtTZWUgZGVtb10oLi4vLi4vP3BhdGg9L3N0b3J5L2NvbXBvbmVudHMtdGhlbWUtLWJhc2ljKVxuICovXG5ARGlyZWN0aXZlKHtcblx0c2VsZWN0b3I6IFwiW2Nkc1RoZW1lXSwgW2libVRoZW1lXVwiLFxuXHRleHBvcnRBczogXCJ0aGVtZVwiXG59KVxuZXhwb3J0IGNsYXNzIFRoZW1lRGlyZWN0aXZlIGltcGxlbWVudHMgQWZ0ZXJDb250ZW50Q2hlY2tlZCB7XG5cdC8qKlxuXHQgKiBAZGVwcmVjYXRlZCBhcyBvZiB2NSAtIFVzZSBgY2RzVGhlbWVgIGlucHV0IHByb3BlcnR5IGluc3RlYWRcblx0ICovXG5cdEBJbnB1dCgpIHNldCBpYm1UaGVtZSh0eXBlOiBUaGVtZVR5cGUgfCBcIlwiKSB7XG5cdFx0dGhpcy5jZHNUaGVtZSA9IHR5cGU7XG5cdH1cblxuXHQvKipcblx0ICogU2V0cyB0aGUgdGhlbWUgZm9yIHRoZSBjb250ZW50XG5cdCAqIEFjY2VwdHMgYFRoZW1lVHlwZWAgb3Igbm90aGluZyAoZW1wdHkgc3RyaW5nIHdoaWNoIGlzIGVxdWl2YWxlbnQgdG8gXCJ3aGl0ZVwiKVxuXHQgKiBFbXB0eSBzdHJpbmcgaGFzIGJlZW4gYWRkZWQgYXMgYW4gb3B0aW9uIGZvciBBbmd1bGFyIDE2KyB0byByZXNvbHZlIHR5cGUgZXJyb3JzXG5cdCAqL1xuXHRASW5wdXQoKSBjZHNUaGVtZTogVGhlbWVUeXBlIHwgXCJcIiA9IFwid2hpdGVcIjtcblxuXHRAQ29udGVudENoaWxkcmVuKExheWVyRGlyZWN0aXZlLCB7IGRlc2NlbmRhbnRzOiBmYWxzZSB9KSBsYXllckNoaWxkcmVuOiBRdWVyeUxpc3Q8TGF5ZXJEaXJlY3RpdmU+O1xuXG5cdC8qKlxuXHQgKiBVc2luZyBob3N0IGJpbmRpbmdzIHdpdGggY2xhc3NlcyB0byBlbnN1cmUgd2UgZG8gbm90XG5cdCAqIG92ZXJ3cml0ZSB1c2VyIGFkZGVkIGNsYXNzZXNcblx0ICovXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0td2hpdGVcIikgZ2V0IHdoaXRlVGhlbWVDbGFzcygpIHtcblx0XHRyZXR1cm4gdGhpcy5jZHNUaGVtZSA9PT0gXCJ3aGl0ZVwiIHx8ICF0aGlzLmNkc1RoZW1lO1xuXHR9XG5cblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS1nMTBcIikgZ2V0IGcxMFRoZW1lQ2xhc3MoKSB7XG5cdFx0cmV0dXJuIHRoaXMuY2RzVGhlbWUgPT09IFwiZzEwXCI7XG5cdH1cblxuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLWc5MFwiKSBnZXQgZzkwVGhlbWVDbGFzcygpIHtcblx0XHRyZXR1cm4gdGhpcy5jZHNUaGVtZSA9PT0gXCJnOTBcIjtcblx0fVxuXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tZzEwMFwiKSBnZXQgZzEwMFRoZW1lQ2xhc3MoKSB7XG5cdFx0cmV0dXJuIHRoaXMuY2RzVGhlbWUgPT09IFwiZzEwMFwiO1xuXHR9XG5cblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS1sYXllci1vbmVcIikgbGF5ZXJDbGFzcyA9IHRydWU7XG5cblx0bmdBZnRlckNvbnRlbnRDaGVja2VkKCk6IHZvaWQge1xuXHRcdC8qKlxuXHRcdCAqIFJlc2V0cyBuZXh0IGxheWVyIGxldmVsIGluIHRoZW1lXG5cdFx0ICogSWYgbm90IGZvdW5kLCB0aGUgbGF5ZXIgd2lsbCBiZSAxIGJ5IGRlZmF1bHRcblx0XHQgKi9cblx0XHR0aGlzLmxheWVyQ2hpbGRyZW4udG9BcnJheSgpLmZvckVhY2gobGF5ZXIgPT4ge1xuXHRcdFx0aWYgKHR5cGVvZiBsYXllci5jZHNMYXllciAhPT0gXCJudW1iZXJcIikge1xuXHRcdFx0XHRsYXllci5jZHNMYXllciA9IDE7XG5cdFx0XHR9XG5cdFx0fSk7XG5cdH1cbn1cbiJdfQ==