@biit-solutions/wizardry-theme 1.22.21 → 1.22.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/styles/context-menu/base.scss +1 -1
- package/esm2020/button/biit-action-button/biit-action-button.component.mjs +2 -2
- package/esm2020/inputs/biit-input-text/biit-input-text.component.mjs +2 -2
- package/esm2020/inputs/biit-multiselect/biit-multiselect.component.mjs +2 -2
- package/esm2020/navigation/biit-nav-menu/biit-nav-menu.component.mjs +2 -2
- package/esm2020/popup/biit-popup/biit-popup.component.mjs +2 -2
- package/esm2020/table/biit-datatable/biit-datatable.component.mjs +2 -2
- package/fesm2015/biit-solutions-wizardry-theme-button.mjs +2 -2
- package/fesm2015/biit-solutions-wizardry-theme-button.mjs.map +1 -1
- package/fesm2015/biit-solutions-wizardry-theme-inputs.mjs +4 -4
- package/fesm2015/biit-solutions-wizardry-theme-inputs.mjs.map +1 -1
- package/fesm2015/biit-solutions-wizardry-theme-navigation.mjs +2 -2
- package/fesm2015/biit-solutions-wizardry-theme-navigation.mjs.map +1 -1
- package/fesm2015/biit-solutions-wizardry-theme-popup.mjs +2 -2
- package/fesm2015/biit-solutions-wizardry-theme-popup.mjs.map +1 -1
- package/fesm2015/biit-solutions-wizardry-theme-table.mjs +2 -2
- package/fesm2015/biit-solutions-wizardry-theme-table.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-button.mjs +2 -2
- package/fesm2020/biit-solutions-wizardry-theme-button.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-inputs.mjs +4 -4
- package/fesm2020/biit-solutions-wizardry-theme-inputs.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-navigation.mjs +2 -2
- package/fesm2020/biit-solutions-wizardry-theme-navigation.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-popup.mjs +2 -2
- package/fesm2020/biit-solutions-wizardry-theme-popup.mjs.map +1 -1
- package/fesm2020/biit-solutions-wizardry-theme-table.mjs +2 -2
- package/fesm2020/biit-solutions-wizardry-theme-table.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
--ngx-contextmenu-outline: 1px solid var(--nav-menu-border-color);
|
|
17
17
|
--ngx-contextmenu-padding: 5px 0;
|
|
18
18
|
--ngx-contextmenu-text-color: var(--nav-menu-font-color);
|
|
19
|
-
--ngx-contextmenu-text-disabled-color:
|
|
19
|
+
--ngx-contextmenu-text-disabled-color: var(--nav-menu-font-disabled-color);
|
|
20
20
|
--ngx-contextmenu-max-height: 100vh;
|
|
21
21
|
|
|
22
22
|
// Styling of context menu items
|
|
@@ -51,10 +51,10 @@ export class BiitActionButtonComponent {
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
BiitActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitActionButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
54
|
-
BiitActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitActionButtonComponent, selector: "biit-action-button", inputs: { position: "position", additionalX: "additionalX", additionalY: "additionalY" }, queries: [{ propertyName: "inputButtons", predicate: BiitIconButtonComponent }], ngImport: i0, template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--popup-background-color: rgba(0, 0, 0, .15);--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--hover-primary-color: var(--main-color);--secondary-button-color: var(--component-color);--secondary-button-background-color: var(--main-font-color);--secondary-button-hover-background: var(--main-background);--secondary-button-active-background: var(--main-background);--quaternary-button-color: var(--main-font-color);--quaternary-button-background-color: var(--error-color);--quaternary-button-hover-background: var(--main-color);--quaternary-button-active-background: var(--main-color);--text-hover-color: #5A6473;--selected-color: #FBAEC9;--chart-background: #FFFFFF;--chart-component-color: var(--component-color);--icon-color: var(--main-color);--table-header-color: var(--component-color);--table-border-color: var(--table-header-color);--table-selected-row-color: var(--main-background);--table-text-color: var(--secondary-text-color);--scrollbar-color: var(--main-color);--menu-button-active: var(--main-color);--disabled-menu-color: #D9D9D9;--disabled-menu-color-hover: #FFFFFF;--nav-menu-hover-color: #70757e;--nav-menu-text-hover-color: var(--text-hover-color);--nav-menu-active-background: var(--hover-color);--nav-menu-disable-font: var(--hover-color);--nav-menu-separator-color: var(--secondary-color);--nav-menu-font-color: var(--nav-menu-hover-color);--nav-menu-font-disabled-color: #8a909a;--nav-menu-background-color: #FFFFFF;--nav-menu-border-color: rgba(0, 0, 0, .18)}.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"] }] });
|
|
54
|
+
BiitActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitActionButtonComponent, selector: "biit-action-button", inputs: { position: "position", additionalX: "additionalX", additionalY: "additionalY" }, queries: [{ propertyName: "inputButtons", predicate: BiitIconButtonComponent }], ngImport: i0, template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--popup-background-color: rgba(0, 0, 0, .15);--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--hover-primary-color: var(--main-color);--secondary-button-color: var(--component-color);--secondary-button-background-color: var(--main-font-color);--secondary-button-hover-background: var(--main-background);--secondary-button-active-background: var(--main-background);--quaternary-button-color: var(--main-font-color);--quaternary-button-background-color: var(--error-color);--quaternary-button-hover-background: var(--main-color);--quaternary-button-active-background: var(--main-color);--text-hover-color: #5A6473;--selected-color: #FBAEC9;--chart-background: #FFFFFF;--chart-component-color: var(--component-color);--icon-color: var(--main-color);--table-header-color: var(--component-color);--table-header-text: var(--main-background);--table-border-color: var(--table-header-color);--table-selected-row-color: var(--main-background);--table-text-color: var(--secondary-text-color);--scrollbar-color: var(--main-color);--menu-button-active: var(--main-color);--disabled-menu-color: #D9D9D9;--disabled-menu-color-hover: #FFFFFF;--nav-menu-hover-color: #70757e;--nav-menu-text-hover-color: var(--text-hover-color);--nav-menu-active-background: var(--hover-color);--nav-menu-disable-font: var(--hover-color);--nav-menu-separator-color: var(--secondary-color);--nav-menu-font-color: var(--nav-menu-hover-color);--nav-menu-font-disabled-color: #8a909a;--nav-menu-background-color: #FFFFFF;--nav-menu-active-color: var(--hover-color);--nav-menu-border-color: rgba(0, 0, 0, .18);--input-text-background: var(--main-background);--input-text-focus-background: var(--main-background);--input-text-hover-background: var(--main-background);--popup-color: var(--component-color);--popup-background: #FFFFFF;--popup-error-color: var(--error-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"] }] });
|
|
55
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitActionButtonComponent, decorators: [{
|
|
56
56
|
type: Component,
|
|
57
|
-
args: [{ selector: 'biit-action-button', template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--popup-background-color: rgba(0, 0, 0, .15);--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--hover-primary-color: var(--main-color);--secondary-button-color: var(--component-color);--secondary-button-background-color: var(--main-font-color);--secondary-button-hover-background: var(--main-background);--secondary-button-active-background: var(--main-background);--quaternary-button-color: var(--main-font-color);--quaternary-button-background-color: var(--error-color);--quaternary-button-hover-background: var(--main-color);--quaternary-button-active-background: var(--main-color);--text-hover-color: #5A6473;--selected-color: #FBAEC9;--chart-background: #FFFFFF;--chart-component-color: var(--component-color);--icon-color: var(--main-color);--table-header-color: var(--component-color);--table-border-color: var(--table-header-color);--table-selected-row-color: var(--main-background);--table-text-color: var(--secondary-text-color);--scrollbar-color: var(--main-color);--menu-button-active: var(--main-color);--disabled-menu-color: #D9D9D9;--disabled-menu-color-hover: #FFFFFF;--nav-menu-hover-color: #70757e;--nav-menu-text-hover-color: var(--text-hover-color);--nav-menu-active-background: var(--hover-color);--nav-menu-disable-font: var(--hover-color);--nav-menu-separator-color: var(--secondary-color);--nav-menu-font-color: var(--nav-menu-hover-color);--nav-menu-font-disabled-color: #8a909a;--nav-menu-background-color: #FFFFFF;--nav-menu-border-color: rgba(0, 0, 0, .18)}.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"] }]
|
|
57
|
+
args: [{ selector: 'biit-action-button', template: "<div id=\"fab\" class=\"floating-action-button\" [ngStyle]=\"positionStyle()\" (pointerover)=\"hover = true;\" (pointerleave)=\"hover = false\">\n <ng-content></ng-content>\n</div>\n", styles: [":root{--main-color: #F20D5E;--popup-background-color: rgba(0, 0, 0, .15);--main-background: #D9D9D9;--body-background: #EDEDED;--light-background: #D7D7D7;--error-color: #A1093F;--warning-color: var(--main-color);--floating-background: white;--main-font-color: white;--secondary-color: #808080;--secondary-text-color: #EDEDED;--secondary-background-color: #808080;--disabled-primary-color: #808080;--disabled-secondary-color: var(--main-color);--component-color: #262626;--active-color: var(--component-color);--hover-color: #EDEDED;--hover-primary-color: var(--main-color);--secondary-button-color: var(--component-color);--secondary-button-background-color: var(--main-font-color);--secondary-button-hover-background: var(--main-background);--secondary-button-active-background: var(--main-background);--quaternary-button-color: var(--main-font-color);--quaternary-button-background-color: var(--error-color);--quaternary-button-hover-background: var(--main-color);--quaternary-button-active-background: var(--main-color);--text-hover-color: #5A6473;--selected-color: #FBAEC9;--chart-background: #FFFFFF;--chart-component-color: var(--component-color);--icon-color: var(--main-color);--table-header-color: var(--component-color);--table-header-text: var(--main-background);--table-border-color: var(--table-header-color);--table-selected-row-color: var(--main-background);--table-text-color: var(--secondary-text-color);--scrollbar-color: var(--main-color);--menu-button-active: var(--main-color);--disabled-menu-color: #D9D9D9;--disabled-menu-color-hover: #FFFFFF;--nav-menu-hover-color: #70757e;--nav-menu-text-hover-color: var(--text-hover-color);--nav-menu-active-background: var(--hover-color);--nav-menu-disable-font: var(--hover-color);--nav-menu-separator-color: var(--secondary-color);--nav-menu-font-color: var(--nav-menu-hover-color);--nav-menu-font-disabled-color: #8a909a;--nav-menu-background-color: #FFFFFF;--nav-menu-active-color: var(--hover-color);--nav-menu-border-color: rgba(0, 0, 0, .18);--input-text-background: var(--main-background);--input-text-focus-background: var(--main-background);--input-text-hover-background: var(--main-background);--popup-color: var(--component-color);--popup-background: #FFFFFF;--popup-error-color: var(--error-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"] }]
|
|
58
58
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { position: [{
|
|
59
59
|
type: Input
|
|
60
60
|
}], additionalX: [{
|
|
@@ -85,7 +85,7 @@ BiitInputTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
85
85
|
provide: TRANSLOCO_SCOPE,
|
|
86
86
|
useValue: { scope: 'wizardry-theme/inputs', alias: "inputs" }
|
|
87
87
|
}
|
|
88
|
-
], ngImport: i0, template: "<div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" *transloco=\"let t\">\n <div class=\"input-container\">\n <biit-tooltip-icon *ngIf=\"info\"\n class=\"tooltip-icon\"\n [text]=\"info\"></biit-tooltip-icon>\n <input\n class=\"input-object\"\n (keydown)=\"checkValue($event)\"\n [(ngModel)]=\"value\"\n (input)=\"value\"\n (ngModelChange)=\"onChange($event); validateInput();\"\n (keydown.enter)=\"onActionPerformed.emit(value)\"\n [type]=\"reveal ? Type.TEXT : type\" required\n [min]=\"min\"\n [max]=\"max\"\n [minlength]=\"minLength\"\n [maxlength]=\"maxLength ? maxLength : 100\"\n [attr.name]=\"fieldName\"\n [class.error]=\"error || regExError || minLengthError\"\n [class.reveal]=\"reveal\"\n >\n <div *ngIf=\"type === Type.PASSWORD || icon\" class=\"input-show-icon-container\"\n (click)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n (keydown.enter)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n tabindex=\"0\">\n <biit-icon [name]=\"type === Type.PASSWORD ? 'show' : icon\"\n class=\"input-show-icon\"\n [pathStyle]=\"{fill: reveal ? 'var(--main-color)' : 'var(--component-color)'}\"\n ></biit-icon>\n </div>\n <div class=\"input-placeholder\" [class.input-filled]=\"this.value?.toString().length\">\n {{ _placeholder }}\n <a *ngIf=\"required\"\n [style.color]=\"value ? null : 'red'\">*</a>\n </div>\n <biit-icon *ngIf=\"error || regExError || minLengthError\" id=\"exclamation\" name=\"exclamation\"\n class=\"input-error-icon\" [pathStyle]=\"{fill:'#A1093F'}\"></biit-icon>\n <div class=\"bottom-line\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n ></div>\n <div *ngIf=\"error\" class=\"input-error-msg\" id=\"error-message\">\n <a id=\"message\">\n {{ error }}\n </a>\n </div>\n <div *ngIf=\"regExError && !error\" id=\"regex-error-message\" class=\"input-error-msg\">\n <a id=\"regex-message\">\n {{ t('inputs.regex-error') }}\n </a>\n </div>\n <div *ngIf=\"minLengthError && !error && !regExError\" id=\"length-error-message\" class=\"input-error-msg\">\n <a id=\"length-message\">\n {{ t('inputs.minlength-error') }}\n </a>\n </div>\n <span *ngIf=\"description\" id=\"description\" class=\"input-description\">\n {{ description }}\n </span>\n </div>\n</div>\n", styles: ["*{box-sizing:border-box}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object{background:var(--
|
|
88
|
+
], ngImport: i0, template: "<div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" *transloco=\"let t\">\n <div class=\"input-container\">\n <biit-tooltip-icon *ngIf=\"info\"\n class=\"tooltip-icon\"\n [text]=\"info\"></biit-tooltip-icon>\n <input\n class=\"input-object\"\n (keydown)=\"checkValue($event)\"\n [(ngModel)]=\"value\"\n (input)=\"value\"\n (ngModelChange)=\"onChange($event); validateInput();\"\n (keydown.enter)=\"onActionPerformed.emit(value)\"\n [type]=\"reveal ? Type.TEXT : type\" required\n [min]=\"min\"\n [max]=\"max\"\n [minlength]=\"minLength\"\n [maxlength]=\"maxLength ? maxLength : 100\"\n [attr.name]=\"fieldName\"\n [class.error]=\"error || regExError || minLengthError\"\n [class.reveal]=\"reveal\"\n >\n <div *ngIf=\"type === Type.PASSWORD || icon\" class=\"input-show-icon-container\"\n (click)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n (keydown.enter)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n tabindex=\"0\">\n <biit-icon [name]=\"type === Type.PASSWORD ? 'show' : icon\"\n class=\"input-show-icon\"\n [pathStyle]=\"{fill: reveal ? 'var(--main-color)' : 'var(--component-color)'}\"\n ></biit-icon>\n </div>\n <div class=\"input-placeholder\" [class.input-filled]=\"this.value?.toString().length\">\n {{ _placeholder }}\n <a *ngIf=\"required\"\n [style.color]=\"value ? null : 'red'\">*</a>\n </div>\n <biit-icon *ngIf=\"error || regExError || minLengthError\" id=\"exclamation\" name=\"exclamation\"\n class=\"input-error-icon\" [pathStyle]=\"{fill:'#A1093F'}\"></biit-icon>\n <div class=\"bottom-line\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n ></div>\n <div *ngIf=\"error\" class=\"input-error-msg\" id=\"error-message\">\n <a id=\"message\">\n {{ error }}\n </a>\n </div>\n <div *ngIf=\"regExError && !error\" id=\"regex-error-message\" class=\"input-error-msg\">\n <a id=\"regex-message\">\n {{ t('inputs.regex-error') }}\n </a>\n </div>\n <div *ngIf=\"minLengthError && !error && !regExError\" id=\"length-error-message\" class=\"input-error-msg\">\n <a id=\"length-message\">\n {{ t('inputs.minlength-error') }}\n </a>\n </div>\n <span *ngIf=\"description\" id=\"description\" class=\"input-description\">\n {{ description }}\n </span>\n </div>\n</div>\n", styles: ["*{box-sizing:border-box}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object{background:var(--input-text-background);color:var(--secondary-color)}.biit-input.readonly .input-object{color:var(--secondary-color)}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:var(--component-color);padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400;background:var(--input-text-background)}.input-object:focus{outline:none;background:var(--input-text-focus-background)}.input-object:hover{background:var(--input-text-hover-background)}.input-object.error{color:var(--error-color);border-color:var(--error-color)}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-placeholder{color:var(--component-color);font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-object:-webkit-autofill~.input-placeholder,.input-filled{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:var(--secondary-color)}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.75em;color:var(--error-color);padding-top:.2em;min-height:1.05em;line-height:120%}.input-error-msg a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:var(--input-text-background);border:none;outline:none}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:var(--component-color)}.bottom-line.disabled,.bottom-line.readonly{background:var(--secondary-color)}.tooltip-icon{position:absolute;top:-.5em;left:-.5em}@media (max-width: 550px){.popup-canvas{min-width:0}.login-container{flex-direction:column-reverse;gap:2rem}}input[type=password]::-webkit-contacts-auto-fill-button,input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none;height:0;width:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: i5.BiitTooltipIconComponent, selector: "biit-tooltip-icon", inputs: ["text", "inline"] }] });
|
|
89
89
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitInputTextComponent, decorators: [{
|
|
90
90
|
type: Component,
|
|
91
91
|
args: [{ selector: 'biit-input-text', providers: [
|
|
@@ -98,7 +98,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
98
98
|
provide: TRANSLOCO_SCOPE,
|
|
99
99
|
useValue: { scope: 'wizardry-theme/inputs', alias: "inputs" }
|
|
100
100
|
}
|
|
101
|
-
], template: "<div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" *transloco=\"let t\">\n <div class=\"input-container\">\n <biit-tooltip-icon *ngIf=\"info\"\n class=\"tooltip-icon\"\n [text]=\"info\"></biit-tooltip-icon>\n <input\n class=\"input-object\"\n (keydown)=\"checkValue($event)\"\n [(ngModel)]=\"value\"\n (input)=\"value\"\n (ngModelChange)=\"onChange($event); validateInput();\"\n (keydown.enter)=\"onActionPerformed.emit(value)\"\n [type]=\"reveal ? Type.TEXT : type\" required\n [min]=\"min\"\n [max]=\"max\"\n [minlength]=\"minLength\"\n [maxlength]=\"maxLength ? maxLength : 100\"\n [attr.name]=\"fieldName\"\n [class.error]=\"error || regExError || minLengthError\"\n [class.reveal]=\"reveal\"\n >\n <div *ngIf=\"type === Type.PASSWORD || icon\" class=\"input-show-icon-container\"\n (click)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n (keydown.enter)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n tabindex=\"0\">\n <biit-icon [name]=\"type === Type.PASSWORD ? 'show' : icon\"\n class=\"input-show-icon\"\n [pathStyle]=\"{fill: reveal ? 'var(--main-color)' : 'var(--component-color)'}\"\n ></biit-icon>\n </div>\n <div class=\"input-placeholder\" [class.input-filled]=\"this.value?.toString().length\">\n {{ _placeholder }}\n <a *ngIf=\"required\"\n [style.color]=\"value ? null : 'red'\">*</a>\n </div>\n <biit-icon *ngIf=\"error || regExError || minLengthError\" id=\"exclamation\" name=\"exclamation\"\n class=\"input-error-icon\" [pathStyle]=\"{fill:'#A1093F'}\"></biit-icon>\n <div class=\"bottom-line\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n ></div>\n <div *ngIf=\"error\" class=\"input-error-msg\" id=\"error-message\">\n <a id=\"message\">\n {{ error }}\n </a>\n </div>\n <div *ngIf=\"regExError && !error\" id=\"regex-error-message\" class=\"input-error-msg\">\n <a id=\"regex-message\">\n {{ t('inputs.regex-error') }}\n </a>\n </div>\n <div *ngIf=\"minLengthError && !error && !regExError\" id=\"length-error-message\" class=\"input-error-msg\">\n <a id=\"length-message\">\n {{ t('inputs.minlength-error') }}\n </a>\n </div>\n <span *ngIf=\"description\" id=\"description\" class=\"input-description\">\n {{ description }}\n </span>\n </div>\n</div>\n", styles: ["*{box-sizing:border-box}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object{background:var(--
|
|
101
|
+
], template: "<div class=\"biit-input\" [class.disabled]=\"disabled\" [class.readonly]=\"readonly\" *transloco=\"let t\">\n <div class=\"input-container\">\n <biit-tooltip-icon *ngIf=\"info\"\n class=\"tooltip-icon\"\n [text]=\"info\"></biit-tooltip-icon>\n <input\n class=\"input-object\"\n (keydown)=\"checkValue($event)\"\n [(ngModel)]=\"value\"\n (input)=\"value\"\n (ngModelChange)=\"onChange($event); validateInput();\"\n (keydown.enter)=\"onActionPerformed.emit(value)\"\n [type]=\"reveal ? Type.TEXT : type\" required\n [min]=\"min\"\n [max]=\"max\"\n [minlength]=\"minLength\"\n [maxlength]=\"maxLength ? maxLength : 100\"\n [attr.name]=\"fieldName\"\n [class.error]=\"error || regExError || minLengthError\"\n [class.reveal]=\"reveal\"\n >\n <div *ngIf=\"type === Type.PASSWORD || icon\" class=\"input-show-icon-container\"\n (click)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n (keydown.enter)=\"reveal = (type === Type.PASSWORD ? !reveal : false); onActionPerformed.emit(value)\"\n tabindex=\"0\">\n <biit-icon [name]=\"type === Type.PASSWORD ? 'show' : icon\"\n class=\"input-show-icon\"\n [pathStyle]=\"{fill: reveal ? 'var(--main-color)' : 'var(--component-color)'}\"\n ></biit-icon>\n </div>\n <div class=\"input-placeholder\" [class.input-filled]=\"this.value?.toString().length\">\n {{ _placeholder }}\n <a *ngIf=\"required\"\n [style.color]=\"value ? null : 'red'\">*</a>\n </div>\n <biit-icon *ngIf=\"error || regExError || minLengthError\" id=\"exclamation\" name=\"exclamation\"\n class=\"input-error-icon\" [pathStyle]=\"{fill:'#A1093F'}\"></biit-icon>\n <div class=\"bottom-line\"\n [class.disabled]=\"disabled\"\n [class.readonly]=\"readonly\"\n ></div>\n <div *ngIf=\"error\" class=\"input-error-msg\" id=\"error-message\">\n <a id=\"message\">\n {{ error }}\n </a>\n </div>\n <div *ngIf=\"regExError && !error\" id=\"regex-error-message\" class=\"input-error-msg\">\n <a id=\"regex-message\">\n {{ t('inputs.regex-error') }}\n </a>\n </div>\n <div *ngIf=\"minLengthError && !error && !regExError\" id=\"length-error-message\" class=\"input-error-msg\">\n <a id=\"length-message\">\n {{ t('inputs.minlength-error') }}\n </a>\n </div>\n <span *ngIf=\"description\" id=\"description\" class=\"input-description\">\n {{ description }}\n </span>\n </div>\n</div>\n", styles: ["*{box-sizing:border-box}.biit-input{display:flex;min-width:12.8em}.biit-input.disabled{pointer-events:none}.biit-input.disabled .input-object{background:var(--input-text-background);color:var(--secondary-color)}.biit-input.readonly .input-object{color:var(--secondary-color)}.input-container{position:relative;width:100%}.input-object{font-size:1em;display:block;border:none;color:var(--component-color);padding:.7em;height:2.1em;width:100%;min-width:2.1em;font-weight:400;background:var(--input-text-background)}.input-object:focus{outline:none;background:var(--input-text-focus-background)}.input-object:hover{background:var(--input-text-hover-background)}.input-object.error{color:var(--error-color);border-color:var(--error-color)}.input-object.password{padding:.7em 2.1em .55em .7em}.input-object.password.reveal{-webkit-text-security:none;input-security:none}.input-placeholder{color:var(--component-color);font-size:1em;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7em;top:.42em;height:.7em;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-object:focus~.input-placeholder,.input-object:-webkit-autofill~.input-placeholder,.input-filled{top:-.95em;font-size:.7em;line-height:.7em;font-weight:400;color:var(--secondary-color)}.input-error-icon{display:flex;top:.7em;position:absolute;width:.7em;height:.7em}.input-error-msg{position:absolute;display:flex;align-items:center;font-size:.75em;color:var(--error-color);padding-top:.2em;min-height:1.05em;line-height:120%}.input-error-msg a{display:block;line-height:1.1em}.input-show-icon{width:1.05em;height:1.05em}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1em;height:2.1em;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{background-color:var(--input-text-background);border:none;outline:none}.input-description{position:absolute;display:flex;align-items:center;font-size:.75em;color:gray;padding-top:1.4em;min-height:1.05em;line-height:120%;font-style:italic}.input-description a{display:block;line-height:1.1em}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:var(--component-color)}.bottom-line.disabled,.bottom-line.readonly{background:var(--secondary-color)}.tooltip-icon{position:absolute;top:-.5em;left:-.5em}@media (max-width: 550px){.popup-canvas{min-width:0}.login-container{flex-direction:column-reverse;gap:2rem}}input[type=password]::-webkit-contacts-auto-fill-button,input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none;height:0;width:0;margin:0}\n"] }]
|
|
102
102
|
}], propDecorators: { placeholder: [{
|
|
103
103
|
type: Input
|
|
104
104
|
}], error: [{
|
|
@@ -273,7 +273,7 @@ BiitMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
|
|
|
273
273
|
useExisting: forwardRef(() => BiitMultiselectComponent),
|
|
274
274
|
multi: true
|
|
275
275
|
}
|
|
276
|
-
], ngImport: i0, template: "<!-- DEFAULT MODE -->\n<div *ngIf=\"type != 'icon'\"\n class=\"biit-input\" aria-haspopup=\"listbox\"\n [class.compact]=\"isCompact\"\n [class.disabled]=\"isDisabled\"\n (keydown)=\"!isDisabled && handleKeyboardEvents($event)\"\n (keydown.enter)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n (keydown.space)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n>\n <div class=\"input-container\" #input>\n <input [ngModel]=\"dropdownOpen ? filterText :\n currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n (ngModelChange)=\"filterText = $event; handleFilter()\"\n (click)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n (keydown.enter)=\"filterText.length ? onCreate.emit(filterText) : false; clearFilter();\"\n [placeholder]=\"dropdownOpen && currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n tabindex=\"0\"\n class=\"input-object\"\n [class.grey-bg]=\"dropdownOpen\"\n [class.default-cursor]=\"dropdownOpen\"\n [disabled]=\"isDisabled\"\n [readonly]=\"!dropdownOpen\"/>\n <div class=\"input-show-icon-container\" id=\"arrow\"\n [class.passthrough]=\"!dropdownOpen\"\n [class.rotate-90]=\"dropdownOpen\"\n (click)=\"dropdownOpen && closeDropdown()\">\n <biit-icon [name]=\"'right_arrow'\"\n class=\"input-show-icon\"\n [pathStyle]=\"{fill: isDisabled ? '#D9D9D9' : dropdownOpen ? 'var(--main-color)' : 'var(--component-color)'}\"\n ></biit-icon>\n </div>\n <div id=\"dropdown-label\"\n class=\"input-placeholder\"\n [class.disabled]=\"isDisabled\"\n [class.compact]=\"dropdownOpen || (currentValues?.length)\">\n {{ title }}\n <a *ngIf=\"isRequired\"\n [style.color]=\"currentValues.length ? null : 'red'\">*</a>\n </div>\n <div class=\"bottom-line\"\n [class.disabled]=\"isDisabled\"\n ></div>\n <span class=\"description\">{{ description }}</span>\n </div>\n</div>\n\n<!-- ICON MODE -->\n<button biit-icon *ngIf=\"type == 'icon'\"\n [icon]=\"icon\"\n (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n [checked]=\"dropdownOpen\"\n [disabled]=\"isDisabled\"\n></button>\n\n<!-- DROPDOWN -->\n<div style=\"position: relative; height: 0; width: 100%\">\n <div #dropdown id=\"options\"\n [class.disabled]=\"isDisabled\"\n class=\"dropdown-list\"\n role=\"listbox\"\n aria-expanded=\"false\"\n aria-labelledby=\"dropdown-label\"\n [class.dropdown-open]=\"dropdownOpen\"\n [class.compact]=\"isCompact\"\n (keydown)=\"dropdownOpen && handleKeyboardEvents($event)\"\n >\n <biit-checkbox *ngFor=\"let item of filteredData; index as i\"\n [attr.id]=\"'option-' + (isPrimitive ? item : item[label])\"\n class=\"dropdown-item\"\n [class.selected]=\"currentValues && currentValues.includes(item)\"\n [ngModel]=\"currentValues && currentValues.includes(item)\"\n [description]=\"descriptionField && item[descriptionField]\"\n (click)=\"onModelChange(item); $event.stopPropagation(); $event.preventDefault();\"\n (keydown.enter)=\"onModelChange(item)\"\n (keydown.space)=\"onModelChange(item)\"\n [tabindex]=\"!dropdownOpen || isDisabled ? -1 : 0\"\n role=\"option\"\n aria-selected=\"false\"\n [disabled]=\"false\">\n {{ isPrimitive ? item : item[label] }}\n </biit-checkbox>\n <button *ngIf=\"!filteredData?.length\"\n class=\"dropdown-item no-results\"\n disabled\n >\n <a>No results found</a>\n </button>\n </div>\n</div>\n\n<div *ngIf=\"type == 'chips'\"\n class=\"chips\">\n <span\n *ngFor=\"let item of currentValues\"\n (click)=\"onModelChange(item)\"\n class=\"chips-item\"\n >\n {{ item[label] }}\n <biit-icon\n [name]=\"'cross_wide'\"\n [pathStyle]=\"{fill: '#ffffff'}\"\n ></biit-icon>\n </span>\n</div>\n", styles: ["*{box-sizing:border-box}input::selection{background-color:transparent}.biit-input{display:flex;min-width:12.8rem}.biit-input.compact{width:12.8rem}.input-container{position:relative;width:100%}.input-object{background-color:#fff;font-size:1rem;display:block;border:none;color:var(--component-color);padding:.7rem;height:2.1rem;width:100%;min-width:2.1rem;font-weight:400;cursor:pointer}.input-object:focus,.input-object:active,.input-object:hover{outline:none;background:var(--main-background)}.input-object:disabled{pointer-events:none;background-color:transparent;color:var(--main-background)}.default-cursor{cursor:auto}.input-placeholder{color:var(--component-color);font-size:1rem;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7rem;top:.42rem;height:.7rem;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-placeholder.compact{top:-.95rem;font-size:.7rem;font-weight:400;color:var(--secondary-color)}.input-placeholder.disabled{color:var(--main-background)}.input-show-icon{width:1rem;height:1rem}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1rem;height:2.1rem;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transform:rotate(90deg);transition:transform .5s ease}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{border:none;outline:none}.input-show-icon-container:hover~.input-object{background:var(--main-background)}.input-show-icon-container.rotate-90{transform:rotate(-90deg)}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:var(--component-color)}.bottom-line.disabled{background:var(--main-background)}.dropdown-list{background:
|
|
276
|
+
], ngImport: i0, template: "<!-- DEFAULT MODE -->\n<div *ngIf=\"type != 'icon'\"\n class=\"biit-input\" aria-haspopup=\"listbox\"\n [class.compact]=\"isCompact\"\n [class.disabled]=\"isDisabled\"\n (keydown)=\"!isDisabled && handleKeyboardEvents($event)\"\n (keydown.enter)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n (keydown.space)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n>\n <div class=\"input-container\" #input>\n <input [ngModel]=\"dropdownOpen ? filterText :\n currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n (ngModelChange)=\"filterText = $event; handleFilter()\"\n (click)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n (keydown.enter)=\"filterText.length ? onCreate.emit(filterText) : false; clearFilter();\"\n [placeholder]=\"dropdownOpen && currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n tabindex=\"0\"\n class=\"input-object\"\n [class.grey-bg]=\"dropdownOpen\"\n [class.default-cursor]=\"dropdownOpen\"\n [disabled]=\"isDisabled\"\n [readonly]=\"!dropdownOpen\"/>\n <div class=\"input-show-icon-container\" id=\"arrow\"\n [class.passthrough]=\"!dropdownOpen\"\n [class.rotate-90]=\"dropdownOpen\"\n (click)=\"dropdownOpen && closeDropdown()\">\n <biit-icon [name]=\"'right_arrow'\"\n class=\"input-show-icon\"\n [pathStyle]=\"{fill: isDisabled ? '#D9D9D9' : dropdownOpen ? 'var(--main-color)' : 'var(--component-color)'}\"\n ></biit-icon>\n </div>\n <div id=\"dropdown-label\"\n class=\"input-placeholder\"\n [class.disabled]=\"isDisabled\"\n [class.compact]=\"dropdownOpen || (currentValues?.length)\">\n {{ title }}\n <a *ngIf=\"isRequired\"\n [style.color]=\"currentValues.length ? null : 'red'\">*</a>\n </div>\n <div class=\"bottom-line\"\n [class.disabled]=\"isDisabled\"\n ></div>\n <span class=\"description\">{{ description }}</span>\n </div>\n</div>\n\n<!-- ICON MODE -->\n<button biit-icon *ngIf=\"type == 'icon'\"\n [icon]=\"icon\"\n (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n [checked]=\"dropdownOpen\"\n [disabled]=\"isDisabled\"\n></button>\n\n<!-- DROPDOWN -->\n<div style=\"position: relative; height: 0; width: 100%\">\n <div #dropdown id=\"options\"\n [class.disabled]=\"isDisabled\"\n class=\"dropdown-list\"\n role=\"listbox\"\n aria-expanded=\"false\"\n aria-labelledby=\"dropdown-label\"\n [class.dropdown-open]=\"dropdownOpen\"\n [class.compact]=\"isCompact\"\n (keydown)=\"dropdownOpen && handleKeyboardEvents($event)\"\n >\n <biit-checkbox *ngFor=\"let item of filteredData; index as i\"\n [attr.id]=\"'option-' + (isPrimitive ? item : item[label])\"\n class=\"dropdown-item\"\n [class.selected]=\"currentValues && currentValues.includes(item)\"\n [ngModel]=\"currentValues && currentValues.includes(item)\"\n [description]=\"descriptionField && item[descriptionField]\"\n (click)=\"onModelChange(item); $event.stopPropagation(); $event.preventDefault();\"\n (keydown.enter)=\"onModelChange(item)\"\n (keydown.space)=\"onModelChange(item)\"\n [tabindex]=\"!dropdownOpen || isDisabled ? -1 : 0\"\n role=\"option\"\n aria-selected=\"false\"\n [disabled]=\"false\">\n {{ isPrimitive ? item : item[label] }}\n </biit-checkbox>\n <button *ngIf=\"!filteredData?.length\"\n class=\"dropdown-item no-results\"\n disabled\n >\n <a>No results found</a>\n </button>\n </div>\n</div>\n\n<div *ngIf=\"type == 'chips'\"\n class=\"chips\">\n <span\n *ngFor=\"let item of currentValues\"\n (click)=\"onModelChange(item)\"\n class=\"chips-item\"\n >\n {{ item[label] }}\n <biit-icon\n [name]=\"'cross_wide'\"\n [pathStyle]=\"{fill: '#ffffff'}\"\n ></biit-icon>\n </span>\n</div>\n", styles: ["*{box-sizing:border-box}input::selection{background-color:transparent}.biit-input{display:flex;min-width:12.8rem}.biit-input.compact{width:12.8rem}.input-container{position:relative;width:100%}.input-object{background-color:#fff;font-size:1rem;display:block;border:none;color:var(--component-color);padding:.7rem;height:2.1rem;width:100%;min-width:2.1rem;font-weight:400;cursor:pointer}.input-object:focus,.input-object:active,.input-object:hover{outline:none;background:var(--main-background)}.input-object:disabled{pointer-events:none;background-color:transparent;color:var(--main-background)}.default-cursor{cursor:auto}.input-placeholder{color:var(--component-color);font-size:1rem;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7rem;top:.42rem;height:.7rem;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-placeholder.compact{top:-.95rem;font-size:.7rem;font-weight:400;color:var(--secondary-color)}.input-placeholder.disabled{color:var(--main-background)}.input-show-icon{width:1rem;height:1rem}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1rem;height:2.1rem;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transform:rotate(90deg);transition:transform .5s ease}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{border:none;outline:none}.input-show-icon-container:hover~.input-object{background:var(--main-background)}.input-show-icon-container.rotate-90{transform:rotate(-90deg)}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:var(--component-color)}.bottom-line.disabled{background:var(--main-background)}.dropdown-list{background:var(--main-background);position:absolute;z-index:2;box-sizing:border-box;border:3px solid var(--border-color);margin-top:-3px;min-width:100%;width:100%;cursor:pointer;transform-origin:top;opacity:0;display:none;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease;max-height:20rem;overflow-y:auto;overflow-x:hidden}.dropdown-list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.dropdown-list.compact{width:12.8rem}.dropdown-list.disabled{visibility:hidden}.dropdown-item{background:none;color:inherit;border:none;font:inherit;width:100%;cursor:pointer;line-height:1rem;min-height:1.4rem;display:flex;align-items:center;padding:.2rem .7rem}.dropdown-item:not(.no-results):hover,.dropdown-item:not(.no-results):focus-visible{outline:none;background:var(--hover-color);width:calc(100% + 6px);margin-left:-3px;padding-left:calc(.7rem + 3px)}.dropdown-item.no-results{justify-content:center;padding:1rem;color:#d9d9d9}.dropdown-item ::ng-deep label{width:100%;height:100%;cursor:pointer}.dropdown-item ::ng-deep label input[type=checkbox]{cursor:pointer;pointer-events:none}.passthrough{pointer-events:none}.grey-bg{background:var(--main-background)}.onwards{--origin: 1rem}.downwards{--origin: -1rem}.description{position:absolute;display:flex;align-items:center;font-size:.75em;color:var(--secondary-color);padding-top:.2em;min-height:1.05em;line-height:120%;font-style:italic}.chips{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}.chips .chips-item{font-size:.75rem;color:#fff;background:var(--main-color);padding:.25rem .75rem;position:relative;cursor:pointer}.chips .chips-item biit-icon{display:none}.chips .chips-item:hover biit-icon{display:block;height:100%;width:5px;position:absolute;top:0;right:4px}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }, { kind: "component", type: i4.BiitCheckboxComponent, selector: "biit-checkbox", inputs: ["disabled", "description", "showAlwaysDescription"], outputs: ["onValueChange"] }, { kind: "component", type: i5.BiitIconButtonComponent, selector: "button[biit-icon]", inputs: ["icon", "checked"] }] });
|
|
277
277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitMultiselectComponent, decorators: [{
|
|
278
278
|
type: Component,
|
|
279
279
|
args: [{ selector: 'biit-multiselect', providers: [
|
|
@@ -284,7 +284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
284
284
|
}
|
|
285
285
|
], host: {
|
|
286
286
|
'(document:pointerdown)': 'handleMouseEvents($event)'
|
|
287
|
-
}, template: "<!-- DEFAULT MODE -->\n<div *ngIf=\"type != 'icon'\"\n class=\"biit-input\" aria-haspopup=\"listbox\"\n [class.compact]=\"isCompact\"\n [class.disabled]=\"isDisabled\"\n (keydown)=\"!isDisabled && handleKeyboardEvents($event)\"\n (keydown.enter)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n (keydown.space)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n>\n <div class=\"input-container\" #input>\n <input [ngModel]=\"dropdownOpen ? filterText :\n currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n (ngModelChange)=\"filterText = $event; handleFilter()\"\n (click)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n (keydown.enter)=\"filterText.length ? onCreate.emit(filterText) : false; clearFilter();\"\n [placeholder]=\"dropdownOpen && currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n tabindex=\"0\"\n class=\"input-object\"\n [class.grey-bg]=\"dropdownOpen\"\n [class.default-cursor]=\"dropdownOpen\"\n [disabled]=\"isDisabled\"\n [readonly]=\"!dropdownOpen\"/>\n <div class=\"input-show-icon-container\" id=\"arrow\"\n [class.passthrough]=\"!dropdownOpen\"\n [class.rotate-90]=\"dropdownOpen\"\n (click)=\"dropdownOpen && closeDropdown()\">\n <biit-icon [name]=\"'right_arrow'\"\n class=\"input-show-icon\"\n [pathStyle]=\"{fill: isDisabled ? '#D9D9D9' : dropdownOpen ? 'var(--main-color)' : 'var(--component-color)'}\"\n ></biit-icon>\n </div>\n <div id=\"dropdown-label\"\n class=\"input-placeholder\"\n [class.disabled]=\"isDisabled\"\n [class.compact]=\"dropdownOpen || (currentValues?.length)\">\n {{ title }}\n <a *ngIf=\"isRequired\"\n [style.color]=\"currentValues.length ? null : 'red'\">*</a>\n </div>\n <div class=\"bottom-line\"\n [class.disabled]=\"isDisabled\"\n ></div>\n <span class=\"description\">{{ description }}</span>\n </div>\n</div>\n\n<!-- ICON MODE -->\n<button biit-icon *ngIf=\"type == 'icon'\"\n [icon]=\"icon\"\n (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n [checked]=\"dropdownOpen\"\n [disabled]=\"isDisabled\"\n></button>\n\n<!-- DROPDOWN -->\n<div style=\"position: relative; height: 0; width: 100%\">\n <div #dropdown id=\"options\"\n [class.disabled]=\"isDisabled\"\n class=\"dropdown-list\"\n role=\"listbox\"\n aria-expanded=\"false\"\n aria-labelledby=\"dropdown-label\"\n [class.dropdown-open]=\"dropdownOpen\"\n [class.compact]=\"isCompact\"\n (keydown)=\"dropdownOpen && handleKeyboardEvents($event)\"\n >\n <biit-checkbox *ngFor=\"let item of filteredData; index as i\"\n [attr.id]=\"'option-' + (isPrimitive ? item : item[label])\"\n class=\"dropdown-item\"\n [class.selected]=\"currentValues && currentValues.includes(item)\"\n [ngModel]=\"currentValues && currentValues.includes(item)\"\n [description]=\"descriptionField && item[descriptionField]\"\n (click)=\"onModelChange(item); $event.stopPropagation(); $event.preventDefault();\"\n (keydown.enter)=\"onModelChange(item)\"\n (keydown.space)=\"onModelChange(item)\"\n [tabindex]=\"!dropdownOpen || isDisabled ? -1 : 0\"\n role=\"option\"\n aria-selected=\"false\"\n [disabled]=\"false\">\n {{ isPrimitive ? item : item[label] }}\n </biit-checkbox>\n <button *ngIf=\"!filteredData?.length\"\n class=\"dropdown-item no-results\"\n disabled\n >\n <a>No results found</a>\n </button>\n </div>\n</div>\n\n<div *ngIf=\"type == 'chips'\"\n class=\"chips\">\n <span\n *ngFor=\"let item of currentValues\"\n (click)=\"onModelChange(item)\"\n class=\"chips-item\"\n >\n {{ item[label] }}\n <biit-icon\n [name]=\"'cross_wide'\"\n [pathStyle]=\"{fill: '#ffffff'}\"\n ></biit-icon>\n </span>\n</div>\n", styles: ["*{box-sizing:border-box}input::selection{background-color:transparent}.biit-input{display:flex;min-width:12.8rem}.biit-input.compact{width:12.8rem}.input-container{position:relative;width:100%}.input-object{background-color:#fff;font-size:1rem;display:block;border:none;color:var(--component-color);padding:.7rem;height:2.1rem;width:100%;min-width:2.1rem;font-weight:400;cursor:pointer}.input-object:focus,.input-object:active,.input-object:hover{outline:none;background:var(--main-background)}.input-object:disabled{pointer-events:none;background-color:transparent;color:var(--main-background)}.default-cursor{cursor:auto}.input-placeholder{color:var(--component-color);font-size:1rem;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7rem;top:.42rem;height:.7rem;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-placeholder.compact{top:-.95rem;font-size:.7rem;font-weight:400;color:var(--secondary-color)}.input-placeholder.disabled{color:var(--main-background)}.input-show-icon{width:1rem;height:1rem}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1rem;height:2.1rem;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transform:rotate(90deg);transition:transform .5s ease}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{border:none;outline:none}.input-show-icon-container:hover~.input-object{background:var(--main-background)}.input-show-icon-container.rotate-90{transform:rotate(-90deg)}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:var(--component-color)}.bottom-line.disabled{background:var(--main-background)}.dropdown-list{background:
|
|
287
|
+
}, template: "<!-- DEFAULT MODE -->\n<div *ngIf=\"type != 'icon'\"\n class=\"biit-input\" aria-haspopup=\"listbox\"\n [class.compact]=\"isCompact\"\n [class.disabled]=\"isDisabled\"\n (keydown)=\"!isDisabled && handleKeyboardEvents($event)\"\n (keydown.enter)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n (keydown.space)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n>\n <div class=\"input-container\" #input>\n <input [ngModel]=\"dropdownOpen ? filterText :\n currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n (ngModelChange)=\"filterText = $event; handleFilter()\"\n (click)=\"!dropdownOpen && !isDisabled && openDropdown()\"\n (keydown.enter)=\"filterText.length ? onCreate.emit(filterText) : false; clearFilter();\"\n [placeholder]=\"dropdownOpen && currentValues && currentValues.length ? currentValues.length + ' selected' : ''\"\n tabindex=\"0\"\n class=\"input-object\"\n [class.grey-bg]=\"dropdownOpen\"\n [class.default-cursor]=\"dropdownOpen\"\n [disabled]=\"isDisabled\"\n [readonly]=\"!dropdownOpen\"/>\n <div class=\"input-show-icon-container\" id=\"arrow\"\n [class.passthrough]=\"!dropdownOpen\"\n [class.rotate-90]=\"dropdownOpen\"\n (click)=\"dropdownOpen && closeDropdown()\">\n <biit-icon [name]=\"'right_arrow'\"\n class=\"input-show-icon\"\n [pathStyle]=\"{fill: isDisabled ? '#D9D9D9' : dropdownOpen ? 'var(--main-color)' : 'var(--component-color)'}\"\n ></biit-icon>\n </div>\n <div id=\"dropdown-label\"\n class=\"input-placeholder\"\n [class.disabled]=\"isDisabled\"\n [class.compact]=\"dropdownOpen || (currentValues?.length)\">\n {{ title }}\n <a *ngIf=\"isRequired\"\n [style.color]=\"currentValues.length ? null : 'red'\">*</a>\n </div>\n <div class=\"bottom-line\"\n [class.disabled]=\"isDisabled\"\n ></div>\n <span class=\"description\">{{ description }}</span>\n </div>\n</div>\n\n<!-- ICON MODE -->\n<button biit-icon *ngIf=\"type == 'icon'\"\n [icon]=\"icon\"\n (click)=\"!dropdownOpen ? openDropdown() : closeDropdown()\"\n [checked]=\"dropdownOpen\"\n [disabled]=\"isDisabled\"\n></button>\n\n<!-- DROPDOWN -->\n<div style=\"position: relative; height: 0; width: 100%\">\n <div #dropdown id=\"options\"\n [class.disabled]=\"isDisabled\"\n class=\"dropdown-list\"\n role=\"listbox\"\n aria-expanded=\"false\"\n aria-labelledby=\"dropdown-label\"\n [class.dropdown-open]=\"dropdownOpen\"\n [class.compact]=\"isCompact\"\n (keydown)=\"dropdownOpen && handleKeyboardEvents($event)\"\n >\n <biit-checkbox *ngFor=\"let item of filteredData; index as i\"\n [attr.id]=\"'option-' + (isPrimitive ? item : item[label])\"\n class=\"dropdown-item\"\n [class.selected]=\"currentValues && currentValues.includes(item)\"\n [ngModel]=\"currentValues && currentValues.includes(item)\"\n [description]=\"descriptionField && item[descriptionField]\"\n (click)=\"onModelChange(item); $event.stopPropagation(); $event.preventDefault();\"\n (keydown.enter)=\"onModelChange(item)\"\n (keydown.space)=\"onModelChange(item)\"\n [tabindex]=\"!dropdownOpen || isDisabled ? -1 : 0\"\n role=\"option\"\n aria-selected=\"false\"\n [disabled]=\"false\">\n {{ isPrimitive ? item : item[label] }}\n </biit-checkbox>\n <button *ngIf=\"!filteredData?.length\"\n class=\"dropdown-item no-results\"\n disabled\n >\n <a>No results found</a>\n </button>\n </div>\n</div>\n\n<div *ngIf=\"type == 'chips'\"\n class=\"chips\">\n <span\n *ngFor=\"let item of currentValues\"\n (click)=\"onModelChange(item)\"\n class=\"chips-item\"\n >\n {{ item[label] }}\n <biit-icon\n [name]=\"'cross_wide'\"\n [pathStyle]=\"{fill: '#ffffff'}\"\n ></biit-icon>\n </span>\n</div>\n", styles: ["*{box-sizing:border-box}input::selection{background-color:transparent}.biit-input{display:flex;min-width:12.8rem}.biit-input.compact{width:12.8rem}.input-container{position:relative;width:100%}.input-object{background-color:#fff;font-size:1rem;display:block;border:none;color:var(--component-color);padding:.7rem;height:2.1rem;width:100%;min-width:2.1rem;font-weight:400;cursor:pointer}.input-object:focus,.input-object:active,.input-object:hover{outline:none;background:var(--main-background)}.input-object:disabled{pointer-events:none;background-color:transparent;color:var(--main-background)}.default-cursor{cursor:auto}.input-placeholder{color:var(--component-color);font-size:1rem;font-weight:bolder;text-transform:uppercase;position:absolute;pointer-events:none;left:.7rem;top:.42rem;height:.7rem;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input-placeholder.compact{top:-.95rem;font-size:.7rem;font-weight:400;color:var(--secondary-color)}.input-placeholder.disabled{color:var(--main-background)}.input-show-icon{width:1rem;height:1rem}.input-show-icon-container{top:0;right:0;position:absolute;width:2.1rem;height:2.1rem;align-content:center;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transform:rotate(90deg);transition:transform .5s ease}.input-show-icon-container:hover,.input-show-icon-container:focus,.input-show-icon-container:focus-visible{border:none;outline:none}.input-show-icon-container:hover~.input-object{background:var(--main-background)}.input-show-icon-container.rotate-90{transform:rotate(-90deg)}.bottom-line{position:relative;top:-3px;margin-bottom:-3px;width:auto;height:3px;background:var(--component-color)}.bottom-line.disabled{background:var(--main-background)}.dropdown-list{background:var(--main-background);position:absolute;z-index:2;box-sizing:border-box;border:3px solid var(--border-color);margin-top:-3px;min-width:100%;width:100%;cursor:pointer;transform-origin:top;opacity:0;display:none;pointer-events:none;transform:translateY(var(--origin));transition:opacity .5s ease,transform .5s ease;max-height:20rem;overflow-y:auto;overflow-x:hidden}.dropdown-list.dropdown-open{opacity:1;pointer-events:auto;transform:translate(0)}.dropdown-list.compact{width:12.8rem}.dropdown-list.disabled{visibility:hidden}.dropdown-item{background:none;color:inherit;border:none;font:inherit;width:100%;cursor:pointer;line-height:1rem;min-height:1.4rem;display:flex;align-items:center;padding:.2rem .7rem}.dropdown-item:not(.no-results):hover,.dropdown-item:not(.no-results):focus-visible{outline:none;background:var(--hover-color);width:calc(100% + 6px);margin-left:-3px;padding-left:calc(.7rem + 3px)}.dropdown-item.no-results{justify-content:center;padding:1rem;color:#d9d9d9}.dropdown-item ::ng-deep label{width:100%;height:100%;cursor:pointer}.dropdown-item ::ng-deep label input[type=checkbox]{cursor:pointer;pointer-events:none}.passthrough{pointer-events:none}.grey-bg{background:var(--main-background)}.onwards{--origin: 1rem}.downwards{--origin: -1rem}.description{position:absolute;display:flex;align-items:center;font-size:.75em;color:var(--secondary-color);padding-top:.2em;min-height:1.05em;line-height:120%;font-style:italic}.chips{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}.chips .chips-item{font-size:.75rem;color:#fff;background:var(--main-color);padding:.25rem .75rem;position:relative;cursor:pointer}.chips .chips-item biit-icon{display:none}.chips .chips-item:hover biit-icon{display:block;height:100%;width:5px;position:absolute;top:0;right:4px}\n"] }]
|
|
288
288
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.IterableDiffers }]; }, propDecorators: { title: [{
|
|
289
289
|
type: Input
|
|
290
290
|
}], type: [{
|
|
@@ -65,10 +65,10 @@ export class BiitNavMenuComponent {
|
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
BiitNavMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitNavMenuComponent, deps: [{ token: i1.Router }, { token: i2.ContextMenuService }], target: i0.ɵɵFactoryTarget.Component });
|
|
68
|
-
BiitNavMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitNavMenuComponent, selector: "biit-nav-menu", inputs: { routes: "routes" }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["navbarMenu"], descendants: true }, { propertyName: "navbarRef", first: true, predicate: ["navbarMenu"], descendants: true, read: ElementRef }, { propertyName: "menuCanvas", first: true, predicate: ["menuCanvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"nav-wrapper\">\n <button class=\"nav-arrow left\" id=\"nav-menu-left\"\n *ngIf=\"showLeft\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n \u2039\n </button>\n\n <div #menuCanvas class=\"navbar-menu-canvas scroll-x\" id=\"nav-menu\">\n <div class=\"item\" #navItem\n *ngFor=\"let route of routes\"\n [attr.id]=\"'nav-item-' + route.path\"\n [routerLink]=\"route.children ? null : [route.path]\"\n [routerLinkActive]=\"['active']\"\n [class.active]=\"router.url.includes('/'+route.path)\"\n [class.hover]=\"route == hovered && contextMenuService.hasOpenMenu()\"\n [class.disabled]=\"route.data?.['disabled']\"\n [style.display]=\"route.data?.['hidden'] ? 'none' : 'inline-flex'\"\n (click)=\"route.children ? onContextMenu(route, navItem) : null\">\n {{ route.title }}\n <context-menu #navbarMenu menuClass=\"custom-style\">\n <ng-template contextMenuItem\n *ngFor=\"let item of contextMenuItems\"\n [disabled]=\"item.disabled\"\n [visible]=\"item.visible\"\n (execute)=\"router.navigate([item.parent, item.path])\">\n <div [attr.id]=\"'nav-subitem-' + item.path\"\n [class.active]=\"router.url.includes('/' + item.parent + '/' + item.path)\">\n {{ item.title }}\n </div>\n </ng-template>\n </context-menu>\n </div>\n </div>\n\n <button class=\"nav-arrow right\" id=\"nav-menu-right\"\n *ngIf=\"showRight\"\n (click)=\"scrollRight()\n\"\n aria-label=\"Scroll right\">\n \u203A\n </button>\n</div>\n", styles: ["@charset \"UTF-8\";.navbar-menu-canvas{height:2.5rem;display:flex;background:var(--nav-menu-background-color);overflow-x:auto}.navbar-menu-canvas .item{display:inline-flex;align-items:center;justify-content:center;padding:0 1rem;-webkit-user-select:none;user-select:none;cursor:pointer}.navbar-menu-canvas .item:active,.navbar-menu-canvas .item.active,.navbar-menu-canvas .item.open{background:var(--
|
|
68
|
+
BiitNavMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitNavMenuComponent, selector: "biit-nav-menu", inputs: { routes: "routes" }, viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["navbarMenu"], descendants: true }, { propertyName: "navbarRef", first: true, predicate: ["navbarMenu"], descendants: true, read: ElementRef }, { propertyName: "menuCanvas", first: true, predicate: ["menuCanvas"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"nav-wrapper\">\n <button class=\"nav-arrow left\" id=\"nav-menu-left\"\n *ngIf=\"showLeft\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n \u2039\n </button>\n\n <div #menuCanvas class=\"navbar-menu-canvas scroll-x\" id=\"nav-menu\">\n <div class=\"item\" #navItem\n *ngFor=\"let route of routes\"\n [attr.id]=\"'nav-item-' + route.path\"\n [routerLink]=\"route.children ? null : [route.path]\"\n [routerLinkActive]=\"['active']\"\n [class.active]=\"router.url.includes('/'+route.path)\"\n [class.hover]=\"route == hovered && contextMenuService.hasOpenMenu()\"\n [class.disabled]=\"route.data?.['disabled']\"\n [style.display]=\"route.data?.['hidden'] ? 'none' : 'inline-flex'\"\n (click)=\"route.children ? onContextMenu(route, navItem) : null\">\n {{ route.title }}\n <context-menu #navbarMenu menuClass=\"custom-style\">\n <ng-template contextMenuItem\n *ngFor=\"let item of contextMenuItems\"\n [disabled]=\"item.disabled\"\n [visible]=\"item.visible\"\n (execute)=\"router.navigate([item.parent, item.path])\">\n <div [attr.id]=\"'nav-subitem-' + item.path\"\n [class.active]=\"router.url.includes('/' + item.parent + '/' + item.path)\">\n {{ item.title }}\n </div>\n </ng-template>\n </context-menu>\n </div>\n </div>\n\n <button class=\"nav-arrow right\" id=\"nav-menu-right\"\n *ngIf=\"showRight\"\n (click)=\"scrollRight()\n\"\n aria-label=\"Scroll right\">\n \u203A\n </button>\n</div>\n", styles: ["@charset \"UTF-8\";.navbar-menu-canvas{height:2.5rem;display:flex;background:var(--nav-menu-background-color);overflow-x:auto}.navbar-menu-canvas .item{display:inline-flex;align-items:center;justify-content:center;padding:0 1rem;-webkit-user-select:none;user-select:none;cursor:pointer}.navbar-menu-canvas .item:active,.navbar-menu-canvas .item.active,.navbar-menu-canvas .item.open{background:var(--nav-menu-active-color)}.navbar-menu-canvas .item:hover,.navbar-menu-canvas .item.hover{background:var(--main-background)}.disabled{color:var(--hover-color);pointer-events:none}.nav-wrapper{position:relative;display:flex;align-items:stretch}.navbar-menu-canvas.scroll-x{overflow-x:auto;overflow-y:hidden;display:flex;gap:.5rem;scrollbar-width:none}.navbar-menu-canvas.scroll-x::-webkit-scrollbar{display:none}.item{flex:0 0 auto}.nav-arrow{position:absolute;top:0;bottom:0;width:32px;padding:0;border:none;background:linear-gradient(to right,rgba(255,255,255,.9),rgba(255,255,255,0)) center/100% 100%;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;z-index:5;color:#333;backdrop-filter:blur(2px)}.nav-arrow.left{left:0;background:linear-gradient(to right,rgba(255,255,255,.9),transparent)}.nav-arrow.right{right:0;background:linear-gradient(to left,rgba(255,255,255,.9),transparent)}.nav-arrow:hover{color:#000}.custom-style{--ngx-contextmenu-focusable-border-bottom: 1px dotted #70757e;--ngx-contextmenu-border-radius: 4px;--ngx-contextmenu-border: 1px solid rgba(0, 0, 0, .18);--ngx-contextmenu-margin: 2px 0 0;--ngx-contextmenu-min-width: 160px;--ngx-contextmenu-padding: 5px 0;--ngx-contextmenu-max-height: 100vh;--ngx-contextmenu-item-arrow-left: \"\\25c0\";--ngx-contextmenu-item-arrow-right: \"\\25b6\";--ngx-contextmenu-item-separator-color: $separator-color;--ngx-contextmenu-item-separator-padding: 10px;--ngx-contextmenu-item-separator-width: 96%;--ngx-contextmenu-item-padding: 6px 20px;--ngx-contextmenu-item-text-hover-color: $text-over-color}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i2.ContextMenuComponent, selector: "context-menu", inputs: ["menuClass", "disabled", "dir"], outputs: ["open", "close"] }, { kind: "directive", type: i2.ContextMenuItemDirective, selector: "[contextMenuItem]", inputs: ["subMenu", "divider", "disabled", "passive", "visible"], outputs: ["execute"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
69
69
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitNavMenuComponent, decorators: [{
|
|
70
70
|
type: Component,
|
|
71
|
-
args: [{ selector: 'biit-nav-menu', encapsulation: ViewEncapsulation.None, template: "<div class=\"nav-wrapper\">\n <button class=\"nav-arrow left\" id=\"nav-menu-left\"\n *ngIf=\"showLeft\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n \u2039\n </button>\n\n <div #menuCanvas class=\"navbar-menu-canvas scroll-x\" id=\"nav-menu\">\n <div class=\"item\" #navItem\n *ngFor=\"let route of routes\"\n [attr.id]=\"'nav-item-' + route.path\"\n [routerLink]=\"route.children ? null : [route.path]\"\n [routerLinkActive]=\"['active']\"\n [class.active]=\"router.url.includes('/'+route.path)\"\n [class.hover]=\"route == hovered && contextMenuService.hasOpenMenu()\"\n [class.disabled]=\"route.data?.['disabled']\"\n [style.display]=\"route.data?.['hidden'] ? 'none' : 'inline-flex'\"\n (click)=\"route.children ? onContextMenu(route, navItem) : null\">\n {{ route.title }}\n <context-menu #navbarMenu menuClass=\"custom-style\">\n <ng-template contextMenuItem\n *ngFor=\"let item of contextMenuItems\"\n [disabled]=\"item.disabled\"\n [visible]=\"item.visible\"\n (execute)=\"router.navigate([item.parent, item.path])\">\n <div [attr.id]=\"'nav-subitem-' + item.path\"\n [class.active]=\"router.url.includes('/' + item.parent + '/' + item.path)\">\n {{ item.title }}\n </div>\n </ng-template>\n </context-menu>\n </div>\n </div>\n\n <button class=\"nav-arrow right\" id=\"nav-menu-right\"\n *ngIf=\"showRight\"\n (click)=\"scrollRight()\n\"\n aria-label=\"Scroll right\">\n \u203A\n </button>\n</div>\n", styles: ["@charset \"UTF-8\";.navbar-menu-canvas{height:2.5rem;display:flex;background:var(--nav-menu-background-color);overflow-x:auto}.navbar-menu-canvas .item{display:inline-flex;align-items:center;justify-content:center;padding:0 1rem;-webkit-user-select:none;user-select:none;cursor:pointer}.navbar-menu-canvas .item:active,.navbar-menu-canvas .item.active,.navbar-menu-canvas .item.open{background:var(--
|
|
71
|
+
args: [{ selector: 'biit-nav-menu', encapsulation: ViewEncapsulation.None, template: "<div class=\"nav-wrapper\">\n <button class=\"nav-arrow left\" id=\"nav-menu-left\"\n *ngIf=\"showLeft\"\n (click)=\"scrollLeft()\"\n aria-label=\"Scroll left\">\n \u2039\n </button>\n\n <div #menuCanvas class=\"navbar-menu-canvas scroll-x\" id=\"nav-menu\">\n <div class=\"item\" #navItem\n *ngFor=\"let route of routes\"\n [attr.id]=\"'nav-item-' + route.path\"\n [routerLink]=\"route.children ? null : [route.path]\"\n [routerLinkActive]=\"['active']\"\n [class.active]=\"router.url.includes('/'+route.path)\"\n [class.hover]=\"route == hovered && contextMenuService.hasOpenMenu()\"\n [class.disabled]=\"route.data?.['disabled']\"\n [style.display]=\"route.data?.['hidden'] ? 'none' : 'inline-flex'\"\n (click)=\"route.children ? onContextMenu(route, navItem) : null\">\n {{ route.title }}\n <context-menu #navbarMenu menuClass=\"custom-style\">\n <ng-template contextMenuItem\n *ngFor=\"let item of contextMenuItems\"\n [disabled]=\"item.disabled\"\n [visible]=\"item.visible\"\n (execute)=\"router.navigate([item.parent, item.path])\">\n <div [attr.id]=\"'nav-subitem-' + item.path\"\n [class.active]=\"router.url.includes('/' + item.parent + '/' + item.path)\">\n {{ item.title }}\n </div>\n </ng-template>\n </context-menu>\n </div>\n </div>\n\n <button class=\"nav-arrow right\" id=\"nav-menu-right\"\n *ngIf=\"showRight\"\n (click)=\"scrollRight()\n\"\n aria-label=\"Scroll right\">\n \u203A\n </button>\n</div>\n", styles: ["@charset \"UTF-8\";.navbar-menu-canvas{height:2.5rem;display:flex;background:var(--nav-menu-background-color);overflow-x:auto}.navbar-menu-canvas .item{display:inline-flex;align-items:center;justify-content:center;padding:0 1rem;-webkit-user-select:none;user-select:none;cursor:pointer}.navbar-menu-canvas .item:active,.navbar-menu-canvas .item.active,.navbar-menu-canvas .item.open{background:var(--nav-menu-active-color)}.navbar-menu-canvas .item:hover,.navbar-menu-canvas .item.hover{background:var(--main-background)}.disabled{color:var(--hover-color);pointer-events:none}.nav-wrapper{position:relative;display:flex;align-items:stretch}.navbar-menu-canvas.scroll-x{overflow-x:auto;overflow-y:hidden;display:flex;gap:.5rem;scrollbar-width:none}.navbar-menu-canvas.scroll-x::-webkit-scrollbar{display:none}.item{flex:0 0 auto}.nav-arrow{position:absolute;top:0;bottom:0;width:32px;padding:0;border:none;background:linear-gradient(to right,rgba(255,255,255,.9),rgba(255,255,255,0)) center/100% 100%;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;z-index:5;color:#333;backdrop-filter:blur(2px)}.nav-arrow.left{left:0;background:linear-gradient(to right,rgba(255,255,255,.9),transparent)}.nav-arrow.right{right:0;background:linear-gradient(to left,rgba(255,255,255,.9),transparent)}.nav-arrow:hover{color:#000}.custom-style{--ngx-contextmenu-focusable-border-bottom: 1px dotted #70757e;--ngx-contextmenu-border-radius: 4px;--ngx-contextmenu-border: 1px solid rgba(0, 0, 0, .18);--ngx-contextmenu-margin: 2px 0 0;--ngx-contextmenu-min-width: 160px;--ngx-contextmenu-padding: 5px 0;--ngx-contextmenu-max-height: 100vh;--ngx-contextmenu-item-arrow-left: \"\\25c0\";--ngx-contextmenu-item-arrow-right: \"\\25b6\";--ngx-contextmenu-item-separator-color: $separator-color;--ngx-contextmenu-item-separator-padding: 10px;--ngx-contextmenu-item-separator-width: 96%;--ngx-contextmenu-item-padding: 6px 20px;--ngx-contextmenu-item-text-hover-color: $text-over-color}\n"] }]
|
|
72
72
|
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i2.ContextMenuService }]; }, propDecorators: { routes: [{
|
|
73
73
|
type: Input
|
|
74
74
|
}], contextMenu: [{
|
|
@@ -130,10 +130,10 @@ export class BiitPopupComponent {
|
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
132
|
BiitPopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitPopupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
133
|
-
BiitPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitPopupComponent, selector: "biit-popup", inputs: { title: "title", mouseEvent: "mouseEvent" }, outputs: { onClosed: "onClosed" }, host: { listeners: { "document:keydown.escape": "onEscPress($event)" } }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"type !== Type.INFO_BOX\" [class.dark-bg]=\"background\" class=\"popup-background\"\n (click)=\"closableOutside ? onClosed.emit() : false\">\n</div>\n<div #popup id=\"biit-popup\"\n [class.popup-canvas]=\"type == Type.DEFAULT\"\n [class.sixty-canvas]=\"type == Type.SIXTY\"\n [class.info-box-canvas]=\"type == Type.INFO_BOX\"\n [ngStyle]=\"type == Type.INFO_BOX ? {top: coordinates.y, left: coordinates.x} : undefined\">\n <div *ngIf=\"header\" id=\"header\"\n class=\"header\">\n <div class=\"title\">\n <a>{{ title }}</a>\n </div>\n <div class=\"bar\"></div>\n <biit-icon *ngIf=\"closable\" id=\"popup-x-button\"\n class=\"close\"\n [name]=\"'cross_wide'\"\n [pathStyle]=\"{fill: '#000000'}\"\n (click)=\"onClosed.emit()\"\n ></biit-icon>\n </div>\n <div class=\"content\" id=\"content\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".popup-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10}.popup-background.dark-bg{background-color:var(--popup-background-color)}.popup-canvas{position:fixed;display:flex;flex-direction:column;row-gap:.7rem;top:50%;left:50%;transform:translate(-50%,-50%);min-width:30rem;background-color:var(--
|
|
133
|
+
BiitPopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BiitPopupComponent, selector: "biit-popup", inputs: { title: "title", mouseEvent: "mouseEvent" }, outputs: { onClosed: "onClosed" }, host: { listeners: { "document:keydown.escape": "onEscPress($event)" } }, viewQueries: [{ propertyName: "popup", first: true, predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"type !== Type.INFO_BOX\" [class.dark-bg]=\"background\" class=\"popup-background\"\n (click)=\"closableOutside ? onClosed.emit() : false\">\n</div>\n<div #popup id=\"biit-popup\"\n [class.popup-canvas]=\"type == Type.DEFAULT\"\n [class.sixty-canvas]=\"type == Type.SIXTY\"\n [class.info-box-canvas]=\"type == Type.INFO_BOX\"\n [ngStyle]=\"type == Type.INFO_BOX ? {top: coordinates.y, left: coordinates.x} : undefined\">\n <div *ngIf=\"header\" id=\"header\"\n class=\"header\">\n <div class=\"title\">\n <a>{{ title }}</a>\n </div>\n <div class=\"bar\"></div>\n <biit-icon *ngIf=\"closable\" id=\"popup-x-button\"\n class=\"close\"\n [name]=\"'cross_wide'\"\n [pathStyle]=\"{fill: '#000000'}\"\n (click)=\"onClosed.emit()\"\n ></biit-icon>\n </div>\n <div class=\"content\" id=\"content\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".popup-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10}.popup-background.dark-bg{background-color:var(--popup-background-color)}.popup-canvas{position:fixed;display:flex;flex-direction:column;row-gap:.7rem;top:50%;left:50%;transform:translate(-50%,-50%);min-width:30rem;background-color:var(--popup-background);z-index:12;border:3px solid var(--popup-color);box-sizing:border-box;padding:2.1rem}.popup-canvas>.content{display:inline-flex}@media screen and (max-width: 600px){.popup-canvas{top:0!important;left:0!important;transform:unset!important;height:100%!important;width:100%!important;text-align:center;min-width:unset!important}}@media screen and (max-width: 800px){.sixty-canvas{width:100vw!important;padding:1rem!important}}.sixty-canvas{position:fixed;display:flex;flex-direction:column;row-gap:.7rem;top:0;right:0;width:60vw;height:100vh;background-color:var(--popup-background);z-index:11;border:3px solid var(--popup-color);box-sizing:border-box;padding:2.1rem 2.1rem 3rem}.sixty-canvas>.content{display:inline-flex;width:100%;height:-moz-fit-content;height:fit-content;flex-grow:1;overflow-y:auto}.popup-canvas .header,.sixty-canvas .header{position:relative;display:flex;align-items:center;justify-content:flex-end;height:2.1rem;width:100%;flex-shrink:0}.popup-canvas .header .title,.sixty-canvas .header .title{display:inline-flex;flex-grow:1;max-width:90%;text-transform:uppercase;font-size:1.5rem;font-weight:bolder;position:absolute;left:0}.popup-canvas .header .title a,.sixty-canvas .header .title a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.popup-canvas .header .bar,.sixty-canvas .header .bar{position:absolute;bottom:0;left:0;height:3px;width:60%;background:var(--popup-color)}.popup-canvas .header .close,.sixty-canvas .header .close{display:inline-flex;height:.9rem;width:.9rem;cursor:pointer}.info-box-canvas{position:fixed;width:23.5rem;display:flex;flex-direction:column;padding:1.5rem;background:var(--popup-background);border:3px solid var(--popup-color);gap:.75rem}.info-box-canvas .bar{display:none}.info-box-canvas .header{display:flex;align-items:start}.info-box-canvas .header .title{font-weight:700;text-transform:uppercase;flex-grow:1;padding-right:.5rem}.info-box-canvas .close{height:.8rem;width:1rem;flex-shrink:0;margin-top:.2rem;cursor:pointer}.info-box-canvas>.content{display:inline-flex}@media screen and (max-width: 600px){.popup-canvas>.content{justify-content:center}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.BiitIconComponent, selector: "biit-icon", inputs: ["name", "svgStyle", "pathStyle"] }] });
|
|
134
134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BiitPopupComponent, decorators: [{
|
|
135
135
|
type: Component,
|
|
136
|
-
args: [{ selector: 'biit-popup', template: "<div *ngIf=\"type !== Type.INFO_BOX\" [class.dark-bg]=\"background\" class=\"popup-background\"\n (click)=\"closableOutside ? onClosed.emit() : false\">\n</div>\n<div #popup id=\"biit-popup\"\n [class.popup-canvas]=\"type == Type.DEFAULT\"\n [class.sixty-canvas]=\"type == Type.SIXTY\"\n [class.info-box-canvas]=\"type == Type.INFO_BOX\"\n [ngStyle]=\"type == Type.INFO_BOX ? {top: coordinates.y, left: coordinates.x} : undefined\">\n <div *ngIf=\"header\" id=\"header\"\n class=\"header\">\n <div class=\"title\">\n <a>{{ title }}</a>\n </div>\n <div class=\"bar\"></div>\n <biit-icon *ngIf=\"closable\" id=\"popup-x-button\"\n class=\"close\"\n [name]=\"'cross_wide'\"\n [pathStyle]=\"{fill: '#000000'}\"\n (click)=\"onClosed.emit()\"\n ></biit-icon>\n </div>\n <div class=\"content\" id=\"content\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".popup-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10}.popup-background.dark-bg{background-color:var(--popup-background-color)}.popup-canvas{position:fixed;display:flex;flex-direction:column;row-gap:.7rem;top:50%;left:50%;transform:translate(-50%,-50%);min-width:30rem;background-color:var(--
|
|
136
|
+
args: [{ selector: 'biit-popup', template: "<div *ngIf=\"type !== Type.INFO_BOX\" [class.dark-bg]=\"background\" class=\"popup-background\"\n (click)=\"closableOutside ? onClosed.emit() : false\">\n</div>\n<div #popup id=\"biit-popup\"\n [class.popup-canvas]=\"type == Type.DEFAULT\"\n [class.sixty-canvas]=\"type == Type.SIXTY\"\n [class.info-box-canvas]=\"type == Type.INFO_BOX\"\n [ngStyle]=\"type == Type.INFO_BOX ? {top: coordinates.y, left: coordinates.x} : undefined\">\n <div *ngIf=\"header\" id=\"header\"\n class=\"header\">\n <div class=\"title\">\n <a>{{ title }}</a>\n </div>\n <div class=\"bar\"></div>\n <biit-icon *ngIf=\"closable\" id=\"popup-x-button\"\n class=\"close\"\n [name]=\"'cross_wide'\"\n [pathStyle]=\"{fill: '#000000'}\"\n (click)=\"onClosed.emit()\"\n ></biit-icon>\n </div>\n <div class=\"content\" id=\"content\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n</div>\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".popup-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10}.popup-background.dark-bg{background-color:var(--popup-background-color)}.popup-canvas{position:fixed;display:flex;flex-direction:column;row-gap:.7rem;top:50%;left:50%;transform:translate(-50%,-50%);min-width:30rem;background-color:var(--popup-background);z-index:12;border:3px solid var(--popup-color);box-sizing:border-box;padding:2.1rem}.popup-canvas>.content{display:inline-flex}@media screen and (max-width: 600px){.popup-canvas{top:0!important;left:0!important;transform:unset!important;height:100%!important;width:100%!important;text-align:center;min-width:unset!important}}@media screen and (max-width: 800px){.sixty-canvas{width:100vw!important;padding:1rem!important}}.sixty-canvas{position:fixed;display:flex;flex-direction:column;row-gap:.7rem;top:0;right:0;width:60vw;height:100vh;background-color:var(--popup-background);z-index:11;border:3px solid var(--popup-color);box-sizing:border-box;padding:2.1rem 2.1rem 3rem}.sixty-canvas>.content{display:inline-flex;width:100%;height:-moz-fit-content;height:fit-content;flex-grow:1;overflow-y:auto}.popup-canvas .header,.sixty-canvas .header{position:relative;display:flex;align-items:center;justify-content:flex-end;height:2.1rem;width:100%;flex-shrink:0}.popup-canvas .header .title,.sixty-canvas .header .title{display:inline-flex;flex-grow:1;max-width:90%;text-transform:uppercase;font-size:1.5rem;font-weight:bolder;position:absolute;left:0}.popup-canvas .header .title a,.sixty-canvas .header .title a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.popup-canvas .header .bar,.sixty-canvas .header .bar{position:absolute;bottom:0;left:0;height:3px;width:60%;background:var(--popup-color)}.popup-canvas .header .close,.sixty-canvas .header .close{display:inline-flex;height:.9rem;width:.9rem;cursor:pointer}.info-box-canvas{position:fixed;width:23.5rem;display:flex;flex-direction:column;padding:1.5rem;background:var(--popup-background);border:3px solid var(--popup-color);gap:.75rem}.info-box-canvas .bar{display:none}.info-box-canvas .header{display:flex;align-items:start}.info-box-canvas .header .title{font-weight:700;text-transform:uppercase;flex-grow:1;padding-right:.5rem}.info-box-canvas .close{height:.8rem;width:1rem;flex-shrink:0;margin-top:.2rem;cursor:pointer}.info-box-canvas>.content{display:inline-flex}@media screen and (max-width: 600px){.popup-canvas>.content{justify-content:center}}\n"] }]
|
|
137
137
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { title: [{
|
|
138
138
|
type: Input
|
|
139
139
|
}], mouseEvent: [{
|