@entake/particle 19.1.1 → 19.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -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 {};
|
|
@@ -32,6 +32,7 @@ export declare class RichTextComponent implements ControlValueAccessor, AfterVie
|
|
|
32
32
|
private _value;
|
|
33
33
|
private _editable;
|
|
34
34
|
protected readonly window: Window & typeof globalThis;
|
|
35
|
+
private CustomLink;
|
|
35
36
|
editor: Editor;
|
|
36
37
|
get value(): any;
|
|
37
38
|
set value(value: string);
|
|
@@ -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';
|
|
@@ -3825,16 +3825,35 @@ class RichTextComponent {
|
|
|
3825
3825
|
_value = null;
|
|
3826
3826
|
_editable = true;
|
|
3827
3827
|
window = window;
|
|
3828
|
+
CustomLink = Link.extend({
|
|
3829
|
+
renderHTML({ HTMLAttributes }) {
|
|
3830
|
+
const href = HTMLAttributes.href;
|
|
3831
|
+
if (href) {
|
|
3832
|
+
try {
|
|
3833
|
+
const linkUrl = new URL(href, window.location.origin);
|
|
3834
|
+
const currentHost = window.location.hostname;
|
|
3835
|
+
if (linkUrl.hostname !== currentHost) {
|
|
3836
|
+
HTMLAttributes.target = '_blank';
|
|
3837
|
+
HTMLAttributes.rel = 'noopener noreferrer nofollow';
|
|
3838
|
+
}
|
|
3839
|
+
else {
|
|
3840
|
+
HTMLAttributes.target = '_self';
|
|
3841
|
+
HTMLAttributes.rel = undefined;
|
|
3842
|
+
}
|
|
3843
|
+
}
|
|
3844
|
+
catch (e) {
|
|
3845
|
+
console.warn('Invalid URL: ' + href);
|
|
3846
|
+
console.warn(e);
|
|
3847
|
+
}
|
|
3848
|
+
}
|
|
3849
|
+
return ['a', HTMLAttributes, 0];
|
|
3850
|
+
}
|
|
3851
|
+
});
|
|
3828
3852
|
editor = new Editor({
|
|
3829
3853
|
extensions: [
|
|
3830
3854
|
StarterKit,
|
|
3831
|
-
|
|
3832
|
-
openOnClick: false
|
|
3833
|
-
HTMLAttributes: {
|
|
3834
|
-
class: 'rich-text-link',
|
|
3835
|
-
target: '_blank',
|
|
3836
|
-
ref: 'noopener'
|
|
3837
|
-
},
|
|
3855
|
+
this.CustomLink.configure({
|
|
3856
|
+
openOnClick: false
|
|
3838
3857
|
}),
|
|
3839
3858
|
TextAlign.configure({
|
|
3840
3859
|
types: ['heading', 'paragraph'],
|
|
@@ -5275,16 +5294,15 @@ class DropdownComponent {
|
|
|
5275
5294
|
disabled = model(false);
|
|
5276
5295
|
text = input({
|
|
5277
5296
|
placeholder: 'Make a selection'
|
|
5278
|
-
}
|
|
5279
|
-
/**
|
|
5280
|
-
* Class list to assign to the dropdown
|
|
5281
|
-
*/
|
|
5282
|
-
);
|
|
5297
|
+
});
|
|
5283
5298
|
/**
|
|
5284
5299
|
* Class list to assign to the dropdown
|
|
5285
5300
|
*/
|
|
5286
5301
|
classList = input(null);
|
|
5287
5302
|
buttonClassList = input(null);
|
|
5303
|
+
collapsedButtonTemplate = input(null);
|
|
5304
|
+
collapsedButtonTooltipEnabled = input(true);
|
|
5305
|
+
dropdownBoxMinWidth = input(200);
|
|
5288
5306
|
/**
|
|
5289
5307
|
* Event emitted on value change, emits the new value
|
|
5290
5308
|
*/
|
|
@@ -5315,7 +5333,7 @@ class DropdownComponent {
|
|
|
5315
5333
|
/**
|
|
5316
5334
|
* Observable map of option value (stringified if a number) to data context
|
|
5317
5335
|
*/
|
|
5318
|
-
dataContextMap$ = this._options.pipe(map(options => {
|
|
5336
|
+
dataContextMap$ = this._options.pipe(map$1(options => {
|
|
5319
5337
|
let dataContextMap = null;
|
|
5320
5338
|
if (options?.length) {
|
|
5321
5339
|
dataContextMap = {};
|
|
@@ -5335,7 +5353,7 @@ class DropdownComponent {
|
|
|
5335
5353
|
/**
|
|
5336
5354
|
* The data context of the selected option as an Observable
|
|
5337
5355
|
*/
|
|
5338
|
-
selectedDataContext$ = this._internalValue.pipe(withLatestFrom(this.dataContextMap$), map(([value, dataContextMap]) => {
|
|
5356
|
+
selectedDataContext$ = this._internalValue.pipe(withLatestFrom$1(this.dataContextMap$), map$1(([value, dataContextMap]) => {
|
|
5339
5357
|
let dataContext = null;
|
|
5340
5358
|
if (value !== null && dataContextMap !== null) {
|
|
5341
5359
|
const entry = dataContextMap[String(value)];
|
|
@@ -5345,6 +5363,20 @@ class DropdownComponent {
|
|
|
5345
5363
|
}
|
|
5346
5364
|
return dataContext;
|
|
5347
5365
|
}));
|
|
5366
|
+
tooltipData$ = combineLatest([
|
|
5367
|
+
of(this.text().placeholder),
|
|
5368
|
+
this._internalValue.asObservable(),
|
|
5369
|
+
this.dataContextMap$
|
|
5370
|
+
]).pipe(map$1(results => {
|
|
5371
|
+
const placeholder = results[0];
|
|
5372
|
+
const value = results[1];
|
|
5373
|
+
const optionMap = results[2];
|
|
5374
|
+
if (!value) {
|
|
5375
|
+
return placeholder;
|
|
5376
|
+
}
|
|
5377
|
+
const option = optionMap[String(value)];
|
|
5378
|
+
return option ? option.$implicit : value;
|
|
5379
|
+
}));
|
|
5348
5380
|
static getAllOptions(options) {
|
|
5349
5381
|
const allOptions = [];
|
|
5350
5382
|
for (const option of options) {
|
|
@@ -5686,16 +5718,16 @@ class DropdownComponent {
|
|
|
5686
5718
|
* @private
|
|
5687
5719
|
*/
|
|
5688
5720
|
positionDropdownList() {
|
|
5689
|
-
const { left, top, bottom } = this.dropdown.nativeElement.getBoundingClientRect();
|
|
5721
|
+
const { left, right, top, bottom } = this.dropdown.nativeElement.getBoundingClientRect();
|
|
5690
5722
|
const { offsetHeight } = this.dropdownList.nativeElement;
|
|
5691
|
-
const
|
|
5692
|
-
const availableBottomSpace = window.innerHeight -
|
|
5723
|
+
const bottomLeftAnchor = bottom;
|
|
5724
|
+
const availableBottomSpace = window.innerHeight - bottomLeftAnchor;
|
|
5693
5725
|
const availableTopSpace = top;
|
|
5694
5726
|
const offsetListHeight = offsetHeight + DropdownComponent.DROPDOWN_LIST_OFFSET;
|
|
5695
5727
|
let transformOrigin, positionTop;
|
|
5696
5728
|
if (availableBottomSpace > offsetListHeight) {
|
|
5697
5729
|
transformOrigin = 'top left';
|
|
5698
|
-
positionTop = `${
|
|
5730
|
+
positionTop = `${bottomLeftAnchor + DropdownComponent.DROPDOWN_LIST_OFFSET}px`;
|
|
5699
5731
|
}
|
|
5700
5732
|
else if (availableTopSpace > offsetListHeight) {
|
|
5701
5733
|
transformOrigin = 'bottom left';
|
|
@@ -5712,8 +5744,16 @@ class DropdownComponent {
|
|
|
5712
5744
|
transformOrigin = 'top left';
|
|
5713
5745
|
}
|
|
5714
5746
|
this.renderer.setStyle(this.dropdownList.nativeElement, 'transform-origin', transformOrigin);
|
|
5715
|
-
this.renderer.setStyle(this.dropdownList.nativeElement, 'left', `${left}px`);
|
|
5716
5747
|
this.renderer.setStyle(this.dropdownList.nativeElement, 'top', positionTop);
|
|
5748
|
+
const buttonWidth = right - left;
|
|
5749
|
+
const width = buttonWidth < this.dropdownBoxMinWidth() ? this.dropdownBoxMinWidth() : buttonWidth;
|
|
5750
|
+
if (left + width > window.innerWidth) {
|
|
5751
|
+
const newLeft = left - (this.dropdownBoxMinWidth() - buttonWidth);
|
|
5752
|
+
this.renderer.setStyle(this.dropdownList.nativeElement, 'left', `${newLeft}px`);
|
|
5753
|
+
}
|
|
5754
|
+
else {
|
|
5755
|
+
this.renderer.setStyle(this.dropdownList.nativeElement, 'left', `${left}px`);
|
|
5756
|
+
}
|
|
5717
5757
|
}
|
|
5718
5758
|
/**
|
|
5719
5759
|
* Match the dropdown list width to the dropdown's width
|
|
@@ -5721,7 +5761,8 @@ class DropdownComponent {
|
|
|
5721
5761
|
*/
|
|
5722
5762
|
resizeDropdownList() {
|
|
5723
5763
|
const { left, right } = this.dropdown.nativeElement.getBoundingClientRect();
|
|
5724
|
-
|
|
5764
|
+
let width = right - left;
|
|
5765
|
+
width = width < this.dropdownBoxMinWidth() ? this.dropdownBoxMinWidth() : width;
|
|
5725
5766
|
this.renderer.setStyle(this.dropdownList.nativeElement, 'width', `${width}px`);
|
|
5726
5767
|
}
|
|
5727
5768
|
/**
|
|
@@ -5794,13 +5835,13 @@ class DropdownComponent {
|
|
|
5794
5835
|
return previousOption;
|
|
5795
5836
|
}
|
|
5796
5837
|
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.
|
|
5838
|
+
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
5839
|
{
|
|
5799
5840
|
provide: NG_VALUE_ACCESSOR,
|
|
5800
5841
|
useExisting: forwardRef(() => DropdownComponent),
|
|
5801
5842
|
multi: true
|
|
5802
5843
|
}
|
|
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: [
|
|
5844
|
+
], 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
5845
|
trigger('openClose', [
|
|
5805
5846
|
transition('close => open', [
|
|
5806
5847
|
style({ transform: 'scaleY(0.5)', opacity: 0 }),
|
|
@@ -5832,7 +5873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
|
|
|
5832
5873
|
useExisting: forwardRef(() => DropdownComponent),
|
|
5833
5874
|
multi: true
|
|
5834
5875
|
}
|
|
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"] }]
|
|
5876
|
+
], 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
5877
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
5837
5878
|
type: Input
|
|
5838
5879
|
}], options: [{
|