ngx-edu-sharing-ui 10.0.5 → 10.0.7
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/README.md +3 -0
- package/assets/scss/branding.scss +10 -0
- package/assets/scss/material-theme.scss +619 -0
- package/assets/scss/mixins.scss +123 -0
- package/assets/scss/variables-root.scss +2 -0
- package/assets/scss/variables-scss.scss +117 -0
- package/esm2022/lib/dropdown/dropdown.component.mjs +2 -2
- package/esm2022/lib/node-entries/node-entries-card/node-entries-card.component.mjs +2 -2
- package/esm2022/lib/node-entries/node-entries-card-small/node-entries-card-small.component.mjs +2 -2
- package/esm2022/lib/node-entries/node-entries-table/node-entries-table.component.mjs +2 -2
- package/esm2022/lib/node-url/node-url.component.mjs +2 -2
- package/esm2022/lib/sort-dropdown/sort-dropdown.component.mjs +3 -3
- package/esm2022/lib/translations/translation-loader.mjs +3 -1
- package/fesm2022/ngx-edu-sharing-ui.mjs +14 -12
- package/fesm2022/ngx-edu-sharing-ui.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -735,11 +735,11 @@ class DropdownComponent {
|
|
|
735
735
|
return this.options$.value?.some((o) => o.isEnabled);
|
|
736
736
|
}
|
|
737
737
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DropdownComponent, deps: [{ token: UIService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
738
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: DropdownComponent, selector: "es-dropdown", inputs: { position: "position", options: "options", callbackObjects: "callbackObjects", showDisabled: "showDisabled", menuClass: "menuClass" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-menu\n #dropdown=\"matMenu\"\n class=\"mat-dropdown-menu\"\n [class]=\"menuClass\"\n backdropClass=\"mat-dropdown-menu\"\n [xPosition]=\"position === 'right' ? 'after' : 'before'\"\n>\n <!-- MatMenu has role=\"menu\", so the only meaningful role of descendants is \"menuitem\" -->\n <ul role=\"none\">\n <ng-container *ngFor=\"let option of options$ | async; let i = index\">\n <li *ngIf=\"option.isEnabled || showDisabled\" role=\"none\">\n <button\n mat-menu-item\n class=\"mat-menu-item collection-item-{{\n option.name | replaceChars : { search: '.', replace: '-' }\n }}\"\n matTooltip=\"{{ option | optionTooltip | async }}\"\n matTooltipPosition=\"right\"\n matTooltipTouchGestures=\"off\"\n [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n [class.mat-menu-item-separate]=\"option.isSeparate || isNewGroup(i)\"\n [class.mat-menu-item-selected]=\"option.isSelected\"\n [disabled]=\"!option.isEnabled\"\n (click)=\"click(option)\"\n attr.data-test=\"menu-item-{{ option.name }}\"\n >\n <i [esIcon]=\"option.icon\"></i> {{ option.name | translate }}\n </button>\n </li>\n </ng-container>\n </ul>\n</mat-menu>\n<div #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"display-none\"></div>\n", styles: ["::ng-deep .mat-dropdown-menu .mat-mdc-menu-content{min-width:200px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button{display:flex;align-items:center}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button:not(:disabled)>span{color:var(--primary)}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button>i{width:35px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content:not(:empty){padding:0!important}::ng-deep .mat-dropdown-menu ul{margin:0;list-style:none;padding-left:0}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text i{margin-right:10px}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item:hover:not([disabled]),::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-focused{color:var(--itemSelectedTextColor);background-color:var(--listItemSelectedBackground)}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-keyboard-focused{outline:none;border:
|
|
738
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: DropdownComponent, selector: "es-dropdown", inputs: { position: "position", options: "options", callbackObjects: "callbackObjects", showDisabled: "showDisabled", menuClass: "menuClass" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-menu\n #dropdown=\"matMenu\"\n class=\"mat-dropdown-menu\"\n [class]=\"menuClass\"\n backdropClass=\"mat-dropdown-menu\"\n [xPosition]=\"position === 'right' ? 'after' : 'before'\"\n>\n <!-- MatMenu has role=\"menu\", so the only meaningful role of descendants is \"menuitem\" -->\n <ul role=\"none\">\n <ng-container *ngFor=\"let option of options$ | async; let i = index\">\n <li *ngIf=\"option.isEnabled || showDisabled\" role=\"none\">\n <button\n mat-menu-item\n class=\"mat-menu-item collection-item-{{\n option.name | replaceChars : { search: '.', replace: '-' }\n }}\"\n matTooltip=\"{{ option | optionTooltip | async }}\"\n matTooltipPosition=\"right\"\n matTooltipTouchGestures=\"off\"\n [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n [class.mat-menu-item-separate]=\"option.isSeparate || isNewGroup(i)\"\n [class.mat-menu-item-selected]=\"option.isSelected\"\n [disabled]=\"!option.isEnabled\"\n (click)=\"click(option)\"\n attr.data-test=\"menu-item-{{ option.name }}\"\n >\n <i [esIcon]=\"option.icon\"></i> {{ option.name | translate }}\n </button>\n </li>\n </ng-container>\n </ul>\n</mat-menu>\n<div #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"display-none\"></div>\n", styles: ["::ng-deep .mat-dropdown-menu .mat-mdc-menu-content{min-width:200px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button{display:flex;align-items:center}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button:not(:disabled)>span{color:var(--primary)}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button>i{width:35px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content:not(:empty){padding:0!important}::ng-deep .mat-dropdown-menu ul{margin:0;list-style:none;padding-left:0}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text i{margin-right:10px}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item:hover:not([disabled]),::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-focused{color:var(--itemSelectedTextColor);background-color:var(--listItemSelectedBackground)}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}::ng-deep .mat-dropdown-menu ul li .mat-menu-item-separate{border-top:1px solid #ccc}@media screen and (max-width: 600px){::ng-deep .mat-dropdown-menu.cdk-overlay-backdrop{background:#000c}::ng-deep .mat-dropdown-menu.mat-mdc-menu-panel{position:fixed;bottom:0;left:0;max-width:100%;width:100%;border-radius:0;max-height:calc(100vh - 150px);overflow-y:auto}}\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: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: OptionTooltipPipe, name: "optionTooltip" }, { kind: "pipe", type: ReplaceCharsPipe, name: "replaceChars" }] }); }
|
|
739
739
|
}
|
|
740
740
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
741
741
|
type: Component,
|
|
742
|
-
args: [{ selector: 'es-dropdown', template: "<mat-menu\n #dropdown=\"matMenu\"\n class=\"mat-dropdown-menu\"\n [class]=\"menuClass\"\n backdropClass=\"mat-dropdown-menu\"\n [xPosition]=\"position === 'right' ? 'after' : 'before'\"\n>\n <!-- MatMenu has role=\"menu\", so the only meaningful role of descendants is \"menuitem\" -->\n <ul role=\"none\">\n <ng-container *ngFor=\"let option of options$ | async; let i = index\">\n <li *ngIf=\"option.isEnabled || showDisabled\" role=\"none\">\n <button\n mat-menu-item\n class=\"mat-menu-item collection-item-{{\n option.name | replaceChars : { search: '.', replace: '-' }\n }}\"\n matTooltip=\"{{ option | optionTooltip | async }}\"\n matTooltipPosition=\"right\"\n matTooltipTouchGestures=\"off\"\n [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n [class.mat-menu-item-separate]=\"option.isSeparate || isNewGroup(i)\"\n [class.mat-menu-item-selected]=\"option.isSelected\"\n [disabled]=\"!option.isEnabled\"\n (click)=\"click(option)\"\n attr.data-test=\"menu-item-{{ option.name }}\"\n >\n <i [esIcon]=\"option.icon\"></i> {{ option.name | translate }}\n </button>\n </li>\n </ng-container>\n </ul>\n</mat-menu>\n<div #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"display-none\"></div>\n", styles: ["::ng-deep .mat-dropdown-menu .mat-mdc-menu-content{min-width:200px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button{display:flex;align-items:center}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button:not(:disabled)>span{color:var(--primary)}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button>i{width:35px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content:not(:empty){padding:0!important}::ng-deep .mat-dropdown-menu ul{margin:0;list-style:none;padding-left:0}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text i{margin-right:10px}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item:hover:not([disabled]),::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-focused{color:var(--itemSelectedTextColor);background-color:var(--listItemSelectedBackground)}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-keyboard-focused{outline:none;border:
|
|
742
|
+
args: [{ selector: 'es-dropdown', template: "<mat-menu\n #dropdown=\"matMenu\"\n class=\"mat-dropdown-menu\"\n [class]=\"menuClass\"\n backdropClass=\"mat-dropdown-menu\"\n [xPosition]=\"position === 'right' ? 'after' : 'before'\"\n>\n <!-- MatMenu has role=\"menu\", so the only meaningful role of descendants is \"menuitem\" -->\n <ul role=\"none\">\n <ng-container *ngFor=\"let option of options$ | async; let i = index\">\n <li *ngIf=\"option.isEnabled || showDisabled\" role=\"none\">\n <button\n mat-menu-item\n class=\"mat-menu-item collection-item-{{\n option.name | replaceChars : { search: '.', replace: '-' }\n }}\"\n matTooltip=\"{{ option | optionTooltip | async }}\"\n matTooltipPosition=\"right\"\n matTooltipTouchGestures=\"off\"\n [attr.aria-label]=\"option.ariaLabel || option.name | translate\"\n [class.mat-menu-item-separate]=\"option.isSeparate || isNewGroup(i)\"\n [class.mat-menu-item-selected]=\"option.isSelected\"\n [disabled]=\"!option.isEnabled\"\n (click)=\"click(option)\"\n attr.data-test=\"menu-item-{{ option.name }}\"\n >\n <i [esIcon]=\"option.icon\"></i> {{ option.name | translate }}\n </button>\n </li>\n </ng-container>\n </ul>\n</mat-menu>\n<div #menuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"display-none\"></div>\n", styles: ["::ng-deep .mat-dropdown-menu .mat-mdc-menu-content{min-width:200px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button{display:flex;align-items:center}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button:not(:disabled)>span{color:var(--primary)}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content>ul>li>button>i{width:35px}::ng-deep .mat-dropdown-menu .mat-mdc-menu-content:not(:empty){padding:0!important}::ng-deep .mat-dropdown-menu ul{margin:0;list-style:none;padding-left:0}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item .mat-mdc-menu-item-text i{margin-right:10px}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item:hover:not([disabled]),::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-focused{color:var(--itemSelectedTextColor);background-color:var(--listItemSelectedBackground)}::ng-deep .mat-dropdown-menu ul li .mat-mdc-menu-item.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}::ng-deep .mat-dropdown-menu ul li .mat-menu-item-separate{border-top:1px solid #ccc}@media screen and (max-width: 600px){::ng-deep .mat-dropdown-menu.cdk-overlay-backdrop{background:#000c}::ng-deep .mat-dropdown-menu.mat-mdc-menu-panel{position:fixed;bottom:0;left:0;max-width:100%;width:100%;border-radius:0;max-height:calc(100vh - 150px);overflow-y:auto}}\n"] }]
|
|
743
743
|
}], ctorParameters: () => [{ type: UIService }], propDecorators: { menu: [{
|
|
744
744
|
type: ViewChild,
|
|
745
745
|
args: ['dropdown', { static: true }]
|
|
@@ -1753,11 +1753,11 @@ class NodeUrlComponent {
|
|
|
1753
1753
|
return false;
|
|
1754
1754
|
}
|
|
1755
1755
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NodeUrlComponent, deps: [{ token: NodeHelperService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1756
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: NodeUrlComponent, selector: "es-node-url", inputs: { node: "node", nodes: "nodes", target: "target", scope: "scope", queryParams: "queryParams", mode: "mode", disabled: "disabled", alwaysRipple: "alwaysRipple", ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabel: ["aria-label", "ariaLabel"] }, outputs: { buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "link", first: true, predicate: ["link"], descendants: true }], ngImport: i0, template: "<ng-template #content><ng-content></ng-content></ng-template>\n<ng-container *ngIf=\"mode === 'link'\">\n <a\n *ngIf=\"!disabled\"\n #link\n matRipple\n matRippleColor=\"primary\"\n [matRippleDisabled]=\"isNested\"\n [routerLink]=\"get('routerLink')\"\n [state]=\"getState()\"\n [target]=\"target\"\n [queryParams]=\"get('queryParams')\"\n queryParamsHandling=\"merge\"\n cdkMonitorElementFocus\n [attr.aria-label]=\"ariaLabel ? node.name : null\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n <!-- We use `div`s instead of `span`s here because the legacy `ListTable` component will insert\n `div` elements into this component's content. However, this will lead to invalid HTML for \"button\"\n mode. So really, users of this component should only insert flow content. -->\n <div *ngIf=\"disabled && !alwaysRipple\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <div *ngIf=\"disabled && alwaysRipple\" matRipple matRippleColor=\"primary\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</ng-container>\n<ng-container *ngIf=\"mode === 'wrapper'\">\n <div\n class=\"node-url-wrapper\"\n #wrapper\n matRipple\n matRippleColor=\"primary\"\n [matRippleDisabled]=\"disabled && !alwaysRipple\"\n (click)=\"clickWrapper($event)\"\n (auxclick)=\"clickWrapper($event)\"\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <!-- An invisible link that will by clicked programmatically by `clickWrapper()`. -->\n <a\n #link\n [routerLink]=\"get('routerLink')\"\n [state]=\"getState()\"\n [queryParams]=\"get('queryParams')\"\n queryParamsHandling=\"merge\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n class=\"cdk-visually-hidden\"\n ></a>\n</ng-container>\n<ng-container *ngIf=\"mode === 'button'\">\n <button\n [disabled]=\"disabled\"\n #link\n matRipple\n matRippleColor=\"primary\"\n [matRippleDisabled]=\"disabled && !alwaysRipple\"\n (click)=\"buttonClick.emit($event)\"\n cdkMonitorElementFocus\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n</ng-container>\n", styles: [":host{position:relative;display:flex}:host>*{flex-grow:1}:host>a{text-decoration:none}.cdk-keyboard-focused{outline:none;outline:
|
|
1756
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: NodeUrlComponent, selector: "es-node-url", inputs: { node: "node", nodes: "nodes", target: "target", scope: "scope", queryParams: "queryParams", mode: "mode", disabled: "disabled", alwaysRipple: "alwaysRipple", ariaDescribedby: ["aria-describedby", "ariaDescribedby"], ariaLabel: ["aria-label", "ariaLabel"] }, outputs: { buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "link", first: true, predicate: ["link"], descendants: true }], ngImport: i0, template: "<ng-template #content><ng-content></ng-content></ng-template>\n<ng-container *ngIf=\"mode === 'link'\">\n <a\n *ngIf=\"!disabled\"\n #link\n matRipple\n matRippleColor=\"primary\"\n [matRippleDisabled]=\"isNested\"\n [routerLink]=\"get('routerLink')\"\n [state]=\"getState()\"\n [target]=\"target\"\n [queryParams]=\"get('queryParams')\"\n queryParamsHandling=\"merge\"\n cdkMonitorElementFocus\n [attr.aria-label]=\"ariaLabel ? node.name : null\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n <!-- We use `div`s instead of `span`s here because the legacy `ListTable` component will insert\n `div` elements into this component's content. However, this will lead to invalid HTML for \"button\"\n mode. So really, users of this component should only insert flow content. -->\n <div *ngIf=\"disabled && !alwaysRipple\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <div *ngIf=\"disabled && alwaysRipple\" matRipple matRippleColor=\"primary\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</ng-container>\n<ng-container *ngIf=\"mode === 'wrapper'\">\n <div\n class=\"node-url-wrapper\"\n #wrapper\n matRipple\n matRippleColor=\"primary\"\n [matRippleDisabled]=\"disabled && !alwaysRipple\"\n (click)=\"clickWrapper($event)\"\n (auxclick)=\"clickWrapper($event)\"\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <!-- An invisible link that will by clicked programmatically by `clickWrapper()`. -->\n <a\n #link\n [routerLink]=\"get('routerLink')\"\n [state]=\"getState()\"\n [queryParams]=\"get('queryParams')\"\n queryParamsHandling=\"merge\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n class=\"cdk-visually-hidden\"\n ></a>\n</ng-container>\n<ng-container *ngIf=\"mode === 'button'\">\n <button\n [disabled]=\"disabled\"\n #link\n matRipple\n matRippleColor=\"primary\"\n [matRippleDisabled]=\"disabled && !alwaysRipple\"\n (click)=\"buttonClick.emit($event)\"\n cdkMonitorElementFocus\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n</ng-container>\n", styles: [":host{position:relative;display:flex}:host>*{flex-grow:1}:host>a{text-decoration:none}.cdk-keyboard-focused{outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}button{background-color:unset;border:unset;padding:unset;text-align:unset}div.node-url-wrapper{cursor:pointer}\n"], dependencies: [{ 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: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i2$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
1757
1757
|
}
|
|
1758
1758
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NodeUrlComponent, decorators: [{
|
|
1759
1759
|
type: Component,
|
|
1760
|
-
args: [{ selector: NODE_URL_TAG_NAME, template: "<ng-template #content><ng-content></ng-content></ng-template>\n<ng-container *ngIf=\"mode === 'link'\">\n <a\n *ngIf=\"!disabled\"\n #link\n matRipple\n matRippleColor=\"primary\"\n [matRippleDisabled]=\"isNested\"\n [routerLink]=\"get('routerLink')\"\n [state]=\"getState()\"\n [target]=\"target\"\n [queryParams]=\"get('queryParams')\"\n queryParamsHandling=\"merge\"\n cdkMonitorElementFocus\n [attr.aria-label]=\"ariaLabel ? node.name : null\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n <!-- We use `div`s instead of `span`s here because the legacy `ListTable` component will insert\n `div` elements into this component's content. However, this will lead to invalid HTML for \"button\"\n mode. So really, users of this component should only insert flow content. -->\n <div *ngIf=\"disabled && !alwaysRipple\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <div *ngIf=\"disabled && alwaysRipple\" matRipple matRippleColor=\"primary\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</ng-container>\n<ng-container *ngIf=\"mode === 'wrapper'\">\n <div\n class=\"node-url-wrapper\"\n #wrapper\n matRipple\n matRippleColor=\"primary\"\n [matRippleDisabled]=\"disabled && !alwaysRipple\"\n (click)=\"clickWrapper($event)\"\n (auxclick)=\"clickWrapper($event)\"\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <!-- An invisible link that will by clicked programmatically by `clickWrapper()`. -->\n <a\n #link\n [routerLink]=\"get('routerLink')\"\n [state]=\"getState()\"\n [queryParams]=\"get('queryParams')\"\n queryParamsHandling=\"merge\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n class=\"cdk-visually-hidden\"\n ></a>\n</ng-container>\n<ng-container *ngIf=\"mode === 'button'\">\n <button\n [disabled]=\"disabled\"\n #link\n matRipple\n matRippleColor=\"primary\"\n [matRippleDisabled]=\"disabled && !alwaysRipple\"\n (click)=\"buttonClick.emit($event)\"\n cdkMonitorElementFocus\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n</ng-container>\n", styles: [":host{position:relative;display:flex}:host>*{flex-grow:1}:host>a{text-decoration:none}.cdk-keyboard-focused{outline:none;outline:
|
|
1760
|
+
args: [{ selector: NODE_URL_TAG_NAME, template: "<ng-template #content><ng-content></ng-content></ng-template>\n<ng-container *ngIf=\"mode === 'link'\">\n <a\n *ngIf=\"!disabled\"\n #link\n matRipple\n matRippleColor=\"primary\"\n [matRippleDisabled]=\"isNested\"\n [routerLink]=\"get('routerLink')\"\n [state]=\"getState()\"\n [target]=\"target\"\n [queryParams]=\"get('queryParams')\"\n queryParamsHandling=\"merge\"\n cdkMonitorElementFocus\n [attr.aria-label]=\"ariaLabel ? node.name : null\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n <!-- We use `div`s instead of `span`s here because the legacy `ListTable` component will insert\n `div` elements into this component's content. However, this will lead to invalid HTML for \"button\"\n mode. So really, users of this component should only insert flow content. -->\n <div *ngIf=\"disabled && !alwaysRipple\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <div *ngIf=\"disabled && alwaysRipple\" matRipple matRippleColor=\"primary\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</ng-container>\n<ng-container *ngIf=\"mode === 'wrapper'\">\n <div\n class=\"node-url-wrapper\"\n #wrapper\n matRipple\n matRippleColor=\"primary\"\n [matRippleDisabled]=\"disabled && !alwaysRipple\"\n (click)=\"clickWrapper($event)\"\n (auxclick)=\"clickWrapper($event)\"\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <!-- An invisible link that will by clicked programmatically by `clickWrapper()`. -->\n <a\n #link\n [routerLink]=\"get('routerLink')\"\n [state]=\"getState()\"\n [queryParams]=\"get('queryParams')\"\n queryParamsHandling=\"merge\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n class=\"cdk-visually-hidden\"\n ></a>\n</ng-container>\n<ng-container *ngIf=\"mode === 'button'\">\n <button\n [disabled]=\"disabled\"\n #link\n matRipple\n matRippleColor=\"primary\"\n [matRippleDisabled]=\"disabled && !alwaysRipple\"\n (click)=\"buttonClick.emit($event)\"\n cdkMonitorElementFocus\n >\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </button>\n</ng-container>\n", styles: [":host{position:relative;display:flex}:host>*{flex-grow:1}:host>a{text-decoration:none}.cdk-keyboard-focused{outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}button{background-color:unset;border:unset;padding:unset;text-align:unset}div.node-url-wrapper{cursor:pointer}\n"] }]
|
|
1761
1761
|
}], ctorParameters: () => [{ type: NodeHelperService }, { type: i0.ElementRef }], propDecorators: { link: [{
|
|
1762
1762
|
type: ViewChild,
|
|
1763
1763
|
args: ['link']
|
|
@@ -2584,11 +2584,11 @@ class SortDropdownComponent {
|
|
|
2584
2584
|
this.sort.emit(item);
|
|
2585
2585
|
}
|
|
2586
2586
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SortDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2587
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: SortDropdownComponent, selector: "es-sort-dropdown", inputs: { columns: "columns", sortBy: "sortBy", sortAscending: "sortAscending" }, outputs: { sort: "sort" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: "<mat-menu #menu=\"matMenu\" class=\"sort-dropdown-menu\">\n <div class=\"collection-item-title\">{{ 'SORT_BY' | translate }}</div>\n <button\n *ngFor=\"let item of columns\"\n mat-menu-item\n (click)=\"setSort(item)\"\n class=\"collection-item\"\n [class.active]=\"sortBy === item.name\"\n >\n <span class=\"title\" *ngIf=\"item.label\">{{ item.label }}</span>\n <span class=\"title\" *ngIf=\"!item.label\">{{ item.type + '.' + item.name | translate }}</span>\n <ng-container *ngIf=\"sortBy === item.name && item.name !== 'ccm:collection_ordered_position'\">\n <i class=\"material-icons\" *ngIf=\"sortAscending\" [altText]=\"'ASCENDING' | translate\">\n arrow_upward\n </i>\n <i class=\"material-icons\" *ngIf=\"!sortAscending\" [altText]=\"'DESCENDING' | translate\">\n arrow_downward\n </i>\n <span class=\"cdk-visually-hidden\">{{ 'SELECTED' | translate }}</span>\n </ng-container>\n </button>\n</mat-menu>\n", styles: ["::ng-deep .sort-dropdown-menu{width:240px}.collection-item-title{color:var(--textLight);font-size:80%;font-weight:700;padding:5px 16px}.collection-item{display:flex;color:var(--primary);text-align:left;border:none;width:100%}.collection-item ::ng-deep .mat-mdc-menu-item-text{flex-grow:1;display:flex;align-items:center}.collection-item.cdk-keyboard-focused{outline:none;border:
|
|
2587
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: SortDropdownComponent, selector: "es-sort-dropdown", inputs: { columns: "columns", sortBy: "sortBy", sortAscending: "sortAscending" }, outputs: { sort: "sort" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, static: true }], ngImport: i0, template: "<mat-menu #menu=\"matMenu\" class=\"sort-dropdown-menu\">\n <div class=\"collection-item-title\">{{ 'SORT_BY' | translate }}</div>\n <button\n *ngFor=\"let item of columns\"\n mat-menu-item\n (click)=\"setSort(item)\"\n class=\"collection-item\"\n [class.active]=\"sortBy === item.name\"\n >\n <span class=\"title\" *ngIf=\"item.label\">{{ item.label }}</span>\n <span class=\"title\" *ngIf=\"!item.label\">{{ item.type + '.' + item.name | translate }}</span>\n <ng-container *ngIf=\"sortBy === item.name && item.name !== 'ccm:collection_ordered_position'\">\n <i class=\"material-icons\" *ngIf=\"sortAscending\" [altText]=\"'ASCENDING' | translate\">\n arrow_upward\n </i>\n <i class=\"material-icons\" *ngIf=\"!sortAscending\" [altText]=\"'DESCENDING' | translate\">\n arrow_downward\n </i>\n <span class=\"cdk-visually-hidden\">{{ 'SELECTED' | translate }}</span>\n </ng-container>\n </button>\n</mat-menu>\n", styles: ["::ng-deep .sort-dropdown-menu{width:240px}.collection-item-title{color:var(--textLight);font-size:80%;font-weight:700;padding:5px 16px}.collection-item{display:flex;color:var(--primary);text-align:left;border:none;width:100%}.collection-item ::ng-deep .mat-mdc-menu-item-text{flex-grow:1;display:flex;align-items:center}.collection-item.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}.collection-item.active{--mat-menu-item-label-text-weight: bold}.collection-item.active:after{content:\"\";position:absolute;left:0;width:100%;height:100%;background:linear-gradient(to right,var(--primary) 0,var(--primary) 5px,transparent 5px,transparent 5%)}.collection-item .title{flex-grow:1}\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: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))] }); }
|
|
2588
2588
|
}
|
|
2589
2589
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SortDropdownComponent, decorators: [{
|
|
2590
2590
|
type: Component,
|
|
2591
|
-
args: [{ selector: 'es-sort-dropdown', animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))], template: "<mat-menu #menu=\"matMenu\" class=\"sort-dropdown-menu\">\n <div class=\"collection-item-title\">{{ 'SORT_BY' | translate }}</div>\n <button\n *ngFor=\"let item of columns\"\n mat-menu-item\n (click)=\"setSort(item)\"\n class=\"collection-item\"\n [class.active]=\"sortBy === item.name\"\n >\n <span class=\"title\" *ngIf=\"item.label\">{{ item.label }}</span>\n <span class=\"title\" *ngIf=\"!item.label\">{{ item.type + '.' + item.name | translate }}</span>\n <ng-container *ngIf=\"sortBy === item.name && item.name !== 'ccm:collection_ordered_position'\">\n <i class=\"material-icons\" *ngIf=\"sortAscending\" [altText]=\"'ASCENDING' | translate\">\n arrow_upward\n </i>\n <i class=\"material-icons\" *ngIf=\"!sortAscending\" [altText]=\"'DESCENDING' | translate\">\n arrow_downward\n </i>\n <span class=\"cdk-visually-hidden\">{{ 'SELECTED' | translate }}</span>\n </ng-container>\n </button>\n</mat-menu>\n", styles: ["::ng-deep .sort-dropdown-menu{width:240px}.collection-item-title{color:var(--textLight);font-size:80%;font-weight:700;padding:5px 16px}.collection-item{display:flex;color:var(--primary);text-align:left;border:none;width:100%}.collection-item ::ng-deep .mat-mdc-menu-item-text{flex-grow:1;display:flex;align-items:center}.collection-item.cdk-keyboard-focused{outline:none;border:
|
|
2591
|
+
args: [{ selector: 'es-sort-dropdown', animations: [trigger('openOverlay', UIAnimation.openOverlay(UIAnimation.ANIMATION_TIME_FAST))], template: "<mat-menu #menu=\"matMenu\" class=\"sort-dropdown-menu\">\n <div class=\"collection-item-title\">{{ 'SORT_BY' | translate }}</div>\n <button\n *ngFor=\"let item of columns\"\n mat-menu-item\n (click)=\"setSort(item)\"\n class=\"collection-item\"\n [class.active]=\"sortBy === item.name\"\n >\n <span class=\"title\" *ngIf=\"item.label\">{{ item.label }}</span>\n <span class=\"title\" *ngIf=\"!item.label\">{{ item.type + '.' + item.name | translate }}</span>\n <ng-container *ngIf=\"sortBy === item.name && item.name !== 'ccm:collection_ordered_position'\">\n <i class=\"material-icons\" *ngIf=\"sortAscending\" [altText]=\"'ASCENDING' | translate\">\n arrow_upward\n </i>\n <i class=\"material-icons\" *ngIf=\"!sortAscending\" [altText]=\"'DESCENDING' | translate\">\n arrow_downward\n </i>\n <span class=\"cdk-visually-hidden\">{{ 'SELECTED' | translate }}</span>\n </ng-container>\n </button>\n</mat-menu>\n", styles: ["::ng-deep .sort-dropdown-menu{width:240px}.collection-item-title{color:var(--textLight);font-size:80%;font-weight:700;padding:5px 16px}.collection-item{display:flex;color:var(--primary);text-align:left;border:none;width:100%}.collection-item ::ng-deep .mat-mdc-menu-item-text{flex-grow:1;display:flex;align-items:center}.collection-item.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}.collection-item.active{--mat-menu-item-label-text-weight: bold}.collection-item.active:after{content:\"\";position:absolute;left:0;width:100%;height:100%;background:linear-gradient(to right,var(--primary) 0,var(--primary) 5px,transparent 5px,transparent 5%)}.collection-item .title{flex-grow:1}\n"] }]
|
|
2592
2592
|
}], ctorParameters: () => [], propDecorators: { menu: [{
|
|
2593
2593
|
type: ViewChild,
|
|
2594
2594
|
args: ['menu', { static: true }]
|
|
@@ -5453,11 +5453,11 @@ class NodeEntriesCardComponent {
|
|
|
5453
5453
|
}, this.node);
|
|
5454
5454
|
}
|
|
5455
5455
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NodeEntriesCardComponent, deps: [{ token: NodeEntriesService }, { token: NodeHelperService }, { token: i0.ApplicationRef }, { token: i2.ConfigService }, { token: i2.AuthenticationService }, { token: NodeEntriesTemplatesService }, { token: NodeEntriesGlobalService }, { token: Toast, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5456
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: NodeEntriesCardComponent, selector: "es-node-entries-card", inputs: { dropdown: "dropdown", node: "node" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [class]=\"\n 'grid-card' +\n (isCollection\n ? ' grid-card-collection grid-card-collection-scope-' +\n node.collection.scope +\n ' grid-card-collection-type-' +\n node.collection.type\n : '') +\n ($any(node).virtual ? ' grid-card-virtual' : '') +\n ' ' +\n nodeEntriesGlobalService.getCustomCssClass(node)\n \"\n [style.background-color]=\"isCollection ? node.collection.color : null\"\n [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n [class.selected]=\"entriesService.selection.isSelected(node)\"\n (contextmenu)=\"openContextmenu($event, node)\"\n (keydown.ContextMenu)=\"openContextmenu($event, node)\"\n>\n <div\n *ngIf=\"templatesService.overlay\"\n class=\"card-overlay\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Overlay,\n })\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"templatesService.overlay; context: { element: node }\"\n ></ng-container>\n </div>\n <button\n *ngIf=\"dropdown\"\n #menuTrigger=\"matMenuTrigger\"\n mat-button\n class=\"dropdown-dummy cdk-visually-hidden\"\n [style.left.px]=\"dropdownLeft\"\n [style.top.px]=\"dropdownTop\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n ></button>\n <div class=\"card-top-bar\" [style.background-color]=\"isCollection ? node.collection.color : null\">\n <div class=\"card-top-bar-collection-color\" *ngIf=\"nodeHelper.isNodeCollection(node)\"></div>\n <es-node-type-badge [node]=\"node\"></es-node-type-badge>\n <div *ngIf=\"isCollection && node.collection.pinned\" class=\"card-top-bar-flag\">\n <i esIcon=\"edu-pin\"></i>\n </div>\n <div class=\"card-top-bar-empty\"></div>\n <es-node-stats-badges [node]=\"node\"></es-node-stats-badges>\n <div class=\"card-top-bar-checkbox\" *ngIf=\"entriesService.checkbox\">\n <mat-checkbox\n [checked]=\"entriesService.selection.isSelected(node)\"\n (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n color=\"primary\"\n aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n ></mat-checkbox>\n </div>\n </div>\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n mode=\"wrapper\"\n [node]=\"node\"\n esFocusState\n #cardFocusState=\"esFocusState\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n image;\n context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n \"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </es-node-url>\n <div\n *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n matRipple\n (click)=\"\n entriesService.onClicked({\n event: $event,\n element: node,\n source: ClickSource.Metadata,\n })\n \"\n (dblclick)=\"\n entriesService.dblClickItem.emit({\n element: node,\n source: ClickSource.Metadata,\n })\n \"\n esFocusState\n #cardFocusState=\"esFocusState\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n image;\n context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n \"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </div>\n <div class=\"card-options\" *ngIf=\"entriesService.options || showRatings\">\n <div class=\"card-rating-area\">\n <es-node-rating [node]=\"node\"></es-node-rating>\n </div>\n <div class=\"card-options-area\">\n <es-option-button\n *ngFor=\"let option of optionsOnCard()\"\n class=\"card-options-always\"\n [option]=\"option\"\n [node]=\"node\"\n ></es-option-button>\n <div class=\"card-options-spacer\"></div>\n <button\n *ngIf=\"dropdown\"\n mat-icon-button\n color=\"primary\"\n (click)=\"openMenu(node)\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n [attr.aria-label]=\"'OPTIONS_FOR' | translate : { element: (node | nodeTitle) }\"\n data-test=\"card-options-button\"\n >\n <i esIcon=\"more_vert\"></i>\n </button>\n </div>\n </div>\n <ng-template #image let-playAnimation=\"playAnimation\">\n <div\n class=\"card-image-area\"\n [style.background-color]=\"isCollection ? node.collection.color : null\"\n >\n <ng-container *ngIf=\"getTemplate(CustomFieldSpecialType.preview) as ref\">\n <ng-container *ngTemplateOutlet=\"ref; context: { node: this.node }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!getTemplate(CustomFieldSpecialType.preview)\">\n <es-preview-image\n *ngIf=\"!(isCollection && node.preview.isIcon)\"\n [node]=\"node\"\n [playAnimation]=\"playAnimation\"\n ></es-preview-image>\n <div *ngIf=\"isCollection && node.preview.isIcon\" class=\"card-collection-image\">\n <i esIcon=\"layers\"></i>\n </div>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #meta let-link=\"link\">\n <div class=\"card-meta\">\n <div\n *ngFor=\"let displayPart of getVisibleColumns(); let first = first\"\n class=\"card-meta-row card-meta-row-{{ displayPart.name | lowercase | propertySlug }}\"\n [class.card-meta-row-primary]=\"first\"\n >\n <ng-container *ngIf=\"first\">\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n [node]=\"node\"\n #link\n >\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </es-node-url>\n <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!first\">\n <label>\n {{ displayPart | esListItemLabel | async }}\n </label>\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </ng-container>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 20px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:var(--focusWidth) solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card .card-image-area{height:150px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:40px;font-size:40px;border-radius:50%}.grid-card .card-meta{padding:10px 20px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:var(--focusWidth) solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.grid-card{grid-template-rows:40px auto auto}.grid-card .card-meta .card-meta-row>es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card es-node-url .node-url-wrapper{height:100%}\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: FocusStateDirective, selector: "[esFocusState]", exportAs: ["esFocusState"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "component", type: NodeUrlComponent, selector: "es-node-url", inputs: ["node", "nodes", "target", "scope", "queryParams", "mode", "disabled", "alwaysRipple", "aria-describedby", "aria-label"], outputs: ["buttonClick"] }, { kind: "component", type: ListBaseComponent, selector: "es-list-base", inputs: ["forceText"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: NodeRatingComponent, selector: "es-node-rating", inputs: ["node"] }, { kind: "component", type: PreviewImageComponent, selector: "es-preview-image", inputs: ["node", "playAnimation"] }, { kind: "component", type: NodeTypeBadgeComponent, selector: "es-node-type-badge", inputs: ["node"] }, { kind: "component", type: OptionButtonComponent, selector: "es-option-button", inputs: ["option", "node"] }, { kind: "component", type: NodeStatsBadgesComponent, selector: "es-node-stats-badges", inputs: ["node", "backgroundStyle"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: PropertySlugPipe, name: "propertySlug" }, { kind: "pipe", type: NodeTitlePipe, name: "nodeTitle" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListItemLabelPipe, name: "esListItemLabel" }] }); }
|
|
5456
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: NodeEntriesCardComponent, selector: "es-node-entries-card", inputs: { dropdown: "dropdown", node: "node" }, viewQueries: [{ propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n [class]=\"\n 'grid-card' +\n (isCollection\n ? ' grid-card-collection grid-card-collection-scope-' +\n node.collection.scope +\n ' grid-card-collection-type-' +\n node.collection.type\n : '') +\n ($any(node).virtual ? ' grid-card-virtual' : '') +\n ' ' +\n nodeEntriesGlobalService.getCustomCssClass(node)\n \"\n [style.background-color]=\"isCollection ? node.collection.color : null\"\n [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n [class.selected]=\"entriesService.selection.isSelected(node)\"\n (contextmenu)=\"openContextmenu($event, node)\"\n (keydown.ContextMenu)=\"openContextmenu($event, node)\"\n>\n <div\n *ngIf=\"templatesService.overlay\"\n class=\"card-overlay\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Overlay,\n })\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"templatesService.overlay; context: { element: node }\"\n ></ng-container>\n </div>\n <button\n *ngIf=\"dropdown\"\n #menuTrigger=\"matMenuTrigger\"\n mat-button\n class=\"dropdown-dummy cdk-visually-hidden\"\n [style.left.px]=\"dropdownLeft\"\n [style.top.px]=\"dropdownTop\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n ></button>\n <div class=\"card-top-bar\" [style.background-color]=\"isCollection ? node.collection.color : null\">\n <div class=\"card-top-bar-collection-color\" *ngIf=\"nodeHelper.isNodeCollection(node)\"></div>\n <es-node-type-badge [node]=\"node\"></es-node-type-badge>\n <div *ngIf=\"isCollection && node.collection.pinned\" class=\"card-top-bar-flag\">\n <i esIcon=\"edu-pin\"></i>\n </div>\n <div class=\"card-top-bar-empty\"></div>\n <es-node-stats-badges [node]=\"node\"></es-node-stats-badges>\n <div class=\"card-top-bar-checkbox\" *ngIf=\"entriesService.checkbox\">\n <mat-checkbox\n [checked]=\"entriesService.selection.isSelected(node)\"\n (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n color=\"primary\"\n aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n ></mat-checkbox>\n </div>\n </div>\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n mode=\"wrapper\"\n [node]=\"node\"\n esFocusState\n #cardFocusState=\"esFocusState\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n image;\n context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n \"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </es-node-url>\n <div\n *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n matRipple\n (click)=\"\n entriesService.onClicked({\n event: $event,\n element: node,\n source: ClickSource.Metadata,\n })\n \"\n (dblclick)=\"\n entriesService.dblClickItem.emit({\n element: node,\n source: ClickSource.Metadata,\n })\n \"\n esFocusState\n #cardFocusState=\"esFocusState\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n image;\n context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n \"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </div>\n <div class=\"card-options\" *ngIf=\"entriesService.options || showRatings\">\n <div class=\"card-rating-area\">\n <es-node-rating [node]=\"node\"></es-node-rating>\n </div>\n <div class=\"card-options-area\">\n <es-option-button\n *ngFor=\"let option of optionsOnCard()\"\n class=\"card-options-always\"\n [option]=\"option\"\n [node]=\"node\"\n ></es-option-button>\n <div class=\"card-options-spacer\"></div>\n <button\n *ngIf=\"dropdown\"\n mat-icon-button\n color=\"primary\"\n (click)=\"openMenu(node)\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n [attr.aria-label]=\"'OPTIONS_FOR' | translate : { element: (node | nodeTitle) }\"\n data-test=\"card-options-button\"\n >\n <i esIcon=\"more_vert\"></i>\n </button>\n </div>\n </div>\n <ng-template #image let-playAnimation=\"playAnimation\">\n <div\n class=\"card-image-area\"\n [style.background-color]=\"isCollection ? node.collection.color : null\"\n >\n <ng-container *ngIf=\"getTemplate(CustomFieldSpecialType.preview) as ref\">\n <ng-container *ngTemplateOutlet=\"ref; context: { node: this.node }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!getTemplate(CustomFieldSpecialType.preview)\">\n <es-preview-image\n *ngIf=\"!(isCollection && node.preview.isIcon)\"\n [node]=\"node\"\n [playAnimation]=\"playAnimation\"\n ></es-preview-image>\n <div *ngIf=\"isCollection && node.preview.isIcon\" class=\"card-collection-image\">\n <i esIcon=\"layers\"></i>\n </div>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #meta let-link=\"link\">\n <div class=\"card-meta\">\n <div\n *ngFor=\"let displayPart of getVisibleColumns(); let first = first\"\n class=\"card-meta-row card-meta-row-{{ displayPart.name | lowercase | propertySlug }}\"\n [class.card-meta-row-primary]=\"first\"\n >\n <ng-container *ngIf=\"first\">\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n [node]=\"node\"\n #link\n >\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </es-node-url>\n <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!first\">\n <label>\n {{ displayPart | esListItemLabel | async }}\n </label>\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </ng-container>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 20px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:2px solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card .card-image-area{height:150px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:40px;font-size:40px;border-radius:50%}.grid-card .card-meta{padding:10px 20px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.grid-card{grid-template-rows:40px auto auto}.grid-card .card-meta .card-meta-row>es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card es-node-url .node-url-wrapper{height:100%}\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: FocusStateDirective, selector: "[esFocusState]", exportAs: ["esFocusState"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "component", type: NodeUrlComponent, selector: "es-node-url", inputs: ["node", "nodes", "target", "scope", "queryParams", "mode", "disabled", "alwaysRipple", "aria-describedby", "aria-label"], outputs: ["buttonClick"] }, { kind: "component", type: ListBaseComponent, selector: "es-list-base", inputs: ["forceText"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: NodeRatingComponent, selector: "es-node-rating", inputs: ["node"] }, { kind: "component", type: PreviewImageComponent, selector: "es-preview-image", inputs: ["node", "playAnimation"] }, { kind: "component", type: NodeTypeBadgeComponent, selector: "es-node-type-badge", inputs: ["node"] }, { kind: "component", type: OptionButtonComponent, selector: "es-option-button", inputs: ["option", "node"] }, { kind: "component", type: NodeStatsBadgesComponent, selector: "es-node-stats-badges", inputs: ["node", "backgroundStyle"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: PropertySlugPipe, name: "propertySlug" }, { kind: "pipe", type: NodeTitlePipe, name: "nodeTitle" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListItemLabelPipe, name: "esListItemLabel" }] }); }
|
|
5457
5457
|
}
|
|
5458
5458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NodeEntriesCardComponent, decorators: [{
|
|
5459
5459
|
type: Component,
|
|
5460
|
-
args: [{ selector: 'es-node-entries-card', template: "<div\n [class]=\"\n 'grid-card' +\n (isCollection\n ? ' grid-card-collection grid-card-collection-scope-' +\n node.collection.scope +\n ' grid-card-collection-type-' +\n node.collection.type\n : '') +\n ($any(node).virtual ? ' grid-card-virtual' : '') +\n ' ' +\n nodeEntriesGlobalService.getCustomCssClass(node)\n \"\n [style.background-color]=\"isCollection ? node.collection.color : null\"\n [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n [class.selected]=\"entriesService.selection.isSelected(node)\"\n (contextmenu)=\"openContextmenu($event, node)\"\n (keydown.ContextMenu)=\"openContextmenu($event, node)\"\n>\n <div\n *ngIf=\"templatesService.overlay\"\n class=\"card-overlay\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Overlay,\n })\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"templatesService.overlay; context: { element: node }\"\n ></ng-container>\n </div>\n <button\n *ngIf=\"dropdown\"\n #menuTrigger=\"matMenuTrigger\"\n mat-button\n class=\"dropdown-dummy cdk-visually-hidden\"\n [style.left.px]=\"dropdownLeft\"\n [style.top.px]=\"dropdownTop\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n ></button>\n <div class=\"card-top-bar\" [style.background-color]=\"isCollection ? node.collection.color : null\">\n <div class=\"card-top-bar-collection-color\" *ngIf=\"nodeHelper.isNodeCollection(node)\"></div>\n <es-node-type-badge [node]=\"node\"></es-node-type-badge>\n <div *ngIf=\"isCollection && node.collection.pinned\" class=\"card-top-bar-flag\">\n <i esIcon=\"edu-pin\"></i>\n </div>\n <div class=\"card-top-bar-empty\"></div>\n <es-node-stats-badges [node]=\"node\"></es-node-stats-badges>\n <div class=\"card-top-bar-checkbox\" *ngIf=\"entriesService.checkbox\">\n <mat-checkbox\n [checked]=\"entriesService.selection.isSelected(node)\"\n (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n color=\"primary\"\n aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n ></mat-checkbox>\n </div>\n </div>\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n mode=\"wrapper\"\n [node]=\"node\"\n esFocusState\n #cardFocusState=\"esFocusState\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n image;\n context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n \"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </es-node-url>\n <div\n *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n matRipple\n (click)=\"\n entriesService.onClicked({\n event: $event,\n element: node,\n source: ClickSource.Metadata,\n })\n \"\n (dblclick)=\"\n entriesService.dblClickItem.emit({\n element: node,\n source: ClickSource.Metadata,\n })\n \"\n esFocusState\n #cardFocusState=\"esFocusState\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n image;\n context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n \"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </div>\n <div class=\"card-options\" *ngIf=\"entriesService.options || showRatings\">\n <div class=\"card-rating-area\">\n <es-node-rating [node]=\"node\"></es-node-rating>\n </div>\n <div class=\"card-options-area\">\n <es-option-button\n *ngFor=\"let option of optionsOnCard()\"\n class=\"card-options-always\"\n [option]=\"option\"\n [node]=\"node\"\n ></es-option-button>\n <div class=\"card-options-spacer\"></div>\n <button\n *ngIf=\"dropdown\"\n mat-icon-button\n color=\"primary\"\n (click)=\"openMenu(node)\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n [attr.aria-label]=\"'OPTIONS_FOR' | translate : { element: (node | nodeTitle) }\"\n data-test=\"card-options-button\"\n >\n <i esIcon=\"more_vert\"></i>\n </button>\n </div>\n </div>\n <ng-template #image let-playAnimation=\"playAnimation\">\n <div\n class=\"card-image-area\"\n [style.background-color]=\"isCollection ? node.collection.color : null\"\n >\n <ng-container *ngIf=\"getTemplate(CustomFieldSpecialType.preview) as ref\">\n <ng-container *ngTemplateOutlet=\"ref; context: { node: this.node }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!getTemplate(CustomFieldSpecialType.preview)\">\n <es-preview-image\n *ngIf=\"!(isCollection && node.preview.isIcon)\"\n [node]=\"node\"\n [playAnimation]=\"playAnimation\"\n ></es-preview-image>\n <div *ngIf=\"isCollection && node.preview.isIcon\" class=\"card-collection-image\">\n <i esIcon=\"layers\"></i>\n </div>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #meta let-link=\"link\">\n <div class=\"card-meta\">\n <div\n *ngFor=\"let displayPart of getVisibleColumns(); let first = first\"\n class=\"card-meta-row card-meta-row-{{ displayPart.name | lowercase | propertySlug }}\"\n [class.card-meta-row-primary]=\"first\"\n >\n <ng-container *ngIf=\"first\">\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n [node]=\"node\"\n #link\n >\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </es-node-url>\n <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!first\">\n <label>\n {{ displayPart | esListItemLabel | async }}\n </label>\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </ng-container>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 20px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:var(--focusWidth) solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card .card-image-area{height:150px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:40px;font-size:40px;border-radius:50%}.grid-card .card-meta{padding:10px 20px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:var(--focusWidth) solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.grid-card{grid-template-rows:40px auto auto}.grid-card .card-meta .card-meta-row>es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card es-node-url .node-url-wrapper{height:100%}\n"] }]
|
|
5460
|
+
args: [{ selector: 'es-node-entries-card', template: "<div\n [class]=\"\n 'grid-card' +\n (isCollection\n ? ' grid-card-collection grid-card-collection-scope-' +\n node.collection.scope +\n ' grid-card-collection-type-' +\n node.collection.type\n : '') +\n ($any(node).virtual ? ' grid-card-virtual' : '') +\n ' ' +\n nodeEntriesGlobalService.getCustomCssClass(node)\n \"\n [style.background-color]=\"isCollection ? node.collection.color : null\"\n [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n [class.selected]=\"entriesService.selection.isSelected(node)\"\n (contextmenu)=\"openContextmenu($event, node)\"\n (keydown.ContextMenu)=\"openContextmenu($event, node)\"\n>\n <div\n *ngIf=\"templatesService.overlay\"\n class=\"card-overlay\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Overlay,\n })\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"templatesService.overlay; context: { element: node }\"\n ></ng-container>\n </div>\n <button\n *ngIf=\"dropdown\"\n #menuTrigger=\"matMenuTrigger\"\n mat-button\n class=\"dropdown-dummy cdk-visually-hidden\"\n [style.left.px]=\"dropdownLeft\"\n [style.top.px]=\"dropdownTop\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n ></button>\n <div class=\"card-top-bar\" [style.background-color]=\"isCollection ? node.collection.color : null\">\n <div class=\"card-top-bar-collection-color\" *ngIf=\"nodeHelper.isNodeCollection(node)\"></div>\n <es-node-type-badge [node]=\"node\"></es-node-type-badge>\n <div *ngIf=\"isCollection && node.collection.pinned\" class=\"card-top-bar-flag\">\n <i esIcon=\"edu-pin\"></i>\n </div>\n <div class=\"card-top-bar-empty\"></div>\n <es-node-stats-badges [node]=\"node\"></es-node-stats-badges>\n <div class=\"card-top-bar-checkbox\" *ngIf=\"entriesService.checkbox\">\n <mat-checkbox\n [checked]=\"entriesService.selection.isSelected(node)\"\n (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n color=\"primary\"\n aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n ></mat-checkbox>\n </div>\n </div>\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n mode=\"wrapper\"\n [node]=\"node\"\n esFocusState\n #cardFocusState=\"esFocusState\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n image;\n context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n \"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </es-node-url>\n <div\n *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n matRipple\n (click)=\"\n entriesService.onClicked({\n event: $event,\n element: node,\n source: ClickSource.Metadata,\n })\n \"\n (dblclick)=\"\n entriesService.dblClickItem.emit({\n element: node,\n source: ClickSource.Metadata,\n })\n \"\n esFocusState\n #cardFocusState=\"esFocusState\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n image;\n context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n \"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </div>\n <div class=\"card-options\" *ngIf=\"entriesService.options || showRatings\">\n <div class=\"card-rating-area\">\n <es-node-rating [node]=\"node\"></es-node-rating>\n </div>\n <div class=\"card-options-area\">\n <es-option-button\n *ngFor=\"let option of optionsOnCard()\"\n class=\"card-options-always\"\n [option]=\"option\"\n [node]=\"node\"\n ></es-option-button>\n <div class=\"card-options-spacer\"></div>\n <button\n *ngIf=\"dropdown\"\n mat-icon-button\n color=\"primary\"\n (click)=\"openMenu(node)\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n [attr.aria-label]=\"'OPTIONS_FOR' | translate : { element: (node | nodeTitle) }\"\n data-test=\"card-options-button\"\n >\n <i esIcon=\"more_vert\"></i>\n </button>\n </div>\n </div>\n <ng-template #image let-playAnimation=\"playAnimation\">\n <div\n class=\"card-image-area\"\n [style.background-color]=\"isCollection ? node.collection.color : null\"\n >\n <ng-container *ngIf=\"getTemplate(CustomFieldSpecialType.preview) as ref\">\n <ng-container *ngTemplateOutlet=\"ref; context: { node: this.node }\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!getTemplate(CustomFieldSpecialType.preview)\">\n <es-preview-image\n *ngIf=\"!(isCollection && node.preview.isIcon)\"\n [node]=\"node\"\n [playAnimation]=\"playAnimation\"\n ></es-preview-image>\n <div *ngIf=\"isCollection && node.preview.isIcon\" class=\"card-collection-image\">\n <i esIcon=\"layers\"></i>\n </div>\n </ng-container>\n </div>\n </ng-template>\n <ng-template #meta let-link=\"link\">\n <div class=\"card-meta\">\n <div\n *ngFor=\"let displayPart of getVisibleColumns(); let first = first\"\n class=\"card-meta-row card-meta-row-{{ displayPart.name | lowercase | propertySlug }}\"\n [class.card-meta-row-primary]=\"first\"\n >\n <ng-container *ngIf=\"first\">\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n [node]=\"node\"\n #link\n >\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </es-node-url>\n <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!first\">\n <label>\n {{ displayPart | esListItemLabel | async }}\n </label>\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </ng-container>\n </div>\n </div>\n </ng-template>\n</div>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 20px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:2px solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card .card-image-area{height:150px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:40px;font-size:40px;border-radius:50%}.grid-card .card-meta{padding:10px 20px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.grid-card{grid-template-rows:40px auto auto}.grid-card .card-meta .card-meta-row>es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card es-node-url .node-url-wrapper{height:100%}\n"] }]
|
|
5461
5461
|
}], ctorParameters: () => [{ type: NodeEntriesService }, { type: NodeHelperService }, { type: i0.ApplicationRef }, { type: i2.ConfigService }, { type: i2.AuthenticationService }, { type: NodeEntriesTemplatesService }, { type: NodeEntriesGlobalService }, { type: Toast, decorators: [{
|
|
5462
5462
|
type: Optional
|
|
5463
5463
|
}] }], propDecorators: { dropdown: [{
|
|
@@ -5491,11 +5491,11 @@ class NodeEntriesCardSmallComponent {
|
|
|
5491
5491
|
event.stopPropagation();
|
|
5492
5492
|
}
|
|
5493
5493
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NodeEntriesCardSmallComponent, deps: [{ token: NodeEntriesService }, { token: NodeHelperService }, { token: NodeEntriesTemplatesService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5494
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: NodeEntriesCardSmallComponent, selector: "es-node-entries-card-small", inputs: { node: "node" }, ngImport: i0, template: "<div\n [class]=\"\n 'grid-card' +\n (nodeHelper.isNodeCollection(node)\n ? ' grid-card-collection grid-card-collection-scope-' +\n node.collection.scope +\n ' grid-card-collection-type-' +\n node.collection.type\n : '') +\n ($any(node).virtual ? ' grid-card-virtual' : '') +\n ' ' +\n (entriesService.singleClickHint === 'dynamic' ? ' dynamic-single-click' : '')\n \"\n [style.background-color]=\"nodeHelper.isNodeCollection(node) ? node.collection.color : null\"\n (contextmenu)=\"openContextmenu($event)\"\n (keydown.ContextMenu)=\"openContextmenu($event)\"\n>\n <div\n *ngIf=\"templatesService.overlay\"\n class=\"card-overlay\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Overlay,\n })\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"templatesService.overlay; context: { element: node }\"\n ></ng-container>\n </div>\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n mode=\"wrapper\"\n [node]=\"node\"\n esFocusState\n #cardFocusState=\"esFocusState\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n image;\n context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n \"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </es-node-url>\n <ng-container *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n <ng-container *ngTemplateOutlet=\"image\"></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </ng-container>\n</div>\n<ng-template #image let-playAnimation=\"playAnimation\">\n <div\n class=\"card-image-area\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Preview,\n })\n \"\n >\n <div *ngIf=\"nodeHelper.isNodeCollection(node) && node.collection.pinned\" class=\"collection-pin\">\n <i esIcon=\"edu-pin\"></i>\n </div>\n <es-preview-image\n *ngIf=\"!(nodeHelper.isNodeCollection(node) && node.preview.isIcon)\"\n [node]=\"node\"\n [playAnimation]=\"playAnimation\"\n ></es-preview-image>\n <div\n *ngIf=\"nodeHelper.isNodeCollection(node) && node.preview.isIcon\"\n class=\"card-collection-image\"\n >\n <i esIcon=\"layers\"></i>\n </div>\n </div>\n</ng-template>\n<ng-template #meta>\n <div\n class=\"card-meta\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Metadata,\n })\n \"\n >\n <div\n *ngFor=\"let displayPart of entriesService.columns; let first = first\"\n class=\"card-meta-row\"\n >\n <ng-container *ngIf=\"first\">\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n [node]=\"node\"\n #link\n >\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </es-node-url>\n <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!first\">\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </ng-container>\n </div>\n </div>\n <ng-container\n *ngTemplateOutlet=\"templatesService.actionArea; context: { element: node }\"\n ></ng-container>\n</ng-template>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 15px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:var(--focusWidth) solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card .card-image-area{height:100px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:25px;font-size:25px;border-radius:50%}.grid-card .card-meta{padding:8px 15px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:var(--focusWidth) solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.collection-pin{background:#ffffff80;border-radius:50px;position:absolute;z-index:1;right:10px;top:10px;width:25px;height:25px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 3px #0000001a}.collection-pin>i{font-size:12px}.grid-card .card-meta-row ::ng-deep es-node-url a.cdk-keyboard-focused{outline-color:var(--palette-primary-400)}.grid-card{cursor:pointer}.grid-card.grid-card-collection{background-color:rgb(var(--palette-primary-200))}.grid-card .card-meta{background-color:#fffc;padding-bottom:8px}.grid-card .card-meta .card-meta-row:nth-child(1){grid-column:1/3}.grid-card .card-meta .card-meta-row:nth-child(2){justify-self:flex-start}.grid-card .card-meta .card-meta-row:nth-child(2),.grid-card .card-meta .card-meta-row:nth-child(3){grid-row:2;font-size:var(--fontSizeXSmall)}\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: FocusStateDirective, selector: "[esFocusState]", exportAs: ["esFocusState"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "component", type: NodeUrlComponent, selector: "es-node-url", inputs: ["node", "nodes", "target", "scope", "queryParams", "mode", "disabled", "alwaysRipple", "aria-describedby", "aria-label"], outputs: ["buttonClick"] }, { kind: "component", type: ListBaseComponent, selector: "es-list-base", inputs: ["forceText"] }, { kind: "component", type: PreviewImageComponent, selector: "es-preview-image", inputs: ["node", "playAnimation"] }] }); }
|
|
5494
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: NodeEntriesCardSmallComponent, selector: "es-node-entries-card-small", inputs: { node: "node" }, ngImport: i0, template: "<div\n [class]=\"\n 'grid-card' +\n (nodeHelper.isNodeCollection(node)\n ? ' grid-card-collection grid-card-collection-scope-' +\n node.collection.scope +\n ' grid-card-collection-type-' +\n node.collection.type\n : '') +\n ($any(node).virtual ? ' grid-card-virtual' : '') +\n ' ' +\n (entriesService.singleClickHint === 'dynamic' ? ' dynamic-single-click' : '')\n \"\n [style.background-color]=\"nodeHelper.isNodeCollection(node) ? node.collection.color : null\"\n (contextmenu)=\"openContextmenu($event)\"\n (keydown.ContextMenu)=\"openContextmenu($event)\"\n>\n <div\n *ngIf=\"templatesService.overlay\"\n class=\"card-overlay\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Overlay,\n })\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"templatesService.overlay; context: { element: node }\"\n ></ng-container>\n </div>\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n mode=\"wrapper\"\n [node]=\"node\"\n esFocusState\n #cardFocusState=\"esFocusState\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n image;\n context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n \"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </es-node-url>\n <ng-container *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n <ng-container *ngTemplateOutlet=\"image\"></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </ng-container>\n</div>\n<ng-template #image let-playAnimation=\"playAnimation\">\n <div\n class=\"card-image-area\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Preview,\n })\n \"\n >\n <div *ngIf=\"nodeHelper.isNodeCollection(node) && node.collection.pinned\" class=\"collection-pin\">\n <i esIcon=\"edu-pin\"></i>\n </div>\n <es-preview-image\n *ngIf=\"!(nodeHelper.isNodeCollection(node) && node.preview.isIcon)\"\n [node]=\"node\"\n [playAnimation]=\"playAnimation\"\n ></es-preview-image>\n <div\n *ngIf=\"nodeHelper.isNodeCollection(node) && node.preview.isIcon\"\n class=\"card-collection-image\"\n >\n <i esIcon=\"layers\"></i>\n </div>\n </div>\n</ng-template>\n<ng-template #meta>\n <div\n class=\"card-meta\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Metadata,\n })\n \"\n >\n <div\n *ngFor=\"let displayPart of entriesService.columns; let first = first\"\n class=\"card-meta-row\"\n >\n <ng-container *ngIf=\"first\">\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n [node]=\"node\"\n #link\n >\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </es-node-url>\n <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!first\">\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </ng-container>\n </div>\n </div>\n <ng-container\n *ngTemplateOutlet=\"templatesService.actionArea; context: { element: node }\"\n ></ng-container>\n</ng-template>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 15px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:2px solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card .card-image-area{height:100px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:25px;font-size:25px;border-radius:50%}.grid-card .card-meta{padding:8px 15px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.collection-pin{background:#ffffff80;border-radius:50px;position:absolute;z-index:1;right:10px;top:10px;width:25px;height:25px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 3px #0000001a}.collection-pin>i{font-size:12px}.grid-card .card-meta-row ::ng-deep es-node-url a.cdk-keyboard-focused{outline-color:var(--palette-primary-400)}.grid-card{cursor:pointer}.grid-card.grid-card-collection{background-color:rgb(var(--palette-primary-200))}.grid-card .card-meta{background-color:#fffc;padding-bottom:8px}.grid-card .card-meta .card-meta-row:nth-child(1){grid-column:1/3}.grid-card .card-meta .card-meta-row:nth-child(2){justify-self:flex-start}.grid-card .card-meta .card-meta-row:nth-child(2),.grid-card .card-meta .card-meta-row:nth-child(3){grid-row:2;font-size:var(--fontSizeXSmall)}\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: FocusStateDirective, selector: "[esFocusState]", exportAs: ["esFocusState"] }, { kind: "directive", type: IconDirective, selector: "i[esIcon], i.material-icons", inputs: ["altText", "aria", "esIcon"] }, { kind: "component", type: NodeUrlComponent, selector: "es-node-url", inputs: ["node", "nodes", "target", "scope", "queryParams", "mode", "disabled", "alwaysRipple", "aria-describedby", "aria-label"], outputs: ["buttonClick"] }, { kind: "component", type: ListBaseComponent, selector: "es-list-base", inputs: ["forceText"] }, { kind: "component", type: PreviewImageComponent, selector: "es-preview-image", inputs: ["node", "playAnimation"] }] }); }
|
|
5495
5495
|
}
|
|
5496
5496
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NodeEntriesCardSmallComponent, decorators: [{
|
|
5497
5497
|
type: Component,
|
|
5498
|
-
args: [{ selector: 'es-node-entries-card-small', template: "<div\n [class]=\"\n 'grid-card' +\n (nodeHelper.isNodeCollection(node)\n ? ' grid-card-collection grid-card-collection-scope-' +\n node.collection.scope +\n ' grid-card-collection-type-' +\n node.collection.type\n : '') +\n ($any(node).virtual ? ' grid-card-virtual' : '') +\n ' ' +\n (entriesService.singleClickHint === 'dynamic' ? ' dynamic-single-click' : '')\n \"\n [style.background-color]=\"nodeHelper.isNodeCollection(node) ? node.collection.color : null\"\n (contextmenu)=\"openContextmenu($event)\"\n (keydown.ContextMenu)=\"openContextmenu($event)\"\n>\n <div\n *ngIf=\"templatesService.overlay\"\n class=\"card-overlay\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Overlay,\n })\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"templatesService.overlay; context: { element: node }\"\n ></ng-container>\n </div>\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n mode=\"wrapper\"\n [node]=\"node\"\n esFocusState\n #cardFocusState=\"esFocusState\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n image;\n context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n \"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </es-node-url>\n <ng-container *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n <ng-container *ngTemplateOutlet=\"image\"></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </ng-container>\n</div>\n<ng-template #image let-playAnimation=\"playAnimation\">\n <div\n class=\"card-image-area\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Preview,\n })\n \"\n >\n <div *ngIf=\"nodeHelper.isNodeCollection(node) && node.collection.pinned\" class=\"collection-pin\">\n <i esIcon=\"edu-pin\"></i>\n </div>\n <es-preview-image\n *ngIf=\"!(nodeHelper.isNodeCollection(node) && node.preview.isIcon)\"\n [node]=\"node\"\n [playAnimation]=\"playAnimation\"\n ></es-preview-image>\n <div\n *ngIf=\"nodeHelper.isNodeCollection(node) && node.preview.isIcon\"\n class=\"card-collection-image\"\n >\n <i esIcon=\"layers\"></i>\n </div>\n </div>\n</ng-template>\n<ng-template #meta>\n <div\n class=\"card-meta\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Metadata,\n })\n \"\n >\n <div\n *ngFor=\"let displayPart of entriesService.columns; let first = first\"\n class=\"card-meta-row\"\n >\n <ng-container *ngIf=\"first\">\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n [node]=\"node\"\n #link\n >\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </es-node-url>\n <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!first\">\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </ng-container>\n </div>\n </div>\n <ng-container\n *ngTemplateOutlet=\"templatesService.actionArea; context: { element: node }\"\n ></ng-container>\n</ng-template>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 15px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:var(--focusWidth) solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card .card-image-area{height:100px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:25px;font-size:25px;border-radius:50%}.grid-card .card-meta{padding:8px 15px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:var(--focusWidth) solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.collection-pin{background:#ffffff80;border-radius:50px;position:absolute;z-index:1;right:10px;top:10px;width:25px;height:25px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 3px #0000001a}.collection-pin>i{font-size:12px}.grid-card .card-meta-row ::ng-deep es-node-url a.cdk-keyboard-focused{outline-color:var(--palette-primary-400)}.grid-card{cursor:pointer}.grid-card.grid-card-collection{background-color:rgb(var(--palette-primary-200))}.grid-card .card-meta{background-color:#fffc;padding-bottom:8px}.grid-card .card-meta .card-meta-row:nth-child(1){grid-column:1/3}.grid-card .card-meta .card-meta-row:nth-child(2){justify-self:flex-start}.grid-card .card-meta .card-meta-row:nth-child(2),.grid-card .card-meta .card-meta-row:nth-child(3){grid-row:2;font-size:var(--fontSizeXSmall)}\n"] }]
|
|
5498
|
+
args: [{ selector: 'es-node-entries-card-small', template: "<div\n [class]=\"\n 'grid-card' +\n (nodeHelper.isNodeCollection(node)\n ? ' grid-card-collection grid-card-collection-scope-' +\n node.collection.scope +\n ' grid-card-collection-type-' +\n node.collection.type\n : '') +\n ($any(node).virtual ? ' grid-card-virtual' : '') +\n ' ' +\n (entriesService.singleClickHint === 'dynamic' ? ' dynamic-single-click' : '')\n \"\n [style.background-color]=\"nodeHelper.isNodeCollection(node) ? node.collection.color : null\"\n (contextmenu)=\"openContextmenu($event)\"\n (keydown.ContextMenu)=\"openContextmenu($event)\"\n>\n <div\n *ngIf=\"templatesService.overlay\"\n class=\"card-overlay\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Overlay,\n })\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"templatesService.overlay; context: { element: node }\"\n ></ng-container>\n </div>\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n mode=\"wrapper\"\n [node]=\"node\"\n esFocusState\n #cardFocusState=\"esFocusState\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n image;\n context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }\n \"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </es-node-url>\n <ng-container *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n <ng-container *ngTemplateOutlet=\"image\"></ng-container>\n <ng-container *ngTemplateOutlet=\"meta\"></ng-container>\n </ng-container>\n</div>\n<ng-template #image let-playAnimation=\"playAnimation\">\n <div\n class=\"card-image-area\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Preview,\n })\n \"\n >\n <div *ngIf=\"nodeHelper.isNodeCollection(node) && node.collection.pinned\" class=\"collection-pin\">\n <i esIcon=\"edu-pin\"></i>\n </div>\n <es-preview-image\n *ngIf=\"!(nodeHelper.isNodeCollection(node) && node.preview.isIcon)\"\n [node]=\"node\"\n [playAnimation]=\"playAnimation\"\n ></es-preview-image>\n <div\n *ngIf=\"nodeHelper.isNodeCollection(node) && node.preview.isIcon\"\n class=\"card-collection-image\"\n >\n <i esIcon=\"layers\"></i>\n </div>\n </div>\n</ng-template>\n<ng-template #meta>\n <div\n class=\"card-meta\"\n (click)=\"\n entriesService.clickItem.emit({\n element: node,\n source: ClickSource.Metadata,\n })\n \"\n >\n <div\n *ngFor=\"let displayPart of entriesService.columns; let first = first\"\n class=\"card-meta-row\"\n >\n <ng-container *ngIf=\"first\">\n <es-node-url\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n [node]=\"node\"\n #link\n >\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </es-node-url>\n <div *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\">\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!first\">\n <es-list-base [item]=\"displayPart\" [node]=\"node\" [provideLabel]=\"false\"> </es-list-base>\n </ng-container>\n </div>\n </div>\n <ng-container\n *ngTemplateOutlet=\"templatesService.actionArea; context: { element: node }\"\n ></ng-container>\n</ng-template>\n", styles: [".grid-card{transition:all var(--transitionNormal);overflow:hidden;background-color:#fff;box-shadow:0 3px 3px #0000001a;display:grid;height:100%;grid-template-columns:auto}:host-context(body.es-contrast-mode) .grid-card{border:1px solid rgba(0,0,0,.42)}.grid-card.selected{background-color:rgb(var(--palette-primary-50))}.grid-card .dropdown-dummy{position:fixed}.grid-card .card-options{display:grid;grid-template-columns:1fr auto;grid-column-gap:10px}.grid-card .card-options .card-rating-area{display:flex;align-items:center;height:100%;padding-left:10px}.grid-card .card-options .card-options-area{display:flex}.grid-card .card-options .card-options-area es-option-button,.grid-card .card-options .card-options-area button{transition:all var(--transitionNormal);margin:0 2px;border-radius:50%}.grid-card .card-options .card-options-area es-option-button:hover,.grid-card .card-options .card-options-area es-option-button:focus,.grid-card .card-options .card-options-area button:hover,.grid-card .card-options .card-options-area button:focus{background-color:#fff}.grid-card:not(.grid-card-collection) .card-top-bar{background-color:var(--palette-primary-200)}.grid-card.grid-card-virtual{outline:2px dashed var(--nodeVirtualColor)}.grid-card .card-top-bar{height:40px;display:flex;gap:15px;align-items:center;padding:0 15px;position:relative}.grid-card .card-top-bar .card-top-bar-collection-color{position:absolute;background-color:#ffffff80;inset:0}.grid-card .card-top-bar .card-top-bar-flag{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;border-radius:50%;background-color:#fff;padding:5px;position:relative;z-index:1;box-shadow:0 0 5px #0000004d}.grid-card .card-top-bar .card-top-bar-flag i{font-size:18px;color:#333}.grid-card .card-top-bar .card-top-bar-flag img{width:18px;height:18px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox{margin-right:-5px;position:relative;top:-1.3px}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator{outline:none}.grid-card .card-top-bar .card-top-bar-checkbox mat-checkbox.cdk-keyboard-focused ::ng-deep .mat-focus-indicator:after{content:\"\";position:absolute;inset:2px;outline:none;border:2px solid var(--palette-primary-300);border-color:#fff}.grid-card .card-top-bar .card-top-bar-empty{width:0;flex-grow:1}.grid-card .card-image-area{height:100px;padding:0;display:flex}.grid-card .card-image-area es-preview-image{flex-grow:1}.grid-card .card-image-area .card-collection-image{display:flex;width:100%;height:100%;align-items:center;justify-content:center}.grid-card .card-image-area .card-collection-image i{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;color:#000000bf;background-color:#ffffff80;padding:25px;font-size:25px;border-radius:50%}.grid-card .card-meta{padding:8px 15px 0;display:grid;flex-direction:row}.grid-card .card-meta .card-meta-row{display:flex;flex-direction:row;align-items:center;min-height:2.8em;gap:5px}.grid-card .card-meta .card-meta-row:not(:first-child)>label{cursor:inherit;color:var(--textLight);font-size:85%}.grid-card .card-meta .card-meta-row:not(:first-child)>es-list-base{color:#000;flex-grow:1;margin:5px 0;display:flex;justify-content:flex-end;text-align:end;word-break:break-word}.grid-card .card-meta .card-meta-row:first-child{font-size:120%}.grid-card .card-meta .card-meta-row:first-child>es-list-base,.grid-card .card-meta .card-meta-row:first-child>es-node-url{width:100%;font-size:120%;color:var(--textMain);height:2.8em;text-align:left;word-break:break-word}.grid-card.dynamic-single-click:hover{box-shadow:0 0 25px #0003;background-color:rgb(var(--palette-primary-50))}.grid-card.dynamic-single-click.grid-card-collection:hover .card-meta{background-color:#ffffffe6}.grid-card.grid-card-collection .card-meta{background-color:#fffc}.grid-card.grid-card-collection .card-options{background-color:#ffffffe6}.grid-card .card-options{border-top:1px solid #ddd}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text{word-break:break-word}:host ::ng-deep .grid-card .card-meta-row:first-child es-list-base>es-list-text span,:host ::ng-deep .grid-card .card-meta-row:first-child es-node-url a es-list-base>es-list-text span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:1.4em;max-height:2.8em;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host ::ng-deep .grid-card .card-meta-row es-node-url a{color:var(--textMain)}:host ::ng-deep .grid-card .card-meta-row es-node-url a.cdk-keyboard-focused{display:inline-flex;outline:none;outline:2px solid var(--palette-primary-300);outline-offset:2px}:host ::ng-deep .card-meta es-list-base img{max-width:100px;max-height:20px}:host ::ng-deep .card-meta es-list-base es-list-node-license img{height:20px}:host ::ng-deep .card-meta es-list-base es-list-collection-info{display:flex;align-items:center}:host ::ng-deep .card-meta es-list-base es-list-collection-info i{font-size:12pt;margin:0 6px}:host ::ng-deep .grid-card-collection es-node-url a.cdk-keyboard-focused .card-meta{background-color:#fff}.card-overlay{position:absolute;z-index:2;inset:0;pointer-events:none}.card-overlay ::ng-deep>*{pointer-events:auto}.collection-pin{background:#ffffff80;border-radius:50px;position:absolute;z-index:1;right:10px;top:10px;width:25px;height:25px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 3px #0000001a}.collection-pin>i{font-size:12px}.grid-card .card-meta-row ::ng-deep es-node-url a.cdk-keyboard-focused{outline-color:var(--palette-primary-400)}.grid-card{cursor:pointer}.grid-card.grid-card-collection{background-color:rgb(var(--palette-primary-200))}.grid-card .card-meta{background-color:#fffc;padding-bottom:8px}.grid-card .card-meta .card-meta-row:nth-child(1){grid-column:1/3}.grid-card .card-meta .card-meta-row:nth-child(2){justify-self:flex-start}.grid-card .card-meta .card-meta-row:nth-child(2),.grid-card .card-meta .card-meta-row:nth-child(3){grid-row:2;font-size:var(--fontSizeXSmall)}\n"] }]
|
|
5499
5499
|
}], ctorParameters: () => [{ type: NodeEntriesService }, { type: NodeHelperService }, { type: NodeEntriesTemplatesService }], propDecorators: { node: [{
|
|
5500
5500
|
type: Input
|
|
5501
5501
|
}] } });
|
|
@@ -6035,11 +6035,11 @@ class NodeEntriesTableComponent {
|
|
|
6035
6035
|
this.nodeHelperService.isNodeRevoked(node));
|
|
6036
6036
|
}
|
|
6037
6037
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NodeEntriesTableComponent, deps: [{ token: NodeEntriesService }, { token: NodeEntriesGlobalService }, { token: i0.ApplicationRef }, { token: Toast }, { token: TranslationsService }, { token: NodeHelperService }, { token: i0.ChangeDetectorRef }, { token: UIService }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6038
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: NodeEntriesTableComponent, selector: "es-node-entries-table", viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "columnChooserTrigger", first: true, predicate: ["columnChooserTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true }, { propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n<button\n #menuTrigger=\"matMenuTrigger\"\n mat-button\n class=\"dropdown-dummy cdk-visually-hidden\"\n [style.left.px]=\"dropdownLeft\"\n [style.top.px]=\"dropdownTop\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n></button>\n<es-node-entries-global-options\n *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n [displayType]=\"NodeEntriesDisplayType.Table\"\n>\n</es-node-entries-global-options>\n<mat-table\n [dataSource]=\"entriesService.dataSource\"\n matSort\n [matSortDisableClear]=\"true\"\n [matSortActive]=\"entriesService.sort?.active\"\n [matSortDirection]=\"entriesService.sort?.direction\"\n esInfiniteScroll\n (scrolled)=\"loadData('scroll')\"\n>\n <!-- Checkbox Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox\n [ngModel]=\"entriesService.selection.selected.length > 0\"\n [indeterminate]=\"\n entriesService.selection.selected.length > 0 &&\n entriesService.selection.selected.length !== entriesService.dataSource.getData().length\n \"\n (ngModelChange)=\"toggleAll($event)\"\n color=\"primary\"\n aria-label=\"{{ 'LIST_TABLE.TOGGLE_ALL' | translate }}\"\n ></mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let node\">\n <mat-checkbox\n [checked]=\"entriesService.selection.isSelected(node)\"\n (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n color=\"primary\"\n ></mat-checkbox>\n </mat-cell>\n </ng-container>\n <div matColumnDef=\"icon\">\n <mat-header-cell *matHeaderCellDef class=\"cell-icon cell-count\">\n ({{ entriesService.selection.selected.length\n }}<ng-container *ngIf=\"entriesService.dataSource?.getTotal() !== undefined\">\n / {{ entriesService.dataSource?.getTotal() }}</ng-container\n >)\n </mat-header-cell>\n <mat-cell *matCellDef=\"let node\" class=\"cell-icon\">\n <ng-container\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n >\n <ng-container *ngTemplateOutlet=\"icon; context: { node: this.node }\"></ng-container>\n </ng-container>\n <div\n *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n (click)=\"\n entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n \"\n (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n >\n <ng-container\n *ngTemplateOutlet=\"icon; context: { node: this.node }\"\n (click)=\"\n entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n \"\n (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n ></ng-container>\n </div>\n </mat-cell>\n </div>\n <ng-container matColumnDef=\"actions\">\n <mat-header-cell *matHeaderCellDef>\n <button\n *ngIf=\"entriesService.configureColumns\"\n mat-icon-button\n (click)=\"columnChooserVisible = !columnChooserVisible\"\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 </mat-header-cell>\n <mat-cell *matCellDef=\"let node\">\n <button\n mat-icon-button\n *ngIf=\"entriesService.options?.[Target.List]?.length\"\n color=\"primary\"\n (click)=\"openMenu(node)\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n >\n <i esIcon=\"more_vert\" [aria]=\"true\"></i>\n </button>\n </mat-cell>\n </ng-container>\n <!-- Data Columns -->\n <ng-container\n *ngFor=\"let column of visibleDataColumns$ | async; let first = first\"\n [matColumnDef]=\"column.name\"\n >\n <ng-container>\n <mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [disabled]=\"!(entriesService.sort?.allowed && isSortable(column))\"\n [class.mat-column-primary]=\"first\"\n >{{ column | esListItemLabel | async }}</mat-header-cell\n >\n </ng-container>\n <mat-cell\n *matCellDef=\"let node\"\n #cell\n [class.mat-column-primary]=\"first\"\n attr.data-test=\"table-cell-{{ column.name }}\"\n >\n <ng-container\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n >\n <es-node-url cdkMonitorSubtreeFocus [node]=\"node\" [mode]=\"first ? 'link' : 'wrapper'\">\n <es-list-base\n [forceText]=\"true\"\n [node]=\"node\"\n [item]=\"column\"\n esCheckTextOverflow\n #text=\"esCheckTextOverflow\"\n [matTooltip]=\"text.hasTextOverflow() ? cell.innerText : null\"\n matTooltipTouchGestures=\"off\"\n ></es-list-base>\n </es-node-url>\n </ng-container>\n <es-list-base\n *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n [forceText]=\"true\"\n [node]=\"node\"\n [item]=\"column\"\n (click)=\"\n entriesService.onClicked({\n event: $event,\n element: node,\n source: ClickSource.Metadata,\n attribute: column,\n })\n \"\n (dblclick)=\"\n entriesService.dblClickItem.emit({\n element: node,\n source: ClickSource.Metadata,\n attribute: column,\n })\n \"\n ></es-list-base>\n <ng-container *ngIf=\"first\">\n <div class=\"childobjects\" *ngIf=\"node.properties?.['virtual:childobjectcount'] > 0\">\n <div\n class=\"childobject-count\"\n matTooltip=\"{{\n 'CHILDOBJECT_COUNT'\n | translate : { count: node.properties['virtual:childobjectcount'] * 1 + 1 }\n }}\"\n >\n <span>{{ node.properties['virtual:childobjectcount'] * 1 + 1 }}</span\n ><i esIcon=\"filter_none\"></i>\n </div>\n </div>\n </ng-container>\n </mat-cell>\n </ng-container>\n <mat-header-row mat-header-row *matHeaderRowDef=\"visibleColumnNames$ | async\"></mat-header-row>\n <mat-row\n mat-row\n matRipple\n cdkDrag\n esNodesDrag\n [cdkDragDisabled]=\"!entriesService.dragDrop?.dragAllowed || (ui.isTouchSubject | async)\"\n [cdkDragData]=\"getDragData(node)\"\n (cdkDragStarted)=\"onDragStarted(node)\"\n (cdkDragEnded)=\"onDragEnded()\"\n [esNodesDropTarget]=\"node\"\n [canDropNodes]=\"canDrop\"\n (nodeDropped)=\"drop($event)\"\n class=\"mat-row\"\n [class.mat-row-selected]=\"entriesService.selection.isSelected(node)\"\n [class.mat-row-import-blocked]=\"isBlocked(node)\"\n [class.selected-when-dragging]=\"isDragging && entriesService.selection.isSelected(node)\"\n [class.mat-row-virtual]=\"node.virtual\"\n [class.mat-row-virtual-first]=\"\n node.virtual && !$any(entriesService.dataSource.getData()[i - 1])?.virtual\n \"\n [class.mat-row-virtual-last]=\"\n node.virtual && !$any(entriesService.dataSource.getData()[i + 1])?.virtual\n \"\n [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n *matRowDef=\"let node; let i = index; let last = last; columns: visibleColumnNames$ | async\"\n (contextmenu)=\"onRowContextMenu({ event: $event, node: node })\"\n (keydown.ContextMenu)=\"onRowContextMenu({ event: $event, node: node })\"\n >\n <es-drag-preview\n *cdkDragPreview\n [node]=\"node\"\n [selected]=\"entriesService.selection.selected\"\n [item]=\"(visibleDataColumns$ | async)[0]\"\n ></es-drag-preview>\n </mat-row>\n</mat-table>\n<ng-container\n *ngIf=\"\n (entriesService.dataSource.isLoadingSubject | async) === false &&\n entriesService.dataSource.hasMore() &&\n entriesService.paginationStrategy === 'infinite-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 *ngIf=\"entriesService.dataSource.isLoadingSubject | async\">\n <ng-container *ngTemplateOutlet=\"loading\"> </ng-container>\n</ng-container>\n<!--\n<mat-paginator #paginator [pageSizeOptions]=\"pageSizeOptions\"></mat-paginator>\n-->\n\n<!-- Wait for ready state to avoid changed-after-checked error when `columnChooserTrigger` becomes\navailable. -->\n<es-column-chooser\n *ngIf=\"columnChooserTriggerReady\"\n [(columns)]=\"entriesService.columns\"\n [(columnChooserVisible)]=\"columnChooserVisible\"\n [origin]=\"columnChooserTrigger\"\n></es-column-chooser>\n<ng-template #loading>\n <es-spinner></es-spinner>\n</ng-template>\n<ng-template #icon let-node=\"node\">\n <div class=\"icon-bg\">\n <img\n *ngIf=\"node.iconURL\"\n [src]=\"node | esNodeIcon | async\"\n [alt]=\"\n node.mediatype\n ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n : ''\n \"\n [matTooltip]=\"\n node.mediatype\n ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n : ''\n \"\n matTooltipTouchGestures=\"off\"\n />\n <i\n *ngIf=\"!node.iconURL\"\n [esIcon]=\"node.authorityType ? (node.authorityType === 'GROUP' ? 'group' : 'person') : null\"\n ></i>\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}:host ::ng-deep mat-header-cell{color:var(--textMediumLight)}:host ::ng-deep mat-cell,:host ::ng-deep mat-header-cell{margin:0!important}:host ::ng-deep mat-cell es-node-url{width:100%}:host ::ng-deep mat-cell es-node-url a{color:#000}:host ::ng-deep mat-cell es-node-url.cdk-keyboard-focused{outline:none;border:var(--focusWidth) solid var(--palette-primary-300)}:host ::ng-deep es-list-base{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline;width:100%;padding:20.3px 0;align-items:center}:host ::ng-deep es-list-base>div{display:inline}:host ::ng-deep es-list-base>div>div{display:inline}mat-header-cell,mat-cell{margin:0 3px}mat-header-cell:not(.mat-column-primary),mat-cell:not(.mat-column-primary){flex:0 145px}mat-header-cell.mat-column-primary,mat-cell.mat-column-primary{min-width:30%}mat-header-cell.mat-column-select,mat-cell.mat-column-select{flex:0 58px;min-width:58px;padding-left:14px}mat-header-cell.mat-column-icon,mat-cell.mat-column-icon{flex:0 85px;min-width:85px;justify-content:center}mat-header-cell.mat-column-actions,mat-cell.mat-column-actions{flex:0 58px;min-width:58px;display:flex;justify-content:flex-end;padding-right:5px}.mat-row{background:unset}.mat-row.dynamic-single-click{cursor:pointer}.mat-row.dynamic-single-click:hover{background-color:rgb(var(--palette-primary-50))}.mat-row.mat-row-import-blocked{opacity:.75;text-decoration:line-through}.mat-row.mat-row-selected{background:var(--listItemSelectedBackgroundEffect)}.mat-row.mat-row-selected .mat-mdc-cell{background:transparent}.mat-row.mat-row-virtual{background:linear-gradient(to right,var(--nodeVirtualColor) 5px,transparent 5px) no-repeat;border-right:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual .mat-mdc-cell{background:transparent}.mat-row.mat-row-virtual.mat-row-selected{background:linear-gradient(to right,var(--nodeVirtualColor) 0,var(--nodeVirtualColor) 5px,var(--listItemSelectedBackground) 5px,var(--listItemSelectedBackground) 5px)}.mat-row.mat-row-virtual-first{border-top:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual-last{border-bottom:2px dashed var(--nodeVirtualColorLight)}.mat-row.selected-when-dragging{opacity:.5}.dropdown-dummy{position:fixed}.childobjects{background-color:#0000000d;border-radius:15px;display:inline-flex;align-items:center;min-width:51px;min-height:26px;justify-content:center;cursor:default;-webkit-user-select:none;user-select:none;padding:2px 8px;margin-left:5px}.childobjects>.childobject-count{display:inline-flex;align-items:center}.childobjects>.childobject-count>i{font-size:13px;margin-left:4px}.cell-icon .icon-bg{width:36px;height:36px;padding:3px;margin:1px 0;background-color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 0 3px #0000004d}.cell-icon .icon-bg>img{width:18px;height:auto}.cell-icon .icon-bg>i{color:#666;font-size:18px}.mat-column-link{flex:0 60px}.mat-column-link a,.load-more{display:flex;justify-content:center}es-node-entries-global-options{padding:20px 0}\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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i2$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CheckTextOverflowDirective, selector: "[esCheckTextOverflow]", inputs: ["esCheckTextOverflow"], exportAs: ["esCheckTextOverflow"] }, { kind: "component", type: DropdownComponent, selector: "es-dropdown", inputs: ["position", "options", "callbackObjects", "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: NodeUrlComponent, selector: "es-node-url", inputs: ["node", "nodes", "target", "scope", "queryParams", "mode", "disabled", "alwaysRipple", "aria-describedby", "aria-label"], outputs: ["buttonClick"] }, { kind: "component", type: SpinnerComponent, selector: "es-spinner" }, { kind: "component", type: ListBaseComponent, selector: "es-list-base", inputs: ["forceText"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i22.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i22.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i22.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i22.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i22.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i22.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i22.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i22.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i22.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i22.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i24.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i24.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { 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: DragPreviewComponent, selector: "es-drag-preview", inputs: ["node", "selected", "item"] }, { 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: NodeIconPipe, name: "esNodeIcon" }, { kind: "pipe", type: NodeTitlePipe, name: "nodeTitle" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListItemLabelPipe, name: "esListItemLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6038
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: NodeEntriesTableComponent, selector: "es-node-entries-table", viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "columnChooserTrigger", first: true, predicate: ["columnChooserTrigger"], descendants: true }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, descendants: true }, { propertyName: "menuTrigger", first: true, predicate: ["menuTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n<button\n #menuTrigger=\"matMenuTrigger\"\n mat-button\n class=\"dropdown-dummy cdk-visually-hidden\"\n [style.left.px]=\"dropdownLeft\"\n [style.top.px]=\"dropdownTop\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n></button>\n<es-node-entries-global-options\n *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n [displayType]=\"NodeEntriesDisplayType.Table\"\n>\n</es-node-entries-global-options>\n<mat-table\n [dataSource]=\"entriesService.dataSource\"\n matSort\n [matSortDisableClear]=\"true\"\n [matSortActive]=\"entriesService.sort?.active\"\n [matSortDirection]=\"entriesService.sort?.direction\"\n esInfiniteScroll\n (scrolled)=\"loadData('scroll')\"\n>\n <!-- Checkbox Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox\n [ngModel]=\"entriesService.selection.selected.length > 0\"\n [indeterminate]=\"\n entriesService.selection.selected.length > 0 &&\n entriesService.selection.selected.length !== entriesService.dataSource.getData().length\n \"\n (ngModelChange)=\"toggleAll($event)\"\n color=\"primary\"\n aria-label=\"{{ 'LIST_TABLE.TOGGLE_ALL' | translate }}\"\n ></mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let node\">\n <mat-checkbox\n [checked]=\"entriesService.selection.isSelected(node)\"\n (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n color=\"primary\"\n ></mat-checkbox>\n </mat-cell>\n </ng-container>\n <div matColumnDef=\"icon\">\n <mat-header-cell *matHeaderCellDef class=\"cell-icon cell-count\">\n ({{ entriesService.selection.selected.length\n }}<ng-container *ngIf=\"entriesService.dataSource?.getTotal() !== undefined\">\n / {{ entriesService.dataSource?.getTotal() }}</ng-container\n >)\n </mat-header-cell>\n <mat-cell *matCellDef=\"let node\" class=\"cell-icon\">\n <ng-container\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n >\n <ng-container *ngTemplateOutlet=\"icon; context: { node: this.node }\"></ng-container>\n </ng-container>\n <div\n *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n (click)=\"\n entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n \"\n (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n >\n <ng-container\n *ngTemplateOutlet=\"icon; context: { node: this.node }\"\n (click)=\"\n entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n \"\n (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n ></ng-container>\n </div>\n </mat-cell>\n </div>\n <ng-container matColumnDef=\"actions\">\n <mat-header-cell *matHeaderCellDef>\n <button\n *ngIf=\"entriesService.configureColumns\"\n mat-icon-button\n (click)=\"columnChooserVisible = !columnChooserVisible\"\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 </mat-header-cell>\n <mat-cell *matCellDef=\"let node\">\n <button\n mat-icon-button\n *ngIf=\"entriesService.options?.[Target.List]?.length\"\n color=\"primary\"\n (click)=\"openMenu(node)\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n >\n <i esIcon=\"more_vert\" [aria]=\"true\"></i>\n </button>\n </mat-cell>\n </ng-container>\n <!-- Data Columns -->\n <ng-container\n *ngFor=\"let column of visibleDataColumns$ | async; let first = first\"\n [matColumnDef]=\"column.name\"\n >\n <ng-container>\n <mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [disabled]=\"!(entriesService.sort?.allowed && isSortable(column))\"\n [class.mat-column-primary]=\"first\"\n >{{ column | esListItemLabel | async }}</mat-header-cell\n >\n </ng-container>\n <mat-cell\n *matCellDef=\"let node\"\n #cell\n [class.mat-column-primary]=\"first\"\n attr.data-test=\"table-cell-{{ column.name }}\"\n >\n <ng-container\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n >\n <es-node-url cdkMonitorSubtreeFocus [node]=\"node\" [mode]=\"first ? 'link' : 'wrapper'\">\n <es-list-base\n [forceText]=\"true\"\n [node]=\"node\"\n [item]=\"column\"\n esCheckTextOverflow\n #text=\"esCheckTextOverflow\"\n [matTooltip]=\"text.hasTextOverflow() ? cell.innerText : null\"\n matTooltipTouchGestures=\"off\"\n ></es-list-base>\n </es-node-url>\n </ng-container>\n <es-list-base\n *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n [forceText]=\"true\"\n [node]=\"node\"\n [item]=\"column\"\n (click)=\"\n entriesService.onClicked({\n event: $event,\n element: node,\n source: ClickSource.Metadata,\n attribute: column,\n })\n \"\n (dblclick)=\"\n entriesService.dblClickItem.emit({\n element: node,\n source: ClickSource.Metadata,\n attribute: column,\n })\n \"\n ></es-list-base>\n <ng-container *ngIf=\"first\">\n <div class=\"childobjects\" *ngIf=\"node.properties?.['virtual:childobjectcount'] > 0\">\n <div\n class=\"childobject-count\"\n matTooltip=\"{{\n 'CHILDOBJECT_COUNT'\n | translate : { count: node.properties['virtual:childobjectcount'] * 1 + 1 }\n }}\"\n >\n <span>{{ node.properties['virtual:childobjectcount'] * 1 + 1 }}</span\n ><i esIcon=\"filter_none\"></i>\n </div>\n </div>\n </ng-container>\n </mat-cell>\n </ng-container>\n <mat-header-row mat-header-row *matHeaderRowDef=\"visibleColumnNames$ | async\"></mat-header-row>\n <mat-row\n mat-row\n matRipple\n cdkDrag\n esNodesDrag\n [cdkDragDisabled]=\"!entriesService.dragDrop?.dragAllowed || (ui.isTouchSubject | async)\"\n [cdkDragData]=\"getDragData(node)\"\n (cdkDragStarted)=\"onDragStarted(node)\"\n (cdkDragEnded)=\"onDragEnded()\"\n [esNodesDropTarget]=\"node\"\n [canDropNodes]=\"canDrop\"\n (nodeDropped)=\"drop($event)\"\n class=\"mat-row\"\n [class.mat-row-selected]=\"entriesService.selection.isSelected(node)\"\n [class.mat-row-import-blocked]=\"isBlocked(node)\"\n [class.selected-when-dragging]=\"isDragging && entriesService.selection.isSelected(node)\"\n [class.mat-row-virtual]=\"node.virtual\"\n [class.mat-row-virtual-first]=\"\n node.virtual && !$any(entriesService.dataSource.getData()[i - 1])?.virtual\n \"\n [class.mat-row-virtual-last]=\"\n node.virtual && !$any(entriesService.dataSource.getData()[i + 1])?.virtual\n \"\n [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n *matRowDef=\"let node; let i = index; let last = last; columns: visibleColumnNames$ | async\"\n (contextmenu)=\"onRowContextMenu({ event: $event, node: node })\"\n (keydown.ContextMenu)=\"onRowContextMenu({ event: $event, node: node })\"\n >\n <es-drag-preview\n *cdkDragPreview\n [node]=\"node\"\n [selected]=\"entriesService.selection.selected\"\n [item]=\"(visibleDataColumns$ | async)[0]\"\n ></es-drag-preview>\n </mat-row>\n</mat-table>\n<ng-container\n *ngIf=\"\n (entriesService.dataSource.isLoadingSubject | async) === false &&\n entriesService.dataSource.hasMore() &&\n entriesService.paginationStrategy === 'infinite-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 *ngIf=\"entriesService.dataSource.isLoadingSubject | async\">\n <ng-container *ngTemplateOutlet=\"loading\"> </ng-container>\n</ng-container>\n<!--\n<mat-paginator #paginator [pageSizeOptions]=\"pageSizeOptions\"></mat-paginator>\n-->\n\n<!-- Wait for ready state to avoid changed-after-checked error when `columnChooserTrigger` becomes\navailable. -->\n<es-column-chooser\n *ngIf=\"columnChooserTriggerReady\"\n [(columns)]=\"entriesService.columns\"\n [(columnChooserVisible)]=\"columnChooserVisible\"\n [origin]=\"columnChooserTrigger\"\n></es-column-chooser>\n<ng-template #loading>\n <es-spinner></es-spinner>\n</ng-template>\n<ng-template #icon let-node=\"node\">\n <div class=\"icon-bg\">\n <img\n *ngIf=\"node.iconURL\"\n [src]=\"node | esNodeIcon | async\"\n [alt]=\"\n node.mediatype\n ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n : ''\n \"\n [matTooltip]=\"\n node.mediatype\n ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n : ''\n \"\n matTooltipTouchGestures=\"off\"\n />\n <i\n *ngIf=\"!node.iconURL\"\n [esIcon]=\"node.authorityType ? (node.authorityType === 'GROUP' ? 'group' : 'person') : null\"\n ></i>\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}:host ::ng-deep mat-header-cell{color:var(--textMediumLight)}:host ::ng-deep mat-cell,:host ::ng-deep mat-header-cell{margin:0!important}:host ::ng-deep mat-cell es-node-url{width:100%}:host ::ng-deep mat-cell es-node-url a{color:#000}:host ::ng-deep mat-cell es-node-url.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}:host ::ng-deep es-list-base{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline;width:100%;padding:20.3px 0;align-items:center}:host ::ng-deep es-list-base>div{display:inline}:host ::ng-deep es-list-base>div>div{display:inline}mat-header-cell,mat-cell{margin:0 3px}mat-header-cell:not(.mat-column-primary),mat-cell:not(.mat-column-primary){flex:0 145px}mat-header-cell.mat-column-primary,mat-cell.mat-column-primary{min-width:30%}mat-header-cell.mat-column-select,mat-cell.mat-column-select{flex:0 58px;min-width:58px;padding-left:14px}mat-header-cell.mat-column-icon,mat-cell.mat-column-icon{flex:0 85px;min-width:85px;justify-content:center}mat-header-cell.mat-column-actions,mat-cell.mat-column-actions{flex:0 58px;min-width:58px;display:flex;justify-content:flex-end;padding-right:5px}.mat-row{background:unset}.mat-row.dynamic-single-click{cursor:pointer}.mat-row.dynamic-single-click:hover{background-color:rgb(var(--palette-primary-50))}.mat-row.mat-row-import-blocked{opacity:.75;text-decoration:line-through}.mat-row.mat-row-selected{background:var(--listItemSelectedBackgroundEffect)}.mat-row.mat-row-selected .mat-mdc-cell{background:transparent}.mat-row.mat-row-virtual{background:linear-gradient(to right,var(--nodeVirtualColor) 5px,transparent 5px) no-repeat;border-right:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual .mat-mdc-cell{background:transparent}.mat-row.mat-row-virtual.mat-row-selected{background:linear-gradient(to right,var(--nodeVirtualColor) 0,var(--nodeVirtualColor) 5px,var(--listItemSelectedBackground) 5px,var(--listItemSelectedBackground) 5px)}.mat-row.mat-row-virtual-first{border-top:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual-last{border-bottom:2px dashed var(--nodeVirtualColorLight)}.mat-row.selected-when-dragging{opacity:.5}.dropdown-dummy{position:fixed}.childobjects{background-color:#0000000d;border-radius:15px;display:inline-flex;align-items:center;min-width:51px;min-height:26px;justify-content:center;cursor:default;-webkit-user-select:none;user-select:none;padding:2px 8px;margin-left:5px}.childobjects>.childobject-count{display:inline-flex;align-items:center}.childobjects>.childobject-count>i{font-size:13px;margin-left:4px}.cell-icon .icon-bg{width:36px;height:36px;padding:3px;margin:1px 0;background-color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 0 3px #0000004d}.cell-icon .icon-bg>img{width:18px;height:auto}.cell-icon .icon-bg>i{color:#666;font-size:18px}.mat-column-link{flex:0 60px}.mat-column-link a,.load-more{display:flex;justify-content:center}es-node-entries-global-options{padding:20px 0}\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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i2$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CheckTextOverflowDirective, selector: "[esCheckTextOverflow]", inputs: ["esCheckTextOverflow"], exportAs: ["esCheckTextOverflow"] }, { kind: "component", type: DropdownComponent, selector: "es-dropdown", inputs: ["position", "options", "callbackObjects", "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: NodeUrlComponent, selector: "es-node-url", inputs: ["node", "nodes", "target", "scope", "queryParams", "mode", "disabled", "alwaysRipple", "aria-describedby", "aria-label"], outputs: ["buttonClick"] }, { kind: "component", type: SpinnerComponent, selector: "es-spinner" }, { kind: "component", type: ListBaseComponent, selector: "es-list-base", inputs: ["forceText"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i22.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i22.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i22.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i22.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i22.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i22.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i22.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i22.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i22.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i22.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i24.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i24.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { 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: DragPreviewComponent, selector: "es-drag-preview", inputs: ["node", "selected", "item"] }, { 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: NodeIconPipe, name: "esNodeIcon" }, { kind: "pipe", type: NodeTitlePipe, name: "nodeTitle" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: ListItemLabelPipe, name: "esListItemLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6039
6039
|
}
|
|
6040
6040
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NodeEntriesTableComponent, decorators: [{
|
|
6041
6041
|
type: Component,
|
|
6042
|
-
args: [{ selector: 'es-node-entries-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n<button\n #menuTrigger=\"matMenuTrigger\"\n mat-button\n class=\"dropdown-dummy cdk-visually-hidden\"\n [style.left.px]=\"dropdownLeft\"\n [style.top.px]=\"dropdownTop\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n></button>\n<es-node-entries-global-options\n *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n [displayType]=\"NodeEntriesDisplayType.Table\"\n>\n</es-node-entries-global-options>\n<mat-table\n [dataSource]=\"entriesService.dataSource\"\n matSort\n [matSortDisableClear]=\"true\"\n [matSortActive]=\"entriesService.sort?.active\"\n [matSortDirection]=\"entriesService.sort?.direction\"\n esInfiniteScroll\n (scrolled)=\"loadData('scroll')\"\n>\n <!-- Checkbox Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox\n [ngModel]=\"entriesService.selection.selected.length > 0\"\n [indeterminate]=\"\n entriesService.selection.selected.length > 0 &&\n entriesService.selection.selected.length !== entriesService.dataSource.getData().length\n \"\n (ngModelChange)=\"toggleAll($event)\"\n color=\"primary\"\n aria-label=\"{{ 'LIST_TABLE.TOGGLE_ALL' | translate }}\"\n ></mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let node\">\n <mat-checkbox\n [checked]=\"entriesService.selection.isSelected(node)\"\n (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n color=\"primary\"\n ></mat-checkbox>\n </mat-cell>\n </ng-container>\n <div matColumnDef=\"icon\">\n <mat-header-cell *matHeaderCellDef class=\"cell-icon cell-count\">\n ({{ entriesService.selection.selected.length\n }}<ng-container *ngIf=\"entriesService.dataSource?.getTotal() !== undefined\">\n / {{ entriesService.dataSource?.getTotal() }}</ng-container\n >)\n </mat-header-cell>\n <mat-cell *matCellDef=\"let node\" class=\"cell-icon\">\n <ng-container\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n >\n <ng-container *ngTemplateOutlet=\"icon; context: { node: this.node }\"></ng-container>\n </ng-container>\n <div\n *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n (click)=\"\n entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n \"\n (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n >\n <ng-container\n *ngTemplateOutlet=\"icon; context: { node: this.node }\"\n (click)=\"\n entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n \"\n (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n ></ng-container>\n </div>\n </mat-cell>\n </div>\n <ng-container matColumnDef=\"actions\">\n <mat-header-cell *matHeaderCellDef>\n <button\n *ngIf=\"entriesService.configureColumns\"\n mat-icon-button\n (click)=\"columnChooserVisible = !columnChooserVisible\"\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 </mat-header-cell>\n <mat-cell *matCellDef=\"let node\">\n <button\n mat-icon-button\n *ngIf=\"entriesService.options?.[Target.List]?.length\"\n color=\"primary\"\n (click)=\"openMenu(node)\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n >\n <i esIcon=\"more_vert\" [aria]=\"true\"></i>\n </button>\n </mat-cell>\n </ng-container>\n <!-- Data Columns -->\n <ng-container\n *ngFor=\"let column of visibleDataColumns$ | async; let first = first\"\n [matColumnDef]=\"column.name\"\n >\n <ng-container>\n <mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [disabled]=\"!(entriesService.sort?.allowed && isSortable(column))\"\n [class.mat-column-primary]=\"first\"\n >{{ column | esListItemLabel | async }}</mat-header-cell\n >\n </ng-container>\n <mat-cell\n *matCellDef=\"let node\"\n #cell\n [class.mat-column-primary]=\"first\"\n attr.data-test=\"table-cell-{{ column.name }}\"\n >\n <ng-container\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n >\n <es-node-url cdkMonitorSubtreeFocus [node]=\"node\" [mode]=\"first ? 'link' : 'wrapper'\">\n <es-list-base\n [forceText]=\"true\"\n [node]=\"node\"\n [item]=\"column\"\n esCheckTextOverflow\n #text=\"esCheckTextOverflow\"\n [matTooltip]=\"text.hasTextOverflow() ? cell.innerText : null\"\n matTooltipTouchGestures=\"off\"\n ></es-list-base>\n </es-node-url>\n </ng-container>\n <es-list-base\n *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n [forceText]=\"true\"\n [node]=\"node\"\n [item]=\"column\"\n (click)=\"\n entriesService.onClicked({\n event: $event,\n element: node,\n source: ClickSource.Metadata,\n attribute: column,\n })\n \"\n (dblclick)=\"\n entriesService.dblClickItem.emit({\n element: node,\n source: ClickSource.Metadata,\n attribute: column,\n })\n \"\n ></es-list-base>\n <ng-container *ngIf=\"first\">\n <div class=\"childobjects\" *ngIf=\"node.properties?.['virtual:childobjectcount'] > 0\">\n <div\n class=\"childobject-count\"\n matTooltip=\"{{\n 'CHILDOBJECT_COUNT'\n | translate : { count: node.properties['virtual:childobjectcount'] * 1 + 1 }\n }}\"\n >\n <span>{{ node.properties['virtual:childobjectcount'] * 1 + 1 }}</span\n ><i esIcon=\"filter_none\"></i>\n </div>\n </div>\n </ng-container>\n </mat-cell>\n </ng-container>\n <mat-header-row mat-header-row *matHeaderRowDef=\"visibleColumnNames$ | async\"></mat-header-row>\n <mat-row\n mat-row\n matRipple\n cdkDrag\n esNodesDrag\n [cdkDragDisabled]=\"!entriesService.dragDrop?.dragAllowed || (ui.isTouchSubject | async)\"\n [cdkDragData]=\"getDragData(node)\"\n (cdkDragStarted)=\"onDragStarted(node)\"\n (cdkDragEnded)=\"onDragEnded()\"\n [esNodesDropTarget]=\"node\"\n [canDropNodes]=\"canDrop\"\n (nodeDropped)=\"drop($event)\"\n class=\"mat-row\"\n [class.mat-row-selected]=\"entriesService.selection.isSelected(node)\"\n [class.mat-row-import-blocked]=\"isBlocked(node)\"\n [class.selected-when-dragging]=\"isDragging && entriesService.selection.isSelected(node)\"\n [class.mat-row-virtual]=\"node.virtual\"\n [class.mat-row-virtual-first]=\"\n node.virtual && !$any(entriesService.dataSource.getData()[i - 1])?.virtual\n \"\n [class.mat-row-virtual-last]=\"\n node.virtual && !$any(entriesService.dataSource.getData()[i + 1])?.virtual\n \"\n [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n *matRowDef=\"let node; let i = index; let last = last; columns: visibleColumnNames$ | async\"\n (contextmenu)=\"onRowContextMenu({ event: $event, node: node })\"\n (keydown.ContextMenu)=\"onRowContextMenu({ event: $event, node: node })\"\n >\n <es-drag-preview\n *cdkDragPreview\n [node]=\"node\"\n [selected]=\"entriesService.selection.selected\"\n [item]=\"(visibleDataColumns$ | async)[0]\"\n ></es-drag-preview>\n </mat-row>\n</mat-table>\n<ng-container\n *ngIf=\"\n (entriesService.dataSource.isLoadingSubject | async) === false &&\n entriesService.dataSource.hasMore() &&\n entriesService.paginationStrategy === 'infinite-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 *ngIf=\"entriesService.dataSource.isLoadingSubject | async\">\n <ng-container *ngTemplateOutlet=\"loading\"> </ng-container>\n</ng-container>\n<!--\n<mat-paginator #paginator [pageSizeOptions]=\"pageSizeOptions\"></mat-paginator>\n-->\n\n<!-- Wait for ready state to avoid changed-after-checked error when `columnChooserTrigger` becomes\navailable. -->\n<es-column-chooser\n *ngIf=\"columnChooserTriggerReady\"\n [(columns)]=\"entriesService.columns\"\n [(columnChooserVisible)]=\"columnChooserVisible\"\n [origin]=\"columnChooserTrigger\"\n></es-column-chooser>\n<ng-template #loading>\n <es-spinner></es-spinner>\n</ng-template>\n<ng-template #icon let-node=\"node\">\n <div class=\"icon-bg\">\n <img\n *ngIf=\"node.iconURL\"\n [src]=\"node | esNodeIcon | async\"\n [alt]=\"\n node.mediatype\n ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n : ''\n \"\n [matTooltip]=\"\n node.mediatype\n ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n : ''\n \"\n matTooltipTouchGestures=\"off\"\n />\n <i\n *ngIf=\"!node.iconURL\"\n [esIcon]=\"node.authorityType ? (node.authorityType === 'GROUP' ? 'group' : 'person') : null\"\n ></i>\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}:host ::ng-deep mat-header-cell{color:var(--textMediumLight)}:host ::ng-deep mat-cell,:host ::ng-deep mat-header-cell{margin:0!important}:host ::ng-deep mat-cell es-node-url{width:100%}:host ::ng-deep mat-cell es-node-url a{color:#000}:host ::ng-deep mat-cell es-node-url.cdk-keyboard-focused{outline:none;border:var(--focusWidth) solid var(--palette-primary-300)}:host ::ng-deep es-list-base{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline;width:100%;padding:20.3px 0;align-items:center}:host ::ng-deep es-list-base>div{display:inline}:host ::ng-deep es-list-base>div>div{display:inline}mat-header-cell,mat-cell{margin:0 3px}mat-header-cell:not(.mat-column-primary),mat-cell:not(.mat-column-primary){flex:0 145px}mat-header-cell.mat-column-primary,mat-cell.mat-column-primary{min-width:30%}mat-header-cell.mat-column-select,mat-cell.mat-column-select{flex:0 58px;min-width:58px;padding-left:14px}mat-header-cell.mat-column-icon,mat-cell.mat-column-icon{flex:0 85px;min-width:85px;justify-content:center}mat-header-cell.mat-column-actions,mat-cell.mat-column-actions{flex:0 58px;min-width:58px;display:flex;justify-content:flex-end;padding-right:5px}.mat-row{background:unset}.mat-row.dynamic-single-click{cursor:pointer}.mat-row.dynamic-single-click:hover{background-color:rgb(var(--palette-primary-50))}.mat-row.mat-row-import-blocked{opacity:.75;text-decoration:line-through}.mat-row.mat-row-selected{background:var(--listItemSelectedBackgroundEffect)}.mat-row.mat-row-selected .mat-mdc-cell{background:transparent}.mat-row.mat-row-virtual{background:linear-gradient(to right,var(--nodeVirtualColor) 5px,transparent 5px) no-repeat;border-right:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual .mat-mdc-cell{background:transparent}.mat-row.mat-row-virtual.mat-row-selected{background:linear-gradient(to right,var(--nodeVirtualColor) 0,var(--nodeVirtualColor) 5px,var(--listItemSelectedBackground) 5px,var(--listItemSelectedBackground) 5px)}.mat-row.mat-row-virtual-first{border-top:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual-last{border-bottom:2px dashed var(--nodeVirtualColorLight)}.mat-row.selected-when-dragging{opacity:.5}.dropdown-dummy{position:fixed}.childobjects{background-color:#0000000d;border-radius:15px;display:inline-flex;align-items:center;min-width:51px;min-height:26px;justify-content:center;cursor:default;-webkit-user-select:none;user-select:none;padding:2px 8px;margin-left:5px}.childobjects>.childobject-count{display:inline-flex;align-items:center}.childobjects>.childobject-count>i{font-size:13px;margin-left:4px}.cell-icon .icon-bg{width:36px;height:36px;padding:3px;margin:1px 0;background-color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 0 3px #0000004d}.cell-icon .icon-bg>img{width:18px;height:auto}.cell-icon .icon-bg>i{color:#666;font-size:18px}.mat-column-link{flex:0 60px}.mat-column-link a,.load-more{display:flex;justify-content:center}es-node-entries-global-options{padding:20px 0}\n"] }]
|
|
6042
|
+
args: [{ selector: 'es-node-entries-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<es-dropdown #dropdown [options]=\"entriesService.options?.[Target.ListDropdown]\"></es-dropdown>\n<button\n #menuTrigger=\"matMenuTrigger\"\n mat-button\n class=\"dropdown-dummy cdk-visually-hidden\"\n [style.left.px]=\"dropdownLeft\"\n [style.top.px]=\"dropdownTop\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n></button>\n<es-node-entries-global-options\n *ngIf=\"(entriesService.globalOptionsSubject | async)?.length\"\n [displayType]=\"NodeEntriesDisplayType.Table\"\n>\n</es-node-entries-global-options>\n<mat-table\n [dataSource]=\"entriesService.dataSource\"\n matSort\n [matSortDisableClear]=\"true\"\n [matSortActive]=\"entriesService.sort?.active\"\n [matSortDirection]=\"entriesService.sort?.direction\"\n esInfiniteScroll\n (scrolled)=\"loadData('scroll')\"\n>\n <!-- Checkbox Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox\n [ngModel]=\"entriesService.selection.selected.length > 0\"\n [indeterminate]=\"\n entriesService.selection.selected.length > 0 &&\n entriesService.selection.selected.length !== entriesService.dataSource.getData().length\n \"\n (ngModelChange)=\"toggleAll($event)\"\n color=\"primary\"\n aria-label=\"{{ 'LIST_TABLE.TOGGLE_ALL' | translate }}\"\n ></mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let node\">\n <mat-checkbox\n [checked]=\"entriesService.selection.isSelected(node)\"\n (change)=\"entriesService.onCheckboxChanged(node, $event.checked)\"\n aria-label=\"{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}\"\n color=\"primary\"\n ></mat-checkbox>\n </mat-cell>\n </ng-container>\n <div matColumnDef=\"icon\">\n <mat-header-cell *matHeaderCellDef class=\"cell-icon cell-count\">\n ({{ entriesService.selection.selected.length\n }}<ng-container *ngIf=\"entriesService.dataSource?.getTotal() !== undefined\">\n / {{ entriesService.dataSource?.getTotal() }}</ng-container\n >)\n </mat-header-cell>\n <mat-cell *matCellDef=\"let node\" class=\"cell-icon\">\n <ng-container\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n >\n <ng-container *ngTemplateOutlet=\"icon; context: { node: this.node }\"></ng-container>\n </ng-container>\n <div\n *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n (click)=\"\n entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n \"\n (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n >\n <ng-container\n *ngTemplateOutlet=\"icon; context: { node: this.node }\"\n (click)=\"\n entriesService.onClicked({ event: $event, element: node, source: ClickSource.Icon })\n \"\n (dblclick)=\"entriesService.dblClickItem.emit({ element: node, source: ClickSource.Icon })\"\n ></ng-container>\n </div>\n </mat-cell>\n </div>\n <ng-container matColumnDef=\"actions\">\n <mat-header-cell *matHeaderCellDef>\n <button\n *ngIf=\"entriesService.configureColumns\"\n mat-icon-button\n (click)=\"columnChooserVisible = !columnChooserVisible\"\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 </mat-header-cell>\n <mat-cell *matCellDef=\"let node\">\n <button\n mat-icon-button\n *ngIf=\"entriesService.options?.[Target.List]?.length\"\n color=\"primary\"\n (click)=\"openMenu(node)\"\n [matMenuTriggerFor]=\"dropdown.menu\"\n >\n <i esIcon=\"more_vert\" [aria]=\"true\"></i>\n </button>\n </mat-cell>\n </ng-container>\n <!-- Data Columns -->\n <ng-container\n *ngFor=\"let column of visibleDataColumns$ | async; let first = first\"\n [matColumnDef]=\"column.name\"\n >\n <ng-container>\n <mat-header-cell\n *matHeaderCellDef\n mat-sort-header\n [disabled]=\"!(entriesService.sort?.allowed && isSortable(column))\"\n [class.mat-column-primary]=\"first\"\n >{{ column | esListItemLabel | async }}</mat-header-cell\n >\n </ng-container>\n <mat-cell\n *matCellDef=\"let node\"\n #cell\n [class.mat-column-primary]=\"first\"\n attr.data-test=\"table-cell-{{ column.name }}\"\n >\n <ng-container\n *ngIf=\"entriesService.elementInteractionType === InteractionType.DefaultActionLink\"\n >\n <es-node-url cdkMonitorSubtreeFocus [node]=\"node\" [mode]=\"first ? 'link' : 'wrapper'\">\n <es-list-base\n [forceText]=\"true\"\n [node]=\"node\"\n [item]=\"column\"\n esCheckTextOverflow\n #text=\"esCheckTextOverflow\"\n [matTooltip]=\"text.hasTextOverflow() ? cell.innerText : null\"\n matTooltipTouchGestures=\"off\"\n ></es-list-base>\n </es-node-url>\n </ng-container>\n <es-list-base\n *ngIf=\"entriesService.elementInteractionType !== InteractionType.DefaultActionLink\"\n [forceText]=\"true\"\n [node]=\"node\"\n [item]=\"column\"\n (click)=\"\n entriesService.onClicked({\n event: $event,\n element: node,\n source: ClickSource.Metadata,\n attribute: column,\n })\n \"\n (dblclick)=\"\n entriesService.dblClickItem.emit({\n element: node,\n source: ClickSource.Metadata,\n attribute: column,\n })\n \"\n ></es-list-base>\n <ng-container *ngIf=\"first\">\n <div class=\"childobjects\" *ngIf=\"node.properties?.['virtual:childobjectcount'] > 0\">\n <div\n class=\"childobject-count\"\n matTooltip=\"{{\n 'CHILDOBJECT_COUNT'\n | translate : { count: node.properties['virtual:childobjectcount'] * 1 + 1 }\n }}\"\n >\n <span>{{ node.properties['virtual:childobjectcount'] * 1 + 1 }}</span\n ><i esIcon=\"filter_none\"></i>\n </div>\n </div>\n </ng-container>\n </mat-cell>\n </ng-container>\n <mat-header-row mat-header-row *matHeaderRowDef=\"visibleColumnNames$ | async\"></mat-header-row>\n <mat-row\n mat-row\n matRipple\n cdkDrag\n esNodesDrag\n [cdkDragDisabled]=\"!entriesService.dragDrop?.dragAllowed || (ui.isTouchSubject | async)\"\n [cdkDragData]=\"getDragData(node)\"\n (cdkDragStarted)=\"onDragStarted(node)\"\n (cdkDragEnded)=\"onDragEnded()\"\n [esNodesDropTarget]=\"node\"\n [canDropNodes]=\"canDrop\"\n (nodeDropped)=\"drop($event)\"\n class=\"mat-row\"\n [class.mat-row-selected]=\"entriesService.selection.isSelected(node)\"\n [class.mat-row-import-blocked]=\"isBlocked(node)\"\n [class.selected-when-dragging]=\"isDragging && entriesService.selection.isSelected(node)\"\n [class.mat-row-virtual]=\"node.virtual\"\n [class.mat-row-virtual-first]=\"\n node.virtual && !$any(entriesService.dataSource.getData()[i - 1])?.virtual\n \"\n [class.mat-row-virtual-last]=\"\n node.virtual && !$any(entriesService.dataSource.getData()[i + 1])?.virtual\n \"\n [class.dynamic-single-click]=\"entriesService.singleClickHint === 'dynamic'\"\n *matRowDef=\"let node; let i = index; let last = last; columns: visibleColumnNames$ | async\"\n (contextmenu)=\"onRowContextMenu({ event: $event, node: node })\"\n (keydown.ContextMenu)=\"onRowContextMenu({ event: $event, node: node })\"\n >\n <es-drag-preview\n *cdkDragPreview\n [node]=\"node\"\n [selected]=\"entriesService.selection.selected\"\n [item]=\"(visibleDataColumns$ | async)[0]\"\n ></es-drag-preview>\n </mat-row>\n</mat-table>\n<ng-container\n *ngIf=\"\n (entriesService.dataSource.isLoadingSubject | async) === false &&\n entriesService.dataSource.hasMore() &&\n entriesService.paginationStrategy === 'infinite-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 *ngIf=\"entriesService.dataSource.isLoadingSubject | async\">\n <ng-container *ngTemplateOutlet=\"loading\"> </ng-container>\n</ng-container>\n<!--\n<mat-paginator #paginator [pageSizeOptions]=\"pageSizeOptions\"></mat-paginator>\n-->\n\n<!-- Wait for ready state to avoid changed-after-checked error when `columnChooserTrigger` becomes\navailable. -->\n<es-column-chooser\n *ngIf=\"columnChooserTriggerReady\"\n [(columns)]=\"entriesService.columns\"\n [(columnChooserVisible)]=\"columnChooserVisible\"\n [origin]=\"columnChooserTrigger\"\n></es-column-chooser>\n<ng-template #loading>\n <es-spinner></es-spinner>\n</ng-template>\n<ng-template #icon let-node=\"node\">\n <div class=\"icon-bg\">\n <img\n *ngIf=\"node.iconURL\"\n [src]=\"node | esNodeIcon | async\"\n [alt]=\"\n node.mediatype\n ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n : ''\n \"\n [matTooltip]=\"\n node.mediatype\n ? ('NODE.mediatype' | translate) + ': ' + ('MEDIATYPE.' + node.mediatype | translate)\n : ''\n \"\n matTooltipTouchGestures=\"off\"\n />\n <i\n *ngIf=\"!node.iconURL\"\n [esIcon]=\"node.authorityType ? (node.authorityType === 'GROUP' ? 'group' : 'person') : null\"\n ></i>\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column}:host ::ng-deep mat-header-cell{color:var(--textMediumLight)}:host ::ng-deep mat-cell,:host ::ng-deep mat-header-cell{margin:0!important}:host ::ng-deep mat-cell es-node-url{width:100%}:host ::ng-deep mat-cell es-node-url a{color:#000}:host ::ng-deep mat-cell es-node-url.cdk-keyboard-focused{outline:none;border:2px solid var(--palette-primary-300)}:host ::ng-deep es-list-base{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:inline;width:100%;padding:20.3px 0;align-items:center}:host ::ng-deep es-list-base>div{display:inline}:host ::ng-deep es-list-base>div>div{display:inline}mat-header-cell,mat-cell{margin:0 3px}mat-header-cell:not(.mat-column-primary),mat-cell:not(.mat-column-primary){flex:0 145px}mat-header-cell.mat-column-primary,mat-cell.mat-column-primary{min-width:30%}mat-header-cell.mat-column-select,mat-cell.mat-column-select{flex:0 58px;min-width:58px;padding-left:14px}mat-header-cell.mat-column-icon,mat-cell.mat-column-icon{flex:0 85px;min-width:85px;justify-content:center}mat-header-cell.mat-column-actions,mat-cell.mat-column-actions{flex:0 58px;min-width:58px;display:flex;justify-content:flex-end;padding-right:5px}.mat-row{background:unset}.mat-row.dynamic-single-click{cursor:pointer}.mat-row.dynamic-single-click:hover{background-color:rgb(var(--palette-primary-50))}.mat-row.mat-row-import-blocked{opacity:.75;text-decoration:line-through}.mat-row.mat-row-selected{background:var(--listItemSelectedBackgroundEffect)}.mat-row.mat-row-selected .mat-mdc-cell{background:transparent}.mat-row.mat-row-virtual{background:linear-gradient(to right,var(--nodeVirtualColor) 5px,transparent 5px) no-repeat;border-right:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual .mat-mdc-cell{background:transparent}.mat-row.mat-row-virtual.mat-row-selected{background:linear-gradient(to right,var(--nodeVirtualColor) 0,var(--nodeVirtualColor) 5px,var(--listItemSelectedBackground) 5px,var(--listItemSelectedBackground) 5px)}.mat-row.mat-row-virtual-first{border-top:2px dashed var(--nodeVirtualColorLight)}.mat-row.mat-row-virtual-last{border-bottom:2px dashed var(--nodeVirtualColorLight)}.mat-row.selected-when-dragging{opacity:.5}.dropdown-dummy{position:fixed}.childobjects{background-color:#0000000d;border-radius:15px;display:inline-flex;align-items:center;min-width:51px;min-height:26px;justify-content:center;cursor:default;-webkit-user-select:none;user-select:none;padding:2px 8px;margin-left:5px}.childobjects>.childobject-count{display:inline-flex;align-items:center}.childobjects>.childobject-count>i{font-size:13px;margin-left:4px}.cell-icon .icon-bg{width:36px;height:36px;padding:3px;margin:1px 0;background-color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 0 3px #0000004d}.cell-icon .icon-bg>img{width:18px;height:auto}.cell-icon .icon-bg>i{color:#666;font-size:18px}.mat-column-link{flex:0 60px}.mat-column-link a,.load-more{display:flex;justify-content:center}es-node-entries-global-options{padding:20px 0}\n"] }]
|
|
6043
6043
|
}], ctorParameters: () => [{ type: NodeEntriesService }, { type: NodeEntriesGlobalService }, { type: i0.ApplicationRef }, { type: Toast }, { type: TranslationsService }, { type: NodeHelperService }, { type: i0.ChangeDetectorRef }, { type: UIService }, { type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { sort: [{
|
|
6044
6044
|
type: ViewChild,
|
|
6045
6045
|
args: [MatSort]
|
|
@@ -7209,6 +7209,8 @@ const TRANSLATION_LIST = [
|
|
|
7209
7209
|
];
|
|
7210
7210
|
let TranslationLoader = TranslationLoader_1 = class TranslationLoader {
|
|
7211
7211
|
static create(http, configService, configuration, assetsBasePath, additionalI18nProvider) {
|
|
7212
|
+
console.log('ASSETS_BASE_PATH', assetsBasePath);
|
|
7213
|
+
console.log('ADDITIONAL_I18N_PROVIDER', assetsBasePath);
|
|
7212
7214
|
return new TranslationLoader_1(assetsBasePath, additionalI18nProvider, http, configService, configuration);
|
|
7213
7215
|
}
|
|
7214
7216
|
constructor(assetsBasePath, additionalI18nProvider, http, configService, configuration, prefix = (assetsBasePath ?? '') + 'assets/i18n', suffix = '.json') {
|