@entake/particle 17.0.1 → 17.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -602,7 +602,7 @@ export class DropdownComponent {
|
|
|
602
602
|
useExisting: forwardRef(() => DropdownComponent),
|
|
603
603
|
multi: true
|
|
604
604
|
}
|
|
605
|
-
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\">\r\n <div #dropdownList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text.placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{groupOption.label}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{option.label}}\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <ng-container *ngFor=\"let option of options\">\r\n <ng-container *ngIf=\"option.type === 'group'\">\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n <ng-container *ngFor=\"let groupOption of option.options\">\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n </ng-container>\r\n </optgroup>\r\n </ng-container>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-size:12px;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{font-size:13px;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
|
|
605
|
+
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\">\r\n <div #dropdownList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text.placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{groupOption.label}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{option.label}}\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <ng-container *ngFor=\"let option of options\">\r\n <ng-container *ngIf=\"option.type === 'group'\">\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n <ng-container *ngFor=\"let groupOption of option.options\">\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n </ng-container>\r\n </optgroup>\r\n </ng-container>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{font-size:14pt;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
|
|
606
606
|
trigger('openClose', [
|
|
607
607
|
transition('close => open', [
|
|
608
608
|
style({ transform: 'scaleY(0.5)', opacity: 0 }),
|
|
@@ -634,7 +634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
|
|
|
634
634
|
useExisting: forwardRef(() => DropdownComponent),
|
|
635
635
|
multi: true
|
|
636
636
|
}
|
|
637
|
-
], template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\">\r\n <div #dropdownList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text.placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{groupOption.label}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{option.label}}\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <ng-container *ngFor=\"let option of options\">\r\n <ng-container *ngIf=\"option.type === 'group'\">\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n <ng-container *ngFor=\"let groupOption of option.options\">\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n </ng-container>\r\n </optgroup>\r\n </ng-container>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-size:12px;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{font-size:13px;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"] }]
|
|
637
|
+
], template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\">\r\n <div #dropdownList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text.placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{groupOption.label}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{option.label}}\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <ng-container *ngFor=\"let option of options\">\r\n <ng-container *ngIf=\"option.type === 'group'\">\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n <ng-container *ngFor=\"let groupOption of option.options\">\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n </ng-container>\r\n </optgroup>\r\n </ng-container>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{font-size:14pt;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"] }]
|
|
638
638
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
|
639
639
|
type: Input
|
|
640
640
|
}], options: [{
|
|
@@ -575,7 +575,7 @@ export class MultiSelectComponent {
|
|
|
575
575
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
576
576
|
multi: true
|
|
577
577
|
}
|
|
578
|
-
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true }, { propertyName: "multiSelectButton", first: true, predicate: ["multiSelectButton"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "multiSelectOptions", predicate: ["multiSelectOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type === 'input' || (type === 'expanded' && maxExpandedEntries > 0 && optionCount > maxExpandedEntries) else expanded\">\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text.of}} {{optionCount}} {{text.optionsSelected}}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleEntry>\r\n <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n <div class=\"col overflow_hide\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"mar_tb5 pad_tb2\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder + '...'}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div #multiSelectList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [ngClass]=\"type === 'expanded' && expandedAsGrid ? 'particle_multi_select_grid' : ''\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n role=\"option\" type=\"button\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-size:12px;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{font-size:13px;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
|
|
578
|
+
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true }, { propertyName: "multiSelectButton", first: true, predicate: ["multiSelectButton"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "multiSelectOptions", predicate: ["multiSelectOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type === 'input' || (type === 'expanded' && maxExpandedEntries > 0 && optionCount > maxExpandedEntries) else expanded\">\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text.of}} {{optionCount}} {{text.optionsSelected}}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleEntry>\r\n <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n <div class=\"col overflow_hide\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"mar_tb5 pad_tb2\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder + '...'}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div #multiSelectList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [ngClass]=\"type === 'expanded' && expandedAsGrid ? 'particle_multi_select_grid' : ''\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n role=\"option\" type=\"button\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{font-size:14pt;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
|
|
579
579
|
trigger('openClose', [
|
|
580
580
|
transition('close => open', [
|
|
581
581
|
style({ transform: 'scaleY(0.5)', opacity: 0 }),
|
|
@@ -607,7 +607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
|
|
|
607
607
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
608
608
|
multi: true
|
|
609
609
|
}
|
|
610
|
-
], template: "<ng-container *ngIf=\"type === 'input' || (type === 'expanded' && maxExpandedEntries > 0 && optionCount > maxExpandedEntries) else expanded\">\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text.of}} {{optionCount}} {{text.optionsSelected}}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleEntry>\r\n <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n <div class=\"col overflow_hide\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"mar_tb5 pad_tb2\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder + '...'}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div #multiSelectList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [ngClass]=\"type === 'expanded' && expandedAsGrid ? 'particle_multi_select_grid' : ''\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n role=\"option\" type=\"button\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-size:12px;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{font-size:13px;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"] }]
|
|
610
|
+
], template: "<ng-container *ngIf=\"type === 'input' || (type === 'expanded' && maxExpandedEntries > 0 && optionCount > maxExpandedEntries) else expanded\">\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text.of}} {{optionCount}} {{text.optionsSelected}}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleEntry>\r\n <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n <div class=\"col overflow_hide\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"mar_tb5 pad_tb2\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder + '...'}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div #multiSelectList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [ngClass]=\"type === 'expanded' && expandedAsGrid ? 'particle_multi_select_grid' : ''\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n role=\"option\" type=\"button\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{font-size:14pt;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"] }]
|
|
611
611
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
|
612
612
|
type: Input
|
|
613
613
|
}], options: [{
|
|
@@ -7755,7 +7755,7 @@ class DropdownComponent {
|
|
|
7755
7755
|
useExisting: forwardRef(() => DropdownComponent),
|
|
7756
7756
|
multi: true
|
|
7757
7757
|
}
|
|
7758
|
-
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\">\r\n <div #dropdownList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text.placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{groupOption.label}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{option.label}}\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <ng-container *ngFor=\"let option of options\">\r\n <ng-container *ngIf=\"option.type === 'group'\">\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n <ng-container *ngFor=\"let groupOption of option.options\">\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n </ng-container>\r\n </optgroup>\r\n </ng-container>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-size:12px;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{font-size:13px;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
|
|
7758
|
+
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\">\r\n <div #dropdownList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text.placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{groupOption.label}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{option.label}}\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <ng-container *ngFor=\"let option of options\">\r\n <ng-container *ngIf=\"option.type === 'group'\">\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n <ng-container *ngFor=\"let groupOption of option.options\">\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n </ng-container>\r\n </optgroup>\r\n </ng-container>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{font-size:14pt;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
|
|
7759
7759
|
trigger('openClose', [
|
|
7760
7760
|
transition('close => open', [
|
|
7761
7761
|
style({ transform: 'scaleY(0.5)', opacity: 0 }),
|
|
@@ -7787,7 +7787,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
|
|
|
7787
7787
|
useExisting: forwardRef(() => DropdownComponent),
|
|
7788
7788
|
multi: true
|
|
7789
7789
|
}
|
|
7790
|
-
], template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\">\r\n <div #dropdownList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text.placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{groupOption.label}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{option.label}}\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <ng-container *ngFor=\"let option of options\">\r\n <ng-container *ngIf=\"option.type === 'group'\">\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n <ng-container *ngFor=\"let groupOption of option.options\">\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n </ng-container>\r\n </optgroup>\r\n </ng-container>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-size:12px;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{font-size:13px;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"] }]
|
|
7790
|
+
], template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\">\r\n <div #dropdownList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text.placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{groupOption.label}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"dropdownId + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{option.label}}\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"dropdownId\"\r\n [disabled]=\"disabled\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <ng-container *ngFor=\"let option of options\">\r\n <ng-container *ngIf=\"option.type === 'group'\">\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n <ng-container *ngFor=\"let groupOption of option.options\">\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n </ng-container>\r\n </optgroup>\r\n </ng-container>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{font-size:14pt;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"] }]
|
|
7791
7791
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
|
7792
7792
|
type: Input
|
|
7793
7793
|
}], options: [{
|
|
@@ -8427,7 +8427,7 @@ class MultiSelectComponent {
|
|
|
8427
8427
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
8428
8428
|
multi: true
|
|
8429
8429
|
}
|
|
8430
|
-
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true }, { propertyName: "multiSelectButton", first: true, predicate: ["multiSelectButton"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "multiSelectOptions", predicate: ["multiSelectOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type === 'input' || (type === 'expanded' && maxExpandedEntries > 0 && optionCount > maxExpandedEntries) else expanded\">\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text.of}} {{optionCount}} {{text.optionsSelected}}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleEntry>\r\n <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n <div class=\"col overflow_hide\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"mar_tb5 pad_tb2\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder + '...'}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div #multiSelectList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [ngClass]=\"type === 'expanded' && expandedAsGrid ? 'particle_multi_select_grid' : ''\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n role=\"option\" type=\"button\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-size:12px;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{font-size:13px;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
|
|
8430
|
+
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true }, { propertyName: "multiSelectButton", first: true, predicate: ["multiSelectButton"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "multiSelectOptions", predicate: ["multiSelectOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type === 'input' || (type === 'expanded' && maxExpandedEntries > 0 && optionCount > maxExpandedEntries) else expanded\">\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text.of}} {{optionCount}} {{text.optionsSelected}}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleEntry>\r\n <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n <div class=\"col overflow_hide\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"mar_tb5 pad_tb2\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder + '...'}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div #multiSelectList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [ngClass]=\"type === 'expanded' && expandedAsGrid ? 'particle_multi_select_grid' : ''\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n role=\"option\" type=\"button\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{font-size:14pt;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], animations: [
|
|
8431
8431
|
trigger('openClose', [
|
|
8432
8432
|
transition('close => open', [
|
|
8433
8433
|
style({ transform: 'scaleY(0.5)', opacity: 0 }),
|
|
@@ -8459,7 +8459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
|
|
|
8459
8459
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
8460
8460
|
multi: true
|
|
8461
8461
|
}
|
|
8462
|
-
], template: "<ng-container *ngIf=\"type === 'input' || (type === 'expanded' && maxExpandedEntries > 0 && optionCount > maxExpandedEntries) else expanded\">\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text.of}} {{optionCount}} {{text.optionsSelected}}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleEntry>\r\n <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n <div class=\"col overflow_hide\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"mar_tb5 pad_tb2\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder + '...'}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div #multiSelectList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [ngClass]=\"type === 'expanded' && expandedAsGrid ? 'particle_multi_select_grid' : ''\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n role=\"option\" type=\"button\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-size:12px;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{font-size:13px;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"] }]
|
|
8462
|
+
], template: "<ng-container *ngIf=\"type === 'input' || (type === 'expanded' && maxExpandedEntries > 0 && optionCount > maxExpandedEntries) else expanded\">\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList ? classList : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text.of}} {{optionCount}} {{text.optionsSelected}}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleEntry>\r\n <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n <div class=\"col overflow_hide\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"mar_tb5 pad_tb2\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text.placeholder + '...'}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center border_left\"\r\n [ngClass]=\"buttonClassList ? buttonClassList : 'ptl_brdr_color'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div #multiSelectList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text.placeholder\"\r\n [ngClass]=\"type === 'expanded' && expandedAsGrid ? 'particle_multi_select_grid' : ''\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n role=\"option\" type=\"button\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"multiSelectId + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList ? ' ' + entryClassList : ' particle_multiselect_option')\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-size:14pt;font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{font-size:14pt;padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"] }]
|
|
8463
8463
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
|
8464
8464
|
type: Input
|
|
8465
8465
|
}], options: [{
|
package/package.json
CHANGED
package/particle.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.input_border_error{background:rgba(var(--bg-red-color),.8);border-color:var(--bg-red-color);border-style:solid;border-width:1px}.input_border_valid{border-color:var(--bg-red-green)}.input_border_color{border-color:var(--body-color)}.multi_L_color{color:var(--bg-grey-color)}.brad_0{border-radius:0}.brad_1{border-radius:1px}.brad_2{border-radius:2px}.brad_3{border-radius:3px}.brad_4{border-radius:4px}.brad_5{border-radius:5px}.brad_10{border-radius:10px}.brad_50{border-radius:50px}.border_top{border-width:1px 0 0!important}.border_bottom{border-width:0 0 1px!important}.border_left{border-width:0 0 0 1px!important}.border_right{border-width:0 1px 0 0!important}.border_top2{border-width:2px 0 0!important}.border_bottom2{border-width:0 0 2px!important}.border_left2{border-width:0 0 0 2px!important}.border_right2{border-width:0 2px 0 0!important}.border_top3{border-width:3px 0 0!important}.border_bottom3{border-width:0 0 3px!important}.border_left3{border-width:0 0 0 3px!important}.border_right3{border-width:0 3px 0 0!important}.border_top4{border-width:4px 0 0!important}.border_bottom4{border-width:0 0 4px!important}.border_left4{border-width:0 0 0 4px!important}.border_right4{border-width:0 4px 0 0!important}.border_top5{border-width:5px 0 0!important}.border_bottom5{border-width:0 0 5px!important}.border_left5{border-width:0 0 0 5px!important}.border_right5{border-width:0 5px 0 0!important}.border_lr{border-width:0 1px!important}.border_tb{border-width:1px 0!important}.border_lr2{border-width:0 2px!important}.border_tb2{border-width:2px 0!important}.border_lr3{border-width:0 3px!important}.border_tb3{border-width:3px 0!important}.border_lr4{border-width:0 4px!important}.border_tb4{border-width:4px 0!important}.border_lr5{border-width:0 5px!important}.border_tb5{border-width:5px 0!important}.border_none{border-width:0!important}*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}button:focus{outline:0;outline:none}button.clear{background:none;border:none;color:inherit;padding:0}.btn{border:0;border-radius:3px;cursor:pointer;flex-shrink:0;outline:none;overflow:hidden;padding:0;position:relative;transition:all .2s ease-in-out;user-select:none;white-space:nowrap}.btn.xsm{font-size:10px;padding:2px 6px}.btn.sm{font-size:12px;padding:3px 8px}.btn.md{font-size:14px;padding:4px 10px}.btn.lg{font-size:16px;padding:5px 12px}.btn.xlg{font-size:18px;padding:6px 14px}.btnset{align-items:center;border:0;box-sizing:border-box;cursor:pointer;display:flex;flex-shrink:0;outline:none;padding:0;user-select:none;white-space:nowrap}.btnset.xsm{font-size:7pt;height:20px;line-height:7pt;padding:3px 15px}.btnset.sm{font-size:9pt;line-height:9pt;padding:3px 15px}.btnset.md{font-size:11pt;line-height:11pt;padding:5px 15px}.btnset.lg{font-size:13pt;line-height:13pt;padding:7px 20px}.btnset.xlg{font-size:15pt;line-height:15pt;padding:9px 25px}.btnset.spaced{margin-left:5px;margin-right:5px}.btnset.pilled{border-radius:88px}.btn.icon_left>.icon,.btn.icon_right>.icon{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;top:0;width:2em}.btn.icon_left>.icon:not(.no_line):after,.btn.icon_right>.icon:not(.no_line):after{border-color:currentColor;border-style:solid;content:"";height:.75em;margin-top:-.37em;opacity:.5;position:absolute;top:50%}.btn.icon_left>.icon{left:0}.btn.icon_left>.icon:not(.no_line):after{border-width:0 1px 0 0;right:0}.btn.icon_right>.icon{right:0}.btn.icon_right>.icon:not(.no_line):after{border-width:0 0 0 1px;left:0}.btn.round{border-radius:50px}.btn>.icon>*{transition:all .15s ease-out}.btn:hover>.icon.shrink>*{transform:scale(.85)}.btn:hover>.icon.grow>*{transform:scale(1.2)}.btn:hover>.icon.turn>*{transform:rotate(20deg)}.btn>.icon.spin>*{transition:all .3s ease-out}.btn:hover>.icon.spin>*{transform:rotate(90deg)}.btn:hover>.icon.slide_left>*{transform:translateX(-.3em)}.btn:hover>.icon.slide_right>*{transform:translateX(.3em)}.btn:hover>.icon.slide_up>*{transform:translateY(-.3em)}.btn:hover>.icon.slide_down>*{transform:translateY(.3em)}.btn:active>.icon>*{transform:none!important}button[disabled]{cursor:not-allowed;opacity:.5}.btn[disabled]:hover>.icon>*{transform:none!important}.btn[disabled].glow:hover{box-shadow:none!important}.t_drag_btn{cursor:grab}.t_drag_btn:hover{background-color:hsla(0,0%,100%,.3);cursor:grab}.t_drag_btn:active{cursor:grabbing}.info_btn{align-items:center;border-radius:3px;cursor:pointer;display:flex;flex:1;flex-basis:220px;justify-content:center;margin:5px;outline:none;text-align:center;user-select:none}.info_btn_number{font-size:34pt;font-weight:500}.tabs .btn_tab{border-radius:0!important;margin-bottom:1px;margin-top:1px;min-height:30px}.tabs .btn_tab:first-child{border-radius:3px 0 0 3px!important;margin-left:1px;margin-right:1px}.tabs .btn_tab:last-child{border-radius:0 3px 3px 0!important;margin-right:1px}.tabs .btn_tab:not(:first-child):not(:last-child){margin-right:1px}.tabs_fullwidth .btn_tab{align-items:center;border:0;border-radius:0;cursor:pointer;display:flex;justify-content:center;margin-bottom:1px;outline:none;padding:0;position:relative;text-align:center;transition:all .2s ease-in-out;user-select:none}.tabs_fullwidth .btn_tab.selected{margin-bottom:0}.tabs_fullwidth>.btn_tab>.tab_color{height:3px;left:0;position:absolute;top:0;transition:width .3s ease-in-out;width:0}.tabs_fullwidth>.btn_tab.selected>.tab_color{width:100%}.tabs_fullwidth .btn_tab:hover{filter:brightness(1.05)}.tabs_fullwidth .btn_tab:hover .tab_color{width:100%}.tabs_fullwidth.sm>.btn_tab{font-size:10px;padding:8px 5px}.tabs_fullwidth.md>.btn_tab{font-size:12px;padding:10px 5px}.tabs_fullwidth.lg>.btn_tab{font-size:14px;padding:12px 5px}.tabs_fullwidth .btn_tab:not(:last-child){margin-right:1px}.tabs_fullwidth .tab_spacer{border:0;border-radius:0;display:flex;margin-bottom:1px}.btn_group{display:flex;flex:1;transition:all .2s ease-in-out}.btn_group.rounded{border-radius:50px}.btn_group .btn{align-items:center;border-radius:0;border-width:1px 0;display:flex;flex:1;font-size:14px;justify-content:center;margin:0;text-align:center}.btn_group.sm .btn{font-size:12px;padding:6px 5px}.btn_group.md .btn{font-size:14px;padding:6px 5px}.btn_group.lg .btn{font-size:16px;padding:10px 5px}.btn_group .btn:first-child{border-bottom-left-radius:3px!important;border-left-width:1px;border-right-width:1px;border-top-left-radius:3px!important}.btn_group .btn:last-child{border-bottom-right-radius:3px!important;border-right-width:1px;border-top-right-radius:3px!important}.btn_group .btn:not(:first-child):not(:last-child){border-right-width:1px}.btn_group.rounded .btn{border-radius:50px!important}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:hsla(0,0%,100%,.5);border-radius:10px}::-webkit-scrollbar-thumb{background-color:var(--footer-color);border:1px solid hsla(0,0%,100%,.5);border-radius:10px}::-webkit-scrollbar-thumb:hover{background-color:var(--header-color);border:1px solid hsla(0,0%,100%,.5)}.shadow{box-shadow:0 6px 10px -6px rgba(0,0,0,.3)}.card_shadow{box-shadow:0 2px 4px 0 rgba(0,0,0,.12)}.menu_shadow{box-shadow:0 20px 30px 0 rgba(0,0,0,.4)}.dash_shadow{box-shadow:0 5px 5px -5px rgba(0,0,0,.4)}.intake_shadow{box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}.page_shadow{box-shadow:0 10px 22px -11px rgba(0,0,0,.6)}.box_shadow{box-shadow:0 2px 5px 1px rgba(0,0,0,.07)}.dash_blur{backdrop-filter:blur(10px)}.hov_sm_grow:hover{transform:scale(1.08)}.hov_grow:hover{transform:scale(1.02)}.hov_mid_grow:hover{transform:scale(1.2)}.hov_big_grow:hover{transform:scale(1.4)}.hov_underline:hover{box-shadow:inset 0 -5px 0 0 hsla(0,0%,88%,.7)}.hov_underline_md:hover{box-shadow:inset 0 -2px 0 0 hsla(0,0%,88%,.7)}.hov_slide_down,.hov_slide_left,.hov_slide_right,.hov_slide_up{transition:all .2s ease}.hov_slide_right:hover{transform:translateX(10px)}.hov_slide_left:hover{transform:translateX(-10px)}.hov_slide_up:hover{transform:translateY(-5px)}.hov_slide_down:hover{transform:translateY(5px)}.hov_highlight{transition:.3s}.hov_highlight:hover{background-color:var(--menu-color)}.hov_dash_slideshade{box-shadow:0 5px 5px -5px rgba(0,0,0,.4);transition:.3s}.hov_dash_slideshade:hover{box-shadow:0 15px 15px -15px rgba(0,0,0,.8);transform:translateY(-5px)}.hov_bg{transition:background-color .2s ease}.hov_bg:disabled:hover,.hov_bg:not(:hover){background:none;color:inherit}.hov_glow:hover{box-shadow:inset 0 0 0 100px hsla(0,0%,100%,.15)}.hov_glow:active{box-shadow:none}.hov_darken:hover{box-shadow:inset 0 0 0 100px rgba(0,0,0,.1)}.hov_darken:active{box-shadow:none}.opacity_0{opacity:0}.opacity_10{opacity:.1}.opacity_20{opacity:.2}.opacity_30{opacity:.3}.opacity_40{opacity:.4}.opacity_50{opacity:.5}.opacity_60{opacity:.6}.opacity_70{opacity:.7}.opacity_80{opacity:.8}.opacity_90{opacity:.9}.caret_opacity_on,.opacity_100{opacity:1}.caret_opacity_off{opacity:.3}.rich-text-link{color:inherit;font-weight:700;text-decoration:underline}.test{background-color:var(--bg-purple-color);color:var(--body-color)}.body_image_gradient_to_right{background:linear-gradient(to right,var(--body-color) 20%,transparent)}.body_image_gradient_to_left{background:linear-gradient(to left,var(--body-color) 20%,transparent)}.menu_title_gradient{background:linear-gradient(to right,var(--header-color),var(--menu-color))}.menu_sidebar_gradient{background:linear-gradient(to bottom,var(--header-color),var(--menu-color))}.rotate_me{animation:rotate 20s linear infinite}@keyframes rotate{to{transform:rotate(1turn)}}.cell_loader{background:linear-gradient(270deg,var(--content-color)0,var(--body-color) 26%,var(--body-color) 86%,var(--content-color) 100%);height:100%;overflow:hidden;position:relative}.cell_loader__progress{animation-duration:1.5s;animation-iteration-count:infinite;animation-name:cell_loader;background:linear-gradient(to right,transparent 10%,var(--content-color) 45%,var(--content-color) 55%,transparent 90%);bottom:0;height:100vh;margin-top:-20vh;min-width:300px;position:absolute;top:0;transform:rotate(15deg);transition:ease-in-out}@keyframes cell_loader{0%{left:-80%}to{left:120%}}input::placeholder{color:inherit;opacity:.5}select::placeholder{color:inherit;opacity:.5}input[type=radio]{accent-color:var(--ok-button-color)}.ptl_placeholder{color:inherit;opacity:.5}.ptl_input{align-items:center;display:flex;flex:auto;margin:0;outline:none;width:100%}.ptl_input_text_size{font-size:14pt}.ptl_input_label_size{font-size:12pt}.ptl_input_bg_color{background-color:#fff}.ptl_brdr_color{border-color:#e7e7e7;border-style:solid}.ptl_brdr_size{border-width:1px}.ptl_brdr_radius{border-radius:5px}.ptl_input_height{height:50px}.ptl_input_padding{padding:0 10px}.draggable_placeholder{background-color:hsla(0,0%,78%,.2);border:3px dotted hsla(0,0%,78%,.3);box-sizing:border-box;height:75px}.editor_slide{transition:all .1s ease}.drag_handle{cursor:ns-resize;opacity:.5;transition:all .3s ease-in-out}.drag_handle:hover{cursor:ns-resize;opacity:1}.row_handle{opacity:.5;transition:all .3s ease-in-out}.row_handle:hover{opacity:1}.drag_field{border-radius:3px;cursor:move;transition:all .3s ease-in-out}.drag_field:hover{background-color:rgba(6,119,197,.1);cursor:move}.row_config{opacity:.5;transition:all .3s ease-in-out}.row_config:hover{cursor:pointer;opacity:1}.rowgrow{box-shadow:0 0 0 5px hsla(0,0%,100%,0);opacity:.8;transition:all .1s ease-in-out}.rowgrow:hover{box-shadow:0 0 0 5px #fff;opacity:1;transform:scale(1.4);z-index:var(--z-frame)}.rowadd{transform:scale(.7);transition:all .1s ease-in-out}.rowadd:hover{transform:scale(1)}.edit_field{display:flex;flex:1;opacity:0;transition:all .3s ease-in-out}.editfieldhov:hover .edit_field{opacity:1}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;filter:brightness(.95)}.field_error{border:1px solid var(--delete-button-color)}.field_set{font-size:16px;min-height:40px}.field_set,.form_input{margin:0;outline:none;padding:5px;transition:all .2s ease-in-out;width:100%}.form_input{border:1px solid hsla(0,0%,50%,.4);border-radius:0;font-size:13px;min-height:30px}.form_input:hover{box-shadow:inset 0 -2px 0 0 hsla(0,0%,47%,.2)}.form_input:hover:disabled{box-shadow:none}.form_input:focus{outline:1px solid hsla(0,0%,50%,.6)}.form_checkbox{height:20px;margin:0;min-height:20px;min-width:20px;outline:none;width:20px}.form_checkbox:focus{outline:1px solid hsla(0,0%,50%,.6)}.form_textarea{border-radius:0;margin:0;min-height:30px;outline:none;padding:5px;resize:vertical;transition:all .2s ease-in-out;width:100%}.form_group_header{font-size:10pt}.label_group{align-items:center;display:flex;margin:3px 0}.form_cell.col.size_2{flex-basis:28px}.field_required{font-size:4pt;justify-content:flex-start}.field_help,.field_required,.field_valid{align-items:center;display:flex;margin-left:5px}.field_help{font-size:10pt}.form_label{font-size:12px;font-weight:500;padding:0}.form_label.sm{font-size:10px}.form_label.md{font-size:12px}.form_label.lg{font-size:14px}.form_label.light{font-weight:300}.form_label.bold{font-weight:600}.input_label{display:inline-block;font-size:14px;margin-bottom:4px}input,select{background-color:inherit;border:1px solid hsla(0,0%,50%,.3);color:inherit}select:not(:disabled){cursor:pointer}.input,.input_lefticon>input,.input_righticon>input,.select{border-radius:3px;outline:none;width:100%}.select{cursor:pointer}.select_icon{background-color:inherit;border:1px solid hsla(0,0%,50%,.3);border-radius:3px}.select_icon>select{background-color:inherit;border:none;color:inherit;cursor:pointer;outline:none;width:100%}.input,.input.md,.input_lefticon.md>input,.input_lefticon>input,.input_righticon.md>input,.input_righticon>input{font-size:14px;padding:6px 12px}.select,.select.md{font-size:14px;padding:5px 12px}.select_icon.md>select,.select_icon>select{font-size:14px;padding:5px 12px 5px 3px}.input_lefticon,.input_lefticon.md,.input_righticon,.input_righticon.md,.select_icon,.select_icon.md{font-size:14px}.input.sm,.input_lefticon.sm>input,.input_righticon.sm>input{font-size:12px;padding:5px 10px}.select.sm{font-size:12px;padding:4px 10px}.select_icon.sm>select{font-size:12px;padding:4px 10px 4px 2px}.input_lefticon.sm,.input_righticon.sm,.select_icon.sm{font-size:12px}.input.lg,.input_lefticon.lg>input,.input_righticon.lg>input{font-size:16px;padding:8px 12px}.select.lg{font-size:16px;padding:7px 12px}.select_icon.lg>select{font-size:16px;padding:7px 12px 7px 3px}.input_lefticon.lg,.input_righticon.lg,.select_icon.lg{font-size:16px}.input_lefticon,.input_righticon,.select_icon{position:relative}.input_lefticon>svg,.select_icon>svg{font-size:inherit;left:.6em;margin-top:-.5em;opacity:.8;position:absolute;top:50%;z-index:var(--z-frame)}.input_lefticon>input{padding-left:3em!important}.input_lefticon>input,.select_icon{background-image:linear-gradient(90deg,#999,#999);background-position:2.25em 50%;background-repeat:no-repeat;background-size:1px 1em}.select_icon{padding-left:2.5em!important}.input_righticon>svg{font-size:inherit;opacity:.8;position:absolute;right:.6em;z-index:var(--z-frame)}.input_righticon>input{background-image:linear-gradient(90deg,#999,#999);background-position:calc(100% - 2.25em) 50%;background-repeat:no-repeat;background-size:1px 1em;padding-right:3em!important}textarea.input{line-height:150%;min-height:2em;resize:none}.fullwidth_input{border:1px solid rgba(50,50,50,.2);border-radius:3px;font-size:11pt;outline:none;padding:5px 10px;width:100%}select.fullwidth_input{padding:4px 10px}.fullwidth_input.sm{font-size:10pt;padding:2px 5px}.fullwidth_textarea{border:1px solid rgba(50,50,50,.2);border-radius:3px;font-size:11pt;min-height:50px;padding:5px 10px;resize:none;width:100%}.fullwidth_textarea.sm{font-size:10pt;padding:2px 5px}.height100{height:100%}.width100{width:100%}.row_block{display:block}.row{display:flex;flex:1;-ms-flex:1 1 100%}.row.column{flex-direction:column}.col{display:flex;flex:0 1 auto}.col.column{flex-direction:column}.col.size_1{flex:1}.col.size_2{flex:2}.col.size_3{flex:3}.col.size_4{flex:4}.col.size_5{flex:5}.col.size_6{flex:6}.col.size_7{flex:7}.col.size_8{flex:8}.col.size_9{flex:9}.col.size_10{flex:10}.rc_gap{column-gap:10px}.r_gap,.rc_gap{row-gap:10px}.c_gap{column-gap:10px}.rc_meta_gap{column-gap:5px;row-gap:5px}.bg_everyodd>*{background-color:hsla(0,0%,50%,.05)}.bg_everyodd>:nth-child(2n){background:none!important}.bg_everyodd_component>*>div{background-color:hsla(0,0%,50%,.05)}.bg_everyodd_component>:nth-child(2n)>div{background:none!important}.bg_everyeven>*{background-color:hsla(0,0%,50%,.05)}.bg_everyeven>:nth-child(odd){background:none!important}.bg_everyeven_component>*>div{background-color:hsla(0,0%,50%,.05)}.bg_everyeven_component>:nth-child(odd)>div{background:none!important}.scroll_y{overflow-x:hidden;overflow-y:scroll}.scroll_yauto{overflow-x:hidden;overflow-y:auto}.scroll_x{overflow-x:scroll;overflow-y:hidden}.scroll_xauto{overflow-x:auto;overflow-y:hidden}.scroll_xy{overflow-x:scroll;overflow-y:scroll}.scroll_xyauto{overflow-x:auto;overflow-y:auto}.no_overflow,.no_scroll{overflow:hidden!important}.wrap{flex-wrap:wrap}.wrap_reverse{flex-wrap:wrap-reverse}.nowrap{flex-wrap:nowrap}.top_center{justify-content:center}.top_center,.top_left{align-items:flex-start;display:flex}.top_left{justify-content:flex-start}.top_right{align-items:flex-start;display:flex;justify-content:flex-end}.center_center{justify-content:center}.center_center,.center_left{align-items:center;display:flex}.center_left{justify-content:flex-start}.center_right{align-items:center;display:flex;justify-content:flex-end}.bottom_left{justify-content:flex-start}.bottom_center,.bottom_left{align-items:flex-end;display:flex}.bottom_center{justify-content:center}.bottom_right{align-items:flex-end;display:flex;justify-content:flex-end}.space_between{display:flex;justify-content:space-between}.space_around{display:flex;justify-content:space-around}.space_evenly{display:flex;justify-content:space-evenly}.v_center{align-items:center;display:flex}.h_center{display:flex;justify-content:center}.position_relative{position:relative}.position_absolute{position:absolute}.particle_tooltip{animation-duration:.4s;animation-name:fadeInTooltip;background-color:#2f2f2f;border-radius:5px;box-shadow:0 3px 6px 0 rgba(0,0,0,.2);color:#fff;font-size:12px;line-height:1.5;max-width:200px;min-width:75px;padding:3px 5px;position:absolute;text-align:center;z-index:var(--z-notification)}@keyframes fadeInTooltip{0%{opacity:0}to{opacity:1}}.particle_tooltip.top{transform-origin:bottom center}.particle_tooltip.top:after{border:6px solid transparent;border-top-color:#2f2f2f;content:" ";left:50%;margin-left:-6px;position:absolute;top:100%}.particle_tooltip.bottom{transform-origin:top center}.particle_tooltip.bottom:after{border:6px solid transparent;border-bottom-color:#2f2f2f;bottom:100%;content:" ";left:50%;margin-left:-6px;position:absolute}.particle_tooltip.left{transform-origin:right center}.particle_tooltip.left:after{border:6px solid transparent;border-left-color:#2f2f2f;content:" ";left:100%;margin-top:-6px;position:absolute;top:50%}.particle_tooltip.right{transform-origin:left center}.particle_tooltip.right:after{border:6px solid transparent;border-right-color:#2f2f2f;content:" ";margin-top:-6px;position:absolute;right:100%;top:50%}.particle_scroll_button{position:fixed;right:0;transition:all .2s ease-in-out}.particle_layout_sidebar{box-sizing:border-box;display:block;transition:all .2s ease-in-out}.sticky_sidebar{box-sizing:border-box;position:sticky;top:0;width:100%}.overflow_hidden{overflow:hidden}.particle_multi_select_grid{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.bgimage{background-image:url(https://images5.alphacoders.com/432/thumb-1920-432766.jpg);background-position:50%;background-size:cover}.bgimage_fixed{background-image:url(http://www.terrysinay.com/wp-content/uploads/2021/02/dense_woods.jpg)}.bgimage_fixed,.bgimage_fixed2{background-attachment:fixed;background-size:cover}.bgimage_fixed2{background-image:url(https://images5.alphacoders.com/432/thumb-1920-432766.jpg)}video{height:100vh;left:0;object-fit:cover;position:absolute;width:100vw}.pill{align-items:center;border-radius:3px;display:flex;-ms-flex:0 0 auto;justify-content:center;padding:.2em .6em;text-align:center}.pill.round{border-radius:50px}.pill.xsm{font-size:10px}.pill.sm{font-size:12px}.pill.md{font-size:14px}.pill.lg{font-size:16px}.pill.xlg{font-size:18px}.circle_100px,.circle_10px,.circle_12px,.circle_14px,.circle_15px,.circle_16px,.circle_18px,.circle_20px,.circle_22px,.circle_24px,.circle_25px,.circle_26px,.circle_28px,.circle_30px,.circle_32px,.circle_35px,.circle_36px,.circle_40px,.circle_45px,.circle_46px,.circle_50px,.circle_55px,.circle_60px,.circle_70px,.circle_80px,.circle_8px,.circle_90px{align-items:center;border-radius:50%;display:flex;justify-content:center;line-height:1;padding:0;text-align:center;user-select:none}.circle_8px{font-size:3px;height:8px;min-height:8px;min-width:8px;width:8px}.circle_10px{font-size:3px;height:10px;min-height:10px;min-width:10px;width:10px}.circle_12px{font-size:5px;height:12px;min-height:12px;min-width:12px;width:12px}.circle_14px{font-size:7px;height:14px;min-height:14px;min-width:14px;width:14px}.circle_15px{font-size:8px;height:15px;min-height:15px;min-width:15px;width:15px}.circle_16px{font-size:9px;height:16px;min-height:16px;min-width:16px;width:16px}.circle_18px{font-size:9px;height:18px;min-height:18px;min-width:18px;width:18px}.circle_20px{font-size:11px;height:20px;min-height:20px;min-width:20px;width:20px}.circle_22px{font-size:11px;height:22px;min-height:22px;min-width:22px;width:22px}.circle_24px{font-size:13px;height:24px;min-height:24px;min-width:24px;width:24px}.circle_25px{font-size:13px;height:25px;min-height:25px;min-width:25px;width:25px}.circle_26px{font-size:15px;height:26px;min-height:26px;min-width:26px;width:26px}.circle_28px{font-size:15px;height:28px;min-height:28px;min-width:28px;width:28px}.circle_30px{font-size:15px;height:30px;min-height:30px;min-width:30px;width:30px}.circle_32px{font-size:15px;height:32px;min-height:32px;min-width:32px;width:32px}.circle_35px{font-size:16px;height:35px;min-height:35px;min-width:35px;width:35px}.circle_36px{font-size:17px;height:36px;min-height:36px;min-width:36px;width:36px}.circle_40px{font-size:19px;height:40px;min-height:40px;min-width:40px;width:40px}.circle_45px{font-size:22px;height:45px;min-height:45px;min-width:45px;width:45px}.circle_46px{font-size:25px;height:46px;min-height:46px;min-width:46px;width:46px}.circle_50px{font-size:27px;height:50px;min-height:50px;min-width:50px;width:50px}.circle_60px{font-size:30px;height:60px;min-height:60px;min-width:60px;width:60px}.circle_70px{font-size:40px;height:70px;min-height:70px;min-width:70px;width:70px}.circle_80px{font-size:44px;height:80px;min-height:80px;min-width:80px;width:80px}.circle_90px{font-size:44px;height:90px;min-height:90px;min-width:90px;width:90px}.circle_100px{font-size:50px;height:100px;min-height:100px;min-width:100px;width:100px}.square_10px,.square_12px,.square_15px,.square_16px,.square_18px,.square_20px,.square_22px,.square_24px,.square_25px,.square_26px,.square_28px,.square_30px,.square_35px,.square_36px,.square_40px,.square_42px,.square_45px,.square_46px,.square_50px,.square_60px{align-items:center;display:flex;justify-content:center;line-height:1;padding:0;text-align:center;user-select:none}.square_10px{font-size:5px;height:10px;min-height:10px;min-width:10px;width:10px}.square_12px{font-size:7px;height:12px;min-height:12px;min-width:12px;width:12px}.square_15px{font-size:8px;height:15px;min-height:15px;min-width:15px;width:15px}.square_16px{font-size:9px;height:16px;min-height:16px;min-width:16px;width:16px}.square_18px{font-size:9px;height:18px;min-height:18px;min-width:18px;width:18px}.square_20px{font-size:11px;height:20px;min-height:20px;min-width:20px;width:20px}.square_22px{font-size:13px;height:22px;min-height:22px;min-width:22px;width:22px}.square_24px{font-size:13px;height:24px;min-height:24px;min-width:24px;width:24px}.square_25px{font-size:14px;height:25px;min-height:25px;min-width:25px;width:25px}.square_26px{font-size:15px;height:26px;min-height:26px;min-width:26px;width:26px}.square_28px{font-size:17px;height:28px;min-height:28px;min-width:28px;width:28px}.square_30px{font-size:17px;height:30px;min-height:30px;min-width:30px;width:30px}.square_35px{font-size:18px;height:35px;min-height:35px;min-width:35px;width:35px}.square_36px{font-size:20px;height:36px;min-height:36px;min-width:36px;width:36px}.square_40px{font-size:22px;height:40px;min-height:40px;min-width:40px;width:40px}.square_42px{font-size:22px;height:42px;min-height:42px;min-width:42px;width:42px}.square_45px{font-size:22px;height:45px;min-height:45px;min-width:45px;width:45px}.square_46px{font-size:23px;height:46px;min-height:46px;min-width:46px;width:46px}.square_50px{font-size:23px;height:50px;min-height:50px;min-width:50px;width:50px}.square_60px{font-size:29px;height:60px;min-height:60px;min-width:60px;width:60px}.mar_0{margin:0}.mar_1{margin:1px}.mar_2{margin:2px}.mar_3{margin:3px}.mar_4{margin:4px}.mar_5{margin:5px}.mar_10{margin:10px}.mar_15{margin:15px}.mar_20{margin:20px}.mar_25{margin:25px}.mar_30{margin:30px}.mar_35{margin:35px}.mar_40{margin:40px}.mar_45{margin:45px}.mar_50{margin:50px}.mar_lr0{margin-left:0;margin-right:0}.mar_lr1{margin-left:1px;margin-right:1px}.mar_lr2{margin-left:2px;margin-right:2px}.mar_lr3{margin-left:3px;margin-right:3px}.mar_lr4{margin-left:4px;margin-right:4px}.mar_lr5{margin-left:5px;margin-right:5px}.mar_lr10{margin-left:10px;margin-right:10px}.mar_lr15{margin-left:15px;margin-right:15px}.mar_lr20{margin-left:20px;margin-right:20px}.mar_lr25{margin-left:25px;margin-right:25px}.mar_lr30{margin-left:30px;margin-right:30px}.mar_tb0{margin-bottom:0;margin-top:0}.mar_tb1{margin-bottom:1px;margin-top:1px}.mar_tb2{margin-bottom:2px;margin-top:2px}.mar_tb3{margin-bottom:3px;margin-top:3px}.mar_tb5{margin-bottom:5px;margin-top:5px}.mar_tb10{margin-bottom:10px;margin-top:10px}.mar_tb15{margin-bottom:15px;margin-top:15px}.mar_tb20{margin-bottom:20px;margin-top:20px}.mar_tb25{margin-bottom:25px;margin-top:25px}.mar_tb30{margin-bottom:30px;margin-top:30px}.mar_bot0{margin-bottom:0}.mar_bot1{margin-bottom:1px}.mar_bot2{margin-bottom:2px}.mar_bot3{margin-bottom:3px}.mar_bot4{margin-bottom:4px}.mar_bot5{margin-bottom:5px}.mar_bot10{margin-bottom:10px}.mar_bot15{margin-bottom:15px}.mar_bot20{margin-bottom:20px}.mar_bot25{margin-bottom:25px}.mar_bot30{margin-bottom:30px}.mar_bot35{margin-bottom:35px}.mar_bot40{margin-bottom:40px}.mar_bot45{margin-bottom:45px}.mar_bot50{margin-bottom:50px}.mar_top0{margin-top:0}.mar_top1{margin-top:1px}.mar_top2{margin-top:2px}.mar_top3{margin-top:3px}.mar_top4{margin-top:4px}.mar_top5{margin-top:5px}.mar_top10{margin-top:10px}.mar_top15{margin-top:15px}.mar_top20{margin-top:20px}.mar_top25{margin-top:25px}.mar_top30{margin-top:30px}.mar_top35{margin-top:35px}.mar_top40{margin-top:40px}.mar_top45{margin-top:45px}.mar_top50{margin-top:50px}.mar_right0{margin-right:0}.mar_right1{margin-right:1px}.mar_right2{margin-right:2px}.mar_right3{margin-right:3px}.mar_right4{margin-right:4px}.mar_right5{margin-right:5px}.mar_right10{margin-right:10px}.mar_right15{margin-right:15px}.mar_right20{margin-right:20px}.mar_right25{margin-right:25px}.mar_right30{margin-right:30px}.mar_right35{margin-right:35px}.mar_right40{margin-right:40px}.mar_right45{margin-right:45px}.mar_right50{margin-right:50px}.mar_left0{margin-left:0}.mar_left1{margin-left:1px}.mar_left2{margin-left:2px}.mar_left3{margin-left:3px}.mar_left4{margin-left:4px}.mar_left5{margin-left:5px}.mar_left10{margin-left:10px}.mar_left15{margin-left:15px}.mar_left20{margin-left:20px}.mar_left25{margin-left:25px}.mar_left30{margin-left:30px}.mar_left35{margin-left:35px}.mar_left40{margin-left:40px}.mar_left45{margin-left:45px}.mar_left50{margin-left:50px}.pad_0{padding:0}.pad_1{padding:1px}.pad_2{padding:2px}.pad_3{padding:3px}.pad_4{padding:4px}.pad_5{padding:5px}.pad_10{padding:10px}.pad_15{padding:15px}.pad_20{padding:20px}.pad_25{padding:25px}.pad_30{padding:30px}.pad_35{padding:35px}.pad_40{padding:40px}.pad_45{padding:45px}.pad_50{padding:50px}.pad_lr0{padding-left:0;padding-right:0}.pad_lr1{padding-left:1px;padding-right:1px}.pad_lr2{padding-left:2px;padding-right:2px}.pad_lr3{padding-left:3px;padding-right:3px}.pad_lr4{padding-left:4px;padding-right:4px}.pad_lr5{padding-left:5px;padding-right:5px}.pad_lr10{padding-left:10px;padding-right:10px}.pad_lr15{padding-left:15px;padding-right:15px}.pad_lr20{padding-left:20px;padding-right:20px}.pad_tb0{padding-bottom:0;padding-top:0}.pad_tb1{padding-bottom:1px;padding-top:1px}.pad_tb2{padding-bottom:2px;padding-top:2px}.pad_tb3{padding-bottom:3px;padding-top:3px}.pad_tb5{padding-bottom:5px;padding-top:5px}.pad_tb10{padding-bottom:10px;padding-top:10px}.pad_tb15{padding-bottom:15px;padding-top:15px}.pad_tb20{padding-bottom:20px;padding-top:20px}.pad_top0{padding-top:0}.pad_top1{padding-top:1px}.pad_top2{padding-top:2px}.pad_top3{padding-top:3px}.pad_top4{padding-top:4px}.pad_top5{padding-top:5px}.pad_top10{padding-top:10px}.pad_top15{padding-top:15px}.pad_top20{padding-top:20px}.pad_top25{padding-top:25px}.pad_top30{padding-top:30px}.pad_top35{padding-top:35px}.pad_top40{padding-top:40px}.pad_top45{padding-top:45px}.pad_top50{padding-top:50px}.pad_bot0{padding-bottom:0}.pad_bot1{padding-bottom:1px}.pad_bot2{padding-bottom:2px}.pad_bot3{padding-bottom:3px}.pad_bot4{padding-bottom:4px}.pad_bot5{padding-bottom:5px}.pad_bot10{padding-bottom:10px}.pad_bot15{padding-bottom:15px}.pad_bot20{padding-bottom:20px}.pad_bot25{padding-bottom:25px}.pad_bot30{padding-bottom:30px}.pad_bot35{padding-bottom:35px}.pad_bot40{padding-bottom:40px}.pad_bot45{padding-bottom:45px}.pad_bot50{padding-bottom:50px}.pad_left0{padding-left:0}.pad_left1{padding-left:1px}.pad_left2{padding-left:2px}.pad_left3{padding-left:3px}.pad_left4{padding-left:4px}.pad_left5{padding-left:5px}.pad_left10{padding-left:10px}.pad_left15{padding-left:15px}.pad_left20{padding-left:20px}.pad_left25{padding-left:25px}.pad_left30{padding-left:30px}.pad_left35{padding-left:35px}.pad_left40{padding-left:40px}.pad_left45{padding-left:45px}.pad_left50{padding-left:50px}.pad_right0{padding-right:0}.pad_right1{padding-right:1px}.pad_right2{padding-right:2px}.pad_right3{padding-right:3px}.pad_right4{padding-right:4px}.pad_right5{padding-right:5px}.pad_right10{padding-right:10px}.pad_right15{padding-right:15px}.pad_right20{padding-right:20px}.pad_right25{padding-right:25px}.pad_right30{padding-right:30px}.pad_right35{padding-right:35px}.pad_right40{padding-right:40px}.pad_right45{padding-right:45px}.pad_right50{padding-right:50px}.min_w0{min-width:0}.min_w1{min-width:1px}.min_w2{min-width:2px}.min_w3{min-width:3px}.min_w4{min-width:4px}.min_w5{min-width:5px}.min_w10{min-width:10px}.min_w15{min-width:15px}.min_w20{min-width:20px}.min_w25{min-width:25px}.min_w30{min-width:30px}.min_w35{min-width:35px}.min_w40{min-width:40px}.min_w45{min-width:45px}.min_w50{min-width:50px}.min_w55{min-width:55px}.min_w60{min-width:65px}.min_w70{min-width:70px}.min_w75{min-width:75px}.min_w80{min-width:80px}.min_w85{min-width:85px}.min_w90{min-width:90px}.min_w95{min-width:95px}.min_w100{min-width:100px}.min_w125{min-width:125px}.min_w150{min-width:150px}.min_w175{min-width:175px}.min_w200{min-width:200px}.min_w250{min-width:250px}.min_w280{min-width:280px}.min_w300{min-width:300px}.min_w350{min-width:350px}.min_w400{min-width:400px}.min_h0{min-height:0}.min_h1{min-height:1px}.min_h2{min-height:2px}.min_h3{min-height:3px}.min_h4{min-height:4px}.min_h5{min-height:5px}.min_h10{min-height:10px}.min_h15{min-height:15px}.min_h20{min-height:20px}.min_h25{min-height:25px}.min_h30{min-height:30px}.min_h35{min-height:35px}.min_h40{min-height:40px}.min_h45{min-height:45px}.min_h50{min-height:50px}.min_h55{min-height:55px}.min_h60{min-height:60px}.min_h65{min-height:65px}.min_h70{min-height:70px}.min_h75{min-height:75px}.min_h80{min-height:80px}.min_h85{min-height:85px}.min_h90{min-height:90px}.min_h95{min-height:95px}.min_h100{min-height:100px}.min_h150{min-height:150px}.min_h200{min-height:200px}.min_h250{min-height:250px}.min_h300{min-height:300px}.min_h350{min-height:350px}.min_h400{min-height:400px}*,:after,:before{box-sizing:border-box}html{height:100%;overflow-x:hidden;overflow-y:hidden;width:100%}body{margin:0}a{color:inherit;text-decoration:none}nav{display:flex}header{display:block}main{flex:auto}footer{align-items:unset;display:block;min-height:unset}.site{bottom:0;height:100%;left:0;position:fixed;right:0;top:0}.site,.site-content{display:flex;flex:1;flex-direction:column}.site-content{overflow-x:hidden;overflow-y:scroll}.rich_text_formatting{line-height:1.4}.rich_text_formatting img{border-color:var(--ptl-brdr-color);border-radius:var(--ptl-brdr-radius);border-style:solid;border-width:var(--ptl-brdr-size);display:block;margin:10px auto;max-width:calc(100% - 20px)}.text_center{text-align:center}.text_left{text-align:left}.text_right{text-align:right}.text{font-weight:400}.text.paragraph{line-height:150%}.text.lighter{font-weight:100}.text.light{font-weight:200}.text.bold{font-weight:600}.text.bolder{font-weight:800}.text.faded{opacity:.8}.text.left{text-align:left}.text.center{text-align:center}.text.right{text-align:right}.text.justify{text-align:justify}.text.underline{text-decoration:underline}.text.italic{font-style:italic}.text.xsm{font-size:8px}.text.sm{font-size:11px}.text.md{font-size:13px}.text.lg{font-size:18px}.text.xlg{font-size:22px}.text.caps{text-transform:capitalize}.text.uppercase{text-transform:uppercase}.text_nowrap{white-space:nowrap}.text_wrap{white-space:normal}.text_ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}p{margin:0}p img{max-width:100%}.header{font-weight:500;opacity:.9;outline:none;transition:all .3s ease-in-out}.header.paragraph{line-height:1.5}.header.center{text-align:center}.header.xsm{font-size:20px}.header.sm{font-size:24px}.header.md{font-size:28px}.header.lg{font-size:32px}.header.xlg{font-size:36px}.header.lighter{font-weight:200}.header.light{font-weight:300}.header.bold{font-weight:600}.header.bolder{font-weight:700}.subheader{line-height:12px}.line_item{align-items:center;display:flex;width:100%}.line_ellipsis{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis}.line_ellipsis,.line_end,.overflow_hide{white-space:nowrap}.overflow_hide{overflow:hidden;text-overflow:ellipsis}.mobile_only,.mobile_only_flex,.mobile_only_inline,.tablet_only,.tablet_only_flex,.tablet_only_inline{display:none!important}@media screen and (max-width:1024px){.tablet_hide{display:none!important}.tablet_only{display:block!important}.tablet_only_flex{display:flex!important}.tablet_only_inline{display:inline-block!important}.tablet_fullheight{height:auto!important;max-height:unset!important}}@media screen and (max-width:768px){.hide_element,.mobile_hide{display:none!important}.mobile_only{display:block!important}.mobile_only_flex{display:flex!important}.mobile_only_inline{display:inline-block!important}.mobile_pad_0{padding:0}.mobile_text_left{text-align:left}.mobile_text_center{text-align:center}.mobile_center{align-items:center;justify-content:center}.mobile_fullheight{height:auto!important;max-height:unset!important}}@media print{html{overflow-y:auto}body *{visibility:hidden}.layout_sidebar,footer,nav{display:none}.site{display:block;height:auto;overflow-y:hidden;position:static}.site-content{display:block;margin:0}#site-content{margin:0!important}#site-content,#site-content *{visibility:visible}.body_color,.page_container_color{background-color:#fff!important;color:#222!important}.form_cell{border:none!important;padding:5px}.print_hide{display:none}.print_break_after{page-break-after:always}.print_break_before{page-break-before:always}.print_break_avoid{page-break-inside:avoid}}.all_hide{display:none!important}.footer_sticky{bottom:0;position:sticky;z-index:var(--z-frame)}@media screen and (max-width:768px){.footer_sticky{position:relative;z-index:var(--z-base)}}.header_sticky{position:sticky;top:0;z-index:var(--z-frame)}@media screen and (max-width:768px){.header_sticky{position:relative;z-index:var(--z-base)}}.desktop_pad{padding:20px}@media screen and (max-width:768px){.desktop_pad{padding:0}}
|
|
1
|
+
.input_border_error{background:rgba(var(--bg-red-color),.8);border-color:var(--bg-red-color);border-style:solid;border-width:1px}.input_border_valid{border-color:var(--bg-red-green)}.input_border_color{border-color:var(--body-color)}.multi_L_color{color:var(--bg-grey-color)}.brad_0{border-radius:0}.brad_1{border-radius:1px}.brad_2{border-radius:2px}.brad_3{border-radius:3px}.brad_4{border-radius:4px}.brad_5{border-radius:5px}.brad_10{border-radius:10px}.brad_50{border-radius:50px}.border_top{border-width:1px 0 0!important}.border_bottom{border-width:0 0 1px!important}.border_left{border-width:0 0 0 1px!important}.border_right{border-width:0 1px 0 0!important}.border_top2{border-width:2px 0 0!important}.border_bottom2{border-width:0 0 2px!important}.border_left2{border-width:0 0 0 2px!important}.border_right2{border-width:0 2px 0 0!important}.border_top3{border-width:3px 0 0!important}.border_bottom3{border-width:0 0 3px!important}.border_left3{border-width:0 0 0 3px!important}.border_right3{border-width:0 3px 0 0!important}.border_top4{border-width:4px 0 0!important}.border_bottom4{border-width:0 0 4px!important}.border_left4{border-width:0 0 0 4px!important}.border_right4{border-width:0 4px 0 0!important}.border_top5{border-width:5px 0 0!important}.border_bottom5{border-width:0 0 5px!important}.border_left5{border-width:0 0 0 5px!important}.border_right5{border-width:0 5px 0 0!important}.border_lr{border-width:0 1px!important}.border_tb{border-width:1px 0!important}.border_lr2{border-width:0 2px!important}.border_tb2{border-width:2px 0!important}.border_lr3{border-width:0 3px!important}.border_tb3{border-width:3px 0!important}.border_lr4{border-width:0 4px!important}.border_tb4{border-width:4px 0!important}.border_lr5{border-width:0 5px!important}.border_tb5{border-width:5px 0!important}.border_none{border-width:0!important}*{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}button:focus{outline:0;outline:none}button.clear{background:none;border:none;color:inherit;padding:0}.btn{border:0;border-radius:3px;cursor:pointer;flex-shrink:0;outline:none;overflow:hidden;padding:0;position:relative;transition:all .2s ease-in-out;user-select:none;white-space:nowrap}.btn.xsm{font-size:10px;padding:2px 6px}.btn.sm{font-size:12px;padding:3px 8px}.btn.md{font-size:14px;padding:4px 10px}.btn.lg{font-size:16px;padding:5px 12px}.btn.xlg{font-size:18px;padding:6px 14px}.btnset{align-items:center;border:0;box-sizing:border-box;cursor:pointer;display:flex;flex-shrink:0;outline:none;padding:0;user-select:none;white-space:nowrap}.btnset.xsm{font-size:7pt;height:20px;line-height:7pt;padding:3px 15px}.btnset.sm{font-size:9pt;line-height:9pt;padding:3px 15px}.btnset.md{font-size:11pt;line-height:11pt;padding:5px 15px}.btnset.lg{font-size:13pt;line-height:13pt;padding:7px 20px}.btnset.xlg{font-size:15pt;line-height:15pt;padding:9px 25px}.btnset.spaced{margin-left:5px;margin-right:5px}.btnset.pilled{border-radius:88px}.btn.icon_left>.icon,.btn.icon_right>.icon{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;top:0;width:2em}.btn.icon_left>.icon:not(.no_line):after,.btn.icon_right>.icon:not(.no_line):after{border-color:currentColor;border-style:solid;content:"";height:.75em;margin-top:-.37em;opacity:.5;position:absolute;top:50%}.btn.icon_left>.icon{left:0}.btn.icon_left>.icon:not(.no_line):after{border-width:0 1px 0 0;right:0}.btn.icon_right>.icon{right:0}.btn.icon_right>.icon:not(.no_line):after{border-width:0 0 0 1px;left:0}.btn.round{border-radius:50px}.btn>.icon>*{transition:all .15s ease-out}.btn:hover>.icon.shrink>*{transform:scale(.85)}.btn:hover>.icon.grow>*{transform:scale(1.2)}.btn:hover>.icon.turn>*{transform:rotate(20deg)}.btn>.icon.spin>*{transition:all .3s ease-out}.btn:hover>.icon.spin>*{transform:rotate(90deg)}.btn:hover>.icon.slide_left>*{transform:translateX(-.3em)}.btn:hover>.icon.slide_right>*{transform:translateX(.3em)}.btn:hover>.icon.slide_up>*{transform:translateY(-.3em)}.btn:hover>.icon.slide_down>*{transform:translateY(.3em)}.btn:active>.icon>*{transform:none!important}button[disabled]{cursor:not-allowed;opacity:.5}.btn[disabled]:hover>.icon>*{transform:none!important}.btn[disabled].glow:hover{box-shadow:none!important}.t_drag_btn{cursor:grab}.t_drag_btn:hover{background-color:hsla(0,0%,100%,.3);cursor:grab}.t_drag_btn:active{cursor:grabbing}.info_btn{align-items:center;border-radius:3px;cursor:pointer;display:flex;flex:1;flex-basis:220px;justify-content:center;margin:5px;outline:none;text-align:center;user-select:none}.info_btn_number{font-size:34pt;font-weight:500}.tabs .btn_tab{border-radius:0!important;margin-bottom:1px;margin-top:1px;min-height:30px}.tabs .btn_tab:first-child{border-radius:3px 0 0 3px!important;margin-left:1px;margin-right:1px}.tabs .btn_tab:last-child{border-radius:0 3px 3px 0!important;margin-right:1px}.tabs .btn_tab:not(:first-child):not(:last-child){margin-right:1px}.tabs_fullwidth .btn_tab{align-items:center;border:0;border-radius:0;cursor:pointer;display:flex;justify-content:center;margin-bottom:1px;outline:none;padding:0;position:relative;text-align:center;transition:all .2s ease-in-out;user-select:none}.tabs_fullwidth .btn_tab.selected{margin-bottom:0}.tabs_fullwidth>.btn_tab>.tab_color{height:3px;left:0;position:absolute;top:0;transition:width .3s ease-in-out;width:0}.tabs_fullwidth>.btn_tab.selected>.tab_color{width:100%}.tabs_fullwidth .btn_tab:hover{filter:brightness(1.05)}.tabs_fullwidth .btn_tab:hover .tab_color{width:100%}.tabs_fullwidth.sm>.btn_tab{font-size:10px;padding:8px 5px}.tabs_fullwidth.md>.btn_tab{font-size:12px;padding:10px 5px}.tabs_fullwidth.lg>.btn_tab{font-size:14px;padding:12px 5px}.tabs_fullwidth .btn_tab:not(:last-child){margin-right:1px}.tabs_fullwidth .tab_spacer{border:0;border-radius:0;display:flex;margin-bottom:1px}.btn_group{display:flex;flex:1;transition:all .2s ease-in-out}.btn_group.rounded{border-radius:50px}.btn_group .btn{align-items:center;border-radius:0;border-width:1px 0;display:flex;flex:1;font-size:14px;justify-content:center;margin:0;text-align:center}.btn_group.sm .btn{font-size:12px;padding:6px 5px}.btn_group.md .btn{font-size:14px;padding:6px 5px}.btn_group.lg .btn{font-size:16px;padding:10px 5px}.btn_group .btn:first-child{border-bottom-left-radius:3px!important;border-left-width:1px;border-right-width:1px;border-top-left-radius:3px!important}.btn_group .btn:last-child{border-bottom-right-radius:3px!important;border-right-width:1px;border-top-right-radius:3px!important}.btn_group .btn:not(:first-child):not(:last-child){border-right-width:1px}.btn_group.rounded .btn{border-radius:50px!important}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:hsla(0,0%,100%,.5);border-radius:10px}::-webkit-scrollbar-thumb{background-color:var(--footer-color);border:1px solid hsla(0,0%,100%,.5);border-radius:10px}::-webkit-scrollbar-thumb:hover{background-color:var(--header-color);border:1px solid hsla(0,0%,100%,.5)}.shadow{box-shadow:0 6px 10px -6px rgba(0,0,0,.3)}.card_shadow{box-shadow:0 2px 4px 0 rgba(0,0,0,.12)}.menu_shadow{box-shadow:0 20px 30px 0 rgba(0,0,0,.4)}.dash_shadow{box-shadow:0 5px 5px -5px rgba(0,0,0,.4)}.intake_shadow{box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}.page_shadow{box-shadow:0 10px 22px -11px rgba(0,0,0,.6)}.box_shadow{box-shadow:0 2px 5px 1px rgba(0,0,0,.07)}.dash_blur{backdrop-filter:blur(10px)}.hov_sm_grow:hover{transform:scale(1.08)}.hov_grow:hover{transform:scale(1.02)}.hov_mid_grow:hover{transform:scale(1.2)}.hov_big_grow:hover{transform:scale(1.4)}.hov_underline:hover{box-shadow:inset 0 -5px 0 0 hsla(0,0%,88%,.7)}.hov_underline_md:hover{box-shadow:inset 0 -2px 0 0 hsla(0,0%,88%,.7)}.hov_slide_down,.hov_slide_left,.hov_slide_right,.hov_slide_up{transition:all .2s ease}.hov_slide_right:hover{transform:translateX(10px)}.hov_slide_left:hover{transform:translateX(-10px)}.hov_slide_up:hover{transform:translateY(-5px)}.hov_slide_down:hover{transform:translateY(5px)}.hov_highlight{transition:.3s}.hov_highlight:hover{background-color:var(--menu-color)}.hov_dash_slideshade{box-shadow:0 5px 5px -5px rgba(0,0,0,.4);transition:.3s}.hov_dash_slideshade:hover{box-shadow:0 15px 15px -15px rgba(0,0,0,.8);transform:translateY(-5px)}.hov_bg{transition:background-color .2s ease}.hov_bg:disabled:hover,.hov_bg:not(:hover){background:none;color:inherit}.hov_glow:hover{box-shadow:inset 0 0 0 100px hsla(0,0%,100%,.15)}.hov_glow:active{box-shadow:none}.hov_darken:hover{box-shadow:inset 0 0 0 100px rgba(0,0,0,.1)}.hov_darken:active{box-shadow:none}.opacity_0{opacity:0}.opacity_10{opacity:.1}.opacity_20{opacity:.2}.opacity_30{opacity:.3}.opacity_40{opacity:.4}.opacity_50{opacity:.5}.opacity_60{opacity:.6}.opacity_70{opacity:.7}.opacity_80{opacity:.8}.opacity_90{opacity:.9}.caret_opacity_on,.opacity_100{opacity:1}.caret_opacity_off{opacity:.3}.rich-text-link{color:inherit;font-weight:700;text-decoration:underline}.test{background-color:var(--bg-purple-color);color:var(--body-color)}.body_image_gradient_to_right{background:linear-gradient(to right,var(--body-color) 20%,transparent)}.body_image_gradient_to_left{background:linear-gradient(to left,var(--body-color) 20%,transparent)}.menu_title_gradient{background:linear-gradient(to right,var(--header-color),var(--menu-color))}.menu_sidebar_gradient{background:linear-gradient(to bottom,var(--header-color),var(--menu-color))}.rotate_me{animation:rotate 20s linear infinite}@keyframes rotate{to{transform:rotate(1turn)}}.cell_loader{background:linear-gradient(270deg,var(--content-color)0,var(--body-color) 26%,var(--body-color) 86%,var(--content-color) 100%);height:100%;overflow:hidden;position:relative}.cell_loader__progress{animation-duration:1.5s;animation-iteration-count:infinite;animation-name:cell_loader;background:linear-gradient(to right,transparent 10%,var(--content-color) 45%,var(--content-color) 55%,transparent 90%);bottom:0;height:100vh;margin-top:-20vh;min-width:300px;position:absolute;top:0;transform:rotate(15deg);transition:ease-in-out}@keyframes cell_loader{0%{left:-80%}to{left:120%}}input::placeholder{color:inherit;opacity:.5}select::placeholder{color:inherit;opacity:.5}input[type=radio]{accent-color:var(--ok-button-color)}.ptl_placeholder{color:inherit;opacity:.5}.ptl_input{align-items:center;display:flex;flex:auto;margin:0;outline:none;width:100%}.ptl_input_text_size{font-size:14pt}.ptl_input_label_size{font-size:12pt}.ptl_input_bg_color{background-color:#fff}.ptl_brdr_color{border-color:#e7e7e7;border-style:solid}.ptl_brdr_size{border-width:1px}.ptl_brdr_radius{border-radius:5px}.ptl_input_height{height:50px}.ptl_input_padding{padding:0 10px}.draggable_placeholder{background-color:hsla(0,0%,78%,.2);border:3px dotted hsla(0,0%,78%,.3);box-sizing:border-box;height:75px}.editor_slide{transition:all .1s ease}.drag_handle{cursor:ns-resize;opacity:.5;transition:all .3s ease-in-out}.drag_handle:hover{cursor:ns-resize;opacity:1}.row_handle{opacity:.5;transition:all .3s ease-in-out}.row_handle:hover{opacity:1}.drag_field{border-radius:3px;cursor:move;transition:all .3s ease-in-out}.drag_field:hover{background-color:rgba(6,119,197,.1);cursor:move}.row_config{opacity:.5;transition:all .3s ease-in-out}.row_config:hover{cursor:pointer;opacity:1}.rowgrow{box-shadow:0 0 0 5px hsla(0,0%,100%,0);opacity:.8;transition:all .1s ease-in-out}.rowgrow:hover{box-shadow:0 0 0 5px #fff;opacity:1;transform:scale(1.4);z-index:var(--z-frame)}.rowadd{transform:scale(.7);transition:all .1s ease-in-out}.rowadd:hover{transform:scale(1)}.edit_field{display:flex;flex:1;opacity:0;transition:all .3s ease-in-out}.editfieldhov:hover .edit_field{opacity:1}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;filter:brightness(.95)}.field_error{border:1px solid var(--delete-button-color)}.field_set{font-size:16px;min-height:40px}.field_set,.form_input{margin:0;outline:none;padding:5px;transition:all .2s ease-in-out;width:100%}.form_input{border:1px solid hsla(0,0%,50%,.4);border-radius:0;font-size:13px;min-height:30px}.form_input:hover{box-shadow:inset 0 -2px 0 0 hsla(0,0%,47%,.2)}.form_input:hover:disabled{box-shadow:none}.form_input:focus{outline:1px solid hsla(0,0%,50%,.6)}.form_checkbox{height:20px;margin:0;min-height:20px;min-width:20px;outline:none;width:20px}.form_checkbox:focus{outline:1px solid hsla(0,0%,50%,.6)}.form_textarea{border-radius:0;margin:0;min-height:30px;outline:none;padding:5px;resize:vertical;transition:all .2s ease-in-out;width:100%}.form_group_header{font-size:10pt}.label_group{align-items:center;display:flex;margin:3px 0}.form_cell.col.size_2{flex-basis:28px}.field_required{font-size:4pt;justify-content:flex-start}.field_help,.field_required,.field_valid{align-items:center;display:flex;margin-left:5px}.field_help{font-size:10pt}.form_label{font-size:12px;font-weight:500;padding:0}.form_label.sm{font-size:10px}.form_label.md{font-size:12px}.form_label.lg{font-size:14px}.form_label.light{font-weight:300}.form_label.bold{font-weight:600}.input_label{display:inline-block;font-size:14px;margin-bottom:4px}input,select{background-color:inherit;border:1px solid hsla(0,0%,50%,.3);color:inherit}select:not(:disabled){cursor:pointer}.input,.input_lefticon>input,.input_righticon>input,.select{border-radius:3px;outline:none;width:100%}.select{cursor:pointer}.select_icon{background-color:inherit;border:1px solid hsla(0,0%,50%,.3);border-radius:3px}.select_icon>select{background-color:inherit;border:none;color:inherit;cursor:pointer;outline:none;width:100%}.input,.input.md,.input_lefticon.md>input,.input_lefticon>input,.input_righticon.md>input,.input_righticon>input{font-size:14px;padding:6px 12px}.select,.select.md{font-size:14px;padding:5px 12px}.select_icon.md>select,.select_icon>select{font-size:14px;padding:5px 12px 5px 3px}.input_lefticon,.input_lefticon.md,.input_righticon,.input_righticon.md,.select_icon,.select_icon.md{font-size:14px}.input.sm,.input_lefticon.sm>input,.input_righticon.sm>input{font-size:12px;padding:5px 10px}.select.sm{font-size:12px;padding:4px 10px}.select_icon.sm>select{font-size:12px;padding:4px 10px 4px 2px}.input_lefticon.sm,.input_righticon.sm,.select_icon.sm{font-size:12px}.input.lg,.input_lefticon.lg>input,.input_righticon.lg>input{font-size:16px;padding:8px 12px}.select.lg{font-size:16px;padding:7px 12px}.select_icon.lg>select{font-size:16px;padding:7px 12px 7px 3px}.input_lefticon.lg,.input_righticon.lg,.select_icon.lg{font-size:16px}.input_lefticon,.input_righticon,.select_icon{position:relative}.input_lefticon>svg,.select_icon>svg{font-size:inherit;left:.6em;margin-top:-.5em;opacity:.8;position:absolute;top:50%;z-index:var(--z-frame)}.input_lefticon>input{padding-left:3em!important}.input_lefticon>input,.select_icon{background-image:linear-gradient(90deg,#999,#999);background-position:2.25em 50%;background-repeat:no-repeat;background-size:1px 1em}.select_icon{padding-left:2.5em!important}.input_righticon>svg{font-size:inherit;opacity:.8;position:absolute;right:.6em;z-index:var(--z-frame)}.input_righticon>input{background-image:linear-gradient(90deg,#999,#999);background-position:calc(100% - 2.25em) 50%;background-repeat:no-repeat;background-size:1px 1em;padding-right:3em!important}textarea.input{line-height:150%;min-height:2em;resize:none}.fullwidth_input{border:1px solid rgba(50,50,50,.2);border-radius:3px;font-size:11pt;outline:none;padding:5px 10px;width:100%}select.fullwidth_input{padding:4px 10px}.fullwidth_input.sm{font-size:10pt;padding:2px 5px}.fullwidth_textarea{border:1px solid rgba(50,50,50,.2);border-radius:3px;font-size:11pt;min-height:50px;padding:5px 10px;resize:none;width:100%}.fullwidth_textarea.sm{font-size:10pt;padding:2px 5px}.height100{height:100%}.width100{width:100%}.row_block{display:block}.row{display:flex;flex:1;-ms-flex:1 1 100%}.row.column{flex-direction:column}.col{display:flex;flex:0 1 auto}.col.column{flex-direction:column}.col.size_1{flex:1}.col.size_2{flex:2}.col.size_3{flex:3}.col.size_4{flex:4}.col.size_5{flex:5}.col.size_6{flex:6}.col.size_7{flex:7}.col.size_8{flex:8}.col.size_9{flex:9}.col.size_10{flex:10}.rc_gap{column-gap:10px}.r_gap,.rc_gap{row-gap:10px}.c_gap{column-gap:10px}.rc_meta_gap{column-gap:5px;row-gap:5px}.bg_everyodd>*{background-color:hsla(0,0%,50%,.05)}.bg_everyodd>:nth-child(2n){background:none!important}.bg_everyodd_component>*>div{background-color:hsla(0,0%,50%,.05)}.bg_everyodd_component>:nth-child(2n)>div{background:none!important}.bg_everyeven>*{background-color:hsla(0,0%,50%,.05)}.bg_everyeven>:nth-child(odd){background:none!important}.bg_everyeven_component>*>div{background-color:hsla(0,0%,50%,.05)}.bg_everyeven_component>:nth-child(odd)>div{background:none!important}.scroll_y{overflow-x:hidden;overflow-y:scroll}.scroll_yauto{overflow-x:hidden;overflow-y:auto}.scroll_x{overflow-x:scroll;overflow-y:hidden}.scroll_xauto{overflow-x:auto;overflow-y:hidden}.scroll_xy{overflow-x:scroll;overflow-y:scroll}.scroll_xyauto{overflow-x:auto;overflow-y:auto}.no_overflow,.no_scroll{overflow:hidden!important}.wrap{flex-wrap:wrap}.wrap_reverse{flex-wrap:wrap-reverse}.nowrap{flex-wrap:nowrap}.top_center{justify-content:center}.top_center,.top_left{align-items:flex-start;display:flex}.top_left{justify-content:flex-start}.top_right{align-items:flex-start;display:flex;justify-content:flex-end}.center_center{justify-content:center}.center_center,.center_left{align-items:center;display:flex}.center_left{justify-content:flex-start}.center_right{align-items:center;display:flex;justify-content:flex-end}.bottom_left{justify-content:flex-start}.bottom_center,.bottom_left{align-items:flex-end;display:flex}.bottom_center{justify-content:center}.bottom_right{align-items:flex-end;display:flex;justify-content:flex-end}.space_between{display:flex;justify-content:space-between}.space_around{display:flex;justify-content:space-around}.space_evenly{display:flex;justify-content:space-evenly}.v_center{align-items:center;display:flex}.h_center{display:flex;justify-content:center}.position_relative{position:relative}.position_absolute{position:absolute}.particle_tooltip{animation-duration:.4s;animation-name:fadeInTooltip;background-color:#2f2f2f;border-radius:5px;box-shadow:0 3px 6px 0 rgba(0,0,0,.2);color:#fff;font-size:12px;line-height:1.5;max-width:200px;min-width:75px;padding:3px 5px;position:absolute;text-align:center;z-index:var(--z-notification)}@keyframes fadeInTooltip{0%{opacity:0}to{opacity:1}}.particle_tooltip.top{transform-origin:bottom center}.particle_tooltip.top:after{border:6px solid transparent;border-top-color:#2f2f2f;content:" ";left:50%;margin-left:-6px;position:absolute;top:100%}.particle_tooltip.bottom{transform-origin:top center}.particle_tooltip.bottom:after{border:6px solid transparent;border-bottom-color:#2f2f2f;bottom:100%;content:" ";left:50%;margin-left:-6px;position:absolute}.particle_tooltip.left{transform-origin:right center}.particle_tooltip.left:after{border:6px solid transparent;border-left-color:#2f2f2f;content:" ";left:100%;margin-top:-6px;position:absolute;top:50%}.particle_tooltip.right{transform-origin:left center}.particle_tooltip.right:after{border:6px solid transparent;border-right-color:#2f2f2f;content:" ";margin-top:-6px;position:absolute;right:100%;top:50%}.particle_scroll_button{position:fixed;right:0;transition:all .2s ease-in-out}.particle_layout_sidebar{box-sizing:border-box;display:block;transition:all .2s ease-in-out}.sticky_sidebar{box-sizing:border-box;position:sticky;top:0;width:100%}.overflow_hidden{overflow:hidden}.particle_multi_select_grid{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.bgimage{background-image:url(https://images5.alphacoders.com/432/thumb-1920-432766.jpg);background-position:50%;background-size:cover}.bgimage_fixed{background-image:url(http://www.terrysinay.com/wp-content/uploads/2021/02/dense_woods.jpg)}.bgimage_fixed,.bgimage_fixed2{background-attachment:fixed;background-size:cover}.bgimage_fixed2{background-image:url(https://images5.alphacoders.com/432/thumb-1920-432766.jpg)}video{height:100vh;left:0;object-fit:cover;position:absolute;width:100vw}.pill{align-items:center;border-radius:3px;display:flex;-ms-flex:0 0 auto;justify-content:center;padding:.2em .6em;text-align:center}.pill.round{border-radius:50px}.pill.xsm{font-size:10px}.pill.sm{font-size:12px}.pill.md{font-size:14px}.pill.lg{font-size:16px}.pill.xlg{font-size:18px}.circle_100px,.circle_10px,.circle_12px,.circle_14px,.circle_15px,.circle_16px,.circle_18px,.circle_20px,.circle_22px,.circle_24px,.circle_25px,.circle_26px,.circle_28px,.circle_30px,.circle_32px,.circle_35px,.circle_36px,.circle_40px,.circle_45px,.circle_46px,.circle_50px,.circle_55px,.circle_60px,.circle_70px,.circle_80px,.circle_8px,.circle_90px{align-items:center;border-radius:50%;display:flex;justify-content:center;line-height:1;padding:0;text-align:center;user-select:none}.circle_8px{font-size:3pt;height:8px;min-height:8px;min-width:8px;width:8px}.circle_10px{font-size:3pt;height:10px;min-height:10px;min-width:10px;width:10px}.circle_12px{font-size:4pt;height:12px;min-height:12px;min-width:12px;width:12px}.circle_14px{font-size:4pt;height:14px;min-height:14px;min-width:14px;width:14px}.circle_15px{font-size:5pt;height:15px;min-height:15px;min-width:15px;width:15px}.circle_16px{font-size:6pt;height:16px;min-height:16px;min-width:16px;width:16px}.circle_18px{font-size:9pt;height:18px;min-height:18px;min-width:18px;width:18px}.circle_20px{font-size:9pt;height:20px;min-height:20px;min-width:20px;width:20px}.circle_22px{font-size:10pt;height:22px;min-height:22px;min-width:22px;width:22px}.circle_24px{font-size:12pt;height:24px;min-height:24px;min-width:24px;width:24px}.circle_25px{font-size:11pt;height:25px;min-height:25px;min-width:25px;width:25px}.circle_26px{font-size:12pt;height:26px;min-height:26px;min-width:26px;width:26px}.circle_28px{font-size:12pt;height:28px;min-height:28px;min-width:28px;width:28px}.circle_30px{font-size:15pt;height:30px;min-height:30px;min-width:30px;width:30px}.circle_32px{font-size:16pt;height:32px;min-height:32px;min-width:32px;width:32px}.circle_35px{font-size:17pt;height:35px;min-height:35px;min-width:35px;width:35px}.circle_36px{font-size:18pt;height:36px;min-height:36px;min-width:36px;width:36px}.circle_40px{font-size:20pt;height:40px;min-height:40px;min-width:40px;width:40px}.circle_45px{font-size:21pt;height:45px;min-height:45px;min-width:45px;width:45px}.circle_46px{font-size:22pt;height:46px;min-height:46px;min-width:46px;width:46px}.circle_50px{font-size:25pt;height:50px;min-height:50px;min-width:50px;width:50px}.circle_60px{font-size:30pt;height:60px;min-height:60px;min-width:60px;width:60px}.circle_70px{font-size:40pt;height:70px;min-height:70px;min-width:70px;width:70px}.circle_80px{font-size:44pt;height:80px;min-height:80px;min-width:80px;width:80px}.circle_90px{font-size:46pt;height:90px;min-height:90px;min-width:90px;width:90px}.circle_100px{font-size:50pt;height:100px;min-height:100px;min-width:100px;width:100px}.square_10px,.square_12px,.square_15px,.square_16px,.square_18px,.square_20px,.square_22px,.square_24px,.square_25px,.square_26px,.square_28px,.square_30px,.square_35px,.square_36px,.square_40px,.square_42px,.square_45px,.square_46px,.square_50px,.square_60px{align-items:center;display:flex;justify-content:center;line-height:1;padding:0;text-align:center;user-select:none}.square_10px{font-size:5pt;height:10px;min-height:10px;min-width:10px;width:10px}.square_12px{font-size:6pt;height:12px;min-height:12px;min-width:12px;width:12px}.square_15px{font-size:8pt;height:15px;min-height:15px;min-width:15px;width:15px}.square_16px{font-size:8pt;height:16px;min-height:16px;min-width:16px;width:16px}.square_18px{font-size:9pt;height:18px;min-height:18px;min-width:18px;width:18px}.square_20px{font-size:10pt;height:20px;min-height:20px;min-width:20px;width:20px}.square_22px{font-size:10pt;height:22px;min-height:22px;min-width:22px;width:22px}.square_24px{font-size:12pt;height:24px;min-height:24px;min-width:24px;width:24px}.square_25px{font-size:14pt;height:25px;min-height:25px;min-width:25px;width:25px}.square_26px{font-size:15pt;height:26px;min-height:26px;min-width:26px;width:26px}.square_28px{font-size:16pt;height:28px;min-height:28px;min-width:28px;width:28px}.square_30px{font-size:16pt;height:30px;min-height:30px;min-width:30px;width:30px}.square_35px{font-size:18pt;height:35px;min-height:35px;min-width:35px;width:35px}.square_36px{font-size:18pt;height:36px;min-height:36px;min-width:36px;width:36px}.square_40px{font-size:22pt;height:40px;min-height:40px;min-width:40px;width:40px}.square_42px{font-size:24pt;height:42px;min-height:42px;min-width:42px;width:42px}.square_45px{font-size:25pt;height:45px;min-height:45px;min-width:45px;width:45px}.square_46px{font-size:26pt;height:46px;min-height:46px;min-width:46px;width:46px}.square_50px{font-size:28pt;height:50px;min-height:50px;min-width:50px;width:50px}.square_60px{font-size:30pt;height:60px;min-height:60px;min-width:60px;width:60px}.mar_0{margin:0}.mar_1{margin:1px}.mar_2{margin:2px}.mar_3{margin:3px}.mar_4{margin:4px}.mar_5{margin:5px}.mar_10{margin:10px}.mar_15{margin:15px}.mar_20{margin:20px}.mar_25{margin:25px}.mar_30{margin:30px}.mar_35{margin:35px}.mar_40{margin:40px}.mar_45{margin:45px}.mar_50{margin:50px}.mar_lr0{margin-left:0;margin-right:0}.mar_lr1{margin-left:1px;margin-right:1px}.mar_lr2{margin-left:2px;margin-right:2px}.mar_lr3{margin-left:3px;margin-right:3px}.mar_lr4{margin-left:4px;margin-right:4px}.mar_lr5{margin-left:5px;margin-right:5px}.mar_lr10{margin-left:10px;margin-right:10px}.mar_lr15{margin-left:15px;margin-right:15px}.mar_lr20{margin-left:20px;margin-right:20px}.mar_lr25{margin-left:25px;margin-right:25px}.mar_lr30{margin-left:30px;margin-right:30px}.mar_tb0{margin-bottom:0;margin-top:0}.mar_tb1{margin-bottom:1px;margin-top:1px}.mar_tb2{margin-bottom:2px;margin-top:2px}.mar_tb3{margin-bottom:3px;margin-top:3px}.mar_tb5{margin-bottom:5px;margin-top:5px}.mar_tb10{margin-bottom:10px;margin-top:10px}.mar_tb15{margin-bottom:15px;margin-top:15px}.mar_tb20{margin-bottom:20px;margin-top:20px}.mar_tb25{margin-bottom:25px;margin-top:25px}.mar_tb30{margin-bottom:30px;margin-top:30px}.mar_bot0{margin-bottom:0}.mar_bot1{margin-bottom:1px}.mar_bot2{margin-bottom:2px}.mar_bot3{margin-bottom:3px}.mar_bot4{margin-bottom:4px}.mar_bot5{margin-bottom:5px}.mar_bot10{margin-bottom:10px}.mar_bot15{margin-bottom:15px}.mar_bot20{margin-bottom:20px}.mar_bot25{margin-bottom:25px}.mar_bot30{margin-bottom:30px}.mar_bot35{margin-bottom:35px}.mar_bot40{margin-bottom:40px}.mar_bot45{margin-bottom:45px}.mar_bot50{margin-bottom:50px}.mar_top0{margin-top:0}.mar_top1{margin-top:1px}.mar_top2{margin-top:2px}.mar_top3{margin-top:3px}.mar_top4{margin-top:4px}.mar_top5{margin-top:5px}.mar_top10{margin-top:10px}.mar_top15{margin-top:15px}.mar_top20{margin-top:20px}.mar_top25{margin-top:25px}.mar_top30{margin-top:30px}.mar_top35{margin-top:35px}.mar_top40{margin-top:40px}.mar_top45{margin-top:45px}.mar_top50{margin-top:50px}.mar_right0{margin-right:0}.mar_right1{margin-right:1px}.mar_right2{margin-right:2px}.mar_right3{margin-right:3px}.mar_right4{margin-right:4px}.mar_right5{margin-right:5px}.mar_right10{margin-right:10px}.mar_right15{margin-right:15px}.mar_right20{margin-right:20px}.mar_right25{margin-right:25px}.mar_right30{margin-right:30px}.mar_right35{margin-right:35px}.mar_right40{margin-right:40px}.mar_right45{margin-right:45px}.mar_right50{margin-right:50px}.mar_left0{margin-left:0}.mar_left1{margin-left:1px}.mar_left2{margin-left:2px}.mar_left3{margin-left:3px}.mar_left4{margin-left:4px}.mar_left5{margin-left:5px}.mar_left10{margin-left:10px}.mar_left15{margin-left:15px}.mar_left20{margin-left:20px}.mar_left25{margin-left:25px}.mar_left30{margin-left:30px}.mar_left35{margin-left:35px}.mar_left40{margin-left:40px}.mar_left45{margin-left:45px}.mar_left50{margin-left:50px}.pad_0{padding:0}.pad_1{padding:1px}.pad_2{padding:2px}.pad_3{padding:3px}.pad_4{padding:4px}.pad_5{padding:5px}.pad_10{padding:10px}.pad_15{padding:15px}.pad_20{padding:20px}.pad_25{padding:25px}.pad_30{padding:30px}.pad_35{padding:35px}.pad_40{padding:40px}.pad_45{padding:45px}.pad_50{padding:50px}.pad_lr0{padding-left:0;padding-right:0}.pad_lr1{padding-left:1px;padding-right:1px}.pad_lr2{padding-left:2px;padding-right:2px}.pad_lr3{padding-left:3px;padding-right:3px}.pad_lr4{padding-left:4px;padding-right:4px}.pad_lr5{padding-left:5px;padding-right:5px}.pad_lr10{padding-left:10px;padding-right:10px}.pad_lr15{padding-left:15px;padding-right:15px}.pad_lr20{padding-left:20px;padding-right:20px}.pad_tb0{padding-bottom:0;padding-top:0}.pad_tb1{padding-bottom:1px;padding-top:1px}.pad_tb2{padding-bottom:2px;padding-top:2px}.pad_tb3{padding-bottom:3px;padding-top:3px}.pad_tb5{padding-bottom:5px;padding-top:5px}.pad_tb10{padding-bottom:10px;padding-top:10px}.pad_tb15{padding-bottom:15px;padding-top:15px}.pad_tb20{padding-bottom:20px;padding-top:20px}.pad_top0{padding-top:0}.pad_top1{padding-top:1px}.pad_top2{padding-top:2px}.pad_top3{padding-top:3px}.pad_top4{padding-top:4px}.pad_top5{padding-top:5px}.pad_top10{padding-top:10px}.pad_top15{padding-top:15px}.pad_top20{padding-top:20px}.pad_top25{padding-top:25px}.pad_top30{padding-top:30px}.pad_top35{padding-top:35px}.pad_top40{padding-top:40px}.pad_top45{padding-top:45px}.pad_top50{padding-top:50px}.pad_bot0{padding-bottom:0}.pad_bot1{padding-bottom:1px}.pad_bot2{padding-bottom:2px}.pad_bot3{padding-bottom:3px}.pad_bot4{padding-bottom:4px}.pad_bot5{padding-bottom:5px}.pad_bot10{padding-bottom:10px}.pad_bot15{padding-bottom:15px}.pad_bot20{padding-bottom:20px}.pad_bot25{padding-bottom:25px}.pad_bot30{padding-bottom:30px}.pad_bot35{padding-bottom:35px}.pad_bot40{padding-bottom:40px}.pad_bot45{padding-bottom:45px}.pad_bot50{padding-bottom:50px}.pad_left0{padding-left:0}.pad_left1{padding-left:1px}.pad_left2{padding-left:2px}.pad_left3{padding-left:3px}.pad_left4{padding-left:4px}.pad_left5{padding-left:5px}.pad_left10{padding-left:10px}.pad_left15{padding-left:15px}.pad_left20{padding-left:20px}.pad_left25{padding-left:25px}.pad_left30{padding-left:30px}.pad_left35{padding-left:35px}.pad_left40{padding-left:40px}.pad_left45{padding-left:45px}.pad_left50{padding-left:50px}.pad_right0{padding-right:0}.pad_right1{padding-right:1px}.pad_right2{padding-right:2px}.pad_right3{padding-right:3px}.pad_right4{padding-right:4px}.pad_right5{padding-right:5px}.pad_right10{padding-right:10px}.pad_right15{padding-right:15px}.pad_right20{padding-right:20px}.pad_right25{padding-right:25px}.pad_right30{padding-right:30px}.pad_right35{padding-right:35px}.pad_right40{padding-right:40px}.pad_right45{padding-right:45px}.pad_right50{padding-right:50px}.min_w0{min-width:0}.min_w1{min-width:1px}.min_w2{min-width:2px}.min_w3{min-width:3px}.min_w4{min-width:4px}.min_w5{min-width:5px}.min_w10{min-width:10px}.min_w15{min-width:15px}.min_w20{min-width:20px}.min_w25{min-width:25px}.min_w30{min-width:30px}.min_w35{min-width:35px}.min_w40{min-width:40px}.min_w45{min-width:45px}.min_w50{min-width:50px}.min_w55{min-width:55px}.min_w60{min-width:65px}.min_w70{min-width:70px}.min_w75{min-width:75px}.min_w80{min-width:80px}.min_w85{min-width:85px}.min_w90{min-width:90px}.min_w95{min-width:95px}.min_w100{min-width:100px}.min_w125{min-width:125px}.min_w150{min-width:150px}.min_w175{min-width:175px}.min_w200{min-width:200px}.min_w250{min-width:250px}.min_w280{min-width:280px}.min_w300{min-width:300px}.min_w350{min-width:350px}.min_w400{min-width:400px}.min_h0{min-height:0}.min_h1{min-height:1px}.min_h2{min-height:2px}.min_h3{min-height:3px}.min_h4{min-height:4px}.min_h5{min-height:5px}.min_h10{min-height:10px}.min_h15{min-height:15px}.min_h20{min-height:20px}.min_h25{min-height:25px}.min_h30{min-height:30px}.min_h35{min-height:35px}.min_h40{min-height:40px}.min_h45{min-height:45px}.min_h50{min-height:50px}.min_h55{min-height:55px}.min_h60{min-height:60px}.min_h65{min-height:65px}.min_h70{min-height:70px}.min_h75{min-height:75px}.min_h80{min-height:80px}.min_h85{min-height:85px}.min_h90{min-height:90px}.min_h95{min-height:95px}.min_h100{min-height:100px}.min_h150{min-height:150px}.min_h200{min-height:200px}.min_h250{min-height:250px}.min_h300{min-height:300px}.min_h350{min-height:350px}.min_h400{min-height:400px}*,:after,:before{box-sizing:border-box}html{height:100%;overflow-x:hidden;overflow-y:hidden;width:100%}body{margin:0}a{color:inherit;text-decoration:none}nav{display:flex}header{display:block}main{flex:auto}footer{align-items:unset;display:block;min-height:unset}.site{bottom:0;height:100%;left:0;position:fixed;right:0;top:0}.site,.site-content{display:flex;flex:1;flex-direction:column}.site-content{overflow-x:hidden;overflow-y:scroll}.rich_text_formatting{line-height:1.4}.rich_text_formatting img{border-color:var(--ptl-brdr-color);border-radius:var(--ptl-brdr-radius);border-style:solid;border-width:var(--ptl-brdr-size);display:block;margin:10px auto;max-width:calc(100% - 20px)}.text_center{text-align:center}.text_left{text-align:left}.text_right{text-align:right}.text{font-weight:400}.text.paragraph{line-height:150%}.text.lighter{font-weight:100}.text.light{font-weight:200}.text.bold{font-weight:600}.text.bolder{font-weight:800}.text.faded{opacity:.8}.text.left{text-align:left}.text.center{text-align:center}.text.right{text-align:right}.text.justify{text-align:justify}.text.underline{text-decoration:underline}.text.italic{font-style:italic}.text.xsm{font-size:8px}.text.sm{font-size:11px}.text.md{font-size:13px}.text.lg{font-size:18px}.text.xlg{font-size:22px}.text.caps{text-transform:capitalize}.text.uppercase{text-transform:uppercase}.text_nowrap{white-space:nowrap}.text_wrap{white-space:normal}.text_ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}p{margin:0}p img{max-width:100%}.header{font-weight:500;opacity:.9;outline:none;transition:all .3s ease-in-out}.header.paragraph{line-height:1.5}.header.center{text-align:center}.header.xsm{font-size:20px}.header.sm{font-size:24px}.header.md{font-size:28px}.header.lg{font-size:32px}.header.xlg{font-size:36px}.header.lighter{font-weight:200}.header.light{font-weight:300}.header.bold{font-weight:600}.header.bolder{font-weight:700}.subheader{line-height:12px}.line_item{align-items:center;display:flex;width:100%}.line_ellipsis{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis}.line_ellipsis,.line_end,.overflow_hide{white-space:nowrap}.overflow_hide{overflow:hidden;text-overflow:ellipsis}.mobile_only,.mobile_only_flex,.mobile_only_inline,.tablet_only,.tablet_only_flex,.tablet_only_inline{display:none!important}@media screen and (max-width:1024px){.tablet_hide{display:none!important}.tablet_only{display:block!important}.tablet_only_flex{display:flex!important}.tablet_only_inline{display:inline-block!important}.tablet_fullheight{height:auto!important;max-height:unset!important}}@media screen and (max-width:768px){.hide_element,.mobile_hide{display:none!important}.mobile_only{display:block!important}.mobile_only_flex{display:flex!important}.mobile_only_inline{display:inline-block!important}.mobile_pad_0{padding:0}.mobile_text_left{text-align:left}.mobile_text_center{text-align:center}.mobile_center{align-items:center;justify-content:center}.mobile_fullheight{height:auto!important;max-height:unset!important}}@media print{html{overflow-y:auto}body *{visibility:hidden}.layout_sidebar,footer,nav{display:none}.site{display:block;height:auto;overflow-y:hidden;position:static}.site-content{display:block;margin:0}#site-content{margin:0!important}#site-content,#site-content *{visibility:visible}.body_color,.page_container_color{background-color:#fff!important;color:#222!important}.form_cell{border:none!important;padding:5px}.print_hide{display:none}.print_break_after{page-break-after:always}.print_break_before{page-break-before:always}.print_break_avoid{page-break-inside:avoid}}.all_hide{display:none!important}.footer_sticky{bottom:0;position:sticky;z-index:var(--z-frame)}@media screen and (max-width:768px){.footer_sticky{position:relative;z-index:var(--z-base)}}.header_sticky{position:sticky;top:0;z-index:var(--z-frame)}@media screen and (max-width:768px){.header_sticky{position:relative;z-index:var(--z-base)}}.desktop_pad{padding:20px}@media screen and (max-width:768px){.desktop_pad{padding:0}}
|