carbon-components-angular
Version:
Next generation components
115 lines (110 loc) • 4.74 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, HostBinding, NgModule } from '@angular/core';
/**
* Applies Carbon aspect ratio box classes (`cds--aspect-ratio`) to the host element.
*
* ```html
* <div cdsAspectRatio ratio="16x9">...</div>
* ```
*
* ```typescript
* import { AspectRatioModule } from 'carbon-components-angular';
* ```
*/
class AspectRatioDirective {
constructor() {
/**
* Set aspect ratio
*/
this.ratio = "1x1";
// Set base class
this.aspectRatioBase = true;
}
/**
* Set ratio class based on `ratio` input
*/
get ratio1x1() {
return this.ratio === "1x1";
}
get ratio2x3() {
return this.ratio === "2x3";
}
get ratio3x2() {
return this.ratio === "3x2";
}
get ratio3x4() {
return this.ratio === "3x4";
}
get ratio4x3() {
return this.ratio === "4x3";
}
get ratio1x2() {
return this.ratio === "1x2";
}
get ratio2x1() {
return this.ratio === "2x1";
}
get ratio9x16() {
return this.ratio === "9x16";
}
get ratio16x9() {
return this.ratio === "16x9";
}
}
AspectRatioDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AspectRatioDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
AspectRatioDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: AspectRatioDirective, selector: "[cdsAspectRatio], [ibmAspectRatio]", inputs: { ratio: "ratio" }, host: { properties: { "class.cds--aspect-ratio": "this.aspectRatioBase", "class.cds--aspect-ratio--1x1": "this.ratio1x1", "class.cds--aspect-ratio--2x3": "this.ratio2x3", "class.cds--aspect-ratio--3x2": "this.ratio3x2", "class.cds--aspect-ratio--3x4": "this.ratio3x4", "class.cds--aspect-ratio--4x3": "this.ratio4x3", "class.cds--aspect-ratio--1x2": "this.ratio1x2", "class.cds--aspect-ratio--2x1": "this.ratio2x1", "class.cds--aspect-ratio--9x16": "this.ratio9x16", "class.cds--aspect-ratio--16x9": "this.ratio16x9" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AspectRatioDirective, decorators: [{
type: Directive,
args: [{
selector: "[cdsAspectRatio], [ibmAspectRatio]"
}]
}], propDecorators: { ratio: [{
type: Input
}], aspectRatioBase: [{
type: HostBinding,
args: ["class.cds--aspect-ratio"]
}], ratio1x1: [{
type: HostBinding,
args: ["class.cds--aspect-ratio--1x1"]
}], ratio2x3: [{
type: HostBinding,
args: ["class.cds--aspect-ratio--2x3"]
}], ratio3x2: [{
type: HostBinding,
args: ["class.cds--aspect-ratio--3x2"]
}], ratio3x4: [{
type: HostBinding,
args: ["class.cds--aspect-ratio--3x4"]
}], ratio4x3: [{
type: HostBinding,
args: ["class.cds--aspect-ratio--4x3"]
}], ratio1x2: [{
type: HostBinding,
args: ["class.cds--aspect-ratio--1x2"]
}], ratio2x1: [{
type: HostBinding,
args: ["class.cds--aspect-ratio--2x1"]
}], ratio9x16: [{
type: HostBinding,
args: ["class.cds--aspect-ratio--9x16"]
}], ratio16x9: [{
type: HostBinding,
args: ["class.cds--aspect-ratio--16x9"]
}] } });
class AspectRatioModule {
}
AspectRatioModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AspectRatioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AspectRatioModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: AspectRatioModule, declarations: [AspectRatioDirective], exports: [AspectRatioDirective] });
AspectRatioModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AspectRatioModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AspectRatioModule, decorators: [{
type: NgModule,
args: [{
declarations: [AspectRatioDirective],
exports: [AspectRatioDirective]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { AspectRatioDirective, AspectRatioModule };
//# sourceMappingURL=carbon-components-angular-aspect-ratio.mjs.map