@leanix/components 0.3.14 → 0.3.17

package/esm2020/lib/core-ui/components/ellipsis/ellipsis.component.mjs

@@ -109,7 +109,7 @@ export class EllipsisComponent {
 }
 EllipsisComponent.DEFAULT_RESIZE_DEBOUNCE_MS = 500;
 EllipsisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: EllipsisComponent, deps: [{ token: LX_ELLIPSIS_DEBOUNCE_ON_RESIZE }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.ResizeObserverService }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-EllipsisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: EllipsisComponent, selector: "lx-ellipsis", inputs: { content: "content", escapeHtmlInContent: "escapeHtmlInContent" }, viewQueries: [{ propertyName: "contentSpanEl", first: true, predicate: ["contentEl"], descendants: true }, { propertyName: "showMoreButtonEl", first: true, predicate: ["showMoreButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<span\n  #contentEl\n  [class.showMore]=\"isShowingMore$ | async\"\n  class=\"content truncate lx-margin-right\"\n  [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n<button *ngIf=\"showButton$ | async\" (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n  {{ showMoreButtonLabel$ | async }}\n</button>\n", styles: [":host{display:block}.content{display:inline-block}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"], components: [{ type: i3.ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EllipsisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: EllipsisComponent, selector: "lx-ellipsis", inputs: { content: "content", escapeHtmlInContent: "escapeHtmlInContent" }, viewQueries: [{ propertyName: "contentSpanEl", first: true, predicate: ["contentEl"], descendants: true }, { propertyName: "showMoreButtonEl", first: true, predicate: ["showMoreButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<span\n  #contentEl\n  [class.showMore]=\"isShowingMore$ | async\"\n  class=\"content truncate lx-margin-right\"\n  [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n<button *ngIf=\"showButton$ | async\" (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n  {{ showMoreButtonLabel$ | async }}\n</button>\n", styles: [":host{display:block}.content{display:inline-block;word-break:break-word}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"], components: [{ type: i3.ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     Observe('contentSpanEl')
 ], EllipsisComponent.prototype, "contentSpanEl$", void 0);
@@ -121,7 +121,7 @@ __decorate([
 ], EllipsisComponent.prototype, "content$", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: EllipsisComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-ellipsis', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  #contentEl\n  [class.showMore]=\"isShowingMore$ | async\"\n  class=\"content truncate lx-margin-right\"\n  [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n<button *ngIf=\"showButton$ | async\" (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n  {{ showMoreButtonLabel$ | async }}\n</button>\n", styles: [":host{display:block}.content{display:inline-block}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"] }]
+            args: [{ selector: 'lx-ellipsis', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  #contentEl\n  [class.showMore]=\"isShowingMore$ | async\"\n  class=\"content truncate lx-margin-right\"\n  [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n<button *ngIf=\"showButton$ | async\" (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n  {{ showMoreButtonLabel$ | async }}\n</button>\n", styles: [":host{display:block}.content{display:inline-block;word-break:break-word}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [LX_ELLIPSIS_DEBOUNCE_ON_RESIZE]

package/esm2020/lib/forms-ui/components/option/option.component.mjs

@@ -18,6 +18,7 @@ export class OptionComponent {
          * Cannot have selectedState when Option has dropdown
          */
         this.hasSelectedState = true;
+        this.selectIcon = 'check';
         this.select = new EventEmitter();
         this.highlight = new EventEmitter();
         this.selectedClick = new EventEmitter();
@@ -49,10 +50,10 @@ export class OptionComponent {
     }
 }
 OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: OptionComponent, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n  <i *ngIf=\"hasSelectedState && selected\" class=\"far fa-check\"></i>\n  <ng-content></ng-content>\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.fa-check{line-height:23px;position:absolute;left:8px}.fa-chevron-right{line-height:23px;position:absolute;right:8px;font-size:8px}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: OptionComponent, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n  <ng-container *ngIf=\"hasSelectedState\">\n    <ng-container [ngSwitch]=\"selectIcon\">\n      <ng-container *ngSwitchCase=\"'check'\">\n        <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'circle'\">\n        <i class=\"fal fa-circle\"></i>\n        <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <ng-content></ng-content>\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-option', template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n  <i *ngIf=\"hasSelectedState && selected\" class=\"far fa-check\"></i>\n  <ng-content></ng-content>\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.fa-check{line-height:23px;position:absolute;left:8px}.fa-chevron-right{line-height:23px;position:absolute;right:8px;font-size:8px}\n"] }]
+            args: [{ selector: 'lx-option', template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n  <ng-container *ngIf=\"hasSelectedState\">\n    <ng-container [ngSwitch]=\"selectIcon\">\n      <ng-container *ngSwitchCase=\"'check'\">\n        <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'circle'\">\n        <i class=\"fal fa-circle\"></i>\n        <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <ng-content></ng-content>\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.OptionGroupComponent, decorators: [{
                     type: Optional
                 }, {
@@ -68,6 +69,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Input
             }], hasSelectedState: [{
                 type: Input
+            }], selectIcon: [{
+                type: Input
             }], select: [{
                 type: Output
             }], highlight: [{
@@ -78,4 +81,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9zcmMvbGliL2Zvcm1zLXVpL2NvbXBvbmVudHMvb3B0aW9uL29wdGlvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvc3JjL2xpYi9mb3Jtcy11aS9jb21wb25lbnRzL29wdGlvbi9vcHRpb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0gsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7Ozs7QUFPOUUsTUFBTSxPQUFPLGVBQWU7SUFzQzFCLFlBQ3NFLEtBQTJCLEVBQ3hGLFVBQW1DO1FBRDBCLFVBQUssR0FBTCxLQUFLLENBQXNCO1FBQ3hGLGVBQVUsR0FBVixVQUFVLENBQXlCO1FBdkNuQyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBQzFCLGtCQUFhLEdBQVksS0FBSyxDQUFDO1FBQy9CLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFFbkM7Ozs7OztXQU1HO1FBQ00scUJBQWdCLEdBQVksSUFBSSxDQUFDO1FBRWhDLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQzVCLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBQ3hDLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUU3QyxtQkFBYyxHQUFZLEtBQUssQ0FBQztRQUNoQyxnQkFBVyxHQUFZLEtBQUssQ0FBQztJQXNCMUIsQ0FBQztJQW5CSixZQUFZLENBQUMsS0FBa0I7UUFDN0IsSUFBSSxJQUFJLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxjQUFjLEVBQUU7WUFDeEMsSUFBSSxLQUFLLEVBQUU7Z0JBQ1QsS0FBSyxDQUFDLHdCQUF3QixFQUFFLENBQUM7YUFDbEM7U0FDRjthQUFNO1lBQ0wsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFO2dCQUNqQixPQUFPLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxFQUFFLENBQUM7YUFDbEM7WUFDRCxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7Z0JBQ2QsSUFBSSxDQUFDLEtBQUssQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO2FBQ3JDO1lBQ0QsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQzlCO0lBQ0gsQ0FBQztJQU9ELFdBQVcsQ0FBQyxLQUFjO1FBQ3hCLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO0lBQ3hCLENBQUM7SUFFRCxjQUFjLENBQUMsS0FBYztRQUMzQixJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztRQUMzQixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDMUMsQ0FBQzs7NEdBbERVLGVBQWUsa0JBdUNKLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxvQkFBb0IsQ0FBQztnR0F2Q2pELGVBQWUsZ1ZDUjVCLHVhQVlBOzJGREphLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0UsV0FBVzs7MEJBMkNsQixRQUFROzswQkFBSSxNQUFNOzJCQUFDLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxvQkFBb0IsQ0FBQztxRUF0Q25ELFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFRRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBRUksTUFBTTtzQkFBZixNQUFNO2dCQUNHLFNBQVM7c0JBQWxCLE1BQU07Z0JBQ0csYUFBYTtzQkFBdEIsTUFBTTtnQkFNUCxZQUFZO3NCQURYLFlBQVk7dUJBQUMsT0FBTyxFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIGZvcndhcmRSZWYsIEhvc3RMaXN0ZW5lciwgSW5qZWN0LCBJbnB1dCwgT3B0aW9uYWwsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgT3B0aW9uR3JvdXBDb21wb25lbnQgfSBmcm9tICcuLi9vcHRpb24tZ3JvdXAvb3B0aW9uLWdyb3VwLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2x4LW9wdGlvbicsXG4gIHRlbXBsYXRlVXJsOiAnb3B0aW9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJ29wdGlvbi5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIE9wdGlvbkNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHNlbGVjdGVkOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGlzSGlnaGxpZ2h0ZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgdmFsdWU6IGFueTtcbiAgLyoqXG4gICAqIElzIHRydWUgd2hlbiBvcHRpb24gaGFzIGEgc2VsZWN0aW9uIG5hdHVyZSBsaWtlIHNvcnRpbmcuXG4gICAqIEluIHRoaXMgY2FzZSB3ZSBzaG93IGEgY2hlY2sgaWNvbiBvbiB0aGUgbGVmdCB0byBpbmRpY2F0ZSBzZWxlY3Rpb24uXG4gICAqXG4gICAqIElzIGZhbHNlIHdoZW4gb3B0aW9uIHJlcHJlc2VudHMgYSBvbmUgdGltZSBhY3Rpb24gbGlrZSBwcmludGluZy5cbiAgICogQ2Fubm90IGhhdmUgc2VsZWN0ZWRTdGF0ZSB3aGVuIE9wdGlvbiBoYXMgZHJvcGRvd25cbiAgICovXG4gIEBJbnB1dCgpIGhhc1NlbGVjdGVkU3RhdGU6IGJvb2xlYW4gPSB0cnVlO1xuXG4gIEBPdXRwdXQoKSBzZWxlY3QgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBPdXRwdXQoKSBoaWdobGlnaHQgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG4gIEBPdXRwdXQoKSBzZWxlY3RlZENsaWNrID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIGhhc1N1YmRyb3Bkb3duOiBib29sZWFuID0gZmFsc2U7XG4gIGlzU3Vib3B0aW9uOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snLCBbJyRldmVudCddKVxuICBzZWxlY3RPcHRpb24oZXZlbnQ/OiBNb3VzZUV2ZW50KSB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZWQgfHwgdGhpcy5oYXNTdWJkcm9wZG93bikge1xuICAgICAgaWYgKGV2ZW50KSB7XG4gICAgICAgIGV2ZW50LnN0b3BJbW1lZGlhdGVQcm9wYWdhdGlvbigpO1xuICAgICAgfVxuICAgIH0gZWxzZSB7XG4gICAgICBpZiAodGhpcy5zZWxlY3RlZCkge1xuICAgICAgICByZXR1cm4gdGhpcy5zZWxlY3RlZENsaWNrLmVtaXQoKTtcbiAgICAgIH1cbiAgICAgIGlmICh0aGlzLmdyb3VwKSB7XG4gICAgICAgIHRoaXMuZ3JvdXAuc2VsZWN0T3B0aW9uKHRoaXMudmFsdWUpO1xuICAgICAgfVxuICAgICAgdGhpcy5zZWxlY3QuZW1pdCh0aGlzLnZhbHVlKTtcbiAgICB9XG4gIH1cblxuICBjb25zdHJ1Y3RvcihcbiAgICBAT3B0aW9uYWwoKSBASW5qZWN0KGZvcndhcmRSZWYoKCkgPT4gT3B0aW9uR3JvdXBDb21wb25lbnQpKSBwcml2YXRlIGdyb3VwOiBPcHRpb25Hcm91cENvbXBvbmVudCxcbiAgICBwdWJsaWMgZWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MRWxlbWVudD5cbiAgKSB7fVxuXG4gIHNldFNlbGVjdGVkKHZhbHVlOiBib29sZWFuKSB7XG4gICAgdGhpcy5zZWxlY3RlZCA9IHZhbHVlO1xuICB9XG5cbiAgc2V0SGlnaGxpZ2h0ZWQodmFsdWU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLmlzSGlnaGxpZ2h0ZWQgPSB2YWx1ZTtcbiAgICB0aGlzLmhpZ2hsaWdodC5lbWl0KHRoaXMuaXNIaWdobGlnaHRlZCk7XG4gIH1cbn1cbiIsIjxsaVxuICBjbGFzcz1cIm9wdGlvblwiXG4gIFtjbGFzcy5zZWxlY3RlZFN0YXRlXT1cImhhc1NlbGVjdGVkU3RhdGUgJiYgIWhhc1N1YmRyb3Bkb3duXCJcbiAgW2NsYXNzLmhpZ2hsaWdodGVkXT1cImlzSGlnaGxpZ2h0ZWRcIlxuICBbY2xhc3Muc2VsZWN0ZWRdPVwic2VsZWN0ZWRcIlxuICBbY2xhc3MuZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICBbY2xhc3MuaGFzU3ViZHJvcGRvd25dPVwiaGFzU3ViZHJvcGRvd25cIlxuPlxuICA8aSAqbmdJZj1cImhhc1NlbGVjdGVkU3RhdGUgJiYgc2VsZWN0ZWRcIiBjbGFzcz1cImZhciBmYS1jaGVja1wiPjwvaT5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8aSAqbmdJZj1cImhhc1N1YmRyb3Bkb3duXCIgY2xhc3M9XCJmYXIgZmEtY2hldnJvbi1yaWdodFwiPjwvaT5cbjwvbGk+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvY29tcG9uZW50cy9zcmMvbGliL2Zvcm1zLXVpL2NvbXBvbmVudHMvb3B0aW9uL29wdGlvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2NvbXBvbmVudHMvc3JjL2xpYi9mb3Jtcy11aS9jb21wb25lbnRzL29wdGlvbi9vcHRpb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0gsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7Ozs7QUFPOUUsTUFBTSxPQUFPLGVBQWU7SUF1QzFCLFlBQ3NFLEtBQTJCLEVBQ3hGLFVBQW1DO1FBRDBCLFVBQUssR0FBTCxLQUFLLENBQXNCO1FBQ3hGLGVBQVUsR0FBVixVQUFVLENBQXlCO1FBeENuQyxhQUFRLEdBQVksS0FBSyxDQUFDO1FBQzFCLGtCQUFhLEdBQVksS0FBSyxDQUFDO1FBQy9CLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFFbkM7Ozs7OztXQU1HO1FBQ00scUJBQWdCLEdBQVksSUFBSSxDQUFDO1FBQ2pDLGVBQVUsR0FBdUIsT0FBTyxDQUFDO1FBRXhDLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQzVCLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBQ3hDLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUU3QyxtQkFBYyxHQUFZLEtBQUssQ0FBQztRQUNoQyxnQkFBVyxHQUFZLEtBQUssQ0FBQztJQXNCMUIsQ0FBQztJQW5CSixZQUFZLENBQUMsS0FBa0I7UUFDN0IsSUFBSSxJQUFJLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxjQUFjLEVBQUU7WUFDeEMsSUFBSSxLQUFLLEVBQUU7Z0JBQ1QsS0FBSyxDQUFDLHdCQUF3QixFQUFFLENBQUM7YUFDbEM7U0FDRjthQUFNO1lBQ0wsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFO2dCQUNqQixPQUFPLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxFQUFFLENBQUM7YUFDbEM7WUFDRCxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7Z0JBQ2QsSUFBSSxDQUFDLEtBQUssQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO2FBQ3JDO1lBQ0QsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQzlCO0lBQ0gsQ0FBQztJQU9ELFdBQVcsQ0FBQyxLQUFjO1FBQ3hCLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO0lBQ3hCLENBQUM7SUFFRCxjQUFjLENBQUMsS0FBYztRQUMzQixJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztRQUMzQixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDMUMsQ0FBQzs7NEdBbkRVLGVBQWUsa0JBd0NKLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxvQkFBb0IsQ0FBQztnR0F4Q2pELGVBQWUsMFdDUjVCLGd4QkFzQkE7MkZEZGEsZUFBZTtrQkFMM0IsU0FBUzsrQkFDRSxXQUFXOzswQkE0Q2xCLFFBQVE7OzBCQUFJLE1BQU07MkJBQUMsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLG9CQUFvQixDQUFDO3FFQXZDbkQsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQVFHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUVJLE1BQU07c0JBQWYsTUFBTTtnQkFDRyxTQUFTO3NCQUFsQixNQUFNO2dCQUNHLGFBQWE7c0JBQXRCLE1BQU07Z0JBTVAsWUFBWTtzQkFEWCxZQUFZO3VCQUFDLE9BQU8sRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBmb3J3YXJkUmVmLCBIb3N0TGlzdGVuZXIsIEluamVjdCwgSW5wdXQsIE9wdGlvbmFsLCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE9wdGlvbkdyb3VwQ29tcG9uZW50IH0gZnJvbSAnLi4vb3B0aW9uLWdyb3VwL29wdGlvbi1ncm91cC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdseC1vcHRpb24nLFxuICB0ZW1wbGF0ZVVybDogJ29wdGlvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWydvcHRpb24uY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBPcHRpb25Db21wb25lbnQge1xuICBASW5wdXQoKSBzZWxlY3RlZDogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBpc0hpZ2hsaWdodGVkOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHZhbHVlOiBhbnk7XG4gIC8qKlxuICAgKiBJcyB0cnVlIHdoZW4gb3B0aW9uIGhhcyBhIHNlbGVjdGlvbiBuYXR1cmUgbGlrZSBzb3J0aW5nLlxuICAgKiBJbiB0aGlzIGNhc2Ugd2Ugc2hvdyBhIGNoZWNrIGljb24gb24gdGhlIGxlZnQgdG8gaW5kaWNhdGUgc2VsZWN0aW9uLlxuICAgKlxuICAgKiBJcyBmYWxzZSB3aGVuIG9wdGlvbiByZXByZXNlbnRzIGEgb25lIHRpbWUgYWN0aW9uIGxpa2UgcHJpbnRpbmcuXG4gICAqIENhbm5vdCBoYXZlIHNlbGVjdGVkU3RhdGUgd2hlbiBPcHRpb24gaGFzIGRyb3Bkb3duXG4gICAqL1xuICBASW5wdXQoKSBoYXNTZWxlY3RlZFN0YXRlOiBib29sZWFuID0gdHJ1ZTtcbiAgQElucHV0KCkgc2VsZWN0SWNvbjogJ2NoZWNrJyB8ICdjaXJjbGUnID0gJ2NoZWNrJztcblxuICBAT3V0cHV0KCkgc2VsZWN0ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgaGlnaGxpZ2h0ID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuICBAT3V0cHV0KCkgc2VsZWN0ZWRDbGljayA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBoYXNTdWJkcm9wZG93bjogYm9vbGVhbiA9IGZhbHNlO1xuICBpc1N1Ym9wdGlvbjogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJywgWyckZXZlbnQnXSlcbiAgc2VsZWN0T3B0aW9uKGV2ZW50PzogTW91c2VFdmVudCkge1xuICAgIGlmICh0aGlzLmRpc2FibGVkIHx8IHRoaXMuaGFzU3ViZHJvcGRvd24pIHtcbiAgICAgIGlmIChldmVudCkge1xuICAgICAgICBldmVudC5zdG9wSW1tZWRpYXRlUHJvcGFnYXRpb24oKTtcbiAgICAgIH1cbiAgICB9IGVsc2Uge1xuICAgICAgaWYgKHRoaXMuc2VsZWN0ZWQpIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuc2VsZWN0ZWRDbGljay5lbWl0KCk7XG4gICAgICB9XG4gICAgICBpZiAodGhpcy5ncm91cCkge1xuICAgICAgICB0aGlzLmdyb3VwLnNlbGVjdE9wdGlvbih0aGlzLnZhbHVlKTtcbiAgICAgIH1cbiAgICAgIHRoaXMuc2VsZWN0LmVtaXQodGhpcy52YWx1ZSk7XG4gICAgfVxuICB9XG5cbiAgY29uc3RydWN0b3IoXG4gICAgQE9wdGlvbmFsKCkgQEluamVjdChmb3J3YXJkUmVmKCgpID0+IE9wdGlvbkdyb3VwQ29tcG9uZW50KSkgcHJpdmF0ZSBncm91cDogT3B0aW9uR3JvdXBDb21wb25lbnQsXG4gICAgcHVibGljIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+XG4gICkge31cblxuICBzZXRTZWxlY3RlZCh2YWx1ZTogYm9vbGVhbikge1xuICAgIHRoaXMuc2VsZWN0ZWQgPSB2YWx1ZTtcbiAgfVxuXG4gIHNldEhpZ2hsaWdodGVkKHZhbHVlOiBib29sZWFuKSB7XG4gICAgdGhpcy5pc0hpZ2hsaWdodGVkID0gdmFsdWU7XG4gICAgdGhpcy5oaWdobGlnaHQuZW1pdCh0aGlzLmlzSGlnaGxpZ2h0ZWQpO1xuICB9XG59XG4iLCI8bGlcbiAgY2xhc3M9XCJvcHRpb25cIlxuICBbY2xhc3Muc2VsZWN0ZWRTdGF0ZV09XCJoYXNTZWxlY3RlZFN0YXRlICYmICFoYXNTdWJkcm9wZG93blwiXG4gIFtjbGFzcy5oaWdobGlnaHRlZF09XCJpc0hpZ2hsaWdodGVkXCJcbiAgW2NsYXNzLnNlbGVjdGVkXT1cInNlbGVjdGVkXCJcbiAgW2NsYXNzLmRpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgW2NsYXNzLmhhc1N1YmRyb3Bkb3duXT1cImhhc1N1YmRyb3Bkb3duXCJcbj5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImhhc1NlbGVjdGVkU3RhdGVcIj5cbiAgICA8bmctY29udGFpbmVyIFtuZ1N3aXRjaF09XCJzZWxlY3RJY29uXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCInY2hlY2snXCI+XG4gICAgICAgIDxpICpuZ0lmPVwic2VsZWN0ZWRcIiBjbGFzcz1cImZhciBmYS1jaGVja1wiPjwvaT5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiJ2NpcmNsZSdcIj5cbiAgICAgICAgPGkgY2xhc3M9XCJmYWwgZmEtY2lyY2xlXCI+PC9pPlxuICAgICAgICA8aSAqbmdJZj1cInNlbGVjdGVkXCIgY2xhc3M9XCJmYXMgZmEtY2lyY2xlXCI+PC9pPlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9uZy1jb250YWluZXI+XG4gIDwvbmctY29udGFpbmVyPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIDxpICpuZ0lmPVwiaGFzU3ViZHJvcGRvd25cIiBjbGFzcz1cImZhciBmYS1jaGV2cm9uLXJpZ2h0XCI+PC9pPlxuPC9saT5cbiJdfQ==

package/esm2020/lib/forms-ui/components/sorting-dropdown/sorting-dropdown.component.mjs

@@ -38,7 +38,7 @@ export class SortingDropdownComponent {
     }
 }
 SortingDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SortingDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SortingDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SortingDropdownComponent, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n  <lx-sorting-dropdown-trigger\n    lxKeyboardActionSource\n    [label]=\"NAME + '.sortBy' | translate\"\n    [currentSortingLabel]=\"getSortLabel(currentSorting?.key) | translate\"\n  >\n  </lx-sorting-dropdown-trigger>\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting?.key\">\n      {{ getSortLabel(option?.key) | translate }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting?.order\">\n      {{ 'sorting.' + currentSorting?.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], components: [{ type: i1.OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect"] }, { type: i2.SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { type: i3.OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { type: i4.OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState"], outputs: ["select", "highlight", "selectedClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i7.TranslatePipe } });
+SortingDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SortingDropdownComponent, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n  <lx-sorting-dropdown-trigger\n    lxKeyboardActionSource\n    [label]=\"NAME + '.sortBy' | translate\"\n    [currentSortingLabel]=\"getSortLabel(currentSorting?.key) | translate\"\n  >\n  </lx-sorting-dropdown-trigger>\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting?.key\">\n      {{ getSortLabel(option?.key) | translate }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting?.order\">\n      {{ 'sorting.' + currentSorting?.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], components: [{ type: i1.OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect"] }, { type: i2.SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { type: i3.OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { type: i4.OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i7.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SortingDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-sorting-dropdown', template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n  <lx-sorting-dropdown-trigger\n    lxKeyboardActionSource\n    [label]=\"NAME + '.sortBy' | translate\"\n    [currentSortingLabel]=\"getSortLabel(currentSorting?.key) | translate\"\n  >\n  </lx-sorting-dropdown-trigger>\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting?.key\">\n      {{ getSortLabel(option?.key) | translate }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting?.order\">\n      {{ 'sorting.' + currentSorting?.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n", styles: [""] }]

package/fesm2015/leanix-components.mjs

@@ -689,7 +689,7 @@ class EllipsisComponent {
 }
 EllipsisComponent.DEFAULT_RESIZE_DEBOUNCE_MS = 500;
 EllipsisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: EllipsisComponent, deps: [{ token: LX_ELLIPSIS_DEBOUNCE_ON_RESIZE }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ResizeObserverService }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-EllipsisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: EllipsisComponent, selector: "lx-ellipsis", inputs: { content: "content", escapeHtmlInContent: "escapeHtmlInContent" }, viewQueries: [{ propertyName: "contentSpanEl", first: true, predicate: ["contentEl"], descendants: true }, { propertyName: "showMoreButtonEl", first: true, predicate: ["showMoreButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<span\n  #contentEl\n  [class.showMore]=\"isShowingMore$ | async\"\n  class=\"content truncate lx-margin-right\"\n  [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n<button *ngIf=\"showButton$ | async\" (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n  {{ showMoreButtonLabel$ | async }}\n</button>\n", styles: [":host{display:block}.content{display:inline-block}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"], components: [{ type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EllipsisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: EllipsisComponent, selector: "lx-ellipsis", inputs: { content: "content", escapeHtmlInContent: "escapeHtmlInContent" }, viewQueries: [{ propertyName: "contentSpanEl", first: true, predicate: ["contentEl"], descendants: true }, { propertyName: "showMoreButtonEl", first: true, predicate: ["showMoreButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<span\n  #contentEl\n  [class.showMore]=\"isShowingMore$ | async\"\n  class=\"content truncate lx-margin-right\"\n  [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n<button *ngIf=\"showButton$ | async\" (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n  {{ showMoreButtonLabel$ | async }}\n</button>\n", styles: [":host{display:block}.content{display:inline-block;word-break:break-word}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"], components: [{ type: ButtonComponent, selector: "button[lx-button]", inputs: ["size", "color", "mode", "pressed", "selected", "square", "circle", "disabled", "showSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     Observe('contentSpanEl')
 ], EllipsisComponent.prototype, "contentSpanEl$", void 0);
@@ -701,7 +701,7 @@ __decorate([
 ], EllipsisComponent.prototype, "content$", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: EllipsisComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-ellipsis', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  #contentEl\n  [class.showMore]=\"isShowingMore$ | async\"\n  class=\"content truncate lx-margin-right\"\n  [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n<button *ngIf=\"showButton$ | async\" (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n  {{ showMoreButtonLabel$ | async }}\n</button>\n", styles: [":host{display:block}.content{display:inline-block}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"] }]
+            args: [{ selector: 'lx-ellipsis', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  #contentEl\n  [class.showMore]=\"isShowingMore$ | async\"\n  class=\"content truncate lx-margin-right\"\n  [innerHtml]=\"sanitizedContent$ | async\"\n></span>\n<button *ngIf=\"showButton$ | async\" (click)=\"onShowMoreToggle()\" lx-button #showMoreButton size=\"auto\" mode=\"link\" color=\"primary\">\n  {{ showMoreButtonLabel$ | async }}\n</button>\n", styles: [":host{display:block}.content{display:inline-block;word-break:break-word}.truncate:not(.showMore){width:calc(100% - 140px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content.showMore+button{margin-top:4px;display:block}button{white-space:nowrap;vertical-align:top}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -2318,6 +2318,7 @@ class OptionComponent {
          * Cannot have selectedState when Option has dropdown
          */
         this.hasSelectedState = true;
+        this.selectIcon = 'check';
         this.select = new EventEmitter();
         this.highlight = new EventEmitter();
         this.selectedClick = new EventEmitter();
@@ -2349,10 +2350,10 @@ class OptionComponent {
     }
 }
 OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: OptionComponent, deps: [{ token: forwardRef(() => OptionGroupComponent), optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: OptionComponent, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n  <i *ngIf=\"hasSelectedState && selected\" class=\"far fa-check\"></i>\n  <ng-content></ng-content>\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.fa-check{line-height:23px;position:absolute;left:8px}.fa-chevron-right{line-height:23px;position:absolute;right:8px;font-size:8px}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: OptionComponent, selector: "lx-option", inputs: { selected: "selected", isHighlighted: "isHighlighted", disabled: "disabled", value: "value", hasSelectedState: "hasSelectedState", selectIcon: "selectIcon" }, outputs: { select: "select", highlight: "highlight", selectedClick: "selectedClick" }, host: { listeners: { "click": "selectOption($event)" } }, ngImport: i0, template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n  <ng-container *ngIf=\"hasSelectedState\">\n    <ng-container [ngSwitch]=\"selectIcon\">\n      <ng-container *ngSwitchCase=\"'check'\">\n        <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'circle'\">\n        <i class=\"fal fa-circle\"></i>\n        <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <ng-content></ng-content>\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lx-option', template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n  <i *ngIf=\"hasSelectedState && selected\" class=\"far fa-check\"></i>\n  <ng-content></ng-content>\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.fa-check{line-height:23px;position:absolute;left:8px}.fa-chevron-right{line-height:23px;position:absolute;right:8px;font-size:8px}\n"] }]
+            args: [{ selector: 'lx-option', template: "<li\n  class=\"option\"\n  [class.selectedState]=\"hasSelectedState && !hasSubdropdown\"\n  [class.highlighted]=\"isHighlighted\"\n  [class.selected]=\"selected\"\n  [class.disabled]=\"disabled\"\n  [class.hasSubdropdown]=\"hasSubdropdown\"\n>\n  <ng-container *ngIf=\"hasSelectedState\">\n    <ng-container [ngSwitch]=\"selectIcon\">\n      <ng-container *ngSwitchCase=\"'check'\">\n        <i *ngIf=\"selected\" class=\"far fa-check\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'circle'\">\n        <i class=\"fal fa-circle\"></i>\n        <i *ngIf=\"selected\" class=\"fas fa-circle\"></i>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n  <ng-content></ng-content>\n  <i *ngIf=\"hasSubdropdown\" class=\"far fa-chevron-right\"></i>\n</li>\n", styles: [":host{display:block}.option{line-height:23px;padding:4px 12px;cursor:pointer;color:#2a303d;position:relative}.option:hover{background-color:#e1e5eb}.option.selectedState{padding-left:28px}.option.selected{cursor:default;color:var(--lx-primarybutton-backgroundcolor)}.option.highlighted{background:#eaedf1}.option.disabled{opacity:.6}.option.hasSubdropdown{padding-right:28px}.option i{line-height:23px;position:absolute;top:calc(50% - 11.5px)}.fa-check{left:8px}.fa-circle{left:6px;font-size:16px;width:16px;text-align:center}.fas.fa-circle{font-size:8px;color:inherit}.fa-chevron-right{right:8px;font-size:8px}\n"] }]
         }], ctorParameters: function () {
         return [{ type: OptionGroupComponent, decorators: [{
                         type: Optional
@@ -2370,6 +2371,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
                 type: Input
             }], hasSelectedState: [{
                 type: Input
+            }], selectIcon: [{
+                type: Input
             }], select: [{
                 type: Output
             }], highlight: [{
@@ -5403,7 +5406,7 @@ class SortingDropdownComponent {
     }
 }
 SortingDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SortingDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SortingDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SortingDropdownComponent, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n  <lx-sorting-dropdown-trigger\n    lxKeyboardActionSource\n    [label]=\"NAME + '.sortBy' | translate\"\n    [currentSortingLabel]=\"getSortLabel(currentSorting?.key) | translate\"\n  >\n  </lx-sorting-dropdown-trigger>\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting?.key\">\n      {{ getSortLabel(option?.key) | translate }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting?.order\">\n      {{ 'sorting.' + currentSorting?.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], components: [{ type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect"] }, { type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState"], outputs: ["select", "highlight", "selectedClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$1.TranslatePipe } });
+SortingDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: SortingDropdownComponent, selector: "lx-sorting-dropdown", inputs: { currentSorting: "currentSorting", sortingOptions: "sortingOptions" }, outputs: { apply: "apply" }, ngImport: i0, template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n  <lx-sorting-dropdown-trigger\n    lxKeyboardActionSource\n    [label]=\"NAME + '.sortBy' | translate\"\n    [currentSortingLabel]=\"getSortLabel(currentSorting?.key) | translate\"\n  >\n  </lx-sorting-dropdown-trigger>\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting?.key\">\n      {{ getSortLabel(option?.key) | translate }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting?.order\">\n      {{ 'sorting.' + currentSorting?.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n", styles: [""], components: [{ type: OptionsDropdownComponent, selector: "lx-options-dropdown", inputs: ["align", "closeOnScroll", "disabled", "maxHeight", "closeOnSelect"] }, { type: SortingDropdownTriggerComponent, selector: "lx-sorting-dropdown-trigger", inputs: ["label", "currentSortingLabel", "disabled"] }, { type: OptionGroupComponent, selector: "lx-option-group", inputs: ["hasSelectedState", "label"], outputs: ["select"] }, { type: OptionComponent, selector: "lx-option", inputs: ["selected", "isHighlighted", "disabled", "value", "hasSelectedState", "selectIcon"], outputs: ["select", "highlight", "selectedClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: KeyboardActionSourceDirective, selector: "[lxKeyboardActionSource]", exportAs: ["keyboardActionSource"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: SortingDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lx-sorting-dropdown', template: "<lx-options-dropdown *ngIf=\"currentSorting\">\n  <lx-sorting-dropdown-trigger\n    lxKeyboardActionSource\n    [label]=\"NAME + '.sortBy' | translate\"\n    [currentSortingLabel]=\"getSortLabel(currentSorting?.key) | translate\"\n  >\n  </lx-sorting-dropdown-trigger>\n  <lx-option-group (select)=\"applySortingMode($event)\">\n    <lx-option *ngFor=\"let option of sortingOptions\" [value]=\"option\" [selected]=\"option.key === currentSorting?.key\">\n      {{ getSortLabel(option?.key) | translate }}\n    </lx-option>\n  </lx-option-group>\n  <lx-option-group (select)=\"applySortingDirection($event)\">\n    <lx-option *ngFor=\"let sortDirection of sortingDirections\" [value]=\"sortDirection\" [selected]=\"sortDirection === currentSorting?.order\">\n      {{ 'sorting.' + currentSorting?.key + '.' + sortDirection | translate }}\n    </lx-option>\n  </lx-option-group>\n</lx-options-dropdown>\n", styles: [""] }]