carbon-components-angular
Version:
Next generation components
97 lines • 9.37 kB
JavaScript
import { Directive, HostBinding, Input, ContentChildren } from "@angular/core";
import * as i0 from "@angular/core";
const MAX_LEVEL = 2;
/**
* Applies layering styles to the div container it is applied to. Get started with importing the module:
*
* ```typescript
* import { LayerModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-layer--basic)
*/
export class LayerDirective {
/**
* @deprecated as of v5 - Use `cdsLayer` input property instead
*/
set ibmLayer(level) {
this.cdsLayer = level;
}
/**
* Override layer level
* Empty string has been added as an option for Angular 16+ to resolve type errors
*/
set cdsLayer(level) {
if (typeof (level) === "number") {
this._passedLevel = level;
this.layer = level;
}
}
get cdsLayer() {
return this._passedLevel;
}
/**
* If cdsLayer is undefined, auto increment & iterate level
*/
set layer(level) {
if (typeof level === "number") {
this._level = Math.max(0, Math.min(level, MAX_LEVEL));
if (this.layerChildren) {
this.layerChildren.forEach((layer) => {
// Ignore self to prevent infinite recursion
if (layer === this) {
return;
}
layer.layer = typeof layer._passedLevel === "number" ? layer._passedLevel : this.layer + 1;
});
}
}
}
get layer() {
return this._level;
}
/**
* Using host bindings with classes to ensure we do not
* overwrite user added classes
*/
get layerOneClass() {
return this.layer === 0;
}
get layerTwoClass() {
return this.layer === 1;
}
get layerThreeClass() {
return this.layer === 2;
}
ngAfterContentInit() {
if (typeof this.cdsLayer !== "number") {
this.layer = 1;
}
}
}
LayerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LayerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
LayerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: LayerDirective, selector: "[cdsLayer], [ibmLayer]", inputs: { ibmLayer: "ibmLayer", cdsLayer: "cdsLayer" }, host: { properties: { "class.cds--layer-one": "this.layerOneClass", "class.cds--layer-two": "this.layerTwoClass", "class.cds--layer-three": "this.layerThreeClass" } }, queries: [{ propertyName: "layerChildren", predicate: LayerDirective }], exportAs: ["layer"], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LayerDirective, decorators: [{
type: Directive,
args: [{
selector: "[cdsLayer], [ibmLayer]",
exportAs: "layer"
}]
}], propDecorators: { ibmLayer: [{
type: Input
}], cdsLayer: [{
type: Input
}], layerOneClass: [{
type: HostBinding,
args: ["class.cds--layer-one"]
}], layerTwoClass: [{
type: HostBinding,
args: ["class.cds--layer-two"]
}], layerThreeClass: [{
type: HostBinding,
args: ["class.cds--layer-three"]
}], layerChildren: [{
type: ContentChildren,
args: [LayerDirective, { descendants: false }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGF5ZXIuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2xheWVyL2xheWVyLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sU0FBUyxFQUNULFdBQVcsRUFDWCxLQUFLLEVBQ0wsZUFBZSxFQUdmLE1BQU0sZUFBZSxDQUFDOztBQUV2QixNQUFNLFNBQVMsR0FBRyxDQUFDLENBQUM7QUFFcEI7Ozs7Ozs7O0dBUUc7QUFLSCxNQUFNLE9BQU8sY0FBYztJQUUxQjs7T0FFRztJQUNILElBQWEsUUFBUSxDQUFDLEtBQXFCO1FBQzFDLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO0lBQ3ZCLENBQUM7SUFFRDs7O09BR0c7SUFDSCxJQUFhLFFBQVEsQ0FBQyxLQUFxQjtRQUMxQyxJQUFJLE9BQU0sQ0FBQyxLQUFLLENBQUMsS0FBSyxRQUFRLEVBQUU7WUFDL0IsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7WUFDMUIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7U0FDbkI7SUFDRixDQUFDO0lBRUQsSUFBSSxRQUFRO1FBQ1gsT0FBTyxJQUFJLENBQUMsWUFBWSxDQUFDO0lBQzFCLENBQUM7SUFFRDs7T0FFRztJQUNILElBQUksS0FBSyxDQUFDLEtBQWE7UUFDdEIsSUFBSSxPQUFPLEtBQUssS0FBSyxRQUFRLEVBQUU7WUFDOUIsSUFBSSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLEtBQUssRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFDO1lBQ3RELElBQUksSUFBSSxDQUFDLGFBQWEsRUFBRTtnQkFDdkIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTtvQkFDcEMsNENBQTRDO29CQUM1QyxJQUFJLEtBQUssS0FBSyxJQUFJLEVBQUU7d0JBQ25CLE9BQU87cUJBQ1A7b0JBQ0QsS0FBSyxDQUFDLEtBQUssR0FBRyxPQUFPLEtBQUssQ0FBQyxZQUFZLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQztnQkFDNUYsQ0FBQyxDQUFDLENBQUM7YUFDSDtTQUNEO0lBQ0YsQ0FBQztJQUVELElBQUksS0FBSztRQUNSLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztJQUNwQixDQUFDO0lBRUQ7OztPQUdHO0lBQ0gsSUFBeUMsYUFBYTtRQUNyRCxPQUFPLElBQUksQ0FBQyxLQUFLLEtBQUssQ0FBQyxDQUFDO0lBQ3pCLENBQUM7SUFFRCxJQUF5QyxhQUFhO1FBQ3JELE9BQU8sSUFBSSxDQUFDLEtBQUssS0FBSyxDQUFDLENBQUM7SUFDekIsQ0FBQztJQUVELElBQTJDLGVBQWU7UUFDekQsT0FBTyxJQUFJLENBQUMsS0FBSyxLQUFLLENBQUMsQ0FBQztJQUN6QixDQUFDO0lBU0Qsa0JBQWtCO1FBQ2pCLElBQUksT0FBTyxJQUFJLENBQUMsUUFBUSxLQUFLLFFBQVEsRUFBRTtZQUN0QyxJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQztTQUNmO0lBQ0YsQ0FBQzs7MkdBekVXLGNBQWM7K0ZBQWQsY0FBYyw0VEE4RFQsY0FBYzsyRkE5RG5CLGNBQWM7a0JBSjFCLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLHdCQUF3QjtvQkFDbEMsUUFBUSxFQUFFLE9BQU87aUJBQ2pCOzhCQU1hLFFBQVE7c0JBQXBCLEtBQUs7Z0JBUU8sUUFBUTtzQkFBcEIsS0FBSztnQkFxQ21DLGFBQWE7c0JBQXJELFdBQVc7dUJBQUMsc0JBQXNCO2dCQUlNLGFBQWE7c0JBQXJELFdBQVc7dUJBQUMsc0JBQXNCO2dCQUlRLGVBQWU7c0JBQXpELFdBQVc7dUJBQUMsd0JBQXdCO2dCQUlvQixhQUFhO3NCQUFyRSxlQUFlO3VCQUFDLGNBQWMsRUFBRSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuXHREaXJlY3RpdmUsXG5cdEhvc3RCaW5kaW5nLFxuXHRJbnB1dCxcblx0Q29udGVudENoaWxkcmVuLFxuXHRRdWVyeUxpc3QsXG5cdEFmdGVyQ29udGVudEluaXRcbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuY29uc3QgTUFYX0xFVkVMID0gMjtcblxuLyoqXG4gKiBBcHBsaWVzIGxheWVyaW5nIHN0eWxlcyB0byB0aGUgZGl2IGNvbnRhaW5lciBpdCBpcyBhcHBsaWVkIHRvLiBHZXQgc3RhcnRlZCB3aXRoIGltcG9ydGluZyB0aGUgbW9kdWxlOlxuICpcbiAqIGBgYHR5cGVzY3JpcHRcbiAqIGltcG9ydCB7IExheWVyTW9kdWxlIH0gZnJvbSAnY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhcic7XG4gKiBgYGBcbiAqXG4gKiBbU2VlIGRlbW9dKC4uLy4uLz9wYXRoPS9zdG9yeS9jb21wb25lbnRzLWxheWVyLS1iYXNpYylcbiAqL1xuQERpcmVjdGl2ZSh7XG5cdHNlbGVjdG9yOiBcIltjZHNMYXllcl0sIFtpYm1MYXllcl1cIixcblx0ZXhwb3J0QXM6IFwibGF5ZXJcIlxufSlcbmV4cG9ydCBjbGFzcyBMYXllckRpcmVjdGl2ZSBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xuXG5cdC8qKlxuXHQgKiBAZGVwcmVjYXRlZCBhcyBvZiB2NSAtIFVzZSBgY2RzTGF5ZXJgIGlucHV0IHByb3BlcnR5IGluc3RlYWRcblx0ICovXG5cdEBJbnB1dCgpIHNldCBpYm1MYXllcihsZXZlbDogMCB8IDEgfCAyIHwgXCJcIikge1xuXHRcdHRoaXMuY2RzTGF5ZXIgPSBsZXZlbDtcblx0fVxuXG5cdC8qKlxuXHQgKiBPdmVycmlkZSBsYXllciBsZXZlbFxuXHQgKiBFbXB0eSBzdHJpbmcgaGFzIGJlZW4gYWRkZWQgYXMgYW4gb3B0aW9uIGZvciBBbmd1bGFyIDE2KyB0byByZXNvbHZlIHR5cGUgZXJyb3JzXG5cdCAqL1xuXHRASW5wdXQoKSBzZXQgY2RzTGF5ZXIobGV2ZWw6IDAgfCAxIHwgMiB8IFwiXCIpIHtcblx0XHRpZiAodHlwZW9mKGxldmVsKSA9PT0gXCJudW1iZXJcIikge1xuXHRcdFx0dGhpcy5fcGFzc2VkTGV2ZWwgPSBsZXZlbDtcblx0XHRcdHRoaXMubGF5ZXIgPSBsZXZlbDtcblx0XHR9XG5cdH1cblxuXHRnZXQgY2RzTGF5ZXIoKSB7XG5cdFx0cmV0dXJuIHRoaXMuX3Bhc3NlZExldmVsO1xuXHR9XG5cblx0LyoqXG5cdCAqIElmIGNkc0xheWVyIGlzIHVuZGVmaW5lZCwgYXV0byBpbmNyZW1lbnQgJiBpdGVyYXRlIGxldmVsXG5cdCAqL1xuXHRzZXQgbGF5ZXIobGV2ZWw6IG51bWJlcikge1xuXHRcdGlmICh0eXBlb2YgbGV2ZWwgPT09IFwibnVtYmVyXCIpIHtcblx0XHRcdHRoaXMuX2xldmVsID0gTWF0aC5tYXgoMCwgTWF0aC5taW4obGV2ZWwsIE1BWF9MRVZFTCkpO1xuXHRcdFx0aWYgKHRoaXMubGF5ZXJDaGlsZHJlbikge1xuXHRcdFx0XHR0aGlzLmxheWVyQ2hpbGRyZW4uZm9yRWFjaCgobGF5ZXIpID0+IHtcblx0XHRcdFx0XHQvLyBJZ25vcmUgc2VsZiB0byBwcmV2ZW50IGluZmluaXRlIHJlY3Vyc2lvblxuXHRcdFx0XHRcdGlmIChsYXllciA9PT0gdGhpcykge1xuXHRcdFx0XHRcdFx0cmV0dXJuO1xuXHRcdFx0XHRcdH1cblx0XHRcdFx0XHRsYXllci5sYXllciA9IHR5cGVvZiBsYXllci5fcGFzc2VkTGV2ZWwgPT09IFwibnVtYmVyXCIgPyBsYXllci5fcGFzc2VkTGV2ZWwgOiB0aGlzLmxheWVyICsgMTtcblx0XHRcdFx0fSk7XG5cdFx0XHR9XG5cdFx0fVxuXHR9XG5cblx0Z2V0IGxheWVyKCkge1xuXHRcdHJldHVybiB0aGlzLl9sZXZlbDtcblx0fVxuXG5cdC8qKlxuXHQgKiBVc2luZyBob3N0IGJpbmRpbmdzIHdpdGggY2xhc3NlcyB0byBlbnN1cmUgd2UgZG8gbm90XG5cdCAqIG92ZXJ3cml0ZSB1c2VyIGFkZGVkIGNsYXNzZXNcblx0ICovXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tbGF5ZXItb25lXCIpIGdldCBsYXllck9uZUNsYXNzKCkge1xuXHRcdHJldHVybiB0aGlzLmxheWVyID09PSAwO1xuXHR9XG5cblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS1sYXllci10d29cIikgZ2V0IGxheWVyVHdvQ2xhc3MoKSB7XG5cdFx0cmV0dXJuIHRoaXMubGF5ZXIgPT09IDE7XG5cdH1cblxuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLWxheWVyLXRocmVlXCIpIGdldCBsYXllclRocmVlQ2xhc3MoKSB7XG5cdFx0cmV0dXJuIHRoaXMubGF5ZXIgPT09IDI7XG5cdH1cblxuXHRAQ29udGVudENoaWxkcmVuKExheWVyRGlyZWN0aXZlLCB7IGRlc2NlbmRhbnRzOiBmYWxzZSB9KSBsYXllckNoaWxkcmVuOiBRdWVyeUxpc3Q8TGF5ZXJEaXJlY3RpdmU+O1xuXG5cdC8vIEhvbGRzIHVzZXIgcGFzc3NlZCBsZXZlbFxuXHRwcml2YXRlIF9wYXNzZWRMZXZlbDtcblx0Ly8gSG9sZHMgY3VycmVudCBsZXZlbFxuXHRwcml2YXRlIF9sZXZlbDtcblxuXHRuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XG5cdFx0aWYgKHR5cGVvZiB0aGlzLmNkc0xheWVyICE9PSBcIm51bWJlclwiKSB7XG5cdFx0XHR0aGlzLmxheWVyID0gMTtcblx0XHR9XG5cdH1cbn1cbiJdfQ==