[59329aa] | 1 | import * as i0 from '@angular/core';
|
---|
| 2 | import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChildren, ViewChild, Output, NgModule } from '@angular/core';
|
---|
| 3 | import * as i3 from '@angular/common';
|
---|
| 4 | import { CommonModule } from '@angular/common';
|
---|
| 5 | import { RippleModule } from 'primeng/ripple';
|
---|
| 6 | import * as i1 from 'primeng/api';
|
---|
| 7 | import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
|
---|
| 8 | import { trigger, transition, style, animate } from '@angular/animations';
|
---|
| 9 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
---|
| 10 | import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
|
---|
| 11 | import * as i2 from 'primeng/tree';
|
---|
| 12 | import { TreeModule } from 'primeng/tree';
|
---|
| 13 | import { ZIndexUtils } from 'primeng/utils';
|
---|
| 14 |
|
---|
| 15 | const TREESELECT_VALUE_ACCESSOR = {
|
---|
| 16 | provide: NG_VALUE_ACCESSOR,
|
---|
| 17 | useExisting: forwardRef(() => TreeSelect),
|
---|
| 18 | multi: true
|
---|
| 19 | };
|
---|
| 20 | class TreeSelect {
|
---|
| 21 | constructor(config, cd, el, overlayService) {
|
---|
| 22 | this.config = config;
|
---|
| 23 | this.cd = cd;
|
---|
| 24 | this.el = el;
|
---|
| 25 | this.overlayService = overlayService;
|
---|
| 26 | this.type = "button";
|
---|
| 27 | this.scrollHeight = "400px";
|
---|
| 28 | this.metaKeySelection = true;
|
---|
| 29 | this.display = "comma";
|
---|
| 30 | this.selectionMode = "single";
|
---|
| 31 | this.propagateSelectionDown = true;
|
---|
| 32 | this.propagateSelectionUp = true;
|
---|
| 33 | this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
|
---|
| 34 | this.hideTransitionOptions = '.1s linear';
|
---|
| 35 | this.onNodeExpand = new EventEmitter();
|
---|
| 36 | this.onNodeCollapse = new EventEmitter();
|
---|
| 37 | this.onShow = new EventEmitter();
|
---|
| 38 | this.onHide = new EventEmitter();
|
---|
| 39 | this.onNodeUnselect = new EventEmitter();
|
---|
| 40 | this.onNodeSelect = new EventEmitter();
|
---|
| 41 | this.expandedNodes = [];
|
---|
| 42 | this.onModelChange = () => { };
|
---|
| 43 | this.onModelTouched = () => { };
|
---|
| 44 | }
|
---|
| 45 | get options() {
|
---|
| 46 | return this._options;
|
---|
| 47 | }
|
---|
| 48 | ;
|
---|
| 49 | set options(options) {
|
---|
| 50 | this._options = options;
|
---|
| 51 | this.updateTreeState();
|
---|
| 52 | }
|
---|
| 53 | ngOnInit() {
|
---|
| 54 | this.updateTreeState();
|
---|
| 55 | }
|
---|
| 56 | ngAfterContentInit() {
|
---|
| 57 | this.templates.forEach((item) => {
|
---|
| 58 | switch (item.getType()) {
|
---|
| 59 | case 'value':
|
---|
| 60 | this.valueTemplate = item.template;
|
---|
| 61 | break;
|
---|
| 62 | case 'header':
|
---|
| 63 | this.headerTemplate = item.template;
|
---|
| 64 | break;
|
---|
| 65 | case 'empty':
|
---|
| 66 | this.emptyTemplate = item.template;
|
---|
| 67 | break;
|
---|
| 68 | case 'footer':
|
---|
| 69 | this.footerTemplate = item.template;
|
---|
| 70 | break;
|
---|
| 71 | default:
|
---|
| 72 | this.valueTemplate = item.template;
|
---|
| 73 | break;
|
---|
| 74 | }
|
---|
| 75 | });
|
---|
| 76 | }
|
---|
| 77 | onOverlayAnimationStart(event) {
|
---|
| 78 | switch (event.toState) {
|
---|
| 79 | case 'visible':
|
---|
| 80 | this.overlayEl = event.element;
|
---|
| 81 | this.onOverlayEnter();
|
---|
| 82 | break;
|
---|
| 83 | }
|
---|
| 84 | }
|
---|
| 85 | onOverlayAnimationDone(event) {
|
---|
| 86 | switch (event.toState) {
|
---|
| 87 | case 'void':
|
---|
| 88 | this.onOverlayLeave();
|
---|
| 89 | break;
|
---|
| 90 | }
|
---|
| 91 | }
|
---|
| 92 | onSelectionChange(event) {
|
---|
| 93 | this.value = event;
|
---|
| 94 | this.onModelChange(this.value);
|
---|
| 95 | this.cd.markForCheck();
|
---|
| 96 | }
|
---|
| 97 | onClick(event) {
|
---|
| 98 | if (!this.disabled && (!this.overlayEl || !this.overlayEl.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-treeselect-close')) {
|
---|
| 99 | if (this.overlayVisible) {
|
---|
| 100 | this.hide();
|
---|
| 101 | }
|
---|
| 102 | else
|
---|
| 103 | this.show();
|
---|
| 104 | this.focusInput.nativeElement.focus();
|
---|
| 105 | }
|
---|
| 106 | }
|
---|
| 107 | onKeyDown(event) {
|
---|
| 108 | switch (event.which) {
|
---|
| 109 | //down
|
---|
| 110 | case 40:
|
---|
| 111 | if (!this.overlayVisible && event.altKey) {
|
---|
| 112 | this.show();
|
---|
| 113 | event.preventDefault();
|
---|
| 114 | }
|
---|
| 115 | else if (this.overlayVisible && this.overlayEl) {
|
---|
| 116 | let focusableElements = DomHandler.getFocusableElements(this.overlayEl);
|
---|
| 117 | if (focusableElements && focusableElements.length > 0) {
|
---|
| 118 | focusableElements[0].focus();
|
---|
| 119 | }
|
---|
| 120 | event.preventDefault();
|
---|
| 121 | }
|
---|
| 122 | break;
|
---|
| 123 | //space
|
---|
| 124 | case 32:
|
---|
| 125 | if (!this.overlayVisible) {
|
---|
| 126 | this.show();
|
---|
| 127 | event.preventDefault();
|
---|
| 128 | }
|
---|
| 129 | break;
|
---|
| 130 | //enter and escape
|
---|
| 131 | case 13:
|
---|
| 132 | case 27:
|
---|
| 133 | if (this.overlayVisible) {
|
---|
| 134 | this.hide();
|
---|
| 135 | event.preventDefault();
|
---|
| 136 | }
|
---|
| 137 | break;
|
---|
| 138 | //tab
|
---|
| 139 | case 9:
|
---|
| 140 | this.hide();
|
---|
| 141 | break;
|
---|
| 142 | default:
|
---|
| 143 | break;
|
---|
| 144 | }
|
---|
| 145 | }
|
---|
| 146 | show() {
|
---|
| 147 | this.overlayVisible = true;
|
---|
| 148 | }
|
---|
| 149 | hide() {
|
---|
| 150 | this.overlayVisible = false;
|
---|
| 151 | this.cd.markForCheck();
|
---|
| 152 | }
|
---|
| 153 | onOverlayClick(event) {
|
---|
| 154 | this.overlayService.add({
|
---|
| 155 | originalEvent: event,
|
---|
| 156 | target: this.el.nativeElement
|
---|
| 157 | });
|
---|
| 158 | }
|
---|
| 159 | updateTreeState() {
|
---|
| 160 | if (this.value) {
|
---|
| 161 | let selectedNodes = this.selectionMode === "single" ? [this.value] : [...this.value];
|
---|
| 162 | this.resetExpandedNodes();
|
---|
| 163 | if (selectedNodes && this.options) {
|
---|
| 164 | this.updateTreeBranchState(null, null, selectedNodes);
|
---|
| 165 | }
|
---|
| 166 | }
|
---|
| 167 | }
|
---|
| 168 | updateTreeBranchState(node, path, selectedNodes) {
|
---|
| 169 | if (node) {
|
---|
| 170 | if (this.isSelected(node)) {
|
---|
| 171 | this.expandPath(path);
|
---|
| 172 | selectedNodes.splice(selectedNodes.indexOf(node), 1);
|
---|
| 173 | }
|
---|
| 174 | if (selectedNodes.length > 0 && node.children) {
|
---|
| 175 | for (let childNode of node.children) {
|
---|
| 176 | path.push(node);
|
---|
| 177 | this.updateTreeBranchState(childNode, path, selectedNodes);
|
---|
| 178 | }
|
---|
| 179 | }
|
---|
| 180 | }
|
---|
| 181 | else {
|
---|
| 182 | for (let childNode of this.options) {
|
---|
| 183 | this.updateTreeBranchState(childNode, [], selectedNodes);
|
---|
| 184 | }
|
---|
| 185 | }
|
---|
| 186 | }
|
---|
| 187 | expandPath(expandedNodes) {
|
---|
| 188 | for (let node of expandedNodes) {
|
---|
| 189 | node.expanded = true;
|
---|
| 190 | }
|
---|
| 191 | this.expandedNodes = [...expandedNodes];
|
---|
| 192 | }
|
---|
| 193 | nodeExpand(event) {
|
---|
| 194 | this.onNodeExpand.emit(event);
|
---|
| 195 | this.expandedNodes.push(event.node);
|
---|
| 196 | }
|
---|
| 197 | nodeCollapse(event) {
|
---|
| 198 | this.onNodeCollapse.emit(event);
|
---|
| 199 | this.expandedNodes.splice(this.expandedNodes.indexOf(event.node), 1);
|
---|
| 200 | }
|
---|
| 201 | resetExpandedNodes() {
|
---|
| 202 | for (let node of this.expandedNodes) {
|
---|
| 203 | node.expanded = false;
|
---|
| 204 | }
|
---|
| 205 | this.expandedNodes = [];
|
---|
| 206 | }
|
---|
| 207 | findSelectedNodes(node, keys, selectedNodes) {
|
---|
| 208 | if (node) {
|
---|
| 209 | if (this.isSelected(node)) {
|
---|
| 210 | selectedNodes.push(node);
|
---|
| 211 | delete keys[node.key];
|
---|
| 212 | }
|
---|
| 213 | if (Object.keys(keys).length && node.children) {
|
---|
| 214 | for (let childNode of node.children) {
|
---|
| 215 | this.findSelectedNodes(childNode, keys, selectedNodes);
|
---|
| 216 | }
|
---|
| 217 | }
|
---|
| 218 | }
|
---|
| 219 | else {
|
---|
| 220 | for (let childNode of this.options) {
|
---|
| 221 | this.findSelectedNodes(childNode, keys, selectedNodes);
|
---|
| 222 | }
|
---|
| 223 | }
|
---|
| 224 | }
|
---|
| 225 | isSelected(node) {
|
---|
| 226 | return this.findIndexInSelection(node) != -1;
|
---|
| 227 | }
|
---|
| 228 | findIndexInSelection(node) {
|
---|
| 229 | let index = -1;
|
---|
| 230 | if (this.value) {
|
---|
| 231 | if (this.selectionMode === "single") {
|
---|
| 232 | let areNodesEqual = (this.value.key && this.value.key === node.key) || this.value == node;
|
---|
| 233 | index = areNodesEqual ? 0 : -1;
|
---|
| 234 | }
|
---|
| 235 | else {
|
---|
| 236 | for (let i = 0; i < this.value.length; i++) {
|
---|
| 237 | let selectedNode = this.value[i];
|
---|
| 238 | let areNodesEqual = (selectedNode.key && selectedNode.key === node.key) || selectedNode == node;
|
---|
| 239 | if (areNodesEqual) {
|
---|
| 240 | index = i;
|
---|
| 241 | break;
|
---|
| 242 | }
|
---|
| 243 | }
|
---|
| 244 | }
|
---|
| 245 | }
|
---|
| 246 | return index;
|
---|
| 247 | }
|
---|
| 248 | onSelect(node) {
|
---|
| 249 | this.onNodeSelect.emit(node);
|
---|
| 250 | if (this.selectionMode === 'single') {
|
---|
| 251 | this.hide();
|
---|
| 252 | }
|
---|
| 253 | }
|
---|
| 254 | onUnselect(node) {
|
---|
| 255 | this.onNodeUnselect.emit(node);
|
---|
| 256 | }
|
---|
| 257 | onOverlayEnter() {
|
---|
| 258 | ZIndexUtils.set('overlay', this.overlayEl, this.config.zIndex.overlay);
|
---|
| 259 | this.appendContainer();
|
---|
| 260 | this.alignOverlay();
|
---|
| 261 | this.bindOutsideClickListener();
|
---|
| 262 | this.bindScrollListener();
|
---|
| 263 | this.bindResizeListener();
|
---|
| 264 | this.onShow.emit();
|
---|
| 265 | }
|
---|
| 266 | onOverlayLeave() {
|
---|
| 267 | this.unbindOutsideClickListener();
|
---|
| 268 | this.unbindScrollListener();
|
---|
| 269 | this.unbindResizeListener();
|
---|
| 270 | ZIndexUtils.clear(this.overlayEl);
|
---|
| 271 | this.overlayEl = null;
|
---|
| 272 | this.onHide.emit();
|
---|
| 273 | }
|
---|
| 274 | onFocus() {
|
---|
| 275 | this.focused = true;
|
---|
| 276 | }
|
---|
| 277 | onBlur() {
|
---|
| 278 | this.focused = false;
|
---|
| 279 | }
|
---|
| 280 | writeValue(value) {
|
---|
| 281 | this.value = value;
|
---|
| 282 | this.updateTreeState();
|
---|
| 283 | this.cd.markForCheck();
|
---|
| 284 | }
|
---|
| 285 | registerOnChange(fn) {
|
---|
| 286 | this.onModelChange = fn;
|
---|
| 287 | }
|
---|
| 288 | registerOnTouched(fn) {
|
---|
| 289 | this.onModelTouched = fn;
|
---|
| 290 | }
|
---|
| 291 | setDisabledState(val) {
|
---|
| 292 | this.disabled = val;
|
---|
| 293 | this.cd.markForCheck();
|
---|
| 294 | }
|
---|
| 295 | appendContainer() {
|
---|
| 296 | if (this.appendTo) {
|
---|
| 297 | if (this.appendTo === 'body')
|
---|
| 298 | document.body.appendChild(this.overlayEl);
|
---|
| 299 | else
|
---|
| 300 | document.getElementById(this.appendTo).appendChild(this.overlayEl);
|
---|
| 301 | }
|
---|
| 302 | }
|
---|
| 303 | restoreAppend() {
|
---|
| 304 | if (this.overlayEl && this.appendTo) {
|
---|
| 305 | if (this.appendTo === 'body')
|
---|
| 306 | document.body.removeChild(this.overlayEl);
|
---|
| 307 | else
|
---|
| 308 | document.getElementById(this.appendTo).removeChild(this.overlayEl);
|
---|
| 309 | }
|
---|
| 310 | }
|
---|
| 311 | alignOverlay() {
|
---|
| 312 | if (this.appendTo) {
|
---|
| 313 | DomHandler.absolutePosition(this.overlayEl, this.containerEl.nativeElement);
|
---|
| 314 | this.overlayEl.style.minWidth = DomHandler.getOuterWidth(this.containerEl.nativeElement) + 'px';
|
---|
| 315 | }
|
---|
| 316 | else {
|
---|
| 317 | DomHandler.relativePosition(this.overlayEl, this.containerEl.nativeElement);
|
---|
| 318 | }
|
---|
| 319 | }
|
---|
| 320 | bindOutsideClickListener() {
|
---|
| 321 | if (!this.outsideClickListener) {
|
---|
| 322 | this.outsideClickListener = (event) => {
|
---|
| 323 | if (this.overlayVisible && this.overlayEl && !this.containerEl.nativeElement.contains(event.target) && !this.overlayEl.contains(event.target)) {
|
---|
| 324 | this.hide();
|
---|
| 325 | }
|
---|
| 326 | };
|
---|
| 327 | document.addEventListener('click', this.outsideClickListener);
|
---|
| 328 | }
|
---|
| 329 | }
|
---|
| 330 | unbindOutsideClickListener() {
|
---|
| 331 | if (this.outsideClickListener) {
|
---|
| 332 | document.removeEventListener('click', this.outsideClickListener);
|
---|
| 333 | this.outsideClickListener = null;
|
---|
| 334 | }
|
---|
| 335 | }
|
---|
| 336 | bindScrollListener() {
|
---|
| 337 | if (!this.scrollHandler) {
|
---|
| 338 | this.scrollHandler = new ConnectedOverlayScrollHandler(this.containerEl.nativeElement, () => {
|
---|
| 339 | if (this.overlayVisible) {
|
---|
| 340 | this.hide();
|
---|
| 341 | }
|
---|
| 342 | });
|
---|
| 343 | }
|
---|
| 344 | this.scrollHandler.bindScrollListener();
|
---|
| 345 | }
|
---|
| 346 | unbindScrollListener() {
|
---|
| 347 | if (this.scrollHandler) {
|
---|
| 348 | this.scrollHandler.unbindScrollListener();
|
---|
| 349 | }
|
---|
| 350 | }
|
---|
| 351 | bindResizeListener() {
|
---|
| 352 | if (!this.resizeListener) {
|
---|
| 353 | this.resizeListener = () => {
|
---|
| 354 | if (this.overlayVisible) {
|
---|
| 355 | this.hide();
|
---|
| 356 | }
|
---|
| 357 | };
|
---|
| 358 | window.addEventListener('resize', this.resizeListener);
|
---|
| 359 | }
|
---|
| 360 | }
|
---|
| 361 | unbindResizeListener() {
|
---|
| 362 | if (this.resizeListener) {
|
---|
| 363 | window.removeEventListener('resize', this.resizeListener);
|
---|
| 364 | this.resizeListener = null;
|
---|
| 365 | }
|
---|
| 366 | }
|
---|
| 367 | ngOnDestroy() {
|
---|
| 368 | this.restoreAppend();
|
---|
| 369 | this.unbindOutsideClickListener();
|
---|
| 370 | this.unbindResizeListener();
|
---|
| 371 | if (this.scrollHandler) {
|
---|
| 372 | this.scrollHandler.destroy();
|
---|
| 373 | this.scrollHandler = null;
|
---|
| 374 | }
|
---|
| 375 | if (this.overlayEl) {
|
---|
| 376 | ZIndexUtils.clear(this.overlayEl);
|
---|
| 377 | this.overlayEl = null;
|
---|
| 378 | }
|
---|
| 379 | }
|
---|
| 380 | containerClass() {
|
---|
| 381 | return {
|
---|
| 382 | 'p-treeselect p-component p-inputwrapper': true,
|
---|
| 383 | 'p-treeselect-chip': this.display === 'chip',
|
---|
| 384 | 'p-disabled': this.disabled,
|
---|
| 385 | 'p-focus': this.focused
|
---|
| 386 | };
|
---|
| 387 | }
|
---|
| 388 | labelClass() {
|
---|
| 389 | return {
|
---|
| 390 | 'p-treeselect-label': true,
|
---|
| 391 | 'p-placeholder': this.label === this.placeholder,
|
---|
| 392 | 'p-treeselect-label-empty': !this.placeholder && this.emptyValue
|
---|
| 393 | };
|
---|
| 394 | }
|
---|
| 395 | get emptyMessageText() {
|
---|
| 396 | return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
|
---|
| 397 | }
|
---|
| 398 | get emptyValue() {
|
---|
| 399 | return !this.value || Object.keys(this.value).length === 0;
|
---|
| 400 | }
|
---|
| 401 | get emptyOptions() {
|
---|
| 402 | return !this.options || this.options.length === 0;
|
---|
| 403 | }
|
---|
| 404 | get label() {
|
---|
| 405 | let value = this.value || [];
|
---|
| 406 | return value.length ? value.map(node => node.label).join(', ') : (this.selectionMode === "single" && this.value) ? value.label : this.placeholder;
|
---|
| 407 | }
|
---|
| 408 | }
|
---|
| 409 | TreeSelect.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelect, deps: [{ token: i1.PrimeNGConfig }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
|
---|
| 410 | TreeSelect.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: TreeSelect, selector: "p-treeSelect", inputs: { type: "type", inputId: "inputId", scrollHeight: "scrollHeight", disabled: "disabled", metaKeySelection: "metaKeySelection", display: "display", selectionMode: "selectionMode", tabindex: "tabindex", ariaLabelledBy: "ariaLabelledBy", placeholder: "placeholder", panelClass: "panelClass", emptyMessage: "emptyMessage", appendTo: "appendTo", propagateSelectionDown: "propagateSelectionDown", propagateSelectionUp: "propagateSelectionUp", options: "options", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions" }, outputs: { onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onShow: "onShow", onHide: "onHide", onNodeUnselect: "onNodeUnselect", onNodeSelect: "onNodeSelect" }, host: { properties: { "class.p-inputwrapper-filled": "!emptyValue", "class.p-inputwrapper-focus": "focused || overlayVisible" }, classAttribute: "p-element p-inputwrapper" }, providers: [TREESELECT_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true }, { propertyName: "focusInput", first: true, predicate: ["focusInput"], descendants: true }], ngImport: i0, template: `
|
---|
| 411 | <div #container [ngClass]="containerClass()" (click)="onClick($event)">
|
---|
| 412 | <div class="p-hidden-accessible">
|
---|
| 413 | <input #focusInput type="text" role="listbox" [attr.id]="inputId" readonly [disabled]="disabled" (focus)="onFocus()" (blur)="onBlur()" (keydown)="onKeyDown($event)" [attr.tabindex]="tabindex"
|
---|
| 414 | aria-haspopup="true" [attr.aria-expanded]="overlayVisible" [attr.aria-labelledby]="ariaLabelledBy"/>
|
---|
| 415 | </div>
|
---|
| 416 | <div class="p-treeselect-label-container">
|
---|
| 417 | <div [ngClass]="labelClass()">
|
---|
| 418 | <ng-container *ngIf="valueTemplate;else defaultValueTemplate">
|
---|
| 419 | <ng-container *ngTemplateOutlet="valueTemplate; context: {$implicit: value, placeholder: placeholder}"></ng-container>
|
---|
| 420 | </ng-container>
|
---|
| 421 | <ng-template #defaultValueTemplate>
|
---|
| 422 | <ng-container *ngIf="display === 'comma';else chipsValueTemplate">
|
---|
| 423 | {{label || 'empty'}}
|
---|
| 424 | </ng-container>
|
---|
| 425 | <ng-template #chipsValueTemplate>
|
---|
| 426 | <div *ngFor="let node of value" class="p-treeselect-token">
|
---|
| 427 | <span class="p-treeselect-token-label">{{node.label}}</span>
|
---|
| 428 | </div>
|
---|
| 429 | <ng-container *ngIf="emptyValue">{{placeholder || 'empty'}}</ng-container>
|
---|
| 430 | </ng-template>
|
---|
| 431 | </ng-template>
|
---|
| 432 | </div>
|
---|
| 433 | </div>
|
---|
| 434 | <div class="p-treeselect-trigger">
|
---|
| 435 | <span class="p-treeselect-trigger-icon pi pi-chevron-down"></span>
|
---|
| 436 | </div>
|
---|
| 437 |
|
---|
| 438 | <div #overlayRef class="p-treeselect-panel p-component" *ngIf="overlayVisible" (click)="onOverlayClick($event)"
|
---|
| 439 | [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)">
|
---|
| 440 | <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: value, options: options}"></ng-container>
|
---|
| 441 | <div class="p-treeselect-items-wrapper" [ngStyle]="{'max-height': scrollHeight}">
|
---|
| 442 | <p-tree [value]="options" [propagateSelectionDown]="propagateSelectionDown" [propagateSelectionUp]="propagateSelectionUp" [selectionMode]="selectionMode" (selectionChange)="onSelectionChange($event)" [selection]="value"
|
---|
| 443 | [metaKeySelection]="metaKeySelection" (onNodeExpand)="nodeExpand($event)" (onNodeCollapse)="nodeCollapse($event)"
|
---|
| 444 | (onNodeSelect)="onSelect($event)" (onNodeUnselect)="onUnselect($event)"></p-tree>
|
---|
| 445 | <div *ngIf="emptyOptions" class="p-treeselect-empty-message">
|
---|
| 446 | <ng-container *ngIf="!emptyTemplate; else empty">
|
---|
| 447 | {{emptyMessageText}}
|
---|
| 448 | </ng-container>
|
---|
| 449 | <ng-container *ngTemplateOutlet="emptyTemplate;"></ng-container>
|
---|
| 450 | </div>
|
---|
| 451 | </div>
|
---|
| 452 | <ng-container *ngTemplateOutlet="footerTemplate; context: {$implicit: value, options: options}"></ng-container>
|
---|
| 453 | </div>
|
---|
| 454 | </div>
|
---|
| 455 | `, isInline: true, styles: [".p-treeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none}.p-treeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-treeselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer}.p-treeselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.p-treeselect-label-empty{overflow:hidden;visibility:hidden}.p-treeselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-treeselect .p-treeselect-panel{min-width:100%}.p-treeselect-panel{position:absolute;top:0;left:0}.p-treeselect-items-wrapper{overflow:auto}.p-fluid .p-treeselect{display:flex}\n"], components: [{ type: i2.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "selection", "style", "styleClass", "contextMenu", "layout", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "scrollHeight", "virtualScroll", "virtualNodeHeight", "minBufferPx", "maxBufferPx", "indentation", "trackBy"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDrop", "onFilter"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
|
---|
| 456 | trigger('overlayAnimation', [
|
---|
| 457 | transition(':enter', [
|
---|
| 458 | style({ opacity: 0, transform: 'scaleY(0.8)' }),
|
---|
| 459 | animate('{{showTransitionParams}}')
|
---|
| 460 | ]),
|
---|
| 461 | transition(':leave', [
|
---|
| 462 | animate('{{hideTransitionParams}}', style({ opacity: 0 }))
|
---|
| 463 | ])
|
---|
| 464 | ])
|
---|
| 465 | ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
---|
| 466 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelect, decorators: [{
|
---|
| 467 | type: Component,
|
---|
| 468 | args: [{ selector: 'p-treeSelect', template: `
|
---|
| 469 | <div #container [ngClass]="containerClass()" (click)="onClick($event)">
|
---|
| 470 | <div class="p-hidden-accessible">
|
---|
| 471 | <input #focusInput type="text" role="listbox" [attr.id]="inputId" readonly [disabled]="disabled" (focus)="onFocus()" (blur)="onBlur()" (keydown)="onKeyDown($event)" [attr.tabindex]="tabindex"
|
---|
| 472 | aria-haspopup="true" [attr.aria-expanded]="overlayVisible" [attr.aria-labelledby]="ariaLabelledBy"/>
|
---|
| 473 | </div>
|
---|
| 474 | <div class="p-treeselect-label-container">
|
---|
| 475 | <div [ngClass]="labelClass()">
|
---|
| 476 | <ng-container *ngIf="valueTemplate;else defaultValueTemplate">
|
---|
| 477 | <ng-container *ngTemplateOutlet="valueTemplate; context: {$implicit: value, placeholder: placeholder}"></ng-container>
|
---|
| 478 | </ng-container>
|
---|
| 479 | <ng-template #defaultValueTemplate>
|
---|
| 480 | <ng-container *ngIf="display === 'comma';else chipsValueTemplate">
|
---|
| 481 | {{label || 'empty'}}
|
---|
| 482 | </ng-container>
|
---|
| 483 | <ng-template #chipsValueTemplate>
|
---|
| 484 | <div *ngFor="let node of value" class="p-treeselect-token">
|
---|
| 485 | <span class="p-treeselect-token-label">{{node.label}}</span>
|
---|
| 486 | </div>
|
---|
| 487 | <ng-container *ngIf="emptyValue">{{placeholder || 'empty'}}</ng-container>
|
---|
| 488 | </ng-template>
|
---|
| 489 | </ng-template>
|
---|
| 490 | </div>
|
---|
| 491 | </div>
|
---|
| 492 | <div class="p-treeselect-trigger">
|
---|
| 493 | <span class="p-treeselect-trigger-icon pi pi-chevron-down"></span>
|
---|
| 494 | </div>
|
---|
| 495 |
|
---|
| 496 | <div #overlayRef class="p-treeselect-panel p-component" *ngIf="overlayVisible" (click)="onOverlayClick($event)"
|
---|
| 497 | [@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationDone($event)">
|
---|
| 498 | <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: value, options: options}"></ng-container>
|
---|
| 499 | <div class="p-treeselect-items-wrapper" [ngStyle]="{'max-height': scrollHeight}">
|
---|
| 500 | <p-tree [value]="options" [propagateSelectionDown]="propagateSelectionDown" [propagateSelectionUp]="propagateSelectionUp" [selectionMode]="selectionMode" (selectionChange)="onSelectionChange($event)" [selection]="value"
|
---|
| 501 | [metaKeySelection]="metaKeySelection" (onNodeExpand)="nodeExpand($event)" (onNodeCollapse)="nodeCollapse($event)"
|
---|
| 502 | (onNodeSelect)="onSelect($event)" (onNodeUnselect)="onUnselect($event)"></p-tree>
|
---|
| 503 | <div *ngIf="emptyOptions" class="p-treeselect-empty-message">
|
---|
| 504 | <ng-container *ngIf="!emptyTemplate; else empty">
|
---|
| 505 | {{emptyMessageText}}
|
---|
| 506 | </ng-container>
|
---|
| 507 | <ng-container *ngTemplateOutlet="emptyTemplate;"></ng-container>
|
---|
| 508 | </div>
|
---|
| 509 | </div>
|
---|
| 510 | <ng-container *ngTemplateOutlet="footerTemplate; context: {$implicit: value, options: options}"></ng-container>
|
---|
| 511 | </div>
|
---|
| 512 | </div>
|
---|
| 513 | `, animations: [
|
---|
| 514 | trigger('overlayAnimation', [
|
---|
| 515 | transition(':enter', [
|
---|
| 516 | style({ opacity: 0, transform: 'scaleY(0.8)' }),
|
---|
| 517 | animate('{{showTransitionParams}}')
|
---|
| 518 | ]),
|
---|
| 519 | transition(':leave', [
|
---|
| 520 | animate('{{hideTransitionParams}}', style({ opacity: 0 }))
|
---|
| 521 | ])
|
---|
| 522 | ])
|
---|
| 523 | ], host: {
|
---|
| 524 | 'class': 'p-element p-inputwrapper',
|
---|
| 525 | '[class.p-inputwrapper-filled]': '!emptyValue',
|
---|
| 526 | '[class.p-inputwrapper-focus]': 'focused || overlayVisible'
|
---|
| 527 | }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [TREESELECT_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, styles: [".p-treeselect{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-ms-user-select:none;user-select:none}.p-treeselect-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-treeselect-label-container{overflow:hidden;flex:1 1 auto;cursor:pointer}.p-treeselect-label{display:block;white-space:nowrap;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.p-treeselect-label-empty{overflow:hidden;visibility:hidden}.p-treeselect-token{cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-treeselect .p-treeselect-panel{min-width:100%}.p-treeselect-panel{position:absolute;top:0;left:0}.p-treeselect-items-wrapper{overflow:auto}.p-fluid .p-treeselect{display:flex}\n"] }]
|
---|
| 528 | }], ctorParameters: function () { return [{ type: i1.PrimeNGConfig }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.OverlayService }]; }, propDecorators: { type: [{
|
---|
| 529 | type: Input
|
---|
| 530 | }], inputId: [{
|
---|
| 531 | type: Input
|
---|
| 532 | }], scrollHeight: [{
|
---|
| 533 | type: Input
|
---|
| 534 | }], disabled: [{
|
---|
| 535 | type: Input
|
---|
| 536 | }], metaKeySelection: [{
|
---|
| 537 | type: Input
|
---|
| 538 | }], display: [{
|
---|
| 539 | type: Input
|
---|
| 540 | }], selectionMode: [{
|
---|
| 541 | type: Input
|
---|
| 542 | }], tabindex: [{
|
---|
| 543 | type: Input
|
---|
| 544 | }], ariaLabelledBy: [{
|
---|
| 545 | type: Input
|
---|
| 546 | }], placeholder: [{
|
---|
| 547 | type: Input
|
---|
| 548 | }], panelClass: [{
|
---|
| 549 | type: Input
|
---|
| 550 | }], emptyMessage: [{
|
---|
| 551 | type: Input
|
---|
| 552 | }], appendTo: [{
|
---|
| 553 | type: Input
|
---|
| 554 | }], propagateSelectionDown: [{
|
---|
| 555 | type: Input
|
---|
| 556 | }], propagateSelectionUp: [{
|
---|
| 557 | type: Input
|
---|
| 558 | }], options: [{
|
---|
| 559 | type: Input
|
---|
| 560 | }], showTransitionOptions: [{
|
---|
| 561 | type: Input
|
---|
| 562 | }], hideTransitionOptions: [{
|
---|
| 563 | type: Input
|
---|
| 564 | }], templates: [{
|
---|
| 565 | type: ContentChildren,
|
---|
| 566 | args: [PrimeTemplate]
|
---|
| 567 | }], containerEl: [{
|
---|
| 568 | type: ViewChild,
|
---|
| 569 | args: ['container']
|
---|
| 570 | }], focusInput: [{
|
---|
| 571 | type: ViewChild,
|
---|
| 572 | args: ['focusInput']
|
---|
| 573 | }], onNodeExpand: [{
|
---|
| 574 | type: Output
|
---|
| 575 | }], onNodeCollapse: [{
|
---|
| 576 | type: Output
|
---|
| 577 | }], onShow: [{
|
---|
| 578 | type: Output
|
---|
| 579 | }], onHide: [{
|
---|
| 580 | type: Output
|
---|
| 581 | }], onNodeUnselect: [{
|
---|
| 582 | type: Output
|
---|
| 583 | }], onNodeSelect: [{
|
---|
| 584 | type: Output
|
---|
| 585 | }] } });
|
---|
| 586 | class TreeSelectModule {
|
---|
| 587 | }
|
---|
| 588 | TreeSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
---|
| 589 | TreeSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelectModule, declarations: [TreeSelect], imports: [CommonModule, RippleModule, SharedModule, TreeModule], exports: [TreeSelect, SharedModule, TreeModule] });
|
---|
| 590 | TreeSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelectModule, imports: [[CommonModule, RippleModule, SharedModule, TreeModule], SharedModule, TreeModule] });
|
---|
| 591 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: TreeSelectModule, decorators: [{
|
---|
| 592 | type: NgModule,
|
---|
| 593 | args: [{
|
---|
| 594 | imports: [CommonModule, RippleModule, SharedModule, TreeModule],
|
---|
| 595 | exports: [TreeSelect, SharedModule, TreeModule],
|
---|
| 596 | declarations: [TreeSelect]
|
---|
| 597 | }]
|
---|
| 598 | }] });
|
---|
| 599 |
|
---|
| 600 | /**
|
---|
| 601 | * Generated bundle index. Do not edit.
|
---|
| 602 | */
|
---|
| 603 |
|
---|
| 604 | export { TREESELECT_VALUE_ACCESSOR, TreeSelect, TreeSelectModule };
|
---|