carbon-components-angular
Version:
Next generation components
90 lines (85 loc) • 4 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, HostBinding, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
/**
* Stack elements horizontally or vertically using this helper directive. Get started with importing the module:
*
* ```typescript
* import { LayoutModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/layout-stack--basic)
*/
class StackDirective {
constructor(render, hostElement) {
this.render = render;
this.hostElement = hostElement;
/**
* Orientation of the items in the stack, defaults to `vertical`
* Empty string is equivalent to "vertical"
*
* Empty string has been added as an option for Angular 16+ to resolve type errors
*/
this.cdsStack = "vertical";
}
get isHorizontal() {
return this.cdsStack === "horizontal";
}
get isVertical() {
return this.cdsStack === "vertical" || !this.cdsStack;
}
/**
* @deprecated as of v5 - Use `cdsStack` input property instead
*/
set ibmStack(type) {
this.cdsStack = type;
}
/**
* Gap in the layout, provide a custom value (string) or a step from the spacing scale (number)
*/
set gap(num) {
if (num !== undefined) {
this.render.removeClass(this.hostElement.nativeElement, `cds--stack-scale-${this._gap}`);
this.render.addClass(this.hostElement.nativeElement, `cds--stack-scale-${num}`);
this._gap = num;
}
}
}
StackDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
StackDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: StackDirective, selector: "[cdsStack], [ibmStack]", inputs: { ibmStack: "ibmStack", cdsStack: "cdsStack", gap: "gap" }, host: { properties: { "class.cds--stack-horizontal": "this.isHorizontal", "class.cds--stack-vertical": "this.isVertical" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackDirective, decorators: [{
type: Directive,
args: [{
selector: "[cdsStack], [ibmStack]"
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { isHorizontal: [{
type: HostBinding,
args: ["class.cds--stack-horizontal"]
}], isVertical: [{
type: HostBinding,
args: ["class.cds--stack-vertical"]
}], ibmStack: [{
type: Input
}], cdsStack: [{
type: Input
}], gap: [{
type: Input
}] } });
class LayoutModule {
}
LayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
LayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: LayoutModule, declarations: [StackDirective], imports: [CommonModule], exports: [StackDirective] });
LayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LayoutModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LayoutModule, decorators: [{
type: NgModule,
args: [{
declarations: [StackDirective],
exports: [StackDirective],
imports: [CommonModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { LayoutModule, StackDirective };
//# sourceMappingURL=carbon-components-angular-layout.mjs.map