@entake/particle 19.1.1 → 19.1.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.
|
@@ -73,6 +73,9 @@ export declare class DropdownComponent implements ControlValueAccessor {
|
|
|
73
73
|
*/
|
|
74
74
|
readonly classList: import("@angular/core").InputSignal<string>;
|
|
75
75
|
readonly buttonClassList: import("@angular/core").InputSignal<string>;
|
|
76
|
+
readonly collapsedButtonTemplate: import("@angular/core").InputSignal<TemplateRef<any>>;
|
|
77
|
+
readonly collapsedButtonTooltipEnabled: import("@angular/core").InputSignal<boolean>;
|
|
78
|
+
readonly dropdownBoxMinWidth: import("@angular/core").InputSignal<number>;
|
|
76
79
|
/**
|
|
77
80
|
* Event emitted on value change, emits the new value
|
|
78
81
|
*/
|
|
@@ -108,6 +111,7 @@ export declare class DropdownComponent implements ControlValueAccessor {
|
|
|
108
111
|
* The data context of the selected option as an Observable
|
|
109
112
|
*/
|
|
110
113
|
readonly selectedDataContext$: Observable<Record<string, unknown>>;
|
|
114
|
+
tooltipData$: Observable<unknown>;
|
|
111
115
|
private static getAllOptions;
|
|
112
116
|
/**
|
|
113
117
|
* Unique ID to assign to the dropdown
|
|
@@ -281,6 +285,6 @@ export declare class DropdownComponent implements ControlValueAccessor {
|
|
|
281
285
|
*/
|
|
282
286
|
private getPreviousOption;
|
|
283
287
|
static ɵfac: i0.ɵɵFactoryDeclaration<DropdownComponent, never>;
|
|
284
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "particle-dropdown", never, { "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "classList": { "alias": "classList"; "required": false; "isSignal": true; }; "buttonClassList": { "alias": "buttonClassList"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "changed": "changed"; }, ["template"], ["template"], true, never>;
|
|
288
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "particle-dropdown", never, { "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "classList": { "alias": "classList"; "required": false; "isSignal": true; }; "buttonClassList": { "alias": "buttonClassList"; "required": false; "isSignal": true; }; "collapsedButtonTemplate": { "alias": "collapsedButtonTemplate"; "required": false; "isSignal": true; }; "collapsedButtonTooltipEnabled": { "alias": "collapsedButtonTooltipEnabled"; "required": false; "isSignal": true; }; "dropdownBoxMinWidth": { "alias": "dropdownBoxMinWidth"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "changed": "changed"; }, ["template"], ["template"], true, never>;
|
|
285
289
|
}
|
|
286
290
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { NgModule, inject, ElementRef, Renderer2, input, Directive, Input, HostListener, TemplateRef, ContentChild, Injectable, output, Component, ViewChild, ChangeDetectorRef, forwardRef, ViewEncapsulation, Pipe, ViewChildren, model, EventEmitter, Output, ChangeDetectionStrategy, ContentChildren, signal } from '@angular/core';
|
|
3
|
-
import { BehaviorSubject, fromEvent, Subject, combineLatest, Subscription, tap as tap$1, map as map$1,
|
|
3
|
+
import { BehaviorSubject, fromEvent, Subject, combineLatest, Subscription, tap as tap$1, map as map$1, withLatestFrom as withLatestFrom$1, of, shareReplay, catchError, throwError, mergeMap } from 'rxjs';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
6
6
|
import { startWith, map, withLatestFrom, tap } from 'rxjs/operators';
|
|
@@ -5275,16 +5275,15 @@ class DropdownComponent {
|
|
|
5275
5275
|
disabled = model(false);
|
|
5276
5276
|
text = input({
|
|
5277
5277
|
placeholder: 'Make a selection'
|
|
5278
|
-
}
|
|
5279
|
-
/**
|
|
5280
|
-
* Class list to assign to the dropdown
|
|
5281
|
-
*/
|
|
5282
|
-
);
|
|
5278
|
+
});
|
|
5283
5279
|
/**
|
|
5284
5280
|
* Class list to assign to the dropdown
|
|
5285
5281
|
*/
|
|
5286
5282
|
classList = input(null);
|
|
5287
5283
|
buttonClassList = input(null);
|
|
5284
|
+
collapsedButtonTemplate = input(null);
|
|
5285
|
+
collapsedButtonTooltipEnabled = input(true);
|
|
5286
|
+
dropdownBoxMinWidth = input(200);
|
|
5288
5287
|
/**
|
|
5289
5288
|
* Event emitted on value change, emits the new value
|
|
5290
5289
|
*/
|
|
@@ -5315,7 +5314,7 @@ class DropdownComponent {
|
|
|
5315
5314
|
/**
|
|
5316
5315
|
* Observable map of option value (stringified if a number) to data context
|
|
5317
5316
|
*/
|
|
5318
|
-
dataContextMap$ = this._options.pipe(map(options => {
|
|
5317
|
+
dataContextMap$ = this._options.pipe(map$1(options => {
|
|
5319
5318
|
let dataContextMap = null;
|
|
5320
5319
|
if (options?.length) {
|
|
5321
5320
|
dataContextMap = {};
|
|
@@ -5335,7 +5334,7 @@ class DropdownComponent {
|
|
|
5335
5334
|
/**
|
|
5336
5335
|
* The data context of the selected option as an Observable
|
|
5337
5336
|
*/
|
|
5338
|
-
selectedDataContext$ = this._internalValue.pipe(withLatestFrom(this.dataContextMap$), map(([value, dataContextMap]) => {
|
|
5337
|
+
selectedDataContext$ = this._internalValue.pipe(withLatestFrom$1(this.dataContextMap$), map$1(([value, dataContextMap]) => {
|
|
5339
5338
|
let dataContext = null;
|
|
5340
5339
|
if (value !== null && dataContextMap !== null) {
|
|
5341
5340
|
const entry = dataContextMap[String(value)];
|
|
@@ -5345,6 +5344,20 @@ class DropdownComponent {
|
|
|
5345
5344
|
}
|
|
5346
5345
|
return dataContext;
|
|
5347
5346
|
}));
|
|
5347
|
+
tooltipData$ = combineLatest([
|
|
5348
|
+
of(this.text().placeholder),
|
|
5349
|
+
this._internalValue.asObservable(),
|
|
5350
|
+
this.dataContextMap$
|
|
5351
|
+
]).pipe(map$1(results => {
|
|
5352
|
+
const placeholder = results[0];
|
|
5353
|
+
const value = results[1];
|
|
5354
|
+
const optionMap = results[2];
|
|
5355
|
+
if (!value) {
|
|
5356
|
+
return placeholder;
|
|
5357
|
+
}
|
|
5358
|
+
const option = optionMap[String(value)];
|
|
5359
|
+
return option ? option.$implicit : value;
|
|
5360
|
+
}));
|
|
5348
5361
|
static getAllOptions(options) {
|
|
5349
5362
|
const allOptions = [];
|
|
5350
5363
|
for (const option of options) {
|
|
@@ -5686,7 +5699,10 @@ class DropdownComponent {
|
|
|
5686
5699
|
* @private
|
|
5687
5700
|
*/
|
|
5688
5701
|
positionDropdownList() {
|
|
5689
|
-
|
|
5702
|
+
let { left, right, top, bottom } = this.dropdown.nativeElement.getBoundingClientRect();
|
|
5703
|
+
if (right - left < this.dropdownBoxMinWidth()) {
|
|
5704
|
+
left = left - (this.dropdownBoxMinWidth() - (right - left));
|
|
5705
|
+
}
|
|
5690
5706
|
const { offsetHeight } = this.dropdownList.nativeElement;
|
|
5691
5707
|
const datePickerBottomLeftAnchor = bottom;
|
|
5692
5708
|
const availableBottomSpace = window.innerHeight - datePickerBottomLeftAnchor;
|
|
@@ -5721,7 +5737,8 @@ class DropdownComponent {
|
|
|
5721
5737
|
*/
|
|
5722
5738
|
resizeDropdownList() {
|
|
5723
5739
|
const { left, right } = this.dropdown.nativeElement.getBoundingClientRect();
|
|
5724
|
-
|
|
5740
|
+
let width = right - left;
|
|
5741
|
+
width = width < this.dropdownBoxMinWidth() ? this.dropdownBoxMinWidth() : width;
|
|
5725
5742
|
this.renderer.setStyle(this.dropdownList.nativeElement, 'width', `${width}px`);
|
|
5726
5743
|
}
|
|
5727
5744
|
/**
|
|
@@ -5794,13 +5811,13 @@ class DropdownComponent {
|
|
|
5794
5811
|
return previousOption;
|
|
5795
5812
|
}
|
|
5796
5813
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5797
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
5814
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DropdownComponent, isStandalone: true, selector: "particle-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, buttonClassList: { classPropertyName: "buttonClassList", publicName: "buttonClassList", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTemplate: { classPropertyName: "collapsedButtonTemplate", publicName: "collapsedButtonTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTooltipEnabled: { classPropertyName: "collapsedButtonTooltipEnabled", publicName: "collapsedButtonTooltipEnabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownBoxMinWidth: { classPropertyName: "dropdownBoxMinWidth", publicName: "dropdownBoxMinWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { listeners: { "window:resize": "onWindowResize($event)", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
|
|
5798
5815
|
{
|
|
5799
5816
|
provide: NG_VALUE_ACCESSOR,
|
|
5800
5817
|
useExisting: forwardRef(() => DropdownComponent),
|
|
5801
5818
|
multi: true
|
|
5802
5819
|
}
|
|
5803
|
-
], 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\"\r\n [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
|
|
5820
|
+
], 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 @if (tooltipData$ | async; as tooltipData) {\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 [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\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 <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\"\r\n [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\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 }\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }], animations: [
|
|
5804
5821
|
trigger('openClose', [
|
|
5805
5822
|
transition('close => open', [
|
|
5806
5823
|
style({ transform: 'scaleY(0.5)', opacity: 0 }),
|
|
@@ -5832,7 +5849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
5832
5849
|
useExisting: forwardRef(() => DropdownComponent),
|
|
5833
5850
|
multi: true
|
|
5834
5851
|
}
|
|
5835
|
-
], imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, FormsModule, AsyncPipe], 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\"\r\n [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\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"] }]
|
|
5852
|
+
], imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, FormsModule, AsyncPipe, TooltipDirective], 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 @if (tooltipData$ | async; as tooltipData) {\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 [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\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 <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\"\r\n [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\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 }\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"] }]
|
|
5836
5853
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
5837
5854
|
type: Input
|
|
5838
5855
|
}], options: [{
|