diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/table/properties/table-properties/table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/table/properties/table-properties/table-properties.component.html index 06c6a578c..65c428672 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/table/properties/table-properties/table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/table/properties/table-properties/table-properties.component.html @@ -6,13 +6,13 @@ Description - margin: any (string | object) + margin: string | object Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties - in order to specify different padding sizes. + in order to specify different margin sizes. \ No newline at end of file diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-table/dxc-table.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-table/dxc-table.component.ts index 7088ed359..f416bf9c5 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-table/dxc-table.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-table/dxc-table.component.ts @@ -4,6 +4,22 @@ import { BehaviorSubject } from "rxjs"; import { BackgroundProviderService } from "../background-provider/service/background-provider.service"; import { CssUtils } from "../utils"; +type Space = + | "xxsmall" + | "xsmall" + | "small" + | "medium" + | "large" + | "xlarge" + | "xxlarge"; + +type Margin = { + top?: Space; + bottom?: Space; + left?: Space; + right?: Space; +}; + @Component({ selector: "dxc-table", templateUrl: "./dxc-table.component.html", @@ -11,11 +27,16 @@ import { CssUtils } from "../utils"; providers: [CssUtils, BackgroundProviderService], }) export class DxcTableComponent { - @Input() margin; - @HostBinding("class") className; + /** + * Size of the margin to be applied to the component ('xxsmall' | + * 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You + * can pass an object with 'top', 'bottom', 'left' and 'right' properties + * in order to specify different margin sizes. + */ + @Input() margin: Space | Margin; + @HostBinding("class") className; defaultInputs = new BehaviorSubject({}); - currentBackgroundColor: string; constructor(private utils: CssUtils) {} @@ -39,8 +60,8 @@ export class DxcTableComponent { getDynamicStyle(inputs) { return css` div#divTable { - ${this.utils.getMargins(this.margin)} - ${this.calculateWidth(this.margin)}; + ${this.utils.getMargins(inputs.margin)} + ${this.calculateWidth(inputs.margin)}; overflow-y: auto; &::-webkit-scrollbar { width: 8px; @@ -103,9 +124,12 @@ export class DxcTableComponent { `; } - private calculateWidth = (margin: any) => { - return margin ?`width: calc(100% - ${this.utils.getMarginValue(margin, "left")} - ${this.utils.getMarginValue( - margin,"right")})`: ''; - } - + private calculateWidth = (margin: Space | Margin) => { + return margin + ? `width: calc(100% - ${this.utils.getMarginValue( + margin, + "left" + )} - ${this.utils.getMarginValue(margin, "right")})` + : ""; + }; }