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