@lucca-front/ng 7.2.0 → 8.0.0-alpha.1

package/fesm2020/lucca-front-ng-option.mjs

@@ -0,0 +1,2237 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, ElementRef, Component, ChangeDetectionStrategy, Input, Output, ViewChild, NgModule, InjectionToken, LOCALE_ID, Injectable, Inject, ViewContainerRef, ContentChild, Directive, TemplateRef, ContentChildren, HostBinding } from '@angular/core';
+import { ALuInputDisplayer } from '@lucca-front/ng/input';
+import { ALuIntl, ALuOnScrollBottomSubscriber, ALuOnOpenSubscriber, ALuOnCloseSubscriber } from '@lucca-front/ng/core';
+import * as i1 from '@angular/common';
+import { CommonModule, NgForOf, DOCUMENT } from '@angular/common';
+import * as i2 from '@lucca-front/ng/tooltip';
+import { LuTooltipModule } from '@lucca-front/ng/tooltip';
+import * as i2$2 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i2$3 from '@lucca-front/ng/scroll';
+import { LuScrollModule } from '@lucca-front/ng/scroll';
+import { luTransformPopover } from '@lucca-front/ng/popover';
+import { BehaviorSubject, combineLatest, merge, of, Subscription, Subject } from 'rxjs';
+import { map, switchMap, delay, share, tap, first, mapTo, startWith, shareReplay, mergeAll } from 'rxjs/operators';
+import { ALuPickerPanel } from '@lucca-front/ng/picker';
+import * as i2$1 from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TAB, ESCAPE, DOWN_ARROW, UP_ARROW, ENTER } from '@angular/cdk/keycodes';
+
+class ALuOptionItem {
+}
+
+class LuOptionItemComponent extends ALuOptionItem {
+    constructor(_cdr) {
+        super();
+        this._cdr = _cdr;
+        this._selected = false;
+        this._highlighted = false;
+        this.onSelect = new EventEmitter();
+    }
+    get selected() { return this._selected; }
+    set selected(s) {
+        if (s !== this._selected) {
+            this._selected = s;
+            this._cdr.markForCheck();
+        }
+    }
+    get highlighted() { return this._highlighted; }
+    set highlighted(h) {
+        if (h !== this._highlighted) {
+            this._highlighted = h;
+            this._cdr.markForCheck();
+        }
+    }
+    select() {
+        this.onSelect.emit(this);
+    }
+}
+LuOptionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+LuOptionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuOptionItemComponent, selector: "lu-option", inputs: { selected: "selected", highlighted: "highlighted", value: "value" }, outputs: { onSelect: "onSelect" }, providers: [
+        {
+            provide: ALuOptionItem,
+            useExisting: forwardRef(() => LuOptionItemComponent),
+            multi: true,
+        },
+    ], viewQueries: [{ propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"optionItem\" #element>\r\n\t<div class=\"optionItem-value\" (click)=\"select()\" [class.is-selected]=\"selected\" [class.is-highlighted]=\"highlighted\">\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n</div>\r\n", styles: [":host{display:block}.optionItem{position:relative}.optionItem-value{display:block;cursor:pointer;padding:.5rem;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);transition:background 50ms ease}.optionItem-value.is-selected{background:var(--palettes-primary-100);background:var(--commons-selected)}.optionItem-value:hover,.optionItem-value.is-highlighted,.optionItem-value.is-focus{background:var(--palettes-primary-50);background:var(--commons-highlight)}:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.lu-select-value) .optionItem-value.is-focus,:host-context(.lu-select-value) .optionItem-value.is-highlighted{background:inherit}:host-context(.mod-multiple) .optionItem-value{position:relative;padding-left:2rem;padding-left:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before{display:block;position:absolute;left:.5rem;left:var(--components-options-checkbox-left);top:50%;transform:translateY(-50%)}:host-context(.mod-multiple) .optionItem-value:before{border-radius:var(--commons-border-radius);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--palettes-grey-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);content:\"\";display:block;height:1rem;height:var(--components-options-checkbox-size);transition:all .1s ease;width:1rem;width:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after{color:#fff;font-size:.8rem;content:\"\\e91a\";font-family:\"Lucca icons\";display:inline-block;vertical-align:text-bottom;font-style:normal;line-height:1rem;line-height:var(--components-options-checkbox-size);padding-top:.05rem;position:absolute;text-align:center;transform:translateY(-50%) scale(0);transition:all .1s ease;width:1rem;width:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before{background-color:#485075;background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px #485075;box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after{transform:translateY(-50%) scale(1)}:host-context(.mod-multiple) .optionItem-value:hover:before{box-shadow:inset 0 0 0 2px #485075;box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple).establishmentOption .optionItem-value{position:relative;padding-left:2.5rem;padding-left:calc(2 * var(--components-options-item-padding-horizontal) + var(--components-options-checkbox-size) + var(--spacings-smaller))}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after{left:1rem;left:calc(2 * var(--components-options-item-padding-horizontal))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-option', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: ALuOptionItem,
+                            useExisting: forwardRef(() => LuOptionItemComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"optionItem\" #element>\r\n\t<div class=\"optionItem-value\" (click)=\"select()\" [class.is-selected]=\"selected\" [class.is-highlighted]=\"highlighted\">\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n</div>\r\n", styles: [":host{display:block}.optionItem{position:relative}.optionItem-value{display:block;cursor:pointer;padding:.5rem;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);transition:background 50ms ease}.optionItem-value.is-selected{background:var(--palettes-primary-100);background:var(--commons-selected)}.optionItem-value:hover,.optionItem-value.is-highlighted,.optionItem-value.is-focus{background:var(--palettes-primary-50);background:var(--commons-highlight)}:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.lu-select-value) .optionItem-value.is-focus,:host-context(.lu-select-value) .optionItem-value.is-highlighted{background:inherit}:host-context(.mod-multiple) .optionItem-value{position:relative;padding-left:2rem;padding-left:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before{display:block;position:absolute;left:.5rem;left:var(--components-options-checkbox-left);top:50%;transform:translateY(-50%)}:host-context(.mod-multiple) .optionItem-value:before{border-radius:var(--commons-border-radius);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--palettes-grey-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);content:\"\";display:block;height:1rem;height:var(--components-options-checkbox-size);transition:all .1s ease;width:1rem;width:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after{color:#fff;font-size:.8rem;content:\"\\e91a\";font-family:\"Lucca icons\";display:inline-block;vertical-align:text-bottom;font-style:normal;line-height:1rem;line-height:var(--components-options-checkbox-size);padding-top:.05rem;position:absolute;text-align:center;transform:translateY(-50%) scale(0);transition:all .1s ease;width:1rem;width:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before{background-color:#485075;background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px #485075;box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after{transform:translateY(-50%) scale(1)}:host-context(.mod-multiple) .optionItem-value:hover:before{box-shadow:inset 0 0 0 2px #485075;box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple).establishmentOption .optionItem-value{position:relative;padding-left:2.5rem;padding-left:calc(2 * var(--components-options-item-padding-horizontal) + var(--components-options-checkbox-size) + var(--spacings-smaller))}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after{left:1rem;left:calc(2 * var(--components-options-item-padding-horizontal))}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selected: [{
+                type: Input
+            }], highlighted: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], onSelect: [{
+                type: Output
+            }], element: [{
+                type: ViewChild,
+                args: ['element', { read: ElementRef, static: true }]
+            }] } });
+
+class LuOptionItemModule {
+}
+LuOptionItemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuOptionItemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionItemModule, declarations: [LuOptionItemComponent], exports: [LuOptionItemComponent] });
+LuOptionItemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionItemModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionItemModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        LuOptionItemComponent,
+                    ],
+                    exports: [
+                        LuOptionItemComponent,
+                    ],
+                }]
+        }] });
+
+class ALuTreeOptionItem extends ALuOptionItem {
+    get allChildren() {
+        return this.children
+            .map(c => [c, ...c.allChildren])
+            .reduce((aggr, val) => [...aggr, ...val], []);
+    }
+}
+
+const LU_TREE_OPTION_ITEM_TRANSLATIONS = new InjectionToken('LuTreeOptionItemTranslations');
+
+class LuTreeOptionItemIntl extends ALuIntl {
+    constructor(translations, locale) {
+        super(translations, locale);
+    }
+}
+LuTreeOptionItemIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionItemIntl, deps: [{ token: LU_TREE_OPTION_ITEM_TRANSLATIONS }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+LuTreeOptionItemIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionItemIntl });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionItemIntl, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LU_TREE_OPTION_ITEM_TRANSLATIONS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }]; } });
+
+class LuTreeOptionItemComponent extends ALuTreeOptionItem {
+    constructor(_componentFactoryResolver, intl, _cdr) {
+        super();
+        this._componentFactoryResolver = _componentFactoryResolver;
+        this.intl = intl;
+        this._cdr = _cdr;
+        this._children = [];
+        this.onSelect = new EventEmitter();
+        this.onSelectSelf = new EventEmitter();
+        this.onSelectChildren = new EventEmitter();
+        this._selected = false;
+        this._highlighted = false;
+    }
+    select() {
+        this.onSelect.emit(this);
+    }
+    selectSelf() {
+        this.onSelectSelf.emit(this);
+    }
+    selectChildren() {
+        this.onSelectChildren.emit(this);
+    }
+    set tree(t) {
+        this._tree = t;
+        this._renderValue(t.value);
+        this._renderChildren(t.children);
+    }
+    get value() { return this._tree.value; }
+    get children() { return this._children; }
+    set children(c) { this._children = c; }
+    get hasChildren() { return !!this.children && this.children.length > 0; }
+    get selected() { return this._selected; }
+    set selected(s) {
+        if (s !== this._selected) {
+            this._selected = s;
+            this._cdr.markForCheck();
+        }
+    }
+    get highlighted() { return this._highlighted; }
+    set highlighted(h) {
+        if (h !== this._highlighted) {
+            this._highlighted = h;
+            this._cdr.markForCheck();
+        }
+    }
+    set _contentChildDisplayer(displayer) {
+        this._displayer = displayer;
+    }
+    _renderValue(value) {
+        const evr = this._displayer.getViewRef(value);
+        this._valueVCR.clear();
+        this._valueVCR.insert(evr);
+    }
+    _renderChildren(children = []) {
+        const factory = this._componentFactoryResolver.resolveComponentFactory(LuTreeOptionItemComponent);
+        this._childrenVCR.clear();
+        this.children = children.map(c => {
+            const ref = this._childrenVCR.createComponent(factory);
+            ref.instance._displayer = this._displayer;
+            ref.instance.tree = c;
+            return ref.instance;
+        });
+    }
+}
+LuTreeOptionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionItemComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: LuTreeOptionItemIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+LuTreeOptionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuTreeOptionItemComponent, selector: "lu-tree-option", inputs: { tree: "tree", selected: "selected", highlighted: "highlighted" }, outputs: { onSelect: "onSelect", onSelectSelf: "onSelectSelf", onSelectChildren: "onSelectChildren" }, providers: [
+        {
+            provide: ALuTreeOptionItem,
+            useExisting: forwardRef(() => LuTreeOptionItemComponent),
+            multi: true,
+        },
+    ], queries: [{ propertyName: "_contentChildDisplayer", first: true, predicate: ALuInputDisplayer, descendants: true, static: true }], viewQueries: [{ propertyName: "_valueVCR", first: true, predicate: ["value"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_childrenVCR", first: true, predicate: ["children"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "element", first: true, predicate: ["element"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"optionItem\" #element>\r\n\t<div class=\"optionItem-value\" (click)=\"select()\" [class.is-selected]=\"selected\" [class.is-highlighted]=\"highlighted\">\r\n\t\t<ng-container #value></ng-container>\r\n\t</div>\r\n\t<div class=\"optionItem-icons\" *ngIf=\"hasChildren\">\r\n\t\t<span class=\"optionItem-icon parentOnly\" (click)=\"selectSelf()\" [luTooltip]=\"intl.parentOnly\">\r\n\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n\t\t\t\t<path opacity=\"0.2\"\r\n\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\r\n\t\t\t\t/>\r\n\t\t\t\t<path\r\n\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\r\n\t\t\t\t/>\r\n\t\t\t</svg>\r\n\t\t</span>\r\n\t\t<span class=\"optionItem-icon childrenOnly\" (click)=\"selectChildren()\" [luTooltip]=\"intl.childrenOnly\">\r\n\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n\t\t\t\t<path\r\n\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\r\n\t\t\t\t/>\r\n\t\t\t\t<path opacity=\"0.2\"\r\n\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\r\n\t\t\t\t/>\r\n\t\t\t</svg>\r\n\t\t</span>\r\n\t</div>\r\n</div>\r\n\r\n<div #children class=\"children\">\r\n\t<ng-container #children></ng-container>\r\n</div>\r\n", styles: [":host{display:block}.optionItem{position:relative}.optionItem-value{display:block;cursor:pointer;padding:.5rem;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);transition:background 50ms ease}.optionItem-value.is-selected{background:var(--palettes-primary-100);background:var(--commons-selected)}.optionItem-value:hover,.optionItem-value.is-highlighted,.optionItem-value.is-focus{background:var(--palettes-primary-50);background:var(--commons-highlight)}:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.lu-select-value) .optionItem-value.is-focus,:host-context(.lu-select-value) .optionItem-value.is-highlighted{background:inherit}:host-context(.mod-multiple) .optionItem-value{position:relative;padding-left:2rem;padding-left:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before{display:block;position:absolute;left:.5rem;left:var(--components-options-checkbox-left);top:50%;transform:translateY(-50%)}:host-context(.mod-multiple) .optionItem-value:before{border-radius:var(--commons-border-radius);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--palettes-grey-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);content:\"\";display:block;height:1rem;height:var(--components-options-checkbox-size);transition:all .1s ease;width:1rem;width:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after{color:#fff;font-size:.8rem;content:\"\\e91a\";font-family:\"Lucca icons\";display:inline-block;vertical-align:text-bottom;font-style:normal;line-height:1rem;line-height:var(--components-options-checkbox-size);padding-top:.05rem;position:absolute;text-align:center;transform:translateY(-50%) scale(0);transition:all .1s ease;width:1rem;width:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before{background-color:#485075;background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px #485075;box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after{transform:translateY(-50%) scale(1)}:host-context(.mod-multiple) .optionItem-value:hover:before{box-shadow:inset 0 0 0 2px #485075;box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple).establishmentOption .optionItem-value{position:relative;padding-left:2.5rem;padding-left:calc(2 * var(--components-options-item-padding-horizontal) + var(--components-options-checkbox-size) + var(--spacings-smaller))}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after{left:1rem;left:calc(2 * var(--components-options-item-padding-horizontal))}.optionItem:hover .optionItem-value{background:var(--palettes-primary-50);background:var(--commons-highlight)}.optionItem:hover .optionItem-icons{opacity:1}.optionItem-value{padding:.5rem;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal) var(--components-options-item-padding-vertical) .5rem}.optionItem-icons{display:none;position:absolute;top:.5rem;right:.5rem;opacity:0;transition:all .1s ease;transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon{cursor:pointer;opacity:.66;margin-left:.5rem;transition:all .1s ease;transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon:hover{opacity:1}.optionItem-icon-shape{fill:var(--components-options-item-icon-color);width:1.4rem;height:1.4rem}:host-context(.lu-picker-panel){padding:0}:host-context(.lu-picker-panel) .optionItem-value:before{top:1.3rem;left:.5rem;pointer-events:none}:host-context(.lu-picker-panel) .optionItem-value:after{top:1.3rem;left:.5rem;pointer-events:none}:host-context(.lu-picker-panel.mod-multiple) .optionItem-icons{display:block}:host-context(.lu-picker-panel.mod-multiple) .optionItem-value{padding-right:4rem}:host-context(.lu-picker-panel lu-tree-option) .optionItem-value{padding-left:1.5rem}:host-context(.lu-picker-panel lu-tree-option) .optionItem-value:before{left:1.5rem}:host-context(.lu-picker-panel lu-tree-option) .optionItem-value:after{left:1.5rem}:host-context(.lu-picker-panel.mod-multiple lu-tree-option) .optionItem-value{padding-left:3rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option) .optionItem-value{padding-left:2.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option) .optionItem-value:before{left:2.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option) .optionItem-value:after{left:2.5rem}:host-context(.lu-picker-panel.mod-multiple lu-tree-option lu-tree-option) .optionItem-value{padding-left:4rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:3.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:before{left:3.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:after{left:3.5rem}:host-context(.lu-picker-panel.mod-multiple lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:4.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:before{left:4.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:after{left:4.5rem}:host-context(.lu-picker-panel.mod-multiple lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:6rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:5.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:before{left:5.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:after{left:5.5rem}:host-context(.lu-picker-panel.mod-multiple lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:7rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:6.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:before{left:6.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:after{left:6.5rem}:host-context(.lu-picker-panel.mod-multiple lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:8rem}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.LuTooltipTriggerDirective, selector: "[luTooltip]", inputs: ["luTooltip", "luTooltipEnterDelay", "luTooltipLeaveDelay", "luTooltipDisabled", "luTooltipPosition"], outputs: ["luTooltipOnOpen", "luTooltipOnClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-tree-option', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: ALuTreeOptionItem,
+                            useExisting: forwardRef(() => LuTreeOptionItemComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"optionItem\" #element>\r\n\t<div class=\"optionItem-value\" (click)=\"select()\" [class.is-selected]=\"selected\" [class.is-highlighted]=\"highlighted\">\r\n\t\t<ng-container #value></ng-container>\r\n\t</div>\r\n\t<div class=\"optionItem-icons\" *ngIf=\"hasChildren\">\r\n\t\t<span class=\"optionItem-icon parentOnly\" (click)=\"selectSelf()\" [luTooltip]=\"intl.parentOnly\">\r\n\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n\t\t\t\t<path opacity=\"0.2\"\r\n\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\r\n\t\t\t\t/>\r\n\t\t\t\t<path\r\n\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\r\n\t\t\t\t/>\r\n\t\t\t</svg>\r\n\t\t</span>\r\n\t\t<span class=\"optionItem-icon childrenOnly\" (click)=\"selectChildren()\" [luTooltip]=\"intl.childrenOnly\">\r\n\t\t\t<svg class=\"optionItem-icon-shape\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\r\n\t\t\t\t<path\r\n\t\t\t\t\td=\"M8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18ZM8 13C8.55 13 9 12.55 9 12C9 11.45 8.55 11 8 11C7.45 11 7 11.45 7 12C7 12.55 7.45 13 8 13ZM8 18C8.55 18 9 17.55 9 17C9 16.45 8.55 16 8 16C7.45 16 7 16.45 7 17C7 17.55 7.45 18 8 18ZM12 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H12C11.45 11 11 11.45 11 12C11 12.55 11.45 13 12 13ZM12 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H12C11.45 16 11 16.45 11 17C11 17.55 11.45 18 12 18Z\"\r\n\t\t\t\t/>\r\n\t\t\t\t<path opacity=\"0.2\"\r\n\t\t\t\t\td=\"M4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7ZM4 8C4.55 8 5 7.55 5 7C5 6.45 4.55 6 4 6C3.45 6 3 6.45 3 7C3 7.55 3.45 8 4 8ZM7 7C7 7.55 7.45 8 8 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H8C7.45 6 7 6.45 7 7Z\"\r\n\t\t\t\t/>\r\n\t\t\t</svg>\r\n\t\t</span>\r\n\t</div>\r\n</div>\r\n\r\n<div #children class=\"children\">\r\n\t<ng-container #children></ng-container>\r\n</div>\r\n", styles: [":host{display:block}.optionItem{position:relative}.optionItem-value{display:block;cursor:pointer;padding:.5rem;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);transition:background 50ms ease}.optionItem-value.is-selected{background:var(--palettes-primary-100);background:var(--commons-selected)}.optionItem-value:hover,.optionItem-value.is-highlighted,.optionItem-value.is-focus{background:var(--palettes-primary-50);background:var(--commons-highlight)}:host-context(.lu-select-value) .optionItem-value{padding:0;overflow:hidden;text-overflow:ellipsis}:host-context(.lu-select-value) .optionItem-value:hover,:host-context(.lu-select-value) .optionItem-value.is-focus,:host-context(.lu-select-value) .optionItem-value.is-highlighted{background:inherit}:host-context(.mod-multiple) .optionItem-value{position:relative;padding-left:2rem;padding-left:var(--components-options-item-multiple-padding)}:host-context(.mod-multiple) .optionItem-value:after,:host-context(.mod-multiple) .optionItem-value:before{display:block;position:absolute;left:.5rem;left:var(--components-options-checkbox-left);top:50%;transform:translateY(-50%)}:host-context(.mod-multiple) .optionItem-value:before{border-radius:var(--commons-border-radius);border-radius:var(--components-options-checkbox-border-radius);box-shadow:inset 0 0 0 2px var(--palettes-grey-color);box-shadow:inset 0 0 0 2px var(--components-options-checkbox-border-color);content:\"\";display:block;height:1rem;height:var(--components-options-checkbox-size);transition:all .1s ease;width:1rem;width:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value:after{color:#fff;font-size:.8rem;content:\"\\e91a\";font-family:\"Lucca icons\";display:inline-block;vertical-align:text-bottom;font-style:normal;line-height:1rem;line-height:var(--components-options-checkbox-size);padding-top:.05rem;position:absolute;text-align:center;transform:translateY(-50%) scale(0);transition:all .1s ease;width:1rem;width:var(--components-options-checkbox-size)}:host-context(.mod-multiple) .optionItem-value.is-selected:before{background-color:#485075;background-color:var(--components-options-checkbox-color);box-shadow:inset 0 0 0 2px #485075;box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple) .optionItem-value.is-selected:after{transform:translateY(-50%) scale(1)}:host-context(.mod-multiple) .optionItem-value:hover:before{box-shadow:inset 0 0 0 2px #485075;box-shadow:inset 0 0 0 2px var(--components-options-checkbox-color)}:host-context(.mod-multiple).establishmentOption .optionItem-value{position:relative;padding-left:2.5rem;padding-left:calc(2 * var(--components-options-item-padding-horizontal) + var(--components-options-checkbox-size) + var(--spacings-smaller))}:host-context(.mod-multiple).establishmentOption .optionItem-value:before,:host-context(.mod-multiple).establishmentOption .optionItem-value:after{left:1rem;left:calc(2 * var(--components-options-item-padding-horizontal))}.optionItem:hover .optionItem-value{background:var(--palettes-primary-50);background:var(--commons-highlight)}.optionItem:hover .optionItem-icons{opacity:1}.optionItem-value{padding:.5rem;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal) var(--components-options-item-padding-vertical) .5rem}.optionItem-icons{display:none;position:absolute;top:.5rem;right:.5rem;opacity:0;transition:all .1s ease;transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon{cursor:pointer;opacity:.66;margin-left:.5rem;transition:all .1s ease;transition:all var(--commons-animations-durations-fast) ease}.optionItem-icon:hover{opacity:1}.optionItem-icon-shape{fill:var(--components-options-item-icon-color);width:1.4rem;height:1.4rem}:host-context(.lu-picker-panel){padding:0}:host-context(.lu-picker-panel) .optionItem-value:before{top:1.3rem;left:.5rem;pointer-events:none}:host-context(.lu-picker-panel) .optionItem-value:after{top:1.3rem;left:.5rem;pointer-events:none}:host-context(.lu-picker-panel.mod-multiple) .optionItem-icons{display:block}:host-context(.lu-picker-panel.mod-multiple) .optionItem-value{padding-right:4rem}:host-context(.lu-picker-panel lu-tree-option) .optionItem-value{padding-left:1.5rem}:host-context(.lu-picker-panel lu-tree-option) .optionItem-value:before{left:1.5rem}:host-context(.lu-picker-panel lu-tree-option) .optionItem-value:after{left:1.5rem}:host-context(.lu-picker-panel.mod-multiple lu-tree-option) .optionItem-value{padding-left:3rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option) .optionItem-value{padding-left:2.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option) .optionItem-value:before{left:2.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option) .optionItem-value:after{left:2.5rem}:host-context(.lu-picker-panel.mod-multiple lu-tree-option lu-tree-option) .optionItem-value{padding-left:4rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:3.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:before{left:3.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:after{left:3.5rem}:host-context(.lu-picker-panel.mod-multiple lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:4.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:before{left:4.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:after{left:4.5rem}:host-context(.lu-picker-panel.mod-multiple lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:6rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:5.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:before{left:5.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:after{left:5.5rem}:host-context(.lu-picker-panel.mod-multiple lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:7rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:6.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:before{left:6.5rem}:host-context(.lu-picker-panel lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value:after{left:6.5rem}:host-context(.lu-picker-panel.mod-multiple lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option lu-tree-option) .optionItem-value{padding-left:8rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LuTreeOptionItemIntl]
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _valueVCR: [{
+                type: ViewChild,
+                args: ['value', { static: true, read: ViewContainerRef }]
+            }], _childrenVCR: [{
+                type: ViewChild,
+                args: ['children', { static: true, read: ViewContainerRef }]
+            }], element: [{
+                type: ViewChild,
+                args: ['element', { read: ElementRef, static: true }]
+            }], onSelect: [{
+                type: Output
+            }], onSelectSelf: [{
+                type: Output
+            }], onSelectChildren: [{
+                type: Output
+            }], tree: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], highlighted: [{
+                type: Input
+            }], _contentChildDisplayer: [{
+                type: ContentChild,
+                args: [ALuInputDisplayer, { static: true }]
+            }] } });
+
+class ALuTreeOptionItemLabel {
+}
+const luTreeOptionItemTranslations = {
+    en: {
+        parentOnly: 'Parent only',
+        childrenOnly: 'Children only',
+    },
+    fr: {
+        parentOnly: 'Seulement le parent',
+        childrenOnly: 'Seulement les enfants',
+    },
+};
+
+class LuTreeOptionItemModule {
+}
+LuTreeOptionItemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuTreeOptionItemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionItemModule, declarations: [LuTreeOptionItemComponent], imports: [CommonModule,
+        LuTooltipModule], exports: [LuTreeOptionItemComponent] });
+LuTreeOptionItemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionItemModule, providers: [
+        LuTreeOptionItemIntl,
+        { provide: LU_TREE_OPTION_ITEM_TRANSLATIONS, useValue: luTreeOptionItemTranslations },
+    ], imports: [[
+            CommonModule,
+            LuTooltipModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionItemModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        LuTreeOptionItemComponent,
+                    ],
+                    exports: [
+                        LuTreeOptionItemComponent,
+                    ],
+                    entryComponents: [
+                        LuTreeOptionItemComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        LuTooltipModule,
+                    ],
+                    providers: [
+                        LuTreeOptionItemIntl,
+                        { provide: LU_TREE_OPTION_ITEM_TRANSLATIONS, useValue: luTreeOptionItemTranslations },
+                    ],
+                }]
+        }] });
+
+class ALuOptionOperator {
+}
+
+class LuOptionFeederComponent {
+    constructor() {
+        this.outOptions$ = new BehaviorSubject([]);
+    }
+    set options(options) {
+        this.outOptions$.next(options);
+    }
+}
+LuOptionFeederComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionFeederComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LuOptionFeederComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuOptionFeederComponent, selector: "lu-option-feeder", inputs: { options: "options" }, providers: [
+        {
+            provide: ALuOptionOperator,
+            useExisting: forwardRef(() => LuOptionFeederComponent),
+            multi: true,
+        },
+    ], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionFeederComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-option-feeder', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: ALuOptionOperator,
+                            useExisting: forwardRef(() => LuOptionFeederComponent),
+                            multi: true,
+                        },
+                    ], styles: [] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }] } });
+
+class LuOptionFeederModule {
+}
+LuOptionFeederModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionFeederModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuOptionFeederModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionFeederModule, declarations: [LuOptionFeederComponent], exports: [LuOptionFeederComponent] });
+LuOptionFeederModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionFeederModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionFeederModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [
+                        LuOptionFeederComponent,
+                    ],
+                    exports: [
+                        LuOptionFeederComponent,
+                    ],
+                }]
+        }] });
+
+class ALuTreeOptionOperator extends ALuOptionOperator {
+}
+
+class LuTreeOptionFeederComponent {
+    constructor() {
+        this.outOptions$ = new BehaviorSubject([]);
+    }
+    set options(options) {
+        this.outOptions$.next(options);
+    }
+}
+LuTreeOptionFeederComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionFeederComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LuTreeOptionFeederComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuTreeOptionFeederComponent, selector: "lu-tree-option-feeder", inputs: { options: "options" }, providers: [
+        {
+            provide: ALuTreeOptionOperator,
+            useExisting: forwardRef(() => LuTreeOptionFeederComponent),
+            multi: true,
+        },
+    ], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionFeederComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-tree-option-feeder', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: ALuTreeOptionOperator,
+                            useExisting: forwardRef(() => LuTreeOptionFeederComponent),
+                            multi: true,
+                        },
+                    ], styles: [] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }] } });
+
+class LuTreeOptionFeederModule {
+}
+LuTreeOptionFeederModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionFeederModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuTreeOptionFeederModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionFeederModule, declarations: [LuTreeOptionFeederComponent], exports: [LuTreeOptionFeederComponent] });
+LuTreeOptionFeederModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionFeederModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionFeederModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        LuTreeOptionFeederComponent,
+                    ],
+                    exports: [
+                        LuTreeOptionFeederComponent,
+                    ],
+                }]
+        }] });
+
+const MAGIC_STEP$1 = 10;
+class LuOptionPagerComponent extends ALuOptionOperator {
+    constructor() {
+        super(...arguments);
+        this.paging$ = new BehaviorSubject(MAGIC_STEP$1);
+    }
+    set inOptions$(in$) {
+        this.outOptions$ = combineLatest(in$, this.paging$, (options, paging) => {
+            return (options || []).slice(0, paging);
+        });
+    }
+    next() {
+        this.paging$.next(this.paging$.value + MAGIC_STEP$1);
+    }
+    onScrollBottom() {
+        this.next();
+    }
+}
+LuOptionPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPagerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+LuOptionPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuOptionPagerComponent, selector: "lu-option-pager", providers: [
+        {
+            provide: ALuOptionOperator,
+            useExisting: forwardRef(() => LuOptionPagerComponent),
+            multi: true,
+        },
+        {
+            provide: ALuOnScrollBottomSubscriber,
+            useExisting: forwardRef(() => LuOptionPagerComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-option-pager', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: ALuOptionOperator,
+                            useExisting: forwardRef(() => LuOptionPagerComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ALuOnScrollBottomSubscriber,
+                            useExisting: forwardRef(() => LuOptionPagerComponent),
+                            multi: true,
+                        },
+                    ], styles: [] }]
+        }] });
+
+class LuOptionPagerModule {
+}
+LuOptionPagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuOptionPagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPagerModule, declarations: [LuOptionPagerComponent], exports: [LuOptionPagerComponent] });
+LuOptionPagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPagerModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPagerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        LuOptionPagerComponent,
+                    ],
+                    exports: [
+                        LuOptionPagerComponent,
+                    ],
+                }]
+        }] });
+
+const MAGIC_STEP = 10;
+class LuTreeOptionPagerComponent extends ALuTreeOptionOperator {
+    constructor() {
+        super(...arguments);
+        this.paging$ = new BehaviorSubject(MAGIC_STEP);
+    }
+    set inOptions$(in$) {
+        this.outOptions$ = combineLatest(in$, this.paging$, (options, paging) => {
+            return this.trim(options, paging);
+        });
+    }
+    next() {
+        this.paging$.next(this.paging$.value + MAGIC_STEP);
+    }
+    onScrollBottom() {
+        this.next();
+    }
+    trim(trees = [], paging = MAGIC_STEP) {
+        const flat = this.flatten(trees);
+        const flatTrimmed = flat.slice(0, paging);
+        return this.filter(trees, flatTrimmed);
+    }
+    flatten(trees = []) {
+        return trees.map(t => [t.value, ...this.flatten(t.children)]).reduce((a, v) => [...a, ...v], []);
+    }
+    filter(trees = [], values) {
+        return trees.map(t => {
+            if (!values.some(v => v === t.value)) {
+                return undefined;
+            }
+            return { ...t, children: this.filter(t.children, values) };
+        }).filter(t => !!t);
+    }
+}
+LuTreeOptionPagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionPagerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+LuTreeOptionPagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuTreeOptionPagerComponent, selector: "lu-tree-option-pager", providers: [
+        {
+            provide: ALuTreeOptionOperator,
+            useExisting: forwardRef(() => LuTreeOptionPagerComponent),
+            multi: true,
+        },
+        {
+            provide: ALuOnScrollBottomSubscriber,
+            useExisting: forwardRef(() => LuTreeOptionPagerComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionPagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-tree-option-pager', template: '', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: ALuTreeOptionOperator,
+                            useExisting: forwardRef(() => LuTreeOptionPagerComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ALuOnScrollBottomSubscriber,
+                            useExisting: forwardRef(() => LuTreeOptionPagerComponent),
+                            multi: true,
+                        },
+                    ], styles: [] }]
+        }] });
+
+class LuTreeOptionPagerModule {
+}
+LuTreeOptionPagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuTreeOptionPagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionPagerModule, declarations: [LuTreeOptionPagerComponent], exports: [LuTreeOptionPagerComponent] });
+LuTreeOptionPagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionPagerModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionPagerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [
+                        LuTreeOptionPagerComponent,
+                    ],
+                    exports: [
+                        LuTreeOptionPagerComponent,
+                    ],
+                }]
+        }] });
+
+const LU_OPTION_PLACEHOLDER_TRANSLATIONS = new InjectionToken('LuOptionPlaceholderTranslations');
+
+class LuOptionPlaceholderIntl extends ALuIntl {
+    constructor(translations, locale) {
+        super(translations, locale);
+    }
+}
+LuOptionPlaceholderIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPlaceholderIntl, deps: [{ token: LU_OPTION_PLACEHOLDER_TRANSLATIONS }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+LuOptionPlaceholderIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPlaceholderIntl });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPlaceholderIntl, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LU_OPTION_PLACEHOLDER_TRANSLATIONS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }]; } });
+
+class LuOptionPlaceholderComponent {
+    constructor(intl) {
+        this.intl = intl;
+        this.onClear = new EventEmitter();
+    }
+    clear() {
+        this.onClear.emit();
+    }
+}
+LuOptionPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPlaceholderComponent, deps: [{ token: LuOptionPlaceholderIntl }], target: i0.ɵɵFactoryTarget.Component });
+LuOptionPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuOptionPlaceholderComponent, selector: "lu-option-placeholder", outputs: { onClear: "onClear" }, ngImport: i0, template: "<div class=\"optionPlaceholder\">\r\n\t<p class=\"optionPlaceholder-content u-marginBottomReset\">\r\n\t\t{{intl.placeholderDescription}}\r\n\t</p>\r\n\t<button class=\"link\" (click)=\"clear()\">\r\n\t\t{{intl.placeholderAction}}\r\n\t</button>\r\n</div>", styles: [".optionPlaceholder{display:block;padding:.5rem;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);font-style:italic;color:#96a6c5;color:var(--colors-text-light-color)}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPlaceholderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-option-placeholder', template: "<div class=\"optionPlaceholder\">\r\n\t<p class=\"optionPlaceholder-content u-marginBottomReset\">\r\n\t\t{{intl.placeholderDescription}}\r\n\t</p>\r\n\t<button class=\"link\" (click)=\"clear()\">\r\n\t\t{{intl.placeholderAction}}\r\n\t</button>\r\n</div>", styles: [".optionPlaceholder{display:block;padding:.5rem;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);font-style:italic;color:#96a6c5;color:var(--colors-text-light-color)}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LuOptionPlaceholderIntl]
+                }] }]; }, propDecorators: { onClear: [{
+                type: Output
+            }] } });
+
+class LuOptionSearcherComponent extends ALuOptionOperator {
+    constructor() {
+        super(...arguments);
+        this.searchControl = new FormControl();
+        this.clue$ = merge(of(''), this.searchControl.valueChanges);
+        this.searchFn = () => true;
+    }
+    set inOptions$(in$) {
+        this.outOptions$ = combineLatest(in$, this.clue$, (options, clue) => {
+            return !!clue ? (options || []).filter(o => this.searchFn(o, clue)) : options || [];
+        });
+        this.empty$ = this.outOptions$.pipe(map(o => !o || o.length === 0));
+    }
+    onOpen() {
+        this.searchInput.nativeElement.focus();
+        this.searchControl.setValue('');
+    }
+    resetClue() {
+        this.searchControl.setValue('');
+    }
+}
+LuOptionSearcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSearcherComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+LuOptionSearcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuOptionSearcherComponent, selector: "lu-option-searcher", inputs: { searchFn: "searchFn" }, providers: [
+        {
+            provide: ALuOptionOperator,
+            useExisting: forwardRef(() => LuOptionSearcherComponent),
+            multi: true,
+        },
+        {
+            provide: ALuOnOpenSubscriber,
+            useExisting: forwardRef(() => LuOptionSearcherComponent),
+            multi: true,
+        },
+    ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"textfield mod-search\">\r\n\t<input #searchInput class=\"textfield-input\" [formControl]=\"searchControl\">\r\n</div>\r\n\r\n<lu-option-placeholder *ngIf=\"empty$ | async\" (onClear)=\"resetClue()\"></lu-option-placeholder>", styles: [".textfield.mod-search{width:100%}.textfield-input{border-radius:0;box-shadow:none;background:#FFFFFF;border-bottom:1px solid var(--palettes-grey-200);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color)}.textfield-input:hover{background-color:#ebf0fa;background-color:var(--palettes-grey-50)}.textfield-input:focus{background-color:#fff;border-bottom-color:#898fae;border-bottom-color:var(--palettes-primary-600)}.checkbox.mod-formerEmployee{padding:.25rem .5rem;padding:var(--spacings-smallest) var(--components-options-item-padding-horizontal);border-bottom:1px solid var(--palettes-grey-200);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color);background-color:#ebf0fa;background-color:var(--palettes-grey-50);font-style:italic}\n"], components: [{ type: LuOptionPlaceholderComponent, selector: "lu-option-placeholder", outputs: ["onClear"] }], directives: [{ type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSearcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-option-searcher', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: ALuOptionOperator,
+                            useExisting: forwardRef(() => LuOptionSearcherComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ALuOnOpenSubscriber,
+                            useExisting: forwardRef(() => LuOptionSearcherComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"textfield mod-search\">\r\n\t<input #searchInput class=\"textfield-input\" [formControl]=\"searchControl\">\r\n</div>\r\n\r\n<lu-option-placeholder *ngIf=\"empty$ | async\" (onClear)=\"resetClue()\"></lu-option-placeholder>", styles: [".textfield.mod-search{width:100%}.textfield-input{border-radius:0;box-shadow:none;background:#FFFFFF;border-bottom:1px solid var(--palettes-grey-200);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color)}.textfield-input:hover{background-color:#ebf0fa;background-color:var(--palettes-grey-50)}.textfield-input:focus{background-color:#fff;border-bottom-color:#898fae;border-bottom-color:var(--palettes-primary-600)}.checkbox.mod-formerEmployee{padding:.25rem .5rem;padding:var(--spacings-smallest) var(--components-options-item-padding-horizontal);border-bottom:1px solid var(--palettes-grey-200);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color);background-color:#ebf0fa;background-color:var(--palettes-grey-50);font-style:italic}\n"] }]
+        }], propDecorators: { searchInput: [{
+                type: ViewChild,
+                args: ['searchInput', { read: ElementRef, static: true }]
+            }], searchFn: [{
+                type: Input
+            }] } });
+
+class ALuOptionPlaceholderLabel {
+}
+const luOptionPlaceholderTranslations = {
+    en: {
+        placeholderDescription: 'No results match your search criteria.',
+        placeholderAction: 'Clear search',
+    },
+    fr: {
+        placeholderDescription: 'Aucun résultat pour votre recherche',
+        placeholderAction: 'Vider la recherche',
+    },
+};
+
+class LuOptionPlaceholderModule {
+}
+LuOptionPlaceholderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPlaceholderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuOptionPlaceholderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPlaceholderModule, declarations: [LuOptionPlaceholderComponent], exports: [LuOptionPlaceholderComponent] });
+LuOptionPlaceholderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPlaceholderModule, providers: [
+        LuOptionPlaceholderIntl,
+        { provide: LU_OPTION_PLACEHOLDER_TRANSLATIONS, useValue: luOptionPlaceholderTranslations },
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPlaceholderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        LuOptionPlaceholderComponent,
+                    ],
+                    exports: [
+                        LuOptionPlaceholderComponent,
+                    ],
+                    providers: [
+                        LuOptionPlaceholderIntl,
+                        { provide: LU_OPTION_PLACEHOLDER_TRANSLATIONS, useValue: luOptionPlaceholderTranslations },
+                    ]
+                }]
+        }] });
+
+class LuOptionSearcherModule {
+}
+LuOptionSearcherModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSearcherModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuOptionSearcherModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSearcherModule, declarations: [LuOptionSearcherComponent], imports: [ReactiveFormsModule,
+        CommonModule,
+        LuOptionPlaceholderModule], exports: [LuOptionSearcherComponent] });
+LuOptionSearcherModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSearcherModule, imports: [[
+            ReactiveFormsModule,
+            CommonModule,
+            LuOptionPlaceholderModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSearcherModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ReactiveFormsModule,
+                        CommonModule,
+                        LuOptionPlaceholderModule,
+                    ],
+                    declarations: [
+                        LuOptionSearcherComponent,
+                    ],
+                    exports: [
+                        LuOptionSearcherComponent,
+                    ],
+                }]
+        }] });
+
+class LuTreeOptionSearcherComponent extends ALuTreeOptionOperator {
+    constructor() {
+        super(...arguments);
+        this.searchControl = new FormControl();
+        this.clue$ = merge(of(''), this.searchControl.valueChanges);
+        this.searchFn = () => true;
+    }
+    set inOptions$(in$) {
+        this.outOptions$ = combineLatest(in$, this.clue$, (options, clue) => {
+            if (!clue) {
+                return options || [];
+            }
+            return this.trim(options, clue);
+        });
+        this.empty$ = this.outOptions$.pipe(map(o => !o || o.length === 0));
+    }
+    onOpen() {
+        this.searchInput.nativeElement.focus();
+        this.searchControl.setValue('');
+    }
+    trim(options, clue) {
+        return options.map(option => {
+            if (this.searchFn(option.value, clue)) {
+                return { ...option };
+            }
+            const trimmedChildren = option.children ? this.trim(option.children, clue) : [];
+            if (trimmedChildren.length) {
+                return { ...option, children: trimmedChildren };
+            }
+            return undefined;
+        }).filter(o => !!o);
+    }
+    resetClue() {
+        this.searchControl.setValue('');
+    }
+}
+LuTreeOptionSearcherComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSearcherComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+LuTreeOptionSearcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuTreeOptionSearcherComponent, selector: "lu-tree-option-searcher", inputs: { searchFn: "searchFn" }, providers: [
+        {
+            provide: ALuTreeOptionOperator,
+            useExisting: forwardRef(() => LuTreeOptionSearcherComponent),
+            multi: true,
+        },
+        {
+            provide: ALuOnOpenSubscriber,
+            useExisting: forwardRef(() => LuTreeOptionSearcherComponent),
+            multi: true,
+        },
+    ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"textfield mod-search\">\r\n\t<input #searchInput class=\"textfield-input\" [formControl]=\"searchControl\">\r\n</div>\r\n\r\n<lu-option-placeholder *ngIf=\"empty$ | async\" (onClear)=\"resetClue()\"></lu-option-placeholder>", styles: [".textfield.mod-search{width:100%}.textfield-input{border-radius:0;box-shadow:none;background:#FFFFFF;border-bottom:1px solid var(--palettes-grey-200);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color)}.textfield-input:hover{background-color:#ebf0fa;background-color:var(--palettes-grey-50)}.textfield-input:focus{background-color:#fff;border-bottom-color:#898fae;border-bottom-color:var(--palettes-primary-600)}.checkbox.mod-formerEmployee{padding:.25rem .5rem;padding:var(--spacings-smallest) var(--components-options-item-padding-horizontal);border-bottom:1px solid var(--palettes-grey-200);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color);background-color:#ebf0fa;background-color:var(--palettes-grey-50);font-style:italic}\n"], components: [{ type: LuOptionPlaceholderComponent, selector: "lu-option-placeholder", outputs: ["onClear"] }], directives: [{ type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSearcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-tree-option-searcher', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: ALuTreeOptionOperator,
+                            useExisting: forwardRef(() => LuTreeOptionSearcherComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ALuOnOpenSubscriber,
+                            useExisting: forwardRef(() => LuTreeOptionSearcherComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"textfield mod-search\">\r\n\t<input #searchInput class=\"textfield-input\" [formControl]=\"searchControl\">\r\n</div>\r\n\r\n<lu-option-placeholder *ngIf=\"empty$ | async\" (onClear)=\"resetClue()\"></lu-option-placeholder>", styles: [".textfield.mod-search{width:100%}.textfield-input{border-radius:0;box-shadow:none;background:#FFFFFF;border-bottom:1px solid var(--palettes-grey-200);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color)}.textfield-input:hover{background-color:#ebf0fa;background-color:var(--palettes-grey-50)}.textfield-input:focus{background-color:#fff;border-bottom-color:#898fae;border-bottom-color:var(--palettes-primary-600)}.checkbox.mod-formerEmployee{padding:.25rem .5rem;padding:var(--spacings-smallest) var(--components-options-item-padding-horizontal);border-bottom:1px solid var(--palettes-grey-200);border-bottom:var(--commons-divider-width) solid var(--commons-divider-color);background-color:#ebf0fa;background-color:var(--palettes-grey-50);font-style:italic}\n"] }]
+        }], propDecorators: { searchInput: [{
+                type: ViewChild,
+                args: ['searchInput', { read: ElementRef, static: true }]
+            }], searchFn: [{
+                type: Input
+            }] } });
+
+class LuTreeOptionSearcherModule {
+}
+LuTreeOptionSearcherModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSearcherModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuTreeOptionSearcherModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSearcherModule, declarations: [LuTreeOptionSearcherComponent], imports: [ReactiveFormsModule,
+        CommonModule,
+        LuOptionPlaceholderModule], exports: [LuTreeOptionSearcherComponent] });
+LuTreeOptionSearcherModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSearcherModule, imports: [[
+            ReactiveFormsModule,
+            CommonModule,
+            LuOptionPlaceholderModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSearcherModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ReactiveFormsModule,
+                        CommonModule,
+                        LuOptionPlaceholderModule,
+                    ],
+                    declarations: [
+                        LuTreeOptionSearcherComponent,
+                    ],
+                    exports: [
+                        LuTreeOptionSearcherComponent,
+                    ],
+                }]
+        }] });
+
+class LuForGroupContext {
+    constructor($implicit, index, count) {
+        this.$implicit = $implicit;
+        this.index = index;
+        this.count = count;
+    }
+    get first() { return this.index === 0; }
+    get last() { return this.index === this.count - 1; }
+    get even() { return this.index % 2 === 0; }
+    get odd() { return !this.even; }
+}
+class LuForGroupsDirective {
+    constructor(_vcr, _cdr, _templateRef) {
+        this._vcr = _vcr;
+        this._cdr = _cdr;
+        this._templateRef = _templateRef;
+        this._subs = new Subscription();
+    }
+    set attrGroupBy(fn) {
+        this._groupByFn = fn;
+    }
+    set inOptions$(options$) {
+        this._subs.add(options$.subscribe(options => this.render(options)));
+        this.outOptions$ = options$;
+    }
+    ngOnDestroy() {
+        this._subs.unsubscribe();
+    }
+    render(options) {
+        this._vcr.clear();
+        const count = options.length;
+        const groups = this.groupBy(options);
+        groups.forEach((group, index) => {
+            const view = this._vcr.createEmbeddedView(this._templateRef, new LuForGroupContext(group, index, count));
+        });
+        this._cdr.markForCheck();
+    }
+    groupBy(items) {
+        const groups = [];
+        items.forEach((item) => {
+            const key = this._groupByFn(item);
+            let group = groups.find(g => g.key === key);
+            if (!group) {
+                group = { key: key, items: [] };
+                groups.push(group);
+            }
+            group.items.push(item);
+        });
+        return groups;
+    }
+}
+LuForGroupsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForGroupsDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+LuForGroupsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: LuForGroupsDirective, selector: "[luForGroups]", inputs: { attrGroupBy: ["luForGroupsGroupBy", "attrGroupBy"] }, providers: [
+        {
+            provide: ALuOptionOperator,
+            useExisting: forwardRef(() => LuForGroupsDirective),
+            multi: true,
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForGroupsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[luForGroups]',
+                    providers: [
+                        {
+                            provide: ALuOptionOperator,
+                            useExisting: forwardRef(() => LuForGroupsDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i0.TemplateRef }]; }, propDecorators: { attrGroupBy: [{
+                type: Input,
+                args: ['luForGroupsGroupBy']
+            }] } });
+
+class LuForGroupsModule {
+}
+LuForGroupsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForGroupsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuForGroupsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForGroupsModule, declarations: [LuForGroupsDirective], exports: [LuForGroupsDirective] });
+LuForGroupsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForGroupsModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForGroupsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [
+                        LuForGroupsDirective,
+                    ],
+                    exports: [
+                        LuForGroupsDirective,
+                    ],
+                }]
+        }] });
+
+class LuForOptionsDirective extends NgForOf {
+    constructor(_viewContainer, _template, _differs, _changeDetectionRef) {
+        super(_viewContainer, _template, _differs);
+        this._changeDetectionRef = _changeDetectionRef;
+        this._subs = new Subscription();
+    }
+    set inOptions$(options$) {
+        this._subs.add(options$.subscribe(options => {
+            this.ngForOf = options;
+            this._changeDetectionRef.markForCheck();
+        }));
+        this.outOptions$ = options$;
+    }
+    set luForOptionsTrackBy(fn) {
+        this.ngForTrackBy = fn;
+    }
+    ngOnDestroy() {
+        this._subs.unsubscribe();
+    }
+}
+LuForOptionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForOptionsDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }, { token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+LuForOptionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: LuForOptionsDirective, selector: "[luForOptions]", inputs: { luForOptionsTrackBy: "luForOptionsTrackBy" }, providers: [
+        {
+            provide: ALuOptionOperator,
+            useExisting: forwardRef(() => LuForOptionsDirective),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForOptionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[luForOptions]',
+                    providers: [
+                        {
+                            provide: ALuOptionOperator,
+                            useExisting: forwardRef(() => LuForOptionsDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }, { type: i0.IterableDiffers }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { luForOptionsTrackBy: [{
+                type: Input
+            }] } });
+
+class LuForOptionsModule {
+}
+LuForOptionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForOptionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuForOptionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForOptionsModule, declarations: [LuForOptionsDirective], exports: [LuForOptionsDirective] });
+LuForOptionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForOptionsModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForOptionsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [
+                        LuForOptionsDirective,
+                    ],
+                    exports: [
+                        LuForOptionsDirective,
+                    ],
+                }]
+        }] });
+
+class LuForTreeOptionsDirective extends LuForOptionsDirective {
+}
+LuForTreeOptionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForTreeOptionsDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+LuForTreeOptionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: LuForTreeOptionsDirective, selector: "[luForTreeOptions]", providers: [
+        {
+            provide: ALuTreeOptionOperator,
+            useExisting: forwardRef(() => LuForTreeOptionsDirective),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForTreeOptionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[luForTreeOptions]',
+                    providers: [
+                        {
+                            provide: ALuTreeOptionOperator,
+                            useExisting: forwardRef(() => LuForTreeOptionsDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+class LuForTreeOptionsModule {
+}
+LuForTreeOptionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForTreeOptionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuForTreeOptionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForTreeOptionsModule, declarations: [LuForTreeOptionsDirective], exports: [LuForTreeOptionsDirective] });
+LuForTreeOptionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForTreeOptionsModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuForTreeOptionsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [
+                        LuForTreeOptionsDirective,
+                    ],
+                    exports: [
+                        LuForTreeOptionsDirective,
+                    ],
+                }]
+        }] });
+
+class LuOptionOperatorModule {
+}
+LuOptionOperatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionOperatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuOptionOperatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionOperatorModule, imports: [LuOptionPagerModule,
+        LuOptionFeederModule,
+        LuOptionSearcherModule,
+        LuForOptionsModule,
+        LuForGroupsModule], exports: [LuOptionPagerModule,
+        LuOptionFeederModule,
+        LuOptionSearcherModule,
+        LuForOptionsModule,
+        LuForGroupsModule] });
+LuOptionOperatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionOperatorModule, imports: [[
+            LuOptionPagerModule,
+            LuOptionFeederModule,
+            LuOptionSearcherModule,
+            LuForOptionsModule,
+            LuForGroupsModule,
+        ], LuOptionPagerModule,
+        LuOptionFeederModule,
+        LuOptionSearcherModule,
+        LuForOptionsModule,
+        LuForGroupsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionOperatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        LuOptionPagerModule,
+                        LuOptionFeederModule,
+                        LuOptionSearcherModule,
+                        LuForOptionsModule,
+                        LuForGroupsModule,
+                    ],
+                    exports: [
+                        LuOptionPagerModule,
+                        LuOptionFeederModule,
+                        LuOptionSearcherModule,
+                        LuForOptionsModule,
+                        LuForGroupsModule,
+                    ],
+                }]
+        }] });
+
+class LuTreeOptionOperatorModule {
+}
+LuTreeOptionOperatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionOperatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuTreeOptionOperatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionOperatorModule, imports: [LuTreeOptionFeederModule,
+        LuForTreeOptionsModule,
+        LuTreeOptionPagerModule,
+        LuTreeOptionSearcherModule], exports: [LuTreeOptionFeederModule,
+        LuForTreeOptionsModule,
+        LuTreeOptionPagerModule,
+        LuTreeOptionSearcherModule] });
+LuTreeOptionOperatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionOperatorModule, imports: [[
+            LuTreeOptionFeederModule,
+            LuForTreeOptionsModule,
+            LuTreeOptionPagerModule,
+            LuTreeOptionSearcherModule,
+        ], LuTreeOptionFeederModule,
+        LuForTreeOptionsModule,
+        LuTreeOptionPagerModule,
+        LuTreeOptionSearcherModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionOperatorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        LuTreeOptionFeederModule,
+                        LuForTreeOptionsModule,
+                        LuTreeOptionPagerModule,
+                        LuTreeOptionSearcherModule,
+                    ],
+                    exports: [
+                        LuTreeOptionFeederModule,
+                        LuForTreeOptionsModule,
+                        LuTreeOptionPagerModule,
+                        LuTreeOptionSearcherModule,
+                    ],
+                }]
+        }] });
+
+class ALuOptionPicker extends ALuPickerPanel {
+    constructor() {
+        super(...arguments);
+        this._subs = new Subscription();
+        this.optionComparer = (option1, option2) => JSON.stringify(option1) === JSON.stringify(option2);
+    }
+    setValue(value) {
+        this._value = value;
+        this._applySelected();
+    }
+    get _options$() { return this.__options$; }
+    set _options$(options$) {
+        this.__options$ = options$;
+        // reapply selected when the options change
+        this._subs.add(options$
+            .subscribe(o => {
+            this._applySelected();
+            this._applyHighlight();
+        }));
+        // subscribe to any option.onSelect
+        const singleFlow$ = options$.pipe(switchMap(items => merge(...items.map(i => i.onSelect))));
+        this._subs.add(singleFlow$.subscribe(option => this._toggle(option)));
+    }
+    _toggle(option) {
+        const value = option.value;
+        if (!this.multiple) {
+            this._select(value);
+        }
+        else {
+            const values = this._value || [];
+            let newValues;
+            if (values.some(v => this.optionComparer(v, value))) {
+                // value was present, we remove it
+                newValues = values.filter(v => !this.optionComparer(v, value));
+            }
+            else {
+                // value was absent, we add it
+                newValues = [...values, value];
+            }
+            this._select(newValues);
+        }
+    }
+    _select(val) {
+        this._emitSelectValue(val);
+        if (!this.multiple) {
+            this._emitCloseEvent();
+        }
+    }
+    destroy() {
+        this._subs.unsubscribe();
+    }
+    _handleKeydown(event) {
+        switch (event.keyCode) {
+            case ESCAPE:
+                this._emitCloseEvent();
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case TAB:
+                this._emitCloseEvent();
+                break;
+        }
+    }
+}
+
+class ALuOptionPickerComponent extends ALuOptionPicker {
+    constructor(_changeDetectorRef, document) {
+        super();
+        this._changeDetectorRef = _changeDetectorRef;
+        this.document = document;
+        this.close = new EventEmitter();
+        this.open = new EventEmitter();
+        this.hovered = new EventEmitter();
+        this.onSelectValue = new EventEmitter();
+        this._defaultOverlayPaneClasses = ['mod-optionPicker'];
+        this._options = [];
+        this._highlightIndex = -1;
+        this._isOptionItemsInitialized = false;
+        this.overlayPaneClass = this._defaultOverlayPaneClasses;
+    }
+    /**
+     * This method takes classes set on the host lu-popover element and applies them on the
+     * popover template that displays in the overlay container.  Otherwise, it's difficult
+     * to style the containing popover from outside the component.
+     * @param classes list of class names
+     */
+    set inputPanelClasses(classes) {
+        this.panelClasses = classes;
+    }
+    /**
+     * This method takes classes set on the host lu-popover element and applies them on the
+     * popover template that displays in the overlay container. Otherwise, it's difficult
+     * to style the containing popover from outside the component.
+     * @param classes list of class names
+     */
+    set inputContentClasses(classes) {
+        this.contentClasses = classes;
+    }
+    /**
+     * This method take a function that compare options from feeder and options from form value.
+     * By default, compare JSON values.
+     */
+    set inputOptionComparer(comparer) {
+        this.optionComparer = comparer;
+    }
+    set optionsQL(ql) {
+        this._optionsQL = ql;
+    }
+    _emitSelectValue(val) {
+        this.onSelectValue.emit(val);
+    }
+    ngOnDestroy() {
+        super.destroy();
+    }
+    _emitOpenEvent() {
+        this.open.emit();
+    }
+    _emitCloseEvent() {
+        this.close.emit();
+    }
+    _emitHoveredEvent(h) {
+        this.hovered.emit(h);
+    }
+    onOpen() {
+        super.onOpen();
+        this.highlightIndex = 0;
+        // this._initObserver();
+        this._applySelected();
+    }
+    set vcTemplateRef(tr) {
+        this.templateRef = tr;
+    }
+    // keydown
+    _handleKeydown(event) {
+        super._handleKeydown(event);
+        switch (event.keyCode) {
+            case ENTER:
+                this._selectHighlighted();
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case UP_ARROW:
+                this._decrHighlight();
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case DOWN_ARROW:
+                this._incrHighlight();
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+        }
+    }
+    get highlightIndex() { return this._highlightIndex; }
+    set highlightIndex(i) {
+        this._highlightIndex = i;
+        this._applyHighlight(true);
+    }
+    _initHighlight() {
+        this._subs.add(this._options$.subscribe(options => {
+            const optionCount = options.length;
+            const newHighlight = Math.max(Math.min(this.highlightIndex, optionCount - 1), -1);
+            if (newHighlight !== this.highlightIndex) {
+                this.highlightIndex = newHighlight;
+            }
+        }));
+        setTimeout(() => {
+            this.highlightIndex = -1;
+        }, 1);
+    }
+    _incrHighlight() {
+        const optionCount = this._options.length;
+        this.highlightIndex = Math.max(Math.min(this.highlightIndex + 1, optionCount - 1), -1);
+    }
+    _decrHighlight() {
+        this.highlightIndex = Math.max(this.highlightIndex - 1, -1);
+    }
+    _applyHighlight(reScroll = false) {
+        if (!this.isOpen) {
+            return;
+        }
+        // const highlightClass = 'is-highlighted';
+        const options = this._options;
+        // remove `is-highlighted` class from all other options
+        options.forEach(option => option.highlighted = false);
+        // apply `is-highlighted` to current highlight
+        const highlightedOption = options[this.highlightIndex];
+        if (!!highlightedOption) {
+            highlightedOption.highlighted = true;
+            // scroll to let the highlighted option visible
+            if (reScroll) {
+                setTimeout(() => {
+                    this._scrollToHighlight(highlightedOption.element.nativeElement);
+                }, 1);
+            }
+        }
+        this._changeDetectorRef.markForCheck();
+    }
+    _scrollToHighlight(targetElt) {
+        if (!targetElt) {
+            return;
+        }
+        const contentElt = this.document.querySelector('.lu-picker-content');
+        if (!contentElt) {
+            return;
+        }
+        const headerElt = this.document.querySelector('.lu-picker-content .lu-picker-header');
+        const headerHeight = headerElt ? headerElt.offsetHeight : 0;
+        const footerElt = this.document.querySelector('.lu-picker-content .lu-picker-footer');
+        const footerHeight = footerElt ? footerElt.offsetHeight : 0;
+        // highlighted option is too high
+        if (contentElt.scrollTop + headerHeight > targetElt.offsetTop) {
+            contentElt.scrollTop = targetElt.offsetTop - headerHeight;
+            return;
+        }
+        // highlight option is too low
+        const offsetHeight = contentElt.offsetHeight;
+        if (contentElt.scrollTop + offsetHeight - footerHeight < targetElt.offsetTop + targetElt.offsetHeight) {
+            contentElt.scrollTop = targetElt.offsetTop + targetElt.offsetHeight - offsetHeight + footerHeight;
+            return;
+        }
+    }
+    _selectHighlighted() {
+        const options = this._options ? this._options : [];
+        const highlightedOption = options[this.highlightIndex];
+        if (!!highlightedOption) {
+            this._toggle(highlightedOption);
+        }
+    }
+    _initSelected() {
+        this._subs.add(this._options$.subscribe(() => {
+            this._applySelected();
+        }));
+    }
+    _applySelected() {
+        if (!this._options) {
+            return;
+        }
+        // const selectedClass = 'is-selected';
+        const options = this._options;
+        // remove `is-selected` class from all other options
+        options.forEach(option => option.selected = false);
+        // add `is-selected` to all selected indexes
+        const selectedIndexes = [];
+        if (!this.multiple) {
+            const selectedIndex = this._options.findIndex(o => this.optionComparer(o.value, this._value));
+            if (selectedIndex !== -1) {
+                selectedIndexes.push(selectedIndex);
+            }
+            if (selectedIndex !== -1 && this.highlightIndex === -1) {
+                this.highlightIndex = selectedIndex;
+            }
+        }
+        else {
+            const values = this._value || [];
+            const matchingIndexes = this._options.map(o => values.some(v => this.optionComparer(o.value, v))).map((f, i) => f ? i : null)
+                .filter(i => i !== null);
+            selectedIndexes.push(...matchingIndexes);
+            // selectedIndexes.push(
+            // 	...values
+            // 	.map(v => this._options.findIndex(o => this.optionComparer(o.value, v)))
+            // 	.filter(i => i !== -1)
+            // );
+        }
+        selectedIndexes.forEach(i => {
+            const option = options[i];
+            if (!!option) {
+                option.selected = true;
+            }
+        });
+    }
+    initItems() {
+        const items$ = merge(of(this._optionsQL), this._optionsQL.changes)
+            .pipe(map(q => q.toArray()), delay(0), share());
+        items$.subscribe(o => this._options = o || []);
+        this._options$ = items$;
+        this._initHighlight();
+        this._initSelected();
+    }
+    ngAfterViewInit() {
+        this.initItems();
+    }
+}
+ALuOptionPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ALuOptionPickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+ALuOptionPickerComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: ALuOptionPickerComponent, inputs: { inputPanelClasses: ["panel-classes", "inputPanelClasses"], inputContentClasses: ["content-classes", "inputContentClasses"], inputOptionComparer: ["option-comparer", "inputOptionComparer"] }, outputs: { close: "close", open: "open", hovered: "hovered", onSelectValue: "onSelectValue" }, queries: [{ propertyName: "optionsQL", predicate: ALuOptionItem, descendants: true }], viewQueries: [{ propertyName: "vcTemplateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ALuOptionPickerComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { inputPanelClasses: [{
+                type: Input,
+                args: ['panel-classes']
+            }], inputContentClasses: [{
+                type: Input,
+                args: ['content-classes']
+            }], inputOptionComparer: [{
+                type: Input,
+                args: ['option-comparer']
+            }], close: [{
+                type: Output
+            }], open: [{
+                type: Output
+            }], hovered: [{
+                type: Output
+            }], onSelectValue: [{
+                type: Output
+            }], optionsQL: [{
+                type: ContentChildren,
+                args: [ALuOptionItem, { descendants: true }]
+            }], vcTemplateRef: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
+/**
+* basic option picker panel
+*/
+class LuOptionPickerComponent extends ALuOptionPickerComponent {
+    constructor(_changeDetectorRef, document) {
+        super(_changeDetectorRef, document);
+    }
+}
+LuOptionPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+LuOptionPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuOptionPickerComponent, selector: "lu-option-picker", providers: [
+        {
+            provide: ALuPickerPanel,
+            useExisting: forwardRef(() => LuOptionPickerComponent),
+        },
+    ], exportAs: ["LuOptionPicker"], usesInheritance: true, ngImport: i0, template: "<ng-template>\r\n\t<div class=\"lu-picker-panel lu-option-picker-panel\" role=\"dialog\" [ngClass]=\"panelClassesMap\" [class.mod-multiple]=\"multiple\"\r\n\t(click)=\"onClick()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\" (mousedown)=\"onMouseDown($event)\">\r\n\t\t<div class=\"lu-picker-content\" [ngClass]=\"contentClassesMap\" [cdkTrapFocus]=\"trapFocus\">\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [luTransformPopover], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-option-picker', changeDetection: ChangeDetectionStrategy.OnPush, animations: [luTransformPopover], exportAs: 'LuOptionPicker', providers: [
+                        {
+                            provide: ALuPickerPanel,
+                            useExisting: forwardRef(() => LuOptionPickerComponent),
+                        },
+                    ], template: "<ng-template>\r\n\t<div class=\"lu-picker-panel lu-option-picker-panel\" role=\"dialog\" [ngClass]=\"panelClassesMap\" [class.mod-multiple]=\"multiple\"\r\n\t(click)=\"onClick()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\" (mousedown)=\"onMouseDown($event)\">\r\n\t\t<div class=\"lu-picker-content\" [ngClass]=\"contentClassesMap\" [cdkTrapFocus]=\"trapFocus\">\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+class ALuOptionSelector {
+}
+
+const LU_OPTION_SELECT_ALL_TRANSLATIONS = new InjectionToken('LuOptionSelectAllTranslations');
+
+class LuOptionSelectAllIntl extends ALuIntl {
+    constructor(translations, locale) {
+        super(translations, locale);
+    }
+}
+LuOptionSelectAllIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSelectAllIntl, deps: [{ token: LU_OPTION_SELECT_ALL_TRANSLATIONS }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+LuOptionSelectAllIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSelectAllIntl });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSelectAllIntl, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LU_OPTION_SELECT_ALL_TRANSLATIONS]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }]; } });
+
+class LuOptionSelectAllComponent extends ALuOptionOperator {
+    constructor(intl) {
+        super();
+        this.intl = intl;
+        this.multiple = true;
+        this.onSelectValue = new Subject();
+        this.fixed = true;
+    }
+    set inOptions$(in$) {
+        this.outOptions$ = in$.pipe(tap(options => this.options = options));
+    }
+    selectAll() {
+        this.onSelectValue.next([...this.options]);
+    }
+    deselectAll() {
+        this.onSelectValue.next([]);
+    }
+    setValue(values) {
+        this._values = values;
+    }
+}
+LuOptionSelectAllComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSelectAllComponent, deps: [{ token: LuOptionSelectAllIntl }], target: i0.ɵɵFactoryTarget.Component });
+LuOptionSelectAllComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuOptionSelectAllComponent, selector: "lu-option-select-all", host: { properties: { "class.position-fixed": "this.fixed" } }, providers: [
+        {
+            provide: ALuOptionOperator,
+            useExisting: forwardRef(() => LuOptionSelectAllComponent),
+            multi: true,
+        },
+        {
+            provide: ALuOptionSelector,
+            useExisting: forwardRef(() => LuOptionSelectAllComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<button (click)=\"selectAll()\" class=\"link selectAll-button\">{{intl.select}}</button>\r\n<button (click)=\"deselectAll()\" class=\"link selectAll-button u-marginLeftSmaller\">{{intl.deselect}}</button>", styles: [":host .selectAll-button{color:var(--colors-text-light-color);font-size:var(--sizes-small-font-size);outline:none}:host .selectAll-button:hover{color:var(--colors-text-default-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSelectAllComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-option-select-all', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: ALuOptionOperator,
+                            useExisting: forwardRef(() => LuOptionSelectAllComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ALuOptionSelector,
+                            useExisting: forwardRef(() => LuOptionSelectAllComponent),
+                            multi: true,
+                        },
+                    ], template: "<button (click)=\"selectAll()\" class=\"link selectAll-button\">{{intl.select}}</button>\r\n<button (click)=\"deselectAll()\" class=\"link selectAll-button u-marginLeftSmaller\">{{intl.deselect}}</button>", styles: [":host .selectAll-button{color:var(--colors-text-light-color);font-size:var(--sizes-small-font-size);outline:none}:host .selectAll-button:hover{color:var(--colors-text-default-color)}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LuOptionSelectAllIntl]
+                }] }]; }, propDecorators: { fixed: [{
+                type: HostBinding,
+                args: ['class.position-fixed']
+            }] } });
+
+class ALuOptionSelectAllLabel {
+}
+const luOptionSelectAllTranslations = {
+    en: {
+        select: 'Select all',
+        deselect: 'Deselect all',
+    },
+    fr: {
+        select: 'Tout sélectionner',
+        deselect: 'Tout Déselectionner'
+    },
+    de: {
+        select: 'Alle auswählen',
+        deselect: 'Alle abwählen'
+    },
+    pt: {
+        select: 'Selecionar tudo',
+        deselect: 'Desselecionar tudo'
+    },
+    es: {
+        select: 'Seleccionar todo',
+        deselect: 'Desmarcar todo'
+    },
+};
+
+class LuOptionSelectAllModule {
+}
+LuOptionSelectAllModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSelectAllModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuOptionSelectAllModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSelectAllModule, declarations: [LuOptionSelectAllComponent], exports: [LuOptionSelectAllComponent] });
+LuOptionSelectAllModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSelectAllModule, providers: [
+        { provide: LU_OPTION_SELECT_ALL_TRANSLATIONS, useValue: luOptionSelectAllTranslations },
+        LuOptionSelectAllIntl,
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSelectAllModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        LuOptionSelectAllComponent,
+                    ],
+                    exports: [
+                        LuOptionSelectAllComponent,
+                    ],
+                    providers: [
+                        { provide: LU_OPTION_SELECT_ALL_TRANSLATIONS, useValue: luOptionSelectAllTranslations },
+                        LuOptionSelectAllIntl,
+                    ]
+                }]
+        }] });
+
+class ALuTreeOptionSelector extends ALuOptionSelector {
+}
+
+class LuTreeOptionSelectAllComponent extends ALuTreeOptionOperator {
+    constructor(intl) {
+        super();
+        this.intl = intl;
+        this.multiple = true;
+        this.onSelectValue = new Subject();
+        this.fixed = true;
+    }
+    set inOptions$(in$) {
+        this.outOptions$ = in$.pipe(tap(options => this.flatOptions = this.flattenTree(options)));
+    }
+    selectAll() {
+        this.onSelectValue.next([...this.flatOptions]);
+    }
+    deselectAll() {
+        this.onSelectValue.next([]);
+    }
+    setValue(values) {
+        this._values = values;
+    }
+    flattenTree(tree = []) {
+        return tree
+            .map(t => [t.value, ...this.flattenTree(t.children)])
+            .reduce((agg, cur) => [...agg, ...cur], []);
+    }
+}
+LuTreeOptionSelectAllComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSelectAllComponent, deps: [{ token: LuOptionSelectAllIntl }], target: i0.ɵɵFactoryTarget.Component });
+LuTreeOptionSelectAllComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuTreeOptionSelectAllComponent, selector: "lu-tree-option-select-all", host: { properties: { "class.position-fixed": "this.fixed" } }, providers: [
+        {
+            provide: ALuTreeOptionOperator,
+            useExisting: forwardRef(() => LuTreeOptionSelectAllComponent),
+            multi: true,
+        },
+        {
+            provide: ALuTreeOptionSelector,
+            useExisting: forwardRef(() => LuTreeOptionSelectAllComponent),
+            multi: true,
+        },
+    ], usesInheritance: true, ngImport: i0, template: "<button (click)=\"selectAll()\" class=\"link selectAll-button\">{{intl.select}}</button>\r\n<button (click)=\"deselectAll()\" class=\"link selectAll-button u-marginLeftSmaller\">{{intl.deselect}}</button>", styles: [":host .selectAll-button{color:var(--colors-text-light-color);font-size:var(--sizes-small-font-size);outline:none}:host .selectAll-button:hover{color:var(--colors-text-default-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSelectAllComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-tree-option-select-all', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: ALuTreeOptionOperator,
+                            useExisting: forwardRef(() => LuTreeOptionSelectAllComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: ALuTreeOptionSelector,
+                            useExisting: forwardRef(() => LuTreeOptionSelectAllComponent),
+                            multi: true,
+                        },
+                    ], template: "<button (click)=\"selectAll()\" class=\"link selectAll-button\">{{intl.select}}</button>\r\n<button (click)=\"deselectAll()\" class=\"link selectAll-button u-marginLeftSmaller\">{{intl.deselect}}</button>", styles: [":host .selectAll-button{color:var(--colors-text-light-color);font-size:var(--sizes-small-font-size);outline:none}:host .selectAll-button:hover{color:var(--colors-text-default-color)}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LuOptionSelectAllIntl]
+                }] }]; }, propDecorators: { fixed: [{
+                type: HostBinding,
+                args: ['class.position-fixed']
+            }] } });
+
+class LuTreeOptionSelectAllModule {
+}
+LuTreeOptionSelectAllModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSelectAllModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuTreeOptionSelectAllModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSelectAllModule, declarations: [LuTreeOptionSelectAllComponent], exports: [LuTreeOptionSelectAllComponent] });
+LuTreeOptionSelectAllModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSelectAllModule, providers: [
+        { provide: LU_OPTION_SELECT_ALL_TRANSLATIONS, useValue: luOptionSelectAllTranslations },
+        LuOptionSelectAllIntl,
+    ] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSelectAllModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        LuTreeOptionSelectAllComponent,
+                    ],
+                    exports: [
+                        LuTreeOptionSelectAllComponent,
+                    ],
+                    providers: [
+                        { provide: LU_OPTION_SELECT_ALL_TRANSLATIONS, useValue: luOptionSelectAllTranslations },
+                        LuOptionSelectAllIntl,
+                    ]
+                }]
+        }] });
+
+class LuOptionSelectorModule {
+}
+LuOptionSelectorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuOptionSelectorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSelectorModule, imports: [LuOptionSelectAllModule], exports: [LuOptionSelectAllModule] });
+LuOptionSelectorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSelectorModule, imports: [[
+            LuOptionSelectAllModule,
+        ], LuOptionSelectAllModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionSelectorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        LuOptionSelectAllModule,
+                    ],
+                    exports: [
+                        LuOptionSelectAllModule,
+                    ],
+                }]
+        }] });
+
+class LuTreeOptionSelectorModule {
+}
+LuTreeOptionSelectorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuTreeOptionSelectorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSelectorModule, imports: [LuTreeOptionSelectAllModule], exports: [LuTreeOptionSelectAllModule] });
+LuTreeOptionSelectorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSelectorModule, imports: [[
+            LuTreeOptionSelectAllModule,
+        ], LuTreeOptionSelectAllModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionSelectorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        LuTreeOptionSelectAllModule,
+                    ],
+                    exports: [
+                        LuTreeOptionSelectAllModule,
+                    ],
+                }]
+        }] });
+
+class ALuOptionPickerAdvancedComponent extends ALuOptionPickerComponent {
+    constructor(_changeDetectorRef, document) {
+        super(_changeDetectorRef, document);
+        this._operators = [];
+        this._onOpenSubscribers = [];
+        this._onCloseSubscribers = [];
+        this._onScrollBottomSubscribers = [];
+        this._selectors = [];
+    }
+    set operatorsQL(ql) {
+        this._operatorsQL = ql;
+    }
+    set onOpenSubsQL(ql) {
+        this._onOpenSubscribers = ql.toArray();
+    }
+    set onCloseSubsQL(ql) {
+        this._onCloseSubscribers = ql.toArray();
+    }
+    set onScrollBottomSubsQL(ql) {
+        this._onScrollBottomSubscribers = ql.toArray();
+    }
+    set selectorsQL(ql) {
+        this._selectorsQL = ql;
+    }
+    onScrollBottom() {
+        this._onScrollBottomSubscribers.forEach(o => {
+            if (!o.onScrollBottom) {
+                return;
+            }
+            o.onScrollBottom();
+        });
+    }
+    onOpen() {
+        this._onOpenSubscribers.forEach(o => {
+            o.onOpen();
+        });
+        const operators = this._operators || [];
+        const lastOperator = operators[operators.length - 1];
+        if (lastOperator && lastOperator.outOptions$) {
+            this.loading$ = lastOperator.outOptions$.pipe(first(), mapTo(false), startWith(true), shareReplay());
+        }
+        super.onOpen();
+    }
+    onClose() {
+        this._onCloseSubscribers.forEach(o => {
+            o.onClose();
+        });
+        super.onClose();
+    }
+    setValue(value) {
+        super.setValue(value);
+        this._selectors.forEach(s => s.setValue(value));
+    }
+    initOperators() {
+        const operators = this._operatorsQL.toArray();
+        this._operators = operators;
+        let options$;
+        operators.forEach(operator => {
+            operator.inOptions$ = options$;
+            options$ = operator.outOptions$;
+        });
+    }
+    initSelectors() {
+        const selectors$ = this._selectorsQL.changes.pipe(startWith(this._selectorsQL.toArray()));
+        this._subs.add(selectors$.subscribe(selectors => {
+            this._selectors = selectors;
+            this._subs.add(merge(this._selectors.map(s => s.onSelectValue)).pipe(mergeAll()).subscribe(values => {
+                this._select(values);
+            }));
+        }));
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.initOperators();
+        this.initSelectors();
+    }
+}
+ALuOptionPickerAdvancedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ALuOptionPickerAdvancedComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+ALuOptionPickerAdvancedComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: ALuOptionPickerAdvancedComponent, queries: [{ propertyName: "operatorsQL", predicate: ALuOptionOperator, descendants: true }, { propertyName: "onOpenSubsQL", predicate: ALuOnOpenSubscriber, descendants: true }, { propertyName: "onCloseSubsQL", predicate: ALuOnCloseSubscriber, descendants: true }, { propertyName: "onScrollBottomSubsQL", predicate: ALuOnScrollBottomSubscriber, descendants: true }, { propertyName: "selectorsQL", predicate: ALuOptionSelector, descendants: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ALuOptionPickerAdvancedComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { operatorsQL: [{
+                type: ContentChildren,
+                args: [ALuOptionOperator, { descendants: true }]
+            }], onOpenSubsQL: [{
+                type: ContentChildren,
+                args: [ALuOnOpenSubscriber, { descendants: true }]
+            }], onCloseSubsQL: [{
+                type: ContentChildren,
+                args: [ALuOnCloseSubscriber, { descendants: true }]
+            }], onScrollBottomSubsQL: [{
+                type: ContentChildren,
+                args: [ALuOnScrollBottomSubscriber, { descendants: true }]
+            }], selectorsQL: [{
+                type: ContentChildren,
+                args: [ALuOptionSelector, { descendants: true }]
+            }] } });
+/**
+* advanced option picker panel
+*/
+class LuOptionPickerAdvancedComponent extends ALuOptionPickerAdvancedComponent {
+    constructor(_changeDetectorRef, document) {
+        super(_changeDetectorRef, document);
+    }
+}
+LuOptionPickerAdvancedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPickerAdvancedComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+LuOptionPickerAdvancedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuOptionPickerAdvancedComponent, selector: "lu-option-picker-advanced", providers: [
+        {
+            provide: ALuPickerPanel,
+            useExisting: forwardRef(() => LuOptionPickerAdvancedComponent),
+        },
+    ], exportAs: ["LuOptionPickerAdvanced"], usesInheritance: true, ngImport: i0, template: "<ng-template>\r\n\t<div class=\"lu-picker-panel lu-option-picker-panel\" role=\"dialog\" [ngClass]=\"panelClassesMap\" [class.mod-multiple]=\"multiple\"\r\n\t (click)=\"onClick()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\" (mousedown)=\"onMouseDown($event)\">\r\n\t\t<div [class.is-loading]=\"loading$ | async\" class=\"lu-picker-content\" [ngClass]=\"contentClassesMap\" [cdkTrapFocus]=\"trapFocus\" luScroll (onScrollBottom)=\"onScrollBottom()\">\r\n\t\t\t<ng-content></ng-content>\r\n\t\t\t<div *ngIf=\"loading$ | async\" class=\"loading lu-picker-loading\"></div>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$3.LuScrollDirective, selector: "[luScroll]", inputs: ["debounceTime"], outputs: ["onScroll", "onScrollTop", "onScrollBottom", "onScrollLeft", "onScrollRight"], exportAs: ["luScroll"] }, { type: i2$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i1.AsyncPipe }, animations: [luTransformPopover], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPickerAdvancedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-option-picker-advanced', changeDetection: ChangeDetectionStrategy.OnPush, animations: [luTransformPopover], exportAs: 'LuOptionPickerAdvanced', providers: [
+                        {
+                            provide: ALuPickerPanel,
+                            useExisting: forwardRef(() => LuOptionPickerAdvancedComponent),
+                        },
+                    ], template: "<ng-template>\r\n\t<div class=\"lu-picker-panel lu-option-picker-panel\" role=\"dialog\" [ngClass]=\"panelClassesMap\" [class.mod-multiple]=\"multiple\"\r\n\t (click)=\"onClick()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\" (mousedown)=\"onMouseDown($event)\">\r\n\t\t<div [class.is-loading]=\"loading$ | async\" class=\"lu-picker-content\" [ngClass]=\"contentClassesMap\" [cdkTrapFocus]=\"trapFocus\" luScroll (onScrollBottom)=\"onScrollBottom()\">\r\n\t\t\t<ng-content></ng-content>\r\n\t\t\t<div *ngIf=\"loading$ | async\" class=\"loading lu-picker-loading\"></div>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+class LuOptionPickerModule {
+}
+LuOptionPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuOptionPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPickerModule, declarations: [LuOptionPickerComponent,
+        LuOptionPickerAdvancedComponent], imports: [CommonModule,
+        OverlayModule,
+        LuOptionItemModule,
+        LuScrollModule,
+        A11yModule], exports: [LuOptionPickerComponent,
+        LuOptionPickerAdvancedComponent,
+        LuOptionItemModule] });
+LuOptionPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPickerModule, imports: [[
+            CommonModule,
+            OverlayModule,
+            LuOptionItemModule,
+            LuScrollModule,
+            A11yModule,
+        ], LuOptionItemModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionPickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        OverlayModule,
+                        LuOptionItemModule,
+                        LuScrollModule,
+                        A11yModule,
+                    ],
+                    declarations: [
+                        LuOptionPickerComponent,
+                        LuOptionPickerAdvancedComponent,
+                    ],
+                    exports: [
+                        LuOptionPickerComponent,
+                        LuOptionPickerAdvancedComponent,
+                        LuOptionItemModule,
+                    ],
+                }]
+        }] });
+
+var ToggleMode;
+(function (ToggleMode) {
+    ToggleMode[ToggleMode["all"] = 0] = "all";
+    ToggleMode[ToggleMode["self"] = 1] = "self";
+    ToggleMode[ToggleMode["children"] = 2] = "children";
+})(ToggleMode || (ToggleMode = {}));
+class ALuTreeOptionPickerComponent extends ALuOptionPickerComponent {
+    constructor(_changeDetectorRef, document) {
+        super(_changeDetectorRef, document);
+    }
+    set optionsQL(ql) {
+        this._optionsQL = ql;
+    }
+    set _options$(optionItems$) {
+        // reapply selected when the options change
+        this._subs.add(optionItems$
+            .subscribe(o => this._applySelected()));
+        // subscribe to any option.onSelect
+        const singleFlowSelect$ = optionItems$.pipe(switchMap(items => merge(...items.map(i => i.onSelect))));
+        const singleFlowSelectSelf$ = optionItems$.pipe(switchMap(items => merge(...items.map(i => i.onSelectSelf))));
+        const singleFlowSelectChildren$ = optionItems$.pipe(switchMap(items => merge(...items.map(i => i.onSelectChildren))));
+        this._subs.add(singleFlowSelect$
+            .subscribe(option => this._toggle(option, ToggleMode.all)));
+        this._subs.add(singleFlowSelectSelf$
+            .subscribe(option => this._toggle(option, ToggleMode.self)));
+        this._subs.add(singleFlowSelectChildren$
+            .subscribe(option => this._toggle(option, ToggleMode.children)));
+    }
+    _toggle(option, mod = ToggleMode.all) {
+        switch (mod) {
+            case ToggleMode.self:
+                return this._toggleSelf(option);
+            case ToggleMode.children:
+                return this._toggleChildren(option);
+            case ToggleMode.self:
+            default:
+                return this._toggleAll(option);
+        }
+    }
+    _toggleAll(option) {
+        const value = option.value;
+        if (!this.multiple) {
+            this._select(value);
+            return;
+        }
+        const allChildren = option.allChildren.map(i => i.value);
+        const values = this._value || [];
+        let newValues;
+        const selfSelected = values.some(v => this.optionComparer(v, value));
+        const allChildrenSelected = allChildren.every(child => values.some(v => this.optionComparer(v, child)));
+        if (selfSelected && allChildrenSelected) {
+            // remove option and its children
+            newValues = this._remove(values, [value, ...allChildren]);
+        }
+        else {
+            // add option and its children
+            newValues = this._add(values, [value, ...allChildren]);
+        }
+        this._select(newValues);
+    }
+    _toggleSelf(option) {
+        const value = option.value;
+        if (!this.multiple) {
+            this._select(value);
+            return;
+        }
+        const allChildren = option.allChildren.map(i => i.value);
+        const values = this._value || [];
+        const selfSelected = values.some(v => this.optionComparer(v, value));
+        const someChildSelected = allChildren.some(child => values.some(v => this.optionComparer(v, child)));
+        let newValues = this._remove(values, [...allChildren]);
+        if (selfSelected && !someChildSelected) {
+            // remove option
+            newValues = this._remove(newValues, [value]);
+        }
+        else {
+            // add option
+            newValues = this._add(newValues, [value]);
+        }
+        this._select(newValues);
+    }
+    _toggleChildren(option) {
+        const value = option.value;
+        if (!this.multiple) {
+            this._select(value);
+            return;
+        }
+        const allChildren = option.allChildren.map(i => i.value);
+        const values = this._value || [];
+        const selfSelected = values.some(v => this.optionComparer(v, value));
+        let newValues = this._remove(values, [value]);
+        const allChildrenSelected = allChildren.every(child => values.some(v => this.optionComparer(v, child)));
+        if (allChildrenSelected && !selfSelected) {
+            newValues = this._remove(newValues, allChildren);
+        }
+        else {
+            newValues = this._add(newValues, allChildren);
+        }
+        this._select(newValues);
+    }
+    _add(values, entries) {
+        const newEntries = entries.filter(entry => !values.some(v => this.optionComparer(v, entry)));
+        return [...values, ...newEntries];
+    }
+    _remove(values, entries) {
+        const entriesToKeep = values.filter(value => !entries.some(e => this.optionComparer(e, value)));
+        return [...entriesToKeep];
+    }
+    initItems() {
+        const items$ = this._optionsQL.changes
+            .pipe(startWith(this._optionsQL), map(q => q.toArray()), map(roots => roots.map(r => [r, ...r.allChildren]).reduce((agg, val) => [...agg, ...val], [])), delay(0));
+        this._subs.add(items$.subscribe(o => this._options = o || []));
+        this._options$ = items$;
+    }
+    ngAfterViewInit() {
+        this.initItems();
+    }
+}
+ALuTreeOptionPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ALuTreeOptionPickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+ALuTreeOptionPickerComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: ALuTreeOptionPickerComponent, queries: [{ propertyName: "optionsQL", predicate: ALuTreeOptionItem, descendants: true }, { propertyName: "optionsQLVR", predicate: ALuTreeOptionItem, descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ALuTreeOptionPickerComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { optionsQL: [{
+                type: ContentChildren,
+                args: [ALuTreeOptionItem, { descendants: true }]
+            }], optionsQLVR: [{
+                type: ContentChildren,
+                args: [ALuTreeOptionItem, { descendants: true, read: ViewContainerRef }]
+            }] } });
+/**
+* basic tree option picker panel
+*/
+class LuTreeOptionPickerComponent extends ALuTreeOptionPickerComponent {
+    constructor(_changeDetectorRef, document) {
+        super(_changeDetectorRef, document);
+    }
+}
+LuTreeOptionPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionPickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+LuTreeOptionPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuTreeOptionPickerComponent, selector: "lu-tree-option-picker", providers: [
+        {
+            provide: ALuPickerPanel,
+            useExisting: forwardRef(() => LuTreeOptionPickerComponent),
+        },
+    ], exportAs: ["LuTreeOptionPicker"], usesInheritance: true, ngImport: i0, template: "<ng-template>\r\n\t<div class=\"lu-picker-panel lu-tree-option-picker-panel\" role=\"dialog\" [ngClass]=\"panelClassesMap\" [class.mod-multiple]=\"multiple\"\r\n\t (click)=\"onClick()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\" (mousedown)=\"onMouseDown($event)\">\r\n\t\t<div class=\"lu-picker-content\" [ngClass]=\"contentClassesMap\" [cdkTrapFocus]=\"trapFocus\">\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [luTransformPopover], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-tree-option-picker', changeDetection: ChangeDetectionStrategy.OnPush, animations: [luTransformPopover], exportAs: 'LuTreeOptionPicker', providers: [
+                        {
+                            provide: ALuPickerPanel,
+                            useExisting: forwardRef(() => LuTreeOptionPickerComponent),
+                        },
+                    ], template: "<ng-template>\r\n\t<div class=\"lu-picker-panel lu-tree-option-picker-panel\" role=\"dialog\" [ngClass]=\"panelClassesMap\" [class.mod-multiple]=\"multiple\"\r\n\t (click)=\"onClick()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\" (mousedown)=\"onMouseDown($event)\">\r\n\t\t<div class=\"lu-picker-content\" [ngClass]=\"contentClassesMap\" [cdkTrapFocus]=\"trapFocus\">\r\n\t\t\t<ng-content></ng-content>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+class ALuTreeOptionPickerAdvancedComponent extends ALuTreeOptionPickerComponent {
+    constructor(_changeDetectorRef, document) {
+        super(_changeDetectorRef, document);
+        this._operators = [];
+        this._onOpenSubscribers = [];
+        this._onCloseSubscribers = [];
+        this._onScrollBottomSubscribers = [];
+        this._selectors = [];
+    }
+    set operatorsQL(ql) {
+        this._operatorsQL = ql;
+    }
+    set onOpenSubsQL(ql) {
+        this._onOpenSubscribers = ql.toArray();
+    }
+    set onCloseSubsQL(ql) {
+        this._onCloseSubscribers = ql.toArray();
+    }
+    set onScrollBottomSubsQL(ql) {
+        this._onScrollBottomSubscribers = ql.toArray();
+    }
+    set selectorsQL(ql) {
+        this._selectorsQL = ql;
+    }
+    onScrollBottom() {
+        this._onScrollBottomSubscribers.forEach(o => {
+            if (!o.onScrollBottom) {
+                return;
+            }
+            o.onScrollBottom();
+        });
+    }
+    onOpen() {
+        this._onOpenSubscribers.forEach(o => {
+            o.onOpen();
+        });
+        super.onOpen();
+    }
+    onClose() {
+        this._onCloseSubscribers.forEach(o => {
+            o.onClose();
+        });
+        super.onClose();
+    }
+    setValue(value) {
+        super.setValue(value);
+        this._selectors.forEach(s => s.setValue(value));
+    }
+    initOperators() {
+        const operators = this._operatorsQL.toArray();
+        this._operators = operators;
+        let options$;
+        operators.forEach(operator => {
+            operator.inOptions$ = options$;
+            options$ = operator.outOptions$;
+        });
+        const lastOperator = operators[operators.length - 1];
+        if (lastOperator && lastOperator.outOptions$) {
+            this.loading$ = lastOperator.outOptions$.pipe(first(), mapTo(false), startWith(true), shareReplay());
+        }
+    }
+    initSelectors() {
+        this._selectors = this._selectorsQL.toArray();
+        this._subs.add(merge(this._selectors.map(s => s.onSelectValue)).pipe(mergeAll()).subscribe(values => {
+            this._select(values);
+        }));
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.initOperators();
+        this.initSelectors();
+    }
+}
+ALuTreeOptionPickerAdvancedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ALuTreeOptionPickerAdvancedComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+ALuTreeOptionPickerAdvancedComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.2", type: ALuTreeOptionPickerAdvancedComponent, queries: [{ propertyName: "operatorsQL", predicate: ALuTreeOptionOperator, descendants: true }, { propertyName: "onOpenSubsQL", predicate: ALuOnOpenSubscriber, descendants: true }, { propertyName: "onCloseSubsQL", predicate: ALuOnCloseSubscriber, descendants: true }, { propertyName: "onScrollBottomSubsQL", predicate: ALuOnScrollBottomSubscriber, descendants: true }, { propertyName: "selectorsQL", predicate: ALuTreeOptionSelector, descendants: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: ALuTreeOptionPickerAdvancedComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { operatorsQL: [{
+                type: ContentChildren,
+                args: [ALuTreeOptionOperator, { descendants: true }]
+            }], onOpenSubsQL: [{
+                type: ContentChildren,
+                args: [ALuOnOpenSubscriber, { descendants: true }]
+            }], onCloseSubsQL: [{
+                type: ContentChildren,
+                args: [ALuOnCloseSubscriber, { descendants: true }]
+            }], onScrollBottomSubsQL: [{
+                type: ContentChildren,
+                args: [ALuOnScrollBottomSubscriber, { descendants: true }]
+            }], selectorsQL: [{
+                type: ContentChildren,
+                args: [ALuTreeOptionSelector, { descendants: true }]
+            }] } });
+/**
+* advanced option picker panel
+*/
+class LuTreeOptionPickerAdvancedComponent extends ALuTreeOptionPickerAdvancedComponent {
+    constructor(_changeDetectorRef, document) {
+        super(_changeDetectorRef, document);
+    }
+}
+LuTreeOptionPickerAdvancedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionPickerAdvancedComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+LuTreeOptionPickerAdvancedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: LuTreeOptionPickerAdvancedComponent, selector: "lu-tree-option-picker-advanced", providers: [
+        {
+            provide: ALuPickerPanel,
+            useExisting: forwardRef(() => LuTreeOptionPickerAdvancedComponent),
+        },
+    ], exportAs: ["LuOptionPicker"], usesInheritance: true, ngImport: i0, template: "<ng-template>\r\n\t<div class=\"lu-picker-panel lu-tree-option-picker-panel\" role=\"dialog\" [ngClass]=\"panelClassesMap\" [class.mod-multiple]=\"multiple\"\r\n\t (click)=\"onClick()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\" (mousedown)=\"onMouseDown($event)\">\r\n\t\t<div class=\"lu-picker-content\" [ngClass]=\"contentClassesMap\" [cdkTrapFocus]=\"trapFocus\" luScroll (onScrollBottom)=\"onScrollBottom()\">\r\n\t\t\t<ng-content [class.is-loading]=\"loading$ | async\"></ng-content>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$3.LuScrollDirective, selector: "[luScroll]", inputs: ["debounceTime"], outputs: ["onScroll", "onScrollTop", "onScrollBottom", "onScrollLeft", "onScrollRight"], exportAs: ["luScroll"] }, { type: i2$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], animations: [luTransformPopover], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionPickerAdvancedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-tree-option-picker-advanced', changeDetection: ChangeDetectionStrategy.OnPush, animations: [luTransformPopover], exportAs: 'LuOptionPicker', providers: [
+                        {
+                            provide: ALuPickerPanel,
+                            useExisting: forwardRef(() => LuTreeOptionPickerAdvancedComponent),
+                        },
+                    ], template: "<ng-template>\r\n\t<div class=\"lu-picker-panel lu-tree-option-picker-panel\" role=\"dialog\" [ngClass]=\"panelClassesMap\" [class.mod-multiple]=\"multiple\"\r\n\t (click)=\"onClick()\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\" (mousedown)=\"onMouseDown($event)\">\r\n\t\t<div class=\"lu-picker-content\" [ngClass]=\"contentClassesMap\" [cdkTrapFocus]=\"trapFocus\" luScroll (onScrollBottom)=\"onScrollBottom()\">\r\n\t\t\t<ng-content [class.is-loading]=\"loading$ | async\"></ng-content>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>\r\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+class LuTreeOptionPickerModule {
+}
+LuTreeOptionPickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionPickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuTreeOptionPickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionPickerModule, declarations: [LuTreeOptionPickerComponent,
+        LuTreeOptionPickerAdvancedComponent], imports: [CommonModule,
+        OverlayModule,
+        LuScrollModule,
+        A11yModule], exports: [LuTreeOptionPickerComponent,
+        LuTreeOptionPickerAdvancedComponent] });
+LuTreeOptionPickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionPickerModule, imports: [[
+            CommonModule,
+            OverlayModule,
+            LuScrollModule,
+            A11yModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionPickerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        OverlayModule,
+                        LuScrollModule,
+                        A11yModule,
+                    ],
+                    declarations: [
+                        LuTreeOptionPickerComponent,
+                        LuTreeOptionPickerAdvancedComponent,
+                    ],
+                    exports: [
+                        LuTreeOptionPickerComponent,
+                        LuTreeOptionPickerAdvancedComponent,
+                    ],
+                }]
+        }] });
+
+class ALuTreeOptionPicker extends ALuOptionPicker {
+}
+
+class LuOptionModule {
+}
+LuOptionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuOptionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionModule, imports: [LuOptionItemModule,
+        LuOptionPickerModule,
+        LuOptionOperatorModule,
+        LuOptionSelectorModule,
+        LuOptionPlaceholderModule], exports: [LuOptionItemModule,
+        LuOptionPickerModule,
+        LuOptionOperatorModule,
+        LuOptionSelectorModule,
+        LuOptionPlaceholderModule] });
+LuOptionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionModule, imports: [[
+            LuOptionItemModule,
+            LuOptionPickerModule,
+            LuOptionOperatorModule,
+            LuOptionSelectorModule,
+            LuOptionPlaceholderModule,
+        ], LuOptionItemModule,
+        LuOptionPickerModule,
+        LuOptionOperatorModule,
+        LuOptionSelectorModule,
+        LuOptionPlaceholderModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuOptionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        LuOptionItemModule,
+                        LuOptionPickerModule,
+                        LuOptionOperatorModule,
+                        LuOptionSelectorModule,
+                        LuOptionPlaceholderModule,
+                    ],
+                    exports: [
+                        LuOptionItemModule,
+                        LuOptionPickerModule,
+                        LuOptionOperatorModule,
+                        LuOptionSelectorModule,
+                        LuOptionPlaceholderModule,
+                    ],
+                }]
+        }] });
+
+class LuTreeOptionModule {
+}
+LuTreeOptionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LuTreeOptionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionModule, imports: [LuTreeOptionItemModule,
+        LuTreeOptionPickerModule,
+        LuTreeOptionOperatorModule,
+        LuTreeOptionSelectorModule], exports: [LuTreeOptionItemModule,
+        LuTreeOptionPickerModule,
+        LuTreeOptionOperatorModule,
+        LuTreeOptionSelectorModule] });
+LuTreeOptionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionModule, imports: [[
+            LuTreeOptionItemModule,
+            LuTreeOptionPickerModule,
+            LuTreeOptionOperatorModule,
+            LuTreeOptionSelectorModule,
+        ], LuTreeOptionItemModule,
+        LuTreeOptionPickerModule,
+        LuTreeOptionOperatorModule,
+        LuTreeOptionSelectorModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: LuTreeOptionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        LuTreeOptionItemModule,
+                        LuTreeOptionPickerModule,
+                        LuTreeOptionOperatorModule,
+                        LuTreeOptionSelectorModule,
+                    ],
+                    exports: [
+                        LuTreeOptionItemModule,
+                        LuTreeOptionPickerModule,
+                        LuTreeOptionOperatorModule,
+                        LuTreeOptionSelectorModule,
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of scroll
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ALuOptionItem, ALuOptionOperator, ALuOptionPicker, ALuOptionPickerAdvancedComponent, ALuOptionPickerComponent, ALuOptionPlaceholderLabel, ALuOptionSelectAllLabel, ALuOptionSelector, ALuTreeOptionItem, ALuTreeOptionItemLabel, ALuTreeOptionOperator, ALuTreeOptionPicker, ALuTreeOptionPickerAdvancedComponent, ALuTreeOptionPickerComponent, ALuTreeOptionSelector, LU_OPTION_PLACEHOLDER_TRANSLATIONS, LU_OPTION_SELECT_ALL_TRANSLATIONS, LU_TREE_OPTION_ITEM_TRANSLATIONS, LuForGroupContext, LuForGroupsDirective, LuForGroupsModule, LuForOptionsDirective, LuForOptionsModule, LuForTreeOptionsDirective, LuForTreeOptionsModule, LuOptionFeederComponent, LuOptionFeederModule, LuOptionItemComponent, LuOptionItemModule, LuOptionModule, LuOptionOperatorModule, LuOptionPagerComponent, LuOptionPagerModule, LuOptionPickerAdvancedComponent, LuOptionPickerComponent, LuOptionPickerModule, LuOptionPlaceholderComponent, LuOptionPlaceholderIntl, LuOptionPlaceholderModule, LuOptionSearcherComponent, LuOptionSearcherModule, LuOptionSelectAllComponent, LuOptionSelectAllIntl, LuOptionSelectAllModule, LuOptionSelectorModule, LuTreeOptionFeederComponent, LuTreeOptionFeederModule, LuTreeOptionItemComponent, LuTreeOptionItemIntl, LuTreeOptionItemModule, LuTreeOptionModule, LuTreeOptionOperatorModule, LuTreeOptionPagerComponent, LuTreeOptionPagerModule, LuTreeOptionPickerAdvancedComponent, LuTreeOptionPickerComponent, LuTreeOptionPickerModule, LuTreeOptionSearcherComponent, LuTreeOptionSearcherModule, LuTreeOptionSelectAllComponent, LuTreeOptionSelectAllModule, LuTreeOptionSelectorModule, luOptionPlaceholderTranslations, luOptionSelectAllTranslations, luTreeOptionItemTranslations };
+//# sourceMappingURL=lucca-front-ng-option.mjs.map