ecabs-components 0.0.59 → 0.0.61

package/esm2020/lib/ecabs-expansion-panel/ecabs-expansion-panel.component.mjs

@@ -33,7 +33,7 @@ export class EcabsExpansionPanelComponent {
     }
 }
 EcabsExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EcabsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EcabsExpansionPanelComponent, selector: "ecabs-expansion-panel", inputs: { title: "title", description: "description", index: "index", expanded: "expanded", disabled: "disabled", errorMessage: "errorMessage", showErrorMessage: "showErrorMessage", closePanel: "closePanel", showIcon: "showIcon", iconName: "iconName", showCheckbox: "showCheckbox", showStatus: "showStatus", status: "status", hideToggle: "hideToggle" }, outputs: { checked: "checked", opened: "opened" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: MatExpansionPanel, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"example-headers-align\" multi>\r\n  <mat-expansion-panel [expanded]=\"expanded\" [disabled]=\"disabled\" (opened)=\"onOpened()\" [hideToggle]=\"hideToggle\">\r\n    <mat-expansion-panel-header *ngIf=\"title\">\r\n      <mat-panel-title>\r\n        <div>\r\n          <div class=\"flex flex-row\">\r\n            <div *ngIf=\"index && !showErrorMessage\" class=\"border-current border-2 rounded-full mr-3 index\">\r\n              {{ index }}\r\n            </div>\r\n            <div *ngIf=\"!showErrorMessage && showIcon\" class=\"mr-3 rounded\">\r\n              <mat-icon class=\"rounded-icon !text-lg -mt-1\">{{ 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\" class=\"ml-2 mt-1\">\r\n              <ecabs-checkbox [type]=\"'toggle'\" [(ngModel)]=\"toggle\"\r\n                                       (click)=\"toggleAction()\"></ecabs-checkbox>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"showErrorMessage\" class=\"error-message\">{{ errorMessage }}</div>\r\n        </div>\r\n      </mat-panel-title>\r\n      <mat-panel-description>{{ description }}\r\n        <mat-chip *ngIf=\"showStatus\" class=\"{{ status | lowercase }}\">\r\n          {{ status | titlecase }}\r\n        </mat-chip>\r\n      </mat-panel-description>\r\n    </mat-expansion-panel-header>\r\n    <ng-content></ng-content>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".example-action-buttons{padding-bottom:20px}.example-headers-align .mat-expansion-panel-header-title,.example-headers-align .mat-expansion-panel-header-description{flex-basis:0}.example-headers-align .mat-expansion-panel-header-description{justify-content:flex-end;align-items:center}.example-headers-align .mat-form-field+.mat-form-field{margin-left:8px}:host ::ng-deep .mat-expansion-indicator:after{border-color:var(--color-gray-500)}.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}.rounded{background-color:var(--color-brand-dark);border-radius:50%;height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center}.rounded-icon{color:var(--color-white)}.inactive{background-color:rgba(var(--color-warn-rgb),.05);color:var(--color-warn)}.draft{background-color:var(--color-gray-200);color:var(--color-gray-500)}.published{background-color:rgba(var(--color-info-rgb),.05);color:var(--color-info)}.active{background-color:rgba(var(--color-success-rgb),.05);color:var(--color-success)}.expired{background-color:rgba(var(--color-error-rgb),.05);color:var(--color-error)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "component", type: i6.EcabsCheckboxToggleComponent, selector: "ecabs-checkbox", inputs: ["type", "text", "labelPosition", "indeterminate", "checked"], outputs: ["click", "changed"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
+EcabsExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EcabsExpansionPanelComponent, selector: "ecabs-expansion-panel", inputs: { title: "title", description: "description", index: "index", expanded: "expanded", disabled: "disabled", errorMessage: "errorMessage", showErrorMessage: "showErrorMessage", closePanel: "closePanel", showIcon: "showIcon", iconName: "iconName", showCheckbox: "showCheckbox", showStatus: "showStatus", status: "status", hideToggle: "hideToggle" }, outputs: { checked: "checked", opened: "opened" }, viewQueries: [{ propertyName: "expansionPanel", first: true, predicate: MatExpansionPanel, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"example-headers-align\" multi>\r\n  <mat-expansion-panel [expanded]=\"expanded\" [disabled]=\"disabled\" (opened)=\"onOpened()\" [hideToggle]=\"hideToggle\">\r\n    <mat-expansion-panel-header *ngIf=\"title\">\r\n      <mat-panel-title>\r\n        <div>\r\n          <div class=\"flex flex-row\">\r\n            <div *ngIf=\"index && !showErrorMessage\" class=\"border-current border-2 rounded-full mr-3 index\">\r\n              {{ index }}\r\n            </div>\r\n            <div *ngIf=\"!showErrorMessage && showIcon\" class=\"mr-3 rounded\">\r\n              <mat-icon class=\"rounded-icon !text-lg -mt-1\">{{ 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\" class=\"ml-2 mt-1\">\r\n              <ecabs-checkbox [type]=\"'toggle'\" [(ngModel)]=\"toggle\"\r\n                                       (click)=\"toggleAction()\"></ecabs-checkbox>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"showErrorMessage\" class=\"error-message\">{{ errorMessage }}</div>\r\n        </div>\r\n      </mat-panel-title>\r\n      <mat-panel-description>{{ description }}\r\n        <mat-chip *ngIf=\"showStatus\" class=\"{{ status | lowercase }}\">\r\n          {{ status | titlecase }}\r\n        </mat-chip>\r\n      </mat-panel-description>\r\n    </mat-expansion-panel-header>\r\n    <ng-content></ng-content>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".example-action-buttons{padding-bottom:20px}.example-headers-align .mat-expansion-panel-header-title,.example-headers-align .mat-expansion-panel-header-description{flex-basis:0}.example-headers-align .mat-expansion-panel-header-description{justify-content:flex-end;align-items:center}.example-headers-align .mat-form-field+.mat-form-field{margin-left:8px}:host ::ng-deep .mat-expansion-indicator:after{border-color:var(--color-gray-500)}.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}.rounded{background-color:var(--color-brand-dark);border-radius:50%;height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center}.rounded-icon{color:var(--color-white)}.inactive{background-color:rgba(var(--color-warn-rgb),.05);color:var(--color-warn)}.draft{background-color:var(--color-gray-200);color:var(--color-gray-500)}.published{background-color:rgba(var(--color-info-rgb),.05);color:var(--color-info)}.active{background-color:rgba(var(--color-success-rgb),.05);color:var(--color-success)}.expired{background-color:rgba(var(--color-error-rgb),.05);color:var(--color-error)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i3.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "component", type: i6.EcabsCheckboxToggleComponent, selector: "ecabs-checkbox", inputs: ["type", "text", "label", "labelPosition", "indeterminate", "checked"], outputs: ["click", "changed"] }, { kind: "pipe", type: i1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EcabsExpansionPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecabs-expansion-panel', template: "<mat-accordion class=\"example-headers-align\" multi>\r\n  <mat-expansion-panel [expanded]=\"expanded\" [disabled]=\"disabled\" (opened)=\"onOpened()\" [hideToggle]=\"hideToggle\">\r\n    <mat-expansion-panel-header *ngIf=\"title\">\r\n      <mat-panel-title>\r\n        <div>\r\n          <div class=\"flex flex-row\">\r\n            <div *ngIf=\"index && !showErrorMessage\" class=\"border-current border-2 rounded-full mr-3 index\">\r\n              {{ index }}\r\n            </div>\r\n            <div *ngIf=\"!showErrorMessage && showIcon\" class=\"mr-3 rounded\">\r\n              <mat-icon class=\"rounded-icon !text-lg -mt-1\">{{ 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\" class=\"ml-2 mt-1\">\r\n              <ecabs-checkbox [type]=\"'toggle'\" [(ngModel)]=\"toggle\"\r\n                                       (click)=\"toggleAction()\"></ecabs-checkbox>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"showErrorMessage\" class=\"error-message\">{{ errorMessage }}</div>\r\n        </div>\r\n      </mat-panel-title>\r\n      <mat-panel-description>{{ description }}\r\n        <mat-chip *ngIf=\"showStatus\" class=\"{{ status | lowercase }}\">\r\n          {{ status | titlecase }}\r\n        </mat-chip>\r\n      </mat-panel-description>\r\n    </mat-expansion-panel-header>\r\n    <ng-content></ng-content>\r\n  </mat-expansion-panel>\r\n</mat-accordion>\r\n", styles: [".example-action-buttons{padding-bottom:20px}.example-headers-align .mat-expansion-panel-header-title,.example-headers-align .mat-expansion-panel-header-description{flex-basis:0}.example-headers-align .mat-expansion-panel-header-description{justify-content:flex-end;align-items:center}.example-headers-align .mat-form-field+.mat-form-field{margin-left:8px}:host ::ng-deep .mat-expansion-indicator:after{border-color:var(--color-gray-500)}.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}.rounded{background-color:var(--color-brand-dark);border-radius:50%;height:28px;width:28px;display:flex;align-items:center;justify-content:center;text-align:center}.rounded-icon{color:var(--color-white)}.inactive{background-color:rgba(var(--color-warn-rgb),.05);color:var(--color-warn)}.draft{background-color:var(--color-gray-200);color:var(--color-gray-500)}.published{background-color:rgba(var(--color-info-rgb),.05);color:var(--color-info)}.active{background-color:rgba(var(--color-success-rgb),.05);color:var(--color-success)}.expired{background-color:rgba(var(--color-error-rgb),.05);color:var(--color-error)}\n"] }]