@entake/particle 18.0.0 → 18.0.2
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/README.md +1 -1
- package/app/modules/keyfilter/keyfilter.directive.d.ts +8 -2
- package/esm2022/app/modules/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/app/modules/keyfilter/keyfilter.directive.mjs +19 -3
- package/esm2022/app/modules/multi-select/multi-select.component.mjs +3 -3
- package/fesm2022/entake-particle.mjs +22 -6
- package/fesm2022/entake-particle.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -7755,7 +7755,7 @@ class DropdownComponent {
|
|
|
7755
7755
|
useExisting: forwardRef(() => DropdownComponent),
|
|
7756
7756
|
multi: true
|
|
7757
7757
|
}
|
|
7758
|
-
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\">\r\n <div #dropdownList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text.placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{groupOption.label}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{option.label}}\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <ng-container *ngFor=\"let option of options\">\r\n <ng-container *ngIf=\"option.type === 'group'\">\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n <ng-container *ngFor=\"let groupOption of option.options\">\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n </ng-container>\r\n </optgroup>\r\n </ng-container>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{font-size:14pt;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
|
|
7758
|
+
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\">\r\n <div #dropdownList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text.placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{groupOption.label}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{option.label}}\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <ng-container *ngFor=\"let option of options\">\r\n <ng-container *ngIf=\"option.type === 'group'\">\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n <ng-container *ngFor=\"let groupOption of option.options\">\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n </ng-container>\r\n </optgroup>\r\n </ng-container>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
|
|
7759
7759
|
trigger('openClose', [
|
|
7760
7760
|
transition('close => open', [
|
|
7761
7761
|
style({ transform: 'scaleY(0.5)', opacity: 0 }),
|
|
@@ -7787,7 +7787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
7787
7787
|
useExisting: forwardRef(() => DropdownComponent),
|
|
7788
7788
|
multi: true
|
|
7789
7789
|
}
|
|
7790
|
-
], template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\">\r\n <div #dropdownList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text.placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{groupOption.label}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{option.label}}\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <ng-container *ngFor=\"let option of options\">\r\n <ng-container *ngIf=\"option.type === 'group'\">\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n <ng-container *ngFor=\"let groupOption of option.options\">\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n </ng-container>\r\n </optgroup>\r\n </ng-container>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{font-size:14pt;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"] }]
|
|
7790
|
+
], template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\">\r\n <div #dropdownList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text.placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{groupOption.label}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{option.label}}\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <ng-container *ngFor=\"let option of options\">\r\n <ng-container *ngIf=\"option.type === 'group'\">\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n <ng-container *ngFor=\"let groupOption of option.options\">\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n </ng-container>\r\n </optgroup>\r\n </ng-container>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"] }]
|
|
7791
7791
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
|
7792
7792
|
type: Input
|
|
7793
7793
|
}], options: [{
|
|
@@ -8427,7 +8427,7 @@ class MultiSelectComponent {
|
|
|
8427
8427
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
8428
8428
|
multi: true
|
|
8429
8429
|
}
|
|
8430
|
-
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true }, { propertyName: "multiSelectButton", first: true, predicate: ["multiSelectButton"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "multiSelectOptions", predicate: ["multiSelectOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type === 'input' || (type === 'expanded' && maxExpandedEntries > 0 && optionCount > maxExpandedEntries) else expanded\">\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text.of}} {{optionCount}} {{text.optionsSelected}}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleEntry>\r\n <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n <div class=\"col overflow_hide\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"mar_tb5 pad_tb2\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder + '...'}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div #multiSelectList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [ngClass]=\"type === 'expanded' && expandedAsGrid ? 'particle_multi_select_grid' : ''\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n role=\"option\" type=\"button\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{font-size:14pt;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
|
|
8430
|
+
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true }, { propertyName: "multiSelectButton", first: true, predicate: ["multiSelectButton"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "multiSelectOptions", predicate: ["multiSelectOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type === 'input' || (type === 'expanded' && maxExpandedEntries > 0 && optionCount > maxExpandedEntries) else expanded\">\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text.of}} {{optionCount}} {{text.optionsSelected}}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleEntry>\r\n <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n <div class=\"col overflow_hide\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"mar_tb5 pad_tb2\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder + '...'}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div #multiSelectList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [ngClass]=\"type === 'expanded' && expandedAsGrid ? 'particle_multi_select_grid' : ''\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n role=\"option\" type=\"button\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
|
|
8431
8431
|
trigger('openClose', [
|
|
8432
8432
|
transition('close => open', [
|
|
8433
8433
|
style({ transform: 'scaleY(0.5)', opacity: 0 }),
|
|
@@ -8459,7 +8459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
8459
8459
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
8460
8460
|
multi: true
|
|
8461
8461
|
}
|
|
8462
|
-
], template: "<ng-container *ngIf=\"type === 'input' || (type === 'expanded' && maxExpandedEntries > 0 && optionCount > maxExpandedEntries) else expanded\">\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text.of}} {{optionCount}} {{text.optionsSelected}}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleEntry>\r\n <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n <div class=\"col overflow_hide\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"mar_tb5 pad_tb2\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder + '...'}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div #multiSelectList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [ngClass]=\"type === 'expanded' && expandedAsGrid ? 'particle_multi_select_grid' : ''\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n role=\"option\" type=\"button\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{font-size:14pt;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"] }]
|
|
8462
|
+
], template: "<ng-container *ngIf=\"type === 'input' || (type === 'expanded' && maxExpandedEntries > 0 && optionCount > maxExpandedEntries) else expanded\">\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text.of}} {{optionCount}} {{text.optionsSelected}}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleEntry>\r\n <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n <div class=\"col overflow_hide\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"mar_tb5 pad_tb2\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder + '...'}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div #multiSelectList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [ngClass]=\"type === 'expanded' && expandedAsGrid ? 'particle_multi_select_grid' : ''\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n role=\"option\" type=\"button\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"] }]
|
|
8463
8463
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
|
8464
8464
|
type: Input
|
|
8465
8465
|
}], options: [{
|
|
@@ -8552,12 +8552,22 @@ class KeyfilterDirective {
|
|
|
8552
8552
|
'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
|
|
8553
8553
|
'u', 'v', 'w', 'x', 'y', 'z'
|
|
8554
8554
|
];
|
|
8555
|
+
/**
|
|
8556
|
+
* Array of keyboard alpha key names
|
|
8557
|
+
* @private
|
|
8558
|
+
*/
|
|
8559
|
+
static URL_TOKEN_KEYS = [
|
|
8560
|
+
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
|
|
8561
|
+
'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
|
|
8562
|
+
'u', 'v', 'w', 'x', 'y', 'z', '-', '0', '1', '2',
|
|
8563
|
+
'3', '4', '5', '6', '7', '8', '9'
|
|
8564
|
+
];
|
|
8555
8565
|
/**
|
|
8556
8566
|
* The type of filtering to apply
|
|
8557
8567
|
*/
|
|
8558
8568
|
filterType = null;
|
|
8559
8569
|
/**
|
|
8560
|
-
* Whether
|
|
8570
|
+
* Whether spaces should be allowed (default false)
|
|
8561
8571
|
*/
|
|
8562
8572
|
allowSpaces = false;
|
|
8563
8573
|
/**
|
|
@@ -8566,7 +8576,7 @@ class KeyfilterDirective {
|
|
|
8566
8576
|
* @private
|
|
8567
8577
|
*/
|
|
8568
8578
|
static keyIsNumeric(key) {
|
|
8569
|
-
return new RegExp('^\\d|[
|
|
8579
|
+
return new RegExp('^\\d|[.-]$', 'g').test(key);
|
|
8570
8580
|
}
|
|
8571
8581
|
static keyIsDigit(key) {
|
|
8572
8582
|
return new RegExp('^\\d$', 'g').test(key);
|
|
@@ -8583,6 +8593,9 @@ class KeyfilterDirective {
|
|
|
8583
8593
|
static keyIsAlpha(key) {
|
|
8584
8594
|
return KeyfilterDirective.ALPHA_KEYS.includes(key.toLowerCase());
|
|
8585
8595
|
}
|
|
8596
|
+
static keyIsUrlToken(key) {
|
|
8597
|
+
return KeyfilterDirective.URL_TOKEN_KEYS.includes(key.toLowerCase());
|
|
8598
|
+
}
|
|
8586
8599
|
/**
|
|
8587
8600
|
* Dependency injection site
|
|
8588
8601
|
* @param hostElement
|
|
@@ -8613,6 +8626,9 @@ class KeyfilterDirective {
|
|
|
8613
8626
|
else if (this.filterType === 'digits') {
|
|
8614
8627
|
preventDefault = !KeyfilterDirective.keyIsDigit(key);
|
|
8615
8628
|
}
|
|
8629
|
+
else if (this.filterType === 'url-token') {
|
|
8630
|
+
preventDefault = !KeyfilterDirective.keyIsUrlToken(key);
|
|
8631
|
+
}
|
|
8616
8632
|
else if (this.filterType === 'alphanumeric') {
|
|
8617
8633
|
const isNumeric = KeyfilterDirective.keyIsDigit(key);
|
|
8618
8634
|
const isAlpha = KeyfilterDirective.keyIsAlpha(key);
|