commons-shared-web-ui 0.0.61 → 0.0.62

package/documentation/time-picker.md

@@ -0,0 +1,274 @@
+# Time Picker Component (`lib-time-picker`)
+
+A highly customizable, slot-machine / drum-roll style wheel picker component that supports 12-hour or 24-hour modes, custom minute steps, disabled time range limits (`minTime` and `maxTime`), full touch interaction, and accessibility attributes.
+
+---
+
+## 1. Importing the Module
+
+To use the time picker in your Angular application (or within a Micro Frontend Remote MFE), import `TimePickerModule` into your Angular module:
+
+```typescript
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TimePickerModule } from 'commons-shared-web-ui';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    TimePickerModule
+  ]
+})
+export class MyFeatureModule {}
+```
+
+---
+
+## 2. Basic Component Usage
+
+### Template-Driven Form / Two-Way Binding (`ngModel`)
+```html
+<lib-time-picker
+  [(ngModel)]="selectedTime"
+  [label]="'Meeting Time'"
+  [placeholder]="'Choose a time'"
+  [required]="true"
+  [mode]="'12'"
+  [minuteStep]="15">
+</lib-time-picker>
+```
+
+### Reactive Forms (`formControlName`)
+```html
+<form [formGroup]="form">
+  <lib-time-picker
+    [formControlName]="'startTime'"
+    [label]="'Start Time'"
+    [mode]="'24'"
+    [minTime]="'08:00'"
+    [maxTime]="'18:00'">
+  </lib-time-picker>
+</form>
+```
+
+### Complete Example (Reactive Form + Events)
+
+A full working component wiring up two pickers with a time range, a minute step, and the `(timeChange)` output.
+
+```typescript
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-schedule-form',
+  templateUrl: './schedule-form.component.html'
+})
+export class ScheduleFormComponent {
+  form: FormGroup = this.fb.group({
+    startTime: ['09:00 AM', Validators.required],
+    endTime:   ['05:00 PM', Validators.required]
+  });
+
+  constructor(private fb: FormBuilder) {}
+
+  onStartChange(value: string): void {
+    // Emitted on Confirm — "hh:mm AM|PM" (12h) or "HH:mm" (24h)
+    console.log('Start time selected:', value);
+  }
+
+  submit(): void {
+    if (this.form.valid) {
+      console.log('Schedule:', this.form.value);
+    }
+  }
+}
+```
+
+```html
+<form [formGroup]="form" (ngSubmit)="submit()">
+  <lib-time-picker
+    formControlName="startTime"
+    [label]="'Start Time'"
+    [placeholder]="'Select start'"
+    [required]="true"
+    [mode]="'12'"
+    [minuteStep]="15"
+    [errorMessage]="form.get('startTime')?.touched && form.get('startTime')?.invalid ? 'Start time is required' : ''"
+    (timeChange)="onStartChange($event)">
+  </lib-time-picker>
+
+  <lib-time-picker
+    formControlName="endTime"
+    [label]="'End Time'"
+    [mode]="'12'"
+    [minuteStep]="15"
+    [minTime]="'09:00'"
+    [maxTime]="'21:00'">
+  </lib-time-picker>
+
+  <button type="submit" [disabled]="form.invalid">Save</button>
+</form>
+```
+
+### Complete Example (Single `config` object)
+
+Every input can also be supplied through one `TimePickerConfig` object — handy when the config comes from JSON/i18n.
+
+```typescript
+import { Component } from '@angular/core';
+import { TimePickerConfig } from 'commons-shared-web-ui';
+
+@Component({
+  selector: 'app-reminder',
+  template: `
+    <lib-time-picker
+      [(ngModel)]="reminderTime"
+      [config]="pickerConfig"
+      (timeChange)="reminderTime = $event">
+    </lib-time-picker>
+  `
+})
+export class ReminderComponent {
+  reminderTime = '';
+
+  pickerConfig: TimePickerConfig = {
+    label: 'Daily Reminder',
+    placeholder: 'Pick a time',
+    mode: '24',
+    minuteStep: 5,        // 0/1 = every minute; > 0 adds the break
+    required: true,
+    minTime: '06:00',
+    maxTime: '23:30'
+  };
+}
+```
+
+---
+
+## 3. Configuration Properties
+
+### Inputs
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `config` | `TimePickerConfig` | `undefined` | Unified configuration object that mirrors individual inputs. |
+| `labels` | `TimePickerLabels` | `undefined` | i18n label map keys. |
+| `label` | `string` | `""` | The label text displayed above the trigger input. |
+| `placeholder` | `string` | `""` | Placeholder text shown inside the input when no time is selected. |
+| `mode` | `'12' \| '24'` | `'12'` | Hour display format. `'12'` shows a AM/PM column, while `'24'` runs from 00-23. |
+| `minuteStep` | `number` | `0` | Increment for the minutes column. `0` (or `1`) shows every minute `00–59` with no break; a value greater than `0` adds the step break (e.g. `15` → `00, 15, 30, 45`). |
+| `disabled` | `boolean` | `false` | Disables the trigger field, blocking popup opening. |
+| `required` | `boolean` | `false` | Appends a red asterisk to the field label. |
+| `errorMessage` | `string` | `""` | Validation error message text. |
+| `minTime` | `string` | `undefined` | Minimum allowed limit in 24hr `"HH:mm"` string format (e.g., `"09:30"`). |
+| `maxTime` | `string` | `undefined` | Maximum allowed limit in 24hr `"HH:mm"` string format (e.g., `"17:00"`). |
+
+### `TimePickerLabels` Properties
+When passing the `[labels]` input, you can provide any of the following fields (all optional, falling back to English defaults):
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `selectTimeTitle` | `string` | `'Select Time'` | The subtle header title printed at the top of the dialog. |
+| `hourLabel` | `string` | `'Hour'` | Header label shown above the hour column. |
+| `minuteLabel` | `string` | `'Minute'` | Header label shown above the minute column. |
+| `periodLabel` | `string` | `'AM/PM'` | Header label shown above the AM/PM column (12h mode only). |
+| `confirmLabel` | `string` | `'Confirm'` | Confirm button text. |
+| `cancelLabel` | `string` | `'Cancel'` | Cancel button text. |
+
+### Outputs
+| Output | Type | Description |
+| --- | --- | --- |
+| `timeChange` | `EventEmitter<string>` | Emitted when a time is confirmed and closed. Emits `"hh:mm AM\|PM"` for `'12'` mode, or `"HH:mm"` for `'24'` mode. |
+
+---
+
+## 4. Styling & Customization in MFEs
+
+The time-picker has two main styling options: the **Default (Black/Grey)** scheme (matching Image 2) and the **Blue Accent** scheme. These are easily set via the theme mixin or global CSS variables.
+
+### Variant Options (SCSS)
+
+#### Option 1: Default (Black/Grey Theme — Image 2)
+The default theme features black text active indicators, borderless wheels, a light-grey center highlight bar, a black Confirm button, and a light-grey Cancel button.
+
+```scss
+@use 'commons-shared-web-ui/lib/modules/time-picker/time-picker.theme' as tp;
+
+:root {
+  @include tp.time-picker-theme();
+}
+```
+
+#### Option 2: Blue Accent Variant
+The blue accent theme uses the same layout and headers, but changes highlights, preview text, active wheel items, and buttons to use the blue accent color.
+
+```scss
+@use 'commons-shared-web-ui/lib/modules/time-picker/time-picker.theme' as tp;
+
+:root {
+  @include tp.time-picker-theme((
+    accent:              #4D89EB,
+    accent-light:        rgba(77, 137, 235, 0.08),
+    accent-border:       rgba(77, 137, 235, 0.15),
+    btn-confirm-bg:      #4D89EB,
+    btn-confirm-hover:   #3b74d1,
+    btn-cancel-bg:       transparent,
+    btn-cancel-border:   #e5e7eb,
+    btn-cancel-hover:    #e5e7eb
+  ));
+}
+```
+
+You can style the trigger inputs and picker wheels using two different methods: using Scss Mixins or CSS Custom Properties.
+
+### Method A: Including Theme Mixin inside MFE Component SCSS
+
+To scope the theme changes inside a specific feature component or the main MFE root stylesheet, use the `@use` rule to import the SCSS file and `@include` the mixin:
+
+```scss
+// remote-mfe/src/app/feature/feature.component.scss
+
+@use 'commons-shared-web-ui/lib/modules/time-picker/time-picker.theme' as tp;
+
+// Apply default theme to component scope
+:host {
+  @include tp.time-picker-theme();
+}
+
+// OR customize theme properties:
+.custom-theme-picker {
+  @include tp.time-picker-theme((
+    accent: #C21E25,                  // Crimson Red brand color
+    accent-light: rgba(194, 30, 37, 0.08),
+    accent-border: rgba(194, 30, 37, 0.15),
+    btn-confirm-bg: #C21E25,
+    btn-confirm-hover: #a1141a,
+    border-radius: 8px
+  ));
+}
+```
+
+### Method B: Overriding CSS Custom Properties directly
+
+If you prefer not to include mixins, you can set the CSS variables directly in your MFE stylesheet:
+
+```css
+/* remote-mfe/src/styles.scss */
+:root {
+  --cc-timepicker-accent: #C21E25;
+  --cc-timepicker-accent-light: rgba(194, 30, 37, 0.08);
+  --cc-timepicker-accent-border: rgba(194, 30, 37, 0.15);
+  --cc-timepicker-btn-confirm-bg: #C21E25;
+  --cc-timepicker-btn-confirm-hover: #a1141a;
+  --cc-timepicker-border-radius: 8px;
+}
+```
+
+---
+
+## 5. Constraint Engine Enforcement
+
+When `minTime` and/or `maxTime` is specified:
+1. Slices of time that violate the boundaries are **automatically greyed out** (`opacity: 0.25`) and have pointer events disabled.
+2. Clicking on a disabled item will not trigger selection.
+3. Flicking or scrolling past a disabled value snaps to the **closest valid item** automatically.
+4. Changing the AM/PM column to a period where the current hour is disabled triggers an automatic visual snap transition to a valid hour.

package/ng-package.json

@@ -0,0 +1,30 @@
+{
+    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "./dist/commons-shared-web-ui",
+    "lib": {
+        "entryFile": "src/public-api.ts"
+    },
+    "assets": [
+        "src/lib/styles/global.scss",
+        "src/lib/styles/utilities.scss",
+        "src/lib/modules/pagination/pagination.theme.scss",
+        "src/lib/modules/summary-card/summary-card.theme.scss",
+        "src/lib/modules/button/button.theme.scss",
+        "src/lib/modules/alert/alert.theme.scss",
+        "src/lib/modules/confirmation-modal/confirmation-modal.theme.scss",
+        "src/lib/modules/filter-sidebar/filter-sidebar.theme.scss",
+        "src/lib/modules/filter/filter.theme.scss",
+        "src/lib/modules/nav/nav.theme.scss",
+        "src/lib/modules/configurable-form/configurable-form.theme.scss",
+        "src/lib/modules/form-components/form-components.theme.scss",
+        "src/lib/modules/form-components/**/_theme.scss",
+        "src/lib/modules/smart-table/smart-table.theme.scss",
+        "src/lib/modules/smart-form/smart-form.theme.scss",
+        "src/lib/modules/side-nav/side-nav.theme.scss",
+        "src/lib/modules/form-builder/form-builder.theme.scss",
+        "src/lib/modules/filter-table-selector/filter-table-selector.theme.scss",
+        "src/lib/modules/snackbar/snackbar.theme.scss",
+        "src/lib/modules/button-dropdown/button-dropdown.theme.scss",
+        "src/lib/modules/time-picker/time-picker.theme.scss"
+    ]
+}

package/package.json

@@ -1,35 +1,54 @@
-{
-  "name": "commons-shared-web-ui",
-  "version": "0.0.61",
-  "peerDependencies": {
-    "@angular/animations": "20.3.15",
-    "@angular/cdk": "20.2.14",
-    "@angular/common": "20.3.15",
-    "@angular/compiler": "20.3.15",
-    "@angular/core": "20.3.15",
-    "@angular/forms": "20.3.15",
-    "@angular/material": "20.2.14",
-    "@angular/platform-browser": "20.3.15",
-    "@angular/platform-browser-dynamic": "20.3.15",
-    "@angular/router": "20.3.15",
-    "rxjs": "7.8.0",
-    "zone.js": "~0.14.0 || ~0.15.0",
-    "ngx-quill": "^28.0.0",
-    "quill": "^2.0.3"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "module": "fesm2022/commons-shared-web-ui.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/commons-shared-web-ui.mjs"
-    }
-  },
-  "sideEffects": false
+{
+    "name": "commons-shared-web-ui",
+    "version": "0.0.62",
+    "peerDependencies": {
+        "@angular/animations": "20.3.15",
+        "@angular/cdk": "20.2.14",
+        "@angular/common": "20.3.15",
+        "@angular/compiler": "20.3.15",
+        "@angular/core": "20.3.15",
+        "@angular/forms": "20.3.15",
+        "@angular/material": "20.2.14",
+        "@angular/platform-browser": "20.3.15",
+        "@angular/platform-browser-dynamic": "20.3.15",
+        "@angular/router": "20.3.15",
+        "rxjs": "7.8.0",
+        "tslib": "^2.3.0",
+        "zone.js": "~0.14.0 || ~0.15.0",
+        "ngx-quill": "^28.0.0",
+        "quill": "^2.0.3"
+    },
+    "dependencies": {
+        "tslib": "^2.3.0"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "20.3.13",
+        "@angular/animations": "20.3.15",
+        "@angular/cdk": "20.2.14",
+        "@angular/cli": "20.3.13",
+        "@angular/common": "20.3.15",
+        "@angular/compiler": "20.3.15",
+        "@angular/compiler-cli": "20.3.15",
+        "@angular/core": "20.3.15",
+        "@angular/forms": "20.3.15",
+        "@angular/material": "20.2.14",
+        "@angular/platform-browser": "20.3.15",
+        "@angular/platform-browser-dynamic": "20.3.15",
+        "@angular/router": "20.3.15",
+        "@types/jasmine": "~3.10.0",
+        "@types/node": "^20.11.1",
+        "jasmine-core": "~4.0.0",
+        "karma": "^6.4.4",
+        "karma-chrome-launcher": "~3.1.0",
+        "karma-coverage": "~2.1.0",
+        "karma-jasmine": "~4.0.0",
+        "karma-jasmine-html-reporter": "~1.7.0",
+        "ng-packagr": "^20.0.0",
+        "rxjs": "7.8.0",
+        "typescript": "^5.9.3",
+        "zone.js": "~0.15.0"
+    },
+    "scripts": {
+        "build": "ng-packagr -p ng-package.json"
+    }
 }

package/src/lib/modules/alert/alert.models.ts

@@ -0,0 +1,6 @@
+export type AlertVariant = 'info' | 'warning' | 'warning-shadow' | 'success' | 'error';
+export type IconInput = boolean | string | { type: 'material' | 'fontawesome' | 'img'; value: string };
+
+export interface AlertLabels {
+    iconAltText?: string;
+}

package/src/lib/modules/alert/alert.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AlertComponent } from './components/alert/alert.component';
+
+@NgModule({
+    declarations: [
+        AlertComponent
+    ],
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        AlertComponent
+    ]
+})
+export class AlertModule { }

package/src/lib/modules/alert/components/alert/alert.component.html

@@ -0,0 +1,27 @@
+<div class="cc-alert" [ngClass]="'cc-alert-' + variant" [style.width]="width" [style.height]="height"
+    [style.border-radius]="borderRadius" [style.border-top-left-radius]="borderTopLeftRadius"
+    [style.border-top-right-radius]="borderTopRightRadius" [style.border-bottom-left-radius]="borderBottomLeftRadius"
+    [style.border-bottom-right-radius]="borderBottomRightRadius" [style.padding]="padding" [style.gap]="gap"
+    [style.background-color]="backgroundColor" [style.color]="color" [style.border-color]="borderColor"
+    [style.font-size]="fontSize" [style.font-weight]="fontWeight" [style.box-shadow]="boxShadow">
+
+    <div class="cc-alert-icon" *ngIf="icon">
+        <i *ngIf="customIcon" [ngClass]="customIcon"></i>
+        <i *ngIf="!customIcon && isDefaultIcon" [ngClass]="defaultIconClass"></i>
+        <i *ngIf="!customIcon && isStringIcon && !isImgIcon" [ngClass]="iconString"></i>
+        <img *ngIf="!customIcon && isStringIcon && isImgIcon" [src]="iconString"
+            [attr.alt]="labels?.iconAltText || 'alert icon'" />
+        <ng-container *ngIf="isObjectIcon">
+            <i *ngIf="iconObject.type === 'fontawesome'" [ngClass]="iconObject.value"></i>
+            <span *ngIf="iconObject.type === 'material'" class="material-icons">{{ iconObject.value }}</span>
+            <img *ngIf="iconObject.type === 'img'" [src]="iconObject.value"
+                [attr.alt]="labels?.iconAltText || 'alert icon'" />
+        </ng-container>
+    </div>
+
+    <div class="cc-alert-content">
+        <div class="cc-alert-title" *ngIf="title">{{ title }}</div>
+        <div class="cc-alert-message" *ngIf="message">{{ message }}</div>
+        <ng-content></ng-content>
+    </div>
+</div>

package/src/lib/modules/alert/components/alert/alert.component.scss

@@ -0,0 +1,92 @@
+.cc-alert {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    padding: var(--cc-alert-padding, 1rem 2rem);
+    border-radius: var(--cc-alert-radius, 0.75rem);
+    gap: var(--cc-alert-gap, 1rem);
+    box-sizing: border-box;
+    font-family: var(--cc-alert-font-family, inherit);
+
+    .cc-alert-icon {
+        font-size: var(--cc-alert-icon-size, 1.25rem);
+        flex-shrink: 0;
+        margin-top: var(--cc-alert-icon-margin-top, 0.125rem);
+
+        img {
+            width: var(--cc-alert-icon-size, 1.25rem);
+            height: var(--cc-alert-icon-size, 1.25rem);
+            object-fit: contain;
+        }
+    }
+
+    .cc-alert-content {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem; // Keeping small internal gap as is, or could be a var
+        flex-grow: 1;
+
+        .cc-alert-title {
+            font-weight: 700;
+            font-size: var(--cc-alert-title-size, 1rem);
+            line-height: var(--cc-alert-title-line-height, 1.5rem);
+        }
+
+        .cc-alert-message {
+            font-size: var(--cc-alert-message-size, 0.875rem);
+            line-height: 200%; // Relative unit is fine
+            opacity: 0.9;
+        }
+    }
+
+    // Variants
+    &.cc-alert-info {
+        background-color: var(--cc-alert-info-bg);
+        color: var(--cc-alert-info-color);
+
+        .cc-alert-icon {
+            color: #5F6368;
+        }
+    }
+
+    &.cc-alert-warning {
+        background-color: var(--cc-alert-warning-bg);
+        color: var(--cc-alert-warning-color);
+
+        .cc-alert-title {
+            color: var(--cc-alert-warning-title-color);
+        }
+
+        .cc-alert-icon {
+            color: var(--cc-alert-warning-title-color);
+        }
+    }
+
+    &.cc-alert-warning-shadow {
+        background-color: var(--cc-alert-warning-bg);
+        color: var(--cc-alert-warning-color);
+        box-shadow: var(--cc-alert-warning-shadow);
+
+        .cc-alert-title {
+            color: var(--cc-alert-warning-title-color);
+        }
+
+        .cc-alert-icon {
+            color: var(--cc-alert-warning-title-color);
+        }
+    }
+
+    &.cc-alert-success {
+        background-color: var(--cc-alert-success-bg);
+        color: var(--cc-alert-success-color);
+    }
+
+    &.cc-alert-error {
+        background-color: var(--cc-alert-error-bg);
+        color: var(--cc-alert-error-color);
+
+        .cc-alert-icon {
+            color: var(--cc-alert-error-color);
+        }
+    }
+}

package/src/lib/modules/alert/components/alert/alert.component.ts

@@ -0,0 +1,81 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AlertLabels, AlertVariant, IconInput } from '../../alert.models';
+
+@Component({
+    selector: 'lib-alert',
+    templateUrl: './alert.component.html',
+    styleUrls: ['./alert.component.scss'],
+    standalone: false
+})
+export class AlertComponent implements OnInit {
+    @Input() variant: AlertVariant = 'info';
+    @Input() title: string = '';
+    @Input() message: string = '';
+    @Input() icon: IconInput = true;
+    @Input() customIcon: string = ''; // New input for custom class
+    @Input() labels?: AlertLabels;
+
+    // Customization Inputs
+    @Input() width?: string;
+    @Input() height?: string;
+    @Input() borderRadius?: string;
+    @Input() padding?: string;
+    @Input() gap?: string;
+    @Input() backgroundColor?: string;
+    @Input() color?: string; // New input for custom text color
+    @Input() borderColor?: string;
+    @Input() fontSize?: string;
+    @Input() fontWeight?: string;
+    @Input() boxShadow?: string;
+
+    // Granular Border Radius Customization
+    @Input() borderTopLeftRadius?: string;
+    @Input() borderTopRightRadius?: string;
+    @Input() borderBottomLeftRadius?: string;
+    @Input() borderBottomRightRadius?: string;
+
+    constructor() { }
+
+    ngOnInit(): void {
+    }
+
+    get isDefaultIcon(): boolean {
+        return this.icon === true;
+    }
+
+    get isStringIcon(): boolean {
+        return typeof this.icon === 'string';
+    }
+
+    get isObjectIcon(): boolean {
+        return typeof this.icon === 'object' && this.icon !== null;
+    }
+
+    get iconString(): string {
+        return typeof this.icon === 'string' ? this.icon : '';
+    }
+
+    get isImgIcon(): boolean {
+        const icon = this.icon;
+        if (typeof icon === 'string') {
+            return icon.includes('/') || icon.includes('.') || icon.startsWith('http');
+        }
+        return typeof icon === 'object' && icon !== null && icon.type === 'img';
+    }
+
+    get iconObject(): { type: string; value: string } {
+        return typeof this.icon === 'object' ? this.icon as any : { type: '', value: '' };
+    }
+
+    get defaultIconClass(): string {
+        switch (this.variant) {
+            case 'success': return 'fa-solid fa-circle-check';
+            case 'warning':
+            case 'warning-shadow': return 'fa-solid fa-triangle-exclamation';
+            case 'error': return 'fa-solid fa-triangle-exclamation';
+            case 'info':
+            default: return 'fa-solid fa-circle-info';
+        }
+    }
+}

package/src/lib/modules/button/button.models.ts

@@ -0,0 +1,13 @@
+export type ButtonVariant =
+    | 'primary'
+    | 'warning'
+    | 'outline'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'danger-outline'
+    | 'text';
+
+export interface ButtonLabels {
+    iconAltText?: string;
+}

package/src/lib/modules/button/button.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonComponent } from './components/button/button.component';
+
+@NgModule({
+  declarations: [
+    ButtonComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    ButtonComponent
+  ]
+})
+export class ButtonModule { }

package/src/lib/modules/button/components/button/button.component.html

@@ -0,0 +1,22 @@
+<button [type]="type" [disabled]="disabled" class="cc-btn" [ngClass]="'cc-btn-' + variant" [style.width]="width"
+  [style.height]="height" [style.border-radius]="borderRadius" [style.font-size]="fontSize"
+  [style.font-weight]="fontWeight" [style.background-color]="backgroundColor" [style.color]="color"
+  [style.border]="border">
+  <div class="cc-btn-icon-wrapper" *ngIf="icon">
+    <!-- String Icons -->
+    <ng-container *ngIf="isStringIcon">
+      <i *ngIf="!isImgIcon" [ngClass]="iconString" class="cc-btn-icon"></i>
+      <img *ngIf="isImgIcon" [src]="iconString" [attr.alt]="labels?.iconAltText || 'button icon'"
+        class="cc-btn-icon cc-btn-img-icon" />
+    </ng-container>
+
+    <!-- Object Icons -->
+    <ng-container *ngIf="isObjectIcon">
+      <i *ngIf="iconObject.type === 'fontawesome'" [ngClass]="iconObject.value" class="cc-btn-icon"></i>
+      <span *ngIf="iconObject.type === 'material'" class="material-icons cc-btn-icon">{{ iconObject.value }}</span>
+      <img *ngIf="iconObject.type === 'img'" [src]="iconObject.value" [attr.alt]="labels?.iconAltText || 'button icon'"
+        class="cc-btn-icon cc-btn-img-icon" />
+    </ng-container>
+  </div>
+  <ng-content></ng-content>
+</button>