ngx-edu-sharing-ui 9999.0.3 → 9999.0.4
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.
- package/esm2022/lib/list-items/list-text/list-text.component.mjs +3 -3
- package/esm2022/lib/node-entries/node-entries-card-grid/node-entries-card-grid.component.mjs +5 -5
- package/esm2022/lib/services/node-entries.service.mjs +1 -1
- package/fesm2022/ngx-edu-sharing-ui.mjs +6 -6
- package/fesm2022/ngx-edu-sharing-ui.mjs.map +1 -1
- package/lib/list-items/list-text/list-text.component.d.ts +2 -2
- package/lib/node-entries/node-entries-card-grid/node-entries-card-grid.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -3804,11 +3804,11 @@ class ListTextComponent extends ListWidget {
|
|
|
3804
3804
|
}
|
|
3805
3805
|
}
|
|
3806
3806
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ListTextComponent, deps: [{ token: NodeHelperService }, { token: i2.MdsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3807
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: ListTextComponent, selector: "es-list-text", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"item.config?.showLabel\">\n {{ getI18n(item) | translate }}\n</label>\n<ng-container *ngIf=\"item.type === 'ORG' || item.type === 'GROUP'\">\n <ng-container [ngSwitch]=\"item.name\">\n <span *ngSwitchCase=\"'displayName'\" [class.type-danger]=\"isDangerousGroup()\">\n {{ $any(getNode()).profile?.displayName || $any(getNode()).authorityName }}\n </span>\n <span *ngSwitchCase=\"'groupType'\">\n {{ 'PERMISSIONS.GROUP_TYPE.' + $any(getNode()).profile?.groupType | translate }}\n </span>\n <span *ngSwitchDefault>\n {{ $any(getNode())[item.name] }}\n </span>\n </ng-container>\n</ng-container>\n<ng-container *ngIf=\"item.type === 'USER'\">\n <span *ngIf=\"isUserProfileAttribute(item.name)\">\n {{ $any(getNode()).profile?.[item.name] }}\n </span>\n <span *ngIf=\"item.name === 'status'\">\n {{ 'PERMISSIONS.USER_STATUS.' + $any(getNode()).status.status | translate }}\n </span>\n <span *ngIf=\"!isUserProfileAttribute(item.name) && item.name !== 'status'\">\n {{ $any(getNode())[item.name] }}\n </span>\n</ng-container>\n<ng-container\n [ngSwitch]=\"item.name\"\n *ngIf=\"item.type === 'NODE' || item.type === 'NODE_PROPOSAL' || item.type === 'COLLECTION'\"\n>\n <span *ngSwitchCase=\"'name'\">\n {{ $any(getNode()).name }}\n </span>\n <span\n *ngSwitchCase=\"'mediatype'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ 'MEDIATYPE.' + $any(getNode()).mediatype | translate }}\n </span>\n <span *ngSwitchCase=\"'size'\" [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\">\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ $any(getNode()).size | formatSize }}\n </span>\n <span\n *ngSwitchCase=\"'dimensions'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ $any(getNode()) | NodeImageSize }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:wf_status'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <es-list-node-workflow\n [item]=\"item\"\n [node]=\"node\"\n [provideLabel]=\"false\"\n ></es-list-node-workflow>\n <!--<span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ 'WORKFLOW.' + getWorkflowStatus().id | translate }}-->\n </span>\n <span\n *ngSwitchCase=\"'cm:creator'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ $any(getNode()).createdBy | nodePersonName }}\n </span>\n <span\n *ngSwitchCase=\"'cm:modifier'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.cm:modifier' | translate }}:</span\n >\n {{ $any(getNode()).modifiedBy | nodePersonName }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:replicationsource'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:replicationsource' | translate }}:</span\n >\n {{ $any(getNode()).properties['ccm:replicationsource'] | appNodeSource: { mode: 'text' } }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:commonlicense_key'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:commonlicense_key' | translate }}:</span\n >\n <ng-container *ngIf=\"$any(getNode()).properties['ccm:commonlicense_key'] as license\">\n {{\n license[0] === 'CUSTOM'\n ? $any(getNode()).properties['cclom:rights_description']\n : ('LICENSE.NAMES.' + $any(getNode()).properties['ccm:commonlicense_key']\n | translate: { fallback: $any(getNode()).properties['ccm:commonlicense_key'] })\n }}\n </ng-container>\n <ng-container *ngIf=\"!$any(getNode()).properties['ccm:commonlicense_key']\">\n {{ 'LICENSE.NAMES.NONE' | translate }}\n </ng-container>\n </span>\n <span\n *ngSwitchCase=\"'ccm:educationaltypicalagerange'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:educationaltypicalagerange' | translate }}:</span\n >\n <ng-container\n *ngIf=\"\n $any(getNode()).properties['ccm:educationaltypicalagerange_from'] ||\n $any(getNode()).properties['ccm:educationaltypicalagerange_to']\n \"\n >\n {{ $any(getNode()).properties['ccm:educationaltypicalagerange_from'] }} -\n {{ $any(getNode()).properties['ccm:educationaltypicalagerange_to'] }}\n </ng-container>\n </span>\n <span\n *ngSwitchCase=\"'cclom:duration'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.cclom:duration' | translate }}:</span\n >\n {{ $any(getNode()).properties['cclom:duration']?.[0] | formatDuration }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:collection_proposal_status'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:collection_proposal_status' | translate }}:</span\n >\n <!-- use node instead of getNode() to access the raw proposal data! -->\n {{\n 'PROPOSAL_STATUS.' + $any(node).properties['ccm:collection_proposal_status']?.[0]\n | translate: { fallback: '' }\n }}\n </span>\n <span\n *ngSwitchDefault\n esCheckTextOverflow\n #text=\"esCheckTextOverflow\"\n [matTooltip]=\"\n provideLabel ? (getI18n(item) | translate) : text.hasTextOverflow() ? content.innerText : null\n \"\n #content\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n <ng-container *ngIf=\"['title', 'cm:title', 'cclom:title'].includes(item.name)\">\n {{ $any(getNode()).title || $any(getNode()).name }}\n </ng-container>\n <ng-container *ngIf=\"!['title', 'cm:title', 'cclom:title'].includes(item.name)\">\n <ng-container\n *ngIf=\"DATE_FIELDS.indexOf(item.name) === -1 && VCARD_FIELDS.indexOf(item.name) === -1\"\n >\n {{ displayName$ | async }}\n </ng-container>\n <ng-container *ngIf=\"DATE_FIELDS.includes(item.name)\">\n {{\n $any(getNode()).properties[item.name]?.[0]\n | formatDate: { async: true, time: true, relative: true }\n | async\n }}\n </ng-container>\n <ng-container *ngIf=\"VCARD_FIELDS.includes(item.name)\">\n {{\n $any(getNode()).properties[item.name]\n ? ($any(getNode()).properties[item.name][0] | vcardName)\n : ''\n }}\n </ng-container>\n </ng-container>\n </span>\n</ng-container>\n", styles: [".type-danger{color:var(--warning)}span{display:block}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: CheckTextOverflowDirective, selector: "[esCheckTextOverflow]", inputs: ["esCheckTextOverflow"], exportAs: ["esCheckTextOverflow"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ListNodeWorkflowComponent, selector: "es-list-node-workflow" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: FormatDatePipe, name: "formatDate" }, { kind: "pipe", type: FormatSizePipe, name: "formatSize" }, { kind: "pipe", type: NodeImageSizePipe, name: "NodeImageSize" }, { kind: "pipe", type: NodePersonNamePipe, name: "nodePersonName" }, { kind: "pipe", type: VCardNamePipe, name: "vcardName" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NodeSourcePipe, name: "appNodeSource" }, { kind: "pipe", type: FormatDurationPipe, name: "formatDuration" }] }); }
|
|
3807
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: ListTextComponent, selector: "es-list-text", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"item.config?.showLabel\">\n {{ getI18n(item) | translate }}\n</label>\n<ng-container *ngIf=\"item.type === 'ORG' || item.type === 'GROUP'\">\n <ng-container [ngSwitch]=\"item.name\">\n <span *ngSwitchCase=\"'displayName'\" [class.type-danger]=\"isDangerousGroup()\">\n {{ $any(getNode()).profile?.displayName || $any(getNode()).authorityName }}\n </span>\n <span *ngSwitchCase=\"'groupType'\">\n {{ 'PERMISSIONS.GROUP_TYPE.' + $any(getNode()).profile?.groupType | translate }}\n </span>\n <span *ngSwitchDefault>\n {{ $any(getNode())[item.name] }}\n </span>\n </ng-container>\n</ng-container>\n<ng-container *ngIf=\"item.type === 'USER'\">\n <span *ngIf=\"isUserProfileAttribute(item.name)\">\n {{ $any(getNode()).profile?.[item.name] }}\n </span>\n <span *ngIf=\"item.name === 'status'\">\n {{ 'PERMISSIONS.USER_STATUS.' + $any(getNode()).status.status | translate }}\n </span>\n <span *ngIf=\"!isUserProfileAttribute(item.name) && item.name !== 'status'\">\n {{ $any(getNode())[item.name] }}\n </span>\n</ng-container>\n<ng-container\n [ngSwitch]=\"item.name\"\n *ngIf=\"item.type === 'NODE' || item.type === 'NODE_PROPOSAL' || item.type === 'COLLECTION'\"\n>\n <span *ngSwitchCase=\"'name'\">\n {{ $any(getNode()).name }}\n </span>\n <span\n *ngSwitchCase=\"'mediatype'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ 'MEDIATYPE.' + $any(getNode()).mediatype | translate }}\n </span>\n <span *ngSwitchCase=\"'size'\" [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\">\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ $any(getNode()).size | formatSize }}\n </span>\n <span\n *ngSwitchCase=\"'dimensions'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ $any(getNode()) | NodeImageSize }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:wf_status'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <es-list-node-workflow\n [item]=\"item\"\n [node]=\"node\"\n [provideLabel]=\"false\"\n ></es-list-node-workflow>\n <!--<span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ 'WORKFLOW.' + getWorkflowStatus().id | translate }}-->\n </span>\n <span\n *ngSwitchCase=\"'cm:creator'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ $any(getNode()).createdBy | nodePersonName }}\n </span>\n <span\n *ngSwitchCase=\"'cm:modifier'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.cm:modifier' | translate }}:</span\n >\n {{ $any(getNode()).modifiedBy | nodePersonName }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:replicationsource'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:replicationsource' | translate }}:</span\n >\n {{ $any(getNode()).properties['ccm:replicationsource'] | appNodeSource : { mode: 'text' } }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:commonlicense_key'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:commonlicense_key' | translate }}:</span\n >\n <ng-container *ngIf=\"$any(getNode()).properties['ccm:commonlicense_key'] as license\">\n {{\n license[0] === 'CUSTOM'\n ? $any(getNode()).properties['cclom:rights_description']\n : ('LICENSE.NAMES.' + $any(getNode()).properties['ccm:commonlicense_key']\n | translate : { fallback: $any(getNode()).properties['ccm:commonlicense_key'] })\n }}\n </ng-container>\n <ng-container *ngIf=\"!$any(getNode()).properties['ccm:commonlicense_key']\">\n {{ 'LICENSE.NAMES.NONE' | translate }}\n </ng-container>\n </span>\n <span\n *ngSwitchCase=\"'ccm:educationaltypicalagerange'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:educationaltypicalagerange' | translate }}:</span\n >\n <ng-container\n *ngIf=\"\n $any(getNode()).properties['ccm:educationaltypicalagerange_from'] ||\n $any(getNode()).properties['ccm:educationaltypicalagerange_to']\n \"\n >\n {{ $any(getNode()).properties['ccm:educationaltypicalagerange_from'] }} -\n {{ $any(getNode()).properties['ccm:educationaltypicalagerange_to'] }}\n </ng-container>\n </span>\n <span\n *ngSwitchCase=\"'cclom:duration'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.cclom:duration' | translate }}:</span\n >\n {{ $any(getNode()).properties['cclom:duration']?.[0] | formatDuration }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:collection_proposal_status'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:collection_proposal_status' | translate }}:</span\n >\n <!-- use node instead of getNode() to access the raw proposal data! -->\n {{\n 'PROPOSAL_STATUS.' + $any(node).properties['ccm:collection_proposal_status']?.[0]\n | translate: { fallback: '' }\n }}\n </span>\n <span\n *ngSwitchDefault\n esCheckTextOverflow\n #text=\"esCheckTextOverflow\"\n [matTooltip]=\"\n provideLabel ? (getI18n(item) | translate) : text.hasTextOverflow() ? content.innerText : null\n \"\n #content\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n <ng-container *ngIf=\"['title', 'cm:title', 'cclom:title'].includes(item.name)\">\n {{ $any(getNode()).title || $any(getNode()).name }}\n </ng-container>\n <ng-container *ngIf=\"!['title', 'cm:title', 'cclom:title'].includes(item.name)\">\n <ng-container\n *ngIf=\"DATE_FIELDS.indexOf(item.name) === -1 && VCARD_FIELDS.indexOf(item.name) === -1\"\n >\n {{ displayName$ | async }}\n </ng-container>\n <ng-container *ngIf=\"DATE_FIELDS.includes(item.name)\">\n {{\n $any(getNode()).properties[item.name]?.[0]\n | formatDate: { async: true, time: true, relative: true }\n | async\n }}\n </ng-container>\n <ng-container *ngIf=\"VCARD_FIELDS.includes(item.name)\">\n {{\n $any(getNode()).properties[item.name]\n ? ($any(getNode()).properties[item.name][0] | vcardName)\n : ''\n }}\n </ng-container>\n </ng-container>\n </span>\n</ng-container>\n", styles: [".type-danger{color:var(--warning)}span{display:block}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: CheckTextOverflowDirective, selector: "[esCheckTextOverflow]", inputs: ["esCheckTextOverflow"], exportAs: ["esCheckTextOverflow"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ListNodeWorkflowComponent, selector: "es-list-node-workflow" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: FormatDatePipe, name: "formatDate" }, { kind: "pipe", type: FormatSizePipe, name: "formatSize" }, { kind: "pipe", type: NodeImageSizePipe, name: "NodeImageSize" }, { kind: "pipe", type: NodePersonNamePipe, name: "nodePersonName" }, { kind: "pipe", type: VCardNamePipe, name: "vcardName" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: NodeSourcePipe, name: "appNodeSource" }, { kind: "pipe", type: FormatDurationPipe, name: "formatDuration" }] }); }
|
|
3808
3808
|
}
|
|
3809
3809
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ListTextComponent, decorators: [{
|
|
3810
3810
|
type: Component,
|
|
3811
|
-
args: [{ selector: 'es-list-text', template: "<label *ngIf=\"item.config?.showLabel\">\n {{ getI18n(item) | translate }}\n</label>\n<ng-container *ngIf=\"item.type === 'ORG' || item.type === 'GROUP'\">\n <ng-container [ngSwitch]=\"item.name\">\n <span *ngSwitchCase=\"'displayName'\" [class.type-danger]=\"isDangerousGroup()\">\n {{ $any(getNode()).profile?.displayName || $any(getNode()).authorityName }}\n </span>\n <span *ngSwitchCase=\"'groupType'\">\n {{ 'PERMISSIONS.GROUP_TYPE.' + $any(getNode()).profile?.groupType | translate }}\n </span>\n <span *ngSwitchDefault>\n {{ $any(getNode())[item.name] }}\n </span>\n </ng-container>\n</ng-container>\n<ng-container *ngIf=\"item.type === 'USER'\">\n <span *ngIf=\"isUserProfileAttribute(item.name)\">\n {{ $any(getNode()).profile?.[item.name] }}\n </span>\n <span *ngIf=\"item.name === 'status'\">\n {{ 'PERMISSIONS.USER_STATUS.' + $any(getNode()).status.status | translate }}\n </span>\n <span *ngIf=\"!isUserProfileAttribute(item.name) && item.name !== 'status'\">\n {{ $any(getNode())[item.name] }}\n </span>\n</ng-container>\n<ng-container\n [ngSwitch]=\"item.name\"\n *ngIf=\"item.type === 'NODE' || item.type === 'NODE_PROPOSAL' || item.type === 'COLLECTION'\"\n>\n <span *ngSwitchCase=\"'name'\">\n {{ $any(getNode()).name }}\n </span>\n <span\n *ngSwitchCase=\"'mediatype'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ 'MEDIATYPE.' + $any(getNode()).mediatype | translate }}\n </span>\n <span *ngSwitchCase=\"'size'\" [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\">\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ $any(getNode()).size | formatSize }}\n </span>\n <span\n *ngSwitchCase=\"'dimensions'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ $any(getNode()) | NodeImageSize }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:wf_status'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <es-list-node-workflow\n [item]=\"item\"\n [node]=\"node\"\n [provideLabel]=\"false\"\n ></es-list-node-workflow>\n <!--<span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ 'WORKFLOW.' + getWorkflowStatus().id | translate }}-->\n </span>\n <span\n *ngSwitchCase=\"'cm:creator'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ $any(getNode()).createdBy | nodePersonName }}\n </span>\n <span\n *ngSwitchCase=\"'cm:modifier'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.cm:modifier' | translate }}:</span\n >\n {{ $any(getNode()).modifiedBy | nodePersonName }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:replicationsource'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:replicationsource' | translate }}:</span\n >\n {{ $any(getNode()).properties['ccm:replicationsource'] | appNodeSource: { mode: 'text' } }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:commonlicense_key'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:commonlicense_key' | translate }}:</span\n >\n <ng-container *ngIf=\"$any(getNode()).properties['ccm:commonlicense_key'] as license\">\n {{\n license[0] === 'CUSTOM'\n ? $any(getNode()).properties['cclom:rights_description']\n : ('LICENSE.NAMES.' + $any(getNode()).properties['ccm:commonlicense_key']\n | translate: { fallback: $any(getNode()).properties['ccm:commonlicense_key'] })\n }}\n </ng-container>\n <ng-container *ngIf=\"!$any(getNode()).properties['ccm:commonlicense_key']\">\n {{ 'LICENSE.NAMES.NONE' | translate }}\n </ng-container>\n </span>\n <span\n *ngSwitchCase=\"'ccm:educationaltypicalagerange'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:educationaltypicalagerange' | translate }}:</span\n >\n <ng-container\n *ngIf=\"\n $any(getNode()).properties['ccm:educationaltypicalagerange_from'] ||\n $any(getNode()).properties['ccm:educationaltypicalagerange_to']\n \"\n >\n {{ $any(getNode()).properties['ccm:educationaltypicalagerange_from'] }} -\n {{ $any(getNode()).properties['ccm:educationaltypicalagerange_to'] }}\n </ng-container>\n </span>\n <span\n *ngSwitchCase=\"'cclom:duration'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.cclom:duration' | translate }}:</span\n >\n {{ $any(getNode()).properties['cclom:duration']?.[0] | formatDuration }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:collection_proposal_status'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:collection_proposal_status' | translate }}:</span\n >\n <!-- use node instead of getNode() to access the raw proposal data! -->\n {{\n 'PROPOSAL_STATUS.' + $any(node).properties['ccm:collection_proposal_status']?.[0]\n | translate: { fallback: '' }\n }}\n </span>\n <span\n *ngSwitchDefault\n esCheckTextOverflow\n #text=\"esCheckTextOverflow\"\n [matTooltip]=\"\n provideLabel ? (getI18n(item) | translate) : text.hasTextOverflow() ? content.innerText : null\n \"\n #content\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n <ng-container *ngIf=\"['title', 'cm:title', 'cclom:title'].includes(item.name)\">\n {{ $any(getNode()).title || $any(getNode()).name }}\n </ng-container>\n <ng-container *ngIf=\"!['title', 'cm:title', 'cclom:title'].includes(item.name)\">\n <ng-container\n *ngIf=\"DATE_FIELDS.indexOf(item.name) === -1 && VCARD_FIELDS.indexOf(item.name) === -1\"\n >\n {{ displayName$ | async }}\n </ng-container>\n <ng-container *ngIf=\"DATE_FIELDS.includes(item.name)\">\n {{\n $any(getNode()).properties[item.name]?.[0]\n | formatDate: { async: true, time: true, relative: true }\n | async\n }}\n </ng-container>\n <ng-container *ngIf=\"VCARD_FIELDS.includes(item.name)\">\n {{\n $any(getNode()).properties[item.name]\n ? ($any(getNode()).properties[item.name][0] | vcardName)\n : ''\n }}\n </ng-container>\n </ng-container>\n </span>\n</ng-container>\n", styles: [".type-danger{color:var(--warning)}span{display:block}\n"] }]
|
|
3811
|
+
args: [{ selector: 'es-list-text', template: "<label *ngIf=\"item.config?.showLabel\">\n {{ getI18n(item) | translate }}\n</label>\n<ng-container *ngIf=\"item.type === 'ORG' || item.type === 'GROUP'\">\n <ng-container [ngSwitch]=\"item.name\">\n <span *ngSwitchCase=\"'displayName'\" [class.type-danger]=\"isDangerousGroup()\">\n {{ $any(getNode()).profile?.displayName || $any(getNode()).authorityName }}\n </span>\n <span *ngSwitchCase=\"'groupType'\">\n {{ 'PERMISSIONS.GROUP_TYPE.' + $any(getNode()).profile?.groupType | translate }}\n </span>\n <span *ngSwitchDefault>\n {{ $any(getNode())[item.name] }}\n </span>\n </ng-container>\n</ng-container>\n<ng-container *ngIf=\"item.type === 'USER'\">\n <span *ngIf=\"isUserProfileAttribute(item.name)\">\n {{ $any(getNode()).profile?.[item.name] }}\n </span>\n <span *ngIf=\"item.name === 'status'\">\n {{ 'PERMISSIONS.USER_STATUS.' + $any(getNode()).status.status | translate }}\n </span>\n <span *ngIf=\"!isUserProfileAttribute(item.name) && item.name !== 'status'\">\n {{ $any(getNode())[item.name] }}\n </span>\n</ng-container>\n<ng-container\n [ngSwitch]=\"item.name\"\n *ngIf=\"item.type === 'NODE' || item.type === 'NODE_PROPOSAL' || item.type === 'COLLECTION'\"\n>\n <span *ngSwitchCase=\"'name'\">\n {{ $any(getNode()).name }}\n </span>\n <span\n *ngSwitchCase=\"'mediatype'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ 'MEDIATYPE.' + $any(getNode()).mediatype | translate }}\n </span>\n <span *ngSwitchCase=\"'size'\" [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\">\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ $any(getNode()).size | formatSize }}\n </span>\n <span\n *ngSwitchCase=\"'dimensions'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ $any(getNode()) | NodeImageSize }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:wf_status'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <es-list-node-workflow\n [item]=\"item\"\n [node]=\"node\"\n [provideLabel]=\"false\"\n ></es-list-node-workflow>\n <!--<span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ 'WORKFLOW.' + getWorkflowStatus().id | translate }}-->\n </span>\n <span\n *ngSwitchCase=\"'cm:creator'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n {{ $any(getNode()).createdBy | nodePersonName }}\n </span>\n <span\n *ngSwitchCase=\"'cm:modifier'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.cm:modifier' | translate }}:</span\n >\n {{ $any(getNode()).modifiedBy | nodePersonName }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:replicationsource'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:replicationsource' | translate }}:</span\n >\n {{ $any(getNode()).properties['ccm:replicationsource'] | appNodeSource : { mode: 'text' } }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:commonlicense_key'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:commonlicense_key' | translate }}:</span\n >\n <ng-container *ngIf=\"$any(getNode()).properties['ccm:commonlicense_key'] as license\">\n {{\n license[0] === 'CUSTOM'\n ? $any(getNode()).properties['cclom:rights_description']\n : ('LICENSE.NAMES.' + $any(getNode()).properties['ccm:commonlicense_key']\n | translate : { fallback: $any(getNode()).properties['ccm:commonlicense_key'] })\n }}\n </ng-container>\n <ng-container *ngIf=\"!$any(getNode()).properties['ccm:commonlicense_key']\">\n {{ 'LICENSE.NAMES.NONE' | translate }}\n </ng-container>\n </span>\n <span\n *ngSwitchCase=\"'ccm:educationaltypicalagerange'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:educationaltypicalagerange' | translate }}:</span\n >\n <ng-container\n *ngIf=\"\n $any(getNode()).properties['ccm:educationaltypicalagerange_from'] ||\n $any(getNode()).properties['ccm:educationaltypicalagerange_to']\n \"\n >\n {{ $any(getNode()).properties['ccm:educationaltypicalagerange_from'] }} -\n {{ $any(getNode()).properties['ccm:educationaltypicalagerange_to'] }}\n </ng-container>\n </span>\n <span\n *ngSwitchCase=\"'cclom:duration'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.cclom:duration' | translate }}:</span\n >\n {{ $any(getNode()).properties['cclom:duration']?.[0] | formatDuration }}\n </span>\n <span\n *ngSwitchCase=\"'ccm:collection_proposal_status'\"\n [matTooltip]=\"provideLabel ? (getI18n(item) | translate) : null\"\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\"\n >{{ 'NODE.ccm:collection_proposal_status' | translate }}:</span\n >\n <!-- use node instead of getNode() to access the raw proposal data! -->\n {{\n 'PROPOSAL_STATUS.' + $any(node).properties['ccm:collection_proposal_status']?.[0]\n | translate: { fallback: '' }\n }}\n </span>\n <span\n *ngSwitchDefault\n esCheckTextOverflow\n #text=\"esCheckTextOverflow\"\n [matTooltip]=\"\n provideLabel ? (getI18n(item) | translate) : text.hasTextOverflow() ? content.innerText : null\n \"\n #content\n >\n <span *ngIf=\"provideLabel\" class=\"cdk-visually-hidden\">{{ getI18n(item) | translate }}:</span>\n <ng-container *ngIf=\"['title', 'cm:title', 'cclom:title'].includes(item.name)\">\n {{ $any(getNode()).title || $any(getNode()).name }}\n </ng-container>\n <ng-container *ngIf=\"!['title', 'cm:title', 'cclom:title'].includes(item.name)\">\n <ng-container\n *ngIf=\"DATE_FIELDS.indexOf(item.name) === -1 && VCARD_FIELDS.indexOf(item.name) === -1\"\n >\n {{ displayName$ | async }}\n </ng-container>\n <ng-container *ngIf=\"DATE_FIELDS.includes(item.name)\">\n {{\n $any(getNode()).properties[item.name]?.[0]\n | formatDate: { async: true, time: true, relative: true }\n | async\n }}\n </ng-container>\n <ng-container *ngIf=\"VCARD_FIELDS.includes(item.name)\">\n {{\n $any(getNode()).properties[item.name]\n ? ($any(getNode()).properties[item.name][0] | vcardName)\n : ''\n }}\n </ng-container>\n </ng-container>\n </span>\n</ng-container>\n", styles: [".type-danger{color:var(--warning)}span{display:block}\n"] }]
|
|
3812
3812
|
}], ctorParameters: () => [{ type: NodeHelperService }, { type: i2.MdsService }, { type: i0.ChangeDetectorRef }] });
|
|
3813
3813
|
|
|
3814
3814
|
var ListWidgetType;
|
|
@@ -5472,18 +5472,18 @@ class NodeEntriesCardGridComponent {
|
|
|
5472
5472
|
behavior: 'smooth',
|
|
5473
5473
|
});
|
|
5474
5474
|
}
|
|
5475
|
-
isCustomTemplate() {
|
|
5476
|
-
return this.entriesService.dataSource instanceof CustomTemplatesDataSource;
|
|
5475
|
+
isCustomTemplate(node) {
|
|
5476
|
+
return this.entriesService.dataSource instanceof CustomTemplatesDataSource || (node.elementRef);
|
|
5477
5477
|
}
|
|
5478
5478
|
isBlocked(node) {
|
|
5479
5479
|
return node.properties?.[RestConstants.CCM_PROP_IMPORT_BLOCKED]?.[0] === 'true';
|
|
5480
5480
|
}
|
|
5481
5481
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NodeEntriesCardGridComponent, deps: [{ token: NodeEntriesService }, { token: NodeEntriesGlobalService }, { token: NodeEntriesTemplatesService }, { token: UIService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5482
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: NodeEntriesCardGridComponent, selector: "es-node-entries-card-grid", inputs: { displayType: "displayType" }, host: { properties: { "style.--scroll-gradient-color": "this.scrollGradientColor" } }, viewQueries: [{ propertyName: "columnChooserTrigger", first: true, predicate: ["columnChooserTrigger"], descendants: true }, { propertyName: "gridTop", first: true, predicate: ["gridTop"], descendants: true, static: true }, { propertyName: "sortPanel", first: true, predicate: SortSelectPanelComponent, descendants: true }, { propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true }, { propertyName: "dropListsQuery", predicate: CdkDropList, descendants: true }, { propertyName: "itemRefs", predicate: ["item"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-template #gridTop>\n <button\n *ngIf=\"entriesService.configureColumns\"\n mat-icon-button\n (click)=\"columnChooserVisible$.next(!columnChooserVisible$.value)\"\n cdkOverlayOrigin\n #columnChooserTrigger=\"cdkOverlayOrigin\"\n [matTooltip]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n [attr.aria-label]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n >\n <i esIcon=\"settings\"></i>\n </button>\n <es-sort-select-panel\n *ngIf=\"entriesService.sort?.allowed\"\n class=\"order-panel\"\n [active]=\"entriesService.sort.active\"\n [direction]=\"entriesService.sort.direction\"\n [columns]=\"getSortColumns()\"\n (sortChange)=\"onSortChange($event)\"\n [(customSortingInProgress)]=\"entriesService.sort.customSortingInProgress\"\n (customSortingInProgressChange)=\"onCustomSortingInProgressChange()\"\n ></es-sort-select-panel>\n</ng-template>\n<es-column-chooser\n *ngIf=\"entriesService.configureColumns\"\n [(columns)]=\"entriesService.columns\"\n [columnChooserVisible]=\"columnChooserVisible$ | async\"\n [origin]=\"columnChooserTrigger\"\n (columnChooserVisibleChange)=\"columnChooserVisible$.next($event)\"\n></es-column-chooser>\n<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n\n<!-- Do not render the list element (`role=\"list\"` or `li`) when there are no list items. -->\n<ng-container\n *ngIf=\"(nodes$ | async)?.length > 0 || (entriesService.globalOptionsSubject | async)?.length > 0\"\n>\n <!-- FIXME: Ideally, we would use native `ul` and `li` elements, but these have a strict model,\n that only allows `li` elements as direct children of `ul` elements. So we would need to use the\n native elements at all places without any elements between `ul` and `li`. -->\n <div\n *ngIf=\"entriesService.sort?.customSortingInProgress\"\n role=\"list\"\n class=\"card-grid card-grid-reorder\"\n cdkDropListGroup\n >\n <ng-container *ngIf=\"nodes$ | async as nodes\">\n <div\n class=\"card-grid-order-wrapper\"\n *ngFor=\"let node of nodes; let i = index\"\n role=\"none\"\n cdkDropList\n [cdkDropListConnectedTo]=\"dropLists\"\n [cdkDropListData]=\"i\"\n >\n <es-node-entries-card\n *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n #item\n [node]=\"node\"\n role=\"listitem\"\n cdkDrag\n [cdkDragData]=\"i\"\n [cdkDragStartDelay]=\"getDragStartDelay()\"\n cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n (cdkDragStarted)=\"onRearrangeDragStarted()\"\n (cdkDragEnded)=\"onRearrangeDragEnded()\"\n ></es-node-entries-card>\n <es-node-entries-card-small\n *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n #item\n [node]=\"node\"\n role=\"listitem\"\n cdkDrag\n [cdkDragData]=\"i\"\n [cdkDragStartDelay]=\"getDragStartDelay()\"\n cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n (cdkDragStarted)=\"onRearrangeDragStarted()\"\n (cdkDragEnded)=\"onRearrangeDragEnded()\"\n ></es-node-entries-card-small>\n </div>\n </ng-container>\n </div>\n <div class=\"card-grid-wrapper\" *ngIf=\"!entriesService.sort?.customSortingInProgress\">\n <ng-container *ngTemplateOutlet=\"scrollHelper\"></ng-container>\n <div\n role=\"list\"\n class=\"card-grid card-grid-layout-{{ layout }}\"\n #grid\n (esBorderBoxObserver)=\"onGridSizeChanges()\"\n esInfiniteScroll\n (scroll)=\"updateScrollState()\"\n (scrolled)=\"!visibleItemsLimited && loadData('scroll')\"\n >\n <es-node-entries-global-options\n *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n [displayType]=\"displayType\"\n >\n </es-node-entries-global-options>\n <ng-container *ngIf=\"nodes$ | async as nodes\">\n <div\n class=\"card-grid-drag-wrapper\"\n *ngFor=\"let node of nodes; let i = index\"\n role=\"none\"\n [esNodesDropTarget]=\"node\"\n [canDropNodes]=\"canDropNodes\"\n (nodeDropped)=\"onNodesDropped($event)\"\n #dropTarget=\"esNodesDropTarget\"\n >\n <ng-container *ngIf=\"isCustomTemplate()\">\n <ng-container *ngTemplateOutlet=\"$any(node)\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isCustomTemplate()\">\n <es-node-entries-card\n *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n #item\n [node]=\"node\"\n [dropdown]=\"dropdown\"\n role=\"listitem\"\n cdkDrag\n [cdkDragDisabled]=\"!(getDragEnabled() | async)\"\n [cdkDragData]=\"getDragData(node)\"\n esNodesDrag\n (cdkDragStarted)=\"onDragStarted(node)\"\n (cdkDragEnded)=\"onDragEnded()\"\n [class.card-import-blocked]=\"isBlocked(node)\"\n [class.selected-when-dragging]=\"\n isDragging && entriesService.selection.isSelected(node)\n \"\n >\n <ng-container *ngIf=\"entriesService.selection.selected.length > 1\">\n <es-node-entries-card\n *cdkDragPreview\n [node]=\"node\"\n [matBadge]=\"\n entriesService.selection.selected.length > 1\n ? entriesService.selection.selected.length\n : null\n \"\n class=\"card-drag-preview\"\n ></es-node-entries-card>\n </ng-container>\n </es-node-entries-card>\n <es-node-entries-card-small\n *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n #item\n [node]=\"node\"\n role=\"listitem\"\n cdkDrag\n [cdkDragDisabled]=\"!(getDragEnabled() | async)\"\n [cdkDragData]=\"[node]\"\n esNodesDrag\n >\n </es-node-entries-card-small>\n </ng-container>\n <div\n *ngIf=\"dropTarget.active?.canDrop?.denyExplicit\"\n class=\"card-grid-drop-blocked-container\"\n >\n <i esIcon=\"cancel\"></i>\n </div>\n <div *ngIf=\"dropTarget.active?.canDrop?.accept\" class=\"card-grid-drop-allowed-container\">\n <i\n [esIcon]=\"dropTarget.active.action === 'copy' ? 'add_circle_outline' : 'archive'\"\n ></i>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-container>\n<ng-container\n *ngIf=\"\n !entriesService.dataSource.isLoading &&\n entriesService.dataSource.hasMore() &&\n !visibleItemsLimited &&\n entriesService.paginationStrategy === 'infinite-scroll' &&\n layout !== 'scroll'\n \"\n>\n <div class=\"load-more\">\n <button mat-button color=\"primary\" (click)=\"loadData('button')\">\n <i esIcon=\"refresh\"></i>\n <span>{{ 'LOAD_MORE' | translate }}</span>\n </button>\n </div>\n</ng-container>\n<ng-container\n *ngIf=\"\n entriesService.dataSource.isLoading === true ||\n entriesService.dataSource.isLoading === 'initial' ||\n (entriesService.dataSource.isLoading === 'page' &&\n entriesService.paginationStrategy === 'infinite-scroll')\n \"\n>\n <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n</ng-container>\n\n<ng-template #loading>\n <es-spinner></es-spinner>\n</ng-template>\n<ng-template #scrollHelper>\n <ng-container *ngIf=\"layout === 'scroll'\">\n <div\n class=\"scroll-helper-left\"\n role=\"presentation\"\n (click)=\"doScroll('left')\"\n *ngIf=\"scroll.left\"\n >\n <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('left')\">\n <i esIcon=\"keyboard_arrow_left\" [aria]=\"true\"></i>\n </button>\n </div>\n <div\n class=\"scroll-helper-right\"\n role=\"presentation\"\n (click)=\"doScroll('right')\"\n *ngIf=\"scroll.right\"\n >\n <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('right')\">\n <i esIcon=\"keyboard_arrow_right\" [aria]=\"true\"></i>\n </button>\n </div>\n </ng-container>\n</ng-template>\n", styles: ["@keyframes OrderAnimationCards{0%{transform:rotate(-.25deg)}50%{transform:rotate(.25deg)}to{transform:rotate(-.25deg)}}:host{--scroll-gradient-color: white}.order-panel{margin-left:auto}.load-more{display:flex;justify-content:center}.card-grid-wrapper{position:relative;z-index:0}.card-grid-wrapper .scroll-helper-left,.card-grid-wrapper .scroll-helper-right{position:absolute;width:15%;min-width:60px;max-width:calc(var(--cardWidth) * .4);display:flex;align-items:center;height:calc(100% - 10px);z-index:5;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.card-grid-wrapper .scroll-helper-left>button,.card-grid-wrapper .scroll-helper-right>button{background-color:#fff;color:var(--primary);box-shadow:0 0 25px #00000040}.card-grid-wrapper .scroll-helper-left{left:-1.5em;justify-content:flex-start;background:linear-gradient(to left,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-left>button{margin-left:calc(1.5em - 8px)}.card-grid-wrapper .scroll-helper-right{right:-1.5em;justify-content:flex-end;background:linear-gradient(to right,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-right>button{margin-right:calc(1.5em - 8px)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cardWidth),1fr));grid-column-gap:20px;grid-row-gap:20px;grid-template-rows:auto;padding-block-start:1em;padding-block-end:1em}.card-grid.card-grid-layout-scroll{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;grid-auto-flow:column;grid-template-columns:repeat(auto-fit,var(--cardWidth));grid-auto-columns:minmax(var(--cardWidth),1fr);padding:1.5em;margin:-.5em -1.5em 0}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{margin:0 1.5em}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);border-radius:10px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar{height:10px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-thumb{max-width:20px;border-radius:10px;background-color:var(--primary)}.card-grid.card-grid-layout-scroll>.card-grid-drag-wrapper{scroll-snap-align:center;scroll-snap-stop:always}.card-grid .card-import-blocked ::ng-deep .card-meta{opacity:.75;text-decoration:line-through}.card-grid>.card-grid-drag-wrapper{position:relative}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{position:absolute;z-index:1;inset:0;display:flex;justify-content:center;align-items:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{background:radial-gradient(circle,#fff 30%,#fff0 70%);width:200px;height:200px;font-size:80px;display:flex;align-items:center;justify-content:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i{color:var(--colorStatusPositive)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{color:var(--colorStatusNegative)}.card-grid>.card-grid-drag-wrapper .selected-when-dragging{opacity:.5}.card-grid>.card-grid-drag-wrapper.cdk-drop-list-dragging>*:first-child{display:none}.card-grid.card-grid-reorder>.card-grid-order-wrapper{animation-iteration-count:infinite;animation-duration:.5s;animation-name:OrderAnimationCards}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(2n){animation-delay:0s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(odd){animation-delay:-.25s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(3n){animation-delay:-.125s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(5n){animation-delay:-.0625s}.card-grid.card-grid-reorder>.card-grid-order-wrapper .cdk-drag-placeholder{display:none}.card-drag-preview{width:250px}::ng-deep .es-card-grid-rearrange-drag-preview.cdk-drag-animating{transition:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: BorderBoxObserverDirective, selector: "[esBorderBoxObserver]", outputs: ["esBorderBoxObserver"], exportAs: ["borderBoxObserver"] }, { kind: "component", type: DropdownComponent, selector: "es-dropdown", inputs: ["position", "options", "callbackObject", "showDisabled", "menuClass"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[esInfiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollThrottle", "scrollWindow"], outputs: ["scrolled"] }, { kind: "component", type: SpinnerComponent, selector: "es-spinner" }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ColumnChooserComponent, selector: "es-column-chooser", inputs: ["origin", "columnChooserVisible", "columns"], outputs: ["columnChooserVisibleChange", "columnsChange"] }, { kind: "component", type: NodeEntriesCardComponent, selector: "es-node-entries-card", inputs: ["dropdown", "node"] }, { kind: "component", type: NodeEntriesCardSmallComponent, selector: "es-node-entries-card-small", inputs: ["node"] }, { kind: "component", type: SortSelectPanelComponent, selector: "es-sort-select-panel", inputs: ["active", "direction", "columns", "customSortingInProgress"], outputs: ["sortChange", "customSortingInProgressChange"] }, { kind: "directive", type: NodesDragDirective, selector: "[esNodesDrag]" }, { kind: "directive", type: NodesDropTargetDirective, selector: "[esNodesDropTarget]", inputs: ["esNodesDropTarget", "canDropNodes"], outputs: ["nodeDropped"], exportAs: ["esNodesDropTarget"] }, { kind: "component", type: NodeEntriesGlobalOptionsComponent, selector: "es-node-entries-global-options", inputs: ["displayType"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5482
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: NodeEntriesCardGridComponent, selector: "es-node-entries-card-grid", inputs: { displayType: "displayType" }, host: { properties: { "style.--scroll-gradient-color": "this.scrollGradientColor" } }, viewQueries: [{ propertyName: "columnChooserTrigger", first: true, predicate: ["columnChooserTrigger"], descendants: true }, { propertyName: "gridTop", first: true, predicate: ["gridTop"], descendants: true, static: true }, { propertyName: "sortPanel", first: true, predicate: SortSelectPanelComponent, descendants: true }, { propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true }, { propertyName: "dropListsQuery", predicate: CdkDropList, descendants: true }, { propertyName: "itemRefs", predicate: ["item"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-template #gridTop>\n <button\n *ngIf=\"entriesService.configureColumns\"\n mat-icon-button\n (click)=\"columnChooserVisible$.next(!columnChooserVisible$.value)\"\n cdkOverlayOrigin\n #columnChooserTrigger=\"cdkOverlayOrigin\"\n [matTooltip]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n [attr.aria-label]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n >\n <i esIcon=\"settings\"></i>\n </button>\n <es-sort-select-panel\n *ngIf=\"entriesService.sort?.allowed\"\n class=\"order-panel\"\n [active]=\"entriesService.sort.active\"\n [direction]=\"entriesService.sort.direction\"\n [columns]=\"getSortColumns()\"\n (sortChange)=\"onSortChange($event)\"\n [(customSortingInProgress)]=\"entriesService.sort.customSortingInProgress\"\n (customSortingInProgressChange)=\"onCustomSortingInProgressChange()\"\n ></es-sort-select-panel>\n</ng-template>\n<es-column-chooser\n *ngIf=\"entriesService.configureColumns\"\n [(columns)]=\"entriesService.columns\"\n [columnChooserVisible]=\"columnChooserVisible$ | async\"\n [origin]=\"columnChooserTrigger\"\n (columnChooserVisibleChange)=\"columnChooserVisible$.next($event)\"\n></es-column-chooser>\n<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n\n<!-- Do not render the list element (`role=\"list\"` or `li`) when there are no list items. -->\n<ng-container\n *ngIf=\"(nodes$ | async)?.length > 0 || (entriesService.globalOptionsSubject | async)?.length > 0\"\n>\n <!-- FIXME: Ideally, we would use native `ul` and `li` elements, but these have a strict model,\n that only allows `li` elements as direct children of `ul` elements. So we would need to use the\n native elements at all places without any elements between `ul` and `li`. -->\n <div\n *ngIf=\"entriesService.sort?.customSortingInProgress\"\n role=\"list\"\n class=\"card-grid card-grid-reorder\"\n cdkDropListGroup\n >\n <ng-container *ngIf=\"nodes$ | async as nodes\">\n <div\n class=\"card-grid-order-wrapper\"\n *ngFor=\"let node of nodes; let i = index\"\n role=\"none\"\n cdkDropList\n [cdkDropListConnectedTo]=\"dropLists\"\n [cdkDropListData]=\"i\"\n >\n <es-node-entries-card\n *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n #item\n [node]=\"node\"\n role=\"listitem\"\n cdkDrag\n [cdkDragData]=\"i\"\n [cdkDragStartDelay]=\"getDragStartDelay()\"\n cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n (cdkDragStarted)=\"onRearrangeDragStarted()\"\n (cdkDragEnded)=\"onRearrangeDragEnded()\"\n ></es-node-entries-card>\n <es-node-entries-card-small\n *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n #item\n [node]=\"node\"\n role=\"listitem\"\n cdkDrag\n [cdkDragData]=\"i\"\n [cdkDragStartDelay]=\"getDragStartDelay()\"\n cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n (cdkDragStarted)=\"onRearrangeDragStarted()\"\n (cdkDragEnded)=\"onRearrangeDragEnded()\"\n ></es-node-entries-card-small>\n </div>\n </ng-container>\n </div>\n <div class=\"card-grid-wrapper\" *ngIf=\"!entriesService.sort?.customSortingInProgress\">\n <ng-container *ngTemplateOutlet=\"scrollHelper\"></ng-container>\n <div\n role=\"list\"\n class=\"card-grid card-grid-layout-{{ layout }}\"\n #grid\n (esBorderBoxObserver)=\"onGridSizeChanges()\"\n esInfiniteScroll\n (scroll)=\"updateScrollState()\"\n (scrolled)=\"!visibleItemsLimited && loadData('scroll')\"\n >\n <es-node-entries-global-options\n *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n [displayType]=\"displayType\"\n >\n </es-node-entries-global-options>\n <ng-container *ngIf=\"nodes$ | async as nodes\">\n <div\n class=\"card-grid-drag-wrapper\"\n *ngFor=\"let node of nodes; let i = index\"\n role=\"none\"\n [esNodesDropTarget]=\"node\"\n [canDropNodes]=\"canDropNodes\"\n (nodeDropped)=\"onNodesDropped($event)\"\n #dropTarget=\"esNodesDropTarget\"\n >\n <ng-container *ngIf=\"isCustomTemplate(node)\">\n <ng-container *ngTemplateOutlet=\"$any(node)\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isCustomTemplate(node)\">\n <es-node-entries-card\n *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n #item\n [node]=\"node\"\n [dropdown]=\"dropdown\"\n role=\"listitem\"\n cdkDrag\n [cdkDragDisabled]=\"!(getDragEnabled() | async)\"\n [cdkDragData]=\"getDragData(node)\"\n esNodesDrag\n (cdkDragStarted)=\"onDragStarted(node)\"\n (cdkDragEnded)=\"onDragEnded()\"\n [class.card-import-blocked]=\"isBlocked(node)\"\n [class.selected-when-dragging]=\"\n isDragging && entriesService.selection.isSelected(node)\n \"\n >\n <ng-container *ngIf=\"entriesService.selection.selected.length > 1\">\n <es-node-entries-card\n *cdkDragPreview\n [node]=\"node\"\n [matBadge]=\"\n entriesService.selection.selected.length > 1\n ? entriesService.selection.selected.length\n : null\n \"\n class=\"card-drag-preview\"\n ></es-node-entries-card>\n </ng-container>\n </es-node-entries-card>\n <es-node-entries-card-small\n *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n #item\n [node]=\"node\"\n role=\"listitem\"\n cdkDrag\n [cdkDragDisabled]=\"!(getDragEnabled() | async)\"\n [cdkDragData]=\"[node]\"\n esNodesDrag\n >\n </es-node-entries-card-small>\n </ng-container>\n <div\n *ngIf=\"dropTarget.active?.canDrop?.denyExplicit\"\n class=\"card-grid-drop-blocked-container\"\n >\n <i esIcon=\"cancel\"></i>\n </div>\n <div *ngIf=\"dropTarget.active?.canDrop?.accept\" class=\"card-grid-drop-allowed-container\">\n <i\n [esIcon]=\"dropTarget.active.action === 'copy' ? 'add_circle_outline' : 'archive'\"\n ></i>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-container>\n<ng-container\n *ngIf=\"\n !entriesService.dataSource.isLoading &&\n entriesService.dataSource.hasMore() &&\n !visibleItemsLimited &&\n entriesService.paginationStrategy === 'infinite-scroll' &&\n layout !== 'scroll'\n \"\n>\n <div class=\"load-more\">\n <button mat-button color=\"primary\" (click)=\"loadData('button')\">\n <i esIcon=\"refresh\"></i>\n <span>{{ 'LOAD_MORE' | translate }}</span>\n </button>\n </div>\n</ng-container>\n<ng-container\n *ngIf=\"\n entriesService.dataSource.isLoading === true ||\n entriesService.dataSource.isLoading === 'initial' ||\n (entriesService.dataSource.isLoading === 'page' &&\n entriesService.paginationStrategy === 'infinite-scroll')\n \"\n>\n <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n</ng-container>\n\n<ng-template #loading>\n <es-spinner></es-spinner>\n</ng-template>\n<ng-template #scrollHelper>\n <ng-container *ngIf=\"layout === 'scroll'\">\n <div\n class=\"scroll-helper-left\"\n role=\"presentation\"\n (click)=\"doScroll('left')\"\n *ngIf=\"scroll.left\"\n >\n <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('left')\">\n <i esIcon=\"keyboard_arrow_left\" [aria]=\"true\"></i>\n </button>\n </div>\n <div\n class=\"scroll-helper-right\"\n role=\"presentation\"\n (click)=\"doScroll('right')\"\n *ngIf=\"scroll.right\"\n >\n <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('right')\">\n <i esIcon=\"keyboard_arrow_right\" [aria]=\"true\"></i>\n </button>\n </div>\n </ng-container>\n</ng-template>\n", styles: ["@keyframes OrderAnimationCards{0%{transform:rotate(-.25deg)}50%{transform:rotate(.25deg)}to{transform:rotate(-.25deg)}}:host{--scroll-gradient-color: white}.order-panel{margin-left:auto}.load-more{display:flex;justify-content:center}.card-grid-wrapper{position:relative;z-index:0}.card-grid-wrapper .scroll-helper-left,.card-grid-wrapper .scroll-helper-right{position:absolute;width:15%;min-width:60px;max-width:calc(var(--cardWidth) * .4);display:flex;align-items:center;height:calc(100% - 10px);z-index:5;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.card-grid-wrapper .scroll-helper-left>button,.card-grid-wrapper .scroll-helper-right>button{background-color:#fff;color:var(--primary);box-shadow:0 0 25px #00000040}.card-grid-wrapper .scroll-helper-left{left:-1.5em;justify-content:flex-start;background:linear-gradient(to left,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-left>button{margin-left:calc(1.5em - 8px)}.card-grid-wrapper .scroll-helper-right{right:-1.5em;justify-content:flex-end;background:linear-gradient(to right,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-right>button{margin-right:calc(1.5em - 8px)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cardWidth),1fr));grid-column-gap:20px;grid-row-gap:20px;grid-template-rows:auto;padding-block-start:1em;padding-block-end:1em}.card-grid.card-grid-layout-scroll{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;grid-auto-flow:column;grid-template-columns:repeat(auto-fit,var(--cardWidth));grid-auto-columns:minmax(var(--cardWidth),1fr);padding:1.5em;margin:-.5em -1.5em 0}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{margin:0 1.5em}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);border-radius:10px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar{height:10px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-thumb{max-width:20px;border-radius:10px;background-color:var(--primary)}.card-grid.card-grid-layout-scroll>.card-grid-drag-wrapper{scroll-snap-align:center;scroll-snap-stop:always}.card-grid .card-import-blocked ::ng-deep .card-meta{opacity:.75;text-decoration:line-through}.card-grid>.card-grid-drag-wrapper{position:relative}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{position:absolute;z-index:1;inset:0;display:flex;justify-content:center;align-items:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{background:radial-gradient(circle,#fff 30%,#fff0 70%);width:200px;height:200px;font-size:80px;display:flex;align-items:center;justify-content:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i{color:var(--colorStatusPositive)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{color:var(--colorStatusNegative)}.card-grid>.card-grid-drag-wrapper .selected-when-dragging{opacity:.5}.card-grid>.card-grid-drag-wrapper.cdk-drop-list-dragging>*:first-child{display:none}.card-grid.card-grid-reorder>.card-grid-order-wrapper{animation-iteration-count:infinite;animation-duration:.5s;animation-name:OrderAnimationCards}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(2n){animation-delay:0s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(odd){animation-delay:-.25s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(3n){animation-delay:-.125s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(5n){animation-delay:-.0625s}.card-grid.card-grid-reorder>.card-grid-order-wrapper .cdk-drag-placeholder{display:none}.card-drag-preview{width:250px}::ng-deep .es-card-grid-rearrange-drag-preview.cdk-drag-animating{transition:none}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: BorderBoxObserverDirective, selector: "[esBorderBoxObserver]", outputs: ["esBorderBoxObserver"], exportAs: ["borderBoxObserver"] }, { kind: "component", type: DropdownComponent, selector: "es-dropdown", inputs: ["position", "options", "callbackObject", "showDisabled", "menuClass"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[esInfiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollThrottle", "scrollWindow"], outputs: ["scrolled"] }, { kind: "component", type: SpinnerComponent, selector: "es-spinner" }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ColumnChooserComponent, selector: "es-column-chooser", inputs: ["origin", "columnChooserVisible", "columns"], outputs: ["columnChooserVisibleChange", "columnsChange"] }, { kind: "component", type: NodeEntriesCardComponent, selector: "es-node-entries-card", inputs: ["dropdown", "node"] }, { kind: "component", type: NodeEntriesCardSmallComponent, selector: "es-node-entries-card-small", inputs: ["node"] }, { kind: "component", type: SortSelectPanelComponent, selector: "es-sort-select-panel", inputs: ["active", "direction", "columns", "customSortingInProgress"], outputs: ["sortChange", "customSortingInProgressChange"] }, { kind: "directive", type: NodesDragDirective, selector: "[esNodesDrag]" }, { kind: "directive", type: NodesDropTargetDirective, selector: "[esNodesDropTarget]", inputs: ["esNodesDropTarget", "canDropNodes"], outputs: ["nodeDropped"], exportAs: ["esNodesDropTarget"] }, { kind: "component", type: NodeEntriesGlobalOptionsComponent, selector: "es-node-entries-global-options", inputs: ["displayType"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5483
5483
|
}
|
|
5484
5484
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NodeEntriesCardGridComponent, decorators: [{
|
|
5485
5485
|
type: Component,
|
|
5486
|
-
args: [{ selector: 'es-node-entries-card-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #gridTop>\n <button\n *ngIf=\"entriesService.configureColumns\"\n mat-icon-button\n (click)=\"columnChooserVisible$.next(!columnChooserVisible$.value)\"\n cdkOverlayOrigin\n #columnChooserTrigger=\"cdkOverlayOrigin\"\n [matTooltip]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n [attr.aria-label]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n >\n <i esIcon=\"settings\"></i>\n </button>\n <es-sort-select-panel\n *ngIf=\"entriesService.sort?.allowed\"\n class=\"order-panel\"\n [active]=\"entriesService.sort.active\"\n [direction]=\"entriesService.sort.direction\"\n [columns]=\"getSortColumns()\"\n (sortChange)=\"onSortChange($event)\"\n [(customSortingInProgress)]=\"entriesService.sort.customSortingInProgress\"\n (customSortingInProgressChange)=\"onCustomSortingInProgressChange()\"\n ></es-sort-select-panel>\n</ng-template>\n<es-column-chooser\n *ngIf=\"entriesService.configureColumns\"\n [(columns)]=\"entriesService.columns\"\n [columnChooserVisible]=\"columnChooserVisible$ | async\"\n [origin]=\"columnChooserTrigger\"\n (columnChooserVisibleChange)=\"columnChooserVisible$.next($event)\"\n></es-column-chooser>\n<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n\n<!-- Do not render the list element (`role=\"list\"` or `li`) when there are no list items. -->\n<ng-container\n *ngIf=\"(nodes$ | async)?.length > 0 || (entriesService.globalOptionsSubject | async)?.length > 0\"\n>\n <!-- FIXME: Ideally, we would use native `ul` and `li` elements, but these have a strict model,\n that only allows `li` elements as direct children of `ul` elements. So we would need to use the\n native elements at all places without any elements between `ul` and `li`. -->\n <div\n *ngIf=\"entriesService.sort?.customSortingInProgress\"\n role=\"list\"\n class=\"card-grid card-grid-reorder\"\n cdkDropListGroup\n >\n <ng-container *ngIf=\"nodes$ | async as nodes\">\n <div\n class=\"card-grid-order-wrapper\"\n *ngFor=\"let node of nodes; let i = index\"\n role=\"none\"\n cdkDropList\n [cdkDropListConnectedTo]=\"dropLists\"\n [cdkDropListData]=\"i\"\n >\n <es-node-entries-card\n *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n #item\n [node]=\"node\"\n role=\"listitem\"\n cdkDrag\n [cdkDragData]=\"i\"\n [cdkDragStartDelay]=\"getDragStartDelay()\"\n cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n (cdkDragStarted)=\"onRearrangeDragStarted()\"\n (cdkDragEnded)=\"onRearrangeDragEnded()\"\n ></es-node-entries-card>\n <es-node-entries-card-small\n *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n #item\n [node]=\"node\"\n role=\"listitem\"\n cdkDrag\n [cdkDragData]=\"i\"\n [cdkDragStartDelay]=\"getDragStartDelay()\"\n cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n (cdkDragStarted)=\"onRearrangeDragStarted()\"\n (cdkDragEnded)=\"onRearrangeDragEnded()\"\n ></es-node-entries-card-small>\n </div>\n </ng-container>\n </div>\n <div class=\"card-grid-wrapper\" *ngIf=\"!entriesService.sort?.customSortingInProgress\">\n <ng-container *ngTemplateOutlet=\"scrollHelper\"></ng-container>\n <div\n role=\"list\"\n class=\"card-grid card-grid-layout-{{ layout }}\"\n #grid\n (esBorderBoxObserver)=\"onGridSizeChanges()\"\n esInfiniteScroll\n (scroll)=\"updateScrollState()\"\n (scrolled)=\"!visibleItemsLimited && loadData('scroll')\"\n >\n <es-node-entries-global-options\n *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n [displayType]=\"displayType\"\n >\n </es-node-entries-global-options>\n <ng-container *ngIf=\"nodes$ | async as nodes\">\n <div\n class=\"card-grid-drag-wrapper\"\n *ngFor=\"let node of nodes; let i = index\"\n role=\"none\"\n [esNodesDropTarget]=\"node\"\n [canDropNodes]=\"canDropNodes\"\n (nodeDropped)=\"onNodesDropped($event)\"\n #dropTarget=\"esNodesDropTarget\"\n >\n <ng-container *ngIf=\"isCustomTemplate()\">\n <ng-container *ngTemplateOutlet=\"$any(node)\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isCustomTemplate()\">\n <es-node-entries-card\n *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n #item\n [node]=\"node\"\n [dropdown]=\"dropdown\"\n role=\"listitem\"\n cdkDrag\n [cdkDragDisabled]=\"!(getDragEnabled() | async)\"\n [cdkDragData]=\"getDragData(node)\"\n esNodesDrag\n (cdkDragStarted)=\"onDragStarted(node)\"\n (cdkDragEnded)=\"onDragEnded()\"\n [class.card-import-blocked]=\"isBlocked(node)\"\n [class.selected-when-dragging]=\"\n isDragging && entriesService.selection.isSelected(node)\n \"\n >\n <ng-container *ngIf=\"entriesService.selection.selected.length > 1\">\n <es-node-entries-card\n *cdkDragPreview\n [node]=\"node\"\n [matBadge]=\"\n entriesService.selection.selected.length > 1\n ? entriesService.selection.selected.length\n : null\n \"\n class=\"card-drag-preview\"\n ></es-node-entries-card>\n </ng-container>\n </es-node-entries-card>\n <es-node-entries-card-small\n *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n #item\n [node]=\"node\"\n role=\"listitem\"\n cdkDrag\n [cdkDragDisabled]=\"!(getDragEnabled() | async)\"\n [cdkDragData]=\"[node]\"\n esNodesDrag\n >\n </es-node-entries-card-small>\n </ng-container>\n <div\n *ngIf=\"dropTarget.active?.canDrop?.denyExplicit\"\n class=\"card-grid-drop-blocked-container\"\n >\n <i esIcon=\"cancel\"></i>\n </div>\n <div *ngIf=\"dropTarget.active?.canDrop?.accept\" class=\"card-grid-drop-allowed-container\">\n <i\n [esIcon]=\"dropTarget.active.action === 'copy' ? 'add_circle_outline' : 'archive'\"\n ></i>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-container>\n<ng-container\n *ngIf=\"\n !entriesService.dataSource.isLoading &&\n entriesService.dataSource.hasMore() &&\n !visibleItemsLimited &&\n entriesService.paginationStrategy === 'infinite-scroll' &&\n layout !== 'scroll'\n \"\n>\n <div class=\"load-more\">\n <button mat-button color=\"primary\" (click)=\"loadData('button')\">\n <i esIcon=\"refresh\"></i>\n <span>{{ 'LOAD_MORE' | translate }}</span>\n </button>\n </div>\n</ng-container>\n<ng-container\n *ngIf=\"\n entriesService.dataSource.isLoading === true ||\n entriesService.dataSource.isLoading === 'initial' ||\n (entriesService.dataSource.isLoading === 'page' &&\n entriesService.paginationStrategy === 'infinite-scroll')\n \"\n>\n <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n</ng-container>\n\n<ng-template #loading>\n <es-spinner></es-spinner>\n</ng-template>\n<ng-template #scrollHelper>\n <ng-container *ngIf=\"layout === 'scroll'\">\n <div\n class=\"scroll-helper-left\"\n role=\"presentation\"\n (click)=\"doScroll('left')\"\n *ngIf=\"scroll.left\"\n >\n <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('left')\">\n <i esIcon=\"keyboard_arrow_left\" [aria]=\"true\"></i>\n </button>\n </div>\n <div\n class=\"scroll-helper-right\"\n role=\"presentation\"\n (click)=\"doScroll('right')\"\n *ngIf=\"scroll.right\"\n >\n <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('right')\">\n <i esIcon=\"keyboard_arrow_right\" [aria]=\"true\"></i>\n </button>\n </div>\n </ng-container>\n</ng-template>\n", styles: ["@keyframes OrderAnimationCards{0%{transform:rotate(-.25deg)}50%{transform:rotate(.25deg)}to{transform:rotate(-.25deg)}}:host{--scroll-gradient-color: white}.order-panel{margin-left:auto}.load-more{display:flex;justify-content:center}.card-grid-wrapper{position:relative;z-index:0}.card-grid-wrapper .scroll-helper-left,.card-grid-wrapper .scroll-helper-right{position:absolute;width:15%;min-width:60px;max-width:calc(var(--cardWidth) * .4);display:flex;align-items:center;height:calc(100% - 10px);z-index:5;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.card-grid-wrapper .scroll-helper-left>button,.card-grid-wrapper .scroll-helper-right>button{background-color:#fff;color:var(--primary);box-shadow:0 0 25px #00000040}.card-grid-wrapper .scroll-helper-left{left:-1.5em;justify-content:flex-start;background:linear-gradient(to left,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-left>button{margin-left:calc(1.5em - 8px)}.card-grid-wrapper .scroll-helper-right{right:-1.5em;justify-content:flex-end;background:linear-gradient(to right,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-right>button{margin-right:calc(1.5em - 8px)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cardWidth),1fr));grid-column-gap:20px;grid-row-gap:20px;grid-template-rows:auto;padding-block-start:1em;padding-block-end:1em}.card-grid.card-grid-layout-scroll{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;grid-auto-flow:column;grid-template-columns:repeat(auto-fit,var(--cardWidth));grid-auto-columns:minmax(var(--cardWidth),1fr);padding:1.5em;margin:-.5em -1.5em 0}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{margin:0 1.5em}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);border-radius:10px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar{height:10px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-thumb{max-width:20px;border-radius:10px;background-color:var(--primary)}.card-grid.card-grid-layout-scroll>.card-grid-drag-wrapper{scroll-snap-align:center;scroll-snap-stop:always}.card-grid .card-import-blocked ::ng-deep .card-meta{opacity:.75;text-decoration:line-through}.card-grid>.card-grid-drag-wrapper{position:relative}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{position:absolute;z-index:1;inset:0;display:flex;justify-content:center;align-items:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{background:radial-gradient(circle,#fff 30%,#fff0 70%);width:200px;height:200px;font-size:80px;display:flex;align-items:center;justify-content:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i{color:var(--colorStatusPositive)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{color:var(--colorStatusNegative)}.card-grid>.card-grid-drag-wrapper .selected-when-dragging{opacity:.5}.card-grid>.card-grid-drag-wrapper.cdk-drop-list-dragging>*:first-child{display:none}.card-grid.card-grid-reorder>.card-grid-order-wrapper{animation-iteration-count:infinite;animation-duration:.5s;animation-name:OrderAnimationCards}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(2n){animation-delay:0s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(odd){animation-delay:-.25s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(3n){animation-delay:-.125s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(5n){animation-delay:-.0625s}.card-grid.card-grid-reorder>.card-grid-order-wrapper .cdk-drag-placeholder{display:none}.card-drag-preview{width:250px}::ng-deep .es-card-grid-rearrange-drag-preview.cdk-drag-animating{transition:none}\n"] }]
|
|
5486
|
+
args: [{ selector: 'es-node-entries-card-grid', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #gridTop>\n <button\n *ngIf=\"entriesService.configureColumns\"\n mat-icon-button\n (click)=\"columnChooserVisible$.next(!columnChooserVisible$.value)\"\n cdkOverlayOrigin\n #columnChooserTrigger=\"cdkOverlayOrigin\"\n [matTooltip]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n [attr.aria-label]=\"'LIST_TABLE.CONFIGURE_COLUMNS' | translate\"\n >\n <i esIcon=\"settings\"></i>\n </button>\n <es-sort-select-panel\n *ngIf=\"entriesService.sort?.allowed\"\n class=\"order-panel\"\n [active]=\"entriesService.sort.active\"\n [direction]=\"entriesService.sort.direction\"\n [columns]=\"getSortColumns()\"\n (sortChange)=\"onSortChange($event)\"\n [(customSortingInProgress)]=\"entriesService.sort.customSortingInProgress\"\n (customSortingInProgressChange)=\"onCustomSortingInProgressChange()\"\n ></es-sort-select-panel>\n</ng-template>\n<es-column-chooser\n *ngIf=\"entriesService.configureColumns\"\n [(columns)]=\"entriesService.columns\"\n [columnChooserVisible]=\"columnChooserVisible$ | async\"\n [origin]=\"columnChooserTrigger\"\n (columnChooserVisibleChange)=\"columnChooserVisible$.next($event)\"\n></es-column-chooser>\n<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n\n<!-- Do not render the list element (`role=\"list\"` or `li`) when there are no list items. -->\n<ng-container\n *ngIf=\"(nodes$ | async)?.length > 0 || (entriesService.globalOptionsSubject | async)?.length > 0\"\n>\n <!-- FIXME: Ideally, we would use native `ul` and `li` elements, but these have a strict model,\n that only allows `li` elements as direct children of `ul` elements. So we would need to use the\n native elements at all places without any elements between `ul` and `li`. -->\n <div\n *ngIf=\"entriesService.sort?.customSortingInProgress\"\n role=\"list\"\n class=\"card-grid card-grid-reorder\"\n cdkDropListGroup\n >\n <ng-container *ngIf=\"nodes$ | async as nodes\">\n <div\n class=\"card-grid-order-wrapper\"\n *ngFor=\"let node of nodes; let i = index\"\n role=\"none\"\n cdkDropList\n [cdkDropListConnectedTo]=\"dropLists\"\n [cdkDropListData]=\"i\"\n >\n <es-node-entries-card\n *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n #item\n [node]=\"node\"\n role=\"listitem\"\n cdkDrag\n [cdkDragData]=\"i\"\n [cdkDragStartDelay]=\"getDragStartDelay()\"\n cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n (cdkDragStarted)=\"onRearrangeDragStarted()\"\n (cdkDragEnded)=\"onRearrangeDragEnded()\"\n ></es-node-entries-card>\n <es-node-entries-card-small\n *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n #item\n [node]=\"node\"\n role=\"listitem\"\n cdkDrag\n [cdkDragData]=\"i\"\n [cdkDragStartDelay]=\"getDragStartDelay()\"\n cdkDragPreviewClass=\"es-card-grid-rearrange-drag-preview\"\n (cdkDragEntered)=\"onRearrangeDragEntered($event)\"\n (cdkDragStarted)=\"onRearrangeDragStarted()\"\n (cdkDragEnded)=\"onRearrangeDragEnded()\"\n ></es-node-entries-card-small>\n </div>\n </ng-container>\n </div>\n <div class=\"card-grid-wrapper\" *ngIf=\"!entriesService.sort?.customSortingInProgress\">\n <ng-container *ngTemplateOutlet=\"scrollHelper\"></ng-container>\n <div\n role=\"list\"\n class=\"card-grid card-grid-layout-{{ layout }}\"\n #grid\n (esBorderBoxObserver)=\"onGridSizeChanges()\"\n esInfiniteScroll\n (scroll)=\"updateScrollState()\"\n (scrolled)=\"!visibleItemsLimited && loadData('scroll')\"\n >\n <es-node-entries-global-options\n *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n [displayType]=\"displayType\"\n >\n </es-node-entries-global-options>\n <ng-container *ngIf=\"nodes$ | async as nodes\">\n <div\n class=\"card-grid-drag-wrapper\"\n *ngFor=\"let node of nodes; let i = index\"\n role=\"none\"\n [esNodesDropTarget]=\"node\"\n [canDropNodes]=\"canDropNodes\"\n (nodeDropped)=\"onNodesDropped($event)\"\n #dropTarget=\"esNodesDropTarget\"\n >\n <ng-container *ngIf=\"isCustomTemplate(node)\">\n <ng-container *ngTemplateOutlet=\"$any(node)\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isCustomTemplate(node)\">\n <es-node-entries-card\n *ngIf=\"displayType === NodeEntriesDisplayType.Grid\"\n #item\n [node]=\"node\"\n [dropdown]=\"dropdown\"\n role=\"listitem\"\n cdkDrag\n [cdkDragDisabled]=\"!(getDragEnabled() | async)\"\n [cdkDragData]=\"getDragData(node)\"\n esNodesDrag\n (cdkDragStarted)=\"onDragStarted(node)\"\n (cdkDragEnded)=\"onDragEnded()\"\n [class.card-import-blocked]=\"isBlocked(node)\"\n [class.selected-when-dragging]=\"\n isDragging && entriesService.selection.isSelected(node)\n \"\n >\n <ng-container *ngIf=\"entriesService.selection.selected.length > 1\">\n <es-node-entries-card\n *cdkDragPreview\n [node]=\"node\"\n [matBadge]=\"\n entriesService.selection.selected.length > 1\n ? entriesService.selection.selected.length\n : null\n \"\n class=\"card-drag-preview\"\n ></es-node-entries-card>\n </ng-container>\n </es-node-entries-card>\n <es-node-entries-card-small\n *ngIf=\"displayType === NodeEntriesDisplayType.SmallGrid\"\n #item\n [node]=\"node\"\n role=\"listitem\"\n cdkDrag\n [cdkDragDisabled]=\"!(getDragEnabled() | async)\"\n [cdkDragData]=\"[node]\"\n esNodesDrag\n >\n </es-node-entries-card-small>\n </ng-container>\n <div\n *ngIf=\"dropTarget.active?.canDrop?.denyExplicit\"\n class=\"card-grid-drop-blocked-container\"\n >\n <i esIcon=\"cancel\"></i>\n </div>\n <div *ngIf=\"dropTarget.active?.canDrop?.accept\" class=\"card-grid-drop-allowed-container\">\n <i\n [esIcon]=\"dropTarget.active.action === 'copy' ? 'add_circle_outline' : 'archive'\"\n ></i>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n</ng-container>\n<ng-container\n *ngIf=\"\n !entriesService.dataSource.isLoading &&\n entriesService.dataSource.hasMore() &&\n !visibleItemsLimited &&\n entriesService.paginationStrategy === 'infinite-scroll' &&\n layout !== 'scroll'\n \"\n>\n <div class=\"load-more\">\n <button mat-button color=\"primary\" (click)=\"loadData('button')\">\n <i esIcon=\"refresh\"></i>\n <span>{{ 'LOAD_MORE' | translate }}</span>\n </button>\n </div>\n</ng-container>\n<ng-container\n *ngIf=\"\n entriesService.dataSource.isLoading === true ||\n entriesService.dataSource.isLoading === 'initial' ||\n (entriesService.dataSource.isLoading === 'page' &&\n entriesService.paginationStrategy === 'infinite-scroll')\n \"\n>\n <ng-container *ngTemplateOutlet=\"loading\"></ng-container>\n</ng-container>\n\n<ng-template #loading>\n <es-spinner></es-spinner>\n</ng-template>\n<ng-template #scrollHelper>\n <ng-container *ngIf=\"layout === 'scroll'\">\n <div\n class=\"scroll-helper-left\"\n role=\"presentation\"\n (click)=\"doScroll('left')\"\n *ngIf=\"scroll.left\"\n >\n <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('left')\">\n <i esIcon=\"keyboard_arrow_left\" [aria]=\"true\"></i>\n </button>\n </div>\n <div\n class=\"scroll-helper-right\"\n role=\"presentation\"\n (click)=\"doScroll('right')\"\n *ngIf=\"scroll.right\"\n >\n <button mat-icon-button color=\"primary\" (click)=\"$event.stopPropagation(); doScroll('right')\">\n <i esIcon=\"keyboard_arrow_right\" [aria]=\"true\"></i>\n </button>\n </div>\n </ng-container>\n</ng-template>\n", styles: ["@keyframes OrderAnimationCards{0%{transform:rotate(-.25deg)}50%{transform:rotate(.25deg)}to{transform:rotate(-.25deg)}}:host{--scroll-gradient-color: white}.order-panel{margin-left:auto}.load-more{display:flex;justify-content:center}.card-grid-wrapper{position:relative;z-index:0}.card-grid-wrapper .scroll-helper-left,.card-grid-wrapper .scroll-helper-right{position:absolute;width:15%;min-width:60px;max-width:calc(var(--cardWidth) * .4);display:flex;align-items:center;height:calc(100% - 10px);z-index:5;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.card-grid-wrapper .scroll-helper-left>button,.card-grid-wrapper .scroll-helper-right>button{background-color:#fff;color:var(--primary);box-shadow:0 0 25px #00000040}.card-grid-wrapper .scroll-helper-left{left:-1.5em;justify-content:flex-start;background:linear-gradient(to left,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-left>button{margin-left:calc(1.5em - 8px)}.card-grid-wrapper .scroll-helper-right{right:-1.5em;justify-content:flex-end;background:linear-gradient(to right,transparent 0,var(--scroll-gradient-color) calc(100% - 1.5em))}.card-grid-wrapper .scroll-helper-right>button{margin-right:calc(1.5em - 8px)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cardWidth),1fr));grid-column-gap:20px;grid-row-gap:20px;grid-template-rows:auto;padding-block-start:1em;padding-block-end:1em}.card-grid.card-grid-layout-scroll{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;grid-auto-flow:column;grid-template-columns:repeat(auto-fit,var(--cardWidth));grid-auto-columns:minmax(var(--cardWidth),1fr);padding:1.5em;margin:-.5em -1.5em 0}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{margin:0 1.5em}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);border-radius:10px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar{height:10px;background-color:transparent}.card-grid.card-grid-layout-scroll::-webkit-scrollbar-thumb{max-width:20px;border-radius:10px;background-color:var(--primary)}.card-grid.card-grid-layout-scroll>.card-grid-drag-wrapper{scroll-snap-align:center;scroll-snap-stop:always}.card-grid .card-import-blocked ::ng-deep .card-meta{opacity:.75;text-decoration:line-through}.card-grid>.card-grid-drag-wrapper{position:relative}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{position:absolute;z-index:1;inset:0;display:flex;justify-content:center;align-items:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i,.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{background:radial-gradient(circle,#fff 30%,#fff0 70%);width:200px;height:200px;font-size:80px;display:flex;align-items:center;justify-content:center}.card-grid>.card-grid-drag-wrapper .card-grid-drop-allowed-container>i{color:var(--colorStatusPositive)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.card-grid>.card-grid-drag-wrapper .card-grid-drop-blocked-container>i{color:var(--colorStatusNegative)}.card-grid>.card-grid-drag-wrapper .selected-when-dragging{opacity:.5}.card-grid>.card-grid-drag-wrapper.cdk-drop-list-dragging>*:first-child{display:none}.card-grid.card-grid-reorder>.card-grid-order-wrapper{animation-iteration-count:infinite;animation-duration:.5s;animation-name:OrderAnimationCards}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(2n){animation-delay:0s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(odd){animation-delay:-.25s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(3n){animation-delay:-.125s}.card-grid.card-grid-reorder>.card-grid-order-wrapper:nth-of-type(5n){animation-delay:-.0625s}.card-grid.card-grid-reorder>.card-grid-order-wrapper .cdk-drag-placeholder{display:none}.card-drag-preview{width:250px}::ng-deep .es-card-grid-rearrange-drag-preview.cdk-drag-animating{transition:none}\n"] }]
|
|
5487
5487
|
}], ctorParameters: () => [{ type: NodeEntriesService }, { type: NodeEntriesGlobalService }, { type: NodeEntriesTemplatesService }, { type: UIService }, { type: i0.NgZone }], propDecorators: { columnChooserTrigger: [{
|
|
5488
5488
|
type: ViewChild,
|
|
5489
5489
|
args: ['columnChooserTrigger']
|