From be168fb193d36bf7a0c2216ff4972114ddcbb812 Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Mon, 4 Apr 2022 17:30:54 +0200 Subject: [PATCH] Removed README from components --- .../src/lib/dxc-accordion/README.md | 128 --------- .../src/lib/dxc-accordionGroup/README.md | 87 ------- .../dxc-ngx-cdk/src/lib/dxc-alert/README.md | 117 --------- .../src/lib/dxc-application-layout/README.md | 37 --- .../dxc-ngx-cdk/src/lib/dxc-box/README.md | 85 ------ .../dxc-ngx-cdk/src/lib/dxc-button/README.md | 174 ------------- .../dxc-ngx-cdk/src/lib/dxc-card/README.md | 116 --------- .../src/lib/dxc-checkbox/README.md | 151 ----------- .../dxc-ngx-cdk/src/lib/dxc-chip/README.md | 117 --------- .../dxc-ngx-cdk/src/lib/dxc-date/README.md | 186 ------------- .../dxc-ngx-cdk/src/lib/dxc-dialog/README.md | 97 ------- .../src/lib/dxc-dropdown/README.md | 129 --------- .../dxc-ngx-cdk/src/lib/dxc-footer/README.md | 156 ----------- .../dxc-ngx-cdk/src/lib/dxc-header/README.md | 218 ---------------- .../dxc-ngx-cdk/src/lib/dxc-heading/README.md | 70 ----- .../src/lib/dxc-input-text/README.md | 245 ------------------ .../dxc-ngx-cdk/src/lib/dxc-link/README.md | 130 ---------- .../src/lib/dxc-paginator/readme.md | 117 --------- .../src/lib/dxc-progressbar/README.md | 97 ------- .../dxc-ngx-cdk/src/lib/dxc-radio/README.md | 142 ---------- .../src/lib/dxc-resultable/README.md | 131 ---------- .../dxc-ngx-cdk/src/lib/dxc-sidenav/README.md | 81 ------ .../dxc-ngx-cdk/src/lib/dxc-slider/README.md | 162 ------------ .../dxc-ngx-cdk/src/lib/dxc-spinner/README.md | 98 ------- .../dxc-ngx-cdk/src/lib/dxc-switch/README.md | 147 ----------- .../src/lib/dxc-tabbed-section/README.md | 81 ------ .../dxc-ngx-cdk/src/lib/dxc-table/README.md | 85 ------ .../dxc-ngx-cdk/src/lib/dxc-tabs/README.md | 113 -------- .../dxc-ngx-cdk/src/lib/dxc-tag/README.md | 107 -------- .../dxc-ngx-cdk/src/lib/dxc-upload/README.md | 71 ----- .../dxc-ngx-cdk/src/lib/dxc-wizard/README.md | 131 ---------- 31 files changed, 3806 deletions(-) delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-accordion/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-accordionGroup/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-alert/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-application-layout/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-box/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-button/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-card/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-checkbox/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-chip/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-date/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-dialog/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-dropdown/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-footer/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-header/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-heading/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-input-text/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-link/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-paginator/readme.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-progressbar/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-radio/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-resultable/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-sidenav/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-slider/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-spinner/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-switch/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-tabbed-section/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-table/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-tabs/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-tag/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-upload/README.md delete mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-wizard/README.md diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-accordion/README.md deleted file mode 100644 index 58b9f425c..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-accordion/README.md +++ /dev/null @@ -1,128 +0,0 @@ -# DXC Accordion Component - -## Overview - -The DXC Accordion Component is a collapsible panel. - -## Usage - -```html - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. -
- -``` - -Include the **DxcAccordionModule** into **app.module.ts** to use the accordion component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcAccordionModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcAccordionModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
label: string		Text to be placed next to the button.
@Input
iconSrc: string		URL of the icon that will be placed next to the button label.
@Input
assistiveText: string		Assistive text to be placed on the right side of the panel.
@Input
disabled: boolean		falseIf true, the component will be disabled.
@Input
isExpanded: boolean		falseIf true, the component will be expanded.
@Output
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
@Input
margin: any (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 margin sizes. -
@Input
padding: any (string | object)		 - 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
tabIndexValue: number		0 - Value of the tabindex. -
- -## Theming - - - - - - - - - - - - - - - - - -
NameDefaultDescription
arrowColor#6F2C91Applies to token arrowColor, hoverBackgroundColor and focusOutline.
fontColor#666666Applies to token fontColor and disabledColor.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-accordionGroup/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-accordionGroup/README.md deleted file mode 100644 index 54b44dd54..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-accordionGroup/README.md +++ /dev/null @@ -1,87 +0,0 @@ -# DXC Accordion Group Component - -## Overview - -The DXC Accordion Group Component is a collapsible group panel. - -## Usage - -```html - - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. -
- - -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. -
- - -``` - -Include the **DxcAccordionGroupModule** into **app.module.ts** to use the accordion group component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcAccordionGroupModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcAccordionGroupModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
indexActive: number		The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component. If null, the component will be controlled and all accordions will be closed.
@Input
disabled: boolean		falseIf true, the component will be disabled.
@Output
onActiveChange: function		This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
@Input
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 margin sizes.
- -## Theming - -Not available tokens. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-alert/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-alert/README.md deleted file mode 100644 index ac8220156..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-alert/README.md +++ /dev/null @@ -1,117 +0,0 @@ -# DXC Alert Component - -## Overview - -The DXC Alert Component is an important message for the user. - -## Usage - -```html - - -``` - -Include the **DxcAlertModule** into **app.module.ts** to use the alert component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcAlertModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcAlertModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
type: string ('info' | 'confirm' | 'warning' | 'error')		 - 'info' - Uses on of the available alert types.
@Input
mode: string ('inline' | 'modal')		 - 'inline' - - Uses on of the available alert modes: -
    -
  • - inline: If onClose function is received, close - button will be visible and the function will be executed when it's - clicked. There is no overlay layer. Position should be decided by - the user. -
    • -
  • - modal: The alert will be displayed in the middle - of the screen with an overlay layer behind. The onClose function - will be executed when the X button or the overlay is clicked. The - user has the responsibility of hidding the modal in the onClose - function, otherwise the modal will remain visible. -
    • -
-
@Input
inlineText: string		Text to display after icon and alert type and before content.
@Output
onClose: EventEmitter		 - This function will be called when the user clicks the close button. If - there is no function we should close the alert by default. -
@Input
margin: any (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 margin sizes. -
@Input
size: any (string | object)		 - 'fitContent' - Size of the component ('large' | 'fillParent' | 'fitContent').
@Input
tabIndexValue: number		0 - Tabindex value given to the close button. -
- -## Theming - -Not available tokens. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-application-layout/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-application-layout/README.md deleted file mode 100644 index ad472da7d..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-application-layout/README.md +++ /dev/null @@ -1,37 +0,0 @@ -# DXC Application Layout Component - -## Overview - -The DXC Application Layout Component is a container. - -## Usage - -```html - - - - - - - -``` - -Include the **DxcApplicationLayoutModule** into **app.module.ts** to use the application layout component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcApplicationLayoutComponent } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcApplicationLayoutComponent], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-box/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-box/README.md deleted file mode 100644 index 1384c5728..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-box/README.md +++ /dev/null @@ -1,85 +0,0 @@ -# DXC Box Component - -## Overview - -The DXC Box Component is a container. - -## Usage - -```html - Box Content -``` - -Include the **DxcBoxModule** into **app.module.ts** to use the box component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcBoxModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcBoxModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
shadowDepth: 0 | 1 | 2		2The size of the shadow to be displayed around the box.
@Input
display: string		 - 'inline-flex' - Changes the display CSS property of the box div.
@Input
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 margin sizes. -
@Input
padding: string | object		 - Size of the padding 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. -
@Input
size: string		 - 'fitContent' - - Size of the component ('small' | 'medium' | 'large' | 'fillParent'| - 'fitContent'). -
- -## Theming - -Not available tokens. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-button/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-button/README.md deleted file mode 100644 index d4835fc65..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-button/README.md +++ /dev/null @@ -1,174 +0,0 @@ -# DXC Button Component - -## Overview - -The DXC Button Component is a clickable element. - -## Usage - -```html - -``` - -Include the **DxcButtonModule** into **app.module.ts** to use the button component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcButtonModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcButtonModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
'primary' | 'secondary' | 'text'		 - 'primary' - Uses on of the available button modes.
@Input
label: string		Text to be placed inside the button.
@Input
iconSrc: string		URL of the icon that will be placed next to the button label.
@Input
iconPosition: 'before' | 'after'		 - 'before' - Whether the icon should appear after or before the label.
@Input
disabled: boolean		 - false - If true, the component will be disabled.
@Output
onClick: EventEmitter		 - This function will be called when the user clicks the button. The - event object will be passed as a parameter. -
@Input
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 margin sizes. -
@Input
size: string | object		 - Size of the component ('small' | 'medium' | 'large' | 'fillParent' | - 'fitContent'). -
@Input
tabIndexValue: number		 - Value of the tabindex. -
- -## Theming - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
color - #6F2C91 - Applies to token primaryBackgroundColor and secondaryBorderColor in primary and secondary mode.
hoverColor - #000000 - Applies to token hoverBackgroundColor, hoverOutlinedColor and hoverBackgroundColor in primary, secondary and text mode.
primaryFontColor - #FFFFFF - Applies to token primaryTextColor in primary mode.
primaryHoverFontColor - #FFFFFF - Applies to token hoverTextColor in primary mode.
secondaryFontColor - #000000 - Applies to token secondaryTextColor secondary mode.
secondaryHoverFontColor - #000000 - Applies to token hoverTextColor in secondary mode.
textFontColor - #6F2C91 - Applies to token textTextColor in text mode.
textHoverFontColor - #FFFFFF - Applies to token hoverTextColor in text mode.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-card/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-card/README.md deleted file mode 100644 index 4fd312a9c..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-card/README.md +++ /dev/null @@ -1,116 +0,0 @@ -# DXC Card Component - -## Overview - -The DXC Card Component is a container which basically has an image and some content . - -## Usage - -```html - - Card Example - -``` - -Include the **DxcCardModule** into **app.module.ts** to use the card component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcButtonModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcCardModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
imageSrc: string		URL of the image that will be placed in the card component.
@Input
imageBgColor: string		'black'Color of the image background.
@Input
imagePadding: any (string | object)		 - Size of the padding to be applied to the image section of 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. -
@Input
imagePosition: string ('after' | 'before')		 - 'before' - Whether the image should appear in relation to the content.
@Input
linkHref: string		 - If defined, the tag will be displayed as an anchor, using this prop as - "href". Component will show some visual feedback on hover. -
@Output
onClick: EventEmitter		 - This function will be called when the user clicks the tag. Component - will show some visual feedback on hover. -
@Input
imageCover: boolean		falseWhether the image must cover the whole image area of the card.
@Input
margin: any (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 margin sizes. -
@Input
tabIndexValue: number		0 - Value of the tabindex given when there is an href. -
- -## Theming - -Not available tokens. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/README.md deleted file mode 100644 index 98ea2b60f..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-checkbox/README.md +++ /dev/null @@ -1,151 +0,0 @@ -# DXC Checkbox Component - -## Overview - -The DXC Checkbox Component provides to the user the ability to select a true, false or indeterminate value for a field. - -## Usage - -```html - - -``` - -Include the **DxcCheckboxModule** into **app.module.ts** to use the checkbox component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcCheckboxModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcCheckboxModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
checked: boolean		false - If true, the component is checked. If undefined the component will be - uncontrolled and the value will be managed internally by the - component. -
@Input
value: string		 - Will be passed to the value attribute of the html input element. When - inside a form, this value will be only submitted if the checkbox is - checked. -
@Input
label: string		Text to be placed next to the checkbox.
@Input
labelPosition: 'before' | 'after'		 - 'before' - Whether the label should appear after or before the checkbox.
@Input
name: string		Name attribute of the input element.
@Input
disabled: boolean		 - false - If true, the component will be disabled.
@Input
required: boolean		 - false - - If true, the checkbox will change its appearence, showing that the - value is required. -
@Output
onChange: EventEmitter		 - This function will be called when the user clicks the checkbox. The - new value will be passed as a parameter. -
@Input
margin: any (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 margin sizes. -
@Input
size: any (string | object)		 - 'fitContent' - - Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent'). -
@Input
tabIndexValue: number		 - Value of the tabindex. -
- -## Theming - - - - - - - - - - - - - - - - - -
NameDefaultDescription
color#0067B3Applies to token backgroundColorChecked and borderColor.
checkColor#FFFFFFApplies to token checkColor.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-chip/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-chip/README.md deleted file mode 100644 index eee1c0a39..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-chip/README.md +++ /dev/null @@ -1,117 +0,0 @@ -# DXC Chip Component - -## Overview - -The DXC Chip Component is a compact element that displays short information. - -## Usage - -```html - -``` - -Include the **DxcChipModule** into **app.module.ts** to use the chip component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcChipModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcChipModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
label: string		Text to be placed inside the chip.
@Input
suffixIconSrc: string		Path of the icon to be placed after the label.
@Input
prefixIconSrc: string		Path of the icon to be placed before the label.
@Input
margin: any (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 margin sizes. -
@Input
disabled: boolean		false - If true, the component will be disabled. -
@Input
tabIndexValue: number		0 - Value of the tabindex, it also applies to prefix and suffix icons when a function is given. -
@Output
suffixIconClick: EventEmitter		 - Event that will be emitted when the suffix icon is clicked. -
@Output
prefixIconClick: EventEmitter		 - Event that will be emitted when the prefix icon is clicked. -
- -## Theming - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
fontColor#000000Applies to token textColor.
backgroundColor#EEEEEEApplies to token backgroundColor.
outlinedColorApplies to token outlinedColor.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-date/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-date/README.md deleted file mode 100644 index 0d9637bd8..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-date/README.md +++ /dev/null @@ -1,186 +0,0 @@ -# DXC Date Component - -## Overview - -The DXC Date Component is an element to select a date. - -## Usage - -```html - -``` - -Include the **DxcDateModule** into **app.module.ts** to use the date component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcDateModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcDateModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
value: any		The value of the input element.
@Input
format: string		 - The format in which the date value will be displayed. User must use - this format when editing the input. -
@Input
label: string		Text to be placed next to the date component.
@Input
name: string		Name attribute of the input element.
@Input
iconSrc: string		The path of an icon to replace the default calendar icon.
@Input
disabled: boolean		 - false - If true, the component will be disabled.
@Input
required: boolean		 - false - - If true, a red asterisk will appear before the label to indicate to - the user that the field is required. -
@Input
assistiveText: string		Assistive text to be placed at the bottom of the input.
@Input
invalid: boolean		 - false - - If true, the input will change its appearence, showing that the value - is not valid. -
@Output
onChange: EventEmitter		 - This function will be called when the user types within the input. - An object including the current sring value and the date value - (if the string typed is a valid date) will be passed to this function. - An example of this object is: {{'{'}} stringValue: value, dateValue: date {{'}'}}. -
@Output
onBlur: EventEmitter		 - This function will be called when the the input loses the focus. - The input value will be passed as a parameter. -
@Input
margin: any (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 margin sizes. -
@Input
size: any (string | object)		 - 'medium' - Size of the component ('medium' | 'large' | 'fillParent').
@Input
tabIndexValue: number		0 - Value of the tabindex. -
- -## Available date formats - -Although there are a lot of date formats for differents countries and languages we only suppor the ones that are widely used (see ISO 8601) - -```typescript -export enum Formats { - "MM/DD/YYYY", - "DD/MM/YYYY", - "YYYY/MM/DD", - "YYYY-MM-DD", - "DD-MM-YYYY", - "MM-DD-YYYY", - "DD.MM.YYYY", - "MM.DD.YYYY", - "YYYY.MM.DD", -} -``` - -## Theming - - - - - - - - - - - - - - - - - -
NameDefaultDescription
pickerSelectedDateColor#FFFFFFApplies to token pickerSelectedDateColor.
pickerSelectedDateBackgroundColor#6F2C91Applies to token pickerSelectedDateBackgroundColor.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dialog/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-dialog/README.md deleted file mode 100644 index 35ec2f58b..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-dialog/README.md +++ /dev/null @@ -1,97 +0,0 @@ -# DXC Dialog Component - -## Overview - -The DXC Dialog Component is a container that informs the user about a task or displays information. - -## Usage - -```html - - Lorem ipsum dolor sit amet consectetur adipiscing elit curae, sodales. - -``` - -Include the **DxcDialogModule** into **app.module.ts** to use the dialog component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcDialogModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcDialogModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
isCloseVisible: boolean		 - true - If true, the close 'x' button will be visible.
@Output
onCloseClick: EventEmitter		 - This function will be called when the user clicks the close 'x' button. - The user has the responsibility of hidding the modal. -
@Output
onBackgroundClick: EventEmitter		 - This function will be called when the user clicks background of the modal - button. The user has the responsibility of hidding the modal. -
@Input
overlay: boolean		 - true - If true, the dialog will be displayed over a darker background.
@Input
padding: any (string | object)		 - Size of the padding 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. -
@Input
tabIndexValue: number		0 - Value of the tabindex given to the close 'x' button. -
- -## Theming - -Not available tokens. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/README.md deleted file mode 100644 index 48501bc80..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-dropdown/README.md +++ /dev/null @@ -1,129 +0,0 @@ -# DXC Dropdown Component - -## Overview - -The DXC Dropdown Component is a collapsible menu where choices are listed. - -## Usage - -```html - -``` - -Include the **DxcDropdownModule** into **app.module.ts** to use the dropdown component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcDropdownModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcDropdownModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
options: object[]		[]An array of objects representing the selectable options. Each object has the following properties: -
    -
  • label: Option display value
    • -
  • value: Option value
    • -
  • iconSrc: URL of the icon that will be placed next to the option label (Optional)
    • -
-
@Input
optionsIconPosition: 'before' | 'after'		'before'In case options include icons, whether the icon should appear after or before the label.
@Input
iconSrc: string		URL of the icon that will be placed next to the dropdown label.
@Input
iconPosition: 'before' | 'after'		'before'Whether the icon should appear after or before the label.
@Input
label: string		Text to be placed when the list of options is not displayed.
@Input
name: string		Name attribute of the input element.
@Input
caretHidden: boolean		falseWhether the arrow next to the label is displayed or not.
@Input
onSelectOption: EventEmitter		This event will be triggered when the selection changes. The string with the key of the selected value will be passed as a parameter.
@Input
margin: any (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 margin sizes.
@Input
size: any (string | object)		'fitContent' Size of the component ('large' | 'fillParent' | 'fitContent').
@Input
tabIndexValue: number		0 - Value of the tabindex. -
- -## Theming - - - - - - - - - - - - - - - - - -
NameDefaultDescription
backgroundColor#FFFFFFApplies to token backgroundColor.
fontColor#000000Applies to token textColor.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-footer/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-footer/README.md deleted file mode 100644 index 29986b656..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-footer/README.md +++ /dev/null @@ -1,156 +0,0 @@ -# DXC Footer Component - -## Overview - -The DXC Footer Component is a navegation container used at the bottom of the app. - -## Usage - -```html - - -``` - -Include the **DxcFooterModule** into **app.module.ts** to use the footer component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcFooterModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcFooterModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
logoSrc: string		The path of an icon to replace the theme logo.
@Input
socialLinks: object[]		 - [] - - An array of objects representing the links that will be rendered at - the bottom part of the footer. Each object has the following - properties: -
    -
  • - logoSrc: The path of an icon for the link -
    • -
  • - href: URL of the page the link goes to -
    • -
-
@Input
bottomLinks: object[]		 - [] - - An array of objects representing the incon links that will be rendered - at the top-right side of the footer. Each object has the following - properties: -
    -
  • - text: Text for the link -
    • -
  • - href: URL of the page the link goes to -
    • -
-
@Input
copyright: string		The text that will be displayed as copyright disclaimer.
@Input
children: node		 - The center section of the footer. Can be used to render custom content - in this area. -
@Input
margin: any (string | object)		 - Size of the top margin to be applied to the footer ('xxsmall' | - 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). -
@Input
padding: any (string | object)		 - Size of the padding to be applied to the custom area of 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. -
@Input
tabIndexValue: number		0 - Value of the tabindex for all interactuable elements, except those inside the custom area. -
- -## Theming - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
fontColor#FFFFFFApplies to token textColor.
backgroundColor#000000Applies to token backgroundColor.
lineColor#0067B3Applies to token lineColor.
logoDXC LogoApplies to logo token.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-header/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-header/README.md deleted file mode 100644 index ac62e6502..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-header/README.md +++ /dev/null @@ -1,218 +0,0 @@ -# DXC Header Component - -## Overview - -The DXC Header Component is a navegation container used at the top of the app. - -## Usage - -```html - -``` - -Include the **DxcHeaderModule** into **app.module.ts** to use the header component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcHeaderModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcHeaderModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
underlined: boolean		 - true - - Wether a contrast line should appear at the bottom of the header. -
@Input
logoSrc: string		 - 'default' - The path of an icon to replace the theme logo.
@Output
onClick: EventEmitter		 - This function will be called when the user clicks the header logo. -
@Input
children: node		 - The right section of the header. Can be used to render custom content - in this area. -
@Input
tabIndexValue: number		0 - Value of the tabindex for all interactuable elements, except those inside the custom area. -
@Input
margin: string		 - Size of the bottom margin to be applied to the footer ('xxsmall' | - 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). -
@Input
padding: any (string | object)		 - Size of the padding to be applied to the custom area of 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. -
- -## Directives - -Directives are used to add functionality and new syntax into HTML components. The following directives are customized and you can use them on this component. - - - - - - - - - - -
NameDescription
isClosableDirective to close the responsive menu when click on element.
- -Here is an example of its used: - -```html - -
- test -
- -``` - -## Responsive - -You can make your header responsive. You need to specify with the id attribute which HTML element you want to apply the responsive menu. - - - - - - - - - - - - - - -
NameDescription
responsiveContent that will be displayed when the width of the device is small.
unresponsiveContent that will be displayed when the width of the device is large.
- -Here is an example of its used: - -```html - - -
- -
- -``` - -## Theming - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
backgroundColor - #FFFFFF - Applies to token backgroundColor.
underlinedColor - #000000 - Applies to token underlinedColor.
fontColor - #000000 - Applies to token textColor.
backgroundColorMenu - #FFFFFF - Applies to token backgroundColorMenu.
fontColorMenu - #000000 - Applies to token textColorMenu.
hamburguerIconColor - #000000 - Applies to token hamburguerIconColor and hoverhamburguerIconColor (0.16 opacity).
logoDXC LogoApplies to logo token.
logoResponsiveDXC LogoApplies to logoResponsive token.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-heading/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-heading/README.md deleted file mode 100644 index 3068cf239..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-heading/README.md +++ /dev/null @@ -1,70 +0,0 @@ -# DXC Heading Component - -## Overview - -The DXC Header Component is a navegation container used at the top of the app. - -## Usage - -```html - -``` - -Include the **DxcHeadingModule** into **app.module.ts** to use the heading component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcHeadingModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcHeadingModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
level: number		 - 1 - Defines the heading level from 1 to 5.
@Input
text: string		Heading text.
@Input
weight: 'light' | 'normal' | 'bold'		Modifies the default weight of the heading.
@Input
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 margin sizes. -
- -## Theming - -Not available tokens. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-input-text/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-input-text/README.md deleted file mode 100644 index 9936fc8f5..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-input-text/README.md +++ /dev/null @@ -1,245 +0,0 @@ -# DXC Input Text Component - -## Overview - -The DXC Input Text Component allows the user to introduce text. - -## Usage - -```html - - -``` - -Include the **DxcInputTextModule** into **app.module.ts** to use the input text component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcInputTextModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcInputTextModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
value: string		Value of the input element.
@Input
label: string		Text to be placed next to the input.
@Input
assistiveText: string		Assistive text to be placed bellow the input.
@Input
prefix: string		 - Prefix to be placed before the input value. Use prefixIconSrc in case the - prefix is an icon. -
@Input
suffix: string		 - Suffix to be placed after the input value. Use suffixIconSrc in case the - suffix is an icon. -
@Input
prefixIconSrc: string		Deprecated. Path of the icon to be placed before the input value.
@Input
suffixIconSrc: string		Deprecated. Path of the icon to be placed after the input value.
@Input
name: string		Name attribute of the input element.
@Input
placeholder: string		Text to be put as placeholder in the input.
@Input
disabled: boolean		falseIf true, the component will be disabled.
@Input
required: boolean		false - If true, the input will change its appearence showing that the value is - required. -
@Input
isMasked: boolean		false - If true, a mask will be displayed. -
@Input
invalid: boolean		false - If true, the input will change its appearence showing that the value is - invalid. -
@Input
tabIndexValue: number		0 - Value of the tabindex, it also applies to prefix and suffix when a function is given. -
@Output
onChange: EventEmitter		 - This function will be called when the user changes the value of the input. - The new value will be passed as a parameter. -
@Output
onBlur: EventEmitter		 - This function will be called when the the input loses the focus. The input - value will be passed as a parameter. -
@Output
onClickPrefix: EventEmitter		 - This function will be called when the prefix (text or icon) is clicked. -
@Output
onClickSuffix: EventEmitter		 - This function will be called when the suffix (text or icon) is clicked. -
@Input
margin: any (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. -
@Input
size: any (string | object)		'medium' - Size of the component ('small' | 'medium' | 'large' | 'fillParent'). -
@Input
- autocompleteOptions: any ([string] | function: Observable <Array>) - 		- It can be either an array or a function: -
    -
  • - Array: Array of options that will be filtered by the component. -
    • -
  • - Function: This function will be called when the user changes - the value and when the component is initialized, this function will receive - the new value as parameter and should return one Observable on which we subscribe - to get the suggestions array. -
    • -
-
- -### Children -#### DxcInputPrefixIcon - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
tabIndexValue: number		0Tabindex value given to the preffix icon.
@Output
onClickPrefix: EventEmitter		This function will be called when the prefix is clicked.
- -#### DxcInputSuffixIcon - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
tabIndexValue: number		0Tabindex value given to the suffix icon.
@Output
onClickPrefix: EventEmitter		This function will be called when the prefix is clicked.
- -## Theming - -No available tokens. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-link/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-link/README.md deleted file mode 100644 index 9fb442a74..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-link/README.md +++ /dev/null @@ -1,130 +0,0 @@ -# DXC Link Component - -## Overview - -The DXC Link Component is a clickable text with a route. - -## Usage - -```html -This is a text with a to another -page. -``` - -Include the **DxcLinkModule** into **app.module.ts** to use the link component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcLinkModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcLinkModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
underlined: boolean		 - true - - Deprecated. If true, the text is underlined. -
@Input
disabled: boolean		 - false - - If true, the link is disabled. -
@Input
inheritColor: boolean		 - false - If true, the color is inherited from parent.
@Input
text: string		 - Link text. -
@Input
iconSrc: string		 - Source of the icon. -
@Input
iconPosition: 'before' | 'after'		 - 'before' - - Indicates the position of the icon in the component. -
@Input
href: string		 - Page to be opened when the user clicks on the link. -
@Input
newWindow: boolean		 - false - - If true, the page is opened in a new browser tab. -
@Input
margin: string | object		 - false - - 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
tabIndexValue: number		0 - Value of the tabindex. -
@Output
onClick: EventEmitter		This function will be called when the user clicks the link.
- -## Theming - -Not available tokens. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-paginator/readme.md b/projects/dxc-ngx-cdk/src/lib/dxc-paginator/readme.md deleted file mode 100644 index 7e3fec8cb..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-paginator/readme.md +++ /dev/null @@ -1,117 +0,0 @@ -# DXC Paginator Component - -## Overview - -The DXC Paginator Component allows the user to navegate through pages. - -## Usage - -```html - - -``` - -Include the **DxcPaginatorModule** into **app.module.ts** to use the paginator component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcPaginatorModule } from '@dxc-technology/halstack-angular'; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcPaginatorModule], - providers: [], - bootstrap: [AppComponent] -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
currentPage: number		1Number of the current selected page.
@Input
itemsPerPage: number		5Number of items per page.
@Input
totalItems: number		1Total number of items in the pages.
@Input
paginationActions: string[]		 - Pagination actions to be rendered ['prev', 'next', 'first','last']. - In case the property is not defined all actions will be rendered. -
@Input
tabIndexValue: number		0 - Value of the tabindex. -
@Output
nextFunction: EventEmitter		This function will be called when the user clicks the button to go to the next page.
@Output
prevFunction: EventEmitter		This function will be called when the user clicks the button to go to the previous page.
@Output
firstFunction: EventEmitter		This function will be called when the user clicks the button to go to the first page.
@Output
lastFunction: EventEmitter		This function will be called when the user clicks the button to go to the last page.
- -## Theming - - - - - - - - - - - - - - - - -
NameDefaultDescription
paginatorBackgroundColor#EEEEEEApplies to token paginatorBackgroundColor.
paginatorFontColor#000000Applies to token paginatorTextColor.
\ No newline at end of file diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/README.md deleted file mode 100644 index 6cd5d80c8..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-progressbar/README.md +++ /dev/null @@ -1,97 +0,0 @@ -# DXC ProgressBar Component - -## Overview - -The DXC ProgressBar Component inform users about the status of ongoing processes. - -## Usage - -```html - - -``` - -Include the **DxcProgressBar** into **app.module.ts** to use the progress bar component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcProgressBar } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcProgressBar], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
label: string		Text to be placed above the progress bar.
@Input
overlay: boolean		 - true - If true, the progress bar will be displayed as a modal.
@Input
value: string		 - The value of the progress indicator. If it's received the component is - determinate otherwise is indeterminate. -
@Input
showValue: boolean		 - false - If true, the value is displayed above the progress bar.
@Input
margin: any (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 margin sizes. -
- -## Theming - - - - - - - - - - - - - - - - - -
NameDefaultDescription
trackLine#6F2C91Applies to token trackLine.
totalLine#666666Applies to token totalLine.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-radio/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-radio/README.md deleted file mode 100644 index acdb3380b..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-radio/README.md +++ /dev/null @@ -1,142 +0,0 @@ -# DXC Radio Component - -## Overview - -The DXC Radio Component allows the user to select an option. - -## Usage - -```html - - -``` - -Include the **DxcRadioModule** into **app.module.ts** to use the radio component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcRadioModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcRadioModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
checked: boolean		 - false - - If true, the radio is selected. If undefined the component will be - uncontrolled and the value will be managed internally by the - component. -
@Input
value: any		 - Will be passed to the value attribute of the html input element. - When inside a form, this value will be only submitted if the radio is checked. -
@Input
label: string		Text to be placed next to the radio.
@Input
labelPosition: string ('before' | 'after')		 - 'before' - Whether the label should appear after or before the radio.
@Input
name: string		Name attribute of the input element.
@Input
disabled: boolean		 - false - If true, the component will be disabled.
@Input
required: boolean		 - false - - If true, the radio will change its appearence, showing that the value - is required. -
@Output
onChange: EventEmitter		 - This function will be called when the user clicks the radio. The new - value will be passed as a parameter. -
@Input
margin: any (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 margin sizes. -
@Input
size: any (string | object)		 - 'fitContent' - - Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent'). -
- -## Theming - - - - - - - - - - - - -
NameDefaultDescription
color#000000Applies to token dotColor and borderColor.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-resultable/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-resultable/README.md deleted file mode 100644 index 47ae2f6ff..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-resultable/README.md +++ /dev/null @@ -1,131 +0,0 @@ -# DXC Resultset Table Component - -## Overview - -The DXC Resultset Table Component show information in cells and columns with a paginator component. - -## Usage - -```html - - - - {{item['id']}} - - - - - {{item['name']}} - - -``` - -Include the **DxcResultsetTableModule** into **app.module.ts** to use the resultset table component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcResultsetTableModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcResultsetTableModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
margin: any (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. -
@Input
itemsPerPage: number		5 - Number of items per page. -
@Input
collectionResource: object[]		[] - An array of objects with the values to display in the table. - The key is the column and the value is the property to be displayed in the cell. -
- -## Directives - -Directives are used to add functionality and new syntax into HTML components. The following directives are customized and you can use them on this component. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
sortable: object[] - -

isSortable:false

-

propertyName:''

- - 		- An array of objects representing if the column is going to be sorted and the key value. -
    -
  • - isSortable: boolean value if it is sorteable. -
    • -
  • - propertyName: string with the key from the array of objects. -
    • -
-
dxcColumnDef: string - Column definition. -
dxcCellDef: Iterable<string> - Cell definition. It selects the value from the array. -
@Input
tabIndexValue: number		0 - Value of the tabindex for the sortable icon. -
- -## Theming - -As the resultset table component is composed by a table component, the tokens for customization are the same. You can find them [here](../dxc-table/README.md). diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-sidenav/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-sidenav/README.md deleted file mode 100644 index 1208efc04..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-sidenav/README.md +++ /dev/null @@ -1,81 +0,0 @@ -# DXC Sidenav Component - -## Overview - -The DXC Sidenav Component is a side container of the page for navegation. - -## Usage - -```html - - Lorem Ipsum - -``` - -Include the **DxcSideNavModule** into **app.module.ts** to use the sidenav component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcSideNavModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcSideNavModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
tabIndexValue: number		0Value of the tabindex given to DxcSidenavLink children.
@Input
padding: string | object		 - 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. -
- -## Theming - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
backgroundColor#F8F8F8Applies to token backgroundColor.
selectedOptionBackgroundColor#D9D9D9Applies to token selectedOptionBackgroundColor.
arrowColor#000000Applies to token arrowColor.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-slider/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-slider/README.md deleted file mode 100644 index 11876eaba..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-slider/README.md +++ /dev/null @@ -1,162 +0,0 @@ -# DXC Slider Component - -## Overview - -The DXC Slider Component is an element to select from a range of values. - -## Usage - -```html - -``` - -Include the **DxcSliderModule** into **app.module.ts** to use the slider component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcSliderModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcSliderModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
minValue: number		0The minimum value available for selection.
@Input
maxValue: number		100The maximum value available for selection.
@Input
step: number		1The step interval between values available for selection.
@Input
value: number		0The selected value.
@Input
marks: boolean		falseWhether the marks between each step should be shown or not.
@Input
showLimitsValues: boolean		false - Whether the min/max value labels should be displayed next to the - slider. -
@Input
showInput: boolean		false - Whether the input number for displaying/controlling the slider value - should be displayed next to the slider. -
@Input
name: string		Name attribute of the input element.
@Input
disabled: boolean		falseIf true, the component will be disabled.
@Input
labelFormatCallback: (value: number) => string | number		Function used to format minimum and maximum labels.
@Input
tabIndexValue: number		0 - Value of the tabindex. -
@Output
valueChange: EventEmitter		 - This function will be called when the slider changes its value, as - it's being dragged. The new value will be passed as a parameter when - this function is executed. -
@Output
onDragEnd: EventEmitter		 - This function will be called when the slider changes its value, but - only when the thumb is released. The new value will be passed as a - parameter when this function is executed. -
@Input
margin: any (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 margin sizes. -
@Input
size: string | object		'fillParent' - Size of the component ('medium' | 'large' | 'fillParent' | - 'fitContent'). -
- -## Theming - - - - - - - - - - - - -
NameDefaultDescription
color#0067B3Applies to token thumbBackgroundColor, dotsBackgroundColor and trackLine.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-spinner/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-spinner/README.md deleted file mode 100644 index 3c63d2f6c..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-spinner/README.md +++ /dev/null @@ -1,98 +0,0 @@ -# DXC Spinner Component - -## Overview - -The DXC Spinner Component inform users about the status of ongoing processes. - -## Usage - -```html - -``` - -Include the **DxcSpinnerModule** into **app.module.ts** to use the spinner component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcSpinnerModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcSpinnerModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
label: string		Text to be placed inside the spinner.
@Input
mode: string ('large' | 'small' | 'overlay')		 - - 'large' - - The spinner can have overlay or small or large size.
@Input
value: string		 - The value of the progress indicator. If it's received the component is - determinate, otherwise is indeterminate. -
@Input
showValue: boolean		 - false - If true, the value is displayed inside the spinner.
@Input
margin: any (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 margin sizes. -
- -## Theming - - - - - - - - - - - - - - - - - -
NameDefaultDescription
totalCircleColor#FFFFFFApplies to token totalCircle.
trackCircleColor#6F2C91Applies to token trackLine.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-switch/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-switch/README.md deleted file mode 100644 index c81c52940..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-switch/README.md +++ /dev/null @@ -1,147 +0,0 @@ -# DXC Switch Component - -## Overview - -The DXC Switch Component provides to the user the ability to select a true, false or indeterminate value for a field. - -## Usage - -```html - -``` - -Include the **DxcSwitchModule** into **app.module.ts** to use the switch component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcSwitchModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcSwitchModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
checked: boolean		false - If true, the component is checked. If undefined, the component will be - uncontrolled and the value will be managed internally by the - component. -
@Input
value: any		 - Will be passed to the value attribute of the html input element. When - inside a form, this value will be only submitted if the switch is - checked. -
@Input
label: string		Text to be placed next to the switch.
@Input
labelPosition: string ('before' | 'after')		 - 'before' - Whether the label should appear after or before the switch.
@Input
name: string		Name attribute of the input element.
@Input
disabled: boolean		 - false - If true, the component will be disabled.
@Input
required: boolean		 - false - - If true, the switch will change its appearence, showing that the value - is required. -
@Output
onChange: EventEmitter		 - This function will be called when the user clicks the radio. The new - value will be passed as a parameter. -
@Input
margin: any (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 margin sizes. -
@Input
size: any (string | object)		 - 'fitContent' - - Size of the component ('small' | 'medium' | 'large' | 'fillParent' | - 'fitContent'). -
@Input
tabIndexValue: number		0 - Value of the tabindex. -
- -## Theming - - - - - - - - - - - - -
NameDefaultDescription
checkedTrackBackgroundColor#6F2C91Applies to token checkedtrackBackgroundColor.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tabbed-section/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-tabbed-section/README.md deleted file mode 100644 index da5571dea..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-tabbed-section/README.md +++ /dev/null @@ -1,81 +0,0 @@ -# DXC Tabbed Section Component - -## Overview - -The DXC Tabbed Section Component is a layout to organize content with tabs. - -## Usage - -```html - -
Section 1
-
Section 2
-
Section 3
- -``` - -Include the **DxcTabbedSectionModule** into **app.module.ts** to use the tabbed section component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcTabbedSectionModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcTabbedSectionModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
sections: object[]		[] - An array of objects representing the tabs/sections. Each of them has - the following properties: -
    -
  • - tabLabel: Tab label. -
    • -
  • - section: Angular component for the section that will be - linked to the tab. Each section will be rendered right bellow the - previous one, and clicking in the tab will scroll the user to its associated - section. -
    • -
-
@Input
stickAtPx: number		0The number of pixels from the top of the parent container, where the tabs will stick when scrolling.
- -## Theming - -Not available tokens. - -## Usage Notes - -The dxc-tabbed-section component is based on material desing tabbed component and styled using the emotion JS to CSS library. When nesting several material tabbed components you may find conflicts depending on how you decide to implememnt it. In case this happens, it is necesary to define a default style for each of this nested material-tab-group elements in order to avoid the dxc-tabbed-section style to apply to each of them. An Example of this style definition as follows: - -```css -.mat-tab-group { - z-index: 10; - position: initial; - top: unset; -} -``` diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-table/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-table/README.md deleted file mode 100644 index c63100882..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-table/README.md +++ /dev/null @@ -1,85 +0,0 @@ -# DXC Table Component - -## Overview - -The DXC Table Component allows to display information in cells and columns. - -## Usage - -```html - - - header 1 - header 2 - header 3 - - - cell 1 - cell 2 - cell 3 - - - cell 4 - cell 5 - cell 6 - - -``` - -Include the **DxcTableModule** into **app.module.ts** to use the table component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcTableModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcTableModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - -
NameDefaultDescription
@Input
margin: any (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. -
- -## Theming - - - - - - - - - - - - - - - - - -
NameDefaultDescription
headerBackgroundColor#6F2C91Applies to token headerBackgroundColor.
headerFontColor#FFFFFFApplies to token headerTextColor.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-tabs/README.md deleted file mode 100644 index 6846c36ec..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-tabs/README.md +++ /dev/null @@ -1,113 +0,0 @@ -# DXC Tabs Component - -## Overview - -The DXC Tabs Component provides the user a navegation element with different groups of content. - -## Usage - -```html - - - - - -``` - -Include the **DxcTabsModule** into **app.module.ts** to use the tabs component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcTabsModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcTabsModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
activeTabIndex: number		0The index of the active tab.
@Input
iconPosition: string ('top' | 'left')		'left'Position of icons in tabs.
@Input
margin: any (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 margin sizes. -
- -### Tab properties - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
label: string		Text to be placed within the tab.
@Input
iconSrc: string		The path of an icon to be placed within the tab.
@Input
disabled: boolean		falseWhether the tab is disabled.
@Output
onTabClick: EventEmitter		This function will be called when the user clicks on a tab. The index of the clicked tab will be passed as a parameter.
@Output
onTabHover: EventEmitter		This function will be called when the user is on hover on a tab.
- -## Theming - - - - - - - - - - - - -
NameDefaultDescription
selectedFontColor#6F2C91Applies to token selectedFontColor, selectedIconColor, selectedUnderlineColor, focusColor, hoverBackgroundColor and pressedBackgroundColor.
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tag/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-tag/README.md deleted file mode 100644 index 9a7e794fa..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-tag/README.md +++ /dev/null @@ -1,107 +0,0 @@ -# DXC Tag Component - -## Overview - -The DXC Tag Component provides a label with information. - -## Usage - -```html - - -``` - -Include the **DxcTagModule** into **app.module.ts** to use the tag component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcTagModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcTagModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
label: string		Text to be placed next inside the tag.
@Input
labelPosition: string		'after'Whether the label should appear after or before the icon.
@Input
iconSrc: string		URL of the icon.
@Input
iconBgColor: string		'#5f249f'Background color of the icon section of the tag.
@Input
linkHref: string		If defined, the tag will be displayed as an anchor, using this prop as "href". - Component will show some visual feedback on hover.
@Output
onClick: EventEmitter		This function will be called when the user clicks the tag. - Component will show some visual feedback on hover.
@Input
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. -
@Input
size: string		'fitContent'Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent').
@Input
newWindow: boolean		 - false - - If true, the page is opened in a new browser tab. -
@Input
tabIndexValue: number		0 - Value of the tabindex. -
- -## Theming - -Not available tokens. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-upload/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-upload/README.md deleted file mode 100644 index 8c7514770..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-upload/README.md +++ /dev/null @@ -1,71 +0,0 @@ -# DXC Upload Component - -## Overview - -The DXC Upload Component is a component to upload files. - -## Usage - -```html - -``` - -Include the **DxcUploadModule** into **app.module.ts** to use the upload component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcUploadModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcUploadModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
tabIndexValue: number		0 - Value of the tabindex given to every interactuable elements. -
@Output
uploadCallback: Function		 - This function will be called when the user clicks the 'Upload' button for - every file to be uploaded, we will as a parameter the File object; apart - from that this function should return one promise on which we should make - 'then'(here we should show a Success alert) or 'catch' (in this case we - would receive the error message as a string) -
@Input
margin: any (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. -
- -## Theming - -Not available tokens. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-wizard/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-wizard/README.md deleted file mode 100644 index 04c345017..000000000 --- a/projects/dxc-ngx-cdk/src/lib/dxc-wizard/README.md +++ /dev/null @@ -1,131 +0,0 @@ -# DXC Wizard Component - -## Overview - -The DXC Wizard Component shows a layout where the user needs to go through several steps. - -## Usage - -```html - - - - - -``` - -Include the **DxcWizardModule** into **app.module.ts** to use the wizard component: - -```ts -import { NgModule } from "@angular/core"; -import { AppComponent } from "./app.component"; -import { DxcWizardModule } from "@dxc-technology/halstack-angular"; - -@NgModule({ - declarations: [AppComponent], - imports: [DxcWizardModule], - providers: [], - bootstrap: [AppComponent], -}) -export class AppModule {} -``` - -## API reference - -The API properties are the following: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
mode: 'horizontal' | 'vertical'		 - 'horizontal' - The wizard can be showed in horizontal or vertical.
@Input
currentStep: number		 - 0 - Defines which step is marked as the current. The numeration starts in 0.
@Input
tabIndexValue: number		0Value of the tabindex that is given to all the steps.
@Output
onStepClick: EventEmitter		 - This function will be called when the user clicks a step. The step number will be passed as a parameter. -
@Input
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 margin sizes. -
- -### Children -#### DxcWizardStep -This component displays what is inside as a step of the wizard. - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDefaultDescription
@Input
label: string		Step label.
@Input
description: string		Description that will be placed next to the step.
@Input
disabled: boolean		Whether the step is disabled or not.
@Input
valid: boolean		Whether the step is valid or not.
- -## Theming - - - - - - - - - - - - - - - - - -
NameDefaultDescription
selectedBackgroundColor#6F2C91Applies to token selectedBackgroundColor.
selectedFont#FFFFFFApplies to token selectedFont.