carbon-components-angular
Version:
Next generation components
426 lines (418 loc) • 17.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Directive, Optional, HostBinding, Input, SkipSelf, ContentChildren, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BehaviorSubject, Subscription } from 'rxjs';
class GridService {
constructor() {
this.gridSubject = new BehaviorSubject(false);
this.cssGridEnabled = false;
this.gridObservable = this.gridSubject.asObservable();
}
/**
* Ping all subscribers to update to use Css Grid
* @param enableCssGrid
*/
updateGridType(enableCssGrid) {
if (this.cssGridEnabled === enableCssGrid) {
return;
}
this.cssGridEnabled = true;
this.gridSubject.next(enableCssGrid);
}
}
GridService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GridService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
GridService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GridService });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GridService, decorators: [{
type: Injectable
}], ctorParameters: function () { return []; } });
class ColumnDirective {
constructor(gridService) {
this.gridService = gridService;
this.class = "";
/**
* Defines columns width for specified breakpoint
* Accepts the following formats:
* - {[breakpoint]: number}
* - {[breakpoint]: "auto"} - css only
* - {[breakpoint]: {[start|end]: number}} - css only
*
* Example:
* <div cdsCol [columnNumbers]={md: 3, lg: 4}></div>
*/
this.columnNumbers = {};
/**
* Defines columns offset, which increases the left margin of the column.
* This field will only work with flexbox grid.
*
* Accepts the following formats:
* - {[breakpoint]: number}
*
* Example:
* <div cdsCol [offsets]={md: 3, lg: 4}></div>
*/
this.offsets = {};
/**
* Set to `true` to use css grid column hang class
* This will only work when `isCss` property is set to true
*
* Useful when trying to align content across css grid/subgrid
*/
this.columnHang = false;
this._columnClasses = [];
this.isCssGrid = false;
this.subscription = new Subscription();
}
get columnClasses() {
return this._columnClasses.join(" ");
}
set columnClasses(classes) {
this._columnClasses = classes.split(" ");
}
ngOnInit() {
if (this.gridService) {
this.subscription = this.gridService.gridObservable.subscribe((isCssGrid) => {
this.isCssGrid = isCssGrid;
this.updateColumnClasses();
});
}
else {
this.updateColumnClasses();
}
}
ngOnChanges() {
this.updateColumnClasses();
}
/**
* Unsubscribe from subscription
*/
ngOnDestroy() {
this.subscription.unsubscribe();
}
updateColumnClasses() {
try {
this._columnClasses = [];
const columnKeys = Object.keys(this.columnNumbers);
// Assign classes based on the type of grid used.
if (this.isCssGrid) {
// Default css grid class
this._columnClasses.push("cds--css-grid-column");
if (this.columnHang) {
this._columnClasses.push("cds--grid-column-hang");
}
columnKeys.forEach(key => {
/**
* Passing in `auto` to a breakpoint as such: {'md': 'auto'}
* will assign the element which will automatically determine the width of the column
* for the breakpoint passed
*/
if (this.columnNumbers[key] === "auto") {
this._columnClasses.push(`cds--${key}:col-span-auto`);
}
else if (typeof this.columnNumbers[key] === "object") {
/**
* In css grid, objects can be passed to the keys in the following format:
* {'md': {'start': 3}}
*
* These objects are used to position the column
*/
if (this.columnNumbers[key]["start"]) {
// col-start is simular equivalent of flex offset
this._columnClasses.push(`cds--${key}:col-start-${this.columnNumbers[key].start}`);
}
if (this.columnNumbers[key]["end"]) {
this._columnClasses.push(`cds--${key}:col-end-${this.columnNumbers[key].end}`);
}
if (this.columnNumbers[key]["span"]) {
this._columnClasses.push(`cds--${key}:col-span-${this.columnNumbers[key].span}`);
}
}
else {
this._columnClasses.push(`cds--${key}:col-span-${this.columnNumbers[key]}`);
}
});
Object.keys(this.offsets).forEach(key => {
this._columnClasses.push(`cds--${key}:col-start${this.offsets[key] + 1}`);
});
}
else {
// Set column classes for flex grid
if (columnKeys.length <= 0) {
this._columnClasses.push("cds--col");
}
columnKeys.forEach(key => {
if (this.columnNumbers[key] === "nobreak") {
this._columnClasses.push(`cds--col-${key}`);
}
else {
this._columnClasses.push(`cds--col-${key}-${this.columnNumbers[key]}`);
}
});
Object.keys(this.offsets).forEach(key => {
this._columnClasses.push(`cds--offset-${key}-${this.offsets[key]}`);
});
}
}
catch (err) {
console.error(`Malformed \`offsets\` or \`columnNumbers\`: ${err}`);
}
/**
* Append the classes passed so they aren't overriden when we set the column classes
* from host binding
*/
if (this.class) {
this._columnClasses.push(this.class);
}
}
}
ColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ColumnDirective, deps: [{ token: GridService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
ColumnDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ColumnDirective, selector: "[cdsCol], [ibmCol]", inputs: { class: "class", columnNumbers: "columnNumbers", offsets: "offsets", columnHang: "columnHang" }, host: { properties: { "class": "this.columnClasses" } }, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ColumnDirective, decorators: [{
type: Directive,
args: [{
selector: "[cdsCol], [ibmCol]"
}]
}], ctorParameters: function () {
return [{ type: GridService, decorators: [{
type: Optional
}] }];
}, propDecorators: { columnClasses: [{
type: HostBinding,
args: ["class"]
}], class: [{
type: Input
}], columnNumbers: [{
type: Input
}], offsets: [{
type: Input
}], columnHang: [{
type: Input
}] } });
class RowDirective {
constructor() {
this.baseClass = true;
this.condensed = false;
this.narrow = false;
}
}
RowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
RowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: RowDirective, selector: "[cdsRow], [ibmRow]", inputs: { condensed: "condensed", narrow: "narrow" }, host: { properties: { "class.cds--row": "this.baseClass", "class.cds--row--condensed": "this.condensed", "class.cds--row--narrow": "this.narrow" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RowDirective, decorators: [{
type: Directive,
args: [{
selector: "[cdsRow], [ibmRow]"
}]
}], propDecorators: { baseClass: [{
type: HostBinding,
args: ["class.cds--row"]
}], condensed: [{
type: HostBinding,
args: ["class.cds--row--condensed"]
}, {
type: Input
}], narrow: [{
type: HostBinding,
args: ["class.cds--row--narrow"]
}, {
type: Input
}] } });
/**
* Get started with importing the module:
*
* ```typescript
* import { GridModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-grid--basic)
*/
class GridDirective {
constructor(gridService) {
this.gridService = gridService;
/**
* Set to `true` to condense the grid
*/
this.condensed = false;
/**
* Set to `true` to use narrow grid
*/
this.narrow = false;
/**
* Set to `true` to use the full width
*/
this.fullWidth = false;
this.cssGridEnabled = false;
this.isSubgrid = false;
this.subscription = new Subscription();
}
/**
* Set to `true` to use css grid
*/
set useCssGrid(enable) {
this.cssGridEnabled = enable;
this.gridService.updateGridType(enable);
}
// Flex grid
get flexGrid() {
return !this.cssGridEnabled;
}
get flexCondensed() {
return !this.cssGridEnabled && this.condensed;
}
get flexNarrow() {
return !this.cssGridEnabled && this.narrow;
}
get flexFullWidth() {
return !this.cssGridEnabled && this.fullWidth;
}
// CSS Grid
get ccsGrid() {
return this.cssGridEnabled && !this.isSubgrid;
}
get ccsCondensed() {
return this.cssGridEnabled && !this.isSubgrid && this.condensed;
}
get ccsNarrow() {
return this.cssGridEnabled && !this.isSubgrid && this.narrow;
}
get ccsFullWidth() {
return this.cssGridEnabled && !this.isSubgrid && this.fullWidth;
}
// CSS Sub Grid
get subGrid() {
return this.cssGridEnabled && this.isSubgrid;
}
get subCondensed() {
return this.cssGridEnabled && this.isSubgrid && this.condensed;
}
get subNarrow() {
return this.cssGridEnabled && this.isSubgrid && this.narrow;
}
get subFullWidth() {
return this.cssGridEnabled && this.isSubgrid && this.fullWidth;
}
ngOnInit() {
this.subscription = this.gridService.gridObservable.subscribe((isCssGrid) => {
this.cssGridEnabled = isCssGrid;
});
}
// Make all children grids a sub grid
set cssGridChildren(list) {
if (this.cssGridEnabled) {
list.forEach((grid) => {
// Prevents initial (parent) grid element from being turned into a subgrid
if (grid === this) {
return;
}
grid.isSubgrid = true;
});
}
}
/**
* Unsubscribe from Grid Service subscription
*/
ngOnDestroy() {
this.subscription.unsubscribe();
}
}
GridDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GridDirective, deps: [{ token: GridService }], target: i0.ɵɵFactoryTarget.Directive });
GridDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: GridDirective, selector: "[cdsGrid], [ibmGrid]", inputs: { condensed: "condensed", narrow: "narrow", fullWidth: "fullWidth", useCssGrid: "useCssGrid" }, host: { properties: { "class.cds--grid": "this.flexGrid", "class.cds--grid--condensed": "this.flexCondensed", "class.cds--grid--narrow": "this.flexNarrow", "class.cds--grid--full-width": "this.flexFullWidth", "class.cds--css-grid": "this.ccsGrid", "class.cds--css-grid--condensed": "this.ccsCondensed", "class.cds--css-grid--narrow": "this.ccsNarrow", "class.cds--css-grid--full-width": "this.ccsFullWidth", "class.cds--subgrid": "this.subGrid", "class.cds--subgrid--condensed": "this.subCondensed", "class.cds--subgrid--narrow": "this.subNarrow", "class.cds--subgrid--wide": "this.subFullWidth" } }, providers: [
{
provide: GridService,
deps: [[new Optional(), new SkipSelf(), GridService]],
useFactory: (parentService) => {
return parentService || new GridService();
}
}
], queries: [{ propertyName: "cssGridChildren", predicate: GridDirective, descendants: true }], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GridDirective, decorators: [{
type: Directive,
args: [{
selector: "[cdsGrid], [ibmGrid]",
providers: [
{
provide: GridService,
deps: [[new Optional(), new SkipSelf(), GridService]],
useFactory: (parentService) => {
return parentService || new GridService();
}
}
]
}]
}], ctorParameters: function () { return [{ type: GridService }]; }, propDecorators: { condensed: [{
type: Input
}], narrow: [{
type: Input
}], fullWidth: [{
type: Input
}], useCssGrid: [{
type: Input
}], flexGrid: [{
type: HostBinding,
args: ["class.cds--grid"]
}], flexCondensed: [{
type: HostBinding,
args: ["class.cds--grid--condensed"]
}], flexNarrow: [{
type: HostBinding,
args: ["class.cds--grid--narrow"]
}], flexFullWidth: [{
type: HostBinding,
args: ["class.cds--grid--full-width"]
}], ccsGrid: [{
type: HostBinding,
args: ["class.cds--css-grid"]
}], ccsCondensed: [{
type: HostBinding,
args: ["class.cds--css-grid--condensed"]
}], ccsNarrow: [{
type: HostBinding,
args: ["class.cds--css-grid--narrow"]
}], ccsFullWidth: [{
type: HostBinding,
args: ["class.cds--css-grid--full-width"]
}], subGrid: [{
type: HostBinding,
args: ["class.cds--subgrid"]
}], subCondensed: [{
type: HostBinding,
args: ["class.cds--subgrid--condensed"]
}], subNarrow: [{
type: HostBinding,
args: ["class.cds--subgrid--narrow"]
}], subFullWidth: [{
type: HostBinding,
args: ["class.cds--subgrid--wide"]
}], cssGridChildren: [{
type: ContentChildren,
args: [GridDirective, { descendants: true }]
}] } });
class GridModule {
}
GridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
GridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: GridModule, declarations: [ColumnDirective,
GridDirective,
RowDirective], imports: [CommonModule], exports: [ColumnDirective,
GridDirective,
RowDirective] });
GridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GridModule, providers: [GridService], imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GridModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ColumnDirective,
GridDirective,
RowDirective
],
exports: [
ColumnDirective,
GridDirective,
RowDirective
],
providers: [GridService],
imports: [CommonModule]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ColumnDirective, GridDirective, GridModule, GridService, RowDirective };
//# sourceMappingURL=carbon-components-angular-grid.mjs.map