@lucca-front/ng 8.2.2 → 9.0.0-alpha.1

package/fesm2015/lucca-front-ng-qualification.mjs

@@ -64,7 +64,7 @@ LuQualificationSelectInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersi
             useExisting: forwardRef(() => LuQualificationSelectInputComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<lu-input-clearer></lu-input-clearer>\r\n</div>\r\n\r\n<ng-template luDisplayer [luDisplayerMultiple]=\"true\" let-values>\r\n\t<span *ngIf=\"multiple && values?.length > 1; else singleView\"\r\n\t\t><span class=\"chip mod-unkillable\">{{ values.length }}</span> {{ intl.qualifications }}</span\r\n\t>\r\n\t<ng-template #singleView>{{ (values[0] || values).name }}</ng-template>\r\n</ng-template>\r\n\r\n<lu-option-picker-advanced [option-comparer]=\"byId\">\r\n\t<lu-api-paged-searcher\r\n\t\tapi=\"/organization/structure/api/job-qualifications\"\r\n\t\tstandard=\"v4\"\r\n\t\t[filters]=\"filters\"\r\n\t\tsort=\"job.name,level.position\"\r\n\t></lu-api-paged-searcher>\r\n\t<ng-template luForGroups let-group [luForGroupsGroupBy]=\"groupByJobName\">\r\n\t\t<h4 class=\"optionItem-groupKey\">{{ group.key }}</h4>\r\n\t\t<lu-option *ngFor=\"let qualification of group.items; trackBy: trackById\" [value]=\"qualification\"> {{ qualification.name }} </lu-option>\r\n\t</ng-template>\r\n</lu-option-picker-advanced>\r\n", styles: [":host{cursor:pointer;outline:none;padding:0}:host:after{content:\"\\e97c\";font-family:Lucca icons;display:inline-block;vertical-align:text-bottom;font-style:normal;color:var(--components-select-default-palette-700);bottom:.5rem;bottom:var(--components-select-input-padding-vertical);font-size:1.2rem;line-height:1.4rem;pointer-events:none;position:absolute;right:.5rem;right:var(--components-select-input-padding-horizontal)}:host[disabled]{cursor:not-allowed;pointer-events:all}:host.is-disabled{cursor:not-allowed;pointer-events:all}.lu-select-display-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-value{line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;display:none}.lu-select-placeholder{color:var(--components-select-default-palette-400);line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix{position:absolute;bottom:.5rem;right:1.6rem}::ng-deep .lu-select-value .label{padding:.25rem .25rem .5rem .5rem;padding:var(--spacings-smallest) var(--spacings-smaller);margin-left:0}::ng-deep .lu-select-value .chip{background:#FF6600;background:var(--components-select-chip-background);color:#fff;color:var(--components-select-chip-text);vertical-align:baseline;max-width:100%;height:1.5rem;height:var(--sizes-standard-line-height);line-height:1.5rem;line-height:var(--sizes-standard-line-height);padding:0 .5rem;padding:0 var(--spacings-smaller);margin:0 .25rem .25rem 0;text-overflow:ellipsis;overflow:hidden;vertical-align:top;white-space:nowrap}:host-context(.textfield.mod-small) .lu-select-value,:host-context(.textfield.mod-small) .lu-select-placeholder{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);min-height:calc(var(--spacings-small) + 1.25rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-small-line-height))}:host-context(.textfield.mod-small):after{line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .label{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);font-weight:600;margin:0;padding:0;background:transparent}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .chip{height:1.25rem;height:var(--sizes-small-line-height);line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding:var(--spacings-big) 0 0;padding:var(--components-select-framed-top-padding) 0 0}:host-context(.textfield.mod-framed).textfield-input:after,:host-context(.form.mod-framed).textfield-input:after{color:#96a6c5;color:var(--colors-text-light-color);bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:.5rem;right:var(--spacings-smaller)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{padding:0 calc(var(--spacings-small) * 3) var(--spacings-small) var(--spacings-small);padding:0 calc(var(--components-select-framed-side-padding) * 3) var(--components-select-framed-bottom-padding) var(--components-select-framed-side-padding)}:host-context(.textfield.mod-framed).textfield-input .lu-select-suffix,:host-context(.form.mod-framed).textfield-input .lu-select-suffix{bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:1.7rem}:host-context(.textfield.mod-filter) .lu-select-value,:host-context(.textfield.mod-filter) .lu-select-placeholder{padding:0;height:auto;padding-top:1rem;color:#2a3551;color:var(--colors-text-default-color)}:host-context(.textfield.mod-filter) .lu-select-suffix{bottom:.4rem}:host-context(.textfield.mod-material):after{color:#96a6c5;color:var(--colors-text-light-color);bottom:.6rem;right:0}:host-context(.textfield.mod-material) .lu-select-value,:host-context(.textfield.mod-material) .lu-select-placeholder{padding-left:0;padding-right:.8rem}:host-context(.textfield.mod-material) .lu-select-suffix{right:1rem;right:calc(2 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material).is-select .lu-select-placeholder{display:none}:host-context(.textfield.mod-material).mod-search:after{bottom:0}:host-context(.textfield.mod-material).mod-search .lu-select-suffix{right:1.375rem;right:calc(2.75 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material .textfield-input.is-focused) .lu-select-placeholder{display:none}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-value{height:auto;align-items:center}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-display-wrapper{overflow:hidden;white-space:normal;margin-bottom:-.25rem}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-right:2.5rem}:host-context(.textfield-input.is-error):after{color:#e51a3b;color:var(--palettes-error-color)}:host-context(.textfield-input.is-error) .lu-select-placeholder{color:#ffe0e6;color:var(--palettes-error-200)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:#999;color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:#bbb;color:var(--commons-disabled-placeholder)}:host-context(.palette-primary) .lu-select-placeholder{color:var(--palettes-primary-400)}:host-context(.palette-primary):after{color:var(--palettes-primary-700)}:host-context(.palette-secondary) .lu-select-placeholder{color:var(--palettes-secondary-400)}:host-context(.palette-secondary):after{color:var(--palettes-secondary-700)}:host-context(.palette-grey) .lu-select-placeholder{color:var(--palettes-grey-400)}:host-context(.palette-grey):after{color:var(--palettes-grey-700)}:host-context(.palette-success) .lu-select-placeholder{color:var(--palettes-success-400)}:host-context(.palette-success):after{color:var(--palettes-success-700)}:host-context(.palette-warning) .lu-select-placeholder{color:var(--palettes-warning-400)}:host-context(.palette-warning):after{color:var(--palettes-warning-700)}:host-context(.palette-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.palette-error):after{color:var(--palettes-error-700)}.optionItem-groupKey{padding:.5rem;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);margin:0;border-top:1px solid var(--commons-divider-color);font-size:var(--sizes-small-font-size);width:100%;text-align:left;text-decoration:underline}.optionItem-groupKey:first-of-type{border-top-color:transparent;margin-top:0}\n"], components: [{ type: i2.LuInputClearerComponent, selector: "lu-input-clearer", outputs: ["onClear"], exportAs: ["luClearer"] }, { type: i3.LuOptionPickerAdvancedComponent, selector: "lu-option-picker-advanced", exportAs: ["LuOptionPickerAdvanced"] }, { type: i4.LuApiPagedSearcherComponent, selector: "lu-api-paged-searcher", inputs: ["standard", "api", "fields", "filters", "orderBy", "sort", "debounceTime"] }, { type: i3.LuOptionItemComponent, selector: "lu-option", inputs: ["selected", "highlighted", "value", "disabled"], outputs: ["onSelect"] }], directives: [{ type: i2.LuInputDisplayerDirective, selector: "[luDisplayer]", inputs: ["luDisplayerMultiple", "multiple"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.LuForGroupsDirective, selector: "[luForGroups]", inputs: ["luForGroupsGroupBy"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<lu-input-clearer></lu-input-clearer>\r\n</div>\r\n\r\n<ng-template luDisplayer [luDisplayerMultiple]=\"true\" let-values>\r\n\t<span *ngIf=\"multiple && values?.length > 1; else singleView\"\r\n\t\t><span class=\"chip mod-unkillable\">{{ values.length }}</span> {{ intl.qualifications }}</span\r\n\t>\r\n\t<ng-template #singleView>{{ (values[0] || values).name }}</ng-template>\r\n</ng-template>\r\n\r\n<lu-option-picker-advanced [option-comparer]=\"byId\">\r\n\t<lu-api-paged-searcher\r\n\t\tapi=\"/organization/structure/api/job-qualifications\"\r\n\t\tstandard=\"v4\"\r\n\t\t[filters]=\"filters\"\r\n\t\tsort=\"job.name,level.position\"\r\n\t></lu-api-paged-searcher>\r\n\t<ng-template luForGroups let-group [luForGroupsGroupBy]=\"groupByJobName\">\r\n\t\t<h4 class=\"optionItem-groupKey\">{{ group.key }}</h4>\r\n\t\t<lu-option *ngFor=\"let qualification of group.items; trackBy: trackById\" [value]=\"qualification\"> {{ qualification.name }} </lu-option>\r\n\t</ng-template>\r\n</lu-option-picker-advanced>\r\n", styles: [""], components: [{ type: i2.LuInputClearerComponent, selector: "lu-input-clearer", outputs: ["onClear"], exportAs: ["luClearer"] }, { type: i3.LuOptionPickerAdvancedComponent, selector: "lu-option-picker-advanced", exportAs: ["LuOptionPickerAdvanced"] }, { type: i4.LuApiPagedSearcherComponent, selector: "lu-api-paged-searcher", inputs: ["standard", "api", "fields", "filters", "orderBy", "sort", "debounceTime"] }, { type: i3.LuOptionItemComponent, selector: "lu-option", inputs: ["selected", "highlighted", "value", "disabled"], outputs: ["onSelect"] }], directives: [{ type: i2.LuInputDisplayerDirective, selector: "[luDisplayer]", inputs: ["luDisplayerMultiple", "multiple"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.LuForGroupsDirective, selector: "[luForGroups]", inputs: ["luForGroupsGroupBy"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LuQualificationSelectInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-qualification-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -73,7 +73,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                             useExisting: forwardRef(() => LuQualificationSelectInputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<lu-input-clearer></lu-input-clearer>\r\n</div>\r\n\r\n<ng-template luDisplayer [luDisplayerMultiple]=\"true\" let-values>\r\n\t<span *ngIf=\"multiple && values?.length > 1; else singleView\"\r\n\t\t><span class=\"chip mod-unkillable\">{{ values.length }}</span> {{ intl.qualifications }}</span\r\n\t>\r\n\t<ng-template #singleView>{{ (values[0] || values).name }}</ng-template>\r\n</ng-template>\r\n\r\n<lu-option-picker-advanced [option-comparer]=\"byId\">\r\n\t<lu-api-paged-searcher\r\n\t\tapi=\"/organization/structure/api/job-qualifications\"\r\n\t\tstandard=\"v4\"\r\n\t\t[filters]=\"filters\"\r\n\t\tsort=\"job.name,level.position\"\r\n\t></lu-api-paged-searcher>\r\n\t<ng-template luForGroups let-group [luForGroupsGroupBy]=\"groupByJobName\">\r\n\t\t<h4 class=\"optionItem-groupKey\">{{ group.key }}</h4>\r\n\t\t<lu-option *ngFor=\"let qualification of group.items; trackBy: trackById\" [value]=\"qualification\"> {{ qualification.name }} </lu-option>\r\n\t</ng-template>\r\n</lu-option-picker-advanced>\r\n", styles: [":host{cursor:pointer;outline:none;padding:0}:host:after{content:\"\\e97c\";font-family:Lucca icons;display:inline-block;vertical-align:text-bottom;font-style:normal;color:var(--components-select-default-palette-700);bottom:.5rem;bottom:var(--components-select-input-padding-vertical);font-size:1.2rem;line-height:1.4rem;pointer-events:none;position:absolute;right:.5rem;right:var(--components-select-input-padding-horizontal)}:host[disabled]{cursor:not-allowed;pointer-events:all}:host.is-disabled{cursor:not-allowed;pointer-events:all}.lu-select-display-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-value{line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;display:none}.lu-select-placeholder{color:var(--components-select-default-palette-400);line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix{position:absolute;bottom:.5rem;right:1.6rem}::ng-deep .lu-select-value .label{padding:.25rem .25rem .5rem .5rem;padding:var(--spacings-smallest) var(--spacings-smaller);margin-left:0}::ng-deep .lu-select-value .chip{background:#FF6600;background:var(--components-select-chip-background);color:#fff;color:var(--components-select-chip-text);vertical-align:baseline;max-width:100%;height:1.5rem;height:var(--sizes-standard-line-height);line-height:1.5rem;line-height:var(--sizes-standard-line-height);padding:0 .5rem;padding:0 var(--spacings-smaller);margin:0 .25rem .25rem 0;text-overflow:ellipsis;overflow:hidden;vertical-align:top;white-space:nowrap}:host-context(.textfield.mod-small) .lu-select-value,:host-context(.textfield.mod-small) .lu-select-placeholder{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);min-height:calc(var(--spacings-small) + 1.25rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-small-line-height))}:host-context(.textfield.mod-small):after{line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .label{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);font-weight:600;margin:0;padding:0;background:transparent}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .chip{height:1.25rem;height:var(--sizes-small-line-height);line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding:var(--spacings-big) 0 0;padding:var(--components-select-framed-top-padding) 0 0}:host-context(.textfield.mod-framed).textfield-input:after,:host-context(.form.mod-framed).textfield-input:after{color:#96a6c5;color:var(--colors-text-light-color);bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:.5rem;right:var(--spacings-smaller)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{padding:0 calc(var(--spacings-small) * 3) var(--spacings-small) var(--spacings-small);padding:0 calc(var(--components-select-framed-side-padding) * 3) var(--components-select-framed-bottom-padding) var(--components-select-framed-side-padding)}:host-context(.textfield.mod-framed).textfield-input .lu-select-suffix,:host-context(.form.mod-framed).textfield-input .lu-select-suffix{bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:1.7rem}:host-context(.textfield.mod-filter) .lu-select-value,:host-context(.textfield.mod-filter) .lu-select-placeholder{padding:0;height:auto;padding-top:1rem;color:#2a3551;color:var(--colors-text-default-color)}:host-context(.textfield.mod-filter) .lu-select-suffix{bottom:.4rem}:host-context(.textfield.mod-material):after{color:#96a6c5;color:var(--colors-text-light-color);bottom:.6rem;right:0}:host-context(.textfield.mod-material) .lu-select-value,:host-context(.textfield.mod-material) .lu-select-placeholder{padding-left:0;padding-right:.8rem}:host-context(.textfield.mod-material) .lu-select-suffix{right:1rem;right:calc(2 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material).is-select .lu-select-placeholder{display:none}:host-context(.textfield.mod-material).mod-search:after{bottom:0}:host-context(.textfield.mod-material).mod-search .lu-select-suffix{right:1.375rem;right:calc(2.75 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material .textfield-input.is-focused) .lu-select-placeholder{display:none}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-value{height:auto;align-items:center}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-display-wrapper{overflow:hidden;white-space:normal;margin-bottom:-.25rem}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-right:2.5rem}:host-context(.textfield-input.is-error):after{color:#e51a3b;color:var(--palettes-error-color)}:host-context(.textfield-input.is-error) .lu-select-placeholder{color:#ffe0e6;color:var(--palettes-error-200)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:#999;color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:#bbb;color:var(--commons-disabled-placeholder)}:host-context(.palette-primary) .lu-select-placeholder{color:var(--palettes-primary-400)}:host-context(.palette-primary):after{color:var(--palettes-primary-700)}:host-context(.palette-secondary) .lu-select-placeholder{color:var(--palettes-secondary-400)}:host-context(.palette-secondary):after{color:var(--palettes-secondary-700)}:host-context(.palette-grey) .lu-select-placeholder{color:var(--palettes-grey-400)}:host-context(.palette-grey):after{color:var(--palettes-grey-700)}:host-context(.palette-success) .lu-select-placeholder{color:var(--palettes-success-400)}:host-context(.palette-success):after{color:var(--palettes-success-700)}:host-context(.palette-warning) .lu-select-placeholder{color:var(--palettes-warning-400)}:host-context(.palette-warning):after{color:var(--palettes-warning-700)}:host-context(.palette-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.palette-error):after{color:var(--palettes-error-700)}.optionItem-groupKey{padding:.5rem;padding:var(--components-options-item-padding-vertical) var(--components-options-item-padding-horizontal);margin:0;border-top:1px solid var(--commons-divider-color);font-size:var(--sizes-small-font-size);width:100%;text-align:left;text-decoration:underline}.optionItem-groupKey:first-of-type{border-top-color:transparent;margin-top:0}\n"] }]
+                    ], template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<lu-input-clearer></lu-input-clearer>\r\n</div>\r\n\r\n<ng-template luDisplayer [luDisplayerMultiple]=\"true\" let-values>\r\n\t<span *ngIf=\"multiple && values?.length > 1; else singleView\"\r\n\t\t><span class=\"chip mod-unkillable\">{{ values.length }}</span> {{ intl.qualifications }}</span\r\n\t>\r\n\t<ng-template #singleView>{{ (values[0] || values).name }}</ng-template>\r\n</ng-template>\r\n\r\n<lu-option-picker-advanced [option-comparer]=\"byId\">\r\n\t<lu-api-paged-searcher\r\n\t\tapi=\"/organization/structure/api/job-qualifications\"\r\n\t\tstandard=\"v4\"\r\n\t\t[filters]=\"filters\"\r\n\t\tsort=\"job.name,level.position\"\r\n\t></lu-api-paged-searcher>\r\n\t<ng-template luForGroups let-group [luForGroupsGroupBy]=\"groupByJobName\">\r\n\t\t<h4 class=\"optionItem-groupKey\">{{ group.key }}</h4>\r\n\t\t<lu-option *ngFor=\"let qualification of group.items; trackBy: trackById\" [value]=\"qualification\"> {{ qualification.name }} </lu-option>\r\n\t</ng-template>\r\n</lu-option-picker-advanced>\r\n", styles: [""] }]
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: i1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                         type: Inject,

package/fesm2015/lucca-front-ng-select.mjs

@@ -405,7 +405,7 @@ LuSelectInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             useExisting: forwardRef(() => LuSelectInputComponent),
             multi: true,
         },
-    ], queries: [{ propertyName: "clearerEltRef", first: true, predicate: ALuClearer, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "suffixEltRef", first: true, predicate: ["suffix"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div #suffix class=\"lu-select-suffix\"></div>\r\n", styles: [":host{cursor:pointer;outline:none;padding:0}:host:after{content:\"\\e97c\";font-family:Lucca icons;display:inline-block;vertical-align:text-bottom;font-style:normal;color:var(--components-select-default-palette-700);bottom:.5rem;bottom:var(--components-select-input-padding-vertical);font-size:1.2rem;line-height:1.4rem;pointer-events:none;position:absolute;right:.5rem;right:var(--components-select-input-padding-horizontal)}:host[disabled]{cursor:not-allowed;pointer-events:all}:host.is-disabled{cursor:not-allowed;pointer-events:all}.lu-select-display-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-value{line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;display:none}.lu-select-placeholder{color:var(--components-select-default-palette-400);line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix{position:absolute;bottom:.5rem;right:1.6rem}::ng-deep .lu-select-value .label{padding:.25rem .25rem .5rem .5rem;padding:var(--spacings-smallest) var(--spacings-smaller);margin-left:0}::ng-deep .lu-select-value .chip{background:#FF6600;background:var(--components-select-chip-background);color:#fff;color:var(--components-select-chip-text);vertical-align:baseline;max-width:100%;height:1.5rem;height:var(--sizes-standard-line-height);line-height:1.5rem;line-height:var(--sizes-standard-line-height);padding:0 .5rem;padding:0 var(--spacings-smaller);margin:0 .25rem .25rem 0;text-overflow:ellipsis;overflow:hidden;vertical-align:top;white-space:nowrap}:host-context(.textfield.mod-small) .lu-select-value,:host-context(.textfield.mod-small) .lu-select-placeholder{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);min-height:calc(var(--spacings-small) + 1.25rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-small-line-height))}:host-context(.textfield.mod-small):after{line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .label{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);font-weight:600;margin:0;padding:0;background:transparent}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .chip{height:1.25rem;height:var(--sizes-small-line-height);line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding:var(--spacings-big) 0 0;padding:var(--components-select-framed-top-padding) 0 0}:host-context(.textfield.mod-framed).textfield-input:after,:host-context(.form.mod-framed).textfield-input:after{color:#96a6c5;color:var(--colors-text-light-color);bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:.5rem;right:var(--spacings-smaller)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{padding:0 calc(var(--spacings-small) * 3) var(--spacings-small) var(--spacings-small);padding:0 calc(var(--components-select-framed-side-padding) * 3) var(--components-select-framed-bottom-padding) var(--components-select-framed-side-padding)}:host-context(.textfield.mod-framed).textfield-input .lu-select-suffix,:host-context(.form.mod-framed).textfield-input .lu-select-suffix{bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:1.7rem}:host-context(.textfield.mod-filter) .lu-select-value,:host-context(.textfield.mod-filter) .lu-select-placeholder{padding:0;height:auto;padding-top:1rem;color:#2a3551;color:var(--colors-text-default-color)}:host-context(.textfield.mod-filter) .lu-select-suffix{bottom:.4rem}:host-context(.textfield.mod-material):after{color:#96a6c5;color:var(--colors-text-light-color);bottom:.6rem;right:0}:host-context(.textfield.mod-material) .lu-select-value,:host-context(.textfield.mod-material) .lu-select-placeholder{padding-left:0;padding-right:.8rem}:host-context(.textfield.mod-material) .lu-select-suffix{right:1rem;right:calc(2 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material).is-select .lu-select-placeholder{display:none}:host-context(.textfield.mod-material).mod-search:after{bottom:0}:host-context(.textfield.mod-material).mod-search .lu-select-suffix{right:1.375rem;right:calc(2.75 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material .textfield-input.is-focused) .lu-select-placeholder{display:none}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-value{height:auto;align-items:center}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-display-wrapper{overflow:hidden;white-space:normal;margin-bottom:-.25rem}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-right:2.5rem}:host-context(.textfield-input.is-error):after{color:#e51a3b;color:var(--palettes-error-color)}:host-context(.textfield-input.is-error) .lu-select-placeholder{color:#ffe0e6;color:var(--palettes-error-200)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:#999;color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:#bbb;color:var(--commons-disabled-placeholder)}:host-context(.palette-primary) .lu-select-placeholder{color:var(--palettes-primary-400)}:host-context(.palette-primary):after{color:var(--palettes-primary-700)}:host-context(.palette-secondary) .lu-select-placeholder{color:var(--palettes-secondary-400)}:host-context(.palette-secondary):after{color:var(--palettes-secondary-700)}:host-context(.palette-grey) .lu-select-placeholder{color:var(--palettes-grey-400)}:host-context(.palette-grey):after{color:var(--palettes-grey-700)}:host-context(.palette-success) .lu-select-placeholder{color:var(--palettes-success-400)}:host-context(.palette-success):after{color:var(--palettes-success-700)}:host-context(.palette-warning) .lu-select-placeholder{color:var(--palettes-warning-400)}:host-context(.palette-warning):after{color:var(--palettes-warning-700)}:host-context(.palette-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.palette-error):after{color:var(--palettes-error-700)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "clearerEltRef", first: true, predicate: ALuClearer, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "suffixEltRef", first: true, predicate: ["suffix"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div #suffix class=\"lu-select-suffix\"></div>\r\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LuSelectInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -414,7 +414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                             useExisting: forwardRef(() => LuSelectInputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div #suffix class=\"lu-select-suffix\"></div>\r\n", styles: [":host{cursor:pointer;outline:none;padding:0}:host:after{content:\"\\e97c\";font-family:Lucca icons;display:inline-block;vertical-align:text-bottom;font-style:normal;color:var(--components-select-default-palette-700);bottom:.5rem;bottom:var(--components-select-input-padding-vertical);font-size:1.2rem;line-height:1.4rem;pointer-events:none;position:absolute;right:.5rem;right:var(--components-select-input-padding-horizontal)}:host[disabled]{cursor:not-allowed;pointer-events:all}:host.is-disabled{cursor:not-allowed;pointer-events:all}.lu-select-display-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-value{line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;display:none}.lu-select-placeholder{color:var(--components-select-default-palette-400);line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix{position:absolute;bottom:.5rem;right:1.6rem}::ng-deep .lu-select-value .label{padding:.25rem .25rem .5rem .5rem;padding:var(--spacings-smallest) var(--spacings-smaller);margin-left:0}::ng-deep .lu-select-value .chip{background:#FF6600;background:var(--components-select-chip-background);color:#fff;color:var(--components-select-chip-text);vertical-align:baseline;max-width:100%;height:1.5rem;height:var(--sizes-standard-line-height);line-height:1.5rem;line-height:var(--sizes-standard-line-height);padding:0 .5rem;padding:0 var(--spacings-smaller);margin:0 .25rem .25rem 0;text-overflow:ellipsis;overflow:hidden;vertical-align:top;white-space:nowrap}:host-context(.textfield.mod-small) .lu-select-value,:host-context(.textfield.mod-small) .lu-select-placeholder{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);min-height:calc(var(--spacings-small) + 1.25rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-small-line-height))}:host-context(.textfield.mod-small):after{line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .label{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);font-weight:600;margin:0;padding:0;background:transparent}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .chip{height:1.25rem;height:var(--sizes-small-line-height);line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding:var(--spacings-big) 0 0;padding:var(--components-select-framed-top-padding) 0 0}:host-context(.textfield.mod-framed).textfield-input:after,:host-context(.form.mod-framed).textfield-input:after{color:#96a6c5;color:var(--colors-text-light-color);bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:.5rem;right:var(--spacings-smaller)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{padding:0 calc(var(--spacings-small) * 3) var(--spacings-small) var(--spacings-small);padding:0 calc(var(--components-select-framed-side-padding) * 3) var(--components-select-framed-bottom-padding) var(--components-select-framed-side-padding)}:host-context(.textfield.mod-framed).textfield-input .lu-select-suffix,:host-context(.form.mod-framed).textfield-input .lu-select-suffix{bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:1.7rem}:host-context(.textfield.mod-filter) .lu-select-value,:host-context(.textfield.mod-filter) .lu-select-placeholder{padding:0;height:auto;padding-top:1rem;color:#2a3551;color:var(--colors-text-default-color)}:host-context(.textfield.mod-filter) .lu-select-suffix{bottom:.4rem}:host-context(.textfield.mod-material):after{color:#96a6c5;color:var(--colors-text-light-color);bottom:.6rem;right:0}:host-context(.textfield.mod-material) .lu-select-value,:host-context(.textfield.mod-material) .lu-select-placeholder{padding-left:0;padding-right:.8rem}:host-context(.textfield.mod-material) .lu-select-suffix{right:1rem;right:calc(2 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material).is-select .lu-select-placeholder{display:none}:host-context(.textfield.mod-material).mod-search:after{bottom:0}:host-context(.textfield.mod-material).mod-search .lu-select-suffix{right:1.375rem;right:calc(2.75 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material .textfield-input.is-focused) .lu-select-placeholder{display:none}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-value{height:auto;align-items:center}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-display-wrapper{overflow:hidden;white-space:normal;margin-bottom:-.25rem}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-right:2.5rem}:host-context(.textfield-input.is-error):after{color:#e51a3b;color:var(--palettes-error-color)}:host-context(.textfield-input.is-error) .lu-select-placeholder{color:#ffe0e6;color:var(--palettes-error-200)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:#999;color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:#bbb;color:var(--commons-disabled-placeholder)}:host-context(.palette-primary) .lu-select-placeholder{color:var(--palettes-primary-400)}:host-context(.palette-primary):after{color:var(--palettes-primary-700)}:host-context(.palette-secondary) .lu-select-placeholder{color:var(--palettes-secondary-400)}:host-context(.palette-secondary):after{color:var(--palettes-secondary-700)}:host-context(.palette-grey) .lu-select-placeholder{color:var(--palettes-grey-400)}:host-context(.palette-grey):after{color:var(--palettes-grey-700)}:host-context(.palette-success) .lu-select-placeholder{color:var(--palettes-success-400)}:host-context(.palette-success):after{color:var(--palettes-success-700)}:host-context(.palette-warning) .lu-select-placeholder{color:var(--palettes-warning-400)}:host-context(.palette-warning):after{color:var(--palettes-warning-700)}:host-context(.palette-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.palette-error):after{color:var(--palettes-error-700)}\n"] }]
+                    ], template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div #suffix class=\"lu-select-suffix\"></div>\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }]; }, propDecorators: { modMultipleView: [{
                 type: HostBinding,
                 args: ['class.mod-multipleView']

package/fesm2015/lucca-front-ng-tooltip.mjs

@@ -58,10 +58,10 @@ class LuTooltipPanelComponent extends ALuPopoverPanel {
     }
 }
 LuTooltipPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LuTooltipPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-LuTooltipPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: LuTooltipPanelComponent, selector: "lu-tooltip-panel", outputs: { close: "close", open: "open", hovered: "hovered" }, host: { properties: { "@transformTooltip": "this.animationState" } }, viewQueries: [{ propertyName: "vcTemplateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- <div [ngClass]=\"panelClassesMap\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\" [innerHtml]=\"content | luSafeContent: 'html'\">\r\n</div> -->\r\n<ng-template>\r\n\t<div\r\n\t\tclass=\"lu-tooltip-panel\"\r\n\t\trole=\"tooltip\"\r\n\t\t[ngClass]=\"panelClassesMap\"\r\n\t\t(mouseover)=\"onMouseOver()\"\r\n\t\t(mouseleave)=\"onMouseLeave()\"\r\n\t\t[attr.id]=\"panelId\"\r\n\t\t[@transformTooltip]=\"'enter'\"\r\n\t>\r\n\t\t<div class=\"lu-tooltip-content\" [ngClass]=\"contentClassesMap\" [innerHtml]=\"content | luSafeContent: 'html'\"></div>\r\n\t</div>\r\n</ng-template>\r\n", styles: [".lu-tooltip-panel{display:block;background:#131D35;background:var(--components-tooltip-background-color);border-radius:4px;border-radius:var(--commons-border-radius);color:#fff;color:var(--components-tooltip-color);font-size:var(--sizes-small-font-size);font-size:.875rem;font-weight:600;line-height:1rem;max-width:15rem;max-width:var(--components-tooltip-max-width);padding:.25rem .5rem;padding:var(--components-tooltip-padding)}.lu-tooltip-panel.is-above{transform-origin:bottom center}.lu-tooltip-panel.is-below{transform-origin:top center;margin-top:2px}.lu-tooltip-panel.is-before{transform-origin:center right;margin-right:5px}.lu-tooltip-panel.is-after{transform-origin:center left;margin-left:5px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "luSafeContent": i2.LuSafeContentPipe }, animations: [luTransformTooltip], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LuTooltipPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: LuTooltipPanelComponent, selector: "lu-tooltip-panel", outputs: { close: "close", open: "open", hovered: "hovered" }, host: { properties: { "@transformTooltip": "this.animationState" } }, viewQueries: [{ propertyName: "vcTemplateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!-- <div [ngClass]=\"panelClassesMap\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\" [innerHtml]=\"content | luSafeContent: 'html'\">\r\n</div> -->\r\n<ng-template>\r\n\t<div\r\n\t\tclass=\"lu-tooltip-panel\"\r\n\t\trole=\"tooltip\"\r\n\t\t[ngClass]=\"panelClassesMap\"\r\n\t\t(mouseover)=\"onMouseOver()\"\r\n\t\t(mouseleave)=\"onMouseLeave()\"\r\n\t\t[attr.id]=\"panelId\"\r\n\t\t[@transformTooltip]=\"'enter'\"\r\n\t>\r\n\t\t<div class=\"lu-tooltip-content\" [ngClass]=\"contentClassesMap\" [innerHtml]=\"content | luSafeContent: 'html'\"></div>\r\n\t</div>\r\n</ng-template>\r\n", styles: [".lu-tooltip-panel{--components-tooltip-background-color: var(--palettes-grey-900);--components-tooltip-color: var(--colors-white-color);--components-tooltip-padding: var(--spacings-smallest) var(--spacings-smaller);--components-tooltip-max-width: 15rem;background:var(--components-tooltip-background-color);color:var(--components-tooltip-color);padding:var(--components-tooltip-padding);max-width:var(--components-tooltip-max-width);border-radius:var(--commons-border-radius);font-size:var(--sizes-small-font-size);font-weight:600;line-height:1rem;display:block}.lu-tooltip-panel.is-above{transform-origin:bottom center}.lu-tooltip-panel.is-below{transform-origin:top center;margin-top:2px}.lu-tooltip-panel.is-before{transform-origin:center right;margin-right:5px}.lu-tooltip-panel.is-after{transform-origin:center left;margin-left:5px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "luSafeContent": i2.LuSafeContentPipe }, animations: [luTransformTooltip], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LuTooltipPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-tooltip-panel', animations: [luTransformTooltip], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div [ngClass]=\"panelClassesMap\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\" [innerHtml]=\"content | luSafeContent: 'html'\">\r\n</div> -->\r\n<ng-template>\r\n\t<div\r\n\t\tclass=\"lu-tooltip-panel\"\r\n\t\trole=\"tooltip\"\r\n\t\t[ngClass]=\"panelClassesMap\"\r\n\t\t(mouseover)=\"onMouseOver()\"\r\n\t\t(mouseleave)=\"onMouseLeave()\"\r\n\t\t[attr.id]=\"panelId\"\r\n\t\t[@transformTooltip]=\"'enter'\"\r\n\t>\r\n\t\t<div class=\"lu-tooltip-content\" [ngClass]=\"contentClassesMap\" [innerHtml]=\"content | luSafeContent: 'html'\"></div>\r\n\t</div>\r\n</ng-template>\r\n", styles: [".lu-tooltip-panel{display:block;background:#131D35;background:var(--components-tooltip-background-color);border-radius:4px;border-radius:var(--commons-border-radius);color:#fff;color:var(--components-tooltip-color);font-size:var(--sizes-small-font-size);font-size:.875rem;font-weight:600;line-height:1rem;max-width:15rem;max-width:var(--components-tooltip-max-width);padding:.25rem .5rem;padding:var(--components-tooltip-padding)}.lu-tooltip-panel.is-above{transform-origin:bottom center}.lu-tooltip-panel.is-below{transform-origin:top center;margin-top:2px}.lu-tooltip-panel.is-before{transform-origin:center right;margin-right:5px}.lu-tooltip-panel.is-after{transform-origin:center left;margin-left:5px}\n"] }]
+            args: [{ selector: 'lu-tooltip-panel', animations: [luTransformTooltip], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div [ngClass]=\"panelClassesMap\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\" [innerHtml]=\"content | luSafeContent: 'html'\">\r\n</div> -->\r\n<ng-template>\r\n\t<div\r\n\t\tclass=\"lu-tooltip-panel\"\r\n\t\trole=\"tooltip\"\r\n\t\t[ngClass]=\"panelClassesMap\"\r\n\t\t(mouseover)=\"onMouseOver()\"\r\n\t\t(mouseleave)=\"onMouseLeave()\"\r\n\t\t[attr.id]=\"panelId\"\r\n\t\t[@transformTooltip]=\"'enter'\"\r\n\t>\r\n\t\t<div class=\"lu-tooltip-content\" [ngClass]=\"contentClassesMap\" [innerHtml]=\"content | luSafeContent: 'html'\"></div>\r\n\t</div>\r\n</ng-template>\r\n", styles: [".lu-tooltip-panel{--components-tooltip-background-color: var(--palettes-grey-900);--components-tooltip-color: var(--colors-white-color);--components-tooltip-padding: var(--spacings-smallest) var(--spacings-smaller);--components-tooltip-max-width: 15rem;background:var(--components-tooltip-background-color);color:var(--components-tooltip-color);padding:var(--components-tooltip-padding);max-width:var(--components-tooltip-max-width);border-radius:var(--commons-border-radius);font-size:var(--sizes-small-font-size);font-weight:600;line-height:1rem;display:block}.lu-tooltip-panel.is-above{transform-origin:bottom center}.lu-tooltip-panel.is-below{transform-origin:top center;margin-top:2px}.lu-tooltip-panel.is-before{transform-origin:center right;margin-right:5px}.lu-tooltip-panel.is-after{transform-origin:center left;margin-left:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { animationState: [{
                 type: HostBinding,
                 args: ['@transformTooltip']

package/fesm2015/lucca-front-ng-tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lucca-front-ng-tooltip.mjs","sources":["../../../packages/ng/tooltip/src/lib/animation/tooltip.animation.ts","../../../packages/ng/tooltip/src/lib/panel/tooltip-panel.component.ts","../../../packages/ng/tooltip/src/lib/panel/tooltip-panel.component.html","../../../packages/ng/tooltip/src/lib/panel/tooltip-panel.module.ts","../../../packages/ng/tooltip/src/lib/trigger/tooltip-trigger.directive.ts","../../../packages/ng/tooltip/src/lib/trigger/tooltip-trigger.module.ts","../../../packages/ng/tooltip/src/lib/tooltip.module.ts","../../../packages/ng/tooltip/src/public-api.ts","../../../packages/ng/tooltip/src/lucca-front-ng-tooltip.ts"],"sourcesContent":["import { trigger, state, style, animate, transition, AnimationTriggerMetadata } from '@angular/animations';\r\n\r\nexport const luTransformTooltip: AnimationTriggerMetadata = trigger('transformTooltip', [\r\n\tstate(\r\n\t\t'enter',\r\n\t\tstyle({\r\n\t\t\topacity: 1,\r\n\t\t\ttransform: `scale(1)`,\r\n\t\t}),\r\n\t),\r\n\ttransition('void => *', [\r\n\t\tstyle({\r\n\t\t\topacity: 0,\r\n\t\t\ttransform: `scale(0)`,\r\n\t\t}),\r\n\t\tanimate(`150ms cubic-bezier(0.25, 0.8, 0.25, 1)`),\r\n\t]),\r\n\ttransition('* => void', [animate('50ms 100ms linear', style({ opacity: 0 }))]),\r\n]);\r\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Output, TemplateRef, ViewChild } from '@angular/core';\r\nimport { ALuPopoverPanel, ILuPopoverPanel } from '@lucca-front/ng/popover';\r\nimport { luTransformTooltip } from '../animation/index';\r\n\r\n@Component({\r\n\tselector: 'lu-tooltip-panel',\r\n\ttemplateUrl: './tooltip-panel.component.html',\r\n\tstyleUrls: ['./tooltip-panel.component.scss'],\r\n\tanimations: [luTransformTooltip],\r\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class LuTooltipPanelComponent extends ALuPopoverPanel implements ILuPopoverPanel {\r\n\t@HostBinding('@transformTooltip') animationState = 'enter';\r\n\r\n\tprivate _content: string;\r\n\tget content() {\r\n\t\treturn this._content;\r\n\t}\r\n\tset content(c) {\r\n\t\tthis._content = c;\r\n\t\tthis._changeDetectorRef.markForCheck();\r\n\t}\r\n\r\n\t//FIXME output event\r\n\t// eslint-disable-next-line @angular-eslint/no-output-native\r\n\t@Output() override close = new EventEmitter<void>();\r\n\t// eslint-disable-next-line @angular-eslint/no-output-native\r\n\t@Output() override open = new EventEmitter<void>();\r\n\t@Output() override hovered = new EventEmitter<boolean>();\r\n\t@ViewChild(TemplateRef, { static: true })\r\n\tset vcTemplateRef(tr: TemplateRef<HTMLDivElement>) {\r\n\t\tthis.templateRef = tr;\r\n\t}\r\n\tconstructor(private _changeDetectorRef: ChangeDetectorRef) {\r\n\t\tsuper();\r\n\t\tthis.scrollStrategy = 'close';\r\n\t}\r\n\r\n\t_emitCloseEvent(): void {\r\n\t\tthis.close.emit();\r\n\t}\r\n\r\n\t_emitOpenEvent(): void {\r\n\t\tthis.open.emit();\r\n\t}\r\n\t_emitHoveredEvent(hovered: boolean): void {\r\n\t\tthis.hovered.emit(hovered);\r\n\t}\r\n}\r\n","<!-- <div [ngClass]=\"panelClassesMap\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\" [innerHtml]=\"content | luSafeContent: 'html'\">\r\n</div> -->\r\n<ng-template>\r\n\t<div\r\n\t\tclass=\"lu-tooltip-panel\"\r\n\t\trole=\"tooltip\"\r\n\t\t[ngClass]=\"panelClassesMap\"\r\n\t\t(mouseover)=\"onMouseOver()\"\r\n\t\t(mouseleave)=\"onMouseLeave()\"\r\n\t\t[attr.id]=\"panelId\"\r\n\t\t[@transformTooltip]=\"'enter'\"\r\n\t>\r\n\t\t<div class=\"lu-tooltip-content\" [ngClass]=\"contentClassesMap\" [innerHtml]=\"content | luSafeContent: 'html'\"></div>\r\n\t</div>\r\n</ng-template>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { LuTooltipPanelComponent } from './tooltip-panel.component';\r\nimport { LuSafeContentModule } from '@lucca-front/ng/safe-content';\r\n\r\n@NgModule({\r\n\timports: [CommonModule, LuSafeContentModule],\r\n\tdeclarations: [LuTooltipPanelComponent],\r\n\texports: [LuTooltipPanelComponent],\r\n\tentryComponents: [LuTooltipPanelComponent],\r\n})\r\nexport class LuTooltipPanelModule {}\r\n","import { Overlay } from '@angular/cdk/overlay';\r\nimport { AfterViewInit, ComponentFactoryResolver, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Injector, Input, OnDestroy, Output, ViewContainerRef } from '@angular/core';\r\nimport { ALuPopoverTrigger, LuPopoverPosition, LuPopoverTarget } from '@lucca-front/ng/popover';\r\nimport { LuTooltipPanelComponent } from '../panel/tooltip-panel.component';\r\n\r\n@Directive({\r\n\tselector: '[luTooltip]',\r\n})\r\nexport class LuTooltipTriggerDirective extends ALuPopoverTrigger<LuTooltipPanelComponent, LuPopoverTarget> implements AfterViewInit, OnDestroy {\r\n\t@Input('luTooltip') set tooltipContent(c: string) {\r\n\t\tthis.panel.content = c;\r\n\t}\r\n\t/** when trigger = hover, delay before the popover panel appears, default 300ms */\r\n\t@Input('luTooltipEnterDelay') set inputEnterDelay(d: number) {\r\n\t\tthis.enterDelay = d;\r\n\t}\r\n\t/** when trigger = hover, delay before the popover panel disappears, default 100ms */\r\n\t@Input('luTooltipLeaveDelay') set inputLeaveDelay(d: number) {\r\n\t\tthis.leaveDelay = d;\r\n\t}\r\n\t/** disable popover apparition */\r\n\t@Input('luTooltipDisabled') set inputDisabled(d: boolean) {\r\n\t\tthis.disabled = d;\r\n\t\tif (this._handleTabindex) {\r\n\t\t\tthis._setTabindex(d ? null : 0);\r\n\t\t}\r\n\t}\r\n\r\n\t@Input('luTooltipPosition') set inputPosition(pos: LuPopoverPosition) {\r\n\t\tthis.target.position = pos;\r\n\t}\r\n\r\n\t// FIXME output native\r\n\t/** Event emitted when the associated popover is opened. */\r\n\t// eslint-disable-next-line @angular-eslint/no-output-on-prefix\r\n\t@Output('luTooltipOnOpen') onOpen = new EventEmitter<void>();\r\n\t/** Event emitted when the associated popover is closed. */\r\n\t// eslint-disable-next-line @angular-eslint/no-output-on-prefix\r\n\t@Output('luTooltipOnClose') onClose = new EventEmitter<void>();\r\n\r\n\t@HostListener('mouseenter')\r\n\toverride onMouseEnter() {\r\n\t\tsuper.onMouseEnter();\r\n\t}\r\n\t@HostListener('mouseleave')\r\n\toverride onMouseLeave() {\r\n\t\tsuper.onMouseLeave();\r\n\t}\r\n\t@HostListener('focus')\r\n\toverride onFocus() {\r\n\t\tsuper.onFocus();\r\n\t}\r\n\t@HostListener('blur')\r\n\toverride onBlur() {\r\n\t\tsuper.onBlur();\r\n\t}\r\n\tprivate _handleTabindex = false;\r\n\t// @HostBinding('attr.tabindex') tabindex;\r\n\t// private set tabindex(i: number = null) {\r\n\r\n\t// }\r\n\r\n\t/** accessibility attribute - dont override */\r\n\t@HostBinding('attr.id') get _attrId() {\r\n\t\treturn this._triggerId;\r\n\t}\r\n\t/** accessibility attribute - dont override */\r\n\t@HostBinding('attr.aria-describedby') get _attrAriaDescribedBy() {\r\n\t\treturn this._panelId;\r\n\t}\r\n\r\n\tconstructor(\r\n\t\tprotected override _overlay: Overlay,\r\n\t\tprotected override _elementRef: ElementRef<HTMLElement>,\r\n\t\tprotected override _viewContainerRef: ViewContainerRef,\r\n\t\tcomponentFactoryResolver: ComponentFactoryResolver,\r\n\t\tinjector: Injector,\r\n\t) {\r\n\t\tsuper(_overlay, _elementRef, _viewContainerRef);\r\n\t\tthis.target = new LuPopoverTarget();\r\n\t\tthis.target.elementRef = this._elementRef;\r\n\t\tthis._triggerId = this._elementRef.nativeElement.getAttribute('id') || this._triggerId;\r\n\t\tthis.triggerEvent = 'hover';\r\n\t\tthis.target.position = 'above';\r\n\t\tthis.enterDelay = 300;\r\n\t\tthis.leaveDelay = 100;\r\n\r\n\t\tconst factory = componentFactoryResolver.resolveComponentFactory(LuTooltipPanelComponent);\r\n\t\tthis.panel = factory.create(injector).instance;\r\n\r\n\t\tthis._handleTabindex = this._shouldHandleTabindex();\r\n\r\n\t\tif (this._handleTabindex) {\r\n\t\t\tthis._setTabindex(0);\r\n\t\t}\r\n\t}\r\n\r\n\tngAfterViewInit() {\r\n\t\tthis._checkTarget();\r\n\t}\r\n\tngOnDestroy() {\r\n\t\tthis._cleanUpSubscriptions();\r\n\t\tif (this._popoverOpen) {\r\n\t\t\tthis.closePopover();\r\n\t\t}\r\n\t\tthis.destroyPopover();\r\n\t}\r\n\tprotected _emitOpen(): void {\r\n\t\tthis.onOpen.emit();\r\n\t}\r\n\tprotected _emitClose(): void {\r\n\t\tthis.onClose.emit();\r\n\t}\r\n\r\n\tprivate _shouldHandleTabindex(): boolean {\r\n\t\tconst tag = this._elementRef.nativeElement.tagName?.toLowerCase();\r\n\t\t// https://allyjs.io/data-tables/focusable.html\r\n\t\t// i'm choosing to not support area and iframe, dont @ me\r\n\t\tconst nativelyFocusableTags = ['a', 'button', 'input', 'select', 'textarea'];\r\n\t\tconst isNatevelyFocusableTag = nativelyFocusableTags.includes(tag);\r\n\r\n\t\tconst hasATabIndex = this._elementRef.nativeElement.getAttribute('tabindex') !== null;\r\n\r\n\t\treturn !isNatevelyFocusableTag && !hasATabIndex;\r\n\t}\r\n\r\n\tprivate _setTabindex(i: number = null): void {\r\n\t\tthis._elementRef.nativeElement.setAttribute('tabindex', `${i}`);\r\n\t}\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { OverlayModule } from '@angular/cdk/overlay';\r\nimport { LuTooltipTriggerDirective } from './tooltip-trigger.directive';\r\n\r\n@NgModule({\r\n\timports: [OverlayModule],\r\n\tdeclarations: [LuTooltipTriggerDirective],\r\n\texports: [LuTooltipTriggerDirective],\r\n})\r\nexport class LuTooltipTriggerModule {}\r\n","import { NgModule } from '@angular/core';\r\nimport { LuTooltipTriggerModule } from './trigger/index';\r\nimport { LuTooltipPanelModule } from './panel/index';\r\n\r\n@NgModule({\r\n\timports: [LuTooltipTriggerModule, LuTooltipPanelModule],\r\n\texports: [LuTooltipTriggerModule, LuTooltipPanelModule],\r\n})\r\nexport class LuTooltipModule {}\r\n","/*\r\n * Public API Surface of safe-content\r\n */\r\n\r\nexport * from './index';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"lucca-front-ng-tooltip.mjs","sources":["../../../packages/ng/tooltip/src/lib/animation/tooltip.animation.ts","../../../packages/ng/tooltip/src/lib/panel/tooltip-panel.component.ts","../../../packages/ng/tooltip/src/lib/panel/tooltip-panel.component.html","../../../packages/ng/tooltip/src/lib/panel/tooltip-panel.module.ts","../../../packages/ng/tooltip/src/lib/trigger/tooltip-trigger.directive.ts","../../../packages/ng/tooltip/src/lib/trigger/tooltip-trigger.module.ts","../../../packages/ng/tooltip/src/lib/tooltip.module.ts","../../../packages/ng/tooltip/src/public-api.ts","../../../packages/ng/tooltip/src/lucca-front-ng-tooltip.ts"],"sourcesContent":["import { trigger, state, style, animate, transition, AnimationTriggerMetadata } from '@angular/animations';\r\n\r\nexport const luTransformTooltip: AnimationTriggerMetadata = trigger('transformTooltip', [\r\n\tstate(\r\n\t\t'enter',\r\n\t\tstyle({\r\n\t\t\topacity: 1,\r\n\t\t\ttransform: `scale(1)`,\r\n\t\t}),\r\n\t),\r\n\ttransition('void => *', [\r\n\t\tstyle({\r\n\t\t\topacity: 0,\r\n\t\t\ttransform: `scale(0)`,\r\n\t\t}),\r\n\t\tanimate(`150ms cubic-bezier(0.25, 0.8, 0.25, 1)`),\r\n\t]),\r\n\ttransition('* => void', [animate('50ms 100ms linear', style({ opacity: 0 }))]),\r\n]);\r\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostBinding, Output, TemplateRef, ViewChild } from '@angular/core';\r\nimport { ALuPopoverPanel, ILuPopoverPanel } from '@lucca-front/ng/popover';\r\nimport { luTransformTooltip } from '../animation/index';\r\n\r\n@Component({\r\n\tselector: 'lu-tooltip-panel',\r\n\ttemplateUrl: './tooltip-panel.component.html',\r\n\tstyleUrls: ['./tooltip-panel.component.scss'],\r\n\tanimations: [luTransformTooltip],\r\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class LuTooltipPanelComponent extends ALuPopoverPanel implements ILuPopoverPanel {\r\n\t@HostBinding('@transformTooltip') animationState = 'enter';\r\n\r\n\tprivate _content: string;\r\n\tget content() {\r\n\t\treturn this._content;\r\n\t}\r\n\tset content(c) {\r\n\t\tthis._content = c;\r\n\t\tthis._changeDetectorRef.markForCheck();\r\n\t}\r\n\r\n\t//FIXME output event\r\n\t// eslint-disable-next-line @angular-eslint/no-output-native\r\n\t@Output() override close = new EventEmitter<void>();\r\n\t// eslint-disable-next-line @angular-eslint/no-output-native\r\n\t@Output() override open = new EventEmitter<void>();\r\n\t@Output() override hovered = new EventEmitter<boolean>();\r\n\t@ViewChild(TemplateRef, { static: true })\r\n\tset vcTemplateRef(tr: TemplateRef<HTMLDivElement>) {\r\n\t\tthis.templateRef = tr;\r\n\t}\r\n\tconstructor(private _changeDetectorRef: ChangeDetectorRef) {\r\n\t\tsuper();\r\n\t\tthis.scrollStrategy = 'close';\r\n\t}\r\n\r\n\t_emitCloseEvent(): void {\r\n\t\tthis.close.emit();\r\n\t}\r\n\r\n\t_emitOpenEvent(): void {\r\n\t\tthis.open.emit();\r\n\t}\r\n\t_emitHoveredEvent(hovered: boolean): void {\r\n\t\tthis.hovered.emit(hovered);\r\n\t}\r\n}\r\n","<!-- <div [ngClass]=\"panelClassesMap\" (mouseover)=\"onMouseOver()\" (mouseleave)=\"onMouseLeave()\" [innerHtml]=\"content | luSafeContent: 'html'\">\r\n</div> -->\r\n<ng-template>\r\n\t<div\r\n\t\tclass=\"lu-tooltip-panel\"\r\n\t\trole=\"tooltip\"\r\n\t\t[ngClass]=\"panelClassesMap\"\r\n\t\t(mouseover)=\"onMouseOver()\"\r\n\t\t(mouseleave)=\"onMouseLeave()\"\r\n\t\t[attr.id]=\"panelId\"\r\n\t\t[@transformTooltip]=\"'enter'\"\r\n\t>\r\n\t\t<div class=\"lu-tooltip-content\" [ngClass]=\"contentClassesMap\" [innerHtml]=\"content | luSafeContent: 'html'\"></div>\r\n\t</div>\r\n</ng-template>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { LuTooltipPanelComponent } from './tooltip-panel.component';\r\nimport { LuSafeContentModule } from '@lucca-front/ng/safe-content';\r\n\r\n@NgModule({\r\n\timports: [CommonModule, LuSafeContentModule],\r\n\tdeclarations: [LuTooltipPanelComponent],\r\n\texports: [LuTooltipPanelComponent],\r\n\tentryComponents: [LuTooltipPanelComponent],\r\n})\r\nexport class LuTooltipPanelModule {}\r\n","import { Overlay } from '@angular/cdk/overlay';\r\nimport { AfterViewInit, ComponentFactoryResolver, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Injector, Input, OnDestroy, Output, ViewContainerRef } from '@angular/core';\r\nimport { ALuPopoverTrigger, LuPopoverPosition, LuPopoverTarget } from '@lucca-front/ng/popover';\r\nimport { LuTooltipPanelComponent } from '../panel/tooltip-panel.component';\r\n\r\n@Directive({\r\n\tselector: '[luTooltip]',\r\n})\r\nexport class LuTooltipTriggerDirective extends ALuPopoverTrigger<LuTooltipPanelComponent, LuPopoverTarget> implements AfterViewInit, OnDestroy {\r\n\t@Input('luTooltip') set tooltipContent(c: string) {\r\n\t\tthis.panel.content = c;\r\n\t}\r\n\t/** when trigger = hover, delay before the popover panel appears, default 300ms */\r\n\t@Input('luTooltipEnterDelay') set inputEnterDelay(d: number) {\r\n\t\tthis.enterDelay = d;\r\n\t}\r\n\t/** when trigger = hover, delay before the popover panel disappears, default 100ms */\r\n\t@Input('luTooltipLeaveDelay') set inputLeaveDelay(d: number) {\r\n\t\tthis.leaveDelay = d;\r\n\t}\r\n\t/** disable popover apparition */\r\n\t@Input('luTooltipDisabled') set inputDisabled(d: boolean) {\r\n\t\tthis.disabled = d;\r\n\t\tif (this._handleTabindex) {\r\n\t\t\tthis._setTabindex(d ? null : 0);\r\n\t\t}\r\n\t}\r\n\r\n\t@Input('luTooltipPosition') set inputPosition(pos: LuPopoverPosition) {\r\n\t\tthis.target.position = pos;\r\n\t}\r\n\r\n\t// FIXME output native\r\n\t/** Event emitted when the associated popover is opened. */\r\n\t// eslint-disable-next-line @angular-eslint/no-output-on-prefix\r\n\t@Output('luTooltipOnOpen') onOpen = new EventEmitter<void>();\r\n\t/** Event emitted when the associated popover is closed. */\r\n\t// eslint-disable-next-line @angular-eslint/no-output-on-prefix\r\n\t@Output('luTooltipOnClose') onClose = new EventEmitter<void>();\r\n\r\n\t@HostListener('mouseenter')\r\n\toverride onMouseEnter() {\r\n\t\tsuper.onMouseEnter();\r\n\t}\r\n\t@HostListener('mouseleave')\r\n\toverride onMouseLeave() {\r\n\t\tsuper.onMouseLeave();\r\n\t}\r\n\t@HostListener('focus')\r\n\toverride onFocus() {\r\n\t\tsuper.onFocus();\r\n\t}\r\n\t@HostListener('blur')\r\n\toverride onBlur() {\r\n\t\tsuper.onBlur();\r\n\t}\r\n\tprivate _handleTabindex = false;\r\n\t// @HostBinding('attr.tabindex') tabindex;\r\n\t// private set tabindex(i: number = null) {\r\n\r\n\t// }\r\n\r\n\t/** accessibility attribute - dont override */\r\n\t@HostBinding('attr.id') get _attrId() {\r\n\t\treturn this._triggerId;\r\n\t}\r\n\t/** accessibility attribute - dont override */\r\n\t@HostBinding('attr.aria-describedby') get _attrAriaDescribedBy() {\r\n\t\treturn this._panelId;\r\n\t}\r\n\r\n\tconstructor(\r\n\t\tprotected override _overlay: Overlay,\r\n\t\tprotected override _elementRef: ElementRef<HTMLElement>,\r\n\t\tprotected override _viewContainerRef: ViewContainerRef,\r\n\t\tcomponentFactoryResolver: ComponentFactoryResolver,\r\n\t\tinjector: Injector,\r\n\t) {\r\n\t\tsuper(_overlay, _elementRef, _viewContainerRef);\r\n\t\tthis.target = new LuPopoverTarget();\r\n\t\tthis.target.elementRef = this._elementRef;\r\n\t\tthis._triggerId = this._elementRef.nativeElement.getAttribute('id') || this._triggerId;\r\n\t\tthis.triggerEvent = 'hover';\r\n\t\tthis.target.position = 'above';\r\n\t\tthis.enterDelay = 300;\r\n\t\tthis.leaveDelay = 100;\r\n\r\n\t\tconst factory = componentFactoryResolver.resolveComponentFactory(LuTooltipPanelComponent);\r\n\t\tthis.panel = factory.create(injector).instance;\r\n\r\n\t\tthis._handleTabindex = this._shouldHandleTabindex();\r\n\r\n\t\tif (this._handleTabindex) {\r\n\t\t\tthis._setTabindex(0);\r\n\t\t}\r\n\t}\r\n\r\n\tngAfterViewInit() {\r\n\t\tthis._checkTarget();\r\n\t}\r\n\tngOnDestroy() {\r\n\t\tthis._cleanUpSubscriptions();\r\n\t\tif (this._popoverOpen) {\r\n\t\t\tthis.closePopover();\r\n\t\t}\r\n\t\tthis.destroyPopover();\r\n\t}\r\n\tprotected _emitOpen(): void {\r\n\t\tthis.onOpen.emit();\r\n\t}\r\n\tprotected _emitClose(): void {\r\n\t\tthis.onClose.emit();\r\n\t}\r\n\r\n\tprivate _shouldHandleTabindex(): boolean {\r\n\t\tconst tag = this._elementRef.nativeElement.tagName?.toLowerCase();\r\n\t\t// https://allyjs.io/data-tables/focusable.html\r\n\t\t// i'm choosing to not support area and iframe, dont @ me\r\n\t\tconst nativelyFocusableTags = ['a', 'button', 'input', 'select', 'textarea'];\r\n\t\tconst isNatevelyFocusableTag = nativelyFocusableTags.includes(tag);\r\n\r\n\t\tconst hasATabIndex = this._elementRef.nativeElement.getAttribute('tabindex') !== null;\r\n\r\n\t\treturn !isNatevelyFocusableTag && !hasATabIndex;\r\n\t}\r\n\r\n\tprivate _setTabindex(i: number = null): void {\r\n\t\tthis._elementRef.nativeElement.setAttribute('tabindex', `${i}`);\r\n\t}\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { OverlayModule } from '@angular/cdk/overlay';\r\nimport { LuTooltipTriggerDirective } from './tooltip-trigger.directive';\r\n\r\n@NgModule({\r\n\timports: [OverlayModule],\r\n\tdeclarations: [LuTooltipTriggerDirective],\r\n\texports: [LuTooltipTriggerDirective],\r\n})\r\nexport class LuTooltipTriggerModule {}\r\n","import { NgModule } from '@angular/core';\r\nimport { LuTooltipTriggerModule } from './trigger/index';\r\nimport { LuTooltipPanelModule } from './panel/index';\r\n\r\n@NgModule({\r\n\timports: [LuTooltipTriggerModule, LuTooltipPanelModule],\r\n\texports: [LuTooltipTriggerModule, LuTooltipPanelModule],\r\n})\r\nexport class LuTooltipModule {}\r\n","/*\r\n * Public API Surface of safe-content\r\n */\r\n\r\nexport * from './index';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/lucca-front-ng-user.mjs

@@ -165,10 +165,10 @@ class LuUserPictureComponent {
     }
 }
 LuUserPictureComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LuUserPictureComponent, deps: [{ token: LuUserDisplayPipe }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-LuUserPictureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: LuUserPictureComponent, selector: "lu-user-picture", inputs: { displayFormat: "displayFormat", user: "user" }, ngImport: i0, template: "<div class=\"picture\" [ngStyle]=\"style\">\r\n\t<span *ngIf=\"!hasPicture\">{{ initials }}</span>\r\n</div>\r\n", styles: [":host .picture{border-radius:100%;background-position:center;background-size:cover;background-repeat:no-repeat;color:#fff;font-size:1em;font-size:var(--components-user-picture-sizes-standard-font-size);position:relative;height:2.5em;height:var(--components-user-picture-sizes-standard-image-size);width:2.5em;width:var(--components-user-picture-sizes-standard-image-size)}:host .picture>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host.mod-smallest .picture{font-size:.5em;font-size:var(--components-user-picture-sizes-smallest-font-size);height:2.5em;height:var(--components-user-picture-sizes-smallest-image-size);width:2.5em;width:var(--components-user-picture-sizes-smallest-image-size)}:host.mod-smaller .picture{font-size:.65em;font-size:var(--components-user-picture-sizes-smaller-font-size);height:2.5em;height:var(--components-user-picture-sizes-smaller-image-size);width:2.5em;width:var(--components-user-picture-sizes-smaller-image-size)}:host.mod-small .picture{font-size:.8em;font-size:var(--components-user-picture-sizes-small-font-size);height:2.5em;height:var(--components-user-picture-sizes-small-image-size);width:2.5em;width:var(--components-user-picture-sizes-small-image-size)}:host.mod-standard .picture{font-size:1em;font-size:var(--components-user-picture-sizes-standard-font-size);height:2.5em;height:var(--components-user-picture-sizes-standard-image-size);width:2.5em;width:var(--components-user-picture-sizes-standard-image-size)}:host.mod-large .picture{font-size:1.35em;font-size:var(--components-user-picture-sizes-large-font-size);height:2.5em;height:var(--components-user-picture-sizes-large-image-size);width:2.5em;width:var(--components-user-picture-sizes-large-image-size)}:host.mod-larger .picture{font-size:1.8em;font-size:var(--components-user-picture-sizes-larger-font-size);height:2.5em;height:var(--components-user-picture-sizes-larger-image-size);width:2.5em;width:var(--components-user-picture-sizes-larger-image-size)}:host.mod-largest .picture{font-size:3em;font-size:var(--components-user-picture-sizes-largest-font-size);height:2.5em;height:var(--components-user-picture-sizes-largest-image-size);width:2.5em;width:var(--components-user-picture-sizes-largest-image-size)}\n"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LuUserPictureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: LuUserPictureComponent, selector: "lu-user-picture", inputs: { displayFormat: "displayFormat", user: "user" }, ngImport: i0, template: "<div class=\"picture\" [ngStyle]=\"style\">\r\n\t<span *ngIf=\"!hasPicture\">{{ initials }}</span>\r\n</div>\r\n", styles: [""], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LuUserPictureComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-user-picture', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"picture\" [ngStyle]=\"style\">\r\n\t<span *ngIf=\"!hasPicture\">{{ initials }}</span>\r\n</div>\r\n", styles: [":host .picture{border-radius:100%;background-position:center;background-size:cover;background-repeat:no-repeat;color:#fff;font-size:1em;font-size:var(--components-user-picture-sizes-standard-font-size);position:relative;height:2.5em;height:var(--components-user-picture-sizes-standard-image-size);width:2.5em;width:var(--components-user-picture-sizes-standard-image-size)}:host .picture>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host.mod-smallest .picture{font-size:.5em;font-size:var(--components-user-picture-sizes-smallest-font-size);height:2.5em;height:var(--components-user-picture-sizes-smallest-image-size);width:2.5em;width:var(--components-user-picture-sizes-smallest-image-size)}:host.mod-smaller .picture{font-size:.65em;font-size:var(--components-user-picture-sizes-smaller-font-size);height:2.5em;height:var(--components-user-picture-sizes-smaller-image-size);width:2.5em;width:var(--components-user-picture-sizes-smaller-image-size)}:host.mod-small .picture{font-size:.8em;font-size:var(--components-user-picture-sizes-small-font-size);height:2.5em;height:var(--components-user-picture-sizes-small-image-size);width:2.5em;width:var(--components-user-picture-sizes-small-image-size)}:host.mod-standard .picture{font-size:1em;font-size:var(--components-user-picture-sizes-standard-font-size);height:2.5em;height:var(--components-user-picture-sizes-standard-image-size);width:2.5em;width:var(--components-user-picture-sizes-standard-image-size)}:host.mod-large .picture{font-size:1.35em;font-size:var(--components-user-picture-sizes-large-font-size);height:2.5em;height:var(--components-user-picture-sizes-large-image-size);width:2.5em;width:var(--components-user-picture-sizes-large-image-size)}:host.mod-larger .picture{font-size:1.8em;font-size:var(--components-user-picture-sizes-larger-font-size);height:2.5em;height:var(--components-user-picture-sizes-larger-image-size);width:2.5em;width:var(--components-user-picture-sizes-larger-image-size)}:host.mod-largest .picture{font-size:3em;font-size:var(--components-user-picture-sizes-largest-font-size);height:2.5em;height:var(--components-user-picture-sizes-largest-image-size);width:2.5em;width:var(--components-user-picture-sizes-largest-image-size)}\n"] }]
+            args: [{ selector: 'lu-user-picture', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"picture\" [ngStyle]=\"style\">\r\n\t<span *ngIf=\"!hasPicture\">{{ initials }}</span>\r\n</div>\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: LuUserDisplayPipe }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { displayFormat: [{
                 type: Input
             }], user: [{
@@ -239,10 +239,10 @@ class LuUserTileComponent {
     }
 }
 LuUserTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LuUserTileComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-LuUserTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: LuUserTileComponent, selector: "lu-user-tile", inputs: { user: "user", displayFormat: "displayFormat", role: "role" }, ngImport: i0, template: "<lu-user-picture [user]=\"user\" [displayFormat]=\"displayPictureFormat\"></lu-user-picture>\r\n<div class=\"user-info\">\r\n\t<span class=\"user-tile-label\">{{ role ? role : user?.jobTitle }}</span>\r\n\t<h5 class=\"user-tile-title\">{{ user | luUserDisplay: displayFormat }}</h5>\r\n\t<span class=\"user-tile-footnote\"><ng-content></ng-content></span>\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;padding:.5em}:host lu-user-picture{margin-right:.5em}:host .user-tile-title{font-size:.9em;font-weight:600;line-height:1.3;margin:0}:host .user-tile-label{display:block;font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.1;color:#96a6c5;color:var(--colors-text-light-color)}:host .user-tile-footnote{display:block;font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host .user-info{margin:auto 0;word-break:break-all}:host.mod-nameOnly .user-tile-label,:host.mod-nameOnly .user-tile-footnote{display:none}:host.mod-vertical{flex-direction:column}:host.mod-vertical lu-user-picture{margin-right:0;margin-bottom:.8em}:host.mod-vertical .user-info{text-align:center}:host.mod-smallest lu-user-picture::ng-deep .picture{font-size:.5em;font-size:var(--components-user-picture-sizes-smallest-font-size);height:2.5em;height:var(--components-user-picture-sizes-smallest-image-size);width:2.5em;width:var(--components-user-picture-sizes-smallest-image-size)}:host.mod-smaller lu-user-picture::ng-deep .picture{font-size:.65em;font-size:var(--components-user-picture-sizes-smaller-font-size);height:2.5em;height:var(--components-user-picture-sizes-smaller-image-size);width:2.5em;width:var(--components-user-picture-sizes-smaller-image-size)}:host.mod-small lu-user-picture::ng-deep .picture{font-size:.8em;font-size:var(--components-user-picture-sizes-small-font-size);height:2.5em;height:var(--components-user-picture-sizes-small-image-size);width:2.5em;width:var(--components-user-picture-sizes-small-image-size)}:host.mod-standard lu-user-picture::ng-deep .picture{font-size:1em;font-size:var(--components-user-picture-sizes-standard-font-size);height:2.5em;height:var(--components-user-picture-sizes-standard-image-size);width:2.5em;width:var(--components-user-picture-sizes-standard-image-size)}:host.mod-large lu-user-picture::ng-deep .picture{font-size:1.35em;font-size:var(--components-user-picture-sizes-large-font-size);height:2.5em;height:var(--components-user-picture-sizes-large-image-size);width:2.5em;width:var(--components-user-picture-sizes-large-image-size)}:host.mod-larger lu-user-picture::ng-deep .picture{font-size:1.8em;font-size:var(--components-user-picture-sizes-larger-font-size);height:2.5em;height:var(--components-user-picture-sizes-larger-image-size);width:2.5em;width:var(--components-user-picture-sizes-larger-image-size)}:host.mod-largest lu-user-picture::ng-deep .picture{font-size:3em;font-size:var(--components-user-picture-sizes-largest-font-size);height:2.5em;height:var(--components-user-picture-sizes-largest-image-size);width:2.5em;width:var(--components-user-picture-sizes-largest-image-size)}\n"], components: [{ type: LuUserPictureComponent, selector: "lu-user-picture", inputs: ["displayFormat", "user"] }], pipes: { "luUserDisplay": LuUserDisplayPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LuUserTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: LuUserTileComponent, selector: "lu-user-tile", inputs: { user: "user", displayFormat: "displayFormat", role: "role" }, ngImport: i0, template: "<lu-user-picture [user]=\"user\" [displayFormat]=\"displayPictureFormat\"></lu-user-picture>\r\n<div class=\"user-info\">\r\n\t<span class=\"user-tile-label\">{{ role ? role : user?.jobTitle }}</span>\r\n\t<h5 class=\"user-tile-title\">{{ user | luUserDisplay: displayFormat }}</h5>\r\n\t<span class=\"user-tile-footnote\"><ng-content></ng-content></span>\r\n</div>\r\n", styles: [""], components: [{ type: LuUserPictureComponent, selector: "lu-user-picture", inputs: ["displayFormat", "user"] }], pipes: { "luUserDisplay": LuUserDisplayPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LuUserTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lu-user-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<lu-user-picture [user]=\"user\" [displayFormat]=\"displayPictureFormat\"></lu-user-picture>\r\n<div class=\"user-info\">\r\n\t<span class=\"user-tile-label\">{{ role ? role : user?.jobTitle }}</span>\r\n\t<h5 class=\"user-tile-title\">{{ user | luUserDisplay: displayFormat }}</h5>\r\n\t<span class=\"user-tile-footnote\"><ng-content></ng-content></span>\r\n</div>\r\n", styles: [":host{display:flex;align-items:center;padding:.5em}:host lu-user-picture{margin-right:.5em}:host .user-tile-title{font-size:.9em;font-weight:600;line-height:1.3;margin:0}:host .user-tile-label{display:block;font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.1;color:#96a6c5;color:var(--colors-text-light-color)}:host .user-tile-footnote{display:block;font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host .user-info{margin:auto 0;word-break:break-all}:host.mod-nameOnly .user-tile-label,:host.mod-nameOnly .user-tile-footnote{display:none}:host.mod-vertical{flex-direction:column}:host.mod-vertical lu-user-picture{margin-right:0;margin-bottom:.8em}:host.mod-vertical .user-info{text-align:center}:host.mod-smallest lu-user-picture::ng-deep .picture{font-size:.5em;font-size:var(--components-user-picture-sizes-smallest-font-size);height:2.5em;height:var(--components-user-picture-sizes-smallest-image-size);width:2.5em;width:var(--components-user-picture-sizes-smallest-image-size)}:host.mod-smaller lu-user-picture::ng-deep .picture{font-size:.65em;font-size:var(--components-user-picture-sizes-smaller-font-size);height:2.5em;height:var(--components-user-picture-sizes-smaller-image-size);width:2.5em;width:var(--components-user-picture-sizes-smaller-image-size)}:host.mod-small lu-user-picture::ng-deep .picture{font-size:.8em;font-size:var(--components-user-picture-sizes-small-font-size);height:2.5em;height:var(--components-user-picture-sizes-small-image-size);width:2.5em;width:var(--components-user-picture-sizes-small-image-size)}:host.mod-standard lu-user-picture::ng-deep .picture{font-size:1em;font-size:var(--components-user-picture-sizes-standard-font-size);height:2.5em;height:var(--components-user-picture-sizes-standard-image-size);width:2.5em;width:var(--components-user-picture-sizes-standard-image-size)}:host.mod-large lu-user-picture::ng-deep .picture{font-size:1.35em;font-size:var(--components-user-picture-sizes-large-font-size);height:2.5em;height:var(--components-user-picture-sizes-large-image-size);width:2.5em;width:var(--components-user-picture-sizes-large-image-size)}:host.mod-larger lu-user-picture::ng-deep .picture{font-size:1.8em;font-size:var(--components-user-picture-sizes-larger-font-size);height:2.5em;height:var(--components-user-picture-sizes-larger-image-size);width:2.5em;width:var(--components-user-picture-sizes-larger-image-size)}:host.mod-largest lu-user-picture::ng-deep .picture{font-size:3em;font-size:var(--components-user-picture-sizes-largest-font-size);height:2.5em;height:var(--components-user-picture-sizes-largest-image-size);width:2.5em;width:var(--components-user-picture-sizes-largest-image-size)}\n"] }]
+            args: [{ selector: 'lu-user-tile', changeDetection: ChangeDetectionStrategy.OnPush, template: "<lu-user-picture [user]=\"user\" [displayFormat]=\"displayPictureFormat\"></lu-user-picture>\r\n<div class=\"user-info\">\r\n\t<span class=\"user-tile-label\">{{ role ? role : user?.jobTitle }}</span>\r\n\t<h5 class=\"user-tile-title\">{{ user | luUserDisplay: displayFormat }}</h5>\r\n\t<span class=\"user-tile-footnote\"><ng-content></ng-content></span>\r\n</div>\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { user: [{
                 type: Input
             }], displayFormat: [{
@@ -467,7 +467,7 @@ LuUserPagedSearcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             provide: ALuUserService,
             useClass: LuUserV3Service,
         },
-    ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\r\n\t<div class=\"textfield mod-search\" [class.is-loading]=\"loading$ | async\">\r\n\t\t<input #searchInput class=\"textfield-input\" formControlName=\"clue\" />\r\n\t</div>\r\n\r\n\t<label class=\"checkbox mod-formerEmployee mod-small\" *ngIf=\"enableFormerEmployees\">\r\n\t\t<input class=\"checkbox-input\" type=\"checkbox\" formControlName=\"formerEmployees\" />\r\n\t\t<span class=\"checkbox-label\">{{ intl.includeFormerEmployees }}</span>\r\n\t</label>\r\n</form>\r\n\r\n<lu-option-placeholder *ngIf=\"(empty$ | async) && (loading$ | async) === false\" (onClear)=\"reset()\"></lu-option-placeholder>\r\n", 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:#ff7e29;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: i3.LuOptionPlaceholderComponent, selector: "lu-option-placeholder", outputs: ["onClear"] }], directives: [{ type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\r\n\t<div class=\"textfield mod-search\" [class.is-loading]=\"loading$ | async\">\r\n\t\t<input #searchInput class=\"textfield-input\" formControlName=\"clue\" />\r\n\t</div>\r\n\r\n\t<label class=\"checkbox mod-formerEmployee mod-small\" *ngIf=\"enableFormerEmployees\">\r\n\t\t<input class=\"checkbox-input\" type=\"checkbox\" formControlName=\"formerEmployees\" />\r\n\t\t<span class=\"checkbox-label\">{{ intl.includeFormerEmployees }}</span>\r\n\t</label>\r\n</form>\r\n\r\n<lu-option-placeholder *ngIf=\"(empty$ | async) && (loading$ | async) === false\" (onClear)=\"reset()\"></lu-option-placeholder>\r\n", styles: [""], components: [{ type: i3.LuOptionPlaceholderComponent, selector: "lu-option-placeholder", outputs: ["onClear"] }], directives: [{ type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LuUserPagedSearcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-user-paged-searcher', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -495,7 +495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                             provide: ALuUserService,
                             useClass: LuUserV3Service,
                         },
-                    ], template: "<form [formGroup]=\"form\">\r\n\t<div class=\"textfield mod-search\" [class.is-loading]=\"loading$ | async\">\r\n\t\t<input #searchInput class=\"textfield-input\" formControlName=\"clue\" />\r\n\t</div>\r\n\r\n\t<label class=\"checkbox mod-formerEmployee mod-small\" *ngIf=\"enableFormerEmployees\">\r\n\t\t<input class=\"checkbox-input\" type=\"checkbox\" formControlName=\"formerEmployees\" />\r\n\t\t<span class=\"checkbox-label\">{{ intl.includeFormerEmployees }}</span>\r\n\t</label>\r\n</form>\r\n\r\n<lu-option-placeholder *ngIf=\"(empty$ | async) && (loading$ | async) === false\" (onClear)=\"reset()\"></lu-option-placeholder>\r\n", 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:#ff7e29;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"] }]
+                    ], template: "<form [formGroup]=\"form\">\r\n\t<div class=\"textfield mod-search\" [class.is-loading]=\"loading$ | async\">\r\n\t\t<input #searchInput class=\"textfield-input\" formControlName=\"clue\" />\r\n\t</div>\r\n\r\n\t<label class=\"checkbox mod-formerEmployee mod-small\" *ngIf=\"enableFormerEmployees\">\r\n\t\t<input class=\"checkbox-input\" type=\"checkbox\" formControlName=\"formerEmployees\" />\r\n\t\t<span class=\"checkbox-label\">{{ intl.includeFormerEmployees }}</span>\r\n\t</label>\r\n</form>\r\n\r\n<lu-option-placeholder *ngIf=\"(empty$ | async) && (loading$ | async) === false\" (onClear)=\"reset()\"></lu-option-placeholder>\r\n", styles: [""] }]
         }], ctorParameters: function () {
         return [{ type: LuUserV3Service, decorators: [{
                         type: Inject,
@@ -786,7 +786,7 @@ LuUserSelectInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             useExisting: forwardRef(() => LuUserSelectInputComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<lu-input-clearer></lu-input-clearer>\r\n</div>\r\n<ng-template luDisplayer [luDisplayerMultiple]=\"true\" let-values>\r\n\t<span *ngIf=\"multiple && values?.length > 1; else singleView\"\r\n\t\t><span class=\"chip mod-unkillable\">{{ values.length }}</span> {{ intl.users }}</span\r\n\t>\r\n\t<ng-template #singleView>{{ values[0] || values | luUserDisplay }}</ng-template>\r\n</ng-template>\r\n<lu-option-picker-advanced [option-comparer]=\"byId\">\r\n\t<header class=\"lu-picker-header\">\r\n\t\t<lu-user-paged-searcher\r\n\t\t\t[fields]=\"fields\"\r\n\t\t\t[filters]=\"filters\"\r\n\t\t\t[orderBy]=\"orderBy\"\r\n\t\t\t[appInstanceId]=\"appInstanceId\"\r\n\t\t\t[operations]=\"operations\"\r\n\t\t\t[enableFormerEmployees]=\"enableFormerEmployees\"\r\n\t\t\t(clueChange)=\"clue = $event\"\r\n\t\t></lu-user-paged-searcher>\r\n\t</header>\r\n\t<lu-user-homonyms></lu-user-homonyms>\r\n\t<lu-option\r\n\t\t*luUserMeOption=\"\r\n\t\t\tlet user;\r\n\t\t\tfields: fields;\r\n\t\t\tfilters: filters;\r\n\t\t\torderBy: orderBy;\r\n\t\t\tappInstanceId: appInstanceId;\r\n\t\t\toperations: operations;\r\n\t\t\tclue: clue\r\n\t\t\"\r\n\t\t[value]=\"user\"\r\n\t>\r\n\t\t<div>\r\n\t\t\t<b>{{ intl.me }} {{ user | luUserDisplay: searchFormat }}</b>\r\n\t\t</div>\r\n\t\t<div class=\"lu-select-additionalInformation\" *ngIf=\"user.additionalInformation\">({{ user.additionalInformation }})</div>\r\n\t</lu-option>\r\n\r\n\t<lu-option *luForOptions=\"let user\" [value]=\"user\">\r\n\t\t<div>{{ user | luUserDisplay: searchFormat }}</div>\r\n\t\t<div class=\"lu-select-additionalInformation\" *ngIf=\"user.additionalInformation\">({{ user.additionalInformation }})</div>\r\n\t</lu-option>\r\n</lu-option-picker-advanced>\r\n", styles: [":host{cursor:pointer;outline:none;padding:0}:host:after{content:\"\\e97c\";font-family:Lucca icons;display:inline-block;vertical-align:text-bottom;font-style:normal;color:var(--components-select-default-palette-700);bottom:.5rem;bottom:var(--components-select-input-padding-vertical);font-size:1.2rem;line-height:1.4rem;pointer-events:none;position:absolute;right:.5rem;right:var(--components-select-input-padding-horizontal)}:host[disabled]{cursor:not-allowed;pointer-events:all}:host.is-disabled{cursor:not-allowed;pointer-events:all}.lu-select-display-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-value{line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;display:none}.lu-select-placeholder{color:var(--components-select-default-palette-400);line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix{position:absolute;bottom:.5rem;right:1.6rem}::ng-deep .lu-select-value .label{padding:.25rem .25rem .5rem .5rem;padding:var(--spacings-smallest) var(--spacings-smaller);margin-left:0}::ng-deep .lu-select-value .chip{background:#FF6600;background:var(--components-select-chip-background);color:#fff;color:var(--components-select-chip-text);vertical-align:baseline;max-width:100%;height:1.5rem;height:var(--sizes-standard-line-height);line-height:1.5rem;line-height:var(--sizes-standard-line-height);padding:0 .5rem;padding:0 var(--spacings-smaller);margin:0 .25rem .25rem 0;text-overflow:ellipsis;overflow:hidden;vertical-align:top;white-space:nowrap}:host-context(.textfield.mod-small) .lu-select-value,:host-context(.textfield.mod-small) .lu-select-placeholder{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);min-height:calc(var(--spacings-small) + 1.25rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-small-line-height))}:host-context(.textfield.mod-small):after{line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .label{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);font-weight:600;margin:0;padding:0;background:transparent}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .chip{height:1.25rem;height:var(--sizes-small-line-height);line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding:var(--spacings-big) 0 0;padding:var(--components-select-framed-top-padding) 0 0}:host-context(.textfield.mod-framed).textfield-input:after,:host-context(.form.mod-framed).textfield-input:after{color:#96a6c5;color:var(--colors-text-light-color);bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:.5rem;right:var(--spacings-smaller)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{padding:0 calc(var(--spacings-small) * 3) var(--spacings-small) var(--spacings-small);padding:0 calc(var(--components-select-framed-side-padding) * 3) var(--components-select-framed-bottom-padding) var(--components-select-framed-side-padding)}:host-context(.textfield.mod-framed).textfield-input .lu-select-suffix,:host-context(.form.mod-framed).textfield-input .lu-select-suffix{bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:1.7rem}:host-context(.textfield.mod-filter) .lu-select-value,:host-context(.textfield.mod-filter) .lu-select-placeholder{padding:0;height:auto;padding-top:1rem;color:#2a3551;color:var(--colors-text-default-color)}:host-context(.textfield.mod-filter) .lu-select-suffix{bottom:.4rem}:host-context(.textfield.mod-material):after{color:#96a6c5;color:var(--colors-text-light-color);bottom:.6rem;right:0}:host-context(.textfield.mod-material) .lu-select-value,:host-context(.textfield.mod-material) .lu-select-placeholder{padding-left:0;padding-right:.8rem}:host-context(.textfield.mod-material) .lu-select-suffix{right:1rem;right:calc(2 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material).is-select .lu-select-placeholder{display:none}:host-context(.textfield.mod-material).mod-search:after{bottom:0}:host-context(.textfield.mod-material).mod-search .lu-select-suffix{right:1.375rem;right:calc(2.75 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material .textfield-input.is-focused) .lu-select-placeholder{display:none}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-value{height:auto;align-items:center}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-display-wrapper{overflow:hidden;white-space:normal;margin-bottom:-.25rem}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-right:2.5rem}:host-context(.textfield-input.is-error):after{color:#e51a3b;color:var(--palettes-error-color)}:host-context(.textfield-input.is-error) .lu-select-placeholder{color:#ffe0e6;color:var(--palettes-error-200)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:#999;color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:#bbb;color:var(--commons-disabled-placeholder)}:host-context(.palette-primary) .lu-select-placeholder{color:var(--palettes-primary-400)}:host-context(.palette-primary):after{color:var(--palettes-primary-700)}:host-context(.palette-secondary) .lu-select-placeholder{color:var(--palettes-secondary-400)}:host-context(.palette-secondary):after{color:var(--palettes-secondary-700)}:host-context(.palette-grey) .lu-select-placeholder{color:var(--palettes-grey-400)}:host-context(.palette-grey):after{color:var(--palettes-grey-700)}:host-context(.palette-success) .lu-select-placeholder{color:var(--palettes-success-400)}:host-context(.palette-success):after{color:var(--palettes-success-700)}:host-context(.palette-warning) .lu-select-placeholder{color:var(--palettes-warning-400)}:host-context(.palette-warning):after{color:var(--palettes-warning-700)}:host-context(.palette-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.palette-error):after{color:var(--palettes-error-700)}.lu-select-value{padding-right:2.5rem}.lu-select-additionalInformation{font-size:80%;font-style:italic;margin-top:-.25em}\n"], components: [{ type: i2$2.LuInputClearerComponent, selector: "lu-input-clearer", outputs: ["onClear"], exportAs: ["luClearer"] }, { type: i3.LuOptionPickerAdvancedComponent, selector: "lu-option-picker-advanced", exportAs: ["LuOptionPickerAdvanced"] }, { type: LuUserPagedSearcherComponent, selector: "lu-user-paged-searcher", inputs: ["fields", "filters", "orderBy", "appInstanceId", "operations", "enableFormerEmployees"], outputs: ["clueChange"] }, { type: LuUserHomonymsComponent, selector: "lu-user-homonyms" }, { type: i3.LuOptionItemComponent, selector: "lu-option", inputs: ["selected", "highlighted", "value", "disabled"], outputs: ["onSelect"] }], directives: [{ type: i2$2.LuInputDisplayerDirective, selector: "[luDisplayer]", inputs: ["luDisplayerMultiple", "multiple"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LuUserMeOptionDirective, selector: "[luUserMeOption]", inputs: ["luUserMeOptionFields", "luUserMeOptionFilters", "luUserMeOptionOrderBy", "luUserMeOptionAppInstanceId", "luUserMeOptionOperations", "luUserMeOptionClue"] }, { type: i3.LuForOptionsDirective, selector: "[luForOptions]", inputs: ["luForOptionsTrackBy"] }], pipes: { "luUserDisplay": LuUserDisplayPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<lu-input-clearer></lu-input-clearer>\r\n</div>\r\n<ng-template luDisplayer [luDisplayerMultiple]=\"true\" let-values>\r\n\t<span *ngIf=\"multiple && values?.length > 1; else singleView\"\r\n\t\t><span class=\"chip mod-unkillable\">{{ values.length }}</span> {{ intl.users }}</span\r\n\t>\r\n\t<ng-template #singleView>{{ values[0] || values | luUserDisplay }}</ng-template>\r\n</ng-template>\r\n<lu-option-picker-advanced [option-comparer]=\"byId\">\r\n\t<header class=\"lu-picker-header\">\r\n\t\t<lu-user-paged-searcher\r\n\t\t\t[fields]=\"fields\"\r\n\t\t\t[filters]=\"filters\"\r\n\t\t\t[orderBy]=\"orderBy\"\r\n\t\t\t[appInstanceId]=\"appInstanceId\"\r\n\t\t\t[operations]=\"operations\"\r\n\t\t\t[enableFormerEmployees]=\"enableFormerEmployees\"\r\n\t\t\t(clueChange)=\"clue = $event\"\r\n\t\t></lu-user-paged-searcher>\r\n\t</header>\r\n\t<lu-user-homonyms></lu-user-homonyms>\r\n\t<lu-option\r\n\t\t*luUserMeOption=\"\r\n\t\t\tlet user;\r\n\t\t\tfields: fields;\r\n\t\t\tfilters: filters;\r\n\t\t\torderBy: orderBy;\r\n\t\t\tappInstanceId: appInstanceId;\r\n\t\t\toperations: operations;\r\n\t\t\tclue: clue\r\n\t\t\"\r\n\t\t[value]=\"user\"\r\n\t>\r\n\t\t<div>\r\n\t\t\t<b>{{ intl.me }} {{ user | luUserDisplay: searchFormat }}</b>\r\n\t\t</div>\r\n\t\t<div class=\"lu-select-additionalInformation\" *ngIf=\"user.additionalInformation\">({{ user.additionalInformation }})</div>\r\n\t</lu-option>\r\n\r\n\t<lu-option *luForOptions=\"let user\" [value]=\"user\">\r\n\t\t<div>{{ user | luUserDisplay: searchFormat }}</div>\r\n\t\t<div class=\"lu-select-additionalInformation\" *ngIf=\"user.additionalInformation\">({{ user.additionalInformation }})</div>\r\n\t</lu-option>\r\n</lu-option-picker-advanced>\r\n", styles: [""], components: [{ type: i2$2.LuInputClearerComponent, selector: "lu-input-clearer", outputs: ["onClear"], exportAs: ["luClearer"] }, { type: i3.LuOptionPickerAdvancedComponent, selector: "lu-option-picker-advanced", exportAs: ["LuOptionPickerAdvanced"] }, { type: LuUserPagedSearcherComponent, selector: "lu-user-paged-searcher", inputs: ["fields", "filters", "orderBy", "appInstanceId", "operations", "enableFormerEmployees"], outputs: ["clueChange"] }, { type: LuUserHomonymsComponent, selector: "lu-user-homonyms" }, { type: i3.LuOptionItemComponent, selector: "lu-option", inputs: ["selected", "highlighted", "value", "disabled"], outputs: ["onSelect"] }], directives: [{ type: i2$2.LuInputDisplayerDirective, selector: "[luDisplayer]", inputs: ["luDisplayerMultiple", "multiple"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LuUserMeOptionDirective, selector: "[luUserMeOption]", inputs: ["luUserMeOptionFields", "luUserMeOptionFilters", "luUserMeOptionOrderBy", "luUserMeOptionAppInstanceId", "luUserMeOptionOperations", "luUserMeOptionClue"] }, { type: i3.LuForOptionsDirective, selector: "[luForOptions]", inputs: ["luForOptionsTrackBy"] }], pipes: { "luUserDisplay": LuUserDisplayPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LuUserSelectInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-user-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -795,7 +795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                             useExisting: forwardRef(() => LuUserSelectInputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<lu-input-clearer></lu-input-clearer>\r\n</div>\r\n<ng-template luDisplayer [luDisplayerMultiple]=\"true\" let-values>\r\n\t<span *ngIf=\"multiple && values?.length > 1; else singleView\"\r\n\t\t><span class=\"chip mod-unkillable\">{{ values.length }}</span> {{ intl.users }}</span\r\n\t>\r\n\t<ng-template #singleView>{{ values[0] || values | luUserDisplay }}</ng-template>\r\n</ng-template>\r\n<lu-option-picker-advanced [option-comparer]=\"byId\">\r\n\t<header class=\"lu-picker-header\">\r\n\t\t<lu-user-paged-searcher\r\n\t\t\t[fields]=\"fields\"\r\n\t\t\t[filters]=\"filters\"\r\n\t\t\t[orderBy]=\"orderBy\"\r\n\t\t\t[appInstanceId]=\"appInstanceId\"\r\n\t\t\t[operations]=\"operations\"\r\n\t\t\t[enableFormerEmployees]=\"enableFormerEmployees\"\r\n\t\t\t(clueChange)=\"clue = $event\"\r\n\t\t></lu-user-paged-searcher>\r\n\t</header>\r\n\t<lu-user-homonyms></lu-user-homonyms>\r\n\t<lu-option\r\n\t\t*luUserMeOption=\"\r\n\t\t\tlet user;\r\n\t\t\tfields: fields;\r\n\t\t\tfilters: filters;\r\n\t\t\torderBy: orderBy;\r\n\t\t\tappInstanceId: appInstanceId;\r\n\t\t\toperations: operations;\r\n\t\t\tclue: clue\r\n\t\t\"\r\n\t\t[value]=\"user\"\r\n\t>\r\n\t\t<div>\r\n\t\t\t<b>{{ intl.me }} {{ user | luUserDisplay: searchFormat }}</b>\r\n\t\t</div>\r\n\t\t<div class=\"lu-select-additionalInformation\" *ngIf=\"user.additionalInformation\">({{ user.additionalInformation }})</div>\r\n\t</lu-option>\r\n\r\n\t<lu-option *luForOptions=\"let user\" [value]=\"user\">\r\n\t\t<div>{{ user | luUserDisplay: searchFormat }}</div>\r\n\t\t<div class=\"lu-select-additionalInformation\" *ngIf=\"user.additionalInformation\">({{ user.additionalInformation }})</div>\r\n\t</lu-option>\r\n</lu-option-picker-advanced>\r\n", styles: [":host{cursor:pointer;outline:none;padding:0}:host:after{content:\"\\e97c\";font-family:Lucca icons;display:inline-block;vertical-align:text-bottom;font-style:normal;color:var(--components-select-default-palette-700);bottom:.5rem;bottom:var(--components-select-input-padding-vertical);font-size:1.2rem;line-height:1.4rem;pointer-events:none;position:absolute;right:.5rem;right:var(--components-select-input-padding-horizontal)}:host[disabled]{cursor:not-allowed;pointer-events:all}:host.is-disabled{cursor:not-allowed;pointer-events:all}.lu-select-display-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-value{line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;display:none}.lu-select-placeholder{color:var(--components-select-default-palette-400);line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix{position:absolute;bottom:.5rem;right:1.6rem}::ng-deep .lu-select-value .label{padding:.25rem .25rem .5rem .5rem;padding:var(--spacings-smallest) var(--spacings-smaller);margin-left:0}::ng-deep .lu-select-value .chip{background:#FF6600;background:var(--components-select-chip-background);color:#fff;color:var(--components-select-chip-text);vertical-align:baseline;max-width:100%;height:1.5rem;height:var(--sizes-standard-line-height);line-height:1.5rem;line-height:var(--sizes-standard-line-height);padding:0 .5rem;padding:0 var(--spacings-smaller);margin:0 .25rem .25rem 0;text-overflow:ellipsis;overflow:hidden;vertical-align:top;white-space:nowrap}:host-context(.textfield.mod-small) .lu-select-value,:host-context(.textfield.mod-small) .lu-select-placeholder{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);min-height:calc(var(--spacings-small) + 1.25rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-small-line-height))}:host-context(.textfield.mod-small):after{line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .label{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);font-weight:600;margin:0;padding:0;background:transparent}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .chip{height:1.25rem;height:var(--sizes-small-line-height);line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding:var(--spacings-big) 0 0;padding:var(--components-select-framed-top-padding) 0 0}:host-context(.textfield.mod-framed).textfield-input:after,:host-context(.form.mod-framed).textfield-input:after{color:#96a6c5;color:var(--colors-text-light-color);bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:.5rem;right:var(--spacings-smaller)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{padding:0 calc(var(--spacings-small) * 3) var(--spacings-small) var(--spacings-small);padding:0 calc(var(--components-select-framed-side-padding) * 3) var(--components-select-framed-bottom-padding) var(--components-select-framed-side-padding)}:host-context(.textfield.mod-framed).textfield-input .lu-select-suffix,:host-context(.form.mod-framed).textfield-input .lu-select-suffix{bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:1.7rem}:host-context(.textfield.mod-filter) .lu-select-value,:host-context(.textfield.mod-filter) .lu-select-placeholder{padding:0;height:auto;padding-top:1rem;color:#2a3551;color:var(--colors-text-default-color)}:host-context(.textfield.mod-filter) .lu-select-suffix{bottom:.4rem}:host-context(.textfield.mod-material):after{color:#96a6c5;color:var(--colors-text-light-color);bottom:.6rem;right:0}:host-context(.textfield.mod-material) .lu-select-value,:host-context(.textfield.mod-material) .lu-select-placeholder{padding-left:0;padding-right:.8rem}:host-context(.textfield.mod-material) .lu-select-suffix{right:1rem;right:calc(2 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material).is-select .lu-select-placeholder{display:none}:host-context(.textfield.mod-material).mod-search:after{bottom:0}:host-context(.textfield.mod-material).mod-search .lu-select-suffix{right:1.375rem;right:calc(2.75 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material .textfield-input.is-focused) .lu-select-placeholder{display:none}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-value{height:auto;align-items:center}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-display-wrapper{overflow:hidden;white-space:normal;margin-bottom:-.25rem}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-right:2.5rem}:host-context(.textfield-input.is-error):after{color:#e51a3b;color:var(--palettes-error-color)}:host-context(.textfield-input.is-error) .lu-select-placeholder{color:#ffe0e6;color:var(--palettes-error-200)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:#999;color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:#bbb;color:var(--commons-disabled-placeholder)}:host-context(.palette-primary) .lu-select-placeholder{color:var(--palettes-primary-400)}:host-context(.palette-primary):after{color:var(--palettes-primary-700)}:host-context(.palette-secondary) .lu-select-placeholder{color:var(--palettes-secondary-400)}:host-context(.palette-secondary):after{color:var(--palettes-secondary-700)}:host-context(.palette-grey) .lu-select-placeholder{color:var(--palettes-grey-400)}:host-context(.palette-grey):after{color:var(--palettes-grey-700)}:host-context(.palette-success) .lu-select-placeholder{color:var(--palettes-success-400)}:host-context(.palette-success):after{color:var(--palettes-success-700)}:host-context(.palette-warning) .lu-select-placeholder{color:var(--palettes-warning-400)}:host-context(.palette-warning):after{color:var(--palettes-warning-700)}:host-context(.palette-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.palette-error):after{color:var(--palettes-error-700)}.lu-select-value{padding-right:2.5rem}.lu-select-additionalInformation{font-size:80%;font-style:italic;margin-top:-.25em}\n"] }]
+                    ], template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<lu-input-clearer></lu-input-clearer>\r\n</div>\r\n<ng-template luDisplayer [luDisplayerMultiple]=\"true\" let-values>\r\n\t<span *ngIf=\"multiple && values?.length > 1; else singleView\"\r\n\t\t><span class=\"chip mod-unkillable\">{{ values.length }}</span> {{ intl.users }}</span\r\n\t>\r\n\t<ng-template #singleView>{{ values[0] || values | luUserDisplay }}</ng-template>\r\n</ng-template>\r\n<lu-option-picker-advanced [option-comparer]=\"byId\">\r\n\t<header class=\"lu-picker-header\">\r\n\t\t<lu-user-paged-searcher\r\n\t\t\t[fields]=\"fields\"\r\n\t\t\t[filters]=\"filters\"\r\n\t\t\t[orderBy]=\"orderBy\"\r\n\t\t\t[appInstanceId]=\"appInstanceId\"\r\n\t\t\t[operations]=\"operations\"\r\n\t\t\t[enableFormerEmployees]=\"enableFormerEmployees\"\r\n\t\t\t(clueChange)=\"clue = $event\"\r\n\t\t></lu-user-paged-searcher>\r\n\t</header>\r\n\t<lu-user-homonyms></lu-user-homonyms>\r\n\t<lu-option\r\n\t\t*luUserMeOption=\"\r\n\t\t\tlet user;\r\n\t\t\tfields: fields;\r\n\t\t\tfilters: filters;\r\n\t\t\torderBy: orderBy;\r\n\t\t\tappInstanceId: appInstanceId;\r\n\t\t\toperations: operations;\r\n\t\t\tclue: clue\r\n\t\t\"\r\n\t\t[value]=\"user\"\r\n\t>\r\n\t\t<div>\r\n\t\t\t<b>{{ intl.me }} {{ user | luUserDisplay: searchFormat }}</b>\r\n\t\t</div>\r\n\t\t<div class=\"lu-select-additionalInformation\" *ngIf=\"user.additionalInformation\">({{ user.additionalInformation }})</div>\r\n\t</lu-option>\r\n\r\n\t<lu-option *luForOptions=\"let user\" [value]=\"user\">\r\n\t\t<div>{{ user | luUserDisplay: searchFormat }}</div>\r\n\t\t<div class=\"lu-select-additionalInformation\" *ngIf=\"user.additionalInformation\">({{ user.additionalInformation }})</div>\r\n\t</lu-option>\r\n</lu-option-picker-advanced>\r\n", styles: [""] }]
         }], ctorParameters: function () {
         return [{ type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                         type: Inject,

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

@@ -112,9 +112,7 @@ class LuApiV4Service extends ALuApiService {
         return this._filters;
     }
     set sort(sort) {
-        if (sort) {
-            this._sort = `sort=${sort}`;
-        }
+        this._sort = `sort=${sort}`;
     }
     getAll(filters = []) {
         const query = [...this.filters, ...filters, this._sort].filter((f) => !!f);
@@ -432,7 +430,7 @@ LuApiSearcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: ALuApiService,
             useClass: LuApiHybridService,
         },
-    ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"textfield mod-search\" [class.is-loading]=\"loading$ | async\">\r\n\t<input #searchInput class=\"textfield-input\" [formControl]=\"clueControl\" />\r\n</div>\r\n<lu-option-placeholder *ngIf=\"(empty$ | async) && (loading$ | async) === false\" (onClear)=\"resetClue()\"></lu-option-placeholder>\r\n", 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:#ff7e29;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: i3.LuOptionPlaceholderComponent, selector: "lu-option-placeholder", outputs: ["onClear"] }], directives: [{ type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"textfield mod-search\" [class.is-loading]=\"loading$ | async\">\r\n\t<input #searchInput class=\"textfield-input\" [formControl]=\"clueControl\" />\r\n</div>\r\n<lu-option-placeholder *ngIf=\"(empty$ | async) && (loading$ | async) === false\" (onClear)=\"resetClue()\"></lu-option-placeholder>\r\n", styles: [""], components: [{ type: i3.LuOptionPlaceholderComponent, selector: "lu-option-placeholder", outputs: ["onClear"] }], directives: [{ type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LuApiSearcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-api-searcher', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -450,7 +448,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                             provide: ALuApiService,
                             useClass: LuApiHybridService,
                         },
-                    ], template: "<div class=\"textfield mod-search\" [class.is-loading]=\"loading$ | async\">\r\n\t<input #searchInput class=\"textfield-input\" [formControl]=\"clueControl\" />\r\n</div>\r\n<lu-option-placeholder *ngIf=\"(empty$ | async) && (loading$ | async) === false\" (onClear)=\"resetClue()\"></lu-option-placeholder>\r\n", 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:#ff7e29;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"] }]
+                    ], template: "<div class=\"textfield mod-search\" [class.is-loading]=\"loading$ | async\">\r\n\t<input #searchInput class=\"textfield-input\" [formControl]=\"clueControl\" />\r\n</div>\r\n<lu-option-placeholder *ngIf=\"(empty$ | async) && (loading$ | async) === false\" (onClear)=\"resetClue()\"></lu-option-placeholder>\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: LuApiHybridService, decorators: [{
                     type: Inject,
                     args: [ALuApiService]
@@ -543,7 +541,7 @@ LuApiPagedSearcherComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             provide: ALuApiService,
             useClass: LuApiHybridService,
         },
-    ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"textfield mod-search\" [class.is-loading]=\"loading$ | async\">\r\n\t<input #searchInput class=\"textfield-input\" [formControl]=\"clueControl\" />\r\n</div>\r\n<lu-option-placeholder *ngIf=\"(empty$ | async) && (loading$ | async) === false\" (onClear)=\"resetClue()\"></lu-option-placeholder>\r\n", 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:#ff7e29;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: i3.LuOptionPlaceholderComponent, selector: "lu-option-placeholder", outputs: ["onClear"] }], directives: [{ type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"textfield mod-search\" [class.is-loading]=\"loading$ | async\">\r\n\t<input #searchInput class=\"textfield-input\" [formControl]=\"clueControl\" />\r\n</div>\r\n<lu-option-placeholder *ngIf=\"(empty$ | async) && (loading$ | async) === false\" (onClear)=\"resetClue()\"></lu-option-placeholder>\r\n", styles: [""], components: [{ type: i3.LuOptionPlaceholderComponent, selector: "lu-option-placeholder", outputs: ["onClear"] }], directives: [{ type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LuApiPagedSearcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-api-paged-searcher', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -571,7 +569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                             provide: ALuApiService,
                             useClass: LuApiHybridService,
                         },
-                    ], template: "<div class=\"textfield mod-search\" [class.is-loading]=\"loading$ | async\">\r\n\t<input #searchInput class=\"textfield-input\" [formControl]=\"clueControl\" />\r\n</div>\r\n<lu-option-placeholder *ngIf=\"(empty$ | async) && (loading$ | async) === false\" (onClear)=\"resetClue()\"></lu-option-placeholder>\r\n", 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:#ff7e29;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"] }]
+                    ], template: "<div class=\"textfield mod-search\" [class.is-loading]=\"loading$ | async\">\r\n\t<input #searchInput class=\"textfield-input\" [formControl]=\"clueControl\" />\r\n</div>\r\n<lu-option-placeholder *ngIf=\"(empty$ | async) && (loading$ | async) === false\" (onClear)=\"resetClue()\"></lu-option-placeholder>\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: LuApiHybridService, decorators: [{
                     type: Inject,
                     args: [ALuApiService]
@@ -625,7 +623,6 @@ class LuApiSelectInputComponent extends ALuSelectInputComponent {
         this._elementRef = _elementRef;
         this._viewContainerRef = _viewContainerRef;
         this._renderer = _renderer;
-        this.standard = 'v3';
         this.byId = (option1, option2) => option1 && option2 && option1.id === option2.id;
     }
 }
@@ -636,7 +633,7 @@ LuApiSelectInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             useExisting: forwardRef(() => LuApiSelectInputComponent),
             multi: true,
         },
-    ], usesInheritance: true, ngImport: i0, template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<lu-input-clearer></lu-input-clearer>\r\n</div>\r\n<span [class.chip]=\"multiple\" *luDisplayer=\"let option\">{{ option.name }}</span>\r\n<lu-option-picker-advanced [option-comparer]=\"byId\">\r\n\t<header class=\"lu-picker-header\">\r\n\t\t<lu-api-paged-searcher\r\n\t\t\t[standard]=\"standard\"\r\n\t\t\t[api]=\"api\"\r\n\t\t\t[fields]=\"fields\"\r\n\t\t\t[filters]=\"filters\"\r\n\t\t\t[orderBy]=\"orderBy\"\r\n\t\t\t[sort]=\"sort\"\r\n\t\t></lu-api-paged-searcher>\r\n\t</header>\r\n\t<lu-option *luForOptions=\"let option\" [value]=\"option\">{{ option.name }}</lu-option>\r\n</lu-option-picker-advanced>\r\n", styles: [":host{cursor:pointer;outline:none;padding:0}:host:after{content:\"\\e97c\";font-family:Lucca icons;display:inline-block;vertical-align:text-bottom;font-style:normal;color:var(--components-select-default-palette-700);bottom:.5rem;bottom:var(--components-select-input-padding-vertical);font-size:1.2rem;line-height:1.4rem;pointer-events:none;position:absolute;right:.5rem;right:var(--components-select-input-padding-horizontal)}:host[disabled]{cursor:not-allowed;pointer-events:all}:host.is-disabled{cursor:not-allowed;pointer-events:all}.lu-select-display-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-value{line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;display:none}.lu-select-placeholder{color:var(--components-select-default-palette-400);line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix{position:absolute;bottom:.5rem;right:1.6rem}::ng-deep .lu-select-value .label{padding:.25rem .25rem .5rem .5rem;padding:var(--spacings-smallest) var(--spacings-smaller);margin-left:0}::ng-deep .lu-select-value .chip{background:#FF6600;background:var(--components-select-chip-background);color:#fff;color:var(--components-select-chip-text);vertical-align:baseline;max-width:100%;height:1.5rem;height:var(--sizes-standard-line-height);line-height:1.5rem;line-height:var(--sizes-standard-line-height);padding:0 .5rem;padding:0 var(--spacings-smaller);margin:0 .25rem .25rem 0;text-overflow:ellipsis;overflow:hidden;vertical-align:top;white-space:nowrap}:host-context(.textfield.mod-small) .lu-select-value,:host-context(.textfield.mod-small) .lu-select-placeholder{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);min-height:calc(var(--spacings-small) + 1.25rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-small-line-height))}:host-context(.textfield.mod-small):after{line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .label{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);font-weight:600;margin:0;padding:0;background:transparent}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .chip{height:1.25rem;height:var(--sizes-small-line-height);line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding:var(--spacings-big) 0 0;padding:var(--components-select-framed-top-padding) 0 0}:host-context(.textfield.mod-framed).textfield-input:after,:host-context(.form.mod-framed).textfield-input:after{color:#96a6c5;color:var(--colors-text-light-color);bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:.5rem;right:var(--spacings-smaller)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{padding:0 calc(var(--spacings-small) * 3) var(--spacings-small) var(--spacings-small);padding:0 calc(var(--components-select-framed-side-padding) * 3) var(--components-select-framed-bottom-padding) var(--components-select-framed-side-padding)}:host-context(.textfield.mod-framed).textfield-input .lu-select-suffix,:host-context(.form.mod-framed).textfield-input .lu-select-suffix{bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:1.7rem}:host-context(.textfield.mod-filter) .lu-select-value,:host-context(.textfield.mod-filter) .lu-select-placeholder{padding:0;height:auto;padding-top:1rem;color:#2a3551;color:var(--colors-text-default-color)}:host-context(.textfield.mod-filter) .lu-select-suffix{bottom:.4rem}:host-context(.textfield.mod-material):after{color:#96a6c5;color:var(--colors-text-light-color);bottom:.6rem;right:0}:host-context(.textfield.mod-material) .lu-select-value,:host-context(.textfield.mod-material) .lu-select-placeholder{padding-left:0;padding-right:.8rem}:host-context(.textfield.mod-material) .lu-select-suffix{right:1rem;right:calc(2 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material).is-select .lu-select-placeholder{display:none}:host-context(.textfield.mod-material).mod-search:after{bottom:0}:host-context(.textfield.mod-material).mod-search .lu-select-suffix{right:1.375rem;right:calc(2.75 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material .textfield-input.is-focused) .lu-select-placeholder{display:none}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-value{height:auto;align-items:center}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-display-wrapper{overflow:hidden;white-space:normal;margin-bottom:-.25rem}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-right:2.5rem}:host-context(.textfield-input.is-error):after{color:#e51a3b;color:var(--palettes-error-color)}:host-context(.textfield-input.is-error) .lu-select-placeholder{color:#ffe0e6;color:var(--palettes-error-200)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:#999;color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:#bbb;color:var(--commons-disabled-placeholder)}:host-context(.palette-primary) .lu-select-placeholder{color:var(--palettes-primary-400)}:host-context(.palette-primary):after{color:var(--palettes-primary-700)}:host-context(.palette-secondary) .lu-select-placeholder{color:var(--palettes-secondary-400)}:host-context(.palette-secondary):after{color:var(--palettes-secondary-700)}:host-context(.palette-grey) .lu-select-placeholder{color:var(--palettes-grey-400)}:host-context(.palette-grey):after{color:var(--palettes-grey-700)}:host-context(.palette-success) .lu-select-placeholder{color:var(--palettes-success-400)}:host-context(.palette-success):after{color:var(--palettes-success-700)}:host-context(.palette-warning) .lu-select-placeholder{color:var(--palettes-warning-400)}:host-context(.palette-warning):after{color:var(--palettes-warning-700)}:host-context(.palette-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.palette-error):after{color:var(--palettes-error-700)}.lu-select-value{padding-right:2.5rem}\n"], components: [{ type: i2$1.LuInputClearerComponent, selector: "lu-input-clearer", outputs: ["onClear"], exportAs: ["luClearer"] }, { type: i3.LuOptionPickerAdvancedComponent, selector: "lu-option-picker-advanced", exportAs: ["LuOptionPickerAdvanced"] }, { type: LuApiPagedSearcherComponent, selector: "lu-api-paged-searcher", inputs: ["standard", "api", "fields", "filters", "orderBy", "sort", "debounceTime"] }, { type: i3.LuOptionItemComponent, selector: "lu-option", inputs: ["selected", "highlighted", "value", "disabled"], outputs: ["onSelect"] }], directives: [{ type: i2$1.LuInputDisplayerDirective, selector: "[luDisplayer]", inputs: ["luDisplayerMultiple", "multiple"] }, { type: i3.LuForOptionsDirective, selector: "[luForOptions]", inputs: ["luForOptionsTrackBy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesInheritance: true, ngImport: i0, template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<lu-input-clearer></lu-input-clearer>\r\n</div>\r\n<span [class.chip]=\"multiple\" *luDisplayer=\"let option\">{{ option.name }}</span>\r\n<lu-option-picker-advanced [option-comparer]=\"byId\">\r\n\t<header class=\"lu-picker-header\">\r\n\t\t<lu-api-paged-searcher\r\n\t\t\t[standard]=\"standard\"\r\n\t\t\t[api]=\"api\"\r\n\t\t\t[fields]=\"fields\"\r\n\t\t\t[filters]=\"filters\"\r\n\t\t\t[orderBy]=\"orderBy\"\r\n\t\t\t[sort]=\"sort\"\r\n\t\t></lu-api-paged-searcher>\r\n\t</header>\r\n\t<lu-option *luForOptions=\"let option\" [value]=\"option\">{{ option.name }}</lu-option>\r\n</lu-option-picker-advanced>\r\n", styles: [""], components: [{ type: i2$1.LuInputClearerComponent, selector: "lu-input-clearer", outputs: ["onClear"], exportAs: ["luClearer"] }, { type: i3.LuOptionPickerAdvancedComponent, selector: "lu-option-picker-advanced", exportAs: ["LuOptionPickerAdvanced"] }, { type: LuApiPagedSearcherComponent, selector: "lu-api-paged-searcher", inputs: ["standard", "api", "fields", "filters", "orderBy", "sort", "debounceTime"] }, { type: i3.LuOptionItemComponent, selector: "lu-option", inputs: ["selected", "highlighted", "value", "disabled"], outputs: ["onSelect"] }], directives: [{ type: i2$1.LuInputDisplayerDirective, selector: "[luDisplayer]", inputs: ["luDisplayerMultiple", "multiple"] }, { type: i3.LuForOptionsDirective, selector: "[luForOptions]", inputs: ["luForOptionsTrackBy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: LuApiSelectInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-api-select', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -645,7 +642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
                             useExisting: forwardRef(() => LuApiSelectInputComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<lu-input-clearer></lu-input-clearer>\r\n</div>\r\n<span [class.chip]=\"multiple\" *luDisplayer=\"let option\">{{ option.name }}</span>\r\n<lu-option-picker-advanced [option-comparer]=\"byId\">\r\n\t<header class=\"lu-picker-header\">\r\n\t\t<lu-api-paged-searcher\r\n\t\t\t[standard]=\"standard\"\r\n\t\t\t[api]=\"api\"\r\n\t\t\t[fields]=\"fields\"\r\n\t\t\t[filters]=\"filters\"\r\n\t\t\t[orderBy]=\"orderBy\"\r\n\t\t\t[sort]=\"sort\"\r\n\t\t></lu-api-paged-searcher>\r\n\t</header>\r\n\t<lu-option *luForOptions=\"let option\" [value]=\"option\">{{ option.name }}</lu-option>\r\n</lu-option-picker-advanced>\r\n", styles: [":host{cursor:pointer;outline:none;padding:0}:host:after{content:\"\\e97c\";font-family:Lucca icons;display:inline-block;vertical-align:text-bottom;font-style:normal;color:var(--components-select-default-palette-700);bottom:.5rem;bottom:var(--components-select-input-padding-vertical);font-size:1.2rem;line-height:1.4rem;pointer-events:none;position:absolute;right:.5rem;right:var(--components-select-input-padding-horizontal)}:host[disabled]{cursor:not-allowed;pointer-events:all}:host.is-disabled{cursor:not-allowed;pointer-events:all}.lu-select-display-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-value{line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;display:none}.lu-select-placeholder{color:var(--components-select-default-palette-400);line-height:1.5rem;line-height:var(--sizes-standard-line-height);min-height:calc(var(--spacings-small) + 1.5rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-standard-line-height));padding:.5rem 2.5rem .5rem .5rem;padding:var(--components-select-input-padding-vertical) 2.5rem var(--components-select-input-padding-vertical) var(--components-select-input-padding-horizontal);transition:all .25s ease;transition:all var(--commons-animations-durations-standard) ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lu-select-suffix{position:absolute;bottom:.5rem;right:1.6rem}::ng-deep .lu-select-value .label{padding:.25rem .25rem .5rem .5rem;padding:var(--spacings-smallest) var(--spacings-smaller);margin-left:0}::ng-deep .lu-select-value .chip{background:#FF6600;background:var(--components-select-chip-background);color:#fff;color:var(--components-select-chip-text);vertical-align:baseline;max-width:100%;height:1.5rem;height:var(--sizes-standard-line-height);line-height:1.5rem;line-height:var(--sizes-standard-line-height);padding:0 .5rem;padding:0 var(--spacings-smaller);margin:0 .25rem .25rem 0;text-overflow:ellipsis;overflow:hidden;vertical-align:top;white-space:nowrap}:host-context(.textfield.mod-small) .lu-select-value,:host-context(.textfield.mod-small) .lu-select-placeholder{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);min-height:calc(var(--spacings-small) + 1.25rem);min-height:calc(var(--components-select-framed-bottom-padding) + var(--sizes-small-line-height))}:host-context(.textfield.mod-small):after{line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .label{font-size:.875rem;font-size:var(--sizes-small-font-size);line-height:1.25rem;line-height:var(--sizes-small-line-height);font-weight:600;margin:0;padding:0;background:transparent}:host-context(.textfield.mod-small) ::ng-deep .lu-select-value .chip{height:1.25rem;height:var(--sizes-small-line-height);line-height:1.25rem;line-height:var(--sizes-small-line-height)}:host-context(.textfield.mod-framed).textfield-input,:host-context(.form.mod-framed).textfield-input{padding:var(--spacings-big) 0 0;padding:var(--components-select-framed-top-padding) 0 0}:host-context(.textfield.mod-framed).textfield-input:after,:host-context(.form.mod-framed).textfield-input:after{color:#96a6c5;color:var(--colors-text-light-color);bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:.5rem;right:var(--spacings-smaller)}:host-context(.textfield.mod-framed).textfield-input .lu-select-value,:host-context(.textfield.mod-framed).textfield-input .lu-select-placeholder,:host-context(.form.mod-framed).textfield-input .lu-select-value,:host-context(.form.mod-framed).textfield-input .lu-select-placeholder{padding:0 calc(var(--spacings-small) * 3) var(--spacings-small) var(--spacings-small);padding:0 calc(var(--components-select-framed-side-padding) * 3) var(--components-select-framed-bottom-padding) var(--components-select-framed-side-padding)}:host-context(.textfield.mod-framed).textfield-input .lu-select-suffix,:host-context(.form.mod-framed).textfield-input .lu-select-suffix{bottom:var(--spacings-small);bottom:var(--components-select-framed-bottom-padding);right:1.7rem}:host-context(.textfield.mod-filter) .lu-select-value,:host-context(.textfield.mod-filter) .lu-select-placeholder{padding:0;height:auto;padding-top:1rem;color:#2a3551;color:var(--colors-text-default-color)}:host-context(.textfield.mod-filter) .lu-select-suffix{bottom:.4rem}:host-context(.textfield.mod-material):after{color:#96a6c5;color:var(--colors-text-light-color);bottom:.6rem;right:0}:host-context(.textfield.mod-material) .lu-select-value,:host-context(.textfield.mod-material) .lu-select-placeholder{padding-left:0;padding-right:.8rem}:host-context(.textfield.mod-material) .lu-select-suffix{right:1rem;right:calc(2 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material).is-select .lu-select-placeholder{display:none}:host-context(.textfield.mod-material).mod-search:after{bottom:0}:host-context(.textfield.mod-material).mod-search .lu-select-suffix{right:1.375rem;right:calc(2.75 * var(--components-select-input-padding-horizontal))}:host-context(.textfield.mod-material .textfield-input.is-focused) .lu-select-placeholder{display:none}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-value{height:auto;align-items:center}:host(.mod-multiple).mod-multipleView:not(.mod-singleLine) .lu-select-display-wrapper{overflow:hidden;white-space:normal;margin-bottom:-.25rem}:host-context(.textfield-input.is-filled) .lu-select-placeholder{display:none}:host-context(.textfield-input.is-filled) .lu-select-value{display:flex}:host-context(.textfield-input.is-clearable) .lu-select-value{padding-right:2.5rem}:host-context(.textfield-input.is-error):after{color:#e51a3b;color:var(--palettes-error-color)}:host-context(.textfield-input.is-error) .lu-select-placeholder{color:#ffe0e6;color:var(--palettes-error-200)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]):after{color:#999;color:var(--commons-disabled-color)}:host-context(.textfield-input.is-disabled,.textfield-input[disabled]) .lu-select-placeholder{color:#bbb;color:var(--commons-disabled-placeholder)}:host-context(.palette-primary) .lu-select-placeholder{color:var(--palettes-primary-400)}:host-context(.palette-primary):after{color:var(--palettes-primary-700)}:host-context(.palette-secondary) .lu-select-placeholder{color:var(--palettes-secondary-400)}:host-context(.palette-secondary):after{color:var(--palettes-secondary-700)}:host-context(.palette-grey) .lu-select-placeholder{color:var(--palettes-grey-400)}:host-context(.palette-grey):after{color:var(--palettes-grey-700)}:host-context(.palette-success) .lu-select-placeholder{color:var(--palettes-success-400)}:host-context(.palette-success):after{color:var(--palettes-success-700)}:host-context(.palette-warning) .lu-select-placeholder{color:var(--palettes-warning-400)}:host-context(.palette-warning):after{color:var(--palettes-warning-700)}:host-context(.palette-error) .lu-select-placeholder{color:var(--palettes-error-400)}:host-context(.palette-error):after{color:var(--palettes-error-700)}.lu-select-value{padding-right:2.5rem}\n"] }]
+                    ], template: "<div class=\"lu-select-placeholder\">{{ placeholder }}</div>\r\n<div class=\"lu-select-value\">\r\n\t<div class=\"lu-select-display-wrapper\">\r\n\t\t<ng-container #display></ng-container>\r\n\t</div>\r\n</div>\r\n<div class=\"lu-select-suffix\">\r\n\t<lu-input-clearer></lu-input-clearer>\r\n</div>\r\n<span [class.chip]=\"multiple\" *luDisplayer=\"let option\">{{ option.name }}</span>\r\n<lu-option-picker-advanced [option-comparer]=\"byId\">\r\n\t<header class=\"lu-picker-header\">\r\n\t\t<lu-api-paged-searcher\r\n\t\t\t[standard]=\"standard\"\r\n\t\t\t[api]=\"api\"\r\n\t\t\t[fields]=\"fields\"\r\n\t\t\t[filters]=\"filters\"\r\n\t\t\t[orderBy]=\"orderBy\"\r\n\t\t\t[sort]=\"sort\"\r\n\t\t></lu-api-paged-searcher>\r\n\t</header>\r\n\t<lu-option *luForOptions=\"let option\" [value]=\"option\">{{ option.name }}</lu-option>\r\n</lu-option-picker-advanced>\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }]; }, propDecorators: { standard: [{
                 type: Input
             }], api: [{