@alauda-fe/dynamic-plugin-shared 0.0.4-alpha.21 → 0.0.4-alpha.22
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.
|
@@ -4633,6 +4633,7 @@ class ZeroStateComponent {
|
|
|
4633
4633
|
constructor() {
|
|
4634
4634
|
this.zeroState = true;
|
|
4635
4635
|
this.fetching = false;
|
|
4636
|
+
this.showEmptyIcon = true;
|
|
4636
4637
|
this.context = 'form';
|
|
4637
4638
|
this.image = [
|
|
4638
4639
|
'/console-assets/images/light/no-data-for-list-or-card.svg',
|
|
@@ -4645,7 +4646,7 @@ class ZeroStateComponent {
|
|
|
4645
4646
|
return !this.zeroState && !this.fetching;
|
|
4646
4647
|
}
|
|
4647
4648
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ZeroStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4648
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ZeroStateComponent, isStandalone: true, selector: "acl-zero-state", inputs: { resourceName: "resourceName", resourceNameTranslated: "resourceNameTranslated", customPlaceholder: "customPlaceholder", zeroState: "zeroState", fetching: "fetching", context: "context", minHeight: "minHeight" }, host: { properties: { "hidden": "this.hiddenState" } }, ngImport: i0, template: "@if (zeroState && !fetching) {\n <div\n class=\"zero-placeholder\"\n [ngClass]=\"context\"\n [ngStyle]=\"{\n minHeight: (minHeight | pure: handlePixel),\n }\"\n >\n @if (customPlaceholder) {\n <ng-container\n [ngTemplateOutlet]=\"\n isTemplateRef(customPlaceholder) ? customPlaceholder : literal\n \"\n ></ng-container>\n <ng-template #literal>{{ customPlaceholder }}</ng-template>\n } @else if (!(resourceName || resourceNameTranslated)) {\n <div class
|
|
4649
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ZeroStateComponent, isStandalone: true, selector: "acl-zero-state", inputs: { resourceName: "resourceName", resourceNameTranslated: "resourceNameTranslated", customPlaceholder: "customPlaceholder", zeroState: "zeroState", fetching: "fetching", showEmptyIcon: "showEmptyIcon", context: "context", minHeight: "minHeight" }, host: { properties: { "hidden": "this.hiddenState" } }, ngImport: i0, template: "@if (zeroState && !fetching) {\n <div\n class=\"zero-placeholder\"\n [ngClass]=\"context\"\n [ngStyle]=\"{\n minHeight: (minHeight | pure: handlePixel),\n }\"\n >\n @if (customPlaceholder) {\n <ng-container\n [ngTemplateOutlet]=\"\n isTemplateRef(customPlaceholder) ? customPlaceholder : literal\n \"\n ></ng-container>\n <ng-template #literal>{{ customPlaceholder }}</ng-template>\n } @else if (!(resourceName || resourceNameTranslated)) {\n <div [class.no-data-placeholder]=\"showEmptyIcon\">\n @if (showEmptyIcon) {\n <img\n width=\"70\"\n [src]=\"image | auiThemePicker\"\n />\n }\n {{ 'no_data' | translate }}\n </div>\n } @else {\n <div [class.no-data-placeholder]=\"showEmptyIcon\">\n @if (showEmptyIcon) {\n <img\n width=\"70\"\n [src]=\"image | auiThemePicker\"\n />\n }\n {{\n 'no_named_data_hint'\n | translate\n : {\n name: resourceNameTranslated || (resourceName | translate),\n }\n }}\n </div>\n }\n </div>\n}\n<acl-loading-mask\n class=\"zero-placeholder\"\n [loading]=\"fetching\"\n></acl-loading-mask>\n", styles: [":host::ng-deep .zero-placeholder{box-sizing:border-box;display:flex;justify-content:center;align-items:center;padding:15px 10px;min-height:60px;background-color:rgb(var(--aui-color-n-10));border:solid 1px rgb(var(--aui-color-n-8));border-radius:var(--aui-border-radius-l);position:sticky;left:0}:host::ng-deep .zero-placeholder{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-placeholder-text))}:host::ng-deep .zero-placeholder>aui-icon:first-child{margin-right:var(--aui-spacing-m)}:host::ng-deep .aui-table .aui-table__row+.zero-placeholder{border-top-left-radius:0;border-top-right-radius:0}.zero-placeholder.form{border:none;padding:14px 0}.no-data-placeholder{margin-top:35px;margin-bottom:35px;display:flex;flex-direction:column;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LoadingMaskComponent, selector: "acl-loading-mask", inputs: ["loading", "type", "text"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ThemePickerPipe, name: "auiThemePicker" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4649
4650
|
}
|
|
4650
4651
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ZeroStateComponent, decorators: [{
|
|
4651
4652
|
type: Component,
|
|
@@ -4657,7 +4658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
4657
4658
|
LoadingMaskComponent,
|
|
4658
4659
|
NgTemplateOutlet,
|
|
4659
4660
|
ThemePickerPipe,
|
|
4660
|
-
], standalone: true, template: "@if (zeroState && !fetching) {\n <div\n class=\"zero-placeholder\"\n [ngClass]=\"context\"\n [ngStyle]=\"{\n minHeight: (minHeight | pure: handlePixel),\n }\"\n >\n @if (customPlaceholder) {\n <ng-container\n [ngTemplateOutlet]=\"\n isTemplateRef(customPlaceholder) ? customPlaceholder : literal\n \"\n ></ng-container>\n <ng-template #literal>{{ customPlaceholder }}</ng-template>\n } @else if (!(resourceName || resourceNameTranslated)) {\n <div class
|
|
4661
|
+
], standalone: true, template: "@if (zeroState && !fetching) {\n <div\n class=\"zero-placeholder\"\n [ngClass]=\"context\"\n [ngStyle]=\"{\n minHeight: (minHeight | pure: handlePixel),\n }\"\n >\n @if (customPlaceholder) {\n <ng-container\n [ngTemplateOutlet]=\"\n isTemplateRef(customPlaceholder) ? customPlaceholder : literal\n \"\n ></ng-container>\n <ng-template #literal>{{ customPlaceholder }}</ng-template>\n } @else if (!(resourceName || resourceNameTranslated)) {\n <div [class.no-data-placeholder]=\"showEmptyIcon\">\n @if (showEmptyIcon) {\n <img\n width=\"70\"\n [src]=\"image | auiThemePicker\"\n />\n }\n {{ 'no_data' | translate }}\n </div>\n } @else {\n <div [class.no-data-placeholder]=\"showEmptyIcon\">\n @if (showEmptyIcon) {\n <img\n width=\"70\"\n [src]=\"image | auiThemePicker\"\n />\n }\n {{\n 'no_named_data_hint'\n | translate\n : {\n name: resourceNameTranslated || (resourceName | translate),\n }\n }}\n </div>\n }\n </div>\n}\n<acl-loading-mask\n class=\"zero-placeholder\"\n [loading]=\"fetching\"\n></acl-loading-mask>\n", styles: [":host::ng-deep .zero-placeholder{box-sizing:border-box;display:flex;justify-content:center;align-items:center;padding:15px 10px;min-height:60px;background-color:rgb(var(--aui-color-n-10));border:solid 1px rgb(var(--aui-color-n-8));border-radius:var(--aui-border-radius-l);position:sticky;left:0}:host::ng-deep .zero-placeholder{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-placeholder-text))}:host::ng-deep .zero-placeholder>aui-icon:first-child{margin-right:var(--aui-spacing-m)}:host::ng-deep .aui-table .aui-table__row+.zero-placeholder{border-top-left-radius:0;border-top-right-radius:0}.zero-placeholder.form{border:none;padding:14px 0}.no-data-placeholder{margin-top:35px;margin-bottom:35px;display:flex;flex-direction:column;align-items:center}\n"] }]
|
|
4661
4662
|
}], propDecorators: { resourceName: [{
|
|
4662
4663
|
type: Input
|
|
4663
4664
|
}], resourceNameTranslated: [{
|
|
@@ -4668,6 +4669,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
4668
4669
|
type: Input
|
|
4669
4670
|
}], fetching: [{
|
|
4670
4671
|
type: Input
|
|
4672
|
+
}], showEmptyIcon: [{
|
|
4673
|
+
type: Input
|
|
4671
4674
|
}], context: [{
|
|
4672
4675
|
type: Input
|
|
4673
4676
|
}], minHeight: [{
|
|
@@ -11585,7 +11588,7 @@ class ArrayFormTableComponent {
|
|
|
11585
11588
|
this.destroy$$.complete();
|
|
11586
11589
|
}
|
|
11587
11590
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ArrayFormTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11588
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ArrayFormTableComponent, isStandalone: true, selector: "acl-array-form-table", inputs: { rowSeparator: "rowSeparator", rows: "rows", resourceName: "resourceName", resourceNameTranslated: "resourceNameTranslated", readonly: "readonly", addDisabled: "addDisabled", actionColumnDivider: "actionColumnDivider", showZeroState: "showZeroState", showRowError: "showRowError", rowBackgroundColorFn: "rowBackgroundColorFn", minRow: "minRow", minRowTooltip: "minRowTooltip", maxRow: "maxRow", maxRowTooltip: "maxRowTooltip" }, outputs: { add: "add", remove: "remove" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ArrayFormTableHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "rowErrorTemplate", first: true, predicate: ArrayFormTableRowErrorDirective, descendants: true, read: TemplateRef }, { propertyName: "rowControlTemplate", first: true, predicate: ArrayFormTableRowControlDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "footerTemplate", first: true, predicate: ArrayFormTableFooterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "zeroStateTemplate", first: true, predicate: ArrayFormTableZeroStateDirective, descendants: true, read: TemplateRef }, { propertyName: "separatorTemplate", first: true, predicate: ArrayFormTableRowSeparatorDirective, descendants: true, read: TemplateRef }, { propertyName: "ngFormGroupDirective", first: true, predicate: FormGroupDirective, descendants: true }, { propertyName: "rowTemplates", predicate: ArrayFormTableRowDirective, read: TemplateRef }], ngImport: i0, template: "<table\n class=\"acl-array-form-table\"\n [class.acl-array-form-table__readonly-mode]=\"readonly\"\n>\n @if (headerTemplate) {\n <thead>\n <tr>\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n @if (!readonly && minRow !== maxRow) {\n <th class=\"acl-array-form-table__action-col\"></th>\n }\n </tr>\n </thead>\n }\n <tbody>\n @for (row of rows; track row; let index = $index) {\n @for (\n rowTemplate of rowTemplates;\n track rowTemplate;\n let templateIndex = $index\n ) {\n <tr\n [class.acl-array-form-table__row-error]=\"\n row | pure: shouldShowRowError | async\n \"\n [attr.rowtemplateindex]=\"templateIndex\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowTemplate;\n context: { $implicit: row, index: index }\n \"\n ></ng-container>\n @if (templateIndex === 0 && !readonly && minRow !== maxRow) {\n <td\n class=\"acl-array-form-table__action-col\"\n [class.acl-array-form-table__action-col-divider]=\"\n actionColumnDivider\n \"\n >\n @if (rowControlTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n rowControlTemplate;\n context: { $implicit: row, index: index }\n \"\n ></ng-container>\n }\n <div\n [auiTooltip]=\"minRowTooltip\"\n [auiTooltipDisabled]=\"rows?.length > minRow || !minRowTooltip\"\n >\n @if (!rowControlTemplate) {\n <button\n aui-button=\"text\"\n type=\"button\"\n [disabled]=\"rows?.length <= minRow\"\n [square]=\"true\"\n [plain]=\"true\"\n (click)=\"remove.emit(index)\"\n >\n <aui-icon icon=\"minus_circle\"></aui-icon>\n </button>\n }\n </div>\n </td>\n }\n </tr>\n }\n @if (rowErrorTemplate && !readonly) {\n <tr\n [class.acl-array-form-table__row-error]=\"\n row | pure: shouldShowRowError | async\n \"\n [hidden]=\"!(row | pure: shouldShowRowError | async)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowErrorTemplate;\n context: { $implicit: row, index: index }\n \"\n ></ng-container>\n </tr>\n }\n @if (\n (rowSeparator || separatorTemplate) &&\n rows?.length > 1 &&\n index !== rows?.length - 1\n ) {\n <tr class=\"acl-array-form-table__separator\">\n <td colspan=\"100\">\n @if (separatorTemplate) {\n <ng-container\n *ngTemplateOutlet=\"separatorTemplate\"\n ></ng-container>\n } @else {\n <div class=\"separator-spacer\"></div>\n }\n </td>\n </tr>\n }\n }\n\n @if ((!rows || rows.length === 0) && showZeroState) {\n <tr>\n <td\n colspan=\"100\"\n style=\"padding: unset\"\n >\n @if (!zeroStateTemplate) {\n <acl-zero-state\n [zeroState]=\"true\"\n [resourceName]=\"resourceName\"\n [resourceNameTranslated]=\"resourceNameTranslated\"\n [minHeight]=\"48\"\n ></acl-zero-state>\n }\n @if (zeroStateTemplate) {\n <ng-container *ngTemplateOutlet=\"zeroStateTemplate\"></ng-container>\n }\n </td>\n </tr>\n }\n\n @if (!readonly && minRow !== maxRow) {\n <tr class=\"acl-array-form-table--row-action\">\n <td colspan=\"100\">\n <div class=\"acl-array-form-table__bottom-control-buttons\">\n @if (footerTemplate) {\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n }\n @if (!footerTemplate) {\n <div\n class=\"add-button-wrapper\"\n [auiTooltip]=\"maxRowTooltip\"\n [auiTooltipDisabled]=\"rows?.length < maxRow || !maxRowTooltip\"\n >\n <button\n aui-button=\"primary\"\n type=\"button\"\n [plain]=\"true\"\n size=\"mini\"\n (click)=\"add.emit()\"\n [disabled]=\"rows?.length >= maxRow || addDisabled\"\n >\n <aui-icon icon=\"plus_circle\"></aui-icon>\n {{ 'add' | translate }}\n </button>\n </div>\n }\n </div>\n </td>\n </tr>\n }\n </tbody>\n</table>\n", styles: [":host::ng-deep .acl-array-form-table{flex:1;width:100%;border-spacing:0;border:12px solid rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-l);border-collapse:unset}:host::ng-deep .acl-array-form-table thead{background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table thead th,:host::ng-deep .acl-array-form-table thead td{line-height:20px;color:rgb(var(--aui-color-n-1));text-align:left;font-weight:500;padding:0 0 12px 8px}:host::ng-deep .acl-array-form-table thead th[required]:before,:host::ng-deep .acl-array-form-table thead td[required]:before{content:\"*\";color:rgb(var(--aui-color-red));margin-right:4px}:host::ng-deep .acl-array-form-table tbody>tr{background-color:rgb(var(--aui-color-n-10));border-radius:2px}:host::ng-deep .acl-array-form-table tbody>tr:first-child>td{border-top:unset}:host::ng-deep .acl-array-form-table tbody td{padding:8px 0 8px 8px;vertical-align:middle}:host::ng-deep .acl-array-form-table tbody td:last-child{padding:8px}:host::ng-deep .acl-array-form-table tr.acl-array-form-table__row-error:not(:has(+.acl-array-form-table__row-error:empty)){background-color:rgb(var(--aui-color-r-6))}:host::ng-deep .acl-array-form-table tr.acl-array-form-table--row-action td{padding:unset;border-bottom:unset;padding-bottom:unset;border-top:8px solid rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table tr.acl-array-form-table__separator td{padding:0;background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table th.acl-array-form-table__action-col{min-width:48px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col{padding:8px;text-align:center;white-space:nowrap;vertical-align:middle;width:24px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col .aui-button--text.isPlain{font-size:16px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col .action-col__vertical{display:flex;flex-direction:column;align-items:center;justify-content:center}:host::ng-deep .acl-array-form-table tbody td.acl-table-form-error-hint{margin-top:-4px;border-top:none;padding-top:0;color:rgb(var(--aui-color-red));font-size:12px}:host::ng-deep .acl-array-form-table tbody td.acl-table-form-error-hint acl-errors-mapper .acl-error-hint{margin-top:0}:host::ng-deep .acl-array-form-table__bottom-control-buttons{display:flex;width:100%;background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button{flex:1}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button--default{color:rgb(var(--aui-color-secondary-text))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]){background-color:rgb(var(--aui-color-n-10))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]):hover{background-color:rgb(var(--aui-color-p-6))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]):active{background-color:rgb(var(--aui-color-p-5))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button.aui-button--primary.isPlain[disabled]{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button{border-style:unset;font-size:14px;height:28px;border-radius:2px}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button aui-icon{font-size:16px}:host::ng-deep .acl-array-form-table__readonly-mode{border-radius:var(--aui-border-radius-l);border-collapse:separate}:host::ng-deep .acl-array-form-table__readonly-mode th .aui-checkbox,:host::ng-deep .acl-array-form-table__readonly-mode td .aui-checkbox{margin:unset}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td{padding:0 10px 12px;border-top:none}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th:first-child,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td:first-child{padding-left:20px}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th:last-child,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td:last-child{padding-right:20px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr{height:58px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td{padding:15px 10px;border:1px solid rgb(var(--aui-color-n-8));border-bottom-width:0}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:not(:last-child){border-right:none}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:not(:first-child){border-left:none}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:first-child{padding-left:19px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:last-child{padding:15px 19px 15px 10px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td{border-bottom-width:1px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td:first-child{border-bottom-left-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td:last-child{border-bottom-right-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td{border-top:1px solid rgb(var(--aui-color-n-8))}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td:first-child{border-top-left-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td:last-child{border-top-right-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__action-col-divider{border-left:1px solid rgb(var(--aui-color-n-8))}.separator-spacer{height:8px}.add-button-wrapper{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "component", type: ZeroStateComponent, selector: "acl-zero-state", inputs: ["resourceName", "resourceNameTranslated", "customPlaceholder", "zeroState", "fetching", "context", "minHeight"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "directive", type: E2eAttributeBindingDirective, selector: "[click],[routerLink],a[href],[auiTooltip],[auiDropdown]" }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
11591
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ArrayFormTableComponent, isStandalone: true, selector: "acl-array-form-table", inputs: { rowSeparator: "rowSeparator", rows: "rows", resourceName: "resourceName", resourceNameTranslated: "resourceNameTranslated", readonly: "readonly", addDisabled: "addDisabled", actionColumnDivider: "actionColumnDivider", showZeroState: "showZeroState", showRowError: "showRowError", rowBackgroundColorFn: "rowBackgroundColorFn", minRow: "minRow", minRowTooltip: "minRowTooltip", maxRow: "maxRow", maxRowTooltip: "maxRowTooltip" }, outputs: { add: "add", remove: "remove" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ArrayFormTableHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "rowErrorTemplate", first: true, predicate: ArrayFormTableRowErrorDirective, descendants: true, read: TemplateRef }, { propertyName: "rowControlTemplate", first: true, predicate: ArrayFormTableRowControlDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "footerTemplate", first: true, predicate: ArrayFormTableFooterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "zeroStateTemplate", first: true, predicate: ArrayFormTableZeroStateDirective, descendants: true, read: TemplateRef }, { propertyName: "separatorTemplate", first: true, predicate: ArrayFormTableRowSeparatorDirective, descendants: true, read: TemplateRef }, { propertyName: "ngFormGroupDirective", first: true, predicate: FormGroupDirective, descendants: true }, { propertyName: "rowTemplates", predicate: ArrayFormTableRowDirective, read: TemplateRef }], ngImport: i0, template: "<table\n class=\"acl-array-form-table\"\n [class.acl-array-form-table__readonly-mode]=\"readonly\"\n>\n @if (headerTemplate) {\n <thead>\n <tr>\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n @if (!readonly && minRow !== maxRow) {\n <th class=\"acl-array-form-table__action-col\"></th>\n }\n </tr>\n </thead>\n }\n <tbody>\n @for (row of rows; track row; let index = $index) {\n @for (\n rowTemplate of rowTemplates;\n track rowTemplate;\n let templateIndex = $index\n ) {\n <tr\n [class.acl-array-form-table__row-error]=\"\n row | pure: shouldShowRowError | async\n \"\n [attr.rowtemplateindex]=\"templateIndex\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowTemplate;\n context: { $implicit: row, index: index }\n \"\n ></ng-container>\n @if (templateIndex === 0 && !readonly && minRow !== maxRow) {\n <td\n class=\"acl-array-form-table__action-col\"\n [class.acl-array-form-table__action-col-divider]=\"\n actionColumnDivider\n \"\n >\n @if (rowControlTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n rowControlTemplate;\n context: { $implicit: row, index: index }\n \"\n ></ng-container>\n }\n <div\n [auiTooltip]=\"minRowTooltip\"\n [auiTooltipDisabled]=\"rows?.length > minRow || !minRowTooltip\"\n >\n @if (!rowControlTemplate) {\n <button\n aui-button=\"text\"\n type=\"button\"\n [disabled]=\"rows?.length <= minRow\"\n [square]=\"true\"\n [plain]=\"true\"\n (click)=\"remove.emit(index)\"\n >\n <aui-icon icon=\"minus_circle\"></aui-icon>\n </button>\n }\n </div>\n </td>\n }\n </tr>\n }\n @if (rowErrorTemplate && !readonly) {\n <tr\n [class.acl-array-form-table__row-error]=\"\n row | pure: shouldShowRowError | async\n \"\n [hidden]=\"!(row | pure: shouldShowRowError | async)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowErrorTemplate;\n context: { $implicit: row, index: index }\n \"\n ></ng-container>\n </tr>\n }\n @if (\n (rowSeparator || separatorTemplate) &&\n rows?.length > 1 &&\n index !== rows?.length - 1\n ) {\n <tr class=\"acl-array-form-table__separator\">\n <td colspan=\"100\">\n @if (separatorTemplate) {\n <ng-container\n *ngTemplateOutlet=\"separatorTemplate\"\n ></ng-container>\n } @else {\n <div class=\"separator-spacer\"></div>\n }\n </td>\n </tr>\n }\n }\n\n @if ((!rows || rows.length === 0) && showZeroState) {\n <tr>\n <td\n colspan=\"100\"\n style=\"padding: unset\"\n >\n @if (!zeroStateTemplate) {\n <acl-zero-state\n [zeroState]=\"true\"\n [showEmptyIcon]=\"false\"\n [resourceName]=\"resourceName\"\n [resourceNameTranslated]=\"resourceNameTranslated\"\n [minHeight]=\"48\"\n ></acl-zero-state>\n }\n @if (zeroStateTemplate) {\n <ng-container *ngTemplateOutlet=\"zeroStateTemplate\"></ng-container>\n }\n </td>\n </tr>\n }\n\n @if (!readonly && minRow !== maxRow) {\n <tr class=\"acl-array-form-table--row-action\">\n <td colspan=\"100\">\n <div class=\"acl-array-form-table__bottom-control-buttons\">\n @if (footerTemplate) {\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n }\n @if (!footerTemplate) {\n <div\n class=\"add-button-wrapper\"\n [auiTooltip]=\"maxRowTooltip\"\n [auiTooltipDisabled]=\"rows?.length < maxRow || !maxRowTooltip\"\n >\n <button\n aui-button=\"primary\"\n type=\"button\"\n [plain]=\"true\"\n size=\"mini\"\n (click)=\"add.emit()\"\n [disabled]=\"rows?.length >= maxRow || addDisabled\"\n >\n <aui-icon icon=\"plus_circle\"></aui-icon>\n {{ 'add' | translate }}\n </button>\n </div>\n }\n </div>\n </td>\n </tr>\n }\n </tbody>\n</table>\n", styles: [":host::ng-deep .acl-array-form-table{flex:1;width:100%;border-spacing:0;border:12px solid rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-l);border-collapse:unset}:host::ng-deep .acl-array-form-table thead{background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table thead th,:host::ng-deep .acl-array-form-table thead td{line-height:20px;color:rgb(var(--aui-color-n-1));text-align:left;font-weight:500;padding:0 0 12px 8px}:host::ng-deep .acl-array-form-table thead th[required]:before,:host::ng-deep .acl-array-form-table thead td[required]:before{content:\"*\";color:rgb(var(--aui-color-red));margin-right:4px}:host::ng-deep .acl-array-form-table tbody>tr{background-color:rgb(var(--aui-color-n-10));border-radius:2px}:host::ng-deep .acl-array-form-table tbody>tr:first-child>td{border-top:unset}:host::ng-deep .acl-array-form-table tbody td{padding:8px 0 8px 8px;vertical-align:middle}:host::ng-deep .acl-array-form-table tbody td:last-child{padding:8px}:host::ng-deep .acl-array-form-table tr.acl-array-form-table__row-error:not(:has(+.acl-array-form-table__row-error:empty)){background-color:rgb(var(--aui-color-r-6))}:host::ng-deep .acl-array-form-table tr.acl-array-form-table--row-action td{padding:unset;border-bottom:unset;padding-bottom:unset;border-top:8px solid rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table tr.acl-array-form-table__separator td{padding:0;background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table th.acl-array-form-table__action-col{min-width:48px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col{padding:8px;text-align:center;white-space:nowrap;vertical-align:middle;width:24px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col .aui-button--text.isPlain{font-size:16px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col .action-col__vertical{display:flex;flex-direction:column;align-items:center;justify-content:center}:host::ng-deep .acl-array-form-table tbody td.acl-table-form-error-hint{margin-top:-4px;border-top:none;padding-top:0;color:rgb(var(--aui-color-red));font-size:12px}:host::ng-deep .acl-array-form-table tbody td.acl-table-form-error-hint acl-errors-mapper .acl-error-hint{margin-top:0}:host::ng-deep .acl-array-form-table__bottom-control-buttons{display:flex;width:100%;background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button{flex:1}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button--default{color:rgb(var(--aui-color-secondary-text))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]){background-color:rgb(var(--aui-color-n-10))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]):hover{background-color:rgb(var(--aui-color-p-6))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]):active{background-color:rgb(var(--aui-color-p-5))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button.aui-button--primary.isPlain[disabled]{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button{border-style:unset;font-size:14px;height:28px;border-radius:2px}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button aui-icon{font-size:16px}:host::ng-deep .acl-array-form-table__readonly-mode{border-radius:var(--aui-border-radius-l);border-collapse:separate}:host::ng-deep .acl-array-form-table__readonly-mode th .aui-checkbox,:host::ng-deep .acl-array-form-table__readonly-mode td .aui-checkbox{margin:unset}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td{padding:0 10px 12px;border-top:none}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th:first-child,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td:first-child{padding-left:20px}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th:last-child,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td:last-child{padding-right:20px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr{height:58px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td{padding:15px 10px;border:1px solid rgb(var(--aui-color-n-8));border-bottom-width:0}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:not(:last-child){border-right:none}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:not(:first-child){border-left:none}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:first-child{padding-left:19px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:last-child{padding:15px 19px 15px 10px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td{border-bottom-width:1px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td:first-child{border-bottom-left-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td:last-child{border-bottom-right-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td{border-top:1px solid rgb(var(--aui-color-n-8))}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td:first-child{border-top-left-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td:last-child{border-top-right-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__action-col-divider{border-left:1px solid rgb(var(--aui-color-n-8))}.separator-spacer{height:8px}.add-button-wrapper{display:flex;width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick", "auiTooltipAnimType"], outputs: ["auiTooltipVisibleChange"], exportAs: ["auiTooltip"] }, { kind: "component", type: ZeroStateComponent, selector: "acl-zero-state", inputs: ["resourceName", "resourceNameTranslated", "customPlaceholder", "zeroState", "fetching", "showEmptyIcon", "context", "minHeight"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1.ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "directive", type: E2eAttributeBindingDirective, selector: "[click],[routerLink],a[href],[auiTooltip],[auiDropdown]" }, { kind: "pipe", type: PurePipe, name: "pure" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
|
|
11589
11592
|
}
|
|
11590
11593
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ArrayFormTableComponent, decorators: [{
|
|
11591
11594
|
type: Component,
|
|
@@ -11599,7 +11602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
11599
11602
|
AsyncPipe,
|
|
11600
11603
|
TranslatePipe,
|
|
11601
11604
|
EFFECT_DIRECTIVE_MODULE,
|
|
11602
|
-
], standalone: true, template: "<table\n class=\"acl-array-form-table\"\n [class.acl-array-form-table__readonly-mode]=\"readonly\"\n>\n @if (headerTemplate) {\n <thead>\n <tr>\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n @if (!readonly && minRow !== maxRow) {\n <th class=\"acl-array-form-table__action-col\"></th>\n }\n </tr>\n </thead>\n }\n <tbody>\n @for (row of rows; track row; let index = $index) {\n @for (\n rowTemplate of rowTemplates;\n track rowTemplate;\n let templateIndex = $index\n ) {\n <tr\n [class.acl-array-form-table__row-error]=\"\n row | pure: shouldShowRowError | async\n \"\n [attr.rowtemplateindex]=\"templateIndex\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowTemplate;\n context: { $implicit: row, index: index }\n \"\n ></ng-container>\n @if (templateIndex === 0 && !readonly && minRow !== maxRow) {\n <td\n class=\"acl-array-form-table__action-col\"\n [class.acl-array-form-table__action-col-divider]=\"\n actionColumnDivider\n \"\n >\n @if (rowControlTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n rowControlTemplate;\n context: { $implicit: row, index: index }\n \"\n ></ng-container>\n }\n <div\n [auiTooltip]=\"minRowTooltip\"\n [auiTooltipDisabled]=\"rows?.length > minRow || !minRowTooltip\"\n >\n @if (!rowControlTemplate) {\n <button\n aui-button=\"text\"\n type=\"button\"\n [disabled]=\"rows?.length <= minRow\"\n [square]=\"true\"\n [plain]=\"true\"\n (click)=\"remove.emit(index)\"\n >\n <aui-icon icon=\"minus_circle\"></aui-icon>\n </button>\n }\n </div>\n </td>\n }\n </tr>\n }\n @if (rowErrorTemplate && !readonly) {\n <tr\n [class.acl-array-form-table__row-error]=\"\n row | pure: shouldShowRowError | async\n \"\n [hidden]=\"!(row | pure: shouldShowRowError | async)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowErrorTemplate;\n context: { $implicit: row, index: index }\n \"\n ></ng-container>\n </tr>\n }\n @if (\n (rowSeparator || separatorTemplate) &&\n rows?.length > 1 &&\n index !== rows?.length - 1\n ) {\n <tr class=\"acl-array-form-table__separator\">\n <td colspan=\"100\">\n @if (separatorTemplate) {\n <ng-container\n *ngTemplateOutlet=\"separatorTemplate\"\n ></ng-container>\n } @else {\n <div class=\"separator-spacer\"></div>\n }\n </td>\n </tr>\n }\n }\n\n @if ((!rows || rows.length === 0) && showZeroState) {\n <tr>\n <td\n colspan=\"100\"\n style=\"padding: unset\"\n >\n @if (!zeroStateTemplate) {\n <acl-zero-state\n [zeroState]=\"true\"\n [resourceName]=\"resourceName\"\n [resourceNameTranslated]=\"resourceNameTranslated\"\n [minHeight]=\"48\"\n ></acl-zero-state>\n }\n @if (zeroStateTemplate) {\n <ng-container *ngTemplateOutlet=\"zeroStateTemplate\"></ng-container>\n }\n </td>\n </tr>\n }\n\n @if (!readonly && minRow !== maxRow) {\n <tr class=\"acl-array-form-table--row-action\">\n <td colspan=\"100\">\n <div class=\"acl-array-form-table__bottom-control-buttons\">\n @if (footerTemplate) {\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n }\n @if (!footerTemplate) {\n <div\n class=\"add-button-wrapper\"\n [auiTooltip]=\"maxRowTooltip\"\n [auiTooltipDisabled]=\"rows?.length < maxRow || !maxRowTooltip\"\n >\n <button\n aui-button=\"primary\"\n type=\"button\"\n [plain]=\"true\"\n size=\"mini\"\n (click)=\"add.emit()\"\n [disabled]=\"rows?.length >= maxRow || addDisabled\"\n >\n <aui-icon icon=\"plus_circle\"></aui-icon>\n {{ 'add' | translate }}\n </button>\n </div>\n }\n </div>\n </td>\n </tr>\n }\n </tbody>\n</table>\n", styles: [":host::ng-deep .acl-array-form-table{flex:1;width:100%;border-spacing:0;border:12px solid rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-l);border-collapse:unset}:host::ng-deep .acl-array-form-table thead{background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table thead th,:host::ng-deep .acl-array-form-table thead td{line-height:20px;color:rgb(var(--aui-color-n-1));text-align:left;font-weight:500;padding:0 0 12px 8px}:host::ng-deep .acl-array-form-table thead th[required]:before,:host::ng-deep .acl-array-form-table thead td[required]:before{content:\"*\";color:rgb(var(--aui-color-red));margin-right:4px}:host::ng-deep .acl-array-form-table tbody>tr{background-color:rgb(var(--aui-color-n-10));border-radius:2px}:host::ng-deep .acl-array-form-table tbody>tr:first-child>td{border-top:unset}:host::ng-deep .acl-array-form-table tbody td{padding:8px 0 8px 8px;vertical-align:middle}:host::ng-deep .acl-array-form-table tbody td:last-child{padding:8px}:host::ng-deep .acl-array-form-table tr.acl-array-form-table__row-error:not(:has(+.acl-array-form-table__row-error:empty)){background-color:rgb(var(--aui-color-r-6))}:host::ng-deep .acl-array-form-table tr.acl-array-form-table--row-action td{padding:unset;border-bottom:unset;padding-bottom:unset;border-top:8px solid rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table tr.acl-array-form-table__separator td{padding:0;background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table th.acl-array-form-table__action-col{min-width:48px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col{padding:8px;text-align:center;white-space:nowrap;vertical-align:middle;width:24px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col .aui-button--text.isPlain{font-size:16px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col .action-col__vertical{display:flex;flex-direction:column;align-items:center;justify-content:center}:host::ng-deep .acl-array-form-table tbody td.acl-table-form-error-hint{margin-top:-4px;border-top:none;padding-top:0;color:rgb(var(--aui-color-red));font-size:12px}:host::ng-deep .acl-array-form-table tbody td.acl-table-form-error-hint acl-errors-mapper .acl-error-hint{margin-top:0}:host::ng-deep .acl-array-form-table__bottom-control-buttons{display:flex;width:100%;background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button{flex:1}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button--default{color:rgb(var(--aui-color-secondary-text))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]){background-color:rgb(var(--aui-color-n-10))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]):hover{background-color:rgb(var(--aui-color-p-6))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]):active{background-color:rgb(var(--aui-color-p-5))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button.aui-button--primary.isPlain[disabled]{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button{border-style:unset;font-size:14px;height:28px;border-radius:2px}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button aui-icon{font-size:16px}:host::ng-deep .acl-array-form-table__readonly-mode{border-radius:var(--aui-border-radius-l);border-collapse:separate}:host::ng-deep .acl-array-form-table__readonly-mode th .aui-checkbox,:host::ng-deep .acl-array-form-table__readonly-mode td .aui-checkbox{margin:unset}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td{padding:0 10px 12px;border-top:none}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th:first-child,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td:first-child{padding-left:20px}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th:last-child,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td:last-child{padding-right:20px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr{height:58px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td{padding:15px 10px;border:1px solid rgb(var(--aui-color-n-8));border-bottom-width:0}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:not(:last-child){border-right:none}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:not(:first-child){border-left:none}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:first-child{padding-left:19px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:last-child{padding:15px 19px 15px 10px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td{border-bottom-width:1px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td:first-child{border-bottom-left-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td:last-child{border-bottom-right-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td{border-top:1px solid rgb(var(--aui-color-n-8))}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td:first-child{border-top-left-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td:last-child{border-top-right-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__action-col-divider{border-left:1px solid rgb(var(--aui-color-n-8))}.separator-spacer{height:8px}.add-button-wrapper{display:flex;width:100%}\n"] }]
|
|
11605
|
+
], standalone: true, template: "<table\n class=\"acl-array-form-table\"\n [class.acl-array-form-table__readonly-mode]=\"readonly\"\n>\n @if (headerTemplate) {\n <thead>\n <tr>\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n @if (!readonly && minRow !== maxRow) {\n <th class=\"acl-array-form-table__action-col\"></th>\n }\n </tr>\n </thead>\n }\n <tbody>\n @for (row of rows; track row; let index = $index) {\n @for (\n rowTemplate of rowTemplates;\n track rowTemplate;\n let templateIndex = $index\n ) {\n <tr\n [class.acl-array-form-table__row-error]=\"\n row | pure: shouldShowRowError | async\n \"\n [attr.rowtemplateindex]=\"templateIndex\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowTemplate;\n context: { $implicit: row, index: index }\n \"\n ></ng-container>\n @if (templateIndex === 0 && !readonly && minRow !== maxRow) {\n <td\n class=\"acl-array-form-table__action-col\"\n [class.acl-array-form-table__action-col-divider]=\"\n actionColumnDivider\n \"\n >\n @if (rowControlTemplate) {\n <ng-container\n *ngTemplateOutlet=\"\n rowControlTemplate;\n context: { $implicit: row, index: index }\n \"\n ></ng-container>\n }\n <div\n [auiTooltip]=\"minRowTooltip\"\n [auiTooltipDisabled]=\"rows?.length > minRow || !minRowTooltip\"\n >\n @if (!rowControlTemplate) {\n <button\n aui-button=\"text\"\n type=\"button\"\n [disabled]=\"rows?.length <= minRow\"\n [square]=\"true\"\n [plain]=\"true\"\n (click)=\"remove.emit(index)\"\n >\n <aui-icon icon=\"minus_circle\"></aui-icon>\n </button>\n }\n </div>\n </td>\n }\n </tr>\n }\n @if (rowErrorTemplate && !readonly) {\n <tr\n [class.acl-array-form-table__row-error]=\"\n row | pure: shouldShowRowError | async\n \"\n [hidden]=\"!(row | pure: shouldShowRowError | async)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n rowErrorTemplate;\n context: { $implicit: row, index: index }\n \"\n ></ng-container>\n </tr>\n }\n @if (\n (rowSeparator || separatorTemplate) &&\n rows?.length > 1 &&\n index !== rows?.length - 1\n ) {\n <tr class=\"acl-array-form-table__separator\">\n <td colspan=\"100\">\n @if (separatorTemplate) {\n <ng-container\n *ngTemplateOutlet=\"separatorTemplate\"\n ></ng-container>\n } @else {\n <div class=\"separator-spacer\"></div>\n }\n </td>\n </tr>\n }\n }\n\n @if ((!rows || rows.length === 0) && showZeroState) {\n <tr>\n <td\n colspan=\"100\"\n style=\"padding: unset\"\n >\n @if (!zeroStateTemplate) {\n <acl-zero-state\n [zeroState]=\"true\"\n [showEmptyIcon]=\"false\"\n [resourceName]=\"resourceName\"\n [resourceNameTranslated]=\"resourceNameTranslated\"\n [minHeight]=\"48\"\n ></acl-zero-state>\n }\n @if (zeroStateTemplate) {\n <ng-container *ngTemplateOutlet=\"zeroStateTemplate\"></ng-container>\n }\n </td>\n </tr>\n }\n\n @if (!readonly && minRow !== maxRow) {\n <tr class=\"acl-array-form-table--row-action\">\n <td colspan=\"100\">\n <div class=\"acl-array-form-table__bottom-control-buttons\">\n @if (footerTemplate) {\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n }\n @if (!footerTemplate) {\n <div\n class=\"add-button-wrapper\"\n [auiTooltip]=\"maxRowTooltip\"\n [auiTooltipDisabled]=\"rows?.length < maxRow || !maxRowTooltip\"\n >\n <button\n aui-button=\"primary\"\n type=\"button\"\n [plain]=\"true\"\n size=\"mini\"\n (click)=\"add.emit()\"\n [disabled]=\"rows?.length >= maxRow || addDisabled\"\n >\n <aui-icon icon=\"plus_circle\"></aui-icon>\n {{ 'add' | translate }}\n </button>\n </div>\n }\n </div>\n </td>\n </tr>\n }\n </tbody>\n</table>\n", styles: [":host::ng-deep .acl-array-form-table{flex:1;width:100%;border-spacing:0;border:12px solid rgb(var(--aui-color-n-9));border-radius:var(--aui-border-radius-l);border-collapse:unset}:host::ng-deep .acl-array-form-table thead{background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table thead th,:host::ng-deep .acl-array-form-table thead td{line-height:20px;color:rgb(var(--aui-color-n-1));text-align:left;font-weight:500;padding:0 0 12px 8px}:host::ng-deep .acl-array-form-table thead th[required]:before,:host::ng-deep .acl-array-form-table thead td[required]:before{content:\"*\";color:rgb(var(--aui-color-red));margin-right:4px}:host::ng-deep .acl-array-form-table tbody>tr{background-color:rgb(var(--aui-color-n-10));border-radius:2px}:host::ng-deep .acl-array-form-table tbody>tr:first-child>td{border-top:unset}:host::ng-deep .acl-array-form-table tbody td{padding:8px 0 8px 8px;vertical-align:middle}:host::ng-deep .acl-array-form-table tbody td:last-child{padding:8px}:host::ng-deep .acl-array-form-table tr.acl-array-form-table__row-error:not(:has(+.acl-array-form-table__row-error:empty)){background-color:rgb(var(--aui-color-r-6))}:host::ng-deep .acl-array-form-table tr.acl-array-form-table--row-action td{padding:unset;border-bottom:unset;padding-bottom:unset;border-top:8px solid rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table tr.acl-array-form-table__separator td{padding:0;background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table th.acl-array-form-table__action-col{min-width:48px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col{padding:8px;text-align:center;white-space:nowrap;vertical-align:middle;width:24px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col .aui-button--text.isPlain{font-size:16px}:host::ng-deep .acl-array-form-table td.acl-array-form-table__action-col .action-col__vertical{display:flex;flex-direction:column;align-items:center;justify-content:center}:host::ng-deep .acl-array-form-table tbody td.acl-table-form-error-hint{margin-top:-4px;border-top:none;padding-top:0;color:rgb(var(--aui-color-red));font-size:12px}:host::ng-deep .acl-array-form-table tbody td.acl-table-form-error-hint acl-errors-mapper .acl-error-hint{margin-top:0}:host::ng-deep .acl-array-form-table__bottom-control-buttons{display:flex;width:100%;background-color:rgb(var(--aui-color-n-9))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button{flex:1}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button--default{color:rgb(var(--aui-color-secondary-text))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]){background-color:rgb(var(--aui-color-n-10))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]):hover{background-color:rgb(var(--aui-color-p-6))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button:not([disabled]):active{background-color:rgb(var(--aui-color-p-5))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button.aui-button--primary.isPlain[disabled]{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-n-6))}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button{border-style:unset;font-size:14px;height:28px;border-radius:2px}:host::ng-deep .acl-array-form-table__bottom-control-buttons .aui-button aui-icon{font-size:16px}:host::ng-deep .acl-array-form-table__readonly-mode{border-radius:var(--aui-border-radius-l);border-collapse:separate}:host::ng-deep .acl-array-form-table__readonly-mode th .aui-checkbox,:host::ng-deep .acl-array-form-table__readonly-mode td .aui-checkbox{margin:unset}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td{padding:0 10px 12px;border-top:none}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th:first-child,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td:first-child{padding-left:20px}:host::ng-deep .acl-array-form-table__readonly-mode thead tr th:last-child,:host::ng-deep .acl-array-form-table__readonly-mode thead tr td:last-child{padding-right:20px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr{height:58px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td{padding:15px 10px;border:1px solid rgb(var(--aui-color-n-8));border-bottom-width:0}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:not(:last-child){border-right:none}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:not(:first-child){border-left:none}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:first-child{padding-left:19px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr td:last-child{padding:15px 19px 15px 10px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td{border-bottom-width:1px}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td:first-child{border-bottom-left-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:last-child td:last-child{border-bottom-right-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td{border-top:1px solid rgb(var(--aui-color-n-8))}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td:first-child{border-top-left-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__readonly-mode tbody tr:first-child td:last-child{border-top-right-radius:var(--aui-border-radius-l)}:host::ng-deep .acl-array-form-table__action-col-divider{border-left:1px solid rgb(var(--aui-color-n-8))}.separator-spacer{height:8px}.add-button-wrapper{display:flex;width:100%}\n"] }]
|
|
11603
11606
|
}], propDecorators: { headerTemplate: [{
|
|
11604
11607
|
type: ContentChild,
|
|
11605
11608
|
args: [ArrayFormTableHeaderDirective, {
|