@biit-solutions/wizardry-theme 1.22.14 → 1.22.15
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/assets/i18n/login-welcome/de.json +1 -0
- package/assets/i18n/login-welcome/fr.json +1 -0
- package/assets/i18n/login-welcome/it.json +1 -0
- package/assets/i18n/utils/de.json +1 -0
- package/assets/i18n/utils/fr.json +1 -0
- package/assets/i18n/utils/it.json +1 -0
- package/esm2020/button/biit-action-button/biit-action-button.component.mjs +2 -2
- package/esm2020/button/biit-icon-button/biit-icon-button.component.mjs +2 -2
- package/esm2020/charts/bar-chart/bar-chart.component.mjs +2 -2
- package/esm2020/charts/line-chart/line-chart.component.mjs +2 -2
- package/esm2020/charts/meta-view-chart/meta-view-chart.component.mjs +2 -2
- package/esm2020/charts/pie-chart/pie-chart.component.mjs +2 -2
- package/esm2020/charts/radar-chart/radar-chart.component.mjs +2 -2
- package/esm2020/charts/radial-chart/radial-chart.component.mjs +2 -2
- package/esm2020/charts/timeline-viewer-chart/timeline-viewer-chart.component.mjs +2 -2
- package/esm2020/popup/biit-popup/biit-popup.component.mjs +2 -2
- package/esm2020/table/biit-datatable/biit-datatable.component.mjs +2 -2
- package/esm2020/table/biit-paginator/biit-paginator.component.mjs +2 -2
- package/esm2020/table/biit-table/biit-table.component.mjs +2 -2
- package/fesm2015/biit-solutions-wizardry-theme-button.mjs +4 -4
- package/fesm2015/biit-solutions-wizardry-theme-button.mjs.map +1 -1
- package/fesm2015/biit-solutions-wizardry-theme-charts.mjs +14 -14
- package/fesm2015/biit-solutions-wizardry-theme-popup.mjs +2 -2
- package/fesm2015/biit-solutions-wizardry-theme-popup.mjs.map +1 -1
- package/fesm2015/biit-solutions-wizardry-theme-table.mjs +6 -6
- package/fesm2020/biit-solutions-wizardry-theme-button.mjs +4 -4
- package/fesm2020/biit-solutions-wizardry-theme-button.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-charts.mjs +14 -14
- package/fesm2020/biit-solutions-wizardry-theme-popup.mjs +2 -2
- package/fesm2020/biit-solutions-wizardry-theme-popup.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-table.mjs +6 -6
- package/package.json +1 -1
|
@@ -248,7 +248,7 @@ BiitPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
248
248
|
useExisting: forwardRef(() => BiitPaginatorComponent),
|
|
249
249
|
multi: true
|
|
250
250
|
}
|
|
251
|
-
], viewQueries: [{ propertyName: "pageSelector", first: true, predicate: ["pageSelector"], descendants: true }, { propertyName: "selectorBtn", first: true, predicate: ["pageSizeBtn"], descendants: true }, { propertyName: "selectorList", first: true, predicate: ["pageSizeList"], descendants: true }, { propertyName: "pageInput", first: true, predicate: ["pageInput"], descendants: true }, { propertyName: "totalPagesLabel", first: true, predicate: ["totalPagesLabel"], descendants: true }], ngImport: i0, template: "<div style=\"display: flex; justify-content: space-between\" *transloco=\"let t\">\n <!-- PAGE SELECTOR -->\n <div #pageSelector class=\"page-selector\" id=\"page-selector\">\n <button biit-icon id=\"arrow-first\"\n icon='right_double_arrow'\n class=\"horizontal-flip\"\n (click)=\"paginator.currentPage = 1; onModelChange();\"\n [disabled]=\"paginator?.currentPage <= 1\"\n tooltip=\"{{t('table.first-page')}}\"\n ></button>\n <button biit-icon id=\"arrow-previous\"\n icon='right_arrow'\n class=\"compact horizontal-flip\"\n (click)=\"paginator.currentPage = paginator.currentPage - 1; onModelChange();\"\n [disabled]=\"paginator?.currentPage <= 1\"\n tooltip=\"{{t('table.previous-page')}}\"\n ></button>\n <div class=\"page-display\" style=\"position: relative\">\n <input #pageInput id=\"current-page\"\n [ngModel]=\"paginator?.currentPage\"\n type=\"number\"\n [min]=\"1\"\n [max]=\"totalPages\"\n (keydown.enter)=\"setInputValue($event); onModelChange()\"\n (focusout)=\"resetInputValue($event)\"\n class=\"page-input\"/>\n <a #totalPagesLabel class=\"total-pages\">/</a>\n <div class=\"bottom-bar\"></div>\n </div>\n <button biit-icon id=\"arrow-next\"\n icon='right_arrow'\n class=\"compact\"\n (click)=\"paginator.currentPage = paginator.currentPage + 1; onModelChange();\"\n [disabled]=\"paginator?.currentPage >= totalPages\"\n tooltip=\"{{t('table.next-page')}}\"\n ></button>\n <button biit-icon id=\"arrow-last\"\n icon='right_double_arrow'\n (click)=\"paginator.currentPage = totalPages; onModelChange();\"\n [disabled]=\"paginator?.currentPage >= totalPages\"\n tooltip=\"{{t('table.last-page')}}\"\n ></button>\n </div>\n\n <!-- PAGE SIZE SELECTOR -->\n <div class=\"page-size-selector\">\n <a\n [tooltip]=\"t('table.rows-per-page')\">{{ t('table.rows-per-page') }}</a>\n <button #pageSizeBtn\n (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n (keydown)=\"handleKeyboardEvents($event)\">\n <a>{{ paginator?.pageSize }}</a>\n <biit-icon class=\"icon\"\n [name]=\"'right_arrow'\"\n [pathStyle]=\"{fill: dropdownOpen ? '#F20D5E' : '#262626'}\"\n [class.rotate]=\"dropdownOpen\"\n ></biit-icon>\n </button>\n <div class=\"dropdown\" [style.overflow]=\"dropdownOpen ? 'visible' : 'hidden'\">\n <div #pageSizeList\n class=\"list\"\n [class.dropdown-open]=\"dropdownOpen\">\n <button *ngFor=\"let pageSize of paginator?.pageSizeOptions; index as i\"\n (click)=\"paginator.currentPage = 1; paginator.pageSize = pageSize; onModelChange()\"\n (keydown)=\"handleKeyboardEvents($event)\"\n [class.selected]=\"paginator.pageSize === pageSize\"\n class=\"item\"\n role=\"option\"\n aria-selected=\"false\"\n [id]=\"i\"\n [tabindex]=\"!dropdownOpen? -1 : 0\"\n [disabled]=\"!dropdownOpen\"\n >\n {{ pageSize }}\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".page-selector{--center-fix: 0px;display:flex;position:relative;left:var(--center-fix)}.page-selector button[biit-icon].horizontal-flip{rotate:-180deg}.page-selector button[biit-icon].compact ::ng-deep .icon-button-svg{width:.6rem}.page-selector .page-display{display:block;position:relative;font-size:1rem;color:var(--component-color);font-weight:700}.page-selector .page-display input{border:none;box-sizing:border-box;padding-left:.7rem;padding-right:calc(50% + .35rem);height:2.1rem;min-width:4.1rem;font-size:1rem;color:var(--component-color);font-weight:700;text-align:right}.page-selector .page-display input:focus,.page-selector .page-display input:active,.page-selector .page-display input:hover{outline:none;background:var(--main-background)}.page-selector .page-display input:disabled{pointer-events:none;color:var(--main-background)}.page-selector .page-display input::-webkit-outer-spin-button,.page-selector .page-display input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page-selector .page-display input[type=number]{-moz-appearance:textfield}.page-selector .page-display .total-pages{position:absolute;left:calc(50% + .35rem);top:.95rem;transform:translateY(-50%);pointer-events:none}.page-selector .page-display .bottom-bar{position:absolute;bottom:0;width:100%;height:.2rem;background:var(--component-color)}.page-size-selector{display:flex;align-items:center;color:var(--component-color)}.page-size-selector button{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;display:flex;align-items:center;justify-content:flex-end;width:3rem;height:2.1rem;cursor:pointer}.page-size-selector button:hover,.page-size-selector button:focus,.page-size-selector button:focus-visible{background:var(--main-background)}.page-size-selector .wh-100{display:inline-flex;width:.3rem;height:.3rem;padding:.2rem;transition:transform .5s ease;transform:rotate(90deg)}.page-size-selector .wh-100.rotate{transform:rotate(-90deg)}.page-size-selector .dropdown{position:relative;right:3rem;top:1.05rem;z-index:1}.page-size-selector .dropdown .list{width:3rem;background:var(--
|
|
251
|
+
], viewQueries: [{ propertyName: "pageSelector", first: true, predicate: ["pageSelector"], descendants: true }, { propertyName: "selectorBtn", first: true, predicate: ["pageSizeBtn"], descendants: true }, { propertyName: "selectorList", first: true, predicate: ["pageSizeList"], descendants: true }, { propertyName: "pageInput", first: true, predicate: ["pageInput"], descendants: true }, { propertyName: "totalPagesLabel", first: true, predicate: ["totalPagesLabel"], descendants: true }], ngImport: i0, template: "<div style=\"display: flex; justify-content: space-between\" *transloco=\"let t\">\n <!-- PAGE SELECTOR -->\n <div #pageSelector class=\"page-selector\" id=\"page-selector\">\n <button biit-icon id=\"arrow-first\"\n icon='right_double_arrow'\n class=\"horizontal-flip\"\n (click)=\"paginator.currentPage = 1; onModelChange();\"\n [disabled]=\"paginator?.currentPage <= 1\"\n tooltip=\"{{t('table.first-page')}}\"\n ></button>\n <button biit-icon id=\"arrow-previous\"\n icon='right_arrow'\n class=\"compact horizontal-flip\"\n (click)=\"paginator.currentPage = paginator.currentPage - 1; onModelChange();\"\n [disabled]=\"paginator?.currentPage <= 1\"\n tooltip=\"{{t('table.previous-page')}}\"\n ></button>\n <div class=\"page-display\" style=\"position: relative\">\n <input #pageInput id=\"current-page\"\n [ngModel]=\"paginator?.currentPage\"\n type=\"number\"\n [min]=\"1\"\n [max]=\"totalPages\"\n (keydown.enter)=\"setInputValue($event); onModelChange()\"\n (focusout)=\"resetInputValue($event)\"\n class=\"page-input\"/>\n <a #totalPagesLabel class=\"total-pages\">/</a>\n <div class=\"bottom-bar\"></div>\n </div>\n <button biit-icon id=\"arrow-next\"\n icon='right_arrow'\n class=\"compact\"\n (click)=\"paginator.currentPage = paginator.currentPage + 1; onModelChange();\"\n [disabled]=\"paginator?.currentPage >= totalPages\"\n tooltip=\"{{t('table.next-page')}}\"\n ></button>\n <button biit-icon id=\"arrow-last\"\n icon='right_double_arrow'\n (click)=\"paginator.currentPage = totalPages; onModelChange();\"\n [disabled]=\"paginator?.currentPage >= totalPages\"\n tooltip=\"{{t('table.last-page')}}\"\n ></button>\n </div>\n\n <!-- PAGE SIZE SELECTOR -->\n <div class=\"page-size-selector\">\n <a\n [tooltip]=\"t('table.rows-per-page')\">{{ t('table.rows-per-page') }}</a>\n <button #pageSizeBtn\n (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n (keydown)=\"handleKeyboardEvents($event)\">\n <a>{{ paginator?.pageSize }}</a>\n <biit-icon class=\"icon\"\n [name]=\"'right_arrow'\"\n [pathStyle]=\"{fill: dropdownOpen ? '#F20D5E' : '#262626'}\"\n [class.rotate]=\"dropdownOpen\"\n ></biit-icon>\n </button>\n <div class=\"dropdown\" [style.overflow]=\"dropdownOpen ? 'visible' : 'hidden'\">\n <div #pageSizeList\n class=\"list\"\n [class.dropdown-open]=\"dropdownOpen\">\n <button *ngFor=\"let pageSize of paginator?.pageSizeOptions; index as i\"\n (click)=\"paginator.currentPage = 1; paginator.pageSize = pageSize; onModelChange()\"\n (keydown)=\"handleKeyboardEvents($event)\"\n [class.selected]=\"paginator.pageSize === pageSize\"\n class=\"item\"\n role=\"option\"\n aria-selected=\"false\"\n [id]=\"i\"\n [tabindex]=\"!dropdownOpen? -1 : 0\"\n [disabled]=\"!dropdownOpen\"\n >\n {{ pageSize }}\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".page-selector{--center-fix: 0px;display:flex;position:relative;left:var(--center-fix)}.page-selector button[biit-icon].horizontal-flip{rotate:-180deg}.page-selector button[biit-icon].compact ::ng-deep .icon-button-svg{width:.6rem}.page-selector .page-display{display:block;position:relative;font-size:1rem;color:var(--component-color);font-weight:700}.page-selector .page-display input{border:none;box-sizing:border-box;padding-left:.7rem;padding-right:calc(50% + .35rem);height:2.1rem;min-width:4.1rem;font-size:1rem;color:var(--component-color);font-weight:700;text-align:right}.page-selector .page-display input:focus,.page-selector .page-display input:active,.page-selector .page-display input:hover{outline:none;background:var(--main-background)}.page-selector .page-display input:disabled{pointer-events:none;color:var(--main-background)}.page-selector .page-display input::-webkit-outer-spin-button,.page-selector .page-display input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page-selector .page-display input[type=number]{-moz-appearance:textfield}.page-selector .page-display .total-pages{position:absolute;left:calc(50% + .35rem);top:.95rem;transform:translateY(-50%);pointer-events:none}.page-selector .page-display .bottom-bar{position:absolute;bottom:0;width:100%;height:.2rem;background:var(--component-color)}.page-size-selector{display:flex;align-items:center;color:var(--component-color)}.page-size-selector button{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;display:flex;align-items:center;justify-content:flex-end;width:3rem;height:2.1rem;cursor:pointer}.page-size-selector button:hover,.page-size-selector button:focus,.page-size-selector button:focus-visible{background:var(--main-background)}.page-size-selector .wh-100{display:inline-flex;width:.3rem;height:.3rem;padding:.2rem;transition:transform .5s ease;transform:rotate(90deg)}.page-size-selector .wh-100.rotate{transform:rotate(-90deg)}.page-size-selector .dropdown{position:relative;right:3rem;top:1.05rem;z-index:1}.page-size-selector .dropdown .list{width:3rem;background:var(--chart-background);position:absolute;display:flex;flex-direction:column;cursor:pointer;transform-origin:top;opacity:0;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease}.page-size-selector .dropdown .list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.page-size-selector .dropdown .list .item{width:100%;height:1.4rem;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;border-left:.2rem solid var(--component-color);border-right:.2rem solid var(--component-color);padding-right:.5rem}.page-size-selector .dropdown .list .item:first-child{border-top:.2rem solid var(--component-color)}.page-size-selector .dropdown .list .item:last-child{border-bottom:.2rem solid var(--component-color)}.page-size-selector .dropdown .list .item.selected{background:var(--main-background)}.page-size-selector .dropdown .list .item:hover,.page-size-selector .dropdown .list .item:focus,.page-size-selector .dropdown .list .item:focus-visible{border-left:none;border-right:none;background:var(--hover-color);padding-right:.7rem}.onwards{--origin: 1rem}.downwards{--origin: -1rem}@media screen and (max-width: 600px){.page-size-selector{display:none!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1$1.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i8.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i5$1.BiitTooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "ignorePadding"] }] });
|
|
252
252
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitPaginatorComponent, decorators: [{
|
|
253
253
|
type: Component,
|
|
254
254
|
args: [{ selector: 'biit-paginator', providers: [
|
|
@@ -259,7 +259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
259
259
|
}
|
|
260
260
|
], host: {
|
|
261
261
|
'(document:pointerdown)': 'handleMouseEvents($event)'
|
|
262
|
-
}, template: "<div style=\"display: flex; justify-content: space-between\" *transloco=\"let t\">\n <!-- PAGE SELECTOR -->\n <div #pageSelector class=\"page-selector\" id=\"page-selector\">\n <button biit-icon id=\"arrow-first\"\n icon='right_double_arrow'\n class=\"horizontal-flip\"\n (click)=\"paginator.currentPage = 1; onModelChange();\"\n [disabled]=\"paginator?.currentPage <= 1\"\n tooltip=\"{{t('table.first-page')}}\"\n ></button>\n <button biit-icon id=\"arrow-previous\"\n icon='right_arrow'\n class=\"compact horizontal-flip\"\n (click)=\"paginator.currentPage = paginator.currentPage - 1; onModelChange();\"\n [disabled]=\"paginator?.currentPage <= 1\"\n tooltip=\"{{t('table.previous-page')}}\"\n ></button>\n <div class=\"page-display\" style=\"position: relative\">\n <input #pageInput id=\"current-page\"\n [ngModel]=\"paginator?.currentPage\"\n type=\"number\"\n [min]=\"1\"\n [max]=\"totalPages\"\n (keydown.enter)=\"setInputValue($event); onModelChange()\"\n (focusout)=\"resetInputValue($event)\"\n class=\"page-input\"/>\n <a #totalPagesLabel class=\"total-pages\">/</a>\n <div class=\"bottom-bar\"></div>\n </div>\n <button biit-icon id=\"arrow-next\"\n icon='right_arrow'\n class=\"compact\"\n (click)=\"paginator.currentPage = paginator.currentPage + 1; onModelChange();\"\n [disabled]=\"paginator?.currentPage >= totalPages\"\n tooltip=\"{{t('table.next-page')}}\"\n ></button>\n <button biit-icon id=\"arrow-last\"\n icon='right_double_arrow'\n (click)=\"paginator.currentPage = totalPages; onModelChange();\"\n [disabled]=\"paginator?.currentPage >= totalPages\"\n tooltip=\"{{t('table.last-page')}}\"\n ></button>\n </div>\n\n <!-- PAGE SIZE SELECTOR -->\n <div class=\"page-size-selector\">\n <a\n [tooltip]=\"t('table.rows-per-page')\">{{ t('table.rows-per-page') }}</a>\n <button #pageSizeBtn\n (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n (keydown)=\"handleKeyboardEvents($event)\">\n <a>{{ paginator?.pageSize }}</a>\n <biit-icon class=\"icon\"\n [name]=\"'right_arrow'\"\n [pathStyle]=\"{fill: dropdownOpen ? '#F20D5E' : '#262626'}\"\n [class.rotate]=\"dropdownOpen\"\n ></biit-icon>\n </button>\n <div class=\"dropdown\" [style.overflow]=\"dropdownOpen ? 'visible' : 'hidden'\">\n <div #pageSizeList\n class=\"list\"\n [class.dropdown-open]=\"dropdownOpen\">\n <button *ngFor=\"let pageSize of paginator?.pageSizeOptions; index as i\"\n (click)=\"paginator.currentPage = 1; paginator.pageSize = pageSize; onModelChange()\"\n (keydown)=\"handleKeyboardEvents($event)\"\n [class.selected]=\"paginator.pageSize === pageSize\"\n class=\"item\"\n role=\"option\"\n aria-selected=\"false\"\n [id]=\"i\"\n [tabindex]=\"!dropdownOpen? -1 : 0\"\n [disabled]=\"!dropdownOpen\"\n >\n {{ pageSize }}\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".page-selector{--center-fix: 0px;display:flex;position:relative;left:var(--center-fix)}.page-selector button[biit-icon].horizontal-flip{rotate:-180deg}.page-selector button[biit-icon].compact ::ng-deep .icon-button-svg{width:.6rem}.page-selector .page-display{display:block;position:relative;font-size:1rem;color:var(--component-color);font-weight:700}.page-selector .page-display input{border:none;box-sizing:border-box;padding-left:.7rem;padding-right:calc(50% + .35rem);height:2.1rem;min-width:4.1rem;font-size:1rem;color:var(--component-color);font-weight:700;text-align:right}.page-selector .page-display input:focus,.page-selector .page-display input:active,.page-selector .page-display input:hover{outline:none;background:var(--main-background)}.page-selector .page-display input:disabled{pointer-events:none;color:var(--main-background)}.page-selector .page-display input::-webkit-outer-spin-button,.page-selector .page-display input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page-selector .page-display input[type=number]{-moz-appearance:textfield}.page-selector .page-display .total-pages{position:absolute;left:calc(50% + .35rem);top:.95rem;transform:translateY(-50%);pointer-events:none}.page-selector .page-display .bottom-bar{position:absolute;bottom:0;width:100%;height:.2rem;background:var(--component-color)}.page-size-selector{display:flex;align-items:center;color:var(--component-color)}.page-size-selector button{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;display:flex;align-items:center;justify-content:flex-end;width:3rem;height:2.1rem;cursor:pointer}.page-size-selector button:hover,.page-size-selector button:focus,.page-size-selector button:focus-visible{background:var(--main-background)}.page-size-selector .wh-100{display:inline-flex;width:.3rem;height:.3rem;padding:.2rem;transition:transform .5s ease;transform:rotate(90deg)}.page-size-selector .wh-100.rotate{transform:rotate(-90deg)}.page-size-selector .dropdown{position:relative;right:3rem;top:1.05rem;z-index:1}.page-size-selector .dropdown .list{width:3rem;background:var(--
|
|
262
|
+
}, template: "<div style=\"display: flex; justify-content: space-between\" *transloco=\"let t\">\n <!-- PAGE SELECTOR -->\n <div #pageSelector class=\"page-selector\" id=\"page-selector\">\n <button biit-icon id=\"arrow-first\"\n icon='right_double_arrow'\n class=\"horizontal-flip\"\n (click)=\"paginator.currentPage = 1; onModelChange();\"\n [disabled]=\"paginator?.currentPage <= 1\"\n tooltip=\"{{t('table.first-page')}}\"\n ></button>\n <button biit-icon id=\"arrow-previous\"\n icon='right_arrow'\n class=\"compact horizontal-flip\"\n (click)=\"paginator.currentPage = paginator.currentPage - 1; onModelChange();\"\n [disabled]=\"paginator?.currentPage <= 1\"\n tooltip=\"{{t('table.previous-page')}}\"\n ></button>\n <div class=\"page-display\" style=\"position: relative\">\n <input #pageInput id=\"current-page\"\n [ngModel]=\"paginator?.currentPage\"\n type=\"number\"\n [min]=\"1\"\n [max]=\"totalPages\"\n (keydown.enter)=\"setInputValue($event); onModelChange()\"\n (focusout)=\"resetInputValue($event)\"\n class=\"page-input\"/>\n <a #totalPagesLabel class=\"total-pages\">/</a>\n <div class=\"bottom-bar\"></div>\n </div>\n <button biit-icon id=\"arrow-next\"\n icon='right_arrow'\n class=\"compact\"\n (click)=\"paginator.currentPage = paginator.currentPage + 1; onModelChange();\"\n [disabled]=\"paginator?.currentPage >= totalPages\"\n tooltip=\"{{t('table.next-page')}}\"\n ></button>\n <button biit-icon id=\"arrow-last\"\n icon='right_double_arrow'\n (click)=\"paginator.currentPage = totalPages; onModelChange();\"\n [disabled]=\"paginator?.currentPage >= totalPages\"\n tooltip=\"{{t('table.last-page')}}\"\n ></button>\n </div>\n\n <!-- PAGE SIZE SELECTOR -->\n <div class=\"page-size-selector\">\n <a\n [tooltip]=\"t('table.rows-per-page')\">{{ t('table.rows-per-page') }}</a>\n <button #pageSizeBtn\n (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n (keydown)=\"handleKeyboardEvents($event)\">\n <a>{{ paginator?.pageSize }}</a>\n <biit-icon class=\"icon\"\n [name]=\"'right_arrow'\"\n [pathStyle]=\"{fill: dropdownOpen ? '#F20D5E' : '#262626'}\"\n [class.rotate]=\"dropdownOpen\"\n ></biit-icon>\n </button>\n <div class=\"dropdown\" [style.overflow]=\"dropdownOpen ? 'visible' : 'hidden'\">\n <div #pageSizeList\n class=\"list\"\n [class.dropdown-open]=\"dropdownOpen\">\n <button *ngFor=\"let pageSize of paginator?.pageSizeOptions; index as i\"\n (click)=\"paginator.currentPage = 1; paginator.pageSize = pageSize; onModelChange()\"\n (keydown)=\"handleKeyboardEvents($event)\"\n [class.selected]=\"paginator.pageSize === pageSize\"\n class=\"item\"\n role=\"option\"\n aria-selected=\"false\"\n [id]=\"i\"\n [tabindex]=\"!dropdownOpen? -1 : 0\"\n [disabled]=\"!dropdownOpen\"\n >\n {{ pageSize }}\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".page-selector{--center-fix: 0px;display:flex;position:relative;left:var(--center-fix)}.page-selector button[biit-icon].horizontal-flip{rotate:-180deg}.page-selector button[biit-icon].compact ::ng-deep .icon-button-svg{width:.6rem}.page-selector .page-display{display:block;position:relative;font-size:1rem;color:var(--component-color);font-weight:700}.page-selector .page-display input{border:none;box-sizing:border-box;padding-left:.7rem;padding-right:calc(50% + .35rem);height:2.1rem;min-width:4.1rem;font-size:1rem;color:var(--component-color);font-weight:700;text-align:right}.page-selector .page-display input:focus,.page-selector .page-display input:active,.page-selector .page-display input:hover{outline:none;background:var(--main-background)}.page-selector .page-display input:disabled{pointer-events:none;color:var(--main-background)}.page-selector .page-display input::-webkit-outer-spin-button,.page-selector .page-display input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page-selector .page-display input[type=number]{-moz-appearance:textfield}.page-selector .page-display .total-pages{position:absolute;left:calc(50% + .35rem);top:.95rem;transform:translateY(-50%);pointer-events:none}.page-selector .page-display .bottom-bar{position:absolute;bottom:0;width:100%;height:.2rem;background:var(--component-color)}.page-size-selector{display:flex;align-items:center;color:var(--component-color)}.page-size-selector button{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;display:flex;align-items:center;justify-content:flex-end;width:3rem;height:2.1rem;cursor:pointer}.page-size-selector button:hover,.page-size-selector button:focus,.page-size-selector button:focus-visible{background:var(--main-background)}.page-size-selector .wh-100{display:inline-flex;width:.3rem;height:.3rem;padding:.2rem;transition:transform .5s ease;transform:rotate(90deg)}.page-size-selector .wh-100.rotate{transform:rotate(-90deg)}.page-size-selector .dropdown{position:relative;right:3rem;top:1.05rem;z-index:1}.page-size-selector .dropdown .list{width:3rem;background:var(--chart-background);position:absolute;display:flex;flex-direction:column;cursor:pointer;transform-origin:top;opacity:0;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease}.page-size-selector .dropdown .list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.page-size-selector .dropdown .list .item{width:100%;height:1.4rem;display:flex;align-items:center;justify-content:flex-end;box-sizing:border-box;border-left:.2rem solid var(--component-color);border-right:.2rem solid var(--component-color);padding-right:.5rem}.page-size-selector .dropdown .list .item:first-child{border-top:.2rem solid var(--component-color)}.page-size-selector .dropdown .list .item:last-child{border-bottom:.2rem solid var(--component-color)}.page-size-selector .dropdown .list .item.selected{background:var(--main-background)}.page-size-selector .dropdown .list .item:hover,.page-size-selector .dropdown .list .item:focus,.page-size-selector .dropdown .list .item:focus-visible{border-left:none;border-right:none;background:var(--hover-color);padding-right:.7rem}.onwards{--origin: 1rem}.downwards{--origin: -1rem}@media screen and (max-width: 600px){.page-size-selector{display:none!important}}\n"] }]
|
|
263
263
|
}], ctorParameters: function () { return []; }, propDecorators: { pageSelector: [{
|
|
264
264
|
type: ViewChild,
|
|
265
265
|
args: ['pageSelector']
|
|
@@ -562,13 +562,13 @@ BiitTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
|
|
|
562
562
|
BiitTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitTableComponent, selector: "biit-table", inputs: { _data: ["metadata", "_data"], _loading: ["loading", "_loading"], columns: "columns", pageSizes: "pageSizes", defaultPageSize: "defaultPageSize" }, outputs: { onUpdate: "onUpdate", onCellAction: "onCellAction", onRowClick: "onRowClick" }, providers: [{
|
|
563
563
|
provide: TRANSLOCO_SCOPE,
|
|
564
564
|
useValue: { scope: 'wizardry-theme/table', alias: "table" }
|
|
565
|
-
}], queries: [{ propertyName: "actionsTpl", first: true, predicate: ["actions"], descendants: true }], ngImport: i0, template: "<div class=\"canvas\" *transloco=\"let t\">\n <div class=\"header\" *ngIf=\"!hideHeader\">\n <div class=\"buttons\" id=\"menu\">\n <biit-vertical-menu *ngIf=\"actionsTpl\" class=\"vertical-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </biit-vertical-menu>\n <div *ngIf=\"actionsTpl\" class=\"horizontal-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </div>\n <div *ngIf=\"!actionsTpl\">\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"forms\">\n <biit-input-text id=\"search-field\" [(ngModel)]=\"search\"\n (onActionPerformed)=\"\n paginator.currentPage = 1;\n onTableUpdate(true);\n \"\n (focusout)=\"resetInputValue()\"\n (ngModelChange)=\"onTableUpdate()\"\n icon=\"search\"\n [placeholder]=\"t('table.search')\"\n ></biit-input-text>\n <biit-multiselect id=\"column-selector\" [ngModel]=\"columns | visibleColumns\"\n (ngModelChange)=\"setColumnVisibility($event)\"\n [data]=\"columns\"\n label=\"label\"\n value=\"visible\"\n [title]=\"t('table.column-selector')\"\n [type]=\"BiitMultiselectType.ICON\"\n [compact]=\"true\"\n ></biit-multiselect>\n </div>\n </div>\n\n <div class=\"content\">\n <div *ngIf=\"loading\" style=\"position: relative\">\n <biit-progress-bar style=\"position: absolute; top: 2.1rem; left: 0.2rem; width: calc(100% - 0.1rem);\"></biit-progress-bar>\n </div>\n <table>\n <thead>\n <tr>\n <th *ngIf=\"isSelectable || isSelectableSingle\" class=\"select\">\n <biit-checkbox *ngIf=\"isSelectable\"\n [ngModel]=\"data?.data.length && selectedRows.size == data?.data.length\"\n (ngModelChange)=\"$event ? data?.data.forEach(selectedRows.add, selectedRows) : selectedRows.clear()\"\n ></biit-checkbox>\n </th>\n <th *ngFor=\"let column of columns, index as i\"\n [class.sortable]=\"isSortable\"\n [style.display]=\"!column.visible ? 'none' : null\"\n [style.width]=\"column.width ? column.width + 'px' : ''\"\n (click)=\"isSortable ? onTableSort(column) : false\"\n >\n <div class=\"label\">\n {{column.label}}\n </div>\n <biit-icon *ngIf=\"isSortable\"\n [name]=\"sorting?.name == column.name ? 'right_arrow' : 'up_down_arrow'\"\n [pathStyle]=\"{fill: '#FFFFFF'}\"\n class=\"sort\"\n [class.asc]=\"sorting?.name == column.name && sorting?.order == 'asc'\"\n [class.desc]=\"sorting?.name == column.name && sorting?.order == 'desc'\"\n ></biit-icon>\n <div class=\"column-resizer\"\n (mousedown)=\"resizeColumn($event, column, i)\"\n (click)=\"$event.preventDefault();\n $event.stopPropagation();\n $event.stopImmediatePropagation();\"\n ></div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data?.data; index as i\"\n [class.selectable]=\"isSelectable\"\n [class.selected]=\"selectedRows.has(item)\"\n (pointerdown)=\"emitRowClick(item)\"\n >\n <td *ngIf=\"isSelectable || isSelectableSingle\" class=\"select\">\n <biit-checkbox id=\"select{{i}}\"\n [ngModel]=\"selectedRows.has(item)\"\n (ngModelChange)=\"selectRow(item, true)\"\n ></biit-checkbox>\n </td>\n <td *ngFor=\"let column of columns\"\n (pointerdown)=\"selectRow(item, $event.ctrlKey)\"\n [style.display]=\"!column.visible ? 'none' : null\"\n [style.width]=\"column.width ? column.width + 'px' : null\"\n >\n <div *ngIf=\"column.format == BiitTableColumnFormat.DEFAULT\">\n {{item | columnData: column.name}}\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.BOOLEAN\">\n {{(item | columnData: column.name) ? t('table.yes') : t('table.no') }}\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.DATE\">\n {{(item | columnData: column.name) | localizedDate}}\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.BUTTON\"\n style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n <button biit-button tertiary\n (pointerdown)=\"emitCellAction(item, column.name, $event)\">\n {{item | columnData: column.name}}\n </button>\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.ICON_BUTTON\"\n style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n <button biit-icon [icon]=\"item | columnData: column.name\"\n (pointerdown)=\"emitCellAction(item, column.name, $event);\"></button>\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.ICON\"\n style=\"width: auto; height: 1.05rem;\">\n <biit-icon [name]=\"item | columnData: column.name\"></biit-icon>\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.CUSTOM_HTML\"\n style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n <div [innerHTML]=\"item | columnData: column.name\"></div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n\n </div>\n\n <div class=\"footer\" *ngIf=\"!hideFooter\">\n <div class=\"selected\">\n <a style=\"margin-right: 0.7rem\" *ngIf=\"selectedRows.size\">Selected:</a>\n <a *ngIf=\"selectedRows.size\">{{selectedRows.size}}</a>\n </div>\n <biit-paginator *ngIf=\"paginator\"\n [ngModel]=\"paginator\" (ngModelChange)=\"paginator = $event; onTableUpdate()\"></biit-paginator>\n </div>\n</div>\n", styles: [".canvas{height:100%;display:flex;flex-direction:column;box-sizing:border-box;row-gap:1.05rem}.canvas>.header{display:flex;flex-direction:row;justify-content:space-between}.canvas>.header>*{display:flex;flex-direction:row}.canvas>.header>.buttons ::ng-deep>*{height:2.1rem;min-width:2.1rem;display:flex;align-items:center;justify-content:center}.canvas>.header>.forms{column-gap:.7rem}.canvas>.header>.forms ::ng-deep biit-input-text .biit-input{min-height:0;padding-top:0}.canvas>.content{overflow:auto;display:flex;flex-grow:1;flex-direction:column;box-sizing:border-box}.canvas>.content *{box-sizing:border-box}.canvas>.content>table{width:100%;height:-moz-fit-content;height:fit-content;margin-top:-.2rem;table-layout:fixed;border-spacing:.2rem}.canvas>.content>table thead{text-transform:uppercase;position:sticky;top:0;background:var(--popup-background);z-index:1}.canvas>.content>table thead th{position:relative;height:2.1rem;color:var(--popup-background);font-weight:500;background:var(--table-header-color);padding:.4rem 2.4rem;text-align:center;text-align:-moz-center;text-align:-webkit-center;cursor:default}.canvas>.content>table thead th.select{width:2.1rem;padding:.3rem .7rem;background:var(--popup-background)}.canvas>.content>table thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.canvas>.content>table thead th>.column-resizer{position:absolute;right:-.2rem;top:0;height:100%;width:.6rem;cursor:col-resize}.canvas>.content>table thead th>.label{width:-moz-fit-content;width:fit-content}.canvas>.content>table thead th>.sort{position:absolute;width:.7rem;height:.7rem;top:calc(50% - .35rem);right:.7rem;pointer-events:none}.canvas>.content>table thead th>.sort.asc{rotate:-90deg}.canvas>.content>table thead th>.sort.desc{rotate:90deg}.canvas>.content>table tbody tr{cursor:default}.canvas>.content>table tbody tr.selected{background:var(--main-background)}.canvas>.content>table tbody tr:hover{background:var(--hover-color)}.canvas>.content>table tbody tr:hover.selectable{cursor:pointer}.canvas>.content>table tbody tr>td{height:2.1rem;border-bottom:.2rem solid var(--table-border-color);padding:.3rem .7rem;overflow:hidden}.canvas>.content>table tbody tr>td.select{width:2.1rem;padding:.3rem .7rem}.canvas>.footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.canvas>.footer>biit-paginator{width:50%;display:block}@media screen and (max-width: 600px){.page-size-selector,.horizontal-menu{display:none!important}}@media screen and (min-width: 601px){.vertical-menu{display:none!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BiitPaginatorComponent, selector: "biit-paginator" }, { kind: "component", type: i4.BiitMultiselectComponent, selector: "biit-multiselect", inputs: ["title", "type", "icon", "label", "value", "descriptionField", "description", "data", "primitive", "compact", "disabled", "required", "sort-asc", "sort-desc"], outputs: ["onCreate"] }, { kind: "component", type: i4.BiitInputTextComponent, selector: "biit-input-text", inputs: ["placeholder", "error", "description", "info", "type", "icon", "fieldName", "disabled", "required", "readonly", "min", "max", "minLength", "maxLength", "regEx"], outputs: ["onActionPerformed"] }, { kind: "component", type: i4.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"], outputs: ["onValueChange"] }, { kind: "component", type: i5$1.BiitProgressBarComponent, selector: "biit-progress-bar", inputs: ["type", "_value", "value"] }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i1$1.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i8.BiitButtonComponent, selector: "button[biit-button]" }, { kind: "directive", type: i8.BiitButtonTertiaryDirective, selector: "[tertiary]" }, { kind: "component", type: i8.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }, { kind: "component", type: i9.BiitVerticalMenuComponent, selector: "biit-vertical-menu" }, { kind: "directive", type: BiitTableSelectableDirective, selector: "[selectable]" }, { kind: "directive", type: BiitTableSortableDirective, selector: "[sortable]" }, { kind: "pipe", type: i10.LocalizedDatePipe, name: "localizedDate" }, { kind: "pipe", type: VisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: ColumnDataPipe, name: "columnData" }] });
|
|
565
|
+
}], queries: [{ propertyName: "actionsTpl", first: true, predicate: ["actions"], descendants: true }], ngImport: i0, template: "<div class=\"canvas\" *transloco=\"let t\">\n <div class=\"header\" *ngIf=\"!hideHeader\">\n <div class=\"buttons\" id=\"menu\">\n <biit-vertical-menu *ngIf=\"actionsTpl\" class=\"vertical-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </biit-vertical-menu>\n <div *ngIf=\"actionsTpl\" class=\"horizontal-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </div>\n <div *ngIf=\"!actionsTpl\">\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"forms\">\n <biit-input-text id=\"search-field\" [(ngModel)]=\"search\"\n (onActionPerformed)=\"\n paginator.currentPage = 1;\n onTableUpdate(true);\n \"\n (focusout)=\"resetInputValue()\"\n (ngModelChange)=\"onTableUpdate()\"\n icon=\"search\"\n [placeholder]=\"t('table.search')\"\n ></biit-input-text>\n <biit-multiselect id=\"column-selector\" [ngModel]=\"columns | visibleColumns\"\n (ngModelChange)=\"setColumnVisibility($event)\"\n [data]=\"columns\"\n label=\"label\"\n value=\"visible\"\n [title]=\"t('table.column-selector')\"\n [type]=\"BiitMultiselectType.ICON\"\n [compact]=\"true\"\n ></biit-multiselect>\n </div>\n </div>\n\n <div class=\"content\">\n <div *ngIf=\"loading\" style=\"position: relative\">\n <biit-progress-bar style=\"position: absolute; top: 2.1rem; left: 0.2rem; width: calc(100% - 0.1rem);\"></biit-progress-bar>\n </div>\n <table>\n <thead>\n <tr>\n <th *ngIf=\"isSelectable || isSelectableSingle\" class=\"select\">\n <biit-checkbox *ngIf=\"isSelectable\"\n [ngModel]=\"data?.data.length && selectedRows.size == data?.data.length\"\n (ngModelChange)=\"$event ? data?.data.forEach(selectedRows.add, selectedRows) : selectedRows.clear()\"\n ></biit-checkbox>\n </th>\n <th *ngFor=\"let column of columns, index as i\"\n [class.sortable]=\"isSortable\"\n [style.display]=\"!column.visible ? 'none' : null\"\n [style.width]=\"column.width ? column.width + 'px' : ''\"\n (click)=\"isSortable ? onTableSort(column) : false\"\n >\n <div class=\"label\">\n {{column.label}}\n </div>\n <biit-icon *ngIf=\"isSortable\"\n [name]=\"sorting?.name == column.name ? 'right_arrow' : 'up_down_arrow'\"\n [pathStyle]=\"{fill: '#FFFFFF'}\"\n class=\"sort\"\n [class.asc]=\"sorting?.name == column.name && sorting?.order == 'asc'\"\n [class.desc]=\"sorting?.name == column.name && sorting?.order == 'desc'\"\n ></biit-icon>\n <div class=\"column-resizer\"\n (mousedown)=\"resizeColumn($event, column, i)\"\n (click)=\"$event.preventDefault();\n $event.stopPropagation();\n $event.stopImmediatePropagation();\"\n ></div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data?.data; index as i\"\n [class.selectable]=\"isSelectable\"\n [class.selected]=\"selectedRows.has(item)\"\n (pointerdown)=\"emitRowClick(item)\"\n >\n <td *ngIf=\"isSelectable || isSelectableSingle\" class=\"select\">\n <biit-checkbox id=\"select{{i}}\"\n [ngModel]=\"selectedRows.has(item)\"\n (ngModelChange)=\"selectRow(item, true)\"\n ></biit-checkbox>\n </td>\n <td *ngFor=\"let column of columns\"\n (pointerdown)=\"selectRow(item, $event.ctrlKey)\"\n [style.display]=\"!column.visible ? 'none' : null\"\n [style.width]=\"column.width ? column.width + 'px' : null\"\n >\n <div *ngIf=\"column.format == BiitTableColumnFormat.DEFAULT\">\n {{item | columnData: column.name}}\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.BOOLEAN\">\n {{(item | columnData: column.name) ? t('table.yes') : t('table.no') }}\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.DATE\">\n {{(item | columnData: column.name) | localizedDate}}\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.BUTTON\"\n style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n <button biit-button tertiary\n (pointerdown)=\"emitCellAction(item, column.name, $event)\">\n {{item | columnData: column.name}}\n </button>\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.ICON_BUTTON\"\n style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n <button biit-icon [icon]=\"item | columnData: column.name\"\n (pointerdown)=\"emitCellAction(item, column.name, $event);\"></button>\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.ICON\"\n style=\"width: auto; height: 1.05rem;\">\n <biit-icon [name]=\"item | columnData: column.name\"></biit-icon>\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.CUSTOM_HTML\"\n style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n <div [innerHTML]=\"item | columnData: column.name\"></div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n\n </div>\n\n <div class=\"footer\" *ngIf=\"!hideFooter\">\n <div class=\"selected\">\n <a style=\"margin-right: 0.7rem\" *ngIf=\"selectedRows.size\">Selected:</a>\n <a *ngIf=\"selectedRows.size\">{{selectedRows.size}}</a>\n </div>\n <biit-paginator *ngIf=\"paginator\"\n [ngModel]=\"paginator\" (ngModelChange)=\"paginator = $event; onTableUpdate()\"></biit-paginator>\n </div>\n</div>\n", styles: [".canvas{height:100%;display:flex;flex-direction:column;box-sizing:border-box;row-gap:1.05rem}.canvas>.header{display:flex;flex-direction:row;justify-content:space-between}.canvas>.header>*{display:flex;flex-direction:row}.canvas>.header>.buttons ::ng-deep>*{height:2.1rem;min-width:2.1rem;display:flex;align-items:center;justify-content:center}.canvas>.header>.forms{column-gap:.7rem}.canvas>.header>.forms ::ng-deep biit-input-text .biit-input{min-height:0;padding-top:0}.canvas>.content{overflow:auto;display:flex;flex-grow:1;flex-direction:column;box-sizing:border-box}.canvas>.content *{box-sizing:border-box}.canvas>.content>table{width:100%;height:-moz-fit-content;height:fit-content;margin-top:-.2rem;table-layout:fixed;border-spacing:.2rem}.canvas>.content>table thead{text-transform:uppercase;position:sticky;top:0;background:var(--chart-background);z-index:1}.canvas>.content>table thead th{position:relative;height:2.1rem;color:var(--chart-background);font-weight:500;background:var(--table-header-color);padding:.4rem 2.4rem;text-align:center;text-align:-moz-center;text-align:-webkit-center;cursor:default}.canvas>.content>table thead th.select{width:2.1rem;padding:.3rem .7rem;background:var(--chart-background)}.canvas>.content>table thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.canvas>.content>table thead th>.column-resizer{position:absolute;right:-.2rem;top:0;height:100%;width:.6rem;cursor:col-resize}.canvas>.content>table thead th>.label{width:-moz-fit-content;width:fit-content}.canvas>.content>table thead th>.sort{position:absolute;width:.7rem;height:.7rem;top:calc(50% - .35rem);right:.7rem;pointer-events:none}.canvas>.content>table thead th>.sort.asc{rotate:-90deg}.canvas>.content>table thead th>.sort.desc{rotate:90deg}.canvas>.content>table tbody tr{cursor:default}.canvas>.content>table tbody tr.selected{background:var(--main-background)}.canvas>.content>table tbody tr:hover{background:var(--hover-color)}.canvas>.content>table tbody tr:hover.selectable{cursor:pointer}.canvas>.content>table tbody tr>td{height:2.1rem;border-bottom:.2rem solid var(--table-border-color);padding:.3rem .7rem;overflow:hidden}.canvas>.content>table tbody tr>td.select{width:2.1rem;padding:.3rem .7rem}.canvas>.footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.canvas>.footer>biit-paginator{width:50%;display:block}@media screen and (max-width: 600px){.page-size-selector,.horizontal-menu{display:none!important}}@media screen and (min-width: 601px){.vertical-menu{display:none!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BiitPaginatorComponent, selector: "biit-paginator" }, { kind: "component", type: i4.BiitMultiselectComponent, selector: "biit-multiselect", inputs: ["title", "type", "icon", "label", "value", "descriptionField", "description", "data", "primitive", "compact", "disabled", "required", "sort-asc", "sort-desc"], outputs: ["onCreate"] }, { kind: "component", type: i4.BiitInputTextComponent, selector: "biit-input-text", inputs: ["placeholder", "error", "description", "info", "type", "icon", "fieldName", "disabled", "required", "readonly", "min", "max", "minLength", "maxLength", "regEx"], outputs: ["onActionPerformed"] }, { kind: "component", type: i4.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"], outputs: ["onValueChange"] }, { kind: "component", type: i5$1.BiitProgressBarComponent, selector: "biit-progress-bar", inputs: ["type", "_value", "value"] }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i1$1.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i8.BiitButtonComponent, selector: "button[biit-button]" }, { kind: "directive", type: i8.BiitButtonTertiaryDirective, selector: "[tertiary]" }, { kind: "component", type: i8.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }, { kind: "component", type: i9.BiitVerticalMenuComponent, selector: "biit-vertical-menu" }, { kind: "directive", type: BiitTableSelectableDirective, selector: "[selectable]" }, { kind: "directive", type: BiitTableSortableDirective, selector: "[sortable]" }, { kind: "pipe", type: i10.LocalizedDatePipe, name: "localizedDate" }, { kind: "pipe", type: VisibleColumnsPipe, name: "visibleColumns" }, { kind: "pipe", type: ColumnDataPipe, name: "columnData" }] });
|
|
566
566
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitTableComponent, decorators: [{
|
|
567
567
|
type: Component,
|
|
568
568
|
args: [{ selector: 'biit-table', providers: [{
|
|
569
569
|
provide: TRANSLOCO_SCOPE,
|
|
570
570
|
useValue: { scope: 'wizardry-theme/table', alias: "table" }
|
|
571
|
-
}], template: "<div class=\"canvas\" *transloco=\"let t\">\n <div class=\"header\" *ngIf=\"!hideHeader\">\n <div class=\"buttons\" id=\"menu\">\n <biit-vertical-menu *ngIf=\"actionsTpl\" class=\"vertical-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </biit-vertical-menu>\n <div *ngIf=\"actionsTpl\" class=\"horizontal-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </div>\n <div *ngIf=\"!actionsTpl\">\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"forms\">\n <biit-input-text id=\"search-field\" [(ngModel)]=\"search\"\n (onActionPerformed)=\"\n paginator.currentPage = 1;\n onTableUpdate(true);\n \"\n (focusout)=\"resetInputValue()\"\n (ngModelChange)=\"onTableUpdate()\"\n icon=\"search\"\n [placeholder]=\"t('table.search')\"\n ></biit-input-text>\n <biit-multiselect id=\"column-selector\" [ngModel]=\"columns | visibleColumns\"\n (ngModelChange)=\"setColumnVisibility($event)\"\n [data]=\"columns\"\n label=\"label\"\n value=\"visible\"\n [title]=\"t('table.column-selector')\"\n [type]=\"BiitMultiselectType.ICON\"\n [compact]=\"true\"\n ></biit-multiselect>\n </div>\n </div>\n\n <div class=\"content\">\n <div *ngIf=\"loading\" style=\"position: relative\">\n <biit-progress-bar style=\"position: absolute; top: 2.1rem; left: 0.2rem; width: calc(100% - 0.1rem);\"></biit-progress-bar>\n </div>\n <table>\n <thead>\n <tr>\n <th *ngIf=\"isSelectable || isSelectableSingle\" class=\"select\">\n <biit-checkbox *ngIf=\"isSelectable\"\n [ngModel]=\"data?.data.length && selectedRows.size == data?.data.length\"\n (ngModelChange)=\"$event ? data?.data.forEach(selectedRows.add, selectedRows) : selectedRows.clear()\"\n ></biit-checkbox>\n </th>\n <th *ngFor=\"let column of columns, index as i\"\n [class.sortable]=\"isSortable\"\n [style.display]=\"!column.visible ? 'none' : null\"\n [style.width]=\"column.width ? column.width + 'px' : ''\"\n (click)=\"isSortable ? onTableSort(column) : false\"\n >\n <div class=\"label\">\n {{column.label}}\n </div>\n <biit-icon *ngIf=\"isSortable\"\n [name]=\"sorting?.name == column.name ? 'right_arrow' : 'up_down_arrow'\"\n [pathStyle]=\"{fill: '#FFFFFF'}\"\n class=\"sort\"\n [class.asc]=\"sorting?.name == column.name && sorting?.order == 'asc'\"\n [class.desc]=\"sorting?.name == column.name && sorting?.order == 'desc'\"\n ></biit-icon>\n <div class=\"column-resizer\"\n (mousedown)=\"resizeColumn($event, column, i)\"\n (click)=\"$event.preventDefault();\n $event.stopPropagation();\n $event.stopImmediatePropagation();\"\n ></div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data?.data; index as i\"\n [class.selectable]=\"isSelectable\"\n [class.selected]=\"selectedRows.has(item)\"\n (pointerdown)=\"emitRowClick(item)\"\n >\n <td *ngIf=\"isSelectable || isSelectableSingle\" class=\"select\">\n <biit-checkbox id=\"select{{i}}\"\n [ngModel]=\"selectedRows.has(item)\"\n (ngModelChange)=\"selectRow(item, true)\"\n ></biit-checkbox>\n </td>\n <td *ngFor=\"let column of columns\"\n (pointerdown)=\"selectRow(item, $event.ctrlKey)\"\n [style.display]=\"!column.visible ? 'none' : null\"\n [style.width]=\"column.width ? column.width + 'px' : null\"\n >\n <div *ngIf=\"column.format == BiitTableColumnFormat.DEFAULT\">\n {{item | columnData: column.name}}\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.BOOLEAN\">\n {{(item | columnData: column.name) ? t('table.yes') : t('table.no') }}\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.DATE\">\n {{(item | columnData: column.name) | localizedDate}}\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.BUTTON\"\n style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n <button biit-button tertiary\n (pointerdown)=\"emitCellAction(item, column.name, $event)\">\n {{item | columnData: column.name}}\n </button>\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.ICON_BUTTON\"\n style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n <button biit-icon [icon]=\"item | columnData: column.name\"\n (pointerdown)=\"emitCellAction(item, column.name, $event);\"></button>\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.ICON\"\n style=\"width: auto; height: 1.05rem;\">\n <biit-icon [name]=\"item | columnData: column.name\"></biit-icon>\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.CUSTOM_HTML\"\n style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n <div [innerHTML]=\"item | columnData: column.name\"></div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n\n </div>\n\n <div class=\"footer\" *ngIf=\"!hideFooter\">\n <div class=\"selected\">\n <a style=\"margin-right: 0.7rem\" *ngIf=\"selectedRows.size\">Selected:</a>\n <a *ngIf=\"selectedRows.size\">{{selectedRows.size}}</a>\n </div>\n <biit-paginator *ngIf=\"paginator\"\n [ngModel]=\"paginator\" (ngModelChange)=\"paginator = $event; onTableUpdate()\"></biit-paginator>\n </div>\n</div>\n", styles: [".canvas{height:100%;display:flex;flex-direction:column;box-sizing:border-box;row-gap:1.05rem}.canvas>.header{display:flex;flex-direction:row;justify-content:space-between}.canvas>.header>*{display:flex;flex-direction:row}.canvas>.header>.buttons ::ng-deep>*{height:2.1rem;min-width:2.1rem;display:flex;align-items:center;justify-content:center}.canvas>.header>.forms{column-gap:.7rem}.canvas>.header>.forms ::ng-deep biit-input-text .biit-input{min-height:0;padding-top:0}.canvas>.content{overflow:auto;display:flex;flex-grow:1;flex-direction:column;box-sizing:border-box}.canvas>.content *{box-sizing:border-box}.canvas>.content>table{width:100%;height:-moz-fit-content;height:fit-content;margin-top:-.2rem;table-layout:fixed;border-spacing:.2rem}.canvas>.content>table thead{text-transform:uppercase;position:sticky;top:0;background:var(--
|
|
571
|
+
}], template: "<div class=\"canvas\" *transloco=\"let t\">\n <div class=\"header\" *ngIf=\"!hideHeader\">\n <div class=\"buttons\" id=\"menu\">\n <biit-vertical-menu *ngIf=\"actionsTpl\" class=\"vertical-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </biit-vertical-menu>\n <div *ngIf=\"actionsTpl\" class=\"horizontal-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </div>\n <div *ngIf=\"!actionsTpl\">\n <ng-content></ng-content>\n </div>\n </div>\n <div class=\"forms\">\n <biit-input-text id=\"search-field\" [(ngModel)]=\"search\"\n (onActionPerformed)=\"\n paginator.currentPage = 1;\n onTableUpdate(true);\n \"\n (focusout)=\"resetInputValue()\"\n (ngModelChange)=\"onTableUpdate()\"\n icon=\"search\"\n [placeholder]=\"t('table.search')\"\n ></biit-input-text>\n <biit-multiselect id=\"column-selector\" [ngModel]=\"columns | visibleColumns\"\n (ngModelChange)=\"setColumnVisibility($event)\"\n [data]=\"columns\"\n label=\"label\"\n value=\"visible\"\n [title]=\"t('table.column-selector')\"\n [type]=\"BiitMultiselectType.ICON\"\n [compact]=\"true\"\n ></biit-multiselect>\n </div>\n </div>\n\n <div class=\"content\">\n <div *ngIf=\"loading\" style=\"position: relative\">\n <biit-progress-bar style=\"position: absolute; top: 2.1rem; left: 0.2rem; width: calc(100% - 0.1rem);\"></biit-progress-bar>\n </div>\n <table>\n <thead>\n <tr>\n <th *ngIf=\"isSelectable || isSelectableSingle\" class=\"select\">\n <biit-checkbox *ngIf=\"isSelectable\"\n [ngModel]=\"data?.data.length && selectedRows.size == data?.data.length\"\n (ngModelChange)=\"$event ? data?.data.forEach(selectedRows.add, selectedRows) : selectedRows.clear()\"\n ></biit-checkbox>\n </th>\n <th *ngFor=\"let column of columns, index as i\"\n [class.sortable]=\"isSortable\"\n [style.display]=\"!column.visible ? 'none' : null\"\n [style.width]=\"column.width ? column.width + 'px' : ''\"\n (click)=\"isSortable ? onTableSort(column) : false\"\n >\n <div class=\"label\">\n {{column.label}}\n </div>\n <biit-icon *ngIf=\"isSortable\"\n [name]=\"sorting?.name == column.name ? 'right_arrow' : 'up_down_arrow'\"\n [pathStyle]=\"{fill: '#FFFFFF'}\"\n class=\"sort\"\n [class.asc]=\"sorting?.name == column.name && sorting?.order == 'asc'\"\n [class.desc]=\"sorting?.name == column.name && sorting?.order == 'desc'\"\n ></biit-icon>\n <div class=\"column-resizer\"\n (mousedown)=\"resizeColumn($event, column, i)\"\n (click)=\"$event.preventDefault();\n $event.stopPropagation();\n $event.stopImmediatePropagation();\"\n ></div>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of data?.data; index as i\"\n [class.selectable]=\"isSelectable\"\n [class.selected]=\"selectedRows.has(item)\"\n (pointerdown)=\"emitRowClick(item)\"\n >\n <td *ngIf=\"isSelectable || isSelectableSingle\" class=\"select\">\n <biit-checkbox id=\"select{{i}}\"\n [ngModel]=\"selectedRows.has(item)\"\n (ngModelChange)=\"selectRow(item, true)\"\n ></biit-checkbox>\n </td>\n <td *ngFor=\"let column of columns\"\n (pointerdown)=\"selectRow(item, $event.ctrlKey)\"\n [style.display]=\"!column.visible ? 'none' : null\"\n [style.width]=\"column.width ? column.width + 'px' : null\"\n >\n <div *ngIf=\"column.format == BiitTableColumnFormat.DEFAULT\">\n {{item | columnData: column.name}}\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.BOOLEAN\">\n {{(item | columnData: column.name) ? t('table.yes') : t('table.no') }}\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.DATE\">\n {{(item | columnData: column.name) | localizedDate}}\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.BUTTON\"\n style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n <button biit-button tertiary\n (pointerdown)=\"emitCellAction(item, column.name, $event)\">\n {{item | columnData: column.name}}\n </button>\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.ICON_BUTTON\"\n style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n <button biit-icon [icon]=\"item | columnData: column.name\"\n (pointerdown)=\"emitCellAction(item, column.name, $event);\"></button>\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.ICON\"\n style=\"width: auto; height: 1.05rem;\">\n <biit-icon [name]=\"item | columnData: column.name\"></biit-icon>\n </div>\n <div *ngIf=\"column.format == BiitTableColumnFormat.CUSTOM_HTML\"\n style=\"width: auto; text-align: -webkit-center; text-align: -moz-center;\">\n <div [innerHTML]=\"item | columnData: column.name\"></div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n\n </div>\n\n <div class=\"footer\" *ngIf=\"!hideFooter\">\n <div class=\"selected\">\n <a style=\"margin-right: 0.7rem\" *ngIf=\"selectedRows.size\">Selected:</a>\n <a *ngIf=\"selectedRows.size\">{{selectedRows.size}}</a>\n </div>\n <biit-paginator *ngIf=\"paginator\"\n [ngModel]=\"paginator\" (ngModelChange)=\"paginator = $event; onTableUpdate()\"></biit-paginator>\n </div>\n</div>\n", styles: [".canvas{height:100%;display:flex;flex-direction:column;box-sizing:border-box;row-gap:1.05rem}.canvas>.header{display:flex;flex-direction:row;justify-content:space-between}.canvas>.header>*{display:flex;flex-direction:row}.canvas>.header>.buttons ::ng-deep>*{height:2.1rem;min-width:2.1rem;display:flex;align-items:center;justify-content:center}.canvas>.header>.forms{column-gap:.7rem}.canvas>.header>.forms ::ng-deep biit-input-text .biit-input{min-height:0;padding-top:0}.canvas>.content{overflow:auto;display:flex;flex-grow:1;flex-direction:column;box-sizing:border-box}.canvas>.content *{box-sizing:border-box}.canvas>.content>table{width:100%;height:-moz-fit-content;height:fit-content;margin-top:-.2rem;table-layout:fixed;border-spacing:.2rem}.canvas>.content>table thead{text-transform:uppercase;position:sticky;top:0;background:var(--chart-background);z-index:1}.canvas>.content>table thead th{position:relative;height:2.1rem;color:var(--chart-background);font-weight:500;background:var(--table-header-color);padding:.4rem 2.4rem;text-align:center;text-align:-moz-center;text-align:-webkit-center;cursor:default}.canvas>.content>table thead th.select{width:2.1rem;padding:.3rem .7rem;background:var(--chart-background)}.canvas>.content>table thead th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.canvas>.content>table thead th>.column-resizer{position:absolute;right:-.2rem;top:0;height:100%;width:.6rem;cursor:col-resize}.canvas>.content>table thead th>.label{width:-moz-fit-content;width:fit-content}.canvas>.content>table thead th>.sort{position:absolute;width:.7rem;height:.7rem;top:calc(50% - .35rem);right:.7rem;pointer-events:none}.canvas>.content>table thead th>.sort.asc{rotate:-90deg}.canvas>.content>table thead th>.sort.desc{rotate:90deg}.canvas>.content>table tbody tr{cursor:default}.canvas>.content>table tbody tr.selected{background:var(--main-background)}.canvas>.content>table tbody tr:hover{background:var(--hover-color)}.canvas>.content>table tbody tr:hover.selectable{cursor:pointer}.canvas>.content>table tbody tr>td{height:2.1rem;border-bottom:.2rem solid var(--table-border-color);padding:.3rem .7rem;overflow:hidden}.canvas>.content>table tbody tr>td.select{width:2.1rem;padding:.3rem .7rem}.canvas>.footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.canvas>.footer>biit-paginator{width:50%;display:block}@media screen and (max-width: 600px){.page-size-selector,.horizontal-menu{display:none!important}}@media screen and (min-width: 601px){.vertical-menu{display:none!important}}\n"] }]
|
|
572
572
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { _data: [{
|
|
573
573
|
type: Input,
|
|
574
574
|
args: ['metadata']
|
|
@@ -921,10 +921,10 @@ class BiitDatatableComponent {
|
|
|
921
921
|
}
|
|
922
922
|
}
|
|
923
923
|
BiitDatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatableComponent, deps: [{ token: i1$1.BiitIconService }], target: i0.ɵɵFactoryTarget.Component });
|
|
924
|
-
BiitDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitDatatableComponent, selector: "biit-datatable", inputs: { data: "data", columns: "columns", pageSize: "pageSize", pageSizeList: "pageSizeList", loading: "loading", selectable: "selectable", singleSelection: "singleSelection", scrollbarH: "scrollbarH", hideHeader: "hideHeader", hideFooter: "hideFooter", serverSide: "serverSide", page: "page" }, outputs: { onSelection: "onSelection", onPageChange: "onPageChange" }, providers: [provideTranslocoScope({ scope: 'wizardry-theme/table', alias: 't' })], queries: [{ propertyName: "actionsTpl", first: true, predicate: ["actions"], descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<div id=\"biit-table\" class=\"table-canvas\" *transloco=\"let t\">\n <div class=\"top\" *ngIf=\"!hideHeader\">\n <div id=\"menu\" class=\"action-bar\">\n <biit-vertical-menu *ngIf=\"actionsTpl\" class=\"vertical-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </biit-vertical-menu>\n <div *ngIf=\"actionsTpl\" class=\"horizontal-menu default-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </div>\n <div class=\"default-menu\" *ngIf=\"!actionsTpl\">\n <ng-content></ng-content>\n </div>\n </div>\n <div id=\"options\" class=\"options\">\n <biit-input-text id=\"search\" #searchInput\n [ngModel]=\"search\"\n (onActionPerformed)=\"\n onFilter($event, true);\n \"\n (ngModelChange)=\"onFilter($event)\"\n (focusout)=\"searchInput.value = search\"\n icon=\"search\"\n [placeholder]=\"t('t.search')\"\n ></biit-input-text>\n <biit-multiselect id=\"column-selector\" [ngModel]=\"_columns\"\n (ngModelChange)=\"setColumnVisibility($event)\"\n [data]=\"allColumns\"\n label=\"name\"\n value=\"visible\"\n [type]=\"BiitMultiselectType.ICON\"\n [title]=\"t('t.column-selector')\"\n [compact]=\"true\"\n ></biit-multiselect>\n </div>\n </div>\n <div id=\"content\" class=\"table\">\n <biit-progress-bar *ngIf=\"loading\"></biit-progress-bar>\n <ng-container *ngIf=\"!serverSide\">\n <ngx-datatable #table\n [rows]=\"data\"\n [columns]=\"_columns\"\n [columnMode]=\"'force'\"\n [headerHeight]=\"42\"\n [footerHeight]=\"hideFooter ? 0 : 34\"\n [rowHeight]=\"'auto'\"\n [reorderable]=\"false\"\n [selectionType]=\"SelectionType.checkbox\"\n [selected]=\"selected\"\n (select)=\"onSelect($event)\"\n (activate)=\"onActivate($event)\"\n [virtualization]=\"false\"\n [scrollbarVDynamic]=\"true\"\n [limit]=\"pageSize\"\n [scrollbarH]=\"scrollbarH\"\n [messages]=\"{emptyMessage: t('t.empty-message')}\"\n >\n <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n #chkbox\n [width]=\"42\"\n [sortable]=\"false\"\n [canAutoResize]=\"false\"\n [draggable]=\"false\"\n [resizeable]=\"false\"\n [name]=\"'chkbox'\"\n >\n <ng-template\n ngx-datatable-header-template\n let-value=\"value\"\n let-allRowsSelected=\"allRowsSelected\"\n let-selectFn=\"selectFn\"\n >\n <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n </ng-template>\n <ng-template\n ngx-datatable-cell-template\n let-value=\"value\"\n let-isSelected=\"isSelected\"\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n >\n <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n </ng-template>\n </ngx-datatable-column>\n\n <ngx-datatable-column *ngFor=\"let column of _columns\"\n [name]=\"column.name\"\n [prop]=\"column.prop\"\n [checkboxable]=\"column.checkboxable\"\n [frozenLeft]=\"column.frozenLeft\"\n [frozenRight]=\"column.frozenRight\"\n [flexGrow]=\"column.flexGrow\"\n [minWidth]=\"column.minWidth\"\n [maxWidth]=\"column.maxWidth\"\n [width]=\"column.width\"\n [resizeable]=\"column.resizeable\"\n [comparator]=\"column.comparator\"\n [pipe]=\"column.pipe\"\n [sortable]=\"column.sortable\"\n [draggable]=\"column.draggable\"\n [canAutoResize]=\"column.canAutoResize\"\n [cellTemplate]=\"column.cellTemplate\"\n [ghostCellTemplate]=\"column.ghostCellTemplate\"\n [treeToggleTemplate]=\"column.treeToggleTemplate\"\n [cellClass]=\"column.cellClass\"\n [headerTemplate]=\"column.headerTemplate\"\n [headerClass]=\"column.headerClass\"\n [headerCheckboxable]=\"column.headerCheckboxable\"\n [isTreeColumn]=\"column.isTreeColumn\"\n [treeLevelIndent]=\"column.treeLevelIndent\"\n [summaryFunc]=\"column.summaryFunc\"\n [summaryTemplate]=\"column.summaryTemplate\"\n ></ngx-datatable-column>\n\n <ngx-datatable-footer id=\"datatable-footer\">\n <ng-template\n ngx-datatable-footer-template\n let-rowCount=\"rowCount\"\n let-pageSizeCurrent=\"pageSize\"\n let-selectedCount=\"selectedCount\"\n let-curPage=\"curPage\"\n let-offset=\"offset\"\n >\n <div class=\"label\">\n <span>{{ t('t.total') }}: </span><span id=\"total-number-of-items\">{{rowCount}}</span>\n <span *ngIf=\"selectedCount\"> | {{ t('t.selected') }}: </span><span *ngIf=\"selectedCount\" id=\"number-of-items-selected\">{{selectedCount}}</span>\n </div>\n <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n <biit-datatable-pager #pager\n [page]=\"curPage\"\n [size]=\"pageSizeCurrent\"\n [count]=\"rowCount\"\n [hidden]=\"!((rowCount / pageSize) > 1)\"\n (change)=\"table.onFooterPage($event)\">\n </biit-datatable-pager>\n </div>\n <div class=\"page-items\" *ngIf=\"pageSizeList\">\n <div *ngIf=\"pageSizeList?.length\">\n <span>{{ t('t.rows-per-page') }}:</span>\n <select [(ngModel)]=\"pageSize\"\n (ngModelChange)=\"pager.size = $event\">\n <option *ngFor=\"let size of pageSizeList\"\n [ngValue]=\"size\"\n >\n {{size}}\n </option>\n </select>\n </div>\n </div>\n </ng-template>\n </ngx-datatable-footer>\n </ngx-datatable>\n </ng-container>\n\n <ng-container *ngIf=\"serverSide\">\n <ngx-datatable #table\n [rows]=\"data\"\n [columns]=\"_columns\"\n [columnMode]=\"'force'\"\n [headerHeight]=\"42\"\n [footerHeight]=\"hideFooter ? 0 : 34\"\n [rowHeight]=\"'auto'\"\n [reorderable]=\"false\"\n [selectionType]=\"SelectionType.checkbox\"\n [selected]=\"selected\"\n (select)=\"onSelect($event)\"\n (activate)=\"onActivate($event)\"\n [virtualization]=\"false\"\n [scrollbarVDynamic]=\"true\"\n [scrollbarH]=\"scrollbarH\"\n [messages]=\"{emptyMessage: t('t.empty-message')}\"\n [externalPaging]=\"true\"\n [count]=\"page.totalElements\"\n [offset]=\"page.pageNumber\"\n [limit]=\"page.pageSize\"\n (page)=\"onFooterPageChange($event)\"\n >\n <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n #chkbox\n [width]=\"42\"\n [sortable]=\"false\"\n [canAutoResize]=\"false\"\n [draggable]=\"false\"\n [resizeable]=\"false\"\n [name]=\"'chkbox'\"\n >\n <ng-template\n ngx-datatable-header-template\n let-value=\"value\"\n let-allRowsSelected=\"allRowsSelected\"\n let-selectFn=\"selectFn\"\n >\n <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n </ng-template>\n <ng-template\n ngx-datatable-cell-template\n let-value=\"value\"\n let-isSelected=\"isSelected\"\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n >\n <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n </ng-template>\n </ngx-datatable-column>\n\n <ngx-datatable-column *ngFor=\"let column of _columns\"\n [name]=\"column.name\"\n [prop]=\"column.prop\"\n [checkboxable]=\"column.checkboxable\"\n [frozenLeft]=\"column.frozenLeft\"\n [frozenRight]=\"column.frozenRight\"\n [flexGrow]=\"column.flexGrow\"\n [minWidth]=\"column.minWidth\"\n [maxWidth]=\"column.maxWidth\"\n [width]=\"column.width\"\n [resizeable]=\"column.resizeable\"\n [comparator]=\"column.comparator\"\n [pipe]=\"column.pipe\"\n [sortable]=\"column.sortable\"\n [draggable]=\"column.draggable\"\n [canAutoResize]=\"column.canAutoResize\"\n [cellTemplate]=\"column.cellTemplate\"\n [ghostCellTemplate]=\"column.ghostCellTemplate\"\n [treeToggleTemplate]=\"column.treeToggleTemplate\"\n [cellClass]=\"column.cellClass\"\n [headerTemplate]=\"column.headerTemplate\"\n [headerClass]=\"column.headerClass\"\n [headerCheckboxable]=\"column.headerCheckboxable\"\n [isTreeColumn]=\"column.isTreeColumn\"\n [treeLevelIndent]=\"column.treeLevelIndent\"\n [summaryFunc]=\"column.summaryFunc\"\n [summaryTemplate]=\"column.summaryTemplate\"\n ></ngx-datatable-column>\n\n <ngx-datatable-footer>\n <ng-template\n ngx-datatable-footer-template\n let-rowCount=\"rowCount\"\n let-pageSizeCurrent=\"pageSize\"\n let-selectedCount=\"selectedCount\"\n let-curPage=\"curPage\"\n let-offset=\"offset\"\n >\n <div class=\"label\" id=\"total-elements\">\n <span>{{ t('t.total') }}: {{rowCount}}</span>\n <span *ngIf=\"selectedCount\"> | {{ t('t.selected') }}: {{selectedCount}}</span>\n </div>\n <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n <biit-datatable-pager #pager\n [page]=\"curPage\"\n [size]=\"pageSizeCurrent\"\n [count]=\"rowCount\"\n [hidden]=\"!((rowCount / pageSize) > 1)\"\n (change)=\"table.onFooterPage($event)\">\n </biit-datatable-pager>\n </div>\n <div class=\"page-items\" *ngIf=\"pageSizeList\">\n <div *ngIf=\"pageSizeList?.length\">\n <span>{{ t('t.rows-per-page') }}:</span>\n <select [(ngModel)]=\"pageSize\"\n (ngModelChange)=\"pager.size = $event\">\n <option *ngFor=\"let size of pageSizeList\"\n [ngValue]=\"size\"\n >\n {{size}}\n </option>\n </select>\n </div>\n </div>\n </ng-template>\n </ngx-datatable-footer>\n </ngx-datatable>\n </ng-container>\n </div>\n</div>\n", styles: [".table-canvas{height:100%;display:flex;flex-direction:column;gap:14px;background:var(--popup-background)}.table-canvas .top{display:flex;flex:0}.table-canvas .top .action-bar{display:flex;flex:1}.table-canvas .top .options{display:flex;flex:0}.table-canvas .table{position:relative;flex:1;min-height:0;min-width:0}.table-canvas .table biit-progress-bar{position:absolute;z-index:1;left:0;right:3px;top:42px}.table-canvas .table ::ng-deep ngx-datatable{height:100%;position:absolute;inset:0}.table-canvas .table ::ng-deep ngx-datatable>div{height:calc(100% - 42px)}.table-canvas .table ::ng-deep ngx-datatable>div>div{height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner{height:inherit}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap{height:100%!important;width:calc(100% - 3px);display:flex;align-items:center;justify-content:center;background:var(--table-header-color)}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap span{color:var(--secondary-text-color);font-size:16px;line-height:100%;font-weight:700;text-transform:uppercase}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap .sort-btn{position:absolute;right:14px}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap:has(biit-checkbox){background:var(--popup-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-body{height:100%!important;overflow-y:auto!important}.table-canvas .table ::ng-deep ngx-datatable datatable-body .empty-row{height:100%;display:flex;align-items:center;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row .datatable-body-cell-label{display:flex;align-items:center;min-height:42px;border-bottom:3px solid var(--table-header-color);width:calc(100% - 3px);padding:9px 14px;line-height:120%;height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row:hover .datatable-body-cell-label{background:var(--secondary-text-color)}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row.active .datatable-body-cell-label{background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer{position:absolute;bottom:0;background:var(--popup-background);z-index:10}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .label{flex:1 0}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination{display:flex;margin:auto;flex:0;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination biit-datatable-pager{flex:none!important}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items{flex:1 0;display:flex;justify-content:flex-end;align-items:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select{appearance:none;border:none;height:34px;min-width:34px;padding:8px 14px;text-align:end;font-size:14px;font-family:Montserrat,serif;cursor:pointer;background:var(--popup-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:focus-visible{outline:none;background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:hover{background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select *{background:var(--popup-background);padding:5px}.table-canvas .table ::ng-deep ngx-datatable:has(datatable-footer) datatable-body{height:calc(100% - 48px)!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper{height:unset!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper .datatable-row-detail{height:unset!important}.default-menu{display:flex;flex-direction:row}@media screen and (max-width: 600px){.page-items,.page-size-selector,.horizontal-menu{display:none!important}}@media screen and (min-width: 601px){.vertical-menu{display:none!important}}\n"], dependencies: [{ kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"], outputs: ["onValueChange"] }, { kind: "component", type: BiitDatatablePagerComponent, selector: "biit-datatable-pager" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i6.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i6.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i6.DataTableFooterTemplateDirective, selector: "[ngx-datatable-footer-template]" }, { kind: "directive", type: i6.DatatableFooterDirective, selector: "ngx-datatable-footer", inputs: ["footerHeight", "totalMessage", "selectedMessage", "pagerLeftArrowIcon", "pagerRightArrowIcon", "pagerPreviousIcon", "pagerNextIcon", "template"] }, { kind: "component", type: i5$1.BiitProgressBarComponent, selector: "biit-progress-bar", inputs: ["type", "_value", "value"] }, { kind: "component", type: i4.BiitMultiselectComponent, selector: "biit-multiselect", inputs: ["title", "type", "icon", "label", "value", "descriptionField", "description", "data", "primitive", "compact", "disabled", "required", "sort-asc", "sort-desc"], outputs: ["onCreate"] }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i4.BiitInputTextComponent, selector: "biit-input-text", inputs: ["placeholder", "error", "description", "info", "type", "icon", "fieldName", "disabled", "required", "readonly", "min", "max", "minLength", "maxLength", "regEx"], outputs: ["onActionPerformed"] }, { kind: "component", type: i9.BiitVerticalMenuComponent, selector: "biit-vertical-menu" }] });
|
|
924
|
+
BiitDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitDatatableComponent, selector: "biit-datatable", inputs: { data: "data", columns: "columns", pageSize: "pageSize", pageSizeList: "pageSizeList", loading: "loading", selectable: "selectable", singleSelection: "singleSelection", scrollbarH: "scrollbarH", hideHeader: "hideHeader", hideFooter: "hideFooter", serverSide: "serverSide", page: "page" }, outputs: { onSelection: "onSelection", onPageChange: "onPageChange" }, providers: [provideTranslocoScope({ scope: 'wizardry-theme/table', alias: 't' })], queries: [{ propertyName: "actionsTpl", first: true, predicate: ["actions"], descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }], ngImport: i0, template: "<div id=\"biit-table\" class=\"table-canvas\" *transloco=\"let t\">\n <div class=\"top\" *ngIf=\"!hideHeader\">\n <div id=\"menu\" class=\"action-bar\">\n <biit-vertical-menu *ngIf=\"actionsTpl\" class=\"vertical-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </biit-vertical-menu>\n <div *ngIf=\"actionsTpl\" class=\"horizontal-menu default-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </div>\n <div class=\"default-menu\" *ngIf=\"!actionsTpl\">\n <ng-content></ng-content>\n </div>\n </div>\n <div id=\"options\" class=\"options\">\n <biit-input-text id=\"search\" #searchInput\n [ngModel]=\"search\"\n (onActionPerformed)=\"\n onFilter($event, true);\n \"\n (ngModelChange)=\"onFilter($event)\"\n (focusout)=\"searchInput.value = search\"\n icon=\"search\"\n [placeholder]=\"t('t.search')\"\n ></biit-input-text>\n <biit-multiselect id=\"column-selector\" [ngModel]=\"_columns\"\n (ngModelChange)=\"setColumnVisibility($event)\"\n [data]=\"allColumns\"\n label=\"name\"\n value=\"visible\"\n [type]=\"BiitMultiselectType.ICON\"\n [title]=\"t('t.column-selector')\"\n [compact]=\"true\"\n ></biit-multiselect>\n </div>\n </div>\n <div id=\"content\" class=\"table\">\n <biit-progress-bar *ngIf=\"loading\"></biit-progress-bar>\n <ng-container *ngIf=\"!serverSide\">\n <ngx-datatable #table\n [rows]=\"data\"\n [columns]=\"_columns\"\n [columnMode]=\"'force'\"\n [headerHeight]=\"42\"\n [footerHeight]=\"hideFooter ? 0 : 34\"\n [rowHeight]=\"'auto'\"\n [reorderable]=\"false\"\n [selectionType]=\"SelectionType.checkbox\"\n [selected]=\"selected\"\n (select)=\"onSelect($event)\"\n (activate)=\"onActivate($event)\"\n [virtualization]=\"false\"\n [scrollbarVDynamic]=\"true\"\n [limit]=\"pageSize\"\n [scrollbarH]=\"scrollbarH\"\n [messages]=\"{emptyMessage: t('t.empty-message')}\"\n >\n <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n #chkbox\n [width]=\"42\"\n [sortable]=\"false\"\n [canAutoResize]=\"false\"\n [draggable]=\"false\"\n [resizeable]=\"false\"\n [name]=\"'chkbox'\"\n >\n <ng-template\n ngx-datatable-header-template\n let-value=\"value\"\n let-allRowsSelected=\"allRowsSelected\"\n let-selectFn=\"selectFn\"\n >\n <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n </ng-template>\n <ng-template\n ngx-datatable-cell-template\n let-value=\"value\"\n let-isSelected=\"isSelected\"\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n >\n <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n </ng-template>\n </ngx-datatable-column>\n\n <ngx-datatable-column *ngFor=\"let column of _columns\"\n [name]=\"column.name\"\n [prop]=\"column.prop\"\n [checkboxable]=\"column.checkboxable\"\n [frozenLeft]=\"column.frozenLeft\"\n [frozenRight]=\"column.frozenRight\"\n [flexGrow]=\"column.flexGrow\"\n [minWidth]=\"column.minWidth\"\n [maxWidth]=\"column.maxWidth\"\n [width]=\"column.width\"\n [resizeable]=\"column.resizeable\"\n [comparator]=\"column.comparator\"\n [pipe]=\"column.pipe\"\n [sortable]=\"column.sortable\"\n [draggable]=\"column.draggable\"\n [canAutoResize]=\"column.canAutoResize\"\n [cellTemplate]=\"column.cellTemplate\"\n [ghostCellTemplate]=\"column.ghostCellTemplate\"\n [treeToggleTemplate]=\"column.treeToggleTemplate\"\n [cellClass]=\"column.cellClass\"\n [headerTemplate]=\"column.headerTemplate\"\n [headerClass]=\"column.headerClass\"\n [headerCheckboxable]=\"column.headerCheckboxable\"\n [isTreeColumn]=\"column.isTreeColumn\"\n [treeLevelIndent]=\"column.treeLevelIndent\"\n [summaryFunc]=\"column.summaryFunc\"\n [summaryTemplate]=\"column.summaryTemplate\"\n ></ngx-datatable-column>\n\n <ngx-datatable-footer id=\"datatable-footer\">\n <ng-template\n ngx-datatable-footer-template\n let-rowCount=\"rowCount\"\n let-pageSizeCurrent=\"pageSize\"\n let-selectedCount=\"selectedCount\"\n let-curPage=\"curPage\"\n let-offset=\"offset\"\n >\n <div class=\"label\">\n <span>{{ t('t.total') }}: </span><span id=\"total-number-of-items\">{{rowCount}}</span>\n <span *ngIf=\"selectedCount\"> | {{ t('t.selected') }}: </span><span *ngIf=\"selectedCount\" id=\"number-of-items-selected\">{{selectedCount}}</span>\n </div>\n <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n <biit-datatable-pager #pager\n [page]=\"curPage\"\n [size]=\"pageSizeCurrent\"\n [count]=\"rowCount\"\n [hidden]=\"!((rowCount / pageSize) > 1)\"\n (change)=\"table.onFooterPage($event)\">\n </biit-datatable-pager>\n </div>\n <div class=\"page-items\" *ngIf=\"pageSizeList\">\n <div *ngIf=\"pageSizeList?.length\">\n <span>{{ t('t.rows-per-page') }}:</span>\n <select [(ngModel)]=\"pageSize\"\n (ngModelChange)=\"pager.size = $event\">\n <option *ngFor=\"let size of pageSizeList\"\n [ngValue]=\"size\"\n >\n {{size}}\n </option>\n </select>\n </div>\n </div>\n </ng-template>\n </ngx-datatable-footer>\n </ngx-datatable>\n </ng-container>\n\n <ng-container *ngIf=\"serverSide\">\n <ngx-datatable #table\n [rows]=\"data\"\n [columns]=\"_columns\"\n [columnMode]=\"'force'\"\n [headerHeight]=\"42\"\n [footerHeight]=\"hideFooter ? 0 : 34\"\n [rowHeight]=\"'auto'\"\n [reorderable]=\"false\"\n [selectionType]=\"SelectionType.checkbox\"\n [selected]=\"selected\"\n (select)=\"onSelect($event)\"\n (activate)=\"onActivate($event)\"\n [virtualization]=\"false\"\n [scrollbarVDynamic]=\"true\"\n [scrollbarH]=\"scrollbarH\"\n [messages]=\"{emptyMessage: t('t.empty-message')}\"\n [externalPaging]=\"true\"\n [count]=\"page.totalElements\"\n [offset]=\"page.pageNumber\"\n [limit]=\"page.pageSize\"\n (page)=\"onFooterPageChange($event)\"\n >\n <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n #chkbox\n [width]=\"42\"\n [sortable]=\"false\"\n [canAutoResize]=\"false\"\n [draggable]=\"false\"\n [resizeable]=\"false\"\n [name]=\"'chkbox'\"\n >\n <ng-template\n ngx-datatable-header-template\n let-value=\"value\"\n let-allRowsSelected=\"allRowsSelected\"\n let-selectFn=\"selectFn\"\n >\n <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n </ng-template>\n <ng-template\n ngx-datatable-cell-template\n let-value=\"value\"\n let-isSelected=\"isSelected\"\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n >\n <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n </ng-template>\n </ngx-datatable-column>\n\n <ngx-datatable-column *ngFor=\"let column of _columns\"\n [name]=\"column.name\"\n [prop]=\"column.prop\"\n [checkboxable]=\"column.checkboxable\"\n [frozenLeft]=\"column.frozenLeft\"\n [frozenRight]=\"column.frozenRight\"\n [flexGrow]=\"column.flexGrow\"\n [minWidth]=\"column.minWidth\"\n [maxWidth]=\"column.maxWidth\"\n [width]=\"column.width\"\n [resizeable]=\"column.resizeable\"\n [comparator]=\"column.comparator\"\n [pipe]=\"column.pipe\"\n [sortable]=\"column.sortable\"\n [draggable]=\"column.draggable\"\n [canAutoResize]=\"column.canAutoResize\"\n [cellTemplate]=\"column.cellTemplate\"\n [ghostCellTemplate]=\"column.ghostCellTemplate\"\n [treeToggleTemplate]=\"column.treeToggleTemplate\"\n [cellClass]=\"column.cellClass\"\n [headerTemplate]=\"column.headerTemplate\"\n [headerClass]=\"column.headerClass\"\n [headerCheckboxable]=\"column.headerCheckboxable\"\n [isTreeColumn]=\"column.isTreeColumn\"\n [treeLevelIndent]=\"column.treeLevelIndent\"\n [summaryFunc]=\"column.summaryFunc\"\n [summaryTemplate]=\"column.summaryTemplate\"\n ></ngx-datatable-column>\n\n <ngx-datatable-footer>\n <ng-template\n ngx-datatable-footer-template\n let-rowCount=\"rowCount\"\n let-pageSizeCurrent=\"pageSize\"\n let-selectedCount=\"selectedCount\"\n let-curPage=\"curPage\"\n let-offset=\"offset\"\n >\n <div class=\"label\" id=\"total-elements\">\n <span>{{ t('t.total') }}: {{rowCount}}</span>\n <span *ngIf=\"selectedCount\"> | {{ t('t.selected') }}: {{selectedCount}}</span>\n </div>\n <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n <biit-datatable-pager #pager\n [page]=\"curPage\"\n [size]=\"pageSizeCurrent\"\n [count]=\"rowCount\"\n [hidden]=\"!((rowCount / pageSize) > 1)\"\n (change)=\"table.onFooterPage($event)\">\n </biit-datatable-pager>\n </div>\n <div class=\"page-items\" *ngIf=\"pageSizeList\">\n <div *ngIf=\"pageSizeList?.length\">\n <span>{{ t('t.rows-per-page') }}:</span>\n <select [(ngModel)]=\"pageSize\"\n (ngModelChange)=\"pager.size = $event\">\n <option *ngFor=\"let size of pageSizeList\"\n [ngValue]=\"size\"\n >\n {{size}}\n </option>\n </select>\n </div>\n </div>\n </ng-template>\n </ngx-datatable-footer>\n </ngx-datatable>\n </ng-container>\n </div>\n</div>\n", styles: [".table-canvas{height:100%;display:flex;flex-direction:column;gap:14px;background:var(--chart-background)}.table-canvas .top{display:flex;flex:0}.table-canvas .top .action-bar{display:flex;flex:1}.table-canvas .top .options{display:flex;flex:0}.table-canvas .table{position:relative;flex:1;min-height:0;min-width:0}.table-canvas .table biit-progress-bar{position:absolute;z-index:1;left:0;right:3px;top:42px}.table-canvas .table ::ng-deep ngx-datatable{height:100%;position:absolute;inset:0}.table-canvas .table ::ng-deep ngx-datatable>div{height:calc(100% - 42px)}.table-canvas .table ::ng-deep ngx-datatable>div>div{height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner{height:inherit}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap{height:100%!important;width:calc(100% - 3px);display:flex;align-items:center;justify-content:center;background:var(--table-header-color)}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap span{color:var(--secondary-text-color);font-size:16px;line-height:100%;font-weight:700;text-transform:uppercase}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap .sort-btn{position:absolute;right:14px}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap:has(biit-checkbox){background:var(--chart-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-body{height:100%!important;overflow-y:auto!important}.table-canvas .table ::ng-deep ngx-datatable datatable-body .empty-row{height:100%;display:flex;align-items:center;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row .datatable-body-cell-label{display:flex;align-items:center;min-height:42px;border-bottom:3px solid var(--table-header-color);width:calc(100% - 3px);padding:9px 14px;line-height:120%;height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row:hover .datatable-body-cell-label{background:var(--secondary-text-color)}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row.active .datatable-body-cell-label{background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer{position:absolute;bottom:0;background:var(--chart-background);z-index:10}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .label{flex:1 0}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination{display:flex;margin:auto;flex:0;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination biit-datatable-pager{flex:none!important}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items{flex:1 0;display:flex;justify-content:flex-end;align-items:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select{appearance:none;border:none;height:34px;min-width:34px;padding:8px 14px;text-align:end;font-size:14px;font-family:Montserrat,serif;cursor:pointer;background:var(--chart-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:focus-visible{outline:none;background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:hover{background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select *{background:var(--chart-background);padding:5px}.table-canvas .table ::ng-deep ngx-datatable:has(datatable-footer) datatable-body{height:calc(100% - 48px)!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper{height:unset!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper .datatable-row-detail{height:unset!important}.default-menu{display:flex;flex-direction:row}@media screen and (max-width: 600px){.page-items,.page-size-selector,.horizontal-menu{display:none!important}}@media screen and (min-width: 601px){.vertical-menu{display:none!important}}\n"], dependencies: [{ kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"], outputs: ["onValueChange"] }, { kind: "component", type: BiitDatatablePagerComponent, selector: "biit-datatable-pager" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i6.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i6.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i6.DataTableFooterTemplateDirective, selector: "[ngx-datatable-footer-template]" }, { kind: "directive", type: i6.DatatableFooterDirective, selector: "ngx-datatable-footer", inputs: ["footerHeight", "totalMessage", "selectedMessage", "pagerLeftArrowIcon", "pagerRightArrowIcon", "pagerPreviousIcon", "pagerNextIcon", "template"] }, { kind: "component", type: i5$1.BiitProgressBarComponent, selector: "biit-progress-bar", inputs: ["type", "_value", "value"] }, { kind: "component", type: i4.BiitMultiselectComponent, selector: "biit-multiselect", inputs: ["title", "type", "icon", "label", "value", "descriptionField", "description", "data", "primitive", "compact", "disabled", "required", "sort-asc", "sort-desc"], outputs: ["onCreate"] }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i4.BiitInputTextComponent, selector: "biit-input-text", inputs: ["placeholder", "error", "description", "info", "type", "icon", "fieldName", "disabled", "required", "readonly", "min", "max", "minLength", "maxLength", "regEx"], outputs: ["onActionPerformed"] }, { kind: "component", type: i9.BiitVerticalMenuComponent, selector: "biit-vertical-menu" }] });
|
|
925
925
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatableComponent, decorators: [{
|
|
926
926
|
type: Component,
|
|
927
|
-
args: [{ selector: 'biit-datatable', providers: [provideTranslocoScope({ scope: 'wizardry-theme/table', alias: 't' })], template: "<div id=\"biit-table\" class=\"table-canvas\" *transloco=\"let t\">\n <div class=\"top\" *ngIf=\"!hideHeader\">\n <div id=\"menu\" class=\"action-bar\">\n <biit-vertical-menu *ngIf=\"actionsTpl\" class=\"vertical-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </biit-vertical-menu>\n <div *ngIf=\"actionsTpl\" class=\"horizontal-menu default-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </div>\n <div class=\"default-menu\" *ngIf=\"!actionsTpl\">\n <ng-content></ng-content>\n </div>\n </div>\n <div id=\"options\" class=\"options\">\n <biit-input-text id=\"search\" #searchInput\n [ngModel]=\"search\"\n (onActionPerformed)=\"\n onFilter($event, true);\n \"\n (ngModelChange)=\"onFilter($event)\"\n (focusout)=\"searchInput.value = search\"\n icon=\"search\"\n [placeholder]=\"t('t.search')\"\n ></biit-input-text>\n <biit-multiselect id=\"column-selector\" [ngModel]=\"_columns\"\n (ngModelChange)=\"setColumnVisibility($event)\"\n [data]=\"allColumns\"\n label=\"name\"\n value=\"visible\"\n [type]=\"BiitMultiselectType.ICON\"\n [title]=\"t('t.column-selector')\"\n [compact]=\"true\"\n ></biit-multiselect>\n </div>\n </div>\n <div id=\"content\" class=\"table\">\n <biit-progress-bar *ngIf=\"loading\"></biit-progress-bar>\n <ng-container *ngIf=\"!serverSide\">\n <ngx-datatable #table\n [rows]=\"data\"\n [columns]=\"_columns\"\n [columnMode]=\"'force'\"\n [headerHeight]=\"42\"\n [footerHeight]=\"hideFooter ? 0 : 34\"\n [rowHeight]=\"'auto'\"\n [reorderable]=\"false\"\n [selectionType]=\"SelectionType.checkbox\"\n [selected]=\"selected\"\n (select)=\"onSelect($event)\"\n (activate)=\"onActivate($event)\"\n [virtualization]=\"false\"\n [scrollbarVDynamic]=\"true\"\n [limit]=\"pageSize\"\n [scrollbarH]=\"scrollbarH\"\n [messages]=\"{emptyMessage: t('t.empty-message')}\"\n >\n <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n #chkbox\n [width]=\"42\"\n [sortable]=\"false\"\n [canAutoResize]=\"false\"\n [draggable]=\"false\"\n [resizeable]=\"false\"\n [name]=\"'chkbox'\"\n >\n <ng-template\n ngx-datatable-header-template\n let-value=\"value\"\n let-allRowsSelected=\"allRowsSelected\"\n let-selectFn=\"selectFn\"\n >\n <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n </ng-template>\n <ng-template\n ngx-datatable-cell-template\n let-value=\"value\"\n let-isSelected=\"isSelected\"\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n >\n <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n </ng-template>\n </ngx-datatable-column>\n\n <ngx-datatable-column *ngFor=\"let column of _columns\"\n [name]=\"column.name\"\n [prop]=\"column.prop\"\n [checkboxable]=\"column.checkboxable\"\n [frozenLeft]=\"column.frozenLeft\"\n [frozenRight]=\"column.frozenRight\"\n [flexGrow]=\"column.flexGrow\"\n [minWidth]=\"column.minWidth\"\n [maxWidth]=\"column.maxWidth\"\n [width]=\"column.width\"\n [resizeable]=\"column.resizeable\"\n [comparator]=\"column.comparator\"\n [pipe]=\"column.pipe\"\n [sortable]=\"column.sortable\"\n [draggable]=\"column.draggable\"\n [canAutoResize]=\"column.canAutoResize\"\n [cellTemplate]=\"column.cellTemplate\"\n [ghostCellTemplate]=\"column.ghostCellTemplate\"\n [treeToggleTemplate]=\"column.treeToggleTemplate\"\n [cellClass]=\"column.cellClass\"\n [headerTemplate]=\"column.headerTemplate\"\n [headerClass]=\"column.headerClass\"\n [headerCheckboxable]=\"column.headerCheckboxable\"\n [isTreeColumn]=\"column.isTreeColumn\"\n [treeLevelIndent]=\"column.treeLevelIndent\"\n [summaryFunc]=\"column.summaryFunc\"\n [summaryTemplate]=\"column.summaryTemplate\"\n ></ngx-datatable-column>\n\n <ngx-datatable-footer id=\"datatable-footer\">\n <ng-template\n ngx-datatable-footer-template\n let-rowCount=\"rowCount\"\n let-pageSizeCurrent=\"pageSize\"\n let-selectedCount=\"selectedCount\"\n let-curPage=\"curPage\"\n let-offset=\"offset\"\n >\n <div class=\"label\">\n <span>{{ t('t.total') }}: </span><span id=\"total-number-of-items\">{{rowCount}}</span>\n <span *ngIf=\"selectedCount\"> | {{ t('t.selected') }}: </span><span *ngIf=\"selectedCount\" id=\"number-of-items-selected\">{{selectedCount}}</span>\n </div>\n <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n <biit-datatable-pager #pager\n [page]=\"curPage\"\n [size]=\"pageSizeCurrent\"\n [count]=\"rowCount\"\n [hidden]=\"!((rowCount / pageSize) > 1)\"\n (change)=\"table.onFooterPage($event)\">\n </biit-datatable-pager>\n </div>\n <div class=\"page-items\" *ngIf=\"pageSizeList\">\n <div *ngIf=\"pageSizeList?.length\">\n <span>{{ t('t.rows-per-page') }}:</span>\n <select [(ngModel)]=\"pageSize\"\n (ngModelChange)=\"pager.size = $event\">\n <option *ngFor=\"let size of pageSizeList\"\n [ngValue]=\"size\"\n >\n {{size}}\n </option>\n </select>\n </div>\n </div>\n </ng-template>\n </ngx-datatable-footer>\n </ngx-datatable>\n </ng-container>\n\n <ng-container *ngIf=\"serverSide\">\n <ngx-datatable #table\n [rows]=\"data\"\n [columns]=\"_columns\"\n [columnMode]=\"'force'\"\n [headerHeight]=\"42\"\n [footerHeight]=\"hideFooter ? 0 : 34\"\n [rowHeight]=\"'auto'\"\n [reorderable]=\"false\"\n [selectionType]=\"SelectionType.checkbox\"\n [selected]=\"selected\"\n (select)=\"onSelect($event)\"\n (activate)=\"onActivate($event)\"\n [virtualization]=\"false\"\n [scrollbarVDynamic]=\"true\"\n [scrollbarH]=\"scrollbarH\"\n [messages]=\"{emptyMessage: t('t.empty-message')}\"\n [externalPaging]=\"true\"\n [count]=\"page.totalElements\"\n [offset]=\"page.pageNumber\"\n [limit]=\"page.pageSize\"\n (page)=\"onFooterPageChange($event)\"\n >\n <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n #chkbox\n [width]=\"42\"\n [sortable]=\"false\"\n [canAutoResize]=\"false\"\n [draggable]=\"false\"\n [resizeable]=\"false\"\n [name]=\"'chkbox'\"\n >\n <ng-template\n ngx-datatable-header-template\n let-value=\"value\"\n let-allRowsSelected=\"allRowsSelected\"\n let-selectFn=\"selectFn\"\n >\n <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n </ng-template>\n <ng-template\n ngx-datatable-cell-template\n let-value=\"value\"\n let-isSelected=\"isSelected\"\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n >\n <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n </ng-template>\n </ngx-datatable-column>\n\n <ngx-datatable-column *ngFor=\"let column of _columns\"\n [name]=\"column.name\"\n [prop]=\"column.prop\"\n [checkboxable]=\"column.checkboxable\"\n [frozenLeft]=\"column.frozenLeft\"\n [frozenRight]=\"column.frozenRight\"\n [flexGrow]=\"column.flexGrow\"\n [minWidth]=\"column.minWidth\"\n [maxWidth]=\"column.maxWidth\"\n [width]=\"column.width\"\n [resizeable]=\"column.resizeable\"\n [comparator]=\"column.comparator\"\n [pipe]=\"column.pipe\"\n [sortable]=\"column.sortable\"\n [draggable]=\"column.draggable\"\n [canAutoResize]=\"column.canAutoResize\"\n [cellTemplate]=\"column.cellTemplate\"\n [ghostCellTemplate]=\"column.ghostCellTemplate\"\n [treeToggleTemplate]=\"column.treeToggleTemplate\"\n [cellClass]=\"column.cellClass\"\n [headerTemplate]=\"column.headerTemplate\"\n [headerClass]=\"column.headerClass\"\n [headerCheckboxable]=\"column.headerCheckboxable\"\n [isTreeColumn]=\"column.isTreeColumn\"\n [treeLevelIndent]=\"column.treeLevelIndent\"\n [summaryFunc]=\"column.summaryFunc\"\n [summaryTemplate]=\"column.summaryTemplate\"\n ></ngx-datatable-column>\n\n <ngx-datatable-footer>\n <ng-template\n ngx-datatable-footer-template\n let-rowCount=\"rowCount\"\n let-pageSizeCurrent=\"pageSize\"\n let-selectedCount=\"selectedCount\"\n let-curPage=\"curPage\"\n let-offset=\"offset\"\n >\n <div class=\"label\" id=\"total-elements\">\n <span>{{ t('t.total') }}: {{rowCount}}</span>\n <span *ngIf=\"selectedCount\"> | {{ t('t.selected') }}: {{selectedCount}}</span>\n </div>\n <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n <biit-datatable-pager #pager\n [page]=\"curPage\"\n [size]=\"pageSizeCurrent\"\n [count]=\"rowCount\"\n [hidden]=\"!((rowCount / pageSize) > 1)\"\n (change)=\"table.onFooterPage($event)\">\n </biit-datatable-pager>\n </div>\n <div class=\"page-items\" *ngIf=\"pageSizeList\">\n <div *ngIf=\"pageSizeList?.length\">\n <span>{{ t('t.rows-per-page') }}:</span>\n <select [(ngModel)]=\"pageSize\"\n (ngModelChange)=\"pager.size = $event\">\n <option *ngFor=\"let size of pageSizeList\"\n [ngValue]=\"size\"\n >\n {{size}}\n </option>\n </select>\n </div>\n </div>\n </ng-template>\n </ngx-datatable-footer>\n </ngx-datatable>\n </ng-container>\n </div>\n</div>\n", styles: [".table-canvas{height:100%;display:flex;flex-direction:column;gap:14px;background:var(--popup-background)}.table-canvas .top{display:flex;flex:0}.table-canvas .top .action-bar{display:flex;flex:1}.table-canvas .top .options{display:flex;flex:0}.table-canvas .table{position:relative;flex:1;min-height:0;min-width:0}.table-canvas .table biit-progress-bar{position:absolute;z-index:1;left:0;right:3px;top:42px}.table-canvas .table ::ng-deep ngx-datatable{height:100%;position:absolute;inset:0}.table-canvas .table ::ng-deep ngx-datatable>div{height:calc(100% - 42px)}.table-canvas .table ::ng-deep ngx-datatable>div>div{height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner{height:inherit}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap{height:100%!important;width:calc(100% - 3px);display:flex;align-items:center;justify-content:center;background:var(--table-header-color)}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap span{color:var(--secondary-text-color);font-size:16px;line-height:100%;font-weight:700;text-transform:uppercase}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap .sort-btn{position:absolute;right:14px}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap:has(biit-checkbox){background:var(--popup-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-body{height:100%!important;overflow-y:auto!important}.table-canvas .table ::ng-deep ngx-datatable datatable-body .empty-row{height:100%;display:flex;align-items:center;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row .datatable-body-cell-label{display:flex;align-items:center;min-height:42px;border-bottom:3px solid var(--table-header-color);width:calc(100% - 3px);padding:9px 14px;line-height:120%;height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row:hover .datatable-body-cell-label{background:var(--secondary-text-color)}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row.active .datatable-body-cell-label{background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer{position:absolute;bottom:0;background:var(--popup-background);z-index:10}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .label{flex:1 0}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination{display:flex;margin:auto;flex:0;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination biit-datatable-pager{flex:none!important}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items{flex:1 0;display:flex;justify-content:flex-end;align-items:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select{appearance:none;border:none;height:34px;min-width:34px;padding:8px 14px;text-align:end;font-size:14px;font-family:Montserrat,serif;cursor:pointer;background:var(--popup-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:focus-visible{outline:none;background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:hover{background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select *{background:var(--popup-background);padding:5px}.table-canvas .table ::ng-deep ngx-datatable:has(datatable-footer) datatable-body{height:calc(100% - 48px)!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper{height:unset!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper .datatable-row-detail{height:unset!important}.default-menu{display:flex;flex-direction:row}@media screen and (max-width: 600px){.page-items,.page-size-selector,.horizontal-menu{display:none!important}}@media screen and (min-width: 601px){.vertical-menu{display:none!important}}\n"] }]
|
|
927
|
+
args: [{ selector: 'biit-datatable', providers: [provideTranslocoScope({ scope: 'wizardry-theme/table', alias: 't' })], template: "<div id=\"biit-table\" class=\"table-canvas\" *transloco=\"let t\">\n <div class=\"top\" *ngIf=\"!hideHeader\">\n <div id=\"menu\" class=\"action-bar\">\n <biit-vertical-menu *ngIf=\"actionsTpl\" class=\"vertical-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </biit-vertical-menu>\n <div *ngIf=\"actionsTpl\" class=\"horizontal-menu default-menu\">\n <ng-container *ngTemplateOutlet=\"actionsTpl\"></ng-container>\n </div>\n <div class=\"default-menu\" *ngIf=\"!actionsTpl\">\n <ng-content></ng-content>\n </div>\n </div>\n <div id=\"options\" class=\"options\">\n <biit-input-text id=\"search\" #searchInput\n [ngModel]=\"search\"\n (onActionPerformed)=\"\n onFilter($event, true);\n \"\n (ngModelChange)=\"onFilter($event)\"\n (focusout)=\"searchInput.value = search\"\n icon=\"search\"\n [placeholder]=\"t('t.search')\"\n ></biit-input-text>\n <biit-multiselect id=\"column-selector\" [ngModel]=\"_columns\"\n (ngModelChange)=\"setColumnVisibility($event)\"\n [data]=\"allColumns\"\n label=\"name\"\n value=\"visible\"\n [type]=\"BiitMultiselectType.ICON\"\n [title]=\"t('t.column-selector')\"\n [compact]=\"true\"\n ></biit-multiselect>\n </div>\n </div>\n <div id=\"content\" class=\"table\">\n <biit-progress-bar *ngIf=\"loading\"></biit-progress-bar>\n <ng-container *ngIf=\"!serverSide\">\n <ngx-datatable #table\n [rows]=\"data\"\n [columns]=\"_columns\"\n [columnMode]=\"'force'\"\n [headerHeight]=\"42\"\n [footerHeight]=\"hideFooter ? 0 : 34\"\n [rowHeight]=\"'auto'\"\n [reorderable]=\"false\"\n [selectionType]=\"SelectionType.checkbox\"\n [selected]=\"selected\"\n (select)=\"onSelect($event)\"\n (activate)=\"onActivate($event)\"\n [virtualization]=\"false\"\n [scrollbarVDynamic]=\"true\"\n [limit]=\"pageSize\"\n [scrollbarH]=\"scrollbarH\"\n [messages]=\"{emptyMessage: t('t.empty-message')}\"\n >\n <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n #chkbox\n [width]=\"42\"\n [sortable]=\"false\"\n [canAutoResize]=\"false\"\n [draggable]=\"false\"\n [resizeable]=\"false\"\n [name]=\"'chkbox'\"\n >\n <ng-template\n ngx-datatable-header-template\n let-value=\"value\"\n let-allRowsSelected=\"allRowsSelected\"\n let-selectFn=\"selectFn\"\n >\n <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n </ng-template>\n <ng-template\n ngx-datatable-cell-template\n let-value=\"value\"\n let-isSelected=\"isSelected\"\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n >\n <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n </ng-template>\n </ngx-datatable-column>\n\n <ngx-datatable-column *ngFor=\"let column of _columns\"\n [name]=\"column.name\"\n [prop]=\"column.prop\"\n [checkboxable]=\"column.checkboxable\"\n [frozenLeft]=\"column.frozenLeft\"\n [frozenRight]=\"column.frozenRight\"\n [flexGrow]=\"column.flexGrow\"\n [minWidth]=\"column.minWidth\"\n [maxWidth]=\"column.maxWidth\"\n [width]=\"column.width\"\n [resizeable]=\"column.resizeable\"\n [comparator]=\"column.comparator\"\n [pipe]=\"column.pipe\"\n [sortable]=\"column.sortable\"\n [draggable]=\"column.draggable\"\n [canAutoResize]=\"column.canAutoResize\"\n [cellTemplate]=\"column.cellTemplate\"\n [ghostCellTemplate]=\"column.ghostCellTemplate\"\n [treeToggleTemplate]=\"column.treeToggleTemplate\"\n [cellClass]=\"column.cellClass\"\n [headerTemplate]=\"column.headerTemplate\"\n [headerClass]=\"column.headerClass\"\n [headerCheckboxable]=\"column.headerCheckboxable\"\n [isTreeColumn]=\"column.isTreeColumn\"\n [treeLevelIndent]=\"column.treeLevelIndent\"\n [summaryFunc]=\"column.summaryFunc\"\n [summaryTemplate]=\"column.summaryTemplate\"\n ></ngx-datatable-column>\n\n <ngx-datatable-footer id=\"datatable-footer\">\n <ng-template\n ngx-datatable-footer-template\n let-rowCount=\"rowCount\"\n let-pageSizeCurrent=\"pageSize\"\n let-selectedCount=\"selectedCount\"\n let-curPage=\"curPage\"\n let-offset=\"offset\"\n >\n <div class=\"label\">\n <span>{{ t('t.total') }}: </span><span id=\"total-number-of-items\">{{rowCount}}</span>\n <span *ngIf=\"selectedCount\"> | {{ t('t.selected') }}: </span><span *ngIf=\"selectedCount\" id=\"number-of-items-selected\">{{selectedCount}}</span>\n </div>\n <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n <biit-datatable-pager #pager\n [page]=\"curPage\"\n [size]=\"pageSizeCurrent\"\n [count]=\"rowCount\"\n [hidden]=\"!((rowCount / pageSize) > 1)\"\n (change)=\"table.onFooterPage($event)\">\n </biit-datatable-pager>\n </div>\n <div class=\"page-items\" *ngIf=\"pageSizeList\">\n <div *ngIf=\"pageSizeList?.length\">\n <span>{{ t('t.rows-per-page') }}:</span>\n <select [(ngModel)]=\"pageSize\"\n (ngModelChange)=\"pager.size = $event\">\n <option *ngFor=\"let size of pageSizeList\"\n [ngValue]=\"size\"\n >\n {{size}}\n </option>\n </select>\n </div>\n </div>\n </ng-template>\n </ngx-datatable-footer>\n </ngx-datatable>\n </ng-container>\n\n <ng-container *ngIf=\"serverSide\">\n <ngx-datatable #table\n [rows]=\"data\"\n [columns]=\"_columns\"\n [columnMode]=\"'force'\"\n [headerHeight]=\"42\"\n [footerHeight]=\"hideFooter ? 0 : 34\"\n [rowHeight]=\"'auto'\"\n [reorderable]=\"false\"\n [selectionType]=\"SelectionType.checkbox\"\n [selected]=\"selected\"\n (select)=\"onSelect($event)\"\n (activate)=\"onActivate($event)\"\n [virtualization]=\"false\"\n [scrollbarVDynamic]=\"true\"\n [scrollbarH]=\"scrollbarH\"\n [messages]=\"{emptyMessage: t('t.empty-message')}\"\n [externalPaging]=\"true\"\n [count]=\"page.totalElements\"\n [offset]=\"page.pageNumber\"\n [limit]=\"page.pageSize\"\n (page)=\"onFooterPageChange($event)\"\n >\n <ngx-datatable-column *ngIf=\"selectable && !singleSelection\"\n #chkbox\n [width]=\"42\"\n [sortable]=\"false\"\n [canAutoResize]=\"false\"\n [draggable]=\"false\"\n [resizeable]=\"false\"\n [name]=\"'chkbox'\"\n >\n <ng-template\n ngx-datatable-header-template\n let-value=\"value\"\n let-allRowsSelected=\"allRowsSelected\"\n let-selectFn=\"selectFn\"\n >\n <biit-checkbox [ngModel]=\"allRowsSelected\" (ngModelChange)=\"selectFn(!allRowsSelected)\"></biit-checkbox>\n </ng-template>\n <ng-template\n ngx-datatable-cell-template\n let-value=\"value\"\n let-isSelected=\"isSelected\"\n let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\n >\n <biit-checkbox [ngModel]=\"isSelected\" (ngModelChange)=\"onCheckboxChangeFn($event)\"></biit-checkbox>\n </ng-template>\n </ngx-datatable-column>\n\n <ngx-datatable-column *ngFor=\"let column of _columns\"\n [name]=\"column.name\"\n [prop]=\"column.prop\"\n [checkboxable]=\"column.checkboxable\"\n [frozenLeft]=\"column.frozenLeft\"\n [frozenRight]=\"column.frozenRight\"\n [flexGrow]=\"column.flexGrow\"\n [minWidth]=\"column.minWidth\"\n [maxWidth]=\"column.maxWidth\"\n [width]=\"column.width\"\n [resizeable]=\"column.resizeable\"\n [comparator]=\"column.comparator\"\n [pipe]=\"column.pipe\"\n [sortable]=\"column.sortable\"\n [draggable]=\"column.draggable\"\n [canAutoResize]=\"column.canAutoResize\"\n [cellTemplate]=\"column.cellTemplate\"\n [ghostCellTemplate]=\"column.ghostCellTemplate\"\n [treeToggleTemplate]=\"column.treeToggleTemplate\"\n [cellClass]=\"column.cellClass\"\n [headerTemplate]=\"column.headerTemplate\"\n [headerClass]=\"column.headerClass\"\n [headerCheckboxable]=\"column.headerCheckboxable\"\n [isTreeColumn]=\"column.isTreeColumn\"\n [treeLevelIndent]=\"column.treeLevelIndent\"\n [summaryFunc]=\"column.summaryFunc\"\n [summaryTemplate]=\"column.summaryTemplate\"\n ></ngx-datatable-column>\n\n <ngx-datatable-footer>\n <ng-template\n ngx-datatable-footer-template\n let-rowCount=\"rowCount\"\n let-pageSizeCurrent=\"pageSize\"\n let-selectedCount=\"selectedCount\"\n let-curPage=\"curPage\"\n let-offset=\"offset\"\n >\n <div class=\"label\" id=\"total-elements\">\n <span>{{ t('t.total') }}: {{rowCount}}</span>\n <span *ngIf=\"selectedCount\"> | {{ t('t.selected') }}: {{selectedCount}}</span>\n </div>\n <div class=\"pagination\" [style.display]=\"!((rowCount / pageSize) > 1) ? 'none' : null\">\n <biit-datatable-pager #pager\n [page]=\"curPage\"\n [size]=\"pageSizeCurrent\"\n [count]=\"rowCount\"\n [hidden]=\"!((rowCount / pageSize) > 1)\"\n (change)=\"table.onFooterPage($event)\">\n </biit-datatable-pager>\n </div>\n <div class=\"page-items\" *ngIf=\"pageSizeList\">\n <div *ngIf=\"pageSizeList?.length\">\n <span>{{ t('t.rows-per-page') }}:</span>\n <select [(ngModel)]=\"pageSize\"\n (ngModelChange)=\"pager.size = $event\">\n <option *ngFor=\"let size of pageSizeList\"\n [ngValue]=\"size\"\n >\n {{size}}\n </option>\n </select>\n </div>\n </div>\n </ng-template>\n </ngx-datatable-footer>\n </ngx-datatable>\n </ng-container>\n </div>\n</div>\n", styles: [".table-canvas{height:100%;display:flex;flex-direction:column;gap:14px;background:var(--chart-background)}.table-canvas .top{display:flex;flex:0}.table-canvas .top .action-bar{display:flex;flex:1}.table-canvas .top .options{display:flex;flex:0}.table-canvas .table{position:relative;flex:1;min-height:0;min-width:0}.table-canvas .table biit-progress-bar{position:absolute;z-index:1;left:0;right:3px;top:42px}.table-canvas .table ::ng-deep ngx-datatable{height:100%;position:absolute;inset:0}.table-canvas .table ::ng-deep ngx-datatable>div{height:calc(100% - 42px)}.table-canvas .table ::ng-deep ngx-datatable>div>div{height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner{height:inherit}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap{height:100%!important;width:calc(100% - 3px);display:flex;align-items:center;justify-content:center;background:var(--table-header-color)}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap span{color:var(--secondary-text-color);font-size:16px;line-height:100%;font-weight:700;text-transform:uppercase}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap .sort-btn{position:absolute;right:14px}.table-canvas .table ::ng-deep ngx-datatable datatable-header .datatable-header-inner .datatable-header-cell-template-wrap:has(biit-checkbox){background:var(--chart-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-body{height:100%!important;overflow-y:auto!important}.table-canvas .table ::ng-deep ngx-datatable datatable-body .empty-row{height:100%;display:flex;align-items:center;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row .datatable-body-cell-label{display:flex;align-items:center;min-height:42px;border-bottom:3px solid var(--table-header-color);width:calc(100% - 3px);padding:9px 14px;line-height:120%;height:100%}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row:hover .datatable-body-cell-label{background:var(--secondary-text-color)}.table-canvas .table ::ng-deep ngx-datatable datatable-body datatable-body-row.active .datatable-body-cell-label{background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer{position:absolute;bottom:0;background:var(--chart-background);z-index:10}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .label{flex:1 0}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination{display:flex;margin:auto;flex:0;justify-content:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .pagination biit-datatable-pager{flex:none!important}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items{flex:1 0;display:flex;justify-content:flex-end;align-items:center}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select{appearance:none;border:none;height:34px;min-width:34px;padding:8px 14px;text-align:end;font-size:14px;font-family:Montserrat,serif;cursor:pointer;background:var(--chart-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:focus-visible{outline:none;background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select:hover{background:var(--main-background)}.table-canvas .table ::ng-deep ngx-datatable datatable-footer .datatable-footer-inner .page-items select *{background:var(--chart-background);padding:5px}.table-canvas .table ::ng-deep ngx-datatable:has(datatable-footer) datatable-body{height:calc(100% - 48px)!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper{height:unset!important}::ng-deep ngx-datatable .auto-details-height .datatable-row-wrapper .datatable-row-detail{height:unset!important}.default-menu{display:flex;flex-direction:row}@media screen and (max-width: 600px){.page-items,.page-size-selector,.horizontal-menu{display:none!important}}@media screen and (min-width: 601px){.vertical-menu{display:none!important}}\n"] }]
|
|
928
928
|
}], ctorParameters: function () { return [{ type: i1$1.BiitIconService }]; }, propDecorators: { table: [{
|
|
929
929
|
type: ViewChild,
|
|
930
930
|
args: ['table']
|
|
@@ -119,10 +119,10 @@ class BiitIconButtonComponent {
|
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
121
|
BiitIconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
122
|
-
BiitIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitIconButtonComponent, selector: "button[biit-icon]", inputs: { icon: "icon", checked: "checked" }, ngImport: i0, template: "<div [class.checked]=\"checked\" style=\"display: flex;\">\n <biit-icon [name]=\"icon\"\n [pathStyle]=\"{fill: '#262626'}\"\n class=\"icon-button-svg\"\n ></biit-icon>\n <ng-content></ng-content>\n</div>\n", styles: [":host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;height:2.125em;width:2.125em}:host:hover,:host:focus-visible,:host:has(.checked){background-color:var(--main-background)}:host:active ::ng-deep biit-icon path{fill:var(--main-color)!important}:host:disabled{pointer-events:none}:host:disabled:hover,:host:disabled:focus-visible{background-color:var(--
|
|
122
|
+
BiitIconButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitIconButtonComponent, selector: "button[biit-icon]", inputs: { icon: "icon", checked: "checked" }, ngImport: i0, template: "<div [class.checked]=\"checked\" style=\"display: flex;\">\n <biit-icon [name]=\"icon\"\n [pathStyle]=\"{fill: '#262626'}\"\n class=\"icon-button-svg\"\n ></biit-icon>\n <ng-content></ng-content>\n</div>\n", styles: [":host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;height:2.125em;width:2.125em}:host:hover,:host:focus-visible,:host:has(.checked){background-color:var(--main-background)}:host:active ::ng-deep biit-icon path{fill:var(--main-color)!important}:host:disabled{pointer-events:none}:host:disabled:hover,:host:disabled:focus-visible{background-color:var(--disabled-menu-color-hover)}:host:disabled ::ng-deep biit-icon path{fill:var(--disabled-menu-color)!important}:host:has(.checked) ::ng-deep biit-icon path{fill:var(--main-color)!important}.icon-button-svg{display:inline-flex;pointer-events:none;width:1em;height:1em}\n"], dependencies: [{ kind: "component", type: i1$1.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }] });
|
|
123
123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitIconButtonComponent, decorators: [{
|
|
124
124
|
type: Component,
|
|
125
|
-
args: [{ selector: 'button[biit-icon]', template: "<div [class.checked]=\"checked\" style=\"display: flex;\">\n <biit-icon [name]=\"icon\"\n [pathStyle]=\"{fill: '#262626'}\"\n class=\"icon-button-svg\"\n ></biit-icon>\n <ng-content></ng-content>\n</div>\n", styles: [":host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;height:2.125em;width:2.125em}:host:hover,:host:focus-visible,:host:has(.checked){background-color:var(--main-background)}:host:active ::ng-deep biit-icon path{fill:var(--main-color)!important}:host:disabled{pointer-events:none}:host:disabled:hover,:host:disabled:focus-visible{background-color:var(--
|
|
125
|
+
args: [{ selector: 'button[biit-icon]', template: "<div [class.checked]=\"checked\" style=\"display: flex;\">\n <biit-icon [name]=\"icon\"\n [pathStyle]=\"{fill: '#262626'}\"\n class=\"icon-button-svg\"\n ></biit-icon>\n <ng-content></ng-content>\n</div>\n", styles: [":host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;height:2.125em;width:2.125em}:host:hover,:host:focus-visible,:host:has(.checked){background-color:var(--main-background)}:host:active ::ng-deep biit-icon path{fill:var(--main-color)!important}:host:disabled{pointer-events:none}:host:disabled:hover,:host:disabled:focus-visible{background-color:var(--disabled-menu-color-hover)}:host:disabled ::ng-deep biit-icon path{fill:var(--disabled-menu-color)!important}:host:has(.checked) ::ng-deep biit-icon path{fill:var(--main-color)!important}.icon-button-svg{display:inline-flex;pointer-events:none;width:1em;height:1em}\n"] }]
|
|
126
126
|
}], propDecorators: { icon: [{
|
|
127
127
|
type: Input
|
|
128
128
|
}], checked: [{
|
|
@@ -198,10 +198,10 @@ class BiitActionButtonComponent {
|
|
|
198
198
|
}
|
|
199
199
|
}
|
|
200
200
|
BiitActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitActionButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
201
|
-
BiitActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitActionButtonComponent, selector: "biit-action-button", inputs: { position: "position", additionalX: "additionalX", additionalY: "additionalY" }, queries: [{ propertyName: "inputButtons", predicate: BiitIconButtonComponent }], ngImport: i0, template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-menu-color: #D9D9D9;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--hover-primary-color: var(--main-color);--secondary-button-color: var(--component-color);--secondary-button-background-color: var(--main-font-color);--secondary-button-hover-background: var(--main-background);--secondary-button-active-background: var(--main-background);--quaternary-button-color: var(--main-font-color);--quaternary-button-background-color: var(--error-color);--quaternary-button-hover-background: var(--main-color);--quaternary-button-active-background: var(--main-color);--text-hover-color: #5A6473;--selected-color: #FBAEC9;--
|
|
201
|
+
BiitActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitActionButtonComponent, selector: "biit-action-button", inputs: { position: "position", additionalX: "additionalX", additionalY: "additionalY" }, queries: [{ propertyName: "inputButtons", predicate: BiitIconButtonComponent }], ngImport: i0, template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--popup-background-color: rgba(0, 0, 0, .15);--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-menu-color: #D9D9D9;--disabled-menu-color-hover: #FFFFFF;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--hover-primary-color: var(--main-color);--secondary-button-color: var(--component-color);--secondary-button-background-color: var(--main-font-color);--secondary-button-hover-background: var(--main-background);--secondary-button-active-background: var(--main-background);--quaternary-button-color: var(--main-font-color);--quaternary-button-background-color: var(--error-color);--quaternary-button-hover-background: var(--main-color);--quaternary-button-active-background: var(--main-color);--text-hover-color: #5A6473;--selected-color: #FBAEC9;--chart-background: #FFFFFF;--icon-color: var(--main-color);--table-header-color: var(--component-color);--table-border-color: var(--table-header-color);--scrollbar-color: var(--main-color)}.floating-action-button{box-sizing:border-box;position:fixed;z-index:999;opacity:50%;background:white;border:3px solid var(--component-color);display:flex;flex-direction:column;justify-content:flex-end}.floating-action-button:hover{opacity:100%}.floating-action-button:hover ::ng-deep button:not(:first-child){display:flex}.floating-action-button ::ng-deep button:not(:first-child){display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
202
202
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitActionButtonComponent, decorators: [{
|
|
203
203
|
type: Component,
|
|
204
|
-
args: [{ selector: 'biit-action-button', template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-menu-color: #D9D9D9;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--hover-primary-color: var(--main-color);--secondary-button-color: var(--component-color);--secondary-button-background-color: var(--main-font-color);--secondary-button-hover-background: var(--main-background);--secondary-button-active-background: var(--main-background);--quaternary-button-color: var(--main-font-color);--quaternary-button-background-color: var(--error-color);--quaternary-button-hover-background: var(--main-color);--quaternary-button-active-background: var(--main-color);--text-hover-color: #5A6473;--selected-color: #FBAEC9;--
|
|
204
|
+
args: [{ selector: 'biit-action-button', template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--popup-background-color: rgba(0, 0, 0, .15);--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-menu-color: #D9D9D9;--disabled-menu-color-hover: #FFFFFF;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--hover-primary-color: var(--main-color);--secondary-button-color: var(--component-color);--secondary-button-background-color: var(--main-font-color);--secondary-button-hover-background: var(--main-background);--secondary-button-active-background: var(--main-background);--quaternary-button-color: var(--main-font-color);--quaternary-button-background-color: var(--error-color);--quaternary-button-hover-background: var(--main-color);--quaternary-button-active-background: var(--main-color);--text-hover-color: #5A6473;--selected-color: #FBAEC9;--chart-background: #FFFFFF;--icon-color: var(--main-color);--table-header-color: var(--component-color);--table-border-color: var(--table-header-color);--scrollbar-color: var(--main-color)}.floating-action-button{box-sizing:border-box;position:fixed;z-index:999;opacity:50%;background:white;border:3px solid var(--component-color);display:flex;flex-direction:column;justify-content:flex-end}.floating-action-button:hover{opacity:100%}.floating-action-button:hover ::ng-deep button:not(:first-child){display:flex}.floating-action-button ::ng-deep button:not(:first-child){display:none}\n"] }]
|
|
205
205
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { position: [{
|
|
206
206
|
type: Input
|
|
207
207
|
}], additionalX: [{
|