ecabs-components 1.1.95 → 1.1.97

package/fesm2022/ecabs-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, NgModule, ViewChild, HostBinding, EventEmitter, inject, ChangeDetectorRef, forwardRef, ViewEncapsulation, Output, Injectable, Directive, HostListener, Optional, Self, Pipe, ContentChild, Inject, Host, NgZone, Injector, DestroyRef, signal, computed } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, NgModule, ViewChild, HostBinding, EventEmitter, inject, ChangeDetectorRef, forwardRef, ViewEncapsulation, Output, Injectable, Directive, HostListener, Optional, Self, Pipe, ContentChild, Inject, Host, NgZone, Injector, DestroyRef, signal, computed, booleanAttribute } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DecimalPipe, getLocaleFirstDayOfWeek, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/material/button';
@@ -147,11 +147,11 @@ class ButtonsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonsComponent, selector: "ecabs-buttons", inputs: { disabled: "disabled", loading: "loading", size: "size", type: "type", style: "style", full: "full", color: "color" }, host: { properties: { "style.width": "this.borderWidth", "class": "this.classAttr" } }, viewQueries: [{ propertyName: "matButton", first: true, predicate: MatButton, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"style\">\n  <button\n    mat-flat-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchCase=\"'flat'\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n\n  <button\n    mat-stroked-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchCase=\"'stroked'\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n\n  <button\n    mat-raised-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchCase=\"'raised'\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n\n  <button\n    mat-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchDefault\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #content>\n  <ecabs-loading-spinner size=\"tiny\" *ngIf=\"loading\"></ecabs-loading-spinner>\n  <ng-container *ngIf=\"!loading\">\n    <ng-content select=\"mat-icon\"></ng-content>\n    <ng-content></ng-content>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ButtonsComponent, selector: "ecabs-buttons", inputs: { disabled: "disabled", loading: "loading", size: "size", type: "type", style: "style", full: "full", color: "color" }, host: { properties: { "style.width": "this.borderWidth", "class": "this.classAttr" } }, viewQueries: [{ propertyName: "matButton", first: true, predicate: MatButton, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"style\">\r\n  <button\r\n    mat-flat-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchCase=\"'flat'\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n\r\n  <button\r\n    mat-stroked-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchCase=\"'stroked'\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n\r\n  <button\r\n    mat-raised-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchCase=\"'raised'\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n\r\n  <button\r\n    mat-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchDefault\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n  <ecabs-loading-spinner size=\"tiny\" *ngIf=\"loading\"></ecabs-loading-spinner>\r\n  <ng-container *ngIf=\"!loading\">\r\n    <ng-content select=\"mat-icon\"></ng-content>\r\n    <ng-content></ng-content>\r\n  </ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: EcabsSpinnerComponent, selector: "ecabs-loading-spinner", inputs: ["size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-buttons', template: "<ng-container [ngSwitch]=\"style\">\n  <button\n    mat-flat-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchCase=\"'flat'\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n\n  <button\n    mat-stroked-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchCase=\"'stroked'\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n\n  <button\n    mat-raised-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchCase=\"'raised'\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n\n  <button\n    mat-button\n    [ngClass]=\"{\n    '!w-full': full,\n    'loading !leading-none': loading\n  }\"\n    [color]=\"color\"\n    [disabled]=\"disabled\"\n    [type]=\"type\"\n    *ngSwitchDefault\n  >\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #content>\n  <ecabs-loading-spinner size=\"tiny\" *ngIf=\"loading\"></ecabs-loading-spinner>\n  <ng-container *ngIf=\"!loading\">\n    <ng-content select=\"mat-icon\"></ng-content>\n    <ng-content></ng-content>\n  </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'ecabs-buttons', template: "<ng-container [ngSwitch]=\"style\">\r\n  <button\r\n    mat-flat-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchCase=\"'flat'\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n\r\n  <button\r\n    mat-stroked-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchCase=\"'stroked'\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n\r\n  <button\r\n    mat-raised-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchCase=\"'raised'\"\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n\r\n  <button\r\n    mat-button\r\n    [ngClass]=\"{\r\n    '!w-full': full,\r\n    'loading !leading-none': loading\r\n  }\"\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled\"\r\n    [type]=\"type\"\r\n    *ngSwitchDefault\r\n  >\r\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\r\n  </button>\r\n</ng-container>\r\n\r\n<ng-template #content>\r\n  <ecabs-loading-spinner size=\"tiny\" *ngIf=\"loading\"></ecabs-loading-spinner>\r\n  <ng-container *ngIf=\"!loading\">\r\n    <ng-content select=\"mat-icon\"></ng-content>\r\n    <ng-content></ng-content>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
         }], propDecorators: { matButton: [{
                 type: ViewChild,
                 args: [MatButton, { static: false }]
@@ -6572,11 +6572,11 @@ class EcabsExpansionPanelComponent {
         this.checked.emit(this.expanded);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsExpansionPanelComponent, selector: "ecabs-expansion-panel", inputs: { title: "title", description: "description", actionTitle: "actionTitle", index: "index", expanded: "expanded", disabled: "disabled", errorMessage: "errorMessage", showErrorMessage: "showErrorMessage", closePanel: "closePanel", showIcon: "showIcon", iconName: "iconName", showCheckbox: "showCheckbox", showStatus: "showStatus", status: "status", collapsible: "collapsible" }, outputs: { checked: "checked", opened: "opened" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: MatExpansionPanel, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-accordion multi>\n  <mat-expansion-panel #panel=\"matExpansionPanel\"\n                       [expanded]=\"collapsible ? expanded : true\"\n                       [disabled]=\"disabled\"\n                       (opened)=\"onOpened()\"\n                       [hideToggle]=\"!collapsible\">\n    <mat-expansion-panel-header *ngIf=\"collapsible && title && !actionTitle\">\n      <mat-panel-title>\n        <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n      </mat-panel-title>\n      <mat-panel-description>\n        <ng-container *ngTemplateOutlet=\"descriptionContent\"></ng-container>\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n\n    <mat-expansion-panel-header *ngIf=\"collapsible && actionTitle\">\n      <ng-container *ngTemplateOutlet=\"actionTitle\"></ng-container>\n    </mat-expansion-panel-header>\n\n    <div *ngIf=\"!collapsible && (title || actionTitle)\"\n         class=\"ecabs-expansion-panel__heading\"\n         [attr.id]=\"panel._headerId\">\n      <ng-container *ngIf=\"!actionTitle; else staticActionTitle\">\n        <span class=\"mat-content\">\n          <div class=\"mat-expansion-panel-header-title\">\n            <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n          </div>\n          <div class=\"mat-expansion-panel-header-description\">\n            <ng-container *ngTemplateOutlet=\"descriptionContent\"></ng-container>\n          </div>\n        </span>\n      </ng-container>\n\n      <ng-template #staticActionTitle>\n        <ng-container *ngTemplateOutlet=\"actionTitle\"></ng-container>\n      </ng-template>\n    </div>\n\n    <ng-content></ng-content>\n  </mat-expansion-panel>\n</mat-accordion>\n\n<ng-template #titleContent>\n  <div>\n    <div class=\"flex flex-row\">\n      <div *ngIf=\"index && !showErrorMessage\"\n           class=\"border-current border-2 rounded-full mr-3 index\">\n        {{ index }}\n      </div>\n      <div *ngIf=\"!showErrorMessage && showIcon\"\n           class=\"mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-brand-dark\">\n        <mat-icon class=\"!text-lg -mt-1 text-white\">{{ iconName }}</mat-icon>\n      </div>\n      <div *ngIf=\"showErrorMessage\" class=\"mt-1 mr-2\">\n        <mat-icon color=\"warn\">warning</mat-icon>\n      </div>\n      {{ title }}\n      <div *ngIf=\"showCheckbox\"\n           class=\"ml-2 mt-1\">\n        <ecabs-checkbox [type]=\"'toggle'\"\n                        [(ngModel)]=\"toggle\"\n                        (click)=\"toggleAction($event)\"\n                        (keydown.enter)=\"toggleAction($event)\">\n        </ecabs-checkbox>\n      </div>\n    </div>\n    <div *ngIf=\"showErrorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n  </div>\n</ng-template>\n\n<ng-template #descriptionContent>\n  {{ description }}\n  <ecabs-badge *ngIf=\"showStatus\"\n               [variant]=\"status | statusBadgeVariant\">\n    {{ statusLabel | titlecase }}\n  </ecabs-badge>\n</ng-template>\n", styles: [".index{height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:3px;font-size:16px}.error-message{font-size:.75rem!important;color:var(--color-error);margin-left:2.125rem;margin-top:-.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$4.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3$4.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EcabsCheckboxToggleComponent, selector: "ecabs-checkbox", inputs: ["type", "text", "label", "labelPosition", "indeterminate", "checked"], outputs: ["click", "changed"] }, { kind: "component", type: EcabsBadgeComponent, selector: "ecabs-badge", inputs: ["variant", "size", "bordered", "icon", "iconWeight", "materialIcon"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: EcabsStatusBadgeVariantPipe, name: "statusBadgeVariant" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsExpansionPanelComponent, selector: "ecabs-expansion-panel", inputs: { title: "title", description: "description", actionTitle: "actionTitle", index: "index", expanded: "expanded", disabled: "disabled", errorMessage: "errorMessage", showErrorMessage: "showErrorMessage", closePanel: "closePanel", showIcon: "showIcon", iconName: "iconName", showCheckbox: "showCheckbox", showStatus: "showStatus", status: "status", collapsible: "collapsible" }, outputs: { checked: "checked", opened: "opened" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: MatExpansionPanel, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-accordion multi>\r\n  <mat-expansion-panel #panel=\"matExpansionPanel\"\r\n                       [expanded]=\"collapsible ? expanded : true\"\r\n                       [disabled]=\"disabled\"\r\n                       (opened)=\"onOpened()\"\r\n                       [hideToggle]=\"!collapsible\">\r\n    <mat-expansion-panel-header *ngIf=\"collapsible && title && !actionTitle\">\r\n      <mat-panel-title>\r\n        <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\r\n      </mat-panel-title>\r\n      <mat-panel-description>\r\n        <ng-container *ngTemplateOutlet=\"descriptionContent\"></ng-container>\r\n      </mat-panel-description>\r\n    </mat-expansion-panel-header>\r\n\r\n    <mat-expansion-panel-header *ngIf=\"collapsible && actionTitle\">\r\n      <ng-container *ngTemplateOutlet=\"actionTitle\"></ng-container>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div *ngIf=\"!collapsible && (title || actionTitle)\"\r\n         class=\"ecabs-expansion-panel__heading\"\r\n         [attr.id]=\"panel._headerId\">\r\n      <ng-container *ngIf=\"!actionTitle; else staticActionTitle\">\r\n        <span class=\"mat-content\">\r\n          <div class=\"mat-expansion-panel-header-title\">\r\n            <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\r\n          </div>\r\n          <div class=\"mat-expansion-panel-header-description\">\r\n            <ng-container *ngTemplateOutlet=\"descriptionContent\"></ng-container>\r\n          </div>\r\n        </span>\r\n      </ng-container>\r\n\r\n      <ng-template #staticActionTitle>\r\n        <ng-container *ngTemplateOutlet=\"actionTitle\"></ng-container>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <ng-content></ng-content>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n\r\n<ng-template #titleContent>\r\n  <div>\r\n    <div class=\"flex flex-row\">\r\n      <div *ngIf=\"index && !showErrorMessage\"\r\n           class=\"border-current border-2 rounded-full mr-3 index\">\r\n        {{ index }}\r\n      </div>\r\n      <div *ngIf=\"!showErrorMessage && showIcon\"\r\n           class=\"mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-brand-dark\">\r\n        <mat-icon class=\"!text-lg -mt-1 text-white\">{{ iconName }}</mat-icon>\r\n      </div>\r\n      <div *ngIf=\"showErrorMessage\" class=\"mt-1 mr-2\">\r\n        <mat-icon color=\"warn\">warning</mat-icon>\r\n      </div>\r\n      {{ title }}\r\n      <div *ngIf=\"showCheckbox\"\r\n           class=\"ml-2 mt-1\">\r\n        <ecabs-checkbox [type]=\"'toggle'\"\r\n                        [(ngModel)]=\"toggle\"\r\n                        (click)=\"toggleAction($event)\"\r\n                        (keydown.enter)=\"toggleAction($event)\">\r\n        </ecabs-checkbox>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showErrorMessage\" class=\"error-message\">{{ errorMessage }}</div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #descriptionContent>\r\n  {{ description }}\r\n  <ecabs-badge *ngIf=\"showStatus\"\r\n               [variant]=\"status | statusBadgeVariant\">\r\n    {{ statusLabel | titlecase }}\r\n  </ecabs-badge>\r\n</ng-template>\r\n", styles: [".index{height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:3px;font-size:16px}.error-message{font-size:.75rem!important;color:var(--color-error);margin-left:2.125rem;margin-top:-.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$4.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3$4.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EcabsCheckboxToggleComponent, selector: "ecabs-checkbox", inputs: ["type", "text", "label", "labelPosition", "indeterminate", "checked"], outputs: ["click", "changed"] }, { kind: "component", type: EcabsBadgeComponent, selector: "ecabs-badge", inputs: ["variant", "size", "bordered", "icon", "iconWeight", "materialIcon"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: EcabsStatusBadgeVariantPipe, name: "statusBadgeVariant" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsExpansionPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-expansion-panel', template: "<mat-accordion multi>\n  <mat-expansion-panel #panel=\"matExpansionPanel\"\n                       [expanded]=\"collapsible ? expanded : true\"\n                       [disabled]=\"disabled\"\n                       (opened)=\"onOpened()\"\n                       [hideToggle]=\"!collapsible\">\n    <mat-expansion-panel-header *ngIf=\"collapsible && title && !actionTitle\">\n      <mat-panel-title>\n        <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n      </mat-panel-title>\n      <mat-panel-description>\n        <ng-container *ngTemplateOutlet=\"descriptionContent\"></ng-container>\n      </mat-panel-description>\n    </mat-expansion-panel-header>\n\n    <mat-expansion-panel-header *ngIf=\"collapsible && actionTitle\">\n      <ng-container *ngTemplateOutlet=\"actionTitle\"></ng-container>\n    </mat-expansion-panel-header>\n\n    <div *ngIf=\"!collapsible && (title || actionTitle)\"\n         class=\"ecabs-expansion-panel__heading\"\n         [attr.id]=\"panel._headerId\">\n      <ng-container *ngIf=\"!actionTitle; else staticActionTitle\">\n        <span class=\"mat-content\">\n          <div class=\"mat-expansion-panel-header-title\">\n            <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\n          </div>\n          <div class=\"mat-expansion-panel-header-description\">\n            <ng-container *ngTemplateOutlet=\"descriptionContent\"></ng-container>\n          </div>\n        </span>\n      </ng-container>\n\n      <ng-template #staticActionTitle>\n        <ng-container *ngTemplateOutlet=\"actionTitle\"></ng-container>\n      </ng-template>\n    </div>\n\n    <ng-content></ng-content>\n  </mat-expansion-panel>\n</mat-accordion>\n\n<ng-template #titleContent>\n  <div>\n    <div class=\"flex flex-row\">\n      <div *ngIf=\"index && !showErrorMessage\"\n           class=\"border-current border-2 rounded-full mr-3 index\">\n        {{ index }}\n      </div>\n      <div *ngIf=\"!showErrorMessage && showIcon\"\n           class=\"mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-brand-dark\">\n        <mat-icon class=\"!text-lg -mt-1 text-white\">{{ iconName }}</mat-icon>\n      </div>\n      <div *ngIf=\"showErrorMessage\" class=\"mt-1 mr-2\">\n        <mat-icon color=\"warn\">warning</mat-icon>\n      </div>\n      {{ title }}\n      <div *ngIf=\"showCheckbox\"\n           class=\"ml-2 mt-1\">\n        <ecabs-checkbox [type]=\"'toggle'\"\n                        [(ngModel)]=\"toggle\"\n                        (click)=\"toggleAction($event)\"\n                        (keydown.enter)=\"toggleAction($event)\">\n        </ecabs-checkbox>\n      </div>\n    </div>\n    <div *ngIf=\"showErrorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n  </div>\n</ng-template>\n\n<ng-template #descriptionContent>\n  {{ description }}\n  <ecabs-badge *ngIf=\"showStatus\"\n               [variant]=\"status | statusBadgeVariant\">\n    {{ statusLabel | titlecase }}\n  </ecabs-badge>\n</ng-template>\n", styles: [".index{height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:3px;font-size:16px}.error-message{font-size:.75rem!important;color:var(--color-error);margin-left:2.125rem;margin-top:-.75rem}\n"] }]
+            args: [{ selector: 'ecabs-expansion-panel', template: "<mat-accordion multi>\r\n  <mat-expansion-panel #panel=\"matExpansionPanel\"\r\n                       [expanded]=\"collapsible ? expanded : true\"\r\n                       [disabled]=\"disabled\"\r\n                       (opened)=\"onOpened()\"\r\n                       [hideToggle]=\"!collapsible\">\r\n    <mat-expansion-panel-header *ngIf=\"collapsible && title && !actionTitle\">\r\n      <mat-panel-title>\r\n        <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\r\n      </mat-panel-title>\r\n      <mat-panel-description>\r\n        <ng-container *ngTemplateOutlet=\"descriptionContent\"></ng-container>\r\n      </mat-panel-description>\r\n    </mat-expansion-panel-header>\r\n\r\n    <mat-expansion-panel-header *ngIf=\"collapsible && actionTitle\">\r\n      <ng-container *ngTemplateOutlet=\"actionTitle\"></ng-container>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div *ngIf=\"!collapsible && (title || actionTitle)\"\r\n         class=\"ecabs-expansion-panel__heading\"\r\n         [attr.id]=\"panel._headerId\">\r\n      <ng-container *ngIf=\"!actionTitle; else staticActionTitle\">\r\n        <span class=\"mat-content\">\r\n          <div class=\"mat-expansion-panel-header-title\">\r\n            <ng-container *ngTemplateOutlet=\"titleContent\"></ng-container>\r\n          </div>\r\n          <div class=\"mat-expansion-panel-header-description\">\r\n            <ng-container *ngTemplateOutlet=\"descriptionContent\"></ng-container>\r\n          </div>\r\n        </span>\r\n      </ng-container>\r\n\r\n      <ng-template #staticActionTitle>\r\n        <ng-container *ngTemplateOutlet=\"actionTitle\"></ng-container>\r\n      </ng-template>\r\n    </div>\r\n\r\n    <ng-content></ng-content>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n\r\n<ng-template #titleContent>\r\n  <div>\r\n    <div class=\"flex flex-row\">\r\n      <div *ngIf=\"index && !showErrorMessage\"\r\n           class=\"border-current border-2 rounded-full mr-3 index\">\r\n        {{ index }}\r\n      </div>\r\n      <div *ngIf=\"!showErrorMessage && showIcon\"\r\n           class=\"mr-3 flex h-7 w-7 items-center justify-center rounded-full bg-brand-dark\">\r\n        <mat-icon class=\"!text-lg -mt-1 text-white\">{{ iconName }}</mat-icon>\r\n      </div>\r\n      <div *ngIf=\"showErrorMessage\" class=\"mt-1 mr-2\">\r\n        <mat-icon color=\"warn\">warning</mat-icon>\r\n      </div>\r\n      {{ title }}\r\n      <div *ngIf=\"showCheckbox\"\r\n           class=\"ml-2 mt-1\">\r\n        <ecabs-checkbox [type]=\"'toggle'\"\r\n                        [(ngModel)]=\"toggle\"\r\n                        (click)=\"toggleAction($event)\"\r\n                        (keydown.enter)=\"toggleAction($event)\">\r\n        </ecabs-checkbox>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"showErrorMessage\" class=\"error-message\">{{ errorMessage }}</div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #descriptionContent>\r\n  {{ description }}\r\n  <ecabs-badge *ngIf=\"showStatus\"\r\n               [variant]=\"status | statusBadgeVariant\">\r\n    {{ statusLabel | titlecase }}\r\n  </ecabs-badge>\r\n</ng-template>\r\n", styles: [".index{height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:3px;font-size:16px}.error-message{font-size:.75rem!important;color:var(--color-error);margin-left:2.125rem;margin-top:-.75rem}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], description: [{
@@ -7104,11 +7104,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 class EcabsBreadcrumbComponent {
     breadcrumb;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsBreadcrumbComponent, selector: "ecabs-breadcrumb", inputs: { breadcrumb: "breadcrumb" }, ngImport: i0, template: "<ul class=\"flex text-gray-500 text-sm\">\n  <li\n    *ngFor=\"let item of breadcrumb; let counter = index\"\n    [routerLink]=\"item.url\"\n    [ngClass]=\"{ 'cursor-pointer': item.url }\"\n    class=\"flex\"\n  >\n    <mat-icon class=\"!text-sm text-center text-gray-400\" *ngIf=\"counter !== 0\">keyboard_arrow_right</mat-icon>\n    <span>{{ item.title }}</span>\n  </li>\n</ul>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsBreadcrumbComponent, selector: "ecabs-breadcrumb", inputs: { breadcrumb: "breadcrumb" }, ngImport: i0, template: "<ul class=\"flex text-gray-500 text-sm\">\r\n  <li\r\n    *ngFor=\"let item of breadcrumb; let counter = index\"\r\n    [routerLink]=\"item.url\"\r\n    [ngClass]=\"{ 'cursor-pointer': item.url }\"\r\n    class=\"flex\"\r\n  >\r\n    <mat-icon class=\"!text-sm text-center text-gray-400\" *ngIf=\"counter !== 0\">keyboard_arrow_right</mat-icon>\r\n    <span>{{ item.title }}</span>\r\n  </li>\r\n</ul>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"flex text-gray-500 text-sm\">\n  <li\n    *ngFor=\"let item of breadcrumb; let counter = index\"\n    [routerLink]=\"item.url\"\n    [ngClass]=\"{ 'cursor-pointer': item.url }\"\n    class=\"flex\"\n  >\n    <mat-icon class=\"!text-sm text-center text-gray-400\" *ngIf=\"counter !== 0\">keyboard_arrow_right</mat-icon>\n    <span>{{ item.title }}</span>\n  </li>\n</ul>\n" }]
+            args: [{ selector: 'ecabs-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"flex text-gray-500 text-sm\">\r\n  <li\r\n    *ngFor=\"let item of breadcrumb; let counter = index\"\r\n    [routerLink]=\"item.url\"\r\n    [ngClass]=\"{ 'cursor-pointer': item.url }\"\r\n    class=\"flex\"\r\n  >\r\n    <mat-icon class=\"!text-sm text-center text-gray-400\" *ngIf=\"counter !== 0\">keyboard_arrow_right</mat-icon>\r\n    <span>{{ item.title }}</span>\r\n  </li>\r\n</ul>\r\n" }]
         }], propDecorators: { breadcrumb: [{
                 type: Input
             }] } });
@@ -7811,11 +7811,11 @@ class EcabsActiveStatusFilterComponent {
         return this.initialStatus === status;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsActiveStatusFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsActiveStatusFilterComponent, selector: "ecabs-active-status-filter", inputs: { statuses: "statuses", initialStatus: "initialStatus" }, outputs: { statusChange: "statusChange" }, ngImport: i0, template: "<div class=\"mb-5 mt-10\">\n  <mat-chip-listbox>\n    <mat-chip-option *ngFor=\"let status of statuses\"\n                     class=\"!rounded-full\"\n                     [ngClass]=\"checkSelectableStatus(status?.value) ? 'chip--selected' : 'chip--not-selected'\"\n                     [selected]=\"checkSelectableStatus(status?.value)\"\n                     (keydown.enter)=\"onFilter(status?.value)\"\n                     (click)=\"onFilter(status?.value)\">\n      {{ status.text }}\n    </mat-chip-option>\n  </mat-chip-listbox>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i2$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsActiveStatusFilterComponent, selector: "ecabs-active-status-filter", inputs: { statuses: "statuses", initialStatus: "initialStatus" }, outputs: { statusChange: "statusChange" }, ngImport: i0, template: "<div class=\"mb-5 mt-10\">\r\n  <mat-chip-listbox>\r\n    <mat-chip-option *ngFor=\"let status of statuses\"\r\n                     class=\"!rounded-full\"\r\n                     [ngClass]=\"checkSelectableStatus(status?.value) ? 'chip--selected' : 'chip--not-selected'\"\r\n                     [selected]=\"checkSelectableStatus(status?.value)\"\r\n                     (keydown.enter)=\"onFilter(status?.value)\"\r\n                     (click)=\"onFilter(status?.value)\">\r\n      {{ status.text }}\r\n    </mat-chip-option>\r\n  </mat-chip-listbox>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i2$3.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "selectable", "selected"], outputs: ["selectionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsActiveStatusFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-active-status-filter', template: "<div class=\"mb-5 mt-10\">\n  <mat-chip-listbox>\n    <mat-chip-option *ngFor=\"let status of statuses\"\n                     class=\"!rounded-full\"\n                     [ngClass]=\"checkSelectableStatus(status?.value) ? 'chip--selected' : 'chip--not-selected'\"\n                     [selected]=\"checkSelectableStatus(status?.value)\"\n                     (keydown.enter)=\"onFilter(status?.value)\"\n                     (click)=\"onFilter(status?.value)\">\n      {{ status.text }}\n    </mat-chip-option>\n  </mat-chip-listbox>\n</div>\n" }]
+            args: [{ selector: 'ecabs-active-status-filter', template: "<div class=\"mb-5 mt-10\">\r\n  <mat-chip-listbox>\r\n    <mat-chip-option *ngFor=\"let status of statuses\"\r\n                     class=\"!rounded-full\"\r\n                     [ngClass]=\"checkSelectableStatus(status?.value) ? 'chip--selected' : 'chip--not-selected'\"\r\n                     [selected]=\"checkSelectableStatus(status?.value)\"\r\n                     (keydown.enter)=\"onFilter(status?.value)\"\r\n                     (click)=\"onFilter(status?.value)\">\r\n      {{ status.text }}\r\n    </mat-chip-option>\r\n  </mat-chip-listbox>\r\n</div>\r\n" }]
         }], propDecorators: { statuses: [{
                 type: Input
             }], initialStatus: [{
@@ -10253,18 +10253,22 @@ class EcabsSegmentComponent {
     title;
     subtitle;
     showTitleDivider = true;
+    compact = false;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSegmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EcabsSegmentComponent, isStandalone: true, selector: "ecabs-segment", inputs: { title: "title", subtitle: "subtitle", showTitleDivider: "showTitleDivider" }, ngImport: i0, template: "<mat-card>\n  <mat-card-header>\n    <mat-card-title>{{ title }}</mat-card-title>\n    <mat-card-subtitle *ngIf=\"subtitle\">\n      {{ subtitle }}\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <mat-divider *ngIf=\"showTitleDivider\"\n               class=\"card__title--divider\"></mat-divider>\n\n  <ng-content></ng-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i2$5.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$5.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.12", type: EcabsSegmentComponent, isStandalone: true, selector: "ecabs-segment", inputs: { title: "title", subtitle: "subtitle", showTitleDivider: "showTitleDivider", compact: ["compact", "compact", booleanAttribute] }, ngImport: i0, template: "<mat-card [class.card--compact]=\"compact\">\r\n  <mat-card-header class=\"card__header--with-slots flex-wrap items-center gap-2\"\r\n                   [class.card__header--title-only]=\"!subtitle\">\r\n    <mat-card-title>{{ title }}</mat-card-title>\r\n    <mat-card-subtitle *ngIf=\"subtitle\">\r\n      {{ subtitle }}\r\n    </mat-card-subtitle>\r\n\r\n    <div class=\"flex grow justify-between items-center min-w-0 max-w-full empty:hidden *:min-w-0\">\r\n      <ng-content select=\"[ecabsSegmentHeaderEnd]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"flex items-center min-w-0 basis-full empty:hidden *:min-w-0\">\r\n      <ng-content select=\"[ecabsSegmentHeaderBottom]\"></ng-content>\r\n    </div>\r\n  </mat-card-header>\r\n\r\n  <mat-divider *ngIf=\"showTitleDivider\"\r\n               class=\"card__title--divider\"></mat-divider>\r\n\r\n  <ng-content></ng-content>\r\n</mat-card>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$5.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i2$5.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$5.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$5.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EcabsSegmentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecabs-segment', standalone: true, imports: [CommonModule, MatCardModule, MatListModule], template: "<mat-card>\n  <mat-card-header>\n    <mat-card-title>{{ title }}</mat-card-title>\n    <mat-card-subtitle *ngIf=\"subtitle\">\n      {{ subtitle }}\n    </mat-card-subtitle>\n  </mat-card-header>\n\n  <mat-divider *ngIf=\"showTitleDivider\"\n               class=\"card__title--divider\"></mat-divider>\n\n  <ng-content></ng-content>\n</mat-card>\n" }]
+            args: [{ selector: 'ecabs-segment', standalone: true, imports: [CommonModule, MatCardModule, MatListModule], template: "<mat-card [class.card--compact]=\"compact\">\r\n  <mat-card-header class=\"card__header--with-slots flex-wrap items-center gap-2\"\r\n                   [class.card__header--title-only]=\"!subtitle\">\r\n    <mat-card-title>{{ title }}</mat-card-title>\r\n    <mat-card-subtitle *ngIf=\"subtitle\">\r\n      {{ subtitle }}\r\n    </mat-card-subtitle>\r\n\r\n    <div class=\"flex grow justify-between items-center min-w-0 max-w-full empty:hidden *:min-w-0\">\r\n      <ng-content select=\"[ecabsSegmentHeaderEnd]\"></ng-content>\r\n    </div>\r\n\r\n    <div class=\"flex items-center min-w-0 basis-full empty:hidden *:min-w-0\">\r\n      <ng-content select=\"[ecabsSegmentHeaderBottom]\"></ng-content>\r\n    </div>\r\n  </mat-card-header>\r\n\r\n  <mat-divider *ngIf=\"showTitleDivider\"\r\n               class=\"card__title--divider\"></mat-divider>\r\n\r\n  <ng-content></ng-content>\r\n</mat-card>\r\n" }]
         }], propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
                 type: Input
             }], showTitleDivider: [{
                 type: Input
+            }], compact: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 
 /**