ca-components 2.0.924 → 2.0.925
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -19165,7 +19165,7 @@ class CaPayrollListSummaryOverviewComponent {
|
|
|
19165
19165
|
});
|
|
19166
19166
|
}
|
|
19167
19167
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CaPayrollListSummaryOverviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19168
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaPayrollListSummaryOverviewComponent, isStandalone: true, selector: "app-ca-payroll-list-summary-overview", inputs: { leftTemplate: "leftTemplate", showLeftTemplate: "showLeftTemplate", item: "item", isExpanded: "isExpanded", index: "index", animationMarginParams: "animationMarginParams" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "@let type = item.type;\n@let moneyCounter = item.moneyCounter;\n@let payrollSummaryItemClass = {\n'text-color-red-11': item.status === 'danger',\n'text-color-blue-13': item.status === 'positive',\n'text-color-white-2': isExpanded,\n};\n\n<div class=\"accordion\" id=\"accordionExample\">\n <div class=\"accordion-item\">\n <div>\n <div class=\"d-flex justify-content-between align-items-center accordion-header user-select-none\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\" (click)=\"toggleAccordion()\">\n\n <div class=\"d-flex header-content ca-font-extra-bold align-items-center\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\">\n @if (!showLeftTemplate) {\n <div class=\"d-flex flex-column\">\n <div class=\"me-1 item-text text-size-11\">\n <span>{{ item.text }}</span>\n </div>\n <div class=\"me-1 item-text text-size-11\">\n <span>{{ type }}</span>\n </div>\n </div>\n <div class=\"text-size-11 ca-font-bold heading-count d-flex align-items-center justify-content-center\"\n [ngClass]=\"{\n 'is-expanded text-color-black': isExpanded,\n 'text-color-white': !isExpanded,\n }\">\n {{ item.itemCount }}\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"leftTemplate\"></ng-container>\n }\n </div>\n\n <div class=\"d-flex align-items-center header-content-right ca-font-bold\">\n @if (item.date) {\n <div class=\"me-2 date\" [class]=\"{ \n 'is-expanded': isExpanded,\n 'text-color-white-2': isExpanded,\n 'text-color-black': !isExpanded,\n }\">\n {{ item.date | date: 'dd/MM/yyyy' }}\n </div>\n }\n @if (item.status !== 'success') {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n danger: item.status === 'danger',\n positive: item.status === 'positive',\n }\" [class.is-danger-expanded]=\"\n item.status === 'danger' && isExpanded\n \" [class.is-positive-expanded]=\"\n item.status === 'positive' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"payrollSummaryItemClass\">\n {{ item.money | currency }}\n </div>\n @if (moneyCounter) {\n <div [class]=\"payrollSummaryItemClass\">\n ({{ moneyCounter }})\n </div>\n }\n </div>\n } @else {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n success: item.status === 'success',\n }\" [class.is-success-expanded]=\"\n item.status === 'success' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"{\n 'text-color-green-2': item.status === 'success',\n 'text-color-white-2': isExpanded\n }\">\n ALL PAID\n </div>\n </div>\n }\n <div class=\"accordion-toggle-icon d-flex\" [ngClass]=\"{\n svg_rotate: isExpanded,\n rotate_back: !isExpanded,\n }\">\n <svg-icon [src]=\"getSvgPath('downArrow')\" alt=\"Toggle\"></svg-icon>\n </div>\n </div>\n </div>\n </div>\n <div [id]=\"'collapseOne' + index\" class=\"accordion-collapse\" [class.show]=\"isExpanded\"\n data-bs-parent=\"#accordionExample\" [@showHideCardBody]=\"{\n value: isExpanded.toString(),\n params: animationMarginParams,\n }\">\n <ng-container>\n <div class=\"accordion-body\">\n <!-- Add the expanded content here -->\n <!-- {{ item.description }} -->\n @if (isExpanded) {\n <ng-content></ng-content>\n }\n </div>\n </ng-container>\n </div>\n </div>\n</div>", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.accordion-collapse{margin-top:0!important}.accordion-item{border:unset!important;margin-bottom:3px!important;background-color:transparent!important}.accordion-item .accordion-header{cursor:pointer;padding:4px 4px 4px 8px;background-color:#fff;border-radius:4px!important}.accordion-item .accordion-header .header-content{font-family:Montserrat,sans-serif;font-size:14px;color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text{color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text span::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-text span::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content.is-expanded,.accordion-item .accordion-header .header-content.is-expanded .item-text span{color:#fff}.accordion-item .accordion-header .header-content.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content .heading-count{background-color:#919191;border-radius:10px;height:18px;padding:2px 5px;min-width:18px}.accordion-item .accordion-header .header-content .heading-count.is-expanded{background-color:#fff}.accordion-item .accordion-header .header-content .heading-count .item-count{font-size:11px;color:#fff}.accordion-item .accordion-header .header-content .heading-count .item-count.is-expanded{color:#424242}.accordion-item .accordion-header.is-expanded{background-color:#424242;border-radius:4px;color:#fff}.accordion-item .accordion-header.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content-right{font-family:Montserrat,sans-serif;font-size:11px}.accordion-item .accordion-header .header-content-right.is-expanded{color:#fff}.accordion-item .accordion-header .header-content-right .date{background-color:#eee;color:#424242;padding:2px 5px;border-radius:2px}.accordion-item .accordion-header .header-content-right .date.is-expanded{background-color:#91919166;color:#fff}.accordion-item .accordion-header .header-content-right .me-1{padding-left:8px}.accordion-item .accordion-header .header-content-right .amount{padding:2px 5px;border-radius:2px}.accordion-item .accordion-header .header-content-right .amount.danger{background-color:#f1f1f1;color:#df3c3c}.accordion-item .accordion-header .header-content-right .amount.positive{background-color:#e9effd;color:#3b73ed}.accordion-item .accordion-header .header-content-right .amount.success{background-color:#e7f4f3;color:#259f94}.accordion-item .accordion-header .header-content-right .amount.is-danger-expanded{background-color:#df3c3c66;color:#fff}.accordion-item .accordion-header .header-content-right .amount.is-positive-expanded{background-color:#3b73ed66;color:#fff}.accordion-item .accordion-header .header-content-right .amount.is-success-expanded{background-color:#259f9466;color:#fff}.accordion-item .accordion-header .header-content-right .svg_rotate svg{transform:rotate(180deg);transition:transform .2s ease-in-out}.accordion-item .accordion-header .header-content-right .rotate_back svg{transform:rotate(0);transition:transform .2s ease-in-out}.accordion-item .accordion-header:not(.is-expanded):hover .header-content{color:#424242}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-text span::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-text span::selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .heading-count{background-color:#6c6c6c}.accordion-item .accordion-header:not(.is-expanded):hover svg path{fill:#424242}.accordion-item .accordion-header:hover .header-content{color:#fff}.accordion-item .accordion-header:hover .header-content .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .heading-count{background-color:#fff}.accordion-item .accordion-header:hover svg path{fill:#fff}.accordion-item .accordion-body{padding:0}.accordion-item .accordion-toggle-icon{width:26px;height:26px;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
19168
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CaPayrollListSummaryOverviewComponent, isStandalone: true, selector: "app-ca-payroll-list-summary-overview", inputs: { leftTemplate: "leftTemplate", showLeftTemplate: "showLeftTemplate", item: "item", isExpanded: "isExpanded", index: "index", animationMarginParams: "animationMarginParams" }, outputs: { toggle: "toggle" }, ngImport: i0, template: "@let type = item.type;\n@let moneyCounter = item.moneyCounter;\n@let payrollSummaryItemClass = {\n'text-color-red-11': item.status === 'danger',\n'text-color-blue-13': item.status === 'positive',\n'text-color-white-2': isExpanded,\n};\n\n<div class=\"accordion\" id=\"accordionExample\">\n <div class=\"accordion-item\">\n <div>\n <div class=\"d-flex justify-content-between align-items-center accordion-header user-select-none\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\" (click)=\"toggleAccordion()\">\n\n <div class=\"d-flex header-content ca-font-extra-bold align-items-end\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\">\n @if (!showLeftTemplate) {\n <div class=\"d-flex flex-column\">\n <div class=\"me-1 item-text text-size-11 font-weight-600\">\n <span>{{ item.text }}</span>\n </div>\n <div class=\"me-1 item-text text-size-14\">\n <span>{{ type }}</span>\n </div>\n </div>\n <div class=\"text-size-11 ca-font-bold heading-count d-flex align-items-center justify-content-center\"\n [ngClass]=\"{\n 'is-expanded text-color-black': isExpanded,\n 'text-color-white': !isExpanded,\n }\">\n {{ item.itemCount }}\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"leftTemplate\"></ng-container>\n }\n </div>\n\n <div class=\"d-flex align-items-center header-content-right ca-font-bold\">\n @if (item.date) {\n <div class=\"me-2 date\" [class]=\"{ \n 'is-expanded': isExpanded,\n 'text-color-white-2': isExpanded,\n 'text-color-black': !isExpanded,\n }\">\n {{ item.date | date: 'dd/MM/yyyy' }}\n </div>\n }\n @if (item.status !== 'success') {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n danger: item.status === 'danger',\n positive: item.status === 'positive',\n }\" [class.is-danger-expanded]=\"\n item.status === 'danger' && isExpanded\n \" [class.is-positive-expanded]=\"\n item.status === 'positive' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"payrollSummaryItemClass\">\n {{ item.money | currency }}\n </div>\n @if (moneyCounter) {\n <div [class]=\"payrollSummaryItemClass\">\n ({{ moneyCounter }})\n </div>\n }\n </div>\n } @else {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n success: item.status === 'success',\n }\" [class.is-success-expanded]=\"\n item.status === 'success' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"{\n 'text-color-green-2': item.status === 'success',\n 'text-color-white-2': isExpanded\n }\">\n ALL PAID\n </div>\n </div>\n }\n <div class=\"accordion-toggle-icon d-flex\" [ngClass]=\"{\n svg_rotate: isExpanded,\n rotate_back: !isExpanded,\n }\">\n <svg-icon [src]=\"getSvgPath('downArrow')\" alt=\"Toggle\"></svg-icon>\n </div>\n </div>\n </div>\n </div>\n <div [id]=\"'collapseOne' + index\" class=\"accordion-collapse\" [class.show]=\"isExpanded\"\n data-bs-parent=\"#accordionExample\" [@showHideCardBody]=\"{\n value: isExpanded.toString(),\n params: animationMarginParams,\n }\">\n <ng-container>\n <div class=\"accordion-body\">\n <!-- Add the expanded content here -->\n <!-- {{ item.description }} -->\n @if (isExpanded) {\n <ng-content></ng-content>\n }\n </div>\n </ng-container>\n </div>\n </div>\n</div>", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.accordion-collapse{margin-top:0!important}.accordion-item{border:unset!important;margin-bottom:3px!important;background-color:transparent!important}.accordion-item .accordion-header{cursor:pointer;padding:4px 4px 4px 8px;background-color:#fff;border-radius:4px!important}.accordion-item .accordion-header .header-content{font-family:Montserrat,sans-serif;font-size:14px;color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text{color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text span::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-text span::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content.is-expanded,.accordion-item .accordion-header .header-content.is-expanded .item-text span{color:#fff}.accordion-item .accordion-header .header-content.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content .heading-count{background-color:#919191;border-radius:10px;height:18px;padding:2px 5px;min-width:18px}.accordion-item .accordion-header .header-content .heading-count.is-expanded{background-color:#fff}.accordion-item .accordion-header .header-content .heading-count .item-count{font-size:11px;color:#fff}.accordion-item .accordion-header .header-content .heading-count .item-count.is-expanded{color:#424242}.accordion-item .accordion-header.is-expanded{background-color:#424242;border-radius:4px;color:#fff}.accordion-item .accordion-header.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content-right{font-family:Montserrat,sans-serif;font-size:11px}.accordion-item .accordion-header .header-content-right.is-expanded{color:#fff}.accordion-item .accordion-header .header-content-right .date{background-color:#eee;color:#424242;padding:2px 5px;border-radius:2px}.accordion-item .accordion-header .header-content-right .date.is-expanded{background-color:#91919166;color:#fff}.accordion-item .accordion-header .header-content-right .me-1{padding-left:8px}.accordion-item .accordion-header .header-content-right .font-weight-600{font-weight:600}.accordion-item .accordion-header .header-content-right .amount{padding:2px 5px;border-radius:2px}.accordion-item .accordion-header .header-content-right .amount.danger{background-color:#f1f1f1;color:#df3c3c}.accordion-item .accordion-header .header-content-right .amount.positive{background-color:#e9effd;color:#3b73ed}.accordion-item .accordion-header .header-content-right .amount.success{background-color:#e7f4f3;color:#259f94}.accordion-item .accordion-header .header-content-right .amount.is-danger-expanded{background-color:#df3c3c66;color:#fff}.accordion-item .accordion-header .header-content-right .amount.is-positive-expanded{background-color:#3b73ed66;color:#fff}.accordion-item .accordion-header .header-content-right .amount.is-success-expanded{background-color:#259f9466;color:#fff}.accordion-item .accordion-header .header-content-right .svg_rotate svg{transform:rotate(180deg);transition:transform .2s ease-in-out}.accordion-item .accordion-header .header-content-right .rotate_back svg{transform:rotate(0);transition:transform .2s ease-in-out}.accordion-item .accordion-header:not(.is-expanded):hover .header-content{color:#424242}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-text span::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-text span::selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .heading-count{background-color:#6c6c6c}.accordion-item .accordion-header:not(.is-expanded):hover svg path{fill:#424242}.accordion-item .accordion-header:hover .header-content{color:#fff}.accordion-item .accordion-header:hover .header-content .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .heading-count{background-color:#fff}.accordion-item .accordion-header:hover svg path{fill:#fff}.accordion-item .accordion-body{padding:0}.accordion-item .accordion-toggle-icon{width:26px;height:26px;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
19169
19169
|
//Modules
|
|
19170
19170
|
CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: AngularSvgIconModule }, { kind: "component", type: i2.SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "applyCss", "svgClass", "class", "viewBox", "svgAriaLabel", "svgStyle"] }], animations: [accordionAnimation('showHideCardBody')], encapsulation: i0.ViewEncapsulation.None }); }
|
|
19171
19171
|
}
|
|
@@ -19175,7 +19175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
19175
19175
|
//Modules
|
|
19176
19176
|
CommonModule,
|
|
19177
19177
|
AngularSvgIconModule,
|
|
19178
|
-
], animations: [accordionAnimation('showHideCardBody')], encapsulation: ViewEncapsulation.None, template: "@let type = item.type;\n@let moneyCounter = item.moneyCounter;\n@let payrollSummaryItemClass = {\n'text-color-red-11': item.status === 'danger',\n'text-color-blue-13': item.status === 'positive',\n'text-color-white-2': isExpanded,\n};\n\n<div class=\"accordion\" id=\"accordionExample\">\n <div class=\"accordion-item\">\n <div>\n <div class=\"d-flex justify-content-between align-items-center accordion-header user-select-none\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\" (click)=\"toggleAccordion()\">\n\n <div class=\"d-flex header-content ca-font-extra-bold align-items-center\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\">\n @if (!showLeftTemplate) {\n <div class=\"d-flex flex-column\">\n <div class=\"me-1 item-text text-size-11\">\n <span>{{ item.text }}</span>\n </div>\n <div class=\"me-1 item-text text-size-11\">\n <span>{{ type }}</span>\n </div>\n </div>\n <div class=\"text-size-11 ca-font-bold heading-count d-flex align-items-center justify-content-center\"\n [ngClass]=\"{\n 'is-expanded text-color-black': isExpanded,\n 'text-color-white': !isExpanded,\n }\">\n {{ item.itemCount }}\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"leftTemplate\"></ng-container>\n }\n </div>\n\n <div class=\"d-flex align-items-center header-content-right ca-font-bold\">\n @if (item.date) {\n <div class=\"me-2 date\" [class]=\"{ \n 'is-expanded': isExpanded,\n 'text-color-white-2': isExpanded,\n 'text-color-black': !isExpanded,\n }\">\n {{ item.date | date: 'dd/MM/yyyy' }}\n </div>\n }\n @if (item.status !== 'success') {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n danger: item.status === 'danger',\n positive: item.status === 'positive',\n }\" [class.is-danger-expanded]=\"\n item.status === 'danger' && isExpanded\n \" [class.is-positive-expanded]=\"\n item.status === 'positive' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"payrollSummaryItemClass\">\n {{ item.money | currency }}\n </div>\n @if (moneyCounter) {\n <div [class]=\"payrollSummaryItemClass\">\n ({{ moneyCounter }})\n </div>\n }\n </div>\n } @else {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n success: item.status === 'success',\n }\" [class.is-success-expanded]=\"\n item.status === 'success' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"{\n 'text-color-green-2': item.status === 'success',\n 'text-color-white-2': isExpanded\n }\">\n ALL PAID\n </div>\n </div>\n }\n <div class=\"accordion-toggle-icon d-flex\" [ngClass]=\"{\n svg_rotate: isExpanded,\n rotate_back: !isExpanded,\n }\">\n <svg-icon [src]=\"getSvgPath('downArrow')\" alt=\"Toggle\"></svg-icon>\n </div>\n </div>\n </div>\n </div>\n <div [id]=\"'collapseOne' + index\" class=\"accordion-collapse\" [class.show]=\"isExpanded\"\n data-bs-parent=\"#accordionExample\" [@showHideCardBody]=\"{\n value: isExpanded.toString(),\n params: animationMarginParams,\n }\">\n <ng-container>\n <div class=\"accordion-body\">\n <!-- Add the expanded content here -->\n <!-- {{ item.description }} -->\n @if (isExpanded) {\n <ng-content></ng-content>\n }\n </div>\n </ng-container>\n </div>\n </div>\n</div>", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.accordion-collapse{margin-top:0!important}.accordion-item{border:unset!important;margin-bottom:3px!important;background-color:transparent!important}.accordion-item .accordion-header{cursor:pointer;padding:4px 4px 4px 8px;background-color:#fff;border-radius:4px!important}.accordion-item .accordion-header .header-content{font-family:Montserrat,sans-serif;font-size:14px;color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text{color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text span::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-text span::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content.is-expanded,.accordion-item .accordion-header .header-content.is-expanded .item-text span{color:#fff}.accordion-item .accordion-header .header-content.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content .heading-count{background-color:#919191;border-radius:10px;height:18px;padding:2px 5px;min-width:18px}.accordion-item .accordion-header .header-content .heading-count.is-expanded{background-color:#fff}.accordion-item .accordion-header .header-content .heading-count .item-count{font-size:11px;color:#fff}.accordion-item .accordion-header .header-content .heading-count .item-count.is-expanded{color:#424242}.accordion-item .accordion-header.is-expanded{background-color:#424242;border-radius:4px;color:#fff}.accordion-item .accordion-header.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content-right{font-family:Montserrat,sans-serif;font-size:11px}.accordion-item .accordion-header .header-content-right.is-expanded{color:#fff}.accordion-item .accordion-header .header-content-right .date{background-color:#eee;color:#424242;padding:2px 5px;border-radius:2px}.accordion-item .accordion-header .header-content-right .date.is-expanded{background-color:#91919166;color:#fff}.accordion-item .accordion-header .header-content-right .me-1{padding-left:8px}.accordion-item .accordion-header .header-content-right .amount{padding:2px 5px;border-radius:2px}.accordion-item .accordion-header .header-content-right .amount.danger{background-color:#f1f1f1;color:#df3c3c}.accordion-item .accordion-header .header-content-right .amount.positive{background-color:#e9effd;color:#3b73ed}.accordion-item .accordion-header .header-content-right .amount.success{background-color:#e7f4f3;color:#259f94}.accordion-item .accordion-header .header-content-right .amount.is-danger-expanded{background-color:#df3c3c66;color:#fff}.accordion-item .accordion-header .header-content-right .amount.is-positive-expanded{background-color:#3b73ed66;color:#fff}.accordion-item .accordion-header .header-content-right .amount.is-success-expanded{background-color:#259f9466;color:#fff}.accordion-item .accordion-header .header-content-right .svg_rotate svg{transform:rotate(180deg);transition:transform .2s ease-in-out}.accordion-item .accordion-header .header-content-right .rotate_back svg{transform:rotate(0);transition:transform .2s ease-in-out}.accordion-item .accordion-header:not(.is-expanded):hover .header-content{color:#424242}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-text span::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-text span::selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .heading-count{background-color:#6c6c6c}.accordion-item .accordion-header:not(.is-expanded):hover svg path{fill:#424242}.accordion-item .accordion-header:hover .header-content{color:#fff}.accordion-item .accordion-header:hover .header-content .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .heading-count{background-color:#fff}.accordion-item .accordion-header:hover svg path{fill:#fff}.accordion-item .accordion-body{padding:0}.accordion-item .accordion-toggle-icon{width:26px;height:26px;align-items:center;justify-content:center}\n"] }]
|
|
19178
|
+
], animations: [accordionAnimation('showHideCardBody')], encapsulation: ViewEncapsulation.None, template: "@let type = item.type;\n@let moneyCounter = item.moneyCounter;\n@let payrollSummaryItemClass = {\n'text-color-red-11': item.status === 'danger',\n'text-color-blue-13': item.status === 'positive',\n'text-color-white-2': isExpanded,\n};\n\n<div class=\"accordion\" id=\"accordionExample\">\n <div class=\"accordion-item\">\n <div>\n <div class=\"d-flex justify-content-between align-items-center accordion-header user-select-none\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\" (click)=\"toggleAccordion()\">\n\n <div class=\"d-flex header-content ca-font-extra-bold align-items-end\"\n [ngClass]=\"{ 'is-expanded': isExpanded }\">\n @if (!showLeftTemplate) {\n <div class=\"d-flex flex-column\">\n <div class=\"me-1 item-text text-size-11 font-weight-600\">\n <span>{{ item.text }}</span>\n </div>\n <div class=\"me-1 item-text text-size-14\">\n <span>{{ type }}</span>\n </div>\n </div>\n <div class=\"text-size-11 ca-font-bold heading-count d-flex align-items-center justify-content-center\"\n [ngClass]=\"{\n 'is-expanded text-color-black': isExpanded,\n 'text-color-white': !isExpanded,\n }\">\n {{ item.itemCount }}\n </div>\n } @else {\n <ng-container *ngTemplateOutlet=\"leftTemplate\"></ng-container>\n }\n </div>\n\n <div class=\"d-flex align-items-center header-content-right ca-font-bold\">\n @if (item.date) {\n <div class=\"me-2 date\" [class]=\"{ \n 'is-expanded': isExpanded,\n 'text-color-white-2': isExpanded,\n 'text-color-black': !isExpanded,\n }\">\n {{ item.date | date: 'dd/MM/yyyy' }}\n </div>\n }\n @if (item.status !== 'success') {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n danger: item.status === 'danger',\n positive: item.status === 'positive',\n }\" [class.is-danger-expanded]=\"\n item.status === 'danger' && isExpanded\n \" [class.is-positive-expanded]=\"\n item.status === 'positive' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"payrollSummaryItemClass\">\n {{ item.money | currency }}\n </div>\n @if (moneyCounter) {\n <div [class]=\"payrollSummaryItemClass\">\n ({{ moneyCounter }})\n </div>\n }\n </div>\n } @else {\n <div class=\"d-flex amount me-1\" [ngClass]=\"{\n success: item.status === 'success',\n }\" [class.is-success-expanded]=\"\n item.status === 'success' && isExpanded\n \">\n <div class=\"me-1\" [class]=\"{\n 'text-color-green-2': item.status === 'success',\n 'text-color-white-2': isExpanded\n }\">\n ALL PAID\n </div>\n </div>\n }\n <div class=\"accordion-toggle-icon d-flex\" [ngClass]=\"{\n svg_rotate: isExpanded,\n rotate_back: !isExpanded,\n }\">\n <svg-icon [src]=\"getSvgPath('downArrow')\" alt=\"Toggle\"></svg-icon>\n </div>\n </div>\n </div>\n </div>\n <div [id]=\"'collapseOne' + index\" class=\"accordion-collapse\" [class.show]=\"isExpanded\"\n data-bs-parent=\"#accordionExample\" [@showHideCardBody]=\"{\n value: isExpanded.toString(),\n params: animationMarginParams,\n }\">\n <ng-container>\n <div class=\"accordion-body\">\n <!-- Add the expanded content here -->\n <!-- {{ item.description }} -->\n @if (isExpanded) {\n <ng-content></ng-content>\n }\n </div>\n </ng-container>\n </div>\n </div>\n</div>", styles: ["@keyframes dropdown{0%{margin-top:20px;visibility:hidden;opacity:0}to{opacity:1;margin-top:10px;visibility:visible!important}}@keyframes dropup{0%{margin-top:-19px;visibility:hidden;opacity:0}to{margin-top:inherit;visibility:visible!important}}.accordion-collapse{margin-top:0!important}.accordion-item{border:unset!important;margin-bottom:3px!important;background-color:transparent!important}.accordion-item .accordion-header{cursor:pointer;padding:4px 4px 4px 8px;background-color:#fff;border-radius:4px!important}.accordion-item .accordion-header .header-content{font-family:Montserrat,sans-serif;font-size:14px;color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text{color:#6c6c6c}.accordion-item .accordion-header .header-content .item-text span::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-text span::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::-moz-selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content .item-type::selection{background-color:#6c6c6c33!important;color:#6c6c6c!important}.accordion-item .accordion-header .header-content.is-expanded,.accordion-item .accordion-header .header-content.is-expanded .item-text span{color:#fff}.accordion-item .accordion-header .header-content.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content .heading-count{background-color:#919191;border-radius:10px;height:18px;padding:2px 5px;min-width:18px}.accordion-item .accordion-header .header-content .heading-count.is-expanded{background-color:#fff}.accordion-item .accordion-header .header-content .heading-count .item-count{font-size:11px;color:#fff}.accordion-item .accordion-header .header-content .heading-count .item-count.is-expanded{color:#424242}.accordion-item .accordion-header.is-expanded{background-color:#424242;border-radius:4px;color:#fff}.accordion-item .accordion-header.is-expanded .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header.is-expanded .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header .header-content-right{font-family:Montserrat,sans-serif;font-size:11px}.accordion-item .accordion-header .header-content-right.is-expanded{color:#fff}.accordion-item .accordion-header .header-content-right .date{background-color:#eee;color:#424242;padding:2px 5px;border-radius:2px}.accordion-item .accordion-header .header-content-right .date.is-expanded{background-color:#91919166;color:#fff}.accordion-item .accordion-header .header-content-right .me-1{padding-left:8px}.accordion-item .accordion-header .header-content-right .font-weight-600{font-weight:600}.accordion-item .accordion-header .header-content-right .amount{padding:2px 5px;border-radius:2px}.accordion-item .accordion-header .header-content-right .amount.danger{background-color:#f1f1f1;color:#df3c3c}.accordion-item .accordion-header .header-content-right .amount.positive{background-color:#e9effd;color:#3b73ed}.accordion-item .accordion-header .header-content-right .amount.success{background-color:#e7f4f3;color:#259f94}.accordion-item .accordion-header .header-content-right .amount.is-danger-expanded{background-color:#df3c3c66;color:#fff}.accordion-item .accordion-header .header-content-right .amount.is-positive-expanded{background-color:#3b73ed66;color:#fff}.accordion-item .accordion-header .header-content-right .amount.is-success-expanded{background-color:#259f9466;color:#fff}.accordion-item .accordion-header .header-content-right .svg_rotate svg{transform:rotate(180deg);transition:transform .2s ease-in-out}.accordion-item .accordion-header .header-content-right .rotate_back svg{transform:rotate(0);transition:transform .2s ease-in-out}.accordion-item .accordion-header:not(.is-expanded):hover .header-content{color:#424242}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-text span::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-text span::selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::-moz-selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .item-type::selection{background-color:#42424233!important;color:#424242!important}.accordion-item .accordion-header:not(.is-expanded):hover .header-content .heading-count{background-color:#6c6c6c}.accordion-item .accordion-header:not(.is-expanded):hover svg path{fill:#424242}.accordion-item .accordion-header:hover .header-content{color:#fff}.accordion-item .accordion-header:hover .header-content .item-text span::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-text span::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::-moz-selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .item-type::selection{background-color:#fff3!important;color:#fff!important}.accordion-item .accordion-header:hover .header-content .heading-count{background-color:#fff}.accordion-item .accordion-header:hover svg path{fill:#fff}.accordion-item .accordion-body{padding:0}.accordion-item .accordion-toggle-icon{width:26px;height:26px;align-items:center;justify-content:center}\n"] }]
|
|
19179
19179
|
}], ctorParameters: () => [], propDecorators: { leftTemplate: [{
|
|
19180
19180
|
type: Input
|
|
19181
19181
|
}], showLeftTemplate: [{
|