@impartner/design-components 1.0.1 → 1.0.2

package/fesm2020/impartner-design-components.mjs

@@ -7248,25 +7248,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * To use, import `BreadcrumbModule` or another module that imports and exports that module from `@impartner/design-components`.
  */
 class BreadcrumbComponent {
-    constructor() {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
         /**
          * Sets the `aria-label` attribute for the Breadcrumb's `nav` element for accessibility.
          */
         this.label = '';
         this.impdcBreadcrumb = true;
     }
+    ngAfterViewInit() {
+        this._changeDetectorRef.detectChanges();
+    }
 }
-BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BreadcrumbComponent, selector: "impdc-breadcrumb, div[impdc-breadcrumb]", inputs: { label: "label" }, host: { properties: { "class.impdc-breadcrumb": "this.impdcBreadcrumb" } }, queries: [{ propertyName: "_breadcrumbs", predicate: BreadcrumbItemComponent }], ngImport: i0, template: "<nav [attr.aria-label]=\"label || null\" class=\"impdc-breadcrumb\">\n  <ol>\n    <li *ngFor=\"let breadcrumb of _breadcrumbs; last as isLast\">\n      <span class=\"impdc-crumb\" [attr.aria-current]=\"isLast ? 'page' : null\">\n        <ng-template\n          [ngTemplateOutlet]=\"breadcrumb.contentTemplate\"></ng-template>\n      </span>\n    </li>\n  </ol>\n</nav>\n", styles: [".impdc-breadcrumb ol{margin:0;padding-left:0;list-style:none}.impdc-breadcrumb li{display:inline;color:var(--impd-color-gray-500, #6b7280);font-weight:500;font-size:var(--impd-font-size-sm, 14px)}.impdc-breadcrumb li:hover{cursor:default;color:var(--impd-color-gray-700, #374151)}.impdc-breadcrumb li .impdc-crumb{--impartner-hex-link-color: var(--impd-color-gray-500, #6b7280);--impartner-hex-link-hover-color: var(--impd-color-gray-700, #374151);padding-left:.8rem;padding-right:.8rem}.impdc-breadcrumb li:first-child .impdc-crumb{padding-left:0}.impdc-breadcrumb li:last-child .impdc-crumb{padding-right:0}.impdc-breadcrumb li+li:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--impd-color-gray-400, #6b7280);content:\"\\f054\";display:inline-block;font-family:\"Font Awesome 6 Pro\",\"Font Awesome 6 Free\",\"Font Awesome 5 Pro\",\"Font Awesome 5 Free\";font-size:10px;font-style:normal;font-feature-settings:normal;font-variant:normal;font-weight:900;line-height:1;text-align:center;text-rendering:auto;width:2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: BreadcrumbComponent, selector: "impdc-breadcrumb, div[impdc-breadcrumb]", inputs: { label: "label" }, host: { properties: { "class.impdc-breadcrumb": "this.impdcBreadcrumb" } }, queries: [{ propertyName: "breadcrumbItems", predicate: BreadcrumbItemComponent }], ngImport: i0, template: "<nav class=\"impdc-breadcrumb\" [attr.aria-label]=\"label || 'breadcrumb'\">\n  <ol>\n    <li\n      *ngFor=\"let breadcrumbItem of breadcrumbItems; last as isLast\"\n      [attr.aria-current]=\"isLast ? 'page' : undefined\">\n      <ng-container\n        [ngTemplateOutlet]=\"breadcrumbItem.contentTemplate\"></ng-container>\n    </li>\n  </ol>\n</nav>\n", styles: [".impdc-breadcrumb{--impartner-hex-link-color: var(--impd-color-gray-500, #6b7280);--impartner-hex-link-hover-color: var(--impd-color-gray-700, #374151);font-size:var(--impd-font-size-sm, 1.4rem);line-height:2rem;color:var(--impd-color-gray-500, #6b7280);font-weight:500}.impdc-breadcrumb a:not([href]):not([class]){color:var(--impartner-hex-link-color)}.impdc-breadcrumb a:not([href]):not([class]):hover{color:var(--impartner-hex-link-hover-color)}.impdc-breadcrumb ol,.impdc-breadcrumb ol li.impdc-crumb{display:inline-flex;align-items:center;vertical-align:middle}.impdc-breadcrumb ol{margin:0;padding-left:0;list-style:none}.impdc-breadcrumb li+li:before{margin:0 .8rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;width:2rem;font-family:\"Font Awesome 6 Pro\",\"Font Awesome 6 Free\",\"Font Awesome 5 Pro\",\"Font Awesome 5 Free\";font-size:var(--impd-font-size-sm, 1.4rem);line-height:2rem;color:var(--impd-color-gray-400, #6b7280);font-weight:900;content:\"\\f054\";text-rendering:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'impdc-breadcrumb, div[impdc-breadcrumb]', encapsulation: ViewEncapsulation.None, template: "<nav [attr.aria-label]=\"label || null\" class=\"impdc-breadcrumb\">\n  <ol>\n    <li *ngFor=\"let breadcrumb of _breadcrumbs; last as isLast\">\n      <span class=\"impdc-crumb\" [attr.aria-current]=\"isLast ? 'page' : null\">\n        <ng-template\n          [ngTemplateOutlet]=\"breadcrumb.contentTemplate\"></ng-template>\n      </span>\n    </li>\n  </ol>\n</nav>\n", styles: [".impdc-breadcrumb ol{margin:0;padding-left:0;list-style:none}.impdc-breadcrumb li{display:inline;color:var(--impd-color-gray-500, #6b7280);font-weight:500;font-size:var(--impd-font-size-sm, 14px)}.impdc-breadcrumb li:hover{cursor:default;color:var(--impd-color-gray-700, #374151)}.impdc-breadcrumb li .impdc-crumb{--impartner-hex-link-color: var(--impd-color-gray-500, #6b7280);--impartner-hex-link-hover-color: var(--impd-color-gray-700, #374151);padding-left:.8rem;padding-right:.8rem}.impdc-breadcrumb li:first-child .impdc-crumb{padding-left:0}.impdc-breadcrumb li:last-child .impdc-crumb{padding-right:0}.impdc-breadcrumb li+li:before{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:var(--impd-color-gray-400, #6b7280);content:\"\\f054\";display:inline-block;font-family:\"Font Awesome 6 Pro\",\"Font Awesome 6 Free\",\"Font Awesome 5 Pro\",\"Font Awesome 5 Free\";font-size:10px;font-style:normal;font-feature-settings:normal;font-variant:normal;font-weight:900;line-height:1;text-align:center;text-rendering:auto;width:2rem}\n"] }]
-        }], propDecorators: { label: [{
+            args: [{ selector: 'impdc-breadcrumb, div[impdc-breadcrumb]', encapsulation: ViewEncapsulation.None, template: "<nav class=\"impdc-breadcrumb\" [attr.aria-label]=\"label || 'breadcrumb'\">\n  <ol>\n    <li\n      *ngFor=\"let breadcrumbItem of breadcrumbItems; last as isLast\"\n      [attr.aria-current]=\"isLast ? 'page' : undefined\">\n      <ng-container\n        [ngTemplateOutlet]=\"breadcrumbItem.contentTemplate\"></ng-container>\n    </li>\n  </ol>\n</nav>\n", styles: [".impdc-breadcrumb{--impartner-hex-link-color: var(--impd-color-gray-500, #6b7280);--impartner-hex-link-hover-color: var(--impd-color-gray-700, #374151);font-size:var(--impd-font-size-sm, 1.4rem);line-height:2rem;color:var(--impd-color-gray-500, #6b7280);font-weight:500}.impdc-breadcrumb a:not([href]):not([class]){color:var(--impartner-hex-link-color)}.impdc-breadcrumb a:not([href]):not([class]):hover{color:var(--impartner-hex-link-hover-color)}.impdc-breadcrumb ol,.impdc-breadcrumb ol li.impdc-crumb{display:inline-flex;align-items:center;vertical-align:middle}.impdc-breadcrumb ol{margin:0;padding-left:0;list-style:none}.impdc-breadcrumb li+li:before{margin:0 .8rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;width:2rem;font-family:\"Font Awesome 6 Pro\",\"Font Awesome 6 Free\",\"Font Awesome 5 Pro\",\"Font Awesome 5 Free\";font-size:var(--impd-font-size-sm, 1.4rem);line-height:2rem;color:var(--impd-color-gray-400, #6b7280);font-weight:900;content:\"\\f054\";text-rendering:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { label: [{
                 type: Input
             }], impdcBreadcrumb: [{
                 type: HostBinding,
                 args: ['class.impdc-breadcrumb']
-            }], _breadcrumbs: [{
+            }], breadcrumbItems: [{
                 type: ContentChildren,
                 args: [BreadcrumbItemComponent]
             }] } });
@@ -7274,14 +7278,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 class BreadcrumbModule {
 }
 BreadcrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbModule, declarations: [BreadcrumbComponent, BreadcrumbItemComponent], imports: [CommonModule], exports: [BreadcrumbComponent, BreadcrumbItemComponent] });
+BreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbModule, declarations: [BreadcrumbItemComponent, BreadcrumbComponent], imports: [CommonModule], exports: [BreadcrumbItemComponent, BreadcrumbComponent] });
 BreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbModule, imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BreadcrumbModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [BreadcrumbComponent, BreadcrumbItemComponent],
+                    declarations: [BreadcrumbItemComponent, BreadcrumbComponent],
                     imports: [CommonModule],
-                    exports: [BreadcrumbComponent, BreadcrumbItemComponent]
+                    exports: [BreadcrumbItemComponent, BreadcrumbComponent]
                 }]
         }] });
 
@@ -8244,6 +8248,145 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
+/**
+ * The `CardHeadingComponent` (`<impdc-data-card` or `<any impdc-data-card`) is to display data snapshots with support for
+ * previous values and differences.
+ * To use, import `DataCardModule` or another module that imports and exports that module from `@impartner/design-components`.
+ */
+class DataCardComponent {
+    constructor() {
+        /**
+         * The subject text for the Data Card.
+         */
+        this.title = '';
+        /**
+         * The current data value. Any number/currency format is supported.
+         */
+        this.current = '0';
+        /**
+         * The previous data value. Any number/currency format is supported.
+         */
+        this.previous = '';
+        /**
+         * The difference between the current and previous values. A numerical or percentage value is preferred,
+         * but any number/currency format is supported.
+         */
+        this.difference = '';
+        /**
+         * Text for the link at the bottom of the Data Card. If provided, enables the `linkClicked` event to be emitted.
+         */
+        this.linkText = '';
+        /**
+         * When stacking multiple Data Card elements together, it's common to combine their borders.
+         */
+        this.sharedBorders = true;
+        /**
+         * Makes the title stand out more than it does by default.
+         */
+        // @Input()
+        this.titleAttention = false;
+        /**
+         * Determines if the difference value will be wrapped in a `rounded-pill`.
+         */
+        this.differencePill = false;
+        /**
+         * Changes the text color for the current value.
+         */
+        this.currentColor = '';
+        /**
+         * Changes the color of the icon.
+         */
+        this.iconColor = '';
+        /**
+         * Changes the color of the icon's background.
+         */
+        this.iconBgColor = '';
+        /**
+         * Emitted when the link text is clicked.
+         */
+        this.linkClicked = new EventEmitter();
+        /**
+         * Emitted when the corner content is clicked.
+         */
+        this.cornerClicked = new EventEmitter();
+    }
+    get classDataCard() {
+        return 'card impdc-data-card';
+    }
+    get classDataCardSharedBorders() {
+        return this.sharedBorders;
+    }
+    get differenceNumber() {
+        return Number(this.difference.replace(/[^0-9\.-]+/g, ''));
+    }
+    get differenceNegative() {
+        return this.differenceNumber < 0;
+    }
+    get differencePositive() {
+        return this.differenceNumber > 0;
+    }
+    get differenceDisplay() {
+        return this.difference.replace('-', '');
+    }
+    handleLinkClick(event) {
+        this.linkClicked.emit(event);
+    }
+    handleCornerClick(event) {
+        this.cornerClicked.emit(event);
+    }
+}
+DataCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DataCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DataCardComponent, selector: "impdc-data-card, [impdc-data-card]", inputs: { title: "title", current: "current", previous: "previous", difference: "difference", linkText: "linkText", sharedBorders: "sharedBorders", differencePill: "differencePill", currentColor: "currentColor", iconColor: "iconColor", iconBgColor: "iconBgColor" }, outputs: { linkClicked: "linkClicked", cornerClicked: "cornerClicked" }, host: { properties: { "class": "this.classDataCard", "class.impdc-data-card-shared-borders": "this.classDataCardSharedBorders" } }, ngImport: i0, template: "<div class=\"card-body impdc-data-card-body\">\n  <div\n    #iconContentEl\n    class=\"impdc-data-card-icon\"\n    [style.color]=\"iconColor ? iconColor : undefined\"\n    [style.background-color]=\"iconBgColor ? iconBgColor : undefined\"\n    [class.hide]=\"!iconContentEl.children.length\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <div class=\"impdc-data-card-container\">\n    <div class=\"impdc-data-card-title\" [class.title-attention]=\"titleAttention\">\n      {{ title }}\n    </div>\n    <div class=\"impdc-data-card-data\">\n      <ng-content></ng-content>\n      <span\n        *ngIf=\"current\"\n        class=\"data-current\"\n        [class.data-current-enlarged]=\"\n          !iconContentEl.children.length && !previous && !difference\n        \"\n        [style.color]=\"currentColor ? currentColor : undefined\"\n        [innerText]=\"current\"></span>\n      <span class=\"data-other\">\n        <span\n          *ngIf=\"previous\"\n          class=\"data-previous\"\n          [innerText]=\"previous\"></span>\n        <span\n          *ngIf=\"difference\"\n          class=\"data-difference\"\n          [class.difference-negative]=\"differenceNegative\"\n          [class.difference-positive]=\"differencePositive\"\n          [class.badge]=\"differencePill\"\n          [class.rounded-pill]=\"differencePill\">\n          <span *ngIf=\"differenceNegative\" class=\"fas fa-arrow-down\"></span>\n          <span *ngIf=\"differencePositive\" class=\"fas fa-arrow-up\"></span>\n          <span class=\"difference-display\">{{ differenceDisplay }}</span>\n        </span>\n      </span>\n    </div>\n  </div>\n  <div\n    #cornerContentEl\n    class=\"impdc-data-card-corner\"\n    [class.hide]=\"!cornerContentEl.children.length\"\n    (click)=\"handleCornerClick($event); $event.stopPropagation()\">\n    <ng-content select=\"[corner]\"></ng-content>\n  </div>\n</div>\n<div\n  class=\"card-footer impdc-data-card-footer\"\n  [class.hide]=\"!linkText && !footerContentEl.children.length\">\n  <div #footerContentEl [class.hide]=\"!footerContentEl.children.length\">\n    <ng-content select=\"[footer]\"></ng-content>\n  </div>\n  <a\n    *ngIf=\"linkText\"\n    class=\"footer-link\"\n    (click)=\"handleLinkClick($event); $event.stopPropagation()\"\n    >{{ linkText }}</a\n  >\n</div>\n", styles: [".hide{display:none}.impdc-data-card{overflow-x:hidden;border:0;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;border-radius:8px}.impdc-data-card.impdc-data-card-shared-borders:first-child:not(:last-child){border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.impdc-data-card.impdc-data-card-shared-borders:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.impdc-data-card.impdc-data-card-shared-borders:not(:first-child):not(:last-child){border-right:0;border-radius:0}.impdc-data-card-body{position:relative;display:flex;align-items:center;gap:20px;padding:24px}.impdc-data-card-icon{display:flex;align-items:center;justify-content:center;padding:12px;background-color:#01606d;color:#fff;border-radius:6px}.impdc-data-card-icon .fa,.impdc-data-card-icon .fa-brands,.impdc-data-card-icon .fa-duotone,.impdc-data-card-icon .fa-light,.impdc-data-card-icon .fa-regular,.impdc-data-card-icon .fa-solid,.impdc-data-card-icon .fa-thin,.impdc-data-card-icon .fab,.impdc-data-card-icon .fad,.impdc-data-card-icon .fal,.impdc-data-card-icon .far,.impdc-data-card-icon .fas,.impdc-data-card-icon .fat,.impdc-data-card-icon svg{display:flex;align-items:center;justify-content:center;height:24px;width:24px;font-size:18px;line-height:24px}.impdc-data-card-icon.hide{display:none}.impdc-data-card-container{display:flex;flex-direction:column;min-width:50px}.impdc-data-card-title{color:#6b7280;font-size:14px;line-height:20px;font-weight:500;min-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.impdc-data-card-title.title-attention{color:#161e2e;font-size:16px;line-height:24px;font-weight:400}.impdc-data-card-data{display:flex;flex-wrap:wrap;align-items:end;min-width:0}.impdc-data-card-data .data-current{color:#161e2e;font-size:24px;line-height:32px;font-weight:600;min-width:75px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}.impdc-data-card-data .data-current.data-current-enlarged{font-size:30px;line-height:36px}.impdc-data-card-data .data-other{display:inline-flex;justify-content:space-between;align-items:end;min-width:50px}.impdc-data-card-data .data-previous{min-width:0;color:#6b7280;font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:13px}.impdc-data-card-data .data-difference{display:inline-flex;align-items:center;gap:5px;color:#6b7280;font-size:14px;line-height:20px;font-weight:500}.impdc-data-card-data .data-difference.difference-negative{color:#e02424}.impdc-data-card-data .data-difference.difference-negative.badge{background-color:#fde8e8}.impdc-data-card-data .data-difference.difference-positive{color:#057a55}.impdc-data-card-data .data-difference.difference-positive.badge{background-color:#def7ec}.impdc-data-card-data .data-difference.rounded-pill{padding:4px 10px;border-radius:12px!important}.impdc-data-card-corner{position:absolute;top:0;right:0;margin:1rem;line-height:14px;color:#374151}.impdc-data-card-corner .fa,.impdc-data-card-corner .fa-brands,.impdc-data-card-corner .fa-duotone,.impdc-data-card-corner .fa-light,.impdc-data-card-corner .fa-regular,.impdc-data-card-corner .fa-solid,.impdc-data-card-corner .fa-thin,.impdc-data-card-corner .fab,.impdc-data-card-corner .fad,.impdc-data-card-corner .fal,.impdc-data-card-corner .far,.impdc-data-card-corner .fas,.impdc-data-card-corner .fat,.impdc-data-card-corner svg{height:14px;line-height:14px}.impdc-data-card-corner.hide{display:none}.impdc-data-card-footer{display:flex;align-items:center;padding:16px;background-color:#f9fafb}.impdc-data-card-footer.card-footer{border-top:0}.impdc-data-card-footer.hide{display:none}.impdc-data-card-footer .footer-link{color:#01606d;font-weight:500;font-size:14px;line-height:20px}.impdc-data-card-footer .footer-link:hover{color:#19a8c1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'impdc-data-card, [impdc-data-card]', encapsulation: ViewEncapsulation.None, template: "<div class=\"card-body impdc-data-card-body\">\n  <div\n    #iconContentEl\n    class=\"impdc-data-card-icon\"\n    [style.color]=\"iconColor ? iconColor : undefined\"\n    [style.background-color]=\"iconBgColor ? iconBgColor : undefined\"\n    [class.hide]=\"!iconContentEl.children.length\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n  <div class=\"impdc-data-card-container\">\n    <div class=\"impdc-data-card-title\" [class.title-attention]=\"titleAttention\">\n      {{ title }}\n    </div>\n    <div class=\"impdc-data-card-data\">\n      <ng-content></ng-content>\n      <span\n        *ngIf=\"current\"\n        class=\"data-current\"\n        [class.data-current-enlarged]=\"\n          !iconContentEl.children.length && !previous && !difference\n        \"\n        [style.color]=\"currentColor ? currentColor : undefined\"\n        [innerText]=\"current\"></span>\n      <span class=\"data-other\">\n        <span\n          *ngIf=\"previous\"\n          class=\"data-previous\"\n          [innerText]=\"previous\"></span>\n        <span\n          *ngIf=\"difference\"\n          class=\"data-difference\"\n          [class.difference-negative]=\"differenceNegative\"\n          [class.difference-positive]=\"differencePositive\"\n          [class.badge]=\"differencePill\"\n          [class.rounded-pill]=\"differencePill\">\n          <span *ngIf=\"differenceNegative\" class=\"fas fa-arrow-down\"></span>\n          <span *ngIf=\"differencePositive\" class=\"fas fa-arrow-up\"></span>\n          <span class=\"difference-display\">{{ differenceDisplay }}</span>\n        </span>\n      </span>\n    </div>\n  </div>\n  <div\n    #cornerContentEl\n    class=\"impdc-data-card-corner\"\n    [class.hide]=\"!cornerContentEl.children.length\"\n    (click)=\"handleCornerClick($event); $event.stopPropagation()\">\n    <ng-content select=\"[corner]\"></ng-content>\n  </div>\n</div>\n<div\n  class=\"card-footer impdc-data-card-footer\"\n  [class.hide]=\"!linkText && !footerContentEl.children.length\">\n  <div #footerContentEl [class.hide]=\"!footerContentEl.children.length\">\n    <ng-content select=\"[footer]\"></ng-content>\n  </div>\n  <a\n    *ngIf=\"linkText\"\n    class=\"footer-link\"\n    (click)=\"handleLinkClick($event); $event.stopPropagation()\"\n    >{{ linkText }}</a\n  >\n</div>\n", styles: [".hide{display:none}.impdc-data-card{overflow-x:hidden;border:0;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;border-radius:8px}.impdc-data-card.impdc-data-card-shared-borders:first-child:not(:last-child){border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.impdc-data-card.impdc-data-card-shared-borders:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.impdc-data-card.impdc-data-card-shared-borders:not(:first-child):not(:last-child){border-right:0;border-radius:0}.impdc-data-card-body{position:relative;display:flex;align-items:center;gap:20px;padding:24px}.impdc-data-card-icon{display:flex;align-items:center;justify-content:center;padding:12px;background-color:#01606d;color:#fff;border-radius:6px}.impdc-data-card-icon .fa,.impdc-data-card-icon .fa-brands,.impdc-data-card-icon .fa-duotone,.impdc-data-card-icon .fa-light,.impdc-data-card-icon .fa-regular,.impdc-data-card-icon .fa-solid,.impdc-data-card-icon .fa-thin,.impdc-data-card-icon .fab,.impdc-data-card-icon .fad,.impdc-data-card-icon .fal,.impdc-data-card-icon .far,.impdc-data-card-icon .fas,.impdc-data-card-icon .fat,.impdc-data-card-icon svg{display:flex;align-items:center;justify-content:center;height:24px;width:24px;font-size:18px;line-height:24px}.impdc-data-card-icon.hide{display:none}.impdc-data-card-container{display:flex;flex-direction:column;min-width:50px}.impdc-data-card-title{color:#6b7280;font-size:14px;line-height:20px;font-weight:500;min-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.impdc-data-card-title.title-attention{color:#161e2e;font-size:16px;line-height:24px;font-weight:400}.impdc-data-card-data{display:flex;flex-wrap:wrap;align-items:end;min-width:0}.impdc-data-card-data .data-current{color:#161e2e;font-size:24px;line-height:32px;font-weight:600;min-width:75px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}.impdc-data-card-data .data-current.data-current-enlarged{font-size:30px;line-height:36px}.impdc-data-card-data .data-other{display:inline-flex;justify-content:space-between;align-items:end;min-width:50px}.impdc-data-card-data .data-previous{min-width:0;color:#6b7280;font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:13px}.impdc-data-card-data .data-difference{display:inline-flex;align-items:center;gap:5px;color:#6b7280;font-size:14px;line-height:20px;font-weight:500}.impdc-data-card-data .data-difference.difference-negative{color:#e02424}.impdc-data-card-data .data-difference.difference-negative.badge{background-color:#fde8e8}.impdc-data-card-data .data-difference.difference-positive{color:#057a55}.impdc-data-card-data .data-difference.difference-positive.badge{background-color:#def7ec}.impdc-data-card-data .data-difference.rounded-pill{padding:4px 10px;border-radius:12px!important}.impdc-data-card-corner{position:absolute;top:0;right:0;margin:1rem;line-height:14px;color:#374151}.impdc-data-card-corner .fa,.impdc-data-card-corner .fa-brands,.impdc-data-card-corner .fa-duotone,.impdc-data-card-corner .fa-light,.impdc-data-card-corner .fa-regular,.impdc-data-card-corner .fa-solid,.impdc-data-card-corner .fa-thin,.impdc-data-card-corner .fab,.impdc-data-card-corner .fad,.impdc-data-card-corner .fal,.impdc-data-card-corner .far,.impdc-data-card-corner .fas,.impdc-data-card-corner .fat,.impdc-data-card-corner svg{height:14px;line-height:14px}.impdc-data-card-corner.hide{display:none}.impdc-data-card-footer{display:flex;align-items:center;padding:16px;background-color:#f9fafb}.impdc-data-card-footer.card-footer{border-top:0}.impdc-data-card-footer.hide{display:none}.impdc-data-card-footer .footer-link{color:#01606d;font-weight:500;font-size:14px;line-height:20px}.impdc-data-card-footer .footer-link:hover{color:#19a8c1}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], current: [{
+                type: Input
+            }], previous: [{
+                type: Input
+            }], difference: [{
+                type: Input
+            }], linkText: [{
+                type: Input
+            }], sharedBorders: [{
+                type: Input
+            }], differencePill: [{
+                type: Input
+            }], currentColor: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], iconBgColor: [{
+                type: Input
+            }], linkClicked: [{
+                type: Output
+            }], cornerClicked: [{
+                type: Output
+            }], classDataCard: [{
+                type: HostBinding,
+                args: ['class']
+            }], classDataCardSharedBorders: [{
+                type: HostBinding,
+                args: ['class.impdc-data-card-shared-borders']
+            }] } });
+
+class DataCardModule {
+    constructor() { }
+}
+DataCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DataCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: DataCardModule, declarations: [DataCardComponent], imports: [CommonModule], exports: [DataCardComponent] });
+DataCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataCardModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DataCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: [DataCardComponent],
+                    exports: [DataCardComponent]
+                }]
+        }], ctorParameters: function () { return []; } });
+
 class InteractionService {
     constructor() {
         this._interactables = [];
@@ -8313,5 +8456,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AlertModule, AvatarComponent, AvatarGroupComponent, AvatarGroupModule, AvatarModule, BackdropComponent, BackdropModule, BadgeComponent, BadgeModule, BadgeSize, BadgeSizesArr, BrandedDirective, BrandingModule, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, ButtonComponent, ButtonGroupComponent, ButtonGroupModule, ButtonModule, CardHeadingComponent, CardHeadingModule, CheckboxChangeEvent, CheckboxComponent, CheckboxModule, ComponentSize, ComponentTheme, ComponentThemesArr, CornerHintDirective, DesignComponentsModule, DropdownComponent, DropdownItemComponent, DropdownModule, ErrorDirective, ErrorStateMatcher, FileDropDirective, FileUploadComponent, FileUploadModule, FontAwesomeFreeRegularIcons, FontAwesomeFreeSolidIcons, FontAwesomeIconThemes, FontAwesomeIcons, FormFieldComponent, HintDirective, HumanReadableByteSizePipe, IMPDC_FORM_FIELD, IMPDC_FORM_ROOT, IMPDC_RADIO_BUTTON, IMPDC_RADIO_GROUP, IMPDC_SELECT_OPTION_PARENT_COMPONENT, IconComponent, IconModule, ImpdcFormFieldControl, ImpdcFormsModule, ImpdcSelectIconChange, InputDirective, InteractionService, LabelDirective, ModalComponent, ModalComponentSizesArr, ModalModule, ModalTheme, ModalThemesArr, PaginationComponent, PaginationModule, PrefixDirective, ProgressBarComponent, ProgressBarModule, RadioButtonComponent, RadioChangeEvent, RadioGroupDirective, RadioModule, RootFormGroupDirective, RootNgFormDirective, ScrollableComponent, ScrollableModule, SelectChangeEvent, SelectComponent, SelectIconComponent, SelectIconModule, SelectModel, SelectModule, SelectOptionComponent, SelectOptionSelectionChangeEvent, ShowOnDirtyErrorStateMatcher, SizeDetectionModule, SizeDetectorDirective, SpinnerComponent, SpinnerModule, SuffixDirective, TableComponent, TableModule, TextHighlightComponent, TextHighlightModule, UniqueSelectionDispatcher, getImpdcFormFieldMissingControlError, mixinDisabled, mixinErrorState, mixinTabIndex };
+export { AlertComponent, AlertModule, AvatarComponent, AvatarGroupComponent, AvatarGroupModule, AvatarModule, BackdropComponent, BackdropModule, BadgeComponent, BadgeModule, BadgeSize, BadgeSizesArr, BrandedDirective, BrandingModule, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, ButtonComponent, ButtonGroupComponent, ButtonGroupModule, ButtonModule, CardHeadingComponent, CardHeadingModule, CheckboxChangeEvent, CheckboxComponent, CheckboxModule, ComponentSize, ComponentTheme, ComponentThemesArr, CornerHintDirective, DataCardComponent, DataCardModule, DesignComponentsModule, DropdownComponent, DropdownItemComponent, DropdownModule, ErrorDirective, ErrorStateMatcher, FileDropDirective, FileUploadComponent, FileUploadModule, FontAwesomeFreeRegularIcons, FontAwesomeFreeSolidIcons, FontAwesomeIconThemes, FontAwesomeIcons, FormFieldComponent, HintDirective, HumanReadableByteSizePipe, IMPDC_FORM_FIELD, IMPDC_FORM_ROOT, IMPDC_RADIO_BUTTON, IMPDC_RADIO_GROUP, IMPDC_SELECT_OPTION_PARENT_COMPONENT, IconComponent, IconModule, ImpdcFormFieldControl, ImpdcFormsModule, ImpdcSelectIconChange, InputDirective, InteractionService, LabelDirective, ModalComponent, ModalComponentSizesArr, ModalModule, ModalTheme, ModalThemesArr, PaginationComponent, PaginationModule, PrefixDirective, ProgressBarComponent, ProgressBarModule, RadioButtonComponent, RadioChangeEvent, RadioGroupDirective, RadioModule, RootFormGroupDirective, RootNgFormDirective, ScrollableComponent, ScrollableModule, SelectChangeEvent, SelectComponent, SelectIconComponent, SelectIconModule, SelectModel, SelectModule, SelectOptionComponent, SelectOptionSelectionChangeEvent, ShowOnDirtyErrorStateMatcher, SizeDetectionModule, SizeDetectorDirective, SpinnerComponent, SpinnerModule, SuffixDirective, TableComponent, TableModule, TextHighlightComponent, TextHighlightModule, UniqueSelectionDispatcher, getImpdcFormFieldMissingControlError, mixinDisabled, mixinErrorState, mixinTabIndex };
 //# sourceMappingURL=impartner-design-components.mjs.map