carbon-components-angular
Version:
Next generation components
76 lines (74 loc) • 6.12 kB
JavaScript
import { Component, HostBinding, Input } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
/**
* Get started with importing the module:
*
* ```typescript
* import { ButtonModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-button-button-set--basic)
*/
export class ButtonSet {
constructor() {
this.buttonSetClass = true;
/**
* When `true`, buttons grow to fill the container width (fluid button set).
*/
this.fluid = false;
/**
* When `true`, stacks buttons vertically. Use with non-fluid layouts, otherwise `fluid` will override style
*/
this.stacked = false;
}
get fluidClass() {
return this.fluid;
}
get stackedClass() {
return this.stacked;
}
}
ButtonSet.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonSet, deps: [], target: i0.ɵɵFactoryTarget.Component });
ButtonSet.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ButtonSet, selector: "cds-button-set, ibm-button-set", inputs: { fluid: "fluid", stacked: "stacked" }, host: { properties: { "class.cds--btn-set": "this.buttonSetClass", "class.cds--btn-set--fluid": "this.fluidClass", "class.cds--btn-set--stacked": "this.stackedClass" } }, ngImport: i0, template: `
<div *ngIf="fluid" class="cds--btn-set__fluid-inner cds--btn-set__fluid-inner--auto-stack">
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
<ng-container *ngIf="!fluid">
<ng-container *ngTemplateOutlet="content"></ng-container>
</ng-container>
<ng-template #content>
<ng-content></ng-content>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonSet, decorators: [{
type: Component,
args: [{
selector: "cds-button-set, ibm-button-set",
template: `
<div *ngIf="fluid" class="cds--btn-set__fluid-inner cds--btn-set__fluid-inner--auto-stack">
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
<ng-container *ngIf="!fluid">
<ng-container *ngTemplateOutlet="content"></ng-container>
</ng-container>
<ng-template #content>
<ng-content></ng-content>
</ng-template>
`
}]
}], propDecorators: { buttonSetClass: [{
type: HostBinding,
args: ["class.cds--btn-set"]
}], fluid: [{
type: Input
}], stacked: [{
type: Input
}], fluidClass: [{
type: HostBinding,
args: ["class.cds--btn-set--fluid"]
}], stackedClass: [{
type: HostBinding,
args: ["class.cds--btn-set--stacked"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLXNldC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYnV0dG9uL2J1dHRvbi1zZXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBRTlEOzs7Ozs7OztHQVFHO0FBZ0JILE1BQU0sT0FBTyxTQUFTO0lBZnRCO1FBZ0JvQyxtQkFBYyxHQUFHLElBQUksQ0FBQztRQUV6RDs7V0FFRztRQUNNLFVBQUssR0FBRyxLQUFLLENBQUM7UUFFdkI7O1dBRUc7UUFDTSxZQUFPLEdBQUcsS0FBSyxDQUFDO0tBV3pCO0lBVEEsSUFDSSxVQUFVO1FBQ2IsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ25CLENBQUM7SUFFRCxJQUNJLFlBQVk7UUFDZixPQUFPLElBQUksQ0FBQyxPQUFPLENBQUM7SUFDckIsQ0FBQzs7c0dBckJXLFNBQVM7MEZBQVQsU0FBUyxpU0FiWDs7Ozs7Ozs7Ozs7RUFXVDsyRkFFVyxTQUFTO2tCQWZyQixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSxnQ0FBZ0M7b0JBQzFDLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7RUFXVDtpQkFDRDs4QkFFbUMsY0FBYztzQkFBaEQsV0FBVzt1QkFBQyxvQkFBb0I7Z0JBS3hCLEtBQUs7c0JBQWIsS0FBSztnQkFLRyxPQUFPO3NCQUFmLEtBQUs7Z0JBR0YsVUFBVTtzQkFEYixXQUFXO3VCQUFDLDJCQUEyQjtnQkFNcEMsWUFBWTtzQkFEZixXQUFXO3VCQUFDLDZCQUE2QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSG9zdEJpbmRpbmcsIElucHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcblxuLyoqXG4gKiBHZXQgc3RhcnRlZCB3aXRoIGltcG9ydGluZyB0aGUgbW9kdWxlOlxuICpcbiAqIGBgYHR5cGVzY3JpcHRcbiAqIGltcG9ydCB7IEJ1dHRvbk1vZHVsZSB9IGZyb20gJ2NhcmJvbi1jb21wb25lbnRzLWFuZ3VsYXInO1xuICogYGBgXG4gKlxuICogW1NlZSBkZW1vXSguLi8uLi8/cGF0aD0vc3RvcnkvY29tcG9uZW50cy1idXR0b24tYnV0dG9uLXNldC0tYmFzaWMpXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtYnV0dG9uLXNldCwgaWJtLWJ1dHRvbi1zZXRcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8ZGl2ICpuZ0lmPVwiZmx1aWRcIiBjbGFzcz1cImNkcy0tYnRuLXNldF9fZmx1aWQtaW5uZXIgY2RzLS1idG4tc2V0X19mbHVpZC1pbm5lci0tYXV0by1zdGFja1wiPlxuXHRcdFx0PG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImNvbnRlbnRcIj48L25nLWNvbnRhaW5lcj5cblx0XHQ8L2Rpdj5cblx0XHQ8bmctY29udGFpbmVyICpuZ0lmPVwiIWZsdWlkXCI+XG5cdFx0XHQ8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY29udGVudFwiPjwvbmctY29udGFpbmVyPlxuXHRcdDwvbmctY29udGFpbmVyPlxuXG5cdFx0PG5nLXRlbXBsYXRlICNjb250ZW50PlxuXHRcdFx0PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuXHRcdDwvbmctdGVtcGxhdGU+XG5cdGBcbn0pXG5leHBvcnQgY2xhc3MgQnV0dG9uU2V0IHtcblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS1idG4tc2V0XCIpIGJ1dHRvblNldENsYXNzID0gdHJ1ZTtcblxuXHQvKipcblx0ICogV2hlbiBgdHJ1ZWAsIGJ1dHRvbnMgZ3JvdyB0byBmaWxsIHRoZSBjb250YWluZXIgd2lkdGggKGZsdWlkIGJ1dHRvbiBzZXQpLlxuXHQgKi9cblx0QElucHV0KCkgZmx1aWQgPSBmYWxzZTtcblxuXHQvKipcblx0ICogV2hlbiBgdHJ1ZWAsIHN0YWNrcyBidXR0b25zIHZlcnRpY2FsbHkuIFVzZSB3aXRoIG5vbi1mbHVpZCBsYXlvdXRzLCBvdGhlcndpc2UgYGZsdWlkYCB3aWxsIG92ZXJyaWRlIHN0eWxlXG5cdCAqL1xuXHRASW5wdXQoKSBzdGFja2VkID0gZmFsc2U7XG5cblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS1idG4tc2V0LS1mbHVpZFwiKVxuXHRnZXQgZmx1aWRDbGFzcygpOiBib29sZWFuIHtcblx0XHRyZXR1cm4gdGhpcy5mbHVpZDtcblx0fVxuXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tYnRuLXNldC0tc3RhY2tlZFwiKVxuXHRnZXQgc3RhY2tlZENsYXNzKCk6IGJvb2xlYW4ge1xuXHRcdHJldHVybiB0aGlzLnN0YWNrZWQ7XG5cdH1cbn1cbiJdfQ==