@messaia/cdk 18.0.0-rc13 → 18.0.0-rc15
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/esm2022/lib/select/components/select.component.mjs +16 -5
- package/esm2022/lib/table/components/dynamic-table/dynamic-table.component.mjs +1 -1
- package/esm2022/lib/table/components/filter-select/filter-select.component.mjs +375 -0
- package/esm2022/lib/table/public_api.mjs +1 -2
- package/esm2022/lib/table/table.module.mjs +3 -3
- package/fesm2022/messaia-cdk.mjs +20 -40
- package/fesm2022/messaia-cdk.mjs.map +1 -1
- package/lib/common/styles/core/_core.scss +1 -0
- package/lib/common/styles/core/_select.scss +24 -0
- package/lib/table/components/{filter-select.component.d.ts → filter-select/filter-select.component.d.ts} +3 -3
- package/lib/table/public_api.d.ts +0 -1
- package/lib/table/table.module.d.ts +3 -2
- package/package.json +1 -1
- package/esm2022/lib/table/components/filter-select.component.mjs +0 -407
package/fesm2022/messaia-cdk.mjs
CHANGED
|
@@ -31,7 +31,7 @@ import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/mat
|
|
|
31
31
|
import * as i15 from '@angular/material/progress-bar';
|
|
32
32
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
33
33
|
import * as i5$3 from '@angular/material/select';
|
|
34
|
-
import { MatSelect, MatSelectModule
|
|
34
|
+
import { MAT_SELECT_CONFIG, MatSelect, MatSelectModule } from '@angular/material/select';
|
|
35
35
|
import * as i18 from '@angular/material/slide-toggle';
|
|
36
36
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
37
37
|
import * as i13 from '@angular/material/sort';
|
|
@@ -68,7 +68,7 @@ import { trigger, state, style, AUTO_STYLE, transition, group, query, animateChi
|
|
|
68
68
|
import * as i3$3 from '@angular/cdk/a11y';
|
|
69
69
|
import * as i2$1 from '@angular/material/core';
|
|
70
70
|
import { mixinErrorState, MAT_DATE_FORMATS, ErrorStateMatcher, MatNativeDateModule } from '@angular/material/core';
|
|
71
|
-
import { CdkPortal
|
|
71
|
+
import { CdkPortal } from '@angular/cdk/portal';
|
|
72
72
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
73
73
|
import { MatExpansionPanel } from '@angular/material/expansion';
|
|
74
74
|
import * as i2$3 from '@angular/material/snack-bar';
|
|
@@ -12884,11 +12884,23 @@ class VdSelectComponent extends AbstractSelectFormField {
|
|
|
12884
12884
|
});
|
|
12885
12885
|
}
|
|
12886
12886
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VdSelectComponent, deps: [{ token: i0.Injector }, { token: i1.NgControl, optional: true, self: true }, { token: i1.NgForm, optional: true }, { token: i1.FormGroupDirective, optional: true }, { token: i2$1.ErrorStateMatcher }, { token: i3$3.FocusMonitor }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
12887
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: VdSelectComponent, selector: "vd-select", inputs: { triggerCssClass: "triggerCssClass", triggerMode: "triggerMode" }, providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\r\n <!-- #region Filter input -->\r\n <div *ngIf=\"filterable\" class=\"vd-select-filter-wrap\">\r\n <div class=\"vd-select-filter-inner\">\r\n <a mat-icon-button disabled *ngIf=\"!filterInput.value\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">search</mat-icon>\r\n </a>\r\n <a mat-icon-button *ngIf=\"filterInput.value\" (click)=\"filterInput.value = ''; handleFilter()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </a>\r\n <input #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter mat-input-element\" (keyup)=\"handleFilter($event)\">\r\n </div>\r\n <div class=\"mat-divider\"></div>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Trigger for launch button -->\r\n <mat-select-trigger *ngIf=\"(onLaunch?.observers?.length??0) > 0\" [class]=\"triggerCssClass\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n <span>{{option[optionTextProperty]}}</span>\r\n </span>\r\n <span *ngIf=\"!last\"> </span>\r\n </ng-container>\r\n </span>\r\n <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Custom trigger template -->\r\n <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Option template as trigger -->\r\n <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </span>\r\n <span *ngIf=\"!last\"> </span>\r\n </ng-container>\r\n </span>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Trigger for icons -->\r\n <mat-select-trigger *ngIf=\"(matIconKey || svgIconKey) && !triggerTemplate?.templateRef && !optionTemplate?.templateRef\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n <span>{{option[optionTextProperty]}}</span>\r\n </span>\r\n <span *ngIf=\"!last\"> </span>\r\n </ng-container>\r\n </span>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Default option -->\r\n <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple && defaultOption\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Options -->\r\n <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n <mat-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </mat-option>\r\n </ng-template>\r\n <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n <div *ngIf=\"currentValue\">\r\n <div class=\"readonly-value\">\r\n <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\r\n <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n <span> </span>\r\n <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\r\n </span>\r\n <span *ngIf=\"!last\">, </span>\r\n </ng-container>\r\n </span>\r\n </span>\r\n <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n </div>\r\n <mat-icon *ngIf=\"(onLaunch?.observers?.length??0) > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n </div>\r\n <div *ngIf=\"!currentValue\"> </div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-chip{background-color:var(--mdc-chip-elevated-container-color, transparent);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);color:inherit;display:inline-block;line-height:20px;height:24px!important;padding:1px 16px}::ng-deep .mat-mdc-chip:not(:last-child){margin:1px 4px 1px 0}::ng-deep .mat-mdc-chip>span{color:var(--mdc-chip-label-text-color, inherit);display:inline-block;font-size:.94em;line-height:1.8em}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }] });
|
|
12887
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: VdSelectComponent, selector: "vd-select", inputs: { triggerCssClass: "triggerCssClass", triggerMode: "triggerMode" }, providers: [
|
|
12888
|
+
{ provide: MatFormFieldControl, useExisting: VdSelectComponent },
|
|
12889
|
+
{
|
|
12890
|
+
provide: MAT_SELECT_CONFIG,
|
|
12891
|
+
useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
|
|
12892
|
+
}
|
|
12893
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdSelectOptionDirective, descendants: true }, { propertyName: "triggerTemplate", first: true, predicate: VdSelectTriggerDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\r\n <!-- #region Filter input -->\r\n <div class=\"mat-mdc-form-field mat-form-field-appearance-fill\" flex>\r\n <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\r\n <div class=\"mat-mdc-form-field-focus-overlay\"></div>\r\n <div class=\"mat-mdc-form-field-flex\">\r\n <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\r\n <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex>\r\n <mat-icon *ngIf=\"filterInput?.value\" (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mdc-line-ripple\"></div>\r\n </div>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Trigger for launch button -->\r\n <mat-select-trigger *ngIf=\"(onLaunch?.observers?.length??0) > 0\" [class]=\"triggerCssClass\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n <span>{{option[optionTextProperty]}}</span>\r\n </span>\r\n <span *ngIf=\"!last\"> </span>\r\n </ng-container>\r\n </span>\r\n <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Custom trigger template -->\r\n <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Option template as trigger -->\r\n <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </span>\r\n <span *ngIf=\"!last\"> </span>\r\n </ng-container>\r\n </span>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Trigger for icons -->\r\n <mat-select-trigger *ngIf=\"(matIconKey || svgIconKey) && !triggerTemplate?.templateRef && !optionTemplate?.templateRef\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n <span>{{option[optionTextProperty]}}</span>\r\n </span>\r\n <span *ngIf=\"!last\"> </span>\r\n </ng-container>\r\n </span>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Default option -->\r\n <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple && defaultOption\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Options -->\r\n <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n <mat-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </mat-option>\r\n </ng-template>\r\n <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n <div *ngIf=\"currentValue\">\r\n <div class=\"readonly-value\">\r\n <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\r\n <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n <span> </span>\r\n <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\r\n </span>\r\n <span *ngIf=\"!last\">, </span>\r\n </ng-container>\r\n </span>\r\n </span>\r\n <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n </div>\r\n <mat-icon *ngIf=\"(onLaunch?.observers?.length??0) > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n </div>\r\n <div *ngIf=\"!currentValue\"> </div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-chip{background-color:var(--mdc-chip-elevated-container-color, transparent);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);color:inherit;display:inline-block;line-height:20px;height:24px!important;padding:1px 16px}::ng-deep .mat-mdc-chip:not(:last-child){margin:1px 4px 1px 0}::ng-deep .mat-mdc-chip>span{color:var(--mdc-chip-label-text-color, inherit);display:inline-block;font-size:.94em;line-height:1.8em}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i5$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
12888
12894
|
}
|
|
12889
12895
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: VdSelectComponent, decorators: [{
|
|
12890
12896
|
type: Component,
|
|
12891
|
-
args: [{ selector: 'vd-select', providers: [
|
|
12897
|
+
args: [{ selector: 'vd-select', providers: [
|
|
12898
|
+
{ provide: MatFormFieldControl, useExisting: VdSelectComponent },
|
|
12899
|
+
{
|
|
12900
|
+
provide: MAT_SELECT_CONFIG,
|
|
12901
|
+
useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
|
|
12902
|
+
}
|
|
12903
|
+
], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" [hidden]=\"readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith??defaultCompareWith\" [disabled]=\"disabled\" flex>\r\n <!-- #region Filter input -->\r\n <div class=\"mat-mdc-form-field mat-form-field-appearance-fill\" flex>\r\n <div class=\"mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--filled mdc-text-field--no-label\">\r\n <div class=\"mat-mdc-form-field-focus-overlay\"></div>\r\n <div class=\"mat-mdc-form-field-flex\">\r\n <div class=\"mat-mdc-form-field-infix\" layout=\"row\" flex>\r\n <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"mat-mdc-input-element vd-select-filter mat-mdc-form-field-input-control mdc-text-field__input\" (keyup)=\"handleFilter($event)\" flex>\r\n <mat-icon *ngIf=\"filterInput?.value\" (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mdc-line-ripple\"></div>\r\n </div>\r\n </div>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Trigger for launch button -->\r\n <mat-select-trigger *ngIf=\"(onLaunch?.observers?.length??0) > 0\" [class]=\"triggerCssClass\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n <span>{{option[optionTextProperty]}}</span>\r\n </span>\r\n <span *ngIf=\"!last\"> </span>\r\n </ng-container>\r\n </span>\r\n <mat-icon class=\"vd-select-launch\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Custom trigger template -->\r\n <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && triggerTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: selectedOptions }\"></ng-template>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Option template as trigger -->\r\n <mat-select-trigger *ngIf=\"!onLaunch?.observers?.length && !triggerTemplate?.templateRef && optionTemplate?.templateRef\" [class]=\"triggerCssClass\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </span>\r\n <span *ngIf=\"!last\"> </span>\r\n </ng-container>\r\n </span>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Trigger for icons -->\r\n <mat-select-trigger *ngIf=\"(matIconKey || svgIconKey) && !triggerTemplate?.templateRef && !optionTemplate?.templateRef\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n <span>{{option[optionTextProperty]}}</span>\r\n </span>\r\n <span *ngIf=\"!last\"> </span>\r\n </ng-container>\r\n </span>\r\n </mat-select-trigger>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Default option -->\r\n <mat-option class=\"tc-grey-500\" *ngIf=\"!multiple && defaultOption\" i18n=\"@@pleaseSelect\">--- Please Select ---</mat-option>\r\n <!-- #endregion -->\r\n\r\n <!-- #region Options -->\r\n <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n <mat-option [value]=\"mapper ? option : option[optionValueProperty]\">\r\n <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{option[matIconKey]}}</mat-icon>\r\n <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"option[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[optionTextProperty], select, option {option} other {{{option[optionTextProperty]}}}}</span>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </mat-option>\r\n </ng-template>\r\n <!-- #endregion -->\r\n</mat-select>\r\n\r\n<!-- #region Read only value -->\r\n<div *ngIf=\"readonly\">\r\n <div *ngIf=\"currentValue\">\r\n <div class=\"readonly-value\">\r\n <span *ngIf=\"!optionTemplate?.templateRef && !triggerTemplate?.templateRef\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <ng-container *ngFor=\"let option of selectedOptions; let i = index; let last = last\">\r\n <span layout=\"row\" layout-align=\"start center\">\r\n <mat-icon *ngIf=\"matIconKey && !svgIconKey\" [fontSet]=\"fontSet || 'material-symbols-outlined'\">{{currentValue[matIconKey]}}</mat-icon>\r\n <mat-icon *ngIf=\"svgIconKey && !matIconKey\" [svgIcon]=\"currentValue[svgIconKey]\" [fontSet]=\"fontSet || 'material-symbols-outlined'\"></mat-icon>\r\n <span> </span>\r\n <span i18n=\"@@selection\">{currentValue[optionTextProperty], select, option {option} other {{{currentValue[optionTextProperty]}}}}</span>\r\n </span>\r\n <span *ngIf=\"!last\">, </span>\r\n </ng-container>\r\n </span>\r\n </span>\r\n <ng-template *ngIf=\"triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"triggerTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: currentValue }\"></ng-template>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef && !triggerTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ option: currentValue }\"></ng-template>\r\n </div>\r\n <mat-icon *ngIf=\"(onLaunch?.observers?.length??0) > 0\" class=\"vd-select-launch-readonly\" (click)=\"$event.stopPropagation(); handleLaunchClicked(value)\">launch</mat-icon>\r\n </div>\r\n <div *ngIf=\"!currentValue\"> </div>\r\n</div>\r\n<!-- #endregion -->", styles: [".vd-select-launch{position:absolute;right:30px;top:-5px;font-size:18px;cursor:pointer}.readonly-value{padding-right:24px;opacity:.6;min-height:15px}.vd-select-launch-readonly{position:absolute;right:0;top:9px;font-size:18px;cursor:pointer}.vd-select-filter-wrap{background:inherit;position:sticky;top:-8px;box-sizing:border-box;z-index:100}.vd-select-filter-wrap .vd-select-filter-inner{z-index:100;display:flex;flex-direction:row;align-items:center;background:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter{box-shadow:none;padding:16px 16px 16px 0;box-sizing:border-box;width:100%;border:none;background-color:inherit;color:inherit}.vd-select-filter-wrap .vd-select-filter-inner .vd-select-filter:focus-visible{border:none;outline:none}.vd-select-filter-wrap .mat-divider{display:block;width:100%;border-top-width:1px;border-top-style:solid;box-sizing:border-box}::ng-deep .mat-mdc-select-trigger{display:flex!important}::ng-deep .mat-mdc-select-trigger .mat-icon{display:flex;margin-right:8px}::ng-deep .mat-mdc-chip{background-color:var(--mdc-chip-elevated-container-color, transparent);border-radius:var(--mdc-chip-container-shape-radius, 16px 16px 16px 16px);color:inherit;display:inline-block;line-height:20px;height:24px!important;padding:1px 16px}::ng-deep .mat-mdc-chip:not(:last-child){margin:1px 4px 1px 0}::ng-deep .mat-mdc-chip>span{color:var(--mdc-chip-label-text-color, inherit);display:inline-block;font-size:.94em;line-height:1.8em}\n"] }]
|
|
12892
12904
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.NgControl, decorators: [{
|
|
12893
12905
|
type: Optional
|
|
12894
12906
|
}, {
|
|
@@ -13281,7 +13293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
|
|
|
13281
13293
|
args: ['keydown', ['$event']]
|
|
13282
13294
|
}] } });
|
|
13283
13295
|
|
|
13284
|
-
class VdFilterOptionDirective extends
|
|
13296
|
+
class VdFilterOptionDirective extends CdkPortal {
|
|
13285
13297
|
constructor(templateRef, viewContainerRef) {
|
|
13286
13298
|
super(templateRef, viewContainerRef);
|
|
13287
13299
|
}
|
|
@@ -13568,43 +13580,11 @@ class FilterSelectComponent {
|
|
|
13568
13580
|
provide: MAT_SELECT_CONFIG,
|
|
13569
13581
|
useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
|
|
13570
13582
|
}
|
|
13571
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdFilterOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template:
|
|
13572
|
-
<mat-form-field [ngClass]="{'filter-not-empty': value}" flex>
|
|
13573
|
-
<span matPrefix *ngIf="!value && value!=0 && !focused"><mat-icon fontSet="material-symbols-outlined">manage_search</mat-icon></span>
|
|
13574
|
-
<mat-select type="input" [(ngModel)]="value" [multiple]="multiple" flex>
|
|
13575
|
-
<mat-form-field *ngIf="filterable" appearance="fill" subscriptSizing="dynamic" flex>
|
|
13576
|
-
<input matInput #filterInput type="text" placeholder="Filter..." class="vd-select-filter" (keyup)="handleFilter($event)" flex>
|
|
13577
|
-
<mat-icon *ngIf="filterInput?.value" (click)="filterInput!.value = ''; handleFilter($event);" fontSet="material-symbols-outlined">close</mat-icon>
|
|
13578
|
-
</mat-form-field>
|
|
13579
|
-
<mat-option *ngIf="!multiple" class="tc-grey-500"></mat-option>
|
|
13580
|
-
<ng-template let-option let-first="first" ngFor [ngForOf]="filteredOptions">
|
|
13581
|
-
<mat-option [value]="option[key]">
|
|
13582
|
-
<span *ngIf="!optionTemplate?.templateRef" i18n="@@selection">{option.name, select, option {option} other {{{option[text]}}}}</span>
|
|
13583
|
-
<ng-template *ngIf="optionTemplate?.templateRef" [ngTemplateOutlet]="optionTemplate!.templateRef" [ngTemplateOutletContext]="{ option: option }"></ng-template>
|
|
13584
|
-
</mat-option>
|
|
13585
|
-
</ng-template>
|
|
13586
|
-
</mat-select>
|
|
13587
|
-
</mat-form-field>`, isInline: true, styles: ["::ng-deep .vd-select-filter-overlay{min-width:150px}:is() ::ng-deep .mat-mdc-select-panel{padding-top:0!important}:is() .mat-mdc-form-field{position:sticky;top:0;z-index:100;width:100%}:is() .mat-mdc-form-field.mat-focused .mat-mdc-form-field-focus-overlay{opacity:0!important}:is() .mat-mdc-form-field mat-icon{cursor:pointer}mat-icon{opacity:.7}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
|
|
13583
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdFilterOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<mat-form-field [ngClass]=\"{'filter-not-empty': value}\" flex>\r\n <span matPrefix *ngIf=\"!value && value!=0 && !focused\"><mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon></span>\r\n <mat-select type=\"input\" [(ngModel)]=\"value\" [multiple]=\"multiple\" flex>\r\n <mat-form-field *ngIf=\"filterable\" appearance=\"fill\" subscriptSizing=\"dynamic\" flex>\r\n <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event)\" flex>\r\n <mat-icon *ngIf=\"filterInput?.value\" (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </mat-form-field>\r\n <mat-option *ngIf=\"!multiple\" class=\"tc-grey-500\"></mat-option>\r\n <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n <mat-option [value]=\"option[key]\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option.name, select, option {option} other {{{option[text]}}}}</span>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate!.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n</mat-form-field>", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: 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: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i5$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
|
|
13588
13584
|
}
|
|
13589
13585
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: FilterSelectComponent, decorators: [{
|
|
13590
13586
|
type: Component,
|
|
13591
|
-
args: [{ selector: 'mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]',
|
|
13592
|
-
<mat-form-field [ngClass]="{'filter-not-empty': value}" flex>
|
|
13593
|
-
<span matPrefix *ngIf="!value && value!=0 && !focused"><mat-icon fontSet="material-symbols-outlined">manage_search</mat-icon></span>
|
|
13594
|
-
<mat-select type="input" [(ngModel)]="value" [multiple]="multiple" flex>
|
|
13595
|
-
<mat-form-field *ngIf="filterable" appearance="fill" subscriptSizing="dynamic" flex>
|
|
13596
|
-
<input matInput #filterInput type="text" placeholder="Filter..." class="vd-select-filter" (keyup)="handleFilter($event)" flex>
|
|
13597
|
-
<mat-icon *ngIf="filterInput?.value" (click)="filterInput!.value = ''; handleFilter($event);" fontSet="material-symbols-outlined">close</mat-icon>
|
|
13598
|
-
</mat-form-field>
|
|
13599
|
-
<mat-option *ngIf="!multiple" class="tc-grey-500"></mat-option>
|
|
13600
|
-
<ng-template let-option let-first="first" ngFor [ngForOf]="filteredOptions">
|
|
13601
|
-
<mat-option [value]="option[key]">
|
|
13602
|
-
<span *ngIf="!optionTemplate?.templateRef" i18n="@@selection">{option.name, select, option {option} other {{{option[text]}}}}</span>
|
|
13603
|
-
<ng-template *ngIf="optionTemplate?.templateRef" [ngTemplateOutlet]="optionTemplate!.templateRef" [ngTemplateOutletContext]="{ option: option }"></ng-template>
|
|
13604
|
-
</mat-option>
|
|
13605
|
-
</ng-template>
|
|
13606
|
-
</mat-select>
|
|
13607
|
-
</mat-form-field>`, providers: [
|
|
13587
|
+
args: [{ selector: 'mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]', providers: [
|
|
13608
13588
|
{
|
|
13609
13589
|
provide: NG_VALUE_ACCESSOR,
|
|
13610
13590
|
useExisting: forwardRef((() => FilterSelectComponent)),
|
|
@@ -13614,7 +13594,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImpor
|
|
|
13614
13594
|
provide: MAT_SELECT_CONFIG,
|
|
13615
13595
|
useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
|
|
13616
13596
|
}
|
|
13617
|
-
],
|
|
13597
|
+
], template: "<mat-form-field [ngClass]=\"{'filter-not-empty': value}\" flex>\r\n <span matPrefix *ngIf=\"!value && value!=0 && !focused\"><mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon></span>\r\n <mat-select type=\"input\" [(ngModel)]=\"value\" [multiple]=\"multiple\" flex>\r\n <mat-form-field *ngIf=\"filterable\" appearance=\"fill\" subscriptSizing=\"dynamic\" flex>\r\n <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (keyup)=\"handleFilter($event)\" flex>\r\n <mat-icon *ngIf=\"filterInput?.value\" (click)=\"filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </mat-form-field>\r\n <mat-option *ngIf=\"!multiple\" class=\"tc-grey-500\"></mat-option>\r\n <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n <mat-option [value]=\"option[key]\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option.name, select, option {option} other {{{option[text]}}}}</span>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate!.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n</mat-form-field>" }]
|
|
13618
13598
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1$4.MatTable }, { type: i2$2.CdkColumnDef }], propDecorators: { optionTemplate: [{
|
|
13619
13599
|
type: ContentChild,
|
|
13620
13600
|
args: [VdFilterOptionDirective]
|