npm - @biit-solutions/wizardry-theme - Versions diffs - 1.22.3 → 1.22.6 - Mend

@biit-solutions/wizardry-theme 1.22.3 → 1.22.6

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.

Files changed (17) hide show

package/button/biit-button/biit-button.component.d.ts CHANGED Viewed

@@ -17,6 +17,12 @@ export declare class BiitButtonTertiaryDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<BiitButtonTertiaryDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<BiitButtonTertiaryDirective, "[tertiary]", never, {}, {}, never, never, false, never>;
 }
+export declare class BiitButtonQuaternaryDirective {
+    private parent;
+    constructor(parent: BiitButtonComponent);
+    static ɵfac: i0.ɵɵFactoryDeclaration<BiitButtonQuaternaryDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BiitButtonQuaternaryDirective, "[quaternary]", never, {}, {}, never, never, false, never>;
+}
 export declare class BiitButtonComponent {
     color: string;
     constructor();

package/button/biit-button/biit-button.module.d.ts CHANGED Viewed

@@ -4,6 +4,6 @@ import * as i2 from "@angular/common";
 import * as i3 from "@angular/forms";
 export declare class BiitButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<BiitButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<BiitButtonModule, [typeof i1.BiitButtonComponent, typeof i1.BiitButtonPrimaryDirective, typeof i1.BiitButtonSecondaryDirective, typeof i1.BiitButtonTertiaryDirective], [typeof i2.CommonModule, typeof i3.FormsModule], [typeof i1.BiitButtonComponent, typeof i1.BiitButtonPrimaryDirective, typeof i1.BiitButtonSecondaryDirective, typeof i1.BiitButtonTertiaryDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<BiitButtonModule, [typeof i1.BiitButtonComponent, typeof i1.BiitButtonPrimaryDirective, typeof i1.BiitButtonSecondaryDirective, typeof i1.BiitButtonTertiaryDirective, typeof i1.BiitButtonQuaternaryDirective], [typeof i2.CommonModule, typeof i3.FormsModule], [typeof i1.BiitButtonComponent, typeof i1.BiitButtonPrimaryDirective, typeof i1.BiitButtonSecondaryDirective, typeof i1.BiitButtonTertiaryDirective, typeof i1.BiitButtonQuaternaryDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<BiitButtonModule>;
 }

package/esm2020/button/biit-action-button/biit-action-button.component.mjs CHANGED Viewed

@@ -51,10 +51,10 @@ export class BiitActionButtonComponent {
     }
 }
 BiitActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitActionButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-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-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--text-hover-color: #5A6473;--selected-color: #FBAEC9;--popup-background: #FFFFFF;--icon-color: var(--main-color);--table-header-color: var(--component-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"] }] });
+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;--popup-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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitActionButtonComponent, decorators: [{
             type: Component,
-            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-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--text-hover-color: #5A6473;--selected-color: #FBAEC9;--popup-background: #FFFFFF;--icon-color: var(--main-color);--table-header-color: var(--component-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"] }]
+            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;--popup-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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { position: [{
                 type: Input
             }], additionalX: [{

package/esm2020/button/biit-button/biit-button.component.mjs CHANGED Viewed

@@ -43,15 +43,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     selector: '[tertiary]'
                 }]
         }], ctorParameters: function () { return [{ type: BiitButtonComponent }]; } });
+export class BiitButtonQuaternaryDirective {
+    constructor(parent) {
+        this.parent = parent;
+        parent.color = 'quaternary';
+    }
+}
+BiitButtonQuaternaryDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitButtonQuaternaryDirective, deps: [{ token: BiitButtonComponent }], target: i0.ɵɵFactoryTarget.Directive });
+BiitButtonQuaternaryDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BiitButtonQuaternaryDirective, selector: "[quaternary]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitButtonQuaternaryDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[quaternary]'
+                }]
+        }], ctorParameters: function () { return [{ type: BiitButtonComponent }]; } });
 export class BiitButtonComponent {
     constructor() {
         this.color = 'primary';
     }
 }
 BiitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BiitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitButtonComponent, selector: "button[biit-button]", ngImport: i0, template: "<div class=\"button-base prevent-select {{color}}\">\n  <div class=\"button-content\">\n    <span #text>\n      <ng-content></ng-content>\n    </span>\n    <div *ngIf=\"color == 'tertiary'\" class=\"bar\" [ngStyle]=\"{'width.px': text.offsetWidth }\"></div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}:host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit}:host .button-base{font-size:inherit;line-height:1em;width:-moz-fit-content;width:fit-content;background:transparent;box-sizing:border-box;border:3px solid transparent;cursor:pointer}:host .button-base:not(.tertiary) .button-content{padding:.55em 1.4em}:host .button-base:not(.tertiary):active .button-content{translate:.3em .3em}:host .button-base:not(.tertiary).primary{color:var(--main-font-color);background:var(--main-color)}:host .button-base:not(.tertiary).primary:hover,:host .button-base:not(.tertiary).primary :focus-visible{background:transparent;border:3px solid var(--component-color)}:host .button-base:not(.tertiary).primary:active{background:transparent;border:3px solid var(--component-color)}:host .button-base:not(.tertiary).primary .button-content{background:var(--main-color)}:host .button-base:not(.tertiary).secondary{color:var(--component-color);border:3px solid var(--component-color)}:host .button-base:not(.tertiary).secondary:hover .button-content,:host .button-base:not(.tertiary).secondary :focus-visible .button-content{background:var(--disabled-secondary-color)}:host .button-base:not(.tertiary).secondary:active .button-content{background:var(--disabled-secondary-color)}:host .button-base.tertiary{color:var(--main-color);border:0}:host .button-base.tertiary:hover .bar,:host .button-base.tertiary :focus-visible .bar{top:.15em}:host .button-base.tertiary:active .bar{top:0}:host:focus-visible:not(.disabled) .primary{background:transparent;border:3px solid var(--component-color)}:host:focus-visible:not(.disabled) .secondary .button-content{background:var(--disabled-secondary-color)}:host:focus-visible:not(.disabled) .tertiary .bar{top:.15em}:host:disabled{pointer-events:none}:host:disabled .primary{border:3px solid var(--disabled-secondary-color)}:host:disabled .primary .button-content{background:var(--disabled-secondary-color)!important;color:var(--disabled-primary-color)}:host:disabled .secondary{border:3px solid var(--disabled-secondary-color)!important;color:var(--disabled-secondary-color)}:host:disabled .tertiary{color:var(--disabled-secondary-color)}:host:disabled .tertiary .bar{background:var(--disabled-secondary-color)}.prevent-select{-webkit-user-select:none;user-select:none}.button-content{width:-moz-fit-content;width:fit-content;text-transform:uppercase;font-weight:700;text-align:center}.bar{width:100%;height:.15em;background:var(--main-color);position:relative;margin:0 auto}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+BiitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitButtonComponent, selector: "button[biit-button]", ngImport: i0, template: "<div class=\"button-base prevent-select {{color}}\">\n  <div class=\"button-content\">\n    <span #text>\n      <ng-content></ng-content>\n    </span>\n    <div *ngIf=\"color == 'tertiary'\" class=\"bar\" [ngStyle]=\"{'width.px': text.offsetWidth }\"></div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}:host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit}:host .button-base{font-size:inherit;line-height:1em;width:-moz-fit-content;width:fit-content;background:transparent;box-sizing:border-box;border:3px solid transparent;cursor:pointer}:host .button-base:not(.tertiary) .button-content{padding:.55em 1.4em}:host .button-base:not(.tertiary):active .button-content{translate:.3em .3em}:host .button-base:not(.tertiary).primary{color:var(--main-font-color);background:var(--main-color)}:host .button-base:not(.tertiary).primary:hover,:host .button-base:not(.tertiary).primary :focus-visible{background:var(--hover-primary-color);border:3px solid var(--component-color)}:host .button-base:not(.tertiary).primary:active{background:var(--hover-primary-color);border:3px solid var(--component-color)}:host .button-base:not(.tertiary).primary .button-content{background:var(--main-color)}:host .button-base:not(.tertiary).secondary{color:var(--secondary-button-color);background:var(--secondary-button-background-color);border:3px solid var(--component-color)}:host .button-base:not(.tertiary).secondary:hover .button-content,:host .button-base:not(.tertiary).secondary :focus-visible .button-content{background:var(--secondary-button-hover-background)}:host .button-base:not(.tertiary).secondary:active .button-content{background:var(--secondary-button-active-background)}:host .button-base:not(.tertiary).quaternary{color:var(--quaternary-button-color);background:var(--quaternary-button-background-color);border:3px solid var(--quaternary-button-background-color)}:host .button-base:not(.tertiary).quaternary:hover{border:3px solid var(--component-color)}:host .button-base:not(.tertiary).quaternary:hover .button-content,:host .button-base:not(.tertiary).quaternary:hover :focus-visible .button-content{background:var(--quaternary-button-hover-background)}:host .button-base:not(.tertiary).quaternary:active{border:3px solid var(--component-color)}:host .button-base:not(.tertiary).quaternary:active .button-content{background:var(--quaternary-button-active-background)}:host .button-base:not(.tertiary).quaternary .button-content{background:var(--quaternary-button-background-color)}:host .button-base.tertiary{color:var(--main-color);border:0}:host .button-base.tertiary:hover .bar,:host .button-base.tertiary :focus-visible .bar{top:.15em}:host .button-base.tertiary:active .bar{top:0}:host:focus-visible:not(.disabled) .primary{background:transparent;border:3px solid var(--component-color)}:host:focus-visible:not(.disabled) .secondary .button-content{background:var(--disabled-secondary-color)}:host:focus-visible:not(.disabled) .tertiary .bar{top:.15em}:host:focus-visible:not(.disabled) .quaternary .button-content{background:var(--quaternary-button-background-color);border:3px solid var(--component-color)}:host:disabled{pointer-events:none}:host:disabled .primary{border:3px solid var(--disabled-secondary-color)}:host:disabled .primary .button-content{background:var(--disabled-secondary-color)!important;color:var(--disabled-primary-color)}:host:disabled .secondary{border:3px solid var(--disabled-secondary-color)!important;color:var(--disabled-secondary-color)}:host:disabled .tertiary{color:var(--disabled-secondary-color)}:host:disabled .tertiary .bar{background:var(--disabled-secondary-color)}:host:disabled .quaternary{border:3px solid var(--disabled-secondary-color)}:host:disabled .quaternary .button-content{background:var(--disabled-secondary-color)!important;color:var(--disabled-primary-color)}.prevent-select{-webkit-user-select:none;user-select:none}.button-content{width:-moz-fit-content;width:fit-content;text-transform:uppercase;font-weight:700;text-align:center}.bar{width:100%;height:.15em;background:var(--main-color);position:relative;margin:0 auto}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[biit-button]', template: "<div class=\"button-base prevent-select {{color}}\">\n  <div class=\"button-content\">\n    <span #text>\n      <ng-content></ng-content>\n    </span>\n    <div *ngIf=\"color == 'tertiary'\" class=\"bar\" [ngStyle]=\"{'width.px': text.offsetWidth }\"></div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}:host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit}:host .button-base{font-size:inherit;line-height:1em;width:-moz-fit-content;width:fit-content;background:transparent;box-sizing:border-box;border:3px solid transparent;cursor:pointer}:host .button-base:not(.tertiary) .button-content{padding:.55em 1.4em}:host .button-base:not(.tertiary):active .button-content{translate:.3em .3em}:host .button-base:not(.tertiary).primary{color:var(--main-font-color);background:var(--main-color)}:host .button-base:not(.tertiary).primary:hover,:host .button-base:not(.tertiary).primary :focus-visible{background:transparent;border:3px solid var(--component-color)}:host .button-base:not(.tertiary).primary:active{background:transparent;border:3px solid var(--component-color)}:host .button-base:not(.tertiary).primary .button-content{background:var(--main-color)}:host .button-base:not(.tertiary).secondary{color:var(--component-color);border:3px solid var(--component-color)}:host .button-base:not(.tertiary).secondary:hover .button-content,:host .button-base:not(.tertiary).secondary :focus-visible .button-content{background:var(--disabled-secondary-color)}:host .button-base:not(.tertiary).secondary:active .button-content{background:var(--disabled-secondary-color)}:host .button-base.tertiary{color:var(--main-color);border:0}:host .button-base.tertiary:hover .bar,:host .button-base.tertiary :focus-visible .bar{top:.15em}:host .button-base.tertiary:active .bar{top:0}:host:focus-visible:not(.disabled) .primary{background:transparent;border:3px solid var(--component-color)}:host:focus-visible:not(.disabled) .secondary .button-content{background:var(--disabled-secondary-color)}:host:focus-visible:not(.disabled) .tertiary .bar{top:.15em}:host:disabled{pointer-events:none}:host:disabled .primary{border:3px solid var(--disabled-secondary-color)}:host:disabled .primary .button-content{background:var(--disabled-secondary-color)!important;color:var(--disabled-primary-color)}:host:disabled .secondary{border:3px solid var(--disabled-secondary-color)!important;color:var(--disabled-secondary-color)}:host:disabled .tertiary{color:var(--disabled-secondary-color)}:host:disabled .tertiary .bar{background:var(--disabled-secondary-color)}.prevent-select{-webkit-user-select:none;user-select:none}.button-content{width:-moz-fit-content;width:fit-content;text-transform:uppercase;font-weight:700;text-align:center}.bar{width:100%;height:.15em;background:var(--main-color);position:relative;margin:0 auto}\n"] }]
+            args: [{ selector: 'button[biit-button]', template: "<div class=\"button-base prevent-select {{color}}\">\n  <div class=\"button-content\">\n    <span #text>\n      <ng-content></ng-content>\n    </span>\n    <div *ngIf=\"color == 'tertiary'\" class=\"bar\" [ngStyle]=\"{'width.px': text.offsetWidth }\"></div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}:host{background:none;color:inherit;border:none;padding:0;font:inherit;outline:inherit}:host .button-base{font-size:inherit;line-height:1em;width:-moz-fit-content;width:fit-content;background:transparent;box-sizing:border-box;border:3px solid transparent;cursor:pointer}:host .button-base:not(.tertiary) .button-content{padding:.55em 1.4em}:host .button-base:not(.tertiary):active .button-content{translate:.3em .3em}:host .button-base:not(.tertiary).primary{color:var(--main-font-color);background:var(--main-color)}:host .button-base:not(.tertiary).primary:hover,:host .button-base:not(.tertiary).primary :focus-visible{background:var(--hover-primary-color);border:3px solid var(--component-color)}:host .button-base:not(.tertiary).primary:active{background:var(--hover-primary-color);border:3px solid var(--component-color)}:host .button-base:not(.tertiary).primary .button-content{background:var(--main-color)}:host .button-base:not(.tertiary).secondary{color:var(--secondary-button-color);background:var(--secondary-button-background-color);border:3px solid var(--component-color)}:host .button-base:not(.tertiary).secondary:hover .button-content,:host .button-base:not(.tertiary).secondary :focus-visible .button-content{background:var(--secondary-button-hover-background)}:host .button-base:not(.tertiary).secondary:active .button-content{background:var(--secondary-button-active-background)}:host .button-base:not(.tertiary).quaternary{color:var(--quaternary-button-color);background:var(--quaternary-button-background-color);border:3px solid var(--quaternary-button-background-color)}:host .button-base:not(.tertiary).quaternary:hover{border:3px solid var(--component-color)}:host .button-base:not(.tertiary).quaternary:hover .button-content,:host .button-base:not(.tertiary).quaternary:hover :focus-visible .button-content{background:var(--quaternary-button-hover-background)}:host .button-base:not(.tertiary).quaternary:active{border:3px solid var(--component-color)}:host .button-base:not(.tertiary).quaternary:active .button-content{background:var(--quaternary-button-active-background)}:host .button-base:not(.tertiary).quaternary .button-content{background:var(--quaternary-button-background-color)}:host .button-base.tertiary{color:var(--main-color);border:0}:host .button-base.tertiary:hover .bar,:host .button-base.tertiary :focus-visible .bar{top:.15em}:host .button-base.tertiary:active .bar{top:0}:host:focus-visible:not(.disabled) .primary{background:transparent;border:3px solid var(--component-color)}:host:focus-visible:not(.disabled) .secondary .button-content{background:var(--disabled-secondary-color)}:host:focus-visible:not(.disabled) .tertiary .bar{top:.15em}:host:focus-visible:not(.disabled) .quaternary .button-content{background:var(--quaternary-button-background-color);border:3px solid var(--component-color)}:host:disabled{pointer-events:none}:host:disabled .primary{border:3px solid var(--disabled-secondary-color)}:host:disabled .primary .button-content{background:var(--disabled-secondary-color)!important;color:var(--disabled-primary-color)}:host:disabled .secondary{border:3px solid var(--disabled-secondary-color)!important;color:var(--disabled-secondary-color)}:host:disabled .tertiary{color:var(--disabled-secondary-color)}:host:disabled .tertiary .bar{background:var(--disabled-secondary-color)}:host:disabled .quaternary{border:3px solid var(--disabled-secondary-color)}:host:disabled .quaternary .button-content{background:var(--disabled-secondary-color)!important;color:var(--disabled-primary-color)}.prevent-select{-webkit-user-select:none;user-select:none}.button-content{width:-moz-fit-content;width:fit-content;text-transform:uppercase;font-weight:700;text-align:center}.bar{width:100%;height:.15em;background:var(--main-color);position:relative;margin:0 auto}\n"] }]
         }], ctorParameters: function () { return []; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmlpdC1idXR0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvd2l6YXJkcnktdGhlbWUvYnV0dG9uL3NyYy9iaWl0LWJ1dHRvbi9iaWl0LWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy93aXphcmRyeS10aGVtZS9idXR0b24vc3JjL2JpaXQtYnV0dG9uL2JpaXQtYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDOzs7QUFLbkQsTUFBTSxPQUFPLDBCQUEwQjtJQUNyQyxZQUFvQixNQUEyQjtRQUEzQixXQUFNLEdBQU4sTUFBTSxDQUFxQjtRQUM3QyxNQUFNLENBQUMsS0FBSyxHQUFHLFNBQVMsQ0FBQztJQUMzQixDQUFDOzt3SEFIVSwwQkFBMEI7NEdBQTFCLDBCQUEwQjs0RkFBMUIsMEJBQTBCO2tCQUh0QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxXQUFXO2lCQUN0Qjs7QUFVRCxNQUFNLE9BQU8sNEJBQTRCO0lBQ3ZDLFlBQW9CLE1BQTJCO1FBQTNCLFdBQU0sR0FBTixNQUFNLENBQXFCO1FBQzdDLE1BQU0sQ0FBQyxLQUFLLEdBQUcsV0FBVyxDQUFDO0lBQzdCLENBQUM7OzBIQUhVLDRCQUE0Qjs4R0FBNUIsNEJBQTRCOzRGQUE1Qiw0QkFBNEI7a0JBSHhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGFBQWE7aUJBQ3hCOztBQVVELE1BQU0sT0FBTywyQkFBMkI7SUFDdEMsWUFBb0IsTUFBMkI7UUFBM0IsV0FBTSxHQUFOLE1BQU0sQ0FBcUI7UUFDN0MsTUFBTSxDQUFDLEtBQUssR0FBRyxVQUFVLENBQUM7SUFDNUIsQ0FBQzs7eUhBSFUsMkJBQTJCOzZHQUEzQiwyQkFBMkI7NEZBQTNCLDJCQUEyQjtrQkFIdkMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsWUFBWTtpQkFDdkI7O0FBYUQsTUFBTSxPQUFPLG1CQUFtQjtJQUc5QjtRQUZBLFVBQUssR0FBRyxTQUFTLENBQUM7SUFFRixDQUFDOztpSEFITixtQkFBbUI7cUdBQW5CLG1CQUFtQiwyRENuQ2hDLHVSQVFBOzRGRDJCYSxtQkFBbUI7a0JBTi9CLFNBQVM7K0JBQ0UscUJBQXFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIERpcmVjdGl2ZX0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1twcmltYXJ5XSdcbn0pXG5leHBvcnQgY2xhc3MgQmlpdEJ1dHRvblByaW1hcnlEaXJlY3RpdmUge1xuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHBhcmVudDogQmlpdEJ1dHRvbkNvbXBvbmVudCkge1xuICAgIHBhcmVudC5jb2xvciA9ICdwcmltYXJ5JztcbiAgfVxufVxuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbc2Vjb25kYXJ5XSdcbn0pXG5leHBvcnQgY2xhc3MgQmlpdEJ1dHRvblNlY29uZGFyeURpcmVjdGl2ZSB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcGFyZW50OiBCaWl0QnV0dG9uQ29tcG9uZW50KSB7XG4gICAgcGFyZW50LmNvbG9yID0gJ3NlY29uZGFyeSc7XG4gIH1cbn1cblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3RlcnRpYXJ5XSdcbn0pXG5leHBvcnQgY2xhc3MgQmlpdEJ1dHRvblRlcnRpYXJ5RGlyZWN0aXZlIHtcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBwYXJlbnQ6IEJpaXRCdXR0b25Db21wb25lbnQpIHtcbiAgICBwYXJlbnQuY29sb3IgPSAndGVydGlhcnknO1xuICB9XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2J1dHRvbltiaWl0LWJ1dHRvbl0nLFxuICB0ZW1wbGF0ZVVybDogJ2JpaXQtYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJ2JpaXQtYnV0dG9uLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuXG5leHBvcnQgY2xhc3MgQmlpdEJ1dHRvbkNvbXBvbmVudCB7XG4gIGNvbG9yID0gJ3ByaW1hcnknO1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiYnV0dG9uLWJhc2UgcHJldmVudC1zZWxlY3Qge3tjb2xvcn19XCI+XG4gIDxkaXYgY2xhc3M9XCJidXR0b24tY29udGVudFwiPlxuICAgIDxzcGFuICN0ZXh0PlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvc3Bhbj5cbiAgICA8ZGl2ICpuZ0lmPVwiY29sb3IgPT0gJ3RlcnRpYXJ5J1wiIGNsYXNzPVwiYmFyXCIgW25nU3R5bGVdPVwieyd3aWR0aC5weCc6IHRleHQub2Zmc2V0V2lkdGggfVwiPjwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmlpdC1idXR0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvd2l6YXJkcnktdGhlbWUvYnV0dG9uL3NyYy9iaWl0LWJ1dHRvbi9iaWl0LWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy93aXphcmRyeS10aGVtZS9idXR0b24vc3JjL2JpaXQtYnV0dG9uL2JpaXQtYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDOzs7QUFLbkQsTUFBTSxPQUFPLDBCQUEwQjtJQUNyQyxZQUFvQixNQUEyQjtRQUEzQixXQUFNLEdBQU4sTUFBTSxDQUFxQjtRQUM3QyxNQUFNLENBQUMsS0FBSyxHQUFHLFNBQVMsQ0FBQztJQUMzQixDQUFDOzt3SEFIVSwwQkFBMEI7NEdBQTFCLDBCQUEwQjs0RkFBMUIsMEJBQTBCO2tCQUh0QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxXQUFXO2lCQUN0Qjs7QUFVRCxNQUFNLE9BQU8sNEJBQTRCO0lBQ3ZDLFlBQW9CLE1BQTJCO1FBQTNCLFdBQU0sR0FBTixNQUFNLENBQXFCO1FBQzdDLE1BQU0sQ0FBQyxLQUFLLEdBQUcsV0FBVyxDQUFDO0lBQzdCLENBQUM7OzBIQUhVLDRCQUE0Qjs4R0FBNUIsNEJBQTRCOzRGQUE1Qiw0QkFBNEI7a0JBSHhDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGFBQWE7aUJBQ3hCOztBQVVELE1BQU0sT0FBTywyQkFBMkI7SUFDdEMsWUFBb0IsTUFBMkI7UUFBM0IsV0FBTSxHQUFOLE1BQU0sQ0FBcUI7UUFDN0MsTUFBTSxDQUFDLEtBQUssR0FBRyxVQUFVLENBQUM7SUFDNUIsQ0FBQzs7eUhBSFUsMkJBQTJCOzZHQUEzQiwyQkFBMkI7NEZBQTNCLDJCQUEyQjtrQkFIdkMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsWUFBWTtpQkFDdkI7O0FBVUQsTUFBTSxPQUFPLDZCQUE2QjtJQUN4QyxZQUFvQixNQUEyQjtRQUEzQixXQUFNLEdBQU4sTUFBTSxDQUFxQjtRQUM3QyxNQUFNLENBQUMsS0FBSyxHQUFHLFlBQVksQ0FBQztJQUM5QixDQUFDOzsySEFIVSw2QkFBNkI7K0dBQTdCLDZCQUE2Qjs0RkFBN0IsNkJBQTZCO2tCQUh6QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxjQUFjO2lCQUN6Qjs7QUFhRCxNQUFNLE9BQU8sbUJBQW1CO0lBRzlCO1FBRkEsVUFBSyxHQUFHLFNBQVMsQ0FBQztJQUVGLENBQUM7O2lIQUhOLG1CQUFtQjtxR0FBbkIsbUJBQW1CLDJEQzVDaEMsdVJBUUE7NEZEb0NhLG1CQUFtQjtrQkFOL0IsU0FBUzsrQkFDRSxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgRGlyZWN0aXZlfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3ByaW1hcnldJ1xufSlcbmV4cG9ydCBjbGFzcyBCaWl0QnV0dG9uUHJpbWFyeURpcmVjdGl2ZSB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcGFyZW50OiBCaWl0QnV0dG9uQ29tcG9uZW50KSB7XG4gICAgcGFyZW50LmNvbG9yID0gJ3ByaW1hcnknO1xuICB9XG59XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tzZWNvbmRhcnldJ1xufSlcbmV4cG9ydCBjbGFzcyBCaWl0QnV0dG9uU2Vjb25kYXJ5RGlyZWN0aXZlIHtcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBwYXJlbnQ6IEJpaXRCdXR0b25Db21wb25lbnQpIHtcbiAgICBwYXJlbnQuY29sb3IgPSAnc2Vjb25kYXJ5JztcbiAgfVxufVxuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbdGVydGlhcnldJ1xufSlcbmV4cG9ydCBjbGFzcyBCaWl0QnV0dG9uVGVydGlhcnlEaXJlY3RpdmUge1xuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHBhcmVudDogQmlpdEJ1dHRvbkNvbXBvbmVudCkge1xuICAgIHBhcmVudC5jb2xvciA9ICd0ZXJ0aWFyeSc7XG4gIH1cbn1cblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW3F1YXRlcm5hcnldJ1xufSlcbmV4cG9ydCBjbGFzcyBCaWl0QnV0dG9uUXVhdGVybmFyeURpcmVjdGl2ZSB7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcGFyZW50OiBCaWl0QnV0dG9uQ29tcG9uZW50KSB7XG4gICAgcGFyZW50LmNvbG9yID0gJ3F1YXRlcm5hcnknO1xuICB9XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2J1dHRvbltiaWl0LWJ1dHRvbl0nLFxuICB0ZW1wbGF0ZVVybDogJ2JpaXQtYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJ2JpaXQtYnV0dG9uLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuXG5leHBvcnQgY2xhc3MgQmlpdEJ1dHRvbkNvbXBvbmVudCB7XG4gIGNvbG9yID0gJ3ByaW1hcnknO1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiYnV0dG9uLWJhc2UgcHJldmVudC1zZWxlY3Qge3tjb2xvcn19XCI+XG4gIDxkaXYgY2xhc3M9XCJidXR0b24tY29udGVudFwiPlxuICAgIDxzcGFuICN0ZXh0PlxuICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgIDwvc3Bhbj5cbiAgICA8ZGl2ICpuZ0lmPVwiY29sb3IgPT0gJ3RlcnRpYXJ5J1wiIGNsYXNzPVwiYmFyXCIgW25nU3R5bGVdPVwieyd3aWR0aC5weCc6IHRleHQub2Zmc2V0V2lkdGggfVwiPjwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19

package/esm2020/button/biit-button/biit-button.module.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { BiitButtonComponent, BiitButtonPrimaryDirective, BiitButtonSecondaryDirective, BiitButtonTertiaryDirective } from './biit-button.component';
+import { BiitButtonComponent, BiitButtonPrimaryDirective, BiitButtonQuaternaryDirective, BiitButtonSecondaryDirective, BiitButtonTertiaryDirective } from './biit-button.component';
 import { CommonModule } from "@angular/common";
 import { FormsModule } from '@angular/forms';
 import * as i0 from "@angular/core";
@@ -9,11 +9,13 @@ BiitButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version
 BiitButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: BiitButtonModule, declarations: [BiitButtonComponent,
         BiitButtonPrimaryDirective,
         BiitButtonSecondaryDirective,
-        BiitButtonTertiaryDirective], imports: [CommonModule,
+        BiitButtonTertiaryDirective,
+        BiitButtonQuaternaryDirective], imports: [CommonModule,
         FormsModule], exports: [BiitButtonComponent,
         BiitButtonPrimaryDirective,
         BiitButtonSecondaryDirective,
-        BiitButtonTertiaryDirective] });
+        BiitButtonTertiaryDirective,
+        BiitButtonQuaternaryDirective] });
 BiitButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitButtonModule, imports: [CommonModule,
         FormsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitButtonModule, decorators: [{
@@ -23,7 +25,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         BiitButtonComponent,
                         BiitButtonPrimaryDirective,
                         BiitButtonSecondaryDirective,
-                        BiitButtonTertiaryDirective
+                        BiitButtonTertiaryDirective,
+                        BiitButtonQuaternaryDirective
                     ],
                     imports: [
                         CommonModule,
@@ -33,8 +36,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         BiitButtonComponent,
                         BiitButtonPrimaryDirective,
                         BiitButtonSecondaryDirective,
-                        BiitButtonTertiaryDirective
+                        BiitButtonTertiaryDirective,
+                        BiitButtonQuaternaryDirective
                     ]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmlpdC1idXR0b24ubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvd2l6YXJkcnktdGhlbWUvYnV0dG9uL3NyYy9iaWl0LWJ1dHRvbi9iaWl0LWJ1dHRvbi5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQ0wsbUJBQW1CLEVBQ25CLDBCQUEwQixFQUMxQiw0QkFBNEIsRUFDNUIsMkJBQTJCLEVBQzVCLE1BQU0seUJBQXlCLENBQUM7QUFDakMsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQzdDLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQzs7QUFvQjNDLE1BQU0sT0FBTyxnQkFBZ0I7OzhHQUFoQixnQkFBZ0I7K0dBQWhCLGdCQUFnQixpQkFoQnpCLG1CQUFtQjtRQUNuQiwwQkFBMEI7UUFDMUIsNEJBQTRCO1FBQzVCLDJCQUEyQixhQUczQixZQUFZO1FBQ1osV0FBVyxhQUdYLG1CQUFtQjtRQUNuQiwwQkFBMEI7UUFDMUIsNEJBQTRCO1FBQzVCLDJCQUEyQjsrR0FHbEIsZ0JBQWdCLFlBVnpCLFlBQVk7UUFDWixXQUFXOzRGQVNGLGdCQUFnQjtrQkFsQjVCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFO3dCQUNaLG1CQUFtQjt3QkFDbkIsMEJBQTBCO3dCQUMxQiw0QkFBNEI7d0JBQzVCLDJCQUEyQjtxQkFDNUI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFlBQVk7d0JBQ1osV0FBVztxQkFDWjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsbUJBQW1CO3dCQUNuQiwwQkFBMEI7d0JBQzFCLDRCQUE0Qjt3QkFDNUIsMkJBQTJCO3FCQUM1QjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgQmlpdEJ1dHRvbkNvbXBvbmVudCxcbiAgQmlpdEJ1dHRvblByaW1hcnlEaXJlY3RpdmUsXG4gIEJpaXRCdXR0b25TZWNvbmRhcnlEaXJlY3RpdmUsXG4gIEJpaXRCdXR0b25UZXJ0aWFyeURpcmVjdGl2ZVxufSBmcm9tICcuL2JpaXQtYnV0dG9uLmNvbXBvbmVudCc7XG5pbXBvcnQge0NvbW1vbk1vZHVsZX0gZnJvbSBcIkBhbmd1bGFyL2NvbW1vblwiO1xuaW1wb3J0IHtGb3Jtc01vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBCaWl0QnV0dG9uQ29tcG9uZW50LFxuICAgIEJpaXRCdXR0b25QcmltYXJ5RGlyZWN0aXZlLFxuICAgIEJpaXRCdXR0b25TZWNvbmRhcnlEaXJlY3RpdmUsXG4gICAgQmlpdEJ1dHRvblRlcnRpYXJ5RGlyZWN0aXZlXG4gIF0sXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGUsXG4gICAgRm9ybXNNb2R1bGVcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIEJpaXRCdXR0b25Db21wb25lbnQsXG4gICAgQmlpdEJ1dHRvblByaW1hcnlEaXJlY3RpdmUsXG4gICAgQmlpdEJ1dHRvblNlY29uZGFyeURpcmVjdGl2ZSxcbiAgICBCaWl0QnV0dG9uVGVydGlhcnlEaXJlY3RpdmVcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBCaWl0QnV0dG9uTW9kdWxlIHsgfVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmlpdC1idXR0b24ubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvd2l6YXJkcnktdGhlbWUvYnV0dG9uL3NyYy9iaWl0LWJ1dHRvbi9iaWl0LWJ1dHRvbi5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN2QyxPQUFPLEVBQ0wsbUJBQW1CLEVBQ25CLDBCQUEwQixFQUFFLDZCQUE2QixFQUN6RCw0QkFBNEIsRUFDNUIsMkJBQTJCLEVBQzVCLE1BQU0seUJBQXlCLENBQUM7QUFDakMsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQzdDLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQzs7QUFzQjNDLE1BQU0sT0FBTyxnQkFBZ0I7OzhHQUFoQixnQkFBZ0I7K0dBQWhCLGdCQUFnQixpQkFsQnpCLG1CQUFtQjtRQUNuQiwwQkFBMEI7UUFDMUIsNEJBQTRCO1FBQzVCLDJCQUEyQjtRQUMzQiw2QkFBNkIsYUFHN0IsWUFBWTtRQUNaLFdBQVcsYUFHWCxtQkFBbUI7UUFDbkIsMEJBQTBCO1FBQzFCLDRCQUE0QjtRQUM1QiwyQkFBMkI7UUFDM0IsNkJBQTZCOytHQUdwQixnQkFBZ0IsWUFYekIsWUFBWTtRQUNaLFdBQVc7NEZBVUYsZ0JBQWdCO2tCQXBCNUIsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBQ1osbUJBQW1CO3dCQUNuQiwwQkFBMEI7d0JBQzFCLDRCQUE0Qjt3QkFDNUIsMkJBQTJCO3dCQUMzQiw2QkFBNkI7cUJBQzlCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUNaLFdBQVc7cUJBQ1o7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLG1CQUFtQjt3QkFDbkIsMEJBQTBCO3dCQUMxQiw0QkFBNEI7d0JBQzVCLDJCQUEyQjt3QkFDM0IsNkJBQTZCO3FCQUM5QjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7TmdNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgQmlpdEJ1dHRvbkNvbXBvbmVudCxcbiAgQmlpdEJ1dHRvblByaW1hcnlEaXJlY3RpdmUsIEJpaXRCdXR0b25RdWF0ZXJuYXJ5RGlyZWN0aXZlLFxuICBCaWl0QnV0dG9uU2Vjb25kYXJ5RGlyZWN0aXZlLFxuICBCaWl0QnV0dG9uVGVydGlhcnlEaXJlY3RpdmVcbn0gZnJvbSAnLi9iaWl0LWJ1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHtDb21tb25Nb2R1bGV9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcbmltcG9ydCB7Rm9ybXNNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbXG4gICAgQmlpdEJ1dHRvbkNvbXBvbmVudCxcbiAgICBCaWl0QnV0dG9uUHJpbWFyeURpcmVjdGl2ZSxcbiAgICBCaWl0QnV0dG9uU2Vjb25kYXJ5RGlyZWN0aXZlLFxuICAgIEJpaXRCdXR0b25UZXJ0aWFyeURpcmVjdGl2ZSxcbiAgICBCaWl0QnV0dG9uUXVhdGVybmFyeURpcmVjdGl2ZVxuICBdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuICAgIEZvcm1zTW9kdWxlXG4gIF0sXG4gIGV4cG9ydHM6IFtcbiAgICBCaWl0QnV0dG9uQ29tcG9uZW50LFxuICAgIEJpaXRCdXR0b25QcmltYXJ5RGlyZWN0aXZlLFxuICAgIEJpaXRCdXR0b25TZWNvbmRhcnlEaXJlY3RpdmUsXG4gICAgQmlpdEJ1dHRvblRlcnRpYXJ5RGlyZWN0aXZlLFxuICAgIEJpaXRCdXR0b25RdWF0ZXJuYXJ5RGlyZWN0aXZlXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgQmlpdEJ1dHRvbk1vZHVsZSB7IH1cbiJdfQ==

package/esm2020/button/biit-icon-button/biit-icon-button.component.mjs CHANGED Viewed

@@ -7,10 +7,10 @@ export class BiitIconButtonComponent {
     }
 }
 BiitIconButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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(--popup-background)}:host:disabled ::ng-deep biit-icon path{fill:var(--main-background)!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.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }] });
+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(--popup-background)}: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.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitIconButtonComponent, decorators: [{
             type: Component,
-            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(--popup-background)}:host:disabled ::ng-deep biit-icon path{fill:var(--main-background)!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"] }]
+            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(--popup-background)}: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"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], checked: [{

package/esm2020/table/biit-datatable/biit-datatable.component.mjs CHANGED Viewed

@@ -96,10 +96,10 @@ export class BiitDatatableComponent {
     }
 }
 BiitDatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatableComponent, deps: [{ token: i1.BiitIconService }], target: i0.ɵɵFactoryTarget.Component });
-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\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ 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\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ 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(--component-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(--component-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: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"] }, { kind: "component", type: i5.BiitDatatablePagerComponent, selector: "biit-datatable-pager" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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: i7.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: i8.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" }] });
+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\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ 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\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ 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: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"] }, { kind: "component", type: i5.BiitDatatablePagerComponent, selector: "biit-datatable-pager" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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: i7.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: i8.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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitDatatableComponent, decorators: [{
             type: Component,
-            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\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ 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\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ 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(--component-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(--component-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"] }]
+            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\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ 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\">&nbsp;&nbsp;|&nbsp;&nbsp;{{ 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"] }]
         }], ctorParameters: function () { return [{ type: i1.BiitIconService }]; }, propDecorators: { table: [{
                 type: ViewChild,
                 args: ['table']