carbon-components-angular
Version:
Next generation components
120 lines (115 loc) • 4.72 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, HostBinding, ContentChildren, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
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)
*/
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 }]
}] } });
class LayerModule {
}
LayerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
LayerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: LayerModule, declarations: [LayerDirective], imports: [CommonModule], exports: [LayerDirective] });
LayerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LayerModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LayerModule, decorators: [{
type: NgModule,
args: [{
declarations: [LayerDirective],
exports: [LayerDirective],
imports: [CommonModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { LayerDirective, LayerModule };
//# sourceMappingURL=carbon-components-angular-layer.mjs.map