fix: status indicator refactoring to Object Status (#2152)

* feat:status indicator refactoring to infoLabel to object status

 feat:status indicator refactoring to infoLabel to object status

* feat:status indicator refactoring to infoLabel to object status

feat:status indicator refactoring to infoLabel to object status

* Update object-status-inverted-example.component.html

* feat:status indicator refactoring to infoLabel to object status

 feat:status indicator refactoring to infoLabel to object status

* feat:status indicator refactoring to infoLabel to object status

feat:status indicator refactoring to infoLabel to object status

* Update object-status-inverted-example.component.html

* addig cliable example to the code

addig cliable example to the code

* Update form-group.component.scss

* use setters and getters for Input props

* update tests for object status

* code changed according to new code contribution guidelines

* public modifier removed and  ngoninit added

* updating the CUSTOM_ELEMENTS_SCHEMA in module

updating the CUSTOM_ELEMENTS_SCHEMA in module

* removeing unwanted file and changing ng-template to ng-container

removeing unwanted file and changing ng-template to ng-container

* updating the build packages

updating the build packages

* feat:status indicator refactoring to infoLabel to object status

 feat:status indicator refactoring to infoLabel to object status

* feat:status indicator refactoring to infoLabel to object status

 feat:status indicator refactoring to infoLabel to object status

* feat:status indicator refactoring to infoLabel to object status

feat:status indicator refactoring to infoLabel to object status

* feat:status indicator refactoring to infoLabel to object status

feat:status indicator refactoring to infoLabel to object status

* Update object-status-inverted-example.component.html

* Update object-status-inverted-example.component.html

* addig cliable example to the code

addig cliable example to the code

* Update form-group.component.scss

* use setters and getters for Input props

* update tests for object status

* code changed according to new code contribution guidelines

* public modifier removed and  ngoninit added

* updating the CUSTOM_ELEMENTS_SCHEMA in module

updating the CUSTOM_ELEMENTS_SCHEMA in module

* removeing unwanted file and changing ng-template to ng-container

removeing unwanted file and changing ng-template to ng-container

* updating the build packages

updating the build packages

* remove leftovers from rebase

* Update package-lock.json

Co-authored-by: InnaAtanasova <i.atanasova@sap.com>
Co-authored-by: Gracjan Gorecki <gorecki.gracjan@hotmail.com>

angular.json

@@ -28,7 +28,6 @@
                             "apps/docs/src/assets"
                         ],
                         "styles": [
-                            "node_modules/fundamental-styles/dist/icon.css",
                             "apps/docs/src/fd-typedoc/assets/css/main.scss",
                             "apps/docs/src/styles.scss"
                         ],

apps/docs/src/app/core/api-files.ts

@@ -200,6 +200,10 @@ export const API_FILES = {
         'NotificationDefault',
         'NotificationRef',
     ],
+    objectStatus: [
+        'ObjectStatusModule',
+        'ObjectStatusComponent'
+    ],
     pagination: [
         'PaginationComponent',
         'PaginationModel',

apps/docs/src/app/core/component-docs/object-status/examples/object-status-clickable-and-icon-example.component.html

@@ -0,0 +1,10 @@
+<a fd-object-status [status]="'negative'" [glyph]="'status-negative'" [clickable]="true">Negative</a>
+<a fd-object-status [status]="'critical'" [glyph]="'status-critical'" [clickable]="true">Critical</a>
+<a fd-object-status [status]="'positive'" [glyph]="'status-positive'" [clickable]="true">Positive</a>
+<a fd-object-status [status]="'informative'" [glyph]="'hint'" [clickable]="true">Informative</a>
+<a fd-object-status [glyph]="'to-be-reviewed'" [clickable]="true">Default</a>
+<br>
+<br>
+<ng-container *ngFor="let item of [1,2,3,4,5,6,7,8]">
+  <a fd-object-status [indicationColor]="item" [clickable]="true">Indication Color {{item}}</a>
+</ng-container>

apps/docs/src/app/core/component-docs/object-status/examples/object-status-default-example.component.html

@@ -0,0 +1,5 @@
+<span fd-object-status [glyph]="'to-be-reviewed'"></span>
+<span fd-object-status [status]="'negative'" [glyph]="'status-negative'"></span>
+<span fd-object-status [status]="'critical'" [glyph]="'status-critical'"></span>
+<span fd-object-status [status]="'positive'" [glyph]="'status-positive'"></span>
+<span fd-object-status [status]="'informative'" [glyph]="'hint'"></span>

apps/docs/src/app/core/component-docs/object-status/examples/object-status-examples.component.scss

@@ -0,0 +1,3 @@
+.fd-object-status {
+    margin-right: 20px;
+}

apps/docs/src/app/core/component-docs/object-status/examples/object-status-examples.component.ts

@@ -0,0 +1,67 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-object-status-default-example',
+    templateUrl: './object-status-default-example.component.html',
+    styleUrls: ['./object-status-examples.component.scss']
+})
+export class ObjectStatusDefaultExampleComponent { }
+
+@Component({
+    selector: 'fd-object-status-text-example',
+    templateUrl: './object-status-text-example.component.html',
+    styleUrls: ['./object-status-examples.component.scss']
+})
+export class ObjectStatusTextExampleComponent { }
+
+@Component({
+    selector: 'fd-object-status-generic-text-example',
+    templateUrl: './object-status-generic-text-example.component.html',
+    styleUrls: ['./object-status-examples.component.scss']
+})
+export class ObjectStatusGenericExampleComponent { }
+
+@Component({
+    selector: 'fd-object-status-numeric-icon-example',
+    templateUrl: './object-status-icon-text-example.component.html',
+    styleUrls: ['./object-status-examples.component.scss']
+})
+export class ObjectStatusTextIconExampleComponent { }
+
+@Component({
+    selector: 'fd-object-status-clickable-and-icon-example',
+    templateUrl: './object-status-clickable-and-icon-example.component.html',
+    styleUrls: ['./object-status-examples.component.scss']
+})
+export class ObjectStatusClickableAndIconExampleComponent { 
+    showAlert() {
+        alert('you clicked the clickable ObjectStatus');
+    }
+}
+
+@Component({
+    selector: 'fd-object-status-inverted-example',
+    templateUrl: './object-status-inverted-example.component.html',
+    styleUrls: ['./object-status-examples.component.scss']
+})
+export class ObjectStatusInvertedTextExampleComponent { }
+
+@Component({
+    selector: 'fd-object-status-inverted-generic-text-example',
+    templateUrl: './object-status-inverted-generic-text-example.component.html',
+    styleUrls: ['./object-status-examples.component.scss']
+})
+export class ObjectStatusInvertedGenericTextExampleComponent { }
+
+@Component({
+    selector: 'fd-object-status-object-status-large-example',
+    templateUrl: './object-status-large-example.component.html',
+    styleUrls: ['./object-status-examples.component.scss']
+})
+export class ObjectStatusLargeExampleComponent { 
+
+    showAlert(index) {
+        alert('clicked alert large at index:- ' + index);
+    }
+
+}

apps/docs/src/app/core/component-docs/object-status/examples/object-status-generic-text-example.component.html

@@ -0,0 +1,3 @@
+<ng-container *ngFor="let item of [1,2,3,4,5,6,7,8]">
+  <span fd-object-status [indicationColor]="item">Indication Color {{item}}</span>
+</ng-container>

apps/docs/src/app/core/component-docs/object-status/examples/object-status-icon-text-example.component.html

@@ -0,0 +1,5 @@
+<span fd-object-status [status]="'negative'" [glyph]="'status-negative'">Negative</span>
+<span fd-object-status [status]="'critical'" [glyph]="'status-critical'">Critical</span>
+<span fd-object-status [status]="'positive'" [glyph]="'status-positive'">Positive</span>
+<span fd-object-status [status]="'informative'" [glyph]="'hint'">Informative</span>
+<span fd-object-status [glyph]="'to-be-reviewed'">Default</span>

apps/docs/src/app/core/component-docs/object-status/examples/object-status-inverted-example.component.html

@@ -0,0 +1,37 @@
+<span fd-object-status [status]="'negative'" [glyph]="'status-negative'" [inverted]="true"></span>
+<span fd-object-status [status]="'critical'" [glyph]="'status-critical'" [inverted]="true"></span>
+<span fd-object-status [status]="'positive'" [glyph]="'status-positive'" [inverted]="true"></span>
+<span fd-object-status [status]="'informative'" [glyph]="'hint'" [inverted]="true"></span>
+<span fd-object-status [glyph]="'to-be-reviewed'" [inverted]="true"></span>
+
+<br><br>
+
+<span fd-object-status [status]="'negative'" [inverted]="true">Negative</span>
+<span fd-object-status [status]="'critical'" [inverted]="true">Critical</span>
+<span fd-object-status [status]="'positive'" [inverted]="true">Positive</span>
+<span fd-object-status [status]="'informative'" [inverted]="true">Informative</span>
+<span fd-object-status [inverted]="true">Default</span>
+
+<br><br>
+
+<span fd-object-status [status]="'negative'" [inverted]="true">5</span>
+<span fd-object-status [status]="'critical'" [inverted]="true">20</span>
+<span fd-object-status [status]="'positive'" [inverted]="true">2.99</span>
+<span fd-object-status [status]="'informative'" [inverted]="true">10</span>
+<span fd-object-status [inverted]="true">99+</span>
+
+<br><br>
+
+<span fd-object-status [status]="'negative'" [glyph]="'status-negative'" [inverted]="true">Negative</span>
+<span fd-object-status [status]="'critical'" [glyph]="'status-critical'" [inverted]="true">Critical</span>
+<span fd-object-status [status]="'positive'" [glyph]="'status-positive'" [inverted]="true">Positive</span>
+<span fd-object-status [status]="'informative'" [glyph]="'hint'" [inverted]="true">Informative</span>
+<span fd-object-status [glyph]="'to-be-reviewed'" [inverted]="true">Default</span>
+
+<br><br>
+
+<a fd-object-status [status]="'negative'" [glyph]="'status-negative'" [clickable]="true" [inverted]="true">Negative</a>
+<a fd-object-status [status]="'critical'" [glyph]="'status-critical'" [clickable]="true" [inverted]="true">Critical</a>
+<a fd-object-status [status]="'positive'" [glyph]="'status-positive'" [clickable]="true" [inverted]="true">Positive</a>
+<a fd-object-status [status]="'informative'" [glyph]="'hint'" [clickable]="true" [inverted]="true">Informative</a>
+<a fd-object-status [glyph]="'to-be-reviewed'" [clickable]="true" [inverted]="true">Default</a>

apps/docs/src/app/core/component-docs/object-status/examples/object-status-inverted-generic-text-example.component.html

@@ -0,0 +1,3 @@
+<ng-container *ngFor="let item of [1,2,3,4,5,6,7,8]">
+	<a fd-object-status [indicationColor]="item" [clickable]="true" [inverted]="true">Indication Color {{item}}</a>
+</ng-container>

apps/docs/src/app/core/component-docs/object-status/examples/object-status-large-example.component.html

@@ -0,0 +1,37 @@
+<span fd-object-status [status]="'negative'" [glyph]="'status-negative'" [inverted]="true" [large]="true" [large]="true"></span>
+<span fd-object-status [status]="'critical'" [glyph]="'status-critical'" [inverted]="true" [large]="true"></span>
+<span fd-object-status [status]="'positive'" [glyph]="'status-positive'" [inverted]="true" [large]="true"></span>
+<span fd-object-status [status]="'informative'" [glyph]="'hint'" [inverted]="true" [large]="true"></span>
+<span fd-object-status [glyph]="'to-be-reviewed'" [inverted]="true" [large]="true"></span>
+
+<br><br>
+
+<span fd-object-status [status]="'negative'" [large]="true">Negative</span>
+<span fd-object-status [status]="'critical'" [large]="true">Critical</span>
+<span fd-object-status [status]="'positive'" [large]="true">Positive</span>
+<span fd-object-status [status]="'informative'" [large]="true">Informative</span>
+<span fd-object-status [large]="true">Default</span>
+
+<br><br>
+
+<span fd-object-status [status]="'negative'" [large]="true">5</span>
+<span fd-object-status [status]="'critical'" [large]="true">20</span>
+<span fd-object-status [status]="'positive'" [large]="true">2.99</span>
+<span fd-object-status [status]="'informative'" [large]="true">10</span>
+<span fd-object-status [large]="true">99+</span>
+
+<br><br>
+
+<span fd-object-status [status]="'negative'" [glyph]="'status-negative'" [large]="true">Negative</span>
+<span fd-object-status [status]="'critical'" [glyph]="'status-critical'" [large]="true">Critical</span>
+<span fd-object-status [status]="'positive'" [glyph]="'status-positive'" [large]="true">Positive</span>
+<span fd-object-status [status]="'informative'" [glyph]="'hint'" [large]="true">Informative</span>
+<span fd-object-status [glyph]="'to-be-reviewed'" [large]="true">Default</span>
+
+<br><br>
+
+<a fd-object-status [status]="'negative'" [glyph]="'status-negative'" [clickable]="true" [large]="true" [inverted]="true">Negative</a>
+<a fd-object-status [status]="'critical'" [glyph]="'status-critical'" [clickable]="true" [large]="true" [inverted]="true">Critical</a>
+<a fd-object-status [status]="'positive'" [glyph]="'status-positive'" [clickable]="true" [large]="true" [inverted]="true">Positive</a>
+<a fd-object-status [status]="'informative'" [glyph]="'hint'" [clickable]="true" [large]="true" [inverted]="true">Informative</a>
+<a fd-object-status [glyph]="'to-be-reviewed'" [clickable]="true" [large]="true" [inverted]="true">Default</a>

apps/docs/src/app/core/component-docs/object-status/examples/object-status-text-example.component.html

@@ -0,0 +1,5 @@
+<span fd-object-status [status]="'negative'">Negative</span>
+<span fd-object-status [status]="'critical'">Critical</span>
+<span fd-object-status [status]="'positive'">Positive</span>
+<span fd-object-status [status]="'informative'">Informative</span>
+<span fd-object-status>Default</span>

apps/docs/src/app/core/component-docs/object-status/object-status-docs.component.html

@@ -0,0 +1,84 @@
+<fd-docs-section-title [id]="'default'" [componentName]="'objectstatus'">
+	Object Status Icon Only
+</fd-docs-section-title>
+<component-example>
+	<fd-object-status-default-example></fd-object-status-default-example>
+</component-example>
+<code-example [exampleFiles]="defaultObjectStatusHtmlType"></code-example>
+<separator></separator>
+
+<fd-docs-section-title [id]="'Text'" [componentName]="'objectstatus'">
+	Object Status Text Only
+</fd-docs-section-title>
+<component-example>
+	<fd-object-status-text-example></fd-object-status-text-example>
+</component-example>
+<code-example [exampleFiles]="ObjectStatusTextExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title [id]="'iconandtext'" [componentName]="'objectstatus'">
+	Object Status with Text and Icon
+</fd-docs-section-title>
+<description></description>
+<component-example>
+	<fd-object-status-numeric-icon-example></fd-object-status-numeric-icon-example>
+</component-example>
+<code-example [exampleFiles]="ObjectStatusNumericIconExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title [id]="'genericText'" [componentName]="'objectstatus'">
+	Object Status with Generic Indication Colors
+</fd-docs-section-title>
+<description></description>
+<component-example>
+	<fd-object-status-generic-text-example></fd-object-status-generic-text-example>
+</component-example>
+<code-example [exampleFiles]="ObjectStatusTextIconExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title [id]="'clickable'" [componentName]="'objectstatus'">
+	Clickable Object Status
+</fd-docs-section-title>
+<description>For clickable Object Status set the <code>[clickable]</code> property to <code>true</code>.</description>
+<component-example>
+	<fd-object-status-clickable-and-icon-example></fd-object-status-clickable-and-icon-example>
+</component-example>
+<code-example [exampleFiles]="ObjectStatusclickableAndIconExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title [id]="'Inverted'" [componentName]="'objectstatus'">
+	Inverted Object Status
+</fd-docs-section-title>
+<description>Inverted Object Status are achieved by setting the <code>[inverted]</code> property to <code>true</code>.</description>
+<component-example>
+	<fd-object-status-inverted-example></fd-object-status-inverted-example>
+</component-example>
+<code-example [exampleFiles]="ObjectStatusInvertedExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title [id]="'invertedgeneric'" [componentName]="'objectstatus'">
+	Inverted Object Status with Generic Indication Colors
+</fd-docs-section-title>
+<description></description>
+<component-example>
+	<fd-object-status-inverted-generic-text-example></fd-object-status-inverted-generic-text-example>
+</component-example>
+<code-example [exampleFiles]="ObjectStatusInverterdGenericExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title [id]="'objectstatusLarge'" [componentName]="'objectstatus'">
+	Object Status Large Design
+</fd-docs-section-title>
+<description>For Object Status in large design use <code>[large]="true"</code>.</description>
+<component-example>
+	<fd-object-status-object-status-large-example></fd-object-status-object-status-large-example>
+</component-example>
+<code-example [exampleFiles]="ObjectStatusLargeExample"></code-example>
+
+<separator></separator>

apps/docs/src/app/core/component-docs/object-status/object-status-docs.component.ts

@@ -0,0 +1,81 @@
+import { Component } from '@angular/core';
+import * as ObjectStatusDefaultExample from '!raw-loader!./examples/object-status-default-example.component.html';
+import * as ObjectStatusTextExample from '!raw-loader!./examples/object-status-text-example.component.html';
+import * as ObjectStatusGenericTextExample from '!raw-loader!./examples/object-status-generic-text-example.component.html';
+import * as ObjectStatusTextIconExample from '!raw-loader!./examples/object-status-icon-text-example.component.html';
+import * as ObjectStatusClickableAndIConExample from '!raw-loader!./examples/object-status-clickable-and-icon-example.component.html';
+import * as ObjectStatusInvertedTextExample from '!raw-loader!./examples/object-status-inverted-example.component.html';
+import * as ObjectStatusInvertedGenericExample from '!raw-loader!./examples/object-status-inverted-generic-text-example.component.html';
+import * as ObjectStatusLargeExample from '!raw-loader!./examples/object-status-large-example.component.html';
+import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
+
+@Component({
+    selector: 'app-object-status',
+    templateUrl: './object-status-docs.component.html'
+})
+export class ObjectStatusDocsComponent {
+
+    defaultObjectStatusHtmlType: ExampleFile[] = [
+        {
+            language: 'html',
+            code: ObjectStatusDefaultExample,
+            fileName: 'object-status-default-example',
+        }
+    ];
+
+    ObjectStatusTextExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: ObjectStatusTextExample,
+            fileName: 'object-status-text-example',
+        }
+    ];
+
+    ObjectStatusTextIconExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: ObjectStatusGenericTextExample,
+            fileName: 'object-status-generic-text-example',
+        }
+    ];
+
+    ObjectStatusNumericIconExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: ObjectStatusTextIconExample,
+            fileName: 'object-status-icon-text-example',
+        }
+    ];
+
+    ObjectStatusclickableAndIconExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: ObjectStatusClickableAndIConExample,
+            fileName: 'object-status-clickable-and-icon-example',
+        }
+    ];
+
+    ObjectStatusInvertedExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: ObjectStatusInvertedTextExample,
+            fileName: 'object-status-inverted-example',
+        }
+    ];
+
+    ObjectStatusInverterdGenericExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: ObjectStatusInvertedGenericExample,
+            fileName: 'object-status-inverted-generic-text-example',
+        }
+    ];
+
+    ObjectStatusLargeExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: ObjectStatusLargeExample,
+            fileName: 'object-status-large-example',
+        }
+    ];
+}