From 83e3e8134d6a907d46fa11791f4eaceac85b5602 Mon Sep 17 00:00:00 2001 From: GomezIvann Date: Mon, 24 Jan 2022 14:59:26 +0100 Subject: [PATCH 1/5] [Minor] Accordion types added & docs updated --- .../accordion-table-properties.component.html | 16 +++-- .../dxc-accordion-icon.component.ts | 8 +-- .../dxc-accordion.component.html | 7 +- .../dxc-accordion/dxc-accordion.component.ts | 70 +++++++++++++++++-- 4 files changed, 78 insertions(+), 23 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html index a02818aff..5773f6b07 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html @@ -13,7 +13,7 @@ label: string - Text to be placed next to the button. + The panel label. iconSrc: string @@ -35,16 +35,20 @@ isExpanded: boolean - false - If true, the component will be expanded. + + + Represents the state of the panel. When true, the component will be + expanded. If undefined, the component will be uncontrolled and its value + will be managed internally by the component. + onClick: EventEmitter - This function will be called when the user clicks the icon to open/close - the panel. The state of the panel (opened/closed) should be passed as a - parameter + This function will be called when the user clicks the accordion to expand + or collapse the panel. The new state of the panel will be passed as a + parameter. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion-icon/dxc-accordion-icon.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion-icon/dxc-accordion-icon.component.ts index 8a0094440..9cc2b3ba9 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion-icon/dxc-accordion-icon.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion-icon/dxc-accordion-icon.component.ts @@ -1,13 +1,9 @@ -import { - Component, -} from "@angular/core"; +import { Component } from "@angular/core"; @Component({ selector: "dxc-accordion-icon", - templateUrl: "./dxc-accordion-icon.component.html" + templateUrl: "./dxc-accordion-icon.component.html", }) export class DxcAccordionIconComponent { - constructor() {} - } diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.html b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.html index 12d547289..da77beeb8 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.html +++ b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.html @@ -10,9 +10,7 @@ [expandedHeight]="'48px'" [tabindex]="disabled ? -1 : tabIndexValue" > - + {{ label }} @@ -33,9 +31,8 @@ - + - diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts index 249eb7e3f..b0854f500 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts @@ -22,6 +22,29 @@ import { DxcAccordionIconComponent } from "./dxc-accordion-icon/dxc-accordion-ic import { QueryList, ChangeDetectorRef, ElementRef } from "@angular/core"; import { BackgroundProviderComponent } from "../background-provider/background-provider.component"; +type Space = + | "xxsmall" + | "xsmall" + | "small" + | "medium" + | "large" + | "xlarge" + | "xxlarge"; + +type Margin = { + top?: Space; + bottom?: Space; + left?: Space; + right?: Space; +}; + +type Padding = { + top?: Space; + bottom?: Space; + left?: Space; + right?: Space; +}; + @Component({ selector: "dxc-accordion", templateUrl: "./dxc-accordion.component.html", @@ -30,9 +53,21 @@ import { BackgroundProviderComponent } from "../background-provider/background-p export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit { currentBackgroundColor: string; @Input() mode: string; - @Input() label: string; + /** + * The panel label. + */ + @Input() label: string = ""; + /** + * @deprecated URL of the icon that will be placed next to panel label. + */ @Input() iconSrc: string; - @Input() assistiveText: string; + /** + * Assistive text to be placed on the right side of the panel. + */ + @Input() assistiveText: string = ""; + /** + * If true, the component will be disabled. + */ @Input() get disabled(): boolean { return this._disabled; @@ -41,9 +76,26 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit { this._disabled = coerceBooleanProperty(value); } private _disabled = false; - @Output() onClick = new EventEmitter(); - @Input() margin: any; - @Input() padding: any; + /** + * This event will be emitted when the user clicks the accordion to expand or collapse + * the panel. The new state of the panel will be passed as a parameter. + */ + @Output() onClick = new EventEmitter(); + /** + * 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; + /** + * Size of the padding to be applied to the custom area ('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. + */ + @Input() padding: Space | Padding; + /** + * Represents the state of the panel. When true, the component will be + * expanded. If undefined, the component will be uncontrolled and its + * value will be managed internally by the component. + */ @Input() get isExpanded(): boolean { return this._isExpanded; @@ -52,6 +104,9 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit { this._isExpanded = coerceBooleanProperty(value); } private _isExpanded; + /** + * Value of the tabindex. + */ @Input() get tabIndexValue(): number { return this._tabIndexValue; @@ -59,13 +114,16 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit { set tabIndexValue(value: number) { this._tabIndexValue = coerceNumberProperty(value); } - private _tabIndexValue; + private _tabIndexValue = 0; @HostBinding("class") className; @ViewChild("matExpansionPanel", { static: true }) _matExpansionPanel: any; renderedIsExpanded: boolean; + /** + * Element used as the icon that will be placed next to panel label. + */ @ContentChildren(DxcAccordionIconComponent) dxcAccordionIcon: QueryList; From 72a5dc09883ffe0b3b0ee1878b08430fcb854fa0 Mon Sep 17 00:00:00 2001 From: GomezIvann Date: Mon, 24 Jan 2022 15:04:09 +0100 Subject: [PATCH 2/5] Updated docs of Accordion --- .../accordion-table-properties.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html index 5773f6b07..3f3b72039 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html @@ -52,7 +52,7 @@ - margin: any (string | object) + margin: string | object Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | @@ -62,7 +62,7 @@ - padding: any (string | object) + padding: string | object Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' From 5f49a4cad87335869a5bcf86560f8b33d2b8f9b1 Mon Sep 17 00:00:00 2001 From: GomezIvann Date: Wed, 26 Jan 2022 11:04:56 +0100 Subject: [PATCH 3/5] Removing unused prop mode in Accordion --- .../dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts index b0854f500..dd8fca01d 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts @@ -52,7 +52,6 @@ type Padding = { }) export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit { currentBackgroundColor: string; - @Input() mode: string; /** * The panel label. */ From 58801aa9c9ccdc5b3f97468650f69187068b10bf Mon Sep 17 00:00:00 2001 From: GomezIvann Date: Thu, 27 Jan 2022 16:46:21 +0100 Subject: [PATCH 4/5] Event Prop documentation update in Accordion --- .../accordion-table-properties.component.html | 2 +- .../src/lib/dxc-accordion/dxc-accordion.component.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html index 3f3b72039..66e2c0ac8 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/accordion/properties/accordion-table-properties/accordion-table-properties.component.html @@ -46,7 +46,7 @@ onClick: EventEmitter - This function will be called when the user clicks the accordion to expand + This event will emit in case the user clicks the accordion to expand or collapse the panel. The new state of the panel will be passed as a parameter. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts index dd8fca01d..f5dd3be2a 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts @@ -76,8 +76,8 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit { } private _disabled = false; /** - * This event will be emitted when the user clicks the accordion to expand or collapse - * the panel. The new state of the panel will be passed as a parameter. + * This event will emit in case the user clicks the accordion to expand or collapse + * the panel. The new state of the panel will be passed as a parameter.S */ @Output() onClick = new EventEmitter(); /** From ad1cc44f63a4dc70a281ecd2e4f9d2d6b1193810 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Fri, 28 Jan 2022 14:58:31 +0100 Subject: [PATCH 5/5] Update dxc-accordion.component.ts --- .../src/lib/dxc-accordion/dxc-accordion.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts index f5dd3be2a..087038bd1 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/dxc-accordion.component.ts @@ -77,7 +77,7 @@ export class DxcAccordionComponent implements OnInit, OnChanges, AfterViewInit { private _disabled = false; /** * This event will emit in case the user clicks the accordion to expand or collapse - * the panel. The new state of the panel will be passed as a parameter.S + * the panel. The new state of the panel will be passed as a parameter. */ @Output() onClick = new EventEmitter(); /**