@testgorilla/tgo-ui 2.26.19 → 2.26.21
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/components/confirm-dialog/confirm-dialog.component.d.ts +1 -0
- package/components/confirm-dialog/confirm-dialog.model.d.ts +1 -0
- package/components/filter-button/filter-button.component.d.ts +13 -4
- package/components/filter-button/filter-button.component.module.d.ts +6 -4
- package/components/filter-button/filter-button.model.d.ts +2 -0
- package/esm2022/components/button/button.component.mjs +2 -1
- package/esm2022/components/confirm-dialog/confirm-dialog.component.mjs +5 -3
- package/esm2022/components/confirm-dialog/confirm-dialog.model.mjs +1 -1
- package/esm2022/components/filter-button/filter-button.component.mjs +45 -33
- package/esm2022/components/filter-button/filter-button.component.module.mjs +8 -1
- package/esm2022/components/filter-button/filter-button.model.mjs +1 -1
- package/fesm2022/testgorilla-tgo-ui.mjs +46 -28
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -5341,6 +5341,7 @@ class ButtonComponent {
|
|
|
5341
5341
|
changes['iconPosition'] ||
|
|
5342
5342
|
changes['disabled'] ||
|
|
5343
5343
|
changes['companyColor'] ||
|
|
5344
|
+
changes['variant'] ||
|
|
5344
5345
|
changes['applicationTheme']) {
|
|
5345
5346
|
this.classCss = this.setCssClass();
|
|
5346
5347
|
this.styleCss = this.setCssStyle();
|
|
@@ -10314,6 +10315,7 @@ class ConfirmDialogComponent {
|
|
|
10314
10315
|
this.domSanitizer = domSanitizer;
|
|
10315
10316
|
this.lang = LanguageService.defaultLanguage;
|
|
10316
10317
|
this.showCloseButton = false;
|
|
10318
|
+
this.showSecondaryButton = true;
|
|
10317
10319
|
/**
|
|
10318
10320
|
*
|
|
10319
10321
|
* Defines the application theme
|
|
@@ -10329,16 +10331,17 @@ class ConfirmDialogComponent {
|
|
|
10329
10331
|
this.lang = data.language ?? LanguageService.defaultLanguage;
|
|
10330
10332
|
this.confirmMessageHtml = data.messageHtml ? this.domSanitizer.bypassSecurityTrustHtml(data.messageHtml) : undefined;
|
|
10331
10333
|
this.showCloseButton = data.showCloseButton ?? false;
|
|
10334
|
+
this.showSecondaryButton = data.showSecondaryButton ?? true;
|
|
10332
10335
|
if (defaultAppTheme) {
|
|
10333
10336
|
this.applicationTheme = defaultAppTheme;
|
|
10334
10337
|
}
|
|
10335
10338
|
}
|
|
10336
10339
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10337
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ConfirmDialogComponent, selector: "ui-confirm-dialog", inputs: { applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? (('COMMON.CONFIRM') | uiTranslate | async)!\"\n [primaryButtonLabel]=\"confirmButtonText ?? (('COMMON.YES') | uiTranslate | async)!\"\n [secondaryButtonLabel]=\"cancelButtonText ?? (('COMMON.CANCEL') | uiTranslate | async)
|
|
10340
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ConfirmDialogComponent, selector: "ui-confirm-dialog", inputs: { applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? (('COMMON.CONFIRM') | uiTranslate | async)!\"\n [primaryButtonLabel]=\"confirmButtonText ?? (('COMMON.YES') | uiTranslate | async)!\"\n [secondaryButtonLabel]=\"showSecondaryButton ? (cancelButtonText ?? (('COMMON.CANCEL') | uiTranslate | async)!) : undefined\"\n (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n (closeEvent)=\"dialogRef.close(null)\"\n primaryButtonType=\"primary\"\n secondaryButtonType=\"outlined\"\n [applicationTheme]=\"applicationTheme\"\n [showCloseButton]=\"showCloseButton\"\n >\n <div class=\"message\">{{ confirmMessage }}</div>\n @if (confirmMessageHtml) {\n <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n }\n </ui-dialog>\n\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "showCloseButton", "canCloseFn", "secondaryButtonLabel", "primaryButtonLabel", "secondaryButtonType", "primaryButtonType", "primaryButtonDataTestId", "secondaryButtonDataTestId", "companyColor", "applicationTheme", "disablePrimaryButton", "disableClose", "shouldDisableButtons", "ariaLabelledby", "ariaDescribedby", "keyboardOpen"], outputs: ["closeEvent", "secondaryButtonClickEvent", "primaryButtonClickEvent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
10338
10341
|
}
|
|
10339
10342
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
|
|
10340
10343
|
type: Component,
|
|
10341
|
-
args: [{ selector: 'ui-confirm-dialog', template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? (('COMMON.CONFIRM') | uiTranslate | async)!\"\n [primaryButtonLabel]=\"confirmButtonText ?? (('COMMON.YES') | uiTranslate | async)!\"\n [secondaryButtonLabel]=\"cancelButtonText ?? (('COMMON.CANCEL') | uiTranslate | async)
|
|
10344
|
+
args: [{ selector: 'ui-confirm-dialog', template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? (('COMMON.CONFIRM') | uiTranslate | async)!\"\n [primaryButtonLabel]=\"confirmButtonText ?? (('COMMON.YES') | uiTranslate | async)!\"\n [secondaryButtonLabel]=\"showSecondaryButton ? (cancelButtonText ?? (('COMMON.CANCEL') | uiTranslate | async)!) : undefined\"\n (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n (closeEvent)=\"dialogRef.close(null)\"\n primaryButtonType=\"primary\"\n secondaryButtonType=\"outlined\"\n [applicationTheme]=\"applicationTheme\"\n [showCloseButton]=\"showCloseButton\"\n >\n <div class=\"message\">{{ confirmMessage }}</div>\n @if (confirmMessageHtml) {\n <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n }\n </ui-dialog>\n\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"] }]
|
|
10342
10345
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
10343
10346
|
type: Optional
|
|
10344
10347
|
}, {
|
|
@@ -16933,7 +16936,16 @@ class FilterButtonComponent {
|
|
|
16933
16936
|
this.displayedLabel = signal('');
|
|
16934
16937
|
this.tooltip = signal('');
|
|
16935
16938
|
this.search = signal('');
|
|
16936
|
-
this.
|
|
16939
|
+
this.showTooltip = {};
|
|
16940
|
+
this.displayedOptions = computed(() => {
|
|
16941
|
+
let lastSectionTitle;
|
|
16942
|
+
return this.options
|
|
16943
|
+
.map(option => {
|
|
16944
|
+
lastSectionTitle = option.sectionTitle || lastSectionTitle;
|
|
16945
|
+
return { ...option, sectionTitle: lastSectionTitle };
|
|
16946
|
+
})
|
|
16947
|
+
.filter(option => option.label.toLowerCase().includes(this.search().toLowerCase()));
|
|
16948
|
+
});
|
|
16937
16949
|
this.MIN_OPTIONS_LENGTH_FOR_SEARCH = 8;
|
|
16938
16950
|
this.translationContext = 'FILTER_BUTTON.';
|
|
16939
16951
|
if (this.defaultAppTheme) {
|
|
@@ -16952,7 +16964,9 @@ class FilterButtonComponent {
|
|
|
16952
16964
|
this.changed.emit(this.value);
|
|
16953
16965
|
}
|
|
16954
16966
|
outsideClick() {
|
|
16955
|
-
|
|
16967
|
+
window.setTimeout(() => {
|
|
16968
|
+
this.isOpen.set(false);
|
|
16969
|
+
});
|
|
16956
16970
|
}
|
|
16957
16971
|
toggle() {
|
|
16958
16972
|
this.isOpen.set(!this.isOpen());
|
|
@@ -16962,16 +16976,11 @@ class FilterButtonComponent {
|
|
|
16962
16976
|
}
|
|
16963
16977
|
this.cdr.markForCheck();
|
|
16964
16978
|
}
|
|
16965
|
-
overlayAttach() {
|
|
16966
|
-
setTimeout(() => {
|
|
16967
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
|
|
16968
|
-
this.overlayContainer?.nativeElement.querySelector('input').focus();
|
|
16969
|
-
});
|
|
16970
|
-
}
|
|
16971
16979
|
isSelected(value) {
|
|
16972
|
-
return this.value
|
|
16980
|
+
return this.value?.includes(value || '');
|
|
16973
16981
|
}
|
|
16974
16982
|
optionChanged(selected, option) {
|
|
16983
|
+
this.value = this.value || [];
|
|
16975
16984
|
if (this.singleSelection) {
|
|
16976
16985
|
this.value = selected ? [option.value] : [];
|
|
16977
16986
|
}
|
|
@@ -16986,21 +16995,6 @@ class FilterButtonComponent {
|
|
|
16986
16995
|
this.changed.emit(this.value);
|
|
16987
16996
|
this.updateLabel();
|
|
16988
16997
|
}
|
|
16989
|
-
updateLabel() {
|
|
16990
|
-
let displayedLabel = '';
|
|
16991
|
-
let tooltip = '';
|
|
16992
|
-
const labels = this.value.map(value => this.options.find(option => option.value === value)?.label || '');
|
|
16993
|
-
if (labels.length > 0) {
|
|
16994
|
-
displayedLabel = labels[0];
|
|
16995
|
-
tooltip = `${this.label}${labels.map(value => `\n • ${value}`).join('')}`;
|
|
16996
|
-
}
|
|
16997
|
-
if (this.value.length > 1) {
|
|
16998
|
-
displayedLabel += ` (+${this.value.length - 1})`;
|
|
16999
|
-
}
|
|
17000
|
-
this.displayedLabel.set(displayedLabel);
|
|
17001
|
-
this.tooltip.set(tooltip);
|
|
17002
|
-
this.cdr.markForCheck();
|
|
17003
|
-
}
|
|
17004
16998
|
keyDownHandler(ev) {
|
|
17005
16999
|
if (ev.key === IKeyboardEvent.ARROW_DOWN) {
|
|
17006
17000
|
ev.preventDefault();
|
|
@@ -17014,12 +17008,31 @@ class FilterButtonComponent {
|
|
|
17014
17008
|
this.isOpen.set(false);
|
|
17015
17009
|
}
|
|
17016
17010
|
}
|
|
17011
|
+
onLabelEllipsisChange(isEllipsis, value) {
|
|
17012
|
+
this.showTooltip[value] = isEllipsis;
|
|
17013
|
+
}
|
|
17014
|
+
updateLabel() {
|
|
17015
|
+
this.value = this.value || [];
|
|
17016
|
+
let displayedLabel = '';
|
|
17017
|
+
let tooltip = '';
|
|
17018
|
+
const sortedLabels = this.options.filter(option => this.value.includes(option.value)).map(item => item?.label || '');
|
|
17019
|
+
if (sortedLabels.length > 0) {
|
|
17020
|
+
displayedLabel = this.options.find(option => option.value === this.value[0])?.label || '';
|
|
17021
|
+
tooltip = `${this.label}${sortedLabels.map(value => `\n • ${value}`).join('')}`;
|
|
17022
|
+
}
|
|
17023
|
+
if (this.value.length > 1) {
|
|
17024
|
+
displayedLabel += ` (+${this.value.length - 1})`;
|
|
17025
|
+
}
|
|
17026
|
+
this.displayedLabel.set(displayedLabel);
|
|
17027
|
+
this.tooltip.set(tooltip);
|
|
17028
|
+
this.cdr.markForCheck();
|
|
17029
|
+
}
|
|
17017
17030
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17018
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FilterButtonComponent, selector: "ui-filter-button", inputs: { label: "label", message: "message", value: "value", disabled: "disabled", options: "options", allowClear: "allowClear", singleSelection: "singleSelection", iconName: "iconName", iconPosition: "iconPosition", applicationTheme: "applicationTheme" }, outputs: { changed: "changed" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }, { propertyName: "filterOptions", predicate: ["filterOption"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <ui-button\n [matTooltip]=\"tooltip()\"\n [matTooltipClass]=\"'tooltip-multi-line'\"\n [matTooltipPosition]=\"'above'\"\n class=\"ui-filter-button-trigger\"\n [class.button-opened]=\"isOpen()\"\n [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n [label]=\"displayedLabel() || label\"\n [disabled]=\"disabled || options.length === 0\"\n (click)=\"toggle()\"\n truncateText=\"true\"\n type=\"button\"\n size=\"small\"\n [role]=\"'combobox'\"\n [attr.aria-expanded]=\"isOpen()\"\n [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n [iconPosition]=\"iconPosition\"\n [applicationTheme]=\"applicationTheme\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n ></ui-button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"outsideClick()\"\n (attach)=\"overlayAttach()\"\n >\n <div style=\"position: absolute; left: -9999px;\" [attr.aria-live]=\"'polite'\">{{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }} {{ ((translationContext + 'ACTIVE_ITEM') | uiTranslate : { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }) | async }}</div>\n <div style=\"position: absolute; left: -9999px;\" [attr.aria-live]=\"'polite'\">{{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }} {{ (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value) ? (translationContext + 'SELECTED') : (translationContext + 'DESELECTED')) | uiTranslate | async }}</div>\n <div class=\"ui-filter-button\" #overlayContainer>\n <div class=\"ui-filter-button-header\" *ngIf=\"options.length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n <ui-field\n type=\"search\"\n [showBottomContent]=\"false\"\n [ngModel]=\"search()\"\n (ngModelChange)=\"search.set($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-field>\n </div>\n <div class=\"ui-filter-button-list\" #list (keydown)=\"keyDownHandler($event)\">\n <div *ngFor=\"let section of displayedOptions(); index as i\">\n <div *ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</div>\n <div class=\"item\" (click)=\"optionChanged(!isSelected(section.value), section)\">\n <ui-radio-button\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"singleSelection\"\n [label]=\"section.label\"\n [truncateText]=\"true\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [selected]=\"isSelected(section.value)\"\n (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n >\n </ui-radio-button>\n <ui-checkbox\n (click)=\"$event.stopPropagation()\"\n [class.with-label-number]=\"section.labelNumber !== undefined\"\n *ngIf=\"!singleSelection\"\n [truncateText]=\"true\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [label]=\"section.label\"\n [checked]=\"isSelected(section.value)\"\n (changed)=\"optionChanged($event, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n ></ui-checkbox>\n <span class=\"item-number\" *ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n </div>\n </div>\n </div>\n <div class=\"ui-filter-button-footer\" *ngIf=\"allowClear || message\">\n <ui-button\n *ngIf=\"allowClear\"\n variant=\"text\"\n size=\"small\"\n [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n (click)=\"clearValue()\"\n [applicationTheme]=\"applicationTheme\"\n (keydown.escape)=\"toggle()\"\n ></ui-button>\n <div class=\"ui-filter-button-footer-message\">\n {{ message }}\n </div>\n </div>\n </div>\n </ng-template>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}ui-filter-button{display:inline-block}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list{max-height:290px;overflow-y:auto;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$7.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "component", type: RadioButtonComponent, selector: "ui-radio-button", inputs: ["disabled", "selected", "allowUnselect", "companyColor", "name", "label", "multiple", "value", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changeRadio"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
17031
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FilterButtonComponent, selector: "ui-filter-button", inputs: { label: "label", message: "message", value: "value", disabled: "disabled", options: "options", allowClear: "allowClear", singleSelection: "singleSelection", iconName: "iconName", iconPosition: "iconPosition", applicationTheme: "applicationTheme" }, outputs: { changed: "changed" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }, { propertyName: "filterOptions", predicate: ["filterOption"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n <ui-button\n [matTooltip]=\"tooltip()\"\n [matTooltipClass]=\"'tooltip-multi-line'\"\n [matTooltipPosition]=\"'above'\"\n class=\"ui-filter-button-trigger\"\n [class.button-opened]=\"isOpen()\"\n [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n [label]=\"displayedLabel() || label\"\n [disabled]=\"disabled || options.length === 0\"\n (click)=\"toggle()\"\n type=\"button\"\n size=\"small\"\n [role]=\"'combobox'\"\n [tooltip]=\"value.length ? ' ': ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n [iconPosition]=\"iconPosition\"\n [applicationTheme]=\"applicationTheme\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n ></ui-button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"outsideClick()\"\n >\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n translationContext + 'ACTIVE_ITEM'\n | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n | async\n }}\n </div>\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n ? translationContext + 'SELECTED'\n : translationContext + 'DESELECTED'\n )\n | uiTranslate\n | async\n }}\n </div>\n <div class=\"ui-filter-button\" #overlayContainer>\n <div class=\"ui-filter-button-header\" *ngIf=\"options.length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n <ui-field\n type=\"search\"\n [showBottomContent]=\"false\"\n [ngModel]=\"search()\"\n (ngModelChange)=\"search.set($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-field>\n </div>\n <div class=\"ui-filter-button-list\" #list (keydown)=\"keyDownHandler($event)\">\n <div *ngFor=\"let section of displayedOptions(); index as i\">\n <div\n *ngIf=\"section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle\"\n class=\"section-title\"\n >\n {{ section.sectionTitle }}\n </div>\n <div\n class=\"item\"\n [class.item-selected]=\"isSelected(section.value)\"\n (click)=\"optionChanged(!isSelected(section.value), section)\"\n >\n <ui-radio-button\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [selected]=\"isSelected(section.value)\"\n (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n >\n </ui-radio-button>\n <ui-checkbox\n (click)=\"$event.stopPropagation()\"\n [class.with-label-number]=\"section.labelNumber !== undefined\"\n *ngIf=\"!singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [checked]=\"isSelected(section.value)\"\n (changed)=\"optionChanged($event, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n ></ui-checkbox>\n <ui-icon *ngIf=\"section.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n <span\n #tooltip=\"matTooltip\"\n class=\"item-label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ section.label }}\n </span>\n <span class=\"item-number\" *ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n </div>\n </div>\n </div>\n <div class=\"ui-filter-button-footer\" *ngIf=\"allowClear || message\">\n <ui-button\n *ngIf=\"allowClear\"\n variant=\"text\"\n size=\"small\"\n [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n (click)=\"clearValue()\"\n [applicationTheme]=\"applicationTheme\"\n (keydown.escape)=\"toggle()\"\n ></ui-button>\n <div class=\"ui-filter-button-footer-message\">\n {{ message }}\n </div>\n </div>\n </div>\n </ng-template>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}ui-filter-button{display:inline-block}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list{max-height:290px;overflow-y:auto;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$7.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "label", "fieldName", "placeholder", "id", "value", "errors", "disabled", "required", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: RadioButtonComponent, selector: "ui-radio-button", inputs: ["disabled", "selected", "allowUnselect", "companyColor", "name", "label", "multiple", "value", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changeRadio"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
17019
17032
|
}
|
|
17020
17033
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterButtonComponent, decorators: [{
|
|
17021
17034
|
type: Component,
|
|
17022
|
-
args: [{ selector: 'ui-filter-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <ui-button\n [matTooltip]=\"tooltip()\"\n [matTooltipClass]=\"'tooltip-multi-line'\"\n [matTooltipPosition]=\"'above'\"\n class=\"ui-filter-button-trigger\"\n [class.button-opened]=\"isOpen()\"\n [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n [label]=\"displayedLabel() || label\"\n [disabled]=\"disabled || options.length === 0\"\n (click)=\"toggle()\"\n
|
|
17035
|
+
args: [{ selector: 'ui-filter-button', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <ui-button\n [matTooltip]=\"tooltip()\"\n [matTooltipClass]=\"'tooltip-multi-line'\"\n [matTooltipPosition]=\"'above'\"\n class=\"ui-filter-button-trigger\"\n [class.button-opened]=\"isOpen()\"\n [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n [label]=\"displayedLabel() || label\"\n [disabled]=\"disabled || options.length === 0\"\n (click)=\"toggle()\"\n type=\"button\"\n size=\"small\"\n [role]=\"'combobox'\"\n [tooltip]=\"value.length ? ' ': ''\"\n [attr.aria-expanded]=\"isOpen()\"\n [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n [iconPosition]=\"iconPosition\"\n [applicationTheme]=\"applicationTheme\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n ></ui-button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n (overlayOutsideClick)=\"outsideClick()\"\n >\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n translationContext + 'ACTIVE_ITEM'\n | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n | async\n }}\n </div>\n <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n {{\n (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n ? translationContext + 'SELECTED'\n : translationContext + 'DESELECTED'\n )\n | uiTranslate\n | async\n }}\n </div>\n <div class=\"ui-filter-button\" #overlayContainer>\n <div class=\"ui-filter-button-header\" *ngIf=\"options.length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n <ui-field\n type=\"search\"\n [showBottomContent]=\"false\"\n [ngModel]=\"search()\"\n (ngModelChange)=\"search.set($event)\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-field>\n </div>\n <div class=\"ui-filter-button-list\" #list (keydown)=\"keyDownHandler($event)\">\n <div *ngFor=\"let section of displayedOptions(); index as i\">\n <div\n *ngIf=\"section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle\"\n class=\"section-title\"\n >\n {{ section.sectionTitle }}\n </div>\n <div\n class=\"item\"\n [class.item-selected]=\"isSelected(section.value)\"\n (click)=\"optionChanged(!isSelected(section.value), section)\"\n >\n <ui-radio-button\n (click)=\"$event.stopPropagation()\"\n *ngIf=\"singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [selected]=\"isSelected(section.value)\"\n (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n >\n </ui-radio-button>\n <ui-checkbox\n (click)=\"$event.stopPropagation()\"\n [class.with-label-number]=\"section.labelNumber !== undefined\"\n *ngIf=\"!singleSelection\"\n [tabIndex]=\"i === 0 ? 0 : -1\"\n [checked]=\"isSelected(section.value)\"\n (changed)=\"optionChanged($event, section)\"\n [applicationTheme]=\"applicationTheme\"\n #filterOption\n ></ui-checkbox>\n <ui-icon *ngIf=\"section.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n <span\n #tooltip=\"matTooltip\"\n class=\"item-label\"\n uiEllipseText\n (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n [matTooltipClass]=\"applicationTheme\"\n >\n {{ section.label }}\n </span>\n <span class=\"item-number\" *ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n </div>\n </div>\n </div>\n <div class=\"ui-filter-button-footer\" *ngIf=\"allowClear || message\">\n <ui-button\n *ngIf=\"allowClear\"\n variant=\"text\"\n size=\"small\"\n [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n (click)=\"clearValue()\"\n [applicationTheme]=\"applicationTheme\"\n (keydown.escape)=\"toggle()\"\n ></ui-button>\n <div class=\"ui-filter-button-footer-message\">\n {{ message }}\n </div>\n </div>\n </div>\n </ng-template>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}ui-filter-button{display:inline-block}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list{max-height:290px;overflow-y:auto;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"] }]
|
|
17023
17036
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
17024
17037
|
type: Optional
|
|
17025
17038
|
}, {
|
|
@@ -17068,14 +17081,17 @@ class FilterButtonComponentModule {
|
|
|
17068
17081
|
OverlayModule,
|
|
17069
17082
|
UiTranslatePipe,
|
|
17070
17083
|
ButtonComponentModule,
|
|
17084
|
+
IconComponentModule,
|
|
17071
17085
|
CheckboxComponentModule,
|
|
17072
17086
|
FieldComponentModule,
|
|
17087
|
+
EllipseTextDirective,
|
|
17073
17088
|
RadioButtonComponentModule], exports: [FilterButtonComponent] }); }
|
|
17074
17089
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterButtonComponentModule, imports: [CommonModule,
|
|
17075
17090
|
FormsModule,
|
|
17076
17091
|
MatTooltipModule,
|
|
17077
17092
|
OverlayModule,
|
|
17078
17093
|
ButtonComponentModule,
|
|
17094
|
+
IconComponentModule,
|
|
17079
17095
|
CheckboxComponentModule,
|
|
17080
17096
|
FieldComponentModule,
|
|
17081
17097
|
RadioButtonComponentModule] }); }
|
|
@@ -17091,8 +17107,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
17091
17107
|
OverlayModule,
|
|
17092
17108
|
UiTranslatePipe,
|
|
17093
17109
|
ButtonComponentModule,
|
|
17110
|
+
IconComponentModule,
|
|
17094
17111
|
CheckboxComponentModule,
|
|
17095
17112
|
FieldComponentModule,
|
|
17113
|
+
EllipseTextDirective,
|
|
17096
17114
|
RadioButtonComponentModule,
|
|
17097
17115
|
],
|
|
17098
17116
|
exports: [FilterButtonComponent],
|