@messaia/cdk 17.1.2 → 17.1.3
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.
|
@@ -145,11 +145,11 @@ export class VdSelectComponent extends AbstractSelectFormField {
|
|
|
145
145
|
}
|
|
146
146
|
}
|
|
147
147
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", 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.ErrorStateMatcher }, { token: i3.FocusMonitor }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
148
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [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>{{getTriggerValues(select.selected)}}</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: getTriggerValues(select.selected) }\"></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 <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\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[key]\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], 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 <!-- #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 *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n <ng-container *ngIf=\"multiple\">\r\n <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n <span *ngIf=\"!last\">, </span>\r\n </span>\r\n </ng-container>\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}::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:
|
|
148
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [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>{{getTriggerValues(select.selected)}}</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: getTriggerValues(select.selected) }\"></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 <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\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[key]\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], 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 <!-- #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 *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n <ng-container *ngIf=\"multiple\">\r\n <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n <span *ngIf=\"!last\">, </span>\r\n </span>\r\n </ng-container>\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}::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}::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;padding:1px 16px;font-size:.94em}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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.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.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }] });
|
|
149
149
|
}
|
|
150
150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: VdSelectComponent, decorators: [{
|
|
151
151
|
type: Component,
|
|
152
|
-
args: [{ selector: 'vd-select', providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [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>{{getTriggerValues(select.selected)}}</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: getTriggerValues(select.selected) }\"></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 <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\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[key]\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], 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 <!-- #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 *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n <ng-container *ngIf=\"multiple\">\r\n <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n <span *ngIf=\"!last\">, </span>\r\n </span>\r\n </ng-container>\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}::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:
|
|
152
|
+
args: [{ selector: 'vd-select', providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [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>{{getTriggerValues(select.selected)}}</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: getTriggerValues(select.selected) }\"></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 <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\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[key]\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], 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 <!-- #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 *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n <ng-container *ngIf=\"multiple\">\r\n <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n <span *ngIf=\"!last\">, </span>\r\n </span>\r\n </ng-container>\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}::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}::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;padding:1px 16px;font-size:.94em}\n"] }]
|
|
153
153
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.NgControl, decorators: [{
|
|
154
154
|
type: Optional
|
|
155
155
|
}, {
|
package/fesm2022/messaia-cdk.mjs
CHANGED
|
@@ -12476,11 +12476,11 @@ class VdSelectComponent extends AbstractSelectFormField {
|
|
|
12476
12476
|
}
|
|
12477
12477
|
}
|
|
12478
12478
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", 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 });
|
|
12479
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [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>{{getTriggerValues(select.selected)}}</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: getTriggerValues(select.selected) }\"></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 <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\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[key]\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], 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 <!-- #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 *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n <ng-container *ngIf=\"multiple\">\r\n <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n <span *ngIf=\"!last\">, </span>\r\n </span>\r\n </ng-container>\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}::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:
|
|
12479
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", 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)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [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>{{getTriggerValues(select.selected)}}</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: getTriggerValues(select.selected) }\"></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 <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\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[key]\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], 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 <!-- #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 *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n <ng-container *ngIf=\"multiple\">\r\n <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n <span *ngIf=\"!last\">, </span>\r\n </span>\r\n </ng-container>\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}::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}::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;padding:1px 16px;font-size:.94em}\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"] }] });
|
|
12480
12480
|
}
|
|
12481
12481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: VdSelectComponent, decorators: [{
|
|
12482
12482
|
type: Component,
|
|
12483
|
-
args: [{ selector: 'vd-select', providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [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>{{getTriggerValues(select.selected)}}</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: getTriggerValues(select.selected) }\"></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 <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\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[key]\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], 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 <!-- #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 *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n <ng-container *ngIf=\"multiple\">\r\n <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n <span *ngIf=\"!last\">, </span>\r\n </span>\r\n </ng-container>\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}::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:
|
|
12483
|
+
args: [{ selector: 'vd-select', providers: [{ provide: MatFormFieldControl, useExisting: VdSelectComponent }], template: "<mat-select [placeholder]=\"placeholder\" i18n-placeholder [(ngModel)]=\"value\" #select=\"matSelect\" (selectionChange)=\"handleChange($event)\" *ngIf=\"!readonly\" [multiple]=\"multiple\" [compareWith]=\"compareWith\" [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>{{getTriggerValues(select.selected)}}</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: getTriggerValues(select.selected) }\"></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 <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate?.templateRef!\" [ngTemplateOutletContext]=\"{ trigger: getTriggerValues(select.selected) }\"></ng-template>\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[key]\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option[text], 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 <!-- #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 *ngIf=\"!multiple\" i18n=\"@@selection\">{currentValue[text], select, option {option} other {{{currentValue[text]}}}}</span>\r\n <ng-container *ngIf=\"multiple\">\r\n <span *ngFor=\"let optionValue of currentValue; let last = last\">\r\n <span i18n=\"@@selection\">{optionValue[text], select, option {option} other {{{optionValue[text]}}}}</span>\r\n <span *ngIf=\"!last\">, </span>\r\n </span>\r\n </ng-container>\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}::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}::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;padding:1px 16px;font-size:.94em}\n"] }]
|
|
12484
12484
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.NgControl, decorators: [{
|
|
12485
12485
|
type: Optional
|
|
12486
12486
|
}, {
|