From 614e731e5112987f9af6ed1dbf78aa60556b2d29 Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Mon, 11 Apr 2022 09:47:30 +0200 Subject: [PATCH 1/2] Added types for chip component --- .../chip-table-properties.component.html | 7 ++- .../src/lib/dxc-button/dxc-button.types.ts | 20 ++++----- .../src/lib/dxc-chip/dxc-chip.component.ts | 44 ++++++++++++++++--- .../src/lib/dxc-chip/dxc-chip.types.ts | 24 ++++++++++ 4 files changed, 78 insertions(+), 17 deletions(-) create mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.types.ts diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/chip/properties/box-table-properties/chip-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/chip/properties/box-table-properties/chip-table-properties.component.html index 7f6ddaa30..6a98f81d9 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/chip/properties/box-table-properties/chip-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/chip/properties/box-table-properties/chip-table-properties.component.html @@ -30,7 +30,7 @@ Deprecated. Path of the icon to be placed before the label. - margin: any (string | object) + margin: string | object Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | @@ -47,7 +47,10 @@ tabIndexValue: number 0 - Value of the tabindex, it also applies to prefix and suffix icons when a function is given. + + Value of the tabindex, it also applies to prefix and suffix icons when a + function is given. + suffixIconClick: EventEmitter diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.types.ts b/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.types.ts index 74ff2e6b3..fcc88479f 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.types.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.types.ts @@ -15,13 +15,13 @@ export type Spacing = { }; export interface ButtonProperties { - mode: "primary" | "secondary" | "text"; - label: string; - disabled: boolean; - iconSrc: string; - iconPosition: "before" | "after"; - margin: Space | Spacing; - size: "small" | "medium" | "large" | "fillParent" | "fitContent"; - type: "reset" | "submit" | "button"; - tabIndexValue: number; -} \ No newline at end of file + mode: "primary" | "secondary" | "text"; + label: string; + disabled: boolean; + iconSrc: string; + iconPosition: "before" | "after"; + margin: Space | Spacing; + size: "small" | "medium" | "large" | "fillParent" | "fitContent"; + type: "reset" | "submit" | "button"; + tabIndexValue: number; +} diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.component.ts index 4ef62dab6..833f34d9c 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.component.ts @@ -18,6 +18,7 @@ import { import { ChangeDetectorRef, QueryList } from "@angular/core"; import { DxcChipPrefixIconComponent } from "./dxc-chip-prefix-icon/dxc-chip-prefix-icon.component"; import { DxcChipSuffixIconComponent } from "./dxc-chip-suffix-icon/dxc-chip-suffix-icon.component"; +import { ChipProperties, Space, Spacing } from "./dxc-chip.types"; @Component({ selector: "dxc-chip", @@ -28,9 +29,21 @@ export class DxcChipComponent implements OnChanges { @HostBinding("class") className; @HostBinding("class.hasTabIndexPrefix") hasTabIndexPrefix: boolean = false; @HostBinding("class.hasTabIndexSuffix") hasTabIndexSuffix: boolean = false; + /** + * Text to be placed inside the chip. + */ @Input() label: string; + /** + * @deprecated. Path of the icon to be placed after the label. + */ @Input() suffixIconSrc: string; + /** + * @deprecated. Path of the icon to be placed before the label. + */ @Input() prefixIconSrc: string; + /** + * If true, the component will be disabled. + */ @Input() get disabled(): boolean { return this._disabled; @@ -39,17 +52,38 @@ export class DxcChipComponent implements OnChanges { this._disabled = coerceBooleanProperty(value); } private _disabled; - @Input() margin: any; + /** + * 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 | Spacing; - @Output() suffixIconClick = new EventEmitter(); - @Output() prefixIconClick = new EventEmitter(); + /** + * Event that will be emitted when the suffix icon is clicked. + */ + @Output() suffixIconClick: EventEmitter = new EventEmitter(); + /** + * Event that will be emitted when the prefix icon is clicked. + */ + @Output() prefixIconClick: EventEmitter = new EventEmitter(); + /** + * Element used as icon to be placed before the chip label. + */ @ContentChildren(DxcChipPrefixIconComponent) dxcChipPrefixIcon: QueryList; + /** + * Element used as icon to be placed after the chip label. + */ @ContentChildren(DxcChipSuffixIconComponent) dxcChipSuffixIcon: QueryList; + /** + * Value of the tabindex, it also applies to prefix and suffix icons when a function is given. + */ @Input() get tabIndexValue(): number { return this._tabIndexValue; @@ -59,12 +93,12 @@ export class DxcChipComponent implements OnChanges { } private _tabIndexValue; - defaultInputs = new BehaviorSubject({ + defaultInputs = new BehaviorSubject({ label: "", suffixIconSrc: null, prefixIconSrc: null, disabled: false, - margin: "", + margin: null, tabIndexValue: 0, }); diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.types.ts b/projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.types.ts new file mode 100644 index 000000000..758296451 --- /dev/null +++ b/projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.types.ts @@ -0,0 +1,24 @@ +export type Space = + | "xxsmall" + | "xsmall" + | "small" + | "medium" + | "large" + | "xlarge" + | "xxlarge"; + +export type Spacing = { + top?: Space; + bottom?: Space; + left?: Space; + right?: Space; +}; + +export interface ChipProperties { + label: string; + disabled: boolean; + margin: Space | Spacing; + tabIndexValue: number; + suffixIconSrc?: string; + prefixIconSrc?: string; +} From 7af104bec3d8c55e5db76f3e32309e297476c2ac Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Mon, 11 Apr 2022 12:43:37 +0200 Subject: [PATCH 2/2] Fixed bug margin function --- projects/dxc-ngx-cdk/src/lib/utils.ts | 44 ++++++++++++++------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/projects/dxc-ngx-cdk/src/lib/utils.ts b/projects/dxc-ngx-cdk/src/lib/utils.ts index fbce25a32..06b8f2693 100644 --- a/projects/dxc-ngx-cdk/src/lib/utils.ts +++ b/projects/dxc-ngx-cdk/src/lib/utils.ts @@ -22,11 +22,9 @@ export class CssUtils { } getMarginValue = (margin, type) => { - const marginSize = spaces[margin[type]] || "0px"; - return marginSize; - } - - + const marginSize = margin && margin !== null ? spaces[margin[type]] : "0px"; + return marginSize; + }; getTopMargin(margin) { return margin && typeof margin !== "object" @@ -175,7 +173,7 @@ export class CssUtils { return value; } - getBoxShadow(shadowDepth, isImportant:boolean = false) { + getBoxShadow(shadowDepth, isImportant: boolean = false) { switch (shadowDepth) { case "1": return css` @@ -183,22 +181,26 @@ export class CssUtils { var(--box-oneShadowDepthShadowOffsetY) var(--box-oneShadowDepthShadowBlur) var(--box-oneShadowDepthShadowSpread) - var(--box-oneShadowDepthShadowColor) ${this.isPropertyImportant(isImportant)};`; + var(--box-oneShadowDepthShadowColor) + ${this.isPropertyImportant(isImportant)}; + `; case "2": return css` - box-shadow: var(--box-twoShadowDepthShadowOffsetX) - var(--box-twoShadowDepthShadowOffsetY) - var(--box-twoShadowDepthShadowBlur) - var(--box-twoShadowDepthShadowSpread) - var(--box-twoShadowDepthShadowColor) ${this.isPropertyImportant(isImportant)}; - ` ; + box-shadow: var(--box-twoShadowDepthShadowOffsetX) + var(--box-twoShadowDepthShadowOffsetY) + var(--box-twoShadowDepthShadowBlur) + var(--box-twoShadowDepthShadowSpread) + var(--box-twoShadowDepthShadowColor) + ${this.isPropertyImportant(isImportant)}; + `; default: return css` - box-shadow: var(--box-noneShadowDepthShadowOffsetX) - var(--box-noneShadowDepthShadowOffsetY) - var(--box-noneShadowDepthShadowBlur) - var(--box-noneShadowDepthShadowSpread) - var(--box-noneShadowDepthShadowColor) ${this.isPropertyImportant(isImportant)}; + box-shadow: var(--box-noneShadowDepthShadowOffsetX) + var(--box-noneShadowDepthShadowOffsetY) + var(--box-noneShadowDepthShadowBlur) + var(--box-noneShadowDepthShadowSpread) + var(--box-noneShadowDepthShadowColor) + ${this.isPropertyImportant(isImportant)}; `; } } @@ -206,9 +208,9 @@ export class CssUtils { readProperty(name: string): string { let bodyStyles = window.getComputedStyle(document.body); return bodyStyles.getPropertyValue(name); -} + } - private isPropertyImportant(isImportant){ - return isImportant ? ' !important': ''; + private isPropertyImportant(isImportant) { + return isImportant ? " !important" : ""; } }